/* ============================================================
   DONATELLA LIGUORI — SENIOR ART DIRECTOR
   base.css — tokens, reset, typographic system, reveal primitives
   ============================================================ */

:root{
  /* palette — white ground, black text, burgundy as secondary text */
  --paper:#FFFFFF;
  --paper-2:#F1F0EC;
  --paper-3:#FFFFFF;
  --ink:#0B0B0A;
  --ink-2:#141412;
  --ink-3:#1F1E1B;
  --burgundy:#A6192E;
  --muted:var(--burgundy);      /* secondary text = burgundy */
  --muted-2:#B3B0AA;
  --line:rgba(10,10,9,.14);
  --line-inv:rgba(233,230,222,.18);

  --font-d:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-s:'Instrument Serif',Georgia,'Times New Roman',serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.83,0,.17,1);

  --gutter:clamp(20px,3.2vw,52px);
  --nav-h:76px;

  --ts:1;   /* text scale — set from the admin: compact .92 · normal 1 · large 1.12 */
}

html[data-tscale="compact"]{ --ts:.92; }
html[data-tscale="large"]{ --ts:1.12; }

/* ---------------- reset ---------------- */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  scrollbar-width:thin;
  scrollbar-color:#8f8c81 transparent;
  scrollbar-gutter:stable;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-d);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html.is-loading, html.modal-open{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
dl,dt,dd{ font-weight:inherit; }
figure{ margin:0; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-thumb{ background:#8f8c81; }
::-webkit-scrollbar-track{ background:transparent; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1.5px solid currentColor; outline-offset:4px; }

/* ---------------- typographic utilities ---------------- */

.type--label{
  font-size:calc(11px * var(--ts)); font-weight:520; letter-spacing:.22em;
  text-transform:uppercase; line-height:1.55;
}
.type--xs{
  font-size:calc(10px * var(--ts)); font-weight:480; letter-spacing:.2em;
  text-transform:uppercase; line-height:1.6;
}
.type--sub{
  font-size:calc(12px * var(--ts)); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.75;
}
.serif, .serif em, em.serif{
  font-family:var(--font-s);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}

/* clearly-editable placeholder token */
.ph{ color:var(--muted); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:12px; left:12px; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  transform:translateY(-180%); transition:transform .3s var(--ease-out);
}
.skip:focus{ transform:none; }

.rule{ display:block; width:46px; height:1px; background:currentColor; opacity:.55; margin:16px 0; }

/* ---------------- masked lines & reveal primitives ----------------
   Reveal states are applied by JS (IntersectionObserver → .in).
   Without JS (html:not(.js)) everything stays visible.           */

.ln{ display:block; overflow:hidden; }
.ln-i{ display:block; }

html.js [data-reveal="lines"] .ln-i{
  transform:translateY(114%);
  transition:transform 1.15s var(--ease-out);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 80ms);
}
html.js [data-reveal="lines"].in .ln-i{ transform:none; }

html.js [data-reveal="rise"]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out) var(--d,0ms),
             transform 1.05s var(--ease-out) var(--d,0ms);
}
html.js [data-reveal="rise"].in{ opacity:1; transform:none; }

html.js [data-reveal="fade"]{
  opacity:0;
  transition:opacity 1s var(--ease-out) var(--d,0ms);
}
html.js [data-reveal="fade"].in{ opacity:1; }

/* image reveals: clip on the frame, scale-settle on the image.
   The scale uses a keyframe ANIMATION so hover transitions on the
   same property keep working afterwards.                          */
html.js [data-reveal="clip"]{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.25s var(--ease-out) var(--d,0ms);
}
html.js [data-reveal="clip"].in{ clip-path:inset(0 0 0 0); }
html.js [data-reveal="clip"].in img{
  animation:mediaIn 1.7s var(--ease-out) var(--d,0ms) both;
}
@keyframes mediaIn{ from{ transform:scale(1.16); } to{ transform:scale(1); } }

/* letter-level masks (loader wordmark, footer name) */
.lch{ display:inline-block; will-change:transform; }
html.js .js-split .lch{
  transform:translateY(118%); opacity:0;
  transition:transform .85s var(--ease-out) calc(var(--i,0) * 30ms),
             opacity .5s linear calc(var(--i,0) * 30ms);
}

/* ---------------- reduced motion ----------------
   Complex choreography collapses to short opacity fades.
   (JS adds html.reduced as well; these rules cover every case.)  */

@media (prefers-reduced-motion: reduce){
  html.js [data-reveal="lines"] .ln-i,
  html.js .lch{ transform:none !important; transition:none !important; }
  html.js [data-reveal="clip"]{
    clip-path:none !important;
    transition:opacity .4s linear !important;
  }
  html.js [data-reveal="clip"] img{ animation:none !important; }
  html.js [data-reveal="rise"]{ transform:none !important; transition:opacity .4s linear !important; }
  html.js [data-reveal="fade"]{ transition:opacity .4s linear !important; }
  html.js [data-reveal]:not(.in){ opacity:0; }
  html.js [data-reveal]{ transition:opacity .4s linear; }
  .hero__scroll-line i{ animation:none !important; }
  .media:hover, .stage__frame:hover{ animation:none !important; }   /* no micro-distortion */
}