/* Playbook88 */

/* THEME: bg=#0A0E23 accent=#FFB020 */
:root{
--navy:#0A0E23;
--navy2:#0E1636;
--line:#243455;
--orange:#FFB020;
--ink:#EAF1FF;
--mut:#A7B7D6;
--bg:#0A0E23;
--card:#0B1534;
--white:#fff;

--glow: 0 0 18px rgba(255,176,32,.22), 0 0 44px rgba(255,176,32,.12);
--neonline: rgba(255,176,32,.55);
--panel: linear-gradient(180deg, rgba(14,22,54,.92) 0%, rgba(10,14,35,.92) 100%);
--panel2: linear-gradient(180deg, rgba(20,28,68,.75) 0%, rgba(8,12,28,.75) 100%);
--reels: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 24px);
--pin: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 10px);
--subtlegrid: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, rgba(255,255,255,0) 1px 28px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font:16px/1.75 "Segoe UI",system-ui,Arial,sans-serif;
background:
radial-gradient(1200px 700px at 20% -10%, rgba(255,176,32,.12) 0%, rgba(255,176,32,0) 55%),
radial-gradient(900px 600px at 110% 10%, rgba(0,255,209,.07) 0%, rgba(0,255,209,0) 60%),
radial-gradient(1100px 800px at 50% 120%, rgba(92,71,255,.10) 0%, rgba(92,71,255,0) 58%),
linear-gradient(180deg, #070A18 0%, var(--bg) 22%, #070A18 120%);
color:var(--ink);
text-rendering:optimizeLegibility;
}

h1,h2,h3{
font-family:Georgia,"Times New Roman",serif;
line-height:1.3;
color:#F7FBFF;
text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

a{
color:#FFD48A;
text-decoration:none;
text-shadow: 0 0 10px rgba(255,176,32,.10);
}
a:hover{text-decoration:underline}

.mono{font-family:Consolas,"Courier New",monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

header.site{
background:
linear-gradient(180deg, rgba(12,16,42,.96) 0%, rgba(8,10,24,.92) 100%);
border-bottom:1px solid rgba(255,176,32,.22);
position:sticky;top:0;z-index:40;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
header.site::before{
content:"";
position:absolute;
left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg, rgba(255,176,32,0) 0%, rgba(255,176,32,.9) 20%, rgba(0,255,209,.35) 50%, rgba(255,176,32,.9) 80%, rgba(255,176,32,0) 100%);
filter:drop-shadow(0 0 10px rgba(255,176,32,.35));
pointer-events:none;
}
header.site::after{
content:"";
position:absolute;
left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%);
pointer-events:none;
}

.hbar{display:flex;align-items:center;gap:18px;padding:12px 0}

.logo{
display:flex;align-items:center;gap:10px;
font-family:Consolas,monospace;
font-weight:700;font-size:19px;color:#fff;letter-spacing:.5px;
text-shadow: 0 0 18px rgba(255,176,32,.10);
}
.logo .sq{
width:30px;height:30px;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 32%),
linear-gradient(180deg, #FFD07A 0%, var(--orange) 55%, #D88400 100%);
color:#0B0F25;
display:grid;place-items:center;
border-radius:6px;font-size:15px;
box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,176,32,.35), var(--glow);
position:relative;
}
.logo .sq::after{
content:"";
position:absolute;inset:1px;
border-radius:5px;
background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
pointer-events:none;
mix-blend-mode:screen;
}
.logo em{color:var(--orange);font-style:normal;text-shadow: 0 0 14px rgba(255,176,32,.22)}

nav.main{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
nav.main a{
color:var(--mut);
font-size:14px;
padding:7px 11px;border-radius:6px;
border:1px solid transparent;
background:transparent;
}
nav.main a:hover{
color:#fff;
background:
linear-gradient(180deg, rgba(255,176,32,.14) 0%, rgba(255,176,32,.06) 100%);
border-color: rgba(255,176,32,.28);
text-decoration:none;
box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 10px 18px rgba(0,0,0,.25);
}

.burger{display:none}

main{padding:34px 0 60px}

.hero{
background:
radial-gradient(900px 420px at 25% 20%, rgba(255,176,32,.16) 0%, rgba(255,176,32,0) 55%),
radial-gradient(900px 520px at 80% 0%, rgba(0,255,209,.08) 0%, rgba(0,255,209,0) 55%),
linear-gradient(160deg, #070A18 0%, #0A0E23 35%, #0E1636 75%, #0A0E23 100%);
border-bottom:1px solid rgba(255,176,32,.20);
padding:56px 0 40px;
position:relative;
overflow:hidden;
}
.hero::before{
content:"";
position:absolute;
left:-10%;right:-10%;
top:18px;
height:64px;
background:
linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0)),
var(--reels),
linear-gradient(90deg, rgba(255,176,32,0) 0%, rgba(255,176,32,.10) 25%, rgba(255,176,32,.06) 50%, rgba(255,176,32,.10) 75%, rgba(255,176,32,0) 100%);
border-top:1px solid rgba(255,176,32,.16);
border-bottom:1px solid rgba(255,176,32,.14);
filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
opacity:.85;
pointer-events:none;
}
.hero::after{
content:"";
position:absolute;inset:0;
background:
radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
var(--subtlegrid);
opacity:.55;
pointer-events:none;
}

.hero .kick{
font-family:Consolas,monospace;
color:var(--orange);
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:14px;
text-shadow: 0 0 12px rgba(255,176,32,.25);
position:relative;
display:inline-block;
}
.hero .kick::after{
content:"";
position:absolute;left:0;right:-10px;bottom:-6px;height:1px;
background:linear-gradient(90deg, rgba(255,176,32,.0) 0%, rgba(255,176,32,.85) 45%, rgba(0,255,209,.25) 70%, rgba(255,176,32,0) 100%);
filter:drop-shadow(0 0 10px rgba(255,176,32,.25));
pointer-events:none;
}

.hero h1{
font-size:34px;
max-width:840px;
color:#FDF7EA;
text-shadow:
0 1px 0 rgba(0,0,0,.65),
0 0 18px rgba(255,176,32,.12);
}
.hero .lede{
max-width:820px;margin-top:18px;
color:rgba(234,241,255,.82);
}
.hero .cta{
display:inline-block;margin-top:22px;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 35%),
linear-gradient(180deg, #FFE0A6 0%, var(--orange) 55%, #D88400 100%);
color:#0B0F25;
font-weight:800;
padding:11px 22px;border-radius:10px;
box-shadow:
0 12px 24px rgba(0,0,0,.35),
0 0 0 1px rgba(255,176,32,.45),
0 0 0 2px rgba(0,0,0,.25) inset,
var(--glow);
position:relative;
}
.hero .cta::after{
content:"";
position:absolute;inset:1px;
border-radius:9px;
background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
pointer-events:none;
}
.hero .cta:hover{
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 35%),
linear-gradient(180deg, #FFE8BB 0%, #FFC04A 55%, #E08C00 100%);
text-decoration:none;
box-shadow:
0 14px 28px rgba(0,0,0,.40),
0 0 0 1px rgba(255,176,32,.60),
0 0 30px rgba(255,176,32,.18);
}

.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center}

.hero-fig img{
width:100%;height:auto;
border:1px solid rgba(255,176,32,.22);
border-radius:12px;
background:rgba(10,14,35,.6);
box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.35) inset;
}

.rail{display:grid;grid-template-columns:230px 1fr;gap:30px}

.rail-toc{
position:sticky;top:74px;align-self:start;
background:var(--panel);
border:1px solid rgba(255,176,32,.18);
border-radius:12px;
padding:16px;
font-size:13.5px;
box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.30) inset;
position:sticky;
overflow:hidden;
}
.rail-toc::before{
content:"";
position:absolute;inset:0;
background:
var(--pin),
radial-gradient(700px 240px at 30% 0%, rgba(255,176,32,.10) 0%, rgba(255,176,32,0) 60%);
opacity:.6;
pointer-events:none;
}
.rail-toc::after{
content:"";
position:absolute;left:10px;right:10px;top:10px;bottom:10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}

.rail-toc .t{
font-family:Consolas,monospace;
color:var(--orange);
letter-spacing:2px;
font-size:12px;
margin-bottom:8px;
text-shadow: 0 0 12px rgba(255,176,32,.22);
position:relative;
z-index:1;
}
.rail-toc ol{list-style:none;position:relative;z-index:1}
.rail-toc li{margin:2px 0}
.rail-toc a{
color:rgba(234,241,255,.75);
display:block;
padding:5px 8px;
border-left:2px solid rgba(255,176,32,.16);
border-radius:6px;
}
.rail-toc a:hover{
color:#fff;
border-color:var(--orange);
background:linear-gradient(180deg, rgba(255,176,32,.12), rgba(255,176,32,.05));
text-decoration:none;
box-shadow: 0 0 0 1px rgba(255,176,32,.14);
}

.chapter{
display:grid;grid-template-columns:86px 1fr;gap:18px;
background:var(--panel2);
border:1px solid rgba(255,176,32,.18);
border-radius:14px;
padding:24px 24px 24px 18px;
margin:18px 0;
box-shadow: 0 22px 48px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.28) inset;
position:relative;
overflow:hidden;
}
.chapter::before{
content:"";
position:absolute;inset:0;
background:
radial-gradient(900px 380px at 25% 0%, rgba(255,176,32,.08) 0%, rgba(255,176,32,0) 58%),
var(--pin);
opacity:.55;
pointer-events:none;
}
.chapter::after{
content:"";
position:absolute;
left:12px;right:12px;top:12px;bottom:12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}

.chapter .num{
font-family:Consolas,monospace;
font-size:30px;
color:var(--orange);
border-right:1px dashed rgba(255,176,32,.22);
padding-right:10px;
text-shadow: 0 0 16px rgba(255,176,32,.18);
position:relative;
z-index:1;
}
.chapter h2{
font-size:22px;
margin-bottom:10px;
color:#FDF7EA;
text-shadow:
0 1px 0 rgba(0,0,0,.65),
0 0 16px rgba(255,176,32,.10);
position:relative;
z-index:1;
}
.chapter :is(p,ul,ol,table){margin:10px 0;position:relative;z-index:1}
.chapter table{
width:100%;
border-collapse:collapse;
font-size:14.5px;
display:block;
overflow-x:auto;
background:rgba(8,10,24,.25);
border-radius:10px;
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.chapter th{
background:
linear-gradient(180deg, rgba(255,176,32,.16) 0%, rgba(14,22,54,.88) 55%, rgba(10,14,35,.88) 100%);
color:#FFE0A6;
text-align:left;
padding:8px 10px;
border:1px solid rgba(255,176,32,.18);
}
.chapter td{
padding:8px 10px;
border:1px solid rgba(36,52,85,.95);
color:rgba(234,241,255,.88);
}

.crumbs{font-size:13px;color:rgba(234,241,255,.70);margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/ ";color:var(--orange);text-shadow:0 0 10px rgba(255,176,32,.18)}
.crumbs a{color:rgba(234,241,255,.72)}
.crumbs a:hover{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,176,32,.45)}

.art-head{
border-left:4px solid var(--orange);
padding-left:18px;
margin-bottom:14px;
position:relative;
}
.art-head::before{
content:"";
position:absolute;
left:-4px;top:0;bottom:0;width:4px;
background:linear-gradient(180deg, rgba(255,176,32,1) 0%, rgba(255,176,32,.35) 100%);
box-shadow: 0 0 18px rgba(255,176,32,.20);
}
.art-head h1{
font-size:30px;
color:#FDF7EA;
text-shadow:
0 1px 0 rgba(0,0,0,.65),
0 0 20px rgba(255,176,32,.12);
}
.art-meta{font-size:13px;color:rgba(234,241,255,.65)}

.toc{
background:var(--panel);
border:1px solid rgba(255,176,32,.18);
border-radius:12px;
padding:16px 20px;
margin:20px 0;
box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
position:relative;
overflow:hidden;
}
.toc::before{
content:"";
position:absolute;inset:0;
background:
radial-gradient(720px 260px at 20% 0%, rgba(255,176,32,.10) 0%, rgba(255,176,32,0) 60%),
var(--pin);
opacity:.55;
pointer-events:none;
}
.toc::after{
content:"";
position:absolute;left:12px;right:12px;top:12px;bottom:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}
.toc h2{
font-size:16px;
font-family:Consolas,monospace;
letter-spacing:2px;
color:var(--orange);
text-transform:uppercase;
text-shadow: 0 0 14px rgba(255,176,32,.22);
position:relative;
z-index:1;
}
.toc ol{margin:8px 0 0 18px;font-size:14.5px;position:relative;z-index:1}
.toc a{color:#FFD48A}
.toc a:hover{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,176,32,.45)}

.fig-main{
margin:22px 0;
border:1px solid rgba(255,176,32,.18);
border-radius:14px;
overflow:hidden;
background:
radial-gradient(900px 420px at 20% 0%, rgba(255,176,32,.10) 0%, rgba(255,176,32,0) 58%),
linear-gradient(180deg, rgba(12,16,42,.8) 0%, rgba(8,10,24,.85) 100%);
box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.30) inset;
position:relative;
}
.fig-main::before{
content:"";
position:absolute;inset:0;
background:var(--subtlegrid);
opacity:.35;
pointer-events:none;
}
.fig-main img{display:block;width:100%;height:auto;position:relative;z-index:1}
.fig-main figcaption{
font-size:13px;
color:rgba(234,241,255,.68);
padding:10px 14px;
border-top:1px solid rgba(255,176,32,.14);
background:linear-gradient(180deg, rgba(8,10,24,.35), rgba(8,10,24,.75));
position:relative;
z-index:1;
}

.sect{margin:26px 0}
.sect h2{
display:flex;gap:12px;align-items:baseline;
font-size:23px;
border-bottom:1px solid rgba(255,176,32,.18);
padding-bottom:8px;margin-bottom:12px;
color:#FDF7EA;
text-shadow:
0 1px 0 rgba(0,0,0,.65),
0 0 18px rgba(255,176,32,.10);
position:relative;
}
.sect h2::after{
content:"";
position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg, rgba(255,176,32,0) 0%, rgba(255,176,32,.75) 25%, rgba(0,255,209,.18) 50%, rgba(255,176,32,.75) 75%, rgba(255,176,32,0) 100%);
filter:drop-shadow(0 0 10px rgba(255,176,32,.15));
pointer-events:none;
}
.sect h2 .sn{
font-family:Consolas,monospace;
font-size:16px;
color:var(--orange);
text-shadow: 0 0 14px rgba(255,176,32,.22);
}
.sect h3{
font-size:18px;
color:#FFD48A;
margin:16px 0 6px;
text-shadow: 0 0 12px rgba(255,176,32,.10);
}
.sect :is(p,ul,ol,table){margin:10px 0}
.sect table{
width:100%;
border-collapse:collapse;
font-size:14.5px;
display:block;
overflow-x:auto;
background:rgba(8,10,24,.25);
border-radius:10px;
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.sect th{
background:
linear-gradient(180deg, rgba(255,176,32,.16) 0%, rgba(14,22,54,.88) 55%, rgba(10,14,35,.88) 100%);
color:#FFE0A6;
text-align:left;
padding:8px 10px;
border:1px solid rgba(255,176,32,.18);
}
.sect td{
padding:8px 10px;
border:1px solid rgba(36,52,85,.95);
color:rgba(234,241,255,.88);
}

.checklist{
background:
radial-gradient(800px 240px at 20% 0%, rgba(0,255,209,.10) 0%, rgba(0,255,209,0) 60%),
linear-gradient(180deg, rgba(0,255,209,.10) 0%, rgba(11,21,52,.85) 55%, rgba(8,10,24,.92) 100%);
border:1px solid rgba(0,255,209,.25);
border-radius:12px;
padding:14px 18px;
margin:14px 0;
color:rgba(234,241,255,.92);
box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
position:relative;
overflow:hidden;
}
.checklist::before{
content:"";
position:absolute;inset:0;
background:var(--pin);
opacity:.45;
pointer-events:none;
}
.checklist::after{
content:"";
position:absolute;left:12px;right:12px;top:12px;bottom:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}

.faq details{
background:var(--panel2);
border:1px solid rgba(255,176,32,.18);
border-radius:12px;
margin:10px 0;
padding:4px 18px;
box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.25) inset;
position:relative;
overflow:hidden;
}
.faq details::before{
content:"";
position:absolute;inset:0;
background:
radial-gradient(700px 220px at 18% 0%, rgba(255,176,32,.08) 0%, rgba(255,176,32,0) 60%),
var(--pin);
opacity:.55;
pointer-events:none;
}
.faq summary{
cursor:pointer;
font-weight:700;
padding:12px 0;
color:#FDF7EA;
text-shadow: 0 0 14px rgba(255,176,32,.10);
position:relative;
z-index:1;
}
.faq summary::marker{color:var(--orange)}
.faq-a{color:rgba(234,241,255,.74);padding:0 0 14px;position:relative;z-index:1}

.related{
background:var(--panel);
border:1px solid rgba(255,176,32,.18);
border-radius:12px;
padding:18px 22px;
margin:26px 0;
box-shadow: 0 18px 40px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.25) inset;
position:relative;
overflow:hidden;
}
.related::before{
content:"";
position:absolute;inset:0;
background:
radial-gradient(740px 240px at 20% 0%, rgba(255,176,32,.10) 0%, rgba(255,176,32,0) 60%),
var(--pin);
opacity:.55;
pointer-events:none;
}
.related ul{list-style:none;position:relative;z-index:1}
.related li{margin:8px 0;padding-left:20px;position:relative}
.related li::before{content:"\25B8";color:var(--orange);position:absolute;left:0;text-shadow:0 0 12px rgba(255,176,32,.18)}

.rg-strip{
background:
radial-gradient(900px 300px at 15% 0%, rgba(255,176,32,.14) 0%, rgba(255,176,32,0) 62%),
linear-gradient(180deg, rgba(255,176,32,.12) 0%, rgba(12,16,42,.86) 60%, rgba(8,10,24,.92) 100%);
border:1px solid rgba(255,176,32,.28);
border-radius:12px;
padding:14px 18px;
margin:24px 0;
color:#F7E2C2;
font-size:14.5px;
box-shadow: 0 18px 40px rgba(0,0,0,.36), 0 0 22px rgba(255,176,32,.08);
position:relative;
overflow:hidden;
}
.rg-strip::before{
content:"";
position:absolute;inset:0;
background:var(--reels);
opacity:.35;
pointer-events:none;
}
.rg-strip::after{
content:"";
position:absolute;left:12px;right:12px;top:12px;bottom:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}

footer.site{
background:
linear-gradient(180deg, rgba(8,10,24,.96) 0%, rgba(6,8,18,.98) 100%);
border-top:1px solid rgba(255,176,32,.22);
padding:36px 0 26px;
font-size:14px;
color:rgba(234,241,255,.66);
position:relative;
overflow:hidden;
}
footer.site::before{
content:"";
position:absolute;left:0;right:0;top:0;height:70px;
background:
linear-gradient(180deg, rgba(255,176,32,.08) 0%, rgba(255,176,32,0) 85%),
var(--reels);
opacity:.55;
pointer-events:none;
}
footer.site::after{
content:"";
position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg, rgba(255,176,32,0) 0%, rgba(255,176,32,.85) 22%, rgba(0,255,209,.28) 50%, rgba(255,176,32,.85) 78%, rgba(255,176,32,0) 100%);
filter:drop-shadow(0 0 12px rgba(255,176,32,.22));
pointer-events:none;
}

.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer.site h2{
font-family:Consolas,monospace;
font-size:13px;
letter-spacing:2px;
color:#FFE0A6;
text-transform:uppercase;
margin-bottom:10px;
text-shadow: 0 0 14px rgba(255,176,32,.14);
}
footer.site ul{list-style:none}
footer.site li{margin:6px 0}
footer.site a{color:rgba(234,241,255,.74)}
footer.site a:hover{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,176,32,.45)}

.fbadges{
display:flex;gap:14px;align-items:center;
margin-top:22px;
padding-top:18px;
border-top:1px solid rgba(255,176,32,.16);
flex-wrap:wrap;
}
.badge18{
border:2px solid var(--orange);
color:var(--orange);
font-weight:900;
border-radius:10px;
padding:2px 10px;
font-size:15px;
box-shadow: 0 0 18px rgba(255,176,32,.14), 0 0 0 1px rgba(0,0,0,.25) inset;
background:linear-gradient(180deg, rgba(255,176,32,.10), rgba(255,176,32,.02));
}
.legal{font-size:12.5px;color:rgba(167,183,214,.70);margin-top:12px}

@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.rail{grid-template-columns:1fr}
.rail-toc{position:static;display:none}
.fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.chapter{grid-template-columns:1fr}
.chapter .num{border-right:0;border-bottom:1px dashed rgba(255,176,32,.22);padding-bottom:6px}
.fgrid{grid-template-columns:1fr}
.hero h1{font-size:26px}
.art-head h1{font-size:24px}
}