@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=JetBrains+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
    /* True black, fully achromatic: the only tone anywhere is the
       photography. An accent hue would compete with the garments. */
    --bg: #000000;

    /* Warm off-white rather than #fff. Pure white on pure black is a harsh,
       screen-made pairing; cooling it slightly reads as printed ink. */
    --fg: #f4f1e8;
    --muted: #8e8a81;
    --dim: #565249;
    --line: #1d1c19;

    --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* ---- Type scale ----
       One fluid scale on a ~1.3 ratio, replacing the five unrelated clamp()
       values that had accumulated page by page. Every size on the site now
       comes from here, so headings relate to each other instead of each
       being guessed locally. */
    --step-6: clamp(3.5rem, 11vw, 9rem);      /* hero */
    --step-5: clamp(2.75rem, 7.5vw, 6rem);    /* page titles */
    --step-4: clamp(2.15rem, 5vw, 4rem);      /* section heads */
    --step-3: clamp(1.7rem, 3.4vw, 2.6rem);   /* sub-heads */
    --step-2: clamp(1.4rem, 2.2vw, 1.75rem);  /* lead copy */
    --step-1: 1.0625rem;                      /* body */
    --step-0: 0.875rem;                       /* small */
    --micro: 0.625rem;                        /* label layer */
    --micro-track: 0.14em;

    /* ---- Spacing rhythm ----
       Replaces eight ad-hoc padding combinations. Sections share one fluid
       vertical measure so the page breathes consistently. */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.75rem;
    --space-4: 3rem;
    --space-5: 5rem;
    --space-6: clamp(5rem, 12vh, 9rem);       /* between sections */
    --space-7: clamp(7rem, 20vh, 14rem);      /* major breaks */

    --gutter: clamp(1.25rem, 5vw, 5rem);

    /* Shared easing so every transition on the site moves the same way. */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html, body {
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
}


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


/* Keyboard focus. Without this the only focus cue on the whole site is the
   browser default, which is close to invisible on pure black — anyone
   navigating by keyboard was effectively lost. :focus-visible so it shows
   for keyboard use without ringing every mouse click. */
:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}


/* Skip link: first tab stop, offscreen until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100020;
    background: var(--fg);
    color: #000;
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 1.4em;
}


.skip-link:focus {
    left: 0;
}


/* ---------- Micro label layer ---------- */

.micro,
.eyebrow,
.statusbar,
.readout,
.index-num,
.spec dt,
.spec dd,
.marquee {
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
}


/* ---------- Nav ---------- */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6em var(--gutter);
    z-index: 1000;
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    mix-blend-mode: difference;
}


nav a {
    color: var(--fg);
    text-decoration: none;
}


nav a:hover,
.cart-link:hover {
    opacity: 0.55;
}


.nav-links {
    display: flex;
    gap: 2.5em;
}


.cart-link {
    white-space: nowrap;
    background: none;
    border: none;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    cursor: pointer;
}


/* ---------- Status readout ---------- */

.statusbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7em 2em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 1em var(--gutter);
}


/* ---------- Discount code, on the cart ---------- */

.cart-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1em;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.cart-code input {
    flex: 1 1 13rem;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 13px;
    /* The codes are read off a screen and typed one character at a time, so
       they are tracked out further than ordinary input text. */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.85em 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.4s var(--ease);
}

.cart-code input::placeholder {
    color: var(--dim);
    letter-spacing: var(--micro-track);
    font-size: var(--micro);
}

.cart-code input:focus {
    outline: none;
    border-bottom-color: var(--fg);
}

.cart-code-apply {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    padding: 0 1.3em;
    min-height: 44px;
    cursor: pointer;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.cart-code-apply:hover:not(:disabled),
.cart-code-apply:focus-visible {
    color: var(--fg);
    border-color: var(--fg);
}

.cart-code-apply:disabled {
    opacity: 0.5;
    cursor: default;
}

.cart-code-note {
    flex: 1 0 100%;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    color: var(--fg);
}

/* No accent colour exists in this palette, so a rejection recesses rather
   than brightening -- it must not read as confirmation. */
.cart-code-note.is-error { color: var(--muted); }

.cart-code-note[hidden] { display: none; }


/* Visible to a screen reader, not on screen. For a label whose field is
   already self-evident by position and placeholder, where showing the label
   too would be noise -- a placeholder alone is not an accessible name, since
   it disappears the moment someone starts typing. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* Not scoped to .statusbar — the shop and gallery meta rows use it too. */
.spacer {
    flex: 1;
}


/* A readout sitting at the top of a page has the fixed nav painted over it.
   Clear it vertically, and indent past the back link so the two do not stack
   in the same column. */
.statusbar-top {
    padding-top: 4.8em;
    padding-left: calc(var(--gutter) + 5.5rem);
}


@media (max-width: 760px) {
    .statusbar-top {
        padding-top: 5.4em;
        padding-left: var(--gutter);
    }
}


/* Label and value sit together as one reading, the label recessive. Avoids
   a separate eyebrow row above every value. */
.stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7em;
    white-space: nowrap;
}


.stat b {
    font-weight: 400;
    color: var(--dim);
}


.stat time {
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}


/* Square rather than a round dot, and white rather than a signal colour —
   it reads as an instrument indicator instead of a status pill. */
.dot {
    width: 5px;
    height: 5px;
    background: var(--fg);
    display: inline-block;
    animation: blink 2.4s steps(1, end) infinite;
}


@keyframes blink {
    0%, 62% { opacity: 1; }
    63%, 100% { opacity: 0.18; }
}


@media (prefers-reduced-motion: reduce) {
    .dot { animation: none; }
}


/* ---------- Marquee ticker ---------- */

.marquee {
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.1em 0;
    color: var(--muted);
}


.marquee-track {
    display: inline-flex;
    animation: marquee 48s linear infinite;
    will-change: transform;
}


/* Items are divided by a hairline rule rather than a bullet glyph, so the
   separator is structure instead of punctuation. */
.marquee-track span {
    flex-shrink: 0;
    padding: 0 2.75em;
    border-right: 1px solid var(--line);
}


@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}


@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ---------- Terminal readout ---------- */

.readout {
    font-family: var(--font-mono);
    color: var(--muted);
    line-height: 1.9;
    max-width: 62ch;
}


.readout .rule {
    color: var(--dim);
    display: block;
    margin-bottom: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.readout mark {
    background: var(--fg);
    color: var(--bg);
    padding: 0 0.35em;
}


/* ---------- Display type ---------- */

.display {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-transform: uppercase;
    font-size: var(--step-6);
}


.eyebrow {
    color: var(--muted);
}


/* ---------- Key/value spec rows (cipher credits) ---------- */

.spec {
    border-top: 1px solid var(--line);
}


.spec-row {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    padding: 0.85em 0;
    border-bottom: 1px solid var(--line);
}


.spec dt {
    color: var(--dim);
    flex-shrink: 0;
}


.spec dd {
    color: var(--muted);
    text-align: right;
}


/* ---------- Product page ---------- */

.product {
    display: flex;
    flex-wrap: wrap;
    padding: 9em var(--gutter) 6em var(--gutter);
    gap: 5em;
}


.product-image {
    flex: 1 1 420px;
    max-width: 620px;
}


/* No blanket `.product-image img` rule here. It is a descendant selector, so
   it outranked the stacked viewer layers (.pv-shot) on specificity and forced
   them back to static flow. Each kind of image now owns its own rule. */

.pv-stage {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111;
    cursor: zoom-in;
    touch-action: pan-y;
}


.pv-stage.is-zoomed {
    cursor: zoom-out;
}


.pv-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    /* No permanent will-change here. It would hold a compositor layer for
       every stacked view on the page whether or not anything is moving, and
       GSAP already promotes what it animates for the length of the tween. */
    user-select: none;
    -webkit-user-drag: none;
}


.pv-hint {
    position: absolute;
    right: 1em;
    bottom: 1em;
    z-index: 2;
    color: var(--fg);
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}


.pv-stage.is-hoverable .pv-hint {
    opacity: 1;
}


.pv-bar {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin-top: 1em;
}


.pv-step {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    padding: 0.7em 1em;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}


.pv-step:hover,
.pv-step:focus-visible {
    border-color: var(--fg);
}


.pv-step:active {
    background: var(--fg);
    color: #000;
}


.pv-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


.pv-count i {
    font-style: normal;
    color: var(--dim);
    margin: 0 0.3em;
}


.product-info {
    flex: 1 1 320px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
}


.product-info h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-4);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}


.price {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--fg);
}


.description {
    line-height: 1.65;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    max-width: 46ch;
}


.sizes {
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
    flex-wrap: wrap;
}


.size {
    min-width: 3em;
    height: 2.6em;
    padding: 0 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}


.size:hover {
    border-color: var(--fg);
}


.size.selected {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}


.add-to-cart {
    margin-top: 0.8em;
    padding: 1.25em 2em;
    background: transparent;
    border: 1px solid var(--fg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}


.add-to-cart:hover {
    background: var(--fg);
    color: var(--bg);
}


.add-to-cart:disabled {
    opacity: 0.35;
    cursor: default;
}


.add-to-cart:disabled:hover {
    background: transparent;
    color: var(--fg);
}


.details {
    margin-top: 1em;
}


/* ---------- Shop ---------- */

.shop-header {
    padding: 8em var(--gutter) 0 var(--gutter);
    text-align: center;
}


.shop-header h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-5);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}


.shop-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7em 2em;
    padding: 2em var(--gutter) 1.5em var(--gutter);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}


/* The grid itself is the centred element, rather than centring loose columns
   inside a full-width track list.

   auto-fill was leaving empty trailing columns that still held space, so the
   garments sat pinned to the left. Capping the column width instead just
   moved the problem: a fixed 340px cap would not fit three across at common
   widths, so the third wrapped and the group went off-centre. Constraining
   the grid and letting the columns share it keeps all three on one balanced
   row, and it stays correct at any width rather than only where the
   arithmetic happens to work out. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4em 2em;
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    padding: 3em var(--gutter) 8em var(--gutter);
}


/* One shared perspective for the whole grid, so every card recedes toward
   the same vanishing point rather than each having its own. */
.stage {
    perspective: 1600px;
    perspective-origin: 50% 40%;
}


.product-card {
    position: relative;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.22s ease-out;
    will-change: transform;
}


.card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transform-style: preserve-3d;
}


/* Depth separation. Without pushing the caption and the add row forward on
   Z, the tilt would just rotate a flat picture; the offset is what makes the
   layers parallax against each other. */
.product-card-meta {
    transform: translateZ(38px);
}


.card-add {
    transform: translateZ(58px);
}


/* A specular highlight that tracks the pointer — the metallic cue from the
   reference sites, done with a gradient rather than a rendered asset. */
.card-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.04) 38%,
        transparent 62%
    );
    mix-blend-mode: screen;
}


.product-card:hover .card-sheen {
    opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
    .product-card { transition: none; }
    .card-sheen { display: none; }
}


.product-card-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #111;
}


/* Both photographs occupy the same frame. Hover/focus cross-fades to the
   second one, so the interaction shows another angle of the garment rather
   than just scaling the same picture. */
.card-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
}


.card-shot-alt {
    opacity: 0;
    transition: opacity 0.45s ease;
}


/* The card is an <article> now, so focus lands on the link inside it. */
.product-card:hover .card-shot-alt,
.card-link:focus-visible .card-shot-alt {
    opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
    .card-shot-alt { transition: none; }
}


.product-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin-top: 1.1em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.3s ease;
}


.product-card:hover .product-card-meta {
    border-color: var(--fg);
}


.index-num {
    color: var(--dim);
}


.product-card-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
}


.product-card-price {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


/* Sizes double as buy buttons: the row states what a garment is cut in, and
   each one adds that size to the cart without leaving the index. */
.card-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.8em;
}


.card-add-label {
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    color: var(--dim);
    margin-right: 0.4em;
    min-width: 3.2em;
}


.size-chip {
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    padding: 0.5em 0.7em;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}


.size-chip:hover,
.size-chip:focus-visible {
    color: var(--fg);
    border-color: var(--fg);
}


.size-chip.is-added {
    background: var(--fg);
    border-color: var(--fg);
    color: #000;
}


/* ---------- Touch targets ----------
   Measured on a 375px viewport: size swatches came out 31x26, the image
   stepper 33x31 and Add to cart 40 tall — all under the 44px a fingertip
   needs, and all of them on the path to actually buying something. Scoped to
   coarse pointers so the desktop keeps its finer scale rather than every
   control being inflated for everyone. */

@media (pointer: coarse) {
    .size,
    .size-chip {
        min-width: 44px;
        min-height: 44px;
        padding: 0 0.9em;
    }

    .pv-step {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .add-to-cart {
        min-height: 52px;
        padding: 1.1em 2em;
    }

    /* The only control on the gate, so it is the one target that must not be
       fiddly -- it was coming out at 41px. */
    .enter-button {
        min-height: 48px;
        justify-content: center;
    }

    .qty-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .cart-link,
    nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .tick {
        min-height: 24px;      /* the bar stays thin; the hit area grows */
        display: flex;
        align-items: center;
    }

    .tick::after {
        content: "";
        position: absolute;
        inset: -10px -4px;
    }

    .slider-ticks .tick {
        position: relative;
    }
}


/* ---------- Editorial chapters ----------
   Shared section rhythm. Every band on the landing page uses the same
   vertical measure, so the page breathes evenly as you scroll. */

.chapter {
    padding: var(--space-7) var(--gutter);
    max-width: 1500px;
    margin: 0 auto;
}


/* ---------- Sections ----------
   One continuous page. These were rounded plates stacked over each other;
   separate backgrounds and radii made each one read as its own card, which
   is the opposite of a single document. They now sit on the same ground and
   are separated by rhythm and a hairline rule, not by boxes. */
.panel {
    position: relative;
}


.panel + .panel {
    border-top: 1px solid var(--line);
}


.panel-inner {
    padding: var(--space-6) var(--gutter);
    max-width: 1500px;
    margin: 0 auto;
}


/* A full-height panel, used where an image should carry the whole frame. */
.panel-full {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Masked line reveal. The span is clipped by its parent, so the line rises
   out of a hard edge instead of fading in place. */
.line-mask {
    display: block;
    overflow: hidden;
}


.line-mask > span {
    display: block;
    will-change: transform;
}


.chapter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-5);
}


.chapter-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-4);
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
}


.chapter-mark {
    color: var(--dim);
    margin-bottom: var(--space-4);
}


/* The serif appears here and nowhere else on the site. One voice, used once,
   so it reads as the label speaking rather than as another UI style. */
.statement {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--step-3);
    line-height: 1.28;
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin-bottom: var(--space-4);
    text-wrap: balance;
}


.chapter-statement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* ---------- Underline link ----------
   The rule draws from the left on hover and retracts to the right on leave,
   so the gesture has direction instead of just toggling. */
.link-underline {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    padding-bottom: 0.5em;
}


.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--fg);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease);
}


a:hover .link-underline::after,
.link-underline:hover::after,
.link-underline:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* ---------- Garment bands ---------- */

.bands {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}


.band {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-5);
    align-items: center;
    color: inherit;
    text-decoration: none;
}


.band-flip .band-media { order: 2; }


.band-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #0d0d0d;
}


.band-media img {
    width: 100%;
    height: 118%;              /* headroom for the parallax drift */
    object-fit: cover;
    filter: grayscale(100%) contrast(1.06);
    transition: filter 0.7s var(--ease);
}


.band:hover .band-media img {
    filter: grayscale(0%) contrast(1);
}


.band-name {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-4);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}


.band-blurb {
    color: var(--muted);
    font-size: var(--step-1);
    font-weight: 300;
    line-height: 1.65;
    max-width: 38ch;
    margin-bottom: var(--space-3);
}


.band-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}


.band-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
}


.band-meta dt {
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    color: var(--dim);
}


.band-meta dd {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}


/* ---------- Plate strip ---------- */

.plate-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}


.plate-card {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #0d0d0d;
    scroll-snap-align: start;
}


.plate-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.06);
    transition: filter 0.7s var(--ease);
}


.plate-card:hover img {
    filter: grayscale(0%);
}


/* ---------- Close ---------- */

.chapter-close {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    border-top: 1px solid var(--line);
}


.close-line {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-4);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}


/* The one filled control on the page, so the end of the scroll has somewhere
   obvious to go. The arrow slides on hover; the label stays put. */
.enter-button {
    display: inline-flex;
    align-items: center;
    gap: 1.1em;
    /* Everywhere else this class lands on an <a>, which is transparent by
       default. On the gate it lands on a <button>, which is not: the UA
       paints it 'buttonface' grey (#efefef) and the cream label on top of
       that is invisible. Declaring these makes the class behave the same way
       whichever element it is on. */
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--fg);
    color: var(--fg);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    padding: 1.3em 2em;
    transition: background 0.5s var(--ease), color 0.5s var(--ease);
}


.enter-button i {
    font-style: normal;
    transition: transform 0.5s var(--ease);
}


.enter-button:hover,
.enter-button:focus-visible {
    background: var(--fg);
    color: #000;
}


.enter-button:hover i {
    transform: translateX(0.45em);
}


@media (max-width: 860px) {
    .band {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .band-flip .band-media { order: 0; }

    .chapter { padding: var(--space-6) var(--gutter); }

    .bands { gap: var(--space-6); }
}


@media (prefers-reduced-motion: reduce) {
    .link-underline::after,
    .band-media img,
    .enter-button,
    .enter-button i { transition: none; }
}


/* ---------- Full-viewport slider ---------- */

/* The gallery page is nothing but the slider, so it fills the viewport and
   sits below the nav (z-index 1000) rather than over it. */
body.gallery-page {
    overflow: hidden;
}


.slider {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    overflow: hidden;
    touch-action: pan-y;
}


.slider-track {
    display: flex;
    height: 100%;
    will-change: transform;
}


.slide {
    position: relative;
    flex: 0 0 100vw;
    height: 100%;
    overflow: hidden;
}


.slide-media {
    width: 100%;
    height: 100%;
    /* Eleven plates meant eleven permanently-promoted layers on the gallery,
       all held whether or not the slider was moving. The track above keeps
       its hint because that is the element actually being tweened. */
}


.slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.06) brightness(0.85);
    pointer-events: none;
}


.slider-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Clears the fixed nav above it, which occupies the same corner. */
    padding: 4.6em var(--gutter) 1.6em var(--gutter);
    color: var(--fg);
    mix-blend-mode: difference;
}


.slider-count {
    font-size: 12px;
}


.slider-count i {
    font-style: normal;
    color: var(--dim);
    margin: 0 0.4em;
}


.slider-caption {
    position: absolute;
    left: var(--gutter);
    bottom: 3.2em;
}


/* The garment shown in this plate, linking through to it. This is the
   connection between the volume and the things you can actually buy. */
.slider-garment {
    margin-top: 0.9em;
    mix-blend-mode: difference;
}


.slider-garment a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--dim);
    padding-bottom: 0.35em;
    transition: border-color 0.25s ease;
}


.slider-garment a:hover,
.slider-garment a:focus-visible {
    border-color: var(--fg);
}


.slider-title {
    position: static;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-5);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--fg);
    mix-blend-mode: difference;
    white-space: pre;
    pointer-events: none;
}


.slider-title .char {
    display: inline-block;
}


.slider-title.is-in .char {
    animation: char-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes char-in {
    from { opacity: 0; transform: translateY(0.45em); }
    to   { opacity: 1; transform: none; }
}


.slider-ticks {
    position: absolute;
    right: var(--gutter);
    bottom: 3.4em;
    display: flex;
    gap: 0.5em;
    mix-blend-mode: difference;
}


.tick {
    width: 26px;
    height: 2px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}


.tick:hover {
    background: rgba(255, 255, 255, 0.7);
}


.tick.is-active {
    background: var(--fg);
    transform: scaleY(2);
}


.slider-hint {
    position: absolute;
    left: var(--gutter);
    bottom: 1.5em;
    color: var(--dim);
    mix-blend-mode: difference;
    pointer-events: none;
}


.slider.is-dragging .slide-media {
    transition: none;
}


@media (max-width: 760px) {
    .slider-title {
        bottom: 4.2em;
    }

    .slider-ticks {
        left: var(--gutter);
        right: auto;
        bottom: 2.6em;
    }

    .tick {
        width: 16px;
    }
}


/* ---------- About ---------- */

.about-page {
    max-width: 1200px;
    padding: 9em var(--gutter) 8em var(--gutter);
}


.about-page h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-5);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 0.6em;
}


.about-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3em;
    margin-top: 3em;
}


.about-body p {
    line-height: 1.75;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    /* Keeps the measure under ~75 characters at any column width. */
    max-width: 62ch;
}


/* ---------- Colophon ---------- */

.colophon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 3em;
    margin-top: 5em;
    padding-top: 3em;
    border-top: 1px solid var(--line);
}


.colophon-block h2 {
    font-family: var(--font-mono);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--fg);
    margin-bottom: 1.2em;
}


/* ---------- Cart ---------- */

.cart-page {
    max-width: 900px;
    padding: 9em var(--gutter) 8em var(--gutter);
}


.cart-page h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-5);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 1em;
}


.empty-cart {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.empty-cart a {
    color: var(--fg);
}


.cart-item {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding: 1.5em 0;
    border-bottom: 1px solid var(--line);
}


.cart-item img {
    width: 72px;
    height: 92px;
    object-fit: cover;
    filter: grayscale(100%);
}


.cart-item-info {
    flex: 1;
}


.cart-item-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.cart-item-size,
.cart-item-price {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    text-transform: uppercase;
    margin-top: 0.45em;
}


.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.9em;
    font-family: var(--font-mono);
    font-size: 11px;
}


.qty-btn {
    width: 2em;
    height: 2em;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: border-color 0.2s ease;
}


.qty-btn:hover {
    border-color: var(--fg);
}


.remove-btn {
    background: transparent;
    border: none;
    color: var(--dim);
    font-size: 1.1em;
    cursor: pointer;
    transition: color 0.2s ease;
}


.remove-btn:hover {
    color: var(--fg);
}


.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5em;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.cart-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2em;
    padding-bottom: 1.2em;
    color: var(--muted);
}


.cart-totals {
    margin-top: 2.5em;
    max-width: 420px;
    margin-left: auto;
}


.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: 2.5em;
}


.secure-note {
    display: flex;
    align-items: center;
    gap: 0.7em;
    color: var(--muted);
    max-width: 36ch;
    line-height: 1.6;
}


@media (max-width: 620px) {
    .cart-totals {
        max-width: none;
        margin-left: 0;
    }

    .cart-actions .add-to-cart {
        width: 100%;
    }
}


/* ---------- Responsive ---------- */

@media (max-width: 760px) {
    :root {
        --gutter: 6vw;
    }

    .product {
        padding-top: 7em;
        gap: 3em;
    }

    .nav-links {
        gap: 1.5em;
    }

    /* Was scoped to .statusbar, so every other use of the class -- the gate
       footer among them -- kept rendering and wrapping onto two lines on a
       phone. It is meant to be a general utility. */
    .hide-sm {
        display: none;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .spec-row {
        font-size: 9px;
    }
}