/* ==========================================================================
   SIA: Selective Image Analogy — project page

   Design system
   -------------
   Warm paper ground, deep-blue chrome, and the paper's own green/red for
   retained vs suppressed edits. Blue is reserved for interface furniture
   (links, eyebrows, focus) so it never competes with that semantic pair.

   Type: Source Serif 4 for display, Noto Sans for text, JetBrains Mono for
   labels and code.

   Image blocks are sized as clamp(floor, min(Nvh, Mvw), ceiling); the ceiling
   is the native pixel height of the source render, past which the browser is
   only upscaling. Widths come from calc(height * aspect) with max-width
   clamping — never width:min(100%,…), which is a circular percentage inside an
   auto-sized grid track.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  --paper:#F8F7F4;
  --surface:#FFFFFF;
  --band:#F1F0EB;
  --ink:#191A18;
  --ink-soft:#33362F;
  --muted:#5F635C;
  --faint:#8B8F87;
  --rule:#DEDCD4;
  --rule-soft:#EAE8E1;
  --rule-strong:#C6C5BA;

  --accent:#1E4F7F;
  --accent-dark:#153A5E;
  --accent-soft:#E8EEF6;
  --accent-line:#BFD2E4;
  --accent-tint:#D6E3F0;
  --gold:#8A6320;

  --keep-fill:#E9F3EB;  --keep-line:#A8CFB4;  --keep-ink:#1F6B44;
  --drop-fill:#FBE9EB;  --drop-line:#E5AFB4;  --drop-ink:#A93A46;

  --shadow-sm:0 1px 2px rgba(25,26,24,.04), 0 8px 22px rgba(25,26,24,.05);
  --shadow-md:0 2px 4px rgba(25,26,24,.05), 0 20px 48px rgba(25,26,24,.08);
  --shadow-lg:0 24px 70px rgba(25,26,24,.22);
  --img-bg:#ECEBE4;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  --display:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wide:min(94vw,1480px);
  --prose:74ch;
  --nav-h:58px;

  /* Image blocks — see the note at the top of the file. The width terms
     subtract the fixed furniture on the row (arrows, labels, gutters) and
     divide by how many image widths share it, so a row never overflows. */

  /* board: A -> A' | B -> B', four frames on one row */
  --board-h:clamp(180px,min(46vh,calc((min(94vw,1480px) - 334px) / 3)),512px);
  /* carousel: A -> A' beside the wipe, with the caption column */
  --wipe-h:clamp(230px,min(52vh,calc((min(94vw,1480px) - 546px) / 2.25)),520px);
  --demo-h:var(--wipe-h);
  --teaser-h:clamp(280px,min(74vh,54vw),1000px);  /* 1570px source */
  --arch-h:clamp(230px,min(60vh,37vw),820px);     /* 1088px source */

  color-scheme:light;
}

:root[data-theme="dark"]{
  --paper:#141513;
  --surface:#1D1F1B;
  --band:#1A1B18;
  --ink:#EEEEE8;
  --ink-soft:#D6D7CF;
  --muted:#A6A9A0;
  --faint:#7B7E75;
  --rule:#2D2F29;
  --rule-soft:#232520;
  --rule-strong:#3C3E37;

  --accent:#8FB6E0;
  --accent-dark:#A9C8EA;
  --accent-soft:#1A2331;
  --accent-line:#31435C;
  --accent-tint:#3B4E68;
  --gold:#CFA463;

  --keep-fill:#152A1E;  --keep-line:#2F6B48;  --keep-ink:#79D8A2;
  --drop-fill:#2C171A;  --drop-line:#7E3A43;  --drop-ink:#F09AA2;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 8px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.32);
  --shadow-lg:0 24px 70px rgba(0,0,0,.65);
  --img-bg:#232620;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

/* our .lightbox / .allgrid rules set `display`, which would beat the UA's
   [hidden] rule — restore it. */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
  overflow-x:hidden;
  transition:background-color .25s ease, color .25s ease;
}

/* a barely-there engineering grid, fading out down the page */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(25,26,24,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,26,24,.02) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%);
}
:root[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
}
.nav,header,section,.figure-block,footer{position:relative;z-index:1}

img,svg{display:block}
img{max-width:100%;height:auto}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 clamp(20px,3.4vw,40px)}
.prose{max-width:var(--prose);margin-top:26px}
.prose p{
  font-size:20px;line-height:1.72;color:var(--ink-soft);
  margin:0 0 1.05em;
}
.prose p:last-child{margin-bottom:0}
.prose p b{font-weight:600;color:var(--ink)}

section{padding:clamp(34px,5vh,80px) 0}
section.band{
  background:var(--band);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-weight:600;
  letter-spacing:-.012em;color:var(--ink);
}
h2{
  font-size:clamp(1.55rem,2.6vw,2.35rem);line-height:1.12;max-width:64ch;
  text-wrap:balance;
}
h1{text-wrap:balance}
h3{font-size:1.2rem;line-height:1.28}
p{margin:0 0 1em}
em{font-style:italic}

/* A, A', B, B' read as italic serif inside running text */
.prose em,figcaption em,.glance em,.statnote em,.tablewrap em,
.kindline em,#outNote em{
  font-family:var(--display);font-style:italic;font-size:1.04em;
}

/* Running text is justified; hyphenation keeps the word spacing even. */
.prose p,.lede,figcaption,.card p,.statnote,.tablewrap figcaption{
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
}

a{
  color:var(--accent-dark);
  text-decoration-color:var(--accent-line);
  text-decoration-thickness:.08em;
  text-underline-offset:.22em;
  transition:color .16s ease, text-decoration-color .16s ease;
}
a:hover{color:var(--accent);text-decoration-color:currentColor}
::selection{background:var(--accent-tint)}

.lede{
  color:var(--muted);font-size:16.5px;
  margin:10px 0 clamp(14px,2vh,26px);max-width:104ch;
}
.small{font-size:14.5px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 18px;
  border-radius:var(--radius-sm);font-size:14px;text-decoration:none;
}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;
  flex:0 0 auto;opacity:.55;
}

.col-label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:11px;
}
.col-label.mt{margin-top:20px}

/* ------------------------------------------------------------------ nav */
.nav{
  position:sticky;top:0;z-index:70;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .nav{background:var(--paper)}
}
.nav.scrolled{border-bottom-color:var(--rule);box-shadow:0 1px 12px rgba(25,26,24,.05)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:var(--nav-h)}

.brand{
  display:flex;align-items:baseline;gap:11px;text-decoration:none;
  color:var(--ink);margin-right:auto;
}
.brand-mark{
  font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;
}
.brand-sub{
  font-size:13.5px;color:var(--faint);white-space:nowrap;
  padding-left:12px;border-left:1px solid var(--rule);
}
@media (max-width:880px){.brand-sub{display:none}}

.navlinks{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav a.lnk{
  position:relative;font-size:14.5px;font-weight:450;color:var(--muted);
  text-decoration:none;white-space:nowrap;padding:5px 0;transition:color .16s;
}
.nav a.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav a.lnk:hover{color:var(--ink)}
.nav a.lnk.on{color:var(--accent-dark);font-weight:600}
.nav a.lnk.on::after{transform:scaleX(1)}

/* narrow screens: keep the section links, let them scroll sideways */
@media (max-width:760px){
  .nav .wrap{gap:12px}
  .brand{margin-right:0}
  .navlinks{flex:1;min-width:0;gap:18px;overflow-x:auto;scrollbar-width:none}
  .navlinks li{flex:0 0 auto}
  .navlinks::-webkit-scrollbar{display:none}
}

.themebtn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .16s,border-color .16s;
}
.themebtn:hover{color:var(--accent);border-color:var(--accent)}
.themebtn .i-moon{display:none}
:root[data-theme="dark"] .themebtn .i-moon{display:block}
:root[data-theme="dark"] .themebtn .i-sun{display:none}

.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent);transition:width .1s linear;
}

/* ------------------------------------------------------------- masthead */
.masthead{padding:clamp(30px,5vh,62px) 0 0;text-align:center}

.venue{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}

.masthead h1{
  font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04;
  letter-spacing:-.022em;max-width:none;font-weight:600;
}
.masthead h1 em{font-style:italic;font-weight:500}


.authors{
  margin-top:22px;font-size:17px;line-height:1.85;
  max-width:1140px;margin-inline:auto;
}
.authors .author{white-space:nowrap}
.authors .sep{margin-right:.3em;color:var(--faint)}
.authors a{
  color:var(--ink);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .16s,color .16s;
}
.authors a:hover{border-color:var(--accent);color:var(--accent-dark)}
.authors sup{
  font-size:11px;font-family:var(--mono);color:var(--accent);
  vertical-align:super;margin-left:1px;
}
.eq{color:var(--drop-ink);font-weight:700}
.authors sup .eq{font-size:1.6em;line-height:1}
.eqnote .eq{font-size:1.35em;font-weight:700}

.affil{
  margin-top:14px;font-size:15px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:5px 22px;justify-content:center;
}
.affil span{white-space:nowrap}
.affil sup{font-size:10.5px;font-family:var(--mono);color:var(--accent);margin-right:3px}
.eqnote{margin-top:10px;font-size:14px;color:var(--faint)}

.links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:2.7rem;font-size:15px;font-weight:600;padding:10px 20px;
  border-radius:var(--radius-sm);text-decoration:none;line-height:1;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);
  box-shadow:var(--shadow-sm);
  transition:background-color .16s,color .16s,border-color .16s,transform .16s;
}
.btn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent-dark)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn svg{flex:0 0 auto}
.btn.pending{
  color:var(--faint);border-color:var(--rule);background:var(--surface);
  cursor:default;box-shadow:none;
}
.btn.pending:hover{transform:none;border-color:var(--rule);color:var(--faint)}

/* -------------------------------------------------------------- figures */
.figure-block{padding:clamp(22px,3.4vh,44px) 0 clamp(34px,5vh,80px)}

/* The figure itself is the frame and the caption lives inside it, so the text
   is always exactly as wide as the image it describes. */
.fig{
  margin:0;overflow:hidden;
  border:1px solid var(--rule-strong);border-radius:var(--radius-md);
  background:var(--surface);box-shadow:var(--shadow-md);
}
.fig-teaser{width:min(100%,calc(var(--teaser-h) * 1.529));margin-inline:auto}
.fig-arch{width:min(100%,calc(var(--arch-h) * 2.390));margin-inline:auto}

.fig-shell{
  display:block;width:100%;padding:0;margin:0;cursor:zoom-in;position:relative;
  border:0;border-radius:0;background:var(--img-bg);
}
.fig-shell img{display:block;width:100%;height:auto}
:root[data-theme="dark"] .fig-shell img{filter:brightness(.94)}

.zoomhint{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#191A18;border:1px solid rgba(0,0,0,.1);
  opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;
}
.fig-shell:hover .zoomhint,.fig-shell:focus-visible .zoomhint{opacity:1;transform:none}
@media (hover:none){.zoomhint{opacity:1;transform:none}}

figcaption{
  padding:14px clamp(16px,2vw,22px) 16px;
  border-top:1px solid var(--rule);background:var(--surface);
  font-size:14.5px;line-height:1.58;color:var(--muted);max-width:none;
}
figcaption b{
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);
}

/* --------------------------------------------------------------- frames */
.frame{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  aspect-ratio:var(--ar,.75);
  background:var(--img-bg);border:1px solid var(--rule);
  border-radius:var(--radius-sm);cursor:zoom-in;
  transition:border-color .18s,box-shadow .18s;
}
.frame:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame.big{border-radius:var(--radius-md);box-shadow:var(--shadow-md)}

.tag{
  position:absolute;top:8px;left:9px;z-index:2;
  font-family:var(--display);font-style:italic;font-size:15px;font-weight:600;
  line-height:1;color:var(--ink);background:rgba(255,255,255,.93);
  padding:4px 9px 5px;border-radius:5px;border:1px solid rgba(0,0,0,.07);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tag.accent{color:var(--accent-dark)}
:root[data-theme="dark"] .tag{background:rgba(12,13,11,.82);border-color:rgba(255,255,255,.12)}

.fade{transition:opacity .16s ease}
.fade.hide{opacity:0}

.spinner{
  position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid var(--rule);border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* -------------------------------------------------------- sample strip */
.strip{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.strip button{
  display:flex;align-items:center;gap:11px;
  padding:6px 16px 6px 6px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--muted);
  font-family:var(--sans);font-size:14.5px;font-weight:500;box-shadow:var(--shadow-sm);
  transition:background-color .16s,border-color .16s,color .16s;
}
.strip button:hover{border-color:var(--accent);color:var(--ink)}
.strip button[aria-selected="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.strip button img{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  background:var(--img-bg);flex:0 0 auto;
}
.strip button .n{
  font-family:var(--mono);font-size:11px;opacity:.62;
  padding-left:10px;margin-left:2px;border-left:1px solid currentColor;
}

/* ---------------------------------------------------------- switchboard */
.board{
  display:flex;flex-direction:column;gap:clamp(14px,1.7vh,22px);
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:clamp(18px,2vw,28px);box-shadow:var(--shadow-md);
}

/* A -> A'  applied to  B -> B', all four on one row */
.boardrow{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(16px,2.4vw,38px);flex-wrap:wrap;
}
.bgroup{min-width:0}
.boardrow .frame{
  width:calc(var(--board-h) * var(--ar,.75));max-width:100%;
  flex:0 1 auto;min-width:0;
}
.pairstack{display:flex;align-items:center;gap:10px;max-width:100%}
.pair-arrow{
  flex:0 0 auto;color:var(--faint);display:flex;justify-content:center;
  transform:rotate(-90deg);
}

/* the hinge between the demonstration and the query */
.rowsplit{
  align-self:stretch;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding-top:26px;flex:0 0 auto;
}
.rowsplit::before,.rowsplit::after{
  content:"";width:1px;flex:1;background:var(--rule);min-height:12px;
}
.rowsplit span{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);writing-mode:vertical-rl;
}

.editcard{
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--radius-md);padding:13px 15px 12px;
}
.edithead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:9px;
}
.editcard h4{
  margin:0;font-family:var(--display);font-size:1.08rem;font-weight:600;
  color:var(--ink);
}
.edithead .legend{margin-top:0}
/* the switches spread across the card instead of stacking in a column */
.chiplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:8px}
.chip{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:500;line-height:1.36;
  padding:9px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--keep-line);background:var(--keep-fill);color:var(--keep-ink);
  transition:background-color .16s,border-color .16s,color .16s,opacity .16s;
}
.chip .dot{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:4px;
  border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;
}
.chip .kbd{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;line-height:1;
  padding:3px 5px;margin-top:1px;border-radius:4px;
  border:1px solid currentColor;opacity:.4;
}
.chip .name{flex:1;min-width:0}
.chip[aria-pressed="false"]{
  background:var(--drop-fill);border-color:var(--drop-line);color:var(--drop-ink);
}
.chip[aria-pressed="false"] .name{
  text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.9;
}
.chip[aria-pressed="false"] .dot svg{opacity:0}
.chip:disabled{opacity:.62;cursor:not-allowed}
.chip:disabled .kbd{opacity:0}
.chip:not(:disabled):hover{filter:brightness(.985)}
:root[data-theme="dark"] .chip:not(:disabled):hover{filter:brightness(1.22)}

.hintline{
  margin:0;font-size:13px;line-height:1.45;color:var(--muted);
  flex:1 1 22ch;min-width:0;
}
.boardfoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px 20px;
  flex-wrap:wrap;margin-top:10px;padding-top:9px;
  border-top:1px dashed var(--accent-line);
}
.footctl{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.linkbtn{
  background:none;border:none;padding:0;font-family:var(--sans);font-size:14px;
  font-weight:500;color:var(--accent-dark);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
.linkbtn:disabled{color:var(--faint);cursor:default;text-decoration:none;opacity:.7}
.counter{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  text-align:right;white-space:nowrap;
}

.stepper{display:flex;align-items:center;gap:6px}
.steplabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--faint);
  white-space:nowrap;
}

#outNote{
  margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);
  max-width:calc(var(--board-h) * 1.7);
}

/* -------------------------------------------------------------- cinema */
.cinema{
  display:grid;grid-template-columns:auto auto minmax(240px,310px);
  gap:clamp(16px,1.9vw,32px);align-items:start;
  width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(18px,2vw,26px);
  box-shadow:var(--shadow-md);
}
/* A -> A' side by side, so the card stays short and the frames grow */
.demo-row{display:flex;align-items:center;gap:10px}
.demo-col .frame{width:calc(var(--demo-h) * var(--ar,.75));max-width:100%}
.demo-arrow{
  display:flex;justify-content:center;color:var(--faint);margin:0;
  flex:0 0 auto;transform:rotate(-90deg);
}

.wipe{
  position:relative;aspect-ratio:var(--ar,.75);margin-inline:auto;
  width:calc(var(--wipe-h) * var(--ar,.75));max-width:100%;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--rule);
  background:var(--img-bg);box-shadow:var(--shadow-md);
  touch-action:pan-y;
}
.wipe .layer{position:absolute;inset:0}
.wipe .layer img{display:block;width:100%;height:100%;object-fit:cover}
.wipe .lt{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.wipe .pin{
  position:absolute;top:11px;z-index:3;font-family:var(--mono);font-size:10.5px;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);color:#3A3F49;
  opacity:.5;transition:opacity .2s;
}
.wipe .pin.l{left:11px}
.wipe .pin.r{right:11px;color:var(--accent-dark)}
.wipe .pin.lit{opacity:1}
:root[data-theme="dark"] .wipe .pin{
  background:rgba(12,13,11,.85);border-color:rgba(255,255,255,.13);color:#C3C9D3;
}

.handle{
  position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;z-index:2;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none;
}
.grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;
  border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;color:#4A4F58;
}
.wiperange{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:4;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;
}
.wiperange::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:100%}
.wipehint{margin-top:10px;font-size:13px;color:var(--faint);text-align:center}

.info h3{margin:0 0 7px;font-size:1.2rem;line-height:1.28}
.kindline{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.kindline b{font-weight:600;color:var(--ink)}
.phrases{display:flex;flex-direction:column;gap:6px}
.ph{
  display:flex;align-items:baseline;gap:10px;font-size:14.5px;line-height:1.4;
  padding:7px 11px;border-radius:var(--radius-sm);border:1px solid transparent;
}
.ph i{
  font-style:normal;font-family:var(--mono);font-size:11px;flex:0 0 auto;
  width:18px;opacity:.65;
}
.ph .lbl{flex:1;min-width:0}
.ph.k{background:var(--keep-fill);border-color:var(--keep-line);color:var(--keep-ink)}
.ph.d{background:var(--drop-fill);border-color:var(--drop-line);color:var(--drop-ink)}
.ph.d .lbl{text-decoration:line-through;text-decoration-thickness:1.4px}
.ph em{
  font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10.5px;
  opacity:.65;padding-left:8px;flex:0 0 auto;
}

.legend{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.legend .k i{background:var(--keep-line)}
.legend .d i{background:var(--drop-line)}
.legend em{font-style:italic}

/* ------------------------------------------------------------ transport */
.transport{
  display:flex;justify-content:center;margin-top:clamp(14px,2vh,22px);
}

/* A deliberately narrow, framed rail: the thumbnails run past both ends, and
   the edges fade out to say so. */
.filmwrap{
  position:relative;max-width:min(100%,730px);padding:8px 18px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:999px;box-shadow:var(--shadow-sm);
}
.filmwrap::before,.filmwrap::after{
  content:"";position:absolute;top:8px;bottom:8px;width:46px;z-index:2;
  pointer-events:none;opacity:1;transition:opacity .22s ease;
}
.filmwrap::before{
  left:9px;border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,var(--surface) 30%,transparent);
}
.filmwrap::after{
  right:9px;border-radius:0 999px 999px 0;
  background:linear-gradient(270deg,var(--surface) 30%,transparent);
}
.filmwrap.at-start::before,.filmwrap.at-end::after{opacity:0}
.tbtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background-color .16s,border-color .16s,opacity .16s,color .16s;
}
.tbtn.sm{width:30px;height:30px}
.tbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark)}
.tbtn:disabled{opacity:.3;cursor:not-allowed}
.tcount{font-family:var(--mono);font-size:13px;color:var(--faint);flex:0 0 auto}
.film{
  position:relative;display:flex;gap:7px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.film::-webkit-scrollbar{display:none}
.film button{
  flex:0 0 auto;width:46px;padding:0;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;border:1px solid var(--rule);background:var(--img-bg);
  aspect-ratio:3/4;scroll-snap-align:center;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.film button img{
  display:block;width:100%;height:100%;object-fit:cover;opacity:.55;
  transition:opacity .16s;
}
.film button:hover{transform:translateY(-2px)}
.film button:hover img{opacity:.92}
.film button[aria-current="true"]{
  border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint);
}
.film button[aria-current="true"] img{opacity:1}
.film button[aria-current="true"] img{opacity:1}

/* --------------------------------------------------- all-examples grid */
.moretoggle{margin-top:14px;display:flex;justify-content:center}
.moretoggle button{
  font-family:var(--sans);font-size:14.5px;font-weight:600;padding:10px 24px;
  border-radius:var(--radius-sm);border:1px solid var(--rule-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:border-color .16s,transform .16s,color .16s;
}
.moretoggle button:hover{
  border-color:var(--accent);color:var(--accent-dark);transform:translateY(-1px);
}
.allgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;margin-top:26px;
}
.gcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:13px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.gcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gcard .row{display:flex;gap:6px;margin-bottom:11px}
.gcard .row .frame{flex:1;cursor:pointer;border-radius:5px}
.gcard .row .frame.big{
  flex:1.5;border-color:var(--accent-line);box-shadow:none;
}
.gcard h4{margin:0 0 8px;font-size:1.02rem;line-height:1.3}
.gpills{display:flex;flex-wrap:wrap;gap:4px}
.gpill{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px}
.gpill.k{background:var(--keep-fill);color:var(--keep-ink);border:1px solid var(--keep-line)}
.gpill.d{
  background:var(--drop-fill);color:var(--drop-ink);border:1px solid var(--drop-line);
  text-decoration:line-through;
}
.empty{padding:56px 0;text-align:center;color:var(--faint)}

/* --------------------------------------------------------- abstract grid */
.abs-grid{
  display:grid;grid-template-columns:minmax(0,86ch) minmax(290px,1fr);
  gap:clamp(32px,3.4vw,56px);align-items:start;margin-top:30px;
}
.abs-grid .prose{margin-top:0;max-width:none}

.glance{
  border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--surface);
  padding:20px 20px 22px;box-shadow:var(--shadow-sm);
  position:sticky;top:calc(var(--nav-h) + 24px);
  width:100%;
}
.glance dl{margin:0;display:flex;flex-direction:column;gap:14px}
.glance dt{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.glance dd{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.glance .col-label{
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--rule);color:var(--ink);
}

/* --------------------------------------------------------- method cards */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;margin-top:clamp(30px,4vh,48px);
}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:22px 22px 24px;box-shadow:var(--shadow-sm);
}
.cardnum{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  color:var(--gold);margin-bottom:10px;
}
.card h3{margin:0 0 11px;font-size:1.14rem;line-height:1.3}
.card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--muted)}

.statband{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;margin-top:clamp(30px,4vh,48px);background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;
}
.stat{
  background:var(--surface);padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;gap:5px;
}
.stat b{
  font-family:var(--display);font-size:1.7rem;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--accent-dark);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);
}
.statnote{margin-top:20px;font-size:15.5px;color:var(--muted);max-width:none}

/* --------------------------------------------------------------- tables */
.tablewrap{
  margin:clamp(26px,3.5vh,40px) 0 0;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--radius-md);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.tablewrap.narrow{max-width:860px;margin-top:clamp(34px,4.5vh,52px)}
.tscroll{overflow-x:auto;border:0;border-radius:0;background:none;box-shadow:none}
.tbl{
  width:100%;border-collapse:collapse;font-size:15px;min-width:660px;
  font-variant-numeric:lining-nums tabular-nums;
}
.tbl th,.tbl td{padding:12px 16px;text-align:center;white-space:nowrap}
.tbl th{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:var(--muted);background:var(--band);border-bottom:1px solid var(--rule);
}
.tbl thead tr:first-child th{border-bottom:1px solid var(--rule-soft)}
.tbl thead tr:first-child th[colspan]{
  color:var(--ink);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
}
.tbl td{border-bottom:1px solid var(--rule-soft)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .l{text-align:left}
.tbl .ref{color:var(--faint);font-size:12.5px}
.tbl .best{font-weight:700;color:var(--ink)}
.tbl tr.ours{background:var(--accent-soft)}
.tbl tr.ours td{color:var(--ink)}
.tbl tr.ours .l{font-weight:700}
.tbl .yes{color:var(--keep-ink);font-weight:600}
.tbl .no{color:var(--faint)}
.tablewrap figcaption{font-size:14.5px}

/* --------------------------------------------------------------- bibtex */
.bibwrap{max-width:880px;margin:28px auto 0}
.bib{
  position:relative;background:#14161A;color:#DFE3E9;border:1px solid #22252B;
  border-radius:var(--radius-md);padding:22px 24px;overflow-x:auto;
  box-shadow:var(--shadow-md);
}
.bib pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.78}
.bib button{
  position:absolute;top:13px;right:13px;
  background:rgba(255,255,255,.08);color:#DFE3E9;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);padding:6px 14px;font-size:12.5px;font-weight:600;
  font-family:var(--sans);cursor:pointer;transition:background-color .16s;
}
.bib button:hover{background:rgba(255,255,255,.16)}
.ack{margin-top:18px;text-align:center}

/* --------------------------------------------------------------- footer */
footer{
  padding:40px 0 56px;font-size:14px;color:var(--faint);
  border-top:1px solid var(--rule);
}
.footgrid{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between}
footer p{margin:0;max-width:60ch}
footer a{color:var(--muted)}

/* ------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:40px 28px;background:rgba(16,17,15,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:lbin .18s ease;
}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-fig{
  margin:0;max-width:min(1500px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:14px;
}
.lb-fig img{
  display:block;max-width:100%;max-height:calc(100vh - 150px);
  margin-inline:auto;object-fit:contain;border-radius:var(--radius-sm);background:#fff;
  box-shadow:var(--shadow-lg);
}
.lb-fig figcaption{
  color:#C9CFD8;font-family:var(--sans);font-size:14.5px;text-align:center;
  margin:0;max-width:88ch;margin-inline:auto;padding:0;border:0;background:none;
}
.lb-close{
  position:fixed;top:20px;right:24px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background-color .16s;
}
.lb-close:hover{background:rgba(255,255,255,.2)}

/* ----------------------------------------------------------- responsive */
@media (max-width:1180px){
  .abs-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .glance{position:static;width:min(100%,560px)}
  .cinema{grid-template-columns:auto minmax(0,1fr) minmax(240px,300px);gap:26px}
}
@media (max-width:940px){
  .cinema{grid-template-columns:1fr;gap:24px;width:auto}
  .demo-row{max-width:420px}
  .demo-col .frame{width:calc(50% - 15px)}
  .wipe{width:100%;max-width:420px;margin-inline:0}
}
@media (max-width:760px){
  .board{padding:16px}
  .boardrow{gap:16px}
  .bgroup{flex:1 1 100%}
  .pairstack{gap:6px}
  .pair-arrow svg{width:9px}
  .boardrow .frame{width:calc(50% - 10px)}
  .rowsplit{display:none}
  #outNote{max-width:none}
  .fig-teaser,.fig-arch{width:100%}
  body{font-size:16px}
  .prose p{font-size:17.5px}
  .transport{flex-wrap:wrap}
  .film{order:3;flex-basis:100%}
  .footgrid{flex-direction:column}
  .lightbox{padding:64px 14px 28px}
}
@media (max-width:420px){
  .strip button .n{display:none}
}

/* Laptop-height windows: the edit card is text-driven, so trim it directly
   rather than letting it push the section past the fold. */
@media (max-height:860px) and (min-width:761px){
  .editcard{padding:12px 14px}
  .editcard h4{font-size:1rem}
  .chip{font-size:14px;padding:7px 11px}
  .chiplist{gap:7px}
  .hintline{font-size:12.5px}
  .boardfoot{margin-top:10px;padding-top:9px}
  .info h3{font-size:1.1rem}
  .ph{font-size:14px;padding:6px 10px}
  .phrases{gap:5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media print{
  body::before{display:none}
  .nav,.themebtn,.strip,.transport,.moretoggle,.stepper,.zoomhint,.lightbox,.skip{
    display:none!important;
  }
  body{font-size:11pt;background:#fff}
  section{padding:24px 0;break-inside:avoid}
  .board,.cinema,.card,.tablewrap,.fig{box-shadow:none}
}