/* The webfonts, served from our own origin rather than Google's. Must come
   first: @import is only allowed before other rules. */
@import url("fonts-XYfEcqm.css");

/* =============================================================================
   AADI — global stylesheet
   -----------------------------------------------------------------------------
   Organised as:
     1. Design tokens      — the single source of truth (colours, type, space)
     2. Reset & base       — element defaults
     3. Layout             — the app shell / device frame
     4. Components          — masthead, hero, pillar cards, journey, icons
     5. Context adaptations — desktop, PWA (standalone) and native shells
   Everything is driven by custom properties so the look can be retuned in one
   place, and components are named with a BEM-ish convention for reuse.
   ========================================================================== */

/* 1. ─────────────────────────────────────────── Design tokens ───────────── */
:root {
    /* Palette — a dark, warm-gold theme ("als alles duister is"). */
    --c-bg:            #0a0e17;
    --c-bg-elevated:   #10151f;
    --c-surface:       #13171f;
    --c-surface-hover: #171c26;
    --c-border:        rgba(255, 255, 255, 0.08);
    --c-border-gold:   rgba(211, 175, 106, 0.28);

    --c-gold:          #d3af6a;
    --c-gold-strong:   #e7cd93;
    --c-gold-soft:     rgba(211, 175, 106, 0.12);

    --c-text:          #e9e6df;
    --c-heading:       #f6f2ea;
    --c-muted:         #9a9ea8;
    --c-muted-dim:     #6f737d;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Radii */
    --radius-sm: 12px;
    --radius:    16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                   0 8px 24px -16px rgba(0, 0, 0, 0.8);

    /* Layout */
    --gutter: 1.25rem;          /* horizontal page padding */
    --frame-max: 460px;         /* device width when framed on desktop */
    --content-max: 34rem;
}

/* 2. ─────────────────────────────────────────── Reset & base ────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* The root background also tints the Android system navigation bar in the
       installed PWA — without it the bar falls back to the white UA canvas. */
    background-color: var(--c-bg);
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* Focus visibility for keyboard users. */
:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Shared icon sizing. */
.icon { width: 100%; height: 100%; }

/* 3. ─────────────────────────────────────────── Layout / shell ──────────── */
.app {
    min-height: 100dvh;
    background-color: var(--c-bg);
}

.app__frame {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--c-bg);
}

/* 4. ─────────────────────────────────────────── Components ──────────────── */

/* 4a. Masthead ------------------------------------------------------------- */
.masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

/* Right-hand side of the masthead: the ticket call to action, and the admin
   link when there is one. Aligned to the brand's cap height rather than the
   flex line, so the pill sits level with "AADI". */
.masthead__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: 2px;
}

/* The one account link the app screens carry: the admin for admins, signing
   out for everyone else. Kept quiet — it is not what the screen is about. */
.masthead__account {
    display: flex;
    gap: var(--space-4);
}

.masthead__account a {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.masthead__account a:hover { color: var(--c-gold); }

.brand { display: flex; flex-direction: column; gap: 2px; }

/* The brand lockup. The source SVG's paths carry no `fill`, so on its own it
   renders black — invisible here. Used as a mask rather than an <img>: the shape
   comes from the file, the colour from --c-gold, and it stays one cacheable
   request instead of 13KB of inline markup on every page. The ratio matches the
   file's viewBox, which is cropped to the artwork. */
.brand__logo {
    display: block;
    /* Driven by width — it is a wordmark, so how wide it sits in the masthead is
       the thing worth controlling; the height follows from the viewBox ratio. */
    width: 8rem;
    aspect-ratio: 1200 / 334;
    background-color: var(--c-heading);
    -webkit-mask: url("../images/AADI-LogoLockup2-black-EqTLrEN.svg") center / contain no-repeat;
    mask: url("../images/AADI-LogoLockup2-black-EqTLrEN.svg") center / contain no-repeat;
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--c-gold);
}

.brand__tagline {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
    opacity: 0.85;
}

/* 4b. Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(300px, 46vh, 440px);
    overflow: hidden;
}

/* The banner photo, full-bleed: `cover` fills the hero at any aspect ratio and
   the crop comes off the flanks. */
.hero__media {
    position: absolute;
    inset: 0;
    background-color: var(--c-bg);
    background-image: url("../images/hero-banner-dF2gGEl.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Dark on the left so the overlay text stays legible, light enough that the
   photo itself isn't dimmed. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.15) 100%);
}

.hero__overlay {
    z-index: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    font-style: italic;
    margin-left: var(--space-6);
    max-width: 450px;
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 8vw, 2.9rem);
    line-height: 1.05;
    color: var(--c-heading);
    max-width: 10ch;
}

.hero__sub-title {
    font-weight: 300;
}

/* 4c. Pillar cards --------------------------------------------------------- */
.pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--gutter) 0;
}

.pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pillar:hover { background-color: var(--c-surface-hover); border-color: var(--c-border-gold); }
.pillar:active { transform: scale(0.99); }

/* Non-interactive pillar (no action): drop the trailing column and affordances. */
.pillar--static { grid-template-columns: auto minmax(0, 1fr); cursor: default; }
.pillar--static:hover { background-color: var(--c-surface); border-color: var(--c-border); }
.pillar--static:active { transform: none; }

.pillar__icon {
    display: grid;
    place-items: center;
    /* Top of its cell rather than centred: the cards are different heights, and
       a card with a logo under the copy is tall enough that a centred icon reads
       as floating. (On desktop the pillar is a column, where this is already the
       case, so the declaration is a no-op there.) */
    align-self: start;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: var(--c-gold);
    background-color: var(--c-gold-soft);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-sm);
}

.pillar__content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pillar__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.pillar__title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--c-heading);
}

.pillar__text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--c-muted);
}

/* Source credit inside a pillar — currently the NBG mark on the daily verse.
   Sized by width to match .pillar__icon, so the two marks measure alike; the
   height follows from the file's ratio. Held back from full brightness so it
   reads as a credit and not as a second heading.

   Phone: last item in the content column, so it falls below the copy instead of
   stealing width from it. Desktop lifts it into the card's top corner. */
.pillar__logo {
    width: 44px;
    height: auto;
    margin-top: var(--space-3);
    opacity: 0.75;
}

.pillar__action { display: grid; place-items: center; flex-shrink: 0; }

.pillar__action--chevron {
    width: 20px;
    height: 20px;
    color: var(--c-muted-dim);
}

.pillar__action--play {
    width: 40px;
    height: 40px;
    padding: 11px 10px 11px 12px;
    color: var(--c-gold);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-pill);
}
.pillar:hover .pillar__action--play { background-color: var(--c-gold-soft); }

/* 4d. Journey / progress --------------------------------------------------- */
.journey {
    margin: var(--space-5) var(--gutter);
    margin-top: var(--space-5);
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.journey__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-heading);
}

.journey__subtitle {
    margin-top: var(--space-1);
    font-size: 0.88rem;
    color: var(--c-muted);
}

.progress {
    margin-top: var(--space-4);
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.progress__bar {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
}

/* Separate the journey card from the pillars. A fixed top margin (rather than
   `margin-top: auto`) keeps a clear gap even when the page scrolls — on a phone
   the content overflows the viewport, so `auto` would collapse to 0. */
.home { display: flex; flex-direction: column; flex: 1; }
.home > .journey { margin-top: var(--space-6); }

/* 4e. Sub-page header (back link + centred title) ------------------------- */
.subhead {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

.subhead__back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: var(--c-gold);
    border: 1px solid var(--c-border-gold);
    border-radius: var(--radius-pill);
}
.subhead__back:hover { background-color: var(--c-gold-soft); }

.subhead__titles {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

.subhead__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.subhead__subtitle {
    margin-top: 2px;
    font-size: 0.9rem;
    color: var(--c-gold);
    opacity: 0.75;
}

/* 4f. Sub-page content --------------------------------------------------- */
.subpage {
    flex: 1;
    padding: var(--space-3) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
}

.empty {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--c-muted);
}

/* Video list (Het Schone) */
.video-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
    border-radius: var(--radius);
}

.video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-3);
}

.video__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-heading);
}

.video__artist {
    font-size: 0.85rem;
    color: var(--c-muted);
}

/* Reflection (Het Goede) */
.reflection__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-5);
}

.reflection__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border-gold);
}

.reflection__title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-heading);
}

.reflection__author {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--c-gold);
}

.reflection__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.reflection__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reflection__body p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-text);
}

/* Long reflections are clamped to roughly ten lines, with a fade into the page
   background hinting at the rest. expandable_controller adds .is-collapsed and
   reveals the button, so without JavaScript the whole text stays visible. */
.reflection__body.is-collapsed .reflection__text {
    position: relative;
    max-height: 17em;
    overflow: hidden;
}

.reflection__body.is-collapsed .reflection__text::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5em;
    background: linear-gradient(to bottom, transparent, var(--c-bg));
    pointer-events: none;
}

.reflection__more {
    align-self: flex-start;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
    background: none;
    border: 0;
    cursor: pointer;
}

.reflection__more:hover { color: var(--c-gold-strong); }

/* 4g. Auth — login / registration ----------------------------------------- */
/* The pages you can reach without an account: one centred card, no app chrome. */
.auth {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--gutter)
             calc(var(--space-6) + env(safe-area-inset-bottom));
}

/* The store link on the login screen. Taken out of the flow so it sits in the
   top corner like the home masthead's, instead of pushing the centred card
   down. It lives in the padding the .auth box already reserves. */
.auth__top {
    position: absolute;
    top: calc(var(--space-4) + env(safe-area-inset-top));
    right: var(--gutter);
}

.auth__card {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-6) var(--space-5);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.auth__brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-5);
}

/* Invitation under the brand lockup. The .auth__brand column's own gap is 2px,
   tuned for a wordmark sitting on its subtitle, so this adds its own air. */
.auth__tagline {
    margin-top: var(--space-2);
    font-size: 0.92rem;
    color: var(--c-muted);
}

.auth__title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--c-heading);
}

.auth__intro {
    margin-top: var(--space-3);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--c-text);
}

.auth__intro--muted { color: var(--c-muted); font-size: 0.85rem; }
.auth__intro strong { color: var(--c-gold); font-weight: 600; }

.auth__notice {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: 0.88rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

.auth__notice--error {
    color: #f3c9c0;
    background-color: rgba(176, 62, 44, 0.16);
    border-color: rgba(176, 62, 44, 0.4);
}

.auth__notice--success {
    color: var(--c-gold-strong);
    background-color: var(--c-gold-soft);
    border-color: var(--c-border-gold);
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.auth__aside {
    font-size: 0.88rem;
    color: var(--c-muted);
    text-align: center;
}

.auth__aside a { color: var(--c-gold); }
.auth__aside a:hover { color: var(--c-gold-strong); }

/* Inside a form (the "wachtwoord vergeten?" line under the login button). */
.auth__aside--inline { margin-top: calc(-1 * var(--space-2)); font-size: 0.82rem; }

/* Form rows — shared by the auth forms and Symfony's form_row() output. */
.field, .auth__form > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field__label, .auth__form label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.field__input, .auth__form input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--c-text);
    background-color: var(--c-bg-elevated);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.field__input:focus, .auth__form input:focus {
    outline: none;
    border-color: var(--c-border-gold);
    box-shadow: 0 0 0 3px var(--c-gold-soft);
}

/* Validation messages rendered by form_row(). */
.auth__form ul {
    list-style: none;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #f3c9c0;
}

.btn {
    display: inline-flex;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.btn--primary {
    color: #0a0e17;
    background-color: var(--c-gold);
}

.btn--primary:hover { background-color: var(--c-gold-strong); }

/* Compact variant, for a call to action that sits in a header rather than at
   the end of a form. The uppercase letterspacing matches the other masthead
   type, so the pill reads as part of the header and not as a form control. */
.btn--sm {
    padding: 0.5rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 5. ─────────────────────────────────────────── Context adaptations ─────── */

/* Phone layout — the complement of the desktop block's
   `(min-width: 900px) and (display-mode: browser)` gate, so it also covers the
   installed PWA at any width. */
@media (max-width: 899.98px), (display-mode: standalone) {
    /* Beheer is a desktop affordance; the phone screens stay free of account
       chrome. Still reachable by going to /admin directly. */
    .masthead__account { display: none; }

    /* The base .btn--sm is tuned for the login form's width; in the masthead it
       has to share a narrow row with the logo, so it comes down a step. */
    .btn--sm {
        padding: 0.4rem 0.7rem;
        font-size: 0.64rem;
        letter-spacing: 0.1em;
    }
}

/* 5a. Narrow desktop browser window (not an installed PWA, below the desktop
   layout): present the phone design centred in a device frame so it doesn't
   stretch full-bleed. */
@media (min-width: 560px) and (max-width: 899.98px) and (display-mode: browser) {
    .app {
        display: grid;
        place-items: center;
        padding: var(--space-6);
        background: radial-gradient(90% 60% at 50% -5%, #121a2b 0%, var(--c-bg) 70%);
    }

    .app__frame {
        width: 100%;
        max-width: var(--frame-max);
        height: min(88dvh, 900px);
        border: 1px solid var(--c-border);
        border-radius: 30px;
        /* Fixed-height device frame: taller pages scroll inside it. */
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
    }

    .masthead { padding-top: var(--space-5); }
    .journey { padding-bottom: var(--space-5); }
}

/* 5b. Desktop browser — a bespoke wide layout: a full-width header/hero with
   the copy scaled up, the three pillars side by side (taller, roomier), and a
   full-width progress bar below. Gated on `display-mode: browser`, so an
   installed PWA (even on a large screen) keeps the phone design. */
@media (min-width: 900px) and (display-mode: browser) {
    .app {
        min-height: 100dvh;
        background: radial-gradient(130% 70% at 50% -10%, #101728 0%, var(--c-bg) 62%);
    }

    .app__frame {
        max-width: 1180px;
        margin: 0 auto;
        min-height: 100dvh;
        padding: 0 var(--space-6) var(--space-7);
    }

    /* Brand header across the top */
    .masthead { padding: var(--space-6) 0 var(--space-4); }
    .brand__name { font-size: 2.4rem; }
    .brand__logo { width: 14rem; }
    .masthead__actions { gap: var(--space-5); padding-top: 6px; }
    .btn--sm { padding: 0.6rem 1.2rem; font-size: 0.78rem; }

    /* Full-width hero banner, copy scaled up */
    .home { display: block; }
    .hero {
        min-height: clamp(340px, 44vh, 480px);
        border-radius: var(--radius-lg);
    }

    /* The copy sits in the left column of the banner, vertically centred. */
    .hero__overlay {
        position: absolute;
        inset: 0;
        padding: 0;
    }
    .hero__title {
        left: var(--space-6);
        right: 72%;
        max-width: none;
        font-size: clamp(3rem, 4.6vw, 4rem);
    }

    /* Three pillars side by side */
    .pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        padding: var(--space-6) 0 0;
    }
    .pillar {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        min-height: 250px;
        padding: var(--space-5);
    }
    .pillar--static { display: flex; }
    .pillar__icon { width: 54px; height: 54px; padding: 13px; }
    .pillar__content { gap: 6px; }
    .pillar__title { font-size: 1.15rem; }
    .pillar__text { font-size: 0.95rem; }
    .pillar__action { margin-top: auto; align-self: flex-end; }

    /* The card is a column here, so the logo comes out of the flow to reach the
       opposite top corner. Translated by half its own height so it centres on the
       54px icon rather than hanging from the same top edge. */
    .pillar__logo {
        position: absolute;
        top: calc(var(--space-5) + 27px);
        right: var(--space-5);
        transform: translateY(-50%);
        width: 54px;
        margin-top: 0;
    }

    /* Full-width progress bar below the pillars */
    .home > .journey { margin: var(--space-6) 0 0; padding-bottom: var(--space-5); }

    /* Sub-pages: keep content readable, videos two across */
    .subhead,
    .subpage { max-width: 960px; margin-inline: auto; width: 100%; }
    .subhead { padding-top: var(--space-6); }
    .subpage { padding-top: var(--space-5); }
    .video-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .reflection { max-width: 720px; margin-inline: auto; }
}

/* 5c. PWA — launched standalone. Give the OS status bar breathing room and
   lean into the full-bleed, app-like feel. */
@media (display-mode: standalone) {
    .masthead { padding-top: calc(var(--space-6) + env(safe-area-inset-top)); }
}

/* 5d. Native shell (Symfony UX Native / Hotwire Native) hides the web chrome. */
.is-native .masthead { padding-top: var(--space-4); }

/* 6. ─────────────────────────────────────────── Reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* 7. ─────────────────────────────────────── PWA swipe transitions (PoC) ──── */
/* In the installed PWA, let the browser own vertical scrolling while our swipe
   controller reads horizontal gestures. */
@media (display-mode: standalone) {
    body { touch-action: pan-y; }

    /* Directional slide for Turbo visits, driven by data-swipe-dir (set by the
       swipe controller). Without it, view transitions use the default fade. */
    html[data-swipe-dir="forward"]::view-transition-old(root) { animation: aadi-slide-out-left 0.28s ease both; }
    html[data-swipe-dir="forward"]::view-transition-new(root) { animation: aadi-slide-in-right 0.28s ease both; }
    html[data-swipe-dir="back"]::view-transition-old(root) { animation: aadi-slide-out-right 0.28s ease both; }
    html[data-swipe-dir="back"]::view-transition-new(root) { animation: aadi-slide-in-left 0.28s ease both; }
}

@keyframes aadi-slide-out-left { to { transform: translateX(-100%); } }
@keyframes aadi-slide-in-right { from { transform: translateX(100%); } }
@keyframes aadi-slide-out-right { to { transform: translateX(100%); } }
@keyframes aadi-slide-in-left { from { transform: translateX(-100%); } }