/* Altura Blooms holding page — mobile first.
   Colours, type and logo rules follow BRAND.md (it overrides BRIEF.md). */

/* ---------- Fonts ---------- */

@font-face {
    font-family: "Walbaum";
    src: url("fonts/walbaum-medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Quicksand";
    src: url("fonts/quicksand-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Signature only: "A Higher Sense of Beauty" */
@font-face {
    font-family: "Modernline";
    src: url("fonts/modernline.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Quicksand Medium (500, labels) is loaded from Google Fonts in index.html.
   Quicksand Light is not part of the brand system and is not used. */

:root {
    /* BRAND.md §1 — no other colours */
    --teal: #16494A;
    --copper: #D39173;
    --white: #FFFFFF;
    --charcoal: #333333;
    --slate: #4D4D4D;
    /* tints: interface states, dividers, hairlines only */
    --teal-60: color-mix(in srgb, var(--teal) 60%, white);
    --teal-20: color-mix(in srgb, var(--teal) 20%, white);
    --teal-10: color-mix(in srgb, var(--teal) 10%, white);

    --font-display: "Walbaum", Georgia, serif;
    --font-body: "Quicksand", Arial, sans-serif;
    --font-signature: "Modernline", Georgia, serif;

    /* side margins: 24px on phones, at least 10% of the viewport on desktop */
    --margin: 24px;
    --max: 72rem;

    /* Logo: primary at 220px (min 180px). Clear space X = half the circle-A height;
       the circle-A is 72.7 units tall in the artwork's 324.23-unit width */
    /* every section's top and bottom padding (svh: steady while phone toolbars move) */
    --section-pad: clamp(96px, 18svh, 200px);

    --logo-w: 220px;
    --logo-x: calc(var(--logo-w) * 36.35 / 324.23);
}

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

p {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

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

/* ---------- Type roles (BRAND.md §2) ---------- */

/* Label: Quicksand Medium caps, 11–13px */
.label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--teal);
}

/* Heading: Walbaum Medium caps, 24–40px */
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--teal);
}

/* On teal grounds, labels turn white (copper text is only allowed on teal at 24px+) */
.footer .label {
    color: var(--white);
}

/* Display: Walbaum Medium caps, the largest type after the hero line */
.display-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teal);
}

/* ---------- Logo (supplied artwork, inlined; reversed version, teal grounds only) ---------- */

.logo-wrap {
    width: fit-content;
    padding: var(--logo-x);
}

.logo {
    display: block;
    width: var(--logo-w);
    height: auto;
    overflow: visible;
}

/* The artwork's own styles, unchanged, scoped to .logo */
.logo .logo-1,
.logo .logo-2 {
    fill: #d29173;
}

.logo .logo-3 {
    letter-spacing: .2em;
}

.logo .logo-4 {
    fill: #fff;
    font-family: Quicksand-Regular, Quicksand;
    font-size: 16.23px;
    opacity: .75;
}

.logo .logo-5 {
    letter-spacing: .19em;
}

.logo .logo-6 {
    letter-spacing: .2em;
}

.logo .logo-7 {
    letter-spacing: .16em;
}

.logo .logo-2 {
    font-family: MWalbaum-Medium, Walbaum;
    font-size: 32.01px;
    font-weight: 500;
    letter-spacing: .2em;
}

/* ---------- Navigation ---------- */

.site-nav {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    /* none (not translateY(0)) so the fixed menu panel inside stays relative to the viewport */
    transform: none;
    transition: transform 0.4s ease;
}

.site-nav.is-hidden {
    transform: translateY(-100%);
}

/* Over the hero the primary logo hangs below the 96px bar: the nav takes the logo's full
   height (with its clear space) so sliding it up by -100% clears all of it. The extra strip
   lets clicks through. */
.site-nav:not(.is-solid) {
    height: var(--nav-logo-clear);
    pointer-events: none;
}

.site-nav > * {
    pointer-events: auto;
}

.site-nav__bar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 96px;
    padding: 0 var(--margin);
}

/* Flat white ground outside the hero, faded in rather than switched */
.site-nav__bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--white);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.site-nav.is-solid .site-nav__bar {
    height: 64px;
}

.site-nav.is-solid .site-nav__bar::before {
    opacity: 1;
}

.site-nav__links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.site-nav__links--left {
    grid-column: 1;
    justify-content: flex-end;
    padding-right: 3rem;
}

.site-nav__links--right {
    grid-column: 3;
    justify-content: flex-start;
    padding-left: 3rem;
}

.site-nav__links a,
.site-nav__toggle {
    position: relative;
    display: inline-block;
    padding: 0.6rem 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--white);
    cursor: pointer;
    transition: color 0.3s ease;
}

/* A copper hairline draws in under the word, left to right, and leaves to the right */
.site-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.24em;   /* ignore the trailing letter-spacing */
    bottom: 0.3rem;
    height: 1px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .site-nav__links a::after {
        transition: none;
    }
}

.site-nav a:focus-visible,
.site-nav__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.site-nav.is-solid .site-nav__links a,
.site-nav.is-solid .site-nav__toggle {
    color: var(--teal);
}

.site-nav__home {
    position: relative;
    grid-column: 2;
    align-self: start;
    display: block;
    width: calc(180px + 2 * var(--nav-logo-x));
    height: 96px;
    color: var(--white);
}

.site-nav.is-solid .site-nav__home {
    height: 64px;
}

/* Primary logo, 180px, with clear space X (half the circle-A height) on every side */
:root {
    --nav-logo-x: calc(180px * 36.35 / 324.23);
    /* the nav logo plus its clear space, top and bottom */
    --nav-logo-clear: calc(180px * 153.89 / 324.23 + 2 * var(--nav-logo-x));
}

.site-nav__logo {
    position: absolute;
    transition: opacity 0.3s ease, visibility 0s;
}

.site-nav__logo--primary {
    top: var(--nav-logo-x);
    left: var(--nav-logo-x);
    width: 180px;
}

.site-nav__logo--primary .logo {
    width: 100%;
}

.site-nav__logo--compact {
    top: 50%;
    left: 50%;
    width: auto;
    height: 38px;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.site-nav.is-solid .site-nav__logo--primary {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.site-nav.is-solid .site-nav__logo--compact {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

.site-nav__toggle {
    display: none;
}

/* Full-screen menu (phones) */
.site-menu {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.site-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.site-menu li + li {
    margin-top: 1.75rem;
}

.site-menu a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
}

.site-menu a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 6px;
}

/* While the menu is open the bar keeps its over-the-hero look */
.site-nav.is-menu-open {
    transform: none;
}

.site-nav.is-menu-open .site-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
}

.site-nav.is-menu-open .site-nav__bar::before {
    opacity: 0;
}

.site-nav.is-menu-open .site-nav__toggle {
    color: var(--white);
}

.site-nav.is-menu-open .site-nav__logo--primary {
    opacity: 1;
    visibility: visible;
}

.site-nav.is-menu-open .site-nav__logo--compact {
    opacity: 0;
    visibility: hidden;
}

html.menu-open {
    overflow: hidden;
}

/* Anchor jumps stop below the white bar (64px), never under it */
section,
footer,
[id] {
    scroll-margin-top: 64px;
}

/* Sections focused by the nav links (for keyboard users) don't need a ring */
[tabindex="-1"]:focus {
    outline: none;
}

/* Below ~1120px the four links no longer fit either side of the logo: MENU instead */
@media (max-width: 69.99em) {
    .site-nav__links {
        display: none;
    }

    .site-nav__toggle {
        display: inline-block;
        grid-column: 3;
        justify-self: end;
        /* 44px tap target */
        min-height: 44px;
        padding: 0 0 0 0.75rem;
    }
}

/* ---------- 1. Hero: photo, line, mountains in front ---------- */

.hero {
    /* The photo's own colours, top to bottom, so nothing but sky and mountain shows
       while it loads and fades up */
    background: linear-gradient(#226a9f, #5185b0 20%, #6c96b9 40%, #6b8ca9 60%, #476284 70%, #4f4f67 80%, #383e50);
    /* Vertical framing of the photo, the cut-out and the ridge shade (site.js may lower it
       on short landscape screens to show more sky) */
    --hero-y: 75%;
}

.hero__stage {
    position: relative;
    /* svh only: the small viewport never changes while a phone's toolbars come and go */
    height: 100svh;
    overflow: hidden;
}

/* Photo and cut-out share one framing, so the ridge lines up pixel for pixel */
.hero__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--hero-y);
}

.hero__photo {
    z-index: 0;
}

/* Deep teal, strongest at the top behind the logo and the line, gone before the ground */
.hero__shade {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(
        rgba(9, 36, 38, 0.5),
        rgba(9, 36, 38, 0.34) 30%,
        rgba(9, 36, 38, 0.14) 55%,
        rgba(9, 36, 38, 0) 75%
    );
    pointer-events: none;
}

/* The peaks in front of the line, carrying the same shade so they match the photo */
.hero__front {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.hero__shade--ridge {
    -webkit-mask: url("assets/photos/hero-mountains.webp") 50% var(--hero-y) / cover no-repeat;
    mask: url("assets/photos/hero-mountains.webp") 50% var(--hero-y) / cover no-repeat;
}

/* site.js chose the framing (px) so the line has sky; every layer takes exactly the same box */
.hero.is-framed .hero__layer {
    inset: auto;
    top: var(--img-y);
    left: var(--img-x);
    width: var(--img-w);
    height: var(--img-h);
    max-width: none;
    object-fit: fill;
}

.hero.is-framed .hero__shade--ridge {
    -webkit-mask-position: var(--img-x) var(--img-y);
    mask-position: var(--img-x) var(--img-y);
    -webkit-mask-size: var(--img-w) var(--img-h);
    mask-size: var(--img-w) var(--img-h);
}

/* The signature, in the open sky (BRAND.md: modernline, only this line) */
.hero__script {
    position: absolute;
    z-index: 1;
    /* 18% of the hero, but never so high that the first line's swash (~0.36em above
       the line) reaches into the nav logo's clear space */
    top: max(18%, calc(var(--nav-logo-clear) + 0.36em));
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 var(--margin);
    font-family: var(--font-signature);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 150px);
    line-height: 1;
    text-align: center;
    text-wrap: nowrap;
    color: var(--white);
    /* A faint deep-teal halo lifts the thin strokes off bright sky */
    text-shadow: 0 0 0.18em rgba(9, 36, 38, 0.32);
}

/* site.js measured the sky and placed each part of the line in it (px), sized so no
   stroke touches another and the line ends above the peaks */
.hero__script.is-fitted {
    inset: 0;
    padding: 0;
    font-size: var(--hero-size);
}

.hero__script.is-fitted .hero__line--1,
.hero__script.is-fitted .hero__sense,
.hero__script.is-fitted .hero__beauty {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    line-height: 1;
}

.hero__line {
    display: block;
}

.hero__sense,
.hero__beauty {
    display: inline-block;
}

/* Phones: "Sense of Beauty" at 56px is wider than the screen, so Beauty takes its own line */
@media (max-width: 47.99em) {
    .hero__beauty {
        display: block;
    }
}

.hero__line,
.hero__sense,
.hero__beauty,
.hero__stage,
.hero__front,
.site-nav__bar {
    will-change: opacity, transform;
}

/* The bottom quarter of the photo dissolves into the teal of the introduction (never toward black) */
.hero__fade {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    background: linear-gradient(
        rgba(22, 73, 74, 0),
        rgba(22, 73, 74, 0.06) 20%,
        rgba(22, 73, 74, 0.2) 40%,
        rgba(22, 73, 74, 0.45) 60%,
        rgba(22, 73, 74, 0.75) 80%,
        var(--teal)
    );
    pointer-events: none;
}

/* IFTF, part 1: the fair's logo on a white tile and two set lines, one link, bottom left on
   the dark ground where the photo turns to teal (never over the snow).
   Phones: tile above the text. The block ends about 88svh down, above the scroll cue. */
.hero__iftf {
    position: absolute;
    z-index: 3;
    left: var(--margin);
    bottom: max(12svh, calc(2rem + 48px + 1rem));
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--white);
}

.hero__iftf-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hero__iftf-tile {
    display: block;
    padding: 8px;
    background: var(--white);
    opacity: 0.92;
    transition: opacity 0.3s ease;
}

/* The supplied file is square with the artwork in a band across its middle: the tile shows
   that band, so the 8px padding is the real margin around the logo */
.hero__iftf-logo {
    display: block;
    width: 80px;
    height: auto;
    aspect-ratio: 225 / 84;
    object-fit: cover;
}

.hero__iftf-lines {
    display: block;
}

.hero__iftf-meta,
.hero__iftf-cta {
    display: block;
    line-height: 1.4;
}

.hero__iftf-meta {
    font-size: 11px;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.75);
}

.hero__iftf-cta {
    margin-top: 0.4rem;
    font-size: 13px;
    letter-spacing: 0.24em;
}

.hero__iftf-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hero__iftf:hover .hero__iftf-tile,
.hero__iftf:focus-visible .hero__iftf-tile {
    opacity: 1;
}

.hero__iftf:hover .hero__iftf-arrow,
.hero__iftf:focus-visible .hero__iftf-arrow {
    transform: translateX(4px);
}

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

@media (prefers-reduced-motion: reduce) {
    .hero__iftf-tile,
    .hero__iftf-arrow {
        transition: none;
    }
}

/* Wider screens: tile on the left, text to its right, about 7% above the bottom */
@media (min-width: 48em) {
    .hero__iftf {
        bottom: 7svh;
    }

    .hero__iftf-group {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .hero__iftf-logo {
        width: 96px;
    }
}

/* Tablets held upright: the snowfield reaches low on the left, so the group sits below it */
@media (min-width: 48em) and (orientation: portrait) {
    .hero__iftf {
        bottom: 4svh;
    }
}

/* Short phones held upright: the peaks sit lower, so the group goes to the very foot */
@media (max-width: 47.99em) and (orientation: portrait) and (max-height: 43.99em) {
    .hero__iftf {
        bottom: 1rem;
    }
}

/* Phones on their side: no height to stack in, so the group sits in a row at the foot */
@media (max-width: 47.99em) and (orientation: landscape) {
    .hero__iftf-group {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

@media (orientation: landscape) and (max-height: 32em) {
    .hero__iftf {
        bottom: 1rem;
    }
}

/* Too narrow for the group and the centred cue side by side: the cue steps aside */
@media (min-width: 48em) and (max-width: 63.99em),
       (max-width: 47.99em) and (orientation: landscape),
       (max-width: 47.99em) and (orientation: portrait) and (max-height: 43.99em) {
    .hero__cue {
        display: none;
    }
}

/* Scroll cue: a single pulsing line */
.hero__cue {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero__cue.is-visible {
    opacity: 1;
}

.hero__cue.is-gone {
    opacity: 0;
    transition-duration: 0.4s;
}

.hero__cue-line {
    display: block;
    width: 1px;
    height: 48px;
    background: var(--white);
    transform-origin: top;
    animation: hero-cue 2.4s ease-in-out infinite;
}

@keyframes hero-cue {
    0% { transform: scaleY(0.4); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* Before the intro runs (site.js lifts this; a 6s failsafe in <head> too) */
.intro-pending .hero__stage,
.intro-pending .hero__line--1,
.intro-pending .hero__sense,
.intro-pending .hero__beauty,
.intro-pending .hero__iftf-group,
.intro-pending .site-nav__bar {
    opacity: 0;
}

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

.hero__intro {
    background: var(--teal);
    color: var(--white);
    padding: var(--section-pad) var(--margin);
}

.hero__columns {
    max-width: 60ch;
    margin: 0 auto;
}

.hero__columns p + p {
    margin-top: 1em;
}

/* The Rose: the signature face, copper on teal (allowed at 24px and above) */
.hero__rose {
    max-width: 60ch;
    margin: 2.5rem auto 0;
    font-family: var(--font-signature);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.2;
    color: var(--copper);
}

/* ---------- 2. Our story (white) ---------- */

.story {
    background: var(--white);
    color: var(--charcoal);
}

.story__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--section-pad) var(--margin);
}

.story__inner > p {
    max-width: 60ch;
}

.story .display-title {
    margin-bottom: 2.5rem;
}

.story__lead {
    font-size: 1.25rem;
    color: var(--teal);
}

/* Copper on white as a mark only */
.rule {
    display: block;
    width: 3rem;
    height: 1px;
    margin: 2rem 0;
    background: var(--copper);
}

/* Plain body text: the signature face is reserved for the hero line */
.story__script {
    font-style: normal;
}

/* ---------- 3. The five beauties (teal): a typographic list ---------- */

.beauties {
    background: var(--teal);
    color: var(--white);
}

.beauties__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--section-pad) var(--margin);
}

.beauties .beauties__label {
    margin: 0 0 2.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.beauties__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Phones: numeral, label and line stacked */
.beauty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "label" "line";
    gap: 0.75rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Copper on teal: allowed because it is large */
.beauty__num {
    grid-area: num;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--copper);
}

.beauty__label {
    grid-area: label;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--white);
}

.beauty__line {
    grid-area: line;
    max-width: 60ch;
    font-size: 1.125rem;
}

/* Tablets: the numeral beside a label-over-line pair */
@media (min-width: 48em) {
    .beauty {
        grid-template-columns: 7rem minmax(0, 1fr);
        grid-template-areas: "num label" "num line";
        column-gap: 2rem;
        row-gap: 0.5rem;
        padding: 2.5rem 0;
    }
}

/* Desktop: numeral | label | line */
@media (min-width: 64em) {
    .beauty {
        grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "num label line";
        align-items: baseline;
        column-gap: 2.5rem;
    }
}

.beauties__closing {
    max-width: 60ch;
    margin-top: 4rem;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--white);
}

/* ---------- 5. The collection: pinned showcase ---------- */

.showcase {
    /* the stage's top line: never higher than the white bar (64px) plus 24px */
    --stage-top: max(8svh, 88px);
    --text-edge: 45%;   /* the rose starts here, so it never sits under the text */
    --stage-margin: max(24px, 10vw);
    background: var(--white);
    color: var(--charcoal);
}

/* Chapter opener, in normal flow before the pinned stage: content centred in the
   height, the datum at its foot */
.showcase__intro {
    display: flex;
    flex-direction: column;
    min-height: 80svh;
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--section-pad) var(--margin);
}

.showcase__opener {
    margin: auto 0;
}

.showcase__title {
    margin: 0.75rem 0 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(44px, 6vw, 96px);
    line-height: 1.05;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teal);
}

.showcase__lede {
    max-width: 60ch;
    margin-top: 1.25rem;
    font-size: 1.125rem;
    color: var(--slate);
}

.showcase__browse {
    margin-top: 3rem;
}

/* Three ways in: one card per group. No borders, no shadows. */
.showcase__groups {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
}

/* A column, so the counts line up along the bottom of the row */
.group-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    color: var(--teal);
    text-decoration: none;
}

.group-card__img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: var(--white);
}

/* A copper hairline grows under the name on hover and focus (copper on white: a mark, not text) */
.group-card__name {
    position: relative;
    display: inline-block;
    margin: 1rem 0 0;
    padding-bottom: 0.35rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.25;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--teal);
}

.group-card__name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.07em;
    bottom: 0;
    height: 1px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.group-card__line {
    display: block;
    max-width: 36ch;
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--slate);
}

.group-card__count {
    display: block;
    margin-top: auto;
    padding-top: 0.9rem;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--teal);
}

.group-card__arrow {
    display: inline-block;
    margin-left: 0.15em;
    transition: transform 0.3s ease;
}

.group-card:hover .group-card__name::after,
.group-card:focus-visible .group-card__name::after {
    transform: scaleX(1);
}

.group-card:hover .group-card__arrow,
.group-card:focus-visible .group-card__arrow {
    transform: translateX(4px);
}

.group-card:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 6px;
}

@media (min-width: 48em) {
    .showcase__groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .group-card__name::after,
    .group-card__arrow {
        transition: none;
    }
}

.showcase__skip {
    display: inline-block;
    margin-top: 2.5rem;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid var(--teal-20);
    transition: border-color 0.3s;
}

.showcase__skip:hover {
    border-bottom-color: var(--teal);
}

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

/* Datum: a measured hairline with small ticks (BRAND.md §4), carrying the altitude */
.datum {
    position: relative;
    height: 7px;
    margin-top: 4rem;
    background:
        linear-gradient(var(--teal-20), var(--teal-20)) left bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to right, var(--teal-20) 0 1px, transparent 1px 64px) left bottom / 100% 7px no-repeat;
}

.datum__mark {
    position: absolute;
    right: 0;
    bottom: 14px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.24em;
    color: var(--slate);
}

/* Shown only once collection.js has the data */
.showcase:not(.is-ready) .showcase__track {
    display: none;
}

/* 55svh of scroll per rose, plus one screen while the stage is pinned */
.showcase__track {
    position: relative;
    height: calc(var(--roses, 21) * 55svh + 100svh);
    background: var(--white);
}

.showcase__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: var(--white);
}

/* The rose: ~115% of the stage tall, bleeding off top and bottom.
   Narrower landscape screens shrink it rather than push it under the text. */
.showcase__figure {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: var(--text-edge);
    height: min(115%, 68vw);
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    /* Static soft edges: a few photos have leaves touching the side of the frame */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.showcase__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;   /* collection.js sets each slot's opacity */
}

.showcase__img.is-moving {
    will-change: opacity, transform;
}

/* Group switcher, at the top of the text column: STANDARD · SPRAY · GARDEN with the
   active group's counter at the end of the row, over a three-segment progress line */
.switcher {
    position: absolute;
    z-index: 2;
    top: var(--stage-top);
    left: var(--stage-margin);
    width: calc(var(--text-edge) - var(--stage-margin) - 2rem);
}

.switcher__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.switcher__labels {
    display: flex;
    gap: 1.5rem;
}

.switcher__btn {
    padding: 0.5rem 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--slate);
    opacity: 0.45;
    cursor: pointer;
    transition: color 0.4s ease, opacity 0.4s ease;
}

.switcher__btn[aria-current="true"] {
    color: var(--teal);
    opacity: 1;
}

.switcher__btn:hover {
    opacity: 1;
}

.switcher__btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.switcher__count {
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
    color: var(--teal);
}

/* 2px line in three segments sized 13 : 4 : 4, 8px apart */
.switcher__track {
    display: flex;
    gap: 8px;
    margin-top: 0.25rem;
}

.switcher__seg {
    flex: 1 1 0;
    height: 2px;
    overflow: hidden;
    background: var(--teal-10);
}

.switcher__fill {
    display: block;
    height: 100%;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
}

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

.showcase__text {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: var(--stage-margin);
    width: calc(var(--text-edge) - var(--stage-margin) - 2rem);
    display: grid;
    /* minmax(0, …) keeps a long name from widening the column past the stage */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 1.5rem;
    /* clear of the switcher above */
    padding: calc(var(--stage-top) + 4rem) 0 1.75rem;
}

.showcase__info {
    align-self: center;
}

/* Rose name: Walbaum caps, names tracked 0.14em+.
   collection.js shrinks a long single-word name only as far as it needs to fit. */
.showcase__name {
    margin: 0.6rem 0 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(44px, 5vw, 96px);
    line-height: 1.05;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}

.showcase__name sup {
    margin-left: 0.1em;
    font-size: 0.32em;
    letter-spacing: 0;
    vertical-align: super;
}

.showcase__colour {
    margin-top: 0.4rem;
    font-size: 1.25rem;
    color: var(--slate);
}

/* Wraps rather than overflowing, so the whole row is always visible */
.showcase__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 1.25rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--teal-20);
}

.showcase__specs dt {
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--slate);
}

.showcase__specs dd {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    color: var(--charcoal);
}

/* Breeder · Type: a small secondary line after the description */
.showcase__meta {
    margin-top: 0.8rem;
    color: var(--slate);
}

.showcase__next-title {
    margin-bottom: 0.75rem;
    color: var(--slate);
}

.showcase__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 7.5rem));
    gap: 1rem;
}

.showcase__thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.showcase__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--white);
    transition: opacity 0.3s;
}

.showcase__thumb:hover img {
    opacity: 0.75;
}

/* "SPRAY" above a thumbnail from the next group; an empty line keeps the row aligned */
.showcase__thumb-group {
    display: block;
    min-height: 1.4em;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 1.4;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--slate);
}

.showcase__thumb-name {
    display: block;
    margin-top: 0.35rem;
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.showcase__nav {
    position: absolute;
    z-index: 2;
    right: calc(var(--stage-margin) / 2);
    bottom: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.showcase__btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--teal);
    border-radius: 50%;
    background: var(--white);
    color: var(--teal);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.showcase__btn svg {
    width: 0.6rem;
    height: 0.6rem;
    fill: currentColor;
}

.showcase__btn:hover:not(:disabled) {
    background: var(--teal);
    color: var(--white);
}

.showcase__btn:disabled {
    border-color: var(--teal-20);
    color: var(--teal-20);
    cursor: default;
}

.showcase__btn:focus-visible,
.showcase__thumb:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

.showcase__fallback {
    margin: 0;
    padding: 4rem var(--margin);
    color: var(--charcoal);
}

.showcase__fallback a {
    color: var(--teal);
}

/* Portrait (phones, and tablets held upright): rose on top, text below */
@media (max-width: 47.99em), (max-aspect-ratio: 1/1) {
    .showcase {
        --stage-margin: 24px;
    }

    .showcase__stage {
        height: 100svh;
    }

    .switcher {
        top: 88px;
        right: var(--stage-margin);
        width: auto;
    }

    .switcher__labels {
        gap: 1rem;
    }

    .switcher__btn,
    .switcher__count {
        font-size: 11px;
    }

    .switcher__btn {
        /* 44px tap height without growing the row */
        padding: 0.9rem 0;
        margin: -0.4rem 0;
    }

    /* Below the switcher, ending where it used to (its foot fades) */
    .showcase__figure {
        top: calc(88px + 2.5rem);
        left: 50%;
        height: calc(51% - 88px - 2.5rem);
        transform: translateX(-50%);
        /* soft sides, plus a soft foot so cut stems don't end in a hard line */
        -webkit-mask-image:
            linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
            linear-gradient(to bottom, #000 80%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
            linear-gradient(to bottom, #000 80%, transparent 100%);
        mask-composite: intersect;
    }

    .showcase__next {
        display: none;
    }

    .showcase__text {
        top: 52%;
        left: var(--stage-margin);
        right: var(--stage-margin);
        bottom: calc(1rem + env(safe-area-inset-bottom));
        width: auto;
        grid-template-rows: auto 1fr;
        gap: 0;
        padding: 0;
    }

    .showcase__info {
        align-self: start;
    }

    .showcase__name {
        margin-top: 0.4rem;
    }

    .showcase__colour {
        margin-top: 0.15rem;
        font-size: 1.0625rem;
    }

    .showcase__specs {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        gap: 0.5rem 2rem;
        margin-top: 0.75rem;
        padding-top: 0.6rem;
    }

    .showcase__meta {
        margin-top: 0.5rem;
    }

    .showcase__nav {
        right: var(--stage-margin);
        bottom: calc(1rem + env(safe-area-inset-bottom));
        flex-direction: row;
    }

    .showcase__btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Tablets held upright have room for all four specs on one line */
@media (max-aspect-ratio: 1/1) and (min-width: 40em) {
    .showcase__specs {
        grid-template-columns: repeat(4, auto);
    }
}

/* Phones: a full-height tap target */
@media (max-width: 47.99em) {
    .showcase__skip {
        padding: 0.6rem 0 0.2rem;
    }
}

/* Phones turned sideways: less height for the text column */
@media (orientation: landscape) and (max-height: 32em) {
    .switcher {
        top: 88px;
    }

    .showcase__text {
        padding-top: calc(88px + 3.5rem);
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .showcase__name {
        font-size: 2rem;
    }

    .showcase__next {
        display: none;
    }
}

/* ---------- 5. IFTF invitation (white, temporary) ---------- */

.iftf {
    background: var(--white);
    color: var(--charcoal);
}

.iftf__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--section-pad) var(--margin);
}

/* Separates the invitation from the collection above */
.iftf .datum {
    margin: 0 0 clamp(64px, 10svh, 120px);
}

.iftf__title {
    margin-top: 0.75rem;
}

.iftf__copy {
    max-width: 60ch;
    margin-top: 1.5rem;
    font-size: 1.125rem;
}

.iftf__copy strong {
    font-weight: 500;
    color: var(--teal);
    white-space: nowrap;
}

.iftf__facts {
    margin-top: 1.5rem;
}

.iftf__logo {
    width: 100%;
    max-width: 140px;
    margin-top: 2.5rem;
}

/* ---------- 6. Contact / footer (teal) ---------- */

.footer {
    background: var(--teal);
    color: var(--white);
}

.footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--section-pad) var(--margin);
}

/* Clear space stays around the logo; its artwork lines up with the text edge */
.footer .logo-wrap {
    margin-left: calc(-1 * var(--logo-x));
}

.footer a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid var(--copper);
    padding-bottom: 0.1em;
    /* comfortable tap target on phones */
    display: inline-block;
    line-height: 2;
}

.footer a:hover,
.footer a:focus-visible {
    border-bottom-color: var(--white);
}

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

/* The one action: Walbaum caps, white, a copper hairline under it */
.footer .footer__enquire {
    margin-top: 2.5rem;
    padding-bottom: 0.08em;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact {
    display: grid;
    gap: 1.75rem;
    margin: 3.5rem 0 0;
}

.contact .label {
    margin-bottom: 0.35rem;
}

.contact dd {
    margin: 0;
    font-size: 1.0625rem;
}

.footer__address {
    margin-top: 2.5rem;
    font-style: normal;
}

.footer__legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--teal-60);
}

/* The page's one pattern: a quiet band at the foot, never behind text */
.footer__pattern {
    height: 120px;
    background-image: url("assets/SVG/pattern-orange.svg");
    background-repeat: repeat-x;
    background-size: auto 120px;
    background-position: left bottom;
}

/* ---------- Tablet and up ---------- */

@media (min-width: 48em) {
    :root {
        --margin: max(24px, 10vw);
    }

    .hero__columns,
    .hero__rose {
        max-width: var(--max);
    }

    .hero__columns {
        columns: 2;
        column-gap: 4rem;
    }

    .hero__columns p {
        break-inside: avoid;
    }

    .contact {
        grid-template-columns: repeat(3, max-content);
        gap: 2rem 4rem;
    }
}

/* ---------- Scroll reveals (site.js adds .reveal-ready; without it, text simply shows) ---------- */

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal] {
        transform: none;
        transition: opacity 0.3s ease;
    }
}