/* ─────────────────────────────────────────────────────────
   LIBROOX · Editorial Print Manifesto
   v.2026
   ───────────────────────────────────────────────────────── */

:root{
  --ink: #0D1031;
  --ink-2: #1A1F4A;
  --paper: #F6F5F7;
  --paper-warm: #EFE9E1;
  --paper-cream: #F6F0E2;
  --cyan: #6ECAE4;
  --magenta: #AE419C;
  --yellow: #F4C95D;
  --blue: #449BD0;
  --violet: #4A5AA6;
  --rule: rgba(13,16,49,.14);
  --rule-strong: rgba(13,16,49,.28);

  --serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans: 'Montserrat', -apple-system, system-ui, sans-serif;

  --max: 1320px;
  --pad-x: clamp(20px, 4.5vw, 60px);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  font-weight: 300;
  background: var(--paper-warm);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 900px){ body{ cursor: auto; } }

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:0}

::selection{ background: var(--magenta); color: var(--paper); }

/* ─────────── grain ─────────── */
.grain{
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .65 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;
  mix-blend-mode: multiply;
}

/* ─────────── registration marks ─────────── */
.reg{ position: fixed; width: 32px; height: 32px; z-index: 80; pointer-events: none; opacity: .45; }
.reg::before, .reg::after{
  content:''; position:absolute; background: var(--ink);
}
.reg::before{ width:1px; height:100%; left:50%; }
.reg::after{ height:1px; width:100%; top:50%; }
.reg--tl{ top:18px; left:18px; }
.reg--tr{ top:18px; right:18px; }
.reg--bl{ bottom:18px; left:18px; }
.reg--br{ bottom:18px; right:18px; }

/* ─────────── ink cursor ─────────── */
.ink-cursor{
  position: fixed; left:0; top:0;
  width: 14px; height: 14px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: multiply;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s;
  filter: blur(.4px);
}
.ink-cursor.hot{ width: 56px; height: 56px; background: var(--magenta); }

/* ─────────── masthead ─────────── */
.masthead{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px var(--pad-x);
  background: linear-gradient(180deg, rgba(239,233,225,.92) 60%, rgba(239,233,225,0));
  backdrop-filter: blur(6px);
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
}
.brand__mark{ display:inline-flex; }
.brand__word{ font-style: italic; }

.masthead__nav{
  display: flex; gap: 28px; justify-content: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
}
.masthead__nav a{ position: relative; }
.masthead__nav a:not(.masthead__cta)::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background: var(--ink); transition: right .4s var(--ease-out);
}
.masthead__nav a:not(.masthead__cta):hover::after{ right:0; }
.masthead__cta{
  border:1px solid var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.masthead__cta:hover{ background: var(--ink); color: var(--paper-warm); }

.masthead__folio{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500;
  font-feature-settings:"tnum";
  text-align: right;
  opacity: .7;
}

@media (max-width: 840px){
  .masthead{ grid-template-columns: 1fr auto; }
  .masthead__nav{ display:none; }
}

/* ─────────── folio markers ─────────── */
.folio{
  position: absolute; top: 36px; left: var(--pad-x);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 500;
  opacity: .72;
  display: inline-flex; align-items: center; gap: 12px;
}
.folio::before{
  content:''; width: 24px; height:1px; background: var(--ink);
}
.folio--invert{ color: var(--paper); opacity: .55; }
.folio--invert::before{ background: var(--paper); }

/* ─────────── shared btn ─────────── */
.btn{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out);
}
.btn::before{
  content:''; position:absolute; inset:0;
  transition: transform .5s var(--ease-out);
}
.btn--ink{ background: var(--ink); color: var(--paper); }
.btn--ink::before{ background: var(--magenta); transform: translateY(101%); }
.btn--ink:hover::before{ transform: translateY(0); }
.btn--ink span, .btn--ink svg{ position: relative; z-index: 1; }

.btn--paper{ background: var(--paper); color: var(--ink); border:1px solid var(--ink); }
.btn--paper::before{ background: var(--ink); transform: translateY(101%); }
.btn--paper:hover{ color: var(--paper); }
.btn--paper:hover::before{ transform: translateY(0); }
.btn--paper span, .btn--paper svg{ position: relative; z-index: 1; }

/* ─────────── HERO ─────────── */
.hero{
  position: relative;
  min-height: 100vh;
  padding: 140px var(--pad-x) 140px;
  display: grid;
  align-content: center;
}

.hero__grid{
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  grid-template-areas:
    "title  stage"
    "lede   stage"
    "act    stage";
  column-gap: clamp(20px, 4vw, 60px);
  row-gap: 32px;
  align-items: end;
}

.hero__title-wrap{ grid-area: title; align-self: start; }
.hero__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 11vw, 178px);
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero__title .word{
  display: inline-block;
  margin-right: .18em;
  opacity: 0;
  transform: translateY(40%) rotate(-2deg);
  animation: word-rise 1.1s var(--ease-out) forwards;
}
.hero__title .word:nth-child(1){ animation-delay: .1s; }
.hero__title .word:nth-child(2){ animation-delay: .25s; }
.hero__title .word:nth-child(3){ animation-delay: .38s; }
.hero__title .word:nth-child(4){ animation-delay: .52s; }
.hero__title em.ink-word{
  font-style: italic;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.hero__title em.ink-word::after{
  content:''; position:absolute;
  left: -2%; right: 8%; bottom: .04em;
  height: .07em;
  background: var(--magenta);
  transform-origin: left;
  transform: scaleX(0);
  animation: underline-grow 1s var(--ease-out) 1.3s forwards;
  border-radius: 2px;
}
.serif-period{ color: var(--magenta); margin-left: 2px; }

@keyframes word-rise {
  0% { opacity:0; transform: translateY(80%) rotate(-3deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform: translateY(0) rotate(0); }
}
@keyframes underline-grow {
  to { transform: scaleX(1); }
}

.hero__lede{
  grid-area: lede;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.45;
  max-width: 26ch;
  margin: 0;
  font-variation-settings:"opsz" 14;
  opacity: 0;
  animation: fade-up .8s var(--ease-out) 1.2s forwards;
}
.hero__lede span{ display: block; opacity: .65; margin-top: .35em; font-size: .82em; }

@keyframes fade-up{ from{ opacity:0; transform:translateY(16px);} to{opacity:1;transform:none;} }

.hero__actions{
  grid-area: act;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
  opacity: 0;
  animation: fade-up .8s var(--ease-out) 1.5s forwards;
}
.hero__micro{
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; opacity: .55;
}

.ink-stage{
  grid-area: stage;
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 460px;
}
.ink-svg{
  width: 100%;
  max-width: 500px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(13,16,49,.18));
}

/* ── ink drop sequence ── */
.ink-svg .drop{
  transform-origin: 210px 60px;
  animation: drop-fall 1.6s var(--ease-out) .4s both;
}
@keyframes drop-fall{
  0%   { transform: translateY(-80px) scaleY(.6); opacity:0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(180px) scaleY(1.2); opacity: 1; }
  85%  { transform: translateY(220px) scaleY(.4); opacity: 0; }
  100% { transform: translateY(220px); opacity: 0; }
}

.ink-svg .splash-core{ animation: splash 1.2s var(--ease-out) 1.6s both; }
.ink-svg .splash-ring--m{ animation: splash-ring 1.4s var(--ease-out) 1.7s both; }
.ink-svg .splash-ring--c{ animation: splash-ring 1.4s var(--ease-out) 1.85s both; }
.ink-svg .splash-ring--y{ animation: splash-ring 1.4s var(--ease-out) 1.95s both; }
@keyframes splash{
  0%  { r: 0; opacity:.95; }
  50% { r: 140; opacity:.4; }
  100%{ r: 220; opacity: 0; }
}
@keyframes splash-ring{
  0%  { r: 0; opacity:.6; }
  100%{ r: 180; opacity: 0; }
}

.ink-svg .book{
  transform-origin: 210px 360px;
  opacity: 0;
  animation: book-rise 1.2s var(--ease-out) 2.1s forwards;
}
@keyframes book-rise{
  0%  { opacity:0; transform: translateY(60px) scale(.6); }
  60% { opacity:1; }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.ink-svg .book__leaf--left{ transform-origin: 210px 326px; animation: leaf-flutter 6s ease-in-out 3s infinite; }
.ink-svg .book__leaf--right{ transform-origin: 210px 326px; animation: leaf-flutter 7s ease-in-out 3.5s infinite reverse; }
@keyframes leaf-flutter{
  0%,100%{ transform: rotateY(0deg); }
  50%    { transform: rotateY(-3deg); }
}

.ink-svg .float-marks{ animation: marks-float 8s ease-in-out infinite; transform-origin: center; }
@keyframes marks-float{
  0%,100%{ transform: translateY(0); }
  50%   { transform: translateY(-6px); }
}

.hero__scroll{
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  opacity: .55;
}
.hero__scroll svg{ animation: scroll-bob 2.2s ease-in-out infinite; }
@keyframes scroll-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } }

@media (max-width: 900px){
  .hero__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "stage"
      "lede"
      "act";
    row-gap: 28px;
  }
  .ink-stage{ min-height: 340px; }
  .hero{ padding-top: 110px; padding-bottom: 80px; }
}

/* ─────────── MANIFEST ─────────── */
.manifest{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(100px, 14vw, 180px) var(--pad-x);
  overflow: hidden;
  isolation: isolate;
}
.manifest__bg{
  position: absolute; inset: 0; z-index: 0; opacity: .9;
  pointer-events: none;
}
.manifest__bg svg{ width: 100%; height: 100%; }
.manifest__bg circle{ animation: cmyk-pulse 8s ease-in-out infinite; transform-origin: center; }
.manifest__bg circle:nth-child(2){ animation-delay: -2s; }
.manifest__bg circle:nth-child(3){ animation-delay: -4s; }
@keyframes cmyk-pulse{
  0%,100%{ transform: scale(1); opacity:.45; }
  50%   { transform: scale(1.15); opacity:.7; }
}

.manifest__quote{
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: var(--max);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 8.5vw, 132px);
  line-height: .98;
  letter-spacing: -.025em;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.manifest__quote .line{
  display: block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
.manifest__quote.in .line{ opacity: 1; transform: none; }
.manifest__quote.in .line:nth-child(1){ transition-delay: .05s; }
.manifest__quote.in .line:nth-child(2){ transition-delay: .25s; }
.manifest__quote.in .line:nth-child(3){ transition-delay: .55s; }
.manifest__quote.in .line:nth-child(4){ transition-delay: .8s; }

.manifest__quote s{ opacity: .35; text-decoration: line-through; text-decoration-color: var(--magenta); text-decoration-thickness: 3px; }
.manifest__quote em{ font-style: italic; color: var(--cyan); }
/* highlight: caja sólida tipo bandera editorial, no franja tachante.
   pintamos un bloque detrás del texto via box-shadow + padding, manteniendo legibilidad. */
.ink-highlight{
  position: relative;
  display: inline-block;
  padding: .02em .18em .04em;
  background: var(--magenta);
  color: var(--paper) !important;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-style: italic;
}
.ink-highlight--bright{
  background: var(--yellow);
  color: var(--ink) !important;
}

.manifest__cite{
  position: relative; z-index:1;
  margin: 60px auto 0;
  max-width: var(--max);
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 500; opacity: .55;
}

/* ─────────── DIFF / METHOD ─────────── */
.diff{
  position: relative;
  padding: clamp(100px, 12vw, 160px) var(--pad-x);
  background: var(--paper-cream);
}
.diff__head{
  max-width: var(--max);
  margin: 0 auto 80px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variation-settings:"opsz" 144, "SOFT" 40;
}
.diff__head .count{
  font-variant-numeric: tabular-nums;
  color: var(--magenta);
  font-style: italic;
  display: inline-block;
  min-width: 1.2ch;
}
.diff__head .count--after{ color: var(--cyan); }

.diff__grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: stretch;
}

.diff__col{
  background: var(--paper);
  padding: 36px;
  border: 1px solid var(--rule);
  position: relative;
  display: flex; flex-direction: column;
}
.diff__col--before{ background: var(--paper); }
.diff__col--after{ background: var(--ink); color: var(--paper); }

.diff__col header{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.diff__col--after header{ border-color: rgba(246,245,247,.2); }
.diff__label{
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
}
.diff__label--bright{ color: var(--cyan); }
.diff__sub{ font-size: 11px; opacity: .55; letter-spacing: .1em; text-transform: uppercase; }

.steps{
  list-style: none; padding: 0; margin: 0;
  counter-reset: step;
}
.diff__col--before .steps li{
  counter-increment: step;
  position: relative;
  padding: 9px 0 9px 38px;
  font-size: 14px;
  border-bottom: 1px dashed var(--rule);
  opacity: .92;
  color: var(--ink);
  transition: opacity .6s var(--ease-out), color .6s;
}
.diff__col--before .steps li::before{
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 10px;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: var(--magenta);
  opacity: .85;
}
.diff__col--before.in .steps li{
  text-decoration: line-through;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 1.5px;
  opacity: .55;
}
.diff__col--before.in .steps li:last-child{
  opacity: .95;
  text-decoration: none;
  font-style: italic;
  color: var(--magenta);
}
.diff__col--before .steps li:last-child{ border-bottom: none; }

.steps--after li{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  row-gap: 4px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(246,245,247,.18);
}
.steps--after li:last-child{ border-bottom: none; }
.step-n{
  grid-row: span 2;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 48px; line-height: 1; color: var(--cyan);
}
.step-t{ font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.step-d{ font-size: 13px; opacity: .65; max-width: 36ch; }

.time-card{
  margin-top: auto; padding-top: 28px;
  display: flex; align-items: baseline; gap: 14px;
  border-top: 1px solid rgba(246,245,247,.18);
}
.time-card__k{
  font-family: var(--serif); font-style: italic;
  font-size: 36px; color: var(--yellow);
}
.time-card__v{ font-size: 12px; opacity: .65; max-width: 28ch; }

.diff__bridge{
  display: grid; place-items: center;
  position: relative;
  min-width: 100px;
}
.diff__bridge svg{ width: 100%; max-width: 200px; }
.bridge-path{ stroke-dasharray: 280; stroke-dashoffset: 280; }
.diff__col--before.in ~ .diff__bridge .bridge-path{ animation: draw 1.4s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.diff__bridge-label{
  position: absolute; top: 38%;
  font-family: var(--serif); font-style: italic;
  background: var(--paper-cream);
  padding: 2px 14px;
  font-size: 19px;
  font-weight: 400;
  color: var(--magenta);
  letter-spacing: -.005em;
}

@media (max-width: 980px){
  .diff__grid{
    grid-template-columns: 1fr;
  }
  .diff__bridge{ transform: rotate(90deg); margin: 12px 0; }
}

/* ─────────── PILLARS ─────────── */
.pillars{
  position: relative;
  padding: clamp(100px, 12vw, 160px) var(--pad-x);
  background: var(--paper-warm);
}
.pillars__head{
  max-width: 1100px;
  margin: 0 auto 80px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-variation-settings:"opsz" 144;
}
.pillars__head em{
  font-style: italic; color: var(--magenta);
}
.pillars__grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.pillar{
  background: var(--paper-warm);
  padding: 44px 36px 52px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background .35s;
}
.pillar:hover{ background: var(--paper); }
.pillar__icon{
  width: 116px; height: 116px;
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.pillar__icon svg{ width: 100%; height: 100%; }

.pillar h3{
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings:"opsz" 60;
}
.pillar p{
  font-size: 15px; line-height: 1.55;
  margin: 0; max-width: 36ch;
  opacity: .85;
}
.pillar p em{ color: var(--magenta); font-style: italic; }
.pillar p strong{ font-weight: 600; }
.pillar__foot{
  margin-top: auto; padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; opacity: .65;
}

/* CMYK icon animation */
.cmyk-c{ animation: cmyk-shift 4s ease-in-out infinite; }
.cmyk-m{ animation: cmyk-shift 4s ease-in-out -1s infinite; }
.cmyk-y{ animation: cmyk-shift 4s ease-in-out -2s infinite; }
.cmyk-k{ animation: cmyk-shift 4s ease-in-out -3s infinite; }
@keyframes cmyk-shift{
  0%,100%{ transform: translate(0,0); }
  50%   { transform: translate(-6px,-6px); }
}

.bleed-outer{ animation: dash-spin 18s linear infinite; }
@keyframes dash-spin{ to{ stroke-dashoffset: -28; } }

.press-dot{ animation: press-fall 2.4s ease-in-out infinite; }
@keyframes press-fall{
  0%,100%{ transform: translateY(0); opacity: 1; }
  50%   { transform: translateY(8px); opacity: .5; }
}

@media (max-width: 960px){
  .pillars__grid{ grid-template-columns: 1fr; }
}

/* ─────────── LIBRARY ─────────── */
.library{
  position: relative;
  padding: clamp(100px, 12vw, 160px) 0 80px;
  background: var(--paper-cream);
  overflow: hidden;
}
.library__head{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variation-settings:"opsz" 144, "SOFT" 30;
}
.library__head em{ font-style: italic; color: var(--magenta); }
.library__sub{
  max-width: 60ch;
  padding: 0 var(--pad-x);
  margin: 18px auto 60px;
  max-width: var(--max);
  font-size: 16px; opacity: .75;
  font-family: var(--serif);
  font-weight: 300;
}

/* marquee */
.marquee{
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 28px;
  padding: 30px 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track{
  display: flex;
  gap: 32px;
  width: max-content;
  animation: scroll-left 60s linear infinite;
}
.marquee__track--rev{ animation: scroll-right 70s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes scroll-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* book covers (3D) */
.book3d{
  flex: 0 0 auto;
  width: 220px;
  height: 300px;
  perspective: 1200px;
  cursor: none;
}
.book3d .cover{
  width: 100%; height: 100%;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 22px 20px;
  color: var(--paper);
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(2deg);
  transition: transform .6s var(--ease-out), box-shadow .5s;
  box-shadow:
    -3px 0 0 rgba(13,16,49,.18),
    -10px 0 12px rgba(13,16,49,.12),
    0 30px 40px rgba(13,16,49,.25);
  border-radius: 2px 4px 4px 2px;
}
.book3d:hover .cover{
  transform: rotateY(0) rotateX(0) translateY(-10px);
  box-shadow:
    0 0 0 rgba(13,16,49,0),
    0 22px 32px rgba(13,16,49,.18),
    0 40px 60px rgba(13,16,49,.28);
}
.book3d .cover::after{
  content:''; position:absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, transparent 12%);
  pointer-events: none;
}
.book3d .cv-k{
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 600;
  opacity: .85;
}
.book3d h4{
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings:"opsz" 144;
}
.book3d h4 em{ font-style: italic; }
.book3d .cv-yr{
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  opacity: .7;
}

/* 12 unique covers */
.cover-01 .cover{ background: linear-gradient(135deg, #0D1031 0%, #4A5AA6 100%); }
.cover-01 h4{ font-style: italic; color: var(--paper); }
.cover-02 .cover{ background: #AE419C; }
.cover-02 h4 em{ color: var(--yellow); }
.cover-03 .cover{ background: linear-gradient(180deg, #F6F0E2 0%, #E9DFC4 100%); color: var(--ink); }
.cover-04 .cover{ background: #1A1F4A; }
.cover-04 h4{ color: var(--cyan); }
.cover-05 .cover{ background: var(--yellow); color: var(--ink); }
.cover-05 h4 em{ font-style: normal; }
.cover-06 .cover{ background: linear-gradient(160deg, #6ECAE4 0%, #449BD0 100%); color: var(--ink); }
.cover-07 .cover{ background: var(--paper); color: var(--ink); border:1px solid var(--rule-strong); }
.cover-07 .cover::before{
  content:''; position:absolute; left: 18px; right: 18px; bottom: 64px; height:1px; background: var(--magenta);
}
.cover-08 .cover{ background: linear-gradient(135deg, #4A5AA6, #AE419C); }
.cover-09 .cover{ background: #0D1031; color: var(--yellow); }
.cover-09 h4{ color: var(--paper); }
.cover-10 .cover{ background: linear-gradient(180deg, #F6F0E2 0%, #F6F0E2 65%, #C97AB8 110%); color: var(--ink); }
.cover-10 h4{ color: var(--ink); }
.cover-10 .cv-yr{ color: var(--ink); opacity: .85; }
.cover-11 .cover{ background: #1A1F4A; }
.cover-11 h4 em{ color: var(--magenta); }
.cover-12 .cover{ background: var(--paper); color: var(--ink); }
.cover-12 .cover::before{
  content:''; position: absolute; inset: 12px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.cover-12 h4{ color: var(--ink); font-weight: 400; }
.cover-12 .cv-k, .cover-12 .cv-yr{ color: var(--ink); opacity: .85; font-weight: 600; }

.library__foot{
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; opacity: .75;
}
.dot{ width: 10px; height: 10px; border-radius: 50%; }
.dot--c{ background: var(--cyan); }
.dot--m{ background: var(--magenta); }
.dot--y{ background: var(--yellow); }
.dot--k{ background: var(--ink); }
.library__note{ margin-left: 6px; }

/* ─────────── FINALE ─────────── */
.finale{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(120px, 16vw, 200px) var(--pad-x) 100px;
  text-align: center;
  overflow: hidden;
}
.finale .folio{ position: relative; display: inline-flex; top: auto; left: auto; margin-bottom: 60px; }
.finale__head{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 152px);
  line-height: .97;
  letter-spacing: -.025em;
  margin: 0 auto;
  max-width: 14ch;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.finale__head em{ font-style: italic; color: var(--cyan); }
.finale__head .ink-highlight{ white-space: nowrap; }

.finale .btn{
  margin-top: 50px;
}
.finale__micro{
  margin-top: 22px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 500; opacity: .55;
}
.finale__chips{
  margin: 60px auto 0;
  padding: 0;
  list-style: none;
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 720px;
}
.finale__chips li{
  border: 1px solid rgba(246,245,247,.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
}

/* ─────────── reveal helper ─────────── */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity: 1; transform: none; }

/* ─────────── colophon / footer ─────────── */
.colophon{
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  padding: 60px var(--pad-x) 36px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
}
.colophon__col{ display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.colophon__col strong{ font-weight: 600; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 8px; }
.colophon__col p{ margin: 0; max-width: 32ch; opacity: .7; }
.colophon__col a{ opacity: .8; }
.colophon__col a:hover{ color: var(--magenta); }
.brand--small{ font-size: 16px; gap: 8px; }
.colophon__legal{
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55;
}
@media (max-width: 760px){
  .colophon{ grid-template-columns: 1fr 1fr; }
}

/* ─────────── motion-safe ─────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}