/* ============================================================
   EVENTRA MEDIA × VOLTER — "Atelier Noir"
   Dark creative-studio system. True black · amber-gold · ivory serif.
   Bold agency scale, kept premium and restrained.
   ============================================================ */

/* ---- Background depth (swapped via [data-palette]) ---------- */
:root,
:root[data-palette="noir"]{
  --paper:    #0A0A0B;   /* true near-black page */
  --paper-2:  #0F0F11;   /* alt section band */
  --night:    #050506;   /* deepest black sections */
  --night-2:  #0C0C0E;
  --field-bg: #131316;
  --ink:      #F4EFE3;   /* ivory headlines */
  --body:     #ABA398;   /* body copy */
  --muted:    #746F65;   /* captions, eyebrows, numerals */
  --line:     color-mix(in srgb, var(--brass) 20%, transparent);
  --line-2:   color-mix(in srgb, var(--brass) 9%, transparent);
  --hair:     rgba(244,239,227,.10);   /* neutral hairline */
  --hair-2:   rgba(244,239,227,.06);
  --on-night:       #F4EFE3;
  --on-night-muted: #8B8377;
  --on-night-brass: var(--brass);
}
:root[data-palette="warm"]{
  --paper:    #0E0D0B;   /* warm near-black */
  --paper-2:  #16140F;
  --night:    #060605;
  --night-2:  #100E0A;
  --field-bg: #1A1711;
  --ink:      #F3EAD3;
  --body:     #C2B9A6;
  --muted:    #847C68;
  --line:     color-mix(in srgb, var(--brass) 22%, transparent);
  --line-2:   color-mix(in srgb, var(--brass) 10%, transparent);
  --hair:     rgba(243,234,211,.11);
  --hair-2:   rgba(243,234,211,.06);
  --on-night:       #F3EAD3;
  --on-night-muted: #948C77;
  --on-night-brass: var(--brass);
}
:root[data-palette="slate"]{
  --paper:    #090B0E;   /* cool ink-black */
  --paper-2:  #0E1116;
  --night:    #050608;
  --night-2:  #0B0E12;
  --field-bg: #11151B;
  --ink:      #EEF1F4;
  --body:     #9BA3AD;
  --muted:    #646C77;
  --line:     color-mix(in srgb, var(--brass) 20%, transparent);
  --line-2:   color-mix(in srgb, var(--brass) 9%, transparent);
  --hair:     rgba(238,241,244,.10);
  --hair-2:   rgba(238,241,244,.06);
  --on-night:       #EEF1F4;
  --on-night-muted: #828A94;
  --on-night-brass: var(--brass);
}

/* ---- Accent (overridden live by Tweaks; amber-gold default) - */
:root{
  --brass:     #F4B81C;   /* bright amber-gold */
  --brass-ink: #F4B81C;   /* accent as text on dark */
  --brass-deep:#C8941A;   /* deeper, for solid-button text contrast */
}

/* ---- Type families (swapped via [data-serif]) --------------- */
:root{
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-tighten: -0.02em;
  --serif-weight: 460;
  --serif-line: 1.0;
}
:root[data-serif="spectral"]{
  --font-serif: "Spectral", Georgia, serif;
  --serif-tighten: -0.008em;
  --serif-weight: 500;
  --serif-line: 1.06;
}
:root[data-serif="playfair"]{
  --font-serif: "Playfair Display", Georgia, serif;
  --serif-tighten: -0.006em;
  --serif-weight: 500;
  --serif-line: 1.04;
}

/* ---- Reset ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--brass); color:#0A0A0B; }

/* ---- Scroll progress line (top) ---------------------------- */
#scrollbar{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:1300;
  background:linear-gradient(90deg, color-mix(in srgb,var(--brass) 50%,transparent), var(--brass));
  pointer-events:none; transition:width .1s linear;
}

/* ---- Layout primitives ------------------------------------- */
.wrap{ width:100%; max-width:1320px; margin-inline:auto; padding-inline:clamp(22px,5vw,72px); }
.wrap-wide{ max-width:1560px; }
.section{ padding-block:clamp(80px,12vw,168px); position:relative; }
.section--tight{ padding-block:clamp(56px,7vw,104px); }
.band{ background:var(--paper-2); }
.night{ background:var(--night); }

/* ---- Eyebrow / kicker labels (uppercase grotesque) --------- */
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass); margin:0; display:inline-flex; align-items:center; gap:11px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--brass); flex:none;
  opacity:.9;
}
.eyebrow.no-rule::before{ display:none; }

/* ---- Section head with giant ghosted numeral --------------- */
.sec-head{
  display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:clamp(20px,3vw,52px); margin-bottom:clamp(40px,5.5vw,76px);
}
.sec-num{
  font-family:var(--font-serif); font-weight:500; font-style:italic;
  font-size:clamp(54px,8vw,128px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--brass) 55%, transparent);
  text-stroke:1px color-mix(in srgb,var(--brass) 55%, transparent);
  flex:none; user-select:none; letter-spacing:-.02em;
}
:root[data-numerals="off"] .sec-num{ display:none; }
:root[data-numerals="off"] .sec-head{ grid-template-columns:1fr; }
.sec-head .titles{ padding-top:clamp(4px,1vw,16px); }
.sec-head .eyebrow{ margin-bottom:18px; }

/* ---- Typographic scale ------------------------------------- */
.display{
  font-family:var(--font-serif); font-weight:var(--serif-weight);
  line-height:var(--serif-line); letter-spacing:var(--serif-tighten);
  color:var(--ink); margin:0;
  font-size:clamp(48px,8.8vw,130px);
  text-wrap:balance;
}
h1,.h1{
  font-family:var(--font-serif); font-weight:var(--serif-weight);
  line-height:var(--serif-line); letter-spacing:var(--serif-tighten);
  color:var(--ink); margin:0; font-size:clamp(42px,6.4vw,90px); text-wrap:balance;
}
h2,.h2{
  font-family:var(--font-serif); font-weight:var(--serif-weight);
  line-height:1.04; letter-spacing:var(--serif-tighten);
  color:var(--ink); margin:0; font-size:clamp(34px,5vw,70px); text-wrap:balance;
}
h3,.h3{
  font-family:var(--font-serif); font-weight:500; line-height:1.12;
  letter-spacing:var(--serif-tighten); color:var(--ink); margin:0;
  font-size:clamp(24px,2.7vw,36px);
}
.serif-it{ font-style:italic; }
.tx-accent{ color:var(--brass); font-style:italic; }
.lead{ font-size:clamp(18px,1.55vw,23px); line-height:1.56; color:var(--body); text-wrap:pretty; }
.dek{ color:var(--muted); }
.kicker{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.small{ font-size:14px; }
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }

/* ---- Buttons / links --------------------------------------- */
.btn{
  --bd:var(--ink);
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 28px; border:1px solid var(--bd); border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .2s ease;
  text-align:left; line-height:1.1;
}
.btn .arr{ transition:transform .35s ease; }
.btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--solid{ background:var(--brass); color:#0A0A0B; border-color:var(--brass); }
.btn--solid:hover{ background:transparent; color:var(--brass); border-color:var(--brass); }
.btn--brass{ background:var(--brass); border-color:var(--brass); color:#0A0A0B; }
.btn--brass:hover{ background:transparent; color:var(--brass); }
.btn--ghost{ border-color:color-mix(in srgb,var(--ink) 30%,transparent); color:var(--ink); }
.btn--ghost:hover{ background:var(--brass); border-color:var(--brass); color:#0A0A0B; }
.btn--lg{ padding:20px 34px; font-size:14px; }
.btn--block{ width:100%; justify-content:space-between; }

.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  padding-bottom:4px; position:relative;
}
.tlink::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
.tlink .arr{ color:var(--brass); transition:transform .3s ease; }
.tlink:hover .arr{ transform:translateX(4px); }
.tlink:hover::after{ background:var(--brass); }

/* circular arrow button (carousel / nav) */
.circ{
  width:54px; height:54px; border:1px solid var(--line); background:transparent;
  border-radius:50%; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .25s, background .25s, color .25s, transform .25s;
}
.circ:hover{ border-color:var(--brass); background:var(--brass); color:#0A0A0B; transform:translateY(-2px); }

/* ---- Marquee strip ----------------------------------------- */
.marquee{
  border-block:1px solid var(--line); background:var(--night);
  overflow:hidden; padding-block:22px; position:relative;
}
:root[data-marquee="off"] .marquee{ display:none; }
.marquee-track{
  display:flex; gap:0; width:max-content;
  animation:marq 38s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .mi{
  display:inline-flex; align-items:center; gap:clamp(28px,3vw,52px);
  padding-right:clamp(28px,3vw,52px);
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(26px,3vw,44px); color:var(--ink); white-space:nowrap;
}
.marquee-track .mi span{ color:var(--ink); }
.marquee-track .mi::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--brass); flex:none;
}
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- Art-directed placeholder panels (look finished) ------- */
.ph{
  position:relative; overflow:hidden; background:var(--night);
  border-radius:4px; isolation:isolate;
}
.ph::before{   /* duotone amber→black wash */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(125% 95% at 20% 8%, color-mix(in srgb, var(--brass) 34%, transparent), transparent 52%),
    radial-gradient(135% 130% at 92% 98%, rgba(0,0,0,.65), transparent 60%),
    linear-gradient(155deg, var(--night-2) 0%, var(--night) 58%, #050505 100%);
}
.ph::after{   /* fine engraved diagonal texture */
  content:""; position:absolute; inset:0; z-index:1; opacity:.55;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
  mix-blend-mode:soft-light;
}
.ph[data-soft]::before{
  background:
    radial-gradient(120% 100% at 78% 14%, color-mix(in srgb, var(--brass) 28%, transparent), transparent 56%),
    linear-gradient(165deg, var(--night-2) 0%, var(--night) 60%, #070706 100%);
}
/* monogram watermark — reads as styled art, not a missing image */
.ph > .ph-mono{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-style:italic; font-size:clamp(60px,9vw,150px);
  color:color-mix(in srgb, var(--brass) 14%, transparent); line-height:1; user-select:none;
}
.ph > .ph-tag{
  position:absolute; left:18px; bottom:15px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass);
}
.ph > .ph-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 20%,transparent);
}
.ph > .ph-cap{
  position:absolute; left:18px; right:18px; top:16px; z-index:3;
  font-family:var(--font-serif); font-size:clamp(16px,1.4vw,20px); font-style:italic;
  color:rgba(244,239,227,.86); line-height:1.2; max-width:84%;
}

/* ---- Reveal animation -------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .95s cubic-bezier(.2,.6,.2,1), transform .95s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- Grain overlay (tweak) --------------------------------- */
#grain{ display:none; }
:root[data-grain="on"] #grain{
  display:block; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}