/* ============================================================
   SeaBear Studios — site styles
   Loaded AFTER Web Awesome's theme, native reset, and utilities.
   Token system mirrors the canonical colors_and_type.css from
   the SeaBear Design System.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts — self-hosted Raleway variable
   ------------------------------------------------------------ */
@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* === BRAND COLORS (exact hexes — SeaBear identity) === */
  --color-blue:   #336699;
  --color-orange: #e8713a;

  /* Blue variants (logo gradient + tints) */
  --color-blue-darker:  #1f4972;
  --color-blue-dark:    #2a558a;
  --color-blue-light:   #5a85b3;
  --color-blue-lighter: #c5d6e6;
  --color-blue-tint:    #eaf0f6;

  /* Orange variants */
  --color-orange-dark:    #c75a25;
  --color-orange-light:   #ef9871;
  --color-orange-lighter: #fbd8c6;
  --color-orange-tint:    #fdeee5;

  /* === NEUTRALS (warm-leaning near-monochrome ramp) === */
  --color-50:  #fafaf9;
  --color-100: #f4f4f3;
  --color-200: #e7e7e5;
  --color-300: #d1d1ce;
  --color-400: #a8a8a4;
  --color-500: #74746f;
  --color-600: #4a4a46;
  --color-700: #2e2e2b;
  --color-800: #1c1c1a;
  --color-900: #0e0e0d;

  /* === SEMANTIC FG / BG === */
  --fg:            var(--color-700);
  --fg-strong:     var(--color-900);
  --fg-muted:      var(--color-500);
  --fg-faint:      var(--color-400);
  --bg:            #ffffff;
  --bg-subtle:     var(--color-50);
  --bg-sunken:     var(--color-100);
  --border:        var(--color-200);
  --border-strong: var(--color-300);

  /* === STAGE COLORS (Ideas blog maturity)
     Brand-aligned gradient: warm-light (forming) →
     warm-full (developing) → cool-stable (settled). === */
  --stage-fragment: var(--color-orange-light);
  --stage-pattern:  var(--color-orange);
  --stage-mosaic:   var(--color-blue);

  /* === LINK / ACTION === */
  --link:         var(--color-blue);
  --link-hover:   var(--color-blue-darker);
  --action:       var(--color-orange);
  --action-hover: var(--color-orange-dark);
  --action-fg:    #ffffff;

  /* === TYPE === */
  --font-body:    "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-code:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-chrome:  var(--font-code);

  --fs-display:   2.6rem;
  --fs-h1:        2rem;
  --fs-h2:        1.4rem;
  --fs-card-name: 1.25rem;
  --fs-h3:        1.15rem;
  --fs-lede:      1.1rem;
  --fs-body:      1rem;
  --fs-chrome-lg: 0.95rem;
  --fs-small:     0.85rem;
  --fs-chrome:    0.8rem;
  --fs-label:     0.7rem;

  --fw-body:    400;
  --fw-heading: 400;
  --fw-chrome:  500;
  --fw-strong:  600;

  --tracking-tight:    -0.02em;
  --tracking-headline: -0.01em;
  --tracking-chrome:    0.06em;
  --tracking-nav:       0.08em;

  --lh-body:    1.6;
  --lh-heading: 1.2;

  /* === SPACE / RADIUS / BORDER === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-tile: 1px;
  --radius-pin:  2px;
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --border-w: 1px;

  --max-w:      68ch;
  --max-w-wide: 76rem;

  --shadow-1: 0 1px 2px rgba(14, 14, 13, 0.04);
  --shadow-2: 0 2px 6px rgba(14, 14, 13, 0.06);

  --easing:   cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur:      180ms;

  /* === Web Awesome token overrides ===
     WA's tokens defer to ours so components match. */
  --wa-font-family-body:    var(--font-body);
  --wa-font-family-heading: var(--font-heading);
  --wa-font-family-code:    var(--font-code);

  /* Brand variant binds to the orange palette via class="wa-brand-orange"
     on <html> in base.njk — no manual token aliasing required. */
}

/* ------------------------------------------------------------
   Dark mode — color flip only. Type system unchanged.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --fg:            var(--color-200);
    --fg-strong:     #ffffff;
    --fg-muted:      var(--color-400);
    --fg-faint:      var(--color-500);
    --bg:            var(--color-800);
    --bg-subtle:     #262624;
    --bg-sunken:     var(--color-700);
    --border:        var(--color-600);
    --border-strong: var(--color-500);
  }
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.site-header,
.site-footer {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
}

main {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

main.home .hero { margin: 0; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  color: var(--action);
  border: var(--border-w) solid var(--action);
  font-family: var(--font-chrome);
  font-size: var(--fs-chrome);
  font-weight: var(--fw-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--easing);
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
.site-header {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--border-w) solid var(--border);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-weight: var(--fw-chrome);
  font-size: var(--fs-chrome-lg);
  text-decoration: none;
  color: var(--fg-strong);
}

.site-header .brand img {
  height: 2rem;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* WA's native.css applies border-radius to all <img> elements by
     default. Override here so the logo renders with its actual edges. */
  border-radius: 0;
}

/* Optical alignment nudge: the logo PNG has asymmetric vertical
   whitespace (the bear sits below the geometric center of its
   bounding box), so flex align-items:center makes the wordmark
   read as too high. Drop the wordmark by 4px to match the bear's
   visual center. */
.site-header .brand span {
  position: relative;
  top: 4px;
}

.site-header nav ul {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header nav a {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  font-weight: var(--fw-chrome);
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: var(--border-w) solid transparent;
  transition: color var(--dur) var(--easing), border-color var(--dur) var(--easing);
}

.site-header nav a:hover {
  color: var(--fg-strong);
}

.site-header nav a[aria-current="page"] {
  color: var(--action);
  border-bottom-color: var(--action);
}

/* Mobile: drop the brand wordmark so the logo + nav fit on one line.
   Nav still wraps as a safety net for very narrow viewports. */
@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .site-header .brand span {
    display: none;
  }
  .site-header nav ul {
    gap: var(--space-4);
    flex-wrap: wrap;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-chrome);
}

.decor-band {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 2px;
  height: 4px;
  margin: 0 0 var(--space-6);
}
.decor-band div { border-radius: var(--radius-tile); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.footer-col p, .footer-col ul { margin: 0; }

.footer-brand {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome-lg);
  color: var(--fg-strong);
  margin-bottom: var(--space-2) !important;
}

.footer-blurb {
  font-family: var(--font-body);
  font-size: var(--fs-chrome-lg);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  max-width: 38ch;
}

.footer-label {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-label);
  color: var(--fg-faint);
  margin-bottom: var(--space-2) !important;
}

.footer-links {
  list-style: none;
  padding: 0;
}
.footer-links li {
  font-family: var(--font-body);
  font-size: var(--fs-chrome-lg);
  text-transform: none;
  letter-spacing: 0;
  padding: 0.2rem 0;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.footer-links a wa-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.footer-fineprint {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  font-size: var(--fs-label);
  color: var(--fg-faint);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--border);
  margin: 0;
}

.site-footer a { color: var(--link); }
.site-footer a:hover { color: var(--link-hover); }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-headline);
  color: var(--fg-strong);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-4); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, kbd, pre {
  font-family: var(--font-code);
  font-size: 0.92em;
}

/* ============================================================
   HERO — home page
   ============================================================ */
.hero .eyebrow {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

.hero-headline {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 var(--space-5);
  color: var(--fg-strong);
  max-width: 22ch;
}

.hero-lede {
  max-width: 60ch;
  font-size: var(--fs-lede);
  color: var(--fg-muted);
  margin: 0;
}

.tagline {
  color: var(--fg-muted);
  font-size: var(--fs-lede);
  margin-top: 0;
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}

.lede { color: var(--fg-muted); font-size: var(--fs-lede); }

/* ============================================================
   HOME INTRO — two-column layout (hero copy + Now sidebar)
   ============================================================ */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: var(--space-8);
  align-items: start;
  margin: 0 0 var(--space-10);
}

@media (max-width: 880px) {
  .home-intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ============================================================
   NOW PANEL — current-status sidebar in the home intro
   ============================================================ */
.now-banner {
  padding: var(--space-4);
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  border-left: 3px solid var(--color-orange);
}
.now-label {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  font-weight: var(--fw-chrome);
  color: var(--color-orange);
  margin: 0 0 var(--space-3);
}
.now-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.now-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-3) 0;
  border-bottom: var(--border-w) solid var(--border);
}
.now-item:first-child { padding-top: 0; }
.now-item:last-child  { padding-bottom: 0; border-bottom: 0; }

.now-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  color: var(--fg-strong);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--dur) var(--easing);
}
.now-name:hover {
  color: var(--color-orange);
  text-decoration: none;
}
.now-status {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

/* ============================================================
   CARD-CORNER SIGNATURES
   Used by .icard (idea cards) and .wcard (project cards).
   The signature is absolute-positioned at the bottom-right of
   the parent card and picks up its color from the card's
   accent variable.
   ============================================================ */
.signature {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
}

.signature--icon {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: var(--fg-muted);
  opacity: 0.85;
  transition: opacity var(--dur) var(--easing),
              transform var(--dur) var(--easing);
}

/* Slight lift on card hover so the icon participates in the
   same hover affordance as the rest of the card. */
.icard:hover .signature--icon {
  opacity: 1;
  transform: scale(1.06);
}

/* On idea cards, the accent comes from --icard-accent. */
.icard .signature--icon { color: var(--icard-accent, var(--fg-muted)); }

/* On project (work) cards, signature picks up the brand orange. */
.wcard .signature--icon { color: var(--color-orange); }

/* Stage marks — 3×3 tessera mini-grids. Lit cells express the
   maturity: 1 (center) for fragment, 4 (corners) for pattern,
   all 9 for mosaic. */
.signature--mark {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  color: var(--fg-muted);
  opacity: 0.85;
  transition: opacity var(--dur) var(--easing),
              transform var(--dur) var(--easing);
}
.signature--mark > span {
  background: var(--bg-subtle);
}
.signature--mark > span.stage-cell--lit {
  background: currentColor;
}
.icard:hover .signature--mark {
  opacity: 1;
  transform: scale(1.06);
}
.icard .signature--mark { color: var(--icard-accent, var(--fg-muted)); }

/* ============================================================
   WEB AWESOME COMPONENT TUNING
   Mono chrome inside buttons.
   ============================================================ */
wa-button::part(label) {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  font-size: 0.85rem;
  font-weight: var(--fw-chrome);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.service-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.service-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-card-name);
  letter-spacing: var(--tracking-tight);
}

.service-card p { margin: 0 0 var(--space-2); color: var(--fg); }

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-3) 0 0 !important;
}
.service-tags wa-tag::part(base) {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
}

/* Service mark — FA icon centered in a tinted square. */
.service-mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--color-blue);
  font-size: 44px;
}

/* Force the blue brand tokens directly. The wa-brand-blue class on the
   callout is supposed to scope brand to blue, but with <html class="wa-brand-orange">
   active above it, the cascade is brittle enough that the callout renders
   orange in practice. Setting the loud tokens here is bulletproof.
   Link inside inherits the callout's text color (wa-color-brand-on-loud =
   light, for contrast against the dark accent fill) instead of using the
   site-wide blue link color which would be invisible. */
.services-cta {
  margin-top: var(--space-10);
  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
  --wa-color-brand-on-loud: var(--wa-color-blue-on);
  --wa-color-brand-border-loud: var(--wa-color-blue-40);
}
.services-cta a {
  color: inherit;
  text-decoration: underline;
}
.services-cta a:hover {
  color: inherit;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { grid-template-columns: 64px 1fr; gap: var(--space-4); }
  .service-mark { width: 64px; height: 64px; font-size: 32px; }
}

/* ============================================================
   WORK
   ============================================================ */
.work-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--fg-faint);
}
.work-nav a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: var(--border-w) solid transparent;
  transition: color var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.work-nav a:hover {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
}

.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-2);
}
@media (min-width: 768px) {
  .work {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Project card — used on /work/ and /work/<key>/ for portfolio detail. */
.wcard {
  /* flow-root contains the floated figure so the card auto-sizes
     to hold both image and body. Body text wraps narrow next to the
     image, then extends to full card width below it.
     max-width + margin auto centers the single-card view on
     /work/<key>/; on /work/ the grid cell is already narrower so
     the cap is a no-op. */
  display: flow-root;
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  scroll-margin-top: var(--space-8);
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}

.wcard::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--color-orange);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.wcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }

.wcard-figure {
  float: left;
  width: 100%;
  max-width: 220px;
  margin: 0 var(--space-5) var(--space-3) 0;
}

.wcard-body { min-width: 0; }

.wcard-eyebrow {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-label);
  font-weight: var(--fw-chrome);
  color: var(--color-orange);
  margin: 0 0 var(--space-2);
}

.wcard-name {
  font-size: 1.75rem;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1);
  color: var(--fg-strong);
}

.wcard-name-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-orange), var(--color-orange));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--easing);
}
.wcard:hover .wcard-name-link,
.wcard-name-link:hover,
.wcard-name-link:focus-visible {
  background-size: 100% 2px;
  text-decoration: none;
}
.wcard-name-link::after {
  content: " →";
  color: var(--color-orange);
  opacity: 0;
  transition: opacity var(--dur) var(--easing);
}
.wcard:hover .wcard-name-link::after,
.wcard-name-link:hover::after { opacity: 1; }

.wcard-sub {
  font-family: var(--font-chrome);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  color: var(--fg-muted);
  margin: 0 0 var(--space-4);
}

.wcard-desc {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.wcard-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-1);
}
.wcard-features li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-chrome-lg);
  line-height: 1.5;
  color: var(--fg);
}
.wcard-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-orange);
  border-radius: var(--radius-tile);
}

.wcard-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 var(--space-4) !important;
}
.wcard-stack wa-tag::part(base) {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
}

.wcard-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 !important;
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--border);
}
.wcard-links a {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  font-weight: var(--fw-chrome);
  color: var(--link);
}
.wcard-links a:hover { color: var(--link-hover); }

/* Project tessera — 7×11 seeded grid. The canonical "screenshot
   missing" pattern; do not replace with mock UI. */
.tess-placeholder {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 2px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--bg);
}
.tess-placeholder div { border-radius: var(--radius-tile); }

.tess-placeholder--sm { width: 96px;  height: 152px; }
.tess-placeholder--lg { width: 100%;  aspect-ratio: 7 / 11; max-width: 220px; }

/* Real project screenshot — shares the slot dimensions of the
   tessera placeholder so card heights stay aligned across
   /work/ regardless of which projects have screenshots. The
   image is absolutely positioned so its intrinsic size can't
   push the slot open; it scales to the slot's height and
   centers horizontally inside. */
.work-screenshot {
  width: 100%;
  max-width: 220px;
}
.work-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

/* Landscape orientation: figure becomes a full-card-width hero banner
   at the top, with body flowing below in a single column. Wide
   screenshots earn visual weight this way instead of getting stuck
   in a short float that leaves an awkward seam mid-body.

   Hero slot is a 2:1 banner. Card max-width 56rem (896px) minus
   2 × space-5 padding (20px each side) = 856px interior; max-height
   matches at 428px. Source images should target 856 × 428 (or 2x
   = 1712 × 856 for HiDPI). Portrait sources scale to the height cap
   and center horizontally; landscape sources at the target 2:1 fill
   the slot exactly with no whitespace. */
.wcard--landscape .wcard-figure {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-5);
  text-align: center;
}
.wcard--landscape .work-screenshot--landscape {
  max-width: none;
}
.wcard--landscape .work-screenshot--landscape img {
  width: auto;
  max-width: 100%;
  max-height: 428px;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .wcard {
    padding: var(--space-4);
  }
  .wcard-figure {
    float: none;
    max-width: none;
    margin: 0 0 var(--space-4) 0;
  }
  .tess-placeholder--lg,
  .work-screenshot { max-width: 160px; }
  .work-screenshot--landscape { max-width: none; }
  .wcard-name { font-size: 1.5rem; }
}

/* ============================================================
   PROJECT PAGE — /work/<key>/
   ============================================================ */
.project-back {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--fg-muted);
  margin: 0 0 var(--space-5);
}
.project-back a { color: var(--fg-muted); text-decoration: none; }
.project-back a:hover { color: var(--color-orange); }

/* Long-form prose body for project retrospectives. Reading-measure
   column centered in the 76rem main when the page has no aside; in
   .project-detail (2-col layout) the margin: auto is overridden so
   the body sits at the start of its grid track. */
.project-body {
  max-width: 68ch;
  margin: var(--space-10) auto 0;
}

/* Two-column layout: long-form prose on the left, sticky notes
   aside on the right. Ratio is reading-measure-driven (prose capped
   at 68ch), not literal 2/3 + 1/3 — the aside takes whatever's left
   of the 76rem main after prose + gap. Notes are sticky so they stay
   visible while the user reads a long retrospective. */
.project-detail {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
  align-items: start;
}

.project-detail .project-body {
  margin: 0;
}

.project-aside {
  position: sticky;
  top: var(--space-5);
  align-self: start;
}

/* In the aside, notes stack as a single column instead of the
   responsive 240px-minmax grid used at full width. */
.project-aside .project-notes {
  margin-top: 0;
}
.project-aside .project-notes-list {
  grid-template-columns: 1fr;
}

.project-notes-more {
  margin: var(--space-4) 0 0;
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
}
.project-notes-more a {
  color: var(--link);
  text-decoration: none;
}
.project-notes-more a:hover {
  color: var(--link-hover);
}

/* Hidden on desktop; the sticky aside makes notes already visible. */
.project-notes-jump { display: none; }

/* Mobile: stack the two columns, notes below prose, drop sticky.
   Reveal the jump-to-notes shortcut since the aside is now scrolled
   far below the body content. */
@media (max-width: 880px) {
  .project-detail {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .project-aside {
    position: static;
  }
  .project-notes-jump {
    display: inline-block;
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-chrome);
    text-transform: uppercase;
    letter-spacing: var(--tracking-nav);
    font-size: var(--fs-chrome);
    color: var(--link);
    text-decoration: none;
  }
  .project-notes-jump:hover { color: var(--link-hover); }
}

.project-notes {
  margin-top: var(--space-12);
}

.project-notes-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-w) solid var(--border);
}
.project-notes-header .eyebrow {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--color-orange);
  margin: 0 0 var(--space-2);
}
.project-notes-header h2 {
  font-size: 1.6rem;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}
.project-notes-lede {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-chrome-lg);
}

.project-notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.project-notes-empty {
  font-family: var(--font-chrome);
  font-size: var(--fs-small);
  color: var(--fg-faint);
  font-style: italic;
  margin: 0;
}

/* ============================================================
   PAGE HEADER — reusable across non-home pages
   ============================================================ */
.page-header { margin-bottom: var(--space-8); }
.page-header h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.page-header .eyebrow {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}
.page-header .lede { max-width: 60ch; }

/* ============================================================
   IDEAS — card-tile grid + list fallback
   ============================================================ */
/* Stage-key caption above the filter bar on home. Inline 3×3
   tessera marks (same shape as idea-card signatures) act as the
   stage pins, each in its stage color. */
.stage-legend {
  color: var(--fg-muted);
  font-size: var(--fs-chrome-lg);
  line-height: 1.6;
  margin: var(--space-6) 0 var(--space-4);
}
.stage-legend strong {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.stage-legend .signature--mark {
  position: static;
  display: inline-grid;
  vertical-align: middle;
  margin: 0 0.5em 0 1em;
  width: 1.1em;
  height: 1.1em;
}
/* Desktop: items flow inline with generated commas between them. */
.stage-legend-item:not(:last-of-type)::after { content: ","; }

.signature--mark--fragment { color: var(--stage-fragment); }
.signature--mark--pattern  { color: var(--stage-pattern); }
.signature--mark--mosaic   { color: var(--stage-mosaic); }

/* Mobile: intro on its own line, each stage on its own line under it.
   Override must match the desktop selector's specificity (the
   :not(:last-of-type) pseudo-class lifts it above a bare class rule). */
@media (max-width: 560px) {
  .stage-legend { display: flex; flex-direction: column; row-gap: 0.25em; }
  .stage-legend-item:not(:last-of-type)::after { content: none; }
  .stage-legend .signature--mark { margin: 0 0.5em 0 0; }
}

/* Single chronological grid of idea cards. Replaces the old
   three-stage column layout; stage is now a filter chip row.
   Fixed 4 / 2 / 1 column breakpoints (instead of auto-fit) so
   cards stay square-ish at every viewport width instead of
   stretching wide when there are few of them. */
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-10);
}

@media (max-width: 1024px) {
  .ideas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ideas-grid { grid-template-columns: 1fr; }
}

/* Filter bar — Type, Stage, and Tags sit side-by-side in three
   stacked groups (label above control), with selected tag chips
   wrapping to a second row beneath. Inactive segment buttons
   have no variant attribute (neutral); the active button gets
   variant="brand" via JS so it picks up the orange brand color
   from the wa-color-brand-* scale. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-6);
}
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.filter-label {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-label);
  font-weight: var(--fw-chrome);
  color: var(--fg-faint);
}

/* Numeric counts inline inside filter buttons + dropdown items. */
.chip-count {
  margin-left: 0.4em;
  opacity: 0.55;
  font-weight: var(--fw-chrome);
}

/* The Tags filter-group spans the full bar width so all tag
   chips lay out on their own row beneath Type and Stage. Each
   chip is a <wa-tag> that flips to variant="brand" when active.
   wa-tag isn't natively interactive — JS adds role="button" +
   tabindex + keyboard activation, CSS adds the cursor. */
.filter-tags {
  flex-basis: 100%;
}
.filter-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-tag-row wa-tag[data-filter-tag] {
  cursor: pointer;
  user-select: none;
}

/* Mobile collapse: <wa-button-group> doesn't wrap or shrink, so below
   the ideas-grid single-column breakpoint we swap the segmented chips
   for <wa-select> dropdowns. State stays in sync via JS so the active
   filter survives viewport changes. */
.filter-select { display: none; }

@media (max-width: 560px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-group { align-items: stretch; }
  .filter-tags { flex-basis: auto; }
  .filter-segment { display: none; }
  .filter-select { display: block; }
}


.icard.is-hidden { display: none; }

.icard {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 180px;
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--dur) var(--easing),
              transform var(--dur-fast) var(--easing),
              box-shadow var(--dur) var(--easing);
}

.icard::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--icard-accent, var(--border));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.icard:hover,
.icard:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}

.icard--fragment  { --icard-accent: var(--stage-fragment); }
.icard--pattern   { --icard-accent: var(--stage-pattern); }
.icard--mosaic { --icard-accent: var(--stage-mosaic); }

.icard-eyebrow {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-label);
  font-weight: var(--fw-chrome);
  color: var(--icard-accent);
  margin: 0 0 var(--space-2);
}

.icard-name {
  font-size: 1.15rem;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1);
  color: var(--fg-strong);
}

.icard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-chrome);
  font-size: var(--fs-label);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

.icard-kind {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: var(--border-w) solid var(--border);
  color: var(--fg-muted);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-chrome);
  line-height: 1.4;
}

/* Kind-specific accent — distinguish devlogs visually. */
.icard--kind-devlog .icard-kind {
  background: var(--color-orange-tint);
  border-color: var(--color-orange-lighter);
  color: var(--color-orange-dark);
}
.icard--kind-essay .icard-kind {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--fg-muted);
}
.icard--kind-note .icard-kind {
  background: transparent;
  border-color: var(--border);
  color: var(--fg-faint);
}

.icard-blurb {
  font-size: var(--fs-chrome-lg);
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
  flex: 1;
}


/* ============================================================
   POST
   ============================================================ */
.post { max-width: 68ch; margin: 0 auto; }

.post-header {
  margin-bottom: var(--space-8);
  border-bottom: var(--border-w) solid var(--border);
  padding-bottom: var(--space-5);
}
.post-header h1 {
  font-size: 2.2rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.post-stage-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3) !important;
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
  color: var(--fg-muted);
}

.stage-tile {
  display: inline-block;
  width: 0.85rem; height: 0.85rem;
  border-radius: var(--radius-pin);
}

.post-back {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  font-size: var(--fs-chrome);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.post-meta__age {
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
}
.post-body p { font-size: 1.02rem; line-height: 1.65; }

/* ============================================================
   STAGE BADGES
   ============================================================ */
.stage {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-chrome);
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  border: var(--border-w) solid currentColor;
}
.stage--fragment  { color: var(--stage-fragment); }
.stage--pattern   { color: var(--stage-pattern); }
.stage--mosaic { color: var(--stage-mosaic); }