/* ============================================================
   4D AGENCY · TWEAKS OVERRIDES
   Three expressive controls that reshape the FEEL of the design:

   1. data-mood   — violet · brasier · glacier · sang
       Cinematic accent temperature. Reaches every gradient,
       every glow, every italic accent, every track row, every
       avatar, every CTA glow.

   2. data-arc    — alterne · noir · papier
       The dramatic arc of the page. Default alternates paper
       and night. "noir" swallows the whole page in tungsten +
       ink (museum lights off). "papier" lifts every section
       to paper antique (museum lights up).

   3. data-tempo  — largo · andante · agitato
       Editorial tempo. Rescales section rhythm, headline scale,
       padding, line-height and whitespace generosity in one go.
   ============================================================ */


/* ============================================================
   1 · MOOD — chromatic temperature
   ============================================================ */

/* default violet stays via :root vars; only declare overrides */

body[data-mood="brasier"]{
  --violet:      #d9803a;
  --violet-2:    #8c4a18;
  --violet-deep: #3a1e0a;
  --accent-rgb:  217,128,58;
  --accent-rgb-deep: 140,74,24;
  --accent-soft-1: #e8b27a;
  --accent-soft-2: #d9803a;
}
body[data-mood="glacier"]{
  --violet:      #6aa4d6;
  --violet-2:    #2f5e90;
  --violet-deep: #122b46;
  --accent-rgb:  106,164,214;
  --accent-rgb-deep: 47,94,144;
  --accent-soft-1: #b9d8f0;
  --accent-soft-2: #6aa4d6;
}
body[data-mood="sang"]{
  --violet:      #b8423a;
  --violet-2:    #7a1e1a;
  --violet-deep: #36100c;
  --accent-rgb:  184,66,58;
  --accent-rgb-deep: 122,30,26;
  --accent-soft-1: #e0a09a;
  --accent-soft-2: #b8423a;
}
body[data-mood="violet"]{
  --accent-rgb:  117,96,200;
  --accent-rgb-deep: 74,58,138;
  --accent-soft-1: #d6c6f5;
  --accent-soft-2: #7560c8;
}

/* HERO — replace literal rgba(117,96,200,…) with var-driven gradient */
body[data-mood] .hero{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(var(--accent-rgb),.18), transparent 55%),
    radial-gradient(80% 60% at 10% 90%, rgba(var(--accent-rgb-deep),.22), transparent 60%),
    linear-gradient(180deg, #07080d 0%, #0a0c14 60%, #0d0f1a 100%);
}
body[data-mood] .hero h1 .it{
  background: linear-gradient(180deg, var(--accent-soft-1) 0%, var(--accent-soft-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body[data-mood] .bust-slot{ background: none; }
body[data-mood] .bust-slot .light{ display: none; }

/* MARQUEE */
body[data-mood] .marquee-track .sep{ color:var(--violet); }

/* NIGHT / VIOLET PLAYER SECTION */
body[data-mood] .section-night.violet{
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(var(--accent-rgb),.15), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(var(--accent-rgb-deep),.18), transparent 60%),
    #08090f;
}
body[data-mood] .player::before{
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.22), transparent 70%);
}
body[data-mood] .player-cover{
  background:
    radial-gradient(120% 80% at 30% 30%, var(--violet), transparent 60%),
    radial-gradient(120% 80% at 70% 70%, var(--violet-2), transparent 60%),
    #1a1731;
}
body[data-mood] .waveform .bar.played{
  background:linear-gradient(180deg, var(--accent-soft-1), var(--violet));
}
body[data-mood] .track-row.active{ background:rgba(var(--accent-rgb),.10); }
body[data-mood] .track-row.active .idx{ color:var(--violet); }
body[data-mood] .transport .time[style*="--violet"],
body[data-mood] .transport span[style*="violet"]{ color:var(--violet) !important; }

/* WHY US — brutalist */
body[data-mood] .section-brutal .section-head h2 .it{ color:var(--violet); }
body[data-mood] .benefit .num{ color:var(--violet); }
body[data-mood] .testimonial .quote-mark{ color:var(--violet); }
body[data-mood] .stat .v small{ color:var(--violet); }
body[data-mood] .testimonial .byline .avatar{
  background:linear-gradient(135deg, var(--violet), var(--violet-2));
}

/* CTA BAND */
body[data-mood] .cta-band{
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(var(--accent-rgb),.25), transparent 70%),
    var(--ink);
}
body[data-mood] .cta-band .light{
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.4), transparent 70%);
}
body[data-mood] .cta-content h2 .it{ color:var(--accent-soft-1); }

/* BTN hover */
body[data-mood] .btn.primary:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }


/* ============================================================
   2 · ARC — dramatic structure
   ============================================================ */

/* —— MONOLITHE NOIR : tout devient nuit / clair-obscur ——
   paper sections take on the same ink palette; sepia type
   becomes bone; sepia rules become hairlines on ink. */
body[data-arc="noir"] .section-paper{
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(var(--accent-rgb),.12), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(var(--accent-rgb-deep),.14), transparent 60%),
    #0a0b10;
  color:var(--bone);
}
body[data-arc="noir"] .section-paper::before,
body[data-arc="noir"] .section-paper::after{ display:none; }

body[data-arc="noir"] .section-paper .section-head h2{ color:var(--bone); }
body[data-arc="noir"] .section-paper .section-head h2 .it{ color:var(--violet); }
body[data-arc="noir"] .section-paper .section-head .num{ color:var(--off); }
body[data-arc="noir"] .section-paper .section-head .right{ color:var(--off); }

body[data-arc="noir"] .process-grid{ border-top:1px solid var(--hair); }
body[data-arc="noir"] .process-card{ border-right:1px solid var(--hair); }
body[data-arc="noir"] .process-card:last-child{ border-right:none; }
body[data-arc="noir"] .process-card .roman{ color:var(--violet); opacity:.7; }
body[data-arc="noir"] .process-card h3{ color:var(--bone); }
body[data-arc="noir"] .process-card .lede{ color:var(--off); }
body[data-arc="noir"] .process-card p{ color:#bdb4a0; }
body[data-arc="noir"] .process-card .footnote{ color:var(--violet); border-top-color:var(--hair); }
body[data-arc="noir"] .process-tools{ border-top-color:var(--hair); }
body[data-arc="noir"] .process-tools .label{ color:var(--violet); }
body[data-arc="noir"] .process-tools .tool{ border-color:var(--off); color:var(--bone); }

body[data-arc="noir"] .manifesto-body p{ color:var(--bone); }
body[data-arc="noir"] .manifesto-body p.lead{ color:var(--bone); }
body[data-arc="noir"] .manifesto-body .dropcap{ color:var(--violet); }
body[data-arc="noir"] .manifesto-body .pullquote{ color:var(--bone); border-left-color:var(--violet); }
body[data-arc="noir"] .manifesto-body .pullquote em{ color:var(--off); }
body[data-arc="noir"] .manifesto-signature{ border-top-color:var(--hair); }
body[data-arc="noir"] .manifesto-signature .sig{ color:var(--bone); }
body[data-arc="noir"] .manifesto-signature .sig small{ color:var(--off); }

body[data-arc="noir"] .manifesto-image{
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(var(--accent-rgb),.18), transparent 70%),
    linear-gradient(180deg, #14121e 0%, #0a0b10 100%);
  border-color:var(--hair);
}
body[data-arc="noir"] .manifesto-image .placeholder{ border-color:rgba(243,236,220,.22); }
body[data-arc="noir"] .manifesto-image .placeholder span{ color:rgba(243,236,220,.5); }
body[data-arc="noir"] .manifesto-image .corner{ border-color:rgba(243,236,220,.4); }
body[data-arc="noir"] .manifesto-image .caption{ color:var(--off); }

body[data-arc="noir"] .slate-num{ color:var(--violet); }


/* —— MONOLITHE PAPIER : tout devient atelier / lumière musée ——
   dark sections lift onto paper antique; violet glows fade to
   sepia and ochre; chrome reads on paper, not on ink. */
body[data-arc="papier"] body, body[data-arc="papier"]{ background:var(--paper); }

body[data-arc="papier"] .hero{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(var(--accent-rgb),.10), transparent 55%),
    radial-gradient(80% 60% at 10% 90%, rgba(107,74,46,.10), transparent 60%),
    linear-gradient(180deg, #ece4d3 0%, #e6dcc4 60%, #ddd0b0 100%);
  color:var(--sepia-ink);
}
body[data-arc="papier"] .hero::before{
  background: repeating-linear-gradient(180deg, transparent 0 80px, rgba(43,31,18,.02) 80px 81px);
}
body[data-arc="papier"] .hero h1{ color:var(--sepia-ink); }
body[data-arc="papier"] .hero h1 .it{
  background:linear-gradient(180deg, var(--sepia-2), var(--sepia));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
body[data-arc="papier"] .hero-sub{ color:#5a4528; }
body[data-arc="papier"] .hero-meta{ color:var(--sepia); }
body[data-arc="papier"] .hero-meta .line{ background:rgba(43,31,18,.18); }
body[data-arc="papier"] .hero-reassure{ color:var(--sepia); }
body[data-arc="papier"] .btn{ color:var(--sepia-ink); }
body[data-arc="papier"] .btn.primary{ background:var(--sepia-ink); color:var(--paper); border-color:var(--sepia-ink); }
body[data-arc="papier"] .btn.ghost:hover{ background:rgba(43,31,18,.06); }
body[data-arc="papier"] .bust-slot{
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(var(--accent-rgb),.20), transparent 70%),
    linear-gradient(180deg, #ddd0b0 0%, #c4b48f 100%);
  border-color:rgba(43,31,18,.18);
}
body[data-arc="papier"] .bust-slot .placeholder{ border-color:rgba(43,31,18,.22); }
body[data-arc="papier"] .bust-slot .placeholder span{ color:var(--sepia); }
body[data-arc="papier"] .bust-slot .corner{ border-color:var(--sepia); }
body[data-arc="papier"] .hero-meta-right{ color:var(--sepia); }
body[data-arc="papier"] .hero-meta-right .big{ color:var(--sepia-ink); }
body[data-arc="papier"] .scroll-cue{ color:var(--sepia); }
body[data-arc="papier"] .scroll-cue .bar{ background:var(--sepia); }
body[data-arc="papier"] .scroll-cue .bar::after{ background:var(--sepia-ink); }

body[data-arc="papier"] .marquee{
  background:var(--paper-2); border-top-color:rgba(43,31,18,.18); border-bottom-color:rgba(43,31,18,.18);
}
body[data-arc="papier"] .marquee-track{ color:var(--sepia-ink); }
body[data-arc="papier"] .marquee-track .sep{ color:var(--violet); }

body[data-arc="papier"] .section-night,
body[data-arc="papier"] .section-night.violet{
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(var(--accent-rgb),.12), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(107,74,46,.10), transparent 60%),
    var(--paper-2);
  color:var(--sepia-ink);
}
body[data-arc="papier"] .section-night .section-head h2{ color:var(--sepia-ink) !important; }
body[data-arc="papier"] .section-night .section-head h2 .it{ color:var(--violet) !important; background:none !important; -webkit-text-fill-color:initial !important; }
body[data-arc="papier"] .section-night .section-head .num{ color:var(--sepia) !important; }
body[data-arc="papier"] .section-night .section-head .right{ color:var(--sepia-ink) !important; }

body[data-arc="papier"] .player{
  background:linear-gradient(180deg, #f4ecd7 0%, #ebe0c5 100%);
  border-color:rgba(43,31,18,.18);
  color:var(--sepia-ink);
}
body[data-arc="papier"] .player-info h3{ color:var(--sepia-ink); }
body[data-arc="papier"] .player-info .credit{ color:var(--sepia); }
body[data-arc="papier"] .player-info .meta{ color:var(--sepia); }
body[data-arc="papier"] .player-info .eyebrow{ color:var(--sepia); }
body[data-arc="papier"] .waveform .bar{ background:rgba(43,31,18,.18); }
body[data-arc="papier"] .play-btn{ border-color:var(--sepia-ink); color:var(--sepia-ink); }
body[data-arc="papier"] .play-btn:hover{ background:var(--sepia-ink); color:var(--paper); }
body[data-arc="papier"] .transport .time{ color:var(--sepia); }
body[data-arc="papier"] .track-list{ border-top-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .track-row{ border-bottom-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .track-row:hover{ background:rgba(43,31,18,.04); }
body[data-arc="papier"] .track-row.active .name{ color:var(--sepia-ink); }
body[data-arc="papier"] .track-row .style{ color:var(--sepia); }
body[data-arc="papier"] .track-row .idx,
body[data-arc="papier"] .track-row .bpm,
body[data-arc="papier"] .track-row .dur{ color:var(--sepia); }

body[data-arc="papier"] .section-brutal{
  background:var(--paper); color:var(--sepia-ink);
}
body[data-arc="papier"] .section-brutal .section-head h2{ color:var(--sepia-ink); }
body[data-arc="papier"] .section-brutal .section-head .right{ color:var(--sepia); }
body[data-arc="papier"] .benefits{ border-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .benefit{ border-right-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .benefit:hover{ background:rgba(43,31,18,.04); }
body[data-arc="papier"] .benefit h4{ color:var(--sepia-ink); }
body[data-arc="papier"] .benefit p{ color:#5a4528; }
body[data-arc="papier"] .benefit .icon svg{ stroke:var(--sepia); }
body[data-arc="papier"] .testimonial{ background:var(--paper-2); border-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .testimonial p{ color:var(--sepia-ink); }
body[data-arc="papier"] .testimonial .byline .who{ color:var(--sepia-ink); }
body[data-arc="papier"] .testimonial .byline .what{ color:var(--sepia); }
body[data-arc="papier"] .stat{ background:var(--paper-2); border-color:rgba(43,31,18,.18); }
body[data-arc="papier"] .stat .l{ color:var(--sepia); }

body[data-arc="papier"] .cta-band{
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(var(--accent-rgb),.18), transparent 70%),
    var(--paper-2);
  color:var(--sepia-ink);
}
body[data-arc="papier"] .cta-content h2{ color:var(--sepia-ink); }
body[data-arc="papier"] .cta-content p{ color:var(--sepia); }
body[data-arc="papier"] .cta-content .eyebrow{ color:var(--sepia); }

body[data-arc="papier"] .footer{
  background:var(--paper-3); color:var(--sepia-ink); border-top-color:rgba(43,31,18,.18);
}
body[data-arc="papier"] .footer-top h5{ color:var(--sepia-ink); }
body[data-arc="papier"] .footer-brand{ color:var(--sepia-ink); }
body[data-arc="papier"] .footer-brand small{ color:var(--sepia); }
body[data-arc="papier"] .footer-top{ border-bottom-color:rgba(43,31,18,.18); }


/* ============================================================
   3 · TEMPO — editorial rhythm
   ============================================================ */

body[data-tempo="largo"]{
  --t-pad: 1.35;
  --t-mb-head: 1.4;
  --t-h-mult: 1.12;
  --t-line: 1.65;
  --t-track: .02em;
  --t-marq: 1.2;
}
body[data-tempo="andante"]{
  --t-pad: 1; --t-mb-head: 1; --t-h-mult: 1; --t-line: 1.5; --t-track: 0; --t-marq: 1;
}
body[data-tempo="agitato"]{
  --t-pad: .62;
  --t-mb-head: .55;
  --t-h-mult: .92;
  --t-line: 1.32;
  --t-track: -.015em;
  --t-marq: .78;
}

body[data-tempo] .section-paper,
body[data-tempo] .section-night,
body[data-tempo] .section-brutal{
  padding-top: calc(140px * var(--t-pad));
  padding-bottom: calc(160px * var(--t-pad));
}
body[data-tempo] .cta-band{ padding: calc(120px * var(--t-pad)) 0; }
body[data-tempo] .hero{ padding: calc(140px * var(--t-pad)) 0 calc(80px * var(--t-pad)); }
body[data-tempo] .section-head{ margin-bottom: calc(90px * var(--t-mb-head)); }

body[data-tempo] .hero h1{
  font-size: clamp(40px, calc(6vw * var(--t-h-mult)), 130px);
  letter-spacing: var(--t-track);
}
body[data-tempo] .section-head h2{
  font-size: clamp(48px, calc(7vw * var(--t-h-mult)), 140px);
  letter-spacing: var(--t-track);
}
body[data-tempo] .cta-content h2{
  font-size: clamp(56px, calc(8vw * var(--t-h-mult)), 168px);
  letter-spacing: var(--t-track);
}
body[data-tempo] .player-info h3{ font-size: calc(54px * var(--t-h-mult)); }
body[data-tempo] .process-card h3{ font-size: calc(42px * var(--t-h-mult)); }
body[data-tempo] .benefit h4{ font-size: calc(34px * var(--t-h-mult)); }
body[data-tempo] .manifesto-body p{ line-height: var(--t-line); }
body[data-tempo] .manifesto-body p.lead{ line-height: calc(var(--t-line) - .1); }
body[data-tempo] .process-card p{ line-height: var(--t-line); }
body[data-tempo] .benefit p{ line-height: var(--t-line); }

body[data-tempo] .marquee{ padding: calc(22px * var(--t-marq)) 0; }
body[data-tempo] .marquee-track{ font-size: calc(34px * var(--t-h-mult)); gap: calc(60px * var(--t-marq)); }

/* AGITATO — push toward brutal compression */
body[data-tempo="agitato"] .hero{ min-height: 88vh; }
body[data-tempo="agitato"] .hero h1{ line-height:.82; }
body[data-tempo="agitato"] .section-head h2{ line-height:.84; }
body[data-tempo="agitato"] .process-card{ padding: 32px 24px 36px; }
body[data-tempo="agitato"] .process-card .roman{ font-size:64px; margin-bottom:20px; }
body[data-tempo="agitato"] .benefit{ padding: 32px 22px 40px; }
body[data-tempo="agitato"] .benefit .num{ margin-bottom: 22px; }
body[data-tempo="agitato"] .manifesto-grid{ gap: 50px; }
body[data-tempo="agitato"] .manifesto-image{ height: 540px; }
body[data-tempo="agitato"] .manifesto-body .pullquote{ margin: 30px 0; font-size: 32px; }
body[data-tempo="agitato"] .testimonial{ padding: 32px 30px; }
body[data-tempo="agitato"] .testimonial p{ font-size:22px; }
body[data-tempo="agitato"] .testimonial .quote-mark{ font-size: 86px; }
body[data-tempo="agitato"] .stat{ padding: 18px 22px; }
body[data-tempo="agitato"] .stat .v{ font-size: 44px; }
body[data-tempo="agitato"] .player{ padding: 26px; }
body[data-tempo="agitato"] .player-cover{ width: 180px; height: 180px; }
body[data-tempo="agitato"] .waveform{ height: 42px; margin-top: 22px; }

/* LARGO — luxurious museum air */
body[data-tempo="largo"] .hero{ min-height: 110vh; }
body[data-tempo="largo"] .hero h1{ line-height:.9; }
body[data-tempo="largo"] .section-head h2{ line-height:.92; }
body[data-tempo="largo"] .process-card{ padding: 60px 40px 64px; }
body[data-tempo="largo"] .process-card .roman{ font-size:116px; margin-bottom:48px; }
body[data-tempo="largo"] .benefit{ padding: 64px 36px 72px; }
body[data-tempo="largo"] .benefit .num{ margin-bottom: 52px; }
body[data-tempo="largo"] .manifesto-grid{ gap: 110px; }
body[data-tempo="largo"] .manifesto-image{ height: 760px; }
body[data-tempo="largo"] .manifesto-body .pullquote{ margin: 70px 0; font-size: 46px; }
body[data-tempo="largo"] .testimonial{ padding: 64px 56px; }
body[data-tempo="largo"] .testimonial p{ font-size: 30px; }
body[data-tempo="largo"] .testimonial .quote-mark{ font-size: 144px; }
body[data-tempo="largo"] .player{ padding: 48px; }
body[data-tempo="largo"] .player-cover{ width: 260px; height: 260px; }
body[data-tempo="largo"] .waveform{ height: 70px; margin-top: 40px; }
body[data-tempo="largo"] .hero-sub{ font-size: 26px; line-height: 1.55; max-width: 600px; }
body[data-tempo="largo"] .cta-content p{ font-size: 26px; max-width: 720px; }

/* Reset tempo overrides on small screens so responsive rules win */
@media (max-width: 768px){
  body[data-tempo] .section-paper,
  body[data-tempo] .section-night,
  body[data-tempo] .section-brutal{ padding-top:80px; padding-bottom:100px; }
  body[data-tempo] .cta-band{ padding:80px 0; }
  body[data-tempo] .hero{ padding:110px 0 60px; }
  body[data-tempo] .section-head{ margin-bottom:50px; }
  body[data-tempo] .hero h1,
  body[data-tempo] .section-head h2{ font-size:clamp(36px,10vw,72px); letter-spacing:0; }
  body[data-tempo="largo"] .player-cover{ width:100%; height:180px; }
  body[data-tempo="largo"] .testimonial{ padding:32px 24px; }
  body[data-tempo="largo"] .waveform{ height:54px; margin-top:30px; }
}
@media (max-width: 480px){
  body[data-tempo] .section-paper,
  body[data-tempo] .section-night,
  body[data-tempo] .section-brutal{ padding-top:60px; padding-bottom:72px; }
  body[data-tempo] .cta-band{ padding:60px 0; }
  body[data-tempo] .hero{ padding:90px 0 50px; }
  body[data-tempo] .hero h1,
  body[data-tempo] .section-head h2{ font-size:clamp(34px,11vw,54px); }
  body[data-tempo] .marquee-track{ font-size:24px; gap:30px; }
}