/* Tang & Associates Brand Book — page chrome and per-spread layouts.
   Spreads are 1920x1080. Each .spread-frame holds a fixed-size .spread that
   transform-scales to viewport width via JS-set --scale.
   See brand-book.js for the runtime wiring. */

:root{
  /* ---- Spacing scale (4px unit; geometric-ish progression) ----
     Formula: each step ≈ ×1.5 of the prior comfortable rhythm.
     Use --space-N tokens — never raw pixels — for paddings, gaps, margins. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Type scale (minor-third 1.2, anchored at 16px base) ----
     Formula: size_n = 16 × 1.2^(n−3), rounded to whole px. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   19px;
  --text-lg:   23px;
  --text-xl:   28px;
  --text-2xl:  33px;
  --text-3xl:  40px;

  /* ---- Tracking ---- */
  --track-tight:   -0.01em;
  --track-base:     0;
  --track-wide:     0.04em;
  --track-caps:     0.18em;
  --track-eyebrow:  0.22em;

  /* ---- Leading ---- */
  --leading-tight: 1.2;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* ---- Radius scale ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(31,29,27,0.04);
  --shadow-photo: 0 18px 48px -12px rgba(31,29,27,0.22);
  --shadow-focus: 0 0 0 3px rgba(201,168,124,0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Layout primitives ---- */
  --content-max: 1920px;
  --gutter:      var(--space-5);
  --spread-pad-x: 60px;
  --spread-pad-top: 60px;
  --spread-gap: 32px;
  --spread-footer-h: 97px;

  /* ---- Color palette (raw) ---- */
  --ink:#1a1a1a;
  --dim:#6e6e6e;
  --line:#e8e8e8;
  --line-strong:#d4d4d4;
  --bg:#ffffff;
  --block:#f6f6f6;
  --paper:#ffffff;
  --gold:#C9A87C;
  --gold-deep:#a88555;
  --gold-soft:#e8d3b0;
  --off-white:#f6f6f6;
  --harbour:#2c4a6b;
  --harbour-deep:#14253a;
  --harbour-soft:#c9d4e1;
  --black:#000000;
  --warn:#e63946;
  --focus:#2a6df4;

  /* ---- Color tokens (semantic aliases — components reference these) ---- */
  --color-ink:        var(--ink);
  --color-ink-soft:   var(--dim);
  --color-line:       var(--line);
  --color-line-strong:var(--line-strong);
  --color-page:       var(--bg);
  --color-paper:      var(--paper);
  --color-accent:     var(--gold);
  --color-accent-deep:var(--gold-deep);

  /* ---- Type families ---- */
  --sans:'Lexend','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --serif:'Cormorant Garamond', Georgia, serif;
  --font-sans:  var(--sans);
  --font-mono:  var(--mono);
  --font-serif: var(--serif);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Embed local brand fonts */
@font-face{
  font-family:'Cormorant Garamond';
  font-weight:300 700;
  font-style:normal;
  src:url('../assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-weight:300 700;
  font-style:italic;
  src:url('../assets/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend';
  font-weight:100 900;
  font-style:normal;
  src:url('../assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Deca';
  font-weight:100 900;
  font-style:normal;
  src:url('../assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype-variations'),
      url('../assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:300;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Light.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:400;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Regular.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Lexend Exa';
  font-weight:500;
  font-style:normal;
  src:url('../assets/fonts/LexendExa-Medium.ttf') format('truetype');
  font-display:swap;
}

/* Accessible focus ring — applies to anything keyboard-focused */
:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
  border-radius:var(--radius-md);
}

/* Skip link (a11y) — only visible when keyboard-focused */
.skip-link{
  position:absolute; left:-9999px;
  padding:var(--space-3) var(--space-4);
  background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--radius-md);
  font-size:var(--text-sm); text-decoration:none;
}
.skip-link:focus-visible{ left:var(--space-4); top:var(--space-4); }

/* ============== DECK HEADER ============== */
.deck-header{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--space-6) var(--gutter) var(--space-4);
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  gap:var(--space-4);
}
.deck-header__brand{
  display:inline-flex; align-items:center;
  justify-self:start;
  justify-content:center;
  width:174px;
  max-width:44vw;
  color:var(--color-ink);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.deck-header__brand:hover{ color:var(--color-accent-deep); }
.deck-header__brand img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.deck-header__meta{
  margin:0;
  justify-self:center;
  font-size:var(--text-xs);
  color:var(--color-ink-soft);
  text-transform:uppercase;
  letter-spacing:var(--track-caps);
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.deck-header__actions{
  display:inline-flex; align-items:center;
  justify-self:end;
  gap:var(--space-3);
}

/* ============== BUTTON COMPONENT ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  min-height:36px;
  padding:var(--space-2) var(--space-4);
  font:inherit;
  font-size:var(--text-sm);
  font-weight:500;
  line-height:1;
  letter-spacing:var(--track-base);
  color:var(--color-ink);
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
  -webkit-appearance:none;
  appearance:none;
}
.btn:hover{ border-color:var(--color-line-strong); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn--primary{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-paper);
}
.btn--primary:hover{
  background:var(--color-accent-deep);
  border-color:var(--color-accent-deep);
}
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--color-paper); }
.btn--sm{
  min-height:28px;
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);
}
.btn__icon{ font-size:0.9em; line-height:1; display:inline-block; }

.deck-main{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--space-2) var(--gutter) var(--space-8);
  display:flex; flex-direction:column;
  gap:var(--space-4);
}
.deck-main:focus-visible{ box-shadow:none; }
.deck{
  display:flex; flex-direction:column;
  gap:var(--space-4);
}

/* Each spread is a 1920x1080 frame that scales to fit the column */
.spread-frame{
  width:100%;
  aspect-ratio:1920/1080;
  position:relative;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  border-radius:6px;
}
/* Spread is a vertical flex column. Children flow naturally:
   header (.spread__text, auto-height) → content (flex:1) → footer (.spread__footer, fixed).
   gap:32 lives on the parent so every pair of siblings is spaced consistently
   without each child having to declare its own margin-top/bottom. This keeps
   long descriptions from overflowing into the content area below, and puts a
   gap above the footer so content never touches its top border. */
.spread{
  position:absolute;
  top:0; left:0;
  width:1920px; height:1080px;
  transform-origin:top left;
  transform:scale(var(--scale, 0.5));
  display:flex; flex-direction:column;
  gap:var(--spread-gap);
}

/* Common: top-left text, bottom footer */
.spread__text{
  flex:0 0 auto;
  margin:var(--spread-pad-top) var(--spread-pad-x) 0;
  max-width:560px;
  z-index:2;
}
.spread__text .label{
  font-size:13px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.22em;
  color:var(--dim);
  margin:0 0 18px;
}
.spread__text h2{
  font-size:36px; font-weight:600;
  margin:0 0 22px;
  letter-spacing:-0.01em;
}
.spread__text p{
  font-size:18px; color:var(--dim);
  margin:0; line-height:1.55;
  font-weight:400;
}
.spread__crosslink{
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin-top:18px;
  padding:var(--space-2) var(--space-3);
  font-size:14px;
  font-weight:500;
  color:var(--color-ink-soft);
  text-decoration:none;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  transition:color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.spread__crosslink:hover{
  color:var(--color-ink);
  background:var(--color-paper);
  border-color:var(--color-line-strong);
}
.spread__crosslink-icon{ font-size:0.9em; line-height:1; }

.spread__footer{
  flex:0 0 var(--spread-footer-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--spread-pad-x);
  border-top:1px solid var(--line);
  font-size:13px;
}
.spread__footer-left,
.spread__footer-right{
  display:flex; align-items:center; gap:14px;
  color:var(--dim);
  font-weight:500; letter-spacing:0.04em;
}
.spread__footer-mark{ width:26px; height:26px; }
.spread__footer-right{ font-variant-numeric:tabular-nums; }

/* Generic visual area for cover. Fills the space between optional header
   (none on cover) and the cover__version footer. */
.spread__visual{
  flex:1 1 0;
  min-height:0;
}

/* Content-area wrapper: every normal spread body inherits the deck safe area. */
.spread__content{
  flex:1 1 0;
  min-height:0;
  margin:0 var(--spread-pad-x);
  display:flex;
  flex-direction:column;
  gap:var(--spread-gap);
}
.spread__content > *{
  width:100%;
}
.spread__content > :first-child{
  flex:1 1 0;
  min-height:0;
}
.spread__content > :only-child{
  flex:1 1 0;
  min-height:0;
}

/* Mark-variants has two content areas inside one safe area. */
.spread__content > .mark-grid{
  flex:1 1 0;
  min-height:0;
}
.spread__content > .size-matrix{
  flex:0 0 200px;
}

/* ============== COVER (bento grid) ==============
   Universal cover layout: 4×3 grid.
   - HERO MARK  (cols 1–2, rows 1–2): the brand mark.
   - HERO TITLE (cols 3–4, rows 1–2): eyebrow (brand_name) + h2 (document_type).
   - SPECS      (row 3, 1 col each): pick 4 atoms — color, year, voice, spec, credit, mark-variant.
   All content is data-driven from brand-book.json — see the cover spread payload. */
.spread.cover{ background:var(--paper); }
.cover__version{
  flex:0 0 auto;
  margin:var(--spread-pad-top) var(--spread-pad-x) 0;
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:0.18em;
}
.cover .spread__visual{
  display:flex;
  padding:24px var(--spread-pad-x);
}
.cover__bento{
  flex:1; display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:18px;
}
.cover__cell{
  background:var(--off-white);
  border-radius:14px;
  padding:24px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}

/* Hero: mark (contain — never crop a brand mark) */
.cover__cell--mark{ grid-column:1 / span 2; grid-row:1 / span 2; padding:36px; }
.cover__cell--mark img{
  max-width:75%; max-height:75%;
  width:auto; height:auto;
  object-fit:contain;
}

/* Hero: title */
.cover__cell--title{
  grid-column:3 / span 2; grid-row:1 / span 2;
  background:var(--paper); border:1px solid var(--line);
  flex-direction:column; align-items:flex-start; justify-content:center;
  padding:48px; text-align:left;
}
.cover__eyebrow{
  font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--dim); margin:0 0 18px;
}
.cover__cell--title h2{
  font-family:var(--serif); font-weight:400;
  font-size:108px; line-height:0.95; margin:0; letter-spacing:-0.015em;
  color:var(--ink);
}

/* Spec atom variants — backgrounds are themed per atom, but the color cell
   takes its background from data via inline style. */
.cover__cell--color span{
  font-family:var(--mono); font-size:14px; letter-spacing:0.12em;
}
.cover__cell--year{ background:var(--ink); }
.cover__cell--year span{
  font-family:var(--serif); font-weight:300; font-size:72px; line-height:1; color:#fff;
}
.cover__cell--version span{
  font-family:var(--serif); font-weight:300; font-size:54px; line-height:1; color:var(--ink);
}
.cover__cell--voice{ background:var(--off-white); }
.cover__cell--voice span{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:30px; line-height:1.2; text-align:center; color:var(--ink);
}
.cover__cell--spec{
  background:var(--paper); border:1px solid var(--line);
  flex-direction:column; align-items:flex-start; justify-content:center;
  padding:22px 26px; gap:6px;
}
.cover__cell--spec strong{
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
}
.cover__cell--spec em{
  font-style:normal; font-family:var(--mono); font-size:14px; color:var(--ink);
}
.cover__cell--spec .specimen{
  font-family:'Lexend Exa', sans-serif; font-weight:300;
  font-size:30px; letter-spacing:0; color:var(--ink); margin-top:4px;
}
.cover__cell--credit{
  background:var(--paper); border:1px solid var(--line);
  flex-direction:column; align-items:flex-start; justify-content:center;
  padding:22px 26px; gap:6px;
}
.cover__cell--credit strong{
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
}
.cover__cell--credit em{ font-style:normal; font-size:18px; color:var(--ink); }
.cover__cell--credit em.meta{ color:var(--dim); font-size:13px; }
.cover__cell--mark-variant img{
  max-width:80%; max-height:80%; width:auto; height:auto; object-fit:contain;
}

/* ============== WORDMARK weights ============== */
.wordmark-stack{
  display:flex; flex-direction:column;
  justify-content:space-between;
  gap:24px;
}
.wordmark-row{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex; flex-direction:column;
  flex:1 1 0;
  min-height:0;
}
.wordmark-row__meta{
  display:flex; align-items:baseline; gap:24px;
  font-size:13px; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.22em;
  margin-bottom:14px;
  flex:0 0 auto;
}
.wordmark-row__meta strong{
  color:var(--ink); font-weight:600; font-size:14px;
}
.wordmark-row__lockup{
  flex:1 1 auto;
  display:flex; align-items:center;
  min-height:0;
}
.wordmark-row__lockup img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
}
.wordmark-row__fallback{
  display:flex; align-items:center; gap:24px;
  height:100%;
}
.wordmark-row__fallback img{
  display:block;
  height:100%; width:auto; aspect-ratio:1/1;
  flex:0 0 auto;
}
.wordmark-row__fallback span{
  font-size:13px; color:var(--dim); font-style:italic;
}

/* ============== MARK variants ============== */
.mark-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.mark-cell{
  background:var(--off-white);
  border-radius:14px;
  padding:32px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px;
}
.mark-cell img{ width:240px; height:240px; }
.mark-cell .meta{ text-align:center; }
.mark-cell .meta strong{ display:block; font-size:22px; font-weight:600; margin-bottom:4px; }
.mark-cell .meta span{ font-size:13px; color:var(--dim); font-family:var(--mono); }

.size-matrix{
  background:var(--off-white);
  border-radius:14px;
  padding:32px;
  display:flex; align-items:flex-end; justify-content:space-around; gap:24px;
}
.size-matrix__cell{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.size-matrix__cell img{ display:block; max-width:120px; max-height:120px; width:auto; height:auto; }
.size-matrix__cell .px{
  font-size:11px; color:var(--dim);
  font-family:var(--mono);
}
.size-matrix__cell .weight-tag{
  font-size:10px; color:var(--gold-deep);
  text-transform:uppercase; letter-spacing:0.18em;
}

/* ============== COLOR ============== */
.color-grid{
  display:grid; grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:24px;
}
.color-tile{
  border-radius:14px;
  padding:36px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.color-tile.large{ grid-row:span 2; }
.color-tile h3{ font-size:32px; font-weight:600; margin:0 0 18px; letter-spacing:-0.01em; }
.color-tile dl{
  margin:0;
  display:grid; grid-template-columns:auto 1fr;
  gap:6px 20px;
  font-size:14px;
}
.color-tile dt{
  text-transform:uppercase; letter-spacing:0.08em;
  font-size:10px; font-weight:500;
  color:rgba(0,0,0,0.5);
}
.color-tile dd{ margin:0; font-family:var(--mono); }
.color-tile:not(.large){
  padding:26px;
  justify-content:space-between;
  gap:18px;
}
.color-tile:not(.large) h3{
  font-size:27px;
  margin:0;
}
.color-tile:not(.large) dl{
  grid-template-columns:auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap:7px 12px;
  font-size:12px;
  line-height:1.35;
}
.color-tile:not(.large) dt{
  font-size:9px;
  letter-spacing:0.06em;
  align-self:baseline;
}
.color-tile:not(.large) dd{
  min-width:0;
  overflow-wrap:anywhere;
}
.color-tile.dark{ color:white; }
.color-tile.dark dt{ color:rgba(255,255,255,0.55); }
.color-tile.dark dd{ color:white; }
.color-tile.outline{ border:1px solid var(--line); }

/* ============== RULE CARDS ============== */
.rule-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.rule-card{
  min-height:210px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}
.rule-card h3{
  margin:0;
  font-family:var(--serif);
  font-size:36px;
  font-weight:500;
  line-height:1.08;
  color:var(--ink);
}
.rule-card p{
  margin:0;
  max-width:44ch;
  font-size:17px;
  line-height:1.65;
  color:var(--dim);
}

/* ============== ASSET CONTAINERS ============== */
.containers-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
  gap:24px;
}
.container-cell{
  background:var(--off-white);
  border-radius:14px;
  padding:32px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
}
.container-shape{
  width:240px; height:240px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold);
  flex-shrink:0;
}
.container-shape img{ width:70%; height:70%; }
.container-shape.disk{ border-radius:50%; }
.container-shape.rounded{ border-radius:32px; }
.container-shape.square{ border-radius:0; }
.container-shape.naked{ background:transparent; }
.container-cell .label{
  font-size:13px; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.18em;
}

/* ============== LOCKUP palettes ============== */
.lockup-grid{
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:24px;
}
.lockup-cell{
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  padding:48px 60px;
  position:relative;
}
.lockup-cell img{ width:100%; max-width:480px; height:auto; }
.lockup-cell__caption{
  position:absolute;
  bottom:18px; left:24px; right:24px;
  font-size:11px; text-transform:uppercase; letter-spacing:0.22em;
  display:flex; justify-content:space-between;
}
.lockup-cell.bg-light{ background:var(--off-white); }
.lockup-cell.bg-dark{ background:#1a1a1a; }
.lockup-cell.bg-white{ background:white; border:1px solid var(--line); }
.lockup-cell.bg-dark .lockup-cell__caption{ color:rgba(255,255,255,0.7); }
.lockup-cell.bg-light .lockup-cell__caption,
.lockup-cell.bg-white .lockup-cell__caption{ color:var(--dim); }

/* ============== LOCKUP formats (consolidated spread) ============== */
.lockup-formats-stack{
  display:flex; flex-direction:column;
  gap:24px;
}
.lockup-format{
  flex:1 1 0;
  display:grid; grid-template-columns:1fr 360px; gap:32px;
  align-items:center;
  background:var(--off-white);
  border-radius:14px;
  padding:24px 32px;
  min-height:0;
}
.lockup-format__visual{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  min-height:0;
}
.lockup-format__visual img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
}
.lockup-format__meta{
  display:flex; flex-direction:column; gap:10px;
}
.lockup-format__meta strong{
  font-size:22px; font-weight:600; letter-spacing:-0.005em;
}
.lockup-format__use{
  font-size:13px; color:var(--dim); line-height:1.5;
}
.lockup-format__formula{
  font-size:11px; color:var(--gold-deep);
  font-family:var(--mono); letter-spacing:0.04em;
  margin-top:4px;
}

/* ============== CO-BRANDING ============== */
.cobranding{
  display:flex; flex-direction:column; gap:32px;
  align-items:center; justify-content:center;
}
.cobranding-row{
  display:flex; align-items:center; gap:80px;
  background:var(--off-white);
  border-radius:16px;
  padding:60px 100px;
  width:100%; max-width:1100px;
  justify-content:center;
}
.cobranding-divider{
  width:1px; height:80px; background:var(--line);
}
.cobranding-tang img{ height:84px; width:auto; }
.cobranding-partner{
  font-family:Georgia,'Times New Roman',serif;
  font-size:28px; font-style:italic; color:var(--dim);
  letter-spacing:0.02em;
}

/* ============== ANIMATIONS ============== */
.animations-row{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.anim-cell{
  background:var(--off-white);
  border-radius:14px;
  padding:36px 32px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.anim-cell .preview{
  width:240px; height:240px;
  display:flex; align-items:center; justify-content:center;
}
.anim-cell .preview object,
.anim-cell .preview img{ width:100%; height:100%; }
.anim-cell h4{ font-size:18px; font-weight:600; margin:0; }
.anim-cell p{ font-size:13px; color:var(--dim); text-align:center; margin:0; }

/* ============== TYPOGRAPHY ============== */
.type-stack{
  display:flex; flex-direction:column;
  justify-content:space-between;
  gap:24px;
}
.type-row{
  border-top:1px solid var(--line);
  padding-top:18px;
}
.type-row__meta{
  display:flex; gap:24px; align-items:baseline;
  font-size:11px; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--dim);
  margin-bottom:14px;
}
.type-row__meta strong{ color:var(--ink); font-weight:600; }
.type-row__specimen{
  font-size:84px; line-height:1;
  margin:0; letter-spacing:-0.01em;
}
.type-row__specimen.size-display{
  font-size:58px;
  line-height:1.08;
  max-width:1280px;
}
.type-row__specimen.size-wordmark{ letter-spacing:0; font-weight:300; font-size:64px; }
.type-row__specimen.size-body{
  font-size:22px; line-height:1.55;
  letter-spacing:0; max-width:1200px;
}
/* legacy: keep tracked working if any older JSON still uses it */
.type-row__specimen.tracked{ letter-spacing:0; font-weight:300; font-size:64px; }

/* ============== PHOTO MEDIA ============== */
.photo-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.photo-cell{
  border-radius:12px;
  overflow:hidden; position:relative;
  background:#d4cec0;
}
.photo-cell.tall{ grid-row:span 2; }
.photo-cell--warm{ background:#d9c8ad; }
.photo-cell--neutral{ background:#d4d4d4; }
.photo-cell--dark{ background:#14253a; }
.photo-cell--archive{ background:#c9a87c; }
.photo-cell__caption{
  position:absolute; left:18px; right:18px; bottom:14px;
  color:white;
  font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.photo-todo{
  position:absolute; top:var(--spread-pad-top); right:var(--spread-pad-x);
  background:rgba(255,229,150,0.6);
  border:1px solid #d6b73e;
  color:#5c4a07;
  border-radius:6px; padding:8px 14px;
  font-size:11px; text-transform:uppercase; letter-spacing:0.18em;
}

/* ============== CLEARSPACE ============== */
.clearspace-frame{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
}
.clearspace-figure{
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-width:420px;
  margin:0 auto;
  background:
    linear-gradient(to right, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/25% 100%,
    linear-gradient(to bottom, rgba(201,168,124,0.18) 1px, transparent 1px) 0 0/100% 25%;
  border:1px dashed var(--line);
}
.clearspace-figure img{
  position:absolute; top:25%; left:25%;
  width:50%; height:50%;
}
.clearspace-figure .x-label{
  position:absolute;
  font-family:var(--mono); font-size:14px; color:var(--gold-deep);
}
.clearspace-figure .x-label.top{ top:8px; left:50%; transform:translateX(-50%); }
.clearspace-figure .x-label.bottom{ bottom:8px; left:50%; transform:translateX(-50%); }
.clearspace-figure .x-label.left{ left:8px; top:50%; transform:translateY(-50%); }
.clearspace-figure .x-label.right{ right:8px; top:50%; transform:translateY(-50%); }
.clearspace-meta h4{ font-size:24px; font-weight:600; margin:0 0 12px; }
.clearspace-meta p{ font-size:16px; color:var(--dim); margin:0 0 14px; line-height:1.55; }

/* ============== DON'TS ============== */
.donts-cells{
  display:grid; grid-template-columns:repeat(3, 1fr);
  grid-template-rows:1fr 1fr;
  gap:20px;
}
.dont-cell{
  background:var(--off-white);
  border-radius:12px;
  padding:24px;
  display:flex; flex-direction:column;
}
.dont-cell__demo{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  border-radius:8px;
}
.dont-cell__demo::after{
  content:'';
  position:absolute; inset:8px;
  background:linear-gradient(135deg,
    transparent calc(50% - 1.5px),
    var(--warn) calc(50% - 1.5px),
    var(--warn) calc(50% + 1.5px),
    transparent calc(50% + 1.5px));
  pointer-events:none;
}
.dont-cell__demo img{ max-width:60%; max-height:80%; }
.dont-cell__demo.bg-dark{ background:#1a1a1a; }
.dont-cell__caption{
  font-size:13px; color:var(--dim);
  margin-top:16px;
  border-top:1px solid var(--line); padding-top:12px;
  line-height:1.45;
}

@media (max-width:620px){
  .deck-header{
    display:grid;
    grid-template-columns:1fr;
    gap:12px 16px;
    padding-inline:16px;
    justify-items:center;
  }
  .deck-header__brand{ justify-self:center; }
  .deck-header__brand{ width:min(174px, 100%); max-width:none; }
  .deck-header__brand img{ width:100%; max-width:100%; }
  .deck-header__meta{
    grid-column:1;
    flex-basis:100%;
    margin:0;
    justify-self:center;
  }
  .deck-header__actions{
    grid-column:1;
    justify-self:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-left:0;
  }
}

@media (max-width:430px){
  .deck-header{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .deck-header__brand,
  .deck-header__meta,
  .deck-header__actions{
    justify-self:center;
  }
  .deck-header__actions{
    grid-column:1;
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* ============== PRINT ============== */
@page{ size:1920px 1080px landscape; margin:0; }
@media print{
  body{ background:white; }
  .deck-header, .skip-link{ display:none; }
  .deck-main, .deck{
    gap:0; padding:0; max-width:none;
  }
  .spread-frame{
    width:1920px; height:1080px;
    box-shadow:none; border-radius:0;
    page-break-after:always;
    aspect-ratio:auto;
    break-after:page;
  }
  .spread{ transform:none; }
}