/* ==========================================================================
   sections — hero → about → case → catalogue → tester → contact → footer
   ========================================================================== */

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  gap: clamp(1.1rem, 3vh, 2.2rem);
  padding: calc(var(--gut) * 2 + 3rem) var(--gut) clamp(1.4rem, 4vh, 2.6rem);
}

.hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; }

.hero__title {
  display: grid;
  gap: clamp(0.1rem, 0.6vh, 0.5rem);
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 600, "wdth" 100;
}

/* Each line is its own hanging rule plus the letters beneath it. The rule is
   the shirorekha — the headline Devanagari hangs from — applied to Latin. */
.hero__line { display: block; position: relative; padding-top: 0.14em; }

.hero__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--rule);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__line.is-drawn .hero__rule { transform: scaleX(1); }

.hero__set { display: block; }
.hero__set--blue { color: var(--blue); }

/* The rule is a previous sibling of the set it belongs to, so it can only be
   reached from the line — a `~` from the set would never match. */
.hero__line:last-child .hero__rule { background: var(--blue); }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: clamp(0.7rem, 2vh, 1.2rem);
  border-top: 1px solid var(--line);
}

.hero__sub { max-width: 44ch; color: var(--ink-2); }
.hero__sub b { font-variation-settings: "wght" 600; color: var(--ink); }

.hero__hint { display: flex; align-items: center; color: var(--ink-4); }

/* Do not instruct a phone to move a pointer it does not have. */
@media (hover: none), (pointer: coarse) { .hero__hint { display: none; } }

/* On a narrow screen the display size bottoms out at its clamp minimum and
   the bottom-anchored hero leaves half a screen of air above three small
   lines. Give the type more of the viewport and take some height back. */
@media (max-width: 700px) {
  .hero { min-height: 86svh; }
  .hero__title { font-size: clamp(2.9rem, 13vw, 4.5rem); }
}

.hero__cue { display: flex; align-items: center; gap: 0.8em; }

.hero__cue-rule {
  position: relative;
  display: block;
  width: clamp(40px, 8vw, 90px);
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}

.hero__cue-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left;
  animation: draw 2.8s var(--ease-io) infinite;
}

@keyframes draw {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ── about ─────────────────────────────────────────────────────────────── */

.about {
  padding: var(--sec) var(--gut);
  display: grid;
  gap: clamp(2.5rem, 7vh, 5rem);
}

.about__body {
  max-width: 28ch;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "wght" 450, "wdth" 94;
}

.about__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns: 1fr;
  max-width: 1100px;
}

@media (min-width: 760px) { .about__grid { grid-template-columns: repeat(3, 1fr); } }

.about__grid p { color: var(--ink-2); max-width: 36ch; }

.about__h {
  margin-bottom: 0.7rem;
  padding-top: 0.5rem;
  border-top: var(--rule) solid var(--blue);
  color: var(--blue);
}

/* ── the process band ──────────────────────────────────────────────────── */

.band {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) { .band { grid-template-columns: repeat(4, 1fr); } }

.band__item { display: grid; gap: 0.6rem; }

.band__item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
  filter: grayscale(1) contrast(1.08);
}

/* ── the case ──────────────────────────────────────────────────────────────
   Full-bleed and inverted. This is the one dark room on the site, and the
   only place the paper metaphor is set aside — a type case is a drawer, and
   drawers are dark inside.
   ------------------------------------------------------------------------ */

.case {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--sec) var(--gut) clamp(2rem, 5vh, 4rem);
  display: grid;
  gap: clamp(2rem, 5vh, 3.5rem);
}

.case .meta { color: var(--on-ink-3); }

.case__head { display: grid; gap: clamp(0.9rem, 2.4vh, 1.6rem); max-width: 60ch; }

.case__h {
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "wght" 620, "wdth" 104;
}

.case__lead { max-width: 46ch; color: var(--on-ink-2); font-size: var(--t-lead); line-height: 1.38; }

.case__pit {
  position: relative;
  margin: 0;
  height: clamp(340px, 54svh, 580px);
  border: 1px solid var(--ink-line);
  background:
    linear-gradient(to bottom, rgba(244, 243, 238, 0.03), rgba(244, 243, 238, 0));
  overflow: hidden;
  touch-action: pan-y;
}

.case__pit canvas { width: 100%; height: 100%; display: block; }

.case__hud {
  position: absolute;
  left: clamp(0.7rem, 2vw, 1.3rem);
  right: clamp(0.7rem, 2vw, 1.3rem);
  bottom: clamp(0.7rem, 2vh, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.case__reset {
  pointer-events: auto;
  position: relative;
  padding-top: 0.45em;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  transition: color 0.4s var(--ease);
}

.case__reset::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--rule);
  background: var(--on-ink-3);
  transform-origin: left;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}

.case__reset:hover { color: var(--on-ink); }
.case__reset:hover::before { background: var(--blue); transform: scaleX(1); }

/* The readable equivalent of the pit. Present in the DOM at all times, shown
   whenever the simulation is not the thing doing the talking — reduced
   motion, no canvas, or a narrow screen. */
.case__list {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.no-sim .case__pit { height: auto; padding: clamp(1.2rem, 4vw, 2.5rem); }
.no-sim .case__pit canvas { display: none; }

/* The HUD counts sorts in a simulation that is not running, and offers to
   refill a drawer that cannot spill. Both are noise here. */
.no-sim .case__hud { display: none; }

.no-sim .case__list {
  position: static;
  width: auto; height: auto;
  margin: 0;
  clip-path: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: clamp(0.4rem, 1.2vw, 0.8rem);
}

.no-sim .case__list li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
  font-variation-settings: "wght" 500;
}

/* ── catalogue ─────────────────────────────────────────────────────────── */

.cat { padding: var(--sec) 0; display: grid; gap: clamp(2rem, 5vh, 3.5rem); }

.cat__head {
  display: grid;
  gap: clamp(0.9rem, 2.4vh, 1.6rem);
  max-width: 60ch;
  padding: 0 var(--gut);
}

.cat__h {
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "wght" 620, "wdth" 104;
}

.cat__lead { max-width: 48ch; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.38; }

/* A real horizontal scroller, not a hijacked vertical one: it uses native
   overflow, so a trackpad, a shift-wheel, a touch swipe, the keyboard and a
   screen reader all already work. Drag is added on top, never instead. */
.cat__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 0.5rem;
}

.cat__rail::-webkit-scrollbar { display: none; }
.cat__rail.is-drag { cursor: grabbing; }

.cat__track {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0 var(--gut);
  width: max-content;
}

.card {
  flex: 0 0 auto;
  width: clamp(260px, 34vw, 420px);
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: clamp(1rem, 2.4vw, 1.7rem);
  background: var(--paper-2);
  border-top: var(--rule) solid var(--ink);
  transition: background-color 0.45s var(--ease);
}

.card:hover { background: var(--paper-3); }

.card__n { color: var(--ink-4); }

/* The specimen line is set in the family the card is about. That is the
   entire point of a catalogue card and it is astonishing how many foundry
   sites set it in the site font. */
.card__spec {
  font-family: var(--f), var(--f-sans);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.4rem;
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

.card--deva .card__spec { font-size: clamp(2.3rem, 6.2vw, 4rem); }

.card__name {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variation-settings: "wght" 620, "wdth" 100;
}

.card__by { color: var(--blue); }
.card__note { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; }

.cat__hint { padding: 0 var(--gut); color: var(--ink-4); }

/* ── tester ────────────────────────────────────────────────────────────── */

.test { padding: var(--sec) var(--gut); display: grid; gap: clamp(2rem, 5vh, 3.5rem); }

.test__head { display: grid; gap: clamp(0.9rem, 2.4vh, 1.6rem); max-width: 60ch; }

.test__h {
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "wght" 620, "wdth" 104;
}

.test__lead { max-width: 50ch; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.38; }

.test__panel {
  display: grid;
  gap: clamp(1rem, 2.6vh, 1.8rem);
  padding: clamp(1rem, 2.6vw, 2rem);
  background: var(--paper-2);
  border-top: var(--rule) solid var(--ink);
}

.test__scripts { display: flex; gap: 0.5rem; }

.chip {
  padding: 0.42em 0.95em;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background-color 0.35s var(--ease);
}

.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* The editable line. Overflow is hidden on X so a long string cannot widen
   the page, and the caret colour is the accent so it reads as a tool. */
.test__stage {
  min-height: 1.3em;
  padding: 0.1em 0;
  font-size: 104px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 500, "wdth" 100;
  caret-color: var(--blue);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

.test__stage::-webkit-scrollbar { display: none; }
.test__stage:focus-visible { outline-offset: 6px; }

.test__axes {
  display: grid;
  gap: clamp(0.7rem, 2vw, 1.6rem);
  grid-template-columns: 1fr;
  padding-top: clamp(0.6rem, 1.6vh, 1rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 700px) { .test__axes { grid-template-columns: repeat(3, 1fr); } }

.axis { display: grid; grid-template-columns: 4.4rem 1fr 3.4rem; align-items: center; gap: 0.7rem; }
.axis__k { color: var(--ink-3); }
.axis__v { color: var(--ink); text-align: right; }

/* A slider drawn from scratch, because the native one is the single most
   platform-inconsistent control on the web and this is a page about drawing. */
.axis input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: ew-resize;
}

.axis input[type="range"]::-webkit-slider-runnable-track {
  height: var(--rule);
  background: var(--line-2);
}

.axis input[type="range"]::-moz-range-track {
  height: var(--rule);
  background: var(--line-2);
}

.axis input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--blue);
  border: 0;
  transition: transform 0.3s var(--ease-back);
}

.axis input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 0;
  transition: transform 0.3s var(--ease-back);
}

.axis input[type="range"]:hover::-webkit-slider-thumb,
.axis input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.35); }
.axis input[type="range"]:hover::-moz-range-thumb,
.axis input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.35); }

.test__css {
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--ink);
  color: var(--on-ink-2);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.test__css b { color: var(--blue); font-weight: 400; }

/* ── contact ───────────────────────────────────────────────────────────── */

.contact {
  padding: var(--sec) var(--gut);
  display: grid;
  gap: clamp(1.6rem, 4.5vh, 3rem);
}

.contact__h {
  display: grid;
  gap: clamp(0.1rem, 0.6vh, 0.5rem);
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 600, "wdth" 100;
}

.rows { display: grid; max-width: 900px; }
.rows li { border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.85rem, 2.4vh, 1.35rem) 0;
  transition: color 0.4s var(--ease);
}

@media (max-width: 620px) { .row { grid-template-columns: 5.5rem 1fr auto; } }

.row__v {
  font-size: clamp(1.05rem, 2.2vw, 1.7rem);
  letter-spacing: -0.015em;
  font-variation-settings: "wght" 480;
}

/* Label and value translate; the arrow holds. Shifting the whole row would
   carry the arrow across the section edge, and animating padding would lay
   the row out on every frame of the transition. */
.row__k, .row__v { transition: transform 0.5s var(--ease); }
a.row:hover { color: var(--blue); }
a.row:hover .row__k, a.row:hover .row__v { transform: translateX(0.7rem); }

.row__a { color: var(--ink-4); transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
a.row:hover .row__a { color: var(--blue); transform: translate(0.2rem, -0.2rem); }

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  padding: clamp(2rem, 6vh, 4rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem);
  border-top: var(--rule) solid var(--ink);
  display: grid;
  gap: 1.2rem;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}

.foot__note { max-width: 70ch; color: var(--ink-4); letter-spacing: 0.08em; }

/* ── scroll reveal ─────────────────────────────────────────────────────── */

[data-rise] { will-change: transform, opacity; }