/*
 * keyAI brand identity deck. Tokens come from the keyAI landing (ai-keynexion-landing docs/landing/design-en.md);
 * deck rules and sources: docs/design.md. Every size inside a slide is in container units (cqw), so the same
 * slide renders identically on screen, in full screen and in print.
 * Viewer pattern (stacked slides, bottom pill bar, full screen, print one slide per page) follows partner.lopi.im/pt.
 */
@font-face {
  font-family: "Host Grotesk";
  src: url("assets/fonts/host-grotesk-latin-wght.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-latin-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("assets/fonts/fragment-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #0a0a0a;
  --ink: #111111;
  --ink-2: #2e2e2e;
  --white: #ffffff;
  --paper: #f3f3f3;
  --mute: #5f5f5f;
  --mute-d: #9b9b9b;
  --hair: rgba(17, 17, 17, 0.14);
  --hair-d: rgba(255, 255, 255, 0.16);
  --mint: #087d53;
  --glow: #45d39c;
  --mint-soft: #dcf5ea;
  --mint-deep: #10291f;
  --on-glow: #04140d;
  --sans: "Host Grotesk", "Pretendard Variable", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
  --kr: "Pretendard Variable", "Host Grotesk", sans-serif;
  /* Spec slide grid, in slide widths: the panel takes the right 60 %, the text column the left third. */
  --edge: 2.4cqw;
  --panel-w: 60cqw;
  --panel-ar: 60 / 53.05;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --track-body: 0.02em;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  background: #e7e7e7;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  /* r4 (박소은 2026-10-18 23:38 UTC "기본 텍스트 자간이 너무 좁다"): body text was at the font default (0);
     Host Grotesk fits tighter than Bolt's Inter body, so text opens by 0.02 em. Titles, lockups and labels set their own. */
  letter-spacing: var(--track-body);
}
h1,
h2,
h3,
p,
figure,
dl,
dd,
ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
:lang(ko) {
  font-family: var(--kr);
  word-break: keep-all;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  background: var(--black);
  color: var(--white);
  padding: 8px 12px;
}

/* ---------- Viewer ---------- */
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 40px 24px 128px;
}
.slide {
  position: relative;
  width: min(calc(100vw - 48px), calc((100svh - 150px) * 16 / 9), 1760px);
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08), 0 18px 40px -28px rgba(0, 0, 0, 0.35);
  scroll-margin-top: 40px;
}
.slide.dark {
  background: var(--black);
  color: var(--white);
}

.bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1), 0 10px 30px -12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  font-size: 14px;
  color: var(--ink);
}
.bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bar button:hover {
  background: var(--paper);
}
.bar button:disabled {
  color: #b4b4b4;
  cursor: default;
  background: none;
}
.bar button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.bar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.bar .count {
  min-width: 76px;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
}
.bar .count span {
  color: var(--mute);
}
.bar .sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--hair);
}
.bar .brand {
  display: inline-flex;
  padding: 0 10px 0 8px;
  font-size: 15px;
}

.bar .lang-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.bar .lang-bar:hover {
  background: var(--paper);
}
.bar .lang-bar:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* Language switch beside every page number (deck.js); the cover has no page number, so it sits bottom right. */
.lang {
  margin-right: 1.6em;
  white-space: nowrap;
}
.lang a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
}
.lang a:hover {
  opacity: 1;
  text-decoration: underline;
}
.lang b {
  font-weight: 700;
  color: currentColor;
}
.lang-abs {
  position: absolute;
  right: 3cqw;
  top: 3cqw;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9cqw;
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}
@media print {
  .lang,
  .lang-bar {
    display: none;
  }
}

/* Full screen: one slide per screen, centred, snap. */
:root:fullscreen {
  background: var(--black);
  scroll-snap-type: y mandatory;
}
:root:fullscreen .deck {
  gap: 0;
  padding: 0;
}
:root:fullscreen .slide {
  --fs-w: min(100vw, calc(100vh * 16 / 9));
  width: var(--fs-w);
  margin-block: calc((100vh - var(--fs-w) * 9 / 16) / 2);
  box-shadow: none;
  scroll-snap-align: center;
  scroll-margin-top: 0;
}
:root:fullscreen .bar {
  opacity: 0;
  transition: opacity 0.3s;
}
:root:fullscreen .bar:hover,
:root:fullscreen .bar:focus-within {
  opacity: 1;
}

/* ---------- Shared pieces ---------- */
/* Lockup gap (r4, after Bolt p23): x = cap height of "keyAI" (0.70 em); spark tip to the k stem = 0.5x = 0.35 em.
   The spark sits in its 540 box (0.265 em empty on the right) and the k has a 0.044 em side bearing: 0.35 - 0.265 - 0.044 = 0.041 em.
   r3 used 0.3 em, which showed as 0.61 em (0.87x). */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.041em;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.55;
  white-space: nowrap;
}
.lockup .lk-mark {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}
svg {
  fill: currentColor;
}
svg.mark {
  display: block;
  fill: currentColor;
}
.mono {
  font-family: var(--mono);
}

/* ---------- Spec slide: title column + panel ---------- */
.side {
  position: absolute;
  left: var(--edge);
  top: var(--edge);
  bottom: var(--edge);
  width: calc(100cqw - var(--panel-w) - var(--edge) * 2.6);
  display: flex;
  flex-direction: column;
}
.side h2 {
  font-size: 3.1cqw;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.side .kr {
  margin-top: 0.9cqw;
  font-size: 1.12cqw;
  color: var(--mute);
}
.side .lead {
  margin-top: auto;
  font-size: 1.02cqw;
  line-height: 1.5;
  color: var(--mute);
  max-width: 27cqw;
  text-wrap: pretty;
}
/* A side column without a lead keeps its spec list at the bottom. */
.side .kr + .spec {
  margin-top: auto;
}
/* A side column with nothing pushed down (no lead, no subtitle above the spec: 03 Brand idea) still pins its foot to the bottom. */
.side:not(:has(.lead, .kr + .spec)) .foot {
  margin-top: auto;
}
.dark .side .lead,
.dark .side .kr {
  color: var(--mute-d);
}
.spec {
  margin-top: 1.6cqw;
  display: grid;
  grid-template-columns: 8.6cqw 1fr;
  row-gap: 0.55cqw;
  column-gap: 1cqw;
  font-size: 0.86cqw;
  line-height: 1.35;
  padding-top: 1.1cqw;
  border-top: 1px solid var(--hair);
}
.dark .spec {
  border-top-color: var(--hair-d);
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.74cqw;
  line-height: 1.6;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dark .spec dt {
  color: var(--mute-d);
}
.foot {
  margin-top: 1.6cqw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.72cqw;
  color: var(--mute);
}
.dark .foot {
  color: var(--mute-d);
}

.panel {
  position: absolute;
  right: 1.6cqw;
  top: 1.6cqw;
  bottom: 1.6cqw;
  width: var(--panel-w);
  border-radius: 0.5cqw;
  background: var(--paper);
  container-type: size;
  overflow: hidden;
}
.panel.black {
  background: var(--black);
  color: var(--white);
}
.panel.bare {
  background: none;
}
/* Full-bleed slide: the whole slide is the panel and the side column floats on it in white. */
.full .panel {
  inset: 0;
  width: auto;
  border-radius: 0;
}
.full .side {
  z-index: 2;
  width: 30cqw;
  color: var(--white);
}
.full .side .lead,
.full .side .kr,
.full .foot {
  color: rgba(255, 255, 255, 0.82);
}

/* Grid helpers inside a panel (units are panel widths). */
.cells {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 1.2cqw;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 0.8cqw;
  overflow: hidden;
  container-type: size;
}
.on-white {
  background: var(--white);
  color: var(--ink);
}
.on-paper {
  background: var(--paper);
  color: var(--ink);
}
.on-black {
  background: var(--black);
  color: var(--white);
}
.on-mint {
  background: var(--mint);
  color: var(--white);
}
.on-soft {
  background: var(--mint-soft);
  color: var(--ink);
}
.on-deep {
  background: var(--mint-deep);
  color: var(--glow);
}
.tag {
  position: absolute;
  left: 4.4cqmin;
  bottom: 4cqmin;
  font-family: var(--mono);
  font-size: max(3.4cqmin, 10px);
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.tag.top {
  bottom: auto;
  top: 4cqmin;
}

/* ---------- Slide-specific ---------- */

/* 01 Cover */
.cover .c-mark {
  position: absolute;
  right: 7cqw;
  top: 6cqw;
  height: 44cqw;
  width: auto;
  color: var(--white);
}
.cover .c-top {
  position: absolute;
  left: var(--edge);
  top: var(--edge);
  font-size: 1.3cqw;
}
.cover h1 {
  position: absolute;
  left: var(--edge);
  bottom: 9.4cqw;
  font-size: 7.4cqw;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.cover .c-meta {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.1cqw;
  border-top: 1px solid var(--hair-d);
  font-size: 1cqw;
  color: var(--mute-d);
}
.cover .c-meta .mono {
  font-size: 0.86cqw;
}

/* 02 Contents */
.toc-side h2 {
  font-size: 1.5cqw;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.toc {
  position: absolute;
  left: 36cqw;
  right: var(--edge);
  top: var(--edge);
  bottom: var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  column-gap: 4cqw;
}
.toc a {
  display: grid;
  grid-template-columns: 3.4cqw 1fr;
  align-items: baseline;
  padding: 0.62cqw 0;
  border-top: 1px solid var(--hair);
  color: inherit;
  text-decoration: none;
  font-size: 1.85cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.toc a span {
  font-family: var(--mono);
  font-size: 0.8cqw;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
}
.toc a:hover {
  color: var(--mint);
}

/* 03 Idea */
/* The side column ends one edge before the statement column (36cqw), so its pinned foot does not touch the halves. */
.idea .side {
  width: calc(36cqw - var(--edge) * 2);
}
.idea .statement {
  position: absolute;
  left: 36cqw;
  right: 8cqw;
  top: 15cqw;
  font-size: 4.2cqw;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.idea .reading {
  position: absolute;
  left: 36cqw;
  right: var(--edge);
  bottom: var(--edge);
  display: grid;
  grid-template-columns: 22cqw 1fr 1fr;
  column-gap: 2.4cqw;
  align-items: end;
}
.idea .reading p {
  font-family: var(--serif);
  font-size: 1.3cqw;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}
.idea .halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8cqw;
}
.idea .halves figure {
  aspect-ratio: 1;
  background: var(--paper);
  border-radius: 0.5cqw;
  display: grid;
  place-items: center;
  position: relative;
}
.idea .halves svg {
  width: 62%;
  height: 62%;
}
.idea .halves figcaption {
  position: absolute;
  left: 0.7cqw;
  bottom: 0.6cqw;
  font-family: var(--mono);
  font-size: 0.7cqw;
  color: var(--mute);
}

/* 04 Primary logo */
.logo-cells {
  grid-template-rows: 1fr 1fr;
  padding: 0;
}
.logo-cells .lockup {
  font-size: 6.4cqw;
}

/* 05 Logo mark */
.mark-cells {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.mark-cells svg.mark {
  height: 46cqh;
  width: auto;
}

/* 06 Construction */
.construct svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.construct .g-line {
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.construct .g-thin {
  fill: none;
  stroke: rgba(17, 17, 17, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.construct .g-text {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--mute);
}
.construct .g-text.mint {
  fill: var(--mint);
}

/* 07 Clear space */
.clear .zone {
  position: absolute;
  outline: 1px dashed rgba(8, 125, 83, 0.7);
  background: rgba(220, 245, 234, 0.55);
}
.clear .unit {
  position: absolute;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--mono);
}

.cs-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9cqw;
}
/* r4: the unit is x = cap height of "keyAI" (0.70 em); 1x round the lockup, half the mark height round the mark alone (Bolt p23, p29). */
.cs {
  --q: 0.7em;
  position: relative;
  padding: var(--q);
  background: rgba(220, 245, 234, 0.7);
  outline: 1px dashed rgba(8, 125, 83, 0.8);
}
.cs.mark-only {
  --q: 0.5em;
}
.cs .tight {
  display: flex;
  gap: 0.306em; /* tight 331.2 box: 0.35 em visible minus the k side bearing */
  line-height: 1;
  outline: 1px solid rgba(17, 17, 17, 0.3);
}
.cs .tight .lk-mark {
  width: 0.859em;
  height: 1.012em;
}
.cs .mk {
  display: block;
  width: 0.8484em;
  height: 1em;
  outline: 1px solid rgba(17, 17, 17, 0.3);
}
.cs .ql {
  position: absolute;
  font-family: var(--mono);
  font-size: 1.7cqw;
  color: var(--mint);
}
.cs .ql.tl {
  left: calc(var(--q) + 0.5cqw);
  top: 0.3cqw;
}
.cs .ql.br {
  right: calc(var(--q) + 0.5cqw);
  bottom: 0.3cqw;
}

/* 08 Minimum size */
.min-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.min-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  padding: 5cqw 5cqw 4cqw;
  gap: 3cqw;
}
.min-row + .min-row {
  border-top: 1px solid var(--hair);
}
.min-item {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}
.min-item .sample {
  height: 18cqw;
  display: flex;
  align-items: flex-end;
}
.min-item p {
  font-family: var(--mono);
  font-size: 1.7cqw;
  color: var(--mute);
  line-height: 1.5;
}
.min-item p b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 2.3cqw;
  color: var(--ink);
}

/* 09 Colorways */
.ways {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
}
.ways .lockup {
  font-size: 13cqw;
}
.ways .photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ways .scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
}
.ways .lockup.rel {
  position: relative;
}

/* 10 Misuse */
.misuse {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1cqw;
}
.misuse .cell {
  background: var(--white);
  place-items: center;
}
.misuse .lockup {
  font-size: 15cqw;
}
.misuse .no {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: 6cqw;
  font-size: 6.4cqw;
  line-height: 1.3;
  color: var(--ink-2);
}
.misuse .no::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.08em;
  background:
    linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}
.misuse .stage {
  margin-bottom: 10cqw;
}

/* 11 Interstitial */
.inter img,
.inter video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inter .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.55));
}
.inter .lockup {
  position: absolute;
  right: 4cqw;
  bottom: 3.2cqw;
  font-size: 8cqw;
  color: var(--white);
}

/* 12 Primary typeface */
.type-hero {
  position: absolute;
  inset: 0;
  padding: 6cqw 6cqw 5cqw;
  display: flex;
  flex-direction: column;
}
.type-hero .name {
  font-size: 15cqw;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.type-hero .weights {
  display: flex;
  gap: 4.5cqw;
  margin-top: 4cqw;
  font-size: 2.2cqw;
}
.type-hero .glyphs {
  margin-top: auto;
  font-size: 2.65cqw;
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.type-hero .aa {
  position: absolute;
  right: 6cqw;
  top: 6cqw;
  font-size: 24cqw;
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--white);
  -webkit-text-stroke: 1px var(--hair);
}

/* 13 Supporting typefaces */
.faces {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}
.face {
  display: grid;
  grid-template-columns: 1fr 28cqw;
  align-items: center;
  padding: 0 5cqw;
  gap: 3cqw;
}
.face + .face {
  border-top: 1px solid var(--hair);
}
.face .spec-name {
  font-size: 1.8cqw;
  color: var(--mute);
  line-height: 1.5;
}
.face .spec-name b {
  display: block;
  font-weight: 500;
  font-size: 2.4cqw;
  color: var(--ink);
}
.face .sample-serif {
  font-family: var(--serif);
  font-size: 5.6cqw;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.face .sample-mono {
  font-family: var(--mono);
  font-size: 2.4cqw;
  line-height: 1.6;
}
.face .sample-kr {
  font-family: var(--kr);
  font-size: 5.2cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* 14 Hierarchy */
.ladder {
  position: absolute;
  inset: 0;
  padding: 4.6cqw 5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ladder .row {
  display: grid;
  grid-template-columns: 1fr 22cqw;
  align-items: baseline;
  gap: 2cqw;
  white-space: nowrap;
}
.ladder .row .meta {
  font-family: var(--mono);
  font-size: 1.45cqw;
  color: var(--mute);
  text-align: right;
}
.ladder .r1 {
  font-size: 8.6cqw;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}
.ladder .r2 {
  font-size: 5.6cqw;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.ladder .r3 {
  font-size: 3.6cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.ladder .r4 {
  font-size: 2.6cqw;
  font-weight: 400;
  font-family: var(--serif);
}
.ladder .r5 {
  font-size: 2.05cqw;
}
.ladder .r6 {
  font-size: 1.8cqw;
  color: var(--mute);
}
.ladder .r7 {
  font-family: var(--mono);
  font-size: 1.6cqw;
}

/* 15 Palette */
.stripes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 30fr 22fr 30fr 10fr 8fr;
}
.stripe {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.6cqw 2.2cqw;
  font-size: 1.55cqw;
  line-height: 1.5;
}
.stripe b {
  display: block;
  font-weight: 500;
  font-size: 2.2cqw;
  margin-bottom: 0.8cqw;
}
.stripe .mono {
  font-size: 1.35cqw;
  opacity: 0.8;
}
.stripe .pct {
  position: absolute;
  top: 2.4cqw;
  left: 2.2cqw;
  font-family: var(--mono);
  font-size: 1.35cqw;
  opacity: 0.75;
}

/* 16 Scale + contrast */
.scale-wrap {
  position: absolute;
  inset: 0;
  padding: 4cqw;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 2.4cqw;
}
.ramp {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  border-radius: 0.6cqw;
  overflow: hidden;
}
.ramp div {
  height: 13cqw;
  padding: 1cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 1.15cqw;
  line-height: 1.3;
}
.ramp .anchor::after {
  content: "";
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  background: currentColor;
}
.pairs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1cqw;
  align-content: start;
}
.pair {
  border-radius: 0.6cqw;
  padding: 1.4cqw;
  min-height: 11cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pair .aa {
  font-size: 3.6cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pair .ratio {
  font-family: var(--mono);
  font-size: 1.2cqw;
  line-height: 1.4;
}
.legend {
  font-size: 1.35cqw;
  color: var(--mute);
  line-height: 1.45;
}

/* 17 Imagery */
.photos {
  position: absolute;
  inset: 0;
  padding: 1.2cqw;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1.2cqw;
}
.photos figure {
  position: relative;
  border-radius: 0.6cqw;
  overflow: hidden;
}
.photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photos .tall {
  grid-row: span 2;
}
.photos .wide {
  grid-column: span 2;
}
.photos figcaption {
  position: absolute;
  left: 1cqw;
  bottom: 0.8cqw;
  font-family: var(--mono);
  font-size: 1.1cqw;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Patterns: the Flow tile (assets/pattern, made by scripts/gen/pattern-flow.mjs). */
.pat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pat-cells {
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.pat-cells .cell:first-child {
  grid-row: span 2;
}

/* 20 Social */
.posts {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
  align-items: center;
  padding: 0 4cqw;
}
.post {
  background: var(--white);
  border-radius: 1cqw;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 2cqw 4cqw -2.6cqw rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.post header,
.post footer {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.3cqw 1.4cqw;
  font-size: 1.4cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.post header .av {
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
}
.post header .av svg {
  width: 62%;
  height: 62%;
}
.post header .dots {
  margin-left: auto;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.post footer {
  font-weight: 400;
  color: var(--mute);
  gap: 1.6cqw;
}
.post footer i {
  display: block;
  width: 2cqw;
  height: 2cqw;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
}
.post footer i:nth-child(2) {
  border-radius: 0.4cqw;
}
.post footer i:last-child {
  margin-left: auto;
  border-radius: 0.2cqw;
}
.post .art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  container-type: size;
}
.post .art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post .art .t {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  font-size: 10.5cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.post .art .lk {
  position: absolute;
  left: 7cqw;
  bottom: 6cqw;
  font-size: 5cqw;
}
.post .art .k {
  position: absolute;
  right: 7cqw;
  bottom: 6.6cqw;
  font-family: var(--mono);
  font-size: 3.6cqw;
  opacity: 0.75;
}

/* 21 Banners */
.banners {
  position: absolute;
  inset: 0;
  padding: 4cqw;
  display: grid;
  grid-template-rows: 1.25fr 1fr;
  gap: 3cqw;
}
.page {
  background: var(--white);
  border-radius: 1cqw;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 2cqw 4cqw -2.6cqw rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
}
.page .cover-img {
  position: relative;
  flex: none;
  height: 44%;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.page .cover-img .hl {
  position: absolute;
  right: 4cqw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: right;
  max-width: 44cqw;
}
.page .who {
  position: relative;
  padding: 0 3cqw 2cqw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 2cqw;
  margin-top: -4.6cqw;
}
.page .logo-sq {
  width: 9.2cqw;
  height: 9.2cqw;
  border-radius: 1cqw;
  background: var(--black);
  color: var(--white);
  border: 0.5cqw solid var(--white);
  display: grid;
  place-items: center;
}
.page .logo-sq.round {
  border-radius: 50%;
}
.page .logo-sq svg {
  width: 56%;
  height: 56%;
}
.page .who h3 {
  font-size: 2.4cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.page .who p {
  font-size: 1.45cqw;
  color: var(--mute);
  line-height: 1.4;
}
.page .btns {
  display: flex;
  gap: 1cqw;
}
.page .btns span {
  padding: 0.8cqw 1.8cqw;
  border-radius: 0.6cqw;
  font-size: 1.4cqw;
  font-weight: 500;
  border: 1px solid var(--hair);
}
.page .btns span:first-child {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.page .tabs {
  display: flex;
  gap: 3cqw;
  padding: 1.2cqw 3cqw 0;
  border-top: 1px solid var(--hair);
  font-size: 1.35cqw;
  color: var(--mute);
}
.page .tabs b {
  color: var(--ink);
  font-weight: 500;
}
.page.dark-page {
  background: var(--black);
  color: var(--white);
}
.page.dark-page .cover-img {
  height: 58%;
}
.page.dark-page .who p {
  color: var(--mute-d);
}
.page.dark-page .logo-sq {
  border-color: var(--black);
  background: var(--white);
  color: var(--black);
}
.page.dark-page .btns span {
  border-color: var(--hair-d);
}
.page.dark-page .btns span:first-child {
  background: var(--white);
  color: var(--black);
}

/* 22 Devices */
.devices {
  position: absolute;
  inset: 0;
}
.laptop {
  position: absolute;
  left: 9cqw;
  top: 24cqw;
  width: 60cqw;
}
.laptop .lid {
  background: #1a1a1a;
  border-radius: 1.6cqw 1.6cqw 0 0;
  padding: 1.6cqw 1.6cqw 2cqw;
  box-shadow: inset 0 0 0 1px #2b2b2b;
}
.laptop .screen {
  aspect-ratio: 16 / 10;
  background: var(--white);
  overflow: hidden;
  position: relative;
  container-type: size;
  border-radius: 0.3cqw;
}
.laptop .base {
  height: 2.4cqw;
  margin: 0 -5cqw;
  background: linear-gradient(#d7d7d7, #a9a9a9);
  border-radius: 0 0 2.6cqw 2.6cqw;
  position: relative;
}
.laptop .base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 12cqw;
  height: 0.9cqw;
  transform: translateX(-50%);
  background: #bdbdbd;
  border-radius: 0 0 1cqw 1cqw;
}
.site {
  position: absolute;
  inset: 0;
  font-size: 1.6cqw;
}
.site .nav {
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 2.6cqw 4cqw;
  font-size: 1.7cqw;
  color: var(--mute);
}
.site .nav .lockup {
  font-size: 2.4cqw;
  color: var(--ink);
  margin-right: auto;
}
.site .nav .cta {
  color: var(--white);
  background: var(--ink);
  border-radius: 0.6cqw;
  padding: 1cqw 2cqw;
}
.site .hero {
  position: absolute;
  left: 4cqw;
  top: 15cqw;
  width: 46cqw;
}
.site .hero h4 {
  font-size: 6.4cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0;
}
.site .hero p {
  margin-top: 2.4cqw;
  font-size: 2cqw;
  color: var(--mute);
  line-height: 1.4;
  max-width: 36cqw;
}
.site .hero .b {
  display: inline-block;
  margin-top: 3cqw;
  background: var(--ink);
  color: var(--white);
  border-radius: 0.6cqw;
  padding: 1.4cqw 2.6cqw;
  font-size: 1.8cqw;
}
.site .art {
  position: absolute;
  right: 4cqw;
  top: 12cqw;
  width: 42cqw;
  bottom: 6cqw;
  border-radius: 1cqw;
  overflow: hidden;
  background: var(--black);
}
.phone {
  position: absolute;
  right: 6cqw;
  top: 19cqw;
  width: 23cqw;
  aspect-ratio: 9 / 19.5;
  border-radius: 3.6cqw;
  background: #111;
  padding: 1.1cqw;
  box-shadow: 0 0 0 0.25cqw #2a2a2a, 0 3cqw 5cqw -3cqw rgba(0, 0, 0, 0.6);
}
.phone .scr {
  position: relative;
  height: 100%;
  border-radius: 2.6cqw;
  background: var(--white);
  overflow: hidden;
  container-type: size;
}
.phone .island {
  position: absolute;
  top: 2.4cqw;
  left: 50%;
  width: 30cqw;
  height: 8cqw;
  transform: translateX(-50%);
  border-radius: 5cqw;
  background: #111;
}
.app {
  position: absolute;
  inset: 16cqw 7cqw 7cqw;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  font-size: 5cqw;
}
.app .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app .top .lockup {
  font-size: 7cqw;
}
.app .top .mono {
  font-size: 4.4cqw;
  color: var(--mute);
}
.app h5 {
  margin: 4cqw 0 0;
  font-size: 10cqw;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.app .card {
  border: 1px solid var(--hair);
  border-radius: 3cqw;
  padding: 5cqw;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}
.app .card .mono {
  font-size: 4.2cqw;
  color: var(--mute);
}
.app .card b {
  font-size: 6cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.app .card .row {
  display: flex;
  gap: 2.4cqw;
  margin-top: 2cqw;
}
.app .card .row span {
  flex: 1;
  text-align: center;
  padding: 3.4cqw 0;
  border-radius: 2cqw;
  border: 1px solid var(--hair);
  font-size: 5cqw;
}
.app .card .row span.go {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--white);
}
.app .card.done {
  background: var(--mint-soft);
  border-color: transparent;
}
.icon-row {
  position: absolute;
  left: 9cqw;
  top: 7cqw;
  display: flex;
  gap: 2cqw;
  align-items: center;
}
.app-icon {
  width: 6.6cqw;
  height: 6.6cqw;
  border-radius: 1.5cqw;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 0.6cqw 1.2cqw -0.6cqw rgba(0, 0, 0, 0.5);
}
.app-icon svg {
  width: 58%;
  height: 58%;
}
.app-icon.light {
  background: var(--white);
  color: var(--black);
}
.app-icon.mint {
  background: var(--mint);
}
.tab-chip {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 4.4cqw;
  padding: 0 1.6cqw;
  border-radius: 1cqw 1cqw 0 0;
  background: var(--white);
  font-size: 1.4cqw;
  box-shadow: 0 0 0 1px var(--hair);
}
.tab-chip svg {
  width: 1.8cqw;
  height: 1.8cqw;
}

/* 23 Business cards */
.cards {
  position: absolute;
  inset: 0;
  perspective: 120cqw;
}
.bcard {
  position: absolute;
  width: 46cqw;
  aspect-ratio: 85 / 55;
  border-radius: 0.6cqw;
  container-type: size;
  overflow: hidden;
}
.bcard.front {
  left: 8cqw;
  top: 11cqw;
  background: var(--black);
  color: var(--white);
  transform: rotate(-6deg);
  box-shadow: 0 3cqw 4cqw -2cqw rgba(0, 0, 0, 0.55), 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.bcard.back {
  right: 6cqw;
  bottom: 9cqw;
  background: var(--white);
  color: var(--ink);
  transform: rotate(4deg);
  box-shadow: 0 3cqw 4cqw -2.4cqw rgba(0, 0, 0, 0.35), 0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.12);
}
.bcard .big-mark {
  position: absolute;
  right: -8cqw;
  top: -10cqw;
  height: 120cqh;
  width: auto;
  color: #1a1a1a;
}
.bcard.front .lockup {
  position: absolute;
  left: 7cqw;
  bottom: 8cqw;
  font-size: 7.4cqw;
}
.bcard.front .site-url {
  position: absolute;
  right: 7cqw;
  bottom: 10.4cqw;
  font-family: var(--mono);
  font-size: 3.6cqw;
  color: var(--mute-d);
}
.bcard.back .name {
  position: absolute;
  left: 7cqw;
  top: 8cqw;
  font-size: 7.6cqw;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.bcard.back .role {
  position: absolute;
  left: 7cqw;
  top: 27cqw;
  font-size: 4.4cqw;
  color: var(--mute);
}
.bcard.back .lines {
  position: absolute;
  left: 7cqw;
  bottom: 8cqw;
  font-family: var(--mono);
  font-size: 3.6cqw;
  line-height: 1.6;
}
.bcard.back .corner {
  position: absolute;
  right: 7cqw;
  top: 8cqw;
  height: 13cqw;
  width: auto;
  color: var(--mint);
}
.bcard.back .lockup {
  position: absolute;
  right: 7cqw;
  bottom: 7cqw;
  font-size: 5cqw;
}

/* 26 Closing */
.closing .big {
  position: absolute;
  left: var(--edge);
  bottom: 1.4cqw;
  font-size: 21cqw;
  line-height: 0.9;
}
.closing .contact {
  position: absolute;
  right: var(--edge);
  top: var(--edge);
  display: grid;
  grid-template-columns: 9cqw 1fr;
  row-gap: 0.6cqw;
  font-size: 1.2cqw;
  line-height: 1.4;
}
.closing .contact dt {
  font-family: var(--mono);
  font-size: 0.86cqw;
  color: var(--mute);
  text-transform: uppercase;
  line-height: 1.9;
}
.closing .credits {
  position: absolute;
  left: var(--edge);
  top: var(--edge);
  max-width: 34cqw;
  font-size: 0.95cqw;
  line-height: 1.55;
  color: var(--mute);
}
.closing .credits b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.5cqw;
  margin-bottom: 0.8cqw;
}

/* ---------- Phones: one slide per screen, swipe sideways (lopi pattern) ---------- */
@media screen and (max-width: 767px) {
  html {
    background: var(--white);
  }
  .deck {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .deck::-webkit-scrollbar {
    display: none;
  }
  .slide {
    flex: none;
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
    container-type: inline-size;
    box-shadow: none;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 88px;
    overflow: hidden;
  }
  /* The side column becomes the header; the panel keeps its desktop shape, so its drawing is the same. */
  .side {
    position: static;
    width: auto;
    display: contents;
  }
  .side h2 {
    order: 1;
    font-size: 30px;
  }
  .side .kr {
    order: 2;
    margin-top: 6px;
    font-size: 14px;
  }
  .panel {
    order: 3;
    position: relative;
    inset: auto;
    width: 100%;
    flex: none;
    aspect-ratio: var(--panel-ar);
    margin-top: 18px;
    border-radius: 6px;
  }
  .full .panel {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .side .lead {
    order: 4;
    margin-top: 16px;
    max-width: none;
    font-size: 14px;
  }
  .side .spec {
    order: 5;
    margin-top: 14px;
    grid-template-columns: 112px 1fr;
    row-gap: 6px;
    font-size: 12.5px;
    padding-top: 12px;
  }
  .side .spec dt {
    font-size: 11px;
  }
  .side .foot {
    display: none;
  }
  .full .panel {
    margin-block: auto;
  }
  .full .side .lead {
    order: 4;
  }
  /* Slides drawn without a side column get a phone layout of their own. */
  .cover .c-top,
  .cover .c-mark,
  .cover h1,
  .cover .c-meta,
  .closing .credits,
  .closing .contact,
  .closing .big,
  .idea > .statement,
  .idea > .reading,
  .toc {
    position: static;
  }
  .cover .c-top {
    order: 1;
    font-size: 18px;
  }
  .cover .c-mark {
    order: 2;
    height: 34svh;
    margin: 6svh auto 0;
  }
  .cover h1 {
    order: 3;
    margin-top: auto;
    font-size: 15cqw;
  }
  .cover .c-meta {
    order: 4;
    margin-top: 18px;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }
  .cover .c-meta .mono {
    font-size: 12px;
  }
  .toc-side h2 {
    font-size: 30px;
  }
  .toc {
    order: 3;
    margin-top: 16px;
    grid-template-columns: 1fr;
    align-content: start;
  }
  .toc a {
    grid-template-columns: 34px 1fr;
    padding: 6px 0;
    font-size: 16px;
  }
  .toc a span {
    font-size: 11px;
  }
  .toc-side .lead {
    display: none;
  }
  .idea .statement {
    order: 3;
    margin-top: 22px;
    font-size: 27px;
  }
  .idea .reading {
    order: 4;
    margin-top: 20px;
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .idea .reading p {
    font-size: 15px;
  }
  .idea .halves {
    max-width: 300px;
  }
  .idea .halves figcaption {
    font-size: 10px;
  }
  .idea .side .spec {
    order: 6;
  }
  .closing .credits {
    order: 1;
    max-width: none;
    font-size: 14px;
  }
  .closing .credits b {
    font-size: 24px;
  }
  .closing .contact {
    order: 2;
    margin-top: 22px;
    grid-template-columns: 96px 1fr;
    font-size: 15px;
  }
  .closing .contact dt {
    font-size: 11px;
  }
  .closing .big {
    order: 3;
    margin-top: auto;
    font-size: 20cqw;
  }
  .bar {
    bottom: 14px;
    height: 46px;
  }
  .bar .opt {
    display: none;
  }
}

/* ---------- Print: one slide per 16:9 page ---------- */
@page {
  size: 338.67mm 190.5mm;
  margin: 0;
}
@media print {
  html {
    background: none;
  }
  .bar,
  .skip {
    display: none;
  }
  .deck {
    display: block;
    padding: 0;
  }
  .slide {
    width: 338.67mm;
    height: 190.5mm;
    aspect-ratio: auto;
    box-shadow: none;
    break-after: page;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .slide:last-child {
    break-after: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- 1.1 additions: verbal identity, logo development, versions, motion, photo mock-ups ---------- */

/* Text animation: deck.js wraps words of titles in .w > span; the slide in view gets .in.
   Without JS, under reduced motion and in print the words simply stand still. */
.anim .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.anim .w > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.anim .slide.in .w > span {
  transform: none;
  opacity: 1;
}

/* Verbal identity */
.voice {
  position: absolute;
  inset: 0;
  padding: 3.2cqw;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3cqw;
}
.voice .traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6cqw;
}
.voice article {
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  border-top: 1px solid var(--ink);
  padding-top: 1.4cqw;
}
.voice h3 {
  margin: 0;
  font-size: 3.3cqw;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.voice .ko {
  font-family: var(--kr);
  font-size: 1.9cqw;
  color: var(--mute);
}
.voice .say,
.voice .not,
.voice .words > div {
  display: grid;
  gap: 0.45cqw;
  font-size: 1.85cqw;
  line-height: 1.35;
  word-break: keep-all;
}
.voice .words > div {
  font-size: 1.5cqw;
}
.voice .say {
  margin-top: 3cqw;
  padding: 1.6cqw;
  border-radius: 0.6cqw;
  background: var(--white);
}
.voice .not {
  padding: 0 1.6cqw;
}
.voice .say p:first-of-type {
  font-weight: 500;
}
.voice [lang="ko"] {
  font-family: var(--kr);
}
.voice .say p[lang="ko"],
.voice .words p[lang="ko"] {
  color: var(--ink-2);
}
.voice .not p {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.voice .mono {
  font-size: 1.05cqw;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.voice .say .mono {
  color: var(--mint);
}
.voice .words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
  padding-top: 1.6cqw;
  border-top: 1px solid var(--hair);
}
.voice .words .avoid p {
  color: var(--mute);
}

/* Messaging */
.msg {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 2.6cqw 3.2cqw;
  list-style: none;
  display: grid;
  grid-template-rows: 1fr 1.7fr 1.2fr 1fr 1fr;
}
.msg li {
  display: grid;
  grid-template-columns: 15cqw 1fr;
  grid-template-rows: auto auto;
  column-gap: 2cqw;
  align-content: center;
  border-top: 1px solid var(--hair);
}
.msg li .mono {
  grid-row: span 2;
  font-size: 1.05cqw;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.6cqw;
}
.msg p {
  font-size: 2.1cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
}
.msg p[lang="ko"] {
  font-family: var(--kr);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 1.75cqw;
  color: var(--mute);
  margin-top: 0.4cqw;
}
.msg .tagline p {
  font-size: 5cqw;
  letter-spacing: -0.045em;
  line-height: 1;
}
.msg .tagline p[lang="ko"] {
  font-size: 3.4cqw;
  color: var(--mint);
  margin-top: 0.8cqw;
}
.msg .proof p,
.msg li:last-child p {
  font-size: 1.7cqw;
}
.msg .proof p[lang="ko"],
.msg li:last-child p[lang="ko"] {
  font-size: 1.45cqw;
}
.msg b {
  display: inline-block;
  margin-left: 0.8cqw;
  padding: 0.3cqw 1cqw;
  border-radius: 0.4cqw;
  background: var(--ink);
  color: var(--white);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Logo development overview */
.dev {
  position: absolute;
  inset: 0 0 13cqw;
  padding: 2.4cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6cqw;
}
.dev .dir {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding: 2cqw;
  border-radius: 0.8cqw;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.25s var(--ease);
}
.dev .dir:hover {
  box-shadow: inset 0 0 0 1px var(--mint);
}
.dev .dir svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: center;
}
.dev .dir svg.kc {
  height: 72%;
}
.dev .dir b {
  margin-top: 1.2cqw;
  font-size: 1.8cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.dev .dir span {
  font-size: 1.15cqw;
  line-height: 1.4;
  color: var(--mute);
  margin-top: 0.3cqw;
}
.refs {
  position: absolute;
  left: 2.4cqw;
  right: 2.4cqw;
  bottom: 2cqw;
  height: 10cqw;
  margin: 0;
  padding: 1.2cqw 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.4cqw;
  row-gap: 0.4cqw;
  align-content: start;
  border-top: 1px solid var(--hair);
  font-size: 1.12cqw;
  line-height: 1.35;
  color: var(--mute);
}
.refs b {
  color: var(--ink);
  font-weight: 500;
}

/* A Refine */
.refine {
  position: absolute;
  inset: 0;
  padding: 2.6cqw 3cqw;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  gap: 1.6cqw;
}
.refine figure {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  padding: 1.4cqw 1.8cqw;
  background: var(--white);
  border-radius: 0.8cqw;
}
.refine figcaption {
  font-size: 1.05cqw;
  color: var(--mute);
}
.refine svg {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.refine .guides path {
  fill: none;
  stroke: var(--hair);
  stroke-width: 6;
}
.refine .guides .dash {
  stroke-dasharray: 30 30;
}
.refine .stems rect {
  fill: var(--glow);
  opacity: 0.35;
}
.refine .stems rect:nth-child(2) {
  opacity: 0.55;
}
.refine .meas path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 10;
}
.refine .meas text,
.refine text.gl {
  font-family: var(--mono);
  font-size: 84px;
  fill: var(--mint);
  text-anchor: middle;
}
.refine text.gl {
  fill: var(--mute-d);
  text-anchor: end;
  font-size: 64px;
}
.small-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2cqw;
}
.small-row > div {
  display: grid;
  gap: 0.6cqw;
  justify-items: start;
  padding: 1.2cqw 1.4cqw;
  background: var(--white);
  border-radius: 0.6cqw;
}
.small-row p {
  font-size: 0.95cqw;
  color: var(--mute);
}

/* B Approval motion */
.motion-b {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  padding: 3cqw;
  gap: 3cqw;
}
.motion-b .live {
  width: 100%;
  height: 78cqh;
  fill: var(--white);
}
.motion-b .live .ha,
.motion-b .live .hb {
  animation: halves 4.8s var(--ease) infinite;
}
.motion-b .live .hb {
  animation-name: halves-b;
}
.motion-b .live .pulse {
  fill: var(--glow);
  opacity: 0;
  animation: pulse 4.8s ease-out infinite;
}
@keyframes halves {
  0%, 22% { transform: translate(-78px, -78px); }
  42%, 58% { transform: translate(-28px, -28px); }
  70%, 100% { transform: none; }
}
@keyframes halves-b {
  0%, 22% { transform: translate(78px, 78px); opacity: 0.35; }
  42%, 58% { transform: translate(28px, 28px); opacity: 1; }
  70%, 100% { transform: none; opacity: 1; }
}
@keyframes pulse {
  0%, 66% { opacity: 0; transform: scale(0.6); }
  74% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.4); }
}
.motion-b .live .pulse {
  transform-origin: 272px 270px;
}
.motion-b .states {
  display: grid;
  gap: 1.6cqw;
}
.motion-b .states figure {
  display: grid;
  grid-template-columns: 8cqw 1fr;
  grid-template-rows: auto auto;
  column-gap: 2cqw;
  align-items: center;
  padding: 1.4cqw 0;
  border-top: 1px solid var(--hair-d);
}
.motion-b .states svg {
  grid-row: span 2;
  width: 8cqw;
  height: 8cqw;
  fill: var(--white);
  color: var(--white);
}
.motion-b figcaption {
  display: flex;
  gap: 1cqw;
  align-items: baseline;
}
.motion-b figcaption b {
  font-size: 2cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.motion-b figcaption span {
  font-family: var(--kr);
  font-size: 1.3cqw;
  color: var(--mute-d);
}
.motion-b .chip {
  justify-self: start;
  margin-top: 0.6cqw;
  padding: 0.4cqw 1cqw;
  border-radius: 0.4cqw;
  font-family: var(--mono);
  font-size: 1cqw;
  color: var(--mute-d);
  box-shadow: inset 0 0 0 1px var(--hair-d);
}
.motion-b .chip.on {
  color: var(--on-glow);
  background: var(--glow);
  box-shadow: none;
}

/* C Keycap */
.keycap {
  position: absolute;
  inset: 0;
  padding: 2.6cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.25fr 1fr;
  gap: 1.6cqw;
}
.keycap .hero {
  display: grid;
  place-items: center;
  border-radius: 0.8cqw;
  background: var(--white);
}
.keycap .hero svg {
  width: 52%;
  height: auto;
  filter: drop-shadow(0 2.2cqw 1.6cqw rgba(16, 41, 31, 0.28));
}
.keycap .photo {
  position: relative;
  margin: 0;
  border-radius: 0.8cqw;
  overflow: hidden;
}
.keycap .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.keycap .notif {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #1c1c1c 0%, #0a0a0a 75%);
}
.keycap .nt {
  width: 78%;
  display: grid;
  grid-template-columns: 3.4cqw 1fr;
  column-gap: 1.2cqw;
  row-gap: 0.35cqw;
  padding: 1.3cqw 1.4cqw;
  border-radius: 1.4cqw;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  margin-bottom: 1.6cqw;
}
.keycap .nt svg {
  grid-row: span 3;
  width: 3.4cqw;
  height: 3.4cqw;
}
.keycap .nt p {
  margin: 0;
  font-size: 1.15cqw;
  line-height: 1.3;
}
.keycap .nt p:first-of-type {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.55);
}
.keycap .nt p:first-of-type b {
  color: var(--white);
  font-weight: 600;
}
.keycap .nt .act {
  display: flex;
  gap: 0.6cqw;
  margin-top: 0.5cqw;
}
.keycap .nt .act span {
  padding: 0.35cqw 0.9cqw;
  border-radius: 0.4cqw;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 1cqw;
}
.keycap .nt .act .ok {
  background: var(--glow);
  border-color: var(--glow);
  color: #0a0a0a;
}
.keycap .photo figcaption,
.shots figcaption {
  position: absolute;
  left: 1.2cqw;
  bottom: 1cqw;
  font-family: var(--mono);
  font-size: 1.1cqw;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.keycap .set {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 1.6cqw;
}
.keycap .set figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 1.6cqw;
  border-radius: 0.8cqw;
  background: var(--white);
}
.keycap .set figure > svg {
  width: 62%;
  height: auto;
}
.keycap .set figcaption {
  font-family: var(--mono);
  font-size: 1cqw;
  color: var(--mute);
}
.keycap .px div {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

/* D Bracket */
.bracket {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1.2fr 1fr 1fr;
  gap: 1.2cqw;
}
.bracket .ban {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 0.8cqw;
  overflow: hidden;
  container-type: size;
}
.bracket .ban svg {
  width: 62%;
  height: auto;
  fill: currentColor;
}
.bracket .ban.split {
  grid-template-columns: 1.5fr 1fr;
  padding: 0 6cqw;
}
.bracket .ban.split svg {
  width: 92%;
}
.bracket .ban.split p {
  justify-self: end;
  font-size: 9cqh;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.bracket .ban.end svg {
  width: 46%;
}

/* Logo versions */
.versions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1.2cqw;
}
.versions .v {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 1.6cqw;
  border-radius: 0.8cqw;
  container-type: size;
}
.versions .art {
  display: grid;
  place-items: center;
  min-height: 0;
}
.versions .art svg {
  fill: currentColor;
}
.versions .st {
  height: 62cqh;
  width: auto;
}
.versions .wd {
  width: 62cqw;
  height: auto;
}
.versions .mk {
  height: 44cqh;
  width: auto;
}
.versions .kc {
  height: 50cqh;
  width: auto;
}
.versions .fav {
  height: 54cqh;
  width: auto;
}
.versions .fav .grid path {
  stroke: var(--hair);
  stroke-width: 0.04;
  fill: none;
}
.versions p {
  font-size: 4.6cqmin;
  line-height: 1.4;
  color: var(--mute);
}
.versions .on-black p {
  color: var(--mute-d);
}
.versions p b {
  display: block;
  font-size: 5.6cqmin;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.versions .on-black p b {
  color: var(--white);
}

/* Motion */
.motion {
  position: absolute;
  inset: 0;
  padding: 2.6cqw;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2.4cqw;
}
.motion .films {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6cqw;
}
.motion .film {
  margin: 0;
  display: grid;
  gap: 0.8cqw;
}
.motion video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.6cqw;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px var(--hair-d);
}
.motion .film figcaption,
.motion .specimen .mono {
  font-size: 1cqw;
  color: var(--mute-d);
}
.motion .specimen {
  display: grid;
  align-content: center;
  gap: 0.6cqw;
}
.motion .loop {
  font-size: 4.4cqw;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.motion .loop.ko {
  font-family: var(--kr);
  font-size: 3cqw;
  letter-spacing: -0.02em;
  color: var(--glow);
}
.motion .loop span {
  display: inline-block;
  animation: rise 4.8s var(--ease) infinite both;
  animation-delay: calc(var(--i) * 110ms);
}
@keyframes rise {
  0% { transform: translateY(0.5em); opacity: 0; }
  14%, 84% { transform: none; opacity: 1; }
  96%, 100% { transform: translateY(-0.2em); opacity: 0; }
}

/* Photo mock-up grids */
.shots {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 1.2cqw;
}
.shots figure {
  position: relative;
  margin: 0;
  border-radius: 0.8cqw;
  overflow: hidden;
}
.shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shots.s3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.shots.s3 .tall,
.shots.s4 .tall {
  grid-row: span 2;
}
.shots.s2 {
  grid-template-columns: 1fr 1fr;
}
.shots.s4 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Full-bleed slide on a light photograph: dark text */
.full.light-full .side,
.full.light-full .side .lead,
.full.light-full .side .kr,
.full.light-full .foot {
  color: var(--ink);
}
.full.light-full .panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Guide versions */
.log {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 3cqw 3.4cqw;
  list-style: none;
  display: grid;
  grid-template-rows: 1fr 1.6fr 1fr;
}
.log li {
  display: grid;
  grid-template-columns: 12cqw 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 2.4cqw;
  align-content: start;
  padding-top: 1.6cqw;
  border-top: 1px solid var(--hair);
}
.log .ver {
  grid-row: span 2;
  font-size: 6cqw;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.log .mono {
  font-size: 1.05cqw;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.log p {
  margin-top: 0.8cqw;
  font-size: 1.55cqw;
  line-height: 1.45;
  max-width: 62cqw;
}
.log .now .ver {
  color: var(--mint);
}
.log .next {
  color: var(--mute);
}
.log .next .ver {
  color: transparent;
  -webkit-text-stroke: 1px var(--mute);
}

/* Contents: 37 entries in three columns */
.toc.toc3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(13, min-content);
  column-gap: 2.6cqw;
}
.toc.toc3 a {
  font-size: 1.22cqw;
  padding: 0.42cqw 0;
  grid-template-columns: 2.6cqw 1fr;
}

/* Still frames for print and for reduced motion */
@media print {
  .anim .w > span {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .motion .loop span,
  .motion-b .live .ha,
  .motion-b .live .hb,
  .motion-b .live .pulse {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion .loop span,
  .motion-b .live .ha,
  .motion-b .live .hb,
  .motion-b .live .pulse {
    animation: none;
  }
}

/* 1.1: the full-bleed photographs are lighter at the top; keep the white title readable, and on light
   photographs keep the lead next to the title instead of at the bottom where the scene is busy. */
.inter .shade {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0) 28%, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, 0.55));
}
.full.light-full .side .lead {
  margin-top: 1.4cqw;
  margin-bottom: auto;
}
@media screen and (max-width: 767px) {
  .toc.toc3 {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    column-gap: 14px;
  }
  .toc.toc3 a {
    grid-template-columns: 24px 1fr;
    padding: 4px 0;
    font-size: 12.5px;
  }
  .toc.toc3 a span {
    font-size: 10px;
  }
}

/* ---------- r4 (1.2): structure after the Bolt brand guidelines (docs/r4-bolt-study.md) ---------- */

/* The foot keeps only the page number and the EN · KR switch, bottom left, like the page number at the foot of the Bolt rail. */
.foot {
  justify-content: flex-start;
}

/* Section index under every spec title (the Bolt nav rail): the current section in ink, the others grey. No mint in chrome. */
.snav {
  list-style: none;
  padding: 0;
  margin-top: 1.5cqw;
  font-size: 0.78cqw;
  line-height: 1.55;
  color: var(--mute);
}
.snav li {
  white-space: nowrap;
  opacity: 0.75;
}
.snav li.on {
  color: var(--ink);
  font-weight: 600;
  opacity: 1;
}
.snav li.on::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 1px;
  margin-right: 0.45em;
  vertical-align: 0.3em;
  background: currentColor;
}
.dark .snav li.on,
.full .snav li.on {
  color: var(--white);
}
.full .snav {
  color: rgba(255, 255, 255, 0.82);
}

/* Section openers (Bolt p4, 19, 32, 40): paper, one half of the spark cropped by the edge, a large title and one statement. */
.opener {
  background: var(--paper);
}
.op-shape {
  position: absolute;
  width: 62cqw;
  height: auto;
  color: var(--glow);
  right: -10cqw;
  top: -12cqw;
}
.op-logo .op-shape {
  transform: rotate(90deg);
  right: -6cqw;
  top: -20cqw;
}
.op-colour .op-shape {
  transform: rotate(180deg);
  right: -14cqw;
  top: 6cqw;
}
.op-type .op-shape {
  right: -4cqw;
  top: -22cqw;
}
.op-imagery .op-shape {
  transform: scaleX(-1);
  right: -8cqw;
  top: 2cqw;
}
.op-apps .op-shape {
  transform: rotate(90deg);
  right: -16cqw;
  top: -8cqw;
}
.op-num {
  position: absolute;
  left: var(--edge);
  top: var(--edge);
  font-family: var(--mono);
  font-size: 1cqw;
  letter-spacing: 0.02em;
}
.op-title {
  position: absolute;
  left: var(--edge);
  bottom: 17cqw;
  font-size: 9.4cqw;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.op-statement {
  position: absolute;
  left: var(--edge);
  bottom: 6.2cqw;
  max-width: 40cqw;
  font-size: 1.55cqw;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.opener .foot {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  margin: 0;
}

/* Contents grouped by section (Bolt p3). */
.toc.tocs {
  display: block;
  columns: 4;
  column-gap: 2.4cqw;
  top: calc(var(--edge) + 0.4cqw);
}
.tocs .toc-sec {
  break-inside: avoid;
  margin-bottom: 1.5cqw;
}
.tocs a {
  grid-template-columns: 2.4cqw 1fr;
  padding: 0.3cqw 0;
  font-size: 1.02cqw;
  border-top: 0;
}
.tocs a span {
  font-size: 0.72cqw;
}
.tocs a.sec {
  padding: 0.5cqw 0 0.45cqw;
  margin-bottom: 0.2cqw;
  border-top: 1px solid var(--ink);
  font-size: 1.5cqw;
}

/* Logo usage (Bolt p24). */
.usage {
  grid-template-columns: 1fr 1fr;
}
.u-n {
  position: absolute;
  left: 5cqw;
  top: 4.4cqw;
  font-size: 4cqw;
  opacity: 0.6;
}
.usage .on-black .lockup {
  font-size: 14cqw;
}
.u-head {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: 14cqw;
  font-size: 11cqw;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.u-sign {
  position: absolute;
  left: 8cqw;
  bottom: 7cqw;
}
.u-sign .lockup {
  font-size: 4.4cqw;
}

/* Co-branding (Bolt p25): lockup, 1x, hairline, 1x, partner. */
.cobrand {
  grid-template-rows: 1fr 1fr;
}
.cb-row {
  display: flex;
  align-items: center;
  font-size: 6.2cqw;
}
.cb-gap {
  position: relative;
  align-self: stretch;
  width: 0.66em; /* 1x = 0.70 em minus the side bearing of the I */
}
.cb-guides .cb-gap {
  background: rgba(220, 245, 234, 0.7);
  outline: 1px dashed rgba(8, 125, 83, 0.8);
}
.cb-gap b {
  display: none;
}
.cb-guides .cb-gap b {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -1.4em;
  text-align: center;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.26em;
  color: var(--mint);
}
.cb-line {
  width: 1px;
  height: 1.012em; /* the height of the spark */
  background: currentColor;
  opacity: 0.5;
}
.cb-partner {
  display: grid;
  place-items: center;
  /* Label at 0.24 of the row size; the box is the spark height (4.2 × 0.24 ≈ 1.012 em). */
  font-size: 0.24em;
  height: 4.2em;
  padding: 0 4.4em;
  border: 1px dashed currentColor;
  border-radius: 0.4em;
  font-family: var(--mono);
  white-space: nowrap;
}

/* Colour in type (Bolt p47, p49, p39). */
.tcolour {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr 1fr 1.45fr;
  gap: 1cqw;
}
.tcolour .on-white {
  box-shadow: inset 0 0 0 1px var(--hair);
}
.tcolour .tc {
  grid-column: span 2;
  place-items: center start;
}
/* Cell padding would be measured in panel units and shrink the cell's own cqw; children take the margin instead. */
.tcolour .tc p {
  margin-left: 7cqw;
}
.tcolour .tc p {
  font-size: 7.6cqw;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.tcolour em,
.express em {
  font-style: normal;
}
.tcolour .on-black em,
.express .on-black em {
  color: var(--glow);
}
.tcolour .on-paper em,
.tcolour .on-white em {
  color: var(--mint);
}
.tcolour .on-deep p {
  color: var(--white);
}
.tcolour .on-deep em {
  color: var(--glow);
}
.tc-no {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--hair);
  place-items: center start;
}
.tc-s {
  margin-left: 8cqw;
  margin-right: 8cqw;
}
.tc-s {
  font-size: 9.6cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 18cqw;
}
.tc-s.glow-on-white {
  color: var(--glow);
}
.tc-no .mint-on-black {
  background: var(--black);
  color: var(--mint);
  padding: 2cqw 3cqw;
}
.tc-s.two-lit em {
  font-style: normal;
  color: var(--mint);
}
.tc-s.caps {
  letter-spacing: 0.02em;
}
.tc-no .no {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: 8cqw;
  font-size: 7.4cqw;
  line-height: 1.3;
  color: var(--ink-2);
}
.tc-no .no::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.08em;
  background:
    linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}

/* Expressive and recessive type (Bolt p51–54). */
.express {
  grid-template-columns: 1.15fr 1fr;
}
.ex-loud,
.ex-quiet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.ex-loud > *,
.ex-quiet > * {
  margin-inline: 9cqw;
}
.ex-loud > :first-child,
.ex-quiet > :first-child {
  margin-top: 9cqw;
}
.ex-loud > :last-child,
.ex-quiet > :last-child {
  margin-bottom: 9cqw;
}
.ex-big {
  font-size: 12.5cqw;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.ex-small {
  font-size: 4.6cqw;
  line-height: 1.4;
  max-width: 70cqw;
  color: rgba(255, 255, 255, 0.72);
}
.ex-h {
  font-size: 8cqw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 80cqw;
}
.ex-b {
  margin-top: 4cqw;
  margin-bottom: auto;
  font-size: 4.6cqw;
  line-height: 1.5;
  max-width: 76cqw;
  color: var(--mute);
}
.ex-sign .lockup {
  font-size: 6cqw;
}

@media screen and (max-width: 767px) {
  .snav {
    display: none;
  }
  .opener .op-title {
    font-size: 56px;
    bottom: 40%;
  }
  .opener .op-statement {
    max-width: none;
    right: 20px;
    font-size: 17px;
    bottom: 120px;
  }
  .op-shape {
    width: 120cqw;
  }
  .toc.tocs {
    columns: 2;
    column-gap: 14px;
  }
  .tocs a {
    grid-template-columns: 22px 1fr;
    font-size: 12px;
    padding: 2px 0;
  }
  .tocs a span {
    font-size: 9.5px;
  }
  .tocs a.sec {
    font-size: 14px;
  }
  .tocs .toc-sec {
    margin-bottom: 10px;
  }
}