/* MAIS — engraved, survey-sheet language. Doto (display), Newsreader (text), JetBrains Mono (labels) */
:root{--dot:"Doto",ui-monospace,monospace;--serif:"Newsreader",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--paper:#ffffff;--ink:#121417;--grey:#5b616b;--hair:#e3e5e9;--grid:#eef0f3;--blue:#2448c8;--wash:#f6f7f9;--col:1200px}
*{box-sizing:border-box}html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:300 18px/1.6 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}p a,.lk{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-weight:300;margin:0;text-wrap:balance}
.wrap{max-width:var(--col);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:99}
:focus-visible{outline:1.5px solid var(--blue);outline-offset:3px}
.mono{font-family:var(--mono);font-weight:400}.dot{font-family:var(--dot);font-weight:500;letter-spacing:.01em}
.grid-paper{background-color:#fff;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;background-position:-1px -1px}
/* registration marks on the viewport (survey sheet) */
.reg{position:fixed;inset:14px;pointer-events:none;z-index:40}
.reg i{position:absolute;width:12px;height:12px;border-color:#9aa0aa;border-style:solid;border-width:0;opacity:0;animation:fadein .6s .2s forwards}
.reg i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}.reg i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.reg i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.reg i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.reg b{position:absolute;background:#9aa0aa;opacity:0;animation:fadein .6s .35s forwards}.reg b:nth-of-type(1){display:none}.reg b:nth-of-type(2){left:0;top:50%;width:7px;height:1px}.reg b:nth-of-type(3){right:0;top:50%;width:7px;height:1px}
@keyframes fadein{to{opacity:1}}
/* header + notch */
header.top{max-width:var(--col);margin:0 auto;padding:30px 40px 0;display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}.brand svg{width:30px;height:30px;overflow:visible}
.brand span{font:400 1.02rem/1.05 var(--serif)}
.repo{font:400 .74rem var(--mono);color:var(--ink);padding-top:6px}.repo:hover{color:var(--blue)}
.lg-a{stroke-dasharray:92;stroke-dashoffset:92;animation:lgdraw 1.1s .15s cubic-bezier(.4,0,.2,1) forwards}
.lg-p{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:lgrise .6s cubic-bezier(.2,.9,.3,1.2) forwards}
.lg-p1{animation-delay:.75s}.lg-p2{animation-delay:.87s}.lg-p3{animation-delay:.99s}.lg-b{stroke-dasharray:36;stroke-dashoffset:36;animation:lgdraw .5s 1.05s ease forwards}
@keyframes lgdraw{to{stroke-dashoffset:0}}@keyframes lgrise{to{transform:scaleY(1)}}
.brand:hover .lg-a{transform:translateY(-1.5px);transition:transform .3s}
.notch{position:fixed;top:0;left:50%;z-index:60;transform:translate(-50%,-110%);background:var(--ink);border-radius:0 0 18px 18px;padding:9px 26px 12px;display:flex;align-items:center;gap:6px;animation:notchin .8s .1s cubic-bezier(.2,1.1,.3,1) forwards}
.notch:before,.notch:after{content:"";position:absolute;top:0;width:18px;height:18px;pointer-events:none}
.notch:before{left:-18px;background:radial-gradient(circle at 0 100%,transparent 17.5px,var(--ink) 18px)}.notch:after{right:-18px;background:radial-gradient(circle at 100% 100%,transparent 17.5px,var(--ink) 18px)}
.notch a{position:relative;color:rgba(255,255,255,.62);font:400 .74rem var(--mono);padding:5px 12px}.notch a:hover{color:#fff}
.notch a[aria-current=page]{color:#fff}


.notch .menu{display:none;background:none;border:0;color:#fff;font:400 .74rem var(--mono);cursor:pointer;padding:5px 10px}
@keyframes notchin{to{transform:translate(-50%,0)}}
@media(max-width:780px){.wrap,header.top{padding-left:20px;padding-right:20px}.brand span,.repo{display:none}
 .notch .menu{display:block}.notch a{display:none}.notch.open{flex-direction:column;align-items:stretch;padding:10px 22px 16px;gap:2px;text-align:center}.notch.open a{display:block;padding:8px 14px}}
/* buttons: pills (LI) + square icon buttons (Harmonic) */
.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:200px;padding:.72rem 1.3rem;border-radius:99px;background:var(--ink);color:#fff;font:400 .8rem var(--mono);border:1px solid var(--ink);transition:background .2s,color .2s}
.pill:hover{background:#fff;color:var(--ink)}.pill.ghost{background:transparent;color:var(--ink);min-width:0}.pill.ghost:hover{background:var(--ink);color:#fff}
.sq{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--hair);color:var(--grey);font:400 .78rem var(--mono);transition:border-color .2s,color .2s,background .2s}
a:hover .sq,.sq:hover{border-color:var(--blue);color:var(--blue);background:#eef2fd}
/* engraving animation: construction draws, then ink, then stipple */
.engr .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.45,0,.2,1) var(--d) forwards}
.engr .fd{opacity:0;animation:fadein .7s ease var(--d) forwards}
.orbit{animation:spin 90s linear infinite,fadein 1.2s 2.2s both;opacity:0}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.001s!important;animation-delay:0s!important;transition:none!important}.orbit{animation:none;opacity:1}}
/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center;padding-top:84px;padding-bottom:40px}
.kicker{font:300 1.35rem/1.3 var(--serif);margin:0 0 18px}
.hero h1{font:500 clamp(2.4rem,4.7vw,4.7rem)/.98 var(--dot);white-space:nowrap;letter-spacing:.005em;margin:0 0 22px}
.hero h1 .ch{display:inline-block;min-width:.1em}
.after{font:300 1.35rem/1.3 var(--serif);margin:0 0 30px}
.figure .panel{border:1px solid var(--hair);aspect-ratio:7/5}.figure .panel svg{width:100%;height:100%;display:block}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0 12px;border-bottom:1px solid var(--ink)}
.cap .mono{font-size:.78rem;white-space:nowrap}.cap span:last-child{font:italic 300 1.05rem var(--serif);text-align:right}
.cap:hover .mono{color:var(--blue)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:34px;padding-top:54px}}@media(max-width:780px){.reg{display:none}}
.sec{padding-top:110px}.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 26px;flex-wrap:wrap}
.sec-h h2{font:500 clamp(2rem,3.6vw,3rem)/1 var(--dot)}.sec-h p{margin:0;font:italic 300 1.1rem var(--serif);color:var(--grey);max-width:420px}
/* cards (Harmonic newsroom): hairline-divided grid, engraved thumbnails */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.card{display:flex;flex-direction:column;padding:20px 20px 18px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--ink);min-height:100%}
.card:nth-child(4n){border-right:0}
.thumb{aspect-ratio:16/10;border:1px solid var(--hair);display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
.thumb svg{width:58%;height:auto;color:var(--ink);transition:transform .6s cubic-bezier(.2,.9,.25,1)}.card:hover .thumb svg{transform:scale(1.06)}
.card h3{font:400 1.3rem/1.22 var(--serif);margin:0 0 8px}.card p{margin:0 0 16px;color:var(--grey);font-size:.98rem;line-height:1.5}
.meta{margin-top:auto;display:flex;align-items:center;gap:8px;font:400 .72rem var(--mono);color:var(--grey)}.meta b{font-weight:400;color:var(--blue)}.meta .sp{margin-left:auto;display:flex;gap:6px}
.card:hover h3{color:var(--blue)}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}.card:nth-child(n){border-right:1px solid var(--hair)}.card:nth-child(2n){border-right:0}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.card:nth-child(n){padding:20px 0;border-right:0}}
.meta .stf{font:400 .9rem var(--serif);color:#b9831a;letter-spacing:1px}
.fdet>summary{display:none}@media(max-width:900px){.fdet>summary{display:block;list-style:none;cursor:pointer;font:400 .78rem var(--mono);padding:10px 0;border-bottom:1px solid var(--hair)}.fdet>summary::-webkit-details-marker{display:none}.fdet>summary:after{content:" +"}.fdet[open]>summary:after{content:" −"}.fdet>.fbody{padding-top:16px}}
/* band strip (LI) */
.strip{margin-top:110px;border-top:1px solid #8c9199;border-bottom:1px solid #8c9199}
.strip .wrap{display:grid;grid-template-columns:200px 1fr auto;gap:40px;align-items:center;padding-top:30px;padding-bottom:30px}
.strip h2{font:500 2.1rem/1 var(--dot)}.strip p{margin:0;font-size:1rem;color:var(--grey);max-width:560px}.strip p b{color:var(--ink);font-weight:500}
@media(max-width:780px){.strip .wrap{grid-template-columns:1fr;gap:16px}}
.cta{text-align:center;padding-top:120px;padding-bottom:40px}.cta h2{font:300 clamp(1.6rem,3vw,2.2rem) var(--serif);margin:0 0 22px}
/* page heads (LI): big dot title left, serif line right */
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding:84px 0 44px;flex-wrap:wrap}
.phead h1{font:500 clamp(3rem,7vw,6.4rem)/.9 var(--dot)}.phead p{font:300 1.35rem/1.35 var(--serif);margin:10px 0 0;max-width:430px;text-align:right}
@media(max-width:780px){.phead p{text-align:left}}
/* ---------- problems: sidebar + survey chart ---------- */
.reg-layout{display:grid;grid-template-columns:250px 1fr;gap:0;border-top:1px solid var(--hair)}
.side{padding:22px 26px 30px 0;border-right:1px solid var(--hair)}
.side h4{font:400 .72rem var(--mono);color:var(--grey);margin:0 0 10px;font-weight:400}
.alist{list-style:none;margin:0 0 30px;padding:0}.alist button{all:unset;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;width:100%;padding:7px 0;font:400 1rem/1.25 var(--serif);color:var(--ink)}
.alist button sup{font:400 .62rem var(--mono);color:var(--grey);margin-left:3px}.alist button:hover{color:var(--blue)}
.alist button[aria-pressed=true]{color:var(--blue)}.alist button[aria-pressed=true] .sq{background:var(--blue);border-color:var(--blue);color:#fff}
.alist .sw{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1px}
.txt-ctl{display:flex;flex-direction:column;gap:12px}
.txt-ctl label{font:400 .72rem var(--mono);color:var(--grey);display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid var(--hair);padding-bottom:6px}
.txt-ctl select{all:unset;cursor:pointer;color:var(--blue);font:400 .72rem var(--mono);text-align:right;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stars-ctl{display:flex;gap:6px}.stars-ctl button{all:unset;cursor:pointer;font:400 .72rem var(--mono);color:var(--grey);border:1px solid var(--hair);padding:2px 7px}.stars-ctl button[aria-pressed=true]{color:#fff;background:var(--ink);border-color:var(--ink)}
.chart{padding:18px 0 0 28px;min-width:0}
.bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font:400 .72rem var(--mono);color:var(--grey);padding-bottom:14px;border-bottom:1px solid var(--hair)}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink);padding:4px 0}
.search input{all:unset;flex:1;font:400 .86rem var(--mono);color:var(--ink)}.search input::placeholder{color:#9aa0aa}
.views button{all:unset;cursor:pointer;padding:3px 8px;position:relative}.views button[aria-pressed=true]{color:var(--ink)}
.views button[aria-pressed=true]:before,.views button[aria-pressed=true]:after{content:"";position:absolute;width:5px;height:5px;border:1px solid var(--ink)}
.views button[aria-pressed=true]:before{left:0;top:0;border-right:0;border-bottom:0}.views button[aria-pressed=true]:after{right:0;bottom:0;border-left:0;border-top:0}
#cnt{color:var(--ink)}
.survey{position:relative;margin-top:16px;border:1px solid var(--hair)}.survey svg{display:block;width:100%;height:auto}
.iso{fill:none;stroke:#8d939c;stroke-width:.55}.iso.idx{stroke:#3c4149;stroke-width:.85}
.hl{font:400 9.5px var(--mono);fill:var(--grey);letter-spacing:.06em}.ht{font:italic 300 17px var(--serif);fill:var(--ink)}
.hl,.ht{paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.leader{stroke:#9aa0aa;stroke-width:.6;fill:none}
.mk{cursor:pointer}.mk circle.m{fill:#fff;stroke:var(--ink);stroke-width:1.1;transition:r .15s,stroke .15s,fill .15s}.mk.res circle.m{fill:var(--ink)}
.mk:hover circle.m,.mk:focus-visible circle.m{stroke:var(--blue);fill:#dfe6fb}.mk.res:hover circle.m{fill:var(--blue)}.mk:focus{outline:none}
.mk .cross{stroke:var(--ink);stroke-width:.7;opacity:.6}
.mk.off{opacity:.16;pointer-events:none}.hill.dim .ht,.hill.dim .hl{opacity:.35}
#tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font:400 .72rem/1.4 var(--mono);padding:.45rem .7rem;max-width:260px;opacity:0;transition:opacity .1s;z-index:6}
.legend{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font:400 .7rem var(--mono);color:var(--grey);padding:12px 0}
.legend svg{vertical-align:middle;margin-right:6px}
.plist2{border-top:1px solid var(--hair);margin-top:16px}.prow{display:grid;grid-template-columns:70px 1fr 140px 64px;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.prow:hover h3{color:var(--blue)}.prow .mono{font-size:.74rem;color:var(--grey)}.prow h3{font:400 1.1rem/1.3 var(--serif)}.prow .ar{font:400 .72rem var(--mono);color:var(--grey)}
@media(max-width:900px){.reg-layout{grid-template-columns:1fr}.side{border-right:0;padding-right:0;border-bottom:1px solid var(--hair)}.chart{padding-left:0}.alist{columns:2;column-gap:24px}.prow{grid-template-columns:56px 1fr}.prow .ar,.prow .st{display:none}}
dialog#dr{border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);padding:0;max-width:660px;width:calc(100% - 24px);margin:auto}
dialog::backdrop{background:rgba(18,20,23,.42)}.dr-in{padding:28px 28px 24px}.dr-in .mono{font-size:.72rem;color:var(--grey)}
.dr-in h3{font:400 1.7rem/1.18 var(--serif);margin:10px 0 12px}.dr-in p{margin:0 0 16px;font-size:1.02rem}.dr-meta{font:400 .74rem var(--mono);color:var(--grey);margin:0 0 20px;line-height:1.8}
.dr-x{float:right;border:0;background:none;color:var(--ink);font:300 1.6rem/1 var(--serif);cursor:pointer}
/* ---------- agendas: newsroom grid ---------- */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.agrid .card{padding:22px 20px 20px;border-right:1px solid var(--hair)}
.agrid .card.w2{grid-column:span 2}.agrid .card.edge-l{padding-left:0}.agrid .card.edge-r{padding-right:0;border-right:0}
.agrid .card.w2 h3{font-size:1.9rem}.agrid .card p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:980px){.agrid{grid-template-columns:1fr 1fr}.agrid .card.w2{grid-column:span 2}.agrid .card:nth-child(n){padding:22px 0;border-right:0}}
@media(max-width:560px){.agrid{grid-template-columns:1fr}.agrid .card.w2{grid-column:auto}}
/* ---------- fields: LI list ---------- */
.two{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
.two .lead{position:sticky;top:60px}.two .lead h1{font:500 clamp(3rem,7vw,6.4rem)/.9 var(--dot);margin:0 0 20px}.two .lead p{font:300 1.3rem/1.35 var(--serif);margin:0;max-width:380px}
.flist{list-style:none;margin:0;padding:0}
.flist details{padding:6px 0 18px}.flist summary{list-style:none;cursor:pointer;display:block;padding-top:14px}.flist summary::-webkit-details-marker{display:none}
.flist summary .bul{display:block;width:9px;height:9px;background:#b6bac2;margin-bottom:12px;transition:background .2s,transform .3s}.flist details[open] .bul,.flist summary:hover .bul{background:var(--blue)}.flist details[open] .bul{transform:rotate(45deg)}
.flist summary h3{font:400 1.75rem/1.2 var(--serif)}.flist summary .mono{font-size:.74rem;color:var(--grey);display:block;margin-top:6px}
.flist ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--hair)}.flist li a{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:1rem}
.flist li a span{font:400 .72rem var(--mono);color:var(--grey);padding-top:4px}.flist li a:hover{color:var(--blue)}
@media(max-width:900px){.two{grid-template-columns:1fr}.two .lead{position:static}}
/* ---------- about: LI product page ---------- */
.wide-panel{border:1px solid var(--hair);margin:0 0 70px}.wide-panel svg{display:block;width:100%;height:auto}
.prose{max-width:640px;margin-left:auto}.prose h2{font:400 1.75rem/1.25 var(--serif);margin:60px 0 16px}.prose p{margin:0 0 18px;font-size:1.06rem}.prose p b{font-weight:600}
.prose ol{margin:0 0 22px;padding-left:1.2rem}.prose li{margin:8px 0}
/* ---------- footer (LI structure) ---------- */
footer{margin-top:120px}footer .wrap{padding-bottom:50px}
.fnav{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-bottom:40px}.fnav a{font:300 1.05rem var(--serif)}.fnav a:hover{color:var(--blue)}
.fbase{border-top:1px solid #8c9199;padding-top:34px;display:flex;justify-content:space-between;align-items:flex-start}
.fbase .wm{font:500 clamp(1.8rem,3.4vw,2.6rem)/.95 var(--dot)}.fbase .r{display:flex;gap:8px;align-items:center}
.fbase .r .sq{width:34px;height:34px}.fbase .r svg{width:16px;height:16px;fill:currentColor}.fbase small{font:400 .72rem var(--mono);color:var(--grey);margin-right:14px}

/* home: caption row with "another drawing" */
.caprow{display:flex;align-items:stretch;gap:12px}.caprow .cap{flex:1}.again{all:unset;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;align-self:center;border:1px solid var(--hair);color:var(--grey);font:400 1rem var(--mono);transition:border-color .2s,color .2s,transform .4s}
.again:hover{border-color:var(--blue);color:var(--blue);transform:rotate(90deg)}.again:focus-visible{outline:1.5px solid var(--blue);outline-offset:3px}
#hero-art{transition:opacity .22s ease}#hero-art.swap{opacity:0}
/* returning visitor in this session: chrome is already on screen, no entrance */
.returning .notch{animation:none;transform:translate(-50%,0)}
.returning .lg-a,.returning .lg-b{animation:none;stroke-dashoffset:0}.returning .lg-p{animation:none;transform:none}
.returning .reg i,.returning .reg b{animation:none;opacity:1}




.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* selected tab: corner brackets that flow from the previous tab to this one */
.notch{isolation:isolate}
.notch .brk{position:absolute;width:7px;height:7px;border:0 solid rgba(255,255,255,.88);pointer-events:none;opacity:0;z-index:3}
.notch .brk.tl{border-left-width:1px;border-top-width:1px}.notch .brk.br{border-right-width:1px;border-bottom-width:1px}
@media(max-width:780px){.notch .brk{display:none}.notch.open a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}}

/* epigraph on the home page */
.epi{padding-top:120px;text-align:center}.epi figure{margin:0 auto;max-width:860px}
.epi figure:before{content:"";display:block;width:56px;height:1px;background:var(--ink);margin:0 auto 34px}
.epi blockquote{margin:0}.epi p{font:italic 300 clamp(1.55rem,3vw,2.35rem)/1.32 var(--serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.epi figcaption{margin-top:22px;font:400 .76rem var(--mono);color:var(--grey)}

/* asking the right questions */
.ask-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ask-c{position:relative;padding:30px 24px 30px;border-right:1px solid var(--hair)}.ask-c:last-child{border-right:0}
.ask-c svg{width:132px;height:99px;display:block;margin:0 0 18px -6px}
.ask-c h3{font:400 1.3rem/1.2 var(--serif);margin:0 0 8px}.ask-c p{margin:0;color:var(--grey);font-size:.98rem;line-height:1.5}
.ask-c.focus{background:linear-gradient(180deg,#f7f9ff,#fff 70%)}.ask-c.focus h3{color:var(--blue)}
.ask-c.focus:before,.ask-c.focus:after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--blue)}
.ask-c.focus:before{left:10px;top:10px;border-right:0;border-bottom:0}.ask-c.focus:after{right:10px;bottom:10px;border-left:0;border-top:0}
@media(max-width:980px){.ask-grid{grid-template-columns:1fr 1fr}.ask-c:nth-child(2){border-right:0}.ask-c:nth-child(-n+2){border-bottom:1px solid var(--hair)}}
@media(max-width:560px){.ask-grid{grid-template-columns:1fr}.ask-c{border-right:0!important;border-bottom:1px solid var(--hair)}.ask-c:last-child{border-bottom:0}}

/* home: section entrances (set up by revealHome; without JS everything is simply visible) */
.rv-sec .rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--rd,0ms),transform .95s cubic-bezier(.2,.8,.2,1) var(--rd,0ms)}
.rv-sec.in .rv{opacity:1;transform:none}
.rv-sec .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.2,1) var(--rd,0ms)}
.rv-sec.in .draw{stroke-dashoffset:0}
.epi.rv-sec figure:before{transform:scaleX(0);transition:transform 1s cubic-bezier(.6,0,.2,1)}.epi.rv-sec.in figure:before{transform:scaleX(1)}
.epi.rv-sec blockquote p{opacity:0;filter:blur(7px);transform:translateY(8px);transition:opacity 1.1s ease .3s,filter 1.2s ease .3s,transform 1.1s cubic-bezier(.2,.8,.2,1) .3s}
.epi.rv-sec.in blockquote p{opacity:1;filter:none;transform:none}
.strip.rv-sec{position:relative;border-color:transparent}
.strip.rv-sec:before,.strip.rv-sec:after{content:"";position:absolute;left:0;right:0;height:1px;background:#8c9199;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.6,0,.2,1)}
.strip.rv-sec:before{top:-1px;transform-origin:left}.strip.rv-sec:after{bottom:-1px;transform-origin:right;transition-delay:.15s}
.strip.rv-sec.in:before,.strip.rv-sec.in:after{transform:scaleX(1)}

.lg-t{opacity:0;animation:fadein .6s .9s forwards}.returning .lg-t{animation:none;opacity:1}
.mt{display:flex;gap:20px;align-items:center;padding:14px;border:1px solid var(--line,rgba(18,20,23,.14));border-radius:18px;background:rgba(255,255,255,.55);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.mt:hover{border-color:rgba(18,20,23,.45);transform:translateY(-2px)}
.mt img{width:96px;height:120px;object-fit:cover;object-position:50% 20%;border-radius:12px;filter:grayscale(1) contrast(1.05);flex:none}
.mt-t{display:flex;flex-direction:column;gap:4px}.mt-t b{font:400 1.35rem/1.2 var(--serif)}.mt-t i{font:400 .78rem/1.4 "JetBrains Mono",monospace;font-style:normal;opacity:.65}.mt-t em{font:400 .7rem "JetBrains Mono",monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------- small screens: rescale and reflow ---------- */
@media(max-width:780px){
 .sec{padding-top:72px}.epi{padding-top:72px}.strip{margin-top:72px}.cta{padding-top:72px}footer{margin-top:72px}
 .phead{padding:56px 0 30px;gap:16px}.phead p{font-size:1.2rem;margin-top:0}
 .sec-h{margin-bottom:20px;gap:10px}.sec-h p{font-size:1rem}
 .sq{width:32px;height:32px}
 .thumb{aspect-ratio:2/1}.thumb svg{width:46%}
 .fnav{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px 20px;padding-bottom:30px}.fnav a{justify-self:start}
}
@media(max-width:560px){
 .hero{padding-top:40px;gap:28px}.hero h1{font-size:12.6vw}.kicker,.after{font-size:1.2rem}
 .hero .btns,.hero .row{gap:10px}
 .pill{min-width:0;gap:18px}
 .phead h1{font-size:clamp(2.6rem,13vw,3.6rem)}
 .cap{flex-wrap:wrap;gap:6px 12px}.cap span:last-child{font-size:.98rem}
 .ask-c{display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:center;padding:18px 0}
 .ask-c svg{width:96px;height:72px;margin:0;grid-row:1/3}.ask-c h3{font-size:1.2rem;margin:0 0 4px;align-self:end}.ask-c p{font-size:.94rem;align-self:start}
 .ask-c.focus{padding-left:14px;padding-right:12px}.ask-c.focus svg{margin-left:0}
 .epi p{font-size:1.45rem}
 .strip .wrap{padding-top:22px;padding-bottom:22px}
 .fbase{flex-wrap:wrap;gap:14px}.fbase .wm{font-size:1.6rem}.fbase small{display:block;margin:0}
 .fbase .r{margin-left:auto}
 .prose h2{margin:44px 0 12px;font-size:1.5rem}.prose p{font-size:1rem}
 .mt{gap:14px;padding:12px}.mt img{width:80px;height:100px}.mt-t b{font-size:1.2rem}.mt-t i{font-size:.72rem}
}
@media(max-width:360px){.hero h1{font-size:12vw}.pill{padding:.7rem 1rem;font-size:.76rem}}
@media(max-width:560px){
 .cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;border-top:0;margin:0 -20px;padding:2px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .cards::-webkit-scrollbar{display:none}
 .cards .card,.cards .card:nth-child(n){flex:0 0 80%;scroll-snap-align:start;scroll-margin-left:20px;border:1px solid var(--hair);border-radius:14px;padding:12px 12px 14px;min-height:0}
 .cards .thumb{border-radius:8px}
}
@media(max-width:780px){.phead{flex-direction:column;align-items:flex-start}.phead p{max-width:none}}
/* slimmer notch, small screens only */
@media(max-width:780px){
.notch{padding:4px 22px 6px;border-radius:0 0 13px 13px}
.notch:before,.notch:after{width:13px;height:13px}
.notch:before{left:-13px;background:radial-gradient(circle at 0 100%,transparent 12.5px,var(--ink) 13px)}.notch:after{right:-13px;background:radial-gradient(circle at 100% 100%,transparent 12.5px,var(--ink) 13px)}
.notch a{font-size:.7rem;padding:3px 11px}.notch .menu{font-size:.7rem;padding:3px 10px}
}
@media(max-width:780px){
 .notch{padding:2px 18px 4px}.notch .menu{padding:3px 8px;font-size:.68rem}
 .notch.open{padding:4px 18px 8px;gap:0}.notch.open a,.notch.open .menu{padding:4px 12px;font-size:.68rem;line-height:1.5}
}
/* mobile: open menu sits in the middle of the screen over a soft wash */
@media(max-width:780px){
 .notch.open{top:50%;left:50%;transform:translate(-50%,-50%)!important;animation:none!important;border-radius:20px;padding:14px 34px 12px;gap:2px;min-width:200px;box-shadow:0 0 0 100vmax rgba(255,255,255,.82)}
 .notch.open:before,.notch.open:after{display:none}
 .notch.open a,.notch.open .menu{font-size:.9rem;padding:9px 14px;line-height:1.4}
 .notch.open .menu{margin-top:6px;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
}
/* where to begin: carousel at every size */
.cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;border-top:0;scrollbar-width:none;padding:2px 0 14px}
.cards::-webkit-scrollbar{display:none}
.cards .card,.cards .card:nth-child(n){flex:0 0 clamp(250px,26%,320px);scroll-snap-align:start;border:1px solid var(--hair);border-radius:14px;padding:12px 12px 14px;min-height:0}
.cards .thumb{border-radius:8px}
.cnav{display:flex;gap:8px;margin-left:auto}
.cnav button{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;font:400 1rem var(--mono);color:var(--ink);transition:border-color .2s,color .2s}
.cnav button:hover{border-color:var(--blue);color:var(--blue)}.cnav button:focus-visible{outline:1.5px solid var(--blue);outline-offset:2px}
@media(max-width:560px){.cnav{display:none}.cards .card,.cards .card:nth-child(n){flex-basis:80%}.cards{margin:0 -20px;padding:2px 20px 14px}.cards .card{scroll-margin-left:20px}}
/* borderless arrow + refresh buttons */
.cnav button,.again{border:0!important;background:none}
.cnav button{width:32px;height:32px}
.cards.auto{scroll-snap-type:none}
.cards,.cards.auto{scroll-snap-type:none}
.pill .ax{display:inline-flex;align-items:center;gap:9px}.pill .ax svg{height:11px;width:auto;flex:none;fill:#b31b1b}.pill .ax{gap:12px}
/* phone: engraving sits left of the intro text, all in the first screen */
@media(max-width:560px){
 .hero{grid-template-columns:minmax(0,38fr) minmax(0,62fr);column-gap:14px;row-gap:0;align-items:start;padding-top:28px;padding-bottom:8px}
 .hero>.figure{order:-1;grid-column:1;position:sticky;top:60px}
 .hero>div:first-child{grid-column:2}
 .hero .figure .panel{aspect-ratio:3/4}
 .hero .caprow{gap:4px;align-items:center}.hero .cap{padding:8px 0 6px;flex-wrap:nowrap}.hero .cap #capt{display:none}.hero .cap .mono{font-size:.62rem}
 .hero .again{width:26px;height:26px;font-size:.9rem}
 .kicker{font-size:.92rem;margin-bottom:12px}
 .hero h1{font-size:7.9vw;margin-bottom:14px}
 .after{font-size:1rem;line-height:1.3;margin-bottom:18px}
 .hero .btns{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 .hero .pill{min-width:0;width:100%;padding:.55rem .8rem;font-size:.68rem;gap:8px;justify-content:space-between}
 .hero .pill .ax{gap:7px}.hero .pill .ax svg{height:8px}
}
/* phone: quote sits right under the intro, small enough to finish in the first screen */
@media(max-width:560px){
 .epi{padding-top:28px}.epi figure:before{width:40px;margin-bottom:16px}
 .epi p{font-size:1.12rem;line-height:1.3}.epi figcaption{margin-top:12px;font-size:.66rem}
 .hero{padding-bottom:0}
}
@media(max-width:560px){
 .hero .btns{gap:6px}
 .hero .pill{padding:.38rem .7rem;font-size:.62rem;gap:6px}
 .hero .pill .ax{gap:6px}.hero .pill .ax svg{height:7px}
 .after{margin-bottom:14px}
}
/* home: a rule between sections so they read as separate blocks */
.epi,.sec,.cta{position:relative}
.epi:after,.sec:after,.cta:after{content:"";position:absolute;top:0;left:40px;right:40px;height:1px;background:#8c9199;pointer-events:none}
@media(max-width:780px){.epi:after,.sec:after,.cta:after{left:20px;right:20px}}
.ask-grid{border-bottom:0}
@media(max-width:560px){.hero{padding-bottom:20px}}
/* phone: smaller "asking the right questions" rows */
@media(max-width:560px){
 .ask-c{grid-template-columns:64px 1fr;column-gap:12px;padding:12px 0}
 .ask-c svg{width:64px;height:48px}
 .ask-c h3{font-size:1.02rem;margin-bottom:2px}.ask-c p{font-size:.84rem;line-height:1.35}
 .ask-c.focus{padding:12px 10px}.ask-c.focus:before{left:6px;top:6px;width:9px;height:9px}.ask-c.focus:after{right:6px;bottom:6px;width:9px;height:9px}
}
/* softer, tinted section rules that fade out at the ends */
.epi:after,.sec:after,.cta:after{background:linear-gradient(90deg,rgba(63,91,200,0),rgba(63,91,200,.3) 18%,rgba(63,91,200,.3) 82%,rgba(63,91,200,0))}
/* sections told apart by alternating tinted bands instead of rules */
.epi:after,.sec:after,.cta:after{display:none}
.ask{position:relative}
.ask:before,.strip{background:#f4f6fb}
.ask:before{content:"";position:absolute;z-index:-1;top:72px;bottom:-64px;left:50%;width:100vw;transform:translateX(-50%)}
.ask{padding-bottom:0;margin-bottom:0}
.ask-grid{border-top:1px solid #dfe3ee}
.ask-c.focus{background:linear-gradient(180deg,#fff,#fbfcff)}
.strip{border-top:0;border-bottom:0;margin-top:64px}
.ask+.sec{padding-top:128px}
@media(max-width:780px){.ask:before{top:36px;bottom:-40px}.ask+.sec{padding-top:112px}.strip{margin-top:40px}}
.strip.rv-sec:before,.strip.rv-sec:after{display:none}

/* ===== Iliad-inspired refresh: Geist, tinted bands, dark footer ===== */
:root{--dot:"Geist",system-ui,sans-serif;--serif:"Geist",system-ui,sans-serif;--ital:"Newsreader",Georgia,serif;
--ink:#0b1424;--paper:#fafaf8;--grey:#5d6573;--hair:rgba(11,20,36,.12);
--t-cool:#dfe7e7;--t-blue:#cbdadc;--t-lav:#d6d0dd;--t-sage:#d7e3da;--t-warm:#f2eee3;--navy:#0b1424}
body{background:var(--paper);font:400 17px/1.6 var(--serif);letter-spacing:-.005em}
h1,h2,h3{font-weight:400;letter-spacing:-.03em}
.dot{font-family:var(--dot);font-weight:400}
.hero h1{font:300 clamp(2.6rem,5.6vw,5.4rem)/1.02 var(--dot);letter-spacing:-.04em;white-space:nowrap}
.sec-h h2,.strip h2{font:300 clamp(2rem,3.6vw,3.1rem)/1.05 var(--dot);letter-spacing:-.035em}
.phead h1,.two .lead h1{font:300 clamp(3rem,7vw,6rem)/.98 var(--dot);letter-spacing:-.045em}
.kicker{font:400 .95rem/1.3 var(--mono);letter-spacing:.02em;color:var(--grey)}
.after{font:300 1.25rem/1.4 var(--serif);color:var(--grey)}
.phead p,.cap span:last-child,.sec-h p,.epi p,.ask-c p,.card p{color:var(--grey)}
.cap span:last-child,.sec-h p,.epi p{font-family:var(--ital)}
.card h3,.ask-c h3{font-weight:400;letter-spacing:-.02em}
.prose{font-family:var(--serif)}.prose h2{font-weight:300;letter-spacing:-.03em}
.mt-t b{font-family:var(--serif);font-weight:500}
/* tinted full-bleed bands */
.ask,.sec:not(.ask),.cta,.phead{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);background:var(--bg)}
.ask:before{display:none}
.ask{--bg:var(--t-cool);padding-bottom:84px;margin-bottom:0}
.ask+.sec{--bg:var(--t-lav);padding-top:84px;padding-bottom:84px}
.strip{background:var(--t-sage);margin-top:0;border:0}.strip .wrap{padding-top:44px;padding-bottom:44px}
.cta{--bg:var(--t-warm);padding-top:96px;padding-bottom:96px}
.epi{padding-bottom:72px}
.ask-grid{border-top:1px solid rgba(11,20,36,.14)}.ask-c{border-color:rgba(11,20,36,.14)}
.ask-c.focus{background:rgba(255,255,255,.6)}
.cards .card,.cards .card:nth-child(n){background:rgba(255,255,255,.62);border-color:rgba(11,20,36,.08)}
.cards .thumb{background:#fff;border-color:rgba(11,20,36,.08)}
.sec .sec-h p{color:rgba(11,20,36,.6)}
.pill{background:var(--ink);border-color:var(--ink)}
.pill.ghost{background:transparent}
.notch{background:var(--navy)}.notch:before{background:radial-gradient(circle at 0 100%,transparent 17.5px,var(--navy) 18px)}.notch:after{background:radial-gradient(circle at 100% 100%,transparent 17.5px,var(--navy) 18px)}
/* per-page head tint */
.pg-problems .phead{--bg:var(--t-blue)}.pg-agendas .phead{--bg:var(--t-lav)}.pg-fields .phead{--bg:var(--t-sage)}.pg-about .phead{--bg:var(--t-warm)}
.phead{padding:84px 0 56px;margin-bottom:36px}
/* footer: dark, tucked under a rounded edge */
footer.site-foot{margin-top:-36px;position:relative;z-index:2;background:var(--navy);color:#eef0f3;border-radius:36px 36px 0 0;padding:84px 0 28px}
.site-foot .wrap{padding-bottom:0}
.f-mark svg{width:44px;height:44px;color:#fff;margin-bottom:34px;display:block}
.f-h{font:300 clamp(2rem,4.2vw,3.4rem)/1.08 var(--dot);letter-spacing:-.035em;color:#fff;max-width:760px;margin:0 0 56px}
.f-cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16)}
.f-col{display:flex;flex-direction:column;gap:10px;padding:26px 24px 30px 0;margin-right:24px;border-right:1px solid rgba(255,255,255,.16);color:#fff;min-height:190px}
.f-col:last-child{border-right:0;margin-right:0}
.f-col b{font:500 1.15rem/1.2 var(--dot);letter-spacing:-.02em}.f-col span{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.5}
.f-col i{margin-top:auto;font:400 .74rem var(--mono);font-style:normal;color:rgba(255,255,255,.8)}.f-col:hover b,.f-col:hover i{color:#a9c4ff}
.site-foot .fbase{border-top:1px solid rgba(255,255,255,.16);margin-top:0;padding-top:24px;align-items:center;flex-wrap:wrap;gap:14px}
.site-foot .fbase small{font:400 .74rem var(--mono);color:rgba(255,255,255,.6);margin:0}
.site-foot .fbase .r{gap:14px}.site-foot .fbase .r>a:not(.sq){font:400 .8rem var(--mono);color:rgba(255,255,255,.8)}.site-foot .fbase .r>a:not(.sq):hover{color:#fff}
.site-foot .sq{border-color:rgba(255,255,255,.25);color:#fff;background:none}.site-foot .sq:hover{border-color:#a9c4ff;color:#a9c4ff;background:none}
@media(max-width:900px){.f-cols{grid-template-columns:1fr 1fr}.f-col{border-right:0;margin-right:0;padding-right:12px;border-bottom:1px solid rgba(255,255,255,.12);min-height:0}}
@media(max-width:560px){footer.site-foot{padding:56px 0 22px;border-radius:26px 26px 0 0;margin-top:-26px}.f-h{margin-bottom:34px}.f-cols{grid-template-columns:1fr}.f-col{padding:18px 0}.f-col i{margin-top:8px}.ask{padding-bottom:48px}.ask+.sec{padding-top:56px;padding-bottom:56px}.cta{padding-top:64px;padding-bottom:72px}.strip .wrap{padding-top:28px;padding-bottom:28px}.hero h1{font-size:8.4vw}.phead{padding:56px 0 36px;margin-bottom:24px}}

/* ===== footer curtain, brand-coloured, scan-line headline ===== */
:root{--deep:#111a44;--deep-2:#18235a}
main{position:relative;z-index:2;background:var(--paper);border-radius:0 0 32px 32px;overflow:clip;min-height:60vh}
footer.site-foot{position:relative;z-index:1;margin:0;border-radius:0;padding:96px 0 28px;color:#e8ecff;
 background:linear-gradient(rgba(232,236,255,.045) 1px,transparent 1px) 0 0/100% 18px,linear-gradient(90deg,rgba(232,236,255,.045) 1px,transparent 1px) 0 0/18px 100%,var(--deep)}
body:not(.curtain) main{margin-bottom:-32px;padding-bottom:0}
body:not(.curtain) footer.site-foot{padding-top:128px}
body.curtain footer.site-foot{position:fixed;left:0;right:0;bottom:0}
body.curtain main{margin-bottom:var(--fh,0)}
.f-mark svg{color:#e8ecff}
.f-h{font:600 clamp(2.4rem,6vw,5.2rem)/1.02 var(--dot);letter-spacing:-.04em;max-width:900px;color:transparent;
 background:repeating-linear-gradient(0deg,#e8ecff 0 2px,transparent 2px 5px);-webkit-background-clip:text;background-clip:text;margin-bottom:64px}
.f-cols,.site-foot .fbase{border-color:rgba(232,236,255,.18)}
.f-col{border-right-color:rgba(232,236,255,.18);color:#fff}
.f-col span{color:rgba(232,236,255,.64)}.f-col i{color:rgba(232,236,255,.85)}
.f-col:hover b,.f-col:hover i{color:#9db4ff}
.site-foot .fbase small{color:rgba(232,236,255,.6)}
.site-foot .sq{border-color:rgba(232,236,255,.28)}
@media(max-width:900px){.f-col{border-bottom-color:rgba(232,236,255,.14)}}
@media(max-width:560px){footer.site-foot{padding:64px 0 22px;border-radius:0}body:not(.curtain) footer.site-foot{padding-top:88px}main{border-radius:0 0 24px 24px}body:not(.curtain) main{margin-bottom:-24px}.f-h{font-size:12vw;margin-bottom:36px}}

/* ===== tidier header + notch ===== */
header.top{padding-top:22px;padding-bottom:26px;align-items:center}
.brand{gap:10px}.brand span{font:500 .86rem/1.1 var(--serif);letter-spacing:-.01em}.brand svg{width:28px;height:28px}
.repo{padding-top:0;font-size:.72rem}
.notch{background:var(--deep);padding:5px 20px 8px;border-radius:0 0 16px 16px}
.notch:before{left:-16px;width:16px;height:16px;background:radial-gradient(circle at 0 100%,transparent 15.5px,var(--deep) 16px)}
.notch:after{right:-16px;width:16px;height:16px;background:radial-gradient(circle at 100% 100%,transparent 15.5px,var(--deep) 16px)}
.notch a{font-size:.72rem;padding:4px 12px;letter-spacing:.01em}
.notch a[aria-current=page]{color:#fff}
@media(max-width:780px){header.top{padding-top:18px;padding-bottom:20px}.notch{padding:2px 18px 4px}.notch.open{padding:4px 18px 8px;border-radius:20px}}
/* compact footer so the curtain fits laptop and phone screens */
footer.site-foot{padding:56px 0 20px}
body:not(.curtain) footer.site-foot{padding-top:88px}
.f-mark svg{width:34px;height:34px;margin-bottom:20px}
.f-h{font-size:clamp(2.2rem,4.6vw,3.9rem);margin-bottom:34px}
.f-col{min-height:0;padding:20px 20px 22px 0;gap:6px}.f-col i{margin-top:12px}
.site-foot .fbase{padding-top:18px}
@media(max-width:900px){.f-cols{grid-template-columns:1fr 1fr}.f-col{border-bottom:0;padding:16px 12px 16px 0;margin-right:12px}.f-col:nth-child(2n){border-right:0;margin-right:0}.f-col span{display:none}.f-col i{margin-top:4px}}
@media(max-width:560px){footer.site-foot{padding:36px 0 16px}body:not(.curtain) footer.site-foot{padding-top:60px}.f-mark svg{width:28px;height:28px;margin-bottom:14px}.f-h{font-size:11vw;margin-bottom:22px}.f-cols{grid-template-columns:1fr 1fr}.f-col{padding:12px 10px 12px 0}.f-col b{font-size:1rem}.site-foot .fbase{padding-top:14px}}
.ask-grid.three{grid-template-columns:repeat(3,1fr)}
.ask-grid.three .ask-c{padding:30px 28px 34px}
.ask-grid.three .ask-c h3{font-size:1.25rem;margin-bottom:10px}
@media(max-width:780px){.ask-grid.three{grid-template-columns:1fr}.ask-grid.three .ask-c{display:block;border-right:0!important;border-bottom:1px solid rgba(11,20,36,.14);padding:20px 0}.ask-grid.three .ask-c:last-child{border-bottom:0}.ask-grid.three .ask-c.focus{padding:20px 12px}}

/* Compact wiki entry in the main navigation. */
.notch a.wiki-link{font-size:.65rem;padding:4px 8px}
@media(max-width:780px){.notch.open a.wiki-link{font-size:.8rem;padding:9px 14px}}