/* Hallmark · shape: Index-First, from draw 6dda96 · genre: modern-minimal · theme: Cobalt (deal 3/3, seed enline-pte-ltd-singapore-bfed·f1c0f294·2026-11-04·r0) · job: hire · draw: 6dda96
 * hero: Poster, one line at display scale over a pressed groove; a holding page, by the owner's direction
 * nav: wordmark only, no anchors (there is nothing to navigate to) · footer: legal line and one descriptor
 * imagery: none · signature: the groove, and the letters "in" plus the full stop as the only accents
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V4 · weakest: S, a holding page has nowhere to go; the line and the groove carry it */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* wordmark, top left, nothing beside it */
.nav { padding-block: var(--space-lg); }
.nav__inner { display: flex; align-items: center; }
.nav__inner img { display: block; height: 28px; width: auto; }

/* the poster: the line sits at the foot of the paper, air above it */
.hero {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-4xl) var(--space-2xl);
}

.hero__note {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 12.5vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero__mark { color: var(--color-accent); }

/* the accent: the "in" of Coming, carried to the full stop. in as in intelligence, inline, instant */
/* the groove: one pressed channel, the page's only relief */
.groove {
  margin-top: var(--space-2xl);
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-paper-2);
  box-shadow: var(--shadow-groove);
}

.foot { padding-block: var(--space-lg) var(--space-xl); }
.foot__inner {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  justify-content: space-between;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot__inner p { margin: 0; }

@media (max-width: 40rem) {
  :root { --gutter: 24px; }
  .hero { padding-block: var(--space-3xl) var(--space-xl); }
  .groove { margin-top: var(--space-xl); }
}