/* =========================================================
   NFN — Private Members Network
   Cinematic. Modern. Heritage. (Odd Ritual × JMM)
   ========================================================= */

/* Self-hosted Google Fonts (GDPR: no third-party connection to fonts.gstatic.com) */
/* DM Sans — variable font, covers weights 100-1000 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../assets/fonts/dmsans-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/instrumentserif-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/instrumentserif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/instrumentserif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/instrumentserif-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Quiet luxury palette — clean white, deep ink, restrained warm accent */
    --paper:       #ffffff;
    --paper-soft:  #f6f5f2;
    --paper-deep:  #ebe9e4;
    --ink:         #0e0c09;
    --ink-soft:    #1f1d18;
    --sand:        #b8a888;
    --sand-deep:   #7d735f;

    --ink-mute:    rgba(14, 12, 9, 0.58);
    --ink-faint:   rgba(14, 12, 9, 0.18);
    --paper-mute:  rgba(255, 255, 255, 0.6);
    --paper-faint: rgba(255, 255, 255, 0.22);
    --rule:        rgba(14, 12, 9, 0.10);
    --rule-light:  rgba(255, 255, 255, 0.14);

    --serif:       'Instrument Serif', 'Times New Roman', serif;
    --sans:        'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

    --maxw:        1440px;
}

/* Visually-hidden (screen readers & crawlers only) */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ================ Reset ================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    /* Dark colour shows through any browser chrome that exposes the
       html backdrop (e.g. the iOS Safari overscroll bounce area). */
    background-color: var(--ink);
}

/* Paint the iPhone safe-area inset (the strip behind the dynamic
   island / notch) for pages whose top region is dark. Without this,
   Safari renders that strip in the body bg colour (white) which
   breaks the cinematic dark hero. Height is 0 on devices without a
   safe-area inset, so it's invisible everywhere else. */
body.has-dark-shell::before,
body.letter-form-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0);
    background: var(--ink);
    z-index: 100;
    pointer-events: none;
}

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    min-height: 100vh;
    /* `overflow: clip` (instead of hidden) prevents iOS Safari from
       trapping `position: fixed` descendants — using overflow:hidden
       on body silently turns fixed children into "scrolls with the
       page" on iOS. */
    overflow-x: clip;
    position: relative;
}

img, video, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

button, input, textarea, select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}
button { cursor: pointer; }

/* ================ Scroll gutter / page wrap ================ */
.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }

.mono {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.italic { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ================ Floating pill navbar ================
   Two pills floating at the top of every page:
   - Brand pill (logo) on the left → home
   - CTA pill on the right → Join the Network (or Return on form pages)
*/
.nav {
    position: fixed;
    /* A touch lower on desktop than mobile — the navbar feels too
       cramped against the very top edge on wider screens; the mobile
       override below brings it back to 0.85rem where it sits well. */
    top: 1.5rem;
    left: 0.85rem;
    right: 0.85rem;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Solo navbar — used on pages that don't carry a CTA pill, so the
   lone logo sits perfectly centred instead of collapsing to the left
   edge under the default space-between layout. */
.nav--solo { justify-content: center; }

.nav__cta {
    display: inline-flex;
    align-items: center;
    height: 3.15rem;
    border-radius: 999px;
    font-family: var(--sans);
    transition:
        background 0.35s var(--ease),
        color 0.35s var(--ease),
        border-color 0.35s var(--ease),
        opacity 0.35s var(--ease),
        box-shadow 0.35s var(--ease);
}

/* Brand — bare logo, no pill. Uses difference blend so the same
   image stays legible on whatever it floats over (dark hero stage,
   white sections, dark letter pages). */
.nav__brand {
    display: inline-flex;
    align-items: center;
    transition: opacity 0.35s var(--ease);
}
.nav__brand img {
    display: block;
    height: 1.65rem;
    width: auto;
    object-fit: contain;
    filter: invert(1);
    mix-blend-mode: difference;
}
.nav__brand:hover { opacity: 0.7; }

/* CTA pill — solid ink, the one place where colour actually pops.
   Subtle white edge so the pill reads against both black and white. */
.nav__cta {
    padding: 0 1.7rem;
    gap: 0.6rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(14, 12, 9, 0.18);
}
.nav__cta:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: rgba(14, 12, 9, 0.08);
}

.nav__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 1.6;
}
.nav__label {
    white-space: nowrap;
}

/* "Return" variant on form / legal pages — ghost pill on the right */
.nav__cta--ghost {
    background: transparent;
    color: var(--ink);
    border-color: rgba(14, 12, 9, 0.18);
    box-shadow: none;
}
.nav__cta--ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* On dark letter pages the ghost pill needs paper-coloured text/border
   to stay legible against the ink background. */
body.letter-form-page .nav__cta--ghost {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.22);
}
body.letter-form-page .nav__cta--ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* Tiny screens: tighten the CTA pill but keep the label visible */
@media (max-width: 420px) {
    .nav__cta { padding: 0 1.1rem; font-size: 0.58rem; letter-spacing: 0.2em; }
}

/* ================ HERO — framed cinematic card ================
   The hero sits inside a black "stage" container which provides the
   dark mat around the rounded video frame. Strip below picks up the
   same ink colour, so it all flows together visually. */
.hero-stage {
    background: var(--ink);
    padding-top: 4.85rem;
    padding-bottom: 0.85rem;
}
.hero {
    position: relative;
    margin: 0 0.85rem;
    border-radius: 22px;
    /* Sized so the whole stage (hero + nav + bottom padding) lands
       around 82vh on desktop, which lets the next section peek up at
       the bottom of the viewport — feels more inviting than the old
       full-screen hero. Mobile overrides this with a flex layout. */
    height: calc(82vh - 6.55rem);
    min-height: 480px;
    max-height: 760px;
    width: auto;
    overflow: hidden;
    color: var(--paper);
    isolation: isolate;
}
/* Frame wraps video + fallback + veil so we can resize the whole
   visual block on mobile without touching the prose underneath. */
.hero__frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}
.hero__video,
.hero__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__video {
    pointer-events: none;
}
.hero__fallback {
    background:
        radial-gradient(ellipse at 50% 40%, #3a2e22 0%, #1a130c 60%, #080604 100%);
}
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 28%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.75) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.hero__tag {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.75rem;
}
.hero__tag::before {
    content: ''; width: 36px; height: 1px; background: currentColor; opacity: 0.55;
}

.hero__title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 8.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    max-width: 18ch;
    margin-bottom: 2.25rem;
    text-transform: lowercase;
}
.hero__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sand);
    letter-spacing: -0.02em;
    padding-right: 0.05em;
}

.hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.hero__lede {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.55;
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.78);
}
.hero__lede em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
}
.hero__ctas {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    z-index: 3;
    transform: translateX(-50%);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: float 3.2s ease-in-out 1.8s infinite;
}
.hero__scroll::before,
.hero__scroll::after {
    content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.5;
}

.hero__side {
    position: absolute;
    top: 50%;
    transform: rotate(-90deg);
    z-index: 3;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.hero__side--left  { left: 1.25rem; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.hero__side--right { right: 2.1rem; transform: rotate(90deg) translateX(50%); transform-origin: right top; }

/* ================ CTA ================ */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 999px;
    transition: all 0.55s var(--ease);
    position: relative;
    overflow: hidden;
    color: inherit;
}
.cta__label { position: relative; z-index: 2; white-space: nowrap; }
.cta__arrow {
    position: relative;
    z-index: 2;
    width: 14px;
    height: 1px;
    background: currentColor;
    transition: width 0.55s var(--ease);
}
.cta__arrow::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    transform: translateY(101%);
    transition: transform 0.55s var(--ease-in-out);
    z-index: 1;
    opacity: 0.95;
}
.cta:hover::before { transform: translateY(0); }
.cta:hover .cta__arrow { width: 28px; }

/* light-on-dark CTA (hero) */
.cta--light {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.cta--light::before { background: var(--ink); }
.cta--light:hover { color: var(--paper); border-color: var(--ink); }

.cta--ghost-light {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.6);
}
.cta--ghost-light::before { background: var(--paper); }
.cta--ghost-light:hover { color: var(--ink); border-color: var(--paper); }

/* dark on cream CTA (body sections) */
.cta--solid {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.cta--solid::before { background: var(--paper); }
.cta--solid:hover { color: var(--ink); }

.cta--ghost {
    color: var(--ink);
    border-color: var(--ink);
}
.cta--ghost::before { background: var(--ink); }
.cta--ghost:hover { color: var(--paper); }

/* light CTA on dark bg (section--ink) */
.cta--onink {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.cta--onink::before { background: var(--sand); }
.cta--onink:hover { color: var(--ink); }

.cta--ghost-onink {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.5);
}
.cta--ghost-onink::before { background: var(--paper); }
.cta--ghost-onink:hover { color: var(--ink); border-color: var(--paper); }

/* ================ Bar / rule labels ================ */
.bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.bar--ink {
    color: rgba(255, 255, 255, 0.65);
    background: var(--ink);
    border-color: var(--rule-light);
}
/* Pushes the meta bar below the floating navbar on form / legal pages */
.bar--push {
    margin-top: clamp(4.5rem, 9vh, 6rem);
}
.bar__dot {
    display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; margin: 0 0.5rem; opacity: 0.6; vertical-align: middle;
}

/* ================ Section scaffold ================ */
.section {
    position: relative;
    padding: clamp(5rem, 13vh, 10rem) 2rem;
    overflow: hidden;
    /* Explicit white bg so sections never reveal the dark body
       beneath on .has-dark-shell pages (where body is ink). */
    background: var(--paper);
}
.section--ink {
    background: var(--ink);
    color: var(--paper);
}
.network { background: var(--paper); }

.section__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    position: relative;
}

.section__layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
}
.section--reverse .section__layout {
    grid-template-columns: 1.4fr 1fr;
}
.section--reverse .section__aside { order: 2; }

/* Solo sections: no aside, text flows in full width of section inner */
.section--solo .section__text {
    max-width: 820px;
}

.section__huge {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(10rem, 26vw, 32rem);
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--ink);
    display: block;
}
.section--ink .section__huge { color: var(--paper); }

.section__huge .sub {
    font-style: normal;
    display: block;
    font-size: 0.1em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-family: var(--sans);
    font-weight: 500;
    margin-top: 1.75rem;
    color: var(--ink-mute);
    line-height: 1;
}
.section--ink .section__huge .sub { color: rgba(255, 255, 255, 0.6); }

.section__kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.section--ink .section__kicker { color: rgba(255, 255, 255, 0.7); }
.section__kicker::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    align-self: center;
}
.section__kicker:has(.section__roman)::before { display: none; }

.section__roman {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: var(--sand-deep);
    text-transform: none;
    margin-right: 0.25rem;
}
.section--ink .section__roman { color: var(--sand); }

.section__title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 1.75rem;
    max-width: 18ch;
    text-transform: lowercase;
}
.section__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sand-deep);
    letter-spacing: -0.02em;
}
.section--ink .section__title em { color: var(--sand); }

.section__body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: 1.6;
    max-width: 48ch;
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
}
.section--ink .section__body { color: rgba(255, 255, 255, 0.78); }

.section__list {
    list-style: none;
    border-top: 1px solid var(--rule);
    margin-bottom: 2.5rem;
    max-width: 520px;
}
.section--ink .section__list { border-color: var(--rule-light); }
.section__list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.section--ink .section__list li { border-color: var(--rule-light); color: rgba(255, 255, 255, 0.6); }
.section__list li strong {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.section__list li strong em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}
.section--ink .section__list li strong { color: var(--paper); }

/* Seal (crest, natural rendering) */
.seal-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.seal {
    width: clamp(240px, 28vw, 420px);
    aspect-ratio: 1 / 1;
    background-color: transparent;
    background-image: url('../assets/NFN-Coat-of-arms.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 1.2s var(--ease);
}
.seal:hover { transform: rotate(-2deg) scale(1.02); }
.section--ink .seal {
    background-color: transparent;
    filter: invert(1);
    opacity: 0.92;
}
.seal--monogram {
    width: clamp(180px, 22vw, 300px);
    background-image: url('../assets/NFN-font-logo.png');
}

/* ================ Photo collage (Members aside) ================
   A scattered stack of polaroid-style photographs that anchor the
   Members section. Each photo is absolutely positioned with its own
   rotation, z-index and a slow idle float — staggered so the cluster
   feels alive but never busy. The whole container fades in via the
   shared [data-reveal] hook so it animates on scroll into view. */
.collage {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1.18;
    margin: 0 auto;
    perspective: 800px;
}

.collage__photo {
    position: absolute;
    width: 52%;
    aspect-ratio: 3 / 4;
    margin: 0;
    background: var(--paper);
    padding: 8px 8px 28px;
    box-shadow:
        0 18px 36px -8px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.6s var(--ease),
        box-shadow 0.6s var(--ease),
        z-index 0s linear 0.6s;
    cursor: default;
    will-change: transform;
}

.collage__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Per-photo position, rotation and idle-float animation. The keyframes
   keep each photo's rotation locked while only the translateY breathes,
   so the cluster looks settled — not spinning. */
.collage__photo--1 { top:  1%; left:  2%; z-index: 3; animation: collage-float-1 7.0s ease-in-out infinite; }
.collage__photo--2 { top:  6%; left: 46%; z-index: 5; animation: collage-float-2 8.5s ease-in-out infinite -1.2s; }
.collage__photo--3 { top: 30%; left: 22%; z-index: 7; animation: collage-float-3 9.0s ease-in-out infinite -2.5s; }
.collage__photo--4 { top: 36%; left: 50%; z-index: 4; animation: collage-float-4 7.5s ease-in-out infinite -0.6s; }
.collage__photo--5 { top: 58%; left:  4%; z-index: 6; animation: collage-float-5 8.0s ease-in-out infinite -3.1s; }
.collage__photo--6 { top: 62%; left: 38%; z-index: 2; animation: collage-float-6 9.5s ease-in-out infinite -1.8s; }

@keyframes collage-float-1 { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-7px); } }
@keyframes collage-float-2 { 0%,100% { transform: rotate( 7deg) translateY(0); } 50% { transform: rotate( 7deg) translateY(-9px); } }
@keyframes collage-float-3 { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-6px); } }
@keyframes collage-float-4 { 0%,100% { transform: rotate( 9deg) translateY(0); } 50% { transform: rotate( 9deg) translateY(-8px); } }
@keyframes collage-float-5 { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-10px); } }
@keyframes collage-float-6 { 0%,100% { transform: rotate( 4deg) translateY(0); } 50% { transform: rotate( 4deg) translateY(-7px); } }

/* Hover — pull the photo forward, straighten it, brighten the shadow.
   Pause the idle float so the lift reads cleanly. */
.collage__photo:hover {
    z-index: 20;
    transform: rotate(0deg) translateY(-14px) scale(1.04);
    box-shadow:
        0 32px 60px -10px rgba(0, 0, 0, 0.6),
        0 6px 14px rgba(0, 0, 0, 0.35);
    animation-play-state: paused;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* ================ Ahead — marquee list ================ */
.ahead {
    margin-top: 3.5rem;
    border-top: 1px solid var(--rule);
}

/* ================ Section 03 — The Network (editorial redesign) ================ */
.network { position: relative; }

.network__watermark {
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    width: clamp(340px, 42vw, 620px);
    aspect-ratio: 1 / 1;
    background-image: url('../assets/NFN-Coat-of-arms.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.network .section__inner { position: relative; z-index: 1; }

.network__head {
    max-width: 780px;
    margin-bottom: clamp(3rem, 5vh, 4.5rem);
}

.network__chapter {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}
.network__roman {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 0.85;
    color: var(--sand-deep);
    letter-spacing: -0.03em;
}
.network__chapter-label {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.network__title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.035em;
    margin-bottom: 1.75rem;
    text-transform: lowercase;
}
.network__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sand-deep);
    letter-spacing: -0.02em;
}

.network__lede {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.6;
    max-width: 48ch;
    color: var(--ink-soft);
}

/* Primary CTA inside the Network intro — mirrors the cadence of
   Sections I and III, where the call to action follows the body copy. */
.network__head .cta { margin-top: 1.85rem; }

/* Refined taxonomy */
.tiers {
    max-width: 780px;
    margin-bottom: clamp(4rem, 7vh, 6rem);
    border-top: 1px solid var(--rule);
}

/* ================ Overview (three-orbits primer) ================
   A thin band that sits between the marquee strip and Section I
   so the reader meets the three roles (Members / Network / Brands)
   before reading each one in detail. Dark continuation of the strip. */
.overview {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2.5rem, 5vh, 4rem) 2rem;
}
.overview__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.overview__kicker {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.75rem;
    text-align: center;
}

/* Overview-flavoured tiers — inherit the existing tier layout but
   render in paper colours on dark, with no rule lines so the three
   orbits read as a quiet, breathing block instead of a table. */
.tiers--overview {
    max-width: none;
    margin-bottom: 0;
    border-top: none;
}
.tiers--overview .tier {
    border-bottom: none;
    color: var(--paper);
}
.tiers--overview .tier__idx { color: var(--sand); }
.tiers--overview .tier__name { color: var(--paper); }
.tiers--overview .tier__meta { color: rgba(255, 255, 255, 0.55); }
.tiers--overview .tier:hover { padding-left: 0.5rem; }
.tier {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
    transition: padding 0.45s var(--ease), color 0.45s var(--ease);
}
.tier:hover { padding-left: 0.75rem; }
.tier__idx {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--ink-mute);
}
.tier__name {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    letter-spacing: -0.015em;
    text-transform: lowercase;
    color: var(--ink);
}
.tier__meta {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

/* Desktop refinement only. Mobile keeps its current compact stacked
   layout from the max-width: 720px rules below. */
@media (min-width: 721px) {
    .hero-stage {
        padding: 6.2rem 2rem 2.75rem;
    }

    .hero {
        width: min(var(--maxw), 100%);
        height: clamp(520px, 72vh, 720px);
        min-height: 0;
        max-height: none;
        margin: 0 auto;
        border-radius: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
        gap: clamp(1.5rem, 3vw, 3rem);
        overflow: visible;
        background: var(--ink);
        box-shadow: none;
    }

    .hero__frame {
        position: relative;
        inset: auto;
        min-height: 100%;
        border-radius: 26px;
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
    }

    .hero__inner {
        height: auto;
        padding-inline: clamp(2rem, 4vw, 3.75rem);
        padding-bottom: 0;
        justify-content: center;
        align-self: stretch;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hero__tag {
        margin-bottom: 1.25rem;
    }

    .hero__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .hero__lede {
        max-width: 38ch;
        font-size: clamp(1.15rem, 1.45vw, 1.35rem);
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.82);
    }

    .hero__ctas {
        gap: 0.75rem;
    }

    .hero__scroll {
        display: none;
    }

    .overview {
        padding: clamp(2.25rem, 4vh, 3rem) 2rem clamp(3rem, 5vh, 4rem);
        background: var(--ink);
    }

    .overview__inner {
        max-width: var(--maxw);
    }

    .tiers--overview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .tiers--overview .tier {
        min-height: 150px;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        align-items: start;
        padding: 1.5rem 1.6rem 1.45rem;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
        transition: color 0.45s var(--ease);
    }

    .tiers--overview .tier:last-child {
        border-right: 0;
    }

    .tiers--overview .tier:hover {
        padding-left: 1.6rem;
    }

    .tiers--overview .tier__idx {
        font-size: 1.2rem;
        line-height: 1;
    }

    .tiers--overview .tier__name {
        font-size: clamp(1.2rem, 1.55vw, 1.45rem);
        line-height: 1;
    }

    .tiers--overview .tier__meta {
        white-space: normal;
        line-height: 1.7;
        max-width: 25ch;
        margin-top: auto;
    }
}

/* What opens next */
.opens-next { position: relative; }
.opens-next__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.opens-next__kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.64rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}
.opens-next__rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.opens-next__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.next-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    transition: border-color 0.55s var(--ease), transform 0.55s var(--ease), background 0.55s var(--ease);
}
.next-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 14px; height: 14px;
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    opacity: 0;
    transition: opacity 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease);
}
.next-card:hover {
    border-color: var(--ink);
    background: var(--paper);
    transform: translateY(-3px);
}
.next-card:hover::after { opacity: 1; width: 22px; height: 22px; }

.next-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.next-card__roman {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--sand-deep);
}
.next-card__tag {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.next-card__title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    margin-bottom: 1rem;
}
.next-card__body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    max-width: 32ch;
}
.next-card__foot {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

@media (max-width: 720px) {
    .network__watermark { right: -30%; opacity: 0.04; }
    .network__chapter {
        gap: 0.85rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.85rem;
    }
    .network__head { margin-bottom: 2rem; }
    .network__lede { font-size: 0.95rem; line-height: 1.5; }
    .network__head .cta { margin-top: 1.25rem; }
    .tier { grid-template-columns: 32px 1fr; }
    .tier__meta { grid-column: 1 / -1; padding-left: calc(32px + 1.5rem); }

    /* Compact the overview band on mobile so it sits as a quick
       primer right under the hero without consuming a full screen. */
    .overview { padding: 1.5rem 1.25rem 1.75rem; }
    .tiers--overview .tier { padding: 0.7rem 0; gap: 1rem; }
    .tiers--overview .tier__meta {
        font-size: 0.55rem;
        padding-left: calc(32px + 1rem);
        letter-spacing: 0.22em;
        margin-top: 0.15rem;
    }
    .tiers--overview .tier__name { font-size: 1rem; }

    /* "What the Network receives" — make the block feel like a quiet
       footnote on mobile rather than the same heavy desktop card grid:
       single column, tighter padding, smaller titles, less air. */
    .opens-next__head {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .opens-next__kicker { font-size: 0.55rem; letter-spacing: 0.26em; }
    .opens-next__grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .next-card {
        padding: 1.1rem 1.15rem 1.2rem;
    }
    .next-card__meta { margin-bottom: 0.75rem; }
    .next-card__roman { font-size: 1rem; }
    .next-card__tag { font-size: 0.52rem; letter-spacing: 0.22em; }
    .next-card__title { font-size: 1.35rem; margin-bottom: 0.5rem; }
    .next-card__body {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 1rem;
        max-width: none;
    }
    .next-card__foot {
        font-size: 0.5rem;
        letter-spacing: 0.22em;
        margin-top: 0;
        padding-top: 0.7rem;
    }
}
.ahead__row {
    display: grid;
    grid-template-columns: 80px 1.2fr 2fr auto;
    gap: 2rem;
    align-items: center;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--rule);
    transition: padding 0.5s var(--ease), color 0.5s var(--ease);
    cursor: default;
}
.ahead__row:hover { padding-left: 1.25rem; color: var(--ink); }
.ahead__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink-mute);
}
.ahead__name {
    font-family: var(--sans);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: lowercase;
}
.ahead__name em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}
.ahead__body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 50ch;
}
.ahead__tag {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

/* ================ Swipe/marquee strip ================ */
.strip {
    background: var(--ink);
    color: var(--paper);
    padding: 1.25rem 0;
    overflow: hidden;
    position: relative;
}
.strip__track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    animation: scroll-x 40s linear infinite;
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    letter-spacing: -0.02em;
    text-transform: lowercase;
}
.strip__track em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}
.strip__track span { display: inline-flex; align-items: center; gap: 3rem; }
.strip__track span::after {
    content: '✦';
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.6em;
    opacity: 0.6;
}

/* ================ Form pages ================ */
.form-page { background: var(--paper); }

/* Pages whose top region is dark — homepage hero stage and the
   letter-style forms — paint the body itself dark so the iPhone
   safe-area inset (behind the dynamic island and below the URL bar)
   matches the page chrome instead of bleeding white. */
body.has-dark-shell,
body.letter-form-page { background: var(--ink); }

.form-wrap {
    padding: clamp(3rem, 8vh, 6rem) 2rem clamp(5rem, 10vh, 8rem);
    display: flex;
    justify-content: center;
}

/* Extra top padding when the page leads straight with the form
   (no bar) so the floating nav doesn't overlap the heading. */
.form-wrap--top {
    padding-top: clamp(6rem, 12vh, 8rem);
}

.form-head {
    text-align: center;
    margin-bottom: 3.75rem;
    max-width: 620px;
    margin-inline: auto;
}
.form-head__kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1.25rem;
}
.form-head__title {
    font-family: var(--sans);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-bottom: 1.5rem;
    text-transform: lowercase;
}
.form-head__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sand-deep);
    letter-spacing: -0.02em;
}
.form-head__lede {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.55;
}
.form-head__lede em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

.form {
    width: 100%;
    max-width: 620px;
}

/* Netlify honeypot — visually & semantically hidden, but still submitted */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { position: relative; margin-bottom: 1.85rem; }
.field__label {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 0.55rem;
}
.field__label .opt {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    color: var(--ink-faint);
    margin-left: 0.5rem;
}

.field__input,
.field__textarea,
.field__select {
    width: 100%;
    padding: 0.7rem 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-faint);
    transition: border-color 0.3s var(--ease);
    background: transparent;
    border-radius: 0;
}
.field__textarea {
    resize: vertical;
    min-height: 110px;
    font-size: 1rem;
    line-height: 1.55;
    font-style: normal;
}
.field__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230e0c09' stroke-width='1' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 12px;
    padding-right: 2rem;
    cursor: pointer;
}
.field__input::placeholder,
.field__textarea::placeholder {
    color: var(--ink-faint);
    font-style: italic;
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus { border-bottom-color: var(--ink); }

.field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form__actions {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.form__submit { padding: 1.1rem 2.75rem; }
.form__micro {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--ink-mute);
    text-align: center;
    max-width: 360px;
    line-height: 1.55;
}
.form__micro em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ================ Letter form (mad-libs / cloze style) ================
   The form reads as a flowing first-person paragraph; each input is
   inline, underlined (like blanks on a notebook page), and grows with
   typed content. Sits on a black "stage" that mirrors the framed hero
   on the home page — quiet editorial rather than a generic web form.

   The page itself is a flex column that grows to fill all space left
   between the fixed navbar and the footer, with its inner content
   vertically centred. Without this the short form sat near the top
   of the viewport with a lot of dead space underneath. */
.letter-page {
    background: var(--ink);
    color: var(--paper);
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(7rem, 13vh, 10rem)
        clamp(1.25rem, 4vw, 2.5rem)
        clamp(5rem, 10vh, 7rem);
}

.letter-page__inner {
    max-width: 760px;
    margin: 0 auto;
}

.letter-page__head {
    margin-bottom: clamp(3rem, 7vh, 4.5rem);
    text-align: center;
}

.letter-page__kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.25rem;
}

.letter-page__title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-transform: lowercase;
    margin-bottom: 1rem;
}
.letter-page__title em {
    /* Local override of the global em-neutralising rule */
    font-family: var(--serif) !important;
    font-style: italic !important;
    color: var(--sand) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}

.letter-page__lede {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
}

/* The letter itself */
/* Body of the letter — DM Sans, the same face used everywhere else
   on the site. The hand-drawn wavy underlines on each input keep the
   editorial "letter" feel; the prose itself reads as straight, quiet
   sans rather than a serif italic page. */
.letter {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    line-height: 1.95;
    letter-spacing: 0;
    color: var(--paper);
    text-align: center;
}

.letter__line {
    margin-bottom: 0.55rem;
}

/* Inline blanks — no straight border-bottom anymore. We paint a
   subtle wavy SVG line at the bottom of each field so the underline
   reads as if drawn by hand. The same SVG is reused for hover/focus
   at higher opacity. The select keeps its caret stacked on top. */
.letter__input,
.letter__textarea,
.letter__select {
    display: inline-block;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 80px 6px;
    border: none;
    border-radius: 0;
    color: var(--paper);
    font: inherit;
    padding: 0 0.55rem 0.55rem;
    margin: 0 0.3rem;
    outline: none;
    min-width: 7ch;
    width: auto;
    max-width: 100%;
    /* Modern browsers: input grows with content; min-width is the fallback */
    field-sizing: content;
    transition: background-image 0.3s var(--ease), color 0.3s var(--ease);
    vertical-align: baseline;
}

.letter__input:hover,
.letter__textarea:hover,
.letter__select:hover {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.letter__input:focus,
.letter__textarea:focus,
.letter__select:focus {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23ffffff' stroke-opacity='1' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.letter__input::placeholder,
.letter__textarea::placeholder {
    color: rgba(255, 255, 255, 0.34);
    font-style: italic;
}

.letter__textarea {
    resize: none;
    min-width: 22ch;
    line-height: 1.7;
    vertical-align: top;
    overflow: hidden;
}

/* Wider blank for email — visually allocates the room the field needs. */
.letter__input--wide { min-width: 14ch; }

/* Native select — arrow caret sits on top of the same wavy underline,
   so we layer two background images. */
.letter__select {
    appearance: none;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1' fill='none' stroke-opacity='0.6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat-x;
    background-position: right 0.2rem center, left bottom;
    background-size: 10px, 80px 6px;
    padding-right: 1.3rem;
    cursor: pointer;
    min-width: 8ch;
}
.letter__select option {
    background: var(--ink);
    color: var(--paper);
}

/* Subtle marker for required inputs in invalid state (added by JS) —
   swap the underline for a warm-red wavy line. */
.letter__input.is-invalid,
.letter__textarea.is-invalid,
.letter__select.is-invalid {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23dc5a46' stroke-opacity='0.85' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.letter__select.is-invalid {
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1' fill='none' stroke-opacity='0.6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 1 50 3 T 100 3' fill='none' stroke='%23dc5a46' stroke-opacity='0.85' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Footer area — consent + submit + micro, all centered under the prose */
.letter__foot {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Inline error banner — sits between the prose and the footer when
   validation fails or the network request errors. Quiet warm-red on
   the dark page so it reads as a notice, not a system error. */
.letter__error {
    display: none;
    margin: 1.5rem auto 0;
    max-width: 36ch;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(220, 90, 70, 0.4);
    border-radius: 4px;
    background: rgba(220, 90, 70, 0.08);
    color: #f6c8bf;
    font-family: var(--sans);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
}
.letter__error.is-visible { display: block; }

.letter__consent {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    text-align: left;
}
.letter__consent input[type="checkbox"] {
    margin-top: 0.3rem;
    accent-color: var(--paper);
    flex-shrink: 0;
}
.letter__consent a {
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.32);
    transition: text-decoration-color 0.3s var(--ease);
}
.letter__consent a:hover {
    text-decoration-color: var(--paper);
}

.letter__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.letter__micro {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    max-width: 36ch;
    text-align: center;
}

/* Honeypot stays invisible */
.letter .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success state for letter forms */
.letter-success {
    display: none;
    animation: rise 1s var(--ease) both;
    color: var(--paper);
    text-align: center;
}
.letter-success.is-visible { display: block; }
.letter.is-hidden { display: none; }

.letter-success__title {
    font-family: var(--sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    margin-bottom: 1rem;
}
.letter-success__title em {
    font-family: var(--serif) !important;
    font-style: italic !important;
    color: var(--sand) !important;
    font-weight: 400 !important;
}
.letter-success__body {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 42ch;
    margin: 0 auto 2rem;
}
.letter-success__link {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--paper);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.4rem;
    transition: border-color 0.3s var(--ease);
}
.letter-success__link:hover { border-color: var(--paper); }

/* The footer below a dark letter page should keep its ink colours;
   already handled by .foot's own background, just need to drop the
   ink/paper inversion that .form-page introduces for legal links. */
body.letter-form-page .foot__legal,
body.letter-form-page .foot__legal a {
    color: var(--paper-mute);
}
body.letter-form-page .foot__legal a:hover { color: var(--paper); }

/* Success */
.success {
    display: none;
    text-align: center;
    padding: 2rem 0;
    animation: rise 1s var(--ease) both;
}
.success.is-visible { display: block; }
.form.is-hidden { display: none; }

.success__seal {
    width: 90px;
    height: 90px;
    margin: 0 auto 2rem;
    opacity: 0.9;
    background-color: var(--paper);
    background-image: url('../assets/NFN-Coat-of-arms.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: darken;
}
.success__title {
    font-family: var(--sans);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    line-height: 1.05;
    text-transform: lowercase;
}
.success__title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.success__body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1rem;
    color: var(--ink-soft);
    max-width: 420px;
    margin: 0 auto 2.5rem;
    line-height: 1.55;
}
.success__link {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-faint);
    padding-bottom: 0.4rem;
    transition: border-color 0.3s var(--ease);
}
.success__link:hover { border-color: var(--ink); }

/* ================ Foot ================
   Tight, editorial footer. Grid up top with three short columns,
   then a single divider line, then a unified base strip carrying
   copyright + legal links + motto on one row (wraps on small
   screens). Sized down significantly from the previous layout to
   stop the footer dominating the bottom of the page. */
.foot {
    margin-top: auto;
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2.75rem, 6vh, 4rem) 2rem 1.5rem;
}
.foot__top {
    max-width: var(--maxw);
    margin: 0 auto 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--rule-light);
}
.foot__big {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: lowercase;
}
.foot__big em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sand);
    letter-spacing: -0.02em;
}

.foot__grid {
    max-width: var(--maxw);
    margin: 0 auto 1.75rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.25rem;
}
.foot__h {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.55rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.85rem;
}
.foot__brand {
    display: inline-block;
    margin-bottom: 0.75rem;
    line-height: 0;
    transition: opacity 0.35s var(--ease);
}
.foot__brand:hover { opacity: 0.8; }
.foot__brand img {
    display: block;
    height: 1.4rem;
    width: auto;
    object-fit: contain;
    filter: invert(1);
}
.foot__tag {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 34ch;
    line-height: 1.5;
}
.foot__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
}
.foot__list a { transition: color 0.3s var(--ease); }
.foot__list a:hover { color: var(--sand); }
.foot__list span { color: rgba(255, 255, 255, 0.55); }

/* Unified bottom strip — copyright | legal links | motto. A subtle
   divider line above keeps it visually separated from the columns
   without adding more vertical bulk. */
.foot__base {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem 1.75rem;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.foot__base .foot__copy,
.foot__base .foot__motto { white-space: nowrap; }
.foot__base .bar__dot { background: currentColor; }

/* ================ Animations ================ */
@keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}
@keyframes scroll-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Hero on-load rises */
.hero__tag    { animation: rise 1.1s var(--ease) 0.2s both; }
.hero__title  { animation: rise 1.3s var(--ease) 0.35s both; }
.hero__row    { animation: rise 1.3s var(--ease) 0.55s both; }
.hero__scroll { animation: rise 1.3s var(--ease) 0.8s both, float 3.2s ease-in-out 2s infinite; }

/* ================ Responsive ================ */
@media (max-width: 1024px) {
    .section__layout,
    .section--reverse .section__layout { grid-template-columns: 1fr; gap: 3rem; }
    .section__aside { order: -1; }
    .section--reverse .section__aside { order: -1; }

    /* Tighten the photo cluster a touch on tablet so it doesn't
       dominate the vertical real estate above the Members text. */
    .collage { max-width: 420px; }

    .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .nav { top: 1.25rem; left: 1rem; right: 1rem; }
    .nav__brand img { height: 1.4rem; }
    .nav__cta { height: 2.85rem; font-size: 0.62rem; padding: 0 1.3rem; }

    /* Smaller scattered cluster on phones. The container is given a
       taller aspect-ratio than desktop so the absolutely-positioned
       polaroids actually fit inside it — without this the bottom row
       overflowed and bled onto the Members text below. The cluster
       itself is tightened (smaller photos, lower top%) so it still
       feels compact rather than stretched. */
    .collage {
        max-width: 320px;
        aspect-ratio: 1 / 1.5;
        margin-bottom: 0.5rem;
    }
    .collage__photo {
        width: 48%;
        padding: 6px 6px 22px;
    }
    .collage__photo--1 { top:  0%; left:  2%; }
    .collage__photo--2 { top:  4%; left: 48%; }
    .collage__photo--3 { top: 24%; left: 22%; }
    .collage__photo--4 { top: 30%; left: 50%; }
    .collage__photo--5 { top: 50%; left:  2%; }
    .collage__photo--6 { top: 56%; left: 38%; }
    .collage__photo:hover {
        transform: rotate(0deg) translateY(-8px) scale(1.03);
    }

    /* Smaller, quieter pills site-wide on mobile — keeps the round
       affordance but trims the heavy desktop padding/typography so
       buttons read as text + arrow rather than blocky CTAs. */
    .cta {
        gap: 0.55rem;
        padding: 0.7rem 1.05rem;
        font-size: 0.58rem;
        letter-spacing: 0.2em;
    }
    .cta__arrow { width: 12px; }
    .cta__arrow::after { width: 5px; height: 5px; }
    .cta:hover .cta__arrow { width: 20px; }

    /* Mobile hero — split layout. The opening screen is reserved for
       video + short copy + CTAs + scroll cue. The video flexes to fill
       spare space so there is no dead area below the cue. */
    .hero-stage {
        padding-top: 4.5rem;
        padding-bottom: 0;
    }
    .hero {
        margin: 0 0.65rem;
        height: calc(100vh - 4.5rem);
        height: calc(100dvh - 4.5rem);
        min-height: 0;
        flex: none;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        background: var(--ink);
        overflow: hidden;
    }

    /* This is where the remaining first-screen height goes. */
    .hero__frame {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        border-radius: 18px;
        flex: 1 1 0;
    }

    /* Inner content lands in normal flow underneath the framed video,
       sized to its content so the frame above can take the rest. */
    .hero__inner {
        position: relative;
        height: auto;
        z-index: 2;
        padding: 1rem 1rem 1.05rem;
        justify-content: flex-start;
        flex: 0 0 auto;
    }
    .hero__inner::after {
        content: 'Scroll to explore more';
        margin-top: 0.85rem;
        font-family: var(--sans);
        font-weight: 500;
        font-size: 0.52rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
    }
    .hero__tag { margin-bottom: 0.6rem; font-size: 0.55rem; gap: 0.65rem; }
    .hero__tag::before { width: 22px; }
    .hero__row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .hero__lede {
        font-size: 0.86rem;
        line-height: 1.45;
        max-width: 32ch;
        color: rgba(255, 255, 255, 0.72);
    }

    /* Mobile CTAs read as editorial navigation rather than a cookie
       banner. Same two choices, but no accept/decline pill contrast. */
    .hero__ctas {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero__ctas .cta {
        flex: 1 1 0;
        width: auto;
        justify-content: space-between;
        padding: 0.9rem 0.25rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--paper);
    }
    .hero__ctas .cta + .cta {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        padding-left: 0.85rem;
    }
    .hero__ctas .cta:first-child {
        padding-right: 0.85rem;
    }

    /* Scroll cue is removed entirely on mobile — the full-screen hero
       already invites the user to scroll. */
    .hero__scroll { display: none; }

    .bar { padding: 0.9rem 1.25rem; font-size: 0.55rem; gap: 1rem; flex-wrap: wrap; }

    .section { padding: 4.5rem 1.25rem; }
    .section__huge { font-size: 40vw; }

    .ahead__row { grid-template-columns: 40px 1fr; gap: 1rem; padding: 1.75rem 0; }
    .ahead__body, .ahead__tag { display: none; }

    .form-wrap { padding: 2.5rem 1.25rem 4rem; }
    .field--row { grid-template-columns: 1fr; gap: 0; }
    .field--row > .field:first-child { margin-bottom: 1.85rem; }

    .foot { padding: 2.5rem 1.25rem 1.25rem; }
    .foot__top { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
    .foot__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-bottom: 1.5rem; }
    .foot__brand img { height: 1.25rem; }
    .foot__tag { font-size: 0.78rem; }
    .foot__list { font-size: 0.78rem; gap: 0.4rem; }
    .foot__base {
        flex-direction: column;
        gap: 0.55rem;
        text-align: center;
        padding-top: 0.95rem;
    }
    .foot__legal { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .hero__video { display: none; }
}

/* ================ Loader ================ */
body.is-loading { overflow: hidden; }

.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}
.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader.is-hidden .loader__inner {
    transform: translateY(-4px) scale(0.99);
}

/* Brief variant — used when navigating between pages inside the site.
   Just a quick flash of the seal rather than the full cinematic intro. */
.loader--brief {
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.loader--brief .loader__bar,
.loader--brief .loader__label {
    display: none;
}
.loader--brief .loader__seal {
    animation: none;
    opacity: 0.95;
}

.loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    padding: 0 1.5rem;
    transition: transform 0.55s var(--ease);
}

.loader__seal {
    width: clamp(120px, 15vw, 180px);
    aspect-ratio: 1 / 1;
    background-image: url('../assets/NFN-Coat-of-arms.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(1) drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
    opacity: 0.95;
    animation: loaderBreathe 3.4s ease-in-out infinite;
    will-change: transform, opacity;
}

.loader__bar {
    width: min(260px, 58vw);
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    position: relative;
    overflow: hidden;
}
.loader__bar span {
    position: absolute;
    top: 0; bottom: 0;
    width: 38%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: loaderSlide 1.7s var(--ease-in-out) infinite;
    will-change: transform;
}

.loader__label {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes loaderBreathe {
    0%, 100% { opacity: 0.9;  transform: scale(1);     }
    50%      { opacity: 1;    transform: scale(1.04);  }
}
@keyframes loaderSlide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(380%);  }
}

@media (prefers-reduced-motion: reduce) {
    .loader__seal     { animation: none; }
    .loader__bar span { animation: none; opacity: 0.6; }
}

/* ================ Global: no italic-serif "handwritten" accents ================ */
em,
.italic,
.field__label .opt {
    font-family: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    letter-spacing: inherit !important;
}

/* ================ Legal pages (Impressum, Privacy) ================ */
.legal-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(4rem, 10vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

.legal-head {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}
.legal-head__kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1.25rem;
}
.legal-head__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.75rem;
}
.legal-head__meta {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.legal-body {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.legal-body h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 3rem 0 1rem;
}
.legal-body h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 2rem 0 0.5rem;
}
.legal-body p {
    margin: 0 0 1.1rem;
}
.legal-body ul {
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}
.legal-body li {
    margin-bottom: 0.4rem;
}
.legal-body a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-faint);
    transition: text-decoration-color 180ms var(--ease);
}
.legal-body a:hover { text-decoration-color: var(--ink); }
.legal-body .todo {
    background: rgba(138, 127, 107, 0.14);
    padding: 0.05em 0.35em;
    border-radius: 2px;
    font-weight: 500;
    color: var(--ink);
}
.legal-body .lang-switch {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}
.legal-body .note {
    border-left: 1px solid var(--rule);
    padding: 0.2rem 0 0.2rem 1rem;
    margin: 0 0 1.4rem;
    color: var(--ink-mute);
    font-size: 0.88rem;
}

/* Inline privacy consent on forms */
.form__consent {
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-mute);
    margin: 0.5rem 0 1.2rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.form__consent input[type="checkbox"] {
    margin-top: 0.25rem;
    accent-color: var(--ink);
    flex-shrink: 0;
}
.form__consent a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--ink-faint);
}
.form__consent a:hover { text-decoration-color: var(--ink); }

/* Footer legal links — sit inline inside .foot__base bottom strip,
   share its tiny uppercase tracking and muted paper colour. */
.foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.25rem;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}
.foot__legal a {
    color: inherit;
    text-decoration: none;
    transition: color 180ms var(--ease);
}
.foot__legal a:hover { color: var(--paper); }