/* The GLN Collection — gallery draft */

/* self-hosted latin subsets (SIL OFL): Bodoni Moda (opsz 6-96, wght 400-600), Instrument Sans (wdth 75-100, wght 400-600) */
@font-face {
  font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/bodoni-moda-latin.woff2") format("woff2"); 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: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format("woff2"); 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: "Instrument Sans"; font-style: italic; font-weight: 400 600; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/instrument-sans-italic-latin.woff2") format("woff2"); 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;
}

:root {
  --white: #F6F5F2;
  --ink: #151515;
  --ink-2: #57544F;
  --rule: rgba(21, 21, 21, .16);
  --oxblood: #5E1E22;
  --lapis: #1F3A6B;
  --moss: #4E5B3A;
  --bone: #E6E0D4;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --g: clamp(16px, 4.2vw, 112px);
  --maxw: max(1240px, 80vw);        /* 1240 up to 1550 px wide, then 80vw */
  --ease-soft: cubic-bezier(.16, .72, .12, 1);
  --ff: .8833;               /* wall/floor junction inside a true-scale frame (see panel.js) */
  --wall: var(--white);
  --on-wall: var(--ink);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
  /* 16 px up to 1440 px wide, then growing to 20 px at 2560, so the whole page scales with the screen */
  font-size: clamp(100%, calc(100% + (100vw - 1440px) * .003571), 125%);
}
html.is-locked, html.lenis.is-locked { overflow: hidden !important; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, figure, dl, dd, ol, ul { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--white); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--ink); color: var(--white); padding: 12px 18px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* the floor under a wall is the wall colour taken down in value */
.floor { background: color-mix(in oklab, var(--wall) 74%, #151515); }

h2 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.sec-head { max-width: 40rem; margin: 0 auto clamp(48px, 7vw, 150px); text-align: center; }
.sec-head p { margin: 1.1rem auto 0; max-width: 32rem; color: var(--ink-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(44px, 2.75rem); padding: 0 1.25rem;
  font: 500 .9375rem/1 var(--sans); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit;
  transition: background-color .3s ease, color .3s ease;
}
.btn-solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-solid:hover { background: #333230; }
.btn-line:hover, .btn-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.link {
  background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
html:not(.can-study) [data-study] { display: none; }

/* ---------- header ---------- */
.site-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  color: var(--on-wall);
  padding: 14px var(--g);
}
.site-nav {
  max-width: max(1440px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav-side { list-style: none; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 64px); font-size: .9375rem; }
.nav-r { justify-content: flex-end; }
.nav-side a:not(.btn) { display: inline-block; padding: 12px 0; text-decoration: none; }
.nav-side a:not(.btn):hover { text-decoration: underline; }
.wordmark {
  font-family: var(--serif); font-weight: 500; font-size: 1.875rem; line-height: 1;
  letter-spacing: .06em; text-decoration: none; padding: 8px 6px;
}
.menu-btn { display: none; }
@media (max-width: 860px) {
  .nav-side { display: none; }
  .site-nav { grid-template-columns: 1fr; }
  .wordmark { justify-self: start; padding-left: 0; }
  .menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    position: absolute; top: 14px; right: var(--g);
    background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer;
    font: 500 .9375rem/1 var(--sans);
  }
}
.menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink); color: var(--white);
  display: grid; align-content: center; padding: 96px var(--g) 48px;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.menu a { display: block; padding: 8px 0; font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.menu-close {
  position: absolute; top: 14px; right: var(--g);
  min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid currentColor; cursor: pointer;
  font: 500 .9375rem/1 var(--sans);
}

/* ---------- entrance ---------- */
.entrance {
  --hb: min(80svh, 118vw);          /* height of the true-scale frame */
  --hf: 84%;                        /* floor line */
  position: relative;
  height: 100vh; height: 100svh; min-height: 600px;
  background: var(--wall); color: var(--on-wall);
  overflow: hidden;
}
.entrance-floor { position: absolute; left: 0; right: 0; bottom: 0; top: var(--hf); }
.entrance-still {
  position: absolute;
  height: var(--hb); width: calc(var(--hb) * .8); max-width: none;
  left: 50%; margin-left: calc(var(--hb) * -.4);
  top: calc(var(--hf) - var(--hb) * var(--ff));
}
.entrance-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-on .entrance-still { visibility: hidden; }
.entrance-inner {
  position: relative; z-index: 3; text-align: center;
  padding: clamp(96px, 15svh, 230px) var(--g) 0;
}
.h1-main {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.1rem, 8.6vw, 10.5rem);
  line-height: .96; letter-spacing: -.022em;
}
.h1-main .w { white-space: nowrap; }
.h1-sub { display: block; margin-top: 1.1rem; font-size: clamp(1rem, 1.25vw, 1.125rem); letter-spacing: .005em; }
.entrance-note {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3;
  text-align: center; font-size: .9375rem;
}
.placard--hero {
  position: absolute; z-index: 3;
  left: min(calc(50% + var(--hb) * .215), calc(100% - 14.5rem - var(--g)));
  top: calc(var(--hf) - var(--hb) * .4);
  width: 14.5rem;
}

/* ---------- placards ---------- */
.placard {
  background: #F7F6F3; color: var(--ink);
  width: 15.5rem; padding: .875rem 1rem 1rem;
  font-size: .875rem; line-height: 1.45;
  box-shadow: 0 0 0 1px rgba(21, 21, 21, .05), 1px 2px 0 rgba(0, 0, 0, .07), 3px 10px 18px -10px rgba(0, 0, 0, .45);
}
.placard .pl-maker b { font-weight: 600; letter-spacing: .02em; }
.placard .pl-title { font: inherit; font-weight: 400; margin-top: 2px; }
.placard .pl-meta { color: var(--ink); }
.placard .pl-note { margin-top: .7em; }
.placard .pl-out { margin-top: .7em; color: var(--ink-2); }
.placard .pl-acc { margin-top: .7em; color: var(--ink-2); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pl-study {
  margin-top: .375rem; padding: .625rem 0 .125rem; min-height: max(44px, 2.75rem);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  font-weight: 500;
}

/* ---------- wall text ---------- */
.walltext { padding: clamp(104px, 14vw, 320px) var(--g); }
.walltext h2 { max-width: 15em; margin: 0 auto; text-align: center; }
.walltext-body {
  max-width: 33rem; margin: clamp(40px, 5vw, 100px) auto 0;
  font-family: var(--serif); font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.62;
}
.walltext-body p + p { margin-top: 1.1em; }

/* ---------- room of works ---------- */
.room { padding: 0 var(--g) clamp(110px, 13vw, 300px); }
.works-grid {
  list-style: none; padding: 0;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4.4vw, 120px); row-gap: clamp(56px, 7vw, 170px);
}
.work { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.work:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.work-frame { position: relative; display: block; aspect-ratio: 4 / 5; }
.work-wall { position: absolute; inset: 0; background: var(--wall); }
.work-floor { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--ff) * 100%); }
.work-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-frame--white .work-wall { box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s ease; }
.work:hover .work-frame--white .work-wall { box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .14); }
.work-label { display: block; width: max-content; max-width: 100%; margin: .875rem 0 0 auto; font-size: .875rem; line-height: 1.45; }
.wl-title, .wl-meta { display: block; }
.wl-meta { color: var(--ink-2); }
.work:hover .wl-title, .work:focus-visible .wl-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .works-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .work-label { font-size: 1rem; }
}

/* ---------- gallery walk: stacked (default, phones, reduced motion, no JS) ---------- */
.walk { position: relative; background: var(--white); }
.walk-head { text-align: center; padding: clamp(40px, 6vw, 80px) var(--g) clamp(40px, 5vw, 64px); }
.walk-head p { margin: 1rem auto 0; max-width: 30rem; color: inherit; }
.walk-track { list-style: none; padding: 0; }
.walk-floor, .walk-stage { display: none; }
.bay {
  --wall: var(--bay-wall); --on-wall: var(--bay-ink);
  --aw: min(100vw - 2 * var(--g), 520px);
  --pt: clamp(40px, 8vw, 72px);
  position: relative; overflow: hidden;
  background: var(--wall); color: var(--on-wall);
  padding: var(--pt) var(--g) 48px;
}
.bay::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--pt) + var(--aw) * 1.25 * var(--ff));
  background: color-mix(in oklab, var(--wall) 74%, #151515);
}
.bay-art { position: relative; z-index: 1; width: var(--aw); aspect-ratio: 4 / 5; margin: 0 auto; }
.bay-still { width: 100%; height: 100%; }
.bay-foot { position: relative; z-index: 1; width: var(--aw); margin: 20px auto 0; display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .bay .placard { width: 100%; font-size: 1rem; } }

/* ---------- gallery walk: pinned horizontal (desktop, set by JS) ---------- */
.walk.is-pinned {
  --bh: 66vh; --hf: 85vh; --bay: calc(var(--bh) * 4 / 3);
  height: 100vh; overflow: hidden;
  background: var(--wall); color: var(--on-wall);
  transition: color .6s ease;
}
.walk.is-pinned .walk-floor { display: block; position: absolute; left: 0; right: 0; bottom: 0; top: var(--hf); z-index: 0; }
.walk.is-pinned .walk-stage { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.walk.is-pinned .walk-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-top: clamp(28px, 6vh, 64px); }
.walk.is-pinned .walk-head h2 { font-size: clamp(2rem, 3.2vw, 3.25rem); }
.walk.is-pinned .walk-head p { margin-top: .6rem; }
.walk.is-pinned .walk-track {
  position: absolute; top: 0; left: 0; height: 100%; z-index: 2;
  display: flex; width: max-content;
  padding-inline: calc(var(--cw, 100vw) / 2 - var(--bay) / 2);
}
.walk.is-pinned .bay { flex: 0 0 var(--bay); height: 100%; padding: 0; background: transparent; color: inherit; overflow: visible; }
.walk.is-pinned .bay::before { display: none; }
.walk.is-pinned .bay-art {
  position: absolute; margin: 0;
  width: calc(var(--bh) * .8); height: var(--bh);
  left: 50%; margin-left: calc(var(--bh) * -.4);
  top: calc(var(--hf) - var(--bh) * var(--ff));
}
.walk.is-pinned .bay-foot {
  position: absolute; margin: 0; width: auto;
  left: calc(50% + var(--bh) * (var(--half) + .3) / 3);
  top: calc(var(--hf) - var(--bh) * .64);
}
.walk.is-live .bay-still { visibility: hidden; }

/* ---------- felt temperature ---------- */
.felt {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  background: #1b1b1a; color: var(--white);
}
.felt-photo { position: absolute; inset: -8% 0; }
.felt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.felt-photo::after { content: ""; position: absolute; inset: 0; background: rgba(14, 14, 13, .38); }
.felt-inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(96px, 12vw, 240px) var(--g); }
.felt-inner h2 { max-width: 11em; }
.felt-sum {
  margin: clamp(32px, 4vw, 56px) 0;
  display: grid; grid-template-columns: max-content auto; justify-content: start; align-items: baseline;
  column-gap: 1.1rem;
  font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.fs-row { display: contents; }
.fs-num { line-height: 1.08; font-variant-numeric: lining-nums; white-space: nowrap; }
.fs-lab { font-family: var(--sans); font-size: 1rem; }
.fs-rule { grid-column: 1 / -1; height: 1px; margin: .5rem 0 .35rem; background: rgba(246, 245, 242, .55); }
.felt-text { max-width: 30rem; }
.tag { font-size: .8125rem; color: var(--ink-2); }
.tag--light { position: absolute; right: var(--g); bottom: 18px; z-index: 1; color: rgba(246, 245, 242, .82); }
@media (max-width: 700px) {
  .felt-photo::after { background: rgba(14, 14, 13, .55); }
}

/* ---------- materials and making ---------- */
.making { padding: clamp(110px, 13vw, 300px) var(--g); }
.making-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(32px, 6vw, 160px); align-items: center;
}
.detail-view { position: relative; aspect-ratio: 4 / 5; background: var(--bone); overflow: hidden; }
.detail-still, .detail-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.detail-stage { opacity: 0; transition: opacity .6s ease; }
.detail-view.is-live .detail-stage { opacity: 1; }
.detail figcaption { margin-top: 12px; font-size: .875rem; color: var(--ink-2); text-align: right; }
.making-text > p { max-width: 32rem; }
.finishes { border: 0; padding: 0; margin: 2.2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; min-width: 0; }
.finishes legend { padding: 0; margin-bottom: .8rem; font-weight: 500; }
.finish {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: max(52px, 3.25rem); padding: .45rem .65rem .45rem .45rem;
  border: 1px solid var(--rule); cursor: pointer; background: #FBFAF8;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.finish input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.finish .sw { flex: none; width: 2.125rem; height: 2.125rem; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.finish .fn { font-size: .9375rem; line-height: 1.25; }
.finish .fn small { display: block; color: var(--ink-2); font-size: .8125rem; }
.finish:hover { border-color: rgba(21, 21, 21, .45); }
.finish:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.finish:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 860px) { .making-grid { grid-template-columns: minmax(0, 1fr); } .detail { max-width: 520px; width: 100%; margin: 0 auto; } }

.drawing { max-width: var(--maxw); margin: clamp(90px, 11vw, 240px) auto 0; }
.drawing-svg { width: 100%; height: auto; overflow: visible; }
.dw-build path { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.dw-build .dw-thin { stroke-width: .8; }
.dw-poche rect { fill: #E6E0D4; }
.dw-unit rect { fill: var(--white); stroke: var(--ink); stroke-width: 1.4; }
.dw-unit path { stroke: var(--ink); stroke-width: .8; }
.dw-panel rect { fill: var(--ink); }
.dw-panel path { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dw-route { fill: none; stroke: var(--lapis); stroke-width: 2.4; stroke-linejoin: round; }
.dw-fit { fill: var(--white); stroke: var(--lapis); stroke-width: 2.2; }
.dw-rad path { fill: none; stroke: var(--oxblood); stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.dw-call path { stroke: var(--ink); stroke-width: .9; }
.dw-call circle { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
.dw-call text { font-family: var(--sans); font-size: 16px; text-anchor: middle; fill: var(--ink); }
@media (max-width: 700px) {
  .dw-call circle { r: 30px; }
  .dw-call text { font-size: 36px; transform: translateY(8px); transform-box: fill-box; }
}
.drawing figcaption {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 1rem 2.5rem;
}
.drawing-title { font-weight: 500; }
.key { padding-left: 1.3em; columns: 2; column-gap: 2.5rem; }
.key li { break-inside: avoid; margin-bottom: .45rem; padding-left: .2em; }
@media (max-width: 760px) { .drawing figcaption { grid-template-columns: minmax(0, 1fr); } .key { columns: 1; } }

/* ---------- catalogue ---------- */
.catalogue { padding: 0 var(--g) clamp(110px, 13vw, 300px); }
.cat-wrap { max-width: var(--maxw); margin: 0 auto; }
.cat { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cat th, .cat td { text-align: left; vertical-align: baseline; padding: 1rem .875rem; border-bottom: 1px solid var(--rule); }
.cat th:first-child, .cat td:first-child { padding-left: 0; }
.cat th:last-child, .cat td:last-child { padding-right: 0; }
.cat thead th { font-size: .8125rem; font-weight: 500; color: var(--ink-2); border-bottom-color: var(--ink); padding-top: 0; }
.cat tbody th { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 400; line-height: 1.2; }
.cat td { font-size: .9375rem; }
.cat .num { text-align: right; white-space: nowrap; }
.cat-act { text-align: right; width: 1%; }
.cat tbody tr { transition: background-color .3s ease; }
.cat tbody tr:hover { background: rgba(21, 21, 21, .03); }
.cat-note { max-width: var(--maxw); margin: 22px auto 0; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .cat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cat, .cat tbody, .cat tr, .cat th, .cat td { display: block; }
  .cat tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .cat th, .cat td { padding: 0; border: 0; }
  .cat tbody th { grid-column: 1 / -1; grid-row: 1; font-size: 1.5rem; }
  .cat td::before { content: attr(data-l); display: block; font-size: .8125rem; color: var(--ink-2); }
  .cat td:first-child { grid-column: 1 / -1; }
  .cat .num { text-align: left; }
  .cat .cat-act { width: auto; text-align: left; grid-column: 1 / -1; }
  .cat td.cat-act::before { content: none; }
  .cat td { font-size: 1rem; }
}

/* ---------- visit ---------- */
.visit { padding: 0 var(--g) clamp(110px, 13vw, 300px); }
.visit-photo { max-width: var(--maxw); margin: 0 auto; }
.visit-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; }
.visit-photo .tag { margin-top: 10px; text-align: right; }
.visit-body {
  max-width: var(--maxw); margin: clamp(56px, 7vw, 150px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 7vw, 180px); align-items: start;
}
.visit-text > p { margin-top: 1.4rem; max-width: 32rem; }
.visit-facts { margin-top: 2.2rem; display: grid; }
.visit-facts div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: .875rem 0; border-top: 1px solid var(--rule); }
.visit-facts dt { color: var(--ink-2); }
.visit-form { background: var(--bone); padding: clamp(24px, 3vw, 72px); }
.visit-form h3 { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; margin-bottom: 1.4rem; }
.field { display: grid; gap: .375rem; margin-bottom: 1.125rem; }
.field label { font-size: .9375rem; font-weight: 500; }
.field .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: max(48px, 3rem); padding: .7rem .8rem; font-size: 1rem;
  background: #FBFAF8; color: var(--ink); border: 1px solid rgba(21, 21, 21, .4); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); }
.visit-form .btn-solid { width: 100%; min-height: max(52px, 3.25rem); margin-top: .375rem; }
.form-status { margin-top: 14px; min-height: 1.6em; font-weight: 500; }
.form-demo { font-size: .8125rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .visit-body { grid-template-columns: minmax(0, 1fr); }
  .visit-photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) { .visit-facts div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--white); padding: 5rem var(--g) 3.5rem; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 10px; }
.foot-mark { font-family: var(--serif); font-size: 3.25rem; line-height: 1; letter-spacing: .06em; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 14px 0 22px; }
.foot-nav a { display: inline-block; padding: 10px 0; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-demo { font-size: .875rem; color: rgba(246, 245, 242, .74); max-width: 38rem; }

/* ---------- study view ---------- */
.study { position: fixed; inset: 0; z-index: 100; color: var(--on-wall); }
.study[hidden] { display: none; }
.study-wall { position: fixed; inset: 0; background: var(--wall); }
.study-floor { position: fixed; left: 0; right: 0; bottom: 0; top: 80vh; }
.study-still { position: fixed; left: 0; top: 0; width: 10px; height: 10px; max-width: none; }
.study-stage { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0; }
.study-turn { position: fixed; left: 0; top: 0; width: 60vw; height: 100vh; cursor: grab; touch-action: none; }
.study-turn.is-dragging { cursor: grabbing; }
.study-turn:focus-visible { outline: 2px dashed currentColor; outline-offset: -14px; }
.study-side {
  position: fixed; z-index: 2;
  right: var(--g); top: 50%; transform: translateY(-40%);
  width: min(22rem, 34vw);
  display: grid; gap: 1.125rem;
}
.placard--study { width: auto; padding: 1.25rem 1.375rem 1.375rem; font-size: .9375rem; }
.placard--study .pl-title { font-size: 1.0625rem; }
.study-hint { font-size: .875rem; line-height: 1.45; }
.study-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.study-close { position: fixed; z-index: 3; top: 14px; right: var(--g); }
@media (max-width: 760px) {
  .study-side { left: var(--g); right: var(--g); top: auto; bottom: 14px; transform: none; width: auto; gap: 10px; }
  .placard--study { max-height: 34svh; overflow: auto; padding: 14px 16px 16px; font-size: 1rem; }
  .study-hint { display: none; }
  .study-nav .btn { flex: 1 1 0; }
}

/* ---------- entrance: CSS only, so it runs before fonts, GSAP or three.js arrive ---------- */
.entrance-shadow {
  position: absolute; max-width: none;
  height: var(--hb); width: calc(var(--hb) * .8);
  left: 50%; margin-left: calc(var(--hb) * -.4);
  top: calc(var(--hf) - var(--hb) * var(--ff));
}
.entrance-stage { opacity: 0; transition: opacity .35s ease; }
.stage-live .entrance-stage { opacity: 1; }
.stage-on .entrance-shadow { visibility: hidden; }
.stage-failed .entrance-still, .stage-failed .entrance-shadow { visibility: visible !important; }
.h1-main .c { display: inline-block; }
@keyframes gln-letter { from { opacity: 0; filter: blur(9px); transform: translateY(.12em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes gln-fade { from { opacity: 0; } }
@keyframes gln-rise {
  0% { opacity: 0; transform: translateY(1.6%); filter: brightness(.7); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes gln-slide { from { opacity: 0; transform: translateX(22px); } }
@media (prefers-reduced-motion: no-preference) {
  /* letters: 0.45 s each, 25 ms apart; the title is readable by ~0.6 s */
  .js .h1-main .c { opacity: 0; }   /* held until Bodoni Moda is ready, at most 350 ms (inline script) */
  .js.title-go .h1-main .c { animation: gln-letter .45s var(--ease-soft) calc(.02s + var(--i) * .025s) both; }
  /* the shadow arrives first, then the panel rises out of it as the light comes up */
  .js .entrance-shadow { animation: gln-fade .5s ease-out .06s both; }
  .js .entrance-still { animation: gln-rise 1.1s var(--ease-soft) .28s both; }
  .js .site-head { animation: gln-fade .7s ease-out .2s both; }
  .js .h1-sub { animation: gln-fade .6s ease-out .42s both; }
  .js .placard--hero { animation: gln-slide .7s var(--ease-soft) .72s both; }
  .js .entrance-note { animation: gln-fade .6s ease-out .88s both; }
}

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .entrance { --hb: min(60svh, 118vw); --hf: 82%; }
  .entrance-inner { padding-top: 104px; }
  .h1-sub { max-width: 18rem; margin-left: auto; margin-right: auto; }
  .placard--hero { left: auto; right: var(--g); top: calc(var(--hf) + 12px); width: auto; max-width: 14rem; padding: 10px 14px 12px; font-size: 1rem; }
  .cat-note, .foot-demo, .detail figcaption, .form-demo { font-size: 1rem; }
  .placard--hero .pl-meta:nth-of-type(3) { display: none; }
  .entrance-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ---------- Chinese (2026-09-29) ----------
   Noto Sans SC subset to this page's Chinese strings (fonts/subset-cjk.py): a bold instance for the display face and
   a 400-600 variable cut for text. Both sit after the Latin faces, so Bodoni Moda and Instrument Sans keep every Latin
   letter; they are only in the stacks while the page is in Chinese. The bold file is declared at the serif's own
   weights (400-600), so Chinese display type is set bold while the Latin beside it keeps its weight. */
@font-face { font-family: "GLN Noto Sans SC Display"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/noto-sans-sc-bold-gln.woff2") format("woff2"); }
@font-face { font-family: "GLN Noto Sans SC"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/noto-sans-sc-gln.woff2") format("woff2"); }
:root:lang(zh) {
  --serif: "Bodoni Moda", "GLN Noto Sans SC Display", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Bodoni 72", Georgia, serif;
  --sans: "Instrument Sans", "GLN Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
}

.lang { display: flex; }
.lang--narrow { display: none; }
.lang__btn {
  min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 .9375rem/1 var(--sans); opacity: .7;
}
.lang__btn[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; }
.lang__btn:hover { opacity: 1; }
.lang__btn[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.lang__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
@media (max-width: 860px) {
  .lang--narrow { display: flex; position: absolute; top: 14px; right: calc(var(--g) + 88px); }
}

:lang(zh) body { line-height: 1.8; }
:lang(zh) i, :lang(zh) em { font-style: normal; }
:lang(zh) .h1-main { font-size: clamp(2.6rem, 7vw, 8.4rem); line-height: 1.15; letter-spacing: .02em; }
:lang(zh) h2 { font-size: clamp(1.9rem, 3.9vw, 3.6rem); line-height: 1.3; letter-spacing: 0; }
:lang(zh) .walk.is-pinned .walk-head h2 { font-size: clamp(1.7rem, 2.7vw, 2.8rem); }
:lang(zh) h3, :lang(zh) .visit-form h3 { line-height: 1.35; letter-spacing: 0; }
:lang(zh) p, :lang(zh) li, :lang(zh) dd, :lang(zh) td { text-wrap: pretty; letter-spacing: 0; }