/* =================================================================
   Personal story site
   Structure follows the karlojurina.com pattern (b-roll wall + blurred
   reveal + era timeline + inline photo popups). Visual identity is our
   own: cooler base, gold accent, serif display faces.

   Everything you'd want to restyle lives in :root.
   ================================================================= */

:root {
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* text is white at four opacities - this is what makes it read as one surface */
  --ink:   rgba(255, 255, 255, 0.94);
  --dim:   rgba(255, 255, 255, 0.54);
  --faint: rgba(255, 255, 255, 0.30);
  --hair:  rgba(255, 255, 255, 0.11);

  --base:   #07080a;          /* cool near-black */
  --accent: #C8A56B;          /* warm gold - use scarcely */
  --card:   #f7f5f0;          /* polaroid border */

  --edge: clamp(22px, 4.5vw, 52px);
  --ease:   cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --spring: cubic-bezier(0.34, 1.40, 0.64, 1.00);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;
  background: var(--base); color: var(--ink);
  font-family: var(--sans); font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body { height: 100dvh; position: relative; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 1.5px solid rgba(255,255,255,0.6); outline-offset: 4px; border-radius: 3px; }

/* =================================================================
   1. WALLPAPER
   ================================================================= */
.wall { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--base); }

/* b-roll sits ABOVE the gradient and fades in only once it actually plays,
   so a blocked autoplay never shows a black rectangle.
   NOTE: this transition duration must match XFADE_MS in script.js. */
.wall__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1200ms var(--ease);
}
.wall__video.is-live { opacity: 1; }

/* mood-tinted gradient. This is the design when there are no clips -
   it should never look like a missing asset. */
.wall__fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 20% 15%, #1b2027 0%, transparent 60%),
    radial-gradient(100% 80% at 85% 90%, #14171c 0%, transparent 55%),
    linear-gradient(160deg, #0d1013, #07080a);
  animation: drift 32s var(--ease) infinite alternate;
}
body[data-mood="morning"] .wall__fallback {
  background:
    radial-gradient(120% 90% at 25% 10%, #2a2a2b 0%, transparent 62%),
    radial-gradient(100% 80% at 80% 85%, #1d1c1a 0%, transparent 55%),
    linear-gradient(160deg, #141414, #08090a);
}
body[data-mood="afternoon"] .wall__fallback {
  background:
    radial-gradient(120% 90% at 30% 20%, #2c2621 0%, transparent 62%),
    radial-gradient(100% 80% at 82% 88%, #1c1815 0%, transparent 55%),
    linear-gradient(160deg, #121010, #08080a);
}

.wall__grain {
  position: absolute; inset: -50%; z-index: 2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: drift 22s steps(6) infinite alternate;
}

/* legibility scrim - keeps minimal text clean over any frame */
.wall__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,5,6,0.62) 0%, rgba(4,5,6,0.14) 32%, rgba(4,5,6,0.20) 62%, rgba(4,5,6,0.74) 100%);
}

@keyframes drift  { from { transform: scale(1.04) translate(-1%,-1%); } to { transform: scale(1.10) translate(1.5%,1%); } }
@keyframes settle { from { opacity: 0.55; transform: scale(1.05); }     to { opacity: 1; transform: none; } }
@keyframes rise   { from { opacity: 0; transform: translateY(10px); }   to { opacity: 1; transform: none; } }

/* =================================================================
   2. RESTING SCREEN
   ================================================================= */
.screen {
  position: fixed; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(30px, 5vh, 54px) var(--edge);
  animation: settle 1.1s var(--ease) both;
  /* safety valve: the hero makes this column tall enough that a short
     viewport (landscape phone, small laptop) could clip the foot. The
     document itself can't scroll, so let this one column do it. */
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { width: 0; height: 0; }
body.open .screen { pointer-events: none; }

.id { display: flex; flex-direction: column; align-items: center; }
.id__name {
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 30px); font-weight: 500; letter-spacing: -0.01em;
}
.clock {
  margin-top: 9px; font-size: clamp(12px, 1.25vw, 14px); color: var(--dim);
  font-variant-numeric: tabular-nums; letter-spacing: 0.12em;
}

/* links + player grouped at the bottom */
.foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.links { display: flex; align-items: center; gap: 18px; animation: rise .9s var(--ease) .25s both; }
.link {
  position: relative; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink);
  letter-spacing: 0.005em; padding: 2px 0;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.link:hover::after, .link[aria-expanded="true"]::after { transform: scaleX(1); }
.links__div { width: 1px; height: 15px; background: var(--hair); }

/* the clickable quote, where a music widget would otherwise sit */
.quote {
  max-width: 420px; display: flex; align-items: baseline; gap: 7px;
  text-align: left; color: var(--dim);
  animation: rise .9s var(--ease) .4s both;
  transition: color .25s var(--ease);
}
.quote:hover { color: var(--ink); }
.quote__mark {
  font-family: var(--serif); font-size: 22px; line-height: 1;
  color: var(--accent); opacity: .75; transform: translateY(2px);
}
.quote__line {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.5;
  /* one line on desktop, two on small screens - never a wall of text */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.quote:hover .quote__line, .quote[aria-expanded="true"] .quote__line { border-color: var(--hair); }

/* ---- HERO: the pitch, centred in the resting screen ----------------
   .id has no auto margin, .hero and .foot each take margin-top:auto, so
   the free space splits between them: hero lands mid-screen, foot stays
   pinned to the bottom. -------------------------------------------- */
.hero {
  margin-top: auto;
  width: 100%; max-width: 700px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: rise .9s var(--ease) .15s both;
}

/* youtube + the RunItUp room, above the eyebrow. Monochrome by default so two
   brand colours don't fight the gold; each picks up its own colour on hover. */
.hsoc { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(14px, 2vh, 20px); }
.hsoc a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .25s var(--ease), background .25s var(--ease), transform .25s var(--spring);
}
.hsoc svg { width: 16px; height: 16px; fill: var(--dim); transition: fill .25s var(--ease); }
.hsoc a:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.hsoc a:nth-child(1):hover svg { fill: #ff0033; }   /* youtube  */
.hsoc a:nth-child(2):hover svg { fill: #5865f2; }   /* discord  */

.hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(10.5px, 1.15vw, 12px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.hero__rule { width: clamp(22px, 4vw, 42px); height: 1px; background: currentColor; opacity: .55; }

.hero__line {
  margin-top: clamp(12px, 1.8vh, 18px);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 4.1vw, 43px); line-height: 1.17;
  letter-spacing: -0.018em; text-wrap: balance;
}
.hero__num { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

.hero__cards {
  margin-top: clamp(24px, 4vh, 40px);
  width: 100%; display: flex; flex-direction: column; gap: 11px;
}

.hcard {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(11px, 1.5vh, 15px) clamp(13px, 2vw, 19px);
  border: 1px solid var(--hair); border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  text-align: left;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hcard:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
/* the lit one - gold ring instead of the reference's blue */
.hcard--lit {
  border-color: rgba(200, 165, 107, 0.55);
  box-shadow: 0 0 0 1px rgba(200, 165, 107, 0.16), 0 12px 36px -20px rgba(200, 165, 107, 0.55);
}
.hcard--lit:hover { border-color: rgba(200, 165, 107, 0.85); }

.hcard__icon {
  width: clamp(38px, 4.4vw, 46px); height: clamp(38px, 4.4vw, 46px);
  border-radius: 11px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair);
}
.hcard__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hcard__body  { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hcard__title { font-size: clamp(15px, 1.7vw, 17px); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.hcard__sub   { font-size: clamp(12.5px, 1.35vw, 13.5px); color: var(--dim); line-height: 1.4; }

.hcard__go {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: clamp(13px, 1.4vw, 14.5px); color: var(--dim);
  transition: color .25s var(--ease);
}
.hcard:hover .hcard__go { color: var(--ink); }
.hcard__chev { transition: transform .25s var(--spring); }
.hcard:hover .hcard__chev { transform: translateX(3px); }

.hero__more {
  margin-top: clamp(20px, 3.4vh, 34px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: clamp(13.5px, 1.5vw, 15.5px); color: var(--dim);
  transition: color .25s var(--ease);
}
.hero__more:hover, .hero__more[aria-expanded="true"] { color: var(--ink); }
.hero__arrow { font-size: 15px; line-height: 1; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }

/* qualifier pill on a hero card title (the 7-figures room) */
.hcard__tag {
  display: inline-block; vertical-align: 2px; margin-left: 7px;
  font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--dim);
  padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair);
}

/* =================================================================
   7b. THE PAID OFFER  -  "For you" is this one block now
   ================================================================= */
.mc {
  display: block; padding: clamp(16px, 2.4vh, 22px);
  border-radius: 16px; border: 1px solid rgba(200, 165, 107, 0.4);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 1px rgba(200, 165, 107, 0.12), 0 18px 44px -26px rgba(200, 165, 107, 0.5);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.mc:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(200, 165, 107, 0.7); }

.mc__head  { display: flex; align-items: center; gap: 13px; }
.mc__icon  { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.mc__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc__id    { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mc__title { font-size: clamp(17px, 2vw, 19px); font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.mc__price { font-family: var(--serif); font-size: clamp(19px, 2.3vw, 23px); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc__per   { font-family: var(--sans); font-size: 12.5px; color: var(--dim); margin-left: 1px; }

.mc__pitch { display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--dim); }

.mc__list  { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
.mc__li    { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.mc__li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .8;
}

.mc__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 17px;
  font-size: 14.5px; color: var(--ink);
  padding: 9px 18px; border-radius: 999px;
  background: rgba(200, 165, 107, 0.15); box-shadow: inset 0 0 0 1px rgba(200, 165, 107, 0.45);
  transition: background .25s var(--ease);
}
.mc:hover .mc__go { background: rgba(200, 165, 107, 0.26); }
.mc__chev { transition: transform .25s var(--spring); }
.mc:hover .mc__chev { transform: translateX(3px); }

/* his own community numbers, already public on dialedconsulting.com */
.proof {
  list-style: none; margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.proof li {
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  padding: 12px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair);
}
.proof b    { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof span { font-size: 11px; line-height: 1.35; color: var(--faint); letter-spacing: 0.02em; }

/* ---- member wins ---- */
.tstm { margin-top: clamp(26px, 4vh, 38px); }

.tstm__lead {
  position: relative; padding: 18px 20px 16px 22px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.tstm__lead::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px;
  border-radius: 2px; background: var(--accent); opacity: .65;
}
.tstm__lead p {
  font-family: var(--serif); font-size: clamp(14.5px, 1.7vw, 16px);
  line-height: 1.62; color: var(--ink);
}
.tstm__lead p + p { margin-top: 9px; }
.tstm__lead footer { margin-top: 13px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tstm__who  { font-size: 13px; font-weight: 600; color: var(--ink); }
.tstm__when { font-size: 12px; color: var(--faint); }

/* the win cards - the quote carries it, the number corroborates */
/* one column on purpose - a Discord screenshot at half-width is unreadable,
   and the length of the scroll is itself part of the proof */
.wins {
  margin-top: 13px;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.win__shot, .tstm__shot {
  display: block; width: 100%; height: auto;
  border-radius: 9px; background: #0f1013;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.tstm__shot { margin-top: 13px; }

/* tier headings inside the wins wall */
.tstm__tier {
  margin-top: clamp(22px, 3.4vh, 32px); margin-bottom: 2px;
  font-family: var(--serif); font-size: 15.5px; color: var(--ink);
  display: flex; align-items: center; gap: 11px;
}
.tstm__tier::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--hair);
}
.tstm__tier:first-of-type { margin-top: 16px; }

/* marvin's is the one real narrative in the set - give it a gold edge */
.win--lead {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 107, 0.34);
}
.win--lead blockquote { font-size: 15px; }
.win {
  margin: 0; padding: 14px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.022); box-shadow: inset 0 0 0 1px var(--hair);
  display: flex; flex-direction: column; gap: 11px;
}
.win blockquote {
  font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink);
}
.win blockquote::before { content: "\201C"; }
.win blockquote::after  { content: "\201D"; }
.win figcaption {
  margin-top: auto; display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 3px 10px;
}
.win__who  { font-size: 12px; font-weight: 600; color: var(--ink); }
.win__num  { font-family: var(--serif); font-size: 15.5px; color: var(--accent);
             font-variant-numeric: tabular-nums; text-align: right; }
.win__when { grid-column: 1 / -1; font-size: 11px; color: var(--faint); }

/* repeated ask - one mid-testimonials, one closing */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; padding: 13px 20px; border-radius: 999px;
  font-size: 14.5px; color: var(--ink);
  background: rgba(200, 165, 107, 0.15);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 107, 0.45);
  transition: background .25s var(--ease);
}
.cta:hover { background: rgba(200, 165, 107, 0.28); }
.cta--end  { margin-top: 18px; background: rgba(200, 165, 107, 0.22); font-weight: 500; }
.cta__chev { transition: transform .25s var(--spring); }
.cta:hover .cta__chev { transform: translateX(3px); }

/* the opened quote panel */
.sheet--quote { max-width: 560px; }
.bq { margin-top: clamp(10px, 3vh, 26px); }
.bq__text {
  font-family: var(--serif); font-size: clamp(20px, 3vw, 27px);
  line-height: 1.42; letter-spacing: -0.01em; color: var(--ink);
  text-indent: -0.4em;                 /* hang the opening quote mark */
}
.bq__text::before { content: "\201C"; color: var(--accent); }
.bq__text::after  { content: "\201D"; color: var(--accent); }
/* superscript verse numbers */
.bq__v {
  font-family: var(--sans); font-size: 0.52em; font-style: normal;
  vertical-align: 0.62em; color: var(--accent); opacity: .8;
  margin-right: 3px; letter-spacing: 0;
}
.bq__by { margin-top: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* the reference: bold, and the link out to the full passage */
.bq__ref {
  font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em;
  border-bottom: 1px solid var(--faint);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.bq__ref:hover { color: var(--accent); border-color: var(--accent); }
.bq__ref::after { content: "\00a0\2197"; font-weight: 400; font-size: 12px; }
.bq__ver { font-size: 12px; color: var(--faint); letter-spacing: 0.02em; }

/* =================================================================
   3. BLURRED REVEAL
   ================================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: clamp(46px, 8vh, 96px) var(--edge);
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(6, 7, 9, 0.58);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  transition: opacity .42s var(--ease), visibility .42s var(--ease);
}
body.open .overlay { opacity: 1; visibility: visible; pointer-events: auto; }

/* shared "back" control: arrow + word */
.overlay__close, .yearwrap__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--dim);
  transition: color .2s var(--ease);
}
.overlay__close::before, .yearwrap__back::before { content: "\2190"; font-size: 16px; line-height: 1; }
.overlay__close:hover, .yearwrap__back:hover { color: var(--ink); }

/* story-view back: fixed top-right of the column, stays put while scrolling */
.yearwrap__back {
  position: fixed; z-index: 8;
  top: clamp(46px, 8vh, 96px); right: var(--edge);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s var(--ease), color .2s var(--ease);
}
body.era-open .yearwrap__back { opacity: 1; visibility: visible; pointer-events: auto; }

/* visibility (not opacity alone) is what takes the inactive sheets' ~20 controls
   out of the tab order - pointer-events only stops the mouse. Same pattern as
   .overlay and .yearwrap above. */
.sheet {
  /* all three share ONE grid cell - only ever one is shown, and stacking them in
     separate auto rows makes the row collapse once a sheet is a scroll container
     (a scroll box has an automatic minimum size of 0), which threw the centred
     sheet off the top of the viewport */
  grid-area: 1 / 1;
  width: 100%; max-width: 620px;
  opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
  /* visibility is stepped, not interpolated: instant on open so a scripted
     focus() lands in the same tick, delayed on close so the fade still plays */
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.sheet.is-open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear 0s;
}
.sheet:focus { outline: none; }   /* scripted focus target, not a control */

/* Both panels need a scroll clamp: html/body can't scroll, so anything past the
   viewport is unreachable. Without this the last era rows fall off the bottom on
   a short window (measured: .yr--now off-screen at 1366x660). */
.sheet[data-panel="about"],
.sheet[data-panel="for-you"] {
  overflow-y: auto; overflow-x: hidden;
  max-height: calc(100dvh - 2 * clamp(46px, 8vh, 96px));   /* = .overlay's padding */
  -webkit-overflow-scrolling: touch;
}
/* A vertical scroll box also clips horizontally, and the About list's hover-fan
   overhangs its column by ~24px. Buy that back as padding and grow max-width by
   the same amount, so the text column lands exactly where it did before. Only
   where a pointer can hover - on touch there's no fan and the width is precious. */
@media (hover: hover) and (min-width: 641px) {
  .sheet[data-panel="about"] { max-width: 672px; padding-inline: 26px; }
}
.sheet::-webkit-scrollbar { width: 0; }

.sheet__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet__head  { margin-bottom: clamp(22px, 4vh, 38px); }
.sheet__title { font-family: var(--serif); font-size: clamp(23px, 3vw, 29px); font-weight: 500; letter-spacing: -0.015em; }
.sheet__lede  { margin-top: 8px; font-size: 14px; color: var(--dim); line-height: 1.5; }
.sheet__role  { margin-top: 10px; font-size: 15px; color: var(--ink); letter-spacing: -0.005em; }
.sheet__bio   { margin-top: 11px; font-size: 14px; color: var(--dim); line-height: 1.7; }

.socials { display: flex; gap: 16px; margin-top: 16px; font-size: 13px; }
.socials a { color: var(--dim); transition: color .2s var(--ease); }
.socials a:hover { color: var(--ink); }

/* =================================================================
   4. ERA LIST
   ================================================================= */
.years { position: relative; }
.yr {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 70px 1fr auto; align-items: center;
  gap: 18px; padding: 13px 0; text-align: left;
  border-top: 1px solid var(--hair);
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.yr:last-child { border-bottom: 1px solid var(--hair); }

/* photo stack - a little pile that fans open on hover */
.yr__stack {
  position: relative; width: 64px; height: 52px;
  transition: transform .35s var(--spring);
}
.yr__photo {
  position: absolute; inset: 0; padding: 4px;
  background: var(--card); border-radius: 6px;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.5);
  transition: transform .35s var(--spring), box-shadow .35s var(--ease);
}
.yr__photo .ph  { width: 100%; height: 100%; border-radius: 3px; }
.yr__photo img  { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.yr__photo:nth-child(1) { transform: rotate(-6deg) translate(-2px, 2px); z-index: 1; }
.yr__photo:nth-child(2) { transform: rotate(5deg)  translate(2px, 0);    z-index: 2; }
.yr__photo:nth-child(3) { transform: rotate(-1deg);                      z-index: 3; }

.yr:hover .yr__stack { transform: scale(1.1); }
.yr:hover .yr__photo:nth-child(1) { transform: rotate(-12deg) translate(-9px, -2px); box-shadow: 0 10px 22px -6px rgba(0,0,0,.55); }
.yr:hover .yr__photo:nth-child(2) { transform: rotate(9deg)   translate(9px, -1px);  box-shadow: 0 10px 22px -6px rgba(0,0,0,.55); }
.yr:hover .yr__photo:nth-child(3) { transform: rotate(-2deg)  translate(0, -4px);    box-shadow: 0 12px 24px -6px rgba(0,0,0,.6); }

.yr__title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.yr__date  { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* current era gets a live pulse */
.yr--now .yr__date::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); vertical-align: middle;
  animation: livepulse 2.4s var(--ease) infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(200,165,107,.45); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(200,165,107,0); }
}

/* --- the signature move: hover one row, blur everything else --- */
.years:hover .yr       { filter: blur(2.5px); opacity: .42; }
.years:hover .yr:hover { filter: none; opacity: 1; z-index: 20; }
.sheet:has(.years:hover) .sheet__head {
  filter: blur(2.5px); opacity: .5;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}

/* placeholder fill - used anywhere a real image isn't in yet */
.ph {
  display: block;
  background: linear-gradient(160deg, #d9d4cb, #b3ada1);
}

/* =================================================================
   5. STORY VIEW
   ================================================================= */
.yearwrap {
  position: absolute; inset: 0; z-index: 6; overflow-y: auto;
  padding: clamp(46px, 8vh, 96px) var(--edge);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.yearwrap.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s linear 0s; }
.yearwrap::-webkit-scrollbar { width: 0; }
/* hide the list behind the open story - visibility too, or an invisible sheet
   keeps its controls in the tab order while the story is up */
body.era-open .sheet {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.yearwrap:focus { outline: none; }   /* scripted focus target, not a control */

.yearview { max-width: 620px; margin: 0 auto; display: none; }
.yearview.is-active { display: block; animation: yvUp .45s var(--ease) both; }
@keyframes yvUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.yearview__title { font-family: var(--serif); font-size: clamp(25px, 3.4vw, 33px); font-weight: 500; letter-spacing: -0.015em; }
.yearview__date  { margin-top: 6px; font-size: 14px; color: var(--dim); }
.yearview__story { margin-top: clamp(20px, 3vh, 30px); }
.yearview__story > * + * { margin-top: 1.05em; }
.yearview__story p { font-size: 15px; line-height: 1.68; color: rgba(255,255,255,0.78); }
.yearview__story a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--faint);
  transition: text-decoration-color .2s var(--ease);
}
.yearview__story a:hover { text-decoration-color: var(--ink); }

.yearview__story .slist { list-style: none; padding-left: 18px; border-left: 2px solid var(--hair); display: grid; gap: 7px; }
.yearview__story .slist li { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.84); }

.yearview__story p.yv__quote {
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; color: var(--ink);
  margin-top: 1.5em;
}
.yearview__story p.yv__sep { text-align: center; color: var(--faint); letter-spacing: 0.3em; margin-top: 1.6em; }
.yearview__story p.yv__sig { margin-top: 2.4em; font-size: 12.5px; color: var(--faint); letter-spacing: 0.02em; line-height: 1.6; }

/* "up next" - just the year + a down arrow */
.yv-next { display: block; width: 100%; margin-top: clamp(44px, 7vh, 70px); text-align: center; }
.yv-next__row { display: flex; justify-content: center; align-items: center; gap: 9px; }
.yv-next__y { font-size: 14px; color: var(--dim); letter-spacing: 0.01em; transition: color .2s var(--ease); }
.yv-next__a { font-size: 16px; color: var(--faint); transition: transform .25s var(--spring), color .2s var(--ease); }
.yv-next:hover .yv-next__y { color: var(--ink); }
.yv-next:hover .yv-next__a { transform: translateY(4px); color: var(--ink); }

/* =================================================================
   6. INLINE PHOTO POPUPS
   ================================================================= */
.annot {
  position: relative; cursor: pointer; color: var(--ink);
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: var(--faint);
  transition: text-decoration-color .2s var(--ease);
}
.annot:hover, .annot:focus-visible { text-decoration-color: var(--accent); outline: none; }
.annot__cards { display: none; }   /* source markup only - JS renders into #pop */

#pop {
  position: fixed; z-index: 60;
  display: flex; align-items: flex-end; pointer-events: none;
  opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#pop.show { opacity: 1; transform: none; }

.pcard {
  display: block; padding: 6px;
  background: var(--card); border-radius: 9px;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.7);
  transform: rotate(var(--r, 0deg));
}
.pcard + .pcard { margin-left: -48px; }
.pcard img, .pcard__ph {
  display: block; width: 150px; height: 186px; object-fit: cover; border-radius: 4px;
}
.pcard__ph { background: linear-gradient(160deg, #d9d4cb, #b3ada1); }

/* slideshow variant - cards stack in one grid cell and cross-fade */
#pop.is-slides { display: grid; }
#pop.is-slides .pcard {
  grid-area: 1 / 1; margin: 0; opacity: 0; z-index: 0;
  transform: rotate(var(--r, 0deg)) scale(.98);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
#pop.is-slides .pcard.is-top { opacity: 1; z-index: 2; transform: rotate(var(--r, 0deg)) scale(1); }
#pop.is-slides .pcard__ph, #pop.is-slides .pcard img { width: 230px; height: 150px; }

/* =================================================================
   7. FOR YOU
   ================================================================= */
.fy { display: flex; flex-direction: column; gap: clamp(20px, 3.2vh, 30px); }
.fy__label { font-size: 12px; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }

.fy__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.art {
  display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 14px;
  padding: 13px; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.art:hover { background: rgba(255,255,255,0.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.art__icon { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.art__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.art__for   { font-size: 12px; color: var(--dim); line-height: 1.3; }
.art__title { font-size: 14px; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); }

.dest {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--hair);
}
.fy__sec .dest:last-child { border-bottom: 1px solid var(--hair); }
.dest__icon { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.art__icon .ph, .dest__icon .ph { width: 100%; height: 100%; }
.art__icon img, .dest__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dest__main { min-width: 0; }
.dest__top  { display: flex; align-items: center; gap: 10px; }
.dest__title {
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .3s var(--ease);
}
.dest:hover .dest__title { background-size: 100% 1px; }
.dest__tag {
  flex: 0 0 auto; font-size: 11px; color: var(--dim);
  padding: 2px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair);
}
.dest__note { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.dest__go   { color: var(--faint); font-size: 15px; transition: transform .25s var(--spring), color .25s var(--ease); }
.dest:hover .dest__go { transform: translate(2px, -2px); color: var(--ink); }

/* =================================================================
   8. RESPONSIVE + MOTION
   ================================================================= */
@media (max-width: 640px) {
  .links { gap: 16px; }
  .fy__cards { grid-template-columns: 1fr; }
  .pcard img, .pcard__ph { width: 128px; height: 158px; }
  .pcard + .pcard { margin-left: -40px; }
  .overlay { padding: clamp(56px, 9vh, 90px) var(--edge); place-items: start center; }
  .yearwrap__back { top: clamp(56px, 9vh, 90px); }

  /* the overlay pads differently down here, so re-clamp to match it */
  .sheet[data-panel="about"],
  .sheet[data-panel="for-you"] {
    max-height: calc(100dvh - 2 * clamp(56px, 9vh, 90px));
  }

  /* hero has to share a phone screen with the name, the nav and the quote */
  .hero__line  { font-size: clamp(23px, 6.6vw, 30px); }
  .hcard       { border-radius: 13px; gap: 11px; }
  .hcard__sub  { font-size: 12px; }
  .hcard__go   { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}