/* Sextant Vitality — Onyx & Brass landing page
   Brand: Meridian logo + Cormorant Garamond display + Spectral body
   Tone: calm, certain, understated. midlife-male aesthetic. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Spectral:wght@200;300;400;500&family=DM+Mono:wght@300;400;500&display=swap');

:root {
    --onyx: #0A0A0A;
    --onyx-deep: #060606;
    --brass: #C9A961;
    --brass-soft: #B89651;
    --brass-bright: #DFC07F;
    --brass-glow: rgba(201, 169, 97, 0.12);
    --ink: #E8E4D8;
    --ink-mute: #8A8478;
    --ink-dim: #4A4639;
    --surface: #11161F;
    --surface-2: #1A212D;
    --border: rgba(201, 169, 97, 0.10);
    --border-hover: rgba(201, 169, 97, 0.22);

    --band-top: #4A6FA5;
    --band-above: #5C8870;
    --band-typical: #8A8478;
    --band-below: #B88C5E;
    --band-warning: #A36B4F;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 300;
    background: var(--onyx);
    color: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Subtle paper-grain overlay so the dark surface doesn't feel flat */
body::before {
    content: '';
    position: fixed; inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 9999;
}

a { color: var(--brass); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--brass-bright); }

::selection { background: rgba(201, 169, 97, 0.28); color: var(--ink); }

/* ─── Typography ─── */

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.mono {
    font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

.serif-italic {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brass);
}

/* ─── Skip Link ─── */

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 1rem; top: 1rem; z-index: 10000;
    background: var(--brass); color: var(--onyx);
    padding: 0.5rem 1rem; border-radius: 6px;
}

/* ─── Navigation ─── */

.site-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    height: 68px;
    background: rgba(10, 10, 10, 0.78);
    backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: 1px solid var(--border);
}

.nav-logo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    display: flex; align-items: center; gap: 0.625rem;
}
.nav-logo:hover { color: var(--brass); }
.nav-logo svg { width: 22px; height: 22px; }
.nav-logo .nav-vitality {
    font-style: italic; color: var(--brass);
    font-weight: 400;
}

.nav-links {
    list-style: none; display: flex; gap: 2rem;
    align-items: center;
}
.nav-links a {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem; font-weight: 400;
    color: var(--ink-mute); letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.25s;
}
.nav-links a:hover { color: var(--ink); }

.nav-cta {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem; font-weight: 500;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--brass);
    color: var(--brass);
    border-radius: 4px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s;
}
.nav-cta:hover {
    background: var(--brass); color: var(--onyx);
}

/* ─── Hero ─── */

.hero {
    position: relative;
    min-height: 88vh;
    display: flex; align-items: center; justify-content: center;
    padding: 6rem 2rem;
    overflow: hidden;
}

.hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 35%, rgba(201, 169, 97, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 30% 70%, rgba(74, 111, 165, 0.025) 0%, transparent 60%);
}

.hero-grid {
    position: absolute; inset: 0; overflow: hidden; opacity: 0.035;
    background-image:
        linear-gradient(var(--brass) 1px, transparent 1px),
        linear-gradient(90deg, var(--brass) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 75%);
}

.hero-content {
    position: relative; z-index: 2;
    text-align: center;
    max-width: 760px;
}

.hero-mark {
    width: 180px; height: 180px;
    margin: 0 auto 3.5rem;
}
.hero-mark svg { width: 100%; height: 100%; }

/* Meridian logo animation: arc draws, center fades, star glows softly */
.meridian-arc {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: arc-draw 2.6s ease-out 0.2s forwards,
               arc-glow 6s ease-in-out 3s infinite;
}
.meridian-center {
    opacity: 0;
    animation: center-fade 1.2s ease-out 1.2s forwards,
               center-pulse 4s ease-in-out 3s infinite;
}
.meridian-star {
    opacity: 0;
    transform-origin: center;
    animation: star-rise 1.8s ease-out 1.8s forwards,
               star-glow 5s ease-in-out 4s infinite;
}
@keyframes arc-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes arc-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 6px rgba(201, 169, 97, 0.4)); }
}
@keyframes center-fade {
    to { opacity: 1; }
}
@keyframes center-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes star-rise {
    from { opacity: 0; transform: scale(0.6) rotate(-180deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes star-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 8px rgba(223, 192, 127, 0.5)); }
}

.hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 1.75rem;
}
.hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--brass);
}

.hero-tagline {
    font-family: 'Spectral', Georgia, serif;
    font-size: clamp(1.0625rem, 2vw, 1.3125rem);
    color: var(--ink-mute);
    max-width: 540px;
    margin: 0 auto 3rem;
    font-weight: 300;
    line-height: 1.6;
}

.hero-stats {
    display: flex; justify-content: center; gap: 3.5rem;
}
.hero-stat-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.875rem; font-weight: 400;
    color: var(--brass);
    line-height: 1;
}
.hero-stat-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 400;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 0.5rem;
}

/* ─── Meridian separator ─── */

.meridian-sep {
    width: 100%; height: 32px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.4;
}
.meridian-sep svg { height: 22px; opacity: 0.6; }

/* ─── Sections ─── */

.sect {
    padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 4vw, 3rem);
    position: relative;
}
.sect-inner { max-width: 1020px; margin: 0 auto; }

.sect-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 500;
    color: var(--brass);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}

.sect-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.sect-title em {
    font-style: italic;
    color: var(--brass);
}

.sect-sub {
    color: var(--ink-mute); font-weight: 300;
    font-size: 1.125rem;
    margin-bottom: 3.5rem;
    max-width: 580px;
    line-height: 1.65;
}

.sect-sub.center { text-align: center; margin-left: auto; margin-right: auto; }
.sect-title.center { text-align: center; }
.sect-label.center { text-align: center; }

/* ─── Score Bands ─── */

.band-strip {
    display: flex;
    border-radius: 10px; overflow: hidden;
    height: 84px;
    margin-top: 2rem;
    border: 1px solid var(--border);
}
.band-cell {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: transform 0.3s, filter 0.3s;
    cursor: default;
    position: relative;
}
.band-cell + .band-cell::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 1px; background: rgba(232, 228, 216, 0.08);
}
.band-cell:hover { filter: brightness(1.12); }
.band-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.125rem; font-weight: 500;
    color: var(--ink);
    line-height: 1;
}
.band-name {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 400;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

.band-top    { background: linear-gradient(180deg, rgba(74, 111, 165, 0.18), rgba(74, 111, 165, 0.06)); }
.band-above  { background: linear-gradient(180deg, rgba(92, 136, 112, 0.18), rgba(92, 136, 112, 0.06)); }
.band-typ    { background: linear-gradient(180deg, rgba(138, 132, 120, 0.18), rgba(138, 132, 120, 0.06)); }
.band-below  { background: linear-gradient(180deg, rgba(184, 140, 94, 0.18), rgba(184, 140, 94, 0.06)); }
.band-warn   { background: linear-gradient(180deg, rgba(163, 107, 79, 0.18), rgba(163, 107, 79, 0.06)); }

.band-top .band-val   { color: #6E94C7; }
.band-above .band-val { color: #80AB95; }
.band-typ .band-val   { color: #B0AA9D; }
.band-below .band-val { color: #D5AB80; }
.band-warn .band-val  { color: #C58B70; }

/* ─── Steps ─── */

.steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
.step-card {
    background: var(--onyx);
    padding: 2.25rem 1.75rem;
    position: relative;
    transition: background 0.35s;
}
.step-card:hover { background: var(--surface); }
.step-num {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 500;
    color: var(--brass);
    letter-spacing: 0.14em;
    margin-bottom: 1.25rem;
}
.step-card h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem; font-weight: 400;
    margin-bottom: 0.5rem;
    letter-spacing: 0.005em;
}
.step-card p {
    font-size: 0.875rem; color: var(--ink-mute);
    font-weight: 300; line-height: 1.65;
}

/* ─── Features ─── */

.feat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.feat {
    padding: 1.75rem 1.5rem;
    background: var(--onyx);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.35s, transform 0.35s;
}
.feat:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.feat-badge {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 0.5625rem; font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.feat-badge--free     { background: var(--brass-glow); color: var(--brass); border: 1px solid rgba(201, 169, 97, 0.2); }
.feat-badge--premium  { background: rgba(92, 136, 112, 0.10); color: #80AB95; border: 1px solid rgba(92, 136, 112, 0.2); }
.feat-badge--lifetime { background: rgba(74, 111, 165, 0.10); color: #6E94C7; border: 1px solid rgba(74, 111, 165, 0.2); }

.feat h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.125rem; font-weight: 400;
    margin-bottom: 0.375rem;
}
.feat p { font-size: 0.875rem; color: var(--ink-mute); font-weight: 300; line-height: 1.65; }

/* ─── Pricing ─── */

.price-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
.price-col {
    background: var(--onyx);
    padding: 2.75rem 2rem;
    text-align: center;
    position: relative;
}
.price-col--feat {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.05) 0%, var(--onyx) 100%);
}
.price-col--feat::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.price-tier {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 500;
    color: var(--brass);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}
.price-amount {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem; font-weight: 400;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.375rem;
}
.price-period {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem; color: var(--ink-mute);
    margin-bottom: 2.25rem;
    letter-spacing: 0.04em;
}
.price-list {
    list-style: none; text-align: left;
    font-size: 0.875rem;
    color: var(--ink-mute);
}
.price-list li {
    padding: 0.5rem 0;
    display: flex; align-items: flex-start; gap: 0.625rem;
    line-height: 1.5;
}
.price-list li::before {
    content: ''; display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--brass);
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.price-list li.muted { color: var(--ink-dim); font-size: 0.75rem; }
.price-list li.muted::before { background: var(--ink-dim); }

/* ─── CTA ─── */

.cta-block {
    text-align: center;
    padding: 5.5rem 2rem 7rem;
    position: relative;
}
.cta-block::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 60% at 50% 80%, rgba(201, 169, 97, 0.07) 0%, transparent 70%);
}
.cta-block h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 3.4vw, 2.875rem);
    font-weight: 300; margin-bottom: 1.125rem;
    position: relative;
    letter-spacing: -0.005em;
}
.cta-block h2 em { font-style: italic; color: var(--brass); }
.cta-block p {
    color: var(--ink-mute); margin-bottom: 2.25rem; position: relative;
    font-size: 1.0625rem;
}
.cta-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.8125rem; font-weight: 500;
    padding: 0.95rem 2.25rem;
    background: var(--brass); color: var(--onyx);
    border: none; border-radius: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
}
.cta-btn:hover {
    background: var(--brass-bright);
    transform: translateY(-1px);
    color: var(--onyx);
    box-shadow: 0 8px 32px rgba(201, 169, 97, 0.18);
}
.cta-btn--ghost {
    background: transparent; color: var(--ink);
    border: 1px solid var(--brass);
}
.cta-btn--ghost:hover { background: var(--brass-glow); color: var(--brass); }

/* ─── Footer ─── */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem; color: var(--ink-mute);
    letter-spacing: 0.04em;
}
.footer-links { display: flex; gap: 2rem; list-style: none; }
.footer-links a {
    color: var(--ink-mute); font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.footer-links a:hover { color: var(--ink); }

/* ─── Subpages ─── */

.page-header {
    padding: 4.5rem 2rem 2.25rem;
    text-align: center;
    position: relative;
}
.page-header::after {
    content: '';
    position: absolute; bottom: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
}
.page-header h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    font-weight: 300;
    margin-bottom: 0.625rem;
    letter-spacing: -0.005em;
}
.page-header .updated {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}
.page-body h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.375rem; font-weight: 400;
    margin-top: 3rem; margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    letter-spacing: -0.005em;
}
.page-body p {
    margin-bottom: 1rem;
    color: var(--ink-mute);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
}
.page-body ul { padding-left: 0; margin-bottom: 1rem; }
.page-body li {
    margin-bottom: 0.5rem; color: var(--ink-mute);
    font-weight: 300; list-style: none;
    padding-left: 1.125rem; position: relative;
    line-height: 1.65;
}
.page-body li::before {
    content: ''; position: absolute; left: 0; top: 0.65em;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brass);
}
.page-body strong { color: var(--ink); font-weight: 500; }
.page-body code {
    font-family: 'DM Mono', monospace;
    font-size: 0.8125rem;
    color: var(--brass-bright);
    background: var(--brass-glow);
    padding: 0.125rem 0.4rem;
    border-radius: 3px;
}

.callout {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.07), rgba(201, 169, 97, 0.02));
    border-left: 2px solid var(--brass);
    padding: 1.375rem 1.625rem;
    border-radius: 0 8px 8px 0;
    margin: 2.25rem 0;
    font-weight: 300;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* FAQ accordion */

.faq-section { margin-top: 3rem; }
.faq-section h2 {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 500;
    color: var(--brass);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: none;
}
.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 1.375rem 0;
}
.faq-item summary {
    cursor: pointer;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400; font-size: 1.0625rem;
    color: var(--ink);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
}
.faq-item summary::after {
    content: '+';
    font-family: 'DM Mono', monospace;
    font-size: 1.125rem; color: var(--brass);
    transition: transform 0.25s;
    line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    color: var(--ink-mute);
}

/* Contact form */

.contact-form { margin-top: 2.25rem; }
.form-group { margin-bottom: 1.625rem; }
.form-label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem; font-weight: 500;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%; padding: 0.95rem 1rem;
    background: var(--onyx);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Spectral', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 300;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--brass-glow);
}
.form-textarea { min-height: 170px; resize: vertical; line-height: 1.65; }
.form-select { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23C9A961' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
.form-submit {
    width: 100%; padding: 0.95rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.8125rem; font-weight: 500;
    background: var(--brass); color: var(--onyx);
    border: none; border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s;
}
.form-submit:hover { background: var(--brass-bright); }
.form-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.form-status { margin-top: 0.875rem; font-size: 0.875rem; }
.form-status--ok { color: #80AB95; }
.form-status--err { color: #C58B70; }

.info-card {
    background: var(--onyx);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.375rem 1.625rem;
    margin-top: 1.625rem;
}
.info-card h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.0625rem; font-weight: 400;
    margin-bottom: 0.5rem;
}
.info-card p {
    font-size: 0.875rem; margin-bottom: 0;
    color: var(--ink-mute); line-height: 1.65;
}

/* ─── Fade-in animations ─── */

.fade-up {
    opacity: 0; transform: translateY(24px);
    animation: fade-up 0.85s ease forwards;
}
@keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero { min-height: 70vh; padding: 4rem 1.5rem; }
    .hero-stats { gap: 2rem; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .feat-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .band-strip { flex-direction: column; height: auto; }
    .band-cell { padding: 0.875rem; }
    .band-cell + .band-cell::before { display: none; }
    .site-footer { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 480px) {
    .hero-mark { width: 132px; height: 132px; margin-bottom: 2.5rem; }
    .hero-stats { flex-direction: column; gap: 1.5rem; }
    .steps-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   EDITORIAL REDESIGN — Vintage instrument × refined editorial.
   Used by index.html only. Sub-pages keep the simpler layout above.
   ──────────────────────────────────────────────────────────────────── */

:root {
    --rule: rgba(201, 169, 97, 0.18);
    --rule-faint: rgba(201, 169, 97, 0.08);
    --rule-strong: rgba(201, 169, 97, 0.35);
    --paper-warm: #14110C;       /* warm tinted dark for editorial cards */
    --gutter: clamp(1.5rem, 4vw, 3rem);
}

/* OpenType helpers */
.oldstyle  { font-variant-numeric: oldstyle-nums proportional-nums;
             font-feature-settings: "onum" 1, "pnum" 1; }
.lining    { font-variant-numeric: lining-nums tabular-nums;
             font-feature-settings: "lnum" 1, "tnum" 1; }
.smallcaps { font-variant-caps: all-small-caps;
             font-feature-settings: "smcp" 1, "c2sc" 1;
             letter-spacing: 0.18em; }

/* ─── Coordinate corner stamps (decorative marginalia) ─── */

.coord-stamp {
    position: absolute;
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    color: var(--ink-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}
.coord-stamp .dot {
    display: inline-block;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--brass);
    margin: 0 0.4rem;
    transform: translateY(-2px);
}

/* ─── Sextant scale divider (60° arc with degree marks) ─── */

.sextant-rule {
    width: 100%;
    padding: 1.75rem 0 0;
    overflow: hidden;
}
.sextant-rule svg {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: block;
    opacity: 0.55;
}
.sextant-rule .deg-tick { stroke: var(--brass); stroke-width: 0.7; }
.sextant-rule .deg-tick-major { stroke: var(--brass); stroke-width: 1; }
.sextant-rule .deg-arc { stroke: var(--brass); stroke-width: 0.6; fill: none; }
.sextant-rule .deg-text {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    fill: var(--brass);
    letter-spacing: 0.05em;
}

/* ─── Editorial Hero — asymmetric 12-column ─── */

.editorial-hero {
    position: relative;
    min-height: 92vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding: 4rem var(--gutter) 0;
    overflow: hidden;
}

.editorial-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 75% 35%, rgba(201, 169, 97, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 30% 25% at 20% 70%, rgba(74, 111, 165, 0.025) 0%, transparent 60%);
    pointer-events: none;
}

/* Constellation dot field */
.editorial-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, var(--brass) 0.6px, transparent 1px),
        radial-gradient(circle at 87% 25%, var(--brass) 0.7px, transparent 1px),
        radial-gradient(circle at 65% 70%, var(--brass) 0.5px, transparent 1px),
        radial-gradient(circle at 30% 85%, var(--brass) 0.6px, transparent 1px),
        radial-gradient(circle at 92% 80%, var(--brass) 0.5px, transparent 1px),
        radial-gradient(circle at 8% 55%, var(--brass) 0.5px, transparent 1px);
    opacity: 0.35;
    pointer-events: none;
}

.hero-corner-tl { top: 1.25rem; left: var(--gutter); }
.hero-corner-tr { top: 1.25rem; right: var(--gutter); }
.hero-corner-bl { bottom: 1.25rem; left: var(--gutter); }
.hero-corner-br { bottom: 1.25rem; right: var(--gutter); }

/* Vertical brand stamp */
.hero-stamp {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    align-self: center;
    z-index: 2;
    position: relative;
}
.hero-stamp-inner {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    color: var(--ink-dim);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.5rem 0;
}
.hero-stamp-inner span {
    color: var(--brass);
    margin: 0 0.4em;
}

/* Hero text block */
.hero-textblock {
    grid-column: 2 / span 7;
    grid-row: 2 / span 1;
    align-self: center;
    z-index: 2;
    position: relative;
    padding: 2rem 1rem 2rem 0;
}

.hero-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px; height: 1px;
    background: var(--brass);
}

.hero-display {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 2rem;
}
.hero-display em {
    font-style: italic;
    font-weight: 400;
    color: var(--brass);
}
.hero-display .ampersand {
    font-style: italic;
    font-weight: 300;
    color: var(--brass);
    margin: 0 0.05em;
}

.hero-lede {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--ink-mute);
    max-width: 480px;
    margin-bottom: 2.5rem;
}
.hero-lede em {
    font-style: italic;
    color: var(--brass);
}

.hero-byline {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--ink-dim);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.hero-byline .sep {
    width: 14px; height: 1px; background: var(--rule);
}
.hero-byline strong {
    color: var(--brass);
    font-weight: 500;
}

/* Hero instrument panel — large meridian + sextant scale */
.hero-instrument {
    grid-column: 9 / span 4;
    grid-row: 2 / span 1;
    align-self: center;
    position: relative;
    z-index: 2;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    width: 100%;
    margin-left: auto;
}
.hero-instrument svg { width: 100%; height: 100%; }

/* Concentric latitude rings */
.lat-ring { fill: none; stroke: var(--brass); stroke-opacity: 0.18; stroke-width: 0.8; }
.lat-ring--solid { stroke-opacity: 0.5; stroke-width: 1; }

/* Sextant arc with degree ticks (large, in instrument panel) */
.instrument-arc {
    fill: none; stroke: var(--brass); stroke-width: 1.5;
    stroke-dasharray: 800; stroke-dashoffset: 800;
    animation: arc-trace 3.4s ease-out 0.4s forwards;
}
@keyframes arc-trace { to { stroke-dashoffset: 0; } }

.instrument-tick {
    stroke: var(--brass); stroke-width: 1;
    opacity: 0;
    animation: tick-fade 0.5s ease-out forwards;
}
.instrument-tick-major {
    stroke: var(--brass); stroke-width: 1.5;
    opacity: 0;
    animation: tick-fade 0.5s ease-out forwards;
}
@keyframes tick-fade { to { opacity: 0.9; } }

.instrument-label {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    fill: var(--brass);
    opacity: 0;
    animation: tick-fade 0.5s ease-out forwards;
}

.instrument-star {
    fill: var(--brass);
    opacity: 0;
    transform-origin: 200px 80px;
    animation: star-rise-2 1.6s ease-out 2s forwards,
               subtle-pulse 6s ease-in-out 4s infinite;
}
@keyframes star-rise-2 {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes subtle-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 6px rgba(223, 192, 127, 0.4)); }
}

.instrument-center {
    fill: var(--brass);
    opacity: 0;
    animation: center-fade-2 1.2s ease-out 1.6s forwards;
}
@keyframes center-fade-2 { to { opacity: 1; } }

.instrument-sight {
    stroke: var(--brass); stroke-width: 0.6;
    opacity: 0;
    animation: tick-fade 0.5s ease-out 2.4s forwards;
}

/* Bottom log — coordinate-style stat cluster */
.hero-log {
    grid-column: 1 / -1;
    grid-row: 3 / span 1;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-faint);
    margin-top: 3rem;
    padding: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    z-index: 2;
    position: relative;
}
.hero-log-cell {
    padding: 0 1.5rem;
    position: relative;
}
.hero-log-cell + .hero-log-cell::before {
    content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
    width: 1px; background: var(--rule-faint);
}
.hero-log-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.625rem;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}
.hero-log-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-feature-settings: "onum" 1;
}
.hero-log-value em {
    font-style: italic;
    color: var(--brass);
    font-size: 0.75em;
    margin-left: 0.2em;
}

/* ─── Editorial sections ─── */

.ed-sect {
    padding: clamp(5rem, 9vw, 8rem) var(--gutter);
    position: relative;
}

.ed-section-num {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.ed-section-num::before {
    content: '';
    display: block;
    width: 28px; height: 1px;
    background: var(--brass);
}
.ed-section-num .roman {
    color: var(--ink-mute);
    font-style: italic;
}

/* "The Bearing" section — score bands as horizon strata */
.bearing-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 800px) {
    .bearing-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.bearing-text h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
    color: var(--ink);
}
.bearing-text h2 em { font-style: italic; color: var(--brass); }

.bearing-text p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-mute);
    margin-bottom: 1.25rem;
    max-width: 480px;
}

.bearing-text .pullquote {
    border-left: 1px solid var(--brass);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--ink);
    line-height: 1.55;
}
.bearing-text .pullquote cite {
    display: block;
    font-style: normal;
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--ink-dim);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.875rem;
}

/* Vertical altitude scale — inversion of horizontal band strip */
.altitude-scale {
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--onyx) 100%);
}
.altitude-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--rule-faint);
    transition: background 0.4s;
}
.altitude-row:last-child { border-bottom: none; }
.altitude-row:hover { background: rgba(201, 169, 97, 0.04); }

.altitude-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--brass);
    font-variant-numeric: oldstyle-nums;
}
.altitude-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.altitude-name small {
    display: block;
    font-family: 'Spectral', Georgia, serif;
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--ink-mute);
    margin-top: 0.125rem;
    letter-spacing: 0;
    font-weight: 300;
}
.altitude-marker {
    width: 8px; height: 8px; border-radius: 50%;
}

/* "The Method" — numbered editorial steps */
.method-stack {
    max-width: 880px;
    margin: 0 auto;
}
.method-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: clamp(1rem, 4vw, 3rem);
    padding: 2.25rem 0;
    border-top: 1px solid var(--rule-faint);
    align-items: baseline;
}
.method-row:last-child { border-bottom: 1px solid var(--rule-faint); }
@media (max-width: 600px) {
    .method-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

.method-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    color: var(--brass);
    line-height: 1;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: -0.01em;
}
.method-num::before {
    content: 'No. ';
    font-family: 'DM Mono', monospace;
    font-style: normal;
    font-size: 0.65rem;
    color: var(--ink-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.method-content h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    color: var(--ink);
}
.method-content h3 em { font-style: italic; color: var(--brass); }

.method-content p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-mute);
    max-width: 580px;
}

/* "Aboard" — features as ledger */
.ledger {
    max-width: 1080px;
    margin: 3rem auto 0;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    background: var(--paper-warm);
}
.ledger-row {
    display: grid;
    grid-template-columns: 1.5fr 0.75fr 1fr;
    border-bottom: 1px solid var(--rule-faint);
    transition: background 0.3s;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row--head {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.05) 0%, transparent 100%);
}
.ledger-row:not(.ledger-row--head):hover { background: rgba(201, 169, 97, 0.025); }

.ledger-cell {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--rule-faint);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ledger-cell:last-child { border-right: none; }

.ledger-feature {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--ink);
}
.ledger-feature small {
    display: block;
    font-family: 'Spectral', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--ink-dim);
    margin-top: 0.25rem;
    letter-spacing: 0;
}

.ledger-tier {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ledger-mark {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
}
.ledger-mark--yes  { color: var(--brass); }
.ledger-mark--no   { color: var(--ink-dim); }
.ledger-mark--limit { color: var(--ink-mute); font-size: 0.875rem; font-style: normal; font-family: 'DM Mono', monospace; letter-spacing: 0.06em; }

@media (max-width: 700px) {
    .ledger-row { grid-template-columns: 1fr 0.5fr 0.5fr; }
    .ledger-cell { padding: 0.875rem 0.875rem; }
    .ledger-tier { font-size: 0.6rem; letter-spacing: 0.12em; }
    .ledger-feature { font-size: 0.9375rem; }
    .ledger-feature small { font-size: 0.7rem; }
}

/* "The Tiers" — refined pricing */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    max-width: 1080px;
    margin: 3rem auto 0;
}
@media (max-width: 800px) {
    .tier-grid { grid-template-columns: 1fr; }
}

.tier-col {
    background: var(--onyx);
    padding: 2.75rem 2rem 2.25rem;
    text-align: left;
    position: relative;
    transition: background 0.4s;
}
.tier-col:hover { background: var(--paper-warm); }

.tier-col--feature {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.07) 0%, var(--onyx) 60%);
}
.tier-col--feature::after {
    content: 'Recommended';
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.5625rem;
    color: var(--brass);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--brass);
    border-radius: 3px;
}

.tier-col--founder::after {
    content: 'Founder · 2026 only';
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.5625rem;
    color: var(--brass-bright);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(223, 192, 127, 0.4);
    border-radius: 3px;
}

.tier-name {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.tier-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: oldstyle-nums;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}
.tier-price small {
    font-family: 'DM Mono', monospace;
    font-size: 0.8rem;
    color: var(--ink-mute);
    font-weight: 400;
    letter-spacing: 0.06em;
    margin-left: 0.5em;
    vertical-align: 0.4em;
}
.tier-price em {
    font-style: italic;
    color: var(--brass);
}

.tier-period {
    font-family: 'Spectral', Georgia, serif;
    font-style: italic;
    font-size: 0.875rem;
    color: var(--ink-mute);
    margin-bottom: 2.25rem;
    line-height: 1.4;
}

.tier-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--rule-faint);
    padding-top: 1.5rem;
}
.tier-list li {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 300;
    font-size: 0.9375rem;
    color: var(--ink);
    padding: 0.5rem 0 0.5rem 1.125rem;
    line-height: 1.5;
    position: relative;
}
.tier-list li::before {
    content: '·';
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--brass);
    position: absolute;
    left: 0; top: 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
}
.tier-list li.foot {
    color: var(--ink-dim);
    font-size: 0.8125rem;
    font-style: italic;
    margin-top: 0.5rem;
}
.tier-list li.foot::before { display: none; }

/* "Find your bearings" CTA */
.ed-cta {
    text-align: center;
    padding: 6.5rem var(--gutter) 7rem;
    position: relative;
    border-top: 1px solid var(--rule-faint);
}
.ed-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 70% at 50% 90%, rgba(201, 169, 97, 0.07) 0%, transparent 65%);
    pointer-events: none;
}
.ed-cta-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--brass);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}
.ed-cta h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1.5rem;
}
.ed-cta h2 em {
    font-style: italic;
    color: var(--brass);
}
.ed-cta p {
    font-family: 'Spectral', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.0625rem;
    color: var(--ink-mute);
    margin-bottom: 2.75rem;
    position: relative;
}
.ed-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.7875rem;
    font-weight: 500;
    color: var(--onyx);
    background: var(--brass);
    padding: 1rem 2.5rem;
    border-radius: 4px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}
.ed-cta-btn:hover {
    background: var(--brass-bright);
    color: var(--onyx);
    transform: translateY(-1px);
    box-shadow: 0 12px 36px rgba(201, 169, 97, 0.16);
}
.ed-cta-btn .arrow { font-size: 1rem; }

.ed-cta-meta {
    margin-top: 2.5rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ed-cta-meta span { color: var(--brass); margin: 0 0.5rem; }

/* Editorial footer */
.ed-footer {
    border-top: 1px solid var(--rule-faint);
    padding: 3rem var(--gutter) 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 720px) {
    .ed-footer { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
}

.ed-foot-stamp {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--ink);
}
.ed-foot-stamp small {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 0.625rem;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.625rem;
    font-style: normal;
}

.ed-foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    justify-content: center;
}
@media (max-width: 720px) {
    .ed-foot-nav { justify-content: flex-start; }
}
.ed-foot-nav a {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--ink-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ed-foot-nav a:hover { color: var(--brass); }

.ed-foot-coords {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    color: var(--ink-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: right;
}
@media (max-width: 720px) {
    .ed-foot-coords { text-align: left; }
}
.ed-foot-coords strong {
    color: var(--brass);
    font-weight: 500;
}

/* ─── Reveal animations ─── */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: reveal-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes reveal-in {
    to { opacity: 1; transform: translateY(0); }
}
.r1 { animation-delay: 0.15s; }
.r2 { animation-delay: 0.32s; }
.r3 { animation-delay: 0.48s; }
.r4 { animation-delay: 0.66s; }
.r5 { animation-delay: 0.85s; }
.r6 { animation-delay: 1.05s; }

/* Editorial mobile stacking */
@media (max-width: 880px) {
    .editorial-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        padding-top: 5rem;
    }
    .hero-stamp { display: none; }
    .hero-textblock {
        grid-column: 1; grid-row: 1;
        padding: 1rem 0 2rem;
    }
    .hero-instrument {
        grid-column: 1; grid-row: 2;
        max-width: 320px;
        margin: 0 auto 2rem;
    }
    .hero-log {
        grid-column: 1; grid-row: 3;
        grid-template-columns: 1fr 1fr;
        margin-top: 1.5rem;
    }
    .hero-log-cell:nth-child(2)::before,
    .hero-log-cell:nth-child(4)::before { display: none; }
    .hero-log-cell:nth-child(3) { border-top: 1px solid var(--rule-faint); padding-top: 1rem; margin-top: 0.5rem; }
    .hero-log-cell:nth-child(4) { border-top: 1px solid var(--rule-faint); padding-top: 1rem; margin-top: 0.5rem; }
    .hero-corner-bl, .hero-corner-br { display: none; }
}