/* home.css — the marketing homepage (NTI-379). Loaded ONLY on / (the timeline/CDP keep site.css).
   TradingView-shaped: this page sells the product; the product is the timeline at /timeline.
   Its own design system (style guide): Newsreader + Inter, orange/black/cream. */

/* ---- design tokens (the style guide) ------------------------------------------------------ */
:root{
  --ink:#0C0C0E;            /* near-black — hero / the-line / footer grounds */
  --paper:#F6F2EC;          /* off-white — light sections */
  --accent:#E4572E;         /* orange — the one accent (links, CTAs, "you are here") */
  --grey:#8B8B8D;           /* secondary text on light */
  --rule:#D9D6D2;           /* hairlines, card borders */
  --paper-dim:#c9c3b6;      /* muted text on dark grounds */

  --serif:"Newsreader",Georgia,"Times New Roman",serif;   /* display */
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw:1600px;            /* container cap — fluid up to here, then centered, so large desktops
                              don't look boxed-in at 1200 (style guide's 12-col grid still applies within) */
  --gutter:clamp(24px,4vw,64px);   /* roomier side gutters as the viewport grows */
  /* 8px spacing base */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:64px; --s8:80px; --s10:96px; --s16:128px;
}

/* ---- reset / base -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.home{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;                     /* belt against any sideways nudge (see mobile-scroll memory) */
}
body.home img{max-width:100%}   /* NOT height:auto — it outranked the fixed logo heights; the waveform/ruler set their own */
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---- type scale ---------------------------------------------------------------------------- */
.h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,7vw,72px);line-height:1.05;letter-spacing:-.02em;margin:0}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,40px);line-height:1.15;letter-spacing:-.01em;margin:0}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,28px);line-height:1.25;letter-spacing:-.01em;margin:0}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.5;margin:0;font-weight:400}   /* font-weight so a heading (e.g. <h3 class="lead">) wearing this keeps the body-copy look, not UA bold */
/* Inline <h1>/<h2> that live inside a .lead line for SEO — reset to inherit the lead's font, weight,
   size, colour and flow so the heading semantics don't change the look. */
.lead-hd{display:inline;font:inherit;color:inherit;margin:0}
.label{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.accent{color:var(--accent)}
.muted{color:var(--grey)}

/* ---- buttons ------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 24px;border-radius:4px;
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#c9431f}
.btn-text{display:inline-flex;align-items:center;gap:.5em;padding:0;height:auto;
  color:var(--accent);font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none}
.btn-text:hover{gap:.8em}
.arw{display:inline-block;transform:scaleX(1.5)}   /* elongate the arrow 50% horizontally */
.btn .arw,.btn-text .arw{transition:transform .15s}
.btn:hover .arw,.btn-text:hover .arw{transform:scaleX(1.5) translateX(3px)}

/* ---- site header (over the black hero) ----------------------------------------------------- */
/* Sticky header: fixed so it rides above every section. Its ground is --ink, seamless over the dark
   hero at rest; once the reader scrolls onto a light section, .scrolled paints the bar + a hairline/
   shadow so the nav stays legible. The hero reserves its height via padding-top, so fixed (not sticky)
   keeps the layout unchanged. The footer stays in normal flow — it just floats up at the page end. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:10px;background:var(--ink);
  transition:box-shadow .2s ease}
.site-nav.scrolled{box-shadow:0 3px 8px rgba(0,0,0,.35)}   /* docked keeps its full height + padding — only the shadow appears */
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{height:64px;width:auto}   /* full logo+wordmark lockup (128px 2x export, shown at 64px) */
.brand .name{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:28px;min-width:0}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current]{color:var(--accent);opacity:1}
.nav-toggle{display:none}   /* mobile-only: the logo mark → ☰ → ✕ menu button (see the 860px block) */

/* homepage composer search (NTI-379) — a TradingView-style typeahead over the dark hero */
.hp-search{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:150px;
  width:clamp(190px,20vw,250px);color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 14px;transition:background .15s,border-color .15s}
.hp-search:focus-within{background:rgba(255,255,255,.13);border-color:var(--accent)}
.hp-search-ic{width:15px;height:15px;flex:0 0 auto;color:var(--paper-dim)}
.hp-q{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:var(--sans);font-size:14px;letter-spacing:.01em}
.hp-q::placeholder{color:rgba(246,242,236,.5)}
.hp-slash{flex:0 0 auto;font-family:var(--sans);font-size:11px;color:rgba(246,242,236,.55);
  border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:0 6px;line-height:1.5}
.hp-search:focus-within .hp-slash{display:none}
.hp-results{position:absolute;top:calc(100% + 10px);right:0;left:auto;z-index:30;
  width:min(400px,calc(100vw - 2*var(--gutter)));   /* wider than the input so names don't clip; anchored
  to the input's right edge and capped to the viewport so it never overflows the page */
  background:#171613;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px 6px 12px;   /* extra bottom pad mirrors the header inset at top */
  box-shadow:0 18px 50px rgba(0,0,0,.5);max-height:min(60vh,420px);overflow-y:auto}
.hp-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:8px;cursor:pointer}
.hp-results-head{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-dim);padding:8px 12px 6px}   /* hint: composers only */
.hp-result[aria-selected="true"]{background:rgba(228,87,46,.18)}
.hp-result[aria-selected="true"] .hp-r-name{font-weight:500}   /* the default (Enter) row reads bolder */
.hp-r-name{color:var(--paper);font-family:var(--serif);font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-r-yrs{color:var(--paper-dim);font-family:var(--sans);font-size:12px;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ---- section rhythm ------------------------------------------------------------------------ */
.sec{padding:var(--s4) 0}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-dark .muted{color:var(--paper-dim)}

/* 1 · HERO --------------------------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding-top:118px;padding-bottom:104px}
/* century ruler pinned 20px above the hero's bottom, aligned to the content container */
.hero-axis{position:absolute;left:0;right:0;bottom:20px;z-index:4}
.hero-axis img{display:block;width:100%;height:auto}
/* 70vh hero via the wrap's min-height (hero padding 118+104=222), so .wrap stays a normal block —
   max-width/margin:auto keep the text left-aligned with the logo, ruler and section 2. */
.hero>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s6);align-items:center;min-height:calc(70vh - 222px);padding-top:30px}
.hero-copy .h1{color:#fff}
.hero-copy .lead{margin-top:var(--s3);max-width:40ch;color:var(--paper-dim);font-size:19px}   /* no clamp — match hero-modes */
.hero-modes{display:flex;gap:14px;align-items:center;margin-top:var(--s4);
  font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:.08em;text-transform:uppercase}
.hero-modes .btn-text{font-size:19px}   /* the Explore link matches the rest of the line */
.hero-modes .dot{color:var(--grey)}
.hero-viz{min-height:440px}
/* Evocative waveform (static PNG), TradingView-style full-bleed: pulled OUT of the grid column
   (absolute → runs wide, bleeds off the right edge; the hero's overflow:hidden clips the off-screen
   part so there's no side-scroll). Headline sits above it via z-index. Source is black-on-white, so
   invert to read light on the dark hero — if you export light/orange on a TRANSPARENT bg, drop the filter. */
.hero-copy{position:relative;z-index:2}
.hero-wave-link{display:contents}   /* link wrapper: no box, so the image keeps its absolute positioning */
.hero-wave{position:absolute;z-index:1;top:46%;right:-3vw;transform:translateY(-50%);
  width:min(68vw,1200px);height:auto;opacity:.92;cursor:pointer}   /* clickable → /waveform; sits BEHIND .hero-copy (z-index:2), so the Explore→/timeline link stays on top */

/* 2 · CONTEXT ------------------------------------------------------------------------------ */
.two-col{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s8);align-items:start}
.context h2 .accent{display:block}
.context .lead{margin-top:var(--s3);max-width:36ch;color:var(--ink)}
.context .btn-text{margin-top:var(--s4)}
.context-viz{min-height:260px}
.context-img-link{display:contents}   /* link wrapper: no box, so the image keeps its layout/centering */
.context-img{display:block;width:100%;height:auto;max-width:640px;margin-inline:auto;cursor:pointer}

.rule-sep{border:0;border-top:1px solid var(--rule);max-width:var(--maxw);margin:var(--s8) auto 0}

/* 3 · YOUR MUSIC --------------------------------------------------------------------------- */
.your-music{text-align:center}
.your-music .h2{margin-bottom:var(--s2)}
.cards{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s4);align-items:stretch;
  text-align:left;margin-top:var(--s6)}
.card-plus{align-self:center;color:var(--grey);font-size:24px;font-weight:300}
.card .card-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.card-ic{width:32px;height:32px;flex:0 0 auto}   /* radio / concert icons */
.card .card-meta{color:var(--grey);font-size:13px;margin:6px 0 var(--s3)}
.card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s3);
  border:1px solid var(--rule);border-radius:4px;padding:var(--s3);background:#fff}
/* preview variant: a real program screenshot fills the framed box */
.card-body.is-preview{display:block;padding:0;border:0}   /* no box around the whole card — each image carries its own frame; no overflow:hidden so the drop shadows show */
.card-preview-link{display:block;line-height:0}   /* the preview image is a link to the program */
.card-preview{width:100%;height:auto;display:block}
/* each screenshot carries its own frame: hairline border + a soft 3px drop shadow. Applies to the wide
   desktop shot and to each of the two stacked mobile halves (same treatment, so they read as a set). */
.card-preview,.card-preview-half{border:1px solid var(--rule);border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.14)}
.card-preview-split{display:none}   /* desktop shows the wide split screenshot; phones swap to the two portrait halves (see the 560px query) — both live in the SAME link, so a tap on either goes to the program */
.card-list{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9}
.card-list .t{color:var(--grey);font-variant-numeric:tabular-nums;padding-right:10px}
.card .card-foot{margin-top:var(--s3)}
.card .card-foot .lead{font-size:15px}
.card .card-foot .accent{display:block}
.card .btn-text{margin-top:var(--s3)}

/* 4 · THE LINE ----------------------------------------------------------------------------- */
.the-line .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s6);align-items:center}
.the-line .h2{color:#fff}
.the-line .lead{margin-top:var(--s3);max-width:34ch}
.line-viz{position:relative}
.line-viz img{width:100%;height:auto;display:block}

/* 5 · CTA ---------------------------------------------------------------------------------- */
.cta{text-align:center}
.cta .h2{margin-bottom:var(--s4);font-family:"EB Garamond",Georgia,serif;font-style:italic;font-weight:500}
.cta .fine{margin-top:var(--s3);color:var(--grey);font-size:14px}

/* 6 · FOOTER ------------------------------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--paper);padding:var(--s4) 0}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s2) var(--s4)}
.foot-nav{display:contents}   /* semantic <nav> landmark without becoming a grid cell — its 4 columns stay in the grid */
.foot-brand img{height:34px;filter:none}
.foot-quote{color:var(--paper-dim);font-family:var(--serif);font-size:16px;line-height:1.5;margin-top:var(--s3);max-width:24ch}
.foot-quote cite{display:block;font-style:normal;font-size:13px;margin-top:8px;color:var(--grey)}
.foot-col h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:0 0 var(--s2)}
.foot-col a{display:block;color:var(--paper);text-decoration:none;font-size:14px;line-height:2.1;opacity:.85}
.foot-col a:hover{opacity:1;color:var(--accent)}
.foot-legal{grid-column:1/-1;display:flex;gap:var(--s3);align-items:center;
  border-top:1px solid #2a2a2e;padding-top:var(--s3);color:var(--grey);font-size:12px}
.foot-legal a{color:var(--grey);text-decoration:none}
.foot-legal .spacer{flex:1}

/* ---- viz primitives (mini-timelines: lifespan lines + points) ------------------------------ */
.mini svg{width:100%;height:auto;display:block;overflow:visible}
.mini .life{stroke:var(--ink);stroke-width:1.5}
.mini .life.hot{stroke:var(--accent)}
.mini text{font-family:var(--sans);font-size:11px;fill:var(--ink)}
.mini text.hot{fill:var(--accent)}
.mini .pt{fill:var(--ink)}
.mini .pt.hot{fill:var(--accent)}
.mini .axis{stroke:var(--rule);stroke-width:1}
.mini .axl{fill:var(--grey);font-size:10px}
.sec-dark .mini .life{stroke:var(--paper)}
.sec-dark .mini .pt{fill:var(--paper)}
.sec-dark .mini text{fill:var(--paper)}

/* ---- responsive ---------------------------------------------------------------------------- */
@media (max-width:860px){
  .site-nav{padding-top:0}
  .brand{display:none}                                        /* the logo lives in the .nav-toggle now */
  .nav-right{flex:1;justify-content:flex-end;gap:0;min-width:0}

  /* ── The logo mark IS the menu button: logo ⇄ ☰ ⇄ ✕ ─────────────────────────────────────────── */
  .nav-toggle{display:block;position:relative;width:44px;height:44px;padding:0;border:0;background:none;
    cursor:pointer;flex:0 0 auto;z-index:2;perspective:240px;transition:opacity .2s ease}   /* perspective → the logo rotateY reads as a 3D flip */
  .site-nav:has(.hp-search:focus-within) .nav-toggle{opacity:0;pointer-events:none}   /* search takes over → logo gets out of the way */
  .nt-logo{position:absolute;inset:0;margin:auto;width:38px;height:38px;object-fit:contain;
    transition:transform .18s ease, opacity .12s ease}
  .nt-icon{position:absolute;left:50%;top:50%;width:24px;height:16px;transform:translate(-50%,-50%);
    opacity:0;transition:opacity .12s ease}
  .nt-icon span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff;
    transition:transform .5s ease}
  .nt-icon span:nth-child(1){top:2px}
  .nt-icon span:nth-child(2){bottom:2px}
  .nav-flip .nt-logo{opacity:0;transform:rotateY(90deg)}      /* logo flips out … */
  .nav-flip .nt-icon{opacity:1}                               /* … ☰ flips in (quick) */
  .nav-open .nt-icon span:nth-child(1){transform:translateY(5px) rotate(45deg)}   /* ☰ → ✕ (0.5s) */
  .nav-open .nt-icon span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

  /* ── The drop-down menu (reuses .nav-links; same items as desktop, stacked) ─────────────────── */
  .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--ink);max-height:0;overflow:hidden;transition:max-height .5s ease}
  .nav-open .nav-links{max-height:80vh;border-top:1px solid rgba(255,255,255,.14)}
  /* Items left-aligned under the ✕ (gutter + the icon's inset in the 44px toggle); dividers match the
     brighter line under the ✕. */
  .nav-links a{padding:18px var(--gutter) 18px calc(var(--gutter) + 10px);font-size:13px;opacity:.92;
    border-bottom:1px solid rgba(255,255,255,.14)}
  body.nav-locked{overflow:hidden}                            /* freeze the page behind the open menu */
  /* Lightbox scrim: dims the page behind the open menu so it stops fighting the content. Inside .site-nav
     (z-20) but below the header/menu, so those stay crisp while everything else darkens. Tap to close. */
  .site-nav .wrap{position:relative;z-index:1}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;z-index:0;
    transition:opacity .4s ease}
  .nav-open .nav-scrim{opacity:1;pointer-events:auto}

  /* ── Search = just the magnifier at rest; tapping it TAKES OVER the row (grows left to full width,
     over the logo). Absolute + right-anchored so the width animates and the magnifier rides its left
     edge; the input is 16px so iOS never zooms in, and its text stays hidden until it takes over. ── */
  .hp-search{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:5;
    width:44px;height:44px;min-width:0;padding:0;background:none;border:0;
    transition:width .3s ease, background .2s ease, border-color .2s ease}
  .hp-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;
    width:20px;height:20px;color:#fff;transition:left .3s ease}
  .hp-q{width:100%;height:100%;padding:0 0 0 40px;font-size:16px;color:transparent;caret-color:#fff}
  .hp-q::placeholder{color:transparent}
  .hp-search:focus-within{width:calc(100% - 24px);background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);border-radius:999px}
  .hp-search:focus-within .hp-search-ic{left:16px}
  .hp-search:focus-within .hp-q{color:#fff}
  .hp-search:focus-within .hp-q::placeholder{color:rgba(246,242,236,.5)}
  .hp-results{left:0;right:0;width:auto}                      /* match the (full-width) search box, not the desktop 400px */
  .hp-slash{display:none}                                     /* no keyboard shortcut on touch */
  .hero>.wrap,.two-col,.the-line .wrap{grid-template-columns:1fr;gap:var(--s4)}
  /* Portrait context image: cap by height so the tall crop stays a reasonable showcase (and never
     balloons on wider stacked/tablet widths); width follows, centred. */
  .context-img{max-width:100%;max-height:none;width:100%}   /* full-width, flush with the text column (no centred inset) */
  .hero{padding-bottom:var(--s6);min-height:0}   /* phones/iPad-portrait: content height, not 70vh */
  .hero>.wrap{min-height:0}
  .hero-viz{min-height:0}
  /* Full-bleed edge-to-edge below the headline: break out of the .wrap gutter with a 100vw width
     centred on the viewport. .hero's overflow:hidden clips any sub-pixel spill, so no sideways scroll.
     Selector must out-specify `body.home img{max-width:100%}` (line 33), which would otherwise cap it
     back to the container width — hence `body.home .hero-wave`, not a bare `.hero-wave`. */
  body.home .hero-wave{position:static;transform:none;width:100vw;max-width:100vw;
    margin-left:calc(50% - 50vw);margin-top:var(--s3)}  /* in-flow below the headline on phones (image carries its own dimming) */
  /* Put the Pan·Zoom·Explore row BELOW the waveform image on mobile: dissolve .hero-copy so its
     children (h1, lead, modes) join the single-column grid, then order the viz ahead of the modes. */
  .hero-copy{display:contents}
  .hero-viz{order:1}
  .hero-modes{order:2}
  .hero-axis{display:none}   /* the wide/short ruler is unreadable squished to a phone */
  .cards{grid-template-columns:1fr}
  .card-plus{transform:rotate(90deg)}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  /* Brand spans the full row (logo + quote side-by-side), so the columns start below it. */
  .foot-brand{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3)}
  .foot-brand .foot-quote{margin:0 20px}
  .foot-legal a,.foot-legal .spacer{display:none}   /* mobile: drop Privacy/Terms so the copyright sits on one line */
  .sec{padding:var(--s4) 0}
}
/* mobile portrait: tighten the hero lead's measure */
@media (max-width:560px){
  .hero-copy .lead{max-width:27ch}
  /* Phones: the wide desktop screenshot gets tiny in a full-width card — swap to the two portrait
     halves (playlist, then timeline) STACKED vertically, each full width. Both are inside the one
     .card-preview-link, so tapping either opens the program. */
  .card-preview-wide{display:none}
  .card-preview-split{display:grid;gap:30px;background:var(--paper)}   /* stacked with breathing room; the grid ground shows through the gap → paper, not white */
  .card-preview-half{width:100%;height:auto;display:block}
}