/* Shared appearance controls and the approved ivory palette. */
:root{--text:var(--ink);--ivory:var(--ink)}
:root[data-theme=light]{color-scheme:light;--bg:#f7f5f0;--panel:#efebe4;--ink:#20211f;--text:#20211f;--ivory:#20211f;--muted:#5b5c56;--copper:#b65336;--button:#e9a27d;--teal:#28695e;--amber:#7e5b16;--dusty-violet:#6b5090;--line:#20211f26}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:15px;justify-self:end}
.header .header-actions .header-cta{margin:0}
.theme-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:11px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:transparent}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{color:var(--copper);border-color:var(--copper)}
.theme-toggle:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
:root[data-theme=light] .brand img{filter:brightness(0) saturate(100%);opacity:.86}
:root[data-theme=light] .button,:root[data-theme=light] .letter-action,:root[data-theme=light] .question-form button{color:#29180f;background:#e9a27d}
:root[data-theme=light] .button:hover,:root[data-theme=light] .letter-action:hover{background:#df936c}
:root[data-theme=light] .topic-choices [aria-pressed=true]{color:#151515}
:root[data-theme=light] .signup-dialog::backdrop{background:#20211f66}
:root[data-theme=light] input::placeholder{color:#66675f;opacity:1}
:root[data-theme=light] .harbor-caption{background:#f7f5f0e8;color:#20211f;text-shadow:none}
:root[data-theme=light] .hero-scroll{background:#f7f5f0e8;color:#20211f}
:root[data-theme=light] .hiw-hero:after{background:linear-gradient(0deg,#f7f5f0 0%,#f7f5f0d0 5%,#f7f5f055 18%,transparent 40%),linear-gradient(90deg,#f7f5f0ed 0%,#f7f5f0ac 35%,transparent 68%)}
:root[data-theme=light] .hiw-hero:before{background:linear-gradient(180deg,#f7f5f0,transparent)}
@media(max-width:1200px){.header-actions{margin-left:auto;gap:12px}}
@media(max-width:760px){.header-actions{gap:4px}.header .brand-wordmark{width:100px}.header .brand-symbol{width:23px}.header .brand{gap:6px}.header .header-actions .header-cta{padding:10px;font-size:11px}.theme-toggle{width:40px;height:44px;padding:10px;border:0}.header .header-actions .menu-button{width:36px;padding:8px}.header{gap:6px}}
@media(max-width:370px){.header .brand-wordmark{width:87px}.header .brand-symbol{width:20px}.header .header-actions .header-cta{font-size:10px;padding:9px 7px}.header-actions{gap:0}}
@media(max-width:760px){:root[data-theme=light] .hiw-hero:after{background:linear-gradient(0deg,#f7f5f0 0%,#f7f5f0f5 16%,#f7f5f0db 38%,#f7f5f060 72%,transparent)}}
@media print{.theme-toggle{display:none}}

/* Light artwork keeps its colour: blend only at the perimeter, never across the scene. */
:root[data-theme=light]{--button:#b65336}
:root[data-theme=light] .button,:root[data-theme=light] .letter-action,:root[data-theme=light] .question-form button{background:#b65336;color:#fff}
:root[data-theme=light] .button:hover,:root[data-theme=light] .letter-action:hover,:root[data-theme=light] .question-form button:hover{background:#98422b;color:#fff}
:root[data-theme=light] .harbor-art:after{background:linear-gradient(to bottom,var(--bg) 0%,transparent 12%,transparent 90%,var(--bg) 100%)}
:root[data-theme=light] .hiw-hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:stretch}
:root[data-theme=light] .hiw-hero-copy{order:0;padding-top:48px;padding-bottom:40px}
:root[data-theme=light] .hiw-hero>img{order:1;position:relative;inset:auto;z-index:auto;height:auto;max-height:560px;aspect-ratio:2.5;object-fit:cover;object-position:center 62%;mask-image:linear-gradient(to bottom,#000 94%,transparent)}
:root[data-theme=light] .hiw-hero:before,:root[data-theme=light] .hiw-hero:after{display:none}
:root[data-theme=light] .hiw-pair figure>img,:root[data-theme=light] .hiw-research-figure>img,:root[data-theme=light] .personal .perspective-art .topic-feature-image{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
:root[data-theme=light] .about-landscape img{mask-image:linear-gradient(to bottom,#000 97%,transparent)}
:root[data-theme=light] .weekly-art{mask-image:linear-gradient(to bottom,#000 91%,transparent)}
:root[data-theme=light] .weekly-copy{margin:20px auto 0}
:root[data-theme=light] .wafer-art:after{background:linear-gradient(to right,var(--bg),transparent 8%),linear-gradient(to bottom,var(--bg),transparent 6%,transparent 94%,var(--bg))}
@media(max-width:760px){:root[data-theme=light] .hiw-hero-copy{padding-top:30px;padding-bottom:28px}:root[data-theme=light] .hiw-hero>img{aspect-ratio:1.45;max-height:none}:root[data-theme=light] .hiw-hero h1{font-size:clamp(38px,10vw,46px)}}

/* Full scenes end cleanly on light paper; isolated topic art needs no whitening. */
:root[data-theme=light] .weekly-art{mask-image:none;border-radius:72px 72px 7px 7px}
:root[data-theme=light] .weekly-copy{margin:34px auto 0}
:root[data-theme=light] .harbor-art:after{background:linear-gradient(to bottom,var(--bg) 0%,transparent 12%)}
:root[data-theme=light] .harbor-art{border-radius:0 0 7px 7px}
:root[data-theme=light] .hero{min-height:1010px}
:root[data-theme=light] .hero-scroll{bottom:8px}
:root[data-theme=light] .personal .perspective-art .topic-feature-image{object-fit:contain;mask-image:none}
@media(max-width:760px){:root[data-theme=light] .weekly-art{border-radius:32px 32px 7px 7px}:root[data-theme=light] .hero{min-height:750px}:root[data-theme=light] .hero-scroll{bottom:10px}}
:root[data-theme=light] .personal .perspective-art .topic-feature-image:not([src*="isolated"]){mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}

/* Image-by-image light review: full-bleed scenes are pictures, not faded cutouts. */
:root[data-theme=light] .hiw-hero>img,
:root[data-theme=light] .hiw-pair figure>img,
:root[data-theme=light] .hiw-research-figure>img,
:root[data-theme=light] .about-landscape img{mask-image:none;-webkit-mask-image:none;border-radius:7px}
:root[data-theme=light] .hiw-research-figure>img{margin:0 auto 30px}
:root[data-theme=light] .wafer-art{border-radius:7px;opacity:1}
:root[data-theme=light] .wafer-art:after{background:linear-gradient(to right,var(--bg),transparent 5%)}
@media(max-width:760px){:root[data-theme=light] .hiw-research-figure>img{width:100%;margin:0 auto 24px}:root[data-theme=light] .wafer-art{top:290px}}

/* Founder-supplied Brand essentials board, September 26: exact theme palette. */
:root[data-theme=dark]{--bg:#111214;--panel:#1b1d21;--ink:#f1f0ec;--text:#f1f0ec;--ivory:#f1f0ec;--copper:#e69a7d;--button:#e69a7d;--teal:#4c9b91;--amber:#d3a451;--red:#d66f74;--dusty-violet:#886faf;--line:#f1f0ec24}
:root[data-theme=light]{--bg:#f7f5f0;--panel:#efebe4;--ink:#20211f;--text:#20211f;--ivory:#20211f;--copper:#b65336;--button:#b65336;--teal:#2e6f68;--amber:#a97a2f;--red:#a74f55;--dusty-violet:#6f5a94;--line:#20211f26}
:root .topic-choices [data-topic=technology]{--topic-color:var(--teal)}
:root .topic-choices [data-topic=trade]{--topic-color:var(--amber)}
:root .topic-choices [data-topic=energy]{--topic-color:var(--red)}
:root[data-theme=light] .topic-choices [aria-pressed=true]{color:#f7f5f0}
:root[data-theme=light] .topic-choices [data-topic=trade][aria-pressed=true]{color:#20211f}
:root[data-theme=light] .button,:root[data-theme=light] .letter-action,:root[data-theme=light] .question-form button{background:var(--copper);color:#f7f5f0}
:root[data-theme=dark] .button,:root[data-theme=dark] .letter-action,:root[data-theme=dark] .question-form button{background:var(--copper);color:#20211f}
:root .button:hover,:root .letter-action:hover,:root .question-form button:hover{background:var(--copper);box-shadow:inset 0 0 0 1px currentColor}
:root[data-theme=light] .button:hover,:root[data-theme=light] .letter-action:hover,:root[data-theme=light] .question-form button:hover{color:#f7f5f0}
:root[data-theme=light] .brand img{opacity:1}