/* ==========================================================================
   Under The Sea Aquarium Marketplace
   One stylesheet. Tokens -> primitives -> components -> pages -> utilities.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* ocean ramp */
  --deep:       #03121F;
  --ocean-900:  #052440;
  --ocean-800:  #073357;
  --ocean-700:  #0A4A80;
  --ocean-600:  #0E63A8;
  --ocean-500:  #1585D6;
  --ocean-400:  #37A7EE;

  /* light surfaces */
  --foam:       #EDF5FC;
  --foam-2:     #FFFFFF;
  --ink:        #04182C;
  --ink-soft:   #3D5871;

  /* text on dark */
  --on-dark:    #FFFFFF;
  --mist:       #A9C9E4;

  /* accents */
  --accent:     #3FE0C5;
  --accent-600: #17C4A8;
  --coral:      #E8442F;

  /* lines + glass */
  --line-dark:  rgba(255, 255, 255, .14);
  --line-light: #CFE2F2;
  --glass:      rgba(255, 255, 255, .07);
  --glass-hi:   rgba(255, 255, 255, .12);

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing scale (8pt) */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 5.5rem;  --s-8: 7rem;

  /* radii */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* elevation */
  --e-1: 0 1px 2px rgba(4, 24, 44, .06), 0 2px 8px rgba(4, 24, 44, .06);
  --e-2: 0 4px 12px rgba(4, 24, 44, .10), 0 12px 32px rgba(4, 24, 44, .10);
  --e-3: 0 10px 24px rgba(3, 18, 31, .22), 0 26px 64px rgba(3, 18, 31, .26);

  /* motion */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-in:  cubic-bezier(.6, .04, .98, .5);

  /* layering */
  /* the header sits above the drawer so the toggle never moves when it opens */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-drawer: 90;
  --z-header: 95; --z-modal: 100;

  --header-h: 72px;

  /* box-with-arrow glyph for "opens in a new tab" cues */
  --ext-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg>');

  --reef-wash: url("/assets/img/reef-wash.webp");

  --wrap: 1200px;
  --wrap-narrow: 780px;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-dark);
  background: var(--ocean-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--s-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
ul, ol { margin: 0 0 var(--s-2); padding-left: 1.15rem; }
li { margin-bottom: .35rem; }

/* long user/URL-ish strings must reflow, prose must not break mid-word */
.breakable { overflow-wrap: anywhere; min-width: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: var(--z-modal);
  background: var(--accent); color: var(--ink);
  padding: .7rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout primitives ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

@media (min-width: 1024px) { .wrap { width: min(100% - 5rem, var(--wrap)); } }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.section--deep  { background: var(--ocean-900); }
.section--mid   { background: linear-gradient(180deg, var(--ocean-800), var(--ocean-700)); }
.section--light { background: var(--foam); color: var(--ink); }
.section--white { background: #fff; color: var(--ink); }

/* Opt-in only, via .section--wash. Depth in the corners so the band reads as
   water rather than paper. */
.section--wash {
  background: linear-gradient(180deg, #EDF5FC 0%, #F5FAFE 42%, #E7F1FA 100%);
}
.section--wash::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 52% at 1% 6%,   rgba(14, 99, 168, .10), transparent 70%),
    radial-gradient(42% 50% at 99% 88%, rgba(21, 133, 214, .09), transparent 72%);
}

/* A real tank photo, blurred down to colour and movement, bleeding in from
   both edges -- so a pale band sits in front of an aquarium rather than on
   blank paper. The tile mirrors itself vertically, so it repeats seamlessly
   down sections of any height. */
@media (min-width: 1200px) {
  .section--wash::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      var(--reef-wash) left top / 520px 920px repeat-y,
      var(--reef-wash) right top 260px / 520px 920px repeat-y;
    opacity: .26;
    /* held to the outer edges so the reading column stays clean */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 13%,
                        transparent 27%, transparent 73%, rgba(0,0,0,.4) 87%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 13%,
                        transparent 27%, transparent 73%, rgba(0,0,0,.4) 87%, #000 100%);
  }
}

.section--light h1, .section--light h2, .section--light h3,
.section--white h1, .section--white h2, .section--white h3 { color: var(--ink); }

/* ambient light shafts on the deep bands */
.section--deep::before,
.section--mid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 18% 0%, rgba(55, 167, 238, .16), transparent 70%),
    radial-gradient(50% 40% at 84% 8%, rgba(21, 133, 214, .12), transparent 70%);
}
.section > .wrap { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-1);
}
.section--light .eyebrow, .section--white .eyebrow { color: var(--ocean-600); }

.lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--mist); max-width: 62ch; }
.section--light .lede, .section--white .lede { color: var(--ink-soft); }

.section-head { max-width: 66ch; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--s-3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Wave divider between a dark band and the light one below it. The strip
   carries the dark colour itself rather than relying on the body showing
   through, so the seam can't shift if a section's background changes. */
.wave {
  display: block; width: 100%; height: clamp(38px, 5vw, 74px);
  background: var(--ocean-900);
  margin-bottom: -1px;   /* swallow any sub-pixel rounding at the join */
}
.wave svg { display: block; width: 100%; height: calc(100% + 1px); }

/* Base size for the inline icon set. Without this an .ico outside a component
   that sizes it falls back to the replaced-element default (300x150) and blows
   out whatever flex line it sits on. Components below override as needed. */
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #04202F;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.6rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  cursor: pointer; touch-action: manipulation;
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-600); box-shadow: 0 6px 20px rgba(23, 196, 168, .38); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .14); border-color: #fff; box-shadow: none;
}

.btn--ink { --btn-bg: var(--ocean-700); --btn-fg: #fff; }
.btn--ink:hover { background: var(--ocean-600); box-shadow: 0 6px 20px rgba(14, 99, 168, .3); }

.btn--outline-ink { --btn-bg: transparent; --btn-fg: var(--ocean-700); --btn-bd: var(--ocean-600); }
.btn--outline-ink:hover { background: var(--ocean-700); color: #fff; box-shadow: none; }

.btn--sm { min-height: 40px; padding: .45rem 1.1rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .95rem 2.1rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn .ico { width: 1.1em; height: 1.1em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

/* text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600;
  color: var(--accent); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color var(--t-base) var(--ease-out), gap var(--t-base) var(--ease-out);
}
.link-arrow:hover { border-color: currentColor; gap: .65rem; }
.section--light .link-arrow, .section--white .link-arrow { color: var(--ocean-600); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(5, 36, 64, .82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-dark);
  transition: background var(--t-base) var(--ease-out);
}
.header-bar {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--header-h); padding-block: .6rem;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: auto; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: .11em; text-transform: uppercase;
  color: #fff;
}
.brand-name span {
  font-size: .625rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent); margin-top: .3rem;
}
@media (min-width: 400px) { .brand img { width: 52px; } .brand-name b { font-size: 1.1875rem; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: .35rem; }
  .nav a {
    font-family: var(--font-display); font-size: .9375rem; font-weight: 500;
    color: var(--mist); text-decoration: none;
    padding: .55rem .8rem; border-radius: var(--r-pill);
    transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  }
  .nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
  .nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .13); font-weight: 600; }
}

.header-cta { display: none; }
@media (min-width: 1150px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Both end bars travel to the same centre line and cross there, so the X sits
   exactly where the hamburger was rather than beside it. */
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle .bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform var(--t-base) var(--ease-out),
              opacity 120ms linear,
              width var(--t-base) var(--ease-out);
}
.nav-toggle .bar:nth-child(1) { top: 0; }
.nav-toggle .bar:nth-child(2) { top: 6px; width: 80%; }
.nav-toggle .bar:nth-child(3) { top: 12px; }
.nav-toggle:hover .bar:nth-child(2) { width: 100%; }

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: scaleX(.1); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bar { width: 100%; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(3, 18, 31, .6);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(88vw, 360px);
  background: linear-gradient(180deg, var(--ocean-800), var(--ocean-900));
  border-left: 1px solid var(--line-dark);
  /* clears the header, which stays above the drawer so the toggle holds still */
  padding: calc(var(--header-h) + var(--s-2)) var(--s-3)
           calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .35rem;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.drawer[data-open="true"] .drawer-panel { transform: translateX(0); }

/* Leaving is quicker than arriving -- a slow dismissal feels unresponsive. */
.drawer:not([data-open="true"]) { transition-duration: var(--t-fast); }
.drawer:not([data-open="true"]) .drawer-panel {
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-in);
}

/* contents follow the panel in, close behind its leading edge */
.drawer-panel > * {
  opacity: 0; transform: translateX(16px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.drawer[data-open="true"] .drawer-panel > * { opacity: 1; transform: none; }
.drawer[data-open="true"] .drawer-panel > :nth-child(1)  { transition-delay: 130ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(2)  { transition-delay: 168ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(3)  { transition-delay: 206ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(4)  { transition-delay: 244ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(5)  { transition-delay: 282ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(6)  { transition-delay: 320ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(7)  { transition-delay: 358ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(8)  { transition-delay: 396ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(9)  { transition-delay: 424ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(10) { transition-delay: 452ms; }
.drawer[data-open="true"] .drawer-panel > :nth-child(11) { transition-delay: 480ms; }
/* on the way out everything leaves together, no stagger */
.drawer:not([data-open="true"]) .drawer-panel > * { transition-delay: 0ms; }
.drawer a {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500;
  color: var(--mist); text-decoration: none;
  padding: .85rem .9rem; border-radius: var(--r-sm);
  min-height: 48px; display: flex; align-items: center;
}
.drawer a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.drawer a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .13); font-weight: 600; }
.drawer hr { border: 0; border-top: 1px solid var(--line-dark); margin: var(--s-2) 0; width: 100%; }
.drawer .btn { margin-top: .35rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 88svh, 900px);
  display: flex; align-items: flex-end;
  padding-block: var(--s-6) var(--s-7);
  overflow: hidden;
  background: var(--ocean-900);
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 18, 31, .72) 0%, rgba(3, 18, 31, .18) 34%, rgba(3, 18, 31, .55) 72%, rgba(5, 36, 64, .96) 100%),
    linear-gradient(90deg, rgba(3, 18, 31, .6) 0%, transparent 62%);
}
/* the goldfish lives here */
.hero__fish {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero__inner { max-width: 46rem; }
.hero h1 { margin-bottom: var(--s-2); text-shadow: 0 2px 30px rgba(3, 18, 31, .5); }
.hero h1 .accent { color: var(--accent); display: block; }
.hero .lede { color: #DCEBF8; font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem); margin-bottom: var(--s-3); }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--glass); border: 1px solid var(--line-dark);
  backdrop-filter: blur(10px);
  border-radius: var(--r-pill); padding: .4rem .95rem .4rem .55rem;
  font-size: .875rem; font-weight: 500; color: #fff;
  margin-bottom: var(--s-3);
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 4px rgba(63, 224, 197, .24);
}

.hero__hint {
  margin-top: var(--s-3); font-size: .8125rem; color: rgba(255, 255, 255, .62);
  display: none;
}
@media (hover: hover) and (pointer: fine) { .hero__hint { display: block; } }

/* trust strip pinned under the hero, like the reference */
.trustbar {
  background: linear-gradient(180deg, var(--ocean-900), var(--ocean-800));
  border-block: 1px solid var(--line-dark);
}
.trustbar__grid {
  /* Reset lives here, not inline: an inline padding:0 outranks every selector
     and silently killed this band's vertical padding. */
  list-style: none; margin: 0; padding-inline: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
  padding-block: clamp(1.75rem, 1.2rem + 1.2vw, 2.75rem);
}
@media (min-width: 900px) {
  .trustbar__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}
.trustbar__item { display: flex; gap: .8rem; align-items: flex-start; }
.trustbar__item .ico { width: 26px; height: 26px; color: var(--accent); flex: none; margin-top: .15rem; }
.trustbar__item b {
  display: block; font-family: var(--font-display); font-size: 1rem;
  line-height: 1.3; margin-bottom: .15rem;
}
.trustbar__item span { font-size: .875rem; color: var(--mist); line-height: 1.45; }

/* ---------- Page banner (interior pages) ---------- */
.page-hero {
  position: relative; isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  background: var(--ocean-900);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 18, 31, .58), rgba(5, 36, 64, .86)),
    linear-gradient(90deg, rgba(3, 18, 31, .78), rgba(3, 18, 31, .1) 78%);
}
.page-hero .lede { color: #D6E8F7; }

.crumbs { font-size: .8125rem; color: var(--mist); margin-bottom: var(--s-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a {
  color: var(--mist); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 26px;
}
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  backdrop-filter: blur(12px);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
/* Only cards that are actually links react -- a hover on a static card
   promises a click that never happens. */
a.card:hover, button.card:hover {
  background: var(--glass-hi); border-color: rgba(255, 255, 255, .28);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--mist); font-size: .9375rem; }
.card .ico-badge {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: var(--s-2);
  background: rgba(63, 224, 197, .13); color: var(--accent);
  border: 1px solid rgba(63, 224, 197, .3);
}
.card .ico-badge svg { width: 24px; height: 24px; }

.card--light {
  background: #fff; border-color: var(--line-light); color: var(--ink);
  box-shadow: var(--e-1); backdrop-filter: none;
}
a.card--light:hover, button.card--light:hover {
  background: #fff; border-color: var(--ocean-400); box-shadow: var(--e-2);
}
.card--light p { color: var(--ink-soft); }
.card--light .ico-badge {
  background: rgba(14, 99, 168, .1); color: var(--ocean-600); border-color: rgba(14, 99, 168, .2);
}

/* image-topped link card (the reference's category tiles) */
.tile {
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: #fff;
  background: var(--ocean-800);
  border: 1px solid var(--line-dark);
  isolation: isolate;
}
.tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
@media (hover: hover) { .tile:hover img { transform: scale(1.05); } }
.tile__body {
  position: absolute; inset-inline: 0; bottom: 0; padding: var(--s-3);
  background: linear-gradient(180deg, transparent, rgba(3, 18, 31, .55) 40%, rgba(3, 18, 31, .93));
}
/* These sit on a dark scrim over the photo, so they stay white even inside a
   light section, where `.section--light h3` would otherwise make them ink. */
.tile__body h3,
.section--light .tile__body h3,
.section--white .tile__body h3 {
  margin-bottom: .25rem; font-size: 1.375rem; color: #fff;
  text-shadow: 0 1px 12px rgba(3, 18, 31, .55);
}
.tile__body p { font-size: .875rem; color: #C9DFF2; margin: 0; }
.tile__body .link-arrow { margin-top: .7rem; }
.tile:focus-visible { outline-offset: 4px; }

/* split feature row */
.split { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .split--flip > :first-child { order: 2; }
}
.split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-3); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* stat row */
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: .4rem; font-size: .9375rem; color: var(--mist); }
.section--light .stat b { color: var(--ocean-600); }
.section--light .stat span { color: var(--ink-soft); }

/* checklist */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; margin: 0; }
.checks .ico { width: 20px; height: 20px; flex: none; margin-top: .28rem; color: var(--accent); }
.section--light .checks .ico, .section--white .checks .ico { color: var(--ocean-600); }

/* ---------- Team ---------- */
.team-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.member { text-align: left; }
.member img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%;
  border-radius: var(--r-md); border: 1px solid var(--line-light);
  background: var(--ocean-800); margin-bottom: .8rem;
}
.member b { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
.member span { font-size: .875rem; color: var(--ink-soft); }

/* ---------- Gallery ---------- */
.gallery {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gallery button {
  padding: 0; border: 1px solid var(--line-dark); background: var(--ocean-800);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer; display: block;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.gallery button:hover { border-color: var(--accent); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s-2);
  background: rgba(3, 18, 31, .93);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(94vw, 1300px); max-height: 82svh;
  width: auto; height: auto; aspect-ratio: auto;
  border-radius: var(--r-md); box-shadow: var(--e-3);
}
.lightbox figcaption {
  color: var(--mist); text-align: center; margin-top: var(--s-2);
  font-size: .9375rem; max-width: 60ch;
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid var(--line-dark); cursor: pointer;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 24px; height: 24px; }

/* ---------- Livestock ---------- */
.stock-controls {
  display: grid; gap: var(--s-3);
  margin-block: var(--s-2) var(--s-5);
  position: sticky; top: calc(var(--header-h) + .75rem); z-index: var(--z-raised);
  /* translucent panel rather than a flat --foam block, which would show a
     seam as it sticks over the section's gradient */
  background: rgba(246, 251, 254, .94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  box-shadow: 0 1px 2px rgba(4, 24, 44, .04), 0 14px 26px -20px rgba(4, 24, 44, .55);
}
@media (min-width: 760px) {
  .stock-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    /* align to the top so the two controls line up. Aligning to the bottom
       drops the select below the input, because the search field carries an
       extra hint line the sort field does not. */
    align-items: start;
    column-gap: var(--s-4);
  }
  .stock-controls .chips { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .stock-controls { padding: var(--s-4); } }
.field--sort .select { min-width: 13rem; }
/* the hint sits under the input without dragging the row's baseline around */
.stock-controls .field .hint { margin: 0; }

.field { display: grid; gap: .35rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .8125rem; color: var(--ink-soft); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  /* body line-height would make the text input 51px against the select's 48 */
  line-height: 1.3;
  background: #fff; border: 1.5px solid var(--line-light); border-radius: var(--r-sm);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ocean-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ocean-600); box-shadow: 0 0 0 3px rgba(14, 99, 168, .18); outline: none;
}
.input::placeholder, .textarea::placeholder { color: #7C93A9; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .35rem 1rem;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 500;
  color: var(--ocean-700); background: #fff;
  border: 1.5px solid var(--line-light); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.chip:hover { border-color: var(--ocean-500); background: #F4FAFF; }
.chip[aria-pressed="true"] {
  background: var(--ocean-700); color: #fff; border-color: var(--ocean-700);
}
.chip .count { font-variant-numeric: tabular-nums; opacity: .7; font-size: .8125rem; }

.stock-group { margin-bottom: var(--s-5); }
.stock-group h2 {
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding-bottom: .6rem; border-bottom: 2px solid var(--line-light); margin-bottom: var(--s-2);
}
.stock-group h2 .count {
  font-family: var(--font-body); font-size: .875rem; font-weight: 500;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

.stock-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.stock-item__thumb {
  flex: none; width: 44px; height: 44px; border-radius: 8px;
  object-fit: cover; background: #E4EEF7;
  border: 1px solid var(--line-light);
}
/* No verified photo: an empty slot, not a stand-in. Keeps its width so the
   tank badges and prices stay aligned down the column. */
.stock-item__thumb--none { background: none; border-color: transparent; }
.stock-item__link:hover .stock-item__thumb { border-color: var(--ocean-400); }

.credits {
  margin-top: var(--s-4); border: 1px solid var(--line-light);
  border-radius: var(--r-md); background: rgba(255, 255, 255, .6);
  padding: .5rem var(--s-3);
}
.credits summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600;
  color: var(--ink); padding: .55rem 0; min-height: 30px;
}
.credits summary:hover { color: var(--ocean-700); }
.credits p { font-size: .875rem; color: var(--ink-soft); margin: .5rem 0 1rem; max-width: 70ch; }
.credits ul {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  font-size: .8125rem; color: var(--ink-soft);
}
.credits li { margin: 0; }
.credits a { color: var(--ocean-600); }
.stock-item { list-style: none; margin: 0; }
.stock-item__link {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--r-sm); padding: .7rem .9rem;
  color: inherit; text-decoration: none;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.stock-item__link:hover {
  background: #F6FBFF; border-color: var(--ocean-400); box-shadow: var(--e-1);
}
.stock-item__link:active { transform: scale(.99); opacity: 1; }

/* External-link cue, defined once in CSS rather than as 284 inline SVGs. */
.stock-item__link::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-left: .1rem;
  background: currentColor; color: var(--ink-soft); opacity: .4;
  -webkit-mask: var(--ext-icon) center / contain no-repeat;
          mask: var(--ext-icon) center / contain no-repeat;
  transition: opacity var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.stock-item__link:hover::after { opacity: 1; color: var(--ocean-600); }

/* Rows with no article behind them: same box, no click affordance. */
.stock-item__link--plain { cursor: default; }
.stock-item__link--plain::after { content: none; }
.stock-item__link--plain:hover {
  background: #fff; border-color: var(--line-light); box-shadow: none;
}
.stock-item .tank {
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; color: var(--ocean-700);
  background: rgba(14, 99, 168, .1); border-radius: 6px;
  padding: .25rem .45rem; flex: none; min-width: 2.6rem; text-align: center;
}
.stock-item .name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; color: var(--ink); }
.stock-item .price {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; flex: none;
}
.stock-item mark { background: rgba(63, 224, 197, .38); color: inherit; border-radius: 3px; padding: 0 .1em; }

.empty-state {
  text-align: center; padding: var(--s-5) var(--s-2);
  border: 2px dashed var(--line-light); border-radius: var(--r-lg); color: var(--ink-soft);
}
.empty-state svg { width: 44px; height: 44px; color: var(--ocean-400); margin: 0 auto var(--s-2); }

.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
  background: rgba(14, 99, 168, .08); border: 1px solid rgba(14, 99, 168, .2);
  color: var(--ink); font-size: .9375rem;
}
.notice .ico { width: 22px; height: 22px; flex: none; color: var(--ocean-600); margin-top: .15rem; }
.notice--dark {
  background: var(--glass); border-color: var(--line-dark); color: var(--mist);
}
.notice--dark .ico { color: var(--accent); }

/* ---------- Contact / forms ---------- */
.contact-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-6); } }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.info-list li { display: flex; gap: .9rem; margin: 0; }
.info-list .ico { width: 24px; height: 24px; flex: none; color: var(--accent); margin-top: .2rem; }
.section--light .info-list .ico, .section--white .info-list .ico { color: var(--ocean-600); }
.info-list b { display: block; font-family: var(--font-display); font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .15rem; }
/* standalone links under a label, so they carry their own 24px target */
.info-list a {
  text-decoration: none; border-bottom: 1px solid currentColor;
  display: inline-block; min-height: 26px;
}
.info-list a:hover { color: var(--accent); }
.section--light .info-list a:hover, .section--white .info-list a:hover { color: var(--ocean-600); }

.hours { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line-dark); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .closed { color: var(--coral); font-weight: 600; }
.section--light .hours th, .section--light .hours td,
.section--white .hours th, .section--white .hours td { border-color: var(--line-light); }

.form { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } }
.req { color: var(--coral); }
.form-error {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .875rem; color: #B3200F; font-weight: 500;
}
.form-error:empty { display: none; }
.form-error .ico { width: 18px; height: 18px; flex: none; margin-top: .12rem; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #B3200F; }
.error-summary {
  border: 2px solid #B3200F; background: #FDF1EF; color: #7A1409;
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.error-summary[hidden] { display: none; }
.error-summary h3 { color: #7A1409; font-size: 1.0625rem; margin-bottom: .4rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary a { color: #7A1409; }

.map-embed {
  border: 0; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--r-lg); box-shadow: var(--e-2);
  background: var(--ocean-800);
}

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 72ch; }

/* The legal pages are one narrow column on a wide field; a document card keeps
   that from reading as an empty page. */
.wrap--narrow > .prose {
  max-width: none;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
}
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); margin-top: var(--s-5); }
.prose h3 { font-size: 1.1875rem; margin-top: var(--s-4); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--s-2); }
.prose a { color: var(--ocean-600); text-underline-offset: .18em; }
.prose .updated { font-size: .875rem; color: var(--ink-soft); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-3); font-size: .9375rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border: 1px solid var(--line-light); }
.prose th { background: var(--foam); font-family: var(--font-display); }

.toc {
  background: var(--foam); border: 1px solid var(--line-light);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4);
}
.toc h2 { font-size: 1rem !important; margin: 0 0 .5rem !important;
  text-transform: uppercase; letter-spacing: .1em; }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: 0; }
/* standalone navigation links, so they need their own 24px target */
.toc a { display: inline-flex; align-items: center; min-height: 30px; }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--ocean-900), var(--deep));
  border-top: 1px solid var(--line-dark);
  padding-block: var(--s-5) var(--s-3);
}
.footer-grid { display: grid; gap: var(--s-4); }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: var(--s-5); } }
.footer-head {
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-2);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.footer-grid li { margin: 0; }
.footer-grid a {
  color: var(--mist); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px; font-size: .9375rem;
}
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-brand p { color: var(--mist); font-size: .9375rem; max-width: 40ch; }

.socials { display: flex; gap: .6rem; margin-top: var(--s-2); }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-dark); color: #fff;
  transition: background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.socials a:hover { background: var(--accent); color: var(--ink); }
.socials svg { width: 21px; height: 21px; }

.colophon {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  align-items: center; justify-content: space-between;
  font-size: .875rem; color: var(--mist);
}
.colophon nav { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
/* WCAG 2.2 target size: these are standalone nav links, not inline in prose,
   so they need 24px of height in their own right. */
.colophon a {
  color: var(--mist);
  display: inline-flex; align-items: center;
  min-height: 32px; padding-inline: .2rem;
}

/* ==========================================================================
   Interaction states
   Every interactive control gets hover, pressed and disabled feedback.
   Pressed states use transform/opacity/colour only, never anything that
   changes layout bounds, so nothing around the control shifts on click.
   ========================================================================== */

/* ---- pressed ---- */
/* Buttons and button-like surfaces dip slightly. Scale is a paint-level
   transform, so surrounding content never reflows. */
.btn:active,
.chip:active,
.nav-toggle:active,
.lightbox__close:active,
.lightbox__nav:active,
a.card:active,
button.card:active,
.tile:active,
.socials a:active,
.gallery button:active {
  transform: scale(.97);
  transition-duration: var(--t-fast);
}
.gallery button:active, .tile:active { transform: scale(.985); }

/* Text links can't scale without looking broken, so they dim instead. This is
   a :where() base rule -- zero specificity, so it catches every link and button
   on the site including ones added later, and never overrides a specific rule
   further down. */
:where(a[href], button, summary, [role="button"]) {
  transition: color var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-base) var(--ease-out);
}
:where(a[href], button, summary, [role="button"]):active { opacity: .68; }
:where(a[href]):hover { text-decoration-color: currentColor; }

/* The controls above that dip instead of dimming stay fully opaque. These
   carry real specificity, so they win over the base rule. */
.btn:active, .chip:active, .nav-toggle:active,
.lightbox__close:active, .lightbox__nav:active,
a.card:active, button.card:active, .tile:active,
.socials a:active, .gallery button:active { opacity: 1; }

.skip-link:active { opacity: 1; transform: translate(-50%, 0) scale(.97); }

/* the tile's image keeps its hover zoom while the card itself dips */
.tile:active img { transform: scale(1.03); }

/* ---- hover for the links that only had a default ---- */
.brand { transition: opacity var(--t-base) var(--ease-out); }
.brand:hover { opacity: .82; }

.skip-link:hover { background: var(--accent-600); }

.colophon a,
.toc a,
.prose a,
.notice a,
.empty-state a {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .18em;
  transition: color var(--t-base) var(--ease-out),
              text-decoration-color var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.colophon a:hover { color: #fff; text-decoration-color: currentColor; }
.toc a:hover,
.prose a:hover,
.notice a:hover,
.empty-state a:hover { color: var(--ocean-700); text-decoration-color: currentColor; }
.notice--dark a:hover { color: var(--accent); }

.stock-item .name mark { transition: background var(--t-base) var(--ease-out); }

/* ---- disabled ---- */
/* Reduced emphasis plus a not-allowed cursor, and every hover/press effect
   switched off so the control cannot look responsive when it isn't. */
.btn:disabled, .btn[aria-disabled="true"],
.chip:disabled,
button:disabled,
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(.5);
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover,
.chip:disabled:hover, button:disabled:hover {
  background: var(--btn-bg, transparent);
  border-color: var(--btn-bd, var(--line-light));
  box-shadow: none;
}
.btn:disabled:active, .btn[aria-disabled="true"]:active,
.chip:disabled:active, button:disabled:active { transform: none; }
.input:disabled, .textarea:disabled { background: var(--foam); }

/* read-only is not disabled: still focusable and copyable, just not editable */
.input:read-only:not([type="search"]), .textarea:read-only {
  background: var(--foam); border-style: dashed; cursor: default;
}

/* ---- pointers ---- */
/* Anything that responds to a click says so. */
a[href], button:not(:disabled), summary, label[for],
.chip:not(:disabled), .tile, .gallery button { cursor: pointer; }

/* ---------- Motion ---------- */
/* Only hide reveal content once we know JS is running to bring it back.
   Without the .js gate a script failure would leave most of the page blank. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.is-in:nth-child(2) { transition-delay: 60ms; }
.reveal.is-in:nth-child(3) { transition-delay: 120ms; }
.reveal.is-in:nth-child(4) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tile:hover img { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .hero__fish, .drawer, .btn, .stock-controls { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; background: #fff !important; color: #000 !important; }
}