/* ============================================================
   FREDDIE THE BASSIST — professional redesign (amber / warm)
   Built from the Claude Design handoff. Tokens, keyframes and
   responsive rules live here; component styling is inline in the
   markup (as designed) and hover states are wired in main.js.
   ============================================================ */
:root{
  --ink:#100d0b; --ink-2:#0a0807; --panel:#1a1613; --panel-2:#231d17;
  --bone:#f3ede1; --body:#d7cdbd; --mute:#9c9184;
  --amber:#e8974a; --amber-bright:color-mix(in oklab, var(--amber) 74%, #fff);
  --amber-fill:#e8974a; /* constant vivid orange for filled CTAs; stays put across themes so the dark text on top always reads clearly */
  --line:rgba(243,237,225,0.12); --line-2:rgba(243,237,225,0.22);
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-clef:'Noto Music',serif;
  --maxw:1240px; --gap:clamp(1.4rem,5vw,4rem);
  --edge:max(var(--gap), calc((100vw - var(--maxw)) / 2 + var(--gap)));
  --ctrl:40px;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="light"]{
  --ink:#efe7d8; --ink-2:#e4dac6; --panel:#fbf7ef; --panel-2:#f1e9da;
  --bone:#1c1610; --body:#3d342a; --mute:#726757;
  /* --amber / --amber-bright intentionally NOT overridden here: keep the
     same vivid orange as dark mode in both themes for brand consistency. */
  --line:rgba(28,22,16,0.14); --line-2:rgba(28,22,16,0.26);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;}
[data-theme="light"]{color-scheme:light;}
body{background:var(--ink);}

/* elegant cross-fade whenever the theme swaps the custom-property values;
   elements with their own inline transition (buttons, cards, links) keep
   using their own timing since inline style wins over this rule. */
*{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
canvas{display:block;}
::selection{background:var(--amber);color:#140d06;}
/* no native ring on mouse/touch click; keyboard focus still gets one.
   written as two separate rules (rather than :focus:not(:focus-visible))
   so it still works in engines with partial/no :focus-visible support. */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px;}

@keyframes ftb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ftb-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.14)}}

/* links inside the marquee + event rows keep the design colour but hint interactivity */
.ftb-link{transition:color .25s var(--ease);}
.ftb-link:hover{color:var(--amber-bright);}

/* ---------------- TIMELINE ---------------- */
.tl{position:relative;margin-top:.5rem;}
.tl::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--amber),var(--line));}
.tl-item{position:relative;padding:0 0 2.1rem 2.4rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:0;top:.35rem;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--amber);transition:transform .3s var(--ease),background .3s;}
.tl-item:hover .tl-dot{background:var(--amber);transform:scale(1.15);}
.tl-year{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--amber-bright);letter-spacing:.02em;}
.tl-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--bone);line-height:1.15;margin:.15rem 0 0;letter-spacing:-.01em;display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
a.tl-title:hover{color:var(--amber-bright);}
a.tl-title .tl-arrow{font-size:.85em;color:var(--amber);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s var(--ease);}
a.tl-title:hover .tl-arrow{opacity:1;transform:none;}
.tl-meta{color:var(--body);font-size:.95rem;margin:.35rem 0 0;}
.tl-src{color:var(--mute);font-size:.8rem;}
.tl-src a{color:var(--mute);text-decoration:underline;text-underline-offset:2px;}
.tl-src a:hover{color:var(--amber-bright);}

/* ---------------- REVEAL fallback (JS sets inline) ---------------- */
[data-reveal]{will-change:opacity,transform;}

/* ---------------- RESPONSIVE (from design) ---------------- */
@media(max-width:920px){
  [data-hero]{grid-template-columns:1fr !important;min-height:auto !important;}
  [data-heroart]{order:-1 !important;min-height:56vh !important;}
  [data-herocopy]{padding-inline:var(--gap) !important;}
  [data-two]{grid-template-columns:1fr !important;}
  [data-navlinks]{position:fixed !important;top:0;right:0;height:100vh;width:min(80vw,340px);flex-direction:column !important;align-items:flex-start !important;justify-content:center;gap:1.4rem !important;background:var(--panel);padding:2rem 2.4rem;transform:translateX(105%);transition:transform .45s var(--ease);z-index:120;box-shadow:-30px 0 80px rgba(0,0,0,.4);}
  [data-navlinks][data-open="true"]{transform:translateX(0);}
  [data-navtoggle]{display:inline-flex !important;}
}
@media(min-width:921px){ [data-navtoggle]{display:none !important;} [data-navbackdrop]{display:none !important;} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}