/* ============================================================
   WERPRIME — Brand Book stylesheet
   Tokens + base + section + component styles
   ============================================================ */

:root {
  /* ---------- Color tokens ---------- */
  --wp-orange: #DD6042;         /* Primary brand orange — Vermilion */
  --wp-orange-600: #C44A2E;     /* Pressed / link hover */
  --wp-orange-300: #EE9477;     /* Secondary tint */
  --wp-orange-100: #F8D7C6;     /* Soft tint, hover surfaces */
  --wp-orange-50:  #FDEFE7;     /* Subtle backgrounds */

  --wp-maroon: #4A1A0B;         /* Deep brand brown — Espresso */
  --wp-maroon-800: #2E0F06;     /* Near-black accent */
  --wp-maroon-600: #6B2912;     /* Buttons on cream */

  --wp-cream: #FCEDDE;          /* Card surface — peach cream */
  --wp-cream-deep: #F6DCC4;     /* Hover state of cream */
  --wp-paper: #FAF6F1;          /* Page background */
  --wp-paper-2: #F2EAE0;        /* Alt page band */
  --wp-white: #FFFFFF;

  --wp-ink: #1A1410;            /* Body text */
  --wp-ink-2: #4A3F36;          /* Secondary text */
  --wp-ink-3: #8A7C70;          /* Tertiary / captions */
  --wp-ink-4: #C7BBAE;          /* Disabled / hint */

  --wp-line: #E5DDD3;           /* Divider */
  --wp-line-2: #D9CFC1;         /* Stronger divider */

  --wp-success: #2D8659;
  --wp-warn:    #C68A1A;
  --wp-danger:  #B33A2A;
  --wp-info:    #2A5A8E;

  /* ---------- Type ---------- */
  --ff-serif: 'Playfair Display', 'Times New Roman', serif;
  --ff-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display: clamp(72px, 9vw, 144px);
  --fs-hero:    clamp(56px, 6.5vw, 104px);
  --fs-h1:      clamp(40px, 4.4vw, 72px);
  --fs-h2:      clamp(32px, 3.2vw, 52px);
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-eyebrow: 11px;

  /* ---------- Spacing scale (8px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-1: 0 1px 2px rgba(74,26,11,.04), 0 1px 3px rgba(74,26,11,.06);
  --sh-2: 0 4px 12px rgba(74,26,11,.06), 0 2px 4px rgba(74,26,11,.04);
  --sh-3: 0 12px 32px rgba(74,26,11,.10), 0 4px 12px rgba(74,26,11,.05);
  --sh-card: 0 24px 60px -24px rgba(74,26,11,.22);

  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--wp-ink);
  background: var(--wp-paper);
  text-wrap: pretty;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
hr { border: 0; border-top: 1px solid var(--wp-line); margin: 0; }

::selection { background: var(--wp-orange); color: var(--wp-white); }

/* ============================================================
   Layout
   ============================================================ */
.wrap   { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-11) 0; position: relative; }
.section--tight { padding: var(--sp-9) 0; }
.section--invert { background: var(--wp-maroon); color: var(--wp-cream); }
.section--invert .eyebrow { color: var(--wp-orange-300); }
.section--paper-2 { background: var(--wp-paper-2); }

/* Section header */
.sec-head { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-10); }
.sec-head__top { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--ff-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--wp-ink-3); }
.sec-head__top .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp-orange); }
.sec-head__title {
  font-family: var(--ff-serif); font-weight: 700;
  font-size: var(--fs-h1); line-height: .98; letter-spacing: -.015em;
  color: var(--wp-maroon); margin: 0;
}
.section--invert .sec-head__title { color: var(--wp-cream); }
.sec-head__sub { max-width: 64ch; font-size: var(--fs-lead); color: var(--wp-ink-2); line-height: 1.5; }
.section--invert .sec-head__sub { color: var(--wp-cream); opacity: .8; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--wp-orange);
}

/* ============================================================
   Icon utility
   ============================================================ */
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 28px; height: 28px; }
.ic-xl { width: 40px; height: 40px; }

/* ============================================================
   Signature CTA — underline + arrow (the werprime motif)
   Anatomy:
   - Hairline rule in currentColor (inherits text color) at 65% opacity
   - Vermilion diagonal arrow positioned at the right end, extending mostly
     ABOVE the rule (~70%) with the tail dipping slightly below (~30%)
   ============================================================ */
.cta-arrow {
  --arrow-size: 48px;
  --arrow-lift: 14px;            /* how far above center the arrow sits */
  display: flex; align-items: center; gap: var(--sp-5);
  position: relative; cursor: pointer;
  min-width: 240px;
}
.cta-arrow__line {
  flex: 1; height: 1px; background: currentColor; opacity: .55;
}
.cta-arrow__arrow {
  flex: none;
  width: var(--arrow-size); height: var(--arrow-size);
  color: var(--wp-orange);
  transform: translateY(calc(var(--arrow-lift) * -1));
  transition: transform .28s ease;
  display: block;
}
.cta-arrow__arrow svg { width: 100%; height: 100%; display: block; }
.cta-arrow:hover .cta-arrow__arrow {
  transform: translate(5px, calc(var(--arrow-lift) * -1 - 5px));
}
.cta-arrow__label {
  font-size: var(--fs-body); color: inherit; opacity: .85;
  white-space: nowrap;
}
.cta-arrow--block { width: 100%; }
.cta-arrow--lg { --arrow-size: 64px; --arrow-lift: 18px; }
.cta-arrow--sm { --arrow-size: 36px; --arrow-lift: 10px; }

/* ============================================================
   Top navigation (sticky)
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 241, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--wp-line);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.brandmark { display: flex; align-items: center; gap: 12px; }
.brandmark__logo {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--wp-orange);
}
.brandmark__wordmark {
  font-family: var(--ff-serif); font-size: 20px; font-weight: 700;
  color: var(--wp-maroon); letter-spacing: -.01em;
}
.topbar__nav { display: flex; gap: 28px; }
.topbar__nav a {
  font-size: 13px; letter-spacing: .04em; color: var(--wp-ink-2);
  text-transform: uppercase; transition: color .15s;
}
.topbar__nav a:hover { color: var(--wp-orange); }
.topbar__theme {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wp-line-2);
  border-radius: 50%;
  color: var(--wp-ink-2);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  flex: none;
}
.topbar__theme:hover { color: var(--wp-orange); border-color: var(--wp-orange); background: var(--wp-orange-50); }
.topbar__menu {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--wp-line-2);
  border-radius: var(--r-pill); font-size: 13px; color: var(--wp-ink);
}

/* ============================================================
   Hero / Cover
   ============================================================ */
.cover {
  min-height: 88vh; display: grid; align-content: center;
  padding-top: var(--sp-11); padding-bottom: var(--sp-11);
  position: relative; overflow: hidden;
}
.cover__eyebrow { color: var(--wp-orange); }
.cover__title {
  font-family: var(--ff-serif); font-weight: 700;
  font-size: var(--fs-display); line-height: .92; letter-spacing: -.02em;
  color: var(--wp-maroon); margin: var(--sp-5) 0 var(--sp-7);
}
.cover__title em { font-style: italic; color: var(--wp-orange); font-weight: 400; }
.cover__lede {
  max-width: 56ch; font-size: clamp(18px, 1.6vw, 22px);
  color: var(--wp-ink-2); line-height: 1.55;
}
.cover__meta {
  margin-top: var(--sp-10); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--wp-line);
}
.cover__meta dt { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--wp-ink-3); margin-bottom: 4px; }
.cover__meta dd { margin: 0; font-size: 14px; color: var(--wp-ink); }
.cover__bgmark {
  position: absolute; right: -8%; top: 8%;
  width: 64vw; max-width: 920px; aspect-ratio: 2/1; opacity: .07;
  color: var(--wp-maroon); pointer-events: none;
}

/* ============================================================
   Card grids
   ============================================================ */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }

.value-card {
  background: var(--wp-cream); border-radius: var(--r-lg);
  padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 280px;
}
.value-card__num {
  font-family: var(--ff-mono); color: var(--wp-orange);
  font-size: 14px; letter-spacing: .12em;
}
.value-card__title {
  font-family: var(--ff-sans); font-size: 24px; font-weight: 600;
  color: var(--wp-maroon); margin: 0; letter-spacing: -.01em;
}
.value-card__body { color: var(--wp-ink-2); font-size: 15px; line-height: 1.55; }
.value-card__icon { width: 40px; height: 40px; color: var(--wp-orange); margin-bottom: var(--sp-3); }

/* ============================================================
   Color palette
   ============================================================ */
.swatches-primary { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-5); }
.swatches-row { display: grid; gap: var(--sp-3); }
.swatch {
  border-radius: var(--r-md); overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  border: 1px solid rgba(0,0,0,.04);
}
.swatch__chip { padding: var(--sp-7); min-height: 180px; position: relative; }
.swatch--hero .swatch__chip { min-height: 320px; }
.swatch__chip .name {
  font-family: var(--ff-serif); font-size: 28px; font-weight: 600;
  position: absolute; bottom: var(--sp-5); left: var(--sp-5);
  letter-spacing: -.01em;
}
.swatch__meta {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  padding: var(--sp-4); background: var(--wp-white); font-size: 12px;
  font-family: var(--ff-mono); color: var(--wp-ink-2);
}
.swatch__meta b { color: var(--wp-ink); font-weight: 500; display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }

.scale-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: var(--sp-6); }
.scale-step {
  height: 88px; border-radius: var(--r-sm); display: flex;
  align-items: flex-end; padding: 10px;
  font-family: var(--ff-mono); font-size: 11px;
}

/* Usage ratio bar */
.ratio-bar {
  display: flex; height: 56px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--wp-line);
}
.ratio-bar > div { display: grid; place-items: center; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; }

/* ============================================================
   Typography section
   ============================================================ */
.type-spec {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-7);
  padding: var(--sp-7) 0; border-top: 1px solid var(--wp-line);
  align-items: baseline;
}
.type-spec:last-child { border-bottom: 1px solid var(--wp-line); }
.type-spec__meta { font-family: var(--ff-mono); font-size: 12px; color: var(--wp-ink-3); letter-spacing: .04em; line-height: 1.7; }
.type-spec__meta b { display: block; color: var(--wp-ink); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.type-spec__sample { color: var(--wp-maroon); }
.type-display { font-family: var(--ff-serif); font-size: 92px; font-weight: 700; line-height: .95; letter-spacing: -.02em; }
.type-h1 { font-family: var(--ff-serif); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.018em; }
.type-h2 { font-family: var(--ff-sans);  font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--wp-ink); }
.type-h3 { font-family: var(--ff-sans);  font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--wp-ink); }
.type-h4 { font-family: var(--ff-sans);  font-size: 22px; font-weight: 600; color: var(--wp-ink); }
.type-lead { font-family: var(--ff-sans); font-size: 20px; line-height: 1.55; color: var(--wp-ink-2); }
.type-body { font-family: var(--ff-sans); font-size: 16px; line-height: 1.6; color: var(--wp-ink-2); }
.type-sm   { font-family: var(--ff-sans); font-size: 14px; line-height: 1.5; color: var(--wp-ink-3); }
.type-eyebrow { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wp-orange); }

/* ============================================================
   Logo section
   ============================================================ */
.logo-stage {
  background: var(--wp-cream); border-radius: var(--r-lg);
  display: grid; place-items: center;
  min-height: 380px; position: relative; padding: var(--sp-9);
}
.logo-stage--dark { background: var(--wp-maroon); color: var(--wp-cream); }
.logo-stage--white { background: var(--wp-white); border: 1px solid var(--wp-line); }
.logo-placeholder {
  display: grid; place-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-9);
  border: 2px dashed rgba(221, 96, 66, .4);
  border-radius: var(--r-md); color: var(--wp-orange);
  background: rgba(255,255,255,.4);
}
.logo-stage--dark .logo-placeholder { background: rgba(252, 237, 222, .06); border-color: rgba(252, 237, 222, .25); color: var(--wp-cream); }
.logo-placeholder__hint { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.dont-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.dont-cell {
  background: var(--wp-white); border: 1px solid var(--wp-line);
  border-radius: var(--r-md); overflow: hidden;
  display: grid; grid-template-rows: 200px auto;
}
.dont-cell__stage { background: var(--wp-paper-2); display: grid; place-items: center; position: relative; }
.dont-cell__label {
  padding: var(--sp-4); display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--wp-ink-2);
  border-top: 1px solid var(--wp-line);
}
.dont-cell__label .ic { color: var(--wp-danger); }
.dont-cell__label--do .ic { color: var(--wp-success); }
.cross-mark { position: absolute; inset: 0; pointer-events: none; }
.cross-mark::before, .cross-mark::after {
  content: ''; position: absolute; top: 50%; left: 10%; right: 10%;
  height: 1.5px; background: rgba(179, 58, 42, .35);
}
.cross-mark::after { transform: rotate(-12deg); }

/* ============================================================
   Components — buttons / inputs / cards / badges
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  transition: all .18s ease;
  white-space: nowrap; cursor: pointer;
}
.btn--primary { background: var(--wp-orange); color: var(--wp-white); }
.btn--primary:hover { background: var(--wp-orange-600); }
.btn--maroon { background: var(--wp-maroon-600); color: var(--wp-cream); }
.btn--maroon:hover { background: var(--wp-maroon); }
.btn--ghost { background: transparent; color: var(--wp-ink); border: 1px solid var(--wp-line-2); }
.btn--ghost:hover { border-color: var(--wp-orange); color: var(--wp-orange); }
.btn--link { padding: 0; background: none; color: var(--wp-orange); border-radius: 0; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--icon-only { padding: 10px; }

/* ============================================================
   The Werprime button — underline + lift-off arrow
   The ONLY primary button on the brand. Three sizes,
   three surfaces, four states.

   Markup:
     <a class="btn-arrow [--lg|--sm] [--invert]">
       <span class="btn-arrow__rule">
         <span class="btn-arrow__line"></span>
         <span class="btn-arrow__arrow"><svg>…</svg></span>
       </span>
       <span class="btn-arrow__label">Label</span>
     </a>
   ============================================================ */
.btn-arrow {
  --arrow-size: 28px;
  --arrow-stroke: 1.25px;
  --rule-width: 180px;
  --label-size: 18px;
  display: inline-block;
  position: relative;
  width: var(--rule-width);
  color: var(--wp-ink);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 0 4px;
}
.btn-arrow__rule {
  display: block;
  /* rule line itself, with right side shortened by exactly the arrow's width */
  margin-right: var(--arrow-size);
  /* leave enough room below so the arrow's diagonal (height = arrow-size) reaches
     from the rule down to the label's baseline */
  margin-bottom: calc(var(--arrow-size) - var(--label-size) * 0.82 - 1px);
}
.btn-arrow__line {
  display: block;
  width: 100%; height: 1px;
  background: currentColor; opacity: .55;
  transition: opacity .25s ease, background-color .25s ease, height .15s ease;
}
.btn-arrow__arrow {
  position: absolute;
  right: 0;
  /* aligned with the rule's top — container padding-top */
  top: 6px;
  width: var(--arrow-size); height: var(--arrow-size);
  color: var(--wp-orange);
  display: block;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.btn-arrow__arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.btn-arrow__arrow svg line { stroke-width: var(--arrow-stroke) !important; }
.btn-arrow__label {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1;
  color: inherit; opacity: .9;
  letter-spacing: -.005em;
  white-space: nowrap;
  /* keep label clear of the arrow column on the right */
  padding-right: var(--arrow-size);
}

/* Hover (real + simulated via .is-hover) — arrow lifts off the rule up-and-right */
.btn-arrow:hover .btn-arrow__arrow,
.btn-arrow.is-hover .btn-arrow__arrow {
  transform: translate(5px, -5px);
}
.btn-arrow:hover .btn-arrow__line,
.btn-arrow.is-hover .btn-arrow__line {
  opacity: .9;
}

/* Focus */
.btn-arrow:focus-visible,
.btn-arrow.is-focus { outline: none; }
.btn-arrow:focus-visible .btn-arrow__line,
.btn-arrow.is-focus .btn-arrow__line {
  background: var(--wp-orange);
  height: 2px; opacity: 1;
}
.btn-arrow:focus-visible .btn-arrow__label,
.btn-arrow.is-focus .btn-arrow__label {
  color: var(--wp-orange); opacity: 1;
}

/* Disabled */
.btn-arrow.is-disabled,
.btn-arrow:disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

/* Sizes */
.btn-arrow--lg {
  --arrow-size: 44px;
  --arrow-stroke: 2px;
  --rule-width: 260px;
  --label-size: 22px;
}
.btn-arrow--sm {
  --arrow-size: 22px;
  --arrow-stroke: 1px;
  --rule-width: 140px;
  --label-size: 15px;
}

/* On dark surfaces: invert label, keep arrow Vermilion */
.btn-arrow--invert { color: var(--wp-cream); }

/* Block / full-width */
.btn-arrow--block { width: 100%; }

/* ============================================================
   Buttons section showcase scaffolding
   ============================================================ */
.btn-showcase {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  box-shadow: 0 1px 0 rgba(74,26,11,.04);
}
.btn-showcase__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-5) 0 var(--sp-5);
  border-bottom: 1px dashed var(--wp-line);
  margin-bottom: var(--sp-6);
}
.btn-showcase__head:first-child {
  padding-top: 0;
}
.btn-showcase__row {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.btn-showcase__row:last-child { margin-bottom: 0; }
.btn-showcase__row--sizes {
  grid-template-columns: 1.4fr 1fr .8fr;
  align-items: end;
}
.btn-showcase__row--surfaces {
  grid-template-columns: 1fr 1fr 1fr;
}
.btn-showcase__row--states {
  grid-template-columns: repeat(4, 1fr);
}
.btn-demo {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: var(--sp-5);
  background: var(--wp-paper);
  border-radius: var(--r-sm);
  min-height: 160px;
  justify-content: space-between;
}
.btn-demo .btn-arrow { width: 100%; }
.btn-demo__tag {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp-ink-3);
}
.btn-surface {
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-sm);
  min-height: 200px;
  justify-content: space-between;
}
.btn-surface .btn-arrow { width: 100%; }
.btn-surface__tag {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp-ink-3);
}
.btn-surface--paper { background: var(--wp-paper); }
.btn-surface--cream { background: var(--wp-cream); }
.btn-surface--maroon { background: var(--wp-maroon); }

/* ============================================================
   Inline link form — secondary affordance
   ============================================================ */
.btn-inline {
  font-family: var(--ff-sans);
  font-size: 16px; font-weight: 500;
  color: var(--wp-orange);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap .2s ease, color .2s ease;
  cursor: pointer;
}
.btn-inline:hover { gap: 10px; }
.btn-inline svg { transition: transform .2s ease; }
.btn-inline:hover svg { transform: translate(2px, -2px); }
.btn-inline--muted { color: var(--wp-ink-2); }
.btn-inline--muted:hover { color: var(--wp-orange); }

.input {
  display: flex; align-items: center; gap: 10px;
  background: var(--wp-white); border: 1px solid var(--wp-line-2);
  border-radius: var(--r-sm); padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus-within { border-color: var(--wp-orange); box-shadow: 0 0 0 3px var(--wp-orange-100); }
.input input, .input select, .input textarea { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--wp-ink); }
.input .ic { color: var(--wp-ink-3); }
.field { display: grid; gap: 6px; }
.field__label { font-size: 12px; color: var(--wp-ink-3); letter-spacing: .04em; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-family: var(--ff-mono); letter-spacing: .04em;
}
.badge--scheduled { background: var(--wp-orange-50); color: var(--wp-orange-600); }
.badge--approved  { background: #DCEFE3; color: var(--wp-success); }
.badge--rejected  { background: #F6E2DF; color: var(--wp-danger); }
.badge--info      { background: #E2EAF4; color: var(--wp-info); }
.badge--neutral   { background: var(--wp-paper-2); color: var(--wp-ink-2); }
.badge--maroon    { background: var(--wp-maroon); color: var(--wp-cream); }

.card-basic {
  background: var(--wp-white); border-radius: var(--r-md);
  border: 1px solid var(--wp-line); padding: var(--sp-6);
  box-shadow: var(--sh-1);
}
.card-elev {
  background: var(--wp-white); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-2);
}
.card-cream {
  background: var(--wp-cream); border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* Toggle */
.toggle {
  width: 52px; height: 28px; border-radius: var(--r-pill);
  background: var(--wp-line); position: relative; display: inline-block;
  transition: background .18s;
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--wp-white);
  box-shadow: var(--sh-1); transition: transform .2s;
}
.toggle--on { background: var(--wp-success); }
.toggle--on::after { transform: translateX(24px); }
.toggle--off { background: var(--wp-danger); }

/* ============================================================
   Dashboard demo
   ============================================================ */
.dashboard {
  background: var(--wp-white); border-radius: var(--r-lg);
  padding: var(--sp-7); box-shadow: var(--sh-card);
}
.dash-stats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.dash-stat {
  background: var(--wp-white); border: 1.5px solid var(--wp-line);
  border-radius: var(--r-sm); padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-stat--active { border-color: var(--wp-orange); }
.dash-stat--ok     { border-color: var(--wp-success); }
.dash-stat--warn   { border-color: var(--wp-warn); }
.dash-stat__label  {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  line-height: 1;
}
.dash-stat__value  {
  font-family: var(--ff-serif);
  font-size: 34px;
  font-weight: 500;
  color: var(--wp-maroon);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
}
.dash-stat--active .dash-stat__value { color: var(--wp-orange); }
.dash-stat--ok     .dash-stat__value { color: var(--wp-success); }
.dash-stat--warn   .dash-stat__value { color: var(--wp-warn); }
.dash-stat--active .dash-stat__label,
.dash-stat--ok     .dash-stat__label,
.dash-stat--warn   .dash-stat__label { color: currentColor; opacity: .7; }
.dash-stat--active .dash-stat__label { color: var(--wp-orange); }
.dash-stat--ok     .dash-stat__label { color: var(--wp-success); }
.dash-stat--warn   .dash-stat__label { color: var(--wp-warn); }

.task-card {
  border: 2px solid var(--wp-orange); border-radius: var(--r-lg);
  padding: var(--sp-6); background: var(--wp-white);
  display: grid; gap: var(--sp-5);
}
.task-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
.task-card__title { display: flex; align-items: center; gap: var(--sp-4); }
.task-card__title h4 { margin: 0; font-family: var(--ff-sans); font-weight: 700; letter-spacing: .05em; color: var(--wp-maroon); font-size: 18px; }
.task-card__id { font-family: var(--ff-mono); font-size: 12px; color: var(--wp-ink-2); border-left: 2px solid var(--wp-orange); padding-left: 12px; }
.task-card__id b { color: var(--wp-orange); display: block; font-weight: 500; }
.task-meta-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.task-meta {
  border: 1px solid var(--wp-line); border-radius: var(--r-sm); padding: 12px;
}
.task-meta__label { font-size: 11px; color: var(--wp-ink-3); display: flex; justify-content: space-between; align-items: center; }
.task-meta__date  { font-size: 13px; font-weight: 500; color: var(--wp-ink); margin-top: 4px; }
.task-meta__role  { font-size: 11px; color: var(--wp-ink-3); margin-top: 10px; }
.task-meta__person { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wp-success); margin-top: 2px; }

.action-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.action-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--wp-line); font-size: 13px; color: var(--wp-ink-2);
}
.action-btn--view { background: var(--wp-success); color: var(--wp-white); border-color: transparent; }

/* ============================================================
   Icon gallery
   ============================================================ */
.icon-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--wp-line); border: 1px solid var(--wp-line);
  border-radius: var(--r-md); overflow: hidden;
}
.icon-cell {
  position: relative;
  background: var(--wp-white);
  display: grid; place-items: center; gap: 10px;
  padding: 22px 12px; aspect-ratio: 1; transition: background .15s;
}
.icon-cell:hover { background: var(--wp-cream); color: var(--wp-orange); }
.icon-cell .ic { width: 24px; height: 24px; color: var(--wp-maroon); }
.icon-cell:hover .ic { color: var(--wp-orange); }
.icon-cell__name { font-family: var(--ff-mono); font-size: 10px; color: var(--wp-ink-3); letter-spacing: .02em; }

/* Download glyph — appears on hover, sits top-right inside the cell */
.dl-btn {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: var(--wp-paper);
  color: var(--wp-ink-2);
  cursor: pointer; border: none; padding: 0;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}
.dl-btn svg { width: 12px; height: 12px; }
.icon-cell:hover .dl-btn,
.logo-stage:hover .dl-btn,
.dl-btn:focus-visible { opacity: 1; transform: translateY(0); }
.dl-btn:hover { background: var(--wp-orange); color: var(--wp-white); }
.dl-btn.is-success { background: var(--wp-success); color: var(--wp-white); opacity: 1; }

/* Logo stage download button — larger, bottom-right */
.logo-stage { position: relative; }
.logo-stage .dl-btn {
  top: auto; bottom: 10px; right: 10px;
  width: 28px; height: 28px;
}
.logo-stage .dl-btn svg { width: 14px; height: 14px; }

.icon-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--sp-7) 0 var(--sp-4);
}
.icon-cat-head h4 { font-family: var(--ff-serif); font-size: 24px; margin: 0; color: var(--wp-maroon); font-weight: 600; }
.icon-cat-head span { font-family: var(--ff-mono); font-size: 11px; color: var(--wp-ink-3); letter-spacing: .12em; text-transform: uppercase; }

.icon-anatomy {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7);
  background: var(--wp-cream); border-radius: var(--r-lg); padding: var(--sp-7);
}
.anatomy-spec { font-family: var(--ff-mono); font-size: 12px; color: var(--wp-ink-2); display: grid; gap: 12px; }
.anatomy-spec dt { color: var(--wp-orange); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.anatomy-spec dd { margin: 0; color: var(--wp-ink); }

/* ============================================================
   Voice & tone
   ============================================================ */
.voice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.voice-card {
  background: var(--wp-white); border: 1px solid var(--wp-line);
  border-radius: var(--r-md); padding: var(--sp-6); display: grid; gap: 12px;
}
.voice-card h4 { font-family: var(--ff-serif); font-size: 24px; color: var(--wp-maroon); margin: 0; font-weight: 600; }
.voice-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--wp-line); }
.voice-card__pair span:first-child { color: var(--wp-success); font-size: 13px; }
.voice-card__pair span:last-child  { color: var(--wp-ink-3); font-size: 13px; text-decoration: line-through; }

.message-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.message-card {
  background: var(--wp-cream); border-radius: var(--r-lg); padding: var(--sp-7);
}
.message-card__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp-orange); }
.message-card__quote { font-family: var(--ff-serif); font-size: 32px; line-height: 1.15; letter-spacing: -.01em; color: var(--wp-maroon); margin: var(--sp-3) 0 0; font-weight: 600; }
.message-card__use { font-size: 13px; color: var(--wp-ink-2); margin-top: var(--sp-5); }

/* ============================================================
   Photography
   ============================================================ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.photo-card {
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5;
  background: var(--wp-cream); position: relative;
  display: grid; place-items: center; color: var(--wp-orange);
}
.photo-card--wide { aspect-ratio: 3/2; }
.photo-card__caption {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  background: rgba(74,26,11,.85); color: var(--wp-cream);
  padding: 10px 14px; border-radius: var(--r-sm);
  display: flex; justify-content: space-between; align-items: center; font-size: 12px;
}
.photo-card__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, var(--wp-cream) 0 12px, var(--wp-cream-deep) 12px 24px);
}

.photo-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.photo-do-dont > div { background: var(--wp-white); border: 1px solid var(--wp-line); border-radius: var(--r-md); padding: var(--sp-6); }
.photo-do-dont h5 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.photo-do-dont ul { margin: 0; padding-left: 18px; color: var(--wp-ink-2); font-size: 14px; line-height: 1.7; }

/* ============================================================
   Social templates — locked grid system
   One surface (cream), four formats, every position pinned.
   ============================================================ */

/* Master spec block (canvas + spec column) */
.sm-master {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-7);
  align-items: start;
  margin-bottom: var(--sp-7);
}
.sm-portrait-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
  margin-bottom: var(--sp-7);
}
.sm-landscape-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
  margin-bottom: var(--sp-7);
}

/* Canvas — the artboard shell */
.sm-canvas {
  position: relative;
  background: var(--wp-cream);
  border-radius: var(--r-md);
  overflow: hidden;
  width: 100%;
  box-shadow: 0 1px 0 rgba(74,26,11,.04);
}
.sm-canvas--square     { aspect-ratio: 1 / 1; }
.sm-canvas--portrait   { aspect-ratio: 9 / 16; }
.sm-canvas--landscape  { aspect-ratio: 16 / 9; }
.sm-canvas--story      { aspect-ratio: 9 / 16; }
.sm-canvas--mini       {}
.sm-canvas__tag {
  position: absolute; bottom: 8px; left: 10px;
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp-ink-3); z-index: 5;
  background: rgba(252, 237, 222, .8);
  padding: 3px 6px; border-radius: 3px;
}

/* The tile content (lives inside canvas) */
.sm-tile {
  position: absolute; inset: 0;
  padding: 7%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: var(--wp-maroon);
  gap: 4%;
}
.sm-tile__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.3cqi, 12px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp-ink-2);
}
.sm-tile__brand { display: inline-flex; align-items: center; gap: 6px; }
.sm-tile__meta { opacity: .75; }
.sm-tile__title {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 4.8cqi, 56px);
  line-height: 1.04;
  font-weight: 500;
  color: var(--wp-maroon);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.sm-tile__title em {
  font-style: italic; color: var(--wp-orange); font-weight: 500;
}
.sm-tile__eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.2cqi, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp-orange);
}
.sm-tile__foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  font-family: var(--ff-sans);
  font-size: clamp(9px, 1.4cqi, 14px);
  color: var(--wp-ink-2);
  opacity: .85;
}

/* ============================================================
   Portrait / Reel  (9:16)
   Real canvas: 1080 × 1920 px
   Safe area:   120 px top · 120 px sides · 320 px bottom
   As % of canvas WIDTH (CSS padding always uses width as base):
     sides  = 120 / 1080 = 11.1%
     top    = 120 / 1080 = 11.1%  (same because 120/1080 = 120*16/(1920*9))
     bottom = 320 / 1080 = 29.6%
   ============================================================ */
.sm-canvas--portrait .sm-tile {
  padding: 11.1% 11.1% 29.6%;
  justify-content: space-between;
  gap: 0;
}
.sm-canvas--portrait .sm-tile .sm-tile__head {
  margin-bottom: 0;
}
.sm-tile__title--portrait {
  font-size: clamp(18px, 4.8cqi, 44px);
  max-width: 90%;
  /* centered in safe zone — margin:auto pushes equally above and below */
  margin: auto 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* CTA foot stays at bottom of safe zone */
.sm-canvas--portrait .sm-tile .sm-tile__foot {
  margin-top: 0;
}

/* ============================================================
   Landscape / YouTube (16:9)
   Real canvas: 1920 × 1080 px
   Safe area: 80 px all sides
   As % of canvas WIDTH (1920px):
     sides  = 80/1920 = 4.17%
     top    = 80/1920 = 4.17%  (width-relative CSS padding)
     bottom = 80/1920 = 4.17%
   Title: left 62% of canvas width only
   ============================================================ */
.sm-canvas--landscape .sm-tile {
  padding: 4.17% 4.17%;
  justify-content: flex-start;
  gap: 0;
}
.sm-canvas--landscape .sm-tile .sm-tile__head {
  margin-bottom: 8%;
}
.sm-tile__title--landscape {
  font-size: clamp(18px, 4.6cqi, 56px);
  max-width: 62%;
  line-height: 1.06;
  max-height: 55%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sm-canvas--landscape .sm-tile .sm-tile__foot {
  margin-top: auto;
  max-width: 62%;
}

/* ============================================================
   Story (9:16)
   Zones: top 9% chrome · 9-37% title · 37-77% sticker · 77-88% CTA · 88-100% DM
   Tile padding: top 10% (clears 9% chrome), bottom 14% (clears DM bar)
   ============================================================ */
.sm-canvas--story .sm-tile {
  /* Story safe zone on 1080×1920 canvas (9:16):
     top chrome  = 9%  of HEIGHT = 9% × 16/9 = 16%   of WIDTH
     sides       = 120px / 1080px               = 11.11% of WIDTH
     bottom DM   = 12% of HEIGHT = 12% × 16/9 = 21.33% of WIDTH */
  padding: 16% 11.11% 21.33%;
  justify-content: space-between;
  gap: 0;
}
.sm-tile--story { gap: 0; justify-content: space-between; }
.sm-tile--story .sm-tile__head {
  margin-bottom: 0;
}
.sm-tile__title--story {
  font-size: clamp(18px, 4.4cqi, 40px);
  max-width: 90%;
  /* centered in top zone — margin:auto pushes equally above (after head) and below (before sticker) */
  margin: auto 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sm-tile--story .sm-tile__title--story {
  margin-bottom: auto;
}
.sm-tile__sticker-slot {
  /* sticker zone: 37%–77% of canvas · flex grows to fill middle space */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: clamp(10px, 1.6cqi, 14px);
  color: var(--wp-ink-3);
  border: 1px dashed rgba(74,26,11,.25);
  border-radius: 4px;
  background: rgba(74,26,11,.03);
  margin-bottom: 4%;
  min-height: 30%; /* guarantee sticker zone is visible */
}
/* CTA foot sits just above DM bar */
.sm-tile--story .sm-tile__foot {
  margin-top: 0;
}

/* container queries so type scales with canvas */
.sm-canvas { container-type: inline-size; }

/* ============================================================
   Guideline overlay (annotated views)
   ============================================================ */
.sm-guides {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: var(--ff-mono);
  font-size: clamp(7px, .95cqi, 10px);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sm-guides__safe {
  position: absolute; inset: 7%;
  border: 1.5px dashed rgba(221,96,66,.6);
}
/* Portrait safe area — absolute% uses canvas own axis:
   top/bottom % = % of canvas HEIGHT (1920px)
   left/right % = % of canvas WIDTH (1080px)
   120px top    = 120/1920 = 6.25% of height
   120px sides  = 120/1080 = 11.11% of width
   320px bottom = 320/1920 = 16.67% of height          */
.sm-canvas--portrait .sm-guides__safe {
  top: 6.25%; bottom: 16.67%;
  left: 11.11%; right: 11.11%;
}
/* Story safe: chrome top 9% (≈172px), DM bottom 12% (≈230px) */
.sm-canvas--story .sm-guides__safe {
  top: 9%; bottom: 12%;
  left: 11.11%; right: 11.11%;
}
/* Landscape safe: 80px each side of 1920×1080
   left/right: 80/1920 = 4.17% · top/bottom: 80/1080 = 7.4% */
.sm-canvas--landscape .sm-guides__safe {
  top: 7.4%; bottom: 7.4%;
  left: 4.17%; right: 4.17%;
}
.sm-guides__title-zone {
  position: absolute; left: 7%; right: 7%; top: 22%;
  height: 50%;
  border: 1px dotted rgba(74,26,11,.3);
  background: rgba(221,96,66,.05);
}
/* Portrait title zone (absolute %):
   top = safe top 6.25% + head area ≈ 6.25% + 8% = 14.25% of HEIGHT
   height = upper-third of safe area ≈ 20% of HEIGHT        */
.sm-guides__title-zone--portrait {
  top: 14.25%; height: 20%;
  left: 11.11%; right: 11.11%;
}
/* Landscape title zone: left 62% of width, from head level */
.sm-guides__title-zone--landscape {
  top: 22%; height: 52%;
  left: 4.17%; width: 62%;
}
.sm-guides__chrome-top,
.sm-guides__chrome-bottom {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(
    45deg, rgba(74,26,11,.06) 0 4px, transparent 4px 8px
  );
  border-block: 1px dashed rgba(74,26,11,.2);
  color: var(--wp-ink-3);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(6px, .9cqi, 9px);
}
/* Portrait/Reel: 120px top = 120/1920 = 6.25% · 320px bottom = 320/1920 = 16.67% */
.sm-guides__chrome-top    { top: 0; height: 6.25%; }
.sm-guides__chrome-bottom { bottom: 0; height: 16.67%; }
/* Story: profile bar 9% · DM bar 12% */
.sm-canvas--story .sm-guides__chrome-top    { height: 9%; }
.sm-canvas--story .sm-guides__chrome-bottom { height: 12%; }
.sm-guides__yt-overlay {
  position: absolute; bottom: 4%; right: 4%;
  width: 14%; height: 10%;
  background: repeating-linear-gradient(
    45deg, rgba(74,26,11,.08) 0 4px, transparent 4px 8px
  );
  border: 1px dashed rgba(74,26,11,.25);
  color: var(--wp-ink-3);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(5px, .7cqi, 8px);
  padding: 4px; text-align: center; line-height: 1.1;
}
/* Story title zone: 9% chrome → 37% canvas = 28% height */
.sm-guides__story-title {
  position: absolute; left: 7%; right: 7%;
  top: 9%; height: 28%;
  border: 1px dotted rgba(221,96,66,.5);
  background: rgba(221,96,66,.05);
}
/* Story sticker zone: 37%–77% of canvas = 40% height */
.sm-guides__story-sticker {
  position: absolute; left: 7%; right: 7%;
  top: 37%; height: 40%;
  border: 1px dotted rgba(74,26,11,.3);
  background: rgba(74,26,11,.04);
}
/* Story CTA zone: 77%–88% of canvas */
.sm-guides__story-cta {
  position: absolute; left: 7%; right: 7%;
  top: 77%; height: 11%;
  border: 1px dotted rgba(221,96,66,.3);
  background: rgba(221,96,66,.03);
}

/* Pin labels — corner / edge markers */
.sm-guides__pin {
  position: absolute;
  background: var(--wp-ink);
  color: var(--wp-paper);
  padding: 3px 6px;
  border-radius: 2px;
  font-size: clamp(7px, .9cqi, 10px);
  white-space: nowrap;
  z-index: 4;
}
.sm-guides__pin--tl { top: 7.5%; left: 3%; }   /* inside safe zone — below 6.25% chrome */
.sm-guides__pin--tr { top: 7.5%; right: 3%; }   /* inside safe zone — below 6.25% chrome */
.sm-guides__pin--ml { top: 46%; left: 3%; }
.sm-guides__pin--mc { top: 46%; left: 50%; transform: translateX(-50%); }
.sm-guides__pin--bl { bottom: 3%; left: 3%; }
.sm-guides__pin--br { bottom: 18%; right: 3%; } /* inside safe zone — above 16.67% chrome */
.sm-guides__rule {
  position: absolute; left: 50%; bottom: -2%;
  transform: translateX(-50%);
  background: var(--wp-orange); color: var(--wp-white);
  padding: 3px 8px; border-radius: 2px;
  font-size: clamp(7px, .9cqi, 10px);
}

/* ============================================================
   Spec column (right of canvas)
   ============================================================ */
.sm-spec {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.sm-spec__title {
  font-family: var(--ff-serif);
  font-size: 24px;
  color: var(--wp-maroon);
  margin: 8px 0 var(--sp-5);
  font-weight: 600;
}
.sm-spec__list {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; gap: 10px;
  font-size: 14px;
  color: var(--wp-ink-2);
}
.sm-spec__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.sm-spec__tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--wp-maroon); color: var(--wp-paper);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  border-radius: 3px;
}
.sm-spec__list b { color: var(--wp-ink); font-weight: 500; }
.sm-spec__rules {
  display: grid; gap: 8px;
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--wp-line);
  font-family: var(--ff-mono); font-size: 11px;
}
.sm-spec__rules > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  color: var(--wp-ink-2);
}
.sm-spec__rule-k {
  letter-spacing: .12em; text-transform: uppercase; color: var(--wp-ink-3);
}
.sm-spec__rule-v { color: var(--wp-ink); }

/* ============================================================
   Variation grid (4 mini canvases under the master)
   ============================================================ */
.sm-var-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-9);
}
/* Portrait/Story variant grid — 4 tall columns */
.sm-var-grid--portrait {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-9);
  align-items: start;
}

/* Download button on each annotated frame */
.sm-frame-wrap { position: relative; }
.sm-frame-dl {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--wp-paper);
  border: 1.5px solid var(--wp-line);
  border-radius: 9999px;
  font-family: var(--ff-sans); font-size: 12px;
  color: var(--wp-ink-2); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sm-frame-dl:hover { border-color: var(--wp-orange); color: var(--wp-orange); }
.sm-frame-dl svg { width: 14px; height: 14px; flex: none; }

/* Calculation block in spec panel */
.sm-calc {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--wp-line);
}
.sm-calc__title {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp-ink-2); margin: 0 0 12px;
}
.sm-calc__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(74,26,11,.06);
  align-items: baseline;
}
.sm-calc__row:last-child { border-bottom: none; }
.sm-calc__label { color: var(--wp-ink-2); }
.sm-calc__val {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--wp-orange); text-align: right; white-space: nowrap;
}
.sm-calc__formula {
  grid-column: 1 / -1;
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--wp-ink-3); margin-top: 2px;
}

/* ============================================================
   Lock checklist (master)
   ============================================================ */
.sm-locks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.sm-locks__group {
  background: var(--wp-paper);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.sm-locks__group ul {
  list-style: none; padding: 0; margin: var(--sp-4) 0 0;
  display: grid; gap: 10px;
}
.sm-locks__group li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 13px;
  color: var(--wp-ink-2);
  line-height: 1.45;
}
.sm-locks__group li svg { margin-top: 2px; }
.sm-locks__group code {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--wp-orange);
}

@media (max-width: 1100px) {
  .sm-master, .sm-portrait-grid, .sm-landscape-grid {
    grid-template-columns: 1fr;
  }
  .sm-portrait-grid .sm-canvas--portrait,
  .sm-portrait-grid .sm-canvas--story {
    max-width: 360px;
    margin: 0 auto;
  }
  .sm-var-grid { grid-template-columns: repeat(2, 1fr); }
  .sm-locks    { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Spacing / grid section
   ============================================================ */
.space-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); align-items: end; }
.space-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.space-block { background: var(--wp-orange); border-radius: 4px; width: 56px; }
.space-stack span { font-family: var(--ff-mono); font-size: 11px; color: var(--wp-ink-3); }

.grid-demo {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4);
  background: var(--wp-cream); border-radius: var(--r-md); padding: var(--sp-5);
}
.grid-demo > div { background: rgba(221, 96, 66, .18); height: 60px; border-radius: 4px; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 11px; color: var(--wp-orange-600); }

/* ============================================================
   Code tokens
   ============================================================ */
.codeblock {
  background: var(--wp-maroon); color: var(--wp-cream);
  border-radius: var(--r-md); padding: var(--sp-6) var(--sp-7);
  font-family: var(--ff-mono); font-size: 13px; line-height: 1.7;
  overflow: auto;
}
.codeblock .k { color: var(--wp-orange-300); }
.codeblock .c { color: rgba(252, 237, 222, .5); font-style: italic; }
.codeblock .s { color: #FFD7A8; }

/* ============================================================
   Motif / arrow underline anatomy
   ============================================================ */
.motif-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }
.motif-stage {
  background: var(--wp-cream); border-radius: var(--r-lg);
  padding: var(--sp-9); display: grid; place-items: center; min-height: 320px;
}
.motif-spec dl { display: grid; gap: var(--sp-4); margin: 0; }
.motif-spec dt { font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--wp-orange); }
.motif-spec dd { margin: 0; font-size: 15px; color: var(--wp-ink-2); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--wp-maroon-800); color: var(--wp-cream);
  padding: var(--sp-11) 0 var(--sp-7);
}
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); }
.footer__title { font-family: var(--ff-serif); font-size: clamp(40px, 5vw, 64px); margin: 0 0 var(--sp-5); line-height: 1; }
.footer__title em { color: var(--wp-orange); font-style: italic; }
.footer__col h5 { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp-orange-300); margin: 0 0 var(--sp-4); }
.footer__col a { display: block; padding: 4px 0; color: var(--wp-cream); opacity: .8; font-size: 14px; }
.footer__col a:hover { opacity: 1; }
.footer__bottom { margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 1px solid rgba(252, 237, 222, .15); display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .6; font-family: var(--ff-mono); letter-spacing: .04em; }

/* ============================================================
   Misc / utility
   ============================================================ */
.divider-rule {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  align-items: center; margin: var(--sp-8) 0;
}
.divider-rule__num { font-family: var(--ff-mono); font-size: 12px; color: var(--wp-orange); letter-spacing: .12em; white-space: nowrap; }
.divider-rule__line { height: 1px; background: var(--wp-line-2); }

/* ============================================================
   Tagline lockup cells (Logo section extension)
   ============================================================ */
.lockup-cell__stage {
  background: var(--wp-paper-2);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  padding: var(--sp-7);
}
.lockup-cell__inner {
  width: 80%;
  max-width: 220px;
}
.lockup-cell__rule {
  height: 1px;
  background: var(--wp-line);
  margin: 12px 0 8px;
  width: 100%;
}
.lockup-cell__tag {
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--wp-maroon);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.lockup-cell__tag em {
  font-style: italic;
  color: var(--wp-orange);
}
.lockup-cell__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  margin: 12px 0 0;
}

/* ============================================================
   Co-branding cells
   ============================================================ */
.cobrand-cell__stage {
  background: var(--wp-paper-2);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: var(--sp-6);
}
.cobrand-cell__divider {
  width: 1px; height: 36px;
  background: var(--wp-line);
}
.cobrand-cell__plus {
  font-family: var(--ff-serif);
  font-size: 32px;
  color: var(--wp-orange);
  font-weight: 300;
  line-height: 1;
}
.cobrand-cell__partner {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  padding: 10px 14px;
  border: 1px dashed var(--wp-ink-3);
  border-radius: 4px;
}
.cobrand-cell__partner span:first-child {
  color: var(--wp-maroon);
  font-size: 12px;
  font-weight: 500;
}
.cobrand-cell__supr {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}
.cobrand-cell__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  margin: 12px 0 4px;
}
.cobrand-cell__rule {
  font-size: 12px;
  color: var(--wp-ink-2);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   Voice — writing samples
   ============================================================ */
.writing-samples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.writing-sample {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.writing-sample__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--wp-line);
}
.writing-sample__meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}
.writing-sample__body {
  font-family: var(--ff-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--wp-ink);
}
.writing-sample__body p {
  margin: 0 0 12px;
}
.writing-sample__body p:last-child { margin-bottom: 0; }
.writing-sample__body em {
  font-style: italic;
  color: var(--wp-orange);
}
.writing-sample__foot {
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--wp-line);
  font-size: 12px;
  color: var(--wp-ink-2);
  font-family: var(--ff-sans);
}
.writing-sample__foot b {
  color: var(--wp-maroon);
  font-weight: 500;
}

/* Word chips */
.word-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  background: var(--wp-cream);
  color: var(--wp-maroon);
  font-family: var(--ff-sans);
  font-size: 13px;
  border-radius: 4px;
  font-weight: 500;
}
.word-chip--bad {
  background: rgba(214,76,58,.08);
  color: var(--wp-danger);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(214,76,58,.5);
}

/* ============================================================
   Patterns section
   ============================================================ */
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.pattern-cell {
  display: flex; flex-direction: column;
}
.pattern-stage {
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--wp-paper-2);
  color: var(--wp-maroon);
  border: 1px solid var(--wp-line);
}
.pattern-stage svg { width: 100%; height: 100%; display: block; }
.pattern-stage--chevron { color: var(--wp-maroon); background: var(--wp-cream); }
.pattern-stage--lines { color: var(--wp-maroon); background: var(--wp-paper); }
.pattern-stage--dots { color: var(--wp-orange); background: var(--wp-paper-2); }
.pattern-cell__title {
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--wp-maroon);
  margin: 14px 0 4px;
  font-weight: 500;
}
.pattern-cell__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  margin: 0 0 8px;
}
.pattern-cell__use {
  font-size: 13px;
  color: var(--wp-ink-2);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   Motion section
   ============================================================ */
.motion-cell {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.motion-cell__bar {
  position: relative;
  height: 32px;
  background: var(--wp-paper-2);
  border-radius: 4px;
  overflow: hidden;
}
.motion-cell__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background: var(--wp-orange);
  transform-origin: left center;
  animation: motion-loop var(--d, 280ms) cubic-bezier(.2,.7,.2,1) infinite alternate;
}
@keyframes motion-loop {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.motion-cell__title {
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--wp-maroon);
  margin: 14px 0 4px;
  font-weight: 500;
}
.motion-cell__meta {
  font-size: 13px;
  color: var(--wp-ink-2);
  margin: 0;
  line-height: 1.5;
}
.motion-cell--curve svg { height: 80px; margin-bottom: 8px; }

/* ============================================================
   Stationery — business card
   ============================================================ */
.bcard-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  max-width: 920px;
}
.bcard {
  display: flex; flex-direction: column; gap: 12px;
}
.bcard__front,
.bcard__back {
  aspect-ratio: 85/55;
  background: var(--wp-paper);
  border: 1px solid var(--wp-line);
  border-radius: 6px;
  padding: 22px 24px;
  position: relative;
  box-shadow: 0 1px 0 rgba(74,26,11,.06);
}
.bcard__front {
  background: var(--wp-cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.bcard__lockup {
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bcard__wordmark {
  width: 100%;
  color: var(--wp-orange);
  display: block;
}
.bcard__rule {
  width: 34px;
  height: 2px;
  background: var(--wp-orange);
  margin: 13px 0 9px;
}
.bcard__back {
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.bcard__tag {
  font-family: var(--ff-serif);
  font-size: 12.5px;
  color: var(--wp-maroon);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.bcard__tag em {
  font-style: italic; color: var(--wp-orange);
}
.bcard__name {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--wp-maroon);
  margin: 0 0 4px;
  font-weight: 500;
}
.bcard__role {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  margin: 0;
}
.bcard__contact {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--wp-ink-2);
  line-height: 1.4;
}
.bcard__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}

/* ============================================================
   Letterhead
   ============================================================ */
.letterhead {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-7);
}
.letterhead__page {
  background: var(--wp-paper);
  border: 1px solid var(--wp-line);
  border-radius: 4px;
  aspect-ratio: 210/297;
  padding: 10% 9%;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 0 rgba(74,26,11,.06);
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--wp-ink-2);
  line-height: 1.55;
}
.letterhead__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 6%;
  border-bottom: 1px solid var(--wp-line);
}
.letterhead__meta {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  text-align: right;
}
.letterhead__body {
  flex: 1;
  padding: 8% 0;
  font-size: 12px;
}
.letterhead__body p { margin: 0; }
.letterhead__body b { color: var(--wp-maroon); font-weight: 500; }
.letterhead__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  padding-top: 4%;
  border-top: 1px solid var(--wp-line);
}
.letterhead-spec {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}

/* ============================================================
   Invoice
   ============================================================ */
.invoice {
  background: var(--wp-paper);
  border: 1px solid var(--wp-line);
  border-radius: 4px;
  padding: var(--sp-9);
  margin-bottom: var(--sp-7);
  box-shadow: 0 2px 0 rgba(74,26,11,.06);
}
.invoice__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--wp-line);
}
.invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--wp-line);
}
.invoice__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--wp-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.invoice__table th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
  padding: 12px 8px;
  border-bottom: 1px solid var(--wp-line);
  font-weight: 500;
}
.invoice__table td {
  padding: 16px 8px;
  border-bottom: 1px solid var(--wp-line);
  vertical-align: top;
}
.invoice__table tbody td b { color: var(--wp-orange); font-family: var(--ff-mono); font-size: 11px; margin-right: 8px; }
.invoice__table tfoot td {
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 10px 8px;
  border-bottom: none;
  color: var(--wp-ink-2);
}
.invoice__total td {
  border-top: 1px solid var(--wp-ink) !important;
  padding-top: 14px !important;
  font-family: var(--ff-serif) !important;
  font-size: 20px !important;
  color: var(--wp-maroon) !important;
  font-weight: 500;
}
.invoice__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--wp-line);
}

/* ============================================================
   Email signature
   ============================================================ */
.email-sig {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.email-sig__chrome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wp-line);
  background: var(--wp-paper-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}
.email-sig__from {
  color: var(--wp-maroon);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--ff-sans);
}
.email-sig__subject {
  color: var(--wp-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--ff-sans);
}
.email-sig__body {
  padding: var(--sp-6);
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--wp-ink);
  line-height: 1.55;
}
.email-sig__body p { margin: 0 0 12px; }
.email-sig__sig {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--wp-line);
}
.email-sig__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--wp-maroon);
  margin: 0 0 2px;
}
.email-sig__role {
  font-size: 12px;
  color: var(--wp-ink-2);
  margin: 0 0 8px;
}
.email-sig__line {
  font-size: 12px;
  color: var(--wp-ink-2);
  margin: 0 0 10px;
}
.email-sig__line a { color: var(--wp-ink-2); }
.email-sig__sep { color: var(--wp-line); margin: 0 4px; }
.email-sig__tag {
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--wp-maroon);
  margin: 0;
}
.email-sig__tag em {
  font-style: italic;
  color: var(--wp-orange);
}

/* ============================================================
   Document templates — frames
   ============================================================ */
.tpl-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  align-items: start;
}
.tpl-row--portrait { grid-template-columns: 1fr 1fr; }
.tpl-frame {
  background: var(--wp-cream);
  border: 1px solid var(--wp-line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  box-shadow: 0 2px 0 rgba(74,26,11,.06);
}
.tpl-frame--16x9 { aspect-ratio: 16/9; }
.tpl-frame--a4 { aspect-ratio: 210/297; }
.tpl-frame--dark { background: var(--wp-maroon); }

/* Deck cover */
.tpl-deck {
  position: absolute; inset: 0;
  padding: 5%;
  color: var(--wp-maroon);
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.tpl-deck__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tpl-deck__meta {
  font-family: var(--ff-mono);
  font-size: clamp(9px, 1.1cqi, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-2);
}
.tpl-deck__eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(10px, 1.3cqi, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-orange);
  margin: 0 0 14px;
}
.tpl-deck__title {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 6cqi, 84px);
  line-height: 1.02;
  margin: 0;
  color: var(--wp-maroon);
  font-weight: 500;
  letter-spacing: -.01em;
  max-width: 88%;
  text-wrap: balance;
}
.tpl-deck__title em {
  font-style: italic; color: var(--wp-orange);
}
.tpl-deck__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-sans);
  font-size: clamp(9px, 1.2cqi, 14px);
  color: var(--wp-ink-2);
}

/* Proposal */
.tpl-prop {
  position: absolute; inset: 0;
  padding: 9% 8%;
  color: var(--wp-maroon);
  display: flex; flex-direction: column;
  background: var(--wp-paper);
}
.tpl-prop__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tpl-prop__meta {
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.1cqi, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}
.tpl-prop__main {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.tpl-prop__eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.1cqi, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-orange);
  margin: 0;
}
.tpl-prop__title {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 4.4cqi, 56px);
  line-height: 1.05;
  margin: 0;
  color: var(--wp-maroon);
  font-weight: 500;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.tpl-prop__title em { font-style: italic; color: var(--wp-orange); }
.tpl-prop__lede {
  font-family: var(--ff-serif);
  font-size: clamp(11px, 1.6cqi, 17px);
  color: var(--wp-ink-2);
  margin: 0;
  line-height: 1.5;
  max-width: 90%;
}
.tpl-prop__phases {
  display: flex; gap: 14px;
  margin-top: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.1cqi, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tpl-prop__phases > div {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--wp-line);
  border-radius: 3px;
  color: var(--wp-ink-2);
}
.tpl-prop__phases span {
  color: var(--wp-orange);
  font-weight: 500;
}
.tpl-prop__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.1cqi, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}

/* Case study */
.tpl-case {
  position: absolute; inset: 0;
  padding: 5%;
  color: var(--wp-cream);
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.tpl-case__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--wp-orange-300);
}
.tpl-case__meta {
  font-family: var(--ff-mono);
  font-size: clamp(9px, 1.1cqi, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tpl-case__main {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-7);
  align-items: end;
}
.tpl-case__eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(9px, 1.2cqi, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-orange-300);
  margin: 0 0 10px;
}
.tpl-case__title {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 5cqi, 64px);
  line-height: 1.02;
  color: var(--wp-cream);
  margin: 0 0 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.tpl-case__title em { font-style: italic; color: var(--wp-orange-300); }
.tpl-case__lede {
  font-family: var(--ff-serif);
  font-size: clamp(11px, 1.6cqi, 17px);
  color: var(--wp-cream);
  opacity: .8;
  margin: 0;
  line-height: 1.5;
  max-width: 88%;
}
.tpl-case__metrics {
  display: flex; flex-direction: column; gap: 12px;
}
.tpl-case__metrics > div {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 14px;
  border-left: 2px solid var(--wp-orange);
}
.tpl-case__num {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 3.4cqi, 36px);
  color: var(--wp-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.tpl-case__metrics span:last-child {
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1cqi, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-orange-300);
}
.tpl-case__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: clamp(8px, 1.1cqi, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-orange-300);
}

@media (max-width: 1100px) {
  .writing-samples { grid-template-columns: 1fr; }
  .letterhead { grid-template-columns: 1fr; }
  .tpl-row, .tpl-row--portrait { grid-template-columns: 1fr; }
  .bcard-row { grid-template-columns: 1fr; }
  .patterns-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Logo — clear-space diagram + min-size row
   ============================================================ */
.clearspace {
  position: relative;
  background: var(--wp-paper-2);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
/* Dashed outer rectangle = the clear-space boundary. Its padding IS X. */
.clearspace__bound {
  position: relative;
  padding: 44px;
  border: 1px dashed rgba(221,96,66,.55);
  border-radius: 2px;
}
/* Solid inner rectangle = the mark's bounding box, hugging the logo. */
.clearspace__box {
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--wp-line-2);
  line-height: 0;
}
/* X measure: spans the 44px gap between the bound and the box. */
.clearspace__measure {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--wp-orange); font-weight: 500;
  z-index: 3;
}
.clearspace__measure--top {
  top: 0; left: 50%; transform: translateX(-50%);
  height: 44px; width: 1px;
  border-left: 1px dashed var(--wp-orange);
}
.clearspace__measure--top span,
.clearspace__measure--left span {
  background: var(--wp-paper-2); padding: 2px 4px;
}
.clearspace__measure--left {
  left: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 1px;
  border-top: 1px dashed var(--wp-orange);
}
.minsize-row {
  display: flex; align-items: flex-end; gap: var(--sp-6);
  padding: var(--sp-5) 0;
  flex-wrap: wrap;
}
.minsize-demo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.minsize-demo span {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .08em; color: var(--wp-ink-3);
}
.minsize-demo--ok span { color: var(--wp-success); }
.minsize-demo--bad span { color: var(--wp-danger); }
.minsize-demo--bad { opacity: .6; }

/* ============================================================
   Accessibility contrast grid
   ============================================================ */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.a11y-cell {
  border-radius: var(--r-md);
  border: 1px solid var(--wp-line);
  padding: var(--sp-6);
  min-height: 120px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.a11y-cell__sample {
  font-family: var(--ff-serif);
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
  font-weight: 500;
}
.a11y-cell__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-5);
  font-family: var(--ff-mono); font-size: 12px;
  color: currentColor; opacity: .85;
}
.a11y-badge {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  font-weight: 500;
}
.a11y-badge--aaa { background: var(--wp-success); color: #fff; }
.a11y-badge--aa  { background: rgba(45,134,89,.18); color: var(--wp-success); border: 1px solid var(--wp-success); }
.a11y-badge--large { background: rgba(198,138,26,.16); color: var(--wp-warn); border: 1px solid var(--wp-warn); }

/* ============================================================
   Brand in the wild
   ============================================================ */
.wild-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--sp-7);
  align-items: end;
  margin-bottom: var(--sp-7);
}
.mock-browser {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--wp-line);
  box-shadow: var(--sh-2);
  background: var(--wp-white);
}
.mock-browser__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: var(--wp-paper-2);
  border-bottom: 1px solid var(--wp-line);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wp-line-2); }
.mock-dot:nth-child(1) { background: #E0846F; }
.mock-browser__url {
  margin-left: 12px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--wp-ink-3);
  background: var(--wp-white);
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--wp-line);
}
.mock-browser__screen {
  background: var(--wp-cream);
  min-height: 320px;
  padding: var(--sp-7);
  display: flex; flex-direction: column;
}
.mock-site__nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-7);
}
.mock-site__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-serif); font-size: 16px; color: var(--wp-maroon); font-weight: 500;
}
.mock-site__navlinks {
  display: flex; gap: 22px;
  font-size: 13px; color: var(--wp-ink-2);
}
.mock-site__hero {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--sp-7) 0;
}
.mock-site__eyebrow {
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp-orange); margin: 0 0 16px;
}
.mock-site__title {
  font-family: var(--ff-serif);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  color: var(--wp-maroon);
  margin: 0; font-weight: 500;
  letter-spacing: -.01em;
}
.mock-site__title em { font-style: italic; color: var(--wp-orange); }

.mock-phone {
  width: 230px;
  margin: 0 auto;
  background: var(--wp-maroon-800);
  border-radius: 32px;
  padding: 12px;
  box-shadow: var(--sh-3);
  position: relative;
}
.mock-phone__notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 20px;
  background: var(--wp-maroon-800);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.mock-phone__screen {
  background: var(--wp-cream);
  border-radius: 22px;
  aspect-ratio: 9/17;
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.mock-app__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp-ink-2);
}
.mock-app__post { flex: 1; display: flex; align-items: center; }
.mock-app__title {
  font-family: var(--ff-serif); font-size: 24px;
  line-height: 1.1; color: var(--wp-maroon); margin: 0; font-weight: 500;
}
.mock-app__title em { font-style: italic; color: var(--wp-orange); }
.mock-app__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp-ink-3);
}

.wild-env-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.env-cell__art {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.env-cell--signage .env-cell__art { background: var(--wp-maroon); }
.env-cell--door .env-cell__art { background: var(--wp-cream); }
.env-cell--banner .env-cell__art {
  background: var(--wp-maroon-800);
  background-image: repeating-linear-gradient(0deg, rgba(252,237,222,.04) 0 2px, transparent 2px 24px);
}
.env-cell__caption {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--wp-ink-3);
  margin: 12px 0 0;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.merch-art {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--wp-paper-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.merch-tee {
  width: 76%; aspect-ratio: 1;
  background: var(--wp-maroon);
  display: grid; place-items: center;
  clip-path: polygon(22% 8%, 35% 4%, 65% 4%, 78% 8%, 96% 24%, 86% 38%, 78% 32%, 78% 96%, 22% 96%, 22% 32%, 14% 38%, 4% 24%);
}
.merch-tote {
  width: 64%; aspect-ratio: 4/5;
  background: var(--wp-cream-deep);
  border-radius: 4px;
  display: grid; place-items: center;
  position: relative;
  border-top: 6px solid transparent;
}
.merch-tote::before, .merch-tote::after {
  content: ''; position: absolute; top: -22%;
  width: 10%; height: 30%;
  border: 3px solid var(--wp-cream-deep);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.merch-tote::before { left: 24%; }
.merch-tote::after { right: 24%; }
.merch-sticker {
  width: 64%; aspect-ratio: 1;
  background: var(--wp-cream);
  border: 4px solid var(--wp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
}
.merch-notebook {
  width: 60%; aspect-ratio: 3/4;
  background: var(--wp-maroon);
  border-radius: 3px 6px 6px 3px;
  border-left: 5px solid var(--wp-maroon-800);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.merch-notebook span {
  width: 30%; height: 2px; background: var(--wp-orange);
}
.merch-cell__name {
  font-family: var(--ff-serif); font-size: 17px;
  color: var(--wp-maroon); margin: 12px 0 2px; font-weight: 500;
}
.merch-cell__meta {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .08em; color: var(--wp-ink-3); margin: 0;
}

/* ============================================================
   Studio — process rail + capabilities
   ============================================================ */
.process-rail {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: var(--sp-7);
}
.process-step {
  flex: 1;
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: 8px;
}
.process-step__num {
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: .14em; color: var(--wp-orange); font-weight: 500;
}
.process-step__title {
  font-family: var(--ff-serif); font-size: 24px;
  color: var(--wp-maroon); margin: 0; font-weight: 500;
}
.process-step__body {
  font-size: 13px; color: var(--wp-ink-2); margin: 0; line-height: 1.5; flex: 1;
}
.process-step__meta {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp-ink-3);
  padding-top: 10px; border-top: 1px solid var(--wp-line);
}
.process-arrow {
  display: flex; align-items: center;
  color: var(--wp-orange);
  padding: 0 8px;
  flex: none;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.cap-cell {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.cap-cell__head {
  display: flex; align-items: center; gap: 10px;
}
.cap-cell__head .ic { width: 22px; height: 22px; color: var(--wp-orange); }
.cap-cell__head h4 {
  font-family: var(--ff-serif); font-size: 19px;
  color: var(--wp-maroon); margin: 0; font-weight: 500;
}
.cap-cell ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px; flex: 1;
  font-size: 13px; color: var(--wp-ink-2);
}
.cap-cell li {
  padding-left: 16px; position: relative;
}
.cap-cell li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wp-orange-300);
}
.cap-cell__depth {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp-ink-3);
  padding-top: 10px; border-top: 1px solid var(--wp-line);
}
.cap-cell--partner .cap-cell__depth { color: var(--wp-orange); }

/* ---------- Founders ---------- */
.founder {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--sp-6);
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  align-items: stretch;
}
.founder__avatar {
  position: relative;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
  min-height: 132px;
}
.founder__initials {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -.02em;
  line-height: 1;
}
.founder__mark {
  position: absolute;
  right: -14px; bottom: -16px;
  width: 78px; height: 66px;
  opacity: .16;
  color: currentColor;
}
.founder__body { display: flex; flex-direction: column; }
.founder__name {
  font-family: var(--ff-serif);
  font-size: 26px; font-weight: 700;
  color: var(--wp-maroon);
  margin: 0; letter-spacing: -.01em;
}
.founder__title {
  font-family: var(--ff-mono);
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--wp-orange);
  margin-top: 6px;
}
.founder__bio {
  font-size: 14px; line-height: 1.55;
  color: var(--wp-ink-2);
  margin: var(--sp-4) 0 0;
}
.founder__officially {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}
.founder__officially b { color: var(--wp-ink); font-weight: 500; }

/* ============================================================
   Production — sonic + press kit
   ============================================================ */
.sonic {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
  align-items: center;
}
.sonic__player {
  display: flex; align-items: center; gap: var(--sp-5);
  background: var(--wp-maroon);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.sonic__play {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wp-orange);
  color: var(--wp-white);
  display: grid; place-items: center;
  transition: transform .12s ease, background .12s ease;
}
.sonic__play:hover { transform: scale(1.06); background: var(--wp-orange-300); }
.sonic__play .ic { width: 22px; height: 22px; }
.sonic__wave {
  flex: 1;
  display: flex; align-items: center; gap: 4px;
  height: 56px;
}
.sonic__wave span {
  flex: 1;
  background: var(--wp-orange-300);
  border-radius: var(--r-pill);
  opacity: .5;
  transition: opacity .1s ease, background .1s ease;
}
.sonic__wave.is-playing span { animation: sonic-pulse 1.4s ease-in-out infinite; }
.sonic__wave span.is-active { opacity: 1; background: var(--wp-orange); }
@keyframes sonic-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
.sonic__dur {
  flex: none;
  font-family: var(--ff-mono); font-size: 12px;
  color: var(--wp-orange-300);
}
.sonic__spec {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}

.presskit {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
}
.presskit__copy {
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.presskit__boiler {
  font-family: var(--ff-serif);
  font-size: 19px;
  color: var(--wp-ink);
  line-height: 1.5;
  margin: 12px 0 var(--sp-6);
}
.presskit__boiler--short {
  font-size: 14px; color: var(--wp-ink-3); font-family: var(--ff-mono);
  letter-spacing: .04em;
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--wp-line);
}
.presskit__boiler--short span { color: var(--wp-ink-2); }
.presskit__facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--wp-line);
}
.presskit__facts > div { display: flex; flex-direction: column; gap: 3px; }
.presskit__facts span {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wp-ink-3);
}
.presskit__facts b {
  font-family: var(--ff-serif); font-size: 20px; color: var(--wp-maroon); font-weight: 500;
}
.presskit__download {
  background: var(--wp-cream);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.presskit__btns { display: grid; gap: 10px; }
.kit-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--wp-white);
  border: 1px solid var(--wp-line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--wp-ink);
  text-align: left;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.kit-btn .ic { color: var(--wp-orange); flex: none; }
.kit-btn:hover { border-color: var(--wp-orange); background: var(--wp-orange-50); }
.kit-btn--primary {
  background: var(--wp-maroon); color: var(--wp-cream); border-color: var(--wp-maroon);
}
.kit-btn--primary .ic { color: var(--wp-orange-300); }
.kit-btn--primary:hover { background: var(--wp-maroon-800); border-color: var(--wp-maroon-800); color: var(--wp-cream); }
.kit-btn.is-success { border-color: var(--wp-success); color: var(--wp-success); }
.kit-btn.is-success .ic { color: var(--wp-success); }

/* ============================================================
   Click-to-copy affordance (color swatches + scale steps)
   ============================================================ */
.is-copyable { cursor: pointer; position: relative; }
.copy-toast {
  position: fixed;
  bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--wp-maroon); color: var(--wp-cream);
  font-family: var(--ff-mono); font-size: 13px;
  padding: 10px 18px; border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.copy-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.copy-toast b { color: var(--wp-orange-300); }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .motion-cell__fill { animation: none; transform: scaleX(1); }
  .sonic__wave.is-playing span { animation: none; }
}

@media (max-width: 1100px) {
  .wild-row { grid-template-columns: 1fr; }
  .mock-phone { width: 200px; }
  .sonic, .presskit { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .founder { grid-template-columns: 96px 1fr; gap: var(--sp-5); }
  .founder__avatar { min-height: 96px; }
  .founder__initials { font-size: 34px; }
  .process-rail { flex-direction: column; }
  .process-arrow { transform: rotate(90deg); padding: 4px 0; align-self: center; }
  .a11y-grid { grid-template-columns: repeat(2, 1fr); }
  .wild-env-grid { grid-template-columns: 1fr; }
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cards-3, .cards-4, .voice-grid, .dont-grid, .photo-grid, .icon-grid, .footer__top { grid-template-columns: repeat(2, 1fr); }
  .cover__meta { grid-template-columns: repeat(2, 1fr); }
  .dash-stats { grid-template-columns: repeat(4, 1fr); }
  .task-meta-row, .action-row { grid-template-columns: repeat(2, 1fr); }
  .topbar__nav { display: none; }
  .topbar__theme { display: none; }
  .swatches-primary, .message-grid, .motif-grid, .photo-do-dont, .icon-anatomy { grid-template-columns: 1fr; }
  .type-spec { grid-template-columns: 1fr; }
}