/* Education Times: The Paper of Record. A light academic broadsheet.
   Layout: ruled column grid on paper, centred masthead with ears, folio lines,
   sheets that turn in from the spine as they scroll into view. */
:root{
  --paper:#FCFAFD; --paper2:#F5EFF8; --paper3:#EDE3F2; --white:#fff;
  --ink:#1A0A2E; --ink2:#36284A; --mut:#5A4E6B; --hair:#DDD0E5; --rule:#1A0A2E;
  --accent:#7A1FA2; --accent-dk:#5E1680; --accent2:#B98AD0;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --cond:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --wrap:1320px; --g:clamp(16px,2.4vw,28px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--serif);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(26,10,46,.035) 1px,transparent 1.2px);background-size:5px 5px}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit}
p a,li a,dd a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
p a:hover,li a:hover{color:var(--accent-dk)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.012em;color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g);position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200;font:600 15px var(--cond)}
.skip:focus{left:10px;top:10px}
.kick,.eyebrow{font:600 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ---------- top bar with the group launcher ---------- */
.topbar{position:relative;z-index:50;border-bottom:1px solid var(--hair);background:var(--white);font:500 13.5px/1.3 var(--cond);color:var(--mut)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:8px;flex-wrap:wrap}
.topbar .pub b{color:var(--ink);font-weight:600}
.launch{position:relative}
.launch summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--ink);color:var(--ink);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.launch summary::-webkit-details-marker{display:none}
.launch summary::before{content:"";width:9px;height:9px;background:
  linear-gradient(var(--accent),var(--accent)) 0 0/4px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) 5px 0/4px 4px no-repeat,
  linear-gradient(var(--accent),var(--accent)) 0 5px/4px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) 5px 5px/4px 4px no-repeat}
.launch summary:hover,.launch[open] summary{background:var(--ink);color:#fff}
.launchpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;background:var(--white);color:var(--ink);
  border:1px solid var(--ink);box-shadow:8px 8px 0 var(--paper3);padding:18px 20px;width:min(92vw,640px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 18px}
.launchpanel h4{grid-column:1/-1;font:600 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--hair);padding:10px 0 6px;margin:0 0 4px}
.launchpanel h4:first-child{padding-top:0}
.launchpanel a{display:block;padding:5px 0;font:500 16px/1.25 var(--serif);text-decoration:none}
.launchpanel a:hover{color:var(--accent);text-decoration:underline}
.launchpanel a[aria-current="page"]{color:var(--accent);font-weight:700}

/* ---------- masthead ---------- */
.mast{position:relative;z-index:2;background:var(--paper)}
.mast .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--g);padding-top:22px;padding-bottom:16px}
.ear{border:1px solid var(--ink);padding:10px 12px;font:500 13px/1.35 var(--cond);color:var(--ink2);max-width:230px}
.ear b{display:block;font:700 italic 17px/1.2 var(--serif);color:var(--ink);margin-bottom:3px}
.ear.r{justify-self:end;text-align:right}
.ear.l{justify-self:start}
.brand{display:block;text-decoration:none;line-height:0}
.brand img{width:clamp(190px,23vw,300px);height:auto}
.mast .rules{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);height:6px}
.dateline{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:500 12.5px/1 var(--cond);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);padding:9px 0}
.dateline span{white-space:nowrap}
nav.sections{border-bottom:1px solid var(--rule)}
nav.sections .wrap{display:flex;justify-content:center;gap:4px 0;flex-wrap:wrap;padding-block:4px}
nav.sections a{font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 14px;position:relative}
nav.sections a+a::before{content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--accent2);transform:rotate(45deg)}
nav.sections a:hover,nav.sections a[aria-current]{color:var(--accent)}
nav.sections a[aria-current]{box-shadow:inset 0 -3px 0 var(--accent)}
@media(max-width:860px){
  .mast .row{grid-template-columns:1fr;justify-items:center;padding-top:18px}
  .ear{display:none}
  nav.sections .wrap{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.sections .wrap::-webkit-scrollbar{display:none}
  nav.sections a{white-space:nowrap}
}

/* term briefing rail */
.rail{background:var(--paper2);border-bottom:1px solid var(--hair);font:500 14px/1.4 var(--cond)}
.rail .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-block:10px}
.rail .tag{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:#fff;background:var(--accent);padding:6px 9px}
.rail .feed{display:flex;gap:26px;overflow:hidden;min-width:0;color:var(--ink2)}
.rail .feed span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rail .feed b{color:var(--ink);font-weight:700;margin-right:6px}
.rail a{font-weight:600;color:var(--accent);white-space:nowrap}
@media(max-width:860px){.rail .wrap{grid-template-columns:1fr;gap:8px}.rail .feed{flex-direction:column;gap:4px}.rail .feed span{white-space:normal}}

/* ---------- the press: sheets that turn ---------- */
.press{perspective:2200px;overflow-x:clip;position:relative;z-index:1;padding:0 clamp(8px,2vw,24px)}
.sheet{--turn:0;position:relative;background:var(--white);border:1px solid var(--hair);margin:34px auto 0;max-width:var(--wrap);
  box-shadow:0 1px 0 var(--hair),0 22px 50px -30px rgba(26,10,46,.35);
  transform-origin:left center;transform:rotateY(calc(var(--turn) * -24deg)) translateX(calc(var(--turn) * 40px));
  opacity:calc(1 - var(--turn) * .55);will-change:transform}
.sheet.even{transform-origin:right center;transform:rotateY(calc(var(--turn) * 24deg)) translateX(calc(var(--turn) * -40px))}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--turn);
  background:linear-gradient(90deg,rgba(26,10,46,.28),rgba(26,10,46,0) 55%)}
.sheet.even::after{background:linear-gradient(270deg,rgba(26,10,46,.28),rgba(26,10,46,0) 55%)}
.sheet-in{padding:0 clamp(16px,3vw,44px) clamp(26px,3.6vw,48px)}
.folio{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding:12px 0 9px;margin-bottom:26px;
  font:500 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.folio b{color:var(--ink)}
.sheet h2.head{font-size:clamp(30px,4.2vw,52px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.sheet .dek{font-size:19px;color:var(--ink2);max-width:62ch;margin:0 0 26px;font-style:italic}
@media(max-width:620px){.sheet{margin-top:22px}.folio .mid{display:none}}

/* front page */
.front{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:0}
.front .lead{padding-right:var(--g);border-right:1px solid var(--hair)}
.front .side{padding-left:var(--g)}
.lead h1{font-size:clamp(34px,5.2vw,68px);font-weight:600;letter-spacing:-.025em;line-height:1.02;margin:14px 0 16px}
.lead .stand{font-size:clamp(18px,1.7vw,21px);color:var(--ink2);margin:0 0 14px;max-width:60ch}
.lead .stand::first-letter{float:left;font:700 4.1em/.8 var(--serif);color:var(--accent);margin:.07em .09em 0 0}
.byline{font:500 13.5px/1.3 var(--cond);letter-spacing:.06em;color:var(--mut);border-top:1px solid var(--hair);padding-top:10px}
.side h2{font:600 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border-bottom:3px double var(--rule);padding-bottom:10px}
.side ol{list-style:none;margin:0;padding:0;counter-reset:n}
.side li{counter-increment:n;padding:15px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:38px 1fr;font-weight:600;font-size:18px;line-height:1.28}
.side li::before{content:counter(n,upper-roman);font:600 italic 18px/1.3 var(--serif);color:var(--accent2)}
.side .note{font:500 13.5px/1.45 var(--cond);color:var(--mut);margin:16px 0 0}
@media(max-width:900px){.front{grid-template-columns:1fr}.front .lead{padding-right:0;border-right:0;border-bottom:1px solid var(--hair);padding-bottom:24px}.front .side{padding-left:0;padding-top:20px}}

/* media frames */
.plate{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.plate img,.plate video{width:100%;height:100%;object-fit:cover}
.plate figcaption,.cap{font:500 13px/1.4 var(--cond);color:var(--mut);padding-top:8px}

/* lead: ink duotone, colour loupe follows the pointer */
.loupe{--x:50%;--y:50%;--r:0px;cursor:crosshair}
.loupe .duo{filter:url(#et-duo)}
.loupe .col{position:absolute;inset:0;clip-path:circle(var(--r) at var(--x) var(--y));transition:clip-path .25s ease-out}
.loupe::after{content:"";position:absolute;left:var(--x);top:var(--y);width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 7px rgba(122,31,162,.35);
  pointer-events:none;transition:width .25s,height .25s}
.loupe:focus-within{--r:2000px}
.loupe .hint{position:absolute;right:12px;bottom:12px;background:rgba(252,250,253,.92);color:var(--ink);font:600 11.5px/1 var(--cond);
  letter-spacing:.14em;text-transform:uppercase;padding:7px 10px}

/* story grid with column rules */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-top:3px double var(--rule)}
.story{padding:22px calc(var(--g) * .75) 26px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.story:nth-child(3n){border-right:0}
.story h3{font-size:23px;font-weight:600;line-height:1.16;margin:10px 0 9px}
.story p{margin:0;color:var(--ink2);font-size:16.5px;line-height:1.55}
.story details summary{cursor:pointer;font:600 13px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:12px;list-style:none}
.story details summary::-webkit-details-marker{display:none}
.story details summary::after{content:" +"}
.story details[open] summary::after{content:" \00d7"}
.story details p{margin-top:8px}
@media(max-width:980px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story:nth-child(n){border-right:1px solid var(--hair)}.story:nth-child(2n){border-right:0}}
@media(max-width:640px){.stories{grid-template-columns:1fr}.story:nth-child(n){padding:22px 0;border-right:0}}

/* halftone press print that resolves to colour */
.halftone{aspect-ratio:3/2;margin-bottom:14px}
.halftone img{filter:grayscale(1) contrast(1.25) brightness(1.06);transition:filter .6s ease,transform 1.2s ease}
.halftone::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;transition:opacity .6s ease;
  background:radial-gradient(circle,rgba(122,31,162,.55) 0 1.1px,transparent 1.7px) 0 0/5px 5px,linear-gradient(rgba(185,138,208,.38),rgba(185,138,208,.38))}
.story:hover .halftone img,.story:focus-within .halftone img{filter:none;transform:scale(1.04)}
.story:hover .halftone::after,.story:focus-within .halftone::after{opacity:0}

/* ---------- glossary hover cards ---------- */
.gl{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:help;
  text-decoration:underline dotted var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;display:inline}
.gl:hover,.gl[aria-expanded="true"]{color:var(--accent);background:var(--paper2)}
#glcard{position:absolute;z-index:120;width:min(330px,calc(100vw - 24px));background:var(--white);color:var(--ink);
  border:1px solid var(--ink);box-shadow:7px 7px 0 var(--paper3);padding:16px 18px 15px;opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s;pointer-events:none}
#glcard.on{opacity:1;transform:none}
#glcard .t{font:700 22px/1.1 var(--serif);margin:4px 0 8px}
#glcard .s{font:600 11px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
#glcard p{margin:0;font-size:16px;line-height:1.5;color:var(--ink2)}
#glcard::before{content:"";position:absolute;left:var(--ax,24px);top:-7px;width:12px;height:12px;background:var(--white);
  border-left:1px solid var(--ink);border-top:1px solid var(--ink);transform:rotate(45deg)}
#glcard.below::before{display:block}#glcard.above::before{top:auto;bottom:-7px;transform:rotate(225deg)}

/* ---------- academic year scrubber ---------- */
.yeargrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--g);align-items:start}
@media(max-width:980px){.yeargrid{grid-template-columns:1fr}}
.scrub{border:1px solid var(--rule);background:var(--paper);padding:18px 18px 14px;position:relative}
.scrub .months{display:grid;grid-template-columns:96px repeat(12,minmax(0,1fr));font:600 11px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.scrub .months span{text-align:center;padding-bottom:8px}
.scrub .months span.now{color:var(--accent)}
.lane{display:grid;grid-template-columns:96px repeat(12,minmax(0,1fr));align-items:center;margin-bottom:8px;position:relative}
.lane .lab{font:600 12px/1.15 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-right:8px}
.band{height:34px;display:flex;align-items:center;justify-content:center;font:600 11.5px/1.05 var(--cond);color:var(--ink);
  background:var(--paper3);border:1px solid var(--white);overflow:hidden;text-align:center;padding:0 3px;transition:background .25s,color .25s}
.band.on{background:var(--accent);color:#fff}
.lane:nth-child(3) .band{background:#E6DAEE}.lane:nth-child(4) .band{background:#F0E9F4}
.lane .band.on{background:var(--accent);color:#fff}
.track{position:relative;margin:12px 0 0 96px;height:44px}
.track input{position:absolute;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.track .line{position:absolute;left:0;right:0;top:21px;height:2px;background:var(--ink)}
.track .tick{position:absolute;top:15px;width:1px;height:14px;background:var(--ink)}
.track .knob{position:absolute;top:6px;width:56px;margin-left:-28px;height:32px;background:var(--ink);color:#fff;
  font:700 12px/32px var(--cond);text-align:center;letter-spacing:.1em;text-transform:uppercase;transition:left .2s ease;pointer-events:none}
.track .knob::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
.track input:focus-visible~.knob{outline:3px solid var(--accent);outline-offset:3px}
.lanes{position:relative;--labw:96px}
.cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);margin-left:-1px;pointer-events:none;transition:left .2s ease;z-index:2;
  left:calc(var(--labw) + (100% - var(--labw)) * var(--p,.5))}
.track .knob{left:calc(100% * var(--p,.5))}
.scrub .keys{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font:500 12.5px/1.3 var(--cond);color:var(--mut);flex-wrap:wrap}
.scrub .keys button{font:600 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);background:var(--white);
  color:var(--ink);padding:8px 11px;cursor:pointer}
.scrub .keys button:hover{background:var(--ink);color:#fff}
@media(max-width:620px){
  .scrub{padding:14px 10px 12px}
  .scrub .months,.lane{grid-template-columns:52px repeat(12,minmax(0,1fr))}
  .scrub .months span{font-size:9px;letter-spacing:0}
  .lane .lab{font-size:9.5px;letter-spacing:0}
  .band{font-size:0;height:26px}
  .track{margin-left:52px}
  .lanes{--labw:52px}
  .track .knob{width:44px;margin-left:-22px;font-size:10.5px}
}
.readout{border-top:3px double var(--rule)}
.readout .mo{font:600 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:-.03em;padding:14px 0 6px;font-style:italic;color:var(--accent)}
.readout dl{margin:0}
.readout dt{font:600 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-top:16px;
  border-top:1px solid var(--hair);padding-top:12px}
.readout dd{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--ink2)}
.readout .fine{font:500 13px/1.45 var(--cond);color:var(--mut);margin:18px 0 0}
.chalk{margin-top:var(--g)}

/* dark plate: film grain, vignette, ken burns on poster */
.grain::before{content:"";position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
.grain::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 120px rgba(10,4,20,.75)}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,1%)}100%{transform:translate(0,0)}}
.kb img,.kb video{animation:kb 24s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,1%)}}
.vbtn{position:absolute;left:12px;bottom:12px;z-index:4;font:600 11.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(252,250,253,.94);color:var(--ink);border:0;padding:9px 12px;cursor:pointer}
.vbtn[hidden]{display:none}
.plate .lbl{position:absolute;right:12px;top:12px;z-index:4;font:600 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.6);padding:6px 8px}

/* how we work: three ruled columns + mask wipe video */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px double var(--rule)}
.three>div{padding:20px var(--g) 0;border-right:1px solid var(--hair)}
.three>div:first-child{padding-left:0}.three>div:last-child{border-right:0;padding-right:0}
.three h3{font:600 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.three p{margin:0 0 12px;font-size:16.5px;line-height:1.6;color:var(--ink2);hyphens:auto}
.three p:first-of-type::first-letter{float:left;font:700 3.3em/.82 var(--serif);color:var(--ink);margin:.06em .08em 0 0}
@media(max-width:900px){.three{grid-template-columns:1fr}.three>div:nth-child(n){padding:20px 0 4px;border-right:0;border-bottom:1px solid var(--hair)}}
.wipe{--w:1;margin:0 0 30px}
.wipe .plate{aspect-ratio:21/8;clip-path:inset(0 calc(var(--w) * 50%) 0 calc(var(--w) * 50%))}
.wipe .plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(26,10,46,.55),transparent 18%,transparent 82%,rgba(26,10,46,.55))}
@media(max-width:620px){.wipe .plate{aspect-ratio:16/9}}

/* glossary sheet */
.reading{aspect-ratio:21/7;margin-bottom:28px}
.reading img{height:130%;position:absolute;top:-15%;left:0;transform:translateY(var(--py,0px));will-change:transform}
.reading::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 10px var(--white),inset 0 0 90px rgba(252,250,253,.45)}
@media(max-width:620px){.reading{aspect-ratio:16/9}}
.gfilter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.gfilter button{font:600 12.5px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;background:var(--white);color:var(--ink);
  border:1px solid var(--ink);padding:10px 13px;cursor:pointer}
.gfilter button[aria-pressed="true"]{background:var(--ink);color:#fff}
.gfilter button:hover{border-color:var(--accent);color:var(--accent)}
.gfilter button[aria-pressed="true"]:hover{color:#fff}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;border-top:1px solid var(--rule);margin:0}
.gitem{padding:16px 18px 18px 0;border-bottom:1px solid var(--hair);transition:opacity .3s}
.gitem dt{font:600 22px/1.15 var(--serif);display:flex;align-items:baseline;gap:10px}
.gitem dt .ini{font:700 italic 30px/1 var(--serif);color:var(--accent2);width:24px;flex:none}
.gitem .sec{display:block;font:600 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:8px 0 7px}
.gitem dd{margin:0 0 0 34px;font-size:16px;line-height:1.5;color:var(--ink2)}
.gitem[hidden]{display:none}

/* staffroom brief: contained dark panel */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--ink);color:#EFE6F5;margin-top:0}
.brief .txt{padding:clamp(24px,3.6vw,48px)}
.brief .txt .kick{color:var(--accent2)}
.brief h2{color:#fff;font-size:clamp(30px,3.6vw,46px);font-weight:600;margin:12px 0 14px;font-style:italic}
.brief p{margin:0 0 22px;color:#DCCDE7;font-size:17.5px;max-width:52ch}
.brief .plate{aspect-ratio:auto;min-height:280px;height:100%}
.brief .duo2{filter:url(#et-duo-night)}
.brief .plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(26,10,46,.22) 0 1px,transparent 1px 4px)}
@media(max-width:860px){.brief{grid-template-columns:1fr}.brief .plate{min-height:220px;aspect-ratio:16/9}}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:15px 22px;border:1px solid currentColor;cursor:pointer}
.btn-p{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-p:hover{background:var(--accent2);border-color:var(--accent2)}

/* questions */
.faq{border-top:3px double var(--rule)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;font:600 21px/1.25 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font:400 30px/1 var(--serif);color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;max-width:76ch;color:var(--ink2)}

/* inner pages: a journal article sheet */
.article{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.article .toc{position:sticky;top:20px;align-self:start;font:500 14px/1.35 var(--cond);border-top:3px double var(--rule);padding-top:12px}
.article .toc b{display:block;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.article .toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.article .toc li{counter-increment:t;margin:0 0 9px;display:grid;grid-template-columns:26px 1fr}
.article .toc li::before{content:"\00a7" counter(t);color:var(--mut)}
.article .toc a{text-decoration:none;color:var(--ink2)}
.article .toc a:hover,.article .toc a.on{color:var(--accent)}
.doc{max-width:72ch;counter-reset:s}
.doc h1{font-size:clamp(38px,5.4vw,70px);font-weight:600;letter-spacing:-.025em;line-height:1.02;margin:6px 0 14px}
.doc .lede{font-size:clamp(20px,2vw,24px);font-style:italic;color:var(--ink2);margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.doc h2{counter-increment:s;font-size:clamp(24px,2.6vw,31px);font-weight:600;margin:38px 0 12px;scroll-margin-top:20px;display:flex;gap:14px;align-items:baseline}
.doc h2::before{content:"\00a7" counter(s);font:600 15px/1 var(--cond);color:var(--accent);letter-spacing:.06em}
.doc p,.doc li{color:var(--ink2);font-size:18.5px;line-height:1.66}
.doc>p:first-of-type::first-letter,.doc h2+p::first-letter{font-weight:700;color:var(--ink)}
.doc ul{padding-left:0;list-style:none}
.doc li{padding:8px 0 8px 30px;border-bottom:1px solid var(--hair);position:relative}
.doc li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;border:1.5px solid var(--accent);transform:rotate(45deg)}
@media(max-width:900px){.article{grid-template-columns:1fr}.article .toc{position:static}}
.turnin{animation:turnin 1.1s cubic-bezier(.2,.7,.2,1) both;transform-origin:left center}
@keyframes turnin{from{transform:rotateY(-30deg) translateX(40px);opacity:.4}to{transform:none;opacity:1}}

/* folio pill */
.pager{position:fixed;left:14px;bottom:14px;z-index:90;background:var(--white);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--paper3);
  font:600 11.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;color:var(--ink);display:flex;gap:10px;align-items:center;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.pager.on{opacity:1;transform:none}
.pager i{font-style:normal;color:var(--accent)}

/* footer: light, ruled */
.foot{position:relative;z-index:1;margin-top:56px;background:var(--paper2);border-top:3px solid var(--rule);font:500 15px/1.5 var(--cond);color:var(--ink2)}
.foot .wrap{padding-block:40px 28px}
.foot .cols{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:28px}
.foot .brand img{width:160px}
.foot .about{font:italic 17px/1.5 var(--serif);color:var(--ink2);margin:14px 0 10px;max-width:38ch}
.foot .pub{margin:0;color:var(--ink2)}
.foot .pub strong{color:var(--ink)}
.foot h2{font:600 11.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent);text-decoration:underline}
.foot .legal{border-top:1px solid var(--hair);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--mut)}
@media(max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot .cols{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .sheet,.sheet.even{transform:none!important;opacity:1!important}
  .sheet::after{opacity:0!important}
  .wipe .plate{clip-path:none!important}
  .reading img{transform:none!important}
}