/* TeleFolder website v2: "An Invention of SkipWire Laboratories".
   The SkipWire Laboratories house style (cream stock, ink rules, hard offset
   shadows, slab display, script flourishes, typewriter labels, film grain),
   with Annex teal as TeleFolder's house accent. Light and dark follow the
   system unless chosen (data-theme). The live demo has its own styles
   (demo.css); the Annex game has annex.css. */

@font-face { font-family: "Special Elite"; src: url("../fonts/special-elite-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("../fonts/yellowtail-latin.woff2") format("woff2"); font-display: swap; }

:root{
  --ink:#2b2118; --cream:#f6ead0; --paper:#fbf4e2; --bg:#efe0bd; --bg-2:#f6ead0;
  --teal:#2e7c76; --teal-d:#1f5955; --orange:#d8622a; --mustard:#e3a92f;
  --red:#b8262a; --velvet:#8a1c1c;
  --text:#2b2118; --muted:#6b5843; --rule:#2b2118; --link:#1f5955;
  --shadow:6px 6px 0 var(--rule); --shadow-sm:4px 4px 0 var(--rule);
  --burst:rgba(46,124,118,.14); --grain:.14;
  --display:"Rockwell Extra Bold","Rockwell","Roboto Slab",Georgia,serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --type:"Special Elite","American Typewriter","Courier New",monospace;
  --body:Futura,"Futura PT","Century Gothic","Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  --kbd-bg:#fbf4e2;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#f1e3c4; --cream:#2a2119; --paper:#2f251c; --bg:#1d1712; --bg-2:#251d16;
  --teal:#5fb3aa; --teal-d:#3f8c84; --orange:#ec7a42; --mustard:#e9b545;
  --red:#e0574c; --velvet:#6b1616;
  --text:#f1e3c4; --muted:#bba98d; --rule:#0b0806; --link:#6fc4ba;
  --burst:rgba(95,179,170,.10); --grain:.08; --kbd-bg:#3a2e23; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#f1e3c4; --cream:#2a2119; --paper:#2f251c; --bg:#1d1712; --bg-2:#251d16;
  --teal:#5fb3aa; --teal-d:#3f8c84; --orange:#ec7a42; --mustard:#e9b545;
  --red:#e0574c; --velvet:#6b1616;
  --text:#f1e3c4; --muted:#bba98d; --rule:#0b0806; --link:#6fc4ba;
  --burst:rgba(95,179,170,.10); --grain:.08; --kbd-bg:#3a2e23; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;line-height:1.05;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
code{font:.86em ui-monospace,"SF Mono",Menlo,monospace;background:color-mix(in srgb,var(--teal) 12%,transparent);padding:1px 5px;border-radius:4px;white-space:nowrap}
@media (max-width:520px){code{white-space:normal;overflow-wrap:anywhere}}
kbd{display:inline-block;min-width:1.6em;padding:0 7px;font:.8em/1.65 var(--type);text-align:center;color:var(--text);background:var(--kbd-bg);border:1.5px solid var(--rule);border-radius:5px;box-shadow:2px 2px 0 var(--rule);white-space:nowrap;vertical-align:.08em}
.wrap{max-width:72rem;margin:0 auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:28px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--mustard);color:#2b2118;padding:8px 14px;z-index:200}
.skip:focus{left:8px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:3px double var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.brand img{width:42px;height:42px;filter:drop-shadow(2px 2px 0 var(--rule))}
.brand b{display:block;font:800 1.3rem/1 var(--display);letter-spacing:-.01em}
.brand b span{color:var(--teal-d)}
:root[data-theme="dark"] .brand b span{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand b span{color:var(--teal)}}
.brand small{display:block;font:.6rem/1.3 var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
nav.main{display:flex;gap:18px;font:.84rem var(--type)}
nav.main a{color:var(--text);text-decoration:none;border-bottom:1px dashed transparent;white-space:nowrap}
nav.main a:hover{border-bottom-color:currentColor}
@media (max-width:1180px){nav.main{display:none}}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.theme{width:34px;height:34px;border-radius:50%;border:2px solid var(--rule);background:var(--paper);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1;padding:0}
.theme .t-moon{display:none}
.theme[aria-pressed="true"] .t-sun{display:none}
.theme[aria-pressed="true"] .t-moon{display:block}
@media (max-width:420px){header.top .btn.sm{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#2b2118;font:800 .95rem/1 var(--display);padding:12px 18px;border:2px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--rule)}
.btn.alt{background:var(--paper);color:var(--text)}
.btn.sm{padding:9px 14px;font-size:.85rem}
a.btn,a.btn:visited{color:#2b2118}
a.btn.alt,a.btn.alt:visited{color:var(--text)}
@media (max-width:520px){.brand small{display:none}}
.badge-link{display:inline-block;border-radius:9px;transition:transform .12s}
.badge-link img{height:46px;width:auto}
.badge-link:hover{transform:translate(-1px,-1px)}


/* ---------- reels ---------- */
.reel{padding-block:104px 0;position:relative}
.reel-tag{display:inline-block;font:.78rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase;border:2px solid var(--teal);color:var(--teal-d);padding:7px 12px;outline:1px solid var(--teal);outline-offset:3px;background:var(--paper)}
:root[data-theme="dark"] .reel-tag{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reel-tag{color:var(--teal)}}
.head{display:grid;gap:16px;justify-items:center;text-align:center;max-width:48rem;margin:0 auto 48px}
.head h2{font-size:clamp(2rem,5.4vw,3.4rem)}
.script{display:block;font:400 .62em/1 var(--script);color:var(--orange);letter-spacing:0;margin-bottom:.12em}
.head p{color:var(--muted);font-size:1.08rem;text-wrap:pretty}

/* ---------- hero ---------- */
.hero{text-align:center;padding-top:56px;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-40px -40vw auto;height:760px;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 46%,var(--burst) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side at 50% 46%,#000 30%,transparent 100%);mask:radial-gradient(closest-side at 50% 46%,#000 30%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){.hero::before{animation:spin 160s linear infinite}}
@keyframes spin{to{transform:rotate(1turn)}}
.presents{font:.8rem/1.6 var(--type);letter-spacing:.22em;text-transform:uppercase;margin:22px auto 10px;max-width:42rem;transition:color .4s}
:root.annex-solved .presents{color:var(--teal-d)}
.hero h1{display:grid;justify-items:center;gap:0}
.hero h1 .s1{font:400 clamp(2.2rem,6.4vw,4.2rem)/1 var(--script);color:var(--orange);transform:rotate(-4deg);margin-bottom:-.02em;position:relative;z-index:1}
.hero h1 .big{font:800 clamp(4.4rem,21vw,11rem)/.92 var(--display);letter-spacing:-.02em;color:var(--text);text-shadow:3px 3px 0 var(--mustard),6px 6px 0 var(--teal)}
.hero h1 .s2{font:400 clamp(1.7rem,4.8vw,3rem)/1 var(--script);color:var(--red);justify-self:end;margin-right:8%;transform:rotate(-6deg)}
.hero .lede{max-width:42rem;margin:26px auto 0;font-size:clamp(1.05rem,2.2vw,1.22rem);text-wrap:pretty}
.claim{margin:34px auto 0;font:800 clamp(1.6rem,4.6vw,2.6rem)/1.1 var(--display)}
.claim em{font-style:normal;color:var(--red)}
.claim i{font-style:normal;color:var(--teal)}
.cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:28px}
.specs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:48px auto 0;padding:14px 0;border-block:2px solid var(--rule);font:.82rem var(--type);letter-spacing:.06em;text-transform:uppercase}
.specs b{color:var(--teal-d);font-weight:400;margin-right:8px}
:root[data-theme="dark"] .specs b{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .specs b{color:var(--teal)}}

/* narrator + founder */
.narr{max-width:44rem;margin:56px auto 0;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:26px 28px;font:1.1rem/1.55 var(--type);text-align:left}
.narr cite{display:block;margin-top:14px;font:400 1.3rem var(--script);color:var(--red);font-style:normal}
.gus{max-width:40rem;margin:-6px auto 0;transform:translateX(min(6vw,60px)) rotate(-.6deg);position:relative;background:var(--mustard);color:#2b2118;border:2px solid #2b2118;border-radius:14px;box-shadow:6px 6px 0 #2b2118;padding:20px 22px 18px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;text-align:left}
.gus img{width:64px;height:64px;border-radius:50%;border:2px solid #2b2118;background:#f6ead0}
.gus p{font-size:1rem;line-height:1.5}
.gus p b{font-weight:700}
.gus kbd{color:#2b2118;background:#fbf4e2;border-color:#2b2118;box-shadow:2px 2px 0 #2b2118}
.gus cite{display:block;margin-top:8px;font:400 1.15rem var(--script);color:#8a1c1c;font-style:normal}
.gus-r{margin-top:40px;transform:translateX(max(-6vw,-60px)) rotate(.6deg)}
@media (max-width:560px){.gus,.gus-r{transform:none;grid-template-columns:48px 1fr;gap:12px}.gus img{width:48px;height:48px}}

/* ---------- the screening room (demo frame) ---------- */
.screening{max-width:62rem;margin:0 auto}
.screening-head{display:flex;justify-content:space-between;gap:12px;font:.72rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 6px 10px}
@media (max-width:640px){.screening-head span:last-child{display:none}}
.screen-frame{position:relative;background:#1a140f;border:3px solid var(--rule);box-shadow:var(--shadow);padding:30px 22px;border-radius:6px}
.screen-frame::before,.screen-frame::after{content:"";position:absolute;left:10px;right:10px;height:12px;
  background:repeating-linear-gradient(90deg,#f6ead0 0 12px,transparent 12px 30px);opacity:.75;border-radius:2px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 30px);mask:repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 30px)}
.screen-frame::before{top:9px}
.screen-frame::after{bottom:9px}
@media (max-width:560px){.screen-frame{padding:26px 8px}}
.screen-frame .stage{border-radius:10px}
.screen-frame .stage-hint,.screen-frame .stage-note{color:#cbbd9f;text-align:center;font:.86rem/1.5 var(--type);margin-top:14px}
.screen-frame .stage-hint + .stage-note{margin-top:4px;font-size:.74rem;opacity:.8}
.screen-frame .stage-hint kbd{color:#2b2118}
.try-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:18px;font:.84rem var(--type)}
.chip{font:.9rem ui-monospace,"SF Mono",Menlo,monospace;padding:7px 12px;border:2px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--text);cursor:pointer;box-shadow:2px 2px 0 var(--rule);transition:transform .1s}
.chip:hover{transform:translate(-1px,-1px)}
.rattle{max-width:44rem;margin:44px auto 0;text-align:center;font:.92rem/1.6 var(--type);color:var(--muted)}
.rattle span{color:var(--teal);font-size:1.2rem;margin-right:6px}

/* ---------- memo ---------- */
.memo{max-width:46rem;margin:0 auto;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(24px,5vw,56px);position:relative;
  background-image:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--teal) 16%,transparent) 31px 32px);background-position:0 18px}
.memo::before{content:"";position:absolute;left:clamp(14px,3vw,34px);top:0;bottom:0;border-left:2px solid color-mix(in srgb,var(--red) 45%,transparent)}
.memo .lh{text-align:center;border-bottom:3px double var(--rule);padding-bottom:16px;margin-bottom:22px}
.memo .lh .from{font:.78rem var(--type);letter-spacing:.24em;text-transform:uppercase}
.memo .lh .who{font:800 clamp(1.4rem,4vw,2rem)/1.1 var(--display);margin-top:6px}
.memo .lh .of{font:400 1.3rem var(--script);color:var(--orange)}
.memo p{font:1.02rem/1.95 var(--type);margin-top:.9em;padding-left:clamp(6px,2vw,14px)}
.memo p b{font-family:var(--type);color:var(--teal-d)}
.memo p.said{font-size:1.12rem;color:var(--red);padding-left:clamp(18px,4vw,40px)}
.memo .dir{display:block;font-size:.88rem;color:var(--muted);font-style:italic}
.memo .sig{margin-top:26px;font:400 2.2rem/1 var(--script);color:var(--velvet);padding-left:clamp(6px,2vw,14px)}
:root[data-theme="dark"] .memo .sig{color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .memo .sig{color:var(--red)}}
.memo .sig small{display:block;font:.76rem var(--type);color:var(--muted);letter-spacing:.06em;margin-top:8px}
.stamp{position:absolute;right:clamp(10px,3vw,30px);top:clamp(16px,3vw,28px);transform:rotate(11deg);border:3px solid var(--red);color:var(--red);font:800 .86rem/1.15 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;text-align:center;opacity:.85;border-radius:6px;background:transparent}
@media (max-width:620px){.memo .stamp{position:static;display:inline-block;margin:0 0 10px;transform:rotate(-3deg)}}

/* ---------- the tube + acts ---------- */
.tube-fig{max-width:60rem;margin:0 auto 44px;color:var(--text)}
.tube-svg{width:100%;height:auto;display:block;overflow:visible}
.tube-svg .t-ink{fill:none;stroke:var(--rule);stroke-width:3;stroke-linejoin:round}
.tube-svg .t-ink rect:not([class]){fill:var(--bg-2)}
.tube-svg .t-paper{fill:var(--paper)}
.tube-svg .t-teal{fill:var(--teal)}
.tube-svg .t-orange{fill:var(--orange)}
.tube-svg .t-mustard{fill:var(--mustard)}
.tube-svg .t-tube{stroke-width:40;stroke:var(--rule)}
.tube-svg .t-tube-in{stroke-width:32;stroke:color-mix(in srgb,var(--teal) 30%,var(--paper))}
.tube-svg .t-label{fill:var(--text);stroke:none;font:13px var(--type);letter-spacing:2px}
.tube-svg .t-lamp{fill:var(--paper);transition:fill .05s}
.tube-svg .t-lamp.is-on{fill:#ffcf3f;filter:drop-shadow(0 0 8px #ffcf3f)}
.tube-svg .t-canister{stroke:var(--rule);stroke-width:3;fill:none}
@media (prefers-reduced-motion:no-preference){
  .tube-svg .t-canister{animation:shuttle 7s cubic-bezier(.6,0,.3,1) infinite}
  .tube-svg .t-canister.is-firing{animation:fire 1.1s cubic-bezier(.7,0,.2,1) 1}
}
@keyframes shuttle{0%,12%{transform:translateX(0)}46%,58%{transform:translateX(250px)}92%,100%{transform:translateX(536px)}}
@keyframes fire{0%{transform:translateX(0)}100%{transform:translateX(536px)}}
.tube-fig figcaption{text-align:center;margin-top:12px;font:.84rem var(--type);color:var(--muted)}
.morse-alt code{font-size:1em;letter-spacing:.1em}
.acts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){.acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.acts{grid-template-columns:1fr}}
.acts li{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm);padding:18px;display:grid;gap:6px;align-content:start}
.acts .n{font:.78rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.acts h3{font-size:1.45rem}
.acts p{color:var(--muted);font-size:.96rem}
.acts li.end{background:var(--teal-d);color:#fbf4e2}
.acts li.end .n{color:#e3a92f}
.acts li.end p{color:rgba(251,244,226,.88)}
.fineprint{max-width:44rem;margin:26px auto 0;text-align:center;font:.86rem/1.6 var(--type);color:var(--muted)}

/* ---------- exhibits ---------- */
.exhibit{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:44px;border-top:2px dashed color-mix(in srgb,var(--rule) 40%,transparent)}
.exhibit.flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.exhibit.flip .copy{order:2}
@media (max-width:820px){.exhibit,.exhibit.flip{grid-template-columns:1fr}.exhibit.flip .copy{order:0}}
.exhibit .copy{display:grid;gap:12px}
.exhibit .tag{font:.78rem var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.exhibit h3{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.exhibit p{text-wrap:pretty}
.ticks{list-style:none;display:grid;gap:7px;font-size:.98rem}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font:800 1rem var(--display);color:var(--teal)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.keys{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:.82rem var(--type);color:var(--muted)}
.plate-shot{margin:0;justify-self:center;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:16px 16px 12px;transform:rotate(1.2deg);max-width:360px}
.exhibit.flip .plate-shot{transform:rotate(-1.2deg)}
.plate-shot.wide{max-width:560px}
.plate-shot img{width:100%;height:auto;border-radius:8px}
.plate-shot figcaption{font:400 1.2rem/1.2 var(--script);color:var(--red);text-align:center;margin-top:10px}
.shot-dark{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shot-dark{display:block!important}:root:not([data-theme="light"]) .shot-light{display:none!important}}
:root[data-theme="dark"] .shot-dark{display:block!important}
:root[data-theme="dark"] .shot-light{display:none!important}

/* the deed (a key-value spec card) */
.deed{background:var(--paper);border:3px solid var(--rule);box-shadow:var(--shadow);padding:0 0 8px}
.deed .dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:3px double var(--rule);padding:14px 20px;flex-wrap:wrap}
.deed .dh b{font:800 1.15rem var(--display)}
.deed .dh span{font:.72rem var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deed dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.deed dt,.deed dd{margin:0;padding:10px 20px;border-bottom:1px dotted color-mix(in srgb,var(--rule) 40%,transparent)}
.deed dt{font:.74rem/1.9 var(--type);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.deed dd{font-size:.98rem}
.deed dd.big{font:800 1.4rem var(--display);color:var(--teal-d)}
:root[data-theme="dark"] .deed dd.big{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .deed dd.big{color:var(--teal)}}
.deed > p{padding:12px 20px 4px}

/* folder trees */
.trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:560px){.trees{grid-template-columns:1fr}}
.tree{margin:0;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm);padding:12px 12px 14px;font:.78rem/1.5 ui-monospace,"SF Mono",Menlo,monospace;min-width:0}
.tree figcaption{font:.7rem var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.tree ul{list-style:none;padding-left:12px;border-left:1px dashed color-mix(in srgb,var(--rule) 45%,transparent)}
.tree > ul{padding-left:0;border:0}
.tree li{padding-left:4px;overflow-wrap:anywhere}
.tree li::before{content:"▸ ";color:var(--muted)}
.tree .t-job{color:var(--teal-d);font-weight:600}
.tree .t-job::before{content:"● ";color:var(--teal)}
:root[data-theme="dark"] .tree .t-job{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tree .t-job{color:var(--teal)}}
.tree-key{grid-column:1/-1;font:.8rem var(--type);color:var(--muted)}
.tree-key span{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--teal);margin-right:6px}

/* ---------- refusals ---------- */
.refusals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.refusals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.refusals{grid-template-columns:1fr}}
.plaque{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:22px;display:grid;gap:10px;align-content:start}
.plaque .no,.price-card .no,.door-plate .no,.certificate .no,.hint .no{font:.72rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.plaque h3{font-size:1.45rem}
.plaque h3 s{text-decoration-color:var(--red);text-decoration-thickness:4px;color:var(--muted)}
.plaque p{color:var(--muted);font-size:.98rem;text-wrap:pretty}
.plaque .vow{font:400 1.25rem var(--script);color:var(--red);margin-top:auto}

/* comparison */
.compare{margin-top:56px;border:3px solid var(--rule);background:var(--paper);box-shadow:var(--shadow)}
.c-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr 1.3fr;border-top:1px dotted color-mix(in srgb,var(--rule) 45%,transparent)}
.c-row > span{padding:14px 16px;font-size:.95rem}
.c-row > span[role="rowheader"]{font:.78rem/1.6 var(--type);letter-spacing:.08em;text-transform:uppercase}
.c-row .us{background:color-mix(in srgb,var(--teal) 12%,transparent);font-weight:600}
.c-head{border-top:0;border-bottom:3px double var(--rule)}
.c-head > span{font:800 1rem var(--display)}
.c-head .us{color:var(--teal-d)}
:root[data-theme="dark"] .c-head .us{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-head .us{color:var(--teal)}}
@media (max-width:760px){
  .c-head{display:none}
  .c-row{grid-template-columns:1fr}
  .c-row > span[role="cell"]::before{display:block;font:.68rem var(--type);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .c-row > span:nth-child(2)::before{content:"Shouting across the office"}
  .c-row > span:nth-child(3)::before{content:"Spotlight & Finder search"}
  .c-row > span:nth-child(4)::before{content:"TeleFolder"}
}

/* ---------- the ledger ---------- */
.ledger{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:24px;align-items:stretch}
@media (max-width:920px){.ledger{grid-template-columns:1fr}}
.price-card{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:24px;display:grid;gap:10px;align-content:start;position:relative}
.price-card h3{font-size:1.6rem}
.price-card .amt{font:800 3.2rem/1 var(--display);color:var(--teal-d)}
:root[data-theme="dark"] .price-card .amt{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .price-card .amt{color:var(--teal)}}
.price-card .per{font:.86rem var(--type);color:var(--muted)}
.price-card.main{border-width:3px;transform:translateY(-10px);box-shadow:10px 10px 0 var(--rule)}
@media (max-width:920px){.price-card.main{transform:none}}
.price-card .badge-link{margin-top:8px;justify-self:start}
.approved{position:absolute;right:18px;top:18px;transform:rotate(10deg);border:3px solid var(--teal);color:var(--teal);font:800 .9rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:7px 9px;border-radius:6px;opacity:.85}
.price-card.ludicrous{background:transparent;border:2px dashed var(--muted);box-shadow:none;transform:rotate(-1.2deg)}
.price-card.ludicrous::after{content:"Ludicrous";position:absolute;right:14px;top:14px;transform:rotate(12deg);border:3px solid var(--red);color:var(--red);font:800 .9rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-radius:6px;opacity:.85}
.price-card.ludicrous .no{padding-right:7.5rem}
.price-card.ludicrous h3{color:var(--muted);font-size:1.35rem}
.rate{list-style:none;display:grid;gap:8px;font-size:.95rem}
.rate li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted color-mix(in srgb,var(--rule) 35%,transparent);padding-bottom:6px}
.rate b{font:.85rem var(--type);white-space:nowrap}
.price-card .fine{font:.78rem var(--type);color:var(--muted)}
.payback{margin-top:48px;display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(20px,4vw,36px)}
@media (max-width:760px){.payback{grid-template-columns:1fr}}
.payback h3{font-size:1.6rem;margin-bottom:10px}
.payback p{color:var(--muted)}
.payback table{width:100%;border-collapse:collapse;font-size:.98rem}
.payback th{font:.74rem var(--type);letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--muted);border-bottom:3px double var(--rule);padding:8px 10px}
.payback td{padding:9px 10px;border-bottom:1px dotted color-mix(in srgb,var(--rule) 40%,transparent)}
.payback td:last-child{font-weight:700;color:var(--teal-d)}
:root[data-theme="dark"] .payback td:last-child{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .payback td:last-child{color:var(--teal)}}
.memo.office{margin-top:48px}

/* ---------- FAQ + support ---------- */
.faq{max-width:50rem;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:14px 52px 14px 18px;font:800 1.05rem/1.3 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:2px solid var(--rule);border-radius:50%;display:grid;place-items:center;font:800 1rem/1 var(--display);background:var(--mustard);color:#2b2118}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;color:var(--muted)}
.support-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;margin-top:64px;align-items:start}
@media (max-width:860px){.support-grid{grid-template-columns:1fr}}
.support-grid .deed p{font-size:.98rem}
.policy{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(20px,4vw,34px)}
.policy h3{font-size:1.5rem}
.policy h4{font-size:1.02rem;margin-top:18px}
.policy p{margin-top:6px;font-size:.96rem;color:var(--muted)}
.policy p b{color:var(--text)}
.policy-date{font:.78rem var(--type)!important;letter-spacing:.1em;text-transform:uppercase}

/* ---------- closing + footer ---------- */
.closing{text-align:center;padding-block:120px 96px;display:grid;justify-items:center;gap:18px}
.closing-icon{width:132px;height:132px;filter:drop-shadow(5px 5px 0 var(--rule))}
.closing h2{font-size:clamp(2rem,5.4vw,3.4rem)}
.closing p{color:var(--muted);max-width:36rem}
.foot{border-top:3px double var(--rule);background:var(--bg-2);padding-block:40px 28px;font-size:.92rem}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot-brand{display:grid;gap:10px;align-content:start}
.foot-brand p{font:.8rem/1.6 var(--type);color:var(--muted)}
.foot-brand .carry{font:400 1.6rem var(--script);color:var(--orange)}
.foot nav{display:grid;gap:6px;align-content:start}
.foot nav h4{font:.74rem var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.foot nav a{color:var(--text);text-decoration:none;border-bottom:1px dashed transparent;justify-self:start;overflow-wrap:anywhere}
.foot nav a:hover{border-bottom-color:currentColor}
.foot-base{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;border-top:1px dotted color-mix(in srgb,var(--rule) 40%,transparent);padding-top:18px;font:.76rem var(--type);color:var(--muted)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;background:var(--ink);color:var(--bg);font:.9rem/1.4 var(--type);padding:12px 18px;border-radius:8px;box-shadow:4px 4px 0 var(--teal);max-width:min(92vw,30rem);text-align:center;transition:opacity .4s}
.toast.is-out{opacity:0}

@media print{header.top,.screening,.annex-only,.toast{display:none}body::before{display:none}}


/* ---------- the Narrator's footnote ---------- */
.footnote{max-width:44rem;margin:30px auto 0;text-align:left;font:.92rem/1.7 var(--type);color:var(--muted);border-top:1px dotted color-mix(in srgb,var(--rule) 45%,transparent);padding-top:14px}
.footnote b{color:var(--text);font-weight:400}

/* ---------- Dottie, at the switchboard: red polka dots, yellow trim ---------- */
.dottie{max-width:40rem;margin:40px auto 0;transform:translateX(min(5vw,50px)) rotate(.5deg);position:relative;color:#2b2118;border:2px solid #2b2118;border-radius:14px;box-shadow:6px 6px 0 #2b2118;padding:22px 24px 20px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;text-align:left;
  background-color:#c8302d;background-image:radial-gradient(#fbf4e2 2.4px,transparent 2.9px);background-size:16px 16px}
.dottie::before{content:"";position:absolute;inset:9px;background:#fbf4e2;border-radius:8px;border:3px solid #e8b923;z-index:0}
.dottie > *{position:relative;z-index:1}
.dottie img{width:64px;height:64px;border-radius:50%;border:2px solid #2b2118;background:#f6ead0}
.dottie p{font-size:1rem;line-height:1.5}
.dottie p b{font-weight:700}
.dottie .dottie-phone{font:1.08rem/1.4 var(--type);color:#b8262a;margin-bottom:6px}
.dottie cite{display:block;margin-top:8px;font:400 1.15rem var(--script);color:#b8262a;font-style:normal}
.dottie-r{transform:translateX(max(-5vw,-50px)) rotate(-.5deg);margin:0 auto 40px}
@media (max-width:560px){.dottie,.dottie-r{transform:none;grid-template-columns:48px 1fr;gap:12px}.dottie img{width:48px;height:48px}}

/* ---------- Harriet answers with a single number ---------- */
.pell-says{max-width:30rem;margin:34px auto 0;text-align:center;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm);padding:18px 22px;display:grid;gap:4px;justify-items:center}
.pell-says .no{font:.72rem/1.5 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pell-says .num{font:800 4.4rem/1 var(--display);color:var(--teal-d)}
:root[data-theme="dark"] .pell-says .num{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pell-says .num{color:var(--teal)}}
.pell-says cite{font:.86rem var(--type);font-style:normal;color:var(--muted)}

/* ---------- the clear cone: an invisible invention ---------- */
.cone-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;padding:12px 16px;border:2px dashed color-mix(in srgb,var(--rule) 45%,transparent);font:.86rem/1.6 var(--type);color:var(--muted)}
.cone-notice b{color:var(--text);font-weight:400}
.cone{width:18px;height:22px;flex:none;background:color-mix(in srgb,var(--rule) 18%,transparent);clip-path:polygon(50% 0,100% 100%,0 100%)}
.clear-cone{color:transparent}
.clear-cone::selection{color:#2b2118;background:var(--mustard)}

.approved.received{border-color:var(--red);color:var(--red)}
.err-h{font-size:clamp(2rem,5.4vw,3.4rem)}