/* thedeckprofessor.com. Plain CSS, no libraries, no build step. Light and dark, phone first. */

:root{
  --paper:#fbf9f5; --card:#ffffff; --card-2:#f4f1ea; --inverse:#1a231f; --on-inverse:#eef2ee;
  --ink:#1a2128; --muted:#5b6670; --faint:#636b73;
  --accent:#14604a; --accent-ink:#0e4c3a; --on-accent:#f2f8f5; --accent-soft:#dfeee7;
  --warn:#8a5a12; --warn-soft:#fbf1dd; --warn-line:#e4cd9f;
  --line:#e3dfd6; --line-strong:#b9b2a5;
  --focus:#14604a;
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm:5px; --r-md:10px; --r-lg:18px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --shadow:0 1px 2px rgba(26,33,40,.05), 0 8px 24px rgba(26,33,40,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#151a1d; --card:#1c2225; --card-2:#232a2d; --inverse:#e9eeea; --on-inverse:#161c19;
    --ink:#e6eaed; --muted:#a3adb5; --faint:#8e979e;
    --accent:#63c3a1; --accent-ink:#8ad6ba; --on-accent:#0d1714; --accent-soft:#1e332c;
    --warn:#e2b56a; --warn-soft:#2b2317; --warn-line:#4a3c22;
    --line:#2b3235; --line-strong:#4c565b;
    --focus:#63c3a1;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#151a1d; --card:#1c2225; --card-2:#232a2d; --inverse:#e9eeea; --on-inverse:#161c19;
  --ink:#e6eaed; --muted:#a3adb5; --faint:#8e979e;
  --accent:#63c3a1; --accent-ink:#8ad6ba; --on-accent:#0d1714; --accent-soft:#1e332c;
  --warn:#e2b56a; --warn-soft:#2b2317; --warn-line:#4a3c22;
  --line:#2b3235; --line-strong:#4c565b;
  --focus:#63c3a1;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
hr{border:0;border-top:1px solid var(--line);margin:var(--s10) 0}

.wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:16px}}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 16px;z-index:100;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.16;margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:clamp(32px,5.4vw,50px);letter-spacing:-.015em}
h2{font-size:clamp(25px,3.4vw,34px);margin-top:var(--s12)}
h3{font-size:21px;margin-top:var(--s8)}
h4{font-size:17px;font-family:var(--f-body);font-weight:700;margin-top:var(--s6);margin-bottom:var(--s2)}
p,ul,ol,dl{margin:0 0 var(--s4)}
.prose{min-width:0}
.prose p,.prose li{max-width:70ch}
.prose>table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.fig{margin:var(--s6) 0}
figure.fig svg{display:block;width:100%;height:auto}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin-bottom:var(--s2)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 var(--s3);font-family:var(--f-body)}
.lede{font-size:19.5px;line-height:1.55;color:var(--muted);max-width:64ch;margin:0 0 var(--s6)}
.muted{color:var(--muted)}
.small{font-size:14.5px;line-height:1.5}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
strong{font-weight:700}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--s5);min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.brand .mk{flex:none;width:30px;height:30px}
.brand .t{display:block;min-width:0}
.brand b{display:block;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.brand .t>span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.1;margin-top:1px;white-space:nowrap}
nav.main{display:flex;gap:var(--s5);align-items:center}
nav.main a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.hdr-tools{display:flex;gap:var(--s2);align-items:center}
.icon-btn{font:inherit;font-size:13px;font-weight:600;background:transparent;border:1.5px solid var(--line-strong);color:var(--ink);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;white-space:nowrap}
.icon-btn:hover{border-color:var(--ink)}
.menu-btn{display:none}
.nav-theme{display:none}
/* the units switch: every figure on the page follows it */
.unit-sw{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);overflow:hidden;flex:none}
.unit-sw button{font:inherit;font-size:13px;font-weight:600;background:transparent;border:0;color:var(--muted);padding:5px 10px;cursor:pointer;white-space:nowrap}
.unit-sw button+button{border-left:1.5px solid var(--line-strong)}
.unit-sw button:hover{color:var(--ink)}
.unit-sw button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.nav-units{display:none}
@media (max-width:900px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s3) 24px var(--s5);box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:11px 0;border-bottom:1px solid var(--line)}
  nav.main a[aria-current="page"]{border-bottom-color:var(--line);color:var(--accent-ink)}
  .menu-btn{display:inline-block}
}
/* phones: the light and dark switch moves into the menu, so the site name and the sign-in button fit */
@media (max-width:560px){
  .hdr-theme,.hdr-units{display:none}
  .nav-theme,.nav-units{display:block;font:inherit;font-size:14.5px;font-weight:600;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);padding:11px 0;cursor:pointer}
  .nav-theme:hover,.nav-units:hover{color:var(--ink)}
}
@media (max-width:430px){
  header.top .wrap{gap:var(--s3);min-height:60px}
  .brand .t>span{display:none}
  .brand b{font-size:16px;white-space:normal;text-wrap:balance}
  .icon-btn{padding:6px 10px;font-size:12.5px}
}

/* ---------- bands ---------- */
section.band{padding-block:var(--s16)}
section.band.tight{padding-block:var(--s12)}
section.band+section.band{border-top:1px solid var(--line)}
section.soft{background:var(--card-2)}
section.deep{background:var(--inverse);color:var(--on-inverse)}
section.deep h2,section.deep h3{color:var(--on-inverse)}
section.deep p,section.deep li{color:var(--on-inverse);opacity:.88}
section.deep .eyebrow{color:var(--on-inverse);opacity:.7}
section.deep a{color:var(--on-inverse)}

/* ---------- hero ---------- */
.hero{padding-block:var(--s12) var(--s8)}
.hero h1{max-width:19ch}
.hero .lede{max-width:60ch;font-size:20px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:700;padding:11px 20px;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-accent)}
.btn.secondary{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn.secondary:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- cards and grids ---------- */
.grid{display:grid;gap:var(--s5)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);display:block;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card h3{margin:0 0 var(--s2);font-size:19px}
.card p{margin:0;font-size:15px;color:var(--muted);max-width:none}
.card .kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s2)}
.card .tally{display:inline-block;margin-top:var(--s3);font-size:12.5px;color:var(--faint)}

/* ---------- answer list ---------- */
.qlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.qlist li{border-bottom:1px solid var(--line)}
.qlist a{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;text-decoration:none;color:inherit}
.qlist a:hover{color:var(--accent-ink)}
.qlist .q{font-weight:600;font-size:16.5px;flex:1 1 auto;min-width:0}
.qlist .tag{flex:none;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.qlist .live{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 9px}

/* ---------- article layout ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s16);align-items:start;padding-block:var(--s10) var(--s16)}
.article>*{min-width:0}
@media (max-width:1000px){.article{grid-template-columns:minmax(0,1fr);gap:var(--s10)}}
.side{position:sticky;top:86px;font-size:14.5px}
@media (max-width:1000px){.side{position:static}}
.side h4{margin-top:0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.side ul{list-style:none;padding:0;margin:0 0 var(--s6)}
.side li{margin-bottom:6px}
.side a{text-decoration:none;color:var(--muted)}
.side a:hover{color:var(--ink);text-decoration:underline}

.crumbs{font-size:13.5px;color:var(--muted);margin:0 0 var(--s4)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.answer-short{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s4) var(--s5);margin:0 0 var(--s8)}
.answer-short p{margin:0;font-size:17.5px;max-width:64ch}
.answer-short p+p{margin-top:var(--s3)}
.answer-short .h{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s2)}

.callout{border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s6) 0}
.callout p{margin:0;max-width:66ch}
.callout p+p{margin-top:var(--s3)}
.callout b{color:var(--warn)}

.cite{display:block;font-size:13.5px;color:var(--faint);margin-top:var(--s2)}
.srcnote{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s10)}
.srcnote ul{padding-left:1.2em;margin:var(--s2) 0 0}

/* ---------- data table ---------- */
.tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s5) 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
table.data{border-collapse:collapse;width:100%;font-size:14.5px;min-width:440px}
@media (max-width:520px){table.data{font-size:13.5px}table.data th,table.data td{padding:8px 10px}}
table.data th,table.data td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data thead th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--card-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.n,table.data th.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table.data tr.hit td{background:var(--accent-soft);font-weight:700}
.tablecap{font-size:13.5px;color:var(--faint);margin:0 0 var(--s5)}

/* ---------- the interactive demo ---------- */
.demo{margin:var(--s8) 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.demo>.demo-head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--card-2)}
.demo-head b{font-family:var(--f-display);font-size:18px;font-weight:600}
.demo-head .hint{font-size:13px;color:var(--muted)}
.demo-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0}
.demo-body>*{min-width:0}
@media (max-width:820px){.demo-body{grid-template-columns:1fr}}
.demo-stage{padding:var(--s4);min-width:0;background:#f7f6f2}
:root[data-theme="dark"] .demo-stage,html:not([data-theme="light"]) .demo-stage{background:#f7f6f2}
.demo-stage .frame{position:relative;width:100%;aspect-ratio:800/520;border-radius:var(--r-md);overflow:hidden;background:#f7f6f2}
.demo-stage .frame>*{position:absolute;inset:0;width:100%;height:100%}
.demo-stage .frame svg,.demo-stage .frame img{display:block;width:100%;height:100%;object-fit:contain}
.demo-side{border-left:1px solid var(--line);padding:var(--s4) var(--s5) var(--s5);min-width:0}
@media (max-width:820px){.demo-side{border-left:0;border-top:1px solid var(--line)}}

.verdict{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--accent-soft);border:1px solid transparent}
.verdict.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.verdict b{display:block;font-family:var(--f-display);font-size:20px;line-height:1.25;margin-bottom:2px}
.verdict span{display:block;font-size:14px;color:var(--muted)}

.facts{list-style:none;padding:0;margin:0 0 var(--s4);font-size:14.5px}
/* Each row is one line of text, "Label: value", so it reads aloud as one phrase. The label and the value
   are inline blocks: a short value sits at the right end of its label's line, and a value too long for
   that line drops whole to the line under the label and wraps there. Nothing overlaps at any width. */
.facts li{display:block;padding:6px 0;border-bottom:1px dotted var(--line);text-align:justify;text-align-last:justify}
.facts li:last-child{border-bottom:0}
.facts .k,.facts .v{display:inline-block;max-width:100%;vertical-align:baseline;text-align:left;text-align-last:auto;overflow-wrap:anywhere}
.facts .k{color:var(--muted);margin-right:var(--s2)}
.facts .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px}
.facts li.flag .v{color:var(--warn);font-weight:700}

.ctrl{margin:0 0 var(--s4)}
.ctrl>label,.ctrl>.lab{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;font-size:13px;font-weight:700;margin-bottom:6px}
.ctrl>label output,.ctrl>.lab output,.ctrl .out{font-family:var(--f-mono);font-weight:400;font-size:13px;color:var(--muted);white-space:nowrap}
.ctrl input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.ctrl .help{display:block;font-size:12.5px;color:var(--faint);margin-top:5px;line-height:1.45}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-size:13.5px;padding:6px 11px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.seg button:hover{border-color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.checks{display:flex;flex-direction:column;gap:9px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer;font-weight:400}
.checks input{width:17px;height:17px;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.checks .help{display:block;font-size:12.5px;color:var(--faint);margin-top:3px;line-height:1.45}
select.sel{font:inherit;font-size:14px;width:100%;padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}

details.adv{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3)}
details.adv>summary{cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);list-style:none;display:flex;align-items:center;gap:8px;padding:4px 0}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"+";font-family:var(--f-mono);font-size:15px;width:17px;height:17px;line-height:15px;text-align:center;border:1.5px solid currentColor;border-radius:var(--r-sm);flex:none}
details.adv[open]>summary::before{content:"\2212"}
details.adv .advbody{padding-top:var(--s4)}
details.adv .advnote{font-size:12.5px;color:var(--faint);margin:0 0 var(--s4);line-height:1.45}

.demo-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line);font-size:13px;color:var(--faint);background:var(--card-2);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between}
.demo-foot .nojs{color:var(--warn)}

/* ---------- the answer page ----------
   The demonstration spans the page's full content width, under the question and the short answer, so its
   drawing is the largest thing on the page. No cell stretches past its content: the drawing keeps its own
   shape, and it stays in view (sticky) while the controls beside or under it scroll, so every change shows. */
.answer-page{padding-block:var(--s10) var(--s16)}
.answer-head{max-width:820px}
.answer-page .answer-body{padding-block:var(--s6) 0}
/* the figure clips its corners without becoming a scroll box (overflow:hidden would stop the stage sticking) */
.answer-demo{margin:var(--s6) 0 var(--s2);overflow:visible;overflow:clip}
.answer-demo .demo-body{grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);align-items:start}
.demo.answer-demo .demo-stage{position:sticky;top:78px;z-index:2;background:var(--card)}
.demo.answer-demo .demo-stage .frame{background:var(--card)}
.answer-demo .frame .static>svg,.answer-demo .frame .live>svg{display:block;width:100%;height:100%}
.answer-demo .demo-side{align-self:stretch}
.demo-whole{margin:0 var(--s5) var(--s5);background:#f7f6f2;border-radius:var(--r-md);overflow:hidden}
.demo-whole svg{display:block;width:100%;height:auto}
.demo-side .basis-effect{color:var(--ink);margin-top:4px}
@media (max-width:820px){
  .answer-demo .demo-body{grid-template-columns:1fr}
  .demo.answer-demo .demo-stage{top:60px;border-bottom:1px solid var(--line)}
}
/* TDP-28 (lane p28), fix round 1: the panel beside the drawing grows with what it holds, with no scroll box of its
   own, and the drawing (sticky, above) stays beside it while the page scrolls. On arrival the panel is kept
   within about 1.3 times the drawing (DI-X4, DI-P-A2): the readout and the page's own table fold behind More
   figures, More figures and Advanced share one row, and each switch's help line folds behind a small button
   beside the switch's name (demo.js). On a phone the drawing is a band that stays at the top of the window
   while the switches under it scroll. */
.answer-demo .ctrl.tipped{position:relative}
.answer-demo .ctrl.tipped>label,.answer-demo .ctrl.tipped>.lab{padding-right:32px}
.answer-demo .help-tip{position:absolute;top:-4px;right:0;width:24px;height:24px;padding:0;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--muted);font:700 12px/1 var(--f-mono);cursor:pointer}
.answer-demo .help-tip:hover{border-color:var(--ink);color:var(--ink)}
.answer-demo .help-tip[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.answer-demo .ctrl.tipped:not(.tip-open)>.help{display:none}
.demo-folds{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--s6);border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s2)}
.demo-folds>details.more-figs,.demo-folds>details.adv{flex:0 0 auto;border-top:0;margin-top:0;padding-top:0}
.demo-folds>details[open]{flex-basis:100%}
.answer-demo .verdict span{line-height:1.45}
@media (max-width:820px){
  .answer-demo .demo-body{display:flex;flex-direction:column;align-items:stretch}
  .demo.answer-demo .demo-stage{flex:none;box-shadow:0 6px 10px -8px rgba(26,33,40,.25)}
}
details.more-figs{border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s2)}
details.more-figs>summary{cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);padding:4px 0}
details.more-figs .facts{margin-top:var(--s2)}
/* a phone: the squarer canvas the focused drawing switches to there (answer-views.js), so its words stay legible */
@media (max-width:600px){
  .demo.answer-demo .demo-stage .frame{aspect-ratio:480/400}
}

/* ---------- referral ---------- */
.referral{border:1px solid var(--accent);border-radius:var(--r-lg);padding:var(--s6);background:var(--accent-soft);margin:var(--s12) 0 0}
.referral h3{margin-top:0;font-size:22px}
.referral p{max-width:62ch;margin-bottom:var(--s4)}
.referral .fine{font-size:13px;color:var(--muted);margin:var(--s4) 0 0}

/* ---------- search ---------- */
.searchbar{display:flex;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s6)}
.searchbar input{flex:1 1 260px;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s6)}
.filters button{font:inherit;font-size:13.5px;padding:6px 13px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.count{font-size:14px;color:var(--muted);margin:0 0 var(--s4)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding-block:var(--s12) var(--s10);font-size:14.5px;color:var(--muted);background:var(--card-2)}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8)}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:480px){footer.site .wrap{grid-template-columns:1fr}}
footer.site h4{margin:0 0 var(--s3);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:6px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--ink);text-decoration:underline}
footer.site .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s5);font-size:13px;color:var(--faint);max-width:none}
@media (min-width:761px){
  footer.site .wrap{grid-template-columns:1.1fr 2fr 1fr}
  footer.site .f-lessons ul{columns:2;column-gap:var(--s6)}
  footer.site .f-lessons li{break-inside:avoid}
}

/* ---------- print ----------
   On paper every page keeps its working-estimate lines: the print-only line at the top of the page, the
   line under each lesson drawing, the footer line, and a line in the bottom margin of every sheet. */
.print-w3{display:none}
@media print{
  @page{
    margin:14mm 12mm 18mm;
    @bottom-center{content:"Every number here is a working estimate to check with your building authority. Whoever prints this page takes responsibility for what is in it.";font-family:"Hanken Grotesk",Arial,sans-serif;font-size:8pt;color:#333}
  }
  header.top,.side,.demo-side .ctrl,.demo-side details.adv,.skip,.actions,.filters,.searchbar{display:none !important}
  body{background:#fff;color:#000;font-size:11.5pt}
  .print-w3{display:block;margin:0 24px 12pt;padding-bottom:6pt;border-bottom:1px solid #999;font-size:9.5pt;line-height:1.4;color:#000}
  footer.site{background:#fff;border-top:1px solid #999;padding-block:8pt 0;color:#000;break-inside:avoid}
  footer.site .wrap{display:block}
  footer.site .wrap>:not(.legal){display:none !important}
  footer.site .legal{border:0;padding:0;margin:0;font-size:9pt;color:#000}
  .demo-foot{background:#fff;color:#000;border-top-color:#999}
  .demo-foot .nojs{display:none !important}
  .article{grid-template-columns:1fr;padding-block:0}
  .demo,.card,.tablewrap{break-inside:avoid;border-color:#999}
  .demo-body,.answer-demo .demo-body{grid-template-columns:1fr}
  .demo-stage{background:#fff}
  .demo.answer-demo .demo-stage{position:static}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .referral{border-color:#999;background:#fff}
}