/* ============================================================
   home.css — homepage layout (index.html), editorial.
   Colour + type tokens come from base.css.
   ============================================================ */

section { padding: 84px 0; }
/* Full-bleed tinted bands so sections read as distinct blocks */
.band { background: var(--paper2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }

/* ── Hero ── */
.hero { padding: 148px 0 84px; }
.hero .eyebrow { margin-bottom: 20px; }
.hero-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px, 11vw, 122px); line-height: 0.9; letter-spacing: -0.035em;
  margin-bottom: 16px;
  /* misregistered two-colour overprint — vintage riso/anaglyph art */
  text-shadow:
     0.028em 0.012em 0 color-mix(in srgb, var(--teal) 78%, transparent),
    -0.028em -0.012em 0 color-mix(in srgb, var(--accent) 78%, transparent);
  animation: heroIn 1s cubic-bezier(.2,.75,.2,1) both;
}
.hero-name:hover { animation: misreg 1.6s ease-in-out; }
@keyframes heroIn {
  0%   { opacity: 0; transform: translateY(26px) skewY(1.4deg); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes misreg {
  0%,100% { text-shadow: 0.028em 0.012em 0 color-mix(in srgb, var(--teal) 78%, transparent), -0.028em -0.012em 0 color-mix(in srgb, var(--accent) 78%, transparent); }
  50%     { text-shadow: -0.05em 0 0 color-mix(in srgb, var(--teal) 85%, transparent), 0.05em 0 0 color-mix(in srgb, var(--accent) 85%, transparent); }
}
.hero-role {
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 3vw, 27px); color: var(--ink2); margin-bottom: 40px;
}
.hero-main { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; }
.hero-intro { min-width: 0; }
.hero-lead { font-size: 20px; line-height: 1.6; }
.hero-lead b { color: var(--ink); font-weight: 500; }
.hero-lead a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero-lead a:hover { color: var(--accent2); }
.now-playing {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  color: var(--accent); margin-top: 26px;
}
/* live VU meter beside "now playing" */
.vu { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.vu i { width: 4px; height: 30%; border-radius: 1px; background: var(--accent); animation: vu 0.9s ease-in-out infinite; }
.vu i:nth-child(2) { background: var(--stamp); animation-duration: 0.7s; }
.vu i:nth-child(3) { animation-duration: 1.15s; }
.vu i:nth-child(4) { background: var(--stamp); animation-duration: 0.85s; }
.vu i:nth-child(5) { animation-duration: 1.05s; }
.vu i:nth-child(6) { background: var(--stamp); animation-duration: 0.75s; }
@keyframes vu { 0%,100% { height: 22%; } 50% { height: 100%; } }

/* ── Cassette illustration — always playing ── */
.hero-art { display: flex; justify-content: center; }
.cassette {
  width: 100%; max-width: 340px; height: auto;
  filter: drop-shadow(0 22px 30px rgba(25,18,8,0.28));
}
.cass-tab { fill: var(--accent); }
.tape-bridge { fill: var(--tape); }
.cassette .reel { transform-box: fill-box; transform-origin: center; animation: reelspin 9s linear infinite; }
.cassette g.reel:last-of-type { animation-duration: 12s; }
.cassette:hover .reel { animation-duration: 2.2s; }
@keyframes reelspin { to { transform: rotate(360deg); } }

/* ── Tape ticker — the skills marquee ── */
.ticker { overflow: hidden; background: var(--paper2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 13px 0; }
.ticker-row { display: flex; width: max-content; white-space: nowrap; animation: ticker 34s linear infinite; }
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker-row span { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink2); padding-right: 34px; }
.ticker-row b { color: var(--accent); font-weight: 700; padding: 0 34px 0 0; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Four disciplines: a crisp divided grid (the "I do all four" pitch) ── */
.disciplines {
  list-style: none; margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line2);
  border: 1px solid var(--line2);
}
.disciplines li { position: relative; background: var(--paper); padding: 28px 28px 28px; transition: background .2s, box-shadow .2s; }
.disciplines li:hover { background: color-mix(in srgb, var(--paper) 92%, var(--accent)); box-shadow: inset 3px 0 0 var(--accent); }
.disciplines li:hover .disc-ic { transform: rotate(-8deg) scale(1.08); }
.disc-ic { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.disc-ic { display: block; color: var(--accent); margin-bottom: 16px; }
.disc-ic svg { width: 27px; height: 27px; display: block; }
.disc-n {
  font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; color: var(--accent);
}
.disc-n::after { content: " / 04"; color: var(--ink3); font-weight: 400; }
.disciplines h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; margin: 12px 0 9px; line-height: 1.1; }
.disciplines p { font-size: 14.5px; color: var(--ink2); line-height: 1.5; }

/* ── Track record: a cassette J-card label ── */
.hero-facts {
  position: relative; margin-top: 48px; padding: 34px 28px 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px;
  background: var(--paper2); border: 1px solid var(--line2); border-radius: 5px;
}
.hero-facts::before {
  content: "\25C9 SIDE A \00b7 TRACK RECORD"; position: absolute; top: -11px; left: 22px;
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.13em;
  color: var(--paper); background: var(--accent); padding: 4px 11px; border-radius: 3px;
}
.hero-facts dt { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.hero-facts dd { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink3); line-height: 1.5; margin-top: 9px; }

/* ── Full-width film-strip divider ── */
.filmstrip {
  position: relative; height: 34px; background: var(--film);
  background-image:
    repeating-linear-gradient(90deg, #C7B999 0 9px, transparent 9px 20px),   /* top holes */
    repeating-linear-gradient(90deg, #C7B999 0 9px, transparent 9px 20px);   /* bottom holes */
  background-position: center 6px, center calc(100% - 6px);
  background-size: 100% 6px, 100% 6px; background-repeat: repeat-x;
}
.filmstrip::after {
  content: ""; position: absolute; inset: 16px 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 118px, rgba(199,185,153,0.28) 118px 120px);
}

/* ── Work entries — slide-mount monogram + text ── */
.entry { display: grid; grid-template-columns: 128px 1fr; gap: 32px; padding: 44px 0; border-top: 1px solid var(--line); }
.entry:first-of-type { border-top: none; padding-top: 6px; }
.entry-badge { position: sticky; top: 90px; align-self: start; }
.badge-frame {
  aspect-ratio: 1 / 1; background: var(--film); border-radius: 3px; padding: 9px;
  box-shadow: 0 12px 22px -14px rgba(25,18,8,0.55);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.entry:hover .badge-frame { transform: rotate(-2deg) translateY(-4px); box-shadow: 0 20px 30px -16px rgba(25,18,8,0.6); }
.badge-window {
  width: 100%; height: 100%; background: var(--paper); border-radius: 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.badge-mono { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); }
.badge-cap { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--ink3); text-transform: uppercase; }
.badge-tag { font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; color: var(--accent); text-align: center; margin-top: 9px; }
.entry-main { min-width: 0; }
.entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.entry-name { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.015em; line-height: 1.05; }
.entry-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink3); }
.entry-body { font-size: 18px; color: var(--ink); max-width: 62ch; }
.entry-wins { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--accent); margin-top: 14px; }

.games { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.game {
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .2s ease;
}
.game:hover { padding-left: 10px; }
.game:hover .game-name { color: var(--accent); }
.game-name { transition: color .18s; }
.game-icon { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--paper2); transition: transform .2s ease; }
.game:hover .game-icon { transform: scale(1.06) rotate(-2deg); }
.game-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-name { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.15; }
.game-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink3); }
.game-stat { font-family: var(--mono); font-size: 12px; color: var(--ink2); white-space: nowrap; }
.game-link { font-family: var(--mono); font-size: 12px; color: var(--accent); white-space: nowrap; transition: color .18s; }
.game-link:hover { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }

/* ── Data figures rendered as 35mm film frames ── */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.figure { margin: 0; }
.figure-img {
  position: relative; background: var(--film); padding: 15px 0;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 12px 26px -18px rgba(30,20,10,0.6);
}
.figure-img img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1) brightness(0.8) contrast(1.05) blur(6px); transform: scale(1.04);
  transition: filter 1.3s ease, transform 1.3s ease;
}
.figure.visible .figure-img img { filter: none; transform: none; }   /* photo "develops" on scroll-in */
.figure:hover .figure-img img { transform: scale(1.02); }
/* Sprocket perforations, top and bottom */
.figure-img::before, .figure-img::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, #C7B999 0 8px, transparent 8px 18px);
  background-position: center;
}
.figure-img::before { top: 5px; }
.figure-img::after  { bottom: 5px; }
.figure figcaption { font-size: 14.5px; color: var(--ink2); line-height: 1.5; margin-top: 14px; }
.frame-no {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; color: var(--accent); margin-bottom: 5px;
}
.figure figcaption b { color: var(--ink); font-weight: 500; font-family: var(--body); }

/* ── Writing — newspaper cuttings pinned to the page ── */
.post {
  position: relative; display: block; background: var(--clip); padding: 26px 26px 22px;
  border: 1px solid color-mix(in srgb, var(--line2) 60%, transparent);
  box-shadow: 0 16px 30px -18px rgba(35,22,8,0.5);
  transition: rotate .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
/* a strip of tape holding the cutting down */
.post::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 82px; height: 21px;
  transform: translateX(-50%) rotate(-2.4deg);
  background: color-mix(in srgb, var(--stamp) 22%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stamp) 38%, transparent);
  opacity: 0.7;
}
.post-meta { font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.post-meta::before { content: "\25B8 "; }
.post-title { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); transition: color .18s; }
.post:hover .post-title { color: var(--accent); }
.post-excerpt { font-size: 15px; color: var(--ink2); line-height: 1.6; margin-top: 10px; }
.post::after {
  content: "Read the story \2192"; display: block; margin-top: 15px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent);
  transition: transform .3s ease;
}
.post:hover::after { transform: translateX(6px); }

/* the lot sits a little askew, and straightens as you reach for it */
.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 30px; padding-top: 8px; }
.post-list .post:nth-child(odd)  { rotate: -1.5deg; }
.post-list .post:nth-child(even) { rotate:  1.4deg; }
.post-list .post:nth-child(3)    { rotate:  0.9deg; }
.post-list .post:nth-child(4)    { rotate: -1.1deg; }
.post:hover { rotate: 0deg; transform: translateY(-8px); box-shadow: 0 28px 42px -20px rgba(35,22,8,0.55); z-index: 3; }

/* lead = the front-page cutting: bigger, its own heavy top rule, tape at the corner */
.post-lead { rotate: -0.5deg; border-top: 3px solid var(--ink); padding: 30px 34px 28px; margin-bottom: 34px; }
.post-lead::before { left: 46px; transform: rotate(-6deg); }
.post-lead .post-meta { font-size: 11px; }
.post-lead .post-title { font-size: clamp(27px, 3.6vw, 36px); line-height: 1.06; }
.post-lead .post-excerpt { font-size: 17px; max-width: 70ch; margin-top: 12px; }

/* ── Off the clock ── */
.off-grid { display: grid; grid-template-columns: 1fr; gap: 52px; }
.sub-h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 22px; }

/* The flip-cover shelf + library styles live in books.css (shared with books.html). */

.update-list { list-style: none; }
.update-list li { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.update-list li:first-child { border-top: none; padding-top: 0; }
.update-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--ink3); padding-top: 3px; }
.update-list div { font-size: 15.5px; color: var(--ink2); line-height: 1.55; }
.update-list b { color: var(--ink); font-weight: 500; font-family: var(--body); }

/* Off the clock is "Side B" — flipped to the teal channel */
.offclock .sec-index { color: var(--teal); border-color: var(--teal); }
.offclock .sec-head { position: relative; }
.offclock .sec-head::after {
  content: "\25C9 SIDE B \00b7 THE PERSON"; position: absolute; right: 0; bottom: 22px;
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.13em;
  color: var(--teal);
}
.offclock .sub-h { color: var(--teal); }
.offclock .book-stars { color: var(--teal); }
.offclock .update-date { color: var(--teal); }

/* ── Floating tape counter ── */
.playback {
  position: fixed; right: 20px; bottom: 18px; z-index: 120;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--ink2);
  background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line2);
  border-radius: 20px; padding: 7px 14px 7px 10px; backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px -16px rgba(25,18,8,0.45);
}
.pb-reel {
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink3);
  background:
    radial-gradient(circle at center, var(--ink2) 0 2.5px, transparent 2.6px),
    conic-gradient(from 0deg, var(--ink3) 0 12deg, transparent 12deg 78deg, var(--ink3) 78deg 102deg, transparent 102deg 168deg, var(--ink3) 168deg 192deg, transparent 192deg 258deg, var(--ink3) 258deg 282deg, transparent 282deg 348deg, var(--ink3) 348deg 360deg);
  animation: reelspin 3s linear infinite;
}
.pb-label { color: var(--accent); }
.playback.side-b .pb-label { color: var(--teal); }
.pb-time { color: var(--ink3); }

@media (max-width: 720px) {
  .playback { display: none; }
  section { padding: 56px 0; }
  .hero { padding: 112px 0 20px; }
  .hero-main { grid-template-columns: 1fr; gap: 34px; }
  .hero-art { justify-content: flex-start; }
  .cassette { max-width: 300px; }
  .hero-lead { font-size: 18px; }
  .hero-facts { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .figures { grid-template-columns: 1fr; }
  .off-grid { grid-template-columns: 1fr; gap: 40px; }
  .game { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .game-icon { width: 40px; height: 40px; }
  .game-stat { display: none; }
  .entry { grid-template-columns: 66px 1fr; gap: 16px; padding: 34px 0; }
  .entry-badge { position: static; }
  .badge-mono { font-size: 24px; }
  .badge-cap { display: none; }
  .badge-tag { font-size: 7.5px; margin-top: 6px; }
  .entry-head { gap: 6px; }
  .post-lead .post-title { font-size: 26px; }
  .post-list { grid-template-columns: 1fr; }
  .filmstrip { height: 26px; }
}

@media (max-width: 560px) {
  .disciplines { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
}