/* ============================================================
   OceanGoldRush — Vintage Maritime Stylesheet
   Concept: 1940-50s ocean-liner travel posters meets Saturday
   Evening Post illustration. Aged cream paper, navy ink,
   tomato-red signage, distressed brass. Slight offset-print
   misregistration on display type. Asymmetric composition.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Aged paper */
    --paper:         #F2E8CE;
    --paper-warm:    #ECDFB8;
    --paper-soft:    #F7EFD9;
    --paper-edge:    #D9C9A1;
    --paper-shade:   #C9B98C;

    /* Sea / ink */
    --navy:          #14304A;
    --navy-deep:     #0B1F33;
    --navy-mid:      #284A6B;
    --navy-soft:     #5C7796;
    --navy-pale:     #94A8BE;
    --teal:          #2C5A6B;
    --teal-mist:     #6E94A2;
    --teal-pale:     #B7CDD4;

    /* Tomato — sun, signage, heat */
    --tomato:        #C8362A;
    --tomato-deep:   #962317;
    --tomato-light:  #DA5544;
    --tomato-pale:   #E89084;

    /* Brass — distressed gold, oxidised */
    --brass:         #C9A14B;
    --brass-deep:    #8C6921;
    --brass-light:   #E2C57A;
    --brass-pale:    #F0DDA8;

    /* Ink mixes */
    --ink:           #14304A;
    --ink-soft:      #2E4769;
    --ink-faded:     #6F84A0;

    /* Typography */
    --font-display:  'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-deco:     'Cinzel', 'Times New Roman', serif;
    --font-script:   'Allura', 'Pacifico', cursive;
    --font-body:     'DM Sans', system-ui, sans-serif;
    --font-italic:   'Instrument Serif', 'Playfair Display', serif;

    /* Spacing */
    --gutter:        clamp(1.25rem, 4vw, 3rem);
    --section-pad:   clamp(4rem, 8vw, 7rem);

    /* Effects */
    --line:          1px solid rgba(20, 48, 74, 0.18);
    --line-strong:   1.5px solid rgba(20, 48, 74, 0.5);
    --line-tomato:   1.5px solid var(--tomato);
    --line-double:   3px double var(--navy);
    --shadow-card:   0 18px 40px -22px rgba(11, 31, 51, 0.35);
    --shadow-paper:  0 1px 0 var(--paper-edge), 0 22px 36px -24px rgba(11, 31, 51, 0.35);
    --shadow-tomato: 0 10px 28px -10px rgba(150, 35, 23, 0.45);
    --radius:        2px;

    /* Paper noise (cheap, inline SVG) */
    --paper-noise:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.13 0 0 0 0 0.21 0 0 0 0.08 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    background:
            radial-gradient(circle at 90% -10%, rgba(218, 85, 68, 0.16),  transparent 45%),
            radial-gradient(circle at 5%  110%, rgba(44, 90, 107, 0.14),  transparent 50%),
            linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 35%, var(--paper-warm) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--tomato); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--tomato-deep); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--tomato);
    margin: 0;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}
em {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--navy);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
p { margin: 0 0 1em; }
::selection { background: var(--tomato); color: var(--paper); }

/* Misregistration shadow — vintage offset-print effect */
.print-offset {
    position: relative;
    color: var(--tomato);
    text-shadow: 1.5px 1.5px 0 var(--navy);
}

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    padding: .5rem 1rem;
    background: var(--tomato); color: var(--paper);
    font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 9999; }

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    position: relative;
}

/* ============================================================
   DECORATIVE BACKGROUND LAYER
   ============================================================ */
.decor-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.decor-bg::after {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--paper-noise);
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    opacity: 0.45;
}
.decor-sun {
    position: absolute;
    top: -160px; right: -200px;
    width: clamp(360px, 42vw, 560px);
    height: clamp(360px, 42vw, 560px);
    opacity: 0.55;
    transform-origin: center;
    animation: decorSunSway 28s ease-in-out infinite;
    will-change: transform;
}
@keyframes decorSunSway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

.decor-waves {
    position: absolute;
    bottom: 8%; left: -5%;
    width: 50vw; max-width: 540px;
    opacity: 0.5;
}
.decor-waves svg { width: 100%; height: auto; }

.decor-star {
    position: absolute;
    color: var(--tomato);
    opacity: 0.6;
    animation: starTwinkle 7s ease-in-out infinite;
    will-change: opacity;
}
.decor-star--1 { top: 14%; left: 6%;   width: 18px; animation-delay: 0s; }
.decor-star--2 { top: 40%; right: 7%;  width: 14px; color: var(--brass); animation-delay: 1.4s; }
.decor-star--3 { top: 70%; left: 4%;   width: 12px; animation-delay: 3.2s; }
.decor-star--4 { top: 86%; right: 6%;  width: 16px; color: var(--brass); animation-delay: 4.8s; }
.decor-star svg { width: 100%; height: auto; }
@keyframes starTwinkle {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.8; }
}

@media (max-width: 720px) {
    .decor-sun  { width: 360px; height: 360px; top: -120px; right: -160px; }
    .decor-star { transform: scale(0.7); }
    .decor-waves { display: none; }
}

body > * { position: relative; z-index: 1; }

/* ============================================================
   TOP RIBBON (disclaimer)
   ============================================================ */
.ribbon {
    background: linear-gradient(180deg, var(--tomato) 0%, var(--tomato-deep) 100%);
    border-top: 1px solid var(--tomato-light);
    border-bottom: 2px solid var(--navy-deep);
    color: var(--paper-soft);
    font-family: var(--font-deco);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
}
.ribbon::before, .ribbon::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; width: 32px;
    background-image:
            radial-gradient(circle at 50% 50%, var(--paper) 3px, transparent 3.5px);
    background-size: 16px 16px;
    background-position: center;
    opacity: 0.75;
}
.ribbon::before { left: 0; }
.ribbon::after  { right: 0; }
.ribbon__track {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 2.25rem;
    padding: .55rem var(--gutter);
    position: relative; z-index: 1;
}
.ribbon__item {
    display: inline-flex; align-items: center; gap: .55rem;
    text-shadow: 0 1px 0 rgba(150, 35, 23, 0.7);
}
.ribbon__dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--paper);
}
.ribbon__badge {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    border: 1.5px solid var(--paper);
    border-radius: 50%;
    color: var(--paper);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0;
    line-height: 1;
}
@media (max-width: 640px) {
    .ribbon__track { gap: 1.25rem; font-size: 0.62rem; padding: .45rem var(--gutter); }
    .ribbon::before, .ribbon::after { display: none; }
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
    position: sticky; top: 0;
    z-index: 50;
    background:
            linear-gradient(180deg, rgba(247, 239, 217, 0.97), rgba(236, 223, 184, 0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--navy-deep);
}
.masthead::after {
    content: "";
    position: absolute;
    inset: auto 0 -6px 0;
    height: 4px;
    background:
            repeating-linear-gradient(
                    90deg,
                    var(--tomato) 0 18px,
                    var(--paper) 18px 22px,
                    var(--navy) 22px 40px,
                    var(--paper) 40px 44px
            );
    opacity: 0.85;
}
.masthead__inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 2rem;
    padding: .85rem var(--gutter);
    max-width: 1280px;
    margin: 0 auto;
}
.brand {
    display: inline-flex; align-items: center;
    gap: .85rem;
    color: var(--navy);
}
.brand__mark { display: inline-flex; }
.brand__words {
    display: flex; flex-direction: column;
    line-height: 1;
}
.brand__line1 {
    font-family: var(--font-script);
    font-size: 1.65rem;
    color: var(--tomato);
    letter-spacing: 0.005em;
    line-height: 0.9;
    transform: translateY(2px);
}
.brand__line2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.42em;
    color: var(--navy);
    margin-top: .1rem;
    text-transform: uppercase;
}

.nav {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.nav a {
    color: var(--navy);
    padding: .4rem 0;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    position: relative;
}
.nav a:hover { color: var(--tomato); }
.nav a[aria-current="page"] {
    color: var(--tomato);
    border-bottom-color: var(--tomato);
}

.balance {
    display: inline-flex; align-items: center;
    gap: .55rem;
    padding: .45rem .85rem .45rem .55rem;
    background: var(--navy);
    color: var(--paper-soft);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    position: relative;
    box-shadow: 2px 2px 0 var(--tomato);
}
.balance__icon {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
}
.balance__label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    color: var(--brass-light);
    text-transform: uppercase;
}
.balance__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--paper-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: transform .25s ease, color .25s ease;
}
.balance.is-pulse .balance__value {
    animation: balancePulse .55s ease;
    color: var(--brass-light);
}
@keyframes balancePulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center; align-items: center;
    gap: 4px;
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    color: var(--navy);
    background: transparent;
}
.nav-toggle span {
    display: block; width: 18px; height: 2px;
    background: var(--navy);
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem var(--gutter) 1.5rem;
    background: var(--paper-soft);
    border-top: 2px solid var(--navy);
    font-family: var(--font-display);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.nav-mobile a {
    padding: .85rem 0;
    color: var(--navy);
    border-bottom: 1px solid rgba(20, 48, 74, 0.18);
}

/* ============================================================
   GENERIC SECTION HELPERS
   ============================================================ */
.section-eyebrow {
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center; gap: .65rem;
    position: relative;
}
.section-eyebrow::before, .section-eyebrow::after {
    content: "";
    width: 32px; height: 1px;
    background: var(--navy);
    opacity: 0.4;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    margin-bottom: 1.25rem;
    line-height: 1.02;
    color: var(--tomato);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.section-title em {
    color: var(--navy);
    font-family: var(--font-italic);
    font-style: italic;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}
.section-lede {
    color: var(--ink);
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.7;
    font-family: var(--font-body);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .65rem;
    padding: .9rem 1.65rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    will-change: transform;
    position: relative;
}
.btn--lg { padding: 1.05rem 2.1rem; font-size: 0.9rem; }
.btn--sm { padding: .55rem 1rem;   font-size: 0.7rem;  }

.btn--primary, .btn--gold, .btn--brass {
    background: var(--tomato);
    color: var(--paper-soft);
    border-color: var(--tomato-deep);
    box-shadow: 4px 4px 0 var(--navy);
}
.btn--primary:hover, .btn--gold:hover, .btn--brass:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--navy);
    background: var(--tomato-light);
}
.btn--primary:active, .btn--gold:active, .btn--brass:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--navy);
}

.btn--ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
    box-shadow: 4px 4px 0 var(--tomato);
}
.btn--ghost:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tomato);
    background: var(--navy);
    color: var(--paper-soft);
}
.btn--ghost:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--tomato);
}

/* ============================================================
   HERO — vintage cruise poster
   ============================================================ */
.hero {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    isolation: isolate;
}
.hero__inner {
    max-width: 1280px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero__copy { position: relative; }

.hero__chapter {
    font-family: var(--font-deco);
    font-size: 0.78rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 1.25rem;
    display: inline-flex; align-items: center; gap: .85rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroIn .7s ease forwards .15s;
}
.hero__chapter::before {
    content: "";
    width: 36px; height: 1.5px;
    background: var(--navy);
}
.hero__chapter::after {
    content: "★";
    font-size: 0.85rem;
    color: var(--tomato);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 6rem);
    line-height: 0.92;
    letter-spacing: -0.015em;
    color: var(--tomato);
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.hero__title-line {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    animation: heroIn .8s cubic-bezier(.16, 1, .3, 1) forwards;
    text-shadow: 2px 2px 0 var(--navy);
}
.hero__title-line:nth-child(1) { animation-delay: .3s; }
.hero__title-line:nth-child(2) {
    animation-delay: .5s;
    font-family: var(--font-deco);
    font-weight: 400;
    color: var(--navy);
    text-shadow: none;
    font-size: 0.6em;
    letter-spacing: 0.32em;
    margin-top: .35em;
    text-transform: uppercase;
}
.hero__title-line:nth-child(2) em {
    font-family: var(--font-script);
    font-size: 1.55em;
    color: var(--tomato);
    letter-spacing: 0;
    line-height: 0.7;
    display: inline-block;
    transform: translateY(0.12em);
    margin: 0 .15em;
}
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}

.hero__sub {
    max-width: 520px;
    margin: 1.5rem 0 2rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
    opacity: 0;
    transform: translateY(20px);
    animation: heroIn .8s ease forwards .7s;
}
.hero__sub strong {
    color: var(--tomato);
    font-weight: 700;
    background: linear-gradient(transparent 60%, rgba(232, 197, 122, 0.5) 60%);
    padding: 0 .15em;
}

.hero__cta {
    display: flex; gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: heroIn .8s ease forwards .85s;
}

.hero__pills {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: 1.5rem;
    font-family: var(--font-deco);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0;
    animation: heroIn .8s ease forwards 1s;
}
.hero__pills li {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .35rem .7rem;
    background: var(--paper-soft);
    border: 1.5px solid var(--navy);
    border-radius: 1px;
    box-shadow: 2px 2px 0 var(--tomato);
}
.hero__pills li span { color: var(--tomato); font-size: 0.62rem; }

/* Hero illustration column — vintage liner postcard */
.hero__poster {
    position: relative;
    aspect-ratio: 1 / 1.05;
    background: var(--paper-soft);
    border: 2.5px solid var(--navy);
    box-shadow: 8px 8px 0 var(--tomato), 0 30px 60px -25px rgba(11, 31, 51, 0.45);
    padding: 14px;
    transform: rotate(2deg);
    opacity: 0;
    animation: heroPoster 1s cubic-bezier(.16, 1, .3, 1) forwards .4s;
}
.hero__poster::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--navy);
    pointer-events: none;
    opacity: 0.6;
}
.hero__poster-frame {
    position: relative;
    width: 100%; height: 100%;
    background:
            linear-gradient(180deg, #DEB877 0%, #E8C97A 35%, #D89F66 65%, #2C5A6B 65.1%, #14304A 100%);
    overflow: hidden;
}
.hero__poster-frame svg { width: 100%; height: 100%; }

.hero__poster-stamp {
    position: absolute;
    top: -22px; right: -22px;
    width: 110px; height: 110px;
    transform: rotate(8deg);
    z-index: 3;
}
.hero__poster-tag {
    position: absolute;
    bottom: 6%; left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    border: 2px solid var(--navy);
    padding: .35rem .85rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--navy);
    text-transform: uppercase;
    z-index: 3;
    white-space: nowrap;
}

@keyframes heroPoster {
    to { opacity: 1; transform: rotate(2deg); }
}
@keyframes heroPosterStart {
    from { opacity: 0; transform: rotate(-3deg) scale(0.92); }
}

@media (max-width: 880px) {
    .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero__poster { max-width: 440px; margin: 0 auto; transform: rotate(-1.5deg); }
}
@media (max-width: 640px) {
    .hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; }
    .hero__pills { gap: .6rem; }
}

/* ============================================================
   WAVE DIVIDER (between sections)
   ============================================================ */
.wave-divider {
    width: 100%;
    height: 28px;
    color: var(--navy);
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    opacity: 0.65;
}
.wave-divider svg { width: 200%; height: 100%; animation: waveDrift 30s linear infinite; }
@keyframes waveDrift { to { transform: translateX(-50%); } }

.deco-divider {
    display: flex; align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 auto;
    padding: 3rem var(--gutter);
    max-width: 1180px;
}
.deco-divider__line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--navy), transparent);
    max-width: 320px;
    opacity: 0.55;
}
.deco-divider__ornament {
    flex-shrink: 0;
    color: var(--tomato);
    width: 88px; height: 88px;
    display: grid; place-items: center;
    border: 2px solid var(--navy);
    border-radius: 50%;
    background: var(--paper-soft);
    box-shadow: 4px 4px 0 var(--navy);
    position: relative;
}
.deco-divider__ornament::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--navy);
    border-radius: 50%;
    opacity: 0.5;
}
.deco-divider__ornament svg { width: 56%; height: 56%; overflow: visible; }

/* ============================================================
   MANIFESTO — postcards / ticket stubs
   ============================================================ */
.manifesto {
    padding: var(--section-pad) 0 calc(var(--section-pad) * 0.6);
}
.manifesto__head {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: end;
    margin-bottom: 3rem;
}
.manifesto__head-side {
    text-align: right;
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--navy-soft);
    font-size: 0.95rem;
    line-height: 1.4;
}
.manifesto__head-side em {
    display: block;
    color: var(--tomato);
    font-size: 1.5rem;
    margin-top: .5rem;
    font-style: italic;
}

.manifesto__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.manifesto__card {
    position: relative;
    padding: 2rem 1.5rem 1.75rem;
    background: var(--paper-soft);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: 5px 5px 0 var(--tomato);
    transition: transform .35s ease, box-shadow .35s ease;
    text-align: left;
    overflow: hidden;
}
/* Perforated top edge */
.manifesto__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background-image: radial-gradient(circle at 8px 0, var(--paper) 4px, transparent 4.5px);
    background-size: 16px 8px;
    background-position: top;
    background-repeat: repeat-x;
}
.manifesto__card::after {
    content: attr(data-stamp);
    position: absolute;
    top: 14px; right: 14px;
    font-family: var(--font-deco);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--navy-soft);
    text-transform: uppercase;
    transform: rotate(8deg);
    opacity: 0.8;
}
.manifesto__card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--tomato);
}
.manifesto__icon {
    width: 56px; height: 56px;
    margin: .35rem 0 1rem;
    color: var(--tomato);
    transition: transform .4s ease;
}
.manifesto__icon svg { width: 100%; height: 100%; overflow: visible; }
.manifesto__card:hover .manifesto__icon { transform: rotate(-6deg) scale(1.05); }
.manifesto__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: var(--navy);
    margin-bottom: .5rem;
    display: inline-block;
    padding: .25rem .55rem;
    background: var(--brass-pale);
    border: 1px solid var(--navy);
    border-radius: 1px;
    text-transform: uppercase;
}
.manifesto__card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    margin: .25rem 0 .65rem;
    color: var(--tomato);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.manifesto__card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}

@media (max-width: 720px) {
    .manifesto__head { grid-template-columns: 1fr; }
    .manifesto__head-side { text-align: left; }
}

/* ============================================================
   SALONS / EXPEDITIONS — vintage destination posters
   ============================================================ */
.salons {
    padding: var(--section-pad) 0;
    position: relative;
}
.salons__head {
    margin-bottom: 3.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: start;
}
.salons__head-text { max-width: 600px; }
.salons__head-stamp {
    justify-self: end;
    width: 100px; height: 100px;
    color: var(--tomato);
    transform: rotate(-7deg);
    opacity: 0.85;
    margin-top: .25rem;
}

.salons__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 1024px) {
    .salons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .salons__grid { grid-template-columns: 1fr; }
}

.salon {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--paper-soft);
    border: 2.5px solid var(--navy);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--tomato);
    transition: transform .35s ease, box-shadow .35s ease;
}
.salon:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 var(--tomato);
}

.salon__poster {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
            linear-gradient(180deg, #E2C57A 0%, #DEB877 38%, #2C5A6B 38.1%, #14304A 100%);
    border-bottom: 2.5px solid var(--navy);
}
.salon__poster svg { width: 100%; height: 100%; }
.salon__poster-num {
    position: absolute;
    top: 8px; left: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--tomato);
    text-shadow: 1.5px 1.5px 0 var(--paper-soft);
    pointer-events: none;
    z-index: 2;
}
.salon__poster-stamp {
    position: absolute;
    bottom: 10px; right: 10px;
    font-family: var(--font-deco);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    color: var(--paper-soft);
    text-transform: uppercase;
    background: var(--navy);
    padding: .2rem .45rem;
    border: 1px solid var(--paper);
    z-index: 2;
}

.salon__body {
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: left;
}
.salon__kicker {
    font-family: var(--font-deco);
    font-size: 0.62rem;
    letter-spacing: 0.42em;
    color: var(--navy);
    text-transform: uppercase;
    display: block;
    margin-bottom: .65rem;
}
.salon__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    margin: 0 0 .25rem;
    color: var(--tomato);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.salon__tag {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--navy);
    font-size: 1rem;
    margin: 0 0 .65rem;
    line-height: 1.3;
}
.salon__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}
.salon__open {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tomato);
    transition: color .2s ease, gap .2s ease;
    display: inline-flex; align-items: center; gap: .5rem;
    border-bottom: 2px solid var(--tomato);
    padding-bottom: .15rem;
}
.salon:hover .salon__open { gap: .85rem; }

.salon__poster-ornament {
    transform-origin: center;
    transition: transform .55s ease;
}
.salon:hover .salon__poster-ornament { transform: rotate(8deg); }

.salon__spark {
    opacity: 0.4;
    animation: sparkBlink 5.5s ease-in-out infinite;
    will-change: opacity;
}
.salon__spark--1 { animation-delay: 0s; }
.salon__spark--2 { animation-delay: 1.4s; }
.salon__spark--3 { animation-delay: 2.8s; }
@keyframes sparkBlink {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.85; }
}

@media (max-width: 720px) {
    .salons__head { grid-template-columns: 1fr; }
    .salons__head-stamp { justify-self: start; transform: rotate(-5deg) scale(0.85); margin-top: 1rem; }
}

/* ============================================================
   VOYAGE / HOUSE STEPS — postage stamps
   ============================================================ */
.voyage {
    padding: var(--section-pad) 0;
    background:
            linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: var(--paper-soft);
    position: relative;
}
.voyage::before, .voyage::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 14px;
    background-image: radial-gradient(circle at 10px 7px, var(--paper) 6px, transparent 6.5px);
    background-size: 20px 14px;
    background-repeat: repeat-x;
}
.voyage::before { top: -7px; }
.voyage::after  { bottom: -7px; }

.voyage .section-eyebrow { color: var(--brass-light); }
.voyage .section-eyebrow::before, .voyage .section-eyebrow::after { background: var(--brass-light); }
.voyage .section-title { color: var(--paper-soft); }
.voyage .section-title em { color: var(--brass-light); }
.voyage .section-lede { color: var(--paper-soft); opacity: 0.85; }

.voyage__head { text-align: center; margin-bottom: 4rem; }
.voyage__head .section-lede { margin: 0 auto; }

.voyage__steps {
    list-style: none;
    margin: 0 auto; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 980px;
}
.voyage__step {
    position: relative;
    text-align: center;
    padding: 1rem;
}
.voyage__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 60px; right: -1.6rem;
    width: 2rem; height: 1.5px;
    background: linear-gradient(90deg, var(--brass-light), transparent);
    opacity: 0.6;
}
.voyage__step-mark {
    width: 130px; height: 130px;
    margin: 0 auto 1.5rem;
    position: relative;
    display: grid; place-items: center;
    background: var(--paper-soft);
    border: 2px dashed var(--brass-light);
    color: var(--navy);
    transform: rotate(-3deg);
    transition: transform .35s ease;
}
.voyage__step:hover .voyage__step-mark { transform: rotate(2deg) scale(1.04); }
.voyage__step-mark::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px solid var(--navy);
    pointer-events: none;
}
.voyage__step:nth-child(2) .voyage__step-mark { transform: rotate(2deg); }
.voyage__step:nth-child(3) .voyage__step-mark { transform: rotate(-1deg); }

.voyage__step-mark svg {
    width: 70%; height: 70%;
    overflow: visible;
}
.voyage__step-num {
    position: absolute;
    bottom: 6px; right: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tomato);
    z-index: 2;
    letter-spacing: 0.05em;
}
.voyage__step h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--paper-soft);
    margin: 0 0 .65rem;
    text-transform: uppercase;
    line-height: 1.1;
}
.voyage__step p {
    font-family: var(--font-body);
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--paper-soft);
    opacity: 0.8;
    margin: 0 auto;
    max-width: 270px;
}

@media (max-width: 800px) {
    .voyage__steps { grid-template-columns: 1fr; gap: 2rem; }
    .voyage__step:not(:last-child)::after { display: none; }
}

/* ============================================================
   VAULT — brass porthole + ship's manifest
   ============================================================ */
.vault {
    padding: var(--section-pad) 0;
}
.vault__inner {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 4rem;
    align-items: center;
}
.vault__door {
    position: relative;
    aspect-ratio: 1;
}
.vault__door svg { width: 100%; height: 100%; overflow: visible; }
.vault__door-rim {
    transform-origin: center;
    animation: vaultRim 120s linear infinite;
    will-change: transform;
}
@keyframes vaultRim { to { transform: rotate(360deg); } }
.vault__door-pulse {
    opacity: 0.7;
    transform-origin: 180px 180px;
    animation: vaultPulse 6s ease-in-out infinite;
    will-change: opacity, transform;
}
@keyframes vaultPulse {
    0%, 100% { opacity: 0.5;  transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.03); }
}
.vault__door-light {
    opacity: 0.35;
    transform-origin: 180px 180px;
    animation: vaultLightDrift 14s ease-in-out infinite;
    will-change: transform;
}
@keyframes vaultLightDrift {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

.vault__copy {
    max-width: 560px;
    background: var(--paper-soft);
    border: 2px solid var(--navy);
    box-shadow: 6px 6px 0 var(--tomato);
    padding: 2rem 2.25rem;
    position: relative;
}
.vault__copy::before {
    content: "MANIFEST · OGR-50000";
    position: absolute;
    top: -10px; left: 1.5rem;
    background: var(--paper-soft);
    padding: 0 .5rem;
    font-family: var(--font-deco);
    font-size: 0.65rem;
    letter-spacing: 0.32em;
    color: var(--tomato);
    text-transform: uppercase;
}
.vault__copy p { color: var(--ink); }
.vault__signoff {
    margin-top: 1.5rem;
    color: var(--tomato);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 1.1rem;
    border-top: 1px dashed var(--navy);
    padding-top: 1rem;
}

@media (max-width: 880px) {
    .vault__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: left;
        justify-items: center;
    }
    .vault__door { max-width: 320px; }
}

/* ============================================================
   TRUST + FOOTER (FLOOR)
   ============================================================ */
.trust {
    padding: 2.5rem var(--gutter);
    background: var(--paper-warm);
    border-top: 2px dashed var(--navy);
    border-bottom: 2px dashed var(--navy);
    text-align: center;
    position: relative;
}
.trust__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    text-align: left;
}
.trust__icon { color: var(--tomato); }
.trust__icon svg { width: 64px; height: 64px; }
.trust__text h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--tomato);
    margin: 0 0 .35rem;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.trust__text p {
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .trust__inner { grid-template-columns: 1fr; text-align: center; }
}

.floor {
    padding: 3.5rem var(--gutter) 0;
    background: var(--navy-deep);
    color: var(--paper-soft);
    position: relative;
}
.floor::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(
            90deg,
            var(--tomato) 0 18px,
            var(--paper) 18px 22px,
            var(--brass-light) 22px 40px,
            var(--paper) 40px 44px
    );
}
.floor__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
}
.floor__brand { }
.floor__wordmark {
    font-family: var(--font-script);
    font-size: 2.2rem;
    color: var(--tomato);
    line-height: 0.9;
    display: block;
}
.floor__amp { display: none; }
.floor__tag {
    font-family: var(--font-deco);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass-light);
    margin: .35rem 0 1.25rem;
    line-height: 1.5;
}
.floor__badge18 {
    display: inline-flex; align-items: center; gap: .85rem;
    padding: .55rem 1rem;
    background: var(--tomato);
    color: var(--paper-soft);
    border-radius: 1px;
    box-shadow: 3px 3px 0 var(--brass-light);
}
.floor__badge18 span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
}
.floor__badge18 small {
    font-family: var(--font-deco);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.05;
}

.floor__col h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass-light);
    margin: 0 0 1rem;
}
.floor__col ul { list-style: none; padding: 0; margin: 0; }
.floor__col li { margin-bottom: .35rem; }
.floor__col a {
    color: var(--paper-soft);
    line-height: 1.7;
    opacity: 0.85;
    font-size: 0.92rem;
}
.floor__col a:hover { color: var(--brass-light); opacity: 1; }
.floor__col address {
    font-style: normal;
    color: var(--paper-soft);
    line-height: 1.7;
    opacity: 0.85;
    font-size: 0.88rem;
}
.floor__col address strong { color: var(--brass-light); display: block; margin-bottom: .35rem; }
.floor__col address a { color: var(--brass-light); }

.floor__base {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 0;
    border-top: 1px dashed rgba(232, 197, 122, 0.3);
    display: flex; justify-content: space-between; align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--paper-soft);
    opacity: 0.8;
}
.floor__disclaimer {
    max-width: 720px;
    line-height: 1.6;
    margin: 0;
    font-size: 0.78rem;
}
.floor__disclaimer strong { color: var(--brass-light); font-weight: 700; }
.floor__disclaimer em { color: var(--paper-soft); }
.floor__copy { margin: 0; font-family: var(--font-deco); letter-spacing: 0.08em; font-size: 0.72rem; }

.floor__route {
    text-align: right;
    color: var(--brass-light);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
}

@media (max-width: 880px) {
    .floor__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
    .floor__inner { grid-template-columns: 1fr; }
    .floor__base { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 1rem; left: 50%;
    transform: translateX(-50%) translateY(120%);
    width: min(960px, calc(100% - 2rem));
    background: var(--paper-soft);
    border: 2.5px solid var(--navy);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    z-index: 100;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 6px 6px 0 var(--tomato);
}
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-banner__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
}
.cookie-banner__icon { color: var(--tomato); }
.cookie-banner__icon svg { width: 28px; height: 28px; }
.cookie-banner__text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink);
}
.cookie-banner__text a { color: var(--tomato); text-decoration: underline; }
.cookie-banner__actions { display: inline-flex; gap: .65rem; }

@media (max-width: 640px) {
    .cookie-banner__inner { grid-template-columns: 1fr; gap: .75rem; text-align: center; }
    .cookie-banner__actions { justify-content: center; }
}

/* ============================================================
   LEGAL PAGES — ship's manifest sheet
   ============================================================ */
.legal { padding: var(--section-pad) 0; }
.legal__inner {
    max-width: 760px;
    margin: 0 auto;
    background: var(--paper-soft);
    border: 2.5px solid var(--navy);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    position: relative;
    box-shadow: 8px 8px 0 var(--tomato);
}
.legal__inner::before {
    content: "OFFICIAL · MANIFEST";
    position: absolute;
    top: -12px; left: 2rem;
    background: var(--paper-soft);
    padding: 0 .65rem;
    font-family: var(--font-deco);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: var(--tomato);
    text-transform: uppercase;
}
.legal__inner h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    margin-bottom: .35rem;
    color: var(--tomato);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
}
.legal__updated {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--navy-soft);
    margin: 0 0 2rem;
    font-size: 0.95rem;
}
.legal__inner h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 2.25rem 0 .65rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0;
    display: flex; align-items: baseline; gap: .85rem;
}
.legal__num {
    color: var(--tomato);
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}
.legal__inner p, .legal__inner li {
    color: var(--ink);
    line-height: 1.75;
}
.legal__inner ul { padding-left: 1.25rem; }
.legal__inner a { color: var(--tomato); border-bottom: 1px dotted var(--tomato); }

/* ============================================================
   GAMES LOBBY
   ============================================================ */
.lobby { padding: var(--section-pad) 0; text-align: center; }
.lobby__head { margin-bottom: 3rem; }
.lobby__head .section-lede { margin: 0 auto; }
.lobby__balance {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: .75rem 1.5rem;
    background: var(--paper-soft);
    border: 2px solid var(--navy);
    box-shadow: 4px 4px 0 var(--tomato);
    margin-top: 1.5rem;
    position: relative;
}
.lobby__balance-label {
    font-family: var(--font-deco);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--navy);
}
.lobby__balance-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--tomato);
}
.lobby__reset {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 2px solid var(--navy);
    background: var(--paper-soft);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--tomato);
    transition: all .2s ease;
    margin-top: 1rem;
}
.lobby__reset:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--tomato);
    color: var(--tomato);
}

/* Games lobby grid */
.exp__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (max-width: 1024px) {
    .exp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .exp__grid { grid-template-columns: 1fr; }
}
.exp__card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--paper-soft);
    border: 2.5px solid var(--navy);
    box-shadow: 6px 6px 0 var(--tomato);
    overflow: hidden;
    color: var(--ink);
    text-align: left;
    transition: transform .35s ease, box-shadow .35s ease;
    transition-delay: var(--delay, 0ms);
}
.exp__card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 var(--tomato);
}
.exp__diorama {
    aspect-ratio: 4 / 3;
    background:
            linear-gradient(180deg, #E2C57A 0%, #DEB877 38%, #2C5A6B 38.1%, #14304A 100%);
    border-bottom: 2.5px solid var(--navy);
}
.exp__diorama svg { width: 100%; height: 100%; }
.exp__body { padding: 1.25rem 1.5rem 1.5rem; }
.exp__kicker {
    font-family: var(--font-deco);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: var(--navy);
    text-transform: uppercase;
    display: block;
    margin-bottom: .55rem;
}
.exp__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--tomato);
    margin: 0 0 .25rem;
    text-transform: uppercase;
    line-height: 1;
}
.exp__tag {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--navy);
    font-size: 1rem;
    margin: 0 0 .65rem;
}
.exp__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}
.exp__open {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tomato);
    border-bottom: 2px solid var(--tomato);
    padding-bottom: .15rem;
    display: inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-mobile.is-open { display: flex; }
    .masthead__inner { grid-template-columns: auto 1fr auto auto; gap: 1rem; }
}
@media (max-width: 640px) {
    .balance { padding: .4rem .65rem .4rem .4rem; }
    .balance__label { display: none; }
}

/* ============================================================
   REVEAL ON SCROLL — with safety fallback
   If JS / IntersectionObserver fails for any reason, the
   fallback animation forces visibility after 2.5s so the
   page is never blank below the fold.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
    animation: revealFallback 0s ease 2.5s forwards;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}
@keyframes revealFallback {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .vault__door-rim, .vault__door-light, .vault__door-pulse,
    .decor-sun, .decor-star, .salon__spark,
    .wave-divider svg {
        animation: none !important;
    }
    .salon:hover .salon__poster-ornament { transform: none !important; }
    .hero__title-line, .hero__chapter, .hero__sub, .hero__cta,
    .hero__pills, .hero__poster, .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hero__poster { transform: rotate(2deg) !important; }
}