/* Ask Two Questions — site design system. Fonts: Fraunces + Bricolage Grotesque (SIL OFL 1.1, self-hosted). */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/BricolageGrotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{--paper:#F7F0E3;--card:#FFFBF3;--ink:#1B1F3B;--ink2:#3A3F63;--muted:#686578;--tomato:#EF5B3B;--tomato-ink:#C4401F;--tomato-soft:#FDE1D7;--sun:#FFC845;--sun-soft:#FFF0C4;--mint:#8ED1B8;--mint-soft:#DDF3EA;--lilac:#BFB6F2;--lilac-soft:#ECE9FD;--line:#E3D8C3;
--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--shadow:5px 5px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.65 var(--body);background-color:var(--paper);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--ink);text-decoration-color:var(--tomato);text-decoration-thickness:2px;text-underline-offset:4px}a:hover{color:var(--tomato-ink)}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--tomato);outline-offset:4px}
.skip{position:absolute;top:-100px;left:12px;background:var(--card);padding:12px;z-index:10}.skip:focus{top:0}
/* header */
header{position:sticky;top:0;z-index:5;background:rgba(247,240,227,.92);backdrop-filter:blur(6px);border-bottom:2px solid var(--ink)}
header>div{max-width:1220px;margin:auto;padding:14px 30px;display:flex;justify-content:space-between;align-items:center;gap:25px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none}.wordmark{font:italic 600 23px/1 var(--display);letter-spacing:-.4px;font-variation-settings:"SOFT" 100,"WONK" 1}.wordmark b{color:var(--tomato-ink);font-weight:800}
/* A69: these nav rules belong to the site's own navs (header, breadcrumbs, chapter links, case picker), not to every <nav> an in-page list might use; :where() keeps the specificity. */
nav:where(header nav,.crumbs,.book-nav,.picker){display:flex;gap:22px;align-items:center}nav:where(header nav,.crumbs,.book-nav,.picker) a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}nav:where(header nav,.crumbs,.book-nav,.picker) a:hover{color:var(--tomato-ink)}
.nav-cta,.button{display:inline-block;background:var(--sun)!important;color:var(--ink)!important;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.nav-cta:hover,.button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.nav-cta{background:var(--tomato)!important;color:var(--ink)!important}
.button.ghost{background:transparent!important}
main{max-width:1160px;margin:auto;padding:32px 0 70px}
/* type */
.eyebrow{display:inline-block;font:700 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:7px 12px;margin:0 0 20px}
h1{font:700 clamp(42px,6.4vw,88px)/1.02 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.02em;margin:0 0 24px}
h1 em,h2 em{font-style:italic;color:var(--tomato-ink);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 70 12, 110 6 S 170 2, 198 7' fill='none' stroke='%23FFC845' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% .32em no-repeat;padding-bottom:.06em}
h2{font:650 clamp(28px,3.4vw,40px)/1.12 var(--display);font-variation-settings:"SOFT" 80,"opsz" 72;letter-spacing:-.01em;margin:44px 0 18px}
h3{font:700 21px/1.3 var(--body);margin:0 0 10px}
p{margin:0 0 18px}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;padding:34px 0 50px;align-items:center}
.hero .intro{max-width:600px;font-size:20px;color:var(--ink2)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.qart{position:relative;min-height:470px}
.qcard{position:absolute;width:74%;padding:26px 26px 30px;border:2px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);background:var(--card)}
.qcard .q{font:800 64px/1 var(--display);color:var(--tomato-ink);display:block;margin-bottom:6px}
.qcard strong{font:650 26px/1.2 var(--display);display:block}
.qcard small{display:block;margin-top:10px;color:var(--muted);font-size:14px}
.qcard.one{top:8px;left:0;transform:rotate(-4deg);background:var(--card)}
.qcard.two{top:215px;right:0;transform:rotate(3deg);background:var(--lilac-soft)}
.qcard.two .q{color:var(--ink)}
.sticky{position:absolute;left:10%;bottom:-6px;transform:rotate(-2deg);background:var(--sun);border:2px solid var(--ink);padding:14px 18px;font:700 17px/1.3 var(--body);box-shadow:3px 3px 0 var(--ink)}
.sticky::before{content:"";position:absolute;top:-12px;left:40%;width:60px;height:20px;background:rgba(191,182,242,.8);transform:rotate(-4deg)}
.doodle{position:absolute;right:6%;bottom:30px;width:120px}
/* sections */
.section-top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:40px}.section-top h2{margin:0 0 22px}.section-top>a{font-weight:700;white-space:nowrap}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:10px 0 20px;counter-reset:s}
.steps3 div{position:relative;padding:22px 22px 18px 22px;border-top:3px solid var(--ink)}
.steps3 div::before{counter-increment:s;content:counter(s);font:800 58px/1 var(--display);color:var(--tomato-ink);display:block;margin-bottom:6px}
.steps3 p{color:var(--ink2);font-size:16px;margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;border:2px solid var(--ink);border-radius:18px;background:var(--card);padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .15s}
.grid>.card:nth-child(3n+1){transform:rotate(-.6deg)}.grid>.card:nth-child(3n+2){transform:rotate(.5deg)}.grid>.card:hover{transform:rotate(0) translateY(-3px)}
.card .kicker{align-self:flex-start;font:700 12px/1 var(--body);letter-spacing:1.4px;text-transform:uppercase;background:var(--sun-soft);border:1.5px solid var(--ink);border-radius:999px;padding:6px 10px;margin-bottom:14px}
.grid>.card:nth-child(3n+2) .kicker{background:var(--mint-soft)}.grid>.card:nth-child(3n) .kicker{background:var(--lilac-soft)}
.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{color:var(--tomato-ink)}
.card p{font-size:15.5px;color:var(--ink2)}.card .more{font-size:14px;font-weight:700;margin-top:auto}
.featured{background:var(--sun-soft)}
.card.ai{background:var(--lilac-soft)}
.strip{position:relative;overflow:hidden;margin:44px 0;padding:34px 36px;background:var(--ink);color:var(--paper);border-radius:26px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.strip::after{content:"?";content:"?" / "";position:absolute;right:-10px;top:-70px;font:800 260px/1 var(--display);color:var(--tomato);opacity:.28;pointer-events:none}
.strip p{margin:0;max-width:700px;position:relative;z-index:1}.strip strong{font:650 26px/1.2 var(--display);display:block;margin-bottom:6px;color:var(--sun)}
.strip a:not(.button){color:var(--paper)}.strip .button{flex-shrink:0;position:relative;z-index:1}
/* articles */
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:9px;flex-wrap:wrap;margin:5px 0 25px}.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:var(--tomato-ink)}
.article-top{max-width:940px;padding:14px 0 26px}.article-top h1{font-size:clamp(36px,4.8vw,62px)}
.dek{font-size:20px;color:var(--ink2);max-width:800px}.meta{font-size:13px;color:var(--muted)}
.article-grid{display:grid;grid-template-columns:minmax(0,780px) 280px;gap:55px;align-items:start}
.article-body{max-width:780px}.article-body h2{scroll-margin-top:90px}.article-body p{line-height:1.8}
.answer{position:relative;background:var(--sun-soft);border:2px solid var(--ink);box-shadow:var(--shadow);padding:24px 26px;border-radius:20px;margin-bottom:34px}
.answer p{margin:0}.answer .eyebrow{margin-bottom:12px;background:var(--card)}
.toc{position:sticky;top:96px;border:2px solid var(--ink);background:var(--card);border-radius:18px;padding:22px;font-size:14px;box-shadow:var(--shadow)}
.toc p{font:700 12px/1 var(--body);letter-spacing:1.5px;margin-bottom:10px}.toc a{display:block;padding:6px 0;text-decoration:none;font-weight:600}.toc hr{border:0;border-top:2px dashed var(--line);margin:12px 0}
.example{border:2px solid var(--ink);padding:26px;background:var(--card);border-radius:20px;margin:34px 0;box-shadow:var(--shadow)}
.example .eyebrow{background:var(--lilac)}
.example blockquote{margin:14px 0;padding:16px 18px;border:2px solid var(--ink);border-radius:14px;background:var(--mint-soft);font-weight:500}
.example .old{background:var(--tomato-soft);text-decoration:line-through;text-decoration-color:rgba(239,91,59,.6)}
ul,ol{padding-left:25px}li{margin:7px 0}
.checklist{background:var(--lilac-soft);border:2px solid var(--ink);padding:24px;border-radius:20px}
.checklist ul{list-style:none;padding-left:0}.checklist li{position:relative;padding-left:32px}.checklist li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border:2px solid var(--ink);border-radius:5px;background:var(--card)}
.faq details{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px 20px;margin:12px 0}.faq summary{font-weight:700;cursor:pointer}.faq details[open]{background:var(--sun-soft)}.faq details p{margin:12px 0 0}
.related{margin-top:48px}.related .card{padding:22px}
.readable{max-width:820px}
.plain-panel{background:var(--card);padding:30px;border:2px solid var(--ink);border-radius:18px}
.template{background:var(--card);padding:26px;border:2px solid var(--ink);border-radius:18px;margin:24px 0;box-shadow:var(--shadow)}
.template pre{white-space:pre-wrap;font:15px/1.7 ui-monospace,"SF Mono",Menlo,monospace;padding:18px;background:var(--paper);border:2px dashed var(--line);border-radius:12px}.template button{margin-right:10px}
.status{font-size:13px;color:var(--muted)}
.search{display:flex;gap:15px;flex-wrap:wrap;margin:25px 0}.search label{display:grid;gap:6px;font-size:13px;font-weight:700;flex:1}
.search input,.search select{border:2px solid var(--ink);padding:12px 14px;border-radius:12px;background:var(--card);min-width:200px;color:var(--ink)}
.empty{padding:25px;background:var(--sun-soft);border:2px solid var(--ink);border-radius:16px}
video{max-width:100%;max-height:480px;border-radius:14px;border:2px solid var(--ink);background:var(--ink)}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 25px}.tag{border:2px solid var(--ink);border-radius:25px;padding:5px 12px;font-size:12px;font-weight:700;text-decoration:none}
.note{font-size:14px;color:var(--muted);border-top:2px dashed var(--line);padding-top:20px;margin-top:34px}
/* footer */
footer{position:relative;background:var(--ink);color:var(--paper);margin-top:40px}
footer::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 20 0, 40 0, 60 12 S 100 22, 120 6 L120 20 Z' fill='%231B1F3B'/%3E%3C/svg%3E") repeat-x;background-size:240px 20px}
footer>div{max-width:1160px;margin:auto;padding:46px 0 40px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:35px}
footer .wordmark{font-size:30px;color:var(--paper);display:block;margin-bottom:12px}footer .wordmark b{color:var(--sun)}
footer a{color:var(--paper);display:block;font-size:14px;margin:8px 0;text-decoration:none}footer a:hover{color:var(--sun)}
footer p{font-size:13px;color:#CFCBDD}footer strong{display:block;margin-bottom:14px;font:700 12px/1 var(--body);letter-spacing:1.5px;text-transform:uppercase;color:var(--sun)}
[hidden]{display:none!important}
@media(max-width:1220px){main{margin:0 30px}footer>div{padding:46px 30px 40px}}
@media(max-width:860px){header>div{padding:12px 16px;gap:12px}nav:where(header nav,.crumbs,.book-nav,.picker){gap:14px}nav:where(header nav,.crumbs,.book-nav,.picker) a{font-size:13px}header nav a:nth-child(2),header nav a:nth-child(3),header nav a:nth-child(4){display:none}.wordmark{font-size:19px}.brand svg{width:36px;height:36px}.nav-cta{padding:8px 12px;font-size:13px;white-space:nowrap}
main{margin:0 16px;padding-top:18px}.hero{grid-template-columns:1fr;gap:20px;padding:14px 0 30px}.hero .intro{font-size:18px}.qart{min-height:430px}.qcard{width:86%}.qcard.two{top:215px}.qcard strong{font-size:21px}.doodle{display:none}
.grid,.steps3{grid-template-columns:1fr}.grid>.card{transform:none!important}.article-grid{grid-template-columns:1fr;gap:20px}.toc{position:static;order:-1}.toc a{display:inline-block;margin-right:14px}
.strip{display:block;padding:28px 24px}.strip .button{margin-top:20px}.section-top{align-items:start;flex-direction:column;gap:0}footer>div{grid-template-columns:1fr;gap:16px;padding:40px 20px}.article-body p{font-size:16px}.card{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.button,.nav-cta{transition:none}}
@media print{header,footer,.toc,.related,.button{display:none}body{background:#fff}main{margin:0;padding:0}.article-grid{display:block}.article-top h1{font-size:30px}a{color:inherit}}
/* ---- 2026-09-27 conversion revamp: illustrations, takeaway card, cast, plans ---- */
.mascots{position:relative;min-height:440px}
.mascots img{position:absolute;filter:drop-shadow(4px 4px 0 rgba(27,31,59,.12))}
.mascots .m1{width:46%;left:2%;top:10px;transform:rotate(-5deg)}
.mascots .m2{width:44%;right:4%;top:40px;transform:rotate(5deg)}
.mascots .m3{width:40%;left:30%;top:230px}
.mascots .sticky{left:auto;right:0;bottom:6px}
.pains .grid{margin-top:8px}
a.card.pain{text-decoration:none;color:var(--ink)}
a.card.pain img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:2px solid var(--ink);background:var(--paper);margin-bottom:14px}
a.card.pain h3{font:700 22px/1.25 var(--display)}
.pains-more{margin:20px 0 0;font-weight:700}
a.card.pain:hover{transform:rotate(0) translateY(-4px)}
.takeaway{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin:54px 0}
.nscard{background:var(--sun-soft);border:2px dashed var(--ink);border-radius:20px;padding:24px 26px;transform:rotate(1.2deg);box-shadow:var(--shadow)}
.nscard p{margin:8px 0;font-size:15.5px}.nscard .eyebrow{background:var(--card)}
.cast{margin:40px 0}
.castrow{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;align-items:end}
.castrow figure{margin:0;text-align:center}
.castrow img{width:100%;height:180px;object-fit:contain}
.castrow figcaption{font-size:13px;line-height:1.35;color:var(--ink2);margin-top:6px}
.plan ul{padding-left:20px;margin:0 0 16px}.plan li{margin:6px 0;font-size:15.5px}.plan .button{align-self:flex-start;margin-top:auto}
.proof .card h3{font:700 21px/1.25 var(--display)}
@media(max-width:860px){.mascots{min-height:330px}.mascots .m3{top:170px}.takeaway{grid-template-columns:1fr}.castrow{grid-template-columns:repeat(4,1fr)}.castrow img{height:130px}}
nav:where(header nav,.crumbs,.book-nav,.picker) a{white-space:nowrap}

/* ---- Office v2 (after Codex review 2026-09-27): cross-section scene + practice panel ---- */
.office-intro{max-width:760px;padding:6px 0 10px}.office-intro h1{font-size:clamp(34px,4.6vw,58px)}.office-intro .dek{font-size:18px}
.office-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}
.office-layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;align-items:start;margin-top:12px}
.picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pick{border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;text-decoration:none;background:var(--card)}
.pick[aria-current="true"]{background:var(--sun)}
.scene-toggle>summary{cursor:pointer;font-weight:700;font-size:14px;margin-bottom:8px;list-style:none}.scene-toggle>summary::-webkit-details-marker{display:none}.scene-toggle>summary::before{content:"▸ ";}.scene-toggle[open]>summary::before{content:"▾ ";}
.scene{border:2px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#EFE3CB}
.s-wall{position:relative;height:120px;background:#F7F0E3;border-bottom:3px solid var(--ink);display:flex;gap:18px;align-items:center;padding:0 18px}
.s-window{width:110px;height:78px;border:3px solid var(--ink);border-radius:8px;background:#DDF3EA;box-shadow:inset 0 -22px 0 #BFE6D6;flex:none}
.s-board{flex:1;display:flex;gap:10px;align-items:stretch;padding:10px 12px 10px;border:3px solid var(--ink);border-radius:12px;background:#FFFBF3;position:relative}
.s-board-t{position:absolute;top:-11px;left:12px;background:#FFFBF3;padding:0 6px;font:700 13px/1 var(--display)}
.s-pin{flex:1;border:2px solid var(--ink);border-radius:8px;padding:8px 10px;text-decoration:none;color:var(--ink);font-size:13px;display:flex;flex-direction:column;gap:2px}
.s-pin.sun{background:var(--sun-soft)}.s-pin.mint{background:var(--mint-soft)}.s-pin.lilac{background:var(--lilac-soft)}
.pin-st{font-size:11.5px;color:var(--ink2)}
.s-floor{position:relative;display:grid;grid-template-columns:repeat(3,1fr) .8fr;gap:6px;padding:26px 14px 16px;background:linear-gradient(#EFE3CB,#E6D6B5)}
.station{position:relative;display:flex;flex-direction:column;align-items:center}
.s-person{width:100%;max-width:150px;height:210px;object-fit:contain;object-position:bottom;position:relative;z-index:1;filter:drop-shadow(0 6px 0 rgba(27,31,59,.12))}
.s-desk{position:relative;z-index:2;width:100%;height:60px;margin-top:-58px;background:#FFFBF3;border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.s-desk.small-desk{width:80%}
.s-facts{position:absolute;left:10px;top:-14px;display:flex;gap:4px}
.fact-card{width:26px;height:18px;background:var(--sun);border:2px solid var(--ink);border-radius:3px;transform:rotate(-6deg)}
.fact-card.pop{animation:dropIn .35s ease-out 1}
@keyframes dropIn{from{transform:translateY(-24px) rotate(-6deg);opacity:0}to{transform:rotate(-6deg);opacity:1}}
.s-label{margin-top:10px;border:0;background:none;padding:0;font:700 14px/1.25 var(--body);color:var(--ink);text-align:center;text-decoration:none;cursor:pointer}
.s-label small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.s-bubble{visibility:hidden;position:absolute;top:-8px;left:50%;transform:translate(-50%,-100%);width:92%;max-width:210px;margin:0;background:#FFFBF3;border:2px solid var(--ink);border-radius:12px;padding:7px 9px;font:600 13px/1.3 var(--body);box-shadow:2px 2px 0 var(--ink);z-index:3}
.station.active .s-bubble{visibility:visible}
.station.active .s-label{background:var(--sun);border-radius:999px;padding:4px 10px}
.station.active .s-label small{color:var(--ink2)} /* A13: --muted on --sun was 3.65:1; --ink2 on --sun passes AA */
.otto-station .s-otto{height:150px;margin-top:60px}
#otto-toggle[aria-pressed="true"]{background:var(--lilac);border-radius:999px;padding:4px 10px}
.case-list{margin-top:22px}.case-list h2{font-size:24px;margin:0 0 8px}.case-list ul{padding-left:18px}.case-list li{margin:6px 0;font-size:15px}
.desk-panel{position:sticky;top:90px;border:2px solid var(--ink);border-radius:22px;background:var(--card);padding:20px;box-shadow:var(--shadow);max-height:calc(100vh - 110px);overflow:auto}
.desk-panel h2{font-size:24px;margin:0 0 8px}.desk-panel .eyebrow{margin-bottom:8px}
.desk-panel .who{font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 8px}
.desk-panel .condition{background:var(--lilac-soft);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;font-size:14px}
.desk-panel .solo-questions,.desk-panel .solo-plans{display:grid;gap:7px;margin:8px 0 12px}
.desk-panel .solo-q{text-align:left;border:2px solid var(--ink);border-radius:12px;background:#FFFBF3;padding:9px 11px;font:inherit;font-size:14.5px;cursor:pointer;color:var(--ink)}
.desk-panel .solo-q:hover:not([disabled]){background:var(--sun-soft)}.desk-panel .solo-q[disabled]{opacity:.5;cursor:default}
.desk-panel .solo-plan{display:flex;gap:8px;align-items:flex-start;border:2px solid var(--ink);border-radius:12px;padding:8px 10px;font-size:14.5px}
.desk-panel .reveal{background:var(--lilac-soft);border-left:5px solid var(--ink);border-radius:0 12px 12px 0;padding:8px 12px;margin:8px 0}.desk-panel .reveal p{margin:4px 0 0}.desk-panel .reveal .eyebrow{background:none;border:0;padding:0;margin:0;font-size:11px}
.desk-panel .note{border:2px solid var(--ink);border-radius:12px;padding:10px 12px;margin:10px 0}
.desk-panel .result-checked{background:var(--mint-soft)}.desk-panel .result-needs_approval{background:var(--sun-soft)}.desk-panel .result-missing_facts{background:#FFF7E6;border-style:dashed}.desk-panel .result-doesnt_fit{background:var(--tomato-soft)}
.desk-panel .solo-card{border:2px dashed var(--ink);border-radius:14px;background:var(--sun-soft);padding:12px 14px;margin-top:10px}.desk-panel .solo-card p{margin:5px 0;font-size:14px}
.desk-panel .secondary{background:var(--tomato);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer;margin:8px 6px 0 0}
.text-button{border:0;background:none;color:var(--ink2);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;padding:6px 4px}
.mycards{border-top:2px dashed var(--line);margin-top:16px;padding-top:12px}.mycards h3{font-size:16px}.mycards ul{padding-left:18px;margin:6px 0}
.small{font-size:13px}.muted{color:var(--muted)}
@media(max-width:860px){.office-layout{grid-template-columns:1fr}.desk-panel{position:static;max-height:none;order:-1}.scene-col{order:0}.s-floor{grid-template-columns:repeat(2,1fr);row-gap:40px}.s-board{flex-wrap:wrap}.s-wall{height:auto;padding:14px}}
@media(prefers-reduced-motion:reduce){.fact-card.pop{animation:none}html{scroll-behavior:auto}}
#desk-title:focus:not(:focus-visible),.desk-panel h2:focus:not(:focus-visible){outline:none}
/* ---- Design loop R1: "Hours you can see" hero (ink band + data-driven hour blocks) ---- */
.hero2{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;margin:0 -9999px;padding:56px 9999px 64px;background:#1B1F3B;color:#F7F0E3;position:relative}
.hero2 .eyebrow{background:var(--sun);color:var(--ink)}
.hero2 h1{color:#FFFBF3}.hero2 h1 em{color:#FF8A6B}
.hero2 .intro{color:#DCD7EA;font-size:19px;max-width:560px}
.hero2 .status{color:#B9B4CC}
.hero2 .button.ghost{color:#FFFBF3!important;border-color:#FFFBF3;box-shadow:3px 3px 0 #FFC845}
.hs{background:#FFFBF3;color:var(--ink);border-radius:24px;padding:22px 22px 18px;box-shadow:8px 8px 0 var(--sun);border:3px solid #FFFBF3}
.hs-msg{background:var(--lilac-soft);border:2px solid var(--ink);border-radius:16px 16px 16px 4px;padding:10px 14px;max-width:88%}
.hs-from{font:700 11px/1 var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--ink2)}
.hs-msg p{margin:6px 0 0;font:600 20px/1.3 var(--display)}
.hs-stage{position:relative;margin:26px 0 8px;padding-bottom:84px}
.hs-track{position:relative;height:64px;border:3px solid var(--ink);border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 2px),rgba(27,31,59,.14) calc(100%/7 - 2px) calc(100%/7))}
.hs-capline{position:absolute;top:-16px;bottom:-16px;width:0;border-left:4px dashed var(--ink);transition:left .6s cubic-bezier(.2,.9,.3,1.2),opacity .3s;opacity:0}
.cap-known .hs-capline{opacity:1}
.hs-caplabel{position:absolute;top:-26px;left:-4px;white-space:nowrap;font:800 12px/1 var(--body);background:var(--ink);color:#FFFBF3;padding:5px 8px;border-radius:999px;transform:translateX(-50%)}
.cap-known .hs-track{background:linear-gradient(90deg,rgba(142,209,184,.35) 0 calc(100%*5/7),rgba(239,91,59,.14) calc(100%*5/7) 100%)}
.hs-blk{position:absolute;width:calc(100%/7 - 8px);margin-left:4px;height:44px;border:2px solid var(--ink);border-radius:8px;display:grid;place-items:center;font:700 14px/1 var(--display);background:#E3D8C3;transition:left .7s cubic-bezier(.2,.9,.3,1.1),top .7s cubic-bezier(.2,.9,.3,1.1),background .4s,transform .3s}
.scope-known .hs-blk[data-kind="core"]{background:var(--sun)}
.scope-known .hs-blk[data-kind="handoff"]{background:var(--mint)}
.scope-known .hs-blk[data-kind="polish"]{background:repeating-linear-gradient(135deg,var(--lilac) 0 6px,#E4DFFB 6px 12px)}
.hs-blk.over{border-color:#C4401F;box-shadow:0 0 0 3px #EF5B3B;transform:rotate(3deg)}
.hs-shelf{position:absolute;left:0;right:0;top:calc(64px + 22px);height:52px;border:2px dashed var(--ink2);border-radius:10px;padding:0 10px;font:700 11px/52px var(--body);color:var(--ink2);text-align:right;z-index:0}
.hs-say{min-height:48px;font:650 18px/1.35 var(--display);margin:6px 0 12px}
.hs-qs{display:grid;gap:8px}
.hs-q{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--ink);border-radius:12px;background:#FFFBF3;padding:10px 12px;font:600 15px/1.3 var(--body);color:var(--ink);cursor:pointer}
.hs-q span{font:800 12px/1 var(--display);background:var(--ink);color:var(--sun);border-radius:6px;padding:5px 7px}
.hs-q:hover{background:var(--sun-soft)}.hs-q.done{background:var(--mint-soft)}.hs-q.done::after{content:"✓ asked";margin-left:auto;font-size:12px;font-weight:800}
.hs-replay{margin-top:6px}
.hs-legend{font-size:12px;color:var(--ink2);margin:6px 0 0}.lg{display:inline-block;width:12px;height:12px;border:1.5px solid var(--ink);border-radius:3px;margin:0 4px -1px 8px}.lg.core{background:var(--sun)}.lg.handoff{background:var(--mint)}.lg.polish{background:var(--lilac)}
@media(max-width:860px){.hero2{grid-template-columns:1fr;padding:34px 9999px 40px;gap:24px}.hs-msg p{font-size:17px}.hs-blk{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hs-blk,.hs-capline{transition:none}}
html,body{overflow-x:clip}

/* ---- Design loop R2: live facts bar in practice, mobile hero compaction, ink band rhythm ---- */
.live-hours{margin:10px 0 14px;padding:12px;border:2px solid var(--ink);border-radius:14px;background:#1B1F3B}
.lh-track{position:relative;display:flex;gap:4px;height:46px}
.lh-seg{display:grid;place-items:center;border:2px dashed #FFFBF3;border-radius:8px;color:#FFFBF3;font:700 12px/1.1 var(--body);text-align:center;padding:0 4px;transition:flex-grow .6s cubic-bezier(.2,.9,.3,1.1)}
.lh-track.known .lh-seg{border-style:solid;border-color:var(--ink);color:var(--ink)}
.lh-track.known .lh-seg.core{background:var(--sun)}.lh-track.known .lh-seg.handoff{background:var(--mint)}.lh-track.known .lh-seg.polish{background:repeating-linear-gradient(135deg,var(--lilac) 0 6px,#E4DFFB 6px 12px)}
.lh-cap{position:absolute;top:-8px;bottom:-8px;border-left:4px dashed #FFC845}
.lh-cap b{position:absolute;top:-20px;left:4px;font:800 11px/1 var(--body);color:#FFC845;white-space:nowrap}
.lh-say{margin:10px 0 0;color:#FFFBF3;font:600 15px/1.35 var(--display)}
.takeaway{margin:54px -9999px;padding:48px 9999px;background:#1B1F3B;color:#F7F0E3}.takeaway h2{color:#FFFBF3}.takeaway p{color:#DCD7EA}.takeaway a:not(.button){color:#FFC845}.takeaway .nscard{color:var(--ink)}.takeaway .nscard p{color:var(--ink)}
@media(max-width:860px){.hero2 .intro{font-size:16px}.hero2 .status,.hero2 .button.ghost{display:none}.hero2{padding-top:26px}}
@media(prefers-reduced-motion:reduce){.lh-seg{transition:none}}

/* ---- Design loop R3: consistent ink intro on Cases; desks carry the problem as objects ---- */
.office-intro.band{max-width:none;margin:0 -9999px 10px;padding:30px 9999px 34px;background:#1B1F3B;color:#F7F0E3}
.office-intro.band h1{color:#FFFBF3}.office-intro.band h1 em{color:#FF8A6B}.office-intro.band .dek{color:#DCD7EA;max-width:720px}.office-intro.band .status{color:#B9B4CC}
.office-intro.band .eyebrow{background:var(--sun);color:var(--ink)}.office-intro.band .button.ghost{color:#FFFBF3!important;border-color:#FFFBF3;box-shadow:3px 3px 0 #FFC845}
.mini{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:3px;align-items:flex-end;height:22px}
.mb{flex:1;height:16px;border:1.5px solid var(--ink);border-radius:3px;background:#E3D8C3}
.mb.q{background:var(--sun-soft)}.mb.p{background:var(--mint)}.mb.n{background:var(--tomato);transform:translateY(-6px) rotate(-6deg)}
.mini.doc{display:block;height:auto;bottom:8px}.docline{display:block;height:4px;background:var(--ink2);border-radius:2px;margin:3px 0;width:70%}.docline.short{width:45%}.docname{font:800 10px/1 var(--body);font-style:normal;background:var(--tomato-soft);border:1.5px solid var(--ink);border-radius:999px;padding:2px 6px;position:absolute;right:0;bottom:0}
.s-desk{height:64px}
.mb.q{border-style:dashed;font:800 10px/14px var(--body);text-align:center;font-style:normal}

/* ---- Line cast (2026-09-27): code-drawn characters + office scene ---- */
.c-svg{display:block;width:100%;height:auto;overflow:visible}
.c-arm-think{display:none}.c-think .c-arm-think,.c-svg.c-think .c-arm-think{display:inline}.c-think .c-arm-rest{display:none}
.c-o,.c-flat,.c-brow-w{opacity:0}.c-talk .c-o{opacity:1}.c-talk .c-smile{opacity:0}
.c-think .c-smile{opacity:0}.c-think .c-flat{opacity:1}.c-think .c-brow{opacity:0}.c-think .c-brow-w{opacity:1}
.c-breathe{animation:cbr 4.5s ease-in-out infinite}@keyframes cbr{50%{transform:translateY(-1.5px)}}
.c-blink{animation:cbl 5s infinite;transform-box:fill-box;transform-origin:center}@keyframes cbl{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.c-type{animation:cty .5s ease-in-out infinite alternate}.c-type2{animation:cty .5s ease-in-out .25s infinite alternate}@keyframes cty{to{transform:translateY(-2px)}}
.c-head{transform-box:fill-box;transform-origin:50% 90%}.c-talk .c-head{animation:cnod .6s ease-in-out 2}@keyframes cnod{50%{transform:rotate(-3deg)}}
.c-float{animation:cfl 3s ease-in-out infinite}@keyframes cfl{50%{transform:translateY(-3px)}}
.c-steam path{animation:cst 3s ease-in-out infinite;opacity:.6}.c-steam path:nth-child(2){animation-delay:1s}@keyframes cst{0%{transform:translateY(4px);opacity:0}50%{opacity:.7}100%{transform:translateY(-8px);opacity:0}}
.c-leaf{animation:clf 6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}@keyframes clf{50%{transform:rotate(3deg)}}
.hero3{padding:10px 0 20px;text-align:center}
.hero3 h1{font-size:clamp(40px,5.8vw,78px);margin:6px 0 10px}
.hero3 .intro{font-size:19px;color:var(--ink2);max-width:36em;margin:0 auto 18px}
.hero-cta{margin:0 0 20px;text-align:center}.hero-cta .button{font-size:17px;padding:12px 26px}
.sc{margin:0 auto;max-width:1160px;text-align:left}
.sc-stage{position:relative;border:2px solid var(--ink);border-radius:26px;overflow:hidden;background:#FFFDF9;box-shadow:var(--shadow)}
.sc-stage svg{display:block;width:100%;height:auto}
.sc-tag{position:absolute;left:14px;top:12px;z-index:5;font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:6px 11px}
.sc-bub{position:absolute;z-index:4;max-width:min(330px,40%);background:#fff;border:2px solid var(--ink);border-radius:18px;padding:9px 14px;font:500 16px/1.3 var(--body);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-50%,-100%) scale(.6);opacity:0;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .25s}
.sc-bub.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.sc-bub::after{content:"";position:absolute;left:50%;bottom:-10px;width:16px;height:16px;background:inherit;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.sc-bub small,.sc-cap small{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:2px}
.sc-bub.you,.sc-cap.you{background:#FFD98A}.sc-bub.otto,.sc-cap.otto{background:#CDBEFF}
.sc-bub.think,.sc-cap.think{border-style:dashed;box-shadow:none;font-style:italic}
.sc-bub.side{transform:translate(0,-50%) scale(.6);transform-origin:0 50%}.sc-bub.side.show{transform:translate(0,-50%) scale(1)}
.sc-bub.side::after{left:-10px;top:50%;bottom:auto;transform:translateY(-50%) rotate(135deg)}
.sc-note{position:absolute;z-index:3;width:14%;min-height:8%;padding:7px 9px;font:italic 600 clamp(11px,1.45vw,18px)/1.15 var(--display);color:var(--ink);box-shadow:0 6px 12px -8px rgba(0,0,0,.5);transform:rotate(-3deg) scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.sc-note.show{transform:rotate(-3deg) scale(1)}.sc-note.n1{background:#FFD98A}.sc-note.n2{background:#9EDBC4;transform:rotate(3deg) scale(0)}.sc-note.n2.show{transform:rotate(3deg) scale(1)}
.sc-fit{position:absolute;z-index:3;display:flex;gap:3px;height:4.2%;opacity:0;transition:opacity .4s}.sc-fit.show{opacity:1}
.sc-fit i{flex:1;border:1.5px solid var(--ink);border-radius:3px;background:var(--ink)}.sc-fit i.o{background:repeating-linear-gradient(135deg,#fff 0 3px,#ddd 3px 6px)}
.sc-fit b{position:absolute;top:-4px;bottom:-4px;border-left:2.5px solid #FF6B4A}
.sc-stamp{position:absolute;z-index:6;right:5%;top:44%;background:#12805A;color:#fff;font:800 clamp(14px,1.8vw,22px)/1 var(--body);padding:12px 16px;border-radius:14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg) scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.sc-stamp.show{transform:rotate(-4deg) scale(1)}.sc-stamp.bad{background:#D63B2F}
.sc-caps{display:none}
.sc-qs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:16px 0 4px}
.sc-q{border:2px solid var(--ink);background:var(--card);border-radius:14px;padding:11px 15px;font:600 16px/1.2 var(--body);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-align:left}
.sc-q b{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:3px}
.sc-q.yes{background:transparent;box-shadow:none;border-style:dashed}.sc-q[disabled]{opacity:.35;cursor:default;box-shadow:none}
.sc-hint{text-align:center;color:var(--ink2);font-size:14px;margin:6px 0 0}
.sc-after{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.sc-after .text-button{font-size:15px}
a.card.pain .c-svg{border:2px solid var(--ink);border-radius:12px;margin-bottom:14px}
.castrow .c-svg{width:100%;height:auto;max-height:180px;margin:0 auto}
@media(max-width:860px){.sc-bub,.sc-note{display:none}.sc-caps{display:flex;flex-direction:column;gap:8px;margin-top:10px}
 .sc-cap{margin:0;border:2px solid var(--ink);border-radius:16px;padding:9px 13px;background:#fff;font-size:16px;line-height:1.35;box-shadow:3px 3px 0 var(--ink);animation:ccin .3s ease both}.sc-cap.you{margin-left:14%}
 .sc-stamp{font-size:12px;padding:7px 9px;border-radius:9px;top:40%}.sc-q{width:100%;font-size:15px}.hero3 .intro{font-size:17px}.sc-stage{border-radius:18px}.sc-tag{font-size:10px;padding:4px 8px;left:10px;top:10px}.castrow .c-svg{max-height:130px}}
@keyframes ccin{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.c-breathe,.c-blink,.c-type,.c-type2,.c-float,.c-steam path,.c-leaf,.c-talk .c-head,.sc-cap{animation:none}.sc-bub,.sc-note,.sc-stamp,.sc-fit{transition:none}}
/* scene controls v2: watch vs try, status line, plans, transcript */
.sc-ui{max-width:860px;margin:14px auto 0}
.sc-mode{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.sc-m{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:9px 16px;font:600 15px/1 var(--body);color:var(--ink);cursor:pointer}
.sc-m[aria-pressed="true"]{background:var(--ink);color:#fff}
.sc-status{min-height:1.4em;margin:12px 0 4px;text-align:center;font-weight:600;font-size:15.5px;color:var(--ink2)}
.sc-status.ok{color:#12805A}.sc-status.bad{color:#C4302B}.sc-status.warn{color:#9A5B00}.sc-status.ai{color:#5B45C9}
.sc-status.ex::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin:0 8px 2px 0;opacity:.6}
.sc-plans{border:1.5px solid var(--ink);border-radius:16px;padding:12px 16px 14px;margin:12px 0 0;display:grid;gap:8px;background:var(--card)}
.sc-plans legend{font-weight:700;padding:0 6px}.sc-plans label{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;cursor:pointer}
.sc-plans .button{justify-self:start;margin-top:4px}
.sc-log{margin:14px 0 0;font-size:14px;color:var(--ink2)}.sc-log summary{cursor:pointer;font-weight:600}.sc-log ol{margin:8px 0 0;padding-left:20px}
[data-mode="watch"] .sc-plans{display:none}
/* ---- Book reading page (/book/ch1/) and prep card page (/prep-card/), studio A4 2026-09-28. The card page rules start with "main" so they win over the card's own inline print styles. Text colours: ink, ink2, muted, tomato-ink only (brand coral #FF6B4A is not a text colour). ---- */
.book{max-width:720px;margin:0 auto}
.book-top{padding:6px 0 10px}
.book-top h1{font-size:clamp(38px,6vw,64px)}
.book-top .dek{font-size:19px}
.book-note{font-size:15.5px;line-height:1.6;color:var(--ink2);background:var(--sun-soft);border:2px solid var(--ink);border-radius:14px;padding:14px 18px;margin:0 0 22px}
.book-note em{font-style:normal}
.book-toc{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px 18px;margin:0 0 10px;font-size:15.5px}
.book-toc summary{font-weight:700;cursor:pointer}
.book-toc ol{margin:10px 0 4px;padding-left:22px}.book-toc li{margin:4px 0}
.book-toc a{text-decoration:none;font-weight:600}.book-toc a:hover{text-decoration:underline}
.book-body{font-size:19px;line-height:1.78}
.book-body p{margin:0 0 20px}
.book-body h2{font-size:clamp(27px,3.2vw,36px);margin:52px 0 16px;scroll-margin-top:90px}
.book-body h3{font:650 22px/1.3 var(--display);font-variation-settings:"SOFT" 80;margin:34px 0 10px;scroll-margin-top:90px}
.book-body ul,.book-body ol{margin:0 0 22px}.book-body li{margin:10px 0}
.book-body blockquote{margin:26px 0;padding:18px 22px;background:var(--card);border:2px solid var(--ink);border-left-width:6px;border-radius:6px 16px 16px 6px;font-weight:500}
.book-body blockquote p{margin:0}
.book-body strong{font-weight:700}
.book-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin:46px 0 0;padding-top:18px;border-top:2px dashed var(--line);font-size:15px;color:var(--muted)}
.book-next strong{color:var(--ink2)}
/* chapter-reading pages: the chapter nav links match their 15 px labels on phones (the shared nav rule drops links to 13 px at 860 px), and the breadcrumb and chapter nav stay out of print */
.book-nav a{font-size:15px}
@media print{.book-nav{display:none}}
@media print{.crumbs:has(+.book){display:none}}
.book .strip{margin-top:26px}
.pc-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:6px 0 0}
.pc-actions a:not(.button){font-weight:700;font-size:15px}
.pc-howto .steps3{margin:6px 0 26px}
.pc-guideline{margin:6px 0 14px;font-size:16px;line-height:1.5;max-width:70ch}
.pc-guideline a{font-weight:700}
@media print{.pc-guideline{display:none}}
.tp-guideline{margin:10px 0 0;font-size:16px;line-height:1.5;max-width:70ch}
.tp-guideline a{font-weight:700}
@media print{.tp-guideline{display:none}}
.pc-howto .steps3 h3{margin:0 0 6px}
main .pc-card{border-radius:22px;margin:0 0 10px}
main .pc-card .pc-sheet{height:auto;overflow:visible;box-shadow:var(--shadow);max-width:100%}
main .pc-card .pc-hint,main .pc-card .pc-q .pc-to,main .pc-card .pc-afterrow .pc-hint2{font-size:9pt}
main .pc-card .pc-ex,main .pc-card .pc-foot{font-size:8.6pt}
main .pc-card .pc-ai{font-size:9pt}
main .pc-card .pc-tag{font-size:12px;padding:1px 9px} /* A11: the fictional tag stays readable on a phone (was 7pt = 9.3px) */
@media(max-width:860px){.book-body{font-size:18px;line-height:1.72}.book-body p{font-size:18px}.book-top .dek{font-size:17px}
main .pc-card{padding:0;background:none}
main .pc-card .pc-sheet{padding:18px 16px 14px;gap:12px;border-radius:16px}
main .pc-card .pc-head{flex-wrap:wrap;align-items:flex-start}main .pc-card .pc-head .pc-t{min-width:0;flex:1 1 60%}
main .pc-card .pc-meta{width:100%}
main .pc-card .pc-h1{font-size:22px}
main .pc-card .pc-sub,main .pc-card .pc-hint,main .pc-card .pc-ai,main .pc-card .pc-q .pc-to{font-size:14px}
main .pc-card .pc-ex{font-size:13.5px}
main .pc-card .pc-ex dl{grid-template-columns:auto 1fr;gap:6px 12px}main .pc-card .pc-ex .pc-wide{grid-column:2}
main .pc-card .pc-foot{flex-direction:column;gap:6px;font-size:12.5px}
main .pc-card .pc-q .pc-to{width:30%}}
.takeaway p.eyebrow{color:var(--ink)} /* was #DCD7EA on the mint pill: 1.25:1 */
/* A18 accessibility pass (2026-09-28). Focus ring: tomato-ink, >= 3:1 on paper, card, sun and sun-soft; sun on the ink footer.
   Tap targets: 44px minimum height at phone width for header, footer, scene controls and "more" links. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--tomato-ink);outline-offset:3px}
footer a:focus-visible{outline-color:var(--sun)}
.brand{min-height:44px}nav:where(header nav,.crumbs,.book-nav,.picker) a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}.nav-cta{display:inline-flex;align-items:center;min-height:44px}
footer a{display:flex;align-items:center;min-height:44px;margin:0}
.text-button,.sc-m{min-height:44px}
.sc-log summary{min-height:44px;padding:10px 0}
.section-top>a,.pains-more a,.card .more{display:inline-flex;align-items:center;min-height:44px}
/* A46: visually hidden but read by screen readers (used for the /guides/ h2 above the card grid) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A68: the branching scenarios chooser (/practice/simulator/scenarios/) is a list of cards */
.sim-choose{list-style:none;margin:0 0 30px;padding:0}.sim-choose h2 a{color:var(--ink);text-decoration:none}.sim-choose h2 a:hover{color:var(--tomato-ink);text-decoration:underline}.sim-choose .status{margin:auto 0 0}

/* A183 (2026-10-04): the shared header fits phones down to 280 px. At 300 px it needed 309 px (36 px mark, 19 px wordmark, "Try a case" button, 16 px side padding).
   Only under 320 px; 320 px and wider are unchanged. Undo: delete this block. */
@media(max-width:319px){
header>div{padding:12px 12px;gap:8px}
.brand{gap:8px}.brand svg{width:30px;height:30px}.wordmark{font-size:16px;letter-spacing:-.5px}
.nav-cta{padding:8px 10px;font-size:12px}
}

/* Rule 17 pack art (web/pack.py): a small figure beside the page heading; width/height are set on the <img>, so nothing shifts when it loads */
.pack-fig{float:right;margin:4px 0 12px 24px;width:min(180px,32%)}.pack-fig .pack-img{display:block;width:100%;height:auto}
@media(max-width:560px){.pack-fig{float:none;margin:0 0 10px;width:112px}}
@media print{.pack-fig{display:none}}

/* A201: a long page title in the breadcrumb wraps inside the screen instead of running off the left edge on a phone (web/crumbs_a201/test_crumbs.py) */
.crumbs a{white-space:normal;justify-content:flex-start;text-align:left}

/* ATQ-PACK-1: intrinsic sizes preserve space; art stays static under reduced motion. */
.brand .pack-logo{width:44px;height:44px;object-fit:contain;flex:none}
.pack-office{display:block;width:100%;height:auto;aspect-ratio:12/7;object-fit:cover}
.pack-sc-alex,.pack-sc-q{position:absolute;object-fit:contain;height:28%;width:18%;top:48%}
.pack-sc-alex{left:66%}.pack-sc-q{left:28%}
a.card.pain .pack-card{aspect-ratio:4/3;object-fit:contain}
.castrow .pack-text-role{min-height:130px;display:grid;place-items:center;font-size:14px}
.pack-template-q{float:right;width:112px;height:auto;margin:0 0 12px 20px}
.pack-template-office{display:block;width:min(100%,360px);height:auto;margin:0 0 20px;border-radius:12px}
.pack-practice{width:min(100%,440px);height:auto;display:block;grid-column:1/-1;border-radius:16px}
@media(max-width:319px){.brand .pack-logo{width:30px;height:30px}}
@media print{.pack-template-q,.pack-template-office,.pack-practice{display:none}}

.pack-sequence{display:block;position:relative}
.pack-sequence-frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.pack-sequence-frame[hidden]{display:none}
.pack-sc-q{height:auto}

.pack-sequence.pack-sc-q{position:absolute}
/* Free sample: existing Foundry guide at a reading-column scale. */
.sample-downloads{margin-block:2rem}.sample-guide{display:block;width:144px;max-width:100%;height:auto}.sample-downloads a{overflow-wrap:anywhere}

/* DIRECTOR_RULES 19 (2026-10-08 night): full-body people, stakes in the first screen, motion within 1.5 s. */
.pack-body{display:block;height:260px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.castrow{grid-template-columns:repeat(5,1fr)}
.castrow img.pack-body{width:100%;height:260px}
.s-person.pack-head,.s-person.pack-body{height:210px;width:auto;max-width:150px;object-position:bottom}
a.card.pain .pack-card{aspect-ratio:auto;height:210px;width:100%;object-fit:contain}
.hero3 .stakes-line{font-size:17px;max-width:40em;margin:0 auto 10px;color:var(--ink);font-weight:600;line-height:1.4}
.pack-sc-body,.pack-sc-q{position:absolute;bottom:3%;top:auto;object-fit:contain;object-position:bottom}
.pack-sc-body{height:66%;width:auto}
.pack-sc-casey{left:14%}.pack-sc-dana{left:30%}
.pack-sequence.pack-sc-q{left:50%;height:44%;width:auto;top:auto;bottom:3%;animation:q-drift 5s ease-out both}
@keyframes q-drift{from{transform:translateX(-12%)}to{transform:translateX(0)}}
.stakes-list{background:#FFFDF9;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;font-size:14px;text-align:left;max-width:340px}
.stakes-list .sl-h{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.stakes-list ul{list-style:none;margin:0;padding:0}
.stakes-list li{display:flex;gap:8px;justify-content:space-between;padding:3px 0;position:relative}
.stakes-list .nm{font-weight:800}.stakes-list .why{color:var(--ink2)}
.stakes-list li.out .nm,.stakes-list li.out .why{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#C0392B;opacity:.75}
.stakes-list li.out::after{content:"";position:absolute;left:0;top:50%;height:2px;width:100%;background:#C0392B;transform-origin:left;animation:strike-on 1.1s .2s ease-out both}
@keyframes strike-on{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sc-stage .sc-list{position:absolute;right:3%;top:5%;font-size:12px;padding:8px 10px;max-width:38%}
.sc-stage .sc-list .why{display:none}
.stakes-band{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:end;margin:36px 0;padding:24px;border:2px solid var(--ink);border-radius:22px;background:#FFF3EE}
.stakes-band h2{margin:4px 0 8px}.stakes-note{font-size:14px;color:var(--ink2)}
.stakes-cast{display:flex;gap:4px;align-items:flex-end;justify-content:center}
.stakes-cast .pack-body{height:230px;width:auto;margin:0}
@media(max-width:860px){.stakes-band{grid-template-columns:1fr}.stakes-cast .pack-body{height:150px}.castrow{grid-template-columns:repeat(3,1fr)}.castrow img.pack-body{height:190px}.sc-stage .sc-list{max-width:46%;font-size:11px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.stakes-list li.out::after{animation:none}.pack-sequence.pack-sc-q{animation:none}}
/* 2026-10-09: cartoon-head full-body cast (brand/cast_hoodie) and video/post slots */
.cast-fig{display:block;height:260px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.castrow{grid-template-columns:repeat(6,1fr)}.castrow img.cast-fig{width:100%;height:230px}
.stakes-cast .cast-fig{height:230px;width:auto;margin:0}
.watch{margin:44px 0}.watch .dek{max-width:60ch}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,440px));justify-content:start;gap:18px;margin-top:16px}
.card.vid{display:flex;flex-direction:column;gap:6px}.card.vid h3{margin:4px 0}.card.vid p{margin:0}
.vid-media{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#EEE8FF;border:1px solid var(--line,#e5dfd2);display:grid;place-items:end center}
.vid-still{position:absolute;inset:44px 0 0 0;display:flex;justify-content:center;align-items:flex-end;gap:10px}
.vid-still .cast-fig{height:100%;width:auto;margin:0}
.vid-soon .vid-still{opacity:.92}
.vid-badge{position:absolute;left:10px;top:10px;background:#fff;color:var(--ink,#1f2433);font-weight:700;font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line,#e5dfd2)}
.vid-play{all:unset;cursor:pointer;display:block;position:relative;width:100%;height:100%}
.vid-play:focus-visible{outline:3px solid #FF6B4A;outline-offset:-3px}
.vid-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#FF6B4A;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vid-note{position:absolute;left:0;right:0;bottom:0;background:rgba(31,36,51,.82);color:#fff;font-size:12px;padding:6px 10px}
.vid-frame{width:100%;height:100%;border:0;display:block}
.vid-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px!important}
@media(max-width:860px){.castrow{grid-template-columns:repeat(3,1fr)}.castrow img.cast-fig{height:190px}.stakes-cast .cast-fig{height:150px}}
@media(max-width:560px){header nav a:not(.nav-cta){font-size:13px}}
@media print{.watch{display:none}}
.s-person.pack-head+.s-desk{margin-top:10px}  /* full-body figures stand above the desk card, not behind it */

/* OFFICE-BANDS-BEGIN: image occupies its own row, never behind text. */
.pack-office-band{grid-column:1/-1;display:block;width:100%;height:180px;object-fit:cover;object-position:center;border-radius:16px;margin:0 0 24px}
@media(max-width:560px){.pack-office-band{height:140px}}
@media print{.pack-office-band{display:none}}
/* OFFICE-BANDS-END */

/* LOCAL-CASE-MEDIA-BEGIN: reserve video space while the Foundry poster is visible. */
.local-case-media{position:relative;aspect-ratio:16/9;background:var(--paper);overflow:hidden;border-radius:14px}
.local-case-media video{display:block;width:100%;height:100%;object-fit:contain}
.local-case-media .media-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:1}
.local-case-media.media-active .media-poster{visibility:hidden}
/* LOCAL-CASE-MEDIA-END */

/* S24: each looping pack action has a native keyboard pause control. */
.pack-motion-control{padding:8px 12px;min-height:44px;border:2px solid var(--ink);border-radius:10px;background:#FFFDF9;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.pack-motion-control[hidden]{display:none}
.pack-motion-control:focus-visible{outline:3px solid #245D84;outline-offset:3px}
.pack-motion-controls{min-height:44px;margin-top:10px;text-align:right}
.pack-sequence[data-pack-paused="true"]{animation-play-state:paused}
@media print{.pack-motion-control{display:none}}

/* S23: a reserved office vignette; all copy stays outside the artwork. */
.scroll-stakes-figure{float:right;width:min(280px,40%);margin:48px 0 14px 20px}
.scroll-stakes-scene{position:relative;height:150px;overflow:hidden;border:2px solid var(--ink);border-radius:12px}
.scroll-stakes-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.scroll-stakes-frame:first-child{opacity:1}
.scroll-stakes-figure figcaption{font-size:12px;line-height:1.5;color:var(--ink2);margin-top:6px}
@media(max-width:560px){.scroll-stakes-figure{float:none;width:min(280px,100%);margin:0 0 14px}.scroll-stakes-scene{height:120px}}
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .scroll-stakes-figure{view-timeline-name:--atq-stakes;view-timeline-axis:block;view-timeline-inset:90px 0}
  .scroll-stakes-frame{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--atq-stakes;animation-range:exit -100px exit 0px}
  .scroll-stakes-frame:nth-child(1){animation-name:atq-stakes-office}
  .scroll-stakes-frame:nth-child(2){animation-name:atq-stakes-desk}
  .scroll-stakes-frame:nth-child(3){animation-name:atq-stakes-table}
  @keyframes atq-stakes-office{0%,35%{opacity:1}60%,100%{opacity:0}}
  @keyframes atq-stakes-desk{0%,35%{opacity:0}60%,70%{opacity:1}100%{opacity:0}}
  @keyframes atq-stakes-table{0%,70%{opacity:0}100%{opacity:1}}
 }
}
@media print{.scroll-stakes-figure{display:none}}

/* The Last Hire series home: existing foundry cast and preview artwork. */
.series-trailer,.series-latest,.series-cast,.series-play{margin:56px 0}
.series-cast{scroll-margin-top:90px}
.series-trailer figure{margin:18px 0;max-width:760px}.series-trailer img{width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:16px}.series-trailer figcaption{margin-top:10px;font-size:14px}
.series-latest .vid{max-width:640px}.series-cast-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.series-cast-grid figure{margin:0;text-align:center}.series-cast-grid .cast-fig{max-width:100%;height:180px;object-fit:contain}.series-cast-grid figcaption{font-size:14px}.series-cast-grid b{font-size:18px}
@media(max-width:800px){.series-cast-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){header .wordmark{display:none}header nav a:nth-child(n){display:inline-flex}header nav{gap:4px;overflow:visible}header nav a,header nav a:not(.nav-cta){padding:0 4px;font-size:12px;white-space:nowrap}header>div{gap:8px}.series-cast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.series-cast-grid .cast-fig{height:160px}.series-trailer,.series-latest,.series-cast,.series-play{margin:36px 0}}
@media print{.series-cast-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.series-cast-grid .cast-fig{height:90px}}

@media(max-width:860px){header nav a:nth-child(n){display:inline-flex}}

/* ATQ-AGENCY-HOME: latest story, then the two questions; static, no JS required. */
.agency-positioning{font-weight:700;text-wrap:balance}
.series-latest{scroll-margin-top:110px;max-width:760px;margin:24px auto 40px}
.agency-questions{max-width:900px;margin:40px auto}
.agency-question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.agency-question-grid article{padding:22px;border:2px solid var(--ink);border-radius:16px;background:var(--paper)}
.agency-question-grid h3{font-size:clamp(23px,3vw,30px);line-height:1.2;margin:8px 0 14px;overflow-wrap:anywhere}
.agency-question-grid p{margin-bottom:0}
.agency-scene{margin:36px auto}
@media(max-width:600px){.agency-question-grid{grid-template-columns:1fr}.agency-question-grid article{padding:18px}}
@keyframes agency-arrive{from{transform:scale(.985)}to{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.hero3 .scroll-stakes-scene{animation:agency-arrive 1s .1s ease-out both}}