/* ============================================================
   Loe Lee · Portfolio — "Evidence" editorial system
   Sparse, intentional, artifact-forward. Geist + Geist Mono.
   ============================================================ */

:root {
  /* Warm-neutral monochrome shell — lets the artifacts carry color */
  --paper:    #E8E6DD;
  --surface:  #F1EFE8;
  --surface-2:#F9F8F2;
  --ink:      #1A1813;
  --ink-2:    #5F5A50;
  --ink-3:    #655F54;
  --line:     rgba(26,24,19,0.12);
  --line-2:   rgba(26,24,19,0.22);

  /* Single restrained accent (tweakable) */
  --accent:   #BC4A2E;
  /* Deeper accent for SMALL text on light bg — meets WCAG AA (~5.4:1) */
  --accent-text: #A23C20;
  --accent-ink: #1A1813;

  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Newsreader", "Hanken Grotesk", Georgia, serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* density (tweakable via [data-density]) */
  --gutter: 7vw;
  --section-y: 132px;
  --maxw: 1180px;

  --shadow-soft: 0 1px 2px rgba(26,24,19,0.04), 0 18px 50px -22px rgba(26,24,19,0.30);
  --shadow-lift: 0 1px 2px rgba(26,24,19,0.05), 0 40px 80px -30px rgba(26,24,19,0.42);
}

[data-density="compact"] {
  --section-y: 92px;
  --gutter: 5vw;
}

@media (max-width: 760px){
  :root { --section-y: 78px; }
  [data-density="compact"] { --section-y: 60px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

/* ===== Layout primitives ===== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page { position: relative; overflow-clip-margin: content-box; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; }
.section + .section { padding-top: 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ===== Type ===== */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker .idx { color: var(--accent-text); }
.kicker .bar { width: 28px; height: 1px; background: var(--line-2); }

.display {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(44px, 7.4vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
}
.h-xl {
  font-family: var(--font-display);
  font-weight: 540;
  font-size: clamp(38px, 6.0vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.h-lg {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(31px, 4.1vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h-md {
  font-weight: 540;
  font-size: clamp(23px, 2.6vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.h-sub {
  font-weight: 540;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.lede {
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 19em;
  margin: 0;
  text-wrap: pretty;
}
.body { font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 34em; margin: 0; text-wrap: pretty; }
.body.tight { max-width: 28em; }
.body strong { color: var(--ink); font-weight: 540; }
.accent { color: var(--accent); }
.struck { text-decoration: none; position: relative; color: var(--ink-3); display: inline-block; transform: rotate(-1.5deg); }
.struck::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 0.07em; background: var(--accent); border-radius: 2px; transform: rotate(-2.2deg); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===== Nav ===== */
.nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-brand { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }
.nav-brand b { font-weight: 600; letter-spacing: 0.04em; }
.nav-brand .sep { color: var(--ink-3); }
.nav-brand .role { color: var(--ink-3); font-size: 12px; }
.nav-links { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.nav-links a {
  padding: 7px 13px; border-radius: 999px; color: var(--ink-2); white-space: nowrap;
  transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-links a.active { color: var(--ink); }
.nav-links a.cta { color: var(--ink); }
.nav-links a.cta::after { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-left:7px; vertical-align: middle; }

/* Mobile menu disclosure — only shown when the flat links would wrap */
.nav-group { display: none; position: relative; }
.nav-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; color: var(--ink-2); white-space: nowrap;
  transition: color .18s, background .18s;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-group > summary.active { color: var(--ink); }
.nav-group[open] > summary { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Hamburger glyph */
.nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 15px; }
.nav-burger span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-burger span:nth-child(1) { width: 15px; }
.nav-burger span:nth-child(2) { width: 15px; }
.nav-burger span:nth-child(3) { width: 10px; }
.nav-group[open] .nav-burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); width: 15px; }
.nav-group[open] .nav-burger span:nth-child(2) { opacity: 0; }
.nav-group[open] .nav-burger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); width: 15px; }
.nav-group-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  display: flex; flex-direction: column; min-width: 184px;
  padding: 6px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
}
.nav-group-menu a { padding: 10px 12px; border-radius: 9px; }
.nav-group-menu a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.nav-group-menu a.active { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-group-head {
  padding: 4px 12px 6px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); pointer-events: none;
}
.nav-group-sep { height: 1px; margin: 6px 8px; background: var(--line); }

@media (max-width: 760px){
  .nav { flex-wrap: nowrap; gap: 0; }
  .nav-brand .role { display: none; }
  .nav-links { flex-wrap: nowrap; justify-content: flex-end; gap: 0; }
  .nav-flat { display: none; }
  .nav-group { display: inline-block; }
  .nav-group > summary { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== Hero ===== */
.hero { padding-top: clamp(60px, 11vw, 150px); padding-bottom: clamp(50px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(280px, 400px); gap: clamp(36px, 5vw, 88px); align-items: center; }
.hero-portrait { margin: 0; position: relative; }
.hero-portrait img {
  display: block; width: 100%; aspect-ratio: 1 / 1.18; object-fit: cover; object-position: 50% 0%;
  border-radius: 46% 54% 44% 56% / 40% 46% 54% 60%;
  box-shadow: 0 24px 60px -22px rgba(26,24,19,0.40);
  filter: contrast(0.98) sepia(0.07) brightness(1.02);
}
.hero-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 46% 54% 44% 56% / 40% 46% 54% 60%;
  background: var(--accent);
  mix-blend-mode: multiply; opacity: 0.06;
}
@media (max-width: 860px){
  .hero-grid { grid-template-columns: 1fr; gap: clamp(28px,5vw,44px); }
  .hero-portrait { max-width: 340px; }
}
.hero-meta { display:flex; flex-wrap: wrap; gap: 28px 56px; margin-top: clamp(40px,7vw,90px); }
.hero-meta .cell { }
.hero-meta .cell .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.hero-meta .cell .v { font-size: 16px; line-height: 1.4; color: var(--ink); max-width: 24ch; }
@media (max-width: 560px){
  .hero-meta { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin-top: clamp(28px,9vw,40px); }
  .hero-meta .cell { display: grid; grid-template-columns: 78px 1fr; column-gap: 16px; align-items: baseline; }
  .hero-meta .cell .k { margin-bottom: 0; }
  .hero-meta .cell .v { font-size: 15px; max-width: none; }
}

/* ===== Figures / artifact plates ===== */
.figure { margin: 0; }
.figure figcaption,
.fig-cap {
  margin-top: 14px;
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); line-height: 1.5;
}
.fig-cap .no { color: var(--accent-text); white-space: nowrap; letter-spacing: 0.1em; }
.fig-cap .txt { color: var(--ink-2); }
.fig-cap .txt b { color: var(--ink); font-weight: 540; }

/* generic mount: rounded plate on surface with soft shadow */
.plate {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.plate.bare { background: transparent; border: 0; box-shadow: none; border-radius: 12px; }
.plate img { width: 100%; height: auto; display: block; }

/* mobile screenshot mount — narrow, centered, soft */
.shot-phone {
  position: relative;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(155deg, #2a2c30, #121316 60%);
  box-shadow: var(--shadow-lift), inset 0 0 0 1.5px rgba(255,255,255,0.08);
  overflow: visible;
}
.shot-phone::before {
  /* side buttons */
  content: "";
  position: absolute;
  left: -2px; top: 116px;
  width: 3px; height: 58px;
  border-radius: 3px 0 0 3px;
  background: #1b1c1f;
  box-shadow: 0 78px 0 #1b1c1f;
}
.shot-phone::after {
  content: "";
  position: absolute;
  right: -2px; top: 134px;
  width: 3px; height: 92px;
  border-radius: 0 3px 3px 0;
  background: #1b1c1f;
}
.shot-phone img { width: 100%; display:block; border-radius: 33px; }

/* desktop screenshot in a minimal browser chrome */
.browser {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-soft);
  background: var(--surface-2);
}
.browser .bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: #E7E3DA; border-bottom: 1px solid var(--line);
}
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc9bd; display:inline-block; }
.browser .bar .url {
  margin-left: 10px; flex: 1; height: 20px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  display: flex; align-items: center; padding: 0 10px; letter-spacing: 0.02em;
  max-width: 320px;
}
.browser img { width: 100%; display: block; }

/* home Vanta video card */
.case-meta-link { display: block; color: inherit; text-decoration: none; }
.video-frame { display: block; text-decoration: none; }
.video-thumb { position: relative; }
.video-thumb img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,24,19,0.62); color: #fff; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s;
}
.video-play svg { margin-left: 3px; }
.video-frame:hover .video-play { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.case-link .video-frame .browser { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.case-link .video-frame:hover .browser { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* full-bleed image edge to edge of content column */
.bleed { width: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
.bleed img { width: 100%; display:block; }

/* contact-print strip of small artifacts */
.strip { display: grid; gap: 14px; }

/* uniform artifact tiles (mixed-aspect screenshots, consistent height) */
.tilerow { display: grid; gap: clamp(12px,1.6vw,20px); }
.tilerow.c2 { grid-template-columns: repeat(2, 1fr); }
.tilerow.c3 { grid-template-columns: repeat(3, 1fr); }
.tilerow.c4 { grid-template-columns: repeat(4, 1fr); }
.tile {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
}
.tile .frame { position: relative; height: var(--tile-h, 280px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tile .frame img { width: 100%; height: 100%; object-fit: contain; }
.tile.cover .frame img { object-fit: cover; object-position: top; }
.tile .tcap { padding: 11px 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2); line-height: 1.45; }
.tile .tcap b { color: var(--ink); font-weight: 540; }
@media (max-width: 900px){ .tilerow.c4 { grid-template-columns: repeat(2,1fr);} .tilerow.c3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .tilerow.c2, .tilerow.c3, .tilerow.c4 { grid-template-columns: 1fr; } }

/* ===== Work / case index cards ===== */
.case-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.case-row.flip { direction: rtl; }
.case-row.flip > * { direction: ltr; }
.case-link { display: block; }
.case-meta { display: flex; flex-direction: column; gap: 22px; }
.case-mode { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px){
  .case-row, .case-row.flip { grid-template-columns: 1fr; gap: clamp(22px,6vw,32px); direction: ltr; align-items: stretch; }
  .case-row > *:last-child { order: -1; }
  .case-meta { gap: 16px; }
}
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap;
}
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.chip-soon { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.soon-banner {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 9px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px; padding: 8px 15px;
}
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: soonpulse 1.8s ease-in-out infinite; }
@keyframes soonpulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }
@media (prefers-reduced-motion: reduce){ .soon-dot { animation: none; } }
/* Mobile: drop the chunky pill box — read it as a simple status line so it
   doesn't wrap into a two-line box that crowds the title. */
@media (max-width: 600px){
  .soon-banner {
    background: none; border: 0; padding: 0; border-radius: 0;
    align-items: flex-start; gap: 8px; margin-bottom: 18px;
  }
  .soon-dot { flex: none; margin-top: 5px; }
}
.case-stat { display: flex; align-items: baseline; gap: 16px; }
.case-stat .num { font-weight: 540; font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.04em; line-height: 0.9; }
.case-stat .cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); max-width: 18ch; line-height: 1.5; }

.read {
  align-self: flex-start; max-width: 100%;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color .2s, text-underline-offset .2s;
}
.case-link:hover .read { color: var(--accent-text); text-underline-offset: 7px; }
.case-link .plate, .case-link .browser, .case-link .shot-phone { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.case-link:hover .plate, .case-link:hover .browser, .case-link:hover .shot-phone { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* Match the phone mock's resting shadow to the plate/browser mocks so the
   space below each image reads the same when the cards stack. */
.case-link .shot-phone { box-shadow: var(--shadow-soft), inset 0 0 0 1.5px rgba(255,255,255,0.08); }

/* ===== Meerah persona (HubSpot · The user) ===== */
.meerah-story { margin-bottom: clamp(40px, 5vw, 64px); }
.comic-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.comic-panel {
  display: flex; flex-direction: column; margin: 0;
  border: 3px solid var(--ink); border-radius: 6px;
  background: #fff; overflow: hidden;
}
.comic-frame {
  position: relative; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 0.78;
}
.comic-frame img { position: relative; width: 87%; height: 87%; object-fit: contain; }
.comic-no {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fffdf6;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  border-bottom-right-radius: 9px;
}
.comic-cap {
  display: flex; align-items: center; min-height: 62px;
  border-top: 3px solid var(--ink);
  background: color-mix(in srgb, var(--accent) 16%, #fffdf6);
  color: var(--ink); padding: 11px 14px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4;
  letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance;
}
.meerah-tools .label { margin-bottom: 18px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tool {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  height: 104px; display: flex; align-items: center; justify-content: center;
  padding: 22px 26px; transition: transform .2s, box-shadow .2s;
}
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.tool img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 720px){
  .comic-strip { grid-template-columns: 1fr; }
  .comic-frame { aspect-ratio: 1 / 0.62; }
}
/* Meerah → HubSpot transition card */
.meerah-move {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px;
}
.meerah-move .pull { max-width: 12em; }
.meerah-move-fig {
  margin: 0; flex: 0 0 auto; width: clamp(120px, 16vw, 184px); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line); border-radius: 58% 42% 52% 48% / 50% 52% 48% 50%;
}
.meerah-move-fig img { width: 80%; height: 80%; object-fit: contain; transform: rotate(-3deg); }
@media (max-width: 640px){
  .meerah-move { flex-direction: column-reverse; align-items: center; text-align: center; }
  .meerah-move .pull { max-width: none; }
}

/* ===== Belief list (Why Vanta) ===== */
.beliefs { border-top: 1px solid var(--line); }

/* ===== Writing list (Thought leadership) ===== */
.writing-list { border-top: 1px solid var(--line); }
.writing-item:last-child { border-bottom: 0; }
.writing-item {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 28px; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .25s, background .25s; color: var(--ink);
}
.writing-item:hover { padding-left: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.writing-item .w-no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
.writing-item .w-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.writing-item .w-title { font-weight: 500; font-size: clamp(20px, 2.3vw, 29px); letter-spacing: -0.02em; line-height: 1.1; transition: color .2s; }
.writing-item:hover .w-title { color: var(--accent-text); }
.writing-item .w-desc { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 52em; text-wrap: pretty; }
.writing-item .w-src { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-align: right; }
.writing-item .w-arrow { display: inline-block; transition: margin-left .2s; }
.writing-item:hover .w-arrow { margin-left: 4px; }
@media (max-width: 760px){
  .writing-item { grid-template-columns: 36px 1fr; }
  .writing-item .w-src { grid-column: 2; text-align: left; margin-top: 2px; }
}

.belief {
  display: grid; grid-template-columns: 64px 1fr; column-gap: 24px; row-gap: 6px; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .25s, background .25s;
}
.belief:hover { padding-left: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.belief .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
.belief .t { font-weight: 500; font-size: clamp(22px, 2.7vw, 34px); letter-spacing: -0.02em; line-height: 1.08; }
.belief-desc { grid-column: 2; margin: 5px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 46em; text-wrap: pretty; }
.belief .meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
@media (max-width: 700px){ .belief { grid-template-columns: 40px 1fr; } .belief .meta { display:none; } .belief-desc { grid-column: 2; } }

/* ===== Testimonials ===== */
.quote { }
.quote .body-q { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.quote .who { margin-top: 22px; display:flex; align-items:center; gap: 14px; }
.quote .who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.quote .who .name { font-weight: 540; font-size: 15px; letter-spacing: -0.01em; }
.quote .who .title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* ===== Case study internals ===== */
.case-hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(36px,5vw,64px); }
.back {
  display:flex; width: fit-content; align-items:center; gap:9px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  transition: gap .2s, color .2s; margin-bottom: clamp(28px,4vw,48px);
}
.back:hover { color: var(--ink); gap: 14px; }

.toc { display:flex; flex-wrap: wrap; gap: 8px 8px; }
.toc a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2); padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 999px;
  transition: color .18s, border-color .18s, background .18s;
}
.toc a:hover { color: var(--ink); border-color: var(--ink); }

/* numbered chapter block */
.chapter { padding-top: clamp(64px, 8vw, 116px); padding-bottom: 8px; scroll-margin-top: 80px; }
.chapter-head .kicker .idx { color: inherit; }
.chapter-head .kicker { margin-bottom: clamp(22px,3vw,34px); }
.chapter-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px,6vw,104px); align-items: start; }
.chapter-cols .lead .h-lg { padding-right: clamp(0px,2vw,32px); }
@media (min-width: 821px){ .chapter-cols .notes { margin-top: -0.72em; } }
@media (max-width: 820px){ .chapter-cols { grid-template-columns: 1fr; gap: 18px; } }

.note { font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.note + .note { margin-top: 14px; }

/* findings list — lean, hairline rows */
.findings { border-top: 1px solid var(--line); margin-top: 8px; }
.finding { display: grid; grid-template-columns: var(--fcols, 220px 1fr); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.finding .ft { font-weight: 540; font-size: 17px; letter-spacing: -0.01em; }
.finding .fn { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; padding-top: 2px; }
.finding .fb { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; max-width: 44em; }
@media (max-width: 700px){
  .finding { grid-template-columns: 1fr; gap: 8px; }
  .finding.is-numbered { grid-template-columns: 28px 1fr; column-gap: 14px; row-gap: 6px; }
  .finding.is-numbered .fb { grid-column: 2; }
  .finding.is-numbered .fn { padding-top: 4px; }
}

/* stat band */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stats .s { background: var(--surface-2); padding: 30px 26px; }
.stats .s .num { font-weight: 540; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.04em; line-height: 0.92; }
.stats .s .cap { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.55; max-width: 22ch; }
@media (max-width: 900px){ .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .stats { grid-template-columns: 1fr; } .stats .s .cap { max-width: none; } }

/* grade pill */
.grade { display:inline-flex; align-items:center; justify-content:center; min-width: 40px; padding: 3px 10px; border-radius: 7px; font-family: var(--font-mono); font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.grade.a { background: #1F7A3D; color: #fff; border-color:#1F7A3D; }
.grade.b { background: #C99700; color: #fff; border-color: #C99700; }
.grade.f { background: var(--accent); color: #fff; border-color: var(--accent); }

.report { border-top: 1px solid var(--line); margin-top: 8px; }
.report .r { display:grid; grid-template-columns: 1fr auto; gap: 20px; align-items:center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.report .r .rt { font-size: 16px; }
.report .r .rd { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; max-width: 56ch; line-height: 1.5; }
.report .grades { display:flex; gap: 10px; align-items:center; }
.report .arrow { color: var(--ink-3); }

/* auth requirement map — numbered hairline table */
.brief-doc {
  margin: 0 0 clamp(34px,4vw,52px); max-width: 460px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: clamp(28px,3vw,40px) clamp(28px,3vw,38px);
  display: flex; flex-direction: column; gap: clamp(22px,2.4vw,30px);
}
.brief-row { display: flex; flex-direction: column; gap: 10px; }
.brief-label { font-size: clamp(17px,1.4vw,20px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 2px; }
.brief-bar { height: 13px; border-radius: 3px; background: var(--surface-2); }
.brief-bar.short { width: 100%; }

/* one-pager artifact (filled, real content) */
.onepager {
  margin: 0; max-width: 460px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.onepager-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.onepager-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.onepager-body { padding: clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: clamp(16px,1.8vw,22px); }
.op-row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.op-row + .op-row { border-top: 1px solid var(--line); padding-top: clamp(16px,1.8vw,22px); }
.op-label { font-weight: 540; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.op-row p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.op-bar { height: 11px; border-radius: 4px; background: var(--surface-2); width: 100%; }
@media (max-width: 460px){ .op-row { grid-template-columns: 1fr; gap: 5px; } }

/* attribution credit tag on an image */
.credit-wrap { position: relative; }
.credit-tag {
  position: absolute; right: clamp(10px, 1.4vw, 16px); bottom: clamp(10px, 1.4vw, 16px);
  display: flex; align-items: center; gap: 9px;
  background: color-mix(in srgb, var(--ink) 78%, #6b6358);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; border-radius: 999px;
  padding: 5px 13px 5px 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.2;
}
.credit-faces { position: relative; width: 47px; height: 28px; flex: none; }
.credit-face { position: absolute; border-radius: 50%; object-fit: cover; background: #5a6678; border: 1.5px solid color-mix(in srgb, var(--ink) 78%, #6b6358); }
.credit-face.lg { width: 28px; height: 28px; left: 0; top: 0; z-index: 1; }
.credit-face.sm { width: 23px; height: 23px; left: 24px; top: 5px; z-index: 2; }
.credit-sub { font-weight: 400; opacity: 0.7; }
@media (max-width: 560px){
  .credit-tag { font-size: 12px; gap: 7px; padding: 4px 10px 4px 5px; right: 8px; bottom: 8px; }
  .credit-faces { width: 40px; height: 24px; }
  .credit-face.lg { width: 24px; height: 24px; }
  .credit-face.sm { width: 20px; height: 20px; left: 20px; top: 4px; }
}

/* solution sub-steps (nested under a parent) */
.sol-steps { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); padding-left: clamp(18px, 2.4vw, 32px); border-left: 2px solid var(--line); }
.sol-step-t { position: relative; margin: 0 0 14px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 540; letter-spacing: -0.01em; color: var(--ink); }
.sol-step-t::before { content: ""; position: absolute; left: calc(-1 * clamp(18px, 2.4vw, 32px) - 1px); top: 0.55em; width: clamp(10px, 1.4vw, 16px); height: 2px; background: var(--line-2); transform: translateY(-50%); }
.sol-step .note { margin: 0 0 18px; }

/* low UX morale — two artifacts side by side */
.morale-artifacts { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 820px){ .morale-artifacts { grid-template-columns: 1fr; gap: 28px; } }

.brief-shot {
  margin: 0 0 clamp(34px,4vw,52px); max-width: 560px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface-2);
}
.brief-shot img { display: block; width: 100%; height: auto; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px,2.6vw,36px); }
.principle { display: flex; flex-direction: column; }
.principle-shot {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; height: clamp(320px, 30vw, 440px);
  display: flex; align-items: center; justify-content: center;
}
.principle-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.principle-body { padding-top: 18px; }
.principle-brand { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.principle-t { font-size: clamp(18px,1.5vw,22px); font-weight: 540; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 6px; color: var(--ink); }
.principle-d { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 30em; text-wrap: pretty; }
@media (max-width: 900px){ .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .principles { grid-template-columns: 1fr; } }

.subsec { margin-top: clamp(36px,5vw,64px); }
.subhead {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-sans); font-weight: 540;
  font-size: clamp(20px,2.2vw,26px); letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: clamp(18px,2vw,26px);
}
.subhead-mark {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; transform: translateY(-2px); flex: none;
}
.authmap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.authmap-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.authmap-head .label { margin: 0; }
.authmap-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.authmap-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.authmap-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.authmap-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent-text); flex: none; }
.authmap-t { font-size: 15px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
/* close the right edge per row of three */
.authmap-grid .authmap-row:nth-child(3n) { border-right: 0; }
@media (max-width: 820px){
  .authmap-grid { grid-template-columns: repeat(2, 1fr); }
  .authmap-grid .authmap-row:nth-child(3n) { border-right: 1px solid var(--line); }
  .authmap-grid .authmap-row:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px){
  .authmap-grid { grid-template-columns: 1fr; }
  .authmap-grid .authmap-row { border-right: 0 !important; }
}

/* gallery grids for artifacts */
.gal { display: grid; gap: clamp(16px, 2vw, 26px); }
.gal-2 { grid-template-columns: repeat(2, 1fr); }
.gal-3 { grid-template-columns: repeat(3, 1fr); }
.gal-4 { grid-template-columns: repeat(4, 1fr); }
.gal-phones { grid-template-columns: repeat(4, 1fr); align-items: end; }
@media (max-width: 900px){ .gal-3, .gal-4, .gal-phones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gal-2, .gal-3, .gal-4, .gal-phones { grid-template-columns: 1fr; } }

/* split: text beside one tall artifact */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; }
.split.narrow-img { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 820px){ .split, .split.narrow-img { grid-template-columns: 1fr; gap: 32px; } }

/* hard editor: screenshot + task grades */
.hard-editor { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.hard-editor .report { margin-top: 0; }
@media (max-width: 820px){ .hard-editor { grid-template-columns: 1fr; gap: 32px; } }

/* pull statement */
.pull { font-weight: 500; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; max-width: 16em; }
.pull em { font-style: normal; color: var(--accent); }
.pull em.marker { color: var(--accent); }
.interrupt-row { display: flex; align-items: center; gap: clamp(24px,4vw,64px); }
.interrupt-row > div:first-child { flex: 1; min-width: 0; }
.interrupt-cat { width: auto; height: clamp(150px, 22vw, 300px); flex-shrink: 0; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.16)); }
@media (max-width: 680px){ .interrupt-cat { display: none; } }
.urgent-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 8px 13px; border-radius: 6px;
  transform: rotate(-2.2deg); transform-origin: left center; margin-bottom: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 6px 18px rgba(188,74,46,0.22);
}
.urgent-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
@media (prefers-reduced-motion: no-preference){
  .urgent-tag .dot { animation: urgentPulse 1.05s ease-in-out infinite; }
  .urgent-tag { animation: urgentWobble 4s ease-in-out infinite; }
}
@keyframes urgentPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
@keyframes urgentWobble { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(-3.4deg); } }

/* next case footer link */
.nextcase { display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: clamp(40px,6vw,80px) 0; }
.nextcase .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.nextcase .nm { font-family: var(--font-display); font-weight: 560; font-size: clamp(34px, 5.2vw, 74px); letter-spacing: -0.018em; line-height: 1.02; }
.nextcase .nm:hover { color: var(--accent); }

/* ===== Footer ===== */
.footer { background: var(--ink); color: var(--paper); padding: clamp(70px,9vw,120px) var(--gutter) 48px; }
.footer .fwrap { max-width: var(--maxw); margin: 0 auto; }
.footer .big { font-weight: 520; font-size: clamp(40px, 8vw, 116px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; }
.footer .big .accent { color: var(--accent); }
.footer .frow { display:flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-top: clamp(40px,6vw,72px); }
.footer .links { display:flex; flex-wrap: wrap; gap: 10px; }
.footer .links a {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  padding: 11px 18px; border: 1px solid rgba(236,232,224,0.28); border-radius: 999px;
  transition: background .18s, color .18s;
}
.footer .links a:hover { background: var(--paper); color: var(--ink); }
.footer .links a.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer .links a.solid:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.footer .colota { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236,232,224,0.6); line-height: 1.8; text-align: right; }
@media (max-width: 760px){ .footer .colota { text-align: left; } }
.footer .base { margin-top: clamp(40px,6vw,72px); padding-top: 22px; border-top: 1px solid rgba(236,232,224,0.16); display:flex; flex-wrap:wrap; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236,232,224,0.55); }

/* ===== entrance: opacity stays 1 (safe under frozen-iframe capture); only transform animates ===== */
.reveal { opacity: 1; animation: revealRise 0.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes revealRise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce){ .reveal { animation: none; } html { scroll-behavior: auto; } }

/* ===== Coaching ===== */
.coach-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.coach-tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(26px, 2.6vw, 36px);
}
.coach-tier.featured { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow-soft); }
.coach-badge {
  position: absolute; top: -11px; left: clamp(26px, 2.6vw, 36px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 11px;
}
.coach-price { font-family: var(--font-display); font-weight: 560; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.015em; line-height: 1; color: var(--ink); }
.coach-name { margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.coach-tag { margin: 12px 0 0; font-style: italic; font-size: 15px; color: var(--accent-text); }
.coach-desc { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 820px){
  .coach-tiers { grid-template-columns: 1fr; max-width: 460px; }
  /* Cards now stack — bring the overhanging badge inside the card so it
     no longer juts up into the card above. */
  .coach-badge { position: static; align-self: flex-start; margin-bottom: 16px; }
}

.coach-form-wrap {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 820px){ .coach-form-wrap { grid-template-columns: 1fr; gap: 28px; } }
.coach-form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 22px); }
@media (max-width: 640px){ .coach-form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 15.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 14px; width: 100%; transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1813' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 42px; cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.coach-form-actions { display: flex; }
.coach-submit {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 26px; cursor: pointer; transition: background .2s, transform .2s;
}
.coach-submit:hover { background: var(--accent-text); transform: translateY(-1px); }
.coach-submit:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.coach-sent {
  display: flex; gap: 14px; align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px; padding: clamp(22px, 2.4vw, 30px);
}
.coach-submit:disabled { opacity: 0.6; cursor: progress; }
.coach-error { margin: 0; align-self: center; font-size: 13.5px; color: var(--accent-text); }
.coach-sent strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.coach-sent-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }

/* ===== Tweaks panel host ===== */
#tweaks-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; }

/* ============================================================
   GRC Agentic Workflow UX — embedded pageable teaser deck
   Fluid via container queries; matches the editorial system.
   ============================================================ */
.grc-deck { margin: 0; --gaccent: #E0775A; }

.grc-stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  outline: none;
}
.grc-stage:focus-visible { box-shadow: var(--shadow-soft), 0 0 0 3px rgba(188,74,46,0.4); }

.grc-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(22px, 6cqi, 64px);
}
.grc-slide.light { background: var(--surface-2); color: var(--ink); }
.grc-slide.dark  { background: var(--ink); color: #ECE6DA; }

@media (prefers-reduced-motion: no-preference) {
  .grc-slide[data-dir="next"] { animation: grcInNext .42s cubic-bezier(.2,.7,.2,1); }
  .grc-slide[data-dir="prev"] { animation: grcInPrev .42s cubic-bezier(.2,.7,.2,1); }
}
@keyframes grcInNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes grcInPrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* topbar */
.grc-topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: clamp(9px, 1.5cqi, 12px);
  letter-spacing: 0.16em; text-transform: uppercase; flex: none;
}
.grc-slide.light .grc-topbar { color: var(--ink-3); }
.grc-topbar span { white-space: nowrap; }
.grc-slide.dark  .grc-topbar { color: rgba(236,230,218,0.55); }

/* content frame */
.grc-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.grc-content.no-ex { justify-content: center; }
.grc-main { margin-top: auto; }
.grc-content.no-ex .grc-main { margin-top: 0; }

/* shared type */
.grc-cat {
  font-family: var(--font-mono); font-size: clamp(10px, 1.7cqi, 13px);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: clamp(9px, 1.8cqi, 16px);
}
.grc-slide.dark .grc-cat { color: var(--gaccent); }
.grc-title {
  font-family: var(--font-display); font-weight: 500; line-height: 1.05;
  letter-spacing: -0.012em; font-size: clamp(23px, 5.4cqi, 48px);
  margin: 0; text-wrap: balance;
}
.grc-title-sm { font-size: clamp(22px, 4.6cqi, 40px); }
.grc-body {
  font-size: clamp(13px, 2.4cqi, 19px); line-height: 1.5;
  color: var(--ink-2); max-width: 48ch; margin: clamp(10px, 2.2cqi, 20px) 0 0;
  text-wrap: pretty;
}
.grc-slide.dark .grc-body { color: rgba(236,230,218,0.72); }

/* ghost numeral */
.grc-ghost {
  position: absolute; top: clamp(30px, 7cqi, 70px); right: clamp(16px, 4.5cqi, 48px);
  font-family: var(--font-display); font-weight: 500; line-height: 0.8;
  font-size: clamp(96px, 30cqi, 280px); color: rgba(26,24,19,0.045);
  pointer-events: none; user-select: none;
}

/* example block */
.grc-ex {
  margin-top: auto; padding-top: clamp(13px, 2.6cqi, 22px);
  border-top: 1px solid var(--line);
}
.grc-ex-label {
  font-family: var(--font-mono); font-size: clamp(9px, 1.5cqi, 12px);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.grc-ex-who { color: var(--accent-text); }
.grc-ex-text {
  font-size: clamp(12px, 2.2cqi, 16px); line-height: 1.46; color: var(--ink-2);
  margin: clamp(5px, 1cqi, 9px) 0 0; max-width: 64ch;
}

/* lookout multi-example */
.grc-ex-list { display: flex; flex-direction: column; gap: clamp(7px, 1.5cqi, 13px); }
.grc-ex-row {
  display: grid; grid-template-columns: clamp(72px, 15cqi, 132px) 1fr;
  gap: clamp(10px, 2.4cqi, 20px); align-items: baseline;
}
.grc-ex-row .who {
  font-family: var(--font-mono); font-size: clamp(9px, 1.5cqi, 12px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
}
.grc-ex-row .what { font-size: clamp(11.5px, 2.1cqi, 15px); line-height: 1.42; color: var(--ink-2); }

/* split layout: text + UI screenshot */
.grc-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(22px, 4.5cqi, 54px); align-items: center; }
.grc-col-text { display: flex; flex-direction: column; min-width: 0; }
.grc-split .grc-body { max-width: 38ch; }
.grc-split .grc-ex { margin-top: clamp(14px, 2.8cqi, 26px); }
.grc-split .grc-ex-list { margin-top: clamp(14px, 2.8cqi, 24px); }
.grc-shot { margin: 0; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); background: #fff; aspect-ratio: 4 / 3; min-width: 0; }
.grc-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.grc-shot-photo { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: 3 / 2; -webkit-mask-image: radial-gradient(125% 118% at 50% 50%, #000 55%, transparent 88%); mask-image: radial-gradient(125% 118% at 50% 50%, #000 55%, transparent 88%); }
.grc-shot-photo img { object-fit: cover; }

/* lookout split carries 2-3 examples — keep it compact & top-aligned so it fits */
.grc-split-look { align-items: start; }
.grc-split-look .grc-title { font-size: clamp(19px, 4.2cqi, 36px); }
.grc-split-look .grc-body { font-size: clamp(12px, 2.1cqi, 16px); max-width: 42ch; }
.grc-split-look .grc-ex-list { gap: clamp(6px, 1.3cqi, 11px); margin-top: clamp(10px, 2cqi, 18px); }
.grc-split-look .grc-ex-row { grid-template-columns: clamp(58px, 12cqi, 96px) 1fr; gap: clamp(8px, 1.6cqi, 14px); }
.grc-split-look .grc-ex-row .what { font-size: clamp(10.5px, 1.8cqi, 13px); line-height: 1.36; }

/* cover */
.grc-cover { justify-content: center; }
.grc-cover-kicker {
  font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: clamp(10px, 1.8cqi, 13px); color: var(--gaccent);
}
.grc-cover-title {
  font-family: var(--font-display); font-weight: 500; line-height: 1.0;
  letter-spacing: -0.018em; font-size: clamp(30px, 8.6cqi, 78px);
  margin: clamp(12px, 2.6cqi, 22px) 0 0;
}
.grc-cover-rule { width: clamp(40px, 9cqi, 84px); height: 2px; background: var(--gaccent); margin: clamp(16px, 3.2cqi, 30px) 0; }
.grc-cover-by { font-family: var(--font-mono); font-size: clamp(11px, 1.9cqi, 15px); letter-spacing: 0.06em; color: rgba(236,230,218,0.82); }
.grc-cover-note { font-size: clamp(12px, 2.3cqi, 17px); line-height: 1.5; color: rgba(236,230,218,0.6); max-width: 50ch; margin: clamp(12px, 2.4cqi, 20px) 0 0; }

/* section divider */
.grc-divider { justify-content: center; }
.grc-div-kicker { font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; font-size: clamp(10px, 1.8cqi, 13px); color: var(--gaccent); }
.grc-div-title { font-family: var(--font-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.02em; font-size: clamp(38px, 11cqi, 104px); margin: clamp(10px, 2cqi, 18px) 0 0; }
.grc-div-sub { font-size: clamp(13px, 2.5cqi, 20px); line-height: 1.45; color: rgba(236,230,218,0.62); max-width: 40ch; margin: clamp(12px, 2.4cqi, 20px) 0 0; }

/* quote */
.grc-quotewrap { justify-content: center; }
.grc-quote-mark { font-family: var(--font-display); font-size: clamp(40px, 10cqi, 88px); line-height: 0.5; color: var(--gaccent); height: clamp(20px, 5cqi, 42px); }
.grc-quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(15px, 2.7cqi, 24px); line-height: 1.32; letter-spacing: -0.01em; margin: 0; color: #F2ECE0; max-width: 46ch; text-wrap: pretty; }
.grc-quote-source { font-family: var(--font-mono); font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236,230,218,0.55); margin-top: clamp(12px, 2.4cqi, 20px); }
.grc-quote-link { color: rgba(236,230,218,0.62); text-decoration: none; border-bottom: 1px solid rgba(236,230,218,0.28); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.grc-quote-link:hover { color: var(--gaccent); border-color: var(--gaccent); }
.grc-quote-link span { font-size: 0.9em; }

/* closer */
.grc-closer { justify-content: center; }

/* overview toc */
.grc-toc { list-style: none; margin: clamp(16px, 3.4cqi, 30px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(9px, 2cqi, 16px); }
.grc-toc li { display: grid; grid-template-columns: clamp(28px, 5.5cqi, 50px) 1fr; gap: clamp(10px, 2.2cqi, 20px); align-items: baseline; padding-bottom: clamp(9px, 2cqi, 16px); border-bottom: 1px solid var(--line); }
.grc-toc .tnum { font-family: var(--font-mono); color: var(--accent-text); font-size: clamp(11px, 1.8cqi, 14px); }
.grc-toc .tname { font-family: var(--font-display); font-size: clamp(18px, 3.6cqi, 30px); line-height: 1.1; }
.grc-toc .tdesc { display: block; font-size: clamp(12px, 2cqi, 15px); color: var(--ink-3); margin-top: 3px; }

/* context arrows */
.grc-arrows { list-style: none; margin: clamp(16px, 3.2cqi, 28px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.8cqi, 15px); }
.grc-arrows li { position: relative; padding-left: clamp(22px, 4.4cqi, 36px); font-size: clamp(13px, 2.5cqi, 20px); line-height: 1.35; }
.grc-arrows li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-text); }

/* progress */
.grc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.08); }
.grc-slide.light + .grc-progress { background: rgba(26,24,19,0.07); }
.grc-progress span { display: block; height: 100%; background: var(--accent); transition: width .4s cubic-bezier(.2,.7,.2,1); }

/* controls */
.grc-controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.grc-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); font-size: 19px; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, border-color .2s, opacity .2s, color .2s;
  font-family: var(--font-sans); flex: none;
}
.grc-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grc-btn:disabled { opacity: 0.3; cursor: default; }
.grc-count { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--ink-3); }
.grc-count b { color: var(--ink); font-weight: 600; }
.grc-cap-side { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 620px) {
  /* size each slide to its content; show screenshots at natural height */
  .grc-stage { aspect-ratio: auto; }
  .grc-slide { position: relative; }
  .grc-cap-side { display: none; }
  .grc-split { grid-template-columns: 1fr; gap: clamp(18px, 4.5cqi, 26px); align-items: stretch; }
  .grc-split .grc-body, .grc-split-look .grc-body { max-width: 100%; }
  .grc-split-look .grc-title { font-size: clamp(22px, 7cqi, 30px); }
  .grc-shot, .grc-shot-photo { aspect-ratio: auto; }
  .grc-shot img { height: auto; }
  .grc-ghost { font-size: clamp(80px, 34cqi, 150px); }
  /* slide heights vary on mobile — pin controls to the top so they don't jump */
  .grc-deck { display: flex; flex-direction: column; }
  .grc-controls { order: -1; margin: 0 0 16px; }
}