/* Strict black and white: only #000 and #fff appear anywhere. Photos are
   forced to grayscale so dropped-in images can't break the rule. */

/* Barlow, Latin subset (SIL OFL, see /fonts/OFL.txt) */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/barlow-regular.d7556d7692.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('/fonts/barlow-italic.e576c78633.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/barlow-medium.b758f3d5dc.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/barlow-semibold.201bb5a583.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/barlow-bold.74d8e21863.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/fonts/barlow-extrabold.282917a0d9.woff2') format('woff2'); }

:root {
    --black: #000;
    --white: #fff;

    --font: 'Barlow', 'Helvetica Neue', Arial, system-ui, sans-serif;

    /* type scale (1.25 ratio, fluid at the top end) */
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-h3: 1.1875rem;
    --fs-h2: 1.5rem;
    --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --fs-display: clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;

    --gutter: clamp(1.25rem, 4vw, 4.5rem);
    --rule: 1px solid var(--white);

    /* set by script.js from the measured nav height */
    --nav-h: 3.25rem;

    /* black frame around photos */
    --frame: clamp(0.5rem, 1vw, 0.9rem);

    /* inner padding of every card */
    --card-pad: clamp(1.25rem, 2.5vw, 2.25rem);


    /* Logo: script.js sets the width to span "Home" … "Quote" in the nav.
       This is only the fallback for the instant before it measures.      */
    --logo-w: clamp(260px, 40vw, 500px);
}

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

/* `hidden` always wins over component display rules */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    /* No native rubber-band bounce: it can only reveal empty space below the
       page (a chopped-off cap). The footer does its own pull instead. */
    overscroll-behavior-y: none;
    scroll-padding-top: calc(var(--nav-h) + var(--space-2));
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

::selection { background: var(--white); color: var(--black); }

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -100px;
    z-index: 200;
    padding: var(--space-1) var(--space-2);
    background: var(--white);
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.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;
}

/* Header & logo */

.header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Black semi-pill behind the logo, from the top of the page down to the nav.
   Flat edge on the nav; the top corners are rounded with a radius equal to
   the full header height, so it reads as a short half-pill (almost a
   semicircle). The oversized radius is scaled down by the browser to exactly
   min(height, width / 2), so it stays a clean curve at any width.
   Width: left edge of the cards to the right edge of the photo frame; when
   the layout stacks, the width of the card column. script.js measures these
   and sets --plate-x / --plate-w.
   To flip it (flat edge at the top of the page, curve toward the nav),
   change border-radius to: 0 0 100vmax 100vmax.                            */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--plate-x, 50%);
    width: var(--plate-w, calc(var(--logo-w) + 1.6rem));
    translate: var(--plate-shift, -50%) 0;    /* centered until measured */
    border-radius: 100vmax 100vmax 0 0;
    background: var(--black);
    z-index: -1;
}
/* script.js sets .is-easing for half a second when the page changes or a
   photo loads; at all other times (load, window resize) the pill moves
   instantly with the cards. */
.header.is-easing::before {
    transition: left 0.45s cubic-bezier(0.3, 0.7, 0.2, 1),
                width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* Background texture (js/texture.js)
   Sized to the large viewport (toolbars hidden) rather than the window, so
   mobile browsers showing and hiding their toolbar while scrolling never
   resize it. Below the visible area when the toolbar is showing; unseen. */

.texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--white);
}
.texture svg {
    position: absolute;
    left: -6%;
    top: -6%;
    width: 112%;                 /* matches OVERSCAN in texture.js */
    height: 112%;
}
.texture path {
    fill: none;
    stroke: var(--black);                /* width is set by texture.js to match the logo */
    stroke-linejoin: round;
    stroke-linecap: round;
}
.texture canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.brand {
    display: block;
    width: var(--logo-w);
    margin-left: var(--logo-x, auto);   /* set by script.js to line up with "Home" */
    margin-right: auto;
    padding-block: clamp(0.5rem, 1.5vw, 1rem) clamp(0.75rem, 2vw, 1.25rem);
    color: var(--white);
}

stocksmart-logo {
    display: block !important;   /* the element sets inline-block itself */
    width: 100%;
    aspect-ratio: 3104 / 2542;   /* matches the logo viewBox; no layout shift before it paints */
    color: var(--white);
}


/* Nav
   White bar, black text. The selected page gets a black box (an element
   script.js adds and slides between links). The link text is white with
   mix-blend-mode: difference, so it renders black on the white bar and
   white inside the black box — correct on every frame, even mid-slide.  */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
}

.nav__list {
    position: relative;          /* the indicator is positioned against this */
    isolation: isolate;          /* keep the blend inside the nav */
    display: flex;
    justify-content: center;
    gap: clamp(0.25rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: 0.45rem var(--space-2);
    list-style: none;
    background: var(--white);
    overflow-x: auto;
    scrollbar-width: none;
}
.nav__list::-webkit-scrollbar { display: none; }

.nav__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--black);
    pointer-events: none;
    opacity: 0;
}
.nav__indicator.is-ready {
    transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1),
                width 0.3s cubic-bezier(0.3, 0.7, 0.2, 1),
                opacity 0.15s;
}

.nav__link {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0.4rem 0.8rem;      /* this is the black box's padding around the text */
    color: var(--white);
    mix-blend-mode: difference;
    font-weight: 600;            /* same weight when selected, so nothing shifts */
    text-decoration: none;
    white-space: nowrap;
}
.nav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav__link:focus-visible { outline-offset: 2px; }

.nav__count {
    display: inline-block;
    min-width: 1.4em;
    margin-left: 0.4em;
    padding: 0 0.35em;
    border: 1px solid currentColor;
    border-radius: 1em;
    font-size: var(--fs-sm);
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 600px) {
    .nav__list { gap: 0; padding-inline: var(--space-1); }
    .nav__link { padding-inline: 0.55rem; font-size: 0.95rem; }
}
@media (max-width: 380px) {
    /* Centred while the links fit, start-aligned (and scrollable) once they
       don't. Browsers without `safe` keep flex-start. */
    .nav__list { justify-content: flex-start; justify-content: safe center; }
}

/* Page layout: text left, image stretched right */

.page {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
}
.page[hidden] { display: none; }

.page__text {
    padding: var(--space-5) var(--gutter) var(--space-5);
    max-width: 46rem;           /* keeps lines under ~80 characters */
}

.page__media {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-4));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: var(--space-5) var(--gutter) var(--space-5) 0;
}
.page__media picture { display: contents; }
/* The black frame is on the image itself, so it always hugs the photo exactly. */
.page__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    /* never taller than the window below the nav, so the whole photo stays in view */
    max-height: calc(100vh - var(--nav-h) - 2 * var(--space-4));
    max-height: calc(100svh - var(--nav-h) - 2 * var(--space-4));
    padding: var(--frame);
    background: var(--black);
}
.page__media img,
.product__photo img {
    filter: grayscale(1);
}

.page--solo { grid-template-columns: minmax(0, 1fr); }
.page--solo .page__text { margin-inline: auto; width: 100%; }   /* centered when there's no photo */

/* Stacked (narrow) layout: title card first, then the photo, then the rest
   of the cards — everything centered on the page, in line with the logo. */
@media (max-width: 900px) {
    .page {
        --col: min(46rem, calc(100% - 2 * var(--gutter)));
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding-block: var(--space-4) var(--space-2);
    }
    .page__text { display: contents; }         /* lets the photo slot in between cards */
    .page .page__text > * { order: 2; width: var(--col); max-width: var(--col); }   /* .page prefix outranks .card */
    .page .page__text > :first-child { order: 0; }

    /* the photo sits on a black card the same width as the others, centered on it */
    .page__media {
        order: 1;
        position: static;
        width: var(--col);
        justify-content: center;
        margin: 0 0 var(--space-3);
        padding: var(--card-pad);
        background: var(--black);
    }
    .page__media img {
        padding: 0;
        max-height: calc(60vh - 2 * var(--card-pad));
        max-height: calc(60svh - 2 * var(--card-pad));
    }
}

/* Cards: black rectangles sized to their content */

.card {
    max-width: 100%;                       /* every card fills its column, so they all match */
    margin: 0 0 var(--space-3);
    padding: var(--card-pad);
    background: var(--black);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Type */

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 400; }

h1 {
    font-size: var(--fs-h1);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
}

.display {
    font-size: var(--fs-display);
    font-weight: 400;
    font-style: italic;          /* home headline only */
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1:focus { outline: none; }

h2 {
    font-size: var(--fs-h2);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-1);
}

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

.lede {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
}

/* Buttons */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4) 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: 0.6rem 1.4rem;
    border: 2px solid var(--white);
    background: var(--black);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover,
.btn--solid { background: var(--white); color: var(--black); text-decoration: none; }
.btn--solid:hover { background: var(--black); color: var(--white); }
.btn[aria-pressed="true"] { background: var(--white); color: var(--black); }
.btn[aria-pressed="true"]:hover { background: var(--black); color: var(--white); }
.btn:disabled { cursor: not-allowed; border-style: dashed; background: var(--black); color: var(--white); }

/* Terms list (home) */

.terms { margin: 0; border-top: var(--rule); }
.terms__row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-bottom: var(--rule);
}
.terms dt { font-weight: 800; }
.terms dd { margin: 0; }

@media (max-width: 480px) {
    .terms__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* Products */

.products { margin: 0; }

.product {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-3);
    width: auto;
}

.product__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.product__photo img { width: 100%; height: 100%; object-fit: cover; }

.product__name { font-size: var(--fs-h2); margin: 0 0 var(--space-1); }

.product__price { font-weight: 700; }

.specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
}
.specs dt { font-weight: 700; }
.specs dd { margin: 0; }

@media (max-width: 640px) {
    .product { grid-template-columns: minmax(0, 1fr); }
}

/* Lists */

.plain-list { margin: 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: var(--space-1); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item {
    position: relative;
    padding: 0 0 var(--space-3) 3.5rem;
    counter-increment: step;
}
.steps__item::before {
    content: counter(step);
    position: absolute;
    left: 0; top: -0.1em;
    width: 2.25rem; height: 2.25rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--white);
    border-radius: 50%;
    font-weight: 800;
}
.steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.4rem;
    bottom: 0.2rem;
    border-left: var(--rule);
}

/* Quote page */

.contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); }
.contact dt { font-weight: 700; }
.contact dd { margin: 0; }

.quote-list__items { margin: 0 0 var(--space-3); padding: 0; list-style: none; border-top: var(--rule); }
.quote-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    border-bottom: var(--rule);
}
.quote-list__name { font-weight: 700; }
.quote-list__qty { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); }
.quote-list__qty label { margin: 0; font-weight: 400; }
.quote-list__qty input { width: 4.5rem; padding: 0.35rem 0.5rem; }
.quote-list__remove {
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    padding: 0.35rem;
}

/* Form */

.form__group { margin-bottom: var(--space-3); }

label { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.optional { font-weight: 400; }

input, select, textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--white);
    border-radius: 0;
    background: var(--black);
    color: var(--white);
    font: inherit;
}
textarea { resize: vertical; min-height: 9rem; }
input::placeholder, textarea::placeholder { color: var(--white); opacity: 0.6; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; box-shadow: inset 0 0 0 1px var(--white); }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%),
                      linear-gradient(135deg, var(--white) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.9rem) 55%;
    background-size: 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

input.touched:invalid, textarea.touched:invalid, select.touched:invalid { border-width: 2px; border-style: dashed; }

.cf-turnstile { margin-bottom: var(--space-3); min-height: 65px; }
.cf-turnstile.is-flagged { outline: 2px solid var(--white); outline-offset: 4px; }

.form__submit { width: 100%; }

/* Toast */

.toast {
    position: fixed;
    right: var(--space-2);
    bottom: var(--space-2);
    z-index: 300;
    max-width: min(90vw, 26rem);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--white);
    background: var(--black);
    color: var(--white);
    font-weight: 500;
    animation: toast-in 0.2s ease-out;
}
.toast--error { border-style: dashed; }
.toast--success { background: var(--white); color: var(--black); border-color: var(--white); }
.toast.is-leaving { animation: toast-out 0.2s ease-in forwards; }

@keyframes toast-in  { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(1rem); opacity: 0; } }

/* Footer */

/* Bottom cap: the inverse of the header's semi-pill (same width and
   position), as a normal footer at the end of the page. Only its top
   quarter shows. At the bottom, pushing to scroll further pulls more of the
   cap into view like a rubber band (up to --cap-max, never all of it), and
   it springs back as soon as you stop. script.js sets --cap-extra.        */
:root {
    --cap-rest: 0.25;     /* fraction of the cap visible at rest */
    --cap-max: 0.6;       /* most of it you can pull into view */
}
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: calc(var(--header-h, 12rem) * var(--cap-rest) + var(--cap-extra, 0px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* centers the copyright in the strip that's visible at rest */
    padding: calc(var(--header-h, 12rem) * var(--cap-rest) / 2 - 0.75em) var(--gutter) 0;
    font-size: var(--fs-sm);
    text-align: center;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    height: var(--header-h, 12rem);        /* the whole cap; the footer box clips it */
    left: var(--plate-x, 50%);
    width: var(--plate-w, calc(var(--logo-w) + 1.6rem));
    translate: var(--plate-shift, -50%) 0;
    border-radius: 0 0 100vmax 100vmax;
    background: var(--black);
    z-index: -1;
}
.footer p { margin: 0; }

/* Preferences & print */

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

@media print {
    .nav, .skip-link, .btn, .page__media, .cf-turnstile { display: none !important; }
    body { background: #fff; color: #000; }
    stocksmart-logo, .brand { color: #000; }
    .page { display: block; }
    .texture, .header::before, .footer::before { display: none; }
    .footer { height: auto; padding: 1rem 0; }
    .page[hidden] { display: none; }
}