/* ============================================
   EZG — PORTFOLIO VOL. 04
   Layout: fixed side index + editorial content
   ============================================ */

/* ---------- TOKENS ---------- */
:root {
  --bg:        #f3efe6;
  --surface:   #fbf8f2;
  --surface-2: #ece6d9;
  --ink:       #15171f;
  --muted:     #5c5f6b;
  --line:      #d8d0bf;
  --accent:    #e0561c;   /* court orange */
  --accent-ink:#b3400d;   /* text-safe accent */
  --accent-fill:#b3400d;  /* solid accent behind text (white on #e0561c is only 3.8:1) */
  --on-accent: #fff;      /* text on --accent-fill */
  --navy:      #1f2d5c;   /* Royals navy */
  --gold:      #e7b43a;
  --ok:        #157a45;   /* form success, 5:1 on --surface */
  --err:       #c62828;   /* form error, 5.3:1 on --surface */
  --shadow:    0 1px 0 rgba(21,23,31,.04), 0 12px 32px -18px rgba(21,23,31,.25);

  /* one family, Anek Latin, at two widths: condensed and heavy for titles, normal width for reading.
     JetBrains Mono is for the terminal only. */
  --f-display: 'Anek Latin', 'Arial Narrow', sans-serif;
  --f-ui:      'Anek Latin', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --display-wdth: 78%;   /* section titles and the cover name */
  --title-wdth:   88%;   /* card and entry titles: a little wider at their smaller size */

  /* five sizes: the cover name (sized to its column, see .cover-name) and these four */
  --step-small: .875rem;                                   /* 14px: labels, notes, buttons */
  --step-body:  1.0625rem;                                 /* 17px: all running text */
  --step-lead:  clamp(1.25rem, 1.1rem + .6vw, 1.625rem);   /* 20–26px: card titles, the lede, the ticker */
  --step-head:  clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);     /* 40–72px: section titles, Dhaka Rush and FameLab */

  --rail-w: 264px;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --card-pad: 26px;      /* inner padding of the cards (now, project cards, working with me, form); 20px on phones */
  --cover-shape: 32px;   /* cover photo border-radius (soft rounded rectangle) */
  --field-line: #8a8272; /* form field borders: 3.32:1 on --bg, 3.59:1 on --surface (3:1 needed) */
  color-scheme: light;
}
/* dark theme: follows the system setting (there is no on-page switch) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --surface: #171a21; --surface-2: #1e222b;
    --ink: #ece7dd; --muted: #9b9ea9; --line: #2b2f39;
    --accent: #ff7336; --accent-ink: #ff8d5c; --navy: #9fb2ff; --gold: #f2c65a;
    --accent-fill: #ff7336; --on-accent: #0f1115; --ok: #6fdc9b; --err: #ff8080;
    --field-line: #6b7383;   /* 3.96:1 on --bg, 3.65:1 on --surface */
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--step-body);   /* 17px. Type is in rem throughout so it follows the reader's browser text size */
  line-height: 1.55;
  font-variant-numeric: tabular-nums;   /* dates, the clock and #23 line up */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: normal; font-weight: 600; }   /* Anek has no italic, and a slanted roman would be fake */

/* every title is set in the display cut: condensed, heavy, tight */
.mark, .clock-time, .cover-name, .ticker-track, .section-title, .now-title, .project-title,
.entry-body h3, .entry-body h4, .log-subhead, .work-title, .email,
.projects-title, .media-big, .story-title, .story h3 {
  font-family: var(--f-display); font-stretch: var(--title-wdth); font-weight: 600;
  line-height: 1.1; letter-spacing: -.005em;
}
::selection { background: var(--accent-fill); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* read by screen readers, not shown */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
  z-index: 60;
}

.meta-label { font-size: var(--step-small); color: var(--muted); }
.inline {
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.inline:hover { text-decoration-thickness: 2px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 500; font-size: var(--step-body); line-height: 1.3; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ink);
  transition: transform .2s, background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-sm { padding: 8px 16px; font-size: var(--step-small); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.chip-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); font-size: var(--step-small);
  transition: border-color .2s, background-color .2s;
}
.chip-btn:hover { border-color: var(--ink); }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* pause bars. The label and icon never change: a toggle's name stays "Pause motion" and the
   filled (aria-pressed) state shows that motion is paused */
.motion-icon { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
:root.motion-paused .ticker-track,
:root.motion-paused .status-dot { animation-play-state: paused; }

/* ============================================
   RAIL
   ============================================ */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
  display: flex; flex-direction: column;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  z-index: 50;
}
.rail-top { display: flex; justify-content: space-between; align-items: center; }
.mark { font-size: var(--step-lead); font-weight: 700; text-decoration: none; }
.mark-dot { color: var(--accent); }
.rail-toggle { display: none; }

.rail-body { display: flex; flex-direction: column; flex: 1; margin-top: 28px; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step-small); color: var(--muted);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2fb36b;
  box-shadow: 0 0 0 0 rgba(47,179,107,.5);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,179,107,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(47,179,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,179,107,0); }
}

.index { display: flex; flex-direction: column; margin-top: 44px; }
.index-link {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; text-decoration: none; color: var(--muted);
  font-size: var(--step-body); transition: color .2s, padding-left .25s;
}
.index-link::before {
  content: attr(data-n);
  font-size: var(--step-small); color: var(--muted);
}
.index-link:hover { color: var(--ink); }
.index-link.is-active { color: var(--ink); padding-left: 10px; font-weight: 500; }
.index-link.is-active::after {
  content: ''; position: absolute; left: -28px; top: 50%;
  width: 22px; height: 2px; background: var(--accent);
}

.rail-meta { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.clock { display: flex; flex-direction: column; gap: 2px; }
.clock-time { font-size: var(--step-lead); }
.rail-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rail-biz { font-size: var(--step-small); color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rail-biz:hover { text-decoration-thickness: 2px; }

/* ============================================
   MAIN
   ============================================ */
/* only pages with the side rail make room for it (the privacy page has none).
   The footer sits after <main> so it is the page's contentinfo landmark. */
.rail ~ main, .rail ~ .footer { margin-left: var(--rail-w); }

/* ---------- COVER ---------- */
.cover {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 64px var(--gutter) 48px;
}
/* the name is sized to its column: "Elijah Z.", the longer line, is 2.4em wide, so 30cqi fills
   about 72% of the column (107px on a 390px phone), up to 176px on wide screens */
.cover-text { container-type: inline-size; }
.cover-name {
  font-stretch: var(--display-wdth); font-weight: 700;
  font-size: clamp(3.5rem, 30cqi, 11rem);
  line-height: .9; letter-spacing: -.02em;
  margin: 0 0 28px; margin-left: -.03em;   /* optical: the E's stem sits on the text edge below */
}
.cover-name .line { display: block; }
.cover-name .accent { color: var(--accent); }
.cover-lede { font-size: var(--step-lead); line-height: 1.35; color: var(--muted); max-width: 30ch; }
.rotator {
  color: var(--ink); font-weight: 600;
  display: inline-block; min-width: 9ch;
  text-decoration: underline 2px var(--accent); text-underline-offset: 6px;
  transition: opacity .25s, transform .25s;
}
.rotator.is-out { opacity: 0; transform: translateY(-6px); }
.cover-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

.cover-photo { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.cover-photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--cover-shape);
  box-shadow: var(--shadow);
}
.cover-photo figcaption { margin-top: 12px; font-size: var(--step-small); color: var(--muted); text-wrap: balance; }

/* ---------- TICKER ---------- */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--ink); color: var(--bg);
}
.ticker-track {
  display: flex; align-items: center; width: max-content; gap: 28px; padding: 14px 0;
  font-size: var(--step-lead); font-stretch: var(--display-wdth); white-space: nowrap;
  animation: ticker 36s linear infinite;
}
.ticker-track i { width: 8px; height: 8px; background: var(--accent); }   /* a square separator, like the bullets */
@keyframes ticker { to { transform: translateX(-50%); } }
/* dark mode: a quiet band in the surface color, not a bright inverted strip */
@media (prefers-color-scheme: dark) {
  :root .ticker { background: var(--surface-2); color: var(--ink); }
}

/* ---------- SECTIONS ---------- */
/* 104px a side at 1440 (about 210px between one section's last line and the next title, under a quarter of a 900px screen) */
.section { padding: clamp(64px, 8vw, 104px) var(--gutter); border-bottom: 1px solid var(--line); }
/* title over subtitle, both on the content edge (the section numbers live in the side index) */
.section-head {
  display: grid; row-gap: 10px;
  margin-bottom: clamp(36px, 5vw, 56px); max-width: 900px;
}
.section-title { font-size: var(--step-head); font-stretch: var(--display-wdth); font-weight: 700; line-height: .95; letter-spacing: -.015em; }
.section-sub { font-size: var(--step-lead); line-height: 1.35; color: var(--muted); max-width: 40ch; text-wrap: pretty; }

/* ---------- NOW (what I'm working on, top of At a glance) ---------- */
/* a card: heading + date on the left, the list on the right
   (stacked at 1320px and below). The list reads down, then across, in up to two columns.
   Static: no motion beyond the shared .reveal. */
.now {
  display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 14px 32px; align-items: start;
  margin-bottom: 16px; padding: var(--card-pad);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.now-head { display: flex; flex-direction: column; gap: 6px; }
.now-title { font-size: var(--step-lead); text-wrap: balance; }
.now-stamp { font-size: var(--step-small); color: var(--muted); }
.now-list { list-style: none; columns: 2 280px; column-gap: 32px; }
.now-list li { position: relative; padding-left: 18px; margin-bottom: 12px; line-height: 1.45; break-inside: avoid; }
.now-list li:last-child { margin-bottom: 0; }
/* bullets: a small accent square (a glyph like ✦ isn't in the font and would come from a system face) */
.now-list li::before, .entry-points li::before, .also-list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; background: var(--accent);
}
/* title on the first line; Elijah's note, where there is one, on the second */
.now-what { font-weight: 500; }
a.now-what { padding-block: 5px; text-decoration: underline;   /* padding: a 29px tall hit area; inline, so the lines don't move */ text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.now-what:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
.now-arrow { margin-left: 4px; color: var(--accent-ink); }
.now-note { display: block; color: var(--muted); }

/* ---------- PROJECTS (carousel, under "now" in At a glance) ---------- */
/* a native horizontal scroller that snaps card by card. About 2.2 cards show on a wide screen and
   1.2 on a phone, so the cut-off card says there is more. No scrollbar: the arrows and the page
   control below do that job (two indicators on one axis would repeat each other). */
.projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: clamp(48px, 6vw, 72px) 0 20px; }
.projects-title { font-size: var(--step-head); font-stretch: var(--display-wdth); font-weight: 700; line-height: .95; letter-spacing: -.015em; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); font-size: var(--step-body);
  transition: background-color .2s, color .2s, opacity .2s;
}
.carousel-btn:hover { background: var(--ink); color: var(--bg); }
.carousel-btn[aria-disabled="true"] { opacity: .35; cursor: default; background: transparent; color: var(--ink); }

.project-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(30rem, 84%); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.project-track::-webkit-scrollbar { display: none; }
/* position: relative keeps the absolutely placed .sr-only text inside the card, so the row clips it;
   without it, the labels of off-screen cards would widen the whole page */
.project {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
}
.project-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.project-media video, .project-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the balloon dog is a cut-out on white: shown whole on a flat light ground */
.project-media--photo { background: #eef1f2; }
.project-media--photo img { object-fit: contain; }
@media (prefers-color-scheme: dark) { :root .project-media--photo { filter: brightness(.88); } }
/* projects without a photo yet: a field of colour carrying the project's own words or figure */
.project-media--field { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: var(--card-pad); }
.project-media--famelab { background: var(--navy); color: #f4f1ea; }
@media (prefers-color-scheme: dark) { :root .project-media--famelab { background: #1b2550; } }
.project-media--council { background: var(--accent-fill); color: var(--on-accent); }
/* FameLab's corner ribbon: a gold band across the top-right corner (the media box clips its ends) */
.ribbon {
  position: absolute; top: 30px; right: -54px; width: 220px; padding: 7px 0;
  transform: rotate(45deg); background: var(--gold); color: #170f1f;
  font-size: var(--step-small); font-weight: 700; line-height: 1.2; text-align: center;
}
.media-big { font-size: var(--step-head); font-stretch: var(--display-wdth); font-weight: 700; line-height: .95; letter-spacing: -.015em; }
.media-note { font-size: var(--step-small); }

.project-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: var(--card-pad); }
.project-title { font-size: var(--step-lead); }
.project-meta { font-size: var(--step-small); color: var(--muted); }
.project-body > p:not(.project-meta) { text-wrap: pretty; }
/* min-height: one 44px row, so "Read more" sits at the same height on cards with and without a link */
.project-actions { margin-top: auto; padding-top: 12px; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.project-link {
  display: inline-block; padding-block: 11px; font-size: var(--step-small); font-weight: 500;   /* a 44px tall hit area */
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.project-link:hover { text-decoration-thickness: 2px; }
/* "Read the full story" in the log: a text button in the link colour, 44px tall */
.story-btn {
  margin-top: 4px; padding: 11px 0; background: none; border: 0; cursor: pointer;
  font-size: var(--step-small); font-weight: 600; color: var(--accent-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.story-btn:hover { text-decoration-thickness: 2px; }

/* page control: a dot per card, each a 44px target; the filled dot is the card at the start of the row */
.carousel-dots { display: flex; justify-content: center; margin-top: 8px; }
.carousel-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.carousel-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .5; transition: opacity .2s, background-color .2s; }
.carousel-dot:hover::before { opacity: 1; }
.carousel-dot[aria-current="true"]::before { background: var(--ink); opacity: 1; }

/* ---------- STORIES (the "Read more" dialogs) ---------- */
/* a modal sheet: one task (reading), Close at the top; Esc or a click outside also closes it */
.story {
  width: min(720px, calc(100% - 32px)); max-height: min(88dvh, 960px); margin: auto; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.4); overscroll-behavior: contain;   /* it floats over the page */
}
.story::backdrop { background: rgba(10,11,14,.72); }
html:has(.story[open]) { overflow: hidden; }   /* the page behind stays put while reading */
.story-inner { padding: clamp(24px, 5vw, 48px); }
.story-close { position: sticky; top: 0; float: right; margin: -8px -8px 8px 16px; background: var(--surface); z-index: 1; }
.story-title { font-size: var(--step-head); font-stretch: var(--display-wdth); font-weight: 700; line-height: .95; letter-spacing: -.015em; }
.story-sub { margin-top: 10px; font-size: var(--step-lead); line-height: 1.35; color: var(--muted); }
.story h3 { margin-top: 36px; font-size: var(--step-lead); }
.story p { margin-top: 12px; max-width: 62ch; text-wrap: pretty; }
.story .story-lead { margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; }
.story-points { list-style: none; display: grid; gap: 8px; margin-top: 14px; max-width: 62ch; }
.story-points li { position: relative; padding-left: 18px; }
.story-points li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent); }
.story .story-links { margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .story[open] { animation: fadeUp .3s ease; }
}

/* ---------- OFF THE CLOCK: the tabs beside the basketball photo ---------- */
.offclock-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.offclock-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 20%; border-radius: var(--radius); }
.offclock-photo figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 960px) {
  .offclock-body { grid-template-columns: minmax(0, 1fr); }
  .offclock-photo { max-width: 360px; }
}

/* ---------- LOG ---------- */
.log-controls { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.filters, .log-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.filter {
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; font-size: var(--step-small);
  transition: border-color .2s, background-color .2s, color .2s;
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.log { list-style: none; border-top: 1px solid var(--line); }
.entry {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.entry[hidden] { display: none; }
.entry-when { font-size: var(--step-small); color: var(--muted); padding-top: 6px; }
.entry-body h3, .entry-body h4 { font-size: var(--step-lead); margin-bottom: 6px; }
.entry-body p { color: var(--muted); max-width: 36em; text-wrap: pretty; }
.entry-body .entry-meta { font-size: var(--step-small); font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.entry-points { list-style: none; display: grid; gap: 4px; max-width: 62ch; }
.entry-points li { position: relative; padding-left: 18px; color: var(--muted); }
.log-group[hidden], .log-also[hidden] { display: none; }
.log-subhead { font-size: var(--step-lead); color: var(--ink); margin-top: 44px; padding-bottom: 12px; }
.also-list {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px 32px; border-top: 1px solid var(--line); padding-top: 18px;
}
.also-list li { position: relative; padding-left: 18px; color: var(--muted); text-wrap: pretty; }
.entry-tag {
  font-size: var(--step-small); color: var(--muted);
  border: 0; padding: 0; white-space: nowrap;   /* a plain label: only the highlight's tag is a filled badge, so neither looks like a filter button */
}
.log-group .entry-tag { display: none; }   /* the group's own heading already says "Education" */
.entry-highlight .entry-when { color: var(--ink); }
.entry-highlight .entry-tag { padding: 4px 10px; border: 1px solid var(--accent-fill); border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); }
.log-empty { color: var(--muted); padding: 24px 0; }

/* ---------- TOOLKIT ---------- */
.toolkit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.skill-group dt {
  font-weight: 600; color: var(--ink); padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.skill-group dd { padding: 3px 0; }

/* a working terminal, so it keeps its monospace face (the page's one exception) */
.terminal {
  background: #12141a; color: #e6e3db; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; font-family: var(--f-mono); font-size: var(--step-small);
  font-variant-numeric: normal;
  border: 1px solid #262a33;
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1b1e26; }
.t-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.t-dot:nth-child(2) { background: #febc2e; }
.t-dot:nth-child(3) { background: #28c840; }
.term-title { margin-left: 10px; color: #8b8f9b; }
.term-body { padding: 18px 18px 4px; height: 300px; overflow-y: auto; scroll-behavior: smooth; }
.term-body p { margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.t-prompt { color: #ff8d5c; margin-right: 8px; }
.t-out { color: #cfd2da; }
.t-dim { color: #8b8f9b; }
.t-dim b { color: #f2c65a; font-weight: 500; }
.t-ok { color: #6fdc9b; }
.t-err { color: #ff8080; }
.term-body a { color: #f2c65a; }
.term-input { display: flex; align-items: center; padding: 10px 18px 16px; }
.term-input input { flex: 1; min-width: 0; background: none; border: 0; border-bottom: 2px solid transparent; padding: 2px 0; outline: none; color: #fff; caret-color: #ff8d5c; }
/* focus: an orange underline in the prompt color (~8:1 on the terminal background) */
.term-input input:focus { border-bottom-color: #ff8d5c; }
.term-input input::placeholder { color: #8b8f9b; }

/* ---------- TABS ---------- */
/* the panels share one grid cell, so the box is always as tall as the longest panel and switching
   tabs never moves the page below (a fixed min-height would go stale when the on-clock lines are published).
   Unselected panels stay laid out but invisible: visibility hides them from screen readers, tab order and find. */
.tabs { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr); }
.tab-list, .tab-panel { grid-column: 1; }
.tab-panel { grid-row: 2; }
.tab-panel[hidden] { display: block; visibility: hidden; animation: none; }
/* the tabs wrap to a second row rather than scroll out of sight (only with a large browser text size, or under 360px) */
/* the rule under the list is an inset shadow, so the selected tab's 2px bar sits on it inside the
   (scrolling, so clipping) list instead of hanging 1px below it and being cut in half */
.tab-list { display: flex; flex-wrap: wrap; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.tab-list [role="tab"] {
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: 14px 18px; font-size: var(--step-body); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: 0;
  transition: color .2s, border-color .2s;
}
.tab-list [role="tab"]:hover { color: var(--ink); }
.tab-list [role="tab"]:focus-visible { outline-offset: -3px; }   /* the list scrolls, so an outer ring gets clipped */
.tab-list [role="tab"][aria-selected="true"] { color: var(--ink); border-color: var(--accent); font-weight: 500; }
/* 704px: about 30em of the 24px paragraph, so the On the clock line below shares the paragraph's measure */
.tab-panel { max-width: 704px; padding: 36px 0 0; animation: fadeUp .4s ease; }
/* Elijah's own paragraphs are the content here: set large, in full ink */
.tab-panel p { color: var(--ink); max-width: none; text-wrap: pretty; font-size: var(--step-lead); line-height: 1.45; }
/* "On the clock" line: links each personal note to the work it shaped (hidden until written) */
.tab-panel p.on-clock { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--step-body); line-height: 1.55; color: var(--muted); }
.on-clock-link {
  margin-right: 8px; padding-block: 6px; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-weight: 600; color: var(--accent-ink);
}
.on-clock-link[href]:hover { text-decoration-thickness: 2px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; container-type: inline-size; }
/* sized to the card (the address is ~11.3em wide) so it stays on one line; if it ever can't,
   the <wbr> lets it break after the @, and overflow-wrap only splits the word as a last resort */
.email {
  font-size: var(--step-lead);
  text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s;
}
.email:hover { background-size: 100% 2px; }
.contact-facts { width: 100%; margin-top: 24px; border-top: 1px solid var(--line); }
.contact-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-facts dt { color: var(--muted); }
.contact-facts dd { text-align: right; }

.form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--card-pad); display: flex; flex-direction: column; gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--step-small); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--field-line); background: var(--bg);   /* --line is ~1.4:1; fields need 3:1 (WCAG 1.4.11) */
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 2px;   /* a real outline, so the ring survives forced colors */
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--err); }
.form-note { font-size: var(--step-small); color: var(--muted); }
.form .btn { align-self: flex-start; }
.form-status { font-size: var(--step-small); min-height: 1.4em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }

/* ---------- COVER PROOF LINE ---------- */
/* small lines under the cover lede: one link per line at every width, so no "·"
   is left hanging at a line end (the "·" separators stay in the markup, hidden).
   1px padding makes each row a 28px hit area. */
.cover-proof { margin-top: 18px; font-size: var(--step-small); font-weight: 500; line-height: 1.625rem; color: var(--muted); }
.cover-proof a {
  display: block; width: fit-content; padding-block: 1px; white-space: nowrap; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.cover-proof a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
.cover-proof-sep { display: none; }
@media (max-width: 640px) { .cover-proof a { white-space: normal; } }
@media print { .cover-proof { display: none !important; } }

/* ---------- WORKING WITH ME (top of Contact) ---------- */
/* a card like the "now" block: heading on the left, the text on the right (stacked at 1180px and below) */
.work {
  display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 14px 32px; align-items: start;
  margin-bottom: clamp(24px, 4vw, 48px); padding: var(--card-pad);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  scroll-margin-top: 24px;
}
.work-title { font-size: var(--step-lead); }
.work-body { display: grid; gap: 10px; max-width: 64ch; }
.work-body p { color: var(--muted); }
.work-body .work-lead { color: var(--ink); font-size: var(--step-lead); line-height: 1.35; }
/* a wrapping row: the label, then the links, spaced by the gap (the "·" separators are hidden, so none dangles) */
.work-body .work-sites {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.work-sites a { white-space: nowrap; }
.work-sep { display: none; }
@media (max-width: 1180px) { .work { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 32px var(--gutter); font-size: var(--step-small); color: var(--muted);
}
.footer .mark { color: var(--ink); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { display: inline-block; padding-block: 3px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 95;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: var(--step-small);
  transition: opacity .25s, transform .25s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- REVEAL ---------- */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1320px) {
  .now { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .toolkit { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  :root { --rail-w: 0px; }
  .rail {
    position: relative; inset: auto; width: auto; height: auto;   /* an ordinary top bar that scrolls away with the page */
    padding: 14px var(--gutter); border-right: 0; border-bottom: 1px solid var(--line);
  }
  .rail-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
    align-items: center;
  }
  .rail-toggle span { width: 16px; height: 1.5px; background: var(--ink); transition: transform .25s; }
  .rail-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .rail-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }
  .rail-body { display: none; margin-top: 16px; padding-bottom: 12px; max-height: calc(100svh - 80px); overflow-y: auto; }
  .rail.is-open .rail-body { display: flex; }
  .index { margin-top: 20px; }
  .index-link { font-size: var(--step-lead); padding: 10px 0; }
  .index-link.is-active::after { display: none; }
  .rail-meta { margin-top: 24px; }
  .rail ~ main { margin-left: 0; }

  .cover { grid-template-columns: 1fr; min-height: auto; padding-top: 40px; row-gap: 40px; }
  .cover-photo { justify-self: start; max-width: 360px; order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* body text stays 17px on phones (Apple's default text size) */
  :root { --card-pad: 20px; }
  /* one column; the tag shares the date's line instead of taking a row of its own */
  .entry { grid-template-columns: 1fr auto; grid-template-areas: "when tag" "body body"; gap: 8px 12px; align-items: center; }
  .entry-when { grid-area: when; padding-top: 0; }
  .entry-body { grid-area: body; }
  .entry-tag { grid-area: tag; justify-self: end; }
  .skills { grid-template-columns: 1fr; }
  .tab-list [role="tab"] { padding: 12px 10px; font-size: var(--step-small); }   /* all three tabs fit down to 360px */
  .term-input input { font-size: 1rem; }   /* below 16px iOS zooms the page when the field is focused */
  .cover-photo { max-width: 100%; }
  /* a shorter crop on phones so the name reaches the first screen (bottom of "Green." at 772px on a
     390x844 screen, 728px on 360x740); 40% keeps his face (about 42% down the photo) near the middle */
  .cover-photo img { aspect-ratio: 1 / 1; max-height: 42svh; object-position: 50% 40%; }
  .footer { flex-direction: column; align-items: flex-start; }
  /* touch targets: 44px tall footer and rail links, taller filter buttons */
  .footer-links a, .rail-biz { padding-block: 11px; }
  .filter { padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-track { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .motion-btn { display: none; }   /* nothing moves, so there is nothing to pause */
}

/* ---------- INCREASED CONTRAST ---------- */
/* darker secondary text and rules (lighter in dark mode), and a thicker focus ring */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --muted: #3f424c; --line: #8a8272; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #c3c6cf; --line: #636a78; }
}
@media (prefers-contrast: more) {
  :focus-visible { outline-width: 3px; }
}

/* ---------- REDUCED TRANSPARENCY ---------- */
/* a solid backdrop behind the story dialogs instead of a see-through one (also with increased contrast) */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .story::backdrop { background: #0a0b0e; }
}

/* ---------- FORCED COLORS (Windows High Contrast) ---------- */
/* the system palette replaces ours; keep the states that were shown only by a fill or a shadow */
@media (forced-colors: active) {
  .rail-toggle span { background: CanvasText; forced-color-adjust: none; }
  .filter.is-active, .chip-btn[aria-pressed="true"] {
    background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none;
  }
  /* the tabs opt out so the unselected tabs' transparent underline stays transparent */
  .tab-list { border-bottom: 1px solid CanvasText; }
  .tab-list [role="tab"] { forced-color-adjust: none; color: CanvasText; background: Canvas; border-bottom-color: transparent; }
  .tab-list [role="tab"][aria-selected="true"] { border-bottom-color: Highlight; box-shadow: inset 0 -2px 0 Highlight; }   /* a 4px bar */
  .tab-list [role="tab"]:focus-visible { outline-color: Highlight; }
}

/* ============================================
   PRINT — one-page résumé from the log
   Fits one A4 or Letter sheet at Chrome's default margins.
   Layout follows assets/resume.pdf: name + contact line on top,
   experience on the left, Education and Also on the right.
   Print sizes stay in px (unlike the screen's rem): the sheet is a fixed size,
   so a large browser text size must not push the résumé onto a second page.
   ============================================ */
@media print {
  /* paper is always light: same selector as the dark theme above and later in the file, so it wins in either theme */
  :root {
    --bg: #fff; --surface: #fff; --ink: #000; --muted: #333; --line: #ccc;
    --accent: #e0561c; --accent-ink: #000; --navy: #1f2d5c; color-scheme: light;
  }
  .rail, .ticker, .cover-photo, .cover-actions, .play-cue, .cover-lede, #glance, #toolkit, #offclock, #contact,
  .log-controls, .log-empty, .footer, .toast, .progress, .skip-link { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  main, .rail ~ main { margin: 0; }
  a { text-decoration: none; }

  /* header: name on the left, contact lines on the right (the Contact section is hidden in print).
     Keep this text in step with the Contact section and the résumé header. */
  .cover { min-height: 0; display: block; padding: 0 0 8px; border-bottom: 1.5px solid #000; }
  .cover-text { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .cover-text::after {
    content: 'elijahgreen3@gmail.com \B7  elijahzgreen.com\A balloonshoppe.org \B7  Dhaka, Bangladesh';
    white-space: pre; text-align: right;
    font-size: 11px; line-height: 1.5; color: #000;
  }
  .cover-name { font-size: 36px; line-height: 1; margin: 0; }
  .cover-name .line { display: inline; }

  /* the log: two columns */
  .section { padding: 0; border: 0; }
  #log {
    display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr; column-gap: 24px; padding-top: 10px;
  }
  #log > * { grid-column: 1 / -1; }
  /* left: Experience, then Also under it; right: Education, then Activities */
  #logList { grid-column: 1; grid-row: 2 / 4; }
  #log .section-head { grid-column: 1; }   /* "Experience" on the left, level with "Education" on the right */
  #logAlso { grid-column: 1; grid-row: 4 / 6; }
  #logEducation { grid-column: 2; grid-row: 1 / 3; }
  #logActivities { grid-column: 2; grid-row: 3 / 6; }
  .section-head { margin-bottom: 6px; }
  .section-title { font-size: 20px; }
  .section-sub { display: none; }
  /* on paper the log's heading is a résumé label, "Experience", set like the Education and Also subheads */
  #log .section-title { font-size: 0; line-height: 0; }
  /* résumé labels: small capitals, the one place the page uses them (paper only) */
  #log .section-title::before, .log-subhead {
    font-family: var(--f-ui); font-stretch: 100%; font-weight: 700; font-size: 11px; line-height: 1.35;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  }
  #log .section-title::before { content: 'Experience'; display: block; padding: 4px 0; }
  .web-only { display: none !important; }   /* links that only make sense on screen ("Coverage ↗", "Visit ↗") */

  .log, .log-also { line-height: 1.35; }
  .entry { padding: 6px 0; gap: 12px; grid-template-columns: 76px 1fr; break-inside: avoid; }
  .entry[hidden] { display: grid !important; }
  .log-group[hidden], .log-also[hidden] { display: block !important; }
  .entry-when { font-size: 10.5px; padding-top: 3px; }
  .entry-tag { display: none; }
  .entry-body h3, .entry-body h4 { font-size: 14.5px; line-height: 1.25; margin-bottom: 0; }
  .entry-body p, .entry-points li, .also-list li { font-size: 12px; max-width: none; }
  .entry-body .entry-meta { font-size: 11.5px; margin-bottom: 1px; }
  .entry-points { gap: 0; }
  .entry-points li { padding-left: 13px; }
  /* a border, not a fill: browsers leave backgrounds off the page by default */
  .entry-points li::before, .also-list li::before { background: none; border: 2px solid #000; top: .5em; width: 0; height: 0; }

  /* right column: label (date) above each entry, like the résumé's education block */
  .log-subhead { margin: 0; padding: 4px 0 4px; break-after: avoid; }
  .log-group .entry { grid-template-columns: 1fr; gap: 0; }
  .log-group .entry-when { padding-top: 0; }
  .log-group .entry-when:empty { display: none; }
  #logActivities .log-subhead, #logAlso .log-subhead { margin-top: 12px; }
  .also-list { grid-template-columns: 1fr; padding-top: 6px; gap: 3px; }
  .also-list li { padding-left: 13px; }
}

/* ============================================
   INTERACTION ADDITIONS: per-field form errors, jump targets,
   decorative rail numbers.
   Kept as one block at the end so the sections above stay as they are.
   ============================================ */
/* the error line under a required field; the "! " is decoration, so it gets empty alt text */
.field-error { font-size: var(--step-small); font-weight: 500; color: var(--err); }
.field-error::before { content: "! "; content: "! " / ""; }
/* invalid fields get a 2px border; 1px less padding keeps them the same size */
.field.is-invalid input, .field.is-invalid textarea { border-width: 2px; padding: 11px 13px; }

/* section headings take focus (tabindex="-1", set by js/main.js) after a terminal "goto" jump,
   so Tab carries on from there. The scroll already shows where you are, so no ring on the heading. */
:is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

/* the rail's section numbers are decoration: empty alt text keeps "00".."05" out of the link names */
.index-link::before { content: attr(data-n) / ""; }

/* ============================================
   FREE THROW #23 — the terminal's minigame (js/freethrow.js)
   A card that pops over the page: the court on the left, the
   controls and score on the side (stacked on phones). The court
   is drawn in rounded solid shapes in the page's own colours,
   light or dark with the theme.
   ============================================ */
:root {
  --g-wall: #e6dfd1; --g-floor: #f3efe6; --g-key: #1f2d5c; --g-line: #f4f1ea;
  --g-board: #ffffff; --g-arm: #c9c1b0; --g-net: #15171f; --g-flash: #0f1115;
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-wall: #12141a; --g-floor: #1e222b; --g-key: #1b2550;
    --g-board: #ece7dd; --g-arm: #2b3040; --g-net: #ece7dd; --g-flash: #f3efe6;
  }
}

.game {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
  border: 0; background: transparent; color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.game[open] { display: grid; place-items: center; }
.game::backdrop { background: rgba(10,11,14,.8); }
html:has(.game[open]) { overflow: hidden; }

.game-card {
  position: relative; width: min(1120px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr;
  grid-template-areas: "stage head" "stage side"; gap: 20px 28px;
  padding: 20px; border-radius: 24px; background: var(--surface);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);   /* it floats over the page */
}
@media (prefers-reduced-motion: no-preference) {
  .game[open] .game-card { animation: gamePop .45s cubic-bezier(.2,1.15,.3,1); }
}
@keyframes gamePop { from { opacity: 0; transform: translateY(32px) scale(.9); } to { opacity: 1; transform: none; } }

.game-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.game-title { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 700; font-size: 2.5rem; line-height: .95; letter-spacing: -.01em; }
.game-exit {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600; font-size: var(--step-small);
  transition: background-color .2s, color .2s;
}
.game-exit:hover { background: var(--ink); color: var(--bg); }
.game-exit:hover kbd { background: transparent; color: inherit; }
.game kbd { font-family: var(--f-mono); font-size: .8em; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink); }

/* ---- the court ---- */
.game-stage {
  grid-area: stage; position: relative; width: 100%; max-width: calc(100dvh - 72px); aspect-ratio: 1; justify-self: center;
  border-radius: 18px; overflow: hidden; container-type: inline-size;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.game-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-front { z-index: 2; pointer-events: none; }
.g-wall { fill: var(--g-wall); }
.g-floor { fill: var(--g-floor); }
.g-key, .g-banner { fill: var(--g-key); }
.g-line { fill: var(--g-line); opacity: .9; }
.g-board { fill: var(--g-board); }
.g-arm { fill: var(--g-arm); }
.g-pad { fill: var(--accent); }
.g-blocks { fill: none; stroke: var(--g-key); stroke-width: 7; stroke-linecap: round; }
.g-scoreboard { fill: #05060a; }
.g-sb-label { fill: #9b9ea9; font-family: var(--f-ui); font-weight: 600; font-size: 12px; }
.g-sb-num { fill: var(--gold); font-family: var(--f-display); font-stretch: 78%; font-weight: 700; font-size: 30px; }
.g-target { fill: none; stroke: var(--accent); stroke-width: 5; }
.g-rim { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.g-rim-fill { fill: var(--accent); }
.g-banner-num { fill: #f4f1ea; font-family: var(--f-display); font-stretch: 78%; font-weight: 700; font-size: 34px; }
.g-net { fill: none; stroke: var(--g-net); stroke-opacity: .75; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 0; }
.g-net.is-swish { animation: gameNet .6s cubic-bezier(.2,.9,.3,1); }
.g-rim-front { transform-box: fill-box; transform-origin: 50% 50%; }
.g-rim-front.is-hit { animation: gameClang .32s ease; }
.game-stage.is-shake { animation: gameShake .3s ease; }
.g-ball { fill: #ff7336; }
.g-ball-shade { fill: #e0561c; }
.g-seams path { fill: none; stroke: #3b1608; stroke-opacity: .6; stroke-width: 3.4; stroke-linecap: round; }

.game-ball { position: absolute; left: 50%; top: 91.5%; width: 17%; aspect-ratio: 1; z-index: 3; transform: translate(-50%, -50%); will-change: left, top, transform; }
.game-ball.is-behind { z-index: 1; }
.game-ball svg { display: block; width: 100%; height: 100%; }
.game-spin { transform-origin: 50% 50%; }
.game-ball.is-flying .game-spin { animation: gameSpin .6s linear infinite reverse; }
.game-shadow { position: absolute; left: 50%; top: 95.5%; width: 15%; height: 3%; border-radius: 50%; background: rgba(0,0,0,.28); transform: translate(-50%, -50%); opacity: .75; }

/* load-shedding: the gym goes dark, with a brief flicker about once a second */
.game-lights { position: absolute; inset: 0; z-index: 4; background: #05060a; opacity: 0; pointer-events: none; transition: opacity .25s; }
.game-lights.is-out { opacity: .9; }
.game-lights.is-out.is-flicker { opacity: .15; transition: none; }

.game-callout {
  position: absolute; left: 50%; top: 77%; z-index: 5; padding: .14em .45em .06em; border-radius: .26em;
  background: var(--g-key); color: var(--gold);
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 700; font-size: 11cqi; line-height: 1; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%); pointer-events: none;
}
.game-callout[data-tone="miss"] { color: #f4f1ea; }
.game-callout[data-tone="neutral"] { color: #f4f1ea; background: #05060a; }
.game-callout.is-on { animation: gameCall 1.15s cubic-bezier(.2,.9,.3,1) forwards; }

.game-result {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.game-result.is-on { opacity: 1; visibility: visible; }
.game-result-points { font-family: var(--f-display); font-stretch: 78%; font-weight: 700; font-size: 30cqi; line-height: .82; letter-spacing: -.02em; }
.game-result-points small { margin-left: .12em; font-size: .3em; color: var(--muted); }
.game-result-verdict { font-family: var(--f-display); font-stretch: 88%; font-weight: 600; font-size: max(1.375rem, 6cqi); }
.game-result-best { font-size: var(--step-small); color: var(--muted); }
.game-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.game-result .game-exit { height: 56px; padding: 0 24px; }

/* ---- the side: controls, score, how to play ---- */
.game-side { grid-area: side; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.game-controls { display: grid; gap: 16px; }
.game-meter { position: relative; height: 22px; border-radius: 11px; background: var(--surface-2); }
.game-zone { position: absolute; top: 0; bottom: 0; border-radius: 11px; background: rgba(242,198,90,.42); }
.game-zone-core { position: absolute; top: 0; bottom: 0; left: 32.5%; right: 32.5%; border-radius: 11px; background: var(--gold); }
.game-marker { position: absolute; top: -7px; bottom: -7px; left: -3px; width: 6px; border-radius: 3px; background: var(--ink); will-change: transform; transition: opacity .15s; }
.game-meter.is-dark .game-marker { opacity: 0; }
.game-meter.is-dark.is-flicker .game-marker { opacity: 1; transition: none; }
.game-shoot {
  height: 56px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 1.125rem;
  transition: transform .15s, opacity .2s, filter .2s;
}
.game-shoot:hover { filter: brightness(1.08); }
.game-shoot:active { transform: scale(.97); }
.game-shoot[disabled] { opacity: .45; cursor: default; transform: none; filter: none; }

.game-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.game-score dt { font-size: var(--step-small); color: var(--muted); }
.game-score dd { font-family: var(--f-display); font-stretch: 78%; font-weight: 700; font-size: 2.75rem; line-height: .95; }
.game-score dd small { font-size: .5em; color: var(--muted); }
.game-dots { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.game-dot { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--muted); opacity: .55; transition: background-color .3s, border-color .3s, opacity .3s, transform .3s; }
.game-dot.is-dark-slot { border-color: var(--gold); }
.game-dot.is-now { opacity: 1; transform: scale(1.25); border-color: var(--ink); }
.game-dot.is-dark-slot.is-now { border-color: var(--gold); }
.game-dot.is-made { opacity: 1; background: var(--accent); border-color: var(--accent); }
.game-dot.is-made-dark { opacity: 1; background: var(--gold); border-color: var(--gold); }
.game-dot.is-miss { opacity: .3; }
.game-help { margin-top: auto; display: grid; gap: 10px; font-size: var(--step-small); line-height: 1.5; color: var(--muted); }
.game-help strong { color: var(--ink); }

/* a made shot: the whole screen flashes the opposite of the theme (js/freethrow.js skips it for reduced motion) */
.game-flash { position: fixed; inset: 0; z-index: 20; background: var(--g-flash); opacity: 0; pointer-events: none; }
.game-flash.is-on { animation: gameFlash .5s ease-out; }

@keyframes gameSpin { to { transform: rotate(360deg); } }
@keyframes gameNet { 0% { transform: scale(1, 1); } 30% { transform: scale(.86, 1.3); } 65% { transform: scale(1.04, .94); } 100% { transform: scale(1, 1); } }
@keyframes gameClang { 30% { transform: translateY(-2px); } 60% { transform: translateY(1px); } }
@keyframes gameShake { 30% { transform: translateY(-3px); } 60% { transform: translateY(2px); } }
@keyframes gameFlash { 0% { opacity: 0; } 14% { opacity: .92; } 100% { opacity: 0; } }
@keyframes gameCall {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.85); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* phones and narrow windows: title and Exit, then the court, then the controls */
@media (max-width: 860px) {
  .game { padding: 8px; }
  .game-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "side"; gap: 14px; padding: 14px; border-radius: 20px; }
  .game-title { font-size: 2rem; }
  .game-stage { max-width: 100%; }
  .game-side { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-meter.is-dark .game-marker { opacity: .35; }
  .game-callout.is-on { animation: none; opacity: 1; }
  .g-net.is-swish, .g-rim-front.is-hit, .game-stage.is-shake, .game-ball.is-flying .game-spin { animation: none; }
}

/* ---------- the cues that lead to the game ---------- */
kbd { font-family: var(--f-mono); font-size: .85em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.play-cue { margin-top: 16px; }
.play-cue kbd { background: var(--surface-2); }
.term-wrap { display: grid; gap: 14px; min-width: 0; }
.term-cue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); }
.term-cue p { font-weight: 500; }
.photo-cue { margin-top: 4px; }