/* ============================================================
   CASA LEGADO — Brand Book
   Design system stylesheet
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root{
  /* Film grading palette */
  --umber:      #211c17;   /* tinta — negro cálido */
  --umber-card: #2c2620;   /* superficie elevada */
  --umber-line: #3a332c;   /* filete sobre tinta */
  --bone:       #f6f3ee;   /* hueso — blanco cálido (no crema) */
  --bone-deep:  #ebe6df;   /* segundo tono de papel */
  --bone-line:  #d8d1c6;   /* filete sobre claro */
  --clay:       #8f6f60;   /* terroso neutro de apoyo */
  --brass:      #b46a5a;   /* acento — tierra roja apagada */
  --brass-soft: #c98a7c;
  --oxblood:    #6e342c;   /* énfasis profundo */
  --brass-deep: #9a5042;   /* tierra roja sobre papel (texto pequeño AA) */

  /* Text roles */
  --ink-on-dark:   #ece7df;
  --ink-on-dark-2: rgba(236,231,223,.64);
  --ink-on-dark-3: rgba(236,231,223,.56);
  --ink-on-light:   #2b2620;
  --ink-on-light-2: rgba(43,38,32,.68);
  --ink-on-light-3: rgba(43,38,32,.62);

  /* Type */
  --serif: "Marcellus", "Marcellus Fallback", Georgia, "Times New Roman", serif;  /* display */
  --sans:  "Piazzolla", Georgia, serif;                      /* lectura / cuerpo */
  --mono:  "Courier Prime", "Courier New", monospace;        /* etiquetas técnicas */

  /* Rhythm */
  --gutter: clamp(22px, 5.2vw, 132px);
  --rule: 1px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.30,1);
  --slow: 1.5s;
}

/* ---- Reset ------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--umber);
  color:var(--ink-on-dark);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.005em;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; }

/* ============================================================
   GRAIN + VIGNETTE  (persistent, fixed)
   ============================================================ */
.fx-grain,
.fx-vignette{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:60;
}
.fx-grain{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:200px 200px;
  mix-blend-mode:overlay;
  opacity:var(--grain, .07);
  animation:grain 1.1s steps(4) infinite;
  transition:opacity 1.2s linear;
}
.fx-vignette{
  background:
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,var(--vig, .42)) 100%);
  transition:background 1.2s linear;
}
@keyframes grain{
  0%{ transform:translate(0,0) }
  25%{ transform:translate(-6%,3%) }
  50%{ transform:translate(4%,-5%) }
  75%{ transform:translate(-3%,4%) }
  100%{ transform:translate(5%,-2%) }
}

/* ============================================================
   PROGRESS — film-strip timecode (fixed)
   ============================================================ */
.hud{
  position:fixed; z-index:70;
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  pointer-events:none;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-on-dark-2);
  mix-blend-mode:difference;
}
.hud__mark{ display:flex; align-items:center; gap:.7em; }
.hud__dot{ width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
.hud__tc{ display:flex; gap:1.4em; align-items:center; }

/* film strip rail down the left edge */
.filmstrip{
  position:fixed; z-index:65;
  top:0; bottom:0; left:0;
  width:18px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 12px,
      rgba(0,0,0,.0) 12px 14px,
      var(--strip-hole,#0c0a08) 14px 24px,
      rgba(0,0,0,0) 24px 26px
    );
  opacity:.0;
  transition:opacity 1s;
}
.filmstrip__fill{
  position:absolute; left:6px; top:0; width:6px;
  height:100%;
  transform:scaleY(0); transform-origin:top;
  background:var(--brass);
  box-shadow:0 0 16px rgba(180,106,90,.6);
  transition:transform .12s linear;
}

/* ============================================================
   CHAPTER LAYOUT
   ============================================================ */
.chapter{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(70px,11vh,150px) var(--gutter);
  overflow:hidden;
}
.chapter--light{
  background:var(--bone);
  color:var(--ink-on-light);
}
.chapter--paper{
  background:var(--bone-deep);
  color:var(--ink-on-light);
}

/* slate label top of each chapter */
.slate{
  position:absolute;
  top:clamp(48px,8vh,96px); left:var(--gutter); right:var(--gutter);
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5em;
  font-family:var(--mono);
  font-size:clamp(10px,.72vw,12px);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
}
.chapter--light .slate, .chapter--paper .slate{ color:var(--ink-on-light-3); }
.slate__no{ color:var(--brass); }
.slate::before,.slate::after{ content:none; }
.slate__rule{
  flex:1; height:1px;
  background:currentColor; opacity:.32;
  align-self:center; margin:0 .4em;
}

.wrap{ width:100%; max-width:1380px; margin:0 auto; }
.wrap--narrow{ max-width:920px; }

/* ---- Type primitives -------------------------------------- */
.kicker{
  font-family:var(--mono);
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass-soft);
  display:inline-block;
}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.01em;
  font-size:clamp(46px,7.6vw,140px);
  text-wrap:balance;
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.005em;
  font-size:clamp(34px,5vw,86px);
  text-wrap:balance;
}
.h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  font-size:clamp(24px,2.6vw,42px);
}
.lede{
  font-family:var(--sans);
  font-weight:400;
  font-style:normal;
  font-size:clamp(22px,2.5vw,40px);
  line-height:1.36;
  color:var(--ink-on-dark);
  text-wrap:pretty;
}
.chapter--light .lede, .chapter--paper .lede{ color:var(--ink-on-light); }
.body{
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.74;
  color:var(--ink-on-dark-2);
  max-width:42ch;
  text-wrap:pretty;
}
.chapter--light .body,.chapter--paper .body{ color:var(--ink-on-light-2); }
.caption{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
}
.chapter--light .caption,.chapter--paper .caption{ color:var(--ink-on-light-3); }
.en{ /* secondary English line */
  font-family:var(--sans);
  font-weight:300; font-style:normal;
  letter-spacing:.01em;
  color:var(--ink-on-dark-3);
}
.chapter--light .en,.chapter--paper .en{ color:var(--ink-on-light-3); }
em{ font-style:normal; }                       /* énfasis por escala/peso/espacio — nunca itálica */
em.amber, .amber{ color:inherit; font-weight:600; }

.hairline{ height:1px; background:var(--umber-line); border:0; width:100%; }
.chapter--light .hairline,.chapter--paper .hairline{ background:var(--bone-line); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* The VISIBLE end-state is the base style, so content is never trapped
   invisible if the animation clock is throttled (backgrounded tab, offscreen
   iframe, capture engine) or JS is disabled. The hidden start + transition is
   applied only when JS adds `html.anim`, and removed again if a probe finds
   that CSS transitions are not actually advancing. */
.reveal{ opacity:1; transform:none; filter:none; }
html.anim .reveal{
  opacity:0;
  transform:translateY(30px);
  filter:blur(6px);
  transition:opacity var(--slow) var(--ease),
             transform var(--slow) var(--ease),
             filter var(--slow) var(--ease);
  transition-delay:var(--d, 0s);
  will-change:opacity, transform;
}
html.anim .reveal.is-visible{
  opacity:1; transform:none; filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  html.anim .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .fx-grain{ animation:none; }
  html{ scroll-behavior:auto; }
}
/* Hard settle: applied by the probe when CSS transitions are NOT advancing
   (backgrounded tab / offscreen iframe / capture engine). `transition:none`
   is required to release any composited value stuck mid-transition. */
html.settled .reveal{
  opacity:1 !important; transform:none !important; filter:none !important;
  transition:none !important;
}

/* ============================================================
   IMAGE PLACEHOLDERS (cinematic stills)
   ============================================================ */
.frame{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(154,107,71,.10) 0 2px,
      transparent 2px 9px),
    linear-gradient(160deg, #221c17, #15110e);
  border:1px solid var(--umber-line);
  overflow:hidden;
  display:flex; align-items:flex-end;
  color:var(--ink-on-dark-3);
}
.chapter--light .frame, .chapter--paper .frame{
  background:
    repeating-linear-gradient(135deg,
      rgba(154,107,71,.12) 0 2px,
      transparent 2px 9px),
    linear-gradient(160deg,#ded3bd,#d6c9ad);
  border-color:var(--bone-line);
  color:var(--ink-on-light-3);
}
.frame::after{ /* soft vignette inside frames */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 35%, transparent 55%, rgba(0,0,0,.5));
  pointer-events:none;
}
.frame__tag{
  position:relative; z-index:2;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:12px 14px;
  display:flex; align-items:center; gap:.8em;
}
.frame__tag::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--oxblood); box-shadow:0 0 8px var(--oxblood);
}

/* ============================================================
   LOGO MARKS
   ============================================================ */
.wordmark{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.16em;
  line-height:.92;
  text-transform:uppercase;
}
.wordmark .casa{ display:block; }
.wordmark .legado{ display:block; }

.monogram{
  font-family:var(--serif);
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:-.04em;
}
/* interlocking C·L isotype injected into every .monogram */
.monogram .iso{ width:1em; height:1em; display:block; overflow:visible; }
.cover__mono .iso, .closing .monogram .iso, .mini .monogram[style*="radius"] .iso{ width:.82em; height:.82em; }

/* ============================================================
   CHAPTER 1 — COVER
   ============================================================ */
.cover{ text-align:center; }
.cover .wordmark{
  font-size:clamp(54px,11vw,200px);
  letter-spacing:.22em;
}
.cover__mono{
  font-size:clamp(58px,7.5vw,116px);
  width:1.7em; height:1.4em;
  color:var(--brass);
  margin:0 auto;
}
.cover__rule{
  width:1px; height:clamp(38px,6vh,70px);
  background:linear-gradient(var(--brass), transparent);
  margin:clamp(18px,3vh,30px) auto;
}

/* ============================================================
   POSITIONING SPREAD (is / is-not)
   ============================================================ */
.spread{
  display:grid; grid-template-columns:1fr 1px 1fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.spread__rule{ background:var(--umber-line); width:1px; height:100%; }
.chapter--light .spread__rule{ background:var(--bone-line); }
.list{ list-style:none; padding:0; margin:0; display:grid; gap:1.1em; }
.list li{
  display:grid; grid-template-columns:auto 1fr; gap:1em; align-items:baseline;
  padding-bottom:1.1em; border-bottom:1px solid var(--bone-line);
  font-size:clamp(16px,1.4vw,22px);
  font-family:var(--serif); font-weight:400;
}
.chapter--light .list li{ border-color:var(--bone-line); }
.list__no{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--brass); }
.list--neg .list__no{ color:var(--oxblood); }
.list li .en{ display:block; font-family:var(--sans); font-size:13px; margin-top:.2em; }

/* ============================================================
   VALUES
   ============================================================ */
.values{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--umber-line);
}
.value{
  padding:clamp(26px,3vw,46px) clamp(16px,1.6vw,30px) clamp(40px,7vh,90px);
  border-right:1px solid var(--umber-line);
  min-height:46vh;
  display:flex; flex-direction:column;
}
.value:last-child{ border-right:0; }
.value__no{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--brass); margin-bottom:auto; }
.value__name{ font-family:var(--serif); font-size:clamp(26px,2.4vw,40px); line-height:1.04; margin:1.6em 0 .35em; }
.value__en{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-on-dark-3); margin-bottom:1em; }
.value__txt{ font-size:14px; line-height:1.6; color:var(--ink-on-dark-2); }

/* ============================================================
   LOGO SYSTEM CHAPTER
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,72px); align-items:center; }
.specimen{
  position:relative;
  border:1px solid var(--umber-line);
  background:var(--umber-card);
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(220px,34vh,360px);
  padding:40px;
  transition:border-color .6s var(--ease), background .6s var(--ease);
}
.specimen .caption{ position:absolute; top:12px; left:14px; }
.specimen:hover{ border-color:var(--brass); }
.specimen:hover .hint{ opacity:1; transform:translateY(0); }
.hint{
  position:absolute; bottom:12px; left:14px; right:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--brass);
  opacity:0; transform:translateY(6px); transition:.5s var(--ease);
  text-transform:uppercase;
}
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.mini{
  border:1px solid var(--umber-line); background:var(--umber-card);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  position:relative; transition:.5s var(--ease);
}
.mini:hover{ border-color:var(--brass); background:#2b231d; }
.mini .caption{ position:absolute; bottom:10px; left:0; right:0; text-align:center; }

/* clear-space diagram */
.clearspace{ position:relative; padding:clamp(34px,5vw,68px); }
.clearspace__box{
  position:relative; border:1px dashed var(--clay);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,4vw,60px);
}
.clearspace__tick{ position:absolute; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--clay); }

/* misuse */
.misuse{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.misuse__cell{
  border:1px solid var(--umber-line); background:var(--umber-card);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.misuse__cell .x{ position:absolute; top:8px; right:10px; color:var(--oxblood); font-family:var(--mono); font-size:13px; }
.misuse__cap{ position:absolute; bottom:8px; left:10px; right:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-on-dark-3); }

/* ============================================================
   COLOR CHAPTER
   ============================================================ */
.swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--bone-line); }
.swatch{
  position:relative; min-height:clamp(280px,46vh,460px);
  padding:22px; display:flex; flex-direction:column; justify-content:space-between;
  cursor:default; overflow:hidden;
  border-right:1px solid rgba(0,0,0,.12);
  transition:flex .6s var(--ease);
}
.swatch:last-child{ border-right:0; }
.swatch__role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
.swatch__name{ font-family:var(--serif); font-size:clamp(20px,1.7vw,28px); line-height:1.05; }
.swatch__hex{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; }
.swatch__note{
  font-family:var(--sans); font-size:12.5px; line-height:1.5;
  opacity:0; max-height:0; transition:.6s var(--ease); margin-top:.6em;
}
.swatch:hover .swatch__note{ opacity:1; max-height:120px; }
.swatch--dark{ color:var(--bone); }
.swatch--light{ color:var(--ink-on-light); }

/* ============================================================
   TYPOGRAPHY CHAPTER
   ============================================================ */
.type-row{ display:grid; grid-template-columns:130px 1fr; gap:clamp(20px,3vw,54px); padding:clamp(20px,2.4vw,38px) 0; border-bottom:1px solid var(--bone-line); align-items:baseline; }
.type-row__meta{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-on-light-3); }
.type-row__meta b{ display:block; color:var(--brass); font-weight:400; margin-bottom:.4em; }
.scale-list{ display:grid; gap:0; }
.scale-row{ display:flex; align-items:baseline; gap:1.4em; padding:14px 0; border-bottom:1px solid var(--bone-line); }
.scale-row .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-on-light-3); width:90px; flex:none; }

/* ============================================================
   GRAPHIC ELEMENTS
   ============================================================ */
.gfx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gfx{
  border:1px solid var(--umber-line); background:var(--umber-card);
  min-height:clamp(180px,26vh,260px); padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.archival-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  border:1px solid var(--clay); padding:10px 12px;
  display:inline-grid; gap:6px; line-height:1.3; color:var(--ink-on-dark-2);
  background:rgba(154,107,71,.06);
}
.archival-label b{ color:var(--brass); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:9.5px; }
.slate-motif{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  display:grid; gap:5px;
}
.slate-motif .bar{ display:flex; justify-content:space-between; border-bottom:1px solid var(--umber-line); padding-bottom:5px; color:var(--ink-on-dark-2); }
.clapper{ display:flex; height:18px; }
.clapper span{ flex:1; }
.clapper span:nth-child(odd){ background:var(--bone); }
.clapper span:nth-child(even){ background:var(--umber); }
.rules-demo > *{ margin:14px 0; }
.r-hair{ height:1px; background:var(--bone); opacity:.4; }
.r-brass{ height:1px; background:var(--brass); }
.r-double{ height:5px; border-top:1px solid var(--clay); border-bottom:1px solid var(--clay); }

/* ============================================================
   VOICE / TONE
   ============================================================ */
.voice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,60px); }
.voice-col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.4em; display:flex; align-items:center; gap:.7em; }
.voice-do h4{ color:var(--brass); }
.voice-dont h4{ color:var(--oxblood); }
.quote-line{
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.7vw,28px);
  line-height:1.3; padding:0 0 1.1em; margin-bottom:1.1em;
  border-bottom:1px solid var(--umber-line);
}
.chapter--light .quote-line{ border-color:var(--bone-line); }
.quote-line .en{ display:block; font-family:var(--sans); font-style:normal; font-size:13px; margin-top:.5em; }
.quote-line.dont{ color:var(--ink-on-dark-3); text-decoration:line-through; text-decoration-color:rgba(94,43,43,.6); }

/* ============================================================
   APPLICATIONS / MOCKUPS
   ============================================================ */
.apps{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.app{ position:relative; }
.app .caption{ margin-bottom:10px; }
.app--wide{ grid-column:span 4; }
.app--half{ grid-column:span 2; }
.app--third{ grid-column:span 2; }
.mock{
  border:1px solid var(--umber-line); background:var(--umber-card);
  position:relative; overflow:hidden;
}

/* business card */
.bizcard{ aspect-ratio:1.75/1; padding:24px; display:flex; flex-direction:column; justify-content:space-between; }
.bizcard--front{ background:var(--umber); }
.bizcard--back{ background:var(--bone); color:var(--ink-on-light); }
.bizcard .mono-block{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; line-height:1.7; }

/* heirloom case */
.case{ aspect-ratio:1.1/1; background:linear-gradient(150deg,#211b16,#161210); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; position:relative; }
.case__lid{ position:absolute; inset:14px; border:1px solid var(--clay); }
.case .monogram{ font-size:64px; color:var(--brass); }

/* title card / opening credit */
.titlecard{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--umber); text-align:center; gap:14px; }
.credit{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--umber); }
.credit .stack{ text-align:center; }
.credit .role{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin-bottom:.8em; }
.credit .nm{ font-family:var(--serif); font-size:clamp(20px,2vw,34px); letter-spacing:.04em; }

/* social frame */
.social{ aspect-ratio:1/1; background:var(--umber); padding:26px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.social__bars{ position:absolute; inset:0; border-top:46px solid #000; border-bottom:46px solid #000; pointer-events:none; }

/* signature */
.signature{ aspect-ratio:1.75/1; background:var(--bone); color:var(--ink-on-light); padding:24px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.signature .sig-name{ font-family:var(--serif); font-style:italic; font-size:30px; }
.signature .sig-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-on-light-3); }

/* ============================================================
   CLOSING
   ============================================================ */
.closing{ text-align:center; }
.closing .monogram{ font-size:clamp(48px,6vw,86px); color:var(--brass); width:1.6em; height:1.3em; margin:0 auto clamp(26px,4vh,46px); }
.colophon{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-on-dark-3); line-height:2.2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-2{ grid-template-columns:1fr; }
  .values{ grid-template-columns:repeat(2,1fr); }
  .value{ border-bottom:1px solid var(--umber-line); }
  .value:nth-child(2n){ border-right:0; }
  .swatches{ grid-template-columns:1fr 1fr; }
  .swatch{ min-height:240px; }
  .apps{ grid-template-columns:repeat(2,1fr); }
  .app--wide,.app--half,.app--third{ grid-column:span 2; }
  .misuse{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .spread{ grid-template-columns:1fr; }
  .spread__rule{ display:none; }
  .values{ grid-template-columns:1fr; }
  .value{ min-height:auto; border-right:0; }
  .voice-grid{ grid-template-columns:1fr; }
  .gfx-grid{ grid-template-columns:1fr; }
  .apps{ grid-template-columns:1fr; }
  .type-row{ grid-template-columns:1fr; gap:14px; }
  .swatches{ grid-template-columns:1fr; }
}

/* ============================================================
   PRINT — A4 PORTRAIT
   ============================================================ */
@media print{
  /* remapear tokens a versión clara: tinta sobre papel, no tóner a página completa */
  :root{
    --umber:#ffffff; --umber-card:#ffffff; --umber-line:#d8d1c6;
    --ink-on-dark:#211c17; --ink-on-dark-2:rgba(33,28,23,.78); --ink-on-dark-3:rgba(33,28,23,.6);
    --brass:#9a5042; --brass-soft:#9a5042; --clay:#6e5346;
  }
  .fx-grain,.fx-vignette,.hud,.filmstrip,.tc-rail,.nav,.nav__panel,.cursor-light,.page-fade,.reel-intro,.scrollcue{ display:none !important; }
  .reveal, html.anim .reveal-words .rw{ opacity:1 !important; transform:none !important; filter:none !important; }
}