/* Salt Gallery. The wall.
   Tokens first: colour, type, spacing, grid. One accent (Klein blue), used for actions and the current item only. */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --blue: #1F2BFF;            /* 7.4:1 against white */
  --wall: #EFEFEF;            /* wall grey: the floor, quiet panels */
  --ink: #000000;
  --ink-2: #595959;           /* secondary text, 7:1 on white, 6.2:1 on wall grey */
  --line: rgba(0, 0, 0, .12);
  --line-2: rgba(0, 0, 0, .26);

  --f: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale: titles very large and light, labels small and exact */
  --t-title: clamp(3rem, 1rem + 6.6vw, 8.5rem);
  --t-h1: clamp(2.05rem, 1.15rem + 2.55vw, 3.75rem);
  --t-h2: clamp(1.8rem, 1.1rem + 2.05vw, 3.1rem);
  --t-h3: clamp(1.2rem, 1.06rem + .42vw, 1.5rem);
  --t-wt: clamp(1.9rem, 1.05rem + 2.3vw, 3.4rem);
  --t-lead: clamp(1.0625rem, .99rem + .3vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-s: .9375rem;
  --t-label: .8125rem;
  --t-xs: .75rem;

  /* spacing scale, and one section rhythm used everywhere */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: clamp(72px, 8vw, 128px);

  /* grid: 12 columns on desktop, 4 on phones */
  --m: clamp(20px, 4.2vw, 64px);
  --g: clamp(14px, 1.6vw, 24px);
  --maxw: 1680px;
  --hd: 64px;

  --ease: cubic-bezier(.22, .61, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
}
@media (max-width: 760px) { :root { --hd: 56px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--white); scroll-padding-top: calc(var(--hd) + 16px); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f); font-size: var(--t-body); line-height: 1.55; font-weight: 400;
  font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--white); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--black); color: var(--white); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); max-width: var(--maxw); margin-inline: auto; }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sec { padding-block: var(--sec); }
.sec + .sec:not(.sec-tone) { padding-top: 0; }
.sec-tone + .sec:not(.sec-tone) { padding-top: var(--sec); }
.sec-tone { background: var(--wall); }

/* ---------- type ---------- */
.title { font-size: var(--t-title); font-weight: 260; letter-spacing: -.045em; line-height: .94; }
.h1 { font-size: var(--t-h1); font-weight: 320; letter-spacing: -.032em; line-height: 1.04; }
.h2 { font-size: var(--t-h2); font-weight: 340; letter-spacing: -.028em; line-height: 1.06; }
.h3 { font-size: var(--t-h3); font-weight: 470; letter-spacing: -.012em; line-height: 1.22; }
.lead { font-size: var(--t-lead); line-height: 1.5; font-weight: 380; }
.small { font-size: var(--t-s); line-height: 1.5; }
.mute { color: var(--ink-2); }
.kick { font-size: var(--t-s); line-height: 1.4; color: var(--ink-2); }
.kick-dot::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--blue); margin-right: 10px; vertical-align: .08em; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; }

/* ---------- buttons and links ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border: 1px solid var(--black); background: var(--white);
  color: var(--black); text-decoration: none; font-size: var(--t-s); font-weight: 500; line-height: 1; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { background: var(--black); color: var(--white); }
.btn-blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--black); border-color: var(--black); }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-s); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; min-height: 0; padding: 10px 0 3px; }
.lnk:hover { color: var(--blue); }
.lnk svg { width: 12px; height: 12px; }

/* ---------- header ---------- */
.hd { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--hd); background: var(--white); view-transition-name: hd; transition: box-shadow .3s; }
.hd.scrolled { box-shadow: 0 1px 0 var(--line); }
.hd-in { height: 100%; align-items: center; }
.logo { grid-column: 1 / span 3; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 560; font-size: 1.0625rem; letter-spacing: -.01em; justify-self: start; min-height: 44px; }
.logo-mark { width: 13px; height: 13px; background: var(--blue); flex: none; }
.nav { grid-column: 5 / span 5; }
.nav ul { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.nav a { display: inline-block; padding: 12px 0; text-decoration: none; font-size: var(--t-s); font-weight: 450; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--blue); }
.hd-status { grid-column: 10 / span 3; justify-self: end; font-size: var(--t-label); color: var(--ink-2); display: flex; align-items: center; gap: 8px; text-align: right; }
.hd-status i { width: 7px; height: 7px; background: var(--line-2); flex: none; }
.hd-status.open i { background: var(--blue); }
.menu-btn { display: none; }
.menu { display: none; }
@media (max-width: 900px) {
  .nav, .hd-status { display: none; }
  .logo { grid-column: 1 / span 3; }
  .menu-btn { display: inline-flex; grid-column: -2 / -1; justify-self: end; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; font-size: var(--t-s); font-weight: 500; }
  .menu-btn span.bars { width: 18px; height: 8px; position: relative; }
  .menu-btn span.bars::before, .menu-btn span.bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .menu-btn span.bars::before { top: 0; } .menu-btn span.bars::after { bottom: 0; }
  .menu-btn[aria-expanded="true"] span.bars::before { transform: translateY(3.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span.bars::after { transform: translateY(-3.25px) rotate(-45deg); }
  .menu { display: block; position: fixed; z-index: 59; inset: var(--hd) 0 0 0; background: var(--white); padding: 24px var(--m) 96px; overflow-y: auto; }
  .menu[hidden] { display: none; }
  .menu ul { border-top: 1px solid var(--line); }
  .menu li { border-bottom: 1px solid var(--line); }
  .menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; text-decoration: none; font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 280; letter-spacing: -.035em; line-height: 1.1; }
  .menu nav a[aria-current="page"] { color: var(--blue); }
  .menu nav a small { font-size: var(--t-label); letter-spacing: 0; color: var(--ink-2); font-weight: 400; }
  .menu-info { margin-top: 28px; font-size: var(--t-s); color: var(--ink-2); display: grid; gap: 4px; }
}

main { padding-top: var(--hd); display: block; }

/* ---------- the wall (home) ---------- */
.wall { position: relative; height: calc(100svh - var(--hd)); min-height: 600px; max-height: 1200px; display: flex; flex-direction: column; background: var(--white); overflow: hidden; overflow: clip; }
.wall.is-loop .wall-stage { overflow: clip; }
.wall-top { width: 100%; padding-top: clamp(14px, 3.4vh, 44px); align-items: end; position: relative; z-index: 3; }
.wall-top h1 { grid-column: 1 / span 7; }
.wall-intro { grid-column: 9 / span 4; padding-bottom: 4px; }
.wall-intro p { font-size: var(--t-s); line-height: 1.5; max-width: 40ch; }
.wall-intro .btns { margin-top: 18px; }
.wall-stage { position: relative; flex: 1 1 auto; min-height: 0; touch-action: pan-y; }
.wall-canvas { position: absolute; left: 0; right: 0; top: -48px; bottom: -48px; width: 100%; height: calc(100% + 96px); pointer-events: none; z-index: 1; }
.floor { position: relative; z-index: 3; flex: none; height: clamp(76px, 10.5vh, 104px); background: var(--wall); }
.floor-in { height: 100%; align-items: center; }
.floor-now { grid-column: 5 / span 3; font-size: var(--t-label); line-height: 1.4; min-height: 2.8em; }
.floor-scale { grid-column: 8 / span 3; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.floor-scale i { display: block; width: calc(100 * var(--k)); height: 7px; border: 1px solid var(--black); border-top: 0; margin-bottom: 7px; position: relative; }
.floor-scale i::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 4px; background: var(--black); }
.floor-now b { font-weight: 560; }
.floor-now .mute { display: block; }
.floor-bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.floor-bar span { position: absolute; top: 0; left: 0; height: 2px; width: 8%; min-width: 40px; background: var(--blue); will-change: transform; }
.floor-arrows { grid-column: 11 / span 2; justify-self: end; display: flex; gap: 6px; }
.arrow { width: 48px; height: 48px; border: 1px solid var(--black); display: grid; place-items: center; background: var(--white); transition: background .2s, color .2s; }
.arrow:hover { background: var(--black); color: var(--white); }
.arrow svg { width: 16px; height: 16px; }

/* works on the wall: sizes are true relative size, set in centimetres (--cw, --ch) times px per cm (--k) */
.wall { --k: max(1.15px, min(2.4px, calc((100svh - 470px) / 165))); --lab: 0px; }
.wall-track { height: 100%; display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--m) 0;
  scroll-snap-type: x proximity; scrollbar-width: thin; }
.wall-track > li { flex: none; scroll-snap-align: center; position: relative; }
.wk { padding-bottom: 96px; }
.wk-btn { display: block; position: relative; width: calc(var(--cw) * var(--k)); height: calc(var(--ch) * var(--k)); min-width: 44px; min-height: 44px; cursor: zoom-in; }
.wk-btn img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; }
.lab { position: absolute; left: 0; top: calc(100% - 84px); width: max(100%, 132px); font-size: var(--t-label); line-height: 1.38; font-variant-numeric: tabular-nums; }
.lab p { margin: 0; }
.lab-a { color: var(--ink-2); }
.lab-t { font-weight: 560; }
.lab-m { color: var(--ink-2); }
.lab-p { margin-top: 3px !important; }
.lab-p.is-sold, .lab-p.is-res { display: flex; align-items: center; gap: 7px; }
.lab-p.is-sold::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--black); }
.lab-p.is-res::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--black); }
.wt { width: clamp(240px, 22vw, 360px); }
.wt-name { font-size: var(--t-wt); font-weight: 270; letter-spacing: -.04em; line-height: 1; }
.wt-note { margin-top: 14px; font-size: var(--t-s); line-height: 1.45; max-width: 30ch; }
.wt-meta { margin-top: 8px; font-size: var(--t-label); color: var(--ink-2); }
.wt .lnk { margin-top: 6px; }

/* loop mode (JS): items are placed by wall.js */
.wall.is-loop .wall-track { display: block; position: absolute; inset: 0; overflow: visible; padding: 0; scroll-snap-type: none; }
.wall.is-loop .wall-track > li { position: absolute; left: 0; top: 0; will-change: transform; }
.wall.is-loop .wk { padding-bottom: 0; }
.wall.is-loop .lab { top: auto; bottom: 0; left: calc(100% + 14px); width: 150px; }
.wall.is-loop.is-narrow .lab { left: 0; bottom: auto; top: calc(100% + 10px); width: max(100%, 128px); }
.wall.is-loop .wk-btn img { transition: opacity .3s; }
.wall.is-loop .wk.gl-on .wk-btn img { opacity: 0; }
.wall.is-grab .wall-stage { cursor: grab; }
.wall.is-dragging .wall-stage, .wall.is-dragging .wk-btn { cursor: grabbing; }
.wall-cursor { position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; width: 76px; height: 76px; border-radius: 50%;
  background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: var(--t-label); font-weight: 500; }
.how-m { display: none; }
@media (max-width: 760px), (hover: none) { .how-d { display: none; } .how-m { display: inline; } }

@media (max-width: 1100px) {
  .wall-top h1 { grid-column: 1 / span 7; }
  .wall-intro { grid-column: 8 / span 5; }
}
@media (max-width: 760px) {
  .wall { height: auto; min-height: calc(100svh - var(--hd)); max-height: none; }
  .wall-top { padding-top: 18px; }
  .wall-top h1 { grid-column: 1 / -1; font-size: clamp(1.85rem, 8.2vw, 2.25rem); }
  .wall-intro { grid-column: 1 / -1; margin-top: 12px; }
  .wall-intro .btns { margin-top: 16px; }
  .wall-intro .btn { flex: 1 1 0; justify-content: center; padding: 0 12px; }
  .wall-stage { min-height: 380px; }
  .floor { height: 112px; }
  .floor-in { align-items: start; padding-top: 14px; }
  .floor-now { grid-column: 1 / span 3; }
  .floor-scale { display: none; }
  .floor-arrows { grid-column: 4 / span 1; }
  .wall-intro .btn { white-space: nowrap; }
  .wall-intro .btn svg { display: none; }
  .wall.is-narrow .wt { width: 158px; }
  .wall.is-narrow .wt-name { font-size: 1.75rem; }
  .wall.is-narrow .wt-note { display: none; }
  .wall .wt-meta { margin-top: 10px; }
  .vs-map { display: none; }
  .vt-map { overflow-x: auto; }
  .vt-map .map { min-width: 520px; }
  .vt-map figcaption { position: sticky; left: 0; }
  .hang-wall { height: calc(150 * var(--k) + 12px); }
  .arrow { width: 44px; height: 44px; }
}

/* ---------- home sections ---------- */
.now-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--black); }
.now-head .kick { grid-column: 1 / span 3; padding-bottom: .6em; }
.now-head h2 { grid-column: 4 / -1; }
.now-head h2 span { display: block; color: var(--ink-2); }
.now-fig { grid-column: 1 / span 6; margin-top: clamp(32px, 4vw, 56px); }
.now-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cap { margin-top: 10px; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); max-width: 52ch; }
.now-text { grid-column: 8 / span 5; margin-top: clamp(32px, 4vw, 56px); }
.now-text .lead + p { margin-top: 1em; }
.facts { margin-top: 28px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--t-s); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }
.now-text .btns { margin-top: 28px; }

.six-head { grid-column: 1 / span 7; }
.six-head + p { grid-column: 9 / span 4; align-self: end; }
.hang { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(40px, 5vw, 72px); --k: clamp(1.15px, .14vw + .9px, 2.1px); }
.hang-item { display: flex; flex-direction: column; text-decoration: none; }
.hang-wall { height: calc(150 * var(--k) + 24px); display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--black); }
.hang-wall img { width: calc(var(--cw) * var(--k)); height: calc(var(--ch) * var(--k)); object-fit: cover; outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; transition: transform .6s var(--ease); }
.hang-item:hover .hang-wall img { transform: translateY(-6px); }
.hang-item h3 { margin-top: 16px; font-size: var(--t-h3); font-weight: 420; letter-spacing: -.015em; line-height: 1.2; }
.hang-item:hover h3 { color: var(--blue); }
.hang-item p { margin-top: 6px; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }

.buy-head { grid-column: 1 / span 4; }
.buy-head p { margin-top: 20px; max-width: 40ch; }
.lk { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.lk-card { grid-column: 1 / span 3; background: var(--white); padding: clamp(18px, 2vw, 28px); font-size: clamp(1.05rem, .8rem + .55vw, 1.4rem); line-height: 1.45; font-variant-numeric: tabular-nums; }
.lk-card p { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.lk-card p span, .lk-card p b { min-width: 0; }
.lk-card p:first-child span, .lk-card .m span { color: var(--ink-2); }
.lk-card b { font-weight: 560; }
.lk i, .lk-notes i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 600; line-height: 1; }
.lk-notes { grid-column: 4 / span 4; }
.lk-notes ol { margin-top: 14px; border-top: 1px solid var(--black); }
.lk-notes li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-s); line-height: 1.45; }
.lk-notes li i { transform: translateY(3px); }
.lk-notes b { font-weight: 560; }
.buy-list { grid-column: 1 / -1; margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; }
.buy-list li { border-top: 1px solid var(--black); padding-top: 14px; }
.buy-list h3 { font-size: var(--t-h3); font-weight: 470; letter-spacing: -.012em; }
.buy-list p { margin-top: 8px; font-size: var(--t-s); line-height: 1.5; }

.jr-head { grid-column: 1 / span 8; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.jr-head-r { grid-column: 9 / span 4; justify-self: end; align-self: end; }
.jr-rows { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--black); }
.jr-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.jr-row .d, .jr-row .by { font-size: var(--t-label); color: var(--ink-2); padding-top: .7em; font-variant-numeric: tabular-nums; }
.jr-row .d { grid-column: 1 / span 2; }
.jr-row .t { grid-column: 3 / span 6; }
.jr-row .t b { display: block; font-size: var(--t-h2); font-weight: 290; letter-spacing: -.032em; line-height: 1.06; transition: color .25s; }
.jr-row .t span { display: block; margin-top: 10px; font-size: var(--t-s); line-height: 1.5; max-width: 50ch; }
.jr-row .by { grid-column: 9 / span 2; }
.jr-row .th { grid-column: 11 / span 2; overflow: hidden; background: var(--wall); }
.jr-row .th img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.jr-row:hover .t b { color: var(--blue); }
.jr-row:hover .th img { transform: scale(1.05); }
.jr-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(32px, 4vw, 56px); }
.jr-card { text-decoration: none; display: block; }
.jr-card .ph { overflow: hidden; background: var(--wall); }
.jr-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.jr-card:hover img { transform: scale(1.03); }
.jr-card .meta { margin-top: 14px; font-size: var(--t-label); color: var(--ink-2); }
.jr-card h3 { margin-top: 6px; font-size: var(--t-h3); font-weight: 450; letter-spacing: -.015em; line-height: 1.2; }
.jr-card:hover h3 { color: var(--blue); }
.jr-card p { margin-top: 8px; font-size: var(--t-s); line-height: 1.5; }

.vs-a { grid-column: 1 / span 4; }
.vs-a p { margin-top: 18px; }
.vs-a .btns { margin-top: 24px; }
.vs-hours { grid-column: 6 / span 3; }
.vs-map { grid-column: 9 / span 4; }
.hours { font-size: var(--t-s); border-top: 1px solid var(--black); }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.hours li.today { font-weight: 560; }
.hours li.today span:first-child::after { content: 'Today'; margin-left: 10px; font-size: var(--t-xs); font-weight: 500; color: var(--white); background: var(--blue); padding: 2px 6px 3px; vertical-align: .1em; }
.hours .off { color: var(--ink-2); }
.map { width: 100%; height: auto; display: block; }
.map text { font-family: var(--f); font-size: 11.5px; fill: var(--black); }
.map .t-mute { fill: #595959; }
.map .t-blue { fill: var(--blue); font-weight: 600; }

@media (max-width: 1100px) {
  .hang { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; --k: 1.55px; }
  .buy-head { grid-column: 1 / -1; }
  .lk { grid-column: 1 / -1; margin-top: 40px; }
  .buy-list { grid-template-columns: 1fr 1fr; }
  .vs-a { grid-column: 1 / -1; }
  .vs-hours { grid-column: 1 / span 5; margin-top: 40px; }
  .vs-map { grid-column: 7 / span 6; margin-top: 40px; }
}
@media (max-width: 760px) {
  .now-head .kick, .now-head h2 { grid-column: 1 / -1; }
  .now-fig, .now-text { grid-column: 1 / -1; }
  .now-text { margin-top: 28px; }
  .facts div { grid-template-columns: 7.5em 1fr; }
  .six-head, .six-head + p { grid-column: 1 / -1; }
  .six-head + p { margin-top: 16px; }
  .hang { display: flex; overflow-x: auto; gap: 22px; --k: 1.05px; margin-inline: calc(var(--m) * -1); padding: 0 var(--m) 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hang::-webkit-scrollbar { display: none; }
  .hang-item { flex: 0 0 152px; scroll-snap-align: start; }
  .hang-item h3 { font-size: 1.125rem; }
  .buy-list { grid-template-columns: 1fr; row-gap: 24px; }
  .lk { grid-template-columns: 1fr; row-gap: 28px; }
  .lk-card, .lk-notes { grid-column: 1 / -1; }
  .jr-head, .jr-head-r { grid-column: 1 / -1; justify-self: start; }
  .jr-list { grid-template-columns: 1fr; row-gap: 40px; }
  .jr-row { grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .jr-row .th { grid-column: 1; grid-row: 1 / span 3; }
  .jr-row .d, .jr-row .t, .jr-row .by { grid-column: 2; padding-top: 0; }
  .jr-row .t b { font-size: 1.4rem; }
  .jr-row .t span { display: none; }
  .jr-card img { aspect-ratio: 3 / 2; }
  .vs-hours, .vs-map { grid-column: 1 / -1; }
}

/* ---------- inner page heads ---------- */
.ph-head { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(40px, 5vw, 72px); }
.ph-head h1 { grid-column: 1 / span 9; }
.ph-head .lead { grid-column: 1 / span 6; margin-top: 24px; max-width: 52ch; }
.ph-head .ph-side { grid-column: 9 / span 4; margin-top: 24px; align-self: end; font-size: var(--t-s); color: var(--ink-2); }
@media (max-width: 760px) {
  .ph-head h1, .ph-head .lead, .ph-head .ph-side { grid-column: 1 / -1; }
  .ph-head .ph-side { margin-top: 16px; }
}

/* ---------- exhibitions: the stacked index ---------- */
.ex-group { padding-bottom: var(--sec); }
.ex-group:last-of-type { padding-bottom: calc(var(--sec) * .75); }
.ex-gh { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--black); font-size: var(--t-s); }
.ex-gh h2 { font-size: var(--t-s); font-weight: 560; letter-spacing: 0; }
.ex-gh span { color: var(--ink-2); }
.ex-list { grid-column: 1 / -1; }
.ex-row { border-bottom: 1px solid var(--line-2); }
.ex-toggle { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; text-align: left; padding: clamp(18px, 2.2vw, 30px) 0 clamp(16px, 2vw, 26px); }
.ex-dates { grid-column: 1 / span 2; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; align-self: start; padding-top: .5em; }
.ex-title { grid-column: 3 / span 7; font-size: clamp(2.1rem, .9rem + 4.2vw, 5.75rem); font-weight: 250; letter-spacing: -.045em; line-height: .98; transition: font-weight .45s var(--ease), color .3s; font-variation-settings: normal; }
.ex-title small { display: block; font-size: var(--t-lead); letter-spacing: -.005em; font-weight: 400; line-height: 1.4; margin-top: 10px; color: var(--ink-2); }
.ex-row.is-current .ex-title { font-size: var(--t-title); grid-column: 3 / span 9; }
.ex-mini { grid-column: 10 / span 2; justify-self: end; align-self: center; display: flex; align-items: center; gap: 12px; --k: .66px; height: calc(150 * var(--k)); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.exm { display: block; width: calc(var(--cw) * var(--k)); height: calc(var(--ch) * var(--k)); }
.exm img, .ex-mini.photo img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; }
.ex-mini.photo img { width: 112px; height: 75px; }
.ex-toggle:hover .ex-mini { transform: translateX(-8px); }
.ex-toggle[aria-expanded="true"] .ex-mini { opacity: 0; }
.ex-row.is-current .ex-mini { display: none; }
.ex-toggle:hover .ex-title { font-weight: 360; }
.ex-plus { grid-column: 12 / span 1; justify-self: end; align-self: start; width: 44px; height: 44px; border: 1px solid var(--black); position: relative; margin-top: .3em; transition: background .25s, color .25s; }
.ex-plus::before, .ex-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; transition: transform .4s var(--ease); }
.ex-plus::after { transform: rotate(90deg); }
.ex-toggle[aria-expanded="true"] .ex-plus { background: var(--black); color: var(--white); }
.ex-toggle[aria-expanded="true"] .ex-plus::after { transform: rotate(0); }
.ex-toggle:hover .ex-plus { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ex-panel { overflow: hidden; }
.ex-panel-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-bottom: clamp(40px, 5vw, 72px); }
.ex-text { grid-column: 3 / span 4; }
.ex-text p { font-size: var(--t-s); line-height: 1.55; }
.ex-text p + p { margin-top: .9em; }
.ex-text .facts { margin-top: 22px; }
.ex-text .facts div { grid-template-columns: 7em 1fr; }
.ex-text .btns { margin-top: 22px; }
.ex-hang { grid-column: 7 / span 6; align-self: start; }
.ex-hang.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hang-row { --k: 1.6px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px clamp(20px, 2.2vw, 36px); }
.js .hang-row { flex-wrap: nowrap; }
.mini { flex: none; width: max(calc(var(--cw) * var(--k)), 124px); }
.mini-wall { height: calc(var(--maxh) * var(--k)); display: flex; align-items: center; border-bottom: 0; }
.mini .wk-btn { width: calc(var(--cw) * var(--k)); height: calc(var(--ch) * var(--k)); min-width: 12px; min-height: 12px; }
.mini .wk-btn img { transition: transform .5s var(--ease); }
.mini .wk-btn:hover img { transform: translateY(-4px); }
.mini .lab { position: static; width: 100%; margin-top: 14px; }
@media (max-width: 1100px) {
  .ex-text { grid-column: 3 / span 10; }
  .ex-hang { grid-column: 3 / span 10; margin-top: 32px; }
}
@media (max-width: 760px) {
  .ex-toggle { grid-template-columns: 1fr 44px; row-gap: 8px; }
  .ex-dates { grid-column: 1 / 2; grid-row: 1; padding-top: 0; }
  .ex-title { grid-column: 1 / 2; grid-row: 2; font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .ex-row.is-current .ex-title { font-size: clamp(2.6rem, 12vw, 3.2rem); }
  .ex-plus { grid-column: 2 / 3; grid-row: 1 / span 2; margin-top: 0; }
  .ex-mini { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; --k: .5px; }
  .ex-toggle[aria-expanded="true"] .ex-mini { display: none; }
  .ex-panel-in { grid-template-columns: minmax(0, 1fr); }
  .ex-row.is-current .ex-title { grid-column: 1 / 2; }
  .ex-text, .ex-hang { grid-column: 1 / -1; }
  .ex-hang { margin-top: 28px; }
}

@media (max-width: 760px) {
  .hang-row, .js .hang-row { --k: 1.3px; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--m) * -1); padding: 4px var(--m) 12px; gap: 22px;
    scroll-snap-type: x proximity; scrollbar-width: none; }
  .hang-row::-webkit-scrollbar { display: none; }
  .mini { scroll-snap-align: start; }
}

/* ---------- artists ---------- */
.ar-index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); border-top: 1px solid var(--black); }
.ar-index a { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.ar-th { flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.ar-th img { max-width: 64px; max-height: 64px; width: auto; height: auto; object-fit: contain; transition: transform .5s var(--ease); }
.ar-index a:hover .ar-th img { transform: scale(1.08); }
.ar-index b { display: block; font-size: var(--t-h2); font-weight: 280; letter-spacing: -.035em; line-height: 1.05; transition: color .25s, font-weight .4s var(--ease); }
.ar-index span { display: block; margin-top: 6px; font-size: var(--t-label); color: var(--ink-2); }
.ar-index a:hover b { color: var(--blue); font-weight: 380; }
.collective { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.collective figure { grid-column: 1 / span 4; }
.collective figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.collective-text { grid-column: 7 / span 6; align-self: center; }
.collective-text .h2 { margin-bottom: 24px; }
.collective-text ul { margin-top: 28px; border-top: 1px solid var(--black); }
.collective-text li { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-s); }
.artist { border-top: 1px solid var(--black); padding-top: clamp(28px, 3vw, 44px); }
.artist + .artist { margin-top: var(--sec); }
.artists-list { padding-bottom: var(--sec); }
.posts { padding-bottom: var(--sec); }
.ph-head + .sec { padding-top: 0; }
.vt-now { margin: -6px 0 14px; }
.artist-in { row-gap: 0; }
.artist-meta { grid-column: 1 / span 4; }
.artist-meta .title { font-size: clamp(2.6rem, 1rem + 4.3vw, 6rem); }
.artist-meta p { margin-top: 16px; font-size: var(--t-s); color: var(--ink-2); max-width: 30ch; }
.artist-meta .medium { color: var(--ink); font-weight: 500; margin-top: 20px; }
.artist-meta .btns { margin-top: 22px; }
.artist-body { grid-column: 6 / span 7; }
.artist-body .statement p { font-size: var(--t-lead); line-height: 1.5; font-weight: 380; max-width: 46ch; }
.artist-body .statement p + p { margin-top: 1em; }
.artist-hang { margin-top: 28px; }
.artist-hang-h { margin-top: clamp(36px, 4vw, 56px); font-size: var(--t-s); font-weight: 560; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
@media (max-width: 1100px) {
  .artist-meta { grid-column: 1 / -1; }
  .artist-body { grid-column: 1 / -1; margin-top: 28px; }
  .ar-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ar-index { grid-template-columns: 1fr; }
  .collective figure, .collective-text { grid-column: 1 / -1; }
  .collective-text { margin-top: 28px; }

}

/* ---------- journal ---------- */
.jr-index { grid-column: 1 / -1; border-top: 1px solid var(--black); }
.jr-index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding: 18px 0 20px; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.jr-index .d { grid-column: 1 / span 2; font-size: var(--t-label); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jr-index b { grid-column: 3 / span 7; font-size: var(--t-h2); font-weight: 290; letter-spacing: -.032em; line-height: 1.06; transition: color .25s; }
.jr-index .by { grid-column: 10 / span 3; justify-self: end; font-size: var(--t-label); color: var(--ink-2); text-align: right; }
.jr-index a:hover b { color: var(--blue); }
.post { padding-top: var(--sec); }
.post + .post { border-top: 0; }
.post-in { border-top: 1px solid var(--black); padding-top: clamp(24px, 3vw, 40px); }
.post-meta { grid-column: 1 / span 3; font-size: var(--t-label); color: var(--ink-2); line-height: 1.5; }
.post-meta b { color: var(--ink); font-weight: 560; display: block; }
.post-head { grid-column: 4 / span 8; }
.post-fig { grid-column: 4 / span 5; margin-top: 32px; }
.post-fig img { width: 100%; object-fit: cover; }
.post-body { grid-column: 4 / span 6; margin-top: 32px; }
.post-body p { font-size: var(--t-body); line-height: 1.62; }
.post-body p:first-child { font-size: var(--t-lead); line-height: 1.5; }
.post-fig + .post-body { grid-column: 9 / span 4; margin-top: 32px; padding-left: clamp(0px, 1.2vw, 20px); }
.post.wide .post-fig { grid-column: 4 / span 9; }
.post.wide .post-body { grid-column: 4 / span 6; }
@media (max-width: 1100px) {
  .post-fig + .post-body { grid-column: 4 / span 9; }
  .post-fig { grid-column: 4 / span 9; }
}
@media (max-width: 760px) {
  .jr-index a { grid-template-columns: 1fr; row-gap: 6px; }
  .jr-index .d, .jr-index b, .jr-index .by { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .jr-index b { font-size: 1.75rem; }
  .post-meta, .post-head, .post-fig, .post-body, .post-fig + .post-body, .post.wide .post-fig, .post.wide .post-body { grid-column: 1 / -1; }
  .post-head { margin-top: 14px; }
  .post-fig, .post-body, .post-fig + .post-body { margin-top: 24px; }
}

/* ---------- visit ---------- */
.vt-hours { grid-column: 1 / span 4; }
.vt-hours .h3, .vt-where .h3, .vt-acc .h3 { margin-bottom: 16px; }
.vt-where { grid-column: 6 / span 7; }
.vt-where .where-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-bottom: 28px; font-size: var(--t-s); }
.vt-where .where-text p + p { margin-top: .6em; }
.vt-map { border: 1px solid var(--black); background: var(--white); }
.vt-map figcaption { padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: var(--t-label); color: var(--ink-2); }
.vt-rooms { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.vt-rooms figure:nth-child(1) { grid-column: 1 / span 4; }
.vt-rooms figure:nth-child(2) { grid-column: 5 / span 4; margin-top: clamp(40px, 6vw, 96px); }
.vt-rooms .vt-rooms-text { grid-column: 10 / span 3; align-self: end; }
.vt-rooms img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vt-acc { grid-column: 1 / span 5; }
.vt-acc ul { border-top: 1px solid var(--black); }
.vt-acc li { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-s); }
.vt-forms { grid-column: 7 / span 6; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--g); }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--t-label); font-weight: 500; margin-bottom: 6px; }
.field label span { color: var(--ink-2); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); padding: 12px 14px; font-size: 1rem; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: var(--t-label); color: var(--ink-2); max-width: 38ch; }
.form-done { grid-column: 1 / -1; padding: 16px 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); font-size: var(--t-s); }
.form-done b { font-weight: 560; }
.news { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--black); }
.news .form { grid-template-columns: 1fr auto; align-items: end; margin-top: 18px; }
.news .form-foot { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .vt-hours { grid-column: 1 / span 5; }
  .vt-where { grid-column: 7 / span 6; }
  .vt-where .where-text { grid-template-columns: 1fr; }
  .vt-acc { grid-column: 1 / -1; }
  .vt-forms { grid-column: 1 / -1; margin-top: var(--sec); }
}
@media (max-width: 760px) {
  .vt-hours, .vt-where { grid-column: 1 / -1; }
  .vt-where { margin-top: 48px; }
  .vt-rooms, .collective { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-rooms figure:nth-child(1) { grid-column: 1 / span 2; }
  .vt-rooms figure:nth-child(2) { grid-column: 3 / span 2; margin-top: 56px; }
  .vt-rooms .vt-rooms-text { grid-column: 1 / -1; margin-top: 24px; }
  .form, .news .form { grid-template-columns: 1fr; }
}

/* ---------- viewer (a work full screen) ---------- */
.viewer { position: fixed; inset: 0; z-index: 120; background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 420px); }
.viewer[hidden] { display: none; }
.viewer:focus { outline: none; }
.vw-stage { position: relative; display: grid; place-items: center; padding: clamp(24px, 5vh, 64px) clamp(20px, 4vw, 72px); min-height: 0; }
.vw-img { display: block; outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; transform-origin: 0 0; max-width: none; }
.vw-side { border-left: 1px solid var(--line); padding: calc(var(--hd) + 8px) clamp(20px, 2.4vw, 36px) 96px; overflow-y: auto; display: flex; flex-direction: column; }
.vw-count { font-size: var(--t-label); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vw-title { margin-top: 14px; font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; }
.vw-artist { margin-top: 10px; font-size: var(--t-s); }
.vw-artist a { font-weight: 500; }
.vw-facts { margin-top: 24px; border-top: 1px solid var(--black); font-size: var(--t-s); }
.vw-facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.vw-facts dt { color: var(--ink-2); }
.vw-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.vw-ask { margin-top: 24px; align-self: flex-start; }
.vw-form { margin-top: 18px; display: grid; gap: 12px; }
.vw-side .form-done { margin-top: 24px; }
.vw-form .field textarea { min-height: 104px; }
.vw-nav { margin-top: auto; padding-top: 28px; display: flex; gap: 6px; }
.vw-nav .arrow { width: auto; padding: 0 16px; gap: 10px; display: inline-flex; align-items: center; font-size: var(--t-s); font-weight: 500; }
.vw-close { position: absolute; top: 10px; right: clamp(12px, 2vw, 28px); min-height: 44px; padding: 0 4px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-s); font-weight: 500; z-index: 2; }
.vw-close svg { width: 16px; height: 16px; }
.vw-close:hover { color: var(--blue); }
@media (max-width: 860px) {
  .viewer { grid-template-columns: 1fr; grid-template-rows: 58svh auto; overflow-y: auto; }
  .vw-stage { padding: 56px 20px 16px; }
  .vw-side { border-left: 0; border-top: 1px solid var(--line); padding: 20px var(--m) 96px; overflow: visible; }
  .vw-nav { margin-top: 28px; }
}
html.vw-open { overflow: hidden; }

/* ---------- footer ---------- */
.ft { background: var(--black); color: var(--white); padding-top: clamp(40px, 4vw, 64px); padding-bottom: 104px; }
.ft-now { margin-bottom: clamp(48px, 5vw, 80px); }
.ft-line { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding: 14px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ft-line span { grid-column: 1 / span 2; font-size: var(--t-label); color: #BDBDBD; }
.ft-line a { grid-column: 3 / -1; font-size: var(--t-h2); font-weight: 280; letter-spacing: -.03em; line-height: 1.08; }
.ft-line a:hover { text-decoration: none; color: #A9AEFF; }
.ft a { text-decoration: none; }
.ft a:hover { text-decoration: underline; }
.ft-a { grid-column: 1 / span 4; }
.ft-a .logo { color: var(--white); }
.ft-a p { margin-top: 16px; font-size: var(--t-s); color: #BDBDBD; max-width: 34ch; }
.ft-col { font-size: var(--t-s); line-height: 1.6; }
.ft-col h2 { font-size: var(--t-label); font-weight: 500; color: #BDBDBD; margin-bottom: 12px; }
.ft-b { grid-column: 5 / span 3; }
.ft-c { grid-column: 8 / span 3; }
.ft-d { grid-column: 11 / span 2; }
.ft-c li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.ft-notes { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); align-items: start; }
.ft-cred { grid-column: 1 / span 8; font-size: var(--t-label); color: #BDBDBD; }
.ft-cred summary { cursor: pointer; color: var(--white); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.ft-cred p { margin-top: 8px; max-width: 80ch; }
.ft-small { grid-column: 9 / span 4; justify-self: end; font-size: var(--t-label); color: #BDBDBD; padding-top: 12px; }
@media (max-width: 1100px) {
  .ft-a { grid-column: 1 / -1; margin-bottom: 40px; }
  .ft-b { grid-column: 1 / span 4; } .ft-c { grid-column: 5 / span 4; } .ft-d { grid-column: 9 / span 4; }
}
@media (max-width: 760px) {
  .ft-b, .ft-c, .ft-d { grid-column: 1 / -1; margin-bottom: 32px; }
  .ft-cred, .ft-small { grid-column: 1 / -1; justify-self: start; }
  .ft-d ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .ft-line { grid-template-columns: 1fr; row-gap: 4px; }
  .ft-line span, .ft-line a { grid-column: 1; }
  .ft-line a { font-size: 1.5rem; }
  .ft-c ul { max-width: 260px; }
}

/* ---------- motion (only with JS and when motion is allowed) ---------- */
.js.motion [data-in] { opacity: 0; transform: translateY(18px); }
.js.motion [data-in].in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease); }
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .34s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .56s var(--ease) .06s both; }
::view-transition-group(hd) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-26px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(26px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print { .hd, .floor, .viewer { display: none; } }