/* guerz.lol — shared stylesheet
   LiveJournal-inspired system: peach (#F4AD7D) + lavender (#b3a8cc)
   Fonts: Recursive (display/titles/eyebrows), Space Grotesk (body), IBM Plex Mono (labels/mono) */

@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@500;700&family=Space+Mono:wght@400;700&family=Platypi:ital,wght@0,300..800;1,300..800&family=Orelega+One&family=Special+Gothic&family=Special+Gothic+Expanded+One&display=swap');

:root {
  --peach: #F4AD7D;
  --lavender: #b3a8cc;
  --remix: oklch(0.79 0.075 25);
  --ink: #3a2b22;
  /* burgundy — deep and warm, red-leaning, not a dusty rose */
  --wine: #6a1f2e;
  --wine-ink: #fdf0e4;   /* cream text on wine — 10.2:1 */
  --wine-quiet: #b3a8cc; /* the site lavender, which clears 5:1 on this depth */

  --bg: oklch(0.94 0.035 55);
  --bg-day: oklch(0.94 0.035 55);
  --soft-black: #2b2622;
  --paper: #ffffff;
  --paper2: #fdf0e4;
  --text: #3a2b22;
  --muted: #6a5d94; /* 5.2:1 on paper — SC 1.4.3 */
  --shadow: #3a2b22;
  --focus-ring: #3a2b22;
}

html[data-theme="night"] {
  --bg: #17131f;
  --paper: #221d2d;
  --paper2: #241f30;
  --text: #eee6f5;
  --muted: #b3a8cc;
  --remix: oklch(0.62 0.075 25);
  --shadow: #000000;
  --wine: #7a2434;       /* lifted a hair at night so it doesn't sink into the dark bg */
  --wine-ink: #f6e9dd;
  --wine-quiet: #cfc6e0;
  --focus-ring: #e8b48f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; text-decoration: underline; font-family: 'Space Grotesk', sans-serif; }

img { max-width: 100%; display: block; }

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lavender); border: 2px solid var(--bg); }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 20; }

.topbar { display: flex; }
.topbar-left {
  flex: 1; background: var(--peach); padding: 8px 12px 8px 20px;
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.brand {
  font: 800 18px 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink); white-space: nowrap; text-decoration: none;
}
.topbar-right {
  flex: 1; background: var(--lavender); padding: 8px 20px 8px 12px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.toggle {
  display: flex; background: #fdf5ee; border: none;
  font: 700 11px 'IBM Plex Mono', monospace; overflow: hidden;
}
.toggle button {
  padding: 4px 8px; border: none; background: none; color: var(--ink);
  font: inherit; cursor: pointer; user-select: none;
}
.toggle button.is-active { background: var(--ink); color: var(--peach); }

.nav {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 7px 20px;
  font: 800 13px 'Recursive', sans-serif; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); background: #fdf5ee; border-bottom: none;
}

.marquee {
  overflow: hidden; white-space: nowrap; background: #fdf5ee;
  border-bottom: 2px solid var(--muted); padding: 4px 20px;
}
.marquee span {
  display: inline-block; animation: marquee 48s linear infinite;
  font: 700 12.5px 'IBM Plex Mono', monospace; color: var(--muted);
}

/* ---------- layout ---------- */
.container {
  max-width: 1080px; margin: 0 auto; padding: 20px 24px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.container--wide { max-width: 1160px; }

/* ---------- generic card ---------- */
.card {
  background: var(--paper); border: none;
  box-shadow: 5px 5px 0 var(--shadow); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.card--peach   { box-shadow: 5px 5px 0 var(--peach); }
.card--lavender{ box-shadow: 5px 5px 0 var(--lavender); }
.card--slate   { box-shadow: 5px 5px 0 #7d6fa3; }
.card--sm      { box-shadow: 4px 4px 0 var(--peach); padding: 12px; }
/* background modifiers — replace the old inline style="background:...;color:..." on cards */
.card--bg-peach    { background: var(--peach);    color: var(--ink); } /* peach card, dark ink text */
.card--bg-lavender { background: var(--lavender); color: var(--ink); } /* lavender card, dark ink text */
.card--hero        { text-align: center; }                            /* centers every line inside this one card (homepage card one) */

/* ---------- wine card (guerzbook) ---------- */
/* background + text ride on the tokens above; peach shadow is the warm counterpoint */
.card--wine {
  background: var(--wine); color: var(--wine-ink);
  box-shadow: 5px 5px 0 var(--peach);
}
/* the guestbook bits inside default to ink/muted, which would sink into the wine —
   these four lines re-point them at the light tokens */
.card--wine .guestbook-user { color: var(--peach); }   /* 6:1 on the deep wine */
.card--wine .guestbook-reply-user { color: var(--wine-quiet); }
.card--wine .form-status--ok { color: #b9e3ad; }
.card--wine .form-status--err { color: #ffb9ab; }
/* peach button reads as the clear "do this" against the dark card */
.card--wine .button { background: var(--peach); color: var(--ink); }
/* an ink focus ring would vanish on wine, so switch it to peach inside this card */
.card--wine :focus-visible { outline-color: var(--peach); }
/* the "guerzbook" label: eyebrows default to muted purple, which sinks into wine, so go cream */
.card--wine .card-eyebrow { color: var(--wine-ink); }
/* links to index.html#guerzbook (About page) jump here; the sticky header is up to 191px tall on small phones,
   so stop the jump 205px short of the card instead of hiding its top under the header */
#guerzbook { scroll-margin-top: 205px; }       /* only changes where an anchor jump lands; layout doesn't move */

.title-wrap {
  display: flex;
  width: fit-content;
}
/* inside a .card (a flex column), align-self slides the title box left / center / right */
.title-wrap--left   { align-self: flex-start; } /* box hugs the card's left edge */
.title-wrap--center { align-self: center; }     /* box sits dead center */
.title-wrap--right  { align-self: flex-end; }   /* box hugs the card's right edge */

.card-title {
  margin: .08em 0;
  font: 900 clamp(34px, 7.6vw, 72px)/.92 'Recursive', sans-serif;
  /* 72px desktop / 34px phone. line-height .92 (was .88) so <br> lines aren't cramped */
  text-transform: uppercase; letter-spacing: -.04em;
}
.card-title--brutal {
  margin: 0;
  font: 900 clamp(28px, 4vw, 44px)/.95 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: -.02em;
}
.card-eyebrow {
  font: 800 clamp(18px, 3vw, 24px)/1.15 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.card-eyebrow--ink { color: var(--ink); } /* dark eyebrow for peach/lavender cards (replaces inline style="color:var(--ink)") */
.card-body { font: 18px/1.6 'Space Grotesk', sans-serif; }
/* paragraphs written straight into a card (not inside .card-body) used to fall back
   to the 16px body default and read smaller than everything around them */
.card > p { font: 18px/1.6 'Space Grotesk', sans-serif; }

/* ---------- block spacing inside cards ---------- */
/* the space you were fighting is MARGIN between blocks, not line-height.
   browsers give h2/h3/p a fat default margin; these three lines tighten it. */
.card p  { margin: .4em 0; }
.card h2 { margin: .7em 0 .15em; }
.card h3 { margin: .6em 0 .15em; font-size: 1.375rem; }
/* ^ font-size: the browser default for h3 is 1.17em = 18.7px, and card paragraphs are 18px,
     so h3 barely looked bigger. 1.375rem = 22px: clearly above p (18px), still under h2 (24px) */
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* --- hero banner ------------------------------------------------------- */
.banner-wrap { margin: 0; display: flex; justify-content: center; }
.banner {
  display: block; width: 100%; min-width: 300px; height: auto;
  border: none;
  box-shadow: 5px 5px 0 var(--lavender);
}

/* ---------- userinfo module ---------- */
/* .userinfo-row wraps hex + card + hex on every page — single source of truth for that layout, replaces the old per-page inline flex styles */
.userinfo-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 0 auto;
}
.userinfo {
  display: flex; gap: 0; align-items: center; justify-content: center; overflow: hidden; flex-wrap: wrap;
  background: var(--lavender); color: var(--ink); border: none;
  box-shadow: 5px 5px 0 var(--peach);
  min-height: 161px; /* matches .avatar-frame's fixed height, so the card can't render shorter than the hexes flanking it no matter how much badge content a given page has */
}
.avatar-frame {
  width: 161px; height: 161px; flex: none; border: none;
  margin: 0; overflow: visible; display: block;
  animation: hex-pulse 1200ms ease-in-out infinite alternate;
  /* "beacon" pulse — whole hex (border + glyph), not just the {g} inside it.
     ease-in-out slows at both ends, which is what reads as "breathing".
     the old cubic-bezier had y-values of 4.96 and 5.99 — a cubic-bezier's y axis
     is progress, so anything over 1 overshoots the target. ~6x overshoot twice per
     cycle is what caused the jitter. */
}
/* reduced-motion is handled by the global block at the bottom of this file,
   which kills every animation site-wide — no per-element rule needed here */
@keyframes hex-pulse {
  from { transform: scale(.8); }
  to   { transform: scale(1.2); }
}
.avatar-frame--secondary { display: block; } /* the second/right-hand hex — hidden on mobile below, single source of truth for that toggle */
.avatar { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.05); }
.userinfo-body {
  flex: 1; min-width: 220px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; text-align: center; /* was unset/left before — this is what actually centers "Guerz" and the badges, on every screen size, not just an artifact of the flanking hexes */
}
.userinfo-name {
  font-family: 'Platypi', serif; font-weight: 800; line-height: 1.08;
  /* clamp(MIN, PREFERRED, MAX) — the old value was clamp(84px, 80vw, 69px),
     where min (84px) was larger than max (69px), so it could only ever resolve
     to 84px at every screen size. now it actually scales down on narrow phones. */
  font-size: clamp(44px, 11vw, 84px);
  margin-top: -15px;
  margin-bottom: 8px; /* was `margin-bottom:` with no value — a parse error the browser dropped */
}
.userinfo-tags { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.userinfo-tag-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 7px 4px;  }
.userinfo-tag { display: inline-block; padding: 5px 16px; width: fit-content;  }
.userinfo-tag--dark { background: #1c1a20; color: var(--peach);font-size: 16.2px; }
.userinfo-tag--peach { background: var(--peach); color: var(--ink); font-size: 15px;}
.userinfo-role { font: 700 12px 'IBM Plex Mono', monospace; color: var(--muted); }

/* homepage variant: card first, hexagon pushed to the far right (about.html keeps the default) */
.userinfo-row--avatar-right > .avatar-frame { margin-left: auto; }        /* auto margin eats the free space, shoving the hex right */
@media (max-width: 560px) {
  .userinfo-row--avatar-right > .userinfo { flex: 1 1 100%; }             /* phones: card takes the full width... */
  .userinfo-row--avatar-right > .avatar-frame { margin-left: 0; }         /* ...and the hex drops under it, not stuck right */
}

@media (max-width: 640px) {
  .avatar-frame--secondary { display: none; } /* one hex on mobile, both pages — the twin-hex symmetry only reads correctly side by side */
}

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font: 700 11px 'IBM Plex Mono', monospace; padding: 2px 7px; color: var(--ink);
}
.tag--peach { background: var(--peach); }
.tag--lavender { background: var(--lavender); }

/* ---------- lanes / two-up blocks ---------- */
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row > * { flex: 1; min-width: 200px; }
.row--lanes { margin-top: 4px; } /* the phase/lane pair inside a card, nudged down a hair */

.lane { border-left: 3px solid var(--peach); padding: 8px 0 8px 14px; display: flex; flex-direction: column; gap: 4px; }
.lane--lavender { border-left-color: var(--lavender); }

/* ---------- callout block (vibes / house rules) ---------- */
.callout {
  background: var(--peach); border: none; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; color: var(--ink);
}
.callout-title {
  font: 800 clamp(18px, 3vw, 24px) 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: .05em;
}
.callout--lavender { box-shadow: 5px 5px 0 var(--lavender); } /* lavender drop shadow, like .card--lavender */

/* stacked one-liners (the "foundations" card) */
.foundations-list {
  display: flex; flex-direction: column; gap: 6px;   /* one item per row, 6px apart */
  font: 16.5px/1.55 'Space Grotesk', sans-serif;      /* same size it had as an inline style */
}

/* ---------- guestbook ---------- */
.guestbook-entry { display: flex; flex-direction: column; gap: 4px; }
.guestbook-user { font: 700 12.5px 'IBM Plex Mono', monospace; color: var(--ink); }
.guestbook-text { font: 17px/1.5 'Space Grotesk', sans-serif; }
.guestbook-reply {
  margin-left: 18px; border-left: 2px solid var(--peach); padding-left: 10px; margin-top: 4px;
}
.guestbook-reply-user { font: 700 12px 'IBM Plex Mono', monospace; color: var(--muted); }
.guestbook-reply-text { font: 16px/1.5 'Space Grotesk', sans-serif; }

.guestbook-intro { opacity: .75; } /* the "leave a note" line, a bit quieter than the entries */

.guestbook-form { display: flex; gap: 8px; margin-top: 4px; }
.guestbook-form--wrap { flex-wrap: wrap; align-items: flex-end; } /* fields wrap onto new rows; button lines up with input bottoms */
.guestbook-form .button { padding: 7px 14px; }                     /* the "sign" button's padding */
.field--name    { flex: 1 1 130px; }  /* name box: grows, starts at 130px */
.field--email   { flex: 1 1 170px; }  /* email box: grows, starts at 170px */
.field--message { flex: 2 1 100%; }   /* note box: always its own full-width row */
.input {
  flex: 1; min-width: 0; background: var(--paper2); border: none;
  padding: 9px 11px; font: 16px 'Space Grotesk', sans-serif; color: var(--text);
}
.button {
  background: var(--ink); color: var(--peach); border: none;
  font: 700 12px 'IBM Plex Mono', monospace; padding: 0 14px;
  text-transform: uppercase; cursor: pointer;
}

/* ---------- footer ---------- */
.footer { border-top: none; background: var(--paper2); }
.footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
}
.footer-inner--wide { max-width: 1160px; }
.footer-copy { font: 12.5px/1.6 'IBM Plex Mono', monospace; color: var(--muted); }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; font: 700 12px 'Recursive', sans-serif; text-transform: uppercase; }
.footer-note { font: 12.5px/1.6 'IBM Plex Mono', monospace; color: var(--muted); text-align: right; }
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; font: 700 11.5px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.footer-social a { color: var(--muted); text-decoration: none; }
.footer-social a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- support lanes (aside) ---------- */
.support-lanes { display: flex; flex-direction: column; gap: 10px; }
.support-lane {
  background: var(--lavender); border: none; box-shadow: 3px 3px 0 var(--lavender);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.support-lane-label {
  font: 700 11px 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink);
}
.support-lane-body { font: 16.5px/1.5 'Space Grotesk', sans-serif; }

/* ---------- goal badge ---------- */
.goal-badge {
  display: inline-block; background: var(--ink); color: var(--peach);
  font: 700 11px 'IBM Plex Mono', monospace; padding: 4px 10px; letter-spacing: .03em;
}

/* ---------- form status ---------- */
.form-status { font: 700 12.5px 'IBM Plex Mono', monospace; }
.form-status--ok { color: #4a7a4a; }
.form-status--err { color: #c2452d; }

/* ---------- roadmap-specific ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.badge { font: 700 11px 'IBM Plex Mono', monospace; padding: 3px 8px; color: var(--ink); }
.badge--peach { background: var(--peach); }
.badge--lavender { background: var(--lavender); }

.phase-header { border: none; padding: 12px 16px; }
.phase-header--peach { background: var(--peach); color: var(--ink); }
.phase-header--lavender { background: var(--lavender); color: var(--ink); }
.phase-header--ink { background: var(--ink); color: var(--peach); }
.phase-header .card-eyebrow {
  color: inherit; font: 900 clamp(24px, 4.5vw, 40px)/.95 'Recursive', sans-serif; letter-spacing: -.02em;
}

.week-list { display: flex; flex-direction: column; gap: 10px; }
.week-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.week {
  background: var(--paper); border: none; box-shadow: 4px 4px 0 var(--peach);
  padding: 12px 14px; display: flex; gap: 14px; flex-wrap: wrap;
}
.week--lavender { box-shadow: 4px 4px 0 var(--lavender); }
.week--now { box-shadow: 5px 5px 0 var(--ink); }
.week-num { font: 700 13.5px 'IBM Plex Mono', monospace; color: var(--muted); min-width: 70px; }
.week--now .week-num { color: var(--ink); }
.week-body { flex: 1; min-width: 220px; font: 16.5px/1.55 'Space Grotesk', sans-serif; }
.week-grid .week-body { flex: none; }
.week-grid .week { flex: 1; min-width: 220px; flex-direction: column; }
.week-grid .week-num { display: block; margin-bottom: 3px; }

/* ---------- collapsible sections + project boxes ---------- */
.section { border: none; background: var(--paper); box-shadow: 5px 5px 0 var(--peach); }
.section--lav { box-shadow: 5px 5px 0 var(--lavender); }
.section > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px; background: var(--peach); border-bottom: none;
}
.section--lav > summary { background: var(--lavender); }
.section--remix > summary { background: var(--peach); }
.section > summary::-webkit-details-marker { display: none; }
.section-caret { font: 800 18px 'Recursive', sans-serif; color: var(--ink); transition: transform .18s ease; }
.section[open] > summary .section-caret { transform: rotate(90deg); }
.section-title {
  margin: .08em 0;
  font: 900 clamp(24px, 4.5vw, 40px)/.95 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
}
.section-count { margin-left: auto; font: 700 11.5px 'IBM Plex Mono', monospace; color: var(--ink); opacity: .75; white-space: normal; text-align: right; }
.section-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.project-box {
  border: none; background: var(--paper2);
  box-shadow: 0 3px 10px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10);
  transition: box-shadow .18s ease, transform .18s ease;
}
.project-box:hover,
.project-box:focus-within,
.project-box[open] {
  transform: scale(1.012);
  box-shadow: 0 7px 20px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.14);
}
/* unbuilt rows keep their flat, unfinished look */
.project-box--soon,
.project-box--soon:hover,
.project-box--soon:focus-within,
.project-box--soon[open] { box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .project-box { transition: none; }
  .project-box:hover, .project-box:focus-within, .project-box[open] { transform: none; }
}
.project-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px;
}
.project-box > summary::-webkit-details-marker { display: none; }
.project-caret { font: 800 13px 'IBM Plex Mono', monospace; color: var(--muted); transition: transform .18s ease; }
.project-box[open] > summary .project-caret { transform: rotate(90deg); }
.project-name { font: 800 17px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.project-stack { margin-left: auto; font: 700 11px 'IBM Plex Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
/* tabbed panes — the source tab reads first */
.project-inner {
  padding: 12px; border-top: 2px dashed var(--muted);
  display: flex; flex-direction: column; gap: 12px;
}
.project-inner > .project-meta { order: -1; }
.project-meta {
  border: none; background: var(--paper); padding: 10px 12px;
  box-shadow: 4px 4px 0 var(--lavender);
  display: flex; flex-direction: column; gap: 5px;
}
.meta-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.meta-key {
  flex: 0 0 128px; font: 800 11px 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink);
}
.meta-val { font: 600 15px 'Recursive', sans-serif; color: var(--text); }
.view-tabs { display: flex; width: fit-content; border: none; overflow: hidden; }
.view-tab {
  background: var(--paper); color: var(--muted); border: none; border-right: none;
  font: 800 9.5px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .06em;
  padding: 7px 15px; cursor: pointer;
}
.view-tab:last-child { border-right: none; }
.view-tab:hover { background: var(--lavender); color: var(--ink); }
.view-tab[aria-selected="true"] { background: var(--ink); color: var(--peach); }
.view-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.view-pane[hidden] { display: none; }
.view-pane[data-pane="code"], .view-pane[data-pane="html"], .view-pane[data-pane="css"] { max-height: min(85vh, 900px); overflow: auto; }
.preview-frame {
  width: 100%; height: min(70vh, 700px); border: none;
  box-shadow: 4px 4px 0 var(--lavender); background: #fff; display: block;
}
.coming-soon {
  padding: 16px 4px; font: 700 15px 'IBM Plex Mono', monospace; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.project-box--soon > summary { opacity: .85; }
.badge--soon { background: transparent; border: none; color: var(--muted); }

/* ---------- rwd v9 archive: module headers + unbuilt rows ---------- */
.module-group { margin-top: 18px; }
.module-group:first-child { margin-top: 0; }
.module-group > summary.module { list-style: none; cursor: pointer; }
.module-group > summary.module::-webkit-details-marker { display: none; }
.module-caret { font: 800 13px 'IBM Plex Mono', monospace; color: var(--ink); transition: transform .18s ease; }
.module-group[open] > summary.module .module-caret { transform: rotate(90deg); }
.module-body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.module {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 0; padding: 8px 10px;
  border: none; background: var(--peach);
  box-shadow: 4px 4px 0 var(--lavender);
}
.module-kicker {
  font: 800 9px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); border: none; padding: 2px 6px; background: #fff;
}
.module-title {
  margin: .1em 0;
  font: 900 17px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
}
.module-count {
  margin-left: auto; font: 700 9px 'IBM Plex Mono', monospace; color: var(--ink); opacity: .7;
  text-transform: uppercase; letter-spacing: .06em;
}
.archive-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: none; background: var(--paper2);
}
.archive-check { font: 700 15px 'IBM Plex Mono', monospace; color: var(--muted); }
.archive-name { font: 600 15.5px 'Recursive', sans-serif; color: var(--muted); }
.archive-type {
  margin-left: auto; font: 700 9px 'IBM Plex Mono', monospace; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.archive-row--cert { border: none; }
.archive-row--cert .archive-name { color: var(--text); font-weight: 800; }
.archive-row--cert .archive-type { color: var(--ink); }

/* ---------- projects / code blocks ---------- */
.project-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.project-title {
  margin: .1em 0;
  font: 900 clamp(22px, 3.2vw, 30px)/1 'Recursive', sans-serif;
  text-transform: uppercase; letter-spacing: -.02em; border-bottom: 2px solid var(--peach);
}
.project-title--lav { border-bottom-color: var(--lavender); }
.project-links {
  display: flex; gap: 14px; flex-wrap: wrap;
  font: 800 10px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
.project-links a { color: var(--muted); border-bottom: 2px solid var(--muted); }

.code-block { background: #17131f; border: none; box-shadow: 4px 4px 0 var(--lavender); }
.code-block--peach { box-shadow: 4px 4px 0 var(--peach); }
.code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #241f30; border-bottom: 2px solid var(--muted); padding: 6px 10px;
}
.code-file { font: 700 9.5px 'IBM Plex Mono', monospace; color: var(--lavender); letter-spacing: .04em; }
.code-copy {
  background: var(--peach); color: var(--ink); border: none;
  font: 800 9px 'Recursive', sans-serif; padding: 3px 10px; text-transform: uppercase;
  letter-spacing: .06em; cursor: pointer;
}
.code-copy:hover { background: var(--lavender); }
.code { margin: 0; padding: 12px 14px; overflow-x: auto; }
.code code {
  font: 500 14px/1.65 'IBM Plex Mono', monospace; color: #e6dcf5;
  white-space: pre-wrap; overflow-wrap: anywhere; display: block;
}
.code .line { display: grid; grid-template-columns: calc(3ch + 12px) 1fr; gap: 12px; }
.code .ln {
  color: #8b83a8; text-align: right; user-select: none; -webkit-user-select: none;
  border-right: 1px solid #2e2840; padding-right: 8px; margin-right: -4px;
  white-space: nowrap; overflow-wrap: normal;
}
.code .src { min-height: 1.65em; }
.code .cmt { color: #9d94b8; font-style: italic; }
.code .tok-name { color: var(--peach); }
.code .tok-attr { color: #7fd1c9; }
.code .tok-val { color: #e8cd6f; }
.code .tok-func { color: #c99bf0; }
.code .tok-num { color: #f2909a; }
.code .tok-punct { color: #746b91; }
.code::-webkit-scrollbar { height: 9px; }
.code::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid #17131f; }

/* ---------- blog (blogguerz) ---------- */
.blog-layout { display: flex; gap: 24px; flex-wrap: wrap-reverse; }
.blog-main { flex: 3; min-width: 320px; display: flex; flex-direction: column; gap: 18px; }
.blog-sidebar { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 14px; }
.post-title { margin: .1em 0; font: 800 20px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }


/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .view-pane[data-pane="code"], .view-pane[data-pane="html"], .view-pane[data-pane="css"] { max-height: min(75vh, 700px); }
  .meta-key { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .container, .footer-inner, .container--wide, .footer-inner--wide { padding-left: 14px; padding-right: 14px; }
  .section-count { flex-basis: 100%; margin-left: 0; text-align: left; }
  .section-body { padding: 10px; }
  .project-inner { padding: 10px; }
  .project-name { flex-basis: 100%; order: 3; }
  .view-pane[data-pane="code"], .view-pane[data-pane="html"], .view-pane[data-pane="css"] { max-height: min(70vh, 560px); }
  .project-stack { margin-left: 0; }
  .code { font-size: 12.5px; }
}

/* ---------- a11y (WCAG 2.2 AA) — focus, skip link, hit areas ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--peach); border: none;
  padding: 10px 16px; text-decoration: none;
  font: 800 11px 'Recursive', sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
.skip-link:focus { left: 8px; top: 8px; }

/* SC 2.4.7 / 2.4.13 — visible 3px ring, never suppressed */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* light surfaces (peach/lavender) always get the dark ink focus ring. In night mode the default ring is
   light peach (#e8b48f), which nearly vanishes on these surfaces (about 1.02:1 on peach, 1.21:1 on lavender) */
:is(.card--bg-peach, .card--bg-lavender, .callout, .userinfo, .support-lane, .module,
    .section > summary, .phase-header--peach, .phase-header--lavender,
    [style*="background:var(--peach)"], [style*="background:var(--lavender)"]) {
  --focus-ring: var(--ink); /* ink #3a2b22 on peach/lavender is high contrast in both themes */
}
.toggle button:focus-visible,
.view-tab:focus-visible,
.code-copy:focus-visible { outline-offset: -3px; }
/* selected tab + pressed toggle sit on ink, so an ink ring would vanish into them */
.view-tab[aria-selected="true"]:focus-visible,
.toggle button[aria-pressed="true"]:focus-visible { outline-color: var(--peach); }
.code-block :focus-visible, .code-bar :focus-visible { outline-color: var(--peach); }
main:focus { outline: none; }

/* hover feedback that never relies on color alone */
a:hover { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* SC 2.5.8 — 24px minimum target size */
.nav a, .footer-nav a, .project-links a, .footer-social a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 2px;
}
.toggle button { padding: 6px 10px; min-height: 24px; }
.code-copy { padding: 6px 12px; min-height: 24px; }
.view-tab { padding: 8px 15px; min-height: 24px; }
.button { min-height: 32px; }
.section > summary, .project-box > summary { min-height: 32px; }

/* SC 1.3.1 / 3.3.2 — visible field labels (never placeholder-only) */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label {
  font: 700 11px 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .06em; color: inherit;
}
.field .input { flex: none; width: 100%; }
.input[aria-invalid="true"] { outline: 2px solid #c2452d; outline-offset: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- homepage: full sail day-one block ---------- */
.card .dayone-head {                             /* `.card` in front so this beats the `.card h2` margin rule */
  margin: .6em 0 .2em;                           /* a little air above, a sliver below */
  font: 800 clamp(22px, 4.4vw, 38px)/1.5 'IBM Plex Mono', monospace; /* taller line-height so a wrapped bar doesn't overlap itself */
  text-transform: uppercase;                     /* all caps */
  letter-spacing: .02em;                         /* a hair of room between letters */
}
.fs-bar {                                        /* the burnt-orange box behind "full sail university — day one" */
  background: #CC4B00;                           /* burnt orange */
  color: #F1F1F1;                                /* light text; 4:1 contrast, passes for big bold text */
  padding: .15em .35em;                          /* equal padding both sides */
  -webkit-box-decoration-break: clone;           /* Safari: each wrapped line gets its own padding */
  box-decoration-break: clone;                   /* every other browser: same thing */
}
.fs-bar a { color: inherit; }                    /* the link takes the bar's light text, not dark ink */
.card h2.degree { font-size: 2rem; margin-top: .3em; } /* "web development bachelor of science": 32px */
/* homepage stanzas: poem-like lines that are paragraphs (not headings) but look exactly like the old h3s.
   `.card > p.stanza` is needed to outrank the `.card > p` rule, which would otherwise shrink these to 18px */
.card > p.stanza {
  font: 700 1.375rem/normal 'Space Grotesk', sans-serif; /* bold, 22px, default line spacing: same as .card h3 */
  margin: .6em 0 .15em;                                  /* same breathing room as .card h3 */
}
/* homepage supporting lines: they look like headings but are statements, so they're paragraphs.
   `.card > p.` prefix outranks the `.card > p` 18px rule, same trick as .stanza */
.card > p.lead-line {
  font: 700 1.5rem/normal 'Space Grotesk', sans-serif;   /* bold 24px: the look they had as h2 */
  margin: .7em 0 .15em;                                  /* the spacing they had as h2 */
}
.card > p.degree-line {
  font: 700 2rem/normal 'Space Grotesk', sans-serif;     /* bold 32px: the look they had as h2.degree */
  margin: .3em 0 .15em;                                  /* the spacing they had as h2.degree */
}
/* the hero story titles are now real <h2> headings; a global rule zeroes h2.card-title margins,
   so give back the margin they had as <p class="card-title"> */
.card--hero h2.card-title { margin: .4em 0; }            /* the .4em they got from `.card p` as <p> titles */

/* ---------- utilities ---------- */
.center-text { text-align: center; } /* center any block's text */

/* headings promoted from divs keep their original rhythm */
h2.card-eyebrow, h3.card-eyebrow, h2.callout-title, h2.card-title, h2.post-title { margin: 0; }

/* ---------- respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== TOOLSHED: AI credit blurb (toolshed.html only — .rm-credit classes exist nowhere else) ===== */
.rm-credit {                                   /* the whole credit box */
  max-width: 720px;                            /* keeps lines short enough to read comfortably */
    margin: 0 auto 28px;                         /* no top gap, auto left/right margins center the box, space before the tool grid */
  padding: 18px 20px;                          /* breathing room inside the box */
  background: var(--card, #fdf0e4);            /* same cream as the tool cards (falls back to cream if the variable is missing) */
  border: 2px solid var(--muted);              /* same purple border as the tool cards */
  box-shadow: 5px 5px 0 var(--peach);          /* peach drop shadow so it reads as a note, not another tool card (cards use lavender) */
  font: 16px/1.55 'Eczar', serif;              /* same body font and size as the page subtitle */
  color: var(--text, #3a2b22);                 /* page text color, so it flips correctly in night mode */
}
.rm-credit p { margin: 0 0 10px; }             /* tighter paragraph spacing inside the box */
.rm-credit p:last-child { margin-bottom: 0; }  /* no extra gap under the final line */
.rm-credit-title {                             /* the "How these tools were made" heading */
  margin: 0 0 10px;                            /* small gap under the heading */
  font: 800 20px/1.1 'Big Shoulders Display', sans-serif; /* same display font as the page title, smaller */
  text-transform: uppercase;                   /* matches the page title's all-caps look */
  letter-spacing: .01em;                       /* slight spacing so the caps don't crowd */
}
.rm-credit-list { margin: 0 0 10px; padding-left: 1.2em; } /* indent the role list a little */
.rm-credit-list li { margin: 0 0 4px; }        /* small gap between roles */

/* ===== ABOUT PAGE (about.html only — .jeffran, .card-body--about, .card-body--now and .about-links exist nowhere else) ===== */
.jeffran {                                     /* the <figure> holding Jeffran + his caption */
  margin: 0;                                   /* browsers give <figure> a 40px side margin; zero it */
  width: 220px;                                /* display size (the file is 440px, so he stays sharp on retina screens) */
  flex: none;                                  /* the flex row can't squash or stretch him */
  display: flex;                               /* lets the image and caption stack... */
  flex-direction: column;                      /* ...top to bottom */
  align-items: center;                         /* caption centered under him */
  gap: 6px;                                    /* small space between image and caption */
}
.jeffran-img {                                 /* the image itself */
  width: 100%;                                 /* fills the figure's width */
  height: auto;                                /* keeps him a perfect circle at any width */
}
.jeffran-caption {                             /* "illustrated with Gemini" */
  font: 12.5px/1.4 'IBM Plex Mono', monospace; /* same small mono as the footer notes */
  color: var(--muted);                         /* muted purple by day, lavender by night (flips with the theme) */
  text-align: center;                          /* centered under him */
}
@media (max-width: 560px) {                    /* phones: the {Guerz} card takes the full row, Jeffran wraps under it */
  .jeffran { width: 180px; }                   /* a bit smaller so he doesn't hog the screen; the row's justify-content centers him */
}
.card-body--about {                            /* the About card's paragraph stack (replaces its old inline style) */
  display: flex;                               /* flex so the gap below works */
  flex-direction: column;                      /* paragraphs stack top to bottom */
  gap: 12px;                                   /* 12px between paragraphs, same as before */
}
.card-body--now {                              /* the "now" card's four lines (replaces its old inline style) */
  display: flex;                               /* flex so the gap below works */
  flex-direction: column;                      /* lines stack top to bottom */
  gap: 5px;                                    /* 5px between lines, same as before */
}
.about-links {                                 /* the "where to find me" link list (replaces its old inline style) */
  display: flex;                               /* flex so the gap below works */
  flex-direction: column;                      /* one link per line */
  gap: 6px;                                    /* 6px between links, same as before */
  font: 15.5px/1.5 'Space Grotesk', sans-serif; /* 15.5px body font, 1.5 line height, same as before */
}

/* ===== FOOTER PENGUIN (footer only — .footer-mascot, .footer-penguin* and .footer-tagline exist nowhere else) ===== */
.footer-mascot {                               /* penguin + tagline, centered under the footer row */
  display: flex;                               /* flex so the two pieces stack and center... */
  flex-direction: column;                      /* ...penguin on top, tagline under it */
  align-items: center;                         /* centered left to right */
  gap: 2px;                                    /* tagline sits right under the penguin */
  padding: 0 24px 18px;                        /* no top gap (the footer row above already has 18px), 18px at the bottom to match */
}
.footer-penguin-box {                          /* holds whichever penguin is showing */
  height: 54px;                                /* tall enough for the night penguin's outline, so nothing jumps on theme swap */
  display: flex;                               /* flex so the penguin centers inside the box */
  align-items: center;                         /* centered top to bottom */
  justify-content: center;                     /* centered left to right */
}
.footer-penguin {                              /* both penguins */
  image-rendering: pixelated;                  /* keep hard pixel edges, never smooth/blur them */
}
.footer-penguin--day {                         /* day penguin (tight-cropped file) */
  width: 30px;                                 /* 10 art-pixels wide × 3px each */
  height: 45px;                                /* 15 art-pixels tall × 3px each: a whole number per pixel, so every pixel is the same size */
}
.footer-penguin--night {                       /* night penguin (square file with the gray outline) */
  width: 54px;                                 /* 360-unit file at 3px per 20-unit art pixel, so his body matches the day penguin exactly */
  height: 54px;                                /* square, same math */
  display: none;                               /* hidden by default (day mode) — also hides it from screen readers */
}
html[data-theme="night"] .footer-penguin--day { display: none; }    /* night: hide the day penguin... */
html[data-theme="night"] .footer-penguin--night { display: block; } /* ...and show the outlined one */
.footer-tagline {                              /* it's pronounced: “guerz” */
  margin: 0;                                   /* no default paragraph margins */
  font: 12.5px/1.6 'IBM Plex Mono', monospace; /* same small mono as the footer's other notes */
  color: var(--muted);                         /* muted purple by day, lavender by night (flips with the theme) */
  text-align: center;                          /* centered under the penguin */
}
@media (max-width: 640px) {                    /* phones */
  .footer-mascot { padding-left: 14px; padding-right: 14px; } /* same side padding the footer row switches to on phones */
}

/* ===== PAGE: playbooks.html — moved from the page's old <style> block; every rule is scoped to body.page-playbooks ===== */
/* :where(.page-playbooks) scopes each rule to this page but adds ZERO specificity, so every rule wins/loses exactly as it did in the old <style> block */
.page-playbooks { --card: #fdf0e4; }                                   /* card surface color for this page only (was :root, which would have leaked site-wide) */
html[data-theme="night"] .page-playbooks { --card: #241f30; }          /* night-mode card surface, still this page only */
:where(.page-playbooks) .pb-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; } /* centered page column with breathing room */
:where(.page-playbooks) .pb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; } /* card grid; min(100%,300px) lets a column shrink on tiny phones instead of overflowing */
:where(.page-playbooks) .pb-card { background: var(--card); border: 2px solid var(--muted); box-shadow: 5px 5px 0 var(--lavender); display: flex; flex-direction: column; overflow: hidden; } /* one playbook card */
:where(.page-playbooks) .pb-thumb-wrap { display: block; position: relative; border-bottom: 2px solid var(--muted); } /* frame around the screenshot */
:where(.page-playbooks) .pb-thumb-link { display: block; position: relative; aspect-ratio: 16/9; background: var(--paper); } /* clickable 16:9 screenshot area */
:where(.page-playbooks) .pb-thumb-link img { width: 100%; height: 100%; object-fit: cover; } /* screenshot fills the 16:9 box */
:where(.page-playbooks) .pb-thumb-placeholder { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--peach), var(--peach) 14px, var(--lavender) 14px, var(--lavender) 28px); } /* striped stand-in if a screenshot is missing (hidden by default) */
:where(.page-playbooks) .pb-thumb-placeholder span { background: var(--ink); color: var(--peach); font: 700 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; } /* "screenshot pending" label */
:where(.page-playbooks) .pb-card-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } /* text area of the card */
:where(.page-playbooks) .pb-card-name { margin: 0; font-family: 'Platypi', serif; font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -.01em; } /* card heading */
:where(.page-playbooks) .pb-card-desc { margin: 0; font: 14.5px/1.55 'Space Grotesk', sans-serif; color: var(--text); } /* card description */
:where(.page-playbooks) .pb-tag { align-self: flex-start; white-space: nowrap; font: 700 9.5px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; background: var(--ink); color: var(--peach); padding: 3px 8px; } /* small dark status tag ("v4 · live") */
:where(.page-playbooks) .pb-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } /* row of fact chips */
:where(.page-playbooks) .pb-facts li { font: 700 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--text); border: 2px solid var(--muted); padding: 3px 8px; } /* one outlined fact chip */
:where(.page-playbooks) .pb-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 10px; } /* button row, pinned to the card bottom */
:where(.page-playbooks) .pb-btn { border: 2px solid var(--ink); background: var(--ink); color: var(--peach); font: 700 11px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; padding: 0 14px; height: 34px; display: flex; align-items: center; text-decoration: none; } /* solid "open" button */
:where(.page-playbooks) .pb-btn:hover { background: var(--lavender); color: var(--ink); } /* solid button hover */
:where(.page-playbooks) .pb-btn--ghost { background: var(--paper); color: var(--text); border-color: var(--muted); } /* outlined "source" button */
:where(.page-playbooks) .pb-btn--ghost:hover { background: var(--peach); color: var(--ink); border-color: var(--ink); } /* outlined button hover */

/* ===== PAGE: fcc-build-archive.html — replaces the page's 3 old inline style="" attributes; scoped to body.page-fcc-archive ===== */
/* :where(.page-fcc-archive) scopes each rule to this page but adds ZERO specificity; the rules sit at the end of the file, so they still beat the .card / .section defaults they override */
:where(.page-fcc-archive) .fcc-archive-section { /* the big "RWD v9" + "Legacy V8" details sections */
  box-shadow: 5px 5px 0 var(--peach);            /* peach drop shadow, to match the title card */
}
:where(.page-fcc-archive) .fcc-archive-section > summary { /* the clickable header bar of those sections */
  background: var(--lavender);                   /* lavender header instead of .section's default peach */
}

/* ===== PAGE: toolshed.html — moved from the page's old <style> block; every rule is scoped to body.page-toolshed ===== */
/* :where(.page-toolshed) scopes each rule to this page but adds ZERO specificity, so every rule wins/loses exactly as it did in the old <style> block */
.page-toolshed {                                  /* page tokens (were on :root, which would have leaked site-wide) */
  --peach: #F4AD7D; --lavender: #b3a8cc; --ink: #3a2b22;                       /* brand colors; ink is the constant dark for chips/badges, never flips */
  --bg: oklch(0.94 0.035 55); --paper: #ffffff; --card: #fdf0e4;               /* day page bg, paper, and the cream card surface (.rm-card + .rm-credit use --card) */
  --text: #3a2b22; --muted: #6a5d94; --shadow: #3a2b22;                         /* day text, muted purple, shadow */
}
html[data-theme="night"] .page-toolshed {         /* night-mode tokens, still this page only */
  --bg: #17131f; --paper: #221d2d; --card: #241f30;                             /* night page bg, paper, and the dark card surface */
  --text: #eee6f5; --muted: #b3a8cc; --shadow: #000000;                         /* night text, muted lavender, black shadow */
}
.page-toolshed { font-family: 'Eczar', serif; }   /* this page's body font (was html,body; a real class is needed here so it still beats the site-wide body font) */
:where(.page-toolshed) a { color: inherit; }      /* links take their parent's color (same specificity as the old bare `a` rule) */
:where(.page-toolshed) .rm-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; } /* centered page column with breathing room */
:where(.page-toolshed) .rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } /* tool card grid */
:where(.page-toolshed) .rm-card { background: var(--card); border: 2px solid var(--muted); box-shadow: 5px 5px 0 var(--lavender); display: flex; flex-direction: column; overflow: hidden; } /* one tool card */
:where(.page-toolshed) .rm-thumb-wrap { display: block; position: relative; border-bottom: 2px solid var(--muted); } /* frame around the screenshot */
:where(.page-toolshed) .rm-thumb-link { display: block; position: relative; aspect-ratio: 16/9; background: var(--paper); } /* clickable 16:9 screenshot area */
:where(.page-toolshed) .rm-thumb-link img { width: 100%; height: 100%; object-fit: cover; } /* screenshot fills the box */
:where(.page-toolshed) .rm-thumb-placeholder { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--peach), var(--peach) 14px, var(--lavender) 14px, var(--lavender) 28px); } /* striped stand-in if a screenshot 404s (hidden by default) */
:where(.page-toolshed) .rm-thumb-placeholder span { background: var(--ink); color: var(--peach); font: 700 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; } /* "screenshot pending" label */
:where(.page-toolshed) .rm-card-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } /* text area of the card */
:where(.page-toolshed) .rm-card-name { margin: 0; font: 800 20px 'Big Shoulders Display', sans-serif; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; } /* tool name */
:where(.page-toolshed) .rm-card-desc { margin: 0; font: 14.5px/1.5 'Eczar', serif; color: var(--text); min-height: calc(1.5em * 3); } /* description, at least 3 lines tall so cards line up */
:where(.page-toolshed) .rm-tag { align-self: flex-start; white-space: nowrap; font: 700 9.5px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; background: var(--ink); color: var(--peach); padding: 3px 8px; } /* small dark version tag */
:where(.page-toolshed) .rm-actions { margin-top: 4px; display: flex; align-items: center; gap: 8px; padding-top: 6px; } /* button row */
:where(.page-toolshed) .rm-btn-dl { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 2px solid var(--muted); background: var(--paper); color: var(--text); font-size: 16px; text-decoration: none; } /* square download button */
:where(.page-toolshed) .rm-btn-dl:hover { background: var(--peach); color: var(--ink); } /* download button hover */
:where(.page-toolshed) .rm-btn-code { border: 2px solid var(--ink); background: var(--ink); color: var(--peach); font: 700 11px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; padding: 0 14px; height: 34px; display: flex; align-items: center; text-decoration: none; } /* solid "code" button */
:where(.page-toolshed) .rm-btn-code:hover { background: var(--lavender); color: var(--ink); } /* code button hover */
:where(.page-toolshed) .rm-dl-note { font: 11px/1.3 'IBM Plex Mono', monospace; color: var(--muted); } /* tiny note under the buttons */

/* ===== SHARED: page title card — the lavender title box used by fcc-build-archive, playbooks, and toolshed ===== */
/* (was .fcc-intro-card / .fcc-intro-role, scoped to fcc only; same rules, now shared so all three pages use one box) */
.title-card {                                    /* the page title box: <div class="card card--lavender title-card"> */
  background: var(--lavender);                   /* lavender card surface */
  color: var(--ink);                             /* dark ink text */
  box-shadow: 5px 5px 0 var(--peach);            /* peach drop shadow (overrides card--lavender's lavender one) */
}
.title-card-role {                               /* the small label above the title (used with .userinfo-role) */
  color: var(--ink);                             /* ink instead of the default muted purple, so it reads on lavender */
}
:where(.page-playbooks, .page-toolshed) .title-card { margin: 0 0 28px; } /* these two pages aren't flex columns like fcc's, so give the box the same 28px gap the old subtitle had before the content below */