/* Index Labs — homepage styles. Values mirror the Claude Design handoff (Index Labs.dc.html). */

:root {
  color-scheme: light dark;

  --bg: #F9F9FC;
  --bg-rgb: 249, 249, 252;
  --surface: #EDEDF5;
  --ink: #14141F;
  --ink-rgb: 20, 20, 31;
  --accent: #4A45C7;
  --accent-soft: #A9A6F2;
  --selection: #DAD8FA;
  --header-bg: rgba(249, 249, 252, 0.76);
  --hero-muted: rgba(20, 20, 31, 0.58);
  --glow: rgba(169, 166, 242, 0.26);

  --ink-07: rgba(var(--ink-rgb), 0.07);
  --ink-08: rgba(var(--ink-rgb), 0.08);
  --ink-10: rgba(var(--ink-rgb), 0.10);
  --ink-12: rgba(var(--ink-rgb), 0.12);
  --ink-18: rgba(var(--ink-rgb), 0.18);
  --ink-20: rgba(var(--ink-rgb), 0.20);
  --ink-42: rgba(var(--ink-rgb), 0.42);
  --ink-45: rgba(var(--ink-rgb), 0.45);
  --ink-50: rgba(var(--ink-rgb), 0.50);
  --ink-52: rgba(var(--ink-rgb), 0.52);
  --ink-55: rgba(var(--ink-rgb), 0.55);
  --ink-60: rgba(var(--ink-rgb), 0.60);
  --ink-66: rgba(var(--ink-rgb), 0.66);
  --bg-50: rgba(var(--bg-rgb), 0.50);

  --font-sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-label: var(--font-sans); /* small labels share the sans; tracked uppercase does the work */

  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 70px;
  --section-pad: clamp(56px, 10vh, 128px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark scheme — values from "Index Labs Dark.dc.html" in the design handoff.
   Applied when the system prefers dark (unless the toggle forced light), or when the toggle forced dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B14;
    --bg-rgb: 11, 11, 20;
    --surface: #12121C;
    --ink: #EAEAF5;
    --ink-rgb: 234, 234, 245;
    --accent: #8B87F5;
    --accent-soft: #B5B5FF;
    --selection: #2C2C63;
    --header-bg: rgba(11, 11, 20, 0.76);
    --hero-muted: rgba(234, 234, 245, 0.60);
    --glow: rgba(181, 181, 255, 0.15);
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B14;
  --bg-rgb: 11, 11, 20;
  --surface: #12121C;
  --ink: #EAEAF5;
  --ink-rgb: 234, 234, 245;
  --accent: #8B87F5;
  --accent-soft: #B5B5FF;
  --selection: #2C2C63;
  --header-bg: rgba(11, 11, 20, 0.76);
  --hero-muted: rgba(234, 234, 245, 0.60);
  --glow: rgba(181, 181, 255, 0.15);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
section[id] { scroll-margin-top: 76px; }
::selection { background: var(--selection); }

a { color: var(--ink); text-decoration: none; transition: color .3s ease, border-color .3s ease; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--accent); }

@keyframes il-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes il-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes il-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.container { max-width: 1180px; margin: 0 auto; }

/* Scroll reveal: hidden only when JS is running, so content stays visible without it. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-revealed { animation: il-rise 1s var(--ease-out) var(--reveal-delay, 0s) both; }

/* ---------- Marks (SVG colours follow the theme) ---------- */

.m-disc { fill: var(--ink); }
.m-ring { stroke: var(--accent); }
.m-ring-mono { stroke: var(--ink); }
.m-disc-accent { fill: var(--accent); }
.m-disc-inv { fill: var(--bg); }
.m-ring-soft { stroke: var(--accent-soft); }

/* ---------- Header ---------- */

.site-header {
  /* Fixed rather than sticky so compacting the bar never shifts page layout
     (a sticky bar shrinking in flow triggers scroll anchoring, which fights the tuck logic). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--ink-07);
  transition:
    padding .45s var(--ease-out),
    background-color .4s ease,
    border-color .4s ease,
    transform .5s var(--ease-out);
}

/* Over the hero the bar is transparent; once the page moves it compacts into the blurred bar. */
.js .site-header:not(.is-scrolled) { background-color: transparent; border-bottom-color: transparent; }
.js .site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; }

/* Scrolling down tucks the bar away; scrolling up brings it back. */
.js .site-header.is-tucked { transform: translateY(-100%); }
.js .site-header.is-tucked .site-nav { pointer-events: none; }

.brand { display: flex; align-items: center; gap: 7px; }
.brand .mark { display: block; }
.brand:hover { color: var(--ink); }
.brand-name { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-size: 13.5px; }
.site-nav a { color: var(--ink-60); }
.site-nav a:hover { color: var(--accent); }
.site-nav .nav-pill { color: var(--ink); border: 1px solid var(--ink-18); border-radius: 999px; padding: 7px 15px; }
.site-nav .nav-pill:hover { border-color: var(--accent); }

.header-right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }

/* Theme toggle: the brand's two-circle motif, filled disc on the side that is currently lit. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -6px 0;
  padding: 0;
  border: 1px solid var(--ink-18);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { display: block; }
.theme-toggle .tt-disc { fill: currentColor; transition: transform .5s var(--ease-out); transform-origin: 50% 50%; }
.theme-toggle .tt-ring { stroke: currentColor; }

/* Menu button: hidden on desktop, shown on phones. */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin: -9px -9px -9px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bar {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .4s var(--ease-out), top .4s var(--ease-out);
}
.nav-toggle-bar:nth-child(1) { top: 16px; }
.nav-toggle-bar:nth-child(2) { top: 23px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14.5px;
  transition: transform .5s var(--ease-out), background .4s ease;
}
@media (hover: hover) {
  .btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-2px); }
}
.btn:active { background: var(--accent); color: var(--bg); }

.link-underline { border-bottom: 1px solid var(--ink-20); padding-bottom: 2px; }
.link-underline:hover { border-color: var(--accent); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Fill the first screen on every viewport; the fixed header overlays the top of it. */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(64px, 11vh, 140px)) var(--gutter) clamp(56px, 9vh, 110px);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }

.hero-title {
  margin: 0;
  font-size: clamp(36px, 6.6vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 400;
  text-wrap: pretty;
}
.hero-line { display: block; }
.hero-line--muted { color: var(--hero-muted); }

/* Each word rises and sharpens out of a blur, staggered left to right, top to bottom. */
.hero-word {
  display: inline-block;
  animation: il-word 1.2s var(--ease-out) calc(0.1s + var(--i, 0) * 0.075s) backwards;
}
@keyframes il-word {
  from { opacity: 0; transform: translateY(0.55em) rotate(1.2deg); filter: blur(12px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

/* The muted line carries a slow accent shimmer that sweeps through every few seconds.
   It lives on the line, not the words, so a multi-word line shimmers as one. */
.hero-line--muted {
  width: fit-content;
  color: transparent;
  background-image: linear-gradient(100deg, var(--hero-muted) 0%, var(--hero-muted) 38%, var(--accent) 50%, var(--hero-muted) 62%, var(--hero-muted) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: il-shimmer 5.5s ease-in-out 2.6s infinite;
}
.hero-line--muted .hero-word { color: inherit; }

/* Typewriter: main.js splits the muted line into characters, reveals them one per tick,
   and moves the caret along behind the last typed character. Hidden characters take no
   space, so the line grows as it types. */
.hero-line--muted.is-typing .hero-word { animation: none; }
.hero-line--muted .ch[hidden] { display: none; }
.hero-caret {
  display: inline-block;
  width: 0.05em;
  height: 0.78em;
  margin-left: 0.08em;
  vertical-align: -0.04em;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
}
.hero-line--muted.is-caret .hero-caret { animation: il-blink 0.9s steps(1, end) infinite; }
@keyframes il-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.hero-line--muted.is-typed .hero-caret { animation: none; opacity: 0; transition: opacity .35s ease; }
@keyframes il-shimmer {
  0%        { background-position: 100% 0; }
  38%, 100% { background-position: 0% 0; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(30px, 5vh, 50px);
  animation: il-rise 1.1s var(--ease-out) 1.3s both;
}
.hero-secondary { font-size: 14.5px; color: var(--ink-60); }

/* Scroll cue at the foot of the hero; fades out once the page moves. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 30px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink-45);
  animation: il-fade 1.2s ease 1.1s backwards;
  transition: opacity .4s ease, color .3s ease;
}
.scroll-hint:hover { color: var(--accent); }
.scroll-hint-chevron { display: block; animation: il-nudge 2.2s ease-in-out 1.6s infinite; }
.js .scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.js .scroll-hint.is-hidden .scroll-hint-chevron { animation-play-state: paused; }
@keyframes il-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Sections ---------- */

.section { padding: var(--section-pad) var(--gutter); border-top: 1px solid var(--ink-08); }
/* First section on a page without a hero sits under the fixed header. */
.section--first { padding-top: calc(var(--header-h) + var(--section-pad)); border-top: 0; }
.section--tinted { background: var(--surface); }

.section-intro { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(30px, 5vh, 54px); }

.eyebrow {
  margin: 0;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.eyebrow--spaced { margin: 0 0 clamp(30px, 5vh, 54px); }

.lede { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-66); max-width: 46ch; }

.section-title {
  margin: 0;
  font-size: clamp(25px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 400;
  text-wrap: pretty;
}
.section-title--identity { font-size: clamp(25px, 3.3vw, 40px); }

/* ---------- Portfolio cards ---------- */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--ink-10);
  border: 1px solid var(--ink-10);
}

.card {
  background: var(--bg);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.product-logo { display: inline-flex; align-items: center; color: var(--ink); }
.secondlight-logo { display: block; height: 27px; width: auto; }
.product-name { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }

.tag {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  border: 1px solid var(--ink-18);
  border-radius: 999px;
  padding: 4px 9px;
}

.card-title {
  margin: 0;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.026em;
  font-weight: 400;
  text-wrap: pretty;
}
.card-body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-66); }

.specs { display: grid; gap: 0; font-size: 14px; margin: auto 0 0; }
.spec {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--ink-10);
}
.spec:last-child { border-bottom: 1px solid var(--ink-10); }
.spec dt { color: var(--ink-52); }
.spec dd { margin: 0; text-align: right; }

.card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; align-self: flex-start; }
.card-link-arrow { display: block; flex: none; }

.card--note {
  grid-column: 1 / -1;
  background: var(--surface);
  padding: clamp(22px, 3vw, 34px) clamp(26px, 4vw, 44px);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
}
.note-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-60); max-width: 46ch; }
.note-label { font-family: var(--font-label); font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-42); }

/* ---------- Company ---------- */

.grid-company {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 52ch; }
.prose p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-66); }

/* ---------- Identity ---------- */

.grid-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 6vh, 64px);
}
.identity-copy { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-66); max-width: 44ch; }

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-10);
  border: 1px solid var(--ink-10);
}
.tile {
  background: var(--bg);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 230px;
}
.tile svg { display: block; }
.tile-label { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); }
.tile--dark { background: var(--ink); }
.tile--dark .tile-label { color: var(--bg-50); }

.lockup { display: flex; align-items: center; gap: 8px; }
.lockup-name { font-size: 23px; font-weight: 500; letter-spacing: -0.022em; }
.stacked { display: flex; flex-direction: column; gap: 10px; }
.stacked-name { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--bg); }
.mono-row { display: flex; align-items: flex-end; gap: 22px; }

.swatches { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-55);
}
.swatch::after { content: attr(data-light); }
.swatch-chip { width: 22px; height: 22px; border-radius: 2px; }
.swatch-chip--ink { background: var(--ink); }
.swatch-chip--accent { background: var(--accent); }
.swatch-chip--soft { background: var(--accent-soft); }
.swatch-chip--bg { background: var(--bg); }
.swatch-chip--outlined { border: 1px solid var(--ink-12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .swatch::after { content: attr(data-dark); } }
:root[data-theme="dark"] .swatch::after { content: attr(data-dark); }

/* ---------- Identity page ---------- */

.mark-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 40vh, 420px);
  background: var(--bg);
  border: 1px solid var(--ink-10);
  margin-bottom: 1px;
}
.mark-stage svg { display: block; width: clamp(120px, 24vw, 200px); height: auto; }
.mark-stage-label { position: absolute; left: clamp(26px, 4vw, 44px); bottom: clamp(22px, 3vw, 34px); }

.construction {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--ink-10);
  border: 1px solid var(--ink-10);
}
.construction-figure { background: var(--bg); padding: clamp(26px, 4vw, 44px); display: grid; place-items: center; }
.construction-svg { display: block; width: min(100%, 300px); height: auto; overflow: visible; }
.c-grid line, .c-grid circle, .c-grid rect { stroke: var(--ink-20); stroke-width: 0.35; fill: none; stroke-dasharray: 1 1; }
.c-grid rect { stroke-dasharray: none; }
.c-dim line { stroke: var(--accent); stroke-width: 0.35; }
.c-centre { fill: var(--accent); }
.construction-notes { margin: 0; background: var(--bg); padding: clamp(22px, 3vw, 34px) clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.note-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ink-10); font-size: 14.5px; line-height: 1.5; }
.note-row:first-child { border-top: 0; }
.note-row dt { color: var(--ink-52); }
.note-row dd { margin: 0; }

.grid-tiles--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tile--wide { grid-column: 1 / -1; min-height: 0; }
.stacked-name--ink { color: var(--ink); }
.tile-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; width: 100%; }
.tile-note { font-size: 14px; color: var(--ink-60); }

.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--ink-10);
  border: 1px solid var(--ink-10);
}
.colour-card { background: var(--bg); padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.colour-chip { display: block; height: 88px; border-radius: 3px; margin-bottom: 8px; }
.colour-chip--outlined { border: 1px solid var(--ink-12); }
.colour-name { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.colour-role { font-size: 14px; line-height: 1.5; color: var(--ink-60); }
.colour-values { margin: 6px 0 0; display: grid; gap: 0; font-size: 13.5px; }
.colour-values div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ink-10); }
.colour-values dt { color: var(--ink-52); }
.colour-values dd { margin: 0; letter-spacing: 0.02em; }

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 72px);
}
.rules-title { margin: 0 0 6px; font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.rules-list { list-style: none; margin: 0; padding: 0; }
.rules-list li { padding: 12px 0; border-top: 1px solid var(--ink-10); font-size: 15.5px; line-height: 1.5; color: var(--ink-66); }
.rules-list li:first-child { border-top: 0; }

.downloads { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(34px, 6vh, 56px); padding-top: 26px; border-top: 1px solid var(--ink-10); }
.download-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.download-group .tile-label { min-width: 64px; }
.download-sep { font-size: 14px; color: var(--ink-52); margin-left: 8px; }
.download-link { font-size: 14.5px; }
.download-note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-52); max-width: 60ch; }

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--ink-10);
  border: 1px solid var(--ink-10);
}
.type-specimen { background: var(--bg); padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; justify-content: space-between; min-height: 230px; }
.type-sample { font-size: clamp(34px, 5vw, 56px); font-weight: 500; letter-spacing: -0.022em; line-height: 1.05; }
.type-sample--body { font-size: 18px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink-66); }
.type-notes { min-height: 0; }

/* ---------- Contact ---------- */

.contact { position: relative; padding: clamp(64px, 12vh, 150px) var(--gutter); overflow: hidden; }
.contact-glow {
  position: absolute;
  left: -10%;
  width: 70%;
  height: 150%;
  top: -25%;
  border-radius: 50%;
  /* A wider, softer gradient stands in for the prototype's blur(40px) filter,
     which would re-rasterise a large layer on every animation frame. */
  background: radial-gradient(closest-side, var(--glow) 0%, color-mix(in srgb, var(--glow) 55%, transparent) 45%, transparent 100%);
  animation: il-sweep 11s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-play-state: paused;
  will-change: transform;
  pointer-events: none;
}
.contact.is-inview .contact-glow { animation-play-state: running; }
.contact-inner { position: relative; }
.contact-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 400;
  text-wrap: pretty;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  padding: 26px var(--gutter);
  border-top: 1px solid var(--ink-08);
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-50);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--ink-50); }
.footer-links a:hover { color: var(--accent); }

/* Language row: full width under the footer line. */
.lang-switch {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 4px 0 0 -8px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-08);
}
.lang-switch button {
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-50);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 8px;
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch button:hover { color: var(--accent); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); background: var(--ink-07); }
.lang-switch button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Chinese: system CJK sans carries the text (Instrument Sans has no CJK glyphs), no negative tracking. */
:lang(zh) {
  --font-sans: 'Instrument Sans', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
}
:lang(zh) .hero-title, :lang(zh) .section-title, :lang(zh) .card-title, :lang(zh) .contact-title,
:lang(zh) .brand-name, :lang(zh) .lockup-name, :lang(zh) .stacked-name, :lang(zh) .colour-name, :lang(zh) .rules-title, :lang(zh) .type-sample { letter-spacing: 0; }
:lang(zh) .hero-title { line-height: 1.15; }
:lang(zh) .card-body, :lang(zh) .prose p, :lang(zh) .lede, :lang(zh) .identity-copy, :lang(zh) .rules-list li, :lang(zh) .note-row { line-height: 1.75; }
:lang(zh) .eyebrow, :lang(zh) .tile-label, :lang(zh) .tag, :lang(zh) .note-label { letter-spacing: 0.08em; }

/* ---------- Small screens ---------- */

/* Tablet and below: tighten the nav so all links still fit on one row. */
@media (max-width: 760px) {
  :root { --header-h: 59px; }
  .site-header { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .js .site-header.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
  .header-right, .site-nav { gap: 14px; }
  .site-nav { font-size: 13px; }
  .site-nav .nav-pill { padding: 6px 12px; }
}

/* Phones: the links move into a dropdown under the header, opened by the menu button. */
@media (max-width: 600px) {
  .nav-toggle { display: block; }
  .header-right { gap: 10px; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 14px;
    font-size: 15px;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ink-08);
  }
  .site-header.is-open .site-nav { display: flex; animation: il-rise .45s var(--ease-out) both; }

  .site-nav a { display: block; padding: 13px 0; color: var(--ink); border-top: 1px solid var(--ink-08); }
  .site-nav a:first-child { border-top: 0; }
  .site-nav .nav-pill { border: 0; border-top: 1px solid var(--ink-08); border-radius: 0; padding: 13px 0; }
  .site-nav .nav-pill::after { content: " →"; color: var(--ink-50); }

  section[id] { scroll-margin-top: 64px; }

  .grid-tiles { grid-template-columns: minmax(0, 1fr); }
  .note-row { grid-template-columns: 1fr; gap: 4px; }
  .tile { min-height: 190px; gap: 22px; }

  .card--note { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Very narrow phones: keep the headline lines intact. */
@media (max-width: 360px) {
  .hero-title { font-size: 30px; }
  .section-title { font-size: 24px; }
  .contact-title { font-size: 27px; }
  .lockup-name { font-size: 20px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .hero-word, .hero-actions, .contact-glow, .scroll-hint, .scroll-hint-chevron, .hero-caret { animation: none; }
  .hero-caret { display: none; }
  .hero-line--muted { animation: none; background-position: 100% 0; }
  .js [data-reveal] { opacity: 1; }
  .js [data-reveal].is-revealed { animation: none; }
  .btn { transition: none; }
}