/* Shared light/dark palette layer. Page compositions and artwork remain page-owned. */
:root{color-scheme:light;--theme-paper:#fff;--theme-ink:#000;--theme-muted:#666;--theme-line:#d7d7d7;--theme-panel:#f2f2f2;--theme-header:#000;--theme-header-ink:#fff;--theme-field:#fff}
html[data-theme="dark"]{color-scheme:dark;--theme-paper:#000;--theme-ink:#fff;--theme-muted:#c6c6c6;--theme-line:#494949;--theme-panel:#111;--theme-header:#000;--theme-header-ink:#fff;--theme-field:#111}
html[data-theme="light"] body{background-color:var(--theme-paper);color:var(--theme-ink)}
html[data-theme="dark"] body{background-color:var(--theme-paper);color:var(--theme-ink)}
html[data-theme] .sh,html[data-theme] .site-header{background-color:var(--theme-header);color:var(--theme-header-ink)}
html[data-theme] .menu-sheet{background-color:var(--theme-header);color:var(--theme-header-ink)}
html[data-theme] .theme-btn{color:inherit;cursor:pointer}
html[data-theme="light"] .ft-site{background:#f2f2f2;color:#565656}
html[data-theme="dark"] .ft-site{background:#111;color:#fff}
html[data-theme="light"] .site-ft{background:var(--theme-paper);color:#666}
html[data-theme="dark"] .site-ft{background:var(--theme-paper);color:#c6c6c6}
html[data-theme="light"] .ft-site .fieldrow{border-color:#868686}
html[data-theme="dark"] .ft-site .fieldrow{border-color:#757575}
html[data-theme="light"] .ft-site .ft-mark img{filter:brightness(0);opacity:1}
html[data-theme="dark"] .ft-site .ft-mark img{filter:brightness(0) invert(1);opacity:.82}
/* Content canvases that used to be white continue edge-to-edge on the dark page. */
html[data-theme="dark"] body.paper,
html[data-theme="dark"] .reading,
html[data-theme="dark"] .project,
html[data-theme="dark"] .history,
html[data-theme="dark"] .bts,
html[data-theme="dark"] .ud-file,
html[data-theme="dark"] .exhibitions,
html[data-theme="dark"] .contact{background-color:#000;color:#fff}
html[data-theme="dark"] body.paper{background:#000;color:#fff}
html[data-theme="dark"] body.paper .site-ft{background:#000;color:#c6c6c6;border-color:#ffffff1a}
html[data-theme="dark"] body.paper .cred,
html[data-theme="dark"] body.paper .xp-body p,
html[data-theme="dark"] body.paper .txtlink,
html[data-theme="dark"] body.paper blockquote footer,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .cap{color:#c6c6c6}
html[data-theme="dark"] .reading a,
html[data-theme="dark"] .project a,
html[data-theme="dark"] .xp-body a{color:inherit}
html[data-theme="light"] .project,
html[data-theme="light"] .reading{background:#fff;color:#000}
html[data-theme="light"] .ud-file{background:#f2f2f2;color:#111}
/* The home page intentionally stages light and dark passages; theme each passage as a unit. */
html[data-theme="light"] .ordinary{background:#000;color:#fff}
html[data-theme="dark"] .ordinary{background:#000;color:#fff}
html[data-theme="light"] .exhibitions{background:#f2f2f2;color:#000}
html[data-theme="dark"] .exhibitions{background:#111;color:#fff}
html[data-theme="light"] .exhibitions .event-date,
html[data-theme="dark"] .exhibitions .event-date{color:var(--theme-muted)}
html[data-theme="light"] .practice{background:#fff;color:#000}
html[data-theme="dark"] .practice{background:#000;color:#fff}
/* Paper-and-ink work treatments keep their distinctive layout while maintaining readable copy. */
html[data-theme="dark"] .d4{background:#111;color:#f2f2f2}
html[data-theme="dark"] .d4 h2 span{background:#a5144b;color:#fff}
html[data-theme="dark"] #untitled-1.c1,html[data-theme="dark"] #untitled-2.c2,html[data-theme="dark"] #untitled-3.c3,
html[data-theme="dark"] .ud-wall-wrap{background-color:#000;color:#fff}
html[data-theme="light"] .ud-wall-wrap{background-color:#111;color:#fff}
/* Keep focus indicators visible in both palettes; never apply palette filters to artwork. */
html[data-theme] :focus-visible{outline:2px solid currentColor;outline-offset:4px}
html[data-theme] .light .pic input:focus-visible{outline:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Palette tokens consumed by the existing exhibition, home and work stylesheets. */
html[data-theme="light"]{--ink:#000;--soft:#4a4a4a;--dim:#696969;--ink-p:#000;--paper:#fff;--muted:#616161;--light:#fff}
html[data-theme="dark"]{--ink:#fff;--soft:#c6c6c6;--dim:#a7a7a7;--ink-p:#fff;--paper:#000;--muted:#c6c6c6;--light:#fff}
html[data-theme="light"] body.unlit{background:#fff;color:#000}
html[data-theme="light"] .more .body p{color:#4a4a4a}
html[data-theme="light"] .more .body blockquote p{color:#000}
html[data-theme="light"] .film{background:linear-gradient(#fff,#f2f2f2 22%);color:#000}
html[data-theme="light"] .film-title{color:#000}
html[data-theme="light"] .film-kicker,html[data-theme="light"] .film-cap{color:#616161}
html[data-theme="light"] .film-frame{background:#000}
html[data-theme="light"] .ordinary{background:#fff;color:#000}
html[data-theme="light"] .ordinary-intro p{color:#4a4a4a}
html[data-theme="light"] .site-footer{background:#f2f2f2;color:#565656}
html[data-theme="light"] .opening-caption{background:#f2f2f2;color:#4a4a4a}
html[data-theme="light"] .opening-caption .motion-toggle{color:#4a4a4a;border-color:#787878}
/* Work-gallery surfaces exchange their paper/ink treatment; images keep their authored colour. */
html[data-theme="light"] .d1,html[data-theme="light"] .d2,html[data-theme="light"] .d3,
html[data-theme="light"] #untitled-1.c1,html[data-theme="light"] .ud-wall-wrap{background:#fff;color:#000}
html[data-theme="light"] .d1>img,html[data-theme="light"] .d2>img{opacity:1}
html[data-theme="light"] #untitled-1.c1 .lead,html[data-theme="light"] .c1-caps{color:#616161}
html[data-theme="light"] .ud-title{color:#000}
html[data-theme="dark"] .ud-title{color:#f2f2f2}
html[data-theme="dark"] .w-series{color:#fff}
html[data-theme="dark"] .w-pin{background:var(--tone,#000)}
html[data-theme="light"] .w-series{color:#000}
html[data-theme="light"] .w-pin{--tone:#fff;background:#fff}
html[data-theme="light"] .w-head p,html[data-theme="light"] .w-index button,
html[data-theme="light"] .w-line,html[data-theme="light"] .w-cue,html[data-theme="light"] .w-skip{color:#616161}
html[data-theme="light"] .w-index button[aria-current="true"],html[data-theme="light"] .w-cue:hover,
html[data-theme="light"] .w-work.here .w-cue,html[data-theme="light"] .w-skip:hover{color:#000}
html[data-theme="light"] .w-wall{scrollbar-color:#a8a8a8 transparent}
html[data-theme="light"] .w-wall::-webkit-scrollbar-thumb{background:#a8a8a8}
/* Ordinary’s inspection overlay follows the selected paper/ink palette. */
html[data-theme="dark"] #viewer::before{background:#000}
html[data-theme="dark"] #viewer,html[data-theme="dark"] #viewer .reading{color:#fff}
html[data-theme="light"] #viewer::before{background:#fff}
html[data-theme="light"] #viewer,html[data-theme="light"] #viewer .reading{color:#000}
html[data-theme="light"] dialog,.lightbox{background:#fff;color:#000}
html[data-theme="dark"] dialog,html[data-theme="dark"] .lightbox{background:#000;color:#fff}
/* Page-specific copy that used fixed muted colours in the source styles. */
html[data-theme="dark"] .contact dt,html[data-theme="dark"] .contact .ln,html[data-theme="dark"] .contact .said,
html[data-theme="dark"] .ed .pr,html[data-theme="dark"] .notes h2{color:#c6c6c6}
html[data-theme="dark"] .contact dd a,html[data-theme="dark"] .ed .go{border-color:#ffffff55}
html[data-theme="dark"] .contact .fieldrow input,html[data-theme="dark"] .contact .fieldrow button{border-color:#ffffff66}
html[data-theme="dark"] .about .read p{color:#c6c6c6}
/* PSG explainer copy has its own readable paper/dark passages. */
html[data-theme="light"] .intro{background:#fff;color:#000}
html[data-theme="light"] .intro p{color:#4a4a4a}
html[data-theme="light"] .light{background:#fff;color:#000}
html[data-theme="light"] .light .head p{color:#4a4a4a}
html[data-theme="dark"] .intro{background:#000;color:#fff}
html[data-theme="dark"] .intro p{color:#c6c6c6}
html[data-theme="dark"] .light{background:#000;color:#fff}
html[data-theme="dark"] .light .head p{color:#c6c6c6}
/* Resolve the older page-local ink-2 token used by exhibition and testimony copy. */
html[data-theme="light"]{--ink-2:#4a4a4a;--ink2:#4a4a4a;--hair:#d7d7d7}
html[data-theme="dark"]{--ink-2:#c6c6c6;--ink2:#c6c6c6;--hair:#494949}
/* Paper exhibition essays and testimony pages need their fixed dark-grey copy lifted on dark paper. */
html[data-theme="dark"] body.paper p,
html[data-theme="dark"] body.paper .open .lede,
html[data-theme="dark"] body.paper .say .me p,
html[data-theme="dark"] body.paper .with p,
html[data-theme="dark"] body.paper .first figcaption,
html[data-theme="dark"] body.paper .cred,
html[data-theme="dark"] body.paper .piece .hd .by,
html[data-theme="dark"] body.paper .piece .col p,
html[data-theme="dark"] body.paper .letter .sign .ti{color:#c6c6c6}
html[data-theme="dark"] body.paper .letter .col p{color:#fff}
html[data-theme="light"] body.paper p{color:#111}
html[data-theme="light"] body.paper .open .lede,html[data-theme="light"] body.paper .say .me p,
html[data-theme="light"] body.paper .piece .col p{color:#3b3b3b}
html[data-theme="light"] body.paper .cred,html[data-theme="light"] body.paper .first figcaption,
html[data-theme="light"] body.paper .with p,html[data-theme="light"] body.paper .piece .hd .by,
html[data-theme="light"] body.paper .letter .sign .ti{color:#666}
/* Contact, print and gallery captions retain readable muted contrast in both palettes. */
html[data-theme="dark"] .contact .paper{background:#000;color:#fff}
html[data-theme="dark"] .contact .paper .ln,html[data-theme="dark"] .contact .paper .said,
html[data-theme="dark"] .contact .paper dt{color:#c6c6c6}
html[data-theme="dark"] .ed .pr,html[data-theme="dark"] .notes h2,
html[data-theme="dark"] .ud-grid figcaption{color:#c6c6c6}
html[data-theme="dark"] .ud-grid figcaption{border-color:#c6c6c6}
/* Work collections and their typographic title pages respond to light mode without touching images. */
html[data-theme="light"] #untitled-2.c2{background:#fff;color:#000}
html[data-theme="light"] #untitled-2.c2 .lead{color:#616161}
html[data-theme="dark"] #untitled-2.c2{background:#000;color:#fff}
html[data-theme="dark"] #untitled-2.c2 .lead{color:#c6c6c6}
html[data-theme="light"] .ud-file{background:#f2f2f2;color:#111}
html[data-theme="light"] .ud-grid figcaption{color:#424242;border-color:#424242}
/* Remaining authored dark islands keep light text, while their page-level labels use the right muted tone. */
html[data-theme="light"] .ud .lead{color:#616161}
html[data-theme="light"] .room .note,html[data-theme="dark"] .room .note{color:#c6c6c6}
html[data-theme="dark"] .p-col .alice-voice footer{color:#c6c6c6}
html[data-theme="light"] .p-col .alice-voice footer{color:#666}
html[data-theme="dark"] .history-text .label{color:#c6c6c6}
html[data-theme="dark"] .project .label{color:#c6c6c6}
html[data-theme="light"] .site-footer{background:#f2f2f2;color:#565656}
html[data-theme="light"] .site-footer .footer-base{border-color:#c8c8c8;color:#6a6a6a}
html[data-theme="dark"] .site-footer .footer-base{border-color:#454545;color:#c2c2c2}
/* Shared navigation and controls participate in the selected theme too. */
html[data-theme="light"]{--theme-header:#fff;--theme-header-ink:#000}
html[data-theme="light"] .brand img,html[data-theme="light"] .moving-wordmark img{filter:brightness(0)}
html[data-theme="light"] .menu-sheet .foot a{color:#696969}
html[data-theme="dark"] .brand img,html[data-theme="dark"] .moving-wordmark img{filter:none}

/* Standalone Film page: let the canvas follow light mode while keeping the poster cinematic. */
html[data-theme="light"] body.film-page{background:#fff;color:#000}
html[data-theme="light"] .film-page .sh{background:#fff;color:#000}
html[data-theme="light"] .film-opt{background:linear-gradient(#fff,#f2f2f2 28%);color:#000}
html[data-theme="light"] .film-opt .film-kicker{color:#616161}
html[data-theme="light"] .film-opt .film-title{color:#000}
html[data-theme="light"] .film-opt .film-cap{color:#616161}/* Quiet structural borders must remain visible on dark paper. */
html[data-theme="dark"] .contact dl>div{border-color:#ffffff2a}
html[data-theme="dark"] .contact dd a{border-color:#ffffff66}
html[data-theme="dark"] .spec li{border-color:#ffffff2a}
/* Reveals are progressive enhancement: text remains available without JS or when motion is reduced. */
html:not(.has-reveal-motion) .rise{opacity:1;transform:none;transition:none}
.has-reveal-motion .rise:not(.in){opacity:0;transform:translateY(18px)}
/* Process page: preserve the deliberate dark doorway and keep its essay readable in dark mode. */
.close .dark{--dim:#c6c6c6;background:#000;color:#fff}
html[data-theme="dark"] .close .body{color:#c6c6c6}/* Homeless Scribbles: theme the ruled desk surface while keeping the loose drawings as paper. */
html[data-theme="dark"] .hs{background:#111 repeating-linear-gradient(transparent 0 31px,#404040 31px 32px);color:#fff}
html[data-theme="dark"] .hs::before{border-left-color:#9b626d}
/* Weight of Silence: lift catalogue labels with the paper surface in dark mode. */
html[data-theme="dark"] .cat .lbl,html[data-theme="dark"] .cat figcaption span{color:#c6c6c6}

html[data-theme="light"] .plate .txt{color:#616161}

/* Keep ordinary copy sections on the continuous page canvas in dark mode; avoid boxed text slabs. */
html[data-theme="dark"] .about,
html[data-theme="dark"] .practice,
html[data-theme="dark"] .xp-sec,
html[data-theme="dark"] .xp-top,
html[data-theme="dark"] .xp-body{background-color:#000;color:#fff}
/* Exhibition prose uses pale fixed ink in the dark palette; use readable ink on paper in light mode. */
html[data-theme="light"] .xp-body p,
html[data-theme="light"] .xp-read p,
html[data-theme="light"] .more .body>p{color:#4a4a4a}
/* The Weight of Silence keeps its light boxes in a dark room in both themes. */
html[data-theme="light"] .room{color:#fff}
html[data-theme="light"] .room .lbl{color:#c6c6c6}

/* Ordinary lightbox controls follow the active paper/ink theme. */
html[data-theme="light"] #viewer .close{background:#fff;color:#000}
html[data-theme="dark"] #viewer .close{background:#000;color:#fff}


/* Shared editorial design system - 2026-09-28 */
/* Shared editorial system for the review deploy. Page compositions and artwork
   remain distinct; this layer standardises type roles and interactive details. */
:root {
  --type-display: clamp(3.5rem, 7vw, 8rem);
  --type-page-title: clamp(2.75rem, 5vw, 7.75rem);
  --type-section-title: clamp(2rem, 3.2vw, 3.25rem);
  --type-lede: clamp(1.3rem, 1.7vw, 1.75rem);
  --type-body: clamp(1.125rem, .95vw, 1.35rem);
  --type-caption: clamp(.9rem, .76vw, 1rem);
  --type-label: clamp(.78rem, .68vw, .9rem);
  --type-control: clamp(.9rem, .75vw, 1rem);
  --font-editorial: Williwaw, Georgia, 'Times New Roman', serif;
  --font-interface: Arial, Helvetica, sans-serif;
  --interaction-speed: 180ms ease;
}

/* Navigation and theme controls share a quiet, readable editorial treatment. */
html[data-theme] .sh .theme-btn,
html[data-theme] .menu-sheet .theme-btn,
html[data-theme] .sh .menu-btn,
html[data-theme] .ft-site .fieldrow button {
  appearance: none;
  min-height: 44px;
  padding: 8px 1px 6px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: var(--type-control)/1.3 var(--font-interface);
  letter-spacing: .015em;
  cursor: pointer;
  transition: border-color var(--interaction-speed), opacity var(--interaction-speed);
}
html[data-theme] .sh .theme-btn:hover,
html[data-theme] .menu-sheet .theme-btn:hover,
html[data-theme] .sh .menu-btn:hover { border-bottom-color: currentColor; }
html[data-theme] .sh .sh-links { font: var(--type-control)/1.3 var(--font-interface); }
html[data-theme] .sh .sh-links a {
  text-decoration: none;
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
}
html[data-theme] .sh .sh-links a:hover,
html[data-theme] .sh .sh-links a:focus-visible { text-decoration: underline; }
html[data-theme] .menu-sheet nav a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--interaction-speed);
}
html[data-theme] .menu-sheet nav a:hover,
html[data-theme] .menu-sheet nav a:focus-visible { text-decoration-color: currentColor; }

/* Text links use a fine underline; actual buttons remain visibly operable. */
html[data-theme] :is(.go, .txtlink, .w-cue, .w-skip, .opening-caption > a,
  .ft-col a, .ft-contact a, .contact a, .xp-next a, .about-links a,
  .text-link, .hero-next, .inspection-controls button, .dialog-nav button,
  .w-index button) {
  min-height: 44px;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 58%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition: text-decoration-color var(--interaction-speed), opacity var(--interaction-speed);
}
html[data-theme] :is(.go, .txtlink, .w-cue, .w-skip, .opening-caption > a,
  .ft-col a, .ft-contact a, .contact a, .xp-next a, .about-links a,
  .text-link, .hero-next, .inspection-controls button, .dialog-nav button,
  .w-index button):hover { text-decoration-color: currentColor; }

/* Painting-story controls form one low-profile rail over the artwork. */
html[data-theme] body.ordinary-page .encounter .excerpt {
  max-width: min(30ch, 72vw);
  padding: 0;
  background: transparent;
  color: #fff !important;
  font-family: var(--font-editorial);
  font-size: var(--type-lede);
  line-height: 1.35;
  text-shadow: 0 2px 18px #000, 0 1px 3px #000;
}
html[data-theme] body.ordinary-page .encounter .stage-controls {
  min-height: 64px;
  gap: clamp(18px, 2.5vw, 36px);
  padding: 10px clamp(4px, 1vw, 18px);
  background: linear-gradient(180deg, transparent, #0009);
}
html[data-theme] body.ordinary-page .encounter .stage-controls button,
html[data-theme] body.ordinary-page .encounter .stage-controls a {
  min-height: 44px;
  padding: 9px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #ffffff80 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font: var(--type-control)/1.35 var(--font-interface);
  text-decoration: none;
  text-shadow: 0 1px 10px #000;
}
html[data-theme] body.ordinary-page .encounter .stage-controls button:hover,
html[data-theme] body.ordinary-page .encounter .stage-controls a:hover { border-bottom-color: #fff !important; }

/* The magnification affordance reads as a caption-linked action rather than
   a generic pill. Keep its dark backing only where it crosses the image. */
html[data-theme] .open .lc {
  right: 12px;
  bottom: 12px;
  padding: 9px 10px 7px;
  border: 0;
  border-bottom: 1px solid #ffffffaa;
  border-radius: 0;
  background: #0009;
  color: #fff;
  font: var(--type-control)/1.3 var(--font-interface);
  opacity: .94;
  backdrop-filter: none;
}
html[data-theme] .open:hover .lc,
html[data-theme] .open:focus-visible .lc { background: #000c; opacity: 1; }

/* Process opening controls retain their job but use the same text-led
   interaction language as the rest of the site. */
html[data-theme] body.process-page .begin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 44px;
  height: 48px;
  padding: 0 2px 4px;
  border: 0;
  border-bottom: 1px solid #ffffff80;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: var(--type-control)/1.3 var(--font-editorial);
}
html[data-theme] body.process-page .begin::after { content: 'Begin'; }
html[data-theme] body.process-page .begin svg { flex: 0 0 14px; }

/* Keep Process chapter labels legible over the fixed dark image sequence in
   either theme. Later paper sections continue to follow their theme palette. */
html[data-theme] body.process-page .card,
html[data-theme] body.process-page .card h1,
html[data-theme] body.process-page .card .k,
html[data-theme] body.process-page .card .s,
html[data-theme] body.process-page .chap,
html[data-theme] body.process-page .chap h2,
html[data-theme] body.process-page .chap p,
html[data-theme] body.process-page .chap .n,
html[data-theme] body.process-page .rail button,
html[data-theme] body.process-page .prog { color: #fff; }

/* Shared reading, caption and label roles. Existing layout widths and
   page-specific headline compositions are left untouched. */
html[data-theme] :is(.reading article .letter, .about .read, .xp-body,
  .xp-read, .more .body, .history-text, .p-col, .process-page .col) {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: 1.68;
}
html[data-theme] body:not(.process-page) main h1 {
  font-size: var(--type-page-title);
}
html[data-theme] :is(.cap, figcaption, .film-cap, .plate .cap,
  .w-work figcaption, .first figcaption, .cat figcaption, .door .dcap) {
  font-size: var(--type-caption);
  line-height: 1.55;
}
html[data-theme] :is(.lbl, .label, .statement-label, .section-label,
  .film-kicker, .cred, .byline, .w-head p, .p-col .alice-voice footer) {
  font-size: var(--type-label);
  line-height: 1.45;
}
html[data-theme] :is(.sh :focus-visible, .menu-sheet :focus-visible,
  main :focus-visible, footer :focus-visible) {
  outline: 2px solid #b99a62;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  :root {
    --type-caption: clamp(.88rem, 1.25vw, .98rem);
    --type-label: clamp(.78rem, 1.1vw, .88rem);
  }
}
@media (max-width: 600px) {
  :root { --type-body: 1.05rem; --type-caption: .9rem; --type-label: .8rem; }
  html[data-theme] body.ordinary-page .encounter .stage-controls {
    left: 4%; right: 4%; gap: 14px; flex-wrap: wrap;
  }
  html[data-theme] body.ordinary-page .encounter .stage-controls a { margin-left: 0; }
}

/* Theme switch: a compact outlined control with a clear mode marker. */
html[data-theme] .sh .theme-btn,html[data-theme] .menu-sheet .theme-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:88px;min-height:42px;padding:7px 13px;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent);border-radius:999px;
  background:color-mix(in srgb,currentColor 5%,transparent);font-weight:500;letter-spacing:.02em;
  transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease
}
html[data-theme] .sh .theme-btn::before,html[data-theme] .menu-sheet .theme-btn::before{
  content:"";width:13px;height:13px;flex:none;border:1px solid currentColor;border-radius:50%;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);opacity:.82
}
html[data-theme] .sh .theme-btn:hover,html[data-theme] .menu-sheet .theme-btn:hover{
  border-color:currentColor;background:color-mix(in srgb,currentColor 10%,transparent);transform:translateY(-1px)
}
html[data-theme="dark"] .ft-site{background:#111;color:#fff}
html[data-theme="dark"] .ft-site .fieldrow{border-color:#8b8b8b}
html[data-theme="dark"] .ft-site .ft-base{color:#d2d2d2}
html[data-theme="dark"] .ft-site a:focus-visible{outline-color:#fff}
html[data-theme="dark"] .ordinary-page .project .p-body{color:#fff}

/* Film page contrast: every heading and line of copy follows the chosen theme. */
html[data-theme="light"] body.film-page{background:#fff;color:#000}
html[data-theme="light"] body.film-page .sh{background:#fff;color:#000}
html[data-theme="light"] body.film-page .film-opt{background:#fff;color:#000}
html[data-theme="light"] body.film-page .film-stage :is(.film-kicker,.film-title,.film-intro,.film-cap){color:#000}
html[data-theme="dark"] body.film-page{background:#000;color:#fff}
html[data-theme="dark"] body.film-page .sh{background:#000;color:#fff}
html[data-theme="dark"] body.film-page .film-opt{background:#000;color:#fff}
html[data-theme="dark"] body.film-page .film-stage :is(.film-kicker,.film-title,.film-intro,.film-cap){color:#fff}
body.film-page .film-beam{display:none}