/* ============================================================================
   COURSEUR — A modern heritage journal for classic motor cars
   Aesthetic: contemporary editorial · concours d'élégance precision
   Typography: Bricolage Grotesque (display) · Newsreader (body) · JetBrains Mono (caps)
   Palette: bone paper · charcoal ink · signal red · deep emerald · cream stone
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ----- Tokens --------------------------------------------------------------- */
:root {
    /* Surface — bone-white paper with stone elevations */
    --paper:        #F6F2EA;
    --paper-warm:   #ECE5D5;
    --paper-elev:   #FBF8F1;
    --stone:        #DCD3BE;

    /* Ink — old-typeset charcoal, never pure black */
    --ink:          #161410;
    --ink-soft:     #2B2823;
    --ink-muted:    #5C564B;
    --ink-faint:    #9A8F7B;

    /* Accents — signal red (primary), deep emerald (support), cognac (decorative) */
    --red:          #D62828;
    --red-deep:     #9F1818;
    --red-tint:     rgba(214, 40, 40, 0.08);

    --emerald:      #1B4332;
    --emerald-deep: #0F2A1F;

    --cognac:       #C7894A;

    /* Aliases */
    --accent:       var(--red);
    --accent-deep:  var(--red-deep);

    /* Rules */
    --rule:         #C8BEA7;
    --rule-strong:  #877C66;
    --rule-faint:   #DBD2BB;

    --shadow-sm:    0 1px 0 rgba(22, 20, 16, 0.06);
    --shadow:       0 12px 28px -16px rgba(22, 20, 16, 0.22), 0 2px 6px -3px rgba(22, 20, 16, 0.08);
    --shadow-lg:    0 32px 64px -28px rgba(22, 20, 16, 0.30), 0 4px 12px -4px rgba(22, 20, 16, 0.10);

    --font-display: "Bricolage Grotesque", "Söhne", "Inter Tight", system-ui, sans-serif;
    --font-body:    "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", monospace;
    --font-heading: var(--font-display);
    --font-caps:    "JetBrains Mono", monospace;

    /* Compatibility hooks */
    --color-bg-primary:    var(--paper);
    --color-bg-secondary:  var(--paper-warm);
    --color-bg-dark:       var(--ink);
    --color-text:          var(--ink);
    --color-text-secondary:var(--ink-soft);
    --color-text-muted:    var(--ink-muted);
    --color-text-light:    var(--ink-faint);
    --color-text-inverse:  var(--paper);
    --color-border:        var(--rule);
    --color-border-dark:   var(--rule-strong);
    --color-navy:          var(--ink);
    --color-gold:          var(--emerald);
    --color-primary:       var(--red);
    --color-accent:        var(--red);

    --section-padding: clamp(5rem, 8vw, 9rem);
    --container-width: 1280px;
    --nav-height: 80px;
    --container-pad: clamp(1.25rem, 4vw, 2.75rem);
    --gutter: clamp(1.25rem, 2.5vw, 2rem);

    /* Modern soft radii */
    --radius-sm:  3px;
    --radius-md:  6px;
    --radius-lg:  12px;
    --radius-xl:  20px;

    --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    220ms;
    --dur:         420ms;
    --dur-slow:    720ms;
    --transition-smooth: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "kern", "liga", "onum";
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
::selection { background: var(--red); color: var(--paper); }

/* ----- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.025em;
}
h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 0.95; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.1; }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.15; }

h1 em, h2 em { font-style: italic; color: var(--red); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }

p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1.1rem; font-size: 1.0625rem; }
small { font-size: 0.8125rem; }
a:hover { color: var(--red); }
hr { border: 0; border-top: 1px solid var(--ink); margin: 3rem 0; }

.cs-eyebrow, .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    padding: 0.35rem 0.65rem;
    background: rgba(214, 40, 40, 0.08);
    border: 1px solid rgba(214, 40, 40, 0.25);
    border-radius: 999px;
    margin-bottom: 1.5rem;
}
.cs-eyebrow::before, .eyebrow::before { content: "—"; color: var(--red); }

.cs-eyebrow--ink {
    color: var(--ink);
    background: var(--paper-warm);
    border-color: var(--ink);
}

.cs-eyebrow--green {
    color: var(--emerald);
    background: rgba(27, 67, 50, 0.06);
    border-color: rgba(27, 67, 50, 0.25);
}

.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-pad); }
.container--wide { max-width: 1440px; }
.container--narrow { max-width: 780px; }

/* ----- Navbar ------------------------------------------------------------- */
.cs-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 242, 234, 0.92);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--ink);
    transition: box-shadow var(--dur);
}
.cs-nav.is-scrolled { box-shadow: 0 8px 24px -16px rgba(22,20,16,0.18); }
.cs-nav__row {
    max-width: var(--container-width);
    margin-inline: auto;
    padding: 0 var(--container-pad);
    height: var(--nav-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}
.cs-nav__brand {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cs-nav__brand-mark {
    width: 32px; height: 32px;
    background: var(--red);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-caps);
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-sm);
}
.cs-nav__links { display: flex; justify-content: center; gap: 2rem; align-items: center; }
.cs-nav__link {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 0.4rem 0;
    position: relative;
    letter-spacing: -0.005em;
    transition: color var(--dur-fast);
}
.cs-nav__link:hover { color: var(--ink); }
.cs-nav__link.is-active { color: var(--red); }
.cs-nav__link.is-active::after {
    content: "";
    position: absolute; left: 50%; bottom: -3px;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    background: var(--red);
    border-radius: 50%;
}

.cs-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    background: var(--ink);
    color: var(--paper) !important;
    font-family: var(--font-caps);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.cs-nav__cta:hover { background: var(--red); color: var(--paper) !important; transform: translateY(-1px); }
.cs-nav__cta svg { width: 14px; height: 14px; }

.cs-burger { display: none; width: 32px; height: 32px; background: none; border: 0; padding: 0; cursor: pointer; }
.cs-burger span { display: block; height: 2px; background: var(--ink); margin: 7px auto; width: 100%; transition: transform 0.3s; }
.cs-burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.cs-burger.is-open span:nth-child(2) { opacity: 0; }
.cs-burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.cs-mobile-nav {
    position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
    background: var(--paper); z-index: 99;
    padding: 3rem var(--container-pad);
    transform: translateY(-130%); transition: transform 0.5s var(--ease-out);
    display: flex; flex-direction: column; gap: 1.5rem;
    border-bottom: 1px solid var(--ink);
    overflow-y: auto;
}
.cs-mobile-nav.is-open { transform: translateY(0); }
.cs-mobile-nav a { font-family: var(--font-display); font-size: 2.25rem; color: var(--ink); font-weight: 600; letter-spacing: -0.025em; }
.cs-mobile-nav a:hover { color: var(--red); }
.cs-mobile-nav__cta { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--ink); }

@media (max-width: 880px) {
    .cs-nav__row { grid-template-columns: 1fr auto; }
    .cs-nav__links, .cs-nav__cta { display: none; }
    .cs-burger { display: block; }
}

/* ----- Buttons ------------------------------------------------------------- */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.65rem;
    font-family: var(--font-caps);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    background: var(--paper);
    color: var(--ink) !important;
    transition: all var(--dur) var(--ease-out);
    white-space: nowrap;
}
.cs-btn--lg { padding: 1.1rem 2.1rem; font-size: 0.85rem; }
.cs-btn--sm { padding: 0.6rem 1.2rem; font-size: 0.72rem; }
.cs-btn--block { display: flex; width: 100%; }
.cs-btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast); }
.cs-btn:hover { background: var(--ink); color: var(--paper) !important; transform: translateY(-2px); }
.cs-btn:hover svg { transform: translateX(4px); }

.cs-btn--red { background: var(--red); border-color: var(--red); color: var(--paper) !important; }
.cs-btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-2px); }
.cs-btn--green { background: var(--emerald); border-color: var(--emerald); color: var(--paper) !important; }
.cs-btn--green:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); }
.cs-btn--ink { background: var(--ink); color: var(--paper) !important; }
.cs-btn--ink:hover { background: var(--red); border-color: var(--red); color: var(--paper) !important; }
.cs-btn--ghost { background: transparent; border-color: rgba(22,20,16,0.25); }
.cs-btn--ghost:hover { background: var(--ink); border-color: var(--ink); }
.cs-btn--light { background: transparent; color: var(--paper) !important; border-color: rgba(246,242,234,0.45); }
.cs-btn--light:hover { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); }

/* Legacy aliases — old .btn classes get the new styling */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.65rem;
    font-family: var(--font-caps);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    background: var(--paper);
    color: var(--ink) !important;
    transition: all var(--dur) var(--ease-out);
    white-space: nowrap;
}
.btn-lg { padding: 1.1rem 2.1rem; font-size: 0.85rem; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.72rem; }
.btn-block { display: flex; width: 100%; }
.btn svg, .btn-primary svg, .btn-outline-light svg { width: 14px; height: 14px; transition: transform var(--dur-fast); }
.btn:hover, .btn-outline:hover { background: var(--ink); color: var(--paper) !important; transform: translateY(-2px); }
.btn:hover svg, .btn-primary:hover svg, .btn-outline-light:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--paper) !important; }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper) !important; transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: var(--paper) !important; border-color: rgba(246,242,234,0.45); }
.btn-outline-light:hover { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); }
.btn-secondary { background: var(--ink); color: var(--paper) !important; }
.btn-secondary:hover { background: var(--red); border-color: var(--red); color: var(--paper) !important; }

/* ----- Forms --------------------------------------------------------------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .form-row, .form-row.three { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
label {
    color: var(--ink);
    font-family: var(--font-caps);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="password"], input[type="date"],
select, textarea {
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-md);
    color: var(--ink);
    padding: 0.95rem 1.1rem;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); font-style: italic; }
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.15);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) center, calc(100% - 0.7rem) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--red);
    width: 18px; height: 18px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.consent-group { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin-top: 1rem; }
.consent-group label {
    text-transform: none; letter-spacing: 0;
    font-size: 0.92rem; font-weight: 400;
    margin: 0; color: var(--ink-soft);
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-family: var(--font-body);
}
.consent-group a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.consent-group small { font-size: inherit; }
.form-note { color: var(--ink-muted); font-size: 0.875rem; text-align: center; margin: 1rem 0 0; font-style: italic; font-family: var(--font-body); }

/* ----- Reveal animations -------------------------------------------------- */
.reveal, .reveal-left, .reveal-right { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.revealed { opacity: 1; transform: none; }
.stagger-children > * { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.stagger-children.revealed > * { opacity: 1; transform: none; }
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 0.13s; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 0.21s; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 0.29s; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 0.37s; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 0.45s; }

/* ----- Cards (vehicle cards) --------------------------------------------- */
.cs-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--ink) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
    text-decoration: none !important;
    position: relative;
}
.cs-card:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: var(--shadow-lg); color: var(--ink) !important; }
.cs-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-warm); position: relative; }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); filter: contrast(0.98) saturate(0.95); }
.cs-card:hover .cs-card__media img { transform: scale(1.05); filter: contrast(1.02) saturate(1.05); }
.cs-card__lot {
    position: absolute; top: 1rem; left: 1rem;
    background: var(--paper);
    color: var(--ink);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-caps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
}
.cs-card__badge {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--red);
    color: var(--paper);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: var(--font-caps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cs-card__stamp {
    position: absolute; top: 1rem; right: 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: var(--font-caps);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cs-card__stamp--pending { background: var(--cognac); color: var(--ink); }
.cs-card__stamp--sold { background: var(--ink); color: var(--paper); }
.cs-card__body { padding: 1.5rem 1.65rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.cs-card__year { font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0; padding-bottom: 0.5rem; }
.cs-card__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); line-height: 1.05; margin: 0.25rem 0 0.85rem; font-weight: 600; letter-spacing: -0.018em; }
.cs-card__specs { color: var(--ink-soft); font-family: var(--font-body); font-size: 0.95rem; margin: 0 0 1.25rem; line-height: 1.55; font-style: italic; }
.cs-card__foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--rule); }
.cs-card__price { font-family: var(--font-display); color: var(--ink); font-size: 1.5rem; line-height: 1; margin: 0; font-weight: 700; letter-spacing: -0.025em; }
.cs-card__cta { font-family: var(--font-caps); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.35rem; transition: color var(--dur-fast), transform var(--dur-fast); }
.cs-card:hover .cs-card__cta { color: var(--red); transform: translateX(4px); }

/* ----- Sections / Footer (legacy elements) ------------------------------- */
section { padding-block: var(--section-padding); }

.cs-footer {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(4rem, 6vw, 5.5rem) var(--container-pad) 2rem;
    border-top: 4px solid var(--red);
}
.cs-footer__inner { max-width: var(--container-width); margin: 0 auto; }
.cs-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(246,242,234,0.18); }
@media (max-width: 880px) { .cs-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cs-footer__grid { grid-template-columns: 1fr; } }
.cs-footer__brand h3 { font-family: var(--font-display); font-size: 1.65rem; color: var(--paper); margin: 0 0 1rem; font-weight: 700; letter-spacing: -0.025em; }
.cs-footer__brand p { color: rgba(246,242,234,0.72); font-size: 1rem; line-height: 1.6; }
.cs-footer__col h4 { font-family: var(--font-caps); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cognac); margin: 0 0 1.25rem; font-weight: 700; }
.cs-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.cs-footer__col a { color: rgba(246,242,234,0.78); font-family: var(--font-body); font-size: 1rem; transition: color var(--dur-fast); }
.cs-footer__col a:hover { color: var(--red); }
.cs-footer__contact { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; padding: 0.5rem 0; align-items: start; color: rgba(246,242,234,0.78); font-size: 0.95rem; line-height: 1.55; }
.cs-footer__contact svg { width: 18px; height: 18px; color: var(--cognac); margin-top: 2px; }
.cs-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 1.5rem; gap: 1rem; color: rgba(246,242,234,0.45); font-family: var(--font-caps); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.cs-footer__bottom .cs-footer__legal { display: flex; gap: 1.5rem; }
.cs-footer__bottom .cs-footer__legal a { color: rgba(246,242,234,0.55); }
.cs-footer__bottom .cs-footer__legal a:hover { color: var(--red); }
.cs-footer__social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.cs-footer__social a { width: 36px; height: 36px; border: 1px solid rgba(246,242,234,0.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(246,242,234,0.78); transition: all var(--dur-fast); }
.cs-footer__social a:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.cs-footer__social svg { width: 16px; height: 16px; }

.back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--dur), transform var(--dur), background var(--dur); z-index: 90; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: var(--shadow); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--red); transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; }

/* ----- Page header (about / inventory / contact / sell / shipping / financing) -- */
.cs-page-head {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) var(--container-pad) clamp(3rem, 5vw, 4.5rem);
    background-color: var(--paper);
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--ink);
    overflow: hidden;
}
.cs-page-head__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,242,234,0.55), rgba(246,242,234,0.92) 70%, var(--paper)); z-index: 0; }
.cs-page-head__inner { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; text-align: center; }
.cs-page-head__crumb { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-caps); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.25rem; }
.cs-page-head__crumb a { color: var(--ink-muted); }
.cs-page-head__crumb a:hover { color: var(--red); }
.cs-page-head__title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.75rem); color: var(--ink); margin: 0.85rem 0 1rem; letter-spacing: -0.035em; line-height: 0.92; font-weight: 700; }
.cs-page-head__title em { font-style: italic; color: var(--red); font-family: var(--font-body); font-weight: 600; }
.cs-page-head__lead { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.65; max-width: 60ch; margin: 0 auto; font-style: italic; font-family: var(--font-body); }

/* Light section utilities */
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--paper); }
.section-dark p { color: rgba(246,242,234,0.72); }
.section-dark .cs-eyebrow { color: var(--cognac); background: rgba(199, 137, 74, 0.1); border-color: rgba(199, 137, 74, 0.3); }

/* Misc */
.text-center { text-align: center; }
.text-display { font-family: var(--font-display); }
.text-mono { font-family: var(--font-mono); }
.text-accent { color: var(--red); }
.dropcap::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 4.4em;
    float: left;
    line-height: 0.85;
    margin: 0.04em 0.12em 0 -0.04em;
    color: var(--red);
}