@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/space-grotesk.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2-variations');
}

/* =========================================================================
   Mango Tuesday: "Tape Room"
   Warm paper & faded earth · grotesque + mono · filmic grain.
   A light, analog room. Clay is the one accent — used like a wax seal.
   ========================================================================= */

:root {
  /* --- 1a palette: warm paper, faded earth ----------------------------- */
  --paper: #e7dcc4; /* the page ground */
  --cream: #f2ead6; /* raised surfaces, chips, inputs */
  --panel: #d8caa8; /* hardware panel (the rack) */
  --ink-900: #2b2118; /* primary ink — a warm near-black */
  --mango: #e08a2e;
  --clay: #b5532e;
  --ochre: #c99a45;

  /* --- semantic roles (names preserved so components need no edits) ----- */
  /* Ground (was "ink", the dark room — now warm paper, the lit room) */
  --ink: var(--paper);
  --ink-700: #e0d4ba;
  --ink-600: #d8caa8;
  --ink-500: #cdbd99;

  /* Ink (was "bone", the light — now the dark line on paper) */
  --bone: var(--ink-900);
  --haze: rgba(43, 33, 24, 0.74); /* secondary text, ~5.6:1 on paper (WCAG AA) */
  --whisper: rgba(43, 33, 24, 0.68); /* tertiary / captions, ~4.7:1 on paper (WCAG AA) */
  --line: rgba(43, 33, 24, 0.16);
  --line-strong: rgba(43, 33, 24, 0.32);

  /* Ember → the one accent, now a clay wax-seal red-brown */
  --ember: var(--clay);
  --ember-deep: #97431f;
  --ember-blush: var(--mango);
  --ember-glow: rgba(181, 83, 46, 0.26);

  /* --- type: grotesque display + body, mono for labels ----------------- */
  --font-display: 'Space Grotesk Variable', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-text: 'Space Grotesk Variable', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* aliases kept so component-scoped styles referencing them still resolve */
  --font-serif: var(--font-display);
  --font-sans: var(--font-text);

  --text-xs: 0.74rem;
  --text-sm: 0.86rem;
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.08rem + 0.36vw, 1.34rem);
  --display-sm: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --display: clamp(3rem, 1.9rem + 5.6vw, 6.6rem);

  /* Spacing & frame */
  --frame-gap: clamp(0.85rem, 2.2vw, 2.1rem);
  --pad-x: clamp(1.5rem, 6vw, 6.5rem);
  --measure: 68ch;

  --ease-cinema: cubic-bezier(0.2, 0.72, 0.18, 1);
  color-scheme: light;
}

/* ------------------------------ reset ---------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100svh;
  background-color: var(--ink);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
::selection {
  background: var(--ember);
  color: var(--cream);
}

/* --------------------- atmosphere: warm paper light -------------------- */
/* A faint warmth low and to the right + a soft top sheen and paper vignette.
   No glow — just the room catching light. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 82% 116%,
      rgba(224, 138, 46, 0.16) 0%,
      rgba(181, 83, 46, 0.08) 26%,
      rgba(231, 220, 196, 0) 58%
    ),
    radial-gradient(140% 120% at 50% -20%, rgba(255, 251, 240, 0.5), rgba(231, 220, 196, 0) 52%),
    radial-gradient(150% 150% at 50% 50%, rgba(231, 220, 196, 0) 58%, rgba(43, 33, 24, 0.07) 100%);
  animation: breathe 14s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

/* ----------------------- atmosphere: filmic grain ---------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --------------------------- the page shell ---------------------------- */
/* A plain full-height column. The old bordered "framed document" shell and
   its corner ticks were retired: the analog feel lives in the paper, grain
   and warm light, not a drawn frame. */
.shell {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.shell > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ------------------------------ headings ------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-wrap: balance;
}

/* ---------------------- shared label / eyebrow ------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--haze);
}
.ember-dot {
  color: var(--ember);
  text-shadow: 0 0 14px var(--ember-glow);
}

/* ------------------------------ links ---------------------------------- */
.link {
  color: var(--bone);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transform-origin: left;
  transition:
    transform 0.5s var(--ease-cinema),
    background 0.4s ease,
    opacity 0.4s ease;
}
.link:hover::after,
.link:focus-visible::after {
  background: var(--ember);
  opacity: 1;
}
/* guarantee a 24px touch target where links stand alone in a nav row */
.hero__links .link,
.foot__nav .link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* keyboard focus that suits the warm room */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ------------------------ load-in choreography ------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.reveal {
  animation: rise 1.15s var(--ease-cinema) both;
  animation-delay: calc(var(--i, 0) * 150ms + 120ms);
}

/* ------------------------------- prose --------------------------------- */
.prose {
  max-width: var(--measure);
  color: var(--haze);
  font-size: var(--text-base);
  line-height: 1.78;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: var(--display-sm);
  color: var(--bone);
  margin-top: 2.6em;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.prose h2:first-of-type {
  margin-top: 0;
}
.prose h3 {
  font-size: var(--text-lg);
  color: var(--bone);
  margin-top: 2em;
  font-weight: 600;
}
.prose strong {
  color: var(--bone);
  font-weight: 600;
}
.prose a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
.prose a:hover {
  text-decoration-color: var(--ember);
}
.prose ul,
.prose ol {
  padding-left: 1.2em;
}
.prose li + li {
  margin-top: 0.5em;
}
.prose li::marker {
  color: var(--ember-deep);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 3em 0;
}
.prose .lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--bone);
  font-weight: 500;
}
/* keep the standfirst clear of the first heading on legal pages */
.prose .lede + h2 {
  margin-top: 1.8em;
}

/* ------------------------------ utilities ------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--bone);
  color: var(--cream);
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: var(--frame-gap);
}

/* ------------------------- reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   Mango Tuesday: site layer
   Sits on top of global.css (the Tape Room foundation). Product-forward and
   professional: whitespace, hairline rules, mono metadata used sparingly.
   One clay accent per view. No frames, no pull quotes, no theatrics.
   ========================================================================= */

:root {
  --rule-mid: 1.5px solid var(--bone);
  --rule-hair: 1px solid var(--line);
}

/* padding utility for full-width sections */
.wrap {
  padding-inline: var(--pad-x);
}

/* --------------------- status dot (Ripening) --------------------------- */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember-glow);
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot {
    animation: none;
  }
}

/* ------------- section header: mono label + hairline rule -------------- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: clamp(2.4rem, 4.5vw, 3.8rem);
  padding-bottom: 1.3rem;
}
.sec-head__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--haze);
  white-space: nowrap;
}
.sec-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: translateY(-3px);
}
.sec-head__no {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--whisper);
  white-space: nowrap;
}
/* on phones, let the note drop to its own line */
@media (max-width: 560px) {
  .sec-head {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .sec-head__no {
    white-space: normal;
    flex-basis: 100%;
    text-align: left;
  }
}

/* -------------------------- header (top bar) --------------------------- */
.runhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem var(--pad-x) 1.1rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.runhead__home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--bone);
}
.runhead__home .seal {
  transition: transform 0.6s var(--ease-cinema);
}
.runhead__home:hover .seal {
  transform: rotate(-6deg);
}
.runhead__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.runhead__nav {
  display: flex;
  gap: 1.6rem;
  font-size: var(--text-sm);
  font-weight: 500;
}
.runhead__nav .link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --------------- launch-week band (retires after the sale) -------------- */
/* The one loud thing on the page, by request: a solid strip of the clay
   accent, worn the same way the buy button wears it (deep clay under
   cream, 5.6:1, WCAG AA). The shared ember-dot cannot read on its own
   colour, so inside the band everything speaks cream. The script in
   LaunchBanner.astro removes the band once the window closes. */
.saleband {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  padding: 0.8rem var(--pad-x) 0.75rem;
  background: var(--ember-deep);
}
.saleband__line {
  font-size: var(--text-sm);
  color: var(--cream);
  line-height: 1.5;
}
.saleband__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}
.saleband .ember-dot {
  color: var(--cream);
  text-shadow: none;
}
.saleband__clock {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.saleband__clock-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ------------------------------- hero ---------------------------------- */
.hero {
  padding: clamp(3.4rem, 8vw, 6.2rem) var(--pad-x) clamp(1.6rem, 3.4vw, 2.6rem);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-top: 1.1rem;
}
.hero__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--haze);
  max-width: 46ch;
  margin-top: 1.3rem;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* -------------------- page header (inner pages) ------------------------ */
.page-head {
  padding: clamp(2.6rem, 6vw, 4.4rem) var(--pad-x) 0;
}
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.page-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-top: 0.9rem;
  max-width: 18ch;
}
.page-head__lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--haze);
  max-width: var(--measure);
  margin-top: 1.2rem;
  font-weight: 400;
}

/* ========================== THE SHELF (shop) ========================== */
.shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 860px) {
  .shelf {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .shelf {
    grid-template-columns: 1fr;
  }
}
/* product card: a raised cream stock card with a ruled till row */
.pcard {
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    0 4px 14px rgba(43, 33, 24, 0.14);
  padding: clamp(1.3rem, 2.2vw, 1.8rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform 0.4s var(--ease-cinema),
    box-shadow 0.4s var(--ease-cinema);
}
.pcard:hover,
.pcard:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    0 8px 22px rgba(43, 33, 24, 0.2);
}
/* transparent outline so forced-colors mode repaints a visible focus ring */
.pcard:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--ember),
    0 8px 22px rgba(43, 33, 24, 0.2);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.pcard__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--haze);
}
.pcard__no {
  color: var(--ember-deep);
}
.pcard__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-top: 0.85rem;
}
.pcard__tag {
  color: var(--haze);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-top: 0.65rem;
  max-width: 30ch;
}
/* the screenshot as a floating window: every card reserves the same
   height (a 5:3 slot, just wider than the widest UI), each plugin sits
   in it whole at its natural proportions, centred, whitespace either
   side. No frame, no ground: the render's own edges are the window. */
.pcard__shot {
  position: relative;
  margin-top: 1.05rem;
  aspect-ratio: 5 / 3;
  /* not decorative: without a hidden overflow the box's automatic
     minimum size lets the image grow it past the ratio */
  overflow: hidden;
}
.pcard__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* clay band ruled straight across the window: the plugin is real, the
   shelf slot is not open yet */
.pcard__soon {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  background: var(--ember-deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5em 0;
}
.pcard__specs {
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--whisper);
}
/* the till row: price slot + status, like a shelf ticket */
.pcard__till {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  border-top: 1px dotted var(--line-strong);
  margin-top: 0.55rem;
  padding-top: 0.65rem;
}
.pcard__price {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.pcard__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--haze);
  white-space: nowrap;
}
.pcard__status .status-dot {
  width: 5px;
  height: 5px;
}

/* ============================== THE DEAL =============================== */
.deal-intro {
  color: var(--haze);
  max-width: var(--measure);
  line-height: 1.7;
}
.deal-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
@media (max-width: 760px) {
  .deal-terms {
    grid-template-columns: 1fr;
  }
}
.deal-term {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
}
.deal-term__no {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ember-deep);
}
.deal-term__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-top: 0.55rem;
}
.deal-term__body {
  color: var(--haze);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: 0.45rem;
}

/* ===================== ARTICLE (product pages) ======================== */
.article {
  padding: 0 var(--pad-x) clamp(2.6rem, 5vw, 4rem);
}
.article__kicker {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haze);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
}
.article__kicker .no {
  color: var(--ember-deep);
}
.article__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-top: 0.7rem;
}
.article__stand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--haze);
  max-width: var(--measure);
  margin-top: 1.3rem;
  text-wrap: balance;
}
.article__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}
.article__rule {
  border: none;
  border-top: 1px solid var(--line-strong);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
/* shot top-left, counter top-right on the same line; below them, "The
   idea" story (left, under the shot) and the "What it does" read (right,
   under the counter) share the second row, so their section heads start
   level and the hairline rules read as one line across the gutter. On a
   phone: shot, buy panel, story, then the read. */
.article__body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas:
    'shot aside'
    'story main';
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.article__body > .article__shots {
  grid-area: shot;
}
.article__body > .article__main {
  grid-area: main;
}
.article__body > .article__aside {
  grid-area: aside;
}
.article__body > .article__story {
  grid-area: story;
}
@media (max-width: 760px) {
  .article__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      'shot'
      'aside'
      'story'
      'main';
  }
}

/* feature list: ruled rows */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  color: var(--haze);
  line-height: 1.5;
}
.feature-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.feature-list .no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ember-deep);
  white-space: nowrap;
  padding-top: 0.15rem;
}

/* ==================== availability (purchase panel) ==================== */
.counter {
  border: var(--rule-mid);
  background: color-mix(in srgb, var(--cream) 42%, transparent);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.counter__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1.15;
}
.counter__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}
.counter__meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.counter__meta .tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0.35rem 0.6rem;
  background: var(--cream);
}
.counter .button {
  text-align: center;
  align-self: stretch;
}
.counter__fine {
  font-size: var(--text-sm);
  color: var(--whisper);
  line-height: 1.55;
  border-top: 1px dotted var(--line-strong);
  padding-top: 0.85rem;
}

/* sale ticket: the struck list price beside the clay selling price.
   Rendered by PriceTag only when /catalog sends a listAmount, so the
   sale appears and retires on the server's schedule, no deploy. */
.price__was {
  color: var(--whisper);
  font-size: 0.85em;
  font-weight: 400;
  margin-right: 0.1em;
}
.price__now {
  color: var(--ember-deep);
}

/* the one clay action; --ember-deep clears WCAG AA (5.6:1) on cream */
.button {
  font-weight: 500;
  font-size: var(--text-sm);
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  background: var(--ember-deep);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(43, 33, 24, 0.35);
  transition: background 0.4s var(--ease-cinema);
}
.button:hover {
  background: color-mix(in srgb, var(--ember-deep) 84%, var(--bone));
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

/* ===================== THE MANUAL (guide pages) ======================= */
/* A typeset instrument manual living inside the site: hairline-ruled
   sections, mono labels, sunken wells for the text diagrams, numbered lists
   in the feature-list style. Tokens only; one clay accent, used as small
   marks (numbers, the status dot, the aside rule). */
.guide {
  padding: 0 var(--pad-x) clamp(2.6rem, 5vw, 4rem);
  max-width: 62rem;
}
.guide__head {
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
}
.guide__eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haze);
}
.guide__eyebrow .no {
  color: var(--ember-deep);
}
.guide__dot {
  color: var(--line-strong);
}
.guide__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-top: 0.7rem;
}
.guide__stand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--haze);
  max-width: var(--measure);
  margin-top: 1.2rem;
  text-wrap: balance;
}
.guide__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}
.guide__rule {
  border: none;
  border-top: 1px solid var(--line-strong);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* a section is just spacing; the SecHead brings its own top padding */
.guide__section {
  scroll-margin-top: 2rem;
}
.guide__prose {
  max-width: var(--measure);
  color: var(--haze);
  line-height: 1.72;
}
.guide__prose > p + p {
  margin-top: 1.05em;
}

/* the mono text diagram, in a sunken well (scrolls inside itself on phones) */
.diagram {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-600));
  box-shadow:
    inset 0 2px 6px rgba(43, 33, 24, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.6rem);
  overflow-x: auto;
}
.diagram pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.62rem + 0.4vw, 12.5px);
  line-height: 1.75;
  color: var(--haze);
  white-space: pre;
}

/* the Ableton aside: a quiet clay-ruled note, not a card */
.aside-note {
  margin-top: 1.5rem;
  border-left: 2px solid var(--ember-deep);
  background: color-mix(in srgb, var(--cream) 40%, transparent);
  padding: 1rem 1.2rem;
  border-radius: 0 4px 4px 0;
  max-width: var(--measure);
}
.aside-note__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember-deep);
}
.aside-note__body {
  color: var(--haze);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-top: 0.55rem;
}

/* the controls glossary: grouped, mono labels + range readouts, a hairline
   row per control that degrades to a definition list on narrow screens */
.control-group + .control-group {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}
.control-group__title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember-deep);
}
.control-group__intro {
  color: var(--haze);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: 0.5rem;
  max-width: var(--measure);
}
.control-group__list {
  margin: 0.9rem 0 0;
}
.control {
  display: grid;
  grid-template-columns: minmax(8.5rem, 13rem) 1fr;
  gap: 0.35rem 1.8rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}
.control:last-child {
  border-bottom: 1px solid var(--line);
}
.control__key {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.control__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}
.control__range {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--whisper);
}
.control__body {
  margin: 0;
  color: var(--haze);
  font-size: var(--text-sm);
  line-height: 1.6;
}
@media (max-width: 620px) {
  .control {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .control__key {
    flex-direction: row;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
  }
}

/* recipes: named blocks, each a numbered mini-workflow */
.recipe + .recipe {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.recipe__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

/* good to know: ruled rows with a small clay square marker */
.note-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
}
.note-list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--haze);
  line-height: 1.62;
}
.note-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.note-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ember-deep);
}

/* guide footer: back link + honest status line */
.guide__foot {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
}
.guide__foot-back {
  font-size: var(--text-sm);
}
.guide__foot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--whisper);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ============================== FOOTER =============================== */
.foot {
  border-top: 1px solid var(--line-strong);
  padding: clamp(1.8rem, 3.4vw, 2.8rem) var(--pad-x) clamp(1.8rem, 3.4vw, 2.8rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.4rem 2rem;
}
.foot__mark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.foot__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.foot__sub {
  font-size: var(--text-xs);
  color: var(--whisper);
}
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: flex-end;
  font-size: var(--text-sm);
}
.foot__nav .link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.foot__fine {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--whisper);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
}

/* =========================================================================
   The forum's own components, appended after global.css + site.css by
   scripts/emit-forum-assets.mjs. No :root here: every value leans on the
   shared Tape Room tokens so the forum can never drift off-palette.
   ========================================================================= */

/* the seal, unscoped (Seal.astro's styles are component-scoped) */
.seal {
  display: inline-block;
  width: var(--seal-size);
  height: var(--seal-size);
  line-height: 0;
}
.seal svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.seal__body {
  fill: var(--ember);
}
.seal__leaf {
  fill: var(--bone);
}

/* ------------------------------ the column ----------------------------- */
.fwrap {
  width: min(100% - 2 * var(--frame-gap), 56rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.6rem) clamp(3rem, 7vw, 5rem);
}

/* ------------------------------ masthead ------------------------------- */
.fmast {
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.fmast h1 {
  font-size: var(--display-sm);
  margin-top: 0.35em;
}
.fmast__sub {
  color: var(--haze);
  max-width: var(--measure);
  margin-top: 0.7em;
}
.fmast__rule {
  border: none;
  border-top: 1px solid var(--line-strong);
  margin-top: 1.4rem;
}

/* ------------------------- section head w/ rule ------------------------ */
.fsec {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 2.4rem 0 0.9rem;
}
.fsec > .eyebrow {
  flex: none;
}
.fsec::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --------------------------- category cards ---------------------------- */
.cats {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.cat {
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.3s ease;
}
.cat:hover {
  border-color: var(--ember);
}
.cat__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--bone);
  text-decoration: none;
}
.cat__name:hover {
  color: var(--ember-deep);
}
.cat__desc {
  color: var(--haze);
  font-size: var(--text-sm);
  flex: 1;
}
.cat__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--whisper);
}

/* ----------------------------- thread rows ----------------------------- */
.tlist {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.trow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.trow--pinned {
  background: linear-gradient(90deg, rgba(201, 154, 69, 0.1), transparent 70%);
}
.trow__main {
  min-width: 0;
}
.trow__title {
  color: var(--bone);
  font-weight: 500;
  text-decoration: none;
}
.trow__title:hover {
  color: var(--ember-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trow__marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: 0.55rem;
  vertical-align: 0.1em;
}
.trow__aside {
  flex: none;
  display: flex;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--whisper);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.trow__votes {
  color: var(--ember-deep);
}

/* ----------------------------- chips & stamps -------------------------- */
.fchip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28em 0.75em;
  border-radius: 3px;
  background: rgba(43, 33, 24, 0.08);
  color: var(--haze);
  text-decoration: none;
}
a.fchip:hover {
  background: rgba(43, 33, 24, 0.14);
}
.fchip--pin {
  background: rgba(201, 154, 69, 0.22);
  color: var(--ink-900);
}
.stamp {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28em 0.75em;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  color: var(--haze);
  background: var(--cream);
}
.stamp--planned {
  border-color: rgba(201, 154, 69, 0.7);
  background: rgba(201, 154, 69, 0.14);
  color: var(--ink-900);
}
.stamp--building {
  border-color: rgba(224, 138, 46, 0.7);
  background: rgba(224, 138, 46, 0.14);
  color: var(--ink-900);
}
.stamp--shipped,
.stamp--fixed {
  border-color: var(--ember-deep);
  background: rgba(181, 83, 46, 0.14);
  color: var(--ember-deep);
}
.stamp--declined {
  opacity: 0.75;
}

/* ------------------------------- filters ------------------------------- */
.frow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 1.1rem;
}

/* -------------------------------- posts -------------------------------- */
.plist {
  list-style: none;
  padding: 0;
}
.post {
  border-top: 1px solid var(--line);
  padding: 1.3rem 0 1.5rem;
}
.post--opening {
  border-top: none;
}
.post__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.post__name {
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
}
.post__name:hover {
  color: var(--ember-deep);
}
.post__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--whisper);
  text-decoration: none;
}
.post__when:hover {
  color: var(--ember-deep);
}
.post--removed {
  color: var(--whisper);
  font-style: italic;
}
.mono-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 38% 30%, var(--cream), #d5c49c 78%);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--haze);
}
.fchip--staff {
  background: rgba(181, 83, 46, 0.14);
  color: var(--ember-deep);
}

/* post bodies: the markdown subset */
.post__body {
  color: var(--haze);
  line-height: 1.75;
  max-width: var(--measure);
  overflow-wrap: break-word;
}
.post__body > * + * {
  margin-top: 0.9em;
}
.post__body strong {
  color: var(--bone);
}
.post__body a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.post__body a:hover {
  text-decoration-color: var(--ember);
}
.post__body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(43, 33, 24, 0.07);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.post__body pre {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
.post__body pre code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}
.post__body blockquote {
  border-left: 3px solid var(--line-strong);
  padding: 0.1rem 0 0.1rem 1rem;
  color: var(--whisper);
}
.post__body ul {
  padding-left: 1.2em;
}
.post__body li::marker {
  color: var(--ember-deep);
}

/* small actions under a post (edit, delete, quote) */
.post__acts {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.7rem;
  align-items: center;
}
.post__acts .link,
.post__acts button {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--whisper);
  letter-spacing: 0.04em;
}

/* ------------------------------- forms --------------------------------- */
.ffield {
  display: block;
  margin-bottom: 1rem;
}
.ffield > span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--haze);
  margin-bottom: 0.4rem;
}
.ffield input,
.ffield select,
.ffield textarea {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--cream);
  padding: 0.7rem 0.9rem;
  font: 400 var(--text-sm) var(--font-text);
  color: var(--bone);
}
.ffield textarea {
  min-height: 11rem;
  line-height: 1.6;
  resize: vertical;
}
.ffield input:focus,
.ffield select:focus,
.ffield textarea:focus {
  outline: 2px solid var(--ember);
  outline-offset: 1px;
}
.fhelp {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--whisper);
  margin-top: 0.35rem;
}

.btn {
  display: inline-block;
  font: 500 0.85rem var(--font-text);
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 4px;
  background: var(--ember);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(43, 33, 24, 0.35);
  text-decoration: none;
}
.btn:hover {
  background: var(--ember-deep);
}
.btn--quiet {
  background: transparent;
  color: var(--bone);
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}
.btn--quiet:hover {
  background: rgba(43, 33, 24, 0.06);
}
.btn--bare {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ember-deep);
  padding: 0.2rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: 500 var(--text-sm) var(--font-text);
}

/* vote block: a pressed-in hardware count */
.vote {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0;
}
.vote__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ember-deep);
  letter-spacing: 0.06em;
}
.vote button[aria-pressed='true'] {
  background: var(--bone);
  color: var(--cream);
}

/* ------------------------------ notices -------------------------------- */
.notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ochre);
  background: var(--cream);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  margin: 0 0 1.2rem;
  color: var(--haze);
  font-size: var(--text-sm);
}
.notice--error {
  border-left-color: var(--ember-deep);
}

/* --------------------------- related panel ----------------------------- */
.related {
  border: 1px solid var(--line-strong);
  background: var(--cream);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 1.4rem;
}
.related[hidden] {
  display: none;
}
.related__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--haze);
  margin-bottom: 0.5rem;
}
.related ul {
  list-style: none;
  padding: 0;
}
.related li + li {
  margin-top: 0.4rem;
}
.related a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.related a:hover {
  text-decoration-color: var(--ember);
}
.related__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--whisper);
  margin-left: 0.4rem;
}

/* ------------------------------ the pager ------------------------------ */
.pager {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* --------------------------- admin controls ---------------------------- */
.admin {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.admin form {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.admin select {
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--cream);
  font: 500 var(--text-xs) var(--font-mono);
  padding: 0.35rem 0.5rem;
  color: var(--bone);
}
.admin button {
  font: 500 var(--text-xs) var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
}
.admin button:hover {
  background: rgba(43, 33, 24, 0.06);
}

/* ------------------------------ mobile --------------------------------- */
@media (max-width: 640px) {
  .trow {
    flex-direction: column;
    gap: 0.3rem;
  }
  .trow__aside {
    align-self: flex-start;
  }
}

/* the footer's dba line and seal hover, unscoped (SiteFooter.astro's
   styles are component-scoped, so the forum's bundle never sees them and
   the dba line fell back to body type at full size). Same reason the seal
   is copied above. Keep in step with SiteFooter.astro. */
.foot__sealLink {
  display: inline-block;
  transition: transform 0.6s var(--ease-cinema);
}
.foot__sealLink:hover {
  transform: rotate(-6deg);
}
.foot__dba {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--whisper);
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}
@media (max-width: 640px) {
  .foot {
    grid-template-columns: 1fr;
  }
  .foot__nav {
    justify-content: flex-start;
  }
}