/* GB Klubs Rīgā - marketing page layout.
   Everything here is built on the design-system tokens in tokens.css; no colour,
   size or duration is hard-coded that a token already names. Shared by all five
   language pages, so nothing in here may contain copy. */

/* ------------------------------------------------------------------ shell */
.gb-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.gb-narrow    { max-width: var(--container-narrow); margin: 0 auto; }
.gb-section   { padding-block: var(--section-y); }
.gb-section--tight { padding-block: var(--section-y-tight); }
.gb-raised    { background: var(--surface-raised); }

/* ------------------------------------------------------------------- nav */
/* The only fixed element in the brand. Translucent, blurred, hairline base. */
.gb-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(7, 6, 5, .72);
    backdrop-filter: saturate(120%) blur(14px);
    -webkit-backdrop-filter: saturate(120%) blur(14px);
    border-bottom: var(--stroke-hair) solid var(--line-hairline);
}
.gb-nav__in {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-5);
    min-height: 68px; max-width: var(--container-max);
    margin: 0 auto; padding-inline: var(--gutter);
}
/* The mark is type, not a drawn logo: a serif GB monogram. */
.gb-mark {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-right: var(--space-2);
    font-family: var(--font-serif-accent);
    font-size: 1.75rem; line-height: 1; color: var(--text-accent);
    letter-spacing: .02em; white-space: nowrap;
}
/* Links and the language switcher share one right-aligned group. Giving each of
   them margin-left:auto instead would strand the switcher on the left as soon as
   the links hide below 900px. */
.gb-nav__right { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-6);
                 margin-left: auto; min-width: 0; }
.gb-nav__links { gap: var(--space-6); }
.gb-nav__links a {
    /* An 11px cap-height line is a 19px target. The chip stays visually the
       same size; the padding does the reaching, so the pointer has something
       to hit and WCAG 2.2 target size is satisfied. */
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--text-muted);
}
.gb-nav__links a:hover { color: var(--text-accent); }
/* Measured, not guessed: the widest of the five languages needs 1048px for
   the monogram, six section links and five language codes on one line.
   Written from the small side up, and the header action below stands down on
   the very same condition. Expressing one as max-width and the other as
   min-width leaves a fractional gap - a 1059.33px window satisfies neither -
   and in that gap both appeared at once and the header ran off the screen. */
.gb-nav__links { display: none; }
@media (min-width: 1060px) { .gb-nav__links { display: flex; } }


/* ------------------------------------------------------------- language */
.gb-lang { display: flex; flex-wrap: nowrap; gap: var(--space-1); }
.gb-lang a {
    display: inline-flex; align-items: center; justify-content: center;
    /* 44px minimum tap target. The visible chip stays small; the padding does
       the reaching, so the design is unchanged and the thumb still lands. */
    min-width: 44px; min-height: 44px; padding: 0 8px;
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    /* was --text-faint, which is 3.0:1 against the page and fails AA at 11px */
    color: var(--text-muted); border-radius: var(--radius-1);
}
.gb-lang a:hover { color: var(--text-accent); }
@media (max-width: 360px) {
    .gb-lang a { min-width: 38px; padding: 0 4px; }
    .gb-nav__right { gap: var(--space-3); }
}
.gb-lang a[aria-current="page"] { color: var(--ink-900); background: var(--gold-500); }

/* ----------------------------------------------------------------- type */
.gb-eyebrow {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-sans); font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--text-accent);
}
.gb-eyebrow--center { justify-content: center; }
.gb-eyebrow__rule { flex: 0 0 56px; height: 1px; background: var(--line-rule); }
.gb-eyebrow__i { font-family: var(--font-serif-accent); font-size: 1rem; letter-spacing: 0; }
.gb-h2   { font: var(--type-section); }
.gb-lead { font: var(--type-lead); color: var(--text-muted); max-width: 56ch; }
.gb-body { font: var(--type-body); color: var(--text-muted); max-width: 62ch; }
.gb-body + .gb-body { margin-top: var(--space-4); }
.gb-quote {
    font: var(--type-quote); color: var(--text-accent);
    border-left: var(--stroke-hair) solid var(--line-gold);
    padding-left: var(--space-5);
}

/* ---------------------------------------------------------------- hero */
.gb-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.gb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two stacked protections, as the brand requires: radial vignette plus a ramp
   into the page ink. Type is bottom-anchored, never centred in the frame. */
.gb-hero__scrim { position: absolute; inset: 0; background: var(--grad-vignette); }
.gb-hero__ramp  { position: absolute; inset: 0; background: var(--grad-protect-bottom); }
.gb-hero__in {
    position: relative; width: 100%;
    max-width: var(--container-max); margin: 0 auto;
    padding: 0 var(--gutter) clamp(56px, 9vw, 112px);
    display: grid; gap: var(--space-5); justify-items: center; text-align: center;
}
.gb-hero__eyebrow {
    font-family: var(--font-sans); font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent);
}
.gb-hero h1 {
    font-family: var(--font-serif-display); font-weight: var(--fw-regular);
    /* The system token floors at 3rem, which is 48px. "Настоящая" at 48px is
       302px wide and a 320px phone is 288px inside its padding, so the floor
       comes down. Only screens under about 690px are affected; tablet and
       desktop keep the token's own sizes exactly. */
    font-size: clamp(2.3rem, 6.6vw, 5.1rem); line-height: var(--lh-display);
    text-transform: uppercase; color: var(--text-display);
    text-shadow: 0 4px 40px rgba(0, 0, 0, .85);
}
.gb-hero__sub { font-family: var(--font-serif-accent); font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--gold-400); }
.gb-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
/* Grid and flex children default to min-width:auto, so a single unbreakable
   label - the club's email address, set on a button - sets a floor for the
   whole column and pushes the block wider than a small phone. These let the
   column shrink and the label wrap instead of the layout giving way. */
.gb-hero__in > *, .gb-cta__in > *, .gb-actions { min-width: 0; max-width: 100%; }
.gb-btn { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) {
    .gb-btn { padding: 14px var(--space-5); }
    /* Below this width two buttons side by side leave neither of them readable,
       so each takes the full row. */
    .gb-actions { width: 100%; }
    .gb-actions > .gb-btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------------- buttons */
.gb-btn {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: 15px var(--space-7);
    font-family: var(--font-sans); font-size: var(--fs-button); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-button); text-transform: uppercase;
    border-radius: var(--radius-1); border: var(--stroke-frame) solid transparent;
    cursor: pointer; transition: var(--transition-control);
}
/* Gold is metal, not yellow paint: a large flat fill is what makes it cheap. */
.gb-btn--primary {
    background: var(--grad-gold-foil); color: var(--action-primary-fg);
    box-shadow: var(--shadow-foil);
}
.gb-btn--primary:hover { filter: brightness(1.08); color: var(--action-primary-fg); }
.gb-btn--primary:active { transform: var(--press-control); filter: none; box-shadow: var(--shadow-foil-press); }
/* The secondary button sits over photographs. Lifting those photographs out
   of near-black dropped gold-on-image to 3.75:1, and the honest fix is to
   give the control its own ground rather than to darken the picture back
   down again. At 55% ink it clears 5.8:1 over the brightest patch of any
   photograph on the site, and it reads as a deliberate glass chip. */
.gb-btn--secondary {
    border-color: var(--action-secondary-border); color: var(--action-secondary-fg);
    background: rgba(7, 6, 5, .55);
}
.gb-btn--secondary:hover {
    border-color: var(--gold-500); color: var(--gold-300);
    /* the gold wash goes ON the ink ground, it does not replace it */
    background: linear-gradient(var(--gold-a12), var(--gold-a12)), rgba(7, 6, 5, .55);
}
.gb-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ trust bar */
.gb-trust {
    background: var(--grad-satin);
    border-block: var(--stroke-hair) solid var(--line-gold);
    padding-block: var(--space-5);
    text-align: center;
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent);
}

/* ---------------------------------------------------------------- about */
/* The photograph breaks the container on purpose and fades into the copy. */
.gb-about { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: stretch; }
.gb-about__copy {
    display: grid; align-content: center; gap: var(--space-5);
    padding: var(--section-y) clamp(24px, 5vw, 72px);
    justify-self: end; max-width: 560px; width: 100%;
}
.gb-about__media { position: relative; min-height: 520px; }
.gb-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-about__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--ink-900) 0%, rgba(7, 6, 5, .40) 18%, rgba(7, 6, 5, 0) 46%);
}
@media (max-width: 860px) {
    .gb-about { grid-template-columns: minmax(0, 1fr); }
    .gb-about__copy { justify-self: stretch; max-width: none; padding-inline: var(--gutter); }
    .gb-about__media { min-height: 300px; order: -1; }
    .gb-about__media::after { background: linear-gradient(180deg, rgba(7, 6, 5, .08) 0%, rgba(7, 6, 5, .55) 70%, var(--ink-900) 100%); }
}

/* ----------------------------------------------------------- rule tiles */
.gb-tiles { gap: var(--space-4); }
.gb-tile {
    display: grid; justify-items: center; gap: var(--space-4);
    padding: clamp(24px, 3vw, 40px) var(--space-4);
    background: var(--surface-card);
    border: var(--stroke-hair) solid var(--line-gold);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-panel);
    transition: var(--transition-panel);
}
.gb-tile:hover { border-color: var(--line-gold-strong); background: var(--surface-card-hover); transform: var(--lift-panel); box-shadow: var(--shadow-panel-lift); }
.gb-tile svg { width: 52px; height: 52px; color: var(--text-accent); }
.gb-tile__label {
    font-family: var(--font-serif-accent);
    /* "Конфиденциальность" is 18 characters. Fixed at 22px it is wider than a
       small phone; this reaches 22px at 408px and holds it from there up. */
    font-size: clamp(17px, 5.4vw, 22px); line-height: 1.15;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-display);
    text-align: center;
}

/* --------------------------------------------------------- velvet panel */
.gb-panel {
    background: var(--grad-velvet-lit);
    border: var(--stroke-hair) solid var(--line-gold);
    border-radius: var(--radius-2);
    padding: clamp(28px, 4vw, 56px);
    box-shadow: var(--shadow-panel);
    position: relative; overflow: hidden;
}
.gb-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--texture-grain); opacity: .05;
}
.gb-rules { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4) var(--space-7); margin: 0; padding: 0; list-style: none; }
.gb-rules li {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3);
    font: var(--type-body); color: var(--ivory-200);
}
.gb-rules svg { width: 18px; height: 18px; margin-top: 6px; color: var(--text-accent); }
.gb-rules strong { color: var(--gold-400); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------- steps */
/* An editorial numeral timeline: foil ordinal over a gold hairline, then the
   icon and the name. The hairlines read as a spine, so no connectors. */
.gb-steps { gap: var(--space-6); }
.gb-step { display: grid; gap: var(--space-3); align-content: start; }
/* Foil-filled ordinal. The transparent fill is applied only where the clip is
   actually supported: setting it unconditionally would erase the numerals
   entirely in any engine that ignores background-clip, which is the brand's own
   cardinal sin of hiding content behind a capability that may not arrive. */
.gb-step__n {
    font-family: var(--font-serif-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1;
    color: var(--gold-500);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .gb-step__n {
        background: var(--grad-gold-text);
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
    }
}
.gb-step__rule { height: 1px; background: var(--line-rule); }
.gb-step__head { display: flex; align-items: center; gap: var(--space-3); }
.gb-step__head svg { width: 22px; height: 22px; color: var(--text-accent); }
.gb-step__title {
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-display);
}
.gb-step p { font: var(--type-caption); color: var(--text-muted); }
.gb-facts {
    display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center;
    padding-top: var(--space-5); border-top: var(--stroke-hair) solid var(--line-hairline);
}
.gb-fact { display: flex; align-items: center; gap: var(--space-3); font: var(--type-caption); color: var(--text-muted); }
.gb-fact svg { width: 16px; height: 16px; color: var(--text-accent); }

/* --------------------------------------------------------------- joining */
.gb-join { display: grid; gap: var(--space-6); }
.gb-join__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.gb-join__n {
    font-family: var(--font-serif-display); font-size: 1.6rem; line-height: 1;
    color: var(--text-accent); min-width: 2ch;
}
.gb-join__b { font-family: var(--font-sans); font-weight: var(--fw-medium); color: var(--text-display); }

/* ------------------------------------------------------------ telegram */
.gb-tg {
    display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap;
    background: var(--surface-card);
    border: var(--stroke-hair) solid var(--line-gold);
    border-radius: var(--radius-2);
    padding: clamp(20px, 3vw, 32px);
}
.gb-tg img { width: 88px; height: 88px; border-radius: var(--radius-2); flex: 0 0 auto; }
.gb-tg__handle { font-family: var(--font-serif-accent); font-size: 1.3rem; color: var(--text-accent); letter-spacing: .04em; }

/* ------------------------------------------------------------------ cta */
.gb-cta { position: relative; padding-block: clamp(96px, 12vw, 180px); overflow: hidden; }
.gb-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-cta__scrim {
    position: absolute; inset: 0;
    /* The curtain photograph is the brightest of the three after the lift, and
   gold text over its brightest patches came out at 4.45:1, just under AA.
   A little more veil in the middle of the ramp fixes it and is invisible. */
    background: radial-gradient(120% 100% at 50% 50%, rgba(7, 6, 5, .10) 0%, rgba(7, 6, 5, .66) 70%, rgba(7, 6, 5, .88) 100%);
}
.gb-cta__in { position: relative; display: grid; gap: var(--space-6); justify-items: center; text-align: center; padding-inline: var(--gutter); }
.gb-cta h2 {
    font-family: var(--font-serif-display); font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
    text-shadow: 0 4px 40px rgba(0, 0, 0, .85);
}
.gb-ornament { display: flex; align-items: center; gap: var(--space-3); width: min(420px, 70vw); color: var(--gold-500); }
.gb-ornament::before, .gb-ornament::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-rule); }
.gb-mailto { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; font-family: var(--font-sans); font-size: var(--fs-body-s); letter-spacing: .04em; }
.gb-mailto svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- footer */
.gb-footer {
    border-top: var(--stroke-hair) solid var(--line-hairline);
    padding-block: var(--space-7); text-align: center;
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    /* --text-faint is 3.7:1 here, under AA for 11px */
    color: var(--text-muted);
}
.gb-footer a {
    /* An 11px line is a 12px-tall target. Padding gives it a real one
       without changing how the footer looks. */
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2);
    color: var(--text-accent);
}

/* --------------------------------------------------------------- reveal */
/* Fails open by design: content is visible with no inline opacity, and the
   animation only ever runs forward. If the observer never reports, nothing is
   hidden and nothing is lost. */
/* The system's own gb-reveal-rise animates opacity from 0, and its React
   component needs a setTimeout safety net so a frozen animation timeline cannot
   park the element on its invisible first keyframe. A static page has no such
   net, so this rise moves the element and never touches opacity: there is no
   state in which it can hide content, and no net is required. */
@keyframes gb-rise-only { from { transform: translateY(14px); } to { transform: none; } }
.gb-reveal { animation: gb-rise-only var(--dur-slow) var(--ease-out-soft) both; }
@media (prefers-reduced-motion: reduce) { .gb-reveal { animation: none; } }

.gb-stack { display: grid; gap: var(--space-6); }
.gb-center { justify-items: center; text-align: center; }

/* ----------------------------------------------------------- skip link */
/* Off-screen until focused, then a real gold chip at the top left. */
.skip-link {
    position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 12px var(--space-5);
    background: var(--gold-500); color: var(--ink-900);
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase;
}
.skip-link:focus {
    width: auto; height: auto; overflow: visible; clip-path: none; color: var(--ink-900);
}

/* ------------------------------------------------------ audience chooser */
/* Three doors, one glance. This is the first thing under the hero because the
   site serves three people who want completely different things from it. */
.gb-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-5); }
.gb-door {
    display: grid; align-content: start; gap: var(--space-4);
    padding: clamp(24px, 3vw, 40px);
    background: var(--surface-card);
    border: var(--stroke-hair) solid var(--line-gold);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-panel);
    transition: var(--transition-panel);
    color: inherit;
}
.gb-door:hover, .gb-door:focus-visible {
    border-color: var(--line-gold-strong); background: var(--surface-card-hover);
    transform: var(--lift-panel); box-shadow: var(--shadow-panel-lift); color: inherit;
}
.gb-door svg { width: 34px; height: 34px; color: var(--text-accent); }
.gb-door__t { font: var(--type-card-title); color: var(--text-display); }
.gb-door__b { font: var(--type-body); color: var(--text-muted); }
.gb-door__c {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-accent);
}
.gb-door__c svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ form */
.gb-form { display: grid; gap: var(--space-6); max-width: var(--container-narrow); }
.gb-field { display: grid; gap: var(--space-2); }
.gb-label {
    font-family: var(--font-sans); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-display);
}
/* was --text-faint at 3.72:1; these read (required) / (optional) and must be legible */
.gb-label span { color: var(--text-muted); letter-spacing: var(--ls-label); }
.gb-hint { font: var(--type-caption); color: var(--text-muted); }
.gb-input, .gb-textarea {
    width: 100%; min-height: 48px; padding: 12px var(--space-4);
    background: var(--surface-inset); color: var(--text-body);
    border: var(--stroke-frame) solid var(--line-soft); border-radius: var(--radius-1);
    font: var(--type-body); font-size: 16px; /* 16px stops iOS zooming the page on focus */
    transition: var(--transition-control);
}
.gb-textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.gb-input:hover, .gb-textarea:hover { border-color: var(--line-gold); }
.gb-input:focus, .gb-textarea:focus {
    outline: none; border-color: var(--gold-500); box-shadow: var(--glow-gold);
}
.gb-input[aria-invalid="true"], .gb-textarea[aria-invalid="true"] { border-color: var(--text-error); }
.gb-err {
    display: flex; align-items: center; gap: var(--space-2);
    /* crimson-400 is 3.36:1 on the page; the lighter tint is 5.17:1 and
       still unmistakably an error. Colour is never the only signal here:
       the field carries aria-invalid and the message carries an icon. */
    font: var(--type-caption); color: var(--text-error);
}
.gb-err svg { width: 15px; height: 15px; flex: 0 0 auto; }
.gb-choices { display: grid; gap: var(--space-2); }
.gb-choice, .gb-consent {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3);
    align-items: start; min-height: 44px; padding: 10px var(--space-3);
    border: var(--stroke-hair) solid transparent; border-radius: var(--radius-1);
    font: var(--type-body); color: var(--text-body); cursor: pointer;
}
.gb-choice:hover, .gb-consent:hover { border-color: var(--line-gold); background: var(--surface-card); }
.gb-choice input, .gb-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold-500); }
.gb-note { font: var(--type-caption); color: var(--text-muted); max-width: 62ch; }
.gb-result {
    border: var(--stroke-hair) solid var(--line-gold);
    border-radius: var(--radius-2); padding: clamp(24px, 4vw, 44px);
    background: var(--grad-velvet-lit);
    display: grid; gap: var(--space-4); justify-items: start;
}
.gb-result h2 { font: var(--type-card-title); }

/* --------------------------------------------------- long-word safety net */
/* Five languages share one layout, and Russian and Lithuanian both produce
   words no phone can fit. Sizing above handles today's copy; this makes sure
   tomorrow's copy cannot break the page either. */
h1, h2, h3, .gb-tile__label, .gb-join__b, .gb-step__t {
    /* "anywhere", not "break-word": only the former is counted when the browser
       works out a grid column's minimum width, and that is the number that was
       holding the column open. Hyphenation runs first where the browser has
       patterns for the page's language, so a break lands on a syllable. */
    overflow-wrap: anywhere; hyphens: auto;
}

/* Estonian "kuningannale" and Russian "Конфиденциальность" are simply long.
   Coming down one step on the narrowest phones lets them stay on one line
   instead of being hyphenated, which reads better in a display face. */
@media (max-width: 380px) {
    .gb-hero h1, .gb-cta h2 { font-size: clamp(2rem, 9.6vw, 2.4rem); }
}

/* ---------------------------------------------------------------- focus */
/* Only the skip link, the chooser doors and the form fields carried a focus
   style; every other link and button fell back to the browser's own ring,
   which is close to invisible on near-black. Someone navigating by keyboard
   has to be able to see where they are on every element, not most of them. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: var(--radius-1);
}
/* The fields already answer with a gold border and a glow, which reads as
   focus on its own; the ring would sit on top of that and only add noise. */

/* --------------------------------------------------------------- picture */
/* The photographs are served as webp with a jpeg fallback. The <img> inside
   is absolutely positioned against its section, so the wrapper must not
   introduce a box of its own. */
picture { display: contents; }

/* -------------------------------------------------------- breadcrumb crumb */
/* The queen and apply pages declare a BreadcrumbList, so the first crumb has to
   exist on the page as something a reader can see and follow. It is the eyebrow
   that was already there, now doing a second job. */
.gb-hero__eyebrow a, .gb-eyebrow a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-a40);
}
.gb-hero__eyebrow a:hover, .gb-eyebrow a:hover { border-bottom-color: var(--gold-500); }

/* ------------------------------------------------------- header action */
/* Between 420 and 900 pixels the section links are hidden and there is room
   for one action, so the header carries it. Below 420 there is not room for
   both the action and five language codes, and the language codes win: the
   hero's own button is one short scroll away in any case.
   The selector carries .gb-btn as well because the element is also a button,
   and at equal specificity whichever rule comes last would otherwise decide
   this by accident. */
/* Any button that sits in the header. It appears only where the header can
   actually hold it: the widest label plus the five language codes need 690px.
   Narrower than that it is hidden rather than allowed to wrap, because a
   sticky bar that grows to 341px is not a header any more, it is a wall. */
.gb-btn.gb-nav__action { display: none; }
@media (min-width: 690px) {
    .gb-btn.gb-nav__action {
        display: inline-flex; padding: 10px var(--space-4); white-space: nowrap;
        /* the reduced padding makes it shorter than a thumb; the floor stays */
        min-height: 44px; overflow-wrap: normal;
    }
}
/* On the landing the section links come back at 1060 and take the space, so
   the header action stands down there. The gift pages have no section links,
   so their button stays all the way up. */
@media (min-width: 1060px) {
    .gb-btn.gb-nav__cta { display: none; }
}

/* ------------------------------------------------------- form in flight */
/* The submit button while the application is on its way. Not [disabled],
   which would keep the button out of the POST body; this only has to look
   and behave as though it were. */
.gb-btn.is-sending {
    pointer-events: none; opacity: .55; cursor: default;
}