/* ==========================================================================
   goldcoast.fish - main stylesheet
   Direction: "The Rack". The page is the rack seen from the front. Product
   cards are lit tanks in a painted frame, separated by 1px uprights, each with
   an LED line across the top edge. Everything else gets out of the way so the
   light and the fish are the only bright things on the page.
   Mobile first. Desktop layers in from 720px and 1024px.

   THE LIGHT RULE. --led is the light in this room. It is the brightest value
   on the page and it is spent on three things: the top edge of a tank, the
   type you must read, and the one primary action. If a fourth thing starts
   glowing, the rack stops reading as lit and starts reading as a gradient.

   Colour contrast: measured, not estimated. This is a dark UI, so the model is
   inverted and the grounds are four shades of tank water.
     led #DCEFF2 on glass #0E1513 ........ 15.6:1
     led on tank #16201D ................. 14.0:1
     led on tank-hover #1C2724 ........... 13.0:1
     led-2 #A9BEC0 on tank ................ 8.6:1
     led-3 #8AA0A2 on tank ................ 5.9:1
     accent #D97B4F on tank ............... 5.3:1
     glass text on led fill .............. 15.6:1
     glass text on accent fill ............ 6.1:1
     ok #7FD1A0 on ok-bg #12241A .......... 8.9:1
     warn #E8BE6A on warn-bg #241E12 ...... 9.5:1
     err #F09A90 on err-bg #2A1614 ........ 7.5:1
     soon #9FB6C4 on soon-bg #141C21 ...... 8.2:1
     field border #647B7F on tank ......... 3.7:1   (needs 3:1)
     focus led, offset onto the ground ... 13.0:1   (needs 3:1)

   TWO TRAPS, both found by measuring rather than by eye:
   1. White on the terracotta accent is only 3.05:1. Buttons with an accent
      fill take --glass text, never white. Do not "fix" them to white.
   2. An --led focus ring on an --led filled button is 1.0:1, invisible. It
      works only because outline-offset puts the ring on the page ground
      instead of the fill. Never set outline-offset to 0 here.

   --rack #3A4A4E is about 2:1 against the grounds it divides. That is
   deliberate and it is fine: the grid uprights are decoration, and the cards
   are identified by their content, not by their gutters. Where a border has to
   identify a control, use --line-strong #647B7F instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Self-hosted beside Font Awesome, no CDN request.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("../vendor/fonts/archivo-var.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../vendor/fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../vendor/fonts/ibm-plex-mono-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Four shades of tank water, darkest to lightest */
    --void:       #080C0B;   /* under the rack, the footer */
    --glass:      #0E1513;   /* the page */
    --tank:       #16201D;   /* inside a tank */
    --tank-lit:   #1C2724;   /* a tank under the hand */

    /* The frame */
    --rack:       #3A4A4E;   /* painted uprights, decorative */
    --line-strong:#647B7F;   /* 3.7:1 on tank, for real control edges */

    /* The light */
    --led:        #DCEFF2;
    --led-2:      #A9BEC0;
    --led-3:      #8AA0A2;

    /* The pots */
    --accent:     #D97B4F;
    --accent-dark:#C4663B;

    --white:      #FFFFFF;

    /* Status, tinted to sit on tank water rather than on white */
    --ok:         #7FD1A0;
    --ok-bg:      #12241A;
    --ok-line:    #2F5B41;
    --warn:       #E8BE6A;
    --warn-bg:    #241E12;
    --warn-line:  #6B5424;
    --err:        #F09A90;
    --err-bg:     #2A1614;
    --err-line:   #6E332C;
    --soon:       #9FB6C4;
    --soon-bg:    #141C21;
    --soon-line:  #3C4E58;

    /* Type */
    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Metrics. Square, because the rack is welded, not moulded. */
    --wrap:      1180px;
    --tap:       44px;
}

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--led);
    background: var(--glass);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    font-family: var(--font);
    line-height: 1.04;
    color: var(--led);
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -.032em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.08rem, 2.2vw, 1.28rem); letter-spacing: -.02em; }
p  { margin: 0 0 1rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: .16em; }
a:hover { color: var(--led); }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--tank);
    border: 1px solid var(--rack);
    padding: .1em .35em;
    color: var(--led);
}

/* Every number is monospace and column aligned. */
.num, .card__price, .product__price, .hero__stat dd {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* The ring is the light. The 2px offset is load bearing: it puts the ring on
   the page ground, so it still reads against an --led filled button. */
:focus-visible {
    outline: 3px solid var(--led);
    outline-offset: 2px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 720px) { .wrap { padding-inline: 1.75rem; } }

.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: 0;
    transform: translate(-50%, -120%);
    z-index: 300;
    background: var(--led);
    color: var(--glass);
    font-family: var(--mono);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .85rem 1.35rem;
    text-decoration: none;
    transition: transform .15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--glass); }

/* Anything that is a label rather than prose is set in mono. */
.section__eyebrow,
.site-footer__heading,
.socials__label,
.card__tier,
.product__tier,
.crumbs,
.result-count,
.badge,
.filter,
.btn,
.nav-toggle,
.primary-nav__link,
.promo-bar,
.card__size,
.hero__stat dt {
    font-family: var(--mono);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--tap);
    padding: .7rem 1.35rem;
    border: 1px solid transparent;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* The one primary action gets the light. */
.btn--primary { background: var(--led); color: var(--glass); border-color: var(--led); }
.btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--glass); }

/* Dark text on the accent fill. White is 3.05:1 here and fails. */
.btn--accent { background: var(--accent); color: var(--glass); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--glass); }

.btn--ghost { background: transparent; color: var(--led); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--led); color: var(--glass); border-color: var(--led); }

/* Already the default here, but the class is used in the markup. */
.on-dark .btn--ghost,
.section--deep .btn--ghost,
.hero .btn--ghost { background: transparent; color: var(--led); border-color: var(--led); }
.on-dark .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--led); color: var(--glass); border-color: var(--led); }

.btn--sm { padding: .5rem 1rem; font-size: .68rem; min-height: 40px; }
.btn--lg { padding: .95rem 1.9rem; font-size: .8rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    background: transparent;
    border-color: var(--rack);
    color: var(--led-3);      /* 5.9:1 on the tank */
    cursor: not-allowed;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Promo bar
   -------------------------------------------------------------------------- */
.promo-bar {
    background: var(--void);
    color: var(--led-2);
    font-size: .73rem;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--rack);
}
.promo-bar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35rem 1.5rem;
    padding-block: .6rem;
    text-align: center;
}
.promo-bar i { color: var(--led-3); }
.promo-bar__sep { display: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass);
    border-bottom: 1px solid var(--rack);
}
.site-header.is-stuck { border-bottom-color: var(--line-strong); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding-block: .5rem;
}

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--led); }

/* The mark is a tank end on: dark water with a lit strip across the top. */
.brand__mark {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: 0 0 40px;
    background: var(--tank);
    color: var(--led-2);
    border: 1px solid var(--rack);
    border-top: 3px solid var(--led);
    font-size: .95rem;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: 1.26rem; letter-spacing: -.045em; color: var(--led); }
.brand__dot { color: var(--accent); }
.brand__tag {
    font-family: var(--mono);
    font-size: .61rem;
    color: var(--led-3);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: .15rem;
}
@media (max-width: 460px) { .brand__tag { display: none; } }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .5rem .9rem;
    background: transparent;
    color: var(--led);
    border: 1px solid var(--line-strong);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.nav-toggle[aria-expanded="true"] { background: var(--led); color: var(--glass); border-color: var(--led); }

.primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.primary-nav__link {
    display: block;
    padding: .85rem .25rem;
    color: var(--led-2);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rack);
}
.primary-nav__link:hover { color: var(--led); }

@media (max-width: 899px) {
    .primary-nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        background: var(--glass);
        border-bottom: 1px solid var(--rack);
        padding: .5rem 1rem 1rem;
    }
    .primary-nav.is-open { display: block; }
    .primary-nav__link.is-current {
        color: var(--led);
        border-left: 3px solid var(--led);
        padding-left: .75rem;
    }
}

@media (min-width: 900px) {
    .nav-toggle { display: none; }
    .primary-nav { display: flex; align-items: center; }
    .primary-nav__list { flex-direction: row; align-items: center; gap: .25rem; }
    .primary-nav__link { border-bottom: 0; padding: .55rem .8rem; }
    /* Current page is the lit one, same logic as a tank under the strip. */
    .primary-nav__link.is-current { color: var(--glass); background: var(--led); }
    .primary-nav__link.is-current:hover { color: var(--glass); }
}

/* --------------------------------------------------------------------------
   Social icons
   Everything is dark here, so one treatment serves both header and footer:
   pale discs with the brand glyph. TikTok's brand colour is black, which is
   why it is never a disc fill on this site.
   -------------------------------------------------------------------------- */
.socials { display: flex; align-items: center; gap: .6rem; }
.socials__list { list-style: none; display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; }
.socials__link {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    font-size: 1.05rem;
    text-decoration: none;
    background: var(--led);
    border: 1px solid var(--led);
    transition: background-color .15s ease, transform .15s ease;
}
.socials__link:hover { background: var(--white); border-color: var(--white); transform: translateY(-2px); }
.socials__link--facebook { color: #0D3E77; }   /* 9.2:1 on the disc */
.socials__link--youtube  { color: #8A0000; }   /* 8.7:1 on the disc */
.socials__link--tiktok   { color: #0E1513; }   /* 15.6:1 on the disc */

.socials--footer { flex-direction: column; align-items: flex-start; gap: .55rem; margin-top: 1.5rem; }
.socials--footer .socials__label {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--led-3);
}

@media (min-width: 900px) {
    .socials--header { margin-left: .75rem; padding-left: .75rem; border-left: 1px solid var(--rack); }
}
@media (max-width: 899px) {
    .socials--header { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rack); }
    .socials--header .socials__list { gap: .6rem; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--mist { background: var(--tank); border-block: 1px solid var(--rack); }
.section--sand { background: var(--tank); border-block: 1px solid var(--rack); }
.section--deep { background: var(--void); border-block: 1px solid var(--rack); }
.section--deep h2, .section--deep h3 { color: var(--led); }
.section--deep p { color: var(--led-2); }

.section__head { max-width: 62ch; margin-bottom: 2.25rem; }
.section__head--center { margin-inline: auto; text-align: center; }

/* A lit rule, like the strip above a shelf. */
.section__eyebrow {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--led-3);
    margin-bottom: .9rem;
}
.section__eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--led);
    vertical-align: .3em;
    margin-right: .7rem;
}
.section__head--center .section__eyebrow::before { display: none; }

.section__lede { font-size: 1.04rem; color: var(--led-2); }

.grid { display: grid; gap: 1px; background: var(--rack); border: 1px solid var(--rack); }
@media (min-width: 620px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(160deg, var(--tank) 0%, var(--glass) 100%);
    color: var(--led);
    padding-block: clamp(3rem, 8vw, 5.5rem);
}
.hero--photo { position: relative; isolation: isolate; background: var(--glass); }

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(.72) brightness(.85);
    z-index: -2;
}

/* Light spilling from the top left, heavy dark behind the type. Measured
   against the brightest pixels in the photograph the text band holds above
   8:1. These stops are a contrast requirement, not a style preference. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 18% 0%, rgba(220, 239, 242, .12), transparent 62%),
        linear-gradient(96deg,
            rgba(14, 21, 19, .95) 0%,
            rgba(14, 21, 19, .90) 44%,
            rgba(14, 21, 19, .60) 100%);
}
@media (max-width: 899px) {
    .hero__scrim {
        background: linear-gradient(180deg,
            rgba(14, 21, 19, .93) 0%,
            rgba(14, 21, 19, .90) 100%);
    }
}

.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.12fr .88fr; gap: 3.5rem; } }

.hero h1 { color: var(--led); letter-spacing: -.045em; }
.hero__lede { font-size: clamp(1rem, 1.7vw, 1.14rem); color: var(--led-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.85rem; }

.hero__points { list-style: none; padding: 0; margin: 1.85rem 0 0; display: grid; gap: .55rem; }
.hero__points li { display: flex; gap: .7rem; align-items: flex-start; color: var(--led-2); font-size: .95rem; }
.hero__points i { color: var(--led-3); margin-top: .35rem; flex: 0 0 auto; font-size: .82em; }

/* The stock panel is a lit tank: dark water, strip light across the top. */
.hero__panel {
    background: rgba(22, 32, 29, .82);
    backdrop-filter: blur(6px);
    border: 1px solid var(--rack);
    border-top: 2px solid var(--led);
    padding: 1.5rem 1.6rem;
}
.hero__panel h2 {
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--led-3);
    margin-bottom: 1rem;
}
.hero__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--rack);
}
.hero__stat:last-child { border-bottom: 0; }
.hero__stat dt { color: var(--led-2); font-size: .76rem; letter-spacing: .04em; }
.hero__stat dd { margin: 0; font-size: 1.32rem; font-weight: 600; color: var(--led); text-align: right; line-height: 1.1; }

/* --------------------------------------------------------------------------
   Category tiles. Empty tanks: they light up under the hand.
   -------------------------------------------------------------------------- */
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.75rem;
    background: var(--tank);
    text-decoration: none;
    color: var(--led);
    transition: background-color .15s ease;
}
.tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--led);
    opacity: .25;
    transition: opacity .15s ease;
}
.tile:hover { background: var(--tank-lit); color: var(--led); }
.tile:hover::before { opacity: 1; }

/* The glyph discs were the most templated thing on the page. They are gone. */
.tile__icon, .value__icon { display: none; }

.tile h3 { margin: 0 0 .15rem; }
.tile p { color: var(--led-2); margin: 0; font-size: .92rem; }
.tile__more {
    margin-top: auto;
    padding-top: 1.1rem;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}
.tile:hover .tile__more { text-decoration: underline; text-underline-offset: .2em; }

/* --------------------------------------------------------------------------
   Value props
   -------------------------------------------------------------------------- */
.value { padding: 1.75rem; background: var(--tank); }
.section--deep .value { background: var(--void); }
.value h3 { font-size: 1.04rem; margin-bottom: .4rem; color: var(--led); }
.value p { color: var(--led-2); font-size: .92rem; margin: 0; }

/* --------------------------------------------------------------------------
   The rack. Every product is a lit tank in the frame.
   -------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    background: var(--rack);
    border: 1px solid var(--rack);
}

.card {
    position: relative;
    display: grid;
    grid-template-rows: auto 3px auto;
    background: var(--tank);
    transition: background-color .15s ease;
}
.card:hover { background: var(--tank-lit); }

/* The strip light above the water. */
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--led), transparent);
    opacity: .38;
    transition: opacity .15s ease;
}
.card:hover::before { opacity: 1; }
.card--out::before, .card--pending::before { opacity: .1; }
.card--out:hover::before, .card--pending:hover::before { opacity: .3; }

/* Media first, then the colour bar, then the text. DOM order is unchanged:
   the key is aria-hidden, so moving it visually costs nothing. */
.card__media {
    grid-row: 1;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--glass);
    overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Light falling from the strip down through the water. */
.card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(220, 239, 242, .18) 0%,
        rgba(220, 239, 242, .045) 32%,
        transparent 72%);
}
.card--out .card__media img, .card--pending .card__media img { filter: grayscale(1); opacity: .45; }

/* The line of colour along the bottom of the light, taken from the fish. */
.card__key {
    grid-row: 2;
    background: linear-gradient(90deg, var(--key, var(--rack)), var(--key-2, var(--key, var(--rack))));
}
.card--pending .card__key, .card--out .card__key { opacity: .35; }

.card__body {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.1rem 1.15rem 1.3rem;
    flex: 1;
}
.card__title { font-size: 1.04rem; margin: 0; letter-spacing: -.022em; }
.card__title a { color: var(--led); text-decoration: none; }
.card__title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.card__sci { font-style: italic; color: var(--led-3); font-size: .79rem; margin: 0; font-family: var(--mono); }
.card__desc { color: var(--led-2); font-size: .88rem; margin: .2rem 0 0; }

.card__badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .65rem; }

.card__meta { margin-top: auto; padding-top: .95rem; }
.card__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.card__tiers li { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.card__tier {
    font-size: .61rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--led-3);
}
.card__price { font-size: 1.05rem; font-weight: 600; color: var(--led); }
.card__pending { font-family: var(--mono); font-size: .76rem; color: var(--soon); margin: 0; }
.card__size { font-size: .66rem; letter-spacing: .05em; color: var(--led-3); }
.card__action { margin-top: .9rem; }
.card__action .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */
.product { display: grid; gap: 2rem; }
@media (min-width: 900px) { .product { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }

.product__media {
    position: relative;
    border: 1px solid var(--rack);
    border-top: 2px solid var(--led);
    overflow: hidden;
    background: var(--glass);
    aspect-ratio: 4 / 3;
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(220, 239, 242, .14) 0%, transparent 55%);
}

.product__sci { font-style: italic; font-family: var(--mono); color: var(--led-3); margin-top: -.3rem; }
.product__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

.product__tiers {
    list-style: none;
    margin: 1.25rem 0 .75rem;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 2px solid var(--led);
    max-width: 24rem;
}
.product__tiers li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--rack);
}
.product__tier { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--led-3); }
.product__price { font-size: 1.55rem; font-weight: 600; color: var(--led); margin: 0; line-height: 1.1; }
.product__pending {
    font-family: var(--mono);
    font-size: .88rem;
    color: var(--soon);
    background: var(--soon-bg);
    border: 1px solid var(--soon-line);
    border-left-width: 4px;
    padding: .8rem 1rem;
    margin: 1.25rem 0 .5rem;
}
.product__size { font-family: var(--mono); font-size: .78rem; color: var(--led-3); letter-spacing: .04em; }
.product__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.75rem 0; }

.care-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 0; font-size: .9rem; }
.care-table caption {
    text-align: left;
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-bottom: .6rem;
    color: var(--led-3);
}
.care-table th, .care-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--rack); text-align: left; }
.care-table th { width: 45%; font-weight: 600; color: var(--led); }
.care-table td { font-family: var(--mono); font-size: .84rem; color: var(--led-2); }
.care-table tr:first-child th, .care-table tr:first-child td { border-top: 1px solid var(--rack); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .28rem .55rem;
    border: 1px solid transparent;
}
.badge--in     { background: var(--ok-bg);   color: var(--ok);     border-color: var(--ok-line); }
.badge--low    { background: var(--warn-bg); color: var(--warn);   border-color: var(--warn-line); }
.badge--out    { background: transparent;    color: var(--led-3);  border-color: var(--rack); }
.badge--soon   { background: var(--soon-bg); color: var(--soon);   border-color: var(--soon-line); }
.badge--pickup { background: var(--led);     color: var(--glass);  border-color: var(--led); }
.badge--post   { background: transparent;    color: var(--led-2);  border-color: var(--line-strong); }

/* --------------------------------------------------------------------------
   Breadcrumbs, page head, filters
   -------------------------------------------------------------------------- */
.page-head { background: var(--tank); padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rack); }
.page-head h1 { margin-bottom: .4rem; }
.page-head p { color: var(--led-2); max-width: 62ch; margin: 0; }

.crumbs { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; color: var(--led-3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .4rem; color: var(--rack); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--led-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 2rem; border: 1px solid var(--line-strong); width: fit-content; }
.filter {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 42px;
    padding: .45rem 1rem;
    border-right: 1px solid var(--line-strong);
    background: transparent;
    color: var(--led-2);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
.filter:last-child { border-right: 0; }
.filter:hover { background: var(--tank-lit); color: var(--led); }
.filter.is-active { background: var(--led); color: var(--glass); }
.filter.is-active:hover { background: var(--led); color: var(--glass); }

.result-count { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--led-3); margin-bottom: 1rem; }

.empty-state { text-align: center; padding: 3.5rem 1rem; border: 1px solid var(--rack); background: var(--tank); }
.empty-state i { font-size: 2rem; color: var(--led-3); margin-bottom: 1rem; }
.empty-state h2 { color: var(--led); }
.empty-state p { color: var(--led-2); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
.field__label {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--led);
}
.field__req { color: var(--err); }
.field__hint { font-size: .81rem; color: var(--led-3); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    min-height: var(--tap);
    padding: .7rem .85rem;
    font: inherit;
    color: var(--led);
    background: var(--tank);
    border: 1px solid var(--line-strong);   /* 3.7:1 on the tank */
}
.field textarea { min-height: 170px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--led-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--led-2); }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--led);
    outline: 3px solid var(--led);
    outline-offset: 1px;
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--err); border-width: 2px; }
.field__error { color: var(--err); font-size: .84rem; font-weight: 600; }
.field__error::before { content: "\26A0"; margin-right: .35rem; }

.turnstile-holder:not(:empty) { margin-block: .25rem; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .9rem 1.1rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    margin: 1.25rem 0;
}
.alert--success { background: var(--ok-bg);   color: var(--ok);    border-color: var(--ok-line);   border-left-color: var(--ok); }
.alert--error   { background: var(--err-bg);  color: var(--err);   border-color: var(--err-line);  border-left-color: var(--err); }
.alert--info    { background: var(--tank);    color: var(--led);   border-color: var(--rack);      border-left-color: var(--led); }

.form-footnote { font-size: .81rem; color: var(--led-3); }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.notice {
    display: flex; gap: .8rem;
    padding: 1rem 1.15rem;
    background: var(--tank);
    border: 1px solid var(--rack);
    border-left: 4px solid var(--led-3);
    color: var(--led-2);
    font-size: .92rem;
}
.notice strong { color: var(--led); }
.notice i { color: var(--led-3); margin-top: .25rem; }
.notice--gold { border-left-color: var(--accent); background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice--gold strong { color: var(--warn); }
.notice--gold i { color: var(--accent); }
.notice--gold a { color: var(--warn); }
.notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact layout
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.25fr .75fr; gap: 3.5rem; align-items: start; } }

.info-card { background: var(--tank); border: 1px solid var(--rack); border-top: 2px solid var(--led); padding: 1.75rem; }
.info-card h2 { font-size: 1.08rem; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.info-list li { display: flex; gap: .8rem; align-items: flex-start; }
.info-list i { color: var(--accent); width: 18px; text-align: center; margin-top: .3rem; flex: 0 0 18px; }
.info-list strong { display: block; color: var(--led); font-size: .94rem; }
.info-list span { color: var(--led-2); font-size: .89rem; }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; color: var(--led-2); }
.prose h2, .prose h3 { color: var(--led); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.85rem; }
.prose strong { color: var(--led); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .45rem; }
.prose blockquote { margin: 1.75rem 0; padding: .25rem 0 .25rem 1.35rem; border-left: 3px solid var(--accent); color: var(--led); }

.accordion { border-bottom: 1px solid var(--rack); background: transparent; }
.accordion:first-of-type { border-top: 1px solid var(--rack); }
.accordion summary {
    padding: 1.1rem 0;
    font-weight: 600;
    cursor: pointer;
    color: var(--led);
    list-style: none;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    min-height: var(--tap);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.2rem; line-height: 1; }
.accordion[open] summary::after { content: "\2212"; }
.accordion summary:hover { color: var(--accent); }
.accordion__body { padding: 0 0 1.25rem; color: var(--led-2); }
.accordion__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer. Under the rack, the darkest thing on the page.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--void); color: var(--led-2); border-top: 1px solid var(--rack); }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(2.75rem, 5vw, 3.75rem); }
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } }

.brand--footer { margin-bottom: 1rem; }
.brand--footer .brand__name { color: var(--led); }
.brand--footer .brand__mark { background: var(--void); }
.brand--footer .brand__dot { color: var(--accent); }

.site-footer__blurb { color: var(--led-2); font-size: .91rem; max-width: 40ch; }
.site-footer__heading {
    font-size: .64rem;
    color: var(--led-3);
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.site-footer__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.site-footer__list a { color: var(--led); text-decoration: none; font-size: .92rem; }
.site-footer__list a:hover { color: var(--white); text-decoration: underline; }
.site-footer__list--plain li { display: flex; gap: .6rem; align-items: flex-start; font-size: .89rem; }
.site-footer__list--plain i { color: var(--led-3); margin-top: .3rem; flex: 0 0 auto; font-size: .85em; }
.site-footer__note { font-size: .77rem; color: var(--led-3); margin: .85rem 0 0; }

.site-footer__bar { border-top: 1px solid var(--rack); }
.site-footer__bar-inner {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    justify-content: space-between; align-items: center;
    padding-block: 1.15rem;
    font-family: var(--mono);
    font-size: .71rem;
    letter-spacing: .04em;
}
.site-footer__bar p { margin: 0; color: var(--led-2); }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.site-footer__legal a { color: var(--led); text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; }

.site-footer__credit { margin: 0; color: var(--led-2); }
.site-footer__credit a { color: var(--led); text-decoration: none; font-weight: 600; }
.site-footer__credit a:hover { color: var(--white); text-decoration: underline; }
.site-footer__credit i { font-size: .72em; margin-left: .4em; }
@media (max-width: 699px) { .site-footer__bar-inner { justify-content: center; text-align: center; } }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 90;
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center;
    background: var(--led);
    color: var(--glass);
    border: 0;
    cursor: pointer;
}
.to-top:hover { background: var(--white); }

/* --------------------------------------------------------------------------
   Modal (favicon warning)
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed; inset: 0;
    z-index: 500;
    background: rgba(8, 12, 11, .8);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--tank);
    color: var(--led);
    max-width: 520px;
    width: 100%;
    padding: 1.85rem;
    border: 1px solid var(--rack);
    border-top: 3px solid var(--accent);
}
.modal__title { font-size: 1.14rem; display: flex; gap: .6rem; align-items: center; }
.modal__title i { color: var(--warn); }
.modal__body { color: var(--led-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.35rem; }

/* --------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.error-page__code {
    font-family: var(--mono);
    font-size: clamp(3.5rem, 14vw, 7rem);
    font-weight: 600;
    line-height: 1;
    color: var(--rack);
    margin: 0 0 .5rem;
}
.error-page__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.85rem; }

/* --------------------------------------------------------------------------
   High contrast and forced colours
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :root { --led-2: #C8DADC; --led-3: #B0C4C6; --rack: #6D8286; --line-strong: #8FA7AB; }
    .btn { border-width: 2px; }
}
@media (forced-colors: active) {
    /* The strip lights and the water gradients carry no meaning, so they go. */
    .card::before, .tile::before, .card__media::after, .product__media::after { display: none; }
    .btn, .filter, .card, .tile { border: 1px solid ButtonBorder; }
    .badge { border: 1px solid CanvasText; }
    .card__key { forced-color-adjust: none; }
}

/* --------------------------------------------------------------------------
   Print. The rack does not print well, so it prints as a plain list.
   -------------------------------------------------------------------------- */
@media print {
    .promo-bar, .site-header, .site-footer, .to-top, .hero__actions, .modal-backdrop { display: none !important; }
    body { color: #000; background: #fff; }
    .card, .tile, .value, .info-card, .hero__panel, .page-head, .section--mist, .section--deep {
        background: #fff; color: #000; border-color: #999;
    }
    .card::before, .tile::before, .card__media::after { display: none; }
    h1, h2, h3, h4, .card__title a, .card__price { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}