/* ============================================================
   GALIS COLLECTIONS — Kiosk design tokens & layout
   1920×1080 frame · 1440 content container · 240px margins
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap');

/* ---- Palette: Warm paper (default) ---- */
:root {
  --paper:      #f4f2ec;
  --paper-2:    #ebe7dd;
  --ink:        #1d1b16;
  --ink-soft:   #6c675c;
  --ink-faint:  #9a948700;
  --hairline:   rgba(29,27,22,0.16);
  --hairline-2: rgba(29,27,22,0.08);
  --accent:     oklch(0.50 0.055 52);   /* restrained sienna */
  --mat:        #efece4;                /* image mat */

  --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, 'Roboto Mono', monospace;

  --container: 1440px;
  /* Fluid horizontal margin: exactly the designed 240px at the 1920 kiosk
     reference width (12.5vw == 240px @1920), shrinking gracefully on
     narrower / non-16:9 laptops so content fills the width without bands. */
  --margin: clamp(40px, 12.5vw, 240px);

  --t-slow: 640ms;
  --t-med:  420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Cool white ---- */
:root[data-palette="cool"] {
  --paper:    #ffffff;
  --paper-2:  #f2f2f0;
  --ink:      #15140f00;
  --ink:      #141413;
  --ink-soft: #87867f;
  --hairline: rgba(0,0,0,0.13);
  --hairline-2: rgba(0,0,0,0.06);
  --mat:      #f6f6f4;
  --accent:   oklch(0.50 0.05 250);     /* quiet slate-blue */
}

/* ---- Dark gallery wall ---- */
:root[data-palette="dark"] {
  --paper:    #17150f;
  --paper-2:  #211e16;
  --ink:      #efe9dc;
  --ink-soft: #9b9484;
  --hairline: rgba(239,233,220,0.16);
  --hairline-2: rgba(239,233,220,0.07);
  --mat:      #221f17;
  --accent:   oklch(0.68 0.07 60);
}

/* ---- High contrast accessibility mode ---- */
:root[data-contrast="on"] {
  --ink: #000000;
  --ink-soft: #2a2a2a;
  --hairline: rgba(0,0,0,0.5);
  --hairline-2: rgba(0,0,0,0.25);
}
:root[data-contrast="on"][data-palette="dark"] {
  --ink: #ffffff;
  --ink-soft: #dad6cb;
  --hairline: rgba(255,255,255,0.55);
}

/* ---- Type voice variants ---- */
:root[data-type="sans"]  { --serif: var(--sans); }
:root[data-type="serif"] { --sans: var(--serif); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ============================================================
   Scaling stage
   ============================================================ */
#viewport {
  position: fixed; inset: 0;
  background: var(--paper);
  overflow: hidden;
}
/* Fluid stage: fills 100% of whatever viewport it runs in.
   1920×1080 is the design reference, not a hard lock — there is no
   scale() transform and no letterbox. Horizontal rhythm scales via the
   fluid --margin token; vertical content reflows in each screen's
   flex-column body (fixed-height chrome + flex:1 scroll region). */
#stage {
  position: relative;
  width: 100%; height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

/* ============================================================
   Screen layers + ambient transition
   ============================================================ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
  pointer-events: none;
}
.screen.is-active {
  opacity: 1; visibility: visible;
  pointer-events: auto;
}
.screen-inner {
  transform: translateY(14px);
}
.screen.is-active .screen-inner {
  animation: screen-rise var(--t-slow) var(--ease) both;
}
@keyframes screen-rise {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}

:root[data-motion="off"] .screen,
:root[data-motion="off"] .screen-inner { transition: none !important; }
:root[data-motion="off"] .screen-inner { transform: translateY(0); }
:root[data-motion="off"] .screen.is-active .screen-inner { animation: none; }

/* full-height, bottom-anchored screens must not translate (would clip the foot) */
.screen[data-screen-label="detail"] .screen-inner,
.screen[data-screen-label="selection"] .screen-inner,
.screen[data-screen-label="compare"] .screen-inner {
  transform: none;
  animation: none;
}

/* ============================================================
   Shared chrome
   ============================================================ */
.label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.hairline { background: var(--hairline); height: 1px; border: 0; width: 100%; }

/* Top bar — 3 columns: side · wordmark · side */
.topbar {
  height: 132px; flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--margin);
  border-bottom: 1px solid var(--hairline);
}
.bar-side { display: flex; align-items: center; gap: 8px; }
.bar-left { justify-content: flex-start; }
.bar-right { justify-content: flex-end; gap: 14px; }
.bar-mark {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.42em;
  font-size: 19px; font-weight: 500; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 8px 12px;
  text-indent: 0.42em;
}
.ctl-search svg { display: block; }

/* Tap-friendly ghost control */
.ctl {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  min-height: 56px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color var(--t-med) var(--ease);
}
.ctl:hover { color: var(--ink); }

/* language toggle */
.lang { display: inline-flex; align-items: center; min-height: 56px; }
.lang button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); padding: 8px 12px; min-height: 44px;
  transition: color var(--t-med) var(--ease);
}
.lang button[aria-pressed="true"] { color: var(--ink); }
.lang .sep { color: var(--hairline); }

/* ============================================================
   BROWSE screen
   ============================================================ */
.browse-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.browse-scroll::-webkit-scrollbar { width: 6px; }
.browse-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

.collection-head {
  padding: 96px var(--margin) 0;
}
.collection-head .eyebrow { margin-bottom: 26px; }
.collection-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 86px; line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
  max-width: 1100px;
  text-wrap: balance;
}
.collection-head .lede {
  margin: 30px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 25px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
}

/* filter row */
.filters {
  display: flex; align-items: center; gap: 6px;
  padding: 56px var(--margin) 0;
  flex-wrap: wrap;
}
.filter {
  font-family: var(--sans);
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  min-height: 52px; padding: 0 22px;
  position: relative;
  transition: color var(--t-med) var(--ease);
}
.filter:first-child { padding-left: 0; }
.filter[aria-pressed="true"] { color: var(--ink); }
.filter[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 8px;
  height: 1px; background: var(--accent);
}
.filter:first-child[aria-pressed="true"]::after { left: 0; }
.filter .count {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.05em; vertical-align: super;
  margin-left: 6px; opacity: 0.7;
}

/* masonry grid */
.grid {
  padding: 64px var(--margin) 140px;
  column-count: 3;
  column-gap: 64px;
}
.card {
  break-inside: avoid;
  margin-bottom: 78px;
  cursor: pointer;
  display: block; width: 100%;
  text-align: left; background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
}
.card-img {
  position: relative; width: 100%;
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: transform var(--t-med) var(--ease);
}
.card-img::before {
  /* faint loading tooth, sits behind the image */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, var(--hairline-2) 9px 10px);
  opacity: 0.5; pointer-events: none;
}
.card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.card-img img.loaded { opacity: 1; }
:root[data-motion="off"] .card-img img { transition: none; }
.card:hover .card-img { transform: translateY(-4px); }
.card-meta { padding-top: 22px; }
.card-meta .ctitle {
  font-family: var(--serif); font-weight: 500;
  font-size: 27px; line-height: 1.12; color: var(--ink);
  margin: 0;
}
.card-meta .corig {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--ink-soft); margin: 6px 0 0;
}
.card-meta .cline {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink-soft); margin: 14px 0 0;
}
.card-meta .cacc {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-soft); opacity: 0.6; margin: 8px 0 0;
}

/* ============================================================
   DETAIL screen
   ============================================================ */
.detail-top {
  height: 132px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
  border-bottom: 1px solid var(--hairline);
}
.back {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  min-height: 56px; display: inline-flex; align-items: center; gap: 14px;
  transition: color var(--t-med) var(--ease);
}
.back:hover { color: var(--ink); }
.back .arrow { font-size: 18px; line-height: 1; }

.detail-body {
  flex: 1; display: grid;
  grid-template-columns: 1fr 520px;
  min-height: 0;
}
.detail-figure-col {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  border-right: 1px solid var(--hairline);
  background: var(--mat);
}
.detail-figure {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 44px 110px 96px;
}
.figure-mount {
  position: relative;
  background: var(--paper);
  padding: 30px;
  box-shadow: 0 1px 0 var(--hairline), 0 44px 90px -55px rgba(0,0,0,0.55);
  outline: 1px solid var(--hairline);
  max-width: 100%; max-height: 100%;
  display: flex;
}
.figure-mount img {
  display: block;
  max-width: 100%;
  max-height: 600px;
  width: auto; height: auto;
  object-fit: contain;
  cursor: zoom-in;
}
.figure-cap {
  position: absolute; left: 110px; bottom: 46px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); opacity: 0.7;
}

.detail-text {
  padding: 96px 90px 60px 80px;
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin;
}
.detail-text::-webkit-scrollbar { width: 6px; }
.detail-text::-webkit-scrollbar-thumb { background: var(--hairline); }
.detail-text .cat { margin-bottom: 28px; }
.detail-text h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: 56px; line-height: 1.02; letter-spacing: -0.01em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.detail-text .orig {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--ink-soft); margin: 16px 0 0;
}
.detail-text .maker {
  font-family: var(--sans); font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink); margin: 26px 0 0;
}

.meta {
  margin: 44px 0 0; padding: 36px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: auto 1fr;
  gap: 18px 40px;
}
.meta dt {
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11px; font-weight: 500;
  color: var(--ink-soft); padding-top: 3px; white-space: nowrap;
}
.meta dd {
  margin: 0; font-family: var(--serif); font-size: 19px;
  line-height: 1.35; color: var(--ink);
}
.meta dd .mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; }

.descr {
  margin: 40px 0 0; padding: 36px 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-size: 21px; line-height: 1.62;
  color: var(--ink);
}

/* navigation under the artwork — always visible, large touch targets */
.figure-nav {
  position: absolute; left: 110px; right: 110px; bottom: 38px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  pointer-events: none;
}
.figure-nav .navbtn {
  pointer-events: auto;
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft);
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.figure-nav .navbtn .gl { font-family: var(--sans); font-size: 22px; line-height: 1; }
.figure-nav .navbtn:hover { color: var(--ink); border-color: var(--ink-soft); }
.figure-nav .idx {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--ink-soft); min-width: 78px; text-align: center;
}

/* fade for detail content swap (prev/next) */
.detail-fade { transition: opacity var(--t-med) var(--ease); }
.detail-fade.swapping { opacity: 0; }
:root[data-motion="off"] .detail-fade { transition: none; }

/* Actions on the artwork — Save (primary) + Enlarge, bottom-right of the figure */
.figure-actions {
  position: absolute; right: 110px; bottom: 44px;
  display: flex; align-items: center; gap: 14px;
}
.save-wrap { position: relative; display: flex; }
.figure-zoom {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 50px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.figure-zoom .mag { display: block; }
.figure-zoom:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ============================================================
   ZOOM / MAGNIFY — fullscreen inspector (outside the stage)
   ============================================================ */
.zoom {
  position: fixed; inset: 0; z-index: 9000;
  background: #14130f;
  color: #efe9dc;
  overflow: hidden;
  animation: zoom-in-fade 0.32s var(--ease);
  touch-action: none;
  font-family: var(--sans);
}
@keyframes zoom-in-fade { from { opacity: 0; } to { opacity: 1; } }
:root[data-motion="off"] .zoom { animation: none; }

.zoom-surface { position: absolute; inset: 0; touch-action: none; }
.zoom-wrap {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 0.4s var(--ease);
}
.zoom-wrap img { display: block; user-select: none; -webkit-user-drag: none; }

.zoom-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(239,233,220,0.6);
}

.zoom-caption {
  position: absolute; left: 48px; bottom: 44px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; max-width: 50%;
  pointer-events: none; text-shadow: 0 1px 24px rgba(0,0,0,0.6);
}
.zoom-caption .zt { font-family: var(--serif); font-size: 30px; line-height: 1.05; color: #f4efe4; }
.zoom-caption .zm {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(239,233,220,0.66);
}

.zoom-close {
  position: absolute; top: 40px; right: 44px; z-index: 3;
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid rgba(239,233,220,0.28);
  background: rgba(20,19,15,0.4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(239,233,220,0.82); cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.zoom-close:hover { color: #fff; border-color: rgba(239,233,220,0.6); background: rgba(20,19,15,0.7); }

.zoom-controls {
  position: absolute; right: 44px; bottom: 44px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 999px;
  border: 1px solid rgba(239,233,220,0.22);
  background: rgba(20,19,15,0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.zoom-controls button {
  width: 50px; height: 50px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  color: rgba(239,233,220,0.82);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.zoom-controls button:hover { color: #fff; background: rgba(239,233,220,0.1); }
.zoom-controls .zoom-pct {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(239,233,220,0.7); min-width: 56px; text-align: center;
}
.zoom-controls .zoom-fit {
  width: auto; padding: 0 18px; border-radius: 999px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11.5px; font-weight: 500;
  margin-left: 4px; border-left: 1px solid rgba(239,233,220,0.18);
}

.zoom-hint {
  position: absolute; left: 0; right: 0; top: 44px; z-index: 2;
  text-align: center; pointer-events: none;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(239,233,220,0.42);
}

/* ============================================================
   HOME / attract / curated discovery
   ============================================================ */
.home-top {
  height: 132px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
  border-bottom: 1px solid var(--hairline);
}
.home-mark {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--sans); text-transform: uppercase; color: var(--ink);
  letter-spacing: 0.4em; font-size: 20px; font-weight: 500;
  display: inline-flex; align-items: baseline;
}
.home-mark span {
  font-size: 12px; letter-spacing: 0.28em; color: var(--ink-soft);
  margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--hairline);
}
.home-top-right { display: flex; align-items: center; gap: 14px; }

.home-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.home-scroll::-webkit-scrollbar { width: 6px; }
.home-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

.hero {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: 92px; align-items: center;
  padding: 84px var(--margin) 64px;
}
.hero-text .label { margin-bottom: 26px; }
.hero-text h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: 74px; line-height: 0.98; letter-spacing: -0.015em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.hero-text .hero-orig {
  font-family: var(--serif); font-style: italic; font-size: 26px;
  color: var(--ink-soft); margin: 18px 0 0;
}
.hero-text .hero-maker {
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em;
  color: var(--ink); margin: 22px 0 0;
}
.hero-text .hero-blurb {
  font-family: var(--serif); font-size: 21px; line-height: 1.55;
  color: var(--ink-soft); margin: 26px 0 0; max-width: 470px;
}
.hero-cta {
  margin-top: 38px;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 0 30px; border-radius: 999px;
  border: 1px solid var(--ink); background: none; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.hero-cta .ca { font-size: 16px; transition: transform var(--t-med) var(--ease); }
.hero-cta:hover { background: var(--ink); color: var(--paper); }
.hero-cta:hover .ca { transform: translateX(4px); }

.hero-media {
  border: 0; padding: 36px; cursor: pointer;
  background: var(--mat);
  height: 540px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 var(--hairline);
  outline: 1px solid var(--hairline);
}
.hero-media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.7s var(--ease);
  box-shadow: 0 30px 70px -50px rgba(0,0,0,0.5);
}
.hero-media img.loaded { opacity: 1; }
:root[data-motion="off"] .hero-media img { transition: none; }

.rooms { padding: 40px var(--margin) 120px; }
.rooms-label { padding-bottom: 44px; border-top: 1px solid var(--hairline); padding-top: 44px; }
.rooms-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 56px;
}
.room {
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column;
}
.room-img {
  position: relative; width: 100%; aspect-ratio: 1.18;
  overflow: hidden; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
}
.room-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s var(--ease), transform var(--t-slow) var(--ease);
}
.room-img img.loaded { opacity: 1; }
.room:hover .room-img img { transform: scale(1.03); }
.room h3 {
  font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1;
  color: var(--ink); margin: 22px 0 0;
}
.room-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; margin: 12px 0 0;
}
.room-blurb {
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  color: var(--ink-soft); margin: 12px 0 0; max-width: 360px;
}
.room-all { justify-content: stretch; }
.room-all-inner {
  width: 100%; aspect-ratio: 1.18;
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 40px; gap: 16px;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.room-all:hover .room-all-inner { border-color: var(--ink-soft); }
.room-all .ra-arrow { font-size: 30px; color: var(--accent); line-height: 1; }
.room-all h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); margin: 0; }
.room-all .room-count { margin: 0; }

/* home -> timeline feature band */
.home-tl { padding: 0 var(--margin); }
.htl {
  width: 100%; cursor: pointer; background: none; text-align: left;
  border: 0; border-top: 1px solid var(--hairline); padding: 60px 0 8px;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 80px; align-items: center;
}
.htl-text .label { margin-bottom: 22px; }
.htl-text h2 {
  font-family: var(--serif); font-weight: 300; font-size: 50px; line-height: 0.98;
  letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.htl-blurb {
  font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5;
  color: var(--ink-soft); margin: 22px 0 0; max-width: 420px;
}
.htl-cta {
  display: inline-flex; align-items: center; gap: 13px; margin-top: 32px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.htl-cta .ca { font-size: 16px; color: var(--accent); transition: transform var(--t-med) var(--ease); }
.htl:hover .htl-cta .ca { transform: translateX(5px); }

.htl-mini {
  position: relative; height: 168px;
  border: 1px solid var(--hairline); background: var(--paper-2);
}
.htl-mini-rule {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--hairline); transform: translateY(-0.5px);
}
.htl-mini-seg {
  position: absolute; top: 0; height: 100%; border-left: 1px solid var(--hairline-2);
}
.htl-mini-seg:first-child { border-left: 0; }
.htl-mini-seg.alt { background: color-mix(in oklch, var(--ink) 3%, transparent); }
.htl-mini-label {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 10px; font-weight: 500; color: var(--ink-soft); opacity: 0.6;
  white-space: nowrap;
}
.htl-mini-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--accent);
  transform: translate(-50%, -50%);
  transition: transform var(--t-med) var(--ease);
}
.htl:hover .htl-mini-dot { transform: translate(-50%, -50%) scale(1.18); }

/* ============================================================
   SEARCH
   ============================================================ */
.search-field {
  flex: none; display: flex; align-items: center; gap: 24px;
  padding: 30px var(--margin);
  border-bottom: 1px solid var(--hairline);
}
.search-field .sf-icon { color: var(--ink-soft); flex: none; }
.sf-input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-family: var(--serif); font-weight: 300; font-size: 46px;
  color: var(--ink); padding: 8px 0; letter-spacing: -0.01em;
}
.sf-input::placeholder { color: var(--ink-soft); opacity: 0.55; }
.sf-clear {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.sf-clear:hover { color: var(--ink); border-color: var(--ink-soft); }

.search-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.search-scroll::-webkit-scrollbar { width: 6px; }
.search-scroll::-webkit-scrollbar-thumb { background: var(--hairline); }

.search-suggest { padding: 72px var(--margin); }
.search-suggest .label { margin-bottom: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  font-family: var(--serif); font-size: 21px; color: var(--ink);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.chip:hover { background: var(--paper-2); border-color: var(--ink-soft); }

/* material facet chips — larger, with a count badge */
.chips-mat { gap: 16px; }
.chip-mat {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 0 18px 0 30px;
}
.chip-mat .chip-n {
  font-family: var(--mono); font-size: 13px; color: var(--paper);
  background: var(--ink); min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-med) var(--ease);
}
.chip-mat:hover .chip-n { background: var(--accent); }
.count-facet { color: var(--accent); }
.search-count { padding: 56px var(--margin) 0; }
.search-scroll .grid { padding-top: 48px; }
.no-results {
  font-family: var(--serif); font-style: italic; font-size: 30px;
  color: var(--ink-soft); padding: 100px var(--margin);
}

/* ============================================================
   MORE LIKE THIS — quiet text links beneath the artwork
   ============================================================ */
.similar {
  flex: none;
  border-top: 1px solid var(--hairline);
  padding: 20px 110px 22px;
  display: flex; align-items: baseline; gap: 38px;
}
.similar-head {
  flex: none;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 10.5px; font-weight: 500; color: var(--ink-soft); opacity: 0.7;
}
.similar-row {
  display: flex; align-items: baseline; gap: 44px; flex-wrap: wrap; min-width: 0;
}
.sim-link {
  display: inline-flex; align-items: baseline; gap: 13px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: left; min-width: 0;
}
.sim-link-title {
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.sim-link-tag {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 9.5px; font-weight: 500; color: var(--accent); opacity: 0.85;
  white-space: nowrap;
}
.sim-link:hover .sim-link-title { color: var(--accent); border-bottom-color: color-mix(in oklch, var(--accent) 45%, transparent); }

/* ============================================================
   TIMELINE — full-bleed horizontal band
   topbar 132 · head 104 · band 760 · scrubber 84  = 1080
   ============================================================ */
.timeline { background: var(--paper); }

.tl-head {
  height: 104px; flex: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 60px;
  padding: 0 var(--margin) 22px;
  border-bottom: 1px solid var(--hairline);
}
.tl-head-text { display: flex; flex-direction: column; gap: 12px; }
.tl-head h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: 46px; line-height: 0.96; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.tl-head .tl-lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.45; color: var(--ink-soft);
  margin: 0 0 4px; max-width: 520px; text-align: right;
}

.tl-band { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tl-scroll {
  position: absolute; inset: 0;
  overflow-x: auto; overflow-y: hidden;
  cursor: grab; touch-action: pan-x;
  scrollbar-width: none;
}
.tl-scroll:active { cursor: grabbing; }
.tl-scroll::-webkit-scrollbar { height: 0; display: none; }
.tl-canvas { position: relative; }

/* era zones */
.tl-zone {
  position: absolute; top: 0; height: 100%;
  border-left: 1px solid var(--hairline-2);
}
.tl-zone:first-child { border-left: 0; }
.tl-zone.alt { background: color-mix(in oklch, var(--ink) 2.5%, transparent); }
.tl-zone-name {
  position: absolute; top: 30px; left: 30px;
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.34em; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); opacity: 0.55; transition: opacity 0.18s ease;
}
.tl-zone-name:hover { opacity: 0.9; }
.tl-zone-count {
  letter-spacing: 0.05em; font-size: 12px; font-weight: 600;
  color: var(--ink); opacity: 0.85;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 8%, transparent);
}
/* honest "Date unknown" badge — undatable items never get a fake position */
.tl-unknown {
  align-self: flex-end; margin-bottom: 4px;
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 15px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink-soft);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.tl-unknown:hover { border-color: var(--ink-soft); color: var(--ink); }

/* the date rule + boundary years */
.tl-rule {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--hairline);
}
.tl-bound {
  position: absolute; transform: translate(-0.5px, 0);
  width: 1px; height: 1px;
}
.tl-bound::before {
  content: ""; position: absolute; left: 0; top: -9px; width: 1px; height: 18px;
  background: var(--ink-soft); opacity: 0.5;
}
.tl-bound-year {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-soft); white-space: nowrap;
}

/* leaders + ticks */
.tl-leader {
  position: absolute; width: 1px;
  background: var(--hairline); transform: translateX(-0.5px);
}
.tl-tick {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--accent);
  transform: translate(-50%, -50%);
}

/* work plates */
.tl-plate {
  position: absolute; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font: inherit; color: inherit;
}
.tl-plate-img {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%;
}
.tl-plate-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 1px 0 var(--hairline), 0 16px 30px -22px rgba(0,0,0,0.5);
  outline: 1px solid var(--hairline-2);
  opacity: 0; transition: opacity 0.6s var(--ease), transform var(--t-med) var(--ease);
}
.tl-plate-img img.loaded { opacity: 1; }
:root[data-motion="off"] .tl-plate-img img { transition: none; }
.tl-plate:hover .tl-plate-img img { transform: translateY(-3px); }
.tl-plate-title {
  font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.16;
  color: var(--ink); margin-top: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.4em;
  transition: color var(--t-med) var(--ease);
}
.tl-plate:hover .tl-plate-title { color: var(--accent); }
.tl-plate-year {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-top: 6px;
}

/* edge arrows */
.tl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer; z-index: 4;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.tl-arrow .gl { font-family: var(--sans); font-size: 22px; line-height: 1; }
.tl-arrow:hover { color: var(--ink); border-color: var(--ink-soft); }
.tl-arrow-l { left: 28px; }
.tl-arrow-r { right: 28px; }

.tl-drag-hint {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
  text-align: center; pointer-events: none;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11px; font-weight: 500;
  color: var(--ink-soft); opacity: 0.5;
}

/* scrubber / minimap */
.tl-scrubwrap {
  height: 84px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--margin);
  border-top: 1px solid var(--hairline);
}
.tl-scrub {
  position: relative; width: 1440px; height: 44px; cursor: pointer;
  touch-action: none;
}
.tl-scrub-rule {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--hairline); transform: translateY(-0.5px);
}
.tl-seg {
  position: absolute; top: 0; height: 100%;
  background: none; border: 0; border-left: 1px solid var(--hairline-2);
  cursor: pointer; padding: 0;
}
.tl-seg:first-of-type { border-left: 0; }
.tl-seg-label {
  position: absolute; top: 2px; left: 9px;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 9.5px; font-weight: 500;
  color: var(--ink-soft); opacity: 0.55; white-space: nowrap;
  transition: opacity var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.tl-seg.is-cur .tl-seg-label { opacity: 1; color: var(--ink); }
.tl-dot {
  position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-soft); opacity: 0.45;
  transform: translate(-50%, -50%); pointer-events: none;
}
.tl-window {
  position: absolute; top: 50%; height: 30px; transform: translateY(-50%);
  border: 1px solid var(--accent); border-radius: 3px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  pointer-events: none; min-width: 18px;
}

/* ============================================================
   SAVED WORKS — save toggle, chrome tab, selection screen, QR
   ============================================================ */

/* Save — primary action, filled accent so it reads as the clear CTA */
.save-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12px; font-weight: 600; color: var(--paper);
  box-shadow: 0 10px 26px -14px color-mix(in oklch, var(--accent) 80%, transparent);
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.save-btn:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
.save-btn.is-on {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in oklch, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: none;
}

/* one-time nudge floating above the Save button */
.save-hint {
  position: absolute; bottom: calc(100% + 14px); right: 0;
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px; font-weight: 500;
  box-shadow: 0 16px 38px -20px rgba(0,0,0,0.7);
  animation: save-hint-bob 2.4s ease-in-out infinite;
}
.save-hint-arrow {
  position: absolute; top: 100%; right: 30px;
  width: 12px; height: 12px; margin-top: -6px;
  background: var(--ink); transform: rotate(45deg);
}
@keyframes save-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
:root[data-motion="off"] .save-hint { animation: none; }

/* chrome selection tab */
.sel-tab {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 56px; padding: 0 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  transition: color var(--t-med) var(--ease);
}
.sel-tab:hover { color: var(--ink); }
.sel-tab.has-items { color: var(--ink); }
.sel-tab-label { line-height: 1; }
.sel-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper);
}

/* ---- selection screen ---- */
.sel-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.sel-scroll::-webkit-scrollbar { width: 6px; }
.sel-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.sel-head .lede { max-width: 720px; }

.sel-body {
  display: grid; grid-template-columns: 1fr 408px; gap: 88px;
  padding: 70px var(--margin) 140px; align-items: start;
}
.sel-grid {
  column-count: 2;
  column-gap: 56px;
}
.sel-card { position: relative; break-inside: avoid; margin-bottom: 52px; }
.sel-card-open {
  display: flex; flex-direction: column; width: 100%;
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.sel-card-img {
  position: relative; width: 100%;
  background: var(--paper-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: transform var(--t-med) var(--ease);
}
.sel-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease);
}
.sel-card-img img.loaded { opacity: 1; }
.sel-card-open:hover .sel-card-img { transform: translateY(-4px); }
.sel-card-meta { display: flex; flex-direction: column; gap: 7px; padding-top: 20px; }
.sel-card-cat {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 10px; font-weight: 500; color: var(--accent);
}
.sel-card-title {
  font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.12;
  color: var(--ink);
}
.sel-card-maker { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.sel-card-open:hover .sel-card-title { color: var(--accent); }

.sel-remove {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.sel-remove:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ---- take-home rail ---- */
.takehome { position: sticky; top: 36px; align-self: start; }
.takehome-inner {
  border: 1px solid var(--hairline); background: var(--paper-2);
  padding: 44px 40px; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.takehome-inner .label { margin-bottom: 28px; }
.takehome-qr {
  background: #ffffff; padding: 16px;
  box-shadow: 0 18px 44px -34px rgba(0,0,0,0.6);
  outline: 1px solid var(--hairline-2);
  display: inline-flex;
}
.takehome-qr .qr { display: block; }
.takehome-qr .qr svg { display: block; }
.qr-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-width: 200px; min-height: 200px;
  background: repeating-linear-gradient(-45deg, #14130f 0 8px, #fff 8px 16px);
}
.qr-fallback span {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em;
  background: #fff; padding: 8px 14px; color: #14130f;
}
.takehome-blurb {
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
  color: var(--ink); margin: 30px 0 0; max-width: 300px;
}
.takehome-url {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-soft); margin: 18px 0 0;
}
.takehome-meta {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 0; padding: 28px 0 0; width: 100%;
  border-top: 1px solid var(--hairline); justify-content: center;
}
.takehome-meta .th-count {
  font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1;
  color: var(--ink);
}
.takehome-meta .th-unit {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
}
.takehome-note {
  font-family: var(--sans); font-size: 12px; line-height: 1.55;
  color: var(--ink-soft); opacity: 0.8; margin: 22px 0 0; max-width: 280px;
}
.takehome-clear {
  margin-top: 22px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  padding: 10px 4px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--hairline);
  transition: color var(--t-med) var(--ease);
}
.takehome-clear:hover { color: var(--accent); }

/* ---- empty state ---- */
.sel-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--margin) 80px;
}
.sel-empty-mark {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); margin-bottom: 38px;
}
.sel-empty h1 {
  font-family: var(--serif); font-weight: 300; font-size: 58px; line-height: 1;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.sel-empty p {
  font-family: var(--serif); font-size: 22px; line-height: 1.55;
  color: var(--ink-soft); margin: 26px 0 0; max-width: 560px; text-wrap: pretty;
}
.sel-empty-cta {
  margin-top: 44px;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 0 32px; border-radius: 999px;
  border: 1px solid var(--ink); background: none; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.sel-empty-cta .ca { font-size: 16px; transition: transform var(--t-med) var(--ease); }
.sel-empty-cta:hover { background: var(--ink); color: var(--paper); }
.sel-empty-cta:hover .ca { transform: translateX(4px); }

/* compare entry button on the selection header */
.sel-compare {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--ink); background: none; cursor: pointer;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 12px; font-weight: 500; color: var(--ink);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.sel-compare svg { transition: transform var(--t-med) var(--ease); }
.sel-compare:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   OBJECT COMPARE — side by side
   ============================================================ */
.cmp-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.cmp-scroll::-webkit-scrollbar { width: 6px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.cmp-head .lede { max-width: 680px; }

.cmp-body {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0; align-items: start;
  padding: 56px var(--margin) 8px;
}

/* each side */
.cmp-side { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.cmp-picker {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 30px; max-width: 560px;
}
.cmp-chip {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 220px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
  transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.cmp-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.cmp-chip.is-active { border-color: var(--accent); color: var(--ink); }
.cmp-chip-sw {
  flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hairline-2);
  display: inline-flex;
}
.cmp-chip.is-active .cmp-chip-sw { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cmp-chip-sw img { width: 100%; height: 100%; object-fit: cover; }
.cmp-chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmp-stage {
  width: 100%; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; justify-content: center;
}
.cmp-frame {
  display: inline-flex; max-width: 100%; max-height: 420px;
  background: var(--mat); padding: 28px;
  box-shadow: 0 30px 70px -50px rgba(0,0,0,0.5);
  transition: transform var(--t-med) var(--ease);
}
.cmp-stage:hover .cmp-frame { transform: translateY(-4px); }
.cmp-frame img { display: block; max-width: 100%; max-height: 364px; object-fit: contain; }

.cmp-title { text-align: center; margin-top: 26px; padding: 0 16px; }
.cmp-title h2 {
  font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.12;
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.cmp-title .cmp-orig {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink-soft); margin: 8px 0 0;
}

/* center swap control */
.cmp-mid {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; padding: 0 40px; padding-top: 96px;
}
.cmp-swap {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 10px; font-weight: 500;
  transition: color var(--t-med) var(--ease);
}
.cmp-swap svg {
  width: 50px; height: 50px; padding: 15px; border-radius: 50%;
  border: 1px solid var(--hairline);
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.cmp-swap:hover { color: var(--ink); }
.cmp-swap:hover svg { border-color: var(--ink-soft); transform: rotate(180deg); }

/* comparison table */
.cmp-table {
  margin: 36px var(--margin) 130px;
  border-top: 1px solid var(--hairline);
}
.cmp-row {
  display: grid; grid-template-columns: 1fr 160px 1fr;
  align-items: baseline; border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}
.cmp-key {
  text-align: center;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 10.5px; font-weight: 500; color: var(--ink-soft);
}
.cmp-val {
  font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink);
  text-wrap: pretty;
}
.cmp-val-a { text-align: right; padding-right: 40px; }
.cmp-val-b { text-align: left; padding-left: 40px; }
.cmp-val.em { font-size: 24px; }
.cmp-val.mono { font-family: var(--mono); font-size: 16px; letter-spacing: 0.01em; color: var(--ink-soft); }

/* ---- true-to-scale visualization (quiet line diagram) ---- */
.s2s {
  margin: 14px var(--margin) 18px;
  padding: 0;
}
.s2s-label { text-align: center; margin-bottom: 4px; opacity: 0.7; }
.s2s-svg { display: block; width: 100%; height: auto; overflow: visible; }

.s2s-ground { stroke: var(--ink); stroke-width: 1; opacity: 0.28; }

.s2s-a { fill: color-mix(in oklch, var(--ink) 6%, transparent); stroke: var(--ink); stroke-width: 1; opacity: 0.78; }
.s2s-b { fill: color-mix(in oklch, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1; }

/* artifact silhouettes read as solid mass */
.s2s-a.s2s-solid { fill: color-mix(in oklch, var(--ink) 24%, transparent); }
.s2s-b.s2s-solid { fill: color-mix(in oklch, var(--accent) 30%, transparent); }

.s2s-human { fill: var(--ink-soft); opacity: 0.34; stroke: none; }

.s2s-dim {
  font-family: var(--mono); font-size: 12.5px; fill: var(--ink-soft); letter-spacing: 0.02em;
}
.s2s-human-cap {
  font-family: var(--sans); font-size: 10.5px; fill: var(--ink-soft); opacity: 0.8;
  text-transform: uppercase; letter-spacing: 0.14em;
}

/* ============================================================
   ATTRACT SCREEN — full-bleed work, almost no UI
   ============================================================ */
.attract {
  position: absolute; inset: 0;
  overflow: hidden; cursor: pointer;
  background: #0c0b09;
}
.attract-stage { position: absolute; inset: 0; }
.attract-layer {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.attract-layer.is-on { opacity: 1; }
.attract-layer img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
}
.attract-layer.is-on img {
  animation: attract-drift 24s ease-out forwards;
}
@keyframes attract-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.13); }
}
.attract-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,7,6,0.82) 0%, rgba(8,7,6,0.22) 36%, rgba(8,7,6,0) 58%),
    linear-gradient(to bottom, rgba(8,7,6,0.40) 0%, rgba(8,7,6,0) 24%);
}

.attract-ui {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 66px 84px 76px;
  pointer-events: none;
}
.attract-mark {
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.44em; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.92);
}
.attract-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 56px;
}
.attract-caption { max-width: 64%; opacity: 1; animation: attract-cap-in 1.1s var(--ease); }
@keyframes attract-cap-in {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
.attract-title {
  font-family: var(--serif); font-weight: 300;
  font-size: 88px; line-height: 0.98; letter-spacing: -0.015em;
  color: #fff; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.attract-meta {
  font-family: var(--serif); font-style: italic; font-size: 25px;
  color: rgba(255,255,255,0.82); margin: 20px 0 0;
}
.attract-prompt {
  flex: none;
  display: inline-flex; align-items: center; gap: 15px;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.3em; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.92); padding-bottom: 10px; white-space: nowrap;
}
.attract-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: attract-pulse 1.9s ease-in-out infinite;
}
@keyframes attract-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.78); }
  50%      { opacity: 1;   transform: scale(1); }
}

:root[data-motion="off"] .attract-layer { transition: none; }
:root[data-motion="off"] .attract-layer img,
:root[data-motion="off"] .attract-caption,
:root[data-motion="off"] .attract-dot { animation: none; }

/* ============================================================
   "RAZLOŽI MI TO DELO" — grounded AI narrative panel (D3.10)
   restrained sienna sparkle, serif voice, three quiet pill toggles
   ============================================================ */
.ai-eyebrow { display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:0.22em;
  font-size:11.5px; font-weight:500; color:var(--accent); }
.ai-spark { display:inline-flex; color:var(--accent); }
.ai-spark svg { display:block; }

.ai-panel { margin:40px 0 0; padding:34px 0 0; border-top:1px solid var(--hairline); }
.ai-panel-head { display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; }
.level-toggle { display:inline-flex; gap:8px; }
.level-toggle button { font-family:var(--sans); font-size:12px; letter-spacing:0.06em;
  color:var(--ink-soft); background:none; border:1px solid var(--hairline);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.level-toggle button:hover { color:var(--ink); }
.level-toggle button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent);
  background:color-mix(in oklch, var(--accent) 7%, transparent); }
.ai-narr { font-family:var(--serif); font-size:21px; line-height:1.62; color:var(--ink);
  margin:26px 0 0; min-height:1.62em; }
.ai-narr.is-loading { color:var(--ink-soft); font-style:italic; }
.ai-narr.is-error { color:#8a5a36; font-style:italic; font-size:17px; }
.ai-foot { display:flex; align-items:center; gap:10px; margin:24px 0 0;
  font-family:var(--sans); font-size:11px; letter-spacing:0.04em; line-height:1.5;
  color:var(--ink-soft); opacity:0.8; }
.ai-foot .dot { flex:none; width:4px; height:4px; border-radius:50%; background:var(--accent); }