/* ==========================================================================
   Drummer Records — Marketing redesign layer  (site.css)
   --------------------------------------------------------------------------
   Art-direction pass over tokens.css. Concept: "The Programme" — the label's
   catalogue and tour booklet, set as a cinematic noir editorial. Typefaces
   are unchanged (Newsreader display, Inter Tight UI); this file refines scale,
   rhythm, grid and art direction only. Linked by the five marketing pages
   after tokens.css. Never linked by openers.html / form.html.
   ========================================================================== */

:root{
  /* refined rhythm — larger display, tighter leading, wider page */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5.2vw, 5rem);

  --fs-display: clamp(3rem, 8.4vw, 7.2rem);
  --fs-hero:    clamp(2.7rem, 6.6vw, 5.6rem);
  --fs-h1:      clamp(2.3rem, 5.4vw, 4rem);
  --fs-h2:      clamp(1.85rem, 3.6vw, 3rem);
  --lh-tight:   0.98;

  /* photographic ink — warm amber pulled from the Safety covers, used only
     as a hairline / detail accent so the blue brand accent still leads */
  --amber: #d9a15a;
  --ember: #b8452f;

  --rule:        rgba(143,193,255,.20);
  --rule-warm:   rgba(217,161,90,.34);
  --ink-scrim:   rgba(6,5,11,.72);

  --sp-section:  clamp(4.5rem, 9vw, 8.5rem);
}

/* ── page frame ─────────────────────────────────────────────────────────── */
body{ position:relative; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); position:relative; }
.section + .section{ border-top:1px solid var(--border-faint); }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }

/* the spine: a fixed vertical catalogue label down the left edge (desktop) */
.spine{
  position:fixed; left:.5rem; top:0; bottom:0; z-index:40; width:2.2rem;
  display:none; align-items:center; justify-content:center; pointer-events:none;
}
.spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-ui); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted-dim); white-space:nowrap;
}
.spine span b{ color:var(--accent); font-weight:500; }
@media(min-width:1200px){ .spine{ display:flex; } }

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(9,8,14,.86), rgba(9,8,14,.52));
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid var(--border-faint);
}
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand img{ height:26px; width:auto; display:block; transition:opacity .2s var(--ease); }
.brand:hover img{ opacity:.8; }
.brand__cat{
  font-family:var(--font-ui); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-dim); padding-left:.7rem; border-left:1px solid var(--border); display:none;
}
@media(min-width:640px){ .brand__cat{ display:inline; } }
@media(max-width:520px){ .brand img{ height:23px; } }

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2.1vw,1.9rem); }
.nav a{
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:400; color:var(--muted); position:relative; padding-block:.4rem;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--warm-white); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:.15rem; height:1px;
  background:var(--accent); transition:right .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav__cta{
  color:var(--warm-white)!important; border:1px solid var(--border-strong);
  padding:.5em 1.05em!important; border-radius:100px; letter-spacing:.14em;
}
.nav__cta:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.nav__cta::after{ display:none; }

.nav-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius:var(--radius);
  color:var(--warm-white); font-family:var(--font-ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.55em .8em; cursor:pointer; }
@media(max-width:880px){
  .nav{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(9,8,14,.98); backdrop-filter:blur(20px); border-bottom:1px solid var(--border);
    padding:var(--s-2) var(--gutter) var(--s-4); transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .26s var(--ease), transform .26s var(--ease); }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--border-faint); font-size:.85rem; letter-spacing:.1em; }
  .nav a::after{ display:none; }
  .nav__cta{ margin-top:var(--s-2); text-align:center; }
  body.nav-open .nav{ opacity:1; pointer-events:auto; transform:none; }
  .nav-toggle{ display:inline-block; }
}

/* ── catalogue index — the section-header signature ─────────────────────── */
.index{ display:flex; align-items:center; gap:1rem; margin-bottom:var(--s-3);
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.index__no{ color:var(--accent); font-variant-numeric:tabular-nums; }
.index__label{ color:var(--warm-white); }
.index__rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--rule),transparent); min-width:1.5rem; }
.index__meta{ color:var(--muted-dim); }

.display{ font-family:var(--font-display); font-weight:400; line-height:var(--lh-tight);
  letter-spacing:-.018em; color:var(--warm-white); text-wrap:balance; margin:0; }
.display em{ font-style:italic; color:var(--accent); }
.display--xl{ font-size:var(--fs-display); }
.display--lg{ font-size:var(--fs-h1); }
.display--md{ font-size:var(--fs-h2); }

.lede{ font-family:var(--font-ui); font-weight:300; font-size:clamp(1.1rem,1.7vw,1.32rem);
  line-height:1.5; color:var(--cream); max-width:56ch; }
.lede em{ font-style:italic; color:var(--warm-white); }
.dim{ color:var(--muted); }

/* small mono label */
.tag{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500; }
.tag--muted{ color:var(--muted); }

/* inline arrow link */
.arrowlink{ font-family:var(--font-ui); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm-white); display:inline-flex; align-items:center; gap:.5em; }
.arrowlink .arrow{ color:var(--accent); transition:transform .2s var(--ease); }
.arrowlink:hover{ color:var(--accent); }
.arrowlink:hover .arrow{ transform:translateX(4px); }

/* ── film-still frame (cinematic imagery treatment) ─────────────────────── */
.still{ position:relative; overflow:hidden; background:var(--charcoal-2);
  border:1px solid var(--border); border-radius:2px; }
.still > img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease), filter .8s var(--ease); }
.still--tall{ aspect-ratio:3/4; }
.still--port{ aspect-ratio:4/5; }
.still--sq{ aspect-ratio:1/1; }
.still--wide{ aspect-ratio:16/10; }
.still--film{ aspect-ratio:21/9; }
/* cinematic grade: cool the shadows toward brand blue, add scrim + vignette */
.still::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 130% at 50% 30%, transparent 55%, rgba(6,5,11,.5) 100%),
    linear-gradient(0deg, rgba(var(--accent-rgb),.07), transparent 60%); }
a:hover > .still > img, .still--zoom:hover > img{ transform:scale(1.045); }
/* contact-sheet caption bar */
.still__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex;
  align-items:flex-end; justify-content:space-between; gap:1rem; padding:1rem 1.1rem;
  background:linear-gradient(0deg, rgba(6,5,11,.82), transparent);
  font-family:var(--font-ui); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; }
.still__cap b{ color:var(--warm-white); font-weight:500; }
.still__cap span{ color:var(--accent); }
/* corner ticks — the film-frame signature */
.still--tick::before, .still--tick > .tick{ }
.tick{ position:absolute; z-index:3; width:14px; height:14px; pointer-events:none;
  border-color:rgba(var(--accent-rgb),.55); }
.tick.tl{ top:8px; left:8px; border-top:1px solid; border-left:1px solid; }
.tick.tr{ top:8px; right:8px; border-top:1px solid; border-right:1px solid; }
.tick.bl{ bottom:8px; left:8px; border-bottom:1px solid; border-left:1px solid; }
.tick.br{ bottom:8px; right:8px; border-bottom:1px solid; border-right:1px solid; }

/* grain overlay (reuses tokens .grain look, standalone hook) */
.filmgrain::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.4; 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

/* ── buttons (extend tokens) ────────────────────────────────────────────── */
.btn{ font-family:var(--font-ui); font-weight:500; }
.btn--pill{ border-radius:100px; }

/* ── ticker / marquee ───────────────────────────────────────────────────── */
/* Its own full-width band: solid panel, real vertical padding, hairline
   dividers top and bottom so it reads as an intentional strip, never as
   floating text colliding with the hero above or the section below. */
.ticker{ display:block; position:relative; overflow:hidden; isolation:isolate;
  background:var(--deep-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding-block:clamp(1.15rem,2.1vw,1.7rem); user-select:none; }
.ticker::before, .ticker::after{ content:""; position:absolute; top:0; bottom:0; width:11%; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(90deg,var(--deep-2),transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg,var(--deep-2),transparent); }
.ticker__track{ display:flex; align-items:center; width:max-content; white-space:nowrap;
  will-change:transform; animation:ticker 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ flex:none; font-family:var(--font-display); font-style:italic; line-height:1;
  font-size:clamp(1.1rem,2.3vw,1.75rem); color:var(--cream);
  display:inline-flex; align-items:center; padding-inline:1.5em; }
.ticker__item::after{ content:""; display:inline-block; width:.62em; height:.62em;
  margin-left:1.5em; transform:translateY(-.02em);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L15 9 L24 12 L15 15 L12 24 L9 15 L0 12 L9 9 Z' fill='%238fc1ff'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ── colophon (footer) ──────────────────────────────────────────────────── */
.colophon{ position:relative; border-top:1px solid var(--border); margin-top:var(--sp-section);
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(var(--accent-rgb),.09), transparent 55%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.4)); overflow:hidden; }
.colophon .wrap{ padding-block:clamp(4rem,8vw,7rem) var(--s-4); position:relative; z-index:1; }
.colophon__cta{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-display);
  line-height:.92; letter-spacing:-.02em; color:var(--warm-white); margin:0 0 var(--s-5); text-wrap:balance; }
.colophon__cta em{ font-style:italic; color:var(--accent); }
.colophon__grid{ display:grid; grid-template-columns:1fr; gap:var(--s-5);
  border-top:1px solid var(--border-faint); padding-top:var(--s-4); }
@media(min-width:760px){ .colophon__grid{ grid-template-columns:2fr 1fr 1fr; gap:var(--s-6); } }
.colophon h4{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 var(--s-2); }
.colophon a{ display:block; color:var(--cream); font-size:.95rem; margin-bottom:.5rem; }
.colophon a:hover{ color:var(--accent); }
.colophon__note{ color:var(--muted); font-size:.9rem; max-width:34ch; margin:.6rem 0 0; font-weight:300; }
.colophon__bottom{ margin-top:var(--s-5); padding-top:var(--s-3); border-top:1px solid var(--border-faint);
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); justify-content:space-between; align-items:center; }
.colophon__bottom small, .colophon__bottom .label{ color:var(--muted-dim); font-size:.72rem; letter-spacing:.06em; }

/* ── preview flag ───────────────────────────────────────────────────────── */
.preview-flag{ position:fixed; left:0; bottom:0; z-index:80; font-family:var(--font-ui); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--deep); background:var(--accent-soft);
  padding:.4em .8em; border-top-right-radius:var(--radius); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── misc utilities ─────────────────────────────────────────────────────── */
.eyebrow-dot{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-ui);
  font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.eyebrow-dot .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16); }
.hairline{ border:0; height:1px; background:var(--rule); margin:0; }