/* The Berried Club by Molt & Moss
   ---------------------------------------------------------------------------
   The shrimp room.

   Anyone who breeds shrimp knows the look: a dark room, a rack of lit tanks, masking tape
   labels written in marker, airline tubing, a sponge filter putting up a column of
   bubbles, and a logbook full of test readings. No other website looks like that, and
   every shrimp keeper recognises it at a glance, so it is the whole visual language:

   - the header and footer are the room, dark in both palettes
   - a card is a tank: glass, with its light fixture sitting above it
   - a label is a strip of masking tape, written in marker
   - a notice is a note taped to the glass
   - numbers read like a test kit log, in a monospace face

   Colour comes from the founding tank itself: black substrate, moss at its brightest
   chartreuse, driftwood rust, and Sunkist orange. Orange is the shrimp, so it is kept for
   the mark and for signals and never used as a large UI fill, where it would make the
   animals in our own photographs look washed out. Moss carries every action.

   Still deliberately avoided: left-border callout bars, uppercase letterspaced labels,
   emoji headings and gradient hero blocks.

   Fonts are self-hosted from /fonts, so a page view sends nothing to a font service.
   Funnel Display and Funnel Sans (OFL), Martian Mono (OFL), Gochi Hand (OFL). */

@font-face { font-family: 'Funnel Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/funnel-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Funnel Display'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/funnel-display-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Funnel Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/funnel-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Funnel Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/funnel-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Funnel Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/funnel-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/martian-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/martian-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Gochi Hand'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/gochi-hand-latin-400-normal.woff2') format('woff2'); }

:root {
  --bg: #f3f1e7;
  --surface: #fcfbf5;
  --sunken: #e8e5d8;
  --fg: #151913;
  --muted: #586052;
  --rule: #d9d5c5;
  --rule-strong: #b9b4a0;

  --moss: #3d6a0f;
  --moss-hover: #30570a;
  --moss-ink: #fcfbf5;
  --moss-soft: #e4eecf;
  --moss-line: #a9c77a;

  --tannin: #8b4a2b;
  --tannin-soft: #f2e4d6;

  --warn: #865600;
  --danger: #a3381c;

  --sun: #d8650a;
  --tape: #ece0bd;
  --tape-ink: #23231b;
  --glass: rgba(170, 205, 160, 0.16);
  --glow: rgba(197, 224, 74, 0.28);

  --room: #0d110b;
  --room-2: #151b11;
  --room-fg: #e9efdc;
  --room-muted: #9aa58c;
  --room-rule: #2a3322;
  --lime: #c5e04a;
  --lime-ink: #0d110b;

  --radius: 6px;
  --radius-sm: 4px;
  --max: 74rem;
  --read: 44rem;

  --display: 'Funnel Display', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --marker: 'Gochi Hand', 'Marker Felt', 'Segoe Print', cursive;
  /* Kept for inline styles that predate the redesign; it now means the display face. */
  --serif: var(--display);
}

/* Dark palette.
   Applied when the device asks for it, unless the reader has explicitly chosen light, and
   whenever the reader has explicitly chosen dark. The two blocks below are generated from
   the same token list and `theme.test.ts` fails if they ever drift apart. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --bg: #0f130d;
  --surface: #161c13;
  --sunken: #0a0d08;
  --fg: #e9eedf;
  --muted: #9ba590;
  --rule: #262e20;
  --rule-strong: #3a4630;
  --moss: #c5e04a;
  --moss-hover: #d6ee66;
  --moss-ink: #0d110b;
  --moss-soft: #1c2613;
  --moss-line: #4c6326;
  --tannin: #e0956a;
  --tannin-soft: #241811;
  --warn: #e6b450;
  --danger: #f2896a;
  --sun: #ff9a3c;
  --tape: #d8cba3;
  --tape-ink: #1d1d16;
  --glass: rgba(170, 205, 160, 0.06);
  --glow: rgba(197, 224, 74, 0.2);
  }
}

:root[data-theme='dark'] {
  --bg: #0f130d;
  --surface: #161c13;
  --sunken: #0a0d08;
  --fg: #e9eedf;
  --muted: #9ba590;
  --rule: #262e20;
  --rule-strong: #3a4630;
  --moss: #c5e04a;
  --moss-hover: #d6ee66;
  --moss-ink: #0d110b;
  --moss-soft: #1c2613;
  --moss-line: #4c6326;
  --tannin: #e0956a;
  --tannin-soft: #241811;
  --warn: #e6b450;
  --danger: #f2896a;
  --sun: #ff9a3c;
  --tape: #d8cba3;
  --tape-ink: #1d1d16;
  --glass: rgba(170, 205, 160, 0.06);
  --glow: rgba(197, 224, 74, 0.2);
}

/* ------------------------------------------------------------------- base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.public { overflow-x: hidden; }

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.035em; line-height: 1; }
h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1em; }
p, li, dd, td, figcaption { overflow-wrap: anywhere; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--moss); }
strong, b { font-weight: 600; }
em { font-style: italic; }
small, .small { font-size: 0.9rem; }
.muted { color: var(--muted); }
hr { border: 0; height: 1px; background: var(--rule); margin: 2.5rem 0; }
img, svg { max-width: 100%; }
code, kbd, samp { font-family: var(--mono); font-size: 0.86em; }

::selection { background: var(--lime); color: var(--lime-ink); }

.lede,
.lead {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--fg);
  max-width: 40rem;
}
.eyebrow,
.label {
  font-family: var(--marker);
  font-size: 1rem;
  color: var(--tannin);
  margin: 0 0 0.4rem;
}

/* ------------------------------------------------------------- the room --- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

.room-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--room) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--room-fg);
  border-bottom: 1px solid var(--room-rule);
}
.room-inner {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}
.room-head .room-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand .brand-mark { flex: none; transition: transform 0.4s cubic-bezier(.3,1.6,.5,1); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); }
.brand-word { display: grid; line-height: 1.05; }
.brand-word strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}
.brand-word span { font-size: 0.78rem; color: var(--room-muted); }

.desktop-nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.desktop-nav a {
  position: relative;
  padding: 0.45rem 0.8rem;
  color: var(--room-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.desktop-nav a:hover { color: var(--room-fg); background: var(--room-2); }
.desktop-nav a[aria-current='page'] { color: var(--room-fg); }
.desktop-nav a[aria-current='page']::after {
  /* A single bubble under the current section. */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: -0.21rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
}

.head-action {
  flex: none;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.head-action:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow); }

.mobile-menu { display: none; margin-left: auto; position: relative; }
.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid var(--room-rule);
  border-radius: 999px;
  font-weight: 600;
  color: var(--room-fg);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { background: var(--room-2); }
.mobile-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  width: min(18rem, calc(100vw - 2.5rem));
  display: grid;
  padding: 0.5rem;
  background: var(--room-2);
  border: 1px solid var(--room-rule);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.mobile-menu nav a {
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--room-fg);
  font-weight: 600;
}
.mobile-menu nav a[aria-current='page'],
.mobile-menu nav a:hover { background: var(--room); }
.mobile-menu nav .mobile-action { margin-top: 0.3rem; background: var(--lime); color: var(--lime-ink); text-align: center; }

main {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
  padding: 2.75rem 0 5rem;
  min-height: 60vh;
}

/* The section label on deep pages: a strip of masking tape on the glass. */
.section-tape { margin: 0 0 1.4rem; }
.section-tape a,
.tape {
  display: inline-block;
  padding: 0.28rem 0.95rem 0.22rem;
  background: var(--tape);
  color: var(--tape-ink);
  font-family: var(--marker);
  font-size: 1.15rem;
  line-height: 1.25;
  text-decoration: none;
  transform: rotate(-1.6deg);
  clip-path: polygon(2% 8%, 0 0, 30% 4%, 62% 0, 100% 6%, 98% 50%, 100% 94%, 70% 100%, 38% 96%, 0 100%, 3% 52%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.section-tape a:hover { background: var(--lime); }

.room-foot {
  margin-top: 4rem;
  background: var(--room);
  color: var(--room-fg);
  position: relative;
}
.room-foot .substrate {
  height: 18px;
  background-color: var(--room);
  background-image:
    radial-gradient(circle at 20% 40%, #3a3f33 1.4px, transparent 1.6px),
    radial-gradient(circle at 70% 70%, #4a4a3c 1.2px, transparent 1.4px),
    radial-gradient(circle at 45% 20%, #2e3328 1.6px, transparent 1.8px),
    radial-gradient(circle at 85% 30%, #5a4f3a 1px, transparent 1.2px);
  background-size: 11px 9px, 7px 8px, 13px 11px, 9px 7px;
  border-top: 1px solid var(--room-rule);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) 1fr;
  gap: 3rem;
  padding: 3.5rem 0 2rem;
}
.foot-brand p { color: var(--room-muted); margin: 1rem 0 1.2rem; max-width: 20rem; }
.foot-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.8rem 2rem;
}
.foot-nav div { display: grid; gap: 0.4rem; align-content: start; }
.foot-nav strong { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin-bottom: 0.2rem; }
.foot-nav strong a { color: var(--room-fg); text-decoration: none; }
.foot-nav a { color: var(--room-muted); text-decoration: none; font-size: 0.93rem; overflow-wrap: anywhere; }
.foot-nav a:hover { color: var(--lime); }
.foot-small {
  border-top: 1px solid var(--room-rule);
  padding: 1.4rem 0 2.6rem;
  color: var(--room-muted);
  font-size: 0.86rem;
}
.foot-small p { margin: 0; max-width: 46rem; }

/* Theme control.
   Hidden until the script enables it: without JavaScript it could not do anything, and a
   dead button is worse than no button. The site follows the device either way. */
.theme-toggle[hidden] { display: none; }
.theme-toggle,
.room-foot .theme-toggle {
  background: transparent;
  border: 1px solid var(--room-rule);
  border-radius: 999px;
  color: var(--room-fg);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--lime); color: var(--lime); background: transparent; }

/* Admin keeps a plain operating header: it is a tool, not the room. */
.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.site-head .brand { display: grid; gap: 0; line-height: 1.15; }
.site-head .brand strong { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.site-head .brand span { font-size: 0.78rem; color: var(--muted); }
.site-head nav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.9rem; }
.site-head nav a { color: var(--muted); text-decoration: none; padding: 0.15rem 0; border-bottom: 2px solid transparent; }
.site-head nav a:hover { color: var(--fg); }
.site-head nav a[aria-current='page'] { color: var(--fg); border-bottom-color: var(--moss); }
.site-foot {
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}
body.admin main { padding-top: 1.75rem; }

/* ------------------------------------------------------------------ prose --- */

.prose { max-width: var(--read); }
.prose > h1:first-child,
main > section:first-child > h1:first-child { margin-bottom: 0.4em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul,
.prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--moss); font-weight: 600; }
.prose a { text-decoration-color: var(--moss-line); }
.prose a:hover { text-decoration-color: var(--moss); }
.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  position: relative;
}
.prose blockquote::before {
  /* Three bubbles instead of a quote bar. */
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.5rem;
  height: 1.6rem;
  background:
    radial-gradient(circle at 50% 15%, var(--moss) 0.18rem, transparent 0.2rem),
    radial-gradient(circle at 50% 52%, var(--moss) 0.14rem, transparent 0.16rem),
    radial-gradient(circle at 50% 85%, var(--moss) 0.1rem, transparent 0.12rem);
}
sup a { text-decoration: none; color: var(--moss); font-weight: 600; }

/* ------------------------------------------------------------ the tanks --- */
/* A card is a tank: glass, a little water tint, and its light fixture sitting above it.
   The fixture is a separate bar with a gap underneath, not a coloured border, which is
   why it reads as hardware rather than as decoration. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 2rem 1.4rem;
  margin: 1.4rem 0 3rem;
  padding-top: 0.6rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.35rem 1.35rem 1.4rem;
  background: linear-gradient(var(--glass), var(--glass)), var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: inset 0 18px 22px -20px var(--glow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 14%;
  right: 14%;
  height: 5px;
  border-radius: 3px;
  background: var(--fg);
  opacity: 0.85;
}
a.card:hover,
.card:has(a:hover) {
  transform: translateY(-3px);
  border-color: var(--moss);
  box-shadow: inset 0 26px 30px -22px var(--glow), 0 14px 30px -18px rgba(0, 0, 0, 0.35);
}
a.card:hover::before { background: var(--moss); box-shadow: 0 4px 14px var(--glow); }
.card h3 { margin: 0.15rem 0 0; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.card .price {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
}
.card .params {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--muted);
}

.card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  margin: -0.45rem -0.45rem 0.6rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 88%, rgba(0,0,0,.18) 1.2px, transparent 1.5px) 0 100% / 9px 7px repeat-x,
    var(--sunken);
}
.card-art.plant { color: var(--moss); }
.card-art svg { display: block; height: auto; }
.shrimp-art { transition: transform 0.35s cubic-bezier(.3,1.5,.5,1); }
.card:hover .shrimp-art { transform: translateX(-6px) rotate(-2deg); }

/* Status: a dot and a word, set like a reading. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.badge::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge.ok { color: var(--moss); }
.badge.ok::before { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.badge.warn { color: var(--warn); }
.badge.off { color: var(--muted); opacity: 0.8; }

/* -------------------------------------------------------- taped notes --- */
/* A notice is a note taped to the glass, with a short strip of tape across its top. */

.notice {
  position: relative;
  margin: 1.8rem 0 2rem;
  padding: 1.4rem 1.5rem 1.25rem;
  background: var(--moss-soft);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 10px 24px -20px rgba(0, 0, 0, 0.4);
}
.notice::before {
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  width: 5.5rem;
  height: 1.35rem;
  background: var(--tape);
  opacity: 0.92;
  transform: rotate(-3deg);
  clip-path: polygon(3% 10%, 0 0, 50% 6%, 100% 0, 97% 55%, 100% 100%, 50% 94%, 0 100%);
}
.notice.warn { background: var(--tannin-soft); }
.notice.warn::before { background: color-mix(in srgb, var(--sun) 55%, var(--tape)); }
.notice p:last-child,
.notice ul:last-child { margin-bottom: 0; }
.notice h2,
.notice h3 { margin-top: 0; }

/* ---------------------------------------------------------- the logbook --- */
/* Parameters, stats and tables are set like a test kit log: monospace numbers. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0;
  margin: 1.4rem 0 2rem;
  background: var(--room);
  color: var(--room-fg);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div,
.facts dt,
.facts dd { padding: 0 1.1rem; }
.facts > div { padding: 1rem 1.1rem; border-right: 1px solid var(--room-rule); }
.facts > div > dt,
.facts > div > dd { padding: 0; }
.facts dt {
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--room-muted);
}
.facts dd {
  margin: 0;
  padding-bottom: 1rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--lime);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 2.5rem;
}
.stat {
  padding: 1.1rem 1.15rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 0.86rem; color: var(--muted); }

.table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0 2rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
}
td { min-width: 7rem; }
tbody tr:last-child td { border-bottom: 0; }
th {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tape-ink);
  background: var(--tape);
  white-space: nowrap;
}
td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tbody tr:hover td { background: var(--moss-soft); }

/* -------------------------------------------------------------- research --- */

.research-intro { margin-bottom: 2rem; }
.research-facts { max-width: 56rem; }
.research-filter {
  display: grid;
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  margin: 0 0 2rem;
  background: var(--sunken);
  border-radius: var(--radius);
}
.research-filter-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
  margin: 0 0 3rem;
}
.evidence-record {
  padding: 1.3rem 1.4rem;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}
.evidence-record h3 { margin-top: 0.5rem; }
.evidence-record p:last-child { margin-bottom: 0; }
.evidence-labels { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; }
.gap-grid .evidence-record { background: var(--tannin-soft); border-color: transparent; }

/* Answer-first search results.
   The plain line is the first thing read, so it carries the weight of a lede rather than
   sitting at body size under a heading. */
.plain-answer { font-size: 1.12rem; margin-bottom: 0.9rem; }
.answer-steps { margin: 0 0 0.9rem; display: grid; gap: 0.7rem; }
.answer-steps div { display: grid; gap: 0.15rem; }
.answer-steps dt { font-family: var(--marker); font-size: 0.98rem; color: var(--tannin); }
.answer-steps dd { margin: 0; font-size: 0.97rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 3rem 0 0.6rem;
}
.section-head h2 { margin: 0; }
.section-head > p,
.section-head > span { margin: 0; color: var(--muted); font-size: 0.93rem; }

/* ----------------------------------------------------------------- forms --- */

form.stack { display: grid; gap: 1.25rem; max-width: 36rem; }
.row { display: grid; gap: 0.4rem; }
.row > span { font-size: 0.93rem; font-weight: 600; }
.row small { color: var(--muted); font-weight: 400; }
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.85rem;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover,
select:hover,
textarea:hover { border-color: var(--muted); }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 4px var(--glow);
}
input[type='checkbox'],
input[type='radio'] { width: auto; accent-color: var(--moss); }
textarea { min-height: 7rem; resize: vertical; }

:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
.room-head :focus-visible,
.room-foot :focus-visible { outline-color: var(--lime); }

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.72rem 1.4rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--moss-ink);
  background: var(--moss);
  border: 1.5px solid var(--moss);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
button:hover,
.button:hover {
  background: var(--moss-hover);
  border-color: var(--moss-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px var(--moss);
}
button.secondary,
.button.secondary,
.button.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
button.secondary:hover,
.button.secondary:hover,
.button.ghost:hover { background: var(--sunken); border-color: var(--fg); box-shadow: none; }
button:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.link-button {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.link-button:hover { color: var(--fg); background: none; transform: none; box-shadow: none; }

fieldset {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}
legend { padding: 0 0.45rem; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.checks { display: grid; gap: 0.65rem; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 0.42rem; flex: none; }

[hidden] { display: none !important; }

.range-pair { display: flex; align-items: center; gap: 0.5rem; }
.range-pair input { width: auto; flex: 1 1 0; min-width: 0; max-width: 6rem; padding-inline: 0.5rem; }
.row > * { min-width: 0; }
.cols > * { min-width: 0; }

.restock-form { display: grid; gap: 0.9rem; max-width: 28rem; margin-top: 1rem; }
.restock-form .status:empty { display: none; }
.restock-form .status { margin: 0; font-size: 0.92rem; color: var(--muted); }
.restock-form .status[data-kind='error'] { color: var(--danger); }
#restock .done { margin: 0; font-weight: 600; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- pictures --- */
/* Illustrations, never photographs of stock we do not have. Photographs of our own tank
   are framed like the tank they came from. */

.hero-art,
.hero-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 2.5rem;
  padding: 2rem 1.5rem 1.6rem;
  background: var(--room);
  color: var(--room-fg);
  border-radius: var(--radius);
}
.hero-art svg,
.hero-figure svg { height: auto; }
.hero-figure figcaption { font-size: 0.92rem; color: var(--room-muted); text-align: center; max-width: 30rem; margin: 0; }

.morph-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.morph-row li {
  padding: 0.9rem 0.8rem 1rem;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}
.morph-row svg { height: auto; }
.morph-row strong { display: block; margin-top: 0.3rem; font-size: 0.95rem; }
.morph-row span { display: block; font-size: 0.8rem; color: var(--muted); }

.moss-rule { display: flex; justify-content: center; color: var(--moss); margin: 2.5rem 0 0; }

.photo-figure { display: grid; gap: 0.7rem; margin: 1.5rem 0 2rem; }
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sunken);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
}
.photo-figure figcaption { margin: 0; max-width: 36rem; font-size: 0.9rem; color: var(--muted); }
.prose .photo-figure img { max-width: 28rem; }

/* ------------------------------------------------------------ print card --- */
/* The printed acclimation card. Sized to cut from a sheet and drop in a box. Ink-light on
   purpose: this gets printed on a home printer many times over. */

.print-card {
  max-width: 30rem;
  margin: 0 0 1rem;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  break-inside: avoid;
}
.print-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.print-card ol { margin: 0.7rem 0; padding-left: 1.2rem; }
.print-card li { margin-bottom: 0.35rem; font-size: 0.92rem; }
.print-params { margin: 0 0 0.2rem; font-family: var(--mono); font-size: 0.85rem; font-weight: 600; }

@media print {
  .no-print,
  .site-head,
  .site-foot,
  .room-head,
  .room-foot,
  .section-tape,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .print-card { border-color: #000; color: #000; background: #fff; page-break-inside: avoid; }
}

/* ============================================================== HOMEPAGE === */

.home main { width: 100%; padding: 0; }
.home .wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

/* ---- hero: the tank at night ---- */

.night {
  background: var(--room);
  color: var(--room-fg);
  overflow: hidden;
  position: relative;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}
.hero h1 {
  font-size: clamp(2.9rem, 7.4vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 1.4rem;
}
.hero h1 .count {
  color: var(--lime);
  font-style: normal;
}
.hero .lede { color: var(--room-fg); opacity: 0.88; margin-bottom: 2rem; }
.hero .tape { margin-bottom: 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.night .button { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-size: 1.05rem; padding: 0.85rem 1.6rem; }
.night .button:hover { box-shadow: 0 10px 28px -8px var(--glow); background: #d6ee66; border-color: #d6ee66; }
.night .button.ghost { background: transparent; color: var(--room-fg); border-color: var(--room-rule); }
.night .button.ghost:hover { border-color: var(--room-fg); background: var(--room-2); box-shadow: none; }

/* The aquarium: a light fixture, glass, our own photograph as the water, black substrate,
   a sponge filter and its bubbles, and a tape label on the front pane. */
.aquarium { position: relative; margin: 2.5rem 0 1rem; }
.aquarium .fixture {
  position: absolute;
  top: -1.9rem;
  left: 8%;
  right: 8%;
  height: 0.7rem;
  background: #2a3023;
  border-radius: 4px;
  box-shadow: 0 0.55rem 2.6rem 0.4rem rgba(233, 255, 190, 0.22);
}
.aquarium .fixture::before,
.aquarium .fixture::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  width: 3px;
  height: 1.2rem;
  background: #2a3023;
}
.aquarium .fixture::before { left: 6%; }
.aquarium .fixture::after { right: 6%; }
.aquarium .glass {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid #39422f;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 120px -20px rgba(197, 224, 74, 0.18);
}
.aquarium img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aquarium .glass::after {
  /* The reflection on the front pane. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
}
.aquarium .stand {
  height: 0.85rem;
  margin: 0 -0.6rem;
  background: #232a1d;
  border-radius: 0 0 4px 4px;
}
.aquarium .glass-tape {
  position: absolute;
  z-index: 3;
  left: 1.1rem;
  bottom: 1.1rem;
  transform: rotate(-3deg);
}
.bubbles { position: absolute; z-index: 2; right: 12%; bottom: 0; width: 2.4rem; height: 100%; pointer-events: none; }
.bubbles span {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  width: var(--s, 7px);
  height: var(--s, 7px);
  border-radius: 50%;
  border: 1.5px solid rgba(235, 255, 230, 0.75);
  background: rgba(235, 255, 230, 0.12);
  animation: rise var(--d, 5s) linear infinite;
  animation-delay: var(--t, 0s);
  opacity: 0;
}
@keyframes rise {
  0% { transform: translate(-50%, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(calc(-50% + 6px), -50vh); }
  92% { opacity: 0.9; }
  100% { transform: translate(calc(-50% - 4px), -110%); opacity: 0; }
}
.aquarium figcaption { margin-top: 1.4rem; font-size: 0.88rem; color: var(--room-muted); }

/* ---- the reading strip ---- */

.readings {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--room-rule);
  border-bottom: 1px solid var(--room-rule);
  background: var(--room-2);
}
.readings .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.2rem; padding: 1.05rem 0; }
.readings .tape { transform: rotate(-2deg); font-size: 0.95rem; }
.reading { display: flex; align-items: baseline; gap: 0.55rem; color: var(--room-muted); font-size: 0.85rem; }
.reading b { font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--lime); }
.readings a { margin-left: auto; color: var(--room-fg); font-weight: 600; font-size: 0.93rem; }

/* ---- section heads on the homepage ---- */

.home-section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.home-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 1rem 4rem; align-items: end; margin-bottom: 3rem; }
.home-head h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -0.04em; line-height: 0.98; margin: 0; }
.home-head p { margin: 0; color: var(--muted); font-size: 1.08rem; }
.night .home-head p { color: var(--room-muted); }

/* ---- the rack: community tools as tanks on shelves ---- */

.rack { position: relative; padding: 0 clamp(0.6rem, 2vw, 1.4rem); }
.rack::before,
.rack::after {
  /* The uprights. */
  content: '';
  position: absolute;
  top: -1.5rem;
  bottom: -1rem;
  width: 0.7rem;
  background: linear-gradient(90deg, #262d20, #39432f 45%, #20261b);
  border-radius: 2px;
}
.rack::before { left: 0; }
.rack::after { right: 0; }
.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding: 2.6rem clamp(0.6rem, 2vw, 1.4rem) 0;
  position: relative;
}
.shelf::after {
  content: '';
  grid-column: 1 / -1;
  height: 0.75rem;
  margin: 0 calc(-1 * clamp(1.2rem, 4vw, 2.8rem));
  background: linear-gradient(#3a4430, #20261b);
  border-radius: 2px;
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.7);
}
.shelf + .shelf { margin-top: 1.4rem; }

.tank {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  text-decoration: none;
  color: var(--room-fg);
  border: 2px solid #3d4733;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background:
    linear-gradient(to top, #1b1a14 0, #1b1a14 0.9rem, transparent 0.9rem),
    linear-gradient(180deg, rgba(197, 224, 74, 0.1), rgba(110, 160, 120, 0.06) 40%, rgba(20, 40, 30, 0.35));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  isolation: isolate;
}
.tank::before {
  /* Light fixture. */
  content: '';
  position: absolute;
  top: -1.05rem;
  left: 10%;
  right: 10%;
  height: 0.45rem;
  background: #2b3224;
  border-radius: 3px;
  box-shadow: 0 0.35rem 1.4rem 0.1rem rgba(233, 255, 190, 0.16);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.tank::after {
  /* Substrate. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.9rem;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 40%, #4a4e3e 1.4px, transparent 1.6px),
    radial-gradient(circle at 70% 70%, #5c5442 1.2px, transparent 1.4px),
    radial-gradient(circle at 45% 20%, #34382c 1.6px, transparent 1.8px);
  background-size: 11px 9px, 7px 8px, 13px 11px;
}
.tank:hover { transform: translateY(-4px); border-color: #6f8a3a; box-shadow: 0 0 60px -20px rgba(197, 224, 74, 0.45); }
.tank:hover::before { background: var(--lime); box-shadow: 0 0.4rem 2.2rem 0.4rem rgba(197, 224, 74, 0.4); }
.tank .tape { position: absolute; top: 0.9rem; left: 0.9rem; font-size: 0.92rem; z-index: 2; }
.tank-art { display: flex; justify-content: center; align-items: center; height: 7.5rem; margin-top: 2.8rem; color: var(--lime); }
.tank-art svg { width: 5.2rem; height: 5.2rem; overflow: visible; transition: transform 0.4s cubic-bezier(.3,1.5,.5,1); }
.tank:hover .tank-art svg { transform: translateY(-4px) rotate(-4deg); }
.tank-copy { padding: 0 1.15rem 2rem; }
.tank-copy strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.35rem; }
.tank-copy span { display: block; color: var(--room-muted); font-size: 0.93rem; line-height: 1.45; }

/* ---- doors: which keeper are you ---- */

.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.door {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 15rem;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.door:hover { transform: translateY(-3px); border-color: var(--moss); background: var(--moss-soft); }
.door .num { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.door strong { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.05; }
.door p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.door .go { margin-top: auto; font-weight: 600; color: var(--moss); display: inline-flex; gap: 0.4rem; align-items: center; }
.door:hover .go span { transform: translateX(4px); }
.door .go span { transition: transform 0.2s ease; }

/* ---- the colony window ---- */

.window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.window-photo { position: relative; }
.window-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 3px solid #39422f; display: block; }
.window-photo .tape { position: absolute; top: -0.9rem; right: 1.4rem; transform: rotate(2.5deg); }
.window h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; }
.window .log-note {
  margin: 1.6rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--room-2);
  border: 1px solid var(--room-rule);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--room-fg);
}
.window .log-note b { display: block; color: var(--lime); font-weight: 600; margin-bottom: 0.3rem; }
.window .truth { color: var(--room-muted); font-size: 0.95rem; }
.window a.more { color: var(--lime); font-weight: 600; }

/* ---- house rules, taped to the rack ---- */

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--fg); }
.rule-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.6rem 1.5rem 1.6rem 0;
  border-bottom: 1.5px solid var(--rule-strong);
}
.rule-row:nth-child(odd) { border-right: 1.5px solid var(--rule-strong); }
.rule-row:nth-child(even) { padding-left: 1.5rem; }
.rule-row .n { font-family: var(--mono); font-weight: 600; font-size: 0.85rem; color: var(--sun); padding-top: 0.25rem; }
.rule-row h3 { margin: 0 0 0.35rem; font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.025em; }
.rule-row p { margin: 0; color: var(--muted); }

/* ---- join ---- */

.join {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}
.join h2 { font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -0.045em; line-height: 0.95; margin: 0 auto 1.2rem; max-width: 16ch; }
.join p { max-width: 34rem; margin: 0 auto 2rem; color: var(--room-muted); font-size: 1.1rem; }
.join .hero-actions { justify-content: center; }
.join .bubbles { right: auto; left: 8%; }
.join .bubbles.two { left: auto; right: 9%; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 60rem) {
  .desktop-nav a { padding-inline: 0.55rem; }
  .hero,
  .window { grid-template-columns: 1fr; }
  .home-head { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 52rem) {
  .desktop-nav,
  .head-action { display: none; }
  .mobile-menu { display: block; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  main,
  .room-inner,
  .home .wrap,
  .site-head,
  .site-foot { width: calc(100% - 2rem); }
  main { padding-top: 2rem; }
  .shelf,
  .doors,
  .rules { grid-template-columns: 1fr; }
  .rule-row,
  .rule-row:nth-child(even) { padding: 1.3rem 0; border-right: 0; }
  .rule-row:nth-child(odd) { border-right: 0; }
  .tank { min-height: 14rem; }
  .readings a { margin-left: 0; }
  .facts > div { border-right: 0; border-bottom: 1px solid var(--room-rule); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bubbles { display: none; }
}