:root {
  --bg: #f3f3f2;
  --surface: #e7e8ea;
  --ink: #13213a;
  --muted: #4d5566;
  --accent: #1c3768;
  --accent-ink: #ffffff;
  --deep: #13213a;
  --paper: #fcfcfc;
  --ok: #24573a;
  --warn: #8a2c1d;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --step-mark: clamp(3.25rem, 2rem + 5.4vw, 6.5rem);

  --m: clamp(20px, 3.9vw, 56px);
  --col: clamp(20px, 22vw, 320px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "STIX Two Text", "Noto Serif Devanagari", Georgia, serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }

/* ---------- top ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 36ch);
  gap: 24px;
  padding: var(--m) var(--m) 0;
  align-items: start;
}
.wordmark { text-decoration: none; display: inline-flex; flex-direction: column; gap: 6px; }
.wordmark:hover { color: var(--ink); }
.wordmark__abbr { font-size: var(--step-mark); font-weight: 600; letter-spacing: -0.035em; line-height: 0.9; }
.wordmark__full { font-size: var(--step-small); color: var(--muted); padding-left: 0.2em; }
.top__side { text-align: right; justify-self: end; }
.top__line { font-size: var(--step-small); color: var(--ink); }
.top__nav { margin-top: 14px; display: flex; gap: 22px; justify-content: flex-end; font-size: var(--step-small); }
.top__nav a { text-decoration: none; }
.top__nav a:hover { text-decoration: underline; }

/* ---------- hero: card on a plinth ---------- */
.hero {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 4vh, 56px) var(--m) 0;
}
.plinth {
  width: min(680px, 88vw);
  aspect-ratio: 1.36;
  background: var(--surface);
  display: grid;
  place-items: center;
  position: relative;
}
.plinth__stage {
  position: relative;
  width: 86%;
  aspect-ratio: 85.6 / 54;
}
.plinth__stage .ngc {
  position: absolute; inset: 0;
  --k: calc(min(680px, 88vw) * 0.86 / 85.6);
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.plinth__stage .ngc.is-out { opacity: 0; transform: translateY(6px); }
.plinth__stage .ngc.is-arriving { opacity: 0; transform: translateY(10px); }

.verify { width: min(680px, 88vw); margin: 0 0 8px; }
.verify__title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; }
.verify__label { display: block; margin-top: 6px; font-size: var(--step-small); color: var(--muted); }
.verify__row { display: flex; margin-top: 12px; }
.verify input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #b9bcc4; border-right: 0;
  border-radius: 0;
  padding: 14px 16px;
}
.verify input::placeholder { color: #7a8090; text-transform: none; letter-spacing: 0; }
.verify input:focus { outline: none; border-color: var(--accent); background: #fff; }
button, .button {
  font: inherit; font-size: 1.0625rem;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 0;
  padding: 14px 28px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.12s;
}
button:hover { background: var(--ink); }
button:active { transform: translateY(1px); }
.verify__samples { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
.verify__samples .linklike { margin-left: 10px; color: var(--ink); letter-spacing: 0.02em; }
.verify__status { min-height: 1.6em; margin-top: 12px; font-size: var(--step-body); }
.verify__status.is-ok { color: var(--ok); }
.verify__status.is-bad { color: var(--warn); }
.verify__status strong { font-weight: 600; }

.result {
  width: min(680px, 88vw);
  margin-top: 32px;
}
.result__back { aspect-ratio: 85.6 / 54; position: relative; }
.result__back .ngc { position: absolute; inset: 0; --k: calc(min(680px, 88vw) / 85.6); }
.result__list {
  display: grid; grid-template-columns: 11rem 1fr; gap: 6px 20px;
  margin: 28px 0 0; font-size: var(--step-body);
}
.result__list dt { color: var(--muted); }
.result__list dd { margin: 0; }
.result__actions { margin-top: 24px; font-size: var(--step-small); }
.linklike { background: none; color: inherit; padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.linklike:hover { background: none; color: var(--accent); }

/* ---------- intro: narrow column ---------- */
.intro {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 340px) 1fr;
  column-gap: clamp(32px, 6vw, 120px);
  padding: clamp(96px, 14vh, 160px) var(--m) 160px 0;
  align-items: start;
}
.intro__col { grid-column: 2; display: grid; gap: 1.1em; font-size: var(--step-body); }
.intro__col p { color: var(--muted); }
.intro__col .intro__lead { color: var(--ink); font-weight: 600; }
.intro__col p:last-child { color: var(--ink); }
.intro__fig { grid-column: 3; margin: 6px 0 0; max-width: 520px; }
.intro__fig img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }

/* ---------- the slip ---------- */
.slipband {
  background: var(--deep);
  color: #eef0f4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  padding: clamp(96px, 14vh, 150px) var(--m) clamp(110px, 16vh, 170px);
  align-items: start;
}
.slipband__text { grid-column: 1 / span 5; padding-left: calc(var(--col) - var(--m)); }
.slipband h2 { font-size: var(--step-head); }
.slipband__text p { margin-top: 20px; max-width: 30ch; color: #d3d7e0; }
.slipband__img { margin-top: 40px; width: min(340px, 100%); aspect-ratio: 1; object-fit: cover; }
.slip {
  grid-column: 7 / span 5;
  max-width: 480px;
  background: var(--paper);
  color: var(--ink);
  padding: 30px 30px 44px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 96.5% 100%, 93% calc(100% - 10px), 89.5% 100%, 86% calc(100% - 10px), 82.5% 100%, 79% calc(100% - 10px), 75.5% 100%, 72% calc(100% - 10px), 68.5% 100%, 65% calc(100% - 10px), 61.5% 100%, 58% calc(100% - 10px), 54.5% 100%, 51% calc(100% - 10px), 47.5% 100%, 44% calc(100% - 10px), 40.5% 100%, 37% calc(100% - 10px), 33.5% 100%, 30% calc(100% - 10px), 26.5% 100%, 23% calc(100% - 10px), 19.5% 100%, 16% calc(100% - 10px), 12.5% 100%, 9% calc(100% - 10px), 5.5% 100%, 2% calc(100% - 10px), 0 100%);
}
.slip__group + .slip__group { margin-top: 28px; }
.slip h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.slip__row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.slip__row span:first-child { flex: none; max-width: 55%; }
.slip__row span:last-child { text-align: right; color: var(--muted); }
.slip__row i {
  flex: 1; min-width: 16px; height: 4px; align-self: center; margin-top: 6px;
  background-image: radial-gradient(circle, #9aa0ad 1.2px, transparent 1.4px); /* taste-skill-ignore: dotted leader on the slip, drawn as dots */
  background-size: 7px 4px; background-repeat: repeat-x; background-position: left center;
}
.slip__total {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  margin: 30px -30px 0; padding: 0 30px; min-height: 44px;
  background: var(--ink); color: var(--paper);
}

/* ---------- what we test ---------- */
.tested {
  padding: 20vh var(--m) 20vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}
.tested h2 { grid-column: 1 / -1; font-size: 1.75rem; margin-bottom: 96px; padding-left: calc(var(--col) - var(--m)); }
.tested__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-left: calc(var(--col) - var(--m)); }
.tested__col { grid-column: span 3; font-size: 1.0625rem; line-height: 1.3; }
.tested__col h3 { font-size: 1.0625rem; letter-spacing: 0; margin-bottom: 1.3em; }
.tested__col ul { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.tested__col li { cursor: default; padding: 1px 0; transition: color 0.2s; }
.tested__col li:hover, .tested__col li:focus { color: var(--ink); outline: none; }
.tested__sum { display: none; color: var(--muted); margin-top: 1em; }
.tested__aside { grid-column: 10 / span 3; margin: 0; }
.tested__aside img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tested__aside figcaption { min-height: 3em; color: var(--ink); font-size: 1.0625rem; }

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  padding: 160px var(--m) 120px;
  align-items: start;
  background: var(--surface);
}
.contact__line { grid-column: 1 / span 6; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; padding-left: calc(var(--col) - var(--m)); }
.contact__img { grid-column: 8 / span 2; width: 160px; height: 160px; object-fit: cover; }
.contact__links { grid-column: 10 / span 3; }
.contact__q { font-size: 1.125rem; font-weight: 600; }
.contact__links ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; font-size: 1.125rem; }
.contact__meta { margin-top: 14px; font-size: var(--step-small); color: var(--muted); }

/* ---------- footer ---------- */
.foot { padding: 30svh var(--m) 30px; }
.credits { font-size: var(--step-small); color: var(--muted); max-width: 70ch; margin-bottom: 40px; }
.credits a { color: var(--ink); }
.foot__line {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
  font-size: var(--step-small); color: var(--muted);
}
.foot__links { display: flex; gap: 24px; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__year { text-align: right; }

/* ---------- motion ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.intro__fig img, .slipband__img { transition: transform 6s var(--ease); }
.intro__fig.is-in img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .plinth__stage .ngc, .intro__fig img { transition: none; }
}

.js .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .stagger > * { opacity: 1; transform: none; transition: none; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .slipband { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .slipband__text { grid-column: 1; padding-left: 0; }
  .slip { grid-column: 2; }
  .tested__col { grid-column: span 4; }
  .tested__aside { grid-column: 1 / span 6; margin-top: 48px; }
  .contact__line { grid-column: 1 / span 7; padding-left: 0; }
  .contact__img { grid-column: 9 / span 4; }
  .contact__links { grid-column: 1 / span 8; margin-top: 40px; }
  .intro { grid-template-columns: 8vw minmax(0, 340px) 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr; padding: 20px 20px 0; }
  .wordmark__abbr { font-size: 22vw; }
  .top__side { text-align: left; justify-self: start; }
  .top__nav { justify-content: flex-start; }
  .hero { padding: 28px 20px 0; min-height: 0; }
  .plinth { width: calc(100% + 40px); margin: 0 -20px; aspect-ratio: 1.42; }
  .plinth__stage { width: 92%; }
  .plinth__stage .ngc { --k: calc(100vw * 0.92 / 85.6); }
  .verify, .result { width: 100%; }
  .result__back .ngc { --k: calc((100vw - 40px) / 85.6); }
  .verify__row button { padding: 14px 18px; }
  .result__list { grid-template-columns: 1fr; gap: 0; }
  .result__list dd { margin-bottom: 10px; }
  .intro { grid-template-columns: 1fr; padding: 96px 20px 96px; row-gap: 48px; }
  .intro__col { grid-column: 1; width: 86%; }
  .intro__fig { grid-column: 1; }
  .slipband { grid-template-columns: 1fr; padding: 96px 16px 110px; row-gap: 48px; }
  .slipband__text, .slip { grid-column: 1; padding-left: 0; }
  .slipband__text { padding: 0 4px; }
  .slipband__img { display: none; }
  .slip { max-width: none; padding: 24px 20px 40px; }
  .slip__total { margin: 26px -20px 0; padding: 0 20px; }
  .tested { padding: 96px 20px; grid-template-columns: 1fr; }
  .tested h2 { font-size: 1.5rem; margin-bottom: 48px; padding-left: 0; }
  .tested__grid { grid-template-columns: 1fr; padding-left: 0; row-gap: 40px; }
  .tested__col { grid-column: 1; font-size: 1.125rem; line-height: 1.4; }
  .tested__col li { color: var(--ink); }
  .tested__sum { display: block; }
  .tested__aside { grid-column: 1; }
  .contact { grid-template-columns: 96px 1fr; padding: 96px 20px; row-gap: 32px; column-gap: 20px; }
  .contact__line { grid-column: 1 / -1; font-size: 1.5rem; padding-left: 0; }
  .contact__img { grid-column: 1; width: 96px; height: 96px; }
  .contact__links { grid-column: 2; }
  .foot { padding: 20svh 20px 24px; }
  .foot__line { grid-template-columns: 1fr; gap: 8px; }
  .foot__links { flex-wrap: wrap; gap: 16px; }
  .foot__year { text-align: left; }
}