/* Aurora Global Colors, variant C: the range as a stack of real folders on a dark stage,
   the sample request as a clip-out paper coupon. Cinematic premium override (BRIEF.md, 2026-11-02). */

:root {
  --stage: #0B0C10;
  --stage-2: #111318;
  --stage-3: #16181E;
  --day: #F5F5F3;
  --paper: #FFFFFF;
  --paper-warm: #FBFAF6;
  --ink: #141414;
  --ink-soft: #55565C;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.7);
  --blue: #1E39F8;
  --green: #45D889;
  --yellow: #FFD500;
  --orange: #FF7935;
  --grey-1: #828282;
  --grey-2: #B4B4B4;
  --grey-3: #E7E7E7;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-small: 0.9375rem;
  --s-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  --s-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  --s-head: clamp(2.25rem, 1.2rem + 3.5vw, 4.75rem);
  --s-figure: clamp(3.25rem, 1.6rem + 4.6vw, 6.25rem);
  --s-display: clamp(3.75rem, 10.6vw, 11rem);

  --m: clamp(1rem, 3vw, 3rem);
  --g: clamp(1rem, 1.8vw, 1.75rem);
  --section: clamp(6rem, 11vw, 11rem);

  --tab-h: 40px;
  --strip: clamp(44px, 6.4vh, 58px);
  --front: clamp(210px, 30vh, 340px);
  --sheet-off: 72px;
  --r-obj: 18px;

  --sh-dark: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35), 0 44px 90px rgba(0, 0, 0, 0.45);
  --sh-day: 0 1px 2px rgba(20, 22, 30, 0.06), 0 10px 26px rgba(20, 22, 30, 0.08), 0 40px 80px rgba(20, 22, 30, 0.12);
  --edge-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.07);

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --light-face: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0.07) 14px, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.16) 100%);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 240ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--stage); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--stage); color: var(--on-dark); font-family: var(--font); font-size: var(--s-body); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, dl, dd, ul, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul[role="list"] { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.day :focus-visible, .sheet--day :focus-visible, .letter :focus-visible, .coupon :focus-visible, .fits :focus-visible { outline-color: var(--blue); }
::selection { background: var(--blue); color: #fff; }
:target { scroll-margin-top: 80px; }
h1, h2, h3 { font-weight: 300; text-wrap: balance; }
p { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: 12px; z-index: 80; clip-path: inset(50%); background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: 999px; font-weight: 600; }
.skip:focus { clip-path: none; }
.wrap { padding-inline: var(--m); }

.h-head { font-size: var(--s-head); line-height: 1.02; letter-spacing: -0.04em; font-weight: 300; }
.lead { font-size: var(--s-lead); line-height: 1.45; max-width: 36ch; color: var(--on-dark-soft); }
.day { background: var(--day); color: var(--ink); }
.day .lead { color: var(--ink-soft); }

/* ---------- buttons: one pill ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.pill:active { transform: scale(0.97); }
.pill--light { background: var(--paper); color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22); }
.pill--ink { background: var(--ink); color: var(--paper); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 8px 22px rgba(20, 20, 30, 0.18); }
.pill--ghost { background: rgba(255, 255, 255, 0.04); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); }
.pill--blue { background: var(--blue); color: #fff; box-shadow: 0 1px 1px rgba(10, 20, 120, 0.3), 0 12px 30px -6px rgba(30, 57, 248, 0.55); }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: currentColor; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
.textlink:active { opacity: 0.7; }

/* =================================================================== GLASS HEADER */
.site {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 64px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--m);
  background: rgba(11, 12, 16, 0.8); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.site.is-on { transform: none; visibility: visible; transition: transform 280ms var(--ease-out), visibility 0s; }
.site__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.site__brand svg { width: 26px; height: 27px; }
.site__nav { display: flex; gap: 28px; font-size: var(--s-small); font-weight: 500; }
.site__nav a { text-decoration: none; color: var(--on-dark-soft); transition: color var(--t-hover) ease; }
.site__cta { justify-self: end; min-height: 40px; padding: 0 18px; font-size: var(--s-small); }

/* =================================================================== HERO */
.hero { position: relative; isolation: isolate; min-height: max(100svh, 720px); overflow: hidden; background: var(--stage); text-align: center; }
.hero__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% -5%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 70%),
    radial-gradient(42% 38% at 50% 96%, rgba(30, 57, 248, 0.42), rgba(30, 57, 248, 0) 72%),
    radial-gradient(26% 30% at 18% 88%, rgba(69, 216, 137, 0.16), rgba(69, 216, 137, 0) 70%),
    radial-gradient(26% 30% at 84% 84%, rgba(255, 213, 0, 0.12), rgba(255, 213, 0, 0) 70%);
}
.topbar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--m) 0; font-size: var(--s-small); }
.topbar__side { justify-self: start; }
.topbar__side--end { justify-self: end; display: flex; gap: 28px; }
.topbar__link { text-decoration: none; font-weight: 500; color: var(--on-dark-soft); padding: 8px 0; transition: color var(--t-hover) ease; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; }
.wordmark__mark { width: 30px; height: 32px; color: var(--paper); }
.hero__title { position: relative; z-index: 3; margin-top: clamp(28px, 4.6vh, 56px); font-size: var(--s-display); line-height: 0.98; letter-spacing: -0.055em; font-weight: 300; white-space: nowrap; }
.mask { display: block; overflow: hidden; padding: 0 0.04em 0.08em; margin-bottom: -0.08em; }
.mask > span { display: block; }
.hero__sub { position: relative; z-index: 3; margin: 20px auto 0; max-width: 46ch; padding-inline: var(--m); font-size: var(--s-lead); line-height: 1.45; color: var(--on-dark-soft); }

.desk { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + 4 * var(--strip) + var(--front)); perspective: 1700px; perspective-origin: 50% -30%; z-index: 2; }
.folders { position: absolute; left: 7%; right: 7%; top: 0; bottom: -60px; transform: rotateX(16deg); transform-origin: 50% 100%; transform-style: preserve-3d; text-align: left; }
.folder {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--tab-h) + (4 - var(--d)) * var(--strip));
  border-radius: 6px 6px 0 0; color: var(--ink);
  background: var(--noise), var(--light-face), var(--fc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 -2px 6px rgba(0, 0, 0, 0.22), 0 -22px 44px -18px rgba(0, 0, 0, 0.6);
}
.folder--blue { --fc: #1B33E6; color: #fff; }
.folder--grey { --fc: #ECEBE6; }
.folder--yellow { --fc: var(--yellow); }
.folder--green { --fc: var(--green); }
.folder--orange { --fc: var(--orange); }
.tab {
  position: absolute; left: min(var(--x), calc(100% - 210px)); top: calc(-1 * var(--tab-h) + 1px); height: var(--tab-h);
  display: flex; align-items: center; padding: 0 30px;
  background: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08)), var(--fc);
  color: inherit; text-decoration: none; font-weight: 500; font-size: 1rem; letter-spacing: -0.005em; white-space: nowrap;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 100%, 0 100%);
  transition: transform var(--t-ui) var(--ease-out);
}
.folder--front { --fc: #1B33E6; background: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25) 90px, rgba(0, 0, 0, 0.35)), #1A2FD4; transform-style: preserve-3d; }
.print {
  position: absolute; right: 7%; top: -150px; width: min(31%, 400px); z-index: 1;
  padding: 10px 10px 30px; background: var(--paper-warm); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.35), 0 40px 70px rgba(0, 0, 0, 0.35);
  transform: rotate(2.4deg);
}
.print__video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #cfcfcf; border-radius: 1px; filter: contrast(1.05) saturate(1.08); }
.cover {
  position: absolute; left: 0; right: 0; top: 64px; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 32px; padding: 30px 32px;
  border-radius: 10px 10px 0 0; color: #fff;
  background: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0.06) 16px, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.42) 100%), #1E39F8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 -3px 8px rgba(0, 0, 0, 0.18), 0 -28px 50px -20px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%; transform: rotateX(-5deg);
}
.cover__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.cover .textlink { color: #fff; }
.cover__note { max-width: 40ch; font-size: var(--s-body); line-height: 1.45; color: rgba(255, 255, 255, 0.86); padding-top: 4px; }

/* =================================================================== RANGE */
.range { padding-top: var(--section); background: var(--stage); }
.range__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); align-items: end; padding-bottom: 96px; }
.range__head .h-head { grid-column: 1 / 8; }
.range__head .lead { grid-column: 9 / 13; }
.stack { position: relative; padding: 0 clamp(0px, 1.2vw, 16px); }
.sheet {
  position: sticky; top: calc(var(--tab-h) + var(--i) * var(--sheet-off));
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--g);
  min-height: calc(100svh - var(--tab-h) - var(--i) * var(--sheet-off));
  margin-top: var(--tab-h); border-radius: var(--r-obj) var(--r-obj) 0 0; color: var(--on-dark);
  background: radial-gradient(70% 90% at 0% 100%, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0) 62%), var(--stage-2);
  box-shadow: inset 0 2px 0 rgba(var(--c-rgb), 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 -18px 40px -22px rgba(0, 0, 0, 0.7);
}
.sheet--day { color: var(--ink); background: radial-gradient(70% 90% at 0% 100%, rgba(20, 20, 20, 0.06), rgba(20, 20, 20, 0) 62%), var(--paper); box-shadow: inset 0 2px 0 rgba(20, 20, 20, 0.12), 0 -18px 40px -22px rgba(0, 0, 0, 0.55); }
.sheet__tab {
  position: absolute; top: calc(-1 * var(--tab-h) + 1px); left: min(var(--x), calc(100% - 210px)); height: var(--tab-h);
  display: flex; align-items: center; padding: 0 30px; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06)), var(--c);
  font-weight: 500; font-size: 1rem; white-space: nowrap; clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 100%, 0 100%);
}
.sheet__tab--light { color: #fff; }
.sheet__text { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: flex-start; gap: 36px; padding: clamp(32px, 4vw, 56px) 0 48px clamp(20px, 3vw, 48px); }
.sheet__text .h-head { max-width: 11ch; }
.sheet__low { display: grid; gap: 30px; }
.sheet__low > p { max-width: 40ch; font-size: var(--s-lead); line-height: 1.45; color: var(--on-dark-soft); }
.sheet--day .sheet__low > p { color: var(--ink-soft); }
.fam { display: grid; gap: 0; max-width: 48ch; }
.fam div { display: grid; padding: 14px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.sheet--day .fam div { box-shadow: inset 0 1px 0 rgba(20, 20, 20, 0.1); }
.fam dt { font-weight: 600; }
.fam dd { line-height: 1.45; color: var(--on-dark-soft); }
.sheet--day .fam dd { color: var(--ink-soft); }
.sheet__pic { grid-column: 7 / 13; position: relative; overflow: hidden; border-radius: 0 var(--r-obj) 0 0; }
.sheet__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.05); will-change: transform; }
.sheet__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--stage-2) 0, rgba(17, 19, 24, 0) 26%), linear-gradient(0deg, rgba(11, 12, 16, 0.45), rgba(11, 12, 16, 0) 40%); }
.sheet--day .sheet__pic::after { background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 18%); }

/* =================================================================== FINDER (day) */
.finder { padding: var(--section) 0; }
.finder__in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--g); align-items: start; }
.finder__intro { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); align-items: end; margin-bottom: 64px; }
.finder__intro .h-head { grid-column: 1 / 8; }
.finder__intro .lead { grid-column: 9 / 13; }
.index { grid-column: 1 / 8; list-style: none; padding: 0; margin: 0; }
.index li { box-shadow: inset 0 -1px 0 rgba(20, 20, 20, 0.09); }
.index__row {
  display: flex; align-items: center; gap: 20px; width: 100%; text-align: left;
  padding: 10px 0; font-size: clamp(2rem, 1rem + 2.9vw, 3.75rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.04em; color: var(--ink);
  transition: color var(--t-hover) ease;
}
.index__row span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.index__row[aria-pressed="true"] { color: var(--blue); }
.index__row:active span { transform: scale(0.98); }
.index__thumb { display: none; }
.finder__side { grid-column: 8 / 13; position: sticky; top: 96px; }
.frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-obj); background: #ddd; box-shadow: var(--sh-day); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); filter: contrast(1.05) saturate(1.05) blur(6px); transition: opacity var(--t-ui) ease, transform 420ms var(--ease-out), filter var(--t-ui) ease; }
.frame img.is-on { opacity: 1; transform: none; filter: contrast(1.05) saturate(1.05); }
.fits { position: relative; margin: -72px 0 0 clamp(16px, 3vw, 40px); background: var(--paper); color: var(--ink); padding: 26px 26px 28px; border-radius: var(--r-obj); box-shadow: var(--sh-day), inset 0 0 0 1px rgba(20, 20, 20, 0.05); }
.fits__title { font-size: var(--s-lead); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; padding: 0; }
.fits__list { display: grid; }
.check { display: grid; grid-template-columns: 20px 16px 1fr; align-items: center; gap: 12px; padding: 9px 0; box-shadow: inset 0 -1px 0 rgba(20, 20, 20, 0.08); cursor: pointer; line-height: 1.3; font-size: var(--s-small); color: var(--ink-soft); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.check b { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; }
.key { width: 16px; height: 10px; border-radius: 2px 2px 0 0; background: var(--k); clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 100%, 0 100%); }
.key--blue { --k: var(--blue); } .key--grey { --k: var(--grey-2); } .key--yellow { --k: #E8C200; } .key--green { --k: var(--green); } .key--orange { --k: var(--orange); }
.fits__note { margin: 14px 0 18px; font-size: var(--s-small); color: var(--ink-soft); }
.fits .pill { width: 100%; }

/* =================================================================== PLACES (dark) */
.places { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--g); align-items: center; min-height: min(92svh, 900px); padding: var(--section) var(--m); background: var(--stage); }
.places::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(38% 50% at 26% 50%, rgba(30, 57, 248, 0.28), rgba(30, 57, 248, 0) 70%); }
.places__plate { padding: 0 clamp(0px, 3vw, 48px) 0 0; }
.places__video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; background: #d6d6d6; box-shadow: var(--sh-dark), var(--edge-dark); }
.places__col { display: flex; flex-direction: column; gap: 40px; align-self: stretch; justify-content: center; padding-left: clamp(0px, 2vw, 32px); }
.places__tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ptab { height: 44px; padding: 0 22px; border-radius: 999px; font-size: 1rem; font-weight: 500; color: var(--on-dark-soft); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.ptab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25); }
.ptab:active { transform: scale(0.97); }
.ppanel { display: grid; gap: 36px; }
.js .ppanel[hidden] { display: none; }
.ppanel__mid { display: grid; gap: 22px; }
.ppanel__desc { max-width: 36ch; font-size: var(--s-lead); line-height: 1.45; color: var(--on-dark-soft); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 28px; }
.facts div { display: contents; }
.facts dt, .facts dd { padding: 11px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
.facts dt { font-size: var(--s-small); font-weight: 500; color: var(--on-dark-soft); }
.facts a { text-decoration: none; font-weight: 500; transition: color var(--t-hover) ease; }
.cells { display: flex; flex-wrap: wrap; gap: 12px; }
.places__vat { font-size: var(--s-small); color: var(--on-dark-soft); }

/* =================================================================== LEDGER (day, white) */
.ledger { padding: var(--section) 0 calc(var(--section) * 0.8); background: var(--paper); }
.ledger__in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--g); }
.ledger__left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; align-self: center; }
.ledger__h span { display: block; white-space: nowrap; }
.ledger__h .soft { color: #8A8B90; }
.ledger__rows { grid-column: 7 / 13; display: grid; }
.lrow { display: grid; grid-template-columns: 3.3em 1.1em 1fr; align-items: baseline; padding: 14px 0; font-size: var(--s-figure); box-shadow: inset 0 -1px 0 rgba(20, 20, 20, 0.09); }
.lrow dt { display: contents; }
.lrow .w, .lrow .f { font-weight: 300; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums lining-nums; }
.lrow .w { text-align: right; }
.lrow .f { text-align: left; }
.lrow dd { font-size: var(--s-body); line-height: 1.4; padding-left: 0.5rem; max-width: 30ch; font-weight: 500; color: var(--ink-soft); }
.wall { margin-top: clamp(72px, 9vw, 140px); overflow: hidden; }
.wall__row { display: flex; gap: 16px; width: max-content; padding-inline: var(--m); will-change: transform; }
.wall__row li { width: clamp(220px, 25vw, 380px); }
.wall__row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; filter: grayscale(1) contrast(1.08); box-shadow: var(--sh-day); transition: filter 600ms ease; }
.wall__row span { display: block; margin-top: 12px; font-size: var(--s-small); font-weight: 500; color: var(--ink-soft); }

/* =================================================================== SUSTAINABILITY (dark, full-bleed photo) */
.green { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 760px); display: flex; align-items: center; background: var(--stage); }
.green__pic { position: absolute; inset: 0; z-index: -2; }
.green__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: contrast(1.05) saturate(1.05); transform-origin: 70% 50%; }
.green::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 12, 16, 0.94) 0, rgba(11, 12, 16, 0.78) 38%, rgba(11, 12, 16, 0.2) 75%, rgba(11, 12, 16, 0.1) 100%), radial-gradient(40% 60% at 10% 90%, rgba(69, 216, 137, 0.25), rgba(69, 216, 137, 0) 70%), linear-gradient(0deg, rgba(11, 12, 16, 0.6), rgba(11, 12, 16, 0) 30%); }
.green__text { width: 100%; padding-block: var(--section); display: grid; gap: 28px; align-content: center; }
.green__text > * { max-width: 640px; }
.green__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 12px; }
.green__list li { display: grid; gap: 6px; padding: 22px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.green__list b { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; }
.green__list span { color: var(--on-dark-soft); line-height: 1.45; }
.green__range { color: var(--on-dark-soft); font-size: var(--s-small); }

/* =================================================================== LETTER (day) */
.letter-wrap { padding: var(--section) var(--m) calc(var(--section) + 20px); overflow: hidden; }
.letter-shadow { width: min(640px, 100%); margin: 0 auto; filter: drop-shadow(0 1px 1px rgba(20, 22, 30, 0.08)) drop-shadow(0 12px 22px rgba(20, 22, 30, 0.09)) drop-shadow(0 40px 50px rgba(20, 22, 30, 0.12)); transform: rotate(-1.2deg); }
.letter {
  position: relative; color: var(--ink);
  background: var(--noise), var(--paper-warm);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 10px 0, #000 9.5px, transparent 10px) bottom left / 20px 10px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 10px 0, #000 9.5px, transparent 10px) bottom left / 20px 10px repeat-x;
  padding-bottom: 10px;
}
.letter__plate { padding: 56px 56px 0; }
.letter__plate img { width: 100%; aspect-ratio: 1200 / 891; object-fit: cover; border-radius: 4px; filter: contrast(1.04) saturate(1.04); }
.letter__plate figcaption { margin-top: 10px; font-size: var(--s-small); color: var(--ink-soft); }
.letter__body { padding: 36px 56px 52px; display: grid; gap: 1.1em; font-size: var(--s-body); line-height: 1.65; }
.letter__sign { margin-top: 0.6em; font-size: var(--s-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.letter__sign span { display: block; font-size: var(--s-small); font-weight: 400; color: var(--ink-soft); letter-spacing: 0; margin-top: 4px; }
.perf { height: 10px; margin: 0 6px; background: radial-gradient(circle, var(--day) 2.6px, rgba(245, 245, 243, 0) 3.1px) center / 16px 10px repeat-x; }
.letter__strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 22px 56px 26px; }
.letter__mail { font-size: var(--s-lead); font-weight: 500; text-decoration: none; letter-spacing: -0.02em; transition: color var(--t-hover) ease; }
.letter__who { grid-column: 1; grid-row: 2; font-size: var(--s-small); color: var(--ink-soft); }
.letter__who a { text-decoration: none; font-weight: 600; color: var(--ink); white-space: nowrap; }
.letter__strip .pill { grid-column: 2; grid-row: 1 / 3; }

/* =================================================================== COUPON (dark stage) */
.coupon-wrap { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) var(--m); background: var(--stage); }
.coupon__light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 55% at 50% 40%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%), radial-gradient(35% 40% at 30% 70%, rgba(255, 213, 0, 0.14), rgba(255, 213, 0, 0) 70%), radial-gradient(35% 40% at 75% 75%, rgba(30, 57, 248, 0.22), rgba(30, 57, 248, 0) 70%); }
.coupon-shadow { width: min(1180px, 100%); margin: 0 auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4)) drop-shadow(0 50px 70px rgba(0, 0, 0, 0.45)); transform: rotate(-1.4deg); }
.coupon {
  --notch: 15px; --cut-x: 44%;
  position: relative; display: grid; grid-template-columns: 44fr 12px 56fr; border-radius: 16px; color: var(--ink);
  background: var(--noise), radial-gradient(90% 80% at 0% 0%, rgba(255, 213, 0, 0.3), rgba(255, 213, 0, 0) 55%), var(--paper-warm);
  -webkit-mask: radial-gradient(circle var(--notch) at var(--cut-x) 0, transparent calc(var(--notch) - 0.5px), #000 var(--notch)), radial-gradient(circle var(--notch) at var(--cut-x) 100%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle var(--notch) at var(--cut-x) 0, transparent calc(var(--notch) - 0.5px), #000 var(--notch)), radial-gradient(circle var(--notch) at var(--cut-x) 100%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
          mask-composite: intersect;
}
.coupon__left { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 52px 48px 48px; }
.coupon__h { font-size: var(--s-head); line-height: 0.98; letter-spacing: -0.045em; font-weight: 300; max-width: 7ch; }
.coupon__low { display: grid; gap: 12px; max-width: 34ch; color: var(--ink-soft); }
.coupon__mail a { font-weight: 600; color: var(--ink); }
.coupon__perf { width: 12px; margin: 22px 0; background: radial-gradient(circle, var(--stage) 2.6px, rgba(11, 12, 16, 0) 3.1px) center / 12px 16px repeat-y; }
.coupon__right { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 44px 44px 40px; align-content: start; }
.field { display: grid; gap: 6px; position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--s-small); font-weight: 500; color: var(--ink-soft); }
.field input, .field select {
  height: 52px; width: 100%; padding: 0 14px; border: 0; border-radius: 10px;
  background: #F0EEE8; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08); font-size: 16px; font-weight: 500; color: var(--ink);
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.field:has(select)::after { content: ""; position: absolute; right: 18px; bottom: 22px; width: 10px; height: 6px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.field input::placeholder { color: #66676C; font-weight: 400; }
.field input:focus, .field select:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(30, 57, 248, 0.15); }
.field input.is-filled { animation: filled 900ms var(--ease-out); }
@keyframes filled { from { background-color: #FFF3B0; } }
.submit { grid-column: 1 / -1; width: 100%; min-height: 56px; margin-top: 8px; }
.coupon__tech { grid-column: 1 / -1; justify-self: start; margin-top: 2px; font-size: var(--s-small); }

/* =================================================================== FOOTER (dark) */
.back { padding: 20px var(--m) 56px; background: var(--stage); }
.back__card {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; width: min(1180px, 100%); margin: 0 auto;
  padding: 64px 56px 28px; min-height: 420px; border-radius: 4px 4px 20px 20px; color: var(--on-dark);
  background: var(--noise), radial-gradient(60% 80% at 100% 0%, rgba(30, 57, 248, 0.16), rgba(30, 57, 248, 0) 60%), var(--stage-3);
  box-shadow: var(--sh-dark), var(--edge-dark);
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 14px) no-repeat, radial-gradient(ellipse 50% 100% at 50% 100%, #000 99%, transparent 100%) top left / calc(100% / 12) 14px repeat-x;
          mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 14px) no-repeat, radial-gradient(ellipse 50% 100% at 50% 100%, #000 99%, transparent 100%) top left / calc(100% / 12) 14px repeat-x;
}
.back__card::before { content: ""; position: absolute; left: 56px; right: 56px; top: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow), var(--green) 50%, var(--blue)); opacity: 0.9; }
.back__msg { display: flex; flex-direction: column; gap: 16px; align-items: start; }
.back__sign { font-size: var(--s-head); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; }
.back__msg p { max-width: 38ch; color: var(--on-dark-soft); }
.back__msg .back__sign { color: var(--on-dark); }
.back__ids { font-size: var(--s-small); }
.back__addr { position: relative; padding-right: 116px; }
.stamp { position: absolute; top: 0; right: 0; width: 92px; padding: 6px; background: var(--paper-warm); border-radius: 2px; transform: rotate(4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.4); }
.stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.back__addr ul { display: grid; gap: 14px; font-size: 1.0625rem; line-height: 1.4; }
.back__addr li span { display: block; font-size: var(--s-small); color: var(--on-dark-soft); }
.back__addr a { text-decoration: none; font-weight: 500; margin-right: 12px; transition: color var(--t-hover) ease; }
.back__imprint { grid-column: 1 / -1; align-self: end; text-align: center; font-size: var(--s-small); color: var(--on-dark-soft); padding-top: 24px; }
.back__name { margin: 40px 0 0; text-align: center; font-size: clamp(2.5rem, 13vw, 14rem); font-weight: 300; letter-spacing: -0.06em; line-height: 0.9; color: var(--on-dark); white-space: nowrap; }

/* =================================================================== hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .tab:hover { transform: translateY(-6px); }
  .pill--light:hover { background: #E9ECFF; }
  .pill--ink:hover { background: #2A2C33; }
  .pill--ghost:hover { background: rgba(255, 255, 255, 0.1); }
  .pill--blue:hover { background: #3550FF; box-shadow: 0 1px 1px rgba(10, 20, 120, 0.3), 0 16px 36px -6px rgba(30, 57, 248, 0.7); }
  .textlink:hover { text-decoration-color: transparent; }
  .topbar__link:hover, .site__nav a:hover { color: #fff; }
  .ptab:not([aria-selected="true"]):hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .index:hover .index__row:not(:hover) { color: #8A8B90; }
  .index__row:hover span { transform: translateX(12px); }
  .check:hover b { color: var(--blue); }
  .facts a:hover, .back__addr a:hover { color: var(--yellow); }
  .letter__mail:hover { color: var(--blue); }
  .wall__row li:hover img { filter: grayscale(0) contrast(1.05); }
}

/* =================================================================== pre-animation states (only while GSAP is about to run) */
.anim [data-hero-line] { transform: translateY(110%); }
.anim [data-hero-fade], .anim [data-folder], .anim .topbar { opacity: 0; }
.anim [data-reveal] { opacity: 0; }

/* short laptop screens: keep the headline clear of the folder stack */
@media (max-height: 820px) and (min-width: 701px) {
  .hero__title { font-size: min(10.6vw, 16vh); margin-top: 24px; }
  .hero__sub { margin-top: 14px; font-size: 1.125rem; }
}

/* =================================================================== tablet */
@media (max-width: 1080px) {
  .site__nav { display: none; }
  .site { grid-template-columns: 1fr auto; }
  .range__head .h-head, .finder__intro .h-head { grid-column: 1 / -1; }
  .range__head .lead, .finder__intro .lead { grid-column: 1 / 10; }
  .index { grid-column: 1 / -1; }
  .finder__side { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: 48px; align-items: start; }
  .fits { margin: 48px 0 0 -64px; }
  .sheet__text { grid-column: 1 / 8; }
  .sheet__pic { grid-column: 8 / 13; }
  .ledger__left, .ledger__rows { grid-column: 1 / -1; }
  .ledger__rows { margin-top: 56px; }
  .places { grid-template-columns: 1fr; gap: 48px; }
  .places__plate { max-width: 560px; padding: 0; }
  .coupon { --cut-x: 0; grid-template-columns: 1fr;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut-y, 220px), transparent calc(var(--notch) - 0.5px), #000 var(--notch)), radial-gradient(circle var(--notch) at 100% var(--cut-y, 220px), transparent calc(var(--notch) - 0.5px), #000 var(--notch));
    -webkit-mask-composite: source-in;
            mask: radial-gradient(circle var(--notch) at 0 var(--cut-y, 220px), transparent calc(var(--notch) - 0.5px), #000 var(--notch)), radial-gradient(circle var(--notch) at 100% var(--cut-y, 220px), transparent calc(var(--notch) - 0.5px), #000 var(--notch));
            mask-composite: intersect; }
  .coupon__perf { width: auto; height: 12px; margin: 0 22px; background: radial-gradient(circle, var(--stage) 2.6px, rgba(11, 12, 16, 0) 3.1px) center / 16px 12px repeat-x; }
  .coupon__left { padding: 40px 32px 32px; }
  .coupon__right { padding: 32px; }
  .back__card { grid-template-columns: 1fr; }
}

/* =================================================================== phone */
@media (max-width: 700px) {
  :root { --tab-h: 34px; --strip: 50px; --sheet-off: 52px; --r-obj: 14px; }
  .site { height: 58px; }
  .site__brand span { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; padding-top: 18px; }
  .topbar__side:first-child { display: none; }
  .topbar__side--end a:first-child { display: none; }
  .wordmark { grid-column: 1 / 3; justify-self: start; font-size: 1rem; }
  .wordmark__mark { width: 26px; height: 28px; }
  .hero { min-height: max(100svh, 700px); }
  .hero__title { margin-top: 56px; font-size: 18.5vw; white-space: normal; line-height: 0.94; }
  .hero__title [data-hero-line] { max-width: 6.2ch; margin: 0 auto; }
  .hero__sub { font-size: var(--s-body); margin-top: 16px; max-width: 32ch; }
  .desk { height: calc(var(--tab-h) + 4 * var(--strip) + 210px); perspective: 1000px; }
  .folders { left: 10px; right: 10px; transform: rotateX(12deg); }
  .tab, .sheet__tab { left: var(--xm); font-size: 0.9375rem; padding: 0 22px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
  .print { right: 14px; top: -90px; width: 42%; padding: 6px 6px 16px; }
  .cover { top: 52px; padding: 22px 16px; }
  .cover__actions { width: 100%; }
  .cover .pill { width: 100%; }
  .cover__note { display: none; }

  .range__head { display: block; padding-bottom: 56px; }
  .range__head .lead { margin-top: 18px; }
  .stack { padding: 0; }
  .sheet { display: flex; flex-direction: column; position: relative; top: auto !important; min-height: 0; margin-top: var(--tab-h); }
  .sheet__pic { order: -1; aspect-ratio: 4 / 3; border-radius: var(--r-obj) var(--r-obj) 0 0; }
  .sheet__pic::after { background: linear-gradient(0deg, var(--stage-2) 0, rgba(17, 19, 24, 0) 40%); }
  .sheet--day .sheet__pic::after { background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 30%); }
  .sheet__text { padding: 8px 20px 36px; gap: 22px; }
  .sheet__low > p { font-size: var(--s-body); }

  .finder__intro { display: block; margin-bottom: 32px; }
  .finder__intro .lead { margin-top: 16px; }
  .index__row { font-size: 1.625rem; gap: 14px; padding: 8px 0; letter-spacing: -0.03em; }
  .index__thumb { display: block; flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
  .finder__side { grid-template-columns: 1fr; margin-top: 28px; }
  .frame { display: none; }
  .fits { margin: 0; padding: 22px 18px 24px; }

  .places { padding: 88px 16px; gap: 36px; }
  .places__video { border-radius: 16px; }
  .ptab { padding: 0 18px; }
  .cells .pill { flex: 1 1 100%; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; box-shadow: none; }
  .facts dd { padding-top: 2px; }

  .lrow { grid-template-columns: 54% 1fr; font-size: 15vw; row-gap: 8px; padding: 16px 0; }
  .lrow dd { grid-column: 1 / -1; padding-left: 0; }
  .wall__row li { width: 62vw; }

  .green { min-height: 0; }
  .green__pic img { object-position: 70% 50%; }
  .green::before { background: linear-gradient(180deg, rgba(11, 12, 16, 0.55) 0, rgba(11, 12, 16, 0.9) 45%, rgba(11, 12, 16, 0.96) 100%); }
  .green__list { grid-template-columns: 1fr; }

  .letter-wrap { padding-inline: 12px; }
  .letter-shadow { transform: rotate(-0.8deg); }
  .letter__plate { padding: 22px 22px 0; }
  .letter__body { padding: 26px 22px 38px; }
  .letter__strip { grid-template-columns: 1fr; padding: 18px 22px 24px; gap: 10px; }
  .letter__strip .pill { grid-column: 1; grid-row: auto; width: 100%; margin-top: 6px; }
  .letter__who { grid-row: auto; }

  .coupon-wrap { padding-inline: 12px; }
  .coupon-shadow { transform: rotate(-0.8deg); }
  .coupon__left { padding: 32px 20px 24px; }
  .coupon__right { grid-template-columns: 1fr; padding: 24px 20px 28px; }
  .field input, .field select { height: 54px; }

  .back { padding-inline: 10px; }
  .back__card { padding: 56px 20px 24px; gap: 36px; -webkit-mask-size: 100% calc(100% - 14px), calc(100% / 6) 14px; mask-size: 100% calc(100% - 14px), calc(100% / 6) 14px; }
  .back__card::before { left: 20px; right: 20px; top: 30px; }
  .back__addr { position: static; padding-right: 0; }
  .back__msg { padding-right: 84px; }
  .stamp { width: 66px; top: 56px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame img { transition: opacity var(--t-ui) ease; transform: none; filter: none; }
  .tab:hover, .index__row:hover span, .pill:active, .ptab:active { transform: none !important; }
  .letter-shadow, .coupon-shadow { transform: none; }
  .site, .site.is-on { transition: none; }
}