/* Ardelia
   Layout: a catalogue raisonné. A narrow margin column carries the apparatus (gallery number,
   section name); the body column carries text at reading measure, with plates and entries
   stepping out wider. The site opens with an enfilade: a suite of doorways walked by scrolling. */

@font-face{font-family:"Brygada 1918"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada 1918"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-ext-opsz-italic.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Travertine & Lapis */
  --travertine:#E6E0D3;   /* walls, page */
  --travertine-2:#DCD5C5; /* plates, floor */
  --ink:#1C2130;          /* text */
  --ink-2:#4A4E5A;        /* secondary text */
  --lapis:#23386E;        /* accent: links, numerals */
  --gilt:#A4884F;         /* metal: frames, architraves, rules of note */
  --caption:#6B665C;      /* captions, labels */
  --rule:#C9C1B0;         /* hairlines */
  --light:rgba(255,246,222,.55); /* picture-light glow */
  --error:#9A2F2A;

  --display:"Brygada 1918", "Iowan Old Style", Georgia, serif;
  --text:"Newsreader", "Iowan Old Style", Georgia, serif;
  --label:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter:clamp(16px, 5vw, 72px);
  --head-h:64px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --travertine:#1A1C1F; --travertine-2:#23252A; --ink:#DAD4C9; --ink-2:#ADA79C;
  --lapis:#9DB0E0; --gilt:#B39862; --caption:#8F8A80; --rule:#34363B; --light:rgba(255,230,180,.16); --error:#E3907F;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--head-h); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--travertine); color:var(--ink); font-family:var(--text); font-size:clamp(16px, .4vw + 12.5px, 18px); line-height:1.6; font-optical-sizing:auto; text-rendering:optimizeLegibility}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0; list-style:none}
a{color:var(--lapis); text-decoration-thickness:1px; text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--lapis); outline-offset:3px}
em{font-style:italic}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:var(--gutter); top:-60px; z-index:30; background:var(--ink); color:var(--travertine); padding:10px 14px; font-family:var(--label); font-size:14px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

.eyebrow{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--caption)}
/* Marks unfinished content. Delete this rule's contents (or the spans) when the copy is final. */
.placeholder{display:inline-block; vertical-align:.15em; margin-left:.4em; padding:2px 7px 1px; border:1px dashed var(--gilt); font-family:var(--label); font-size:10.5px; font-weight:500; font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--gilt); line-height:1.5}

/* ---------- Header ---------- */
.site-head{position:fixed; inset:0 0 auto 0; z-index:20; height:calc(var(--head-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) var(--gutter) 0; display:flex; align-items:center; justify-content:space-between; gap:24px; background:color-mix(in srgb, var(--travertine) 88%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent)}
.wordmark{font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; line-height:1}
.galleries ol{display:flex; gap:clamp(14px, 2.2vw, 32px)}
.galleries a{display:flex; align-items:baseline; gap:.55em; font-family:var(--label); font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; padding-block:8px; transition:color .4s}
.galleries a span{font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--gilt)}
.galleries a:hover, .galleries a[aria-current="page"]{color:var(--ink)}
.galleries a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--ink)}
.plan-toggle{display:none}
@media (max-width:900px){
  .plan-toggle{display:block; border:1px solid var(--rule); background:transparent; color:var(--ink); font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; cursor:pointer}
  .galleries ol{position:fixed; inset:calc(var(--head-h) + env(safe-area-inset-top,0px)) 0 auto 0; flex-direction:column; gap:0; padding:8px var(--gutter) 24px; background:var(--travertine); border-bottom:1px solid var(--rule); visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .35s, transform .35s, visibility 0s .35s}
  .galleries.open ol{visibility:visible; opacity:1; transform:none; transition:opacity .35s, transform .35s}
  .galleries a{font-size:14px; padding-block:14px; border-bottom:1px solid var(--rule)}
  .galleries a span{min-width:2.2em}
}

/* ---------- Enfilade ---------- */
.enfilade{position:relative}
.js .enfilade{height:440vh}   /* a shorter walk: it now follows the introduction */
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:color-mix(in srgb, var(--ink) 55%, var(--travertine))}
.walk-window{position:absolute; inset:0; overflow:hidden; perspective:900px; perspective-origin:50% 52%}
.walk-label{display:none}
.world{position:absolute; inset:0; transform-style:preserve-3d}
.room{position:absolute; inset:0; transform-style:preserve-3d; --fog:0%}
.room[data-room="1"]{transform:translateZ(-1100px)}
.room[data-room="2"]{transform:translateZ(-2200px)}
.room[data-room="3"]{transform:translateZ(-3300px)}
.room[data-room="4"]{transform:translateZ(-4400px)}
.room[data-room="5"]{transform:translateZ(-5500px)}
.room[data-room="6"]{transform:translateZ(-6600px)}
.wall-svg{position:absolute; left:-100%; top:-100%; width:300%; height:300%; overflow:visible}
.wall{fill:color-mix(in srgb, var(--travertine), var(--ink) var(--fog))}
.floor{fill:color-mix(in srgb, color-mix(in srgb, var(--travertine-2) 88%, var(--ink)), var(--ink) var(--fog))}
.skirting{fill:color-mix(in srgb, color-mix(in srgb, var(--travertine) 80%, var(--ink)), var(--ink) var(--fog))}
.architrave{fill:none; stroke:var(--gilt); stroke-width:1.4; opacity:.9}
.frame{fill:none; stroke:var(--gilt); stroke-width:6}
:root[data-theme="dark"] .mat{fill:color-mix(in srgb, var(--travertine) 70%, #fff)}
:root[data-theme="dark"] .hung-photo{filter:brightness(.85) sepia(.1)}
.lamp{fill:var(--gilt)}
.mat{fill:color-mix(in srgb, var(--travertine) 45%, #fff)}
.hung-photo{filter:sepia(.1) contrast(1.03)}
.light-a{stop-color:var(--light)}
.light-b{stop-color:var(--light); stop-opacity:0}

.wall-text{transition:opacity .2s linear; position:absolute; left:max(calc(var(--gutter) * 1.6), 10%); top:30%; width:min(25%, 340px); color:var(--ink)}
.wall-text .eyebrow{color:var(--lapis)}
.wall-title{font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.6vw, 38px); line-height:1.05; margin:.35em 0 .5em}
.wall-note{font-size:clamp(14px, 1.1vw, 17px); line-height:1.45; color:var(--ink-2)}
.wall-text--entrance{top:28%; width:min(27%, 400px)}
.wall-text--entrance .wall-note{max-width:30ch; text-wrap:pretty}
.end-mark{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:500; font-size:clamp(56px, 9vw, 140px); letter-spacing:-.015em; color:var(--ink); line-height:1}

.stage-foot{position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(18px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:20px; font-family:var(--label); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); z-index:2}
.stage-foot a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px}
.stage-foot a:hover{color:var(--ink)}
.stage-foot{justify-content:space-between}
.crumbs{display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none}
.crumbs li{color:color-mix(in srgb, var(--ink-2) 45%, transparent); transition:color .8s ease}
.crumbs li + li::before{content:""; display:inline-block; width:clamp(10px, 1.6vw, 24px); height:1px; margin-inline:10px; vertical-align:middle; background:var(--rule); transition:background .8s ease}
.crumbs li.is-past{color:var(--ink-2)}
.crumbs li.is-past + li::before, .crumbs li.is-current::before{background:var(--gilt)}
.crumbs li.is-current{color:var(--ink)}

@media (max-width:760px){
  .wall-svg{top:calc(-100% + 5vh)}
  .wall-text, .wall-text--entrance{left:calc(var(--gutter) + 12px); right:calc(var(--gutter) + 12px); width:auto; top:calc(var(--head-h) + 5vh)}
  .wall-title{font-size:26px}
  .crumbs{display:none}   /* the step name already heads the label above */
  .stage-foot{justify-content:flex-end}
  .crumbs li.is-current::before{display:none}
}

/* No script or reduced motion: the entrance wall stands alone, like a title page. */
html:not(.js) .room:not([data-room="0"]), html:not(.js) .stage-foot{display:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .enfilade{height:auto}
  .stage{position:relative}
  .room:not([data-room="0"]), .crumbs{display:none}
  .stage-foot{justify-content:flex-end}
}

/* ---------- Galleries ---------- */
.gallery{display:grid; grid-template-columns:minmax(120px, 2fr) minmax(0, 9fr) minmax(0, 1fr); column-gap:clamp(24px, 4vw, 64px); padding:clamp(56px, 6vw, 92px) var(--gutter) clamp(40px, 4.5vw, 64px); position:relative; border-top:1px solid var(--rule)}
.gallery:first-of-type{border-top:0}
/* the picture light: a soft glow that comes up as a gallery is entered (decorative only) */
.gallery::before{content:""; position:absolute; left:50%; top:0; width:min(900px, 90vw); height:420px; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%, var(--light), transparent 70%); opacity:0; transition:opacity 2.4s ease; pointer-events:none}
.gallery.lit::before{opacity:1}
.margin{position:sticky; top:calc(var(--head-h) + 40px); align-self:start; display:grid; gap:6px; padding-top:10px}
.margin .eyebrow{color:var(--lapis)}
.body{display:grid; gap:clamp(32px, 3.4vw, 48px); min-width:0}
.display{font-family:var(--display); font-weight:500; font-size:clamp(28px, 2.7vw, 40px); line-height:1.12; letter-spacing:-.008em; text-wrap:balance; max-width:22ch}
.prose{display:grid; gap:1.1em; max-width:62ch}
.lede{font-size:1.1em; line-height:1.55; color:var(--ink)}
.prose p:not(.lede){color:var(--ink-2)}
.section-note{color:var(--ink-2); max-width:62ch; margin-top:calc(-1 * clamp(16px, 2vw, 28px))}
@media (max-width:760px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .margin{position:static; display:flex; gap:12px; align-items:baseline; margin-bottom:24px; padding-top:0}
}


/* Catalogue entry with provenance chain */
.entry{display:grid; gap:clamp(24px, 3vw, 36px); padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--rule)}
.entry-head{display:grid; gap:8px; max-width:62ch}
.entry-title{font-family:var(--display); font-style:italic; font-size:clamp(24px, 2.2vw, 30px); line-height:1.2}
.entry-note{font-size:15px; color:var(--caption)}
.entry-body{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px, 4vw, 56px); align-items:start}
@media (max-width:760px){ .entry-body{grid-template-columns:1fr} }

/* The verso: the back of the canvas, where owners leave their marks */
.verso{display:grid; gap:10px}
.verso figcaption{font-style:italic; font-size:14.5px; color:var(--caption)}
.canvas{position:relative; aspect-ratio:4/5; max-width:100%; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 70% 78%, rgba(120,90,50,.18), transparent 22%),
    radial-gradient(circle at 30% 20%, rgba(120,90,50,.12), transparent 18%),
    radial-gradient(ellipse at 40% 35%, #D2C19F, #AE9A74 80%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 20px 40px -26px color-mix(in srgb, var(--ink) 60%, transparent)}
/* Stretcher bars: old, darkened wood with worn edges */
.bar{position:absolute; pointer-events:none; background-color:#4E3826;
  box-shadow:inset 0 0 0 1px rgba(20,12,6,.45), inset 0 0 14px rgba(15,8,3,.45)}
.bar-top, .bar-bottom{left:0; right:0; height:7%;
  background-image:
    radial-gradient(ellipse 18% 70% at 72% 40%, rgba(20,12,6,.35), transparent 70%),
    radial-gradient(ellipse 10% 60% at 24% 60%, rgba(150,120,85,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,235,200,.05) 0 1px, transparent 1px 4px, rgba(0,0,0,.08) 4px 5px, transparent 5px 9px)}
.bar-top{top:0} .bar-bottom{bottom:0}
.bar-left, .bar-right{top:0; bottom:0; width:9%;
  background-image:
    radial-gradient(ellipse 70% 14% at 40% 63%, rgba(20,12,6,.35), transparent 70%),
    radial-gradient(ellipse 60% 9% at 55% 22%, rgba(150,120,85,.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,235,200,.05) 0 1px, transparent 1px 4px, rgba(0,0,0,.08) 4px 5px, transparent 5px 9px)}
.bar-left{left:0} .bar-right{right:0}
/* Hanging wire, strung between two screw eyes on the side bars */
.wire{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.wire-shadow{fill:none; stroke:rgba(40,28,15,.35); stroke-width:3}
.wire-line{fill:none; stroke:#B9BEC3; stroke-width:2.2; stroke-dasharray:2.5 1.2}
.screw-eye{fill:none; stroke:#9EA3A8; stroke-width:2.5}
/* Marks on the verso, drawn in SVG so ink, crayon and paper can age */
.marks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.mark{transition:opacity .5s ease, transform .5s ease; transform-box:fill-box; transform-origin:center}
.paper{fill:#EDE3C9}
.paper-edge{fill:none; stroke:rgba(110,85,50,.35); stroke-width:.8}
.print-rule{fill:none; stroke:rgba(92,60,38,.55); stroke-width:1.1}
.print-rule.thin{stroke-width:.5}
.print-caps{font-family:var(--label); font-size:7.5px; font-weight:600; letter-spacing:.32em; fill:rgba(92,60,38,.7)}
.ink-hand{font-family:var(--display); font-style:italic; font-size:17px; fill:rgba(62,40,24,.88)}
.ink-hand.small{font-size:11.5px}
.stamp-line{fill:none; stroke:rgba(74,48,112,.82); stroke-width:3}
.stamp-line.thin{stroke-width:1.4}
.stamp-text{font-family:var(--label); font-size:9.5px; font-weight:700; letter-spacing:.12em; fill:rgba(74,48,112,.85)}
.stamp-center{font-family:var(--label); font-size:13px; font-weight:700; letter-spacing:.2em; fill:rgba(74,48,112,.85)}
.stamp-date{font-family:var(--label); font-size:10px; font-weight:600; letter-spacing:.18em; fill:rgba(74,48,112,.8)}
.crayon{font-family:var(--display); font-weight:700; font-size:31px; letter-spacing:.04em; fill:rgba(28,44,92,.82)}
.crayon--small{font-size:22px}
.crayon-stroke{fill:none; stroke:rgba(28,44,92,.7); stroke-width:3.5; stroke-linecap:round}
.lot-no{font-family:var(--display); font-weight:700; font-size:27px; fill:rgba(40,30,22,.9)}
.glue{fill:rgba(150,112,58,.22)}
.glue-edge{fill:none; stroke:rgba(120,88,45,.3); stroke-width:1; stroke-dasharray:3 2}
.remnant{fill:#E9DEC2; stroke:rgba(110,85,50,.3); stroke-width:.6}
.entry[data-step] .mark{opacity:.2}
.entry[data-step] .mark.is-lit{opacity:1; transform:scale(1.05)}

/* The chain: hovering a step draws a gilt line down to it */
.chain{position:relative; display:grid; --progress:0px}
.chain::before, .chain::after{content:""; position:absolute; left:calc(1.2em - 1px); top:.9em; width:1px; pointer-events:none}
.chain::before{bottom:1.2em; background:var(--rule)}
.chain::after{width:2px; margin-left:-.5px; height:var(--progress); background:var(--gilt); transition:height .6s cubic-bezier(.3,.7,.2,1)}
.chain li{position:relative; display:grid; grid-template-columns:2.4em minmax(0,1fr); gap:14px; padding-block:18px; cursor:default; outline-offset:6px; transition:opacity .45s ease}
.chain li:first-child{padding-top:0}
.chain-no{position:relative; z-index:1; justify-self:center; width:1.6em; height:1.6em; display:grid; place-items:center; border-radius:50%; background:var(--travertine); box-shadow:0 0 0 1px var(--rule); font-family:var(--display); font-size:17px; line-height:1; color:var(--gilt); font-variant-numeric:lining-nums; transition:background .45s, color .45s, box-shadow .45s}
.chain li p:first-child{transition:color .45s}
.source{font-family:var(--label); font-size:12.5px; letter-spacing:.02em; color:var(--caption); margin-top:4px}
.chain-gap p:first-child{font-style:italic; color:var(--ink-2)}
.chain-gap .chain-no{color:var(--caption); box-shadow:0 0 0 1px var(--rule), 0 0 0 4px var(--travertine), 0 0 0 5px color-mix(in srgb, var(--rule) 60%, transparent)}
.entry[data-step] .chain li{opacity:.4}
.entry[data-step] .chain li.is-past, .entry[data-step] .chain li.is-current{opacity:1}
.chain li.is-past .chain-no{box-shadow:0 0 0 1px var(--gilt)}
.chain li.is-current .chain-no{background:var(--gilt); color:var(--travertine); box-shadow:0 0 0 1px var(--gilt)}
.chain li.is-current p:first-child{color:var(--ink)}
@media (max-width:760px){ .entry{grid-template-columns:1fr} }

/* Coverage */
/* The ledger: what is indexed, and who it is for, closing the Introduction in one row */
.ledger{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px clamp(20px, 4vw, 56px); max-width:760px}
.figure, .served{border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:8px; align-content:start}
.fig{color:var(--lapis); font-family:var(--display); font-weight:400; font-size:clamp(34px, 3.4vw, 52px); line-height:1; letter-spacing:-.015em; font-variant-numeric:lining-nums tabular-nums}
.fig-label{font-size:15px; line-height:1.45; color:var(--ink-2); max-width:32ch; margin-top:4px}
.served ul{display:grid; gap:3px}
.served li{font-family:var(--text); font-style:italic; font-size:15.5px; color:var(--ink-2); line-height:1.35}
.ledger-note{grid-column:1 / -1; font-size:14.5px; font-style:italic; color:var(--caption); max-width:62ch; text-wrap:pretty}
@media (max-width:760px){
  .ledger{grid-template-columns:1fr 1fr}
  .served{grid-column:1 / -1}
  .served ul{display:flex; flex-wrap:wrap; gap:4px 0}
  .served li:not(:last-child)::after{content:"·"; margin-inline:.5em; color:var(--caption)}
}
@media (max-width:420px){ .ledger{grid-template-columns:1fr} }


/* Mission and approach */
.inscriptions{display:grid; gap:clamp(32px, 4vw, 56px); overflow-x:clip; overflow-clip-margin:12px}
.inscription{display:grid; gap:14px}
.inscribed{font-family:var(--display); font-weight:400; font-size:clamp(22px, 2.2vw, 32px); line-height:1.28; letter-spacing:-.004em; max-width:30ch; text-wrap:balance}
.inscription:nth-child(2){justify-self:end; text-align:left}
@media (max-width:760px){ .inscription:nth-child(2){justify-self:start} }

/* In the Media */
.literature{display:grid}
.literature li{display:grid; grid-template-columns:5em minmax(0,1fr); gap:clamp(12px, 3vw, 40px); padding-block:20px 22px; border-top:1px solid var(--rule)}
.literature li:last-child{border-bottom:1px solid var(--rule)}
.lit-date{font-family:var(--label); font-size:13px; letter-spacing:.08em; color:var(--gilt); padding-top:4px; font-variant-numeric:tabular-nums}
.lit-cite{font-size:1.05em}
.lit-cite cite{font-style:italic}
.lit-quote{font-family:var(--display); font-style:italic; color:var(--ink-2); margin-top:8px; font-size:1.05em}
.lit-quote::before{content:"“"} .lit-quote::after{content:"”"}

/* Team */
.team{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:clamp(32px, 3vw, 44px) clamp(22px, 2.4vw, 32px)}
.team li{display:grid; gap:6px; align-content:start}
.portrait{aspect-ratio:4/5; max-width:100%; display:grid; place-items:center; margin-bottom:10px; background:radial-gradient(ellipse at 50% -10%, var(--light), transparent 60%), color-mix(in srgb, var(--ink) 8%, var(--travertine-2)); border:6px solid color-mix(in srgb, var(--travertine) 60%, #fff); box-shadow:0 0 0 1px var(--gilt)}
:root[data-theme="dark"] .portrait{border-color:var(--travertine-2)}
.portrait span{font-family:var(--display); font-size:clamp(34px, 3.4vw, 52px); color:color-mix(in srgb, var(--ink) 30%, transparent)}
.person{font-family:var(--display); font-weight:500; font-size:21px; line-height:1.2}
.role{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--caption)}

/* ---------- Footer ---------- */
.site-foot{padding:clamp(48px, 6vw, 88px) var(--gutter) calc(40px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule); display:grid; gap:40px}
.foot-mark{font-family:var(--display); font-weight:500; font-size:clamp(56px, 9vw, 140px); line-height:.9; letter-spacing:-.025em; color:var(--ink)}
.foot-cols{display:grid; grid-template-columns:1fr 1.4fr 2fr; gap:24px; font-family:var(--label); font-size:13px; letter-spacing:.03em; color:var(--caption); border-top:1px solid var(--rule); padding-top:20px}
.colophon{font-family:var(--text); font-style:italic; font-size:15px; letter-spacing:0}
@media (max-width:760px){ .foot-cols{grid-template-columns:1fr} }
.defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- Request a demo (header button, contact form) ---------- */
.site-head > .theme-toggle{margin-left:auto}
.head-register{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--travertine); background:var(--lapis); text-decoration:none; padding:10px 16px; transition:background .3s}
.head-register:hover{background:var(--ink)}
@media (max-width:900px){ .site-head{gap:10px} .head-register{padding:10px 14px; font-size:12px} }
@media (max-width:380px){ .wordmark{font-size:22px} .plan-toggle, .head-register{padding-inline:10px; letter-spacing:.08em} }

.register{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(28px, 5vw, 72px); padding:clamp(28px, 4vw, 48px); background:var(--travertine-2); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--lapis); scroll-margin-top:calc(var(--head-h) + 24px)}
.register-head{display:grid; gap:12px; align-content:start}
.register-head .eyebrow{color:var(--lapis)}
.register-title{font-family:var(--display); font-weight:500; font-size:clamp(28px, 3vw, 42px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
.register-note{color:var(--ink-2); font-size:16.5px; max-width:36ch}
.register-form{display:grid; gap:22px; align-content:start}
.field{display:grid; gap:4px}
.field label{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--caption)}
.optional{text-transform:none; letter-spacing:.02em}
.field input{font:inherit; font-size:18px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink-2); border-radius:0; padding:8px 0 10px; width:100%; min-width:0}
.field input::placeholder, .field textarea::placeholder{font-size:15px; font-style:italic; color:var(--caption); opacity:.75}
.field input:focus{outline:none; border-bottom:2px solid var(--lapis); padding-bottom:9px}
.field input[aria-invalid="true"]{border-bottom-color:var(--error)}
.hp{display:none}   /* spam trap: people never see it; bots that fill every field reveal themselves */
.register-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.register-actions button{font-family:var(--label); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--travertine); background:var(--lapis); border:0; padding:15px 28px; cursor:pointer; transition:background .3s}
.register-actions button:hover{background:var(--ink)}
.register-actions button:disabled{opacity:.6; cursor:progress}
.register-status{flex:1; min-width:12em; font-size:16px; color:var(--ink-2)}
.register-status[data-state="error"]{color:var(--error)}
.register-status[data-state="done"]{font-family:var(--display); font-style:italic; font-size:19px; color:var(--lapis)}
.consent{font-size:13px; font-style:italic; line-height:1.5; color:var(--caption); max-width:52ch}
@media (max-width:760px){ .register{grid-template-columns:1fr} }

/* ---------- Privacy policy and terms ---------- */
.legal{padding-top:calc(var(--head-h) + clamp(56px, 8vw, 112px)); min-height:100vh}
.legal-head{display:grid; gap:18px; max-width:62ch}
.legal-meta{font-family:var(--label); font-size:13px; letter-spacing:.04em; color:var(--caption)}
.legal-toc ol{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0 32px; border-top:1px solid var(--rule)}
.legal-toc li{border-bottom:1px solid var(--rule)}
.legal-toc a{display:block; padding-block:12px; font-family:var(--label); font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink-2); text-decoration:none}
.legal-toc a:hover{color:var(--lapis)}
.legal-text{display:grid; gap:clamp(40px, 5vw, 64px); max-width:66ch}
.legal-text section{display:grid; gap:14px; scroll-margin-top:calc(var(--head-h) + 24px)}
.legal-text h2{font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.4vw, 32px); line-height:1.15}
.legal-text h3{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--caption); margin-top:8px}
.legal-text p, .legal-text li, .legal-text dd{color:var(--ink-2)}
.legal-text ul{display:grid; gap:8px; padding-left:1.2em; list-style:none}
.legal-text ul li{position:relative}
.legal-text ul li::before{content:""; position:absolute; left:-1.1em; top:.72em; width:.45em; height:1px; background:var(--gilt)}
.legal-text strong{font-weight:600; color:var(--ink)}
.basis{display:grid}
.basis > div{display:grid; gap:6px; padding-block:16px; border-top:1px solid var(--rule)}
.basis > div:last-child{border-bottom:1px solid var(--rule)}
.basis dt{font-family:var(--display); font-size:20px; color:var(--ink)}
.site-foot--short{padding-top:40px}
.consent a{color:inherit}




/* Mission and approach travel in from opposite sides as the reader scrolls (driven by script) */
#mission{overflow-x:clip}
.inscription{will-change:transform, opacity}

.affil{font-size:14px; line-height:1.4; color:var(--ink-2)}
.portrait span{letter-spacing:.04em}
.lit-cite a{color:inherit; text-decoration-color:var(--gilt); text-underline-offset:.22em}
.lit-cite a:hover{color:var(--lapis)}

/* ---------- Team biographies ---------- */
button.portrait{font:inherit; color:inherit; padding:0; width:100%; cursor:zoom-in; transition:box-shadow .35s, transform .5s cubic-bezier(.2,.7,.2,1)}
button.portrait:hover{box-shadow:0 0 0 1px var(--gilt), 0 18px 34px -22px color-mix(in srgb, var(--ink) 70%, transparent); transform:translateY(-3px)}
button.portrait:focus-visible{outline:2px solid var(--lapis); outline-offset:4px}

.bio-dialog{border:0; padding:0; background:transparent; color:var(--ink); max-width:min(1040px, calc(100vw - 32px)); width:100%; max-height:calc(100dvh - 32px); overflow:visible}
.bio-dialog::backdrop{background:color-mix(in srgb, color-mix(in srgb, var(--ink) 38%, var(--travertine)) 82%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.bio-card{position:relative; box-shadow:0 40px 90px -40px rgba(10,12,20,.55); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(24px, 3.5vw, 48px); padding:clamp(22px, 3vw, 40px); align-items:start; max-height:calc(100dvh - 32px); overflow-y:auto}
.bio-sheet{position:absolute; inset:0; background:var(--travertine); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--gilt); z-index:0}
.bio-card > :not(.bio-sheet){position:relative; z-index:1}
.bio-portrait{margin:0; position:sticky; top:0; max-height:calc(100dvh - 112px); aspect-ratio:4/5; width:auto; max-width:100%}
.bio-portrait span{font-size:clamp(56px, 7vw, 104px)}
.bio-text{display:grid; gap:8px; align-content:start; padding-top:clamp(0px, 1.2vw, 14px)}
.bio-text .eyebrow{color:var(--lapis)}
.bio-name{font-family:var(--display); font-weight:500; font-size:clamp(28px, 3vw, 40px); line-height:1.08; letter-spacing:-.01em}
.bio-text .affil{font-size:15.5px}
.bio-body{display:grid; gap:.85em; margin-top:6px; padding-top:14px; border-top:1px solid var(--rule); font-size:16px; line-height:1.55; color:var(--ink-2)}
.bio-body p{max-width:62ch}
.bio-more{font-family:var(--label); font-size:13px; letter-spacing:.03em}
.bio-more a{color:var(--lapis)}
.bio-nav{display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding-top:10px; border-top:1px solid var(--rule)}
.bio-nav button, .bio-close{font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:0; padding:8px 0; cursor:pointer}
.bio-nav button:hover, .bio-close:hover{color:var(--lapis)}
.bio-card > .bio-close{position:absolute; top:clamp(12px, 2vw, 22px); right:clamp(16px, 3vw, 32px)}
@media (max-width:760px){
  .bio-card{grid-template-columns:1fr; gap:20px; padding:56px 20px 24px}
  .bio-portrait{position:relative; width:min(44%, 190px); justify-self:center}
}
.bio-dialog.is-flying, .bio-dialog.is-flying .bio-card{overflow:visible}
/* The card carries its own paper once open, so scrolled text never runs past it;
   the separate sheet is only used while the portrait is in flight. */
.bio-card{background:var(--travertine); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--gilt), 0 40px 90px -40px rgba(10,12,20,.55)}
.bio-dialog.is-flying .bio-card{background:transparent; box-shadow:0 40px 90px -40px rgba(10,12,20,.55)}
.bio-dialog:not(.is-flying) .bio-sheet{display:none}

/* ---------- Light / dark toggle ---------- */
.theme-toggle{display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer; transition:color .3s, background-color .3s}
.theme-toggle:hover{color:var(--lapis); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; transition:fill .4s ease}
.theme-toggle[aria-pressed="true"] svg{fill:currentColor}
.theme-toggle--push{margin-left:auto}
.theme-fading, .theme-fading *{transition:background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, stroke .6s ease, box-shadow .6s ease !important}
@media (prefers-reduced-motion: reduce){ .theme-fading, .theme-fading *{transition:none !important} }
@media (max-width:420px){ .site-head{gap:6px} .theme-toggle{width:32px; height:32px} }

.team .role{line-height:1.5; margin-top:2px}
.team .affil{margin-top:4px}

/* A note that follows a visually hidden heading sits at the top of its gallery */
.sr-only + .section-note{margin-top:0}

/* ---------- The dark band: Mission on Home, Our name on About ---------- */
.gallery--nocturne{
  --travertine:#16181B; --travertine-2:#1F2125; --ink:#E6E0D4; --ink-2:#B5AFA4; --caption:#938E84;
  --rule:#33353A; --lapis:#AEBDE6; --gilt:#C6A86E; --light:rgba(255,226,170,.16); --error:#E3907F;
  background:var(--travertine); color:var(--ink); color-scheme:dark; border-top-color:transparent;
  padding-block:clamp(72px, 8vw, 120px) clamp(64px, 7vw, 104px)}
:root[data-theme="dark"] .gallery--nocturne{--travertine:#0D0E10; --travertine-2:#16171A; --rule:#2A2B30; --light:rgba(255,226,170,.12)}
.gallery--nocturne + .gallery{border-top-color:transparent}
.gallery--nocturne .body{gap:clamp(40px, 4.5vw, 64px)}
.stakes{font-family:var(--display); font-weight:400; font-size:clamp(28px, 3.3vw, 48px); line-height:1.16; letter-spacing:-.012em; max-width:24ch; text-wrap:balance; color:var(--ink)}
.stakes em{font-style:italic; color:var(--gilt)}
.gallery--nocturne .inscribed{font-size:clamp(24px, 2.6vw, 38px); line-height:1.24; max-width:28ch}
.gallery--nocturne .inscriptions{padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--rule)}

/* Team portraits with a photograph: the image fills the mat, lit like the monograms */
.portrait.has-photo{place-items:stretch; overflow:hidden}
.portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:saturate(.92) sepia(.06)}
:root[data-theme="dark"] .portrait img{filter:saturate(.88) brightness(.92)}

/* ---------- Pages after the home page ---------- */
/* The first gallery of a page clears the fixed header */
.page-first{padding-top:calc(var(--head-h) + clamp(48px, 7vw, 104px)); border-top:0}
.head-register[aria-current="page"]{background:var(--ink)}

/* Footer: address, links, and the results disclaimer */
.disclaimer{font-family:var(--text); font-size:14px; line-height:1.55; letter-spacing:0; max-width:62ch}
.site-foot > .colophon{color:var(--caption)}
.foot-cols a{color:inherit}
.foot-cols a:hover{color:var(--lapis)}

/* Home: links under the mission, and the request-a-demo card */
.mission-links{display:flex; flex-wrap:wrap; gap:12px 32px; padding-top:clamp(24px, 3vw, 36px); border-top:1px solid var(--rule)}
.mission-links a, .text-link{font-family:var(--label); font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gilt); padding-bottom:3px}
.mission-links a::after{content:" →"; letter-spacing:0}
.mission-links a:hover, .text-link:hover{color:var(--lapis)}
.cta-card{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:24px clamp(28px, 5vw, 72px); align-items:end; padding:clamp(26px, 3.6vw, 44px); background:var(--travertine-2); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--lapis)}
.cta-title{font-family:var(--display); font-weight:500; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; letter-spacing:-.01em}
.cta-note{color:var(--ink-2); margin-top:10px; max-width:52ch}
.cta-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; justify-content:flex-end}
.button{display:inline-block; font-family:var(--label); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--travertine); background:var(--lapis); text-decoration:none; padding:15px 26px; transition:background .3s}
.button:hover{background:var(--ink)}
@media (max-width:760px){ .cta-card{grid-template-columns:1fr} .cta-actions{justify-content:flex-start} }

/* Next page, at the foot of each page */
.page-next{padding:0 var(--gutter) clamp(48px, 6vw, 80px)}
.page-next a{display:grid; gap:6px; justify-items:end; text-align:right; padding-top:24px; border-top:1px solid var(--ink); text-decoration:none; color:var(--ink)}
.page-next-title{font-family:var(--display); font-weight:500; font-size:clamp(26px, 3vw, 40px); line-height:1.1}
.page-next-title::after{content:" →"}
.page-next a:hover .page-next-title{color:var(--lapis)}

/* The Product: how it works */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 clamp(18px, 2.4vw, 32px); counter-reset:step}
.steps li{display:grid; grid-template-rows:auto auto 1fr; gap:8px; padding-top:16px; border-top:1px solid var(--ink)}
.step-no{font-family:var(--display); font-size:34px; line-height:1; color:var(--lapis); font-variant-numeric:lining-nums}
.steps h3{font-family:var(--display); font-weight:500; font-size:21px; line-height:1.2}
.steps p{font-size:16px; line-height:1.5; color:var(--ink-2)}
.steps li:last-child .step-no{color:var(--gilt)}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; row-gap:32px} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.entry-foot{font-family:var(--display); font-style:italic; font-size:clamp(18px, 1.6vw, 22px); color:var(--ink-2); padding-top:clamp(20px, 2.4vw, 28px); border-top:1px solid var(--rule)}
#sources .display{max-width:26ch}

/* About: the story of our name */
.gallery--nocturne .stakes{max-width:30ch}
.gallery--nocturne .stakes em{display:inline-block; margin-top:.3em}
.hall{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(28px, 4vw, 64px); align-items:start; padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--rule)}
.hall-photo{display:grid; gap:14px; position:sticky; top:calc(var(--head-h) + 32px)}
.hall-mat{display:grid; place-items:center; background:radial-gradient(ellipse at 50% -10%, var(--light), transparent 65%), var(--travertine-2); border:10px solid color-mix(in srgb, var(--travertine) 70%, #fff); box-shadow:0 0 0 1px var(--gilt)}
.hall-mat img{width:100%; height:auto; display:block; filter:contrast(1.02)}
.hall-mat:not(:has(img)){aspect-ratio:4/3}
.hall-pending{font-family:var(--label); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--caption); border:1px dashed var(--gilt); padding:6px 10px}
.hall-photo figcaption{font-style:italic; font-size:15px; line-height:1.45; color:var(--caption); display:grid; gap:6px}
.hall-text{display:grid; gap:1em; color:var(--ink-2)}
.hall-name{font-family:var(--display); font-weight:500; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; color:var(--ink)}
.hall-name span{display:block; font-size:.55em; color:var(--gilt); margin-top:.35em; letter-spacing:.02em}
.valland{display:grid; gap:8px; margin-top:12px; padding-top:20px; border-top:1px solid var(--rule); font-size:16px}
.valland .eyebrow span{letter-spacing:.08em}
@media (max-width:760px){ .hall{grid-template-columns:1fr} .hall-photo{position:static} }

/* Team: one row per tier (Leadership side by side, then Engineering, then Research Associate);
   each card shows the portrait, name and title, with the full biography beneath */
.tier{display:grid; gap:20px; align-content:start}
.tier + .tier{margin-top:clamp(8px, 1.5vw, 16px)}
.tier-title{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--rule)}
.members{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px, 3vw, 40px) clamp(24px, 3.5vw, 56px)}
.member{display:grid; gap:18px; align-content:start}
.member-head{display:grid; grid-template-columns:clamp(120px, 12vw, 168px) minmax(0,1fr); gap:clamp(16px, 2vw, 24px); align-items:end}
.member-head .portrait{margin:0}
.member-head .person{font-size:clamp(21px, 1.9vw, 25px)}
.member-head .role{margin-top:6px}
.member-bio{display:grid; gap:.8em; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:62ch}
.member-link a{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
@media (max-width:860px){ .members{grid-template-columns:1fr} }
.bio-more a{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}

/* In the Media */
.press-group{display:grid; gap:14px}
.press-group + .press-group{margin-top:clamp(12px, 2vw, 24px)}
.press-intro{color:var(--ink-2); font-style:italic}
.lit-note{font-size:15.5px; color:var(--ink-2); margin-top:6px}
.lit-note a{color:var(--lapis)}
.lit-date{white-space:nowrap}
.literature li{grid-template-columns:6.5em minmax(0,1fr)}
@media (max-width:520px){ .literature li{grid-template-columns:1fr; gap:4px} }
.quotes{display:grid; gap:clamp(28px, 3vw, 40px)}
.quotes blockquote{margin:0; display:grid; gap:10px; padding-left:clamp(16px, 2vw, 28px); border-left:2px solid var(--gilt)}
.quotes p{font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.9vw, 26px); line-height:1.32; color:var(--ink); max-width:44ch; text-wrap:pretty}
.quotes p::before{content:"“"} .quotes p::after{content:"”"}
.quotes footer{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--lapis)}

/* Contact form */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px clamp(18px, 2.4vw, 32px)}
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }
.field select, .field textarea{font:inherit; font-size:18px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink-2); border-radius:0; padding:8px 0 10px; width:100%; min-width:0}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:1.6em; background:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%) right 0 center / 6px 6px no-repeat}
.field select option{color:#1C2130; background:#fff}
.field textarea{resize:vertical; min-height:7.5em; line-height:1.5}
.field select:focus, .field textarea:focus{outline:none; border-bottom:2px solid var(--lapis); padding-bottom:9px}
.field textarea[aria-invalid="true"], .field input[aria-invalid="true"]{border-bottom-color:var(--error)}
.register-head a{color:var(--lapis)}
#example .entry{border-top:0; padding-top:0}
@media (max-width:560px){ .wide-only{display:none} .person{font-size:19px} }
.gallery--nocturne .inscribed{font-size:clamp(21px, 2vw, 30px); line-height:1.3; max-width:34ch}
.press-group .tier-title{border-bottom:0; padding-bottom:0; white-space:normal}
/* The label hung beneath each walk photograph: title, then credit and licence */
.hung-title{font-family:var(--text); font-style:italic; font-size:8px; fill:var(--ink)}
.hung-credit{font-family:var(--label); font-size:6.4px; letter-spacing:.02em; fill:var(--caption)}
.hung a:hover .hung-credit{fill:var(--lapis)}

.wall-caption{display:none}
/* Phones: the walk plays inside a framed window under the header, like a picture on the page. The window
   shows wall units 230 to 770 across and -120 to 700 down, so the whole doorway stands on the floor; on short
   screens the window narrows rather than cropping it (--s is the wall-unit size). Each photograph hangs
   centred above its doorway (at most 290 x 245 wall units). The room's label sits below the frame as plain
   text, copied there by the script as each room is reached. */
@media (max-width:760px){
  .stage{background:var(--travertine)}
  .walk-window{--s:min(calc((100vw - 2 * var(--gutter) - 12px) / 540), calc((100svh - var(--head-h) - 250px) / 820));
    inset:auto; top:calc(var(--head-h) + 14px); left:calc(50% - var(--s) * 270 - 6px); width:calc(var(--s) * 540 + 12px); height:calc(var(--s) * 820 + 12px);
    perspective-origin:50% 59%;
    border:6px solid color-mix(in srgb, var(--travertine) 55%, #fff); box-shadow:0 0 0 1px var(--gilt), 0 22px 40px -30px rgba(10,12,20,.6)}
  .wall-svg{width:calc(var(--s) * 3000); height:calc(var(--s) * 2100); left:calc(50% - var(--s) * 1500); top:calc(var(--s) * -580)}
  .room[data-room="0"] .hung{transform:translate(-383.5px, -336px) scale(1.263); transform-origin:761.0px 246px}
  .room[data-room="1"] .hung{transform:translate(-362.4px, -324px) scale(1.056); transform-origin:780.0px 234px}
  .room[data-room="2"] .hung{transform:translate(-366.1px, -328px) scale(1.094); transform-origin:772.0px 238px}
  .room[data-room="3"] .hung{transform:translate(-370.9px, -358px) scale(1.098); transform-origin:726.0px 268px}
  .room[data-room="4"] .hung{transform:translate(-377.0px, -348px) scale(1.151); transform-origin:732.0px 258px}
  .room[data-room="5"] .hung{transform:translate(-377.0px, -350px) scale(1.151); transform-origin:732.0px 260px}
  .hung text{display:none}
  .wall-text, .wall-text--entrance{display:none}
  .walk-label{display:block; position:absolute; left:var(--gutter); right:var(--gutter);
    top:calc(var(--head-h) + 14px + min(calc((100vw - 2 * var(--gutter) - 12px) / 540), calc((100svh - var(--head-h) - 250px) / 820)) * 820 + 12px + 16px)}
  .walk-label .eyebrow{color:var(--lapis)}
  .walk-label .wall-title{font-family:var(--display); font-weight:500; font-size:24px; line-height:1.15; margin:.25em 0 .3em}
  .walk-label .wall-note{font-size:15.5px; line-height:1.45; color:var(--ink-2)}
  .walk-label .wall-caption{display:block; margin-top:.6em; font-size:12px; line-height:1.45; color:var(--caption)}
  .walk-label .wall-caption em{color:var(--ink-2)}
  .walk-label .wall-caption a{color:inherit}
  .stage-foot{bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:760px) and (max-height:700px){ .walk-label .wall-title{font-size:20px; margin:.15em 0 .2em} .walk-label .wall-note{font-size:14.5px} .walk-label .wall-caption{font-size:11.5px; margin-top:.4em} }
/* Tablets held upright: the same wider view, so the photograph beside the doorway stays in sight */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .wall-svg{height:calc(2100px * .8); top:calc(var(--head-h) + 247px - 738px)}
}

/* About, Our name: Rose Valland, then Ardelia Hall, then the sources for both */
.namesake{display:grid; gap:clamp(28px, 3vw, 40px); max-width:66ch; padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--rule)}
.namesake-person{display:grid; gap:1em; color:var(--ink-2)}
.namesake-person + .namesake-person{padding-top:clamp(24px, 3vw, 36px); border-top:1px solid var(--rule)}
.sources-note{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding-top:16px; border-top:1px solid var(--rule); font-size:14.5px; color:var(--caption)}

/* The Product: coverage line, accuracy, the note under the example, sources, independence, built for */
.coverage-line{font-family:var(--display); font-size:clamp(19px, 1.7vw, 23px); line-height:1.4; color:var(--ink); max-width:46ch; padding-top:clamp(20px, 2.4vw, 28px); border-top:1px solid var(--rule)}
.accuracy{display:grid; gap:8px; max-width:62ch}
.accuracy .tier-title{white-space:normal; border-bottom:0; padding-bottom:0}
.accuracy p{color:var(--ink-2)}
.entry-note{font-size:15.5px; color:var(--caption)}
.sources-next{max-width:62ch; color:var(--ink-2)}
.statement{font-family:var(--display); font-size:clamp(20px, 2vw, 27px); line-height:1.36; color:var(--ink); max-width:40ch; text-wrap:pretty}
.built-for{grid-column:1 / -1; display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--rule)}
.built-for ul{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px}
.built-for li{font-style:italic; font-size:clamp(14px, 1.2vw, 16.5px); color:var(--ink-2); white-space:nowrap}
@media (max-width:760px){ .built-for ul{justify-content:flex-start; gap:4px 10px} .built-for li:not(:last-child)::after{content:"·"; margin-left:10px; color:var(--caption)} }

/* ---------- Home: introduction, founder, featured ---------- */
.intro{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(24px, 5vw, 80px); align-items:center;
  min-height:min(100svh, 860px); padding:calc(var(--head-h) + clamp(40px, 7vw, 96px)) var(--gutter) clamp(48px, 7vw, 96px); position:relative; overflow:hidden}
.intro::before{content:""; position:absolute; left:50%; top:0; width:min(1100px, 100vw); height:520px; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%, var(--light), transparent 70%); pointer-events:none}
.intro-text{display:grid; gap:clamp(20px, 2.4vw, 32px); position:relative; max-width:44rem}
.intro-title{font-family:var(--display); font-weight:500; font-size:clamp(40px, 5.2vw, 76px); line-height:1.02; letter-spacing:-.018em; text-wrap:balance}
.intro-title em{color:var(--lapis)}
.intro-title span{display:block; margin-top:.18em; font-size:.62em; line-height:1.1; color:var(--ink-2)}
.intro-lede{font-size:clamp(18px, 1.5vw, 21px); line-height:1.55; color:var(--ink-2); max-width:52ch}
.intro-actions{display:flex; flex-wrap:wrap; gap:14px}
.button--quiet{color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1px var(--ink-2)}
.button--quiet:hover{color:var(--travertine); background:var(--ink)}
.intro-arches{width:100%; max-width:380px; justify-self:center; position:relative}
.intro-arches path{fill:none; stroke:var(--gilt); stroke-width:1.4; vector-effect:non-scaling-stroke}
.intro-arches path:nth-child(2){opacity:.75} .intro-arches path:nth-child(3){opacity:.5} .intro-arches path:nth-child(4){opacity:.3}
@media (max-width:760px){
  .intro{grid-template-columns:1fr; min-height:0}
  .intro-arches{display:none}
}

.founder-grid{display:grid; grid-template-columns:minmax(150px, 3fr) minmax(0, 8fr); gap:clamp(24px, 4vw, 56px); align-items:start}
.founder-photo{margin:0}
.founder-note{display:grid; gap:1em; max-width:60ch}
.founder-title{font-family:var(--display); font-weight:500; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; letter-spacing:-.01em}
.founder-note p{font-size:clamp(17px, 1.3vw, 19px); line-height:1.6; color:var(--ink-2)}
.founder-sign{font-family:var(--label); font-size:12.5px !important; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lapis) !important}
.founder-sign::before{content:"— "}
@media (max-width:620px){ .founder-grid{grid-template-columns:1fr} .founder-photo{max-width:220px} }

.featured{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:10px 28px; padding:clamp(26px, 3vw, 36px) var(--gutter); border-block:1px solid var(--rule); text-align:center}
.featured .eyebrow{color:var(--caption)}
.featured-list{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 0; font-family:var(--display); font-size:clamp(18px, 1.6vw, 22px); color:var(--ink)}
.featured-list a{color:inherit; text-decoration:none}
.featured-list a:hover{color:var(--lapis)}
.featured-list a:not(:last-child)::after{content:"·"; margin-inline:.7em; color:var(--gilt)}
.featured-list cite{font-style:italic}
.featured-list a{display:inline-flex; align-items:center}
.featured-list .logo{display:block; height:clamp(20px, 1.8vw, 26px); width:auto}
.featured-list .logo--bp{height:clamp(22px, 2vw, 28px)}
.featured-list .logo--sm{height:clamp(30px, 2.7vw, 38px)}
.featured-talk{flex-basis:100%; font-size:15px; font-style:italic; color:var(--caption)}
.featured + .enfilade{margin-top:0}