/* ============================================================
   STORY GHOST: shared by every page
   One menu bar that never moves, stark panels, huge type, and a
   rail that runs sideways on desktop. Cached for a year like all of
   /assets/, so bump the ?v= in each page when this file changes.
   ============================================================ */
:root{
  --cream:#F5F0E6;
  --ink:#242220;
  --pink:#fd758a;

  --ground:var(--cream);
  --fg:var(--ink);
  --dark-panel:var(--ink);
  --tile:url("/assets/img/paper-tile.webp");  /* absolute: pages' own styles use this too */
  --off-bg:#e2ddd2;
  --off-fg:#625d55;

  --sans:"neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,6vw,2rem);
  --bar:88px;   /* 52 icons + 32 paths + 4 rule */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1a1917; --fg:var(--cream); --dark-panel:#2e2b28;
    --tile:none; --off-bg:#2a2825; --off-fg:#a8a298;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#1a1917; --fg:var(--cream); --dark-panel:#2e2b28;
  --tile:none; --off-bg:#2a2825; --off-fg:#a8a298;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--bar); }
body{
  margin:0;
  padding-top:calc(var(--bar) + env(safe-area-inset-top,0px));
  background-color:var(--ground);
  background-image:var(--tile);
  background-size:1100px;
  background-blend-mode:multiply;
  color:var(--fg);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
p,h1,h2,h3{ margin:0; font-size:inherit; font-weight:inherit; }
a{ color:inherit; }
:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- the menu bar: same place on every page, at every width ---------- */
.bar{
  position:fixed; inset:0 0 auto; z-index:20;
  padding-top:env(safe-area-inset-top,0px);
  background-color:var(--ground); background-image:var(--tile); background-size:1100px; background-blend-mode:multiply;
  border-bottom:4px solid var(--fg);
  view-transition-name:bar;
}
.bar::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--pink);
  transform:scaleX(var(--progress,0)); transform-origin:0 50%;
}
.socials{
  display:flex; justify-content:center; align-items:center;
  height:52px; gap:clamp(.15rem,1.5vw,.5rem);
}
.socials a{
  display:grid; place-items:center;
  width:44px; height:44px;
  color:var(--fg);
  transition:color .16s ease, transform .16s ease;
}
.socials a:hover{ color:var(--pink); transform:translateY(-2px); }
.socials svg{ width:21px; height:21px; fill:currentColor; }

/* the two paths, always one tap away */
.paths{ display:grid; grid-template-columns:1fr 1fr; height:32px; }
.paths a{
  display:grid; place-items:center;
  font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-decoration:none;
}
.paths a:focus-visible{ outline-offset:-5px; }
.paths__house{ background:var(--pink); color:var(--ink); }
.paths__music{ background:var(--ink); color:var(--cream); }
.paths a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:3px; }
.paths__house:hover{ background:var(--cream); }
.paths__music:hover{ color:var(--pink); }

/* ---------- panels ---------- */
.panel{
  padding-block:clamp(2rem,7vw,3.25rem);
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  border-bottom:4px solid var(--fg);
}
.panel:last-child{ border-bottom:0; }
.panel__in{ max-width:34.5rem; margin-inline:auto; display:grid; gap:1.25rem; min-width:0; }
.panel--pink{ background:var(--pink); color:var(--ink); border-bottom-color:var(--ink); }
.panel--ink{ background:var(--dark-panel); color:var(--cream); }

/* ---------- type ---------- */
.disp{
  display:block; font-weight:700; text-transform:uppercase;
  line-height:.9; letter-spacing:-.035em;
  font-size:clamp(2.35rem,11.6vw,4.25rem);
}
.disp--xl{ font-size:clamp(3.1rem,16.2vw,6rem); line-height:.86; letter-spacing:-.045em; }
.huge{
  display:block; font-weight:700; letter-spacing:-.06em; line-height:.8;
  font-size:clamp(11rem,62vw,24rem);
}
.line{ font-weight:700; font-size:clamp(1.65rem,7.2vw,2.5rem); line-height:1.08; letter-spacing:-.022em; text-wrap:balance; }

/* a few letters knocked out of true */
.w{ white-space:nowrap; }
.k{ display:inline-block; transform-origin:50% 80%; }
.k{ transform:rotate(calc(var(--r,0deg) + var(--swing,0deg) * var(--d,1))) translateY(var(--y,0)); }
.k1{ --r:-9deg; --y:-.04em; }
.k2{ --r:11deg; --y:.05em; --d:-1; }
.k3{ --r:-16deg; color:var(--pink); --d:1.4; }
.k4{ --r:7deg; --y:.09em; --d:-.7; }
.tilt{ transform:rotate(calc(-5deg + var(--swing,0deg) * .6)); transform-origin:30% 50%; }

/* the bulb: mostly on, hard off for a beat */
.flash{ color:var(--pink); margin-block:.14em .1em; animation:sg-blink 1.1s steps(1) infinite; }
@keyframes sg-blink{ 0%,100%{ opacity:1; } 62%{ opacity:.12; } }

/* ---------- large photos ---------- */
.bleed{ position:relative; border-block:4px solid var(--fg); overflow:clip; }
.bleed img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 62%; filter:grayscale(1) contrast(1.08); }

/* ---------- desktop: the page runs sideways. rail.js adds .hz, so without it the
   page simply stays vertical. Type is sized by height so every panel fits. ---------- */
.hint{ display:none; }
html.hz{ scroll-behavior:auto; }
html.hz body{ padding-top:0; }
html.hz #stage{ position:sticky; top:0; height:100vh; padding-top:calc(var(--bar) + env(safe-area-inset-top,0px)); overflow:clip; }
html.hz #track{ display:flex; width:max-content; height:100%; will-change:transform; }
html.hz .panel{
  flex:none; display:flex; align-items:center; height:100%;
  padding-block:clamp(1rem,3.5vh,2.25rem); padding-inline:clamp(2rem,6vh,4.5rem);
  border-bottom:0 !important; border-right:4px solid var(--fg);
}
html.hz .panel--pink{ border-right-color:var(--ink); }
html.hz .panel:last-child{ border-right:0; }
html.hz .panel__in{
  width:var(--pw,90vh); max-width:none; margin:0; gap:clamp(.6rem,2vh,1.25rem);
  transform:skewX(var(--lean,0deg)); transform-origin:50% 100%;
}
html.hz .disp{ font-size:clamp(2.5rem,10vh,7rem); }
html.hz .disp--xl{ font-size:clamp(3.5rem,16.5vh,12rem); }
html.hz .huge{ font-size:44vh; }
html.hz .line{ font-size:clamp(1.3rem,4vh,2.75rem); }
html.hz .hint{
  display:block; justify-self:start; margin-top:1vh; padding:.2em .5em;
  font-size:clamp(1.25rem,3.6vh,2rem); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  background:var(--pink); color:var(--ink); transform:rotate(-3deg);
  animation:sg-blink 1.1s steps(1) infinite;
}
html.hz .bleed{ flex:none; height:100%; width:72vh; border-block:0; border-right:4px solid var(--fg); }
html.hz .bleed img{ height:100%; aspect-ratio:auto; transform:translateX(var(--para,0px)) scale(1.2); }

/* ---------- moving between pages: the bar stays still and the page slides in ---------- */
@view-transition{ navigation:auto; }
@keyframes rail-out{ to{ transform:translateX(-22%); opacity:.4; } }
@keyframes rail-in{ from{ transform:translateX(100%); } }
::view-transition-old(root){ animation:rail-out .42s cubic-bezier(.7,0,.2,1) both; }
::view-transition-new(root){ animation:rail-in .42s cubic-bezier(.7,0,.2,1) both; }
::view-transition-group(bar){ animation:none; z-index:2; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.hz .hint,.flash{ animation:none; }
  .socials a{ transition:none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}