/* ==========================================================================
   NOMAD — styles
   ========================================================================== */

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --stone: #cec5c1;
  --grey: #8e8e8e;
  --dim: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.16);
  --red: #d42a1e;
  --red-deep: #a81c13;

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --gut: clamp(16px, 1.25vw, 20px);
  --col-gap: clamp(12px, 1.25vw, 20px);

  /* type scale, fluid around a 1440 canvas */
  --fs-xs: clamp(10px, 0.75vw, 12px);
  --fs-s: clamp(12px, 0.875vw, 14px);
  --fs-m: clamp(15px, 1.125vw, 18px);
  --fs-l: clamp(18px, 1.5625vw, 25px);
  --fs-xl: clamp(21px, 1.875vw, 30px);
  --fs-hm: clamp(26px, 2.6vw, 42px);
  --fs-hl: clamp(34px, 3.9vw, 62px);
  --fs-hxl: clamp(40px, 5vw, 80px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-s);
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--gut); top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 99px; }
.skip:focus { top: var(--gut); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { padding-inline: var(--gut); }
.mono { font-family: var(--mono); font-weight: 400; }
.small { font-size: var(--fs-s); line-height: 1.2; }
.dim { color: var(--dim); }
.p-m { font-size: var(--fs-m); line-height: 1.2; }
.p-l { font-size: var(--fs-l); line-height: 1.02; letter-spacing: -0.01em; }
.p-xl { font-size: var(--fs-xl); line-height: 1.18; letter-spacing: -0.01em; }
.h-m { font-size: var(--fs-hm); line-height: 1.02; letter-spacing: -0.02em; }
.h-l { font-size: var(--fs-hl); line-height: 0.98; letter-spacing: -0.02em; font-weight: 500; }
.h-xl { font-size: var(--fs-hxl); line-height: 0.98; letter-spacing: -0.025em; font-weight: 500; }
.label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
}

/* line-reveal masks (created by JS) */
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span { display: block; will-change: transform; }

/* ----------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ----------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 20px 0 22px;
  border-radius: 99px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--red); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--red); color: #fff; }
.btn-ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn .at { font-style: normal; font-size: 14px; letter-spacing: 0; }

.arrow { position: relative; display: inline-block; width: 16px; height: 10px; flex: none; }
.arrow::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1px; background: currentColor; }
.arrow::after {
  content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow, .view-link:hover .arrow { animation: nudge .6s var(--ease); }
@keyframes nudge { 0% { transform: translateX(0) } 40% { transform: translateX(5px) } 100% { transform: translateX(0) } }

/* ----------------------------------------------------------------------- */
/* Loader: objects dial through the O, then the wordmark expands           */
/* ----------------------------------------------------------------------- */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.o-slot { position: fixed; left: 0; top: 0; width: 0; height: 0; }
.o-slot img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: contain; opacity: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.18)); }
.o-slot img.on { opacity: 1; }
.loader-meta {
  position: absolute; left: var(--gut); right: var(--gut); bottom: var(--gut);
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: var(--fs-s); color: var(--ink);
}
.loader-alt { font-size: var(--fs-xl); letter-spacing: -0.02em; }
html.is-loading, html.is-loading body { overflow: hidden; }
html.is-loading .nav, html.is-loading .hero-bottom { opacity: 0; }
.nav, .hero-bottom { transition: opacity .8s var(--ease); }

/* ----------------------------------------------------------------------- */
/* Nav                                                                     */
/* ----------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--gut);
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}
.nav > * { pointer-events: auto; }
.nav-logo { display: block; width: 74px; opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.nav-logo .wm { fill: #fff; }
html.past-hero .nav-logo { opacity: 1; transform: none; }

.menu { position: relative; text-align: right; }
.menu-btn {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 6px 0;
}
.menu-dots { display: inline-block; margin-left: 4px; transition: transform .4s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-dots { transform: rotate(90deg); }
.menu-panel {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.menu-panel a { position: relative; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.menu-panel a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.menu-panel a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu.is-open .menu-panel a { opacity: 1; transform: none; pointer-events: auto; }
.menu.is-open .menu-panel a:nth-child(2) { transition-delay: .03s; }
.menu.is-open .menu-panel a:nth-child(3) { transition-delay: .06s; }
.menu.is-open .menu-panel a:nth-child(4) { transition-delay: .09s; }
.menu.is-open .menu-panel a:nth-child(5) { transition-delay: .12s; }
.menu.is-open .menu-panel a:nth-child(6) { transition-delay: .15s; }

/* ----------------------------------------------------------------------- */
/* Hero                                                                    */
/* ----------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: var(--gut);
  background: #fff;
  color: var(--ink);
  isolation: isolate;
}
.hero-center { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 70px 0 30px; }
.hero-mark { font-size: 0; line-height: 0; position: relative; z-index: 1; }
.wordmark { width: 100%; height: auto; display: block; }
.wm { fill: currentColor; stroke: currentColor; stroke-width: 8; stroke-linejoin: round; }
.hero-mark .wordmark--stack { display: none; }
.hero-mark .wordmark { overflow: visible; }
.hero-sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(20px, 2.4vw, 36px); }
.hero-sub .p-l { position: relative; z-index: 3; color: #fff; mix-blend-mode: difference; }
.hero-sub .btn { position: relative; z-index: 3; }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; position: relative; z-index: 3; }
.hero-bottom .small:first-child { font-size: var(--fs-s); }
.hero-links { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.hero-links .slash { opacity: .5; }
.lang { background: var(--ink); color: #fff; border-radius: 4px; padding: 3px 5px 2px; margin-left: 8px; }
.hero-liquid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-mat { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------------------- */
/* Intro / reel                                                            */
/* ----------------------------------------------------------------------- */
.intro { background: #fff; color: var(--ink); padding: clamp(80px, 10vw, 150px) 0 clamp(80px, 9vw, 140px); }
.intro .h-xl { max-width: none; }
.reel { margin-top: clamp(40px, 4.5vw, 65px); }
.reel-media { position: relative; overflow: hidden; background: #111; aspect-ratio: 16 / 9; }
.reel-video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.reel-tag {
  position: absolute; left: 16px; bottom: 14px;
  color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  mix-blend-mode: difference;
}
.reel-text { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); margin-top: 24px; }
.reel-text > div { grid-column: 1 / span 2; }
.reel-text > p { grid-column: 3 / span 4; }

/* ----------------------------------------------------------------------- */
/* Dark sections                                                           */
/* ----------------------------------------------------------------------- */
.sec-dark { background: var(--ink); color: #fff; position: relative; }
.sec-light { background: #fff; color: var(--ink); }
.sec-stone { background: var(--stone); color: var(--ink); }

/* letters (SYSTEM, PLACES, FAQS) */
.letters {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em;
  line-height: 1;
  padding-top: var(--gut);
}
.letters span { display: block; will-change: transform; }
.letters-sm { font-size: var(--fs-l); }

/* ----------------------------------------------------------------------- */
/* System & Places cards                                                   */
/* ----------------------------------------------------------------------- */
.system { padding-bottom: clamp(80px, 10vw, 150px); }
.system-claim, .places-claim { margin: clamp(60px, 6vw, 90px) 0 0 auto; width: 50%; padding-left: calc(var(--col-gap) / 2); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: clamp(80px, 9vw, 140px); margin-top: clamp(60px, 7vw, 110px); }
.card .label { margin-bottom: 14px; }
.card-t { font-size: var(--fs-l); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; margin-bottom: 18px; max-width: 22em; }
.card-link { display: block; position: relative; cursor: none; }
.card-img { overflow: hidden; background: #161616; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.card-link:hover .card-img img { transform: scale(1.0); }
.card-note { margin-top: 16px; max-width: 30em; color: var(--dim); }

.c1 { grid-column: 1 / span 6; }
.c1 .card-img { aspect-ratio: 4 / 3; }
.c2 { grid-column: 8 / span 5; margin-top: clamp(120px, 22vw, 340px); }
.c2 .card-img { aspect-ratio: 3 / 2; }
.c3 { grid-column: 3 / span 7; }
.c3 .card-img { aspect-ratio: 3 / 2; }

.view-all {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: baseline;
  margin-top: clamp(100px, 10vw, 150px); padding-top: 16px; border-top: 1px solid var(--line);
}
.view-link { grid-column: 1 / span 4; display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-xl); letter-spacing: -0.01em; }
.view-all .count { grid-column: 7 / span 3; font-size: var(--fs-s); }
.view-all .count + span { grid-column: 12; text-align: right; font-size: var(--fs-s); }

.places { padding-bottom: clamp(100px, 12vw, 180px); }
.cards-places .p1 { grid-column: 1 / span 7; }
.cards-places .p1 .card-img { aspect-ratio: 3 / 2; }
.cards-places .p2 { grid-column: 9 / span 4; margin-top: clamp(140px, 20vw, 300px); }
.cards-places .p2 .card-img { aspect-ratio: 4 / 5; }
.cards-places .p3 { grid-column: 2 / span 4; }
.cards-places .p3 .card-img { aspect-ratio: 4 / 3; }
.cards-places .p4 { grid-column: 7 / span 6; margin-top: clamp(80px, 12vw, 180px); }
.cards-places .p4 .card-img { aspect-ratio: 3 / 2; }
.cards-places .p5 { grid-column: 4 / span 6; }
.cards-places .p5 .card-img { aspect-ratio: 16 / 9; }

/* ----------------------------------------------------------------------- */
/* Custom cursor                                                           */
/* ----------------------------------------------------------------------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 16px; border-radius: 99px;
  background: #fff; color: var(--ink);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
  pointer-events: none;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.6);
  transition: opacity .3s var(--ease), scale .3s var(--ease);
  white-space: nowrap;
}
.cursor.on { opacity: 1; }
@media (hover: none) { .cursor { display: none; } .card-link { cursor: pointer; } }

/* ----------------------------------------------------------------------- */
/* Machine section                                                         */
/* ----------------------------------------------------------------------- */
.machine-sec { overflow: hidden; padding: clamp(90px, 10vw, 150px) 0; isolation: isolate; }
.machine-bg { position: absolute; inset: 0; z-index: -1; }
.machine-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.2); transform: scale(1.15); opacity: .38; }
.machine-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(10,10,10,.55) 35%, rgba(10,10,10,.55) 65%, var(--ink) 100%); }

.machine-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: center; }
.machine-copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 28px; }
.machine-copy .p-m.dim { max-width: 24em; }
.spec { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec li span:first-child { color: var(--grey); }

.machine {
  grid-column: 6 / span 7;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.2vw, 18px);
  --h: min(80svh, 820px);
}

/* cabinet */
.cabinet {
  height: calc(var(--h) * 0.92); aspect-ratio: 0.5;
  display: flex; flex-direction: column;
  padding: 10px; gap: 10px;
  background: linear-gradient(180deg, #222, #121212);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.cab-glass {
  flex: 1; display: flex; flex-direction: column; justify-content: space-evenly;
  padding: 8% 7%;
  background: linear-gradient(115deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%), linear-gradient(180deg, #3a0a07, #1a0504);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 40px rgba(212,42,30,.25);
  position: relative; overflow: hidden;
}
.cab-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 45%, transparent 55%); pointer-events: none; }
.cab-row { display: flex; justify-content: space-around; align-items: flex-end; position: relative; padding-bottom: 4%; }
.cab-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #c9c9c9 0 2px, transparent 2px 6px);
  opacity: .35;
}
.pk { flex: 0 0 22%; aspect-ratio: 0.72; border-radius: 3px; position: relative; transition: transform .8s var(--ease), opacity .6s var(--ease); }
.pk::after { content: ""; position: absolute; left: 18%; right: 18%; top: 22%; height: 10%; background: rgba(255,255,255,.55); border-radius: 1px; }
.pk-a { background: linear-gradient(160deg, #f2efe9, #c9c3b8); }
.pk-b { background: linear-gradient(160deg, #e8d7b6, #b08a52); }
.pk-c { background: linear-gradient(160deg, #e6e6e6, #9b9b9b); aspect-ratio: 0.9; }
.pk-d { background: linear-gradient(160deg, #f6e9f1, #cfc0e6); aspect-ratio: 0.6; border-radius: 40% 40% 4px 4px; }
.pk-e { background: linear-gradient(160deg, #ffd47a, #e09b1d); aspect-ratio: 1; border-radius: 50%; }
.pk.is-pick { box-shadow: 0 0 0 2px #fff, 0 0 24px rgba(255,255,255,.6); }
.pk.is-drop { transform: translateY(160%) rotate(8deg); opacity: 0; }
.cab-tray {
  height: 12%; border-radius: 3px; background: #0b0b0b;
  box-shadow: inset 0 6px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
  font-size: 10px; color: var(--grey);
  transition: box-shadow .6s var(--ease);
}
.cab-tray.is-lit { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 0 30px rgba(212,42,30,.8); color: #fff; }

/* screen */
.screen-frame {
  height: var(--h); aspect-ratio: 9 / 16;
  padding: clamp(8px, 0.9vw, 14px);
  background: linear-gradient(180deg, #2a2a2a, #111);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1);
}
.screen {
  container-type: inline-size;
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 6px;
  background: #f6f4f0; color: var(--ink);
  font-family: var(--sans);
}
.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 6cqw;
  gap: 3.4cqw;
  opacity: 0; visibility: hidden;
  transform: translateY(2%);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s;
  overflow-y: auto; scrollbar-width: none;
}
.scr::-webkit-scrollbar { display: none; }
.scr.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }

.s-k { font-size: 2.6cqw; text-transform: uppercase; letter-spacing: .06em; color: #777; }
.s-xl { font-size: 13cqw; line-height: .92; letter-spacing: -0.035em; font-weight: 500; }
.s-l { font-size: 7.4cqw; line-height: 1; letter-spacing: -0.025em; }
.s-q { font-size: 4.8cqw; line-height: 1.08; letter-spacing: -0.015em; }
.s-p { font-size: 3.4cqw; line-height: 1.3; color: #3a3a3a; }
.small-s { font-size: 2.9cqw; color: #666; }
.s-head { display: flex; justify-content: space-between; align-items: center; min-height: 6cqw; }
.s-x, .s-back { font-size: 3.2cqw; color: #555; padding: 1cqw 0; }
.s-x { font-size: 6cqw; line-height: 1; }
.s-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 13cqw; border-radius: 99px;
  background: var(--red); color: #fff;
  font-size: 3.3cqw; text-transform: uppercase; letter-spacing: .12em;
  transition: background-color .3s var(--ease), transform .2s var(--ease);
  flex: none;
}
.s-btn:hover { background: var(--red-deep); }
.s-btn:active { transform: scale(.98); }
.s-btn-light { background: #fff; color: var(--ink); }
.s-btn-light:hover { background: var(--red); color: #fff; }
.s-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.s-btn-ghost:hover { background: var(--ink); color: #fff; }

/* idle */
.scr-idle { padding: 0; color: #fff; background: #000; }
.idle-media { position: absolute; inset: 0; }
.idle-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
.idle-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.8) 100%); }
@keyframes kenburns { from { transform: scale(1.12) translate(2%, 0); } to { transform: scale(1.0) translate(-2%, -1%); } }
.idle-copy { position: relative; display: flex; flex-direction: column; height: 100%; padding: 6cqw; gap: 4cqw; }
.idle-copy .s-k { color: rgba(255,255,255,.8); }
.idle-copy .s-xl { margin-top: auto; font-size: 17cqw; }
.idle-copy .s-btn { margin-top: 2cqw; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 2.4cqw rgba(255,255,255,.18); } }

/* choose */
.story {
  position: relative; flex: 1; min-height: 26cqw;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.6cqw;
  padding: 4.4cqw; border-radius: 2.2cqw; overflow: hidden;
  color: #fff; text-align: left;
  transition: transform .4s var(--ease);
}
.story:hover { transform: scale(.985); }
.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1s var(--ease); }
.story:hover img { transform: scale(1.05); }
.story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7)); z-index: 1; }
.story > span { position: relative; z-index: 2; }
.story-meta { font-size: 2.5cqw; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.story-t { font-size: 5.6cqw; line-height: 1; letter-spacing: -0.02em; }

/* story */
.story-hero { position: relative; aspect-ratio: 16 / 10; border-radius: 2.2cqw; overflow: hidden; flex: none; }
.story-hero img { width: 100%; height: 100%; object-fit: cover; }
.live { position: absolute; left: 3cqw; top: 3cqw; background: rgba(0,0,0,.55); color: #fff; padding: 1.2cqw 2.2cqw; border-radius: 99px; font-size: 2.3cqw; text-transform: uppercase; letter-spacing: .06em; }
.live::first-letter { color: #ff4a3d; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); flex: none; }
.facts div { padding: 2.6cqw 0; }
.facts div + div { padding-left: 2.6cqw; border-left: 1px solid rgba(0,0,0,.12); }
.facts b { display: block; font-size: 6cqw; letter-spacing: -0.03em; font-weight: 500; line-height: 1; }
.facts span { font-family: var(--mono); font-size: 2.3cqw; text-transform: uppercase; letter-spacing: .05em; color: #777; }
.quiz { display: flex; flex-direction: column; gap: 2.4cqw; background: #fff; border-radius: 2.2cqw; padding: 4cqw; flex: none; }
.quiz-opts { display: flex; gap: 2cqw; }
.quiz-opts button {
  flex: 1; min-height: 11cqw; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  font-size: 3.6cqw; transition: background-color .3s, color .3s, box-shadow .3s;
}
.quiz-opts button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.quiz-opts button.is-right { background: var(--ink); color: #fff; box-shadow: none; }
.quiz-opts button.is-wrong { color: #aaa; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); text-decoration: line-through; }
.quiz-a { color: var(--ink); }

/* pick */
.picks { display: flex; flex-direction: column; gap: 2.6cqw; }
.pick {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1cqw 3cqw;
  padding: 4.4cqw; border-radius: 2.2cqw; background: #fff; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pick:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.pick-k { grid-column: 1 / -1; font-family: var(--mono); font-size: 2.4cqw; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.pick-t { font-size: 5.2cqw; letter-spacing: -0.02em; line-height: 1.02; }
.pick-d { grid-column: 1; font-size: 3cqw; color: #666; line-height: 1.25; }
.pick-p { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-size: 5.4cqw; letter-spacing: -0.02em; }

/* pay */
.pay-box, .drop-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3.4cqw; }
.pay-box .s-btn, .drop-box .s-btn { width: 100%; margin-top: 4cqw; }
.tap { position: relative; width: 44cqw; aspect-ratio: 1; display: grid; place-items: center; margin: 4cqw 0; }
.tap i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(212,42,30,.5); animation: ring 2.4s var(--ease) infinite; }
.tap i:nth-child(2) { animation-delay: .8s; }
.tap i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { from { transform: scale(.35); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.tap-card { width: 22cqw; aspect-ratio: 1.58; border-radius: 1.6cqw; background: linear-gradient(135deg, var(--ink), #3b3b3b); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.25); animation: hover 2.4s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-2cqw) rotate(-4deg); } }
.scr-pay.is-paying .tap i { border-color: var(--ink); animation-duration: .8s; }
.scr-pay.is-paid .tap-card { background: var(--red); animation: none; }

/* drop */
.scr-drop { background: var(--red); color: #fff; }
.scr-drop .s-k { color: rgba(255,255,255,.75); }
.scr-drop .s-p { color: rgba(255,255,255,.92); }
.scr-drop .small-s { color: rgba(255,255,255,.75); }
.scr-drop .s-btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.scr-drop .s-btn-ghost:hover { background: #fff; color: var(--red); }
.qr { width: 30cqw; aspect-ratio: 1; background: #fff; padding: 2cqw; border-radius: 1.4cqw; display: grid; grid-template-columns: repeat(21, 1fr); }
.qr i { display: block; aspect-ratio: 1; }
.qr i.b { background: var(--ink); }

/* ----------------------------------------------------------------------- */
/* Atelier                                                                 */
/* ----------------------------------------------------------------------- */
.atelier { padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px); }
.info { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
.info > div:first-child { grid-column: 1 / span 3; }
.info-text { grid-column: 5 / span 6; }
.info-imgs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); margin-top: clamp(60px, 7vw, 100px); align-items: start; }
.ii-left { grid-column: 4 / span 2; margin-top: 12vw; }
.ii-right { grid-column: 7 / span 5; }
.ii-frame { overflow: hidden; }
.ii-left .ii-frame { aspect-ratio: 4 / 5; }
.ii-right .ii-frame { aspect-ratio: 4 / 3; }
.ii-frame img { width: 100%; height: 120%; object-fit: cover; }
.ii-left figcaption { margin-top: 10px; font-size: var(--fs-s); }
.atelier .h-xl { margin-top: clamp(90px, 12vw, 180px); }

.build { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); margin-top: clamp(60px, 6vw, 90px); font-size: var(--fs-m); }
.build-k { grid-column: 3 / span 2; font-size: var(--fs-m); }
.dots { grid-column: 6 / span 3; display: flex; flex-direction: column; gap: 6px; }
.dots li { display: flex; align-items: center; gap: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.build-r { grid-column: 10 / span 3; font-size: var(--fs-m); }

/* ----------------------------------------------------------------------- */
/* Sleeves                                                                 */
/* ----------------------------------------------------------------------- */
.sleeves { padding: clamp(80px, 9vw, 140px) 0; }
.sleeves-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: 28px; }
.sleeves-head > p:first-child { grid-column: 1 / span 3; }
.sleeves-head .h-l { grid-column: 5 / span 8; }
.sleeves-p { grid-column: 5 / span 5; color: rgba(10,10,10,.64); }
.sleeve-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); margin-top: clamp(50px, 6vw, 90px); }
.sleeve { position: relative; }
.sleeve img { width: 100%; aspect-ratio: 725 / 1080; object-fit: cover; transition: transform .9s var(--ease); }
.sleeve:hover img { transform: translateY(-10px); }
.sleeve figcaption { margin-top: 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: rgba(10,10,10,.55); }

/* ----------------------------------------------------------------------- */
/* Objects                                                                 */
/* ----------------------------------------------------------------------- */
.objects { padding-top: clamp(90px, 10vw, 150px); overflow: hidden; }
.objects-h { position: relative; z-index: 2; }
.objects-p { max-width: 26em; margin-top: 28px; position: relative; z-index: 2; }
.obj-field { position: relative; height: clamp(720px, 105vw, 1500px); margin-top: -4vw; }
.obj { position: absolute; will-change: transform; }
.obj img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.obj figcaption { margin-top: 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); text-align: center; }
.o1 { width: 17vw; left: 6vw; top: 20%; }
.o2 { width: 22vw; left: 33vw; top: 8%; rotate: -12deg; }
.o2 figcaption { rotate: 12deg; }
.o3 { width: 13vw; left: 66vw; top: 18%; }
.o4 { width: 11vw; left: 20vw; top: 58%; }
.o5 { width: 15vw; left: 50vw; top: 54%; }
.o6 { width: 18vw; left: 77vw; top: 52%; }

/* ----------------------------------------------------------------------- */
/* Glitch                                                                  */
/* ----------------------------------------------------------------------- */
.glitch { height: 280vh; }
.glitch-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.glitch-bg { position: absolute; inset: 0; }
.glitch-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(1) contrast(1.1); transform: scale(1.1); }
.glitch-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,10,10,0) 0%, rgba(10,10,10,.8) 80%); }
.g-block { position: absolute; font-size: var(--fs-m); line-height: 1; color: #fff; opacity: 0; }
.g1 { top: 12vh; left: 10vw; }
.g2 { top: 34vh; left: 58vw; }
.g3 { top: 60vh; left: 6vw; }
.g4 { top: 78vh; left: 40vw; }
.g5 { top: 22vh; left: 68vw; }
.g-block.flick { animation: flick .14s steps(2) 6; }
@keyframes flick { 0% { transform: translate(2px, -1px); clip-path: inset(0 0 40% 0); } 100% { transform: translate(-3px, 1px); clip-path: inset(30% 0 0 0); } }
.g-final {
  position: absolute; left: 50%; top: 50vh; transform: translate(-50%, -50%);
  font-size: var(--fs-m); line-height: 1.05; color: #fff; text-align: left;
  opacity: 0; width: max-content;
}
.glitch-imgs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gi { position: absolute; overflow: hidden; will-change: transform; }
.gi img { width: 100%; height: 100%; object-fit: cover; }
.gi-1 { width: 22vw; aspect-ratio: 4 / 3; left: 8vw; top: 150vh; }
.gi-2 { width: 16vw; aspect-ratio: 4 / 3; right: 10vw; top: 120vh; }

/* ----------------------------------------------------------------------- */
/* People                                                                  */
/* ----------------------------------------------------------------------- */
.people { padding: clamp(90px, 10vw, 150px) 0; }
.people-p { max-width: 30em; margin: 28px 0 0 auto; width: 50%; padding-left: calc(var(--col-gap) / 2); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--col-gap); margin-top: clamp(70px, 8vw, 120px); border-top: 1px solid var(--line); padding-top: 18px; }
.team-col { display: flex; flex-direction: column; gap: 18px; padding-right: 2vw; }
.names { display: flex; flex-direction: column; gap: 14px; }
.names li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xl); letter-spacing: -0.01em; }
.names em { font-style: normal; font-size: var(--fs-s); }
.team-note { max-width: 26em; }

/* ----------------------------------------------------------------------- */
/* Menu                                                                    */
/* ----------------------------------------------------------------------- */
.menu-sec { padding: clamp(90px, 10vw, 150px) 0; }
.menu-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
.menu-head > p { grid-column: 1 / span 3; }
.menu-head .h-l { grid-column: 5 / span 8; }
.courses { border-top: 1px solid rgba(10,10,10,.15); }
.course {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: baseline;
  padding: 22px 0 26px; border-bottom: 1px solid rgba(10,10,10,.15);
  transition: background-color .4s var(--ease);
}
.course:hover { background: #f5f3f0; }
.c-n { grid-column: 1; font-size: var(--fs-s); color: var(--grey); }
.c-k { grid-column: 2 / span 2; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.c-t { grid-column: 4 / span 3; font-size: var(--fs-xl); letter-spacing: -0.01em; line-height: 1.05; }
.c-d { font-size: var(--fs-m); line-height: 1.25; color: rgba(10,10,10,.62); }
.c-p { grid-column: 11 / span 2; text-align: right; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.c-d { grid-column: 7 / span 4; }
.course-full { background: var(--ink); color: #fff; border-bottom-color: var(--ink); }
.course-full:hover { background: var(--red); }
.course-full .c-k { color: #fff; }
.course-full .c-d { color: rgba(255,255,255,.7); }
.course-full .c-n { color: rgba(255,255,255,.6); padding-left: 10px; }
.course-full .c-p { padding-right: 10px; }

.tasting {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start;
  margin-top: clamp(60px, 7vw, 100px); padding: clamp(24px, 2.6vw, 40px) 0;
  border-top: 2px solid var(--ink);
}
.tasting-k { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; }
.tasting-k .c-k { font-size: var(--fs-s); }
.tasting-time { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.tasting-price { grid-column: 4 / span 5; white-space: nowrap; font-size: clamp(52px, 6.6vw, 112px); line-height: .85; letter-spacing: -0.045em; font-weight: 500; }
.tasting-body { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tasting-t { font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -0.01em; }
.tasting-d { font-size: var(--fs-m); line-height: 1.3; color: rgba(10,10,10,.62); }
.tasting-fine { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); }

/* ----------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ----------------------------------------------------------------------- */
.faq { padding-bottom: clamp(100px, 10vw, 160px); }
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); margin-top: clamp(70px, 8vw, 120px); }
.faq-grid > p { grid-column: 1 / span 4; }
.faq-list { grid-column: 6 / span 7; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .p-xl { transition: opacity .3s; }
.qa summary:hover .p-xl { opacity: .7; }
.plus { position: relative; width: 14px; height: 14px; flex: none; transition: transform .5s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; }
.plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.plus::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.qa[open] .plus { transform: rotate(45deg); }
.qa-a { overflow: hidden; }
.qa-a p { padding: 0 0 26px; max-width: 34em; font-size: var(--fs-m); line-height: 1.35; color: var(--dim); }

/* ----------------------------------------------------------------------- */
/* Footer                                                                  */
/* ----------------------------------------------------------------------- */
.footer { background: var(--ink); color: #fff; padding: clamp(80px, 9vw, 140px) 0 var(--gut); border-top: 1px solid var(--line); }
.footer-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.footer-mark { margin-top: clamp(100px, 12vw, 180px); font-size: 0; line-height: 0; }
.footer-mark .wm { fill: #fff; stroke: #fff; }
.footer-info { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 16px; font-size: var(--fs-s); color: var(--dim); font-weight: 400; }
.footer-links { display: flex; gap: 16px; font-weight: 700; text-transform: uppercase; font-size: var(--fs-xs); color: #fff; }
.footer-links a:hover { color: var(--red); }

/* ----------------------------------------------------------------------- */
/* Responsive                                                              */
/* ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .machine-copy { grid-column: 1 / -1; margin-bottom: 50px; }
  .machine { grid-column: 1 / -1; --h: min(78svh, 720px); }
  .reel-text > div { grid-column: 1 / span 3; }
  .reel-text > p { grid-column: 4 / span 7; }
}

@media (max-width: 767px) {
  .hero-center { padding: 64px 0 24px; }
  .hero-mark .wordmark--wide { display: none; }
  .hero-mark .wordmark--stack { display: block; width: 100%; }
  .hero-sub { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .tasting { display: flex; flex-direction: column; gap: 22px; }

  .reel-media { aspect-ratio: 4 / 5; }
  .reel-text { display: flex; flex-direction: column; gap: 14px; }

  .system-claim, .places-claim, .people-p { width: auto; margin-left: 0; padding-left: 0; }
  .cards { display: flex; flex-direction: column; row-gap: 70px; }
  .c2, .cards-places .p2, .cards-places .p4 { margin-top: 0; }
  .cards .card-img { aspect-ratio: 4 / 3 !important; }
  .view-all { grid-template-columns: 1fr auto auto; gap: 16px; }
  .view-link, .view-all .count, .view-all .count + span { grid-column: auto; }

  .machine { --h: min(72svh, 640px); }
  .cabinet { display: none; }

  .info { display: flex; flex-direction: column; gap: 20px; }
  .info-imgs { display: flex; gap: 12px; align-items: flex-end; margin-top: 40px; }
  .ii-left { width: 38%; margin-top: 0; }
  .ii-right { width: 62%; }

  .build { display: flex; flex-direction: column; gap: 20px; }

  .sleeves-head { display: flex; flex-direction: column; }
  .sleeve-row { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }

  .obj-field { height: 720px; margin-top: 30px; }
  .o1 { width: 36vw; left: 4vw; top: 2%; }
  .o2 { width: 44vw; left: 48vw; top: 0; }
  .o3 { width: 26vw; left: 8vw; top: 38%; }
  .o4 { width: 22vw; left: 62vw; top: 34%; }
  .o5 { width: 30vw; left: 38vw; top: 62%; }
  .o6 { width: 32vw; left: 4vw; top: 68%; }

  .glitch { height: 220vh; }
  .g1 { left: 4vw; } .g2 { left: 30vw; } .g3 { left: 4vw; } .g4 { left: 20vw; } .g5 { display: none; }
  .gi-1 { width: 46vw; left: 4vw; } .gi-2 { width: 36vw; right: 4vw; }

  .team { grid-template-columns: 1fr; row-gap: 44px; }

  .menu-head { display: flex; flex-direction: column; gap: 20px; }
  .course { grid-template-columns: auto 1fr auto; row-gap: 10px; }
  .c-p { grid-column: 3; }
  .c-n { grid-column: 1; }
  .c-k { grid-column: 2; }
  .c-p { grid-column: 3; }
  .c-t, .c-d { grid-column: 1 / -1; }

  .faq-grid { display: flex; flex-direction: column; gap: 30px; }
  .footer-info { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .loader { display: none; }
  .g-block, .g-final { opacity: 1; }
}