/* APERTURE — photography-site aesthetic ported from the legacy :8000 dashboard.
   Gallery-white surface, Inter sans, single Magnum-red accent used sparingly.
*/

:root {
    --wall:         #F5F4F0;
    --wall-2:       #EDEBE5;
    --wall-3:       #DFDBCF;
    --frame:        #1A1918;
    --frame-soft:   #3A3733;

    --ink:          #0F0E0D;
    --ink-2:        #4A4641;
    --ink-3:        #8A857D;
    /* --ink-4 was #B5AFA4 (1.98:1 against --wall — fails WCAG AA-large
       at 3:1). Bumped to #706A5E (4.88:1 — passes AA body) to fix the
       contrast on small mono-cap text used across cadre marks, mode-
       toggle marks, saved-search meta, and the various muted footnotes.
       The warm grey-brown character is preserved; the visual weight
       lifts slightly but the result reads correctly under low-vision
       tooling and matches the palette's editorial restraint. */
    --ink-4:        #706A5E;
    --ink-5:        #D3CEC1;

    /* Magnum red — reserved for deadlines <14d, prestige warnings, primary CTAs */
    --red:          #A53E2C;
    --red-dim:      #822D1D;
    --red-wash:     rgba(165, 62, 44, 0.08);
    --red-line:     rgba(165, 62, 44, 0.30);

    --positive:     #586E4E;
    --positive-wash:rgba(88, 110, 78, 0.10);
    --amber:        #96712A;

    --rule:         rgba(15, 14, 13, 0.10);
    --rule-2:       rgba(15, 14, 13, 0.18);
    --rule-soft:    rgba(15, 14, 13, 0.05);

    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-exhibit: cubic-bezier(0.32, 0.72, 0, 1);
    /* Premium easing — slightly slower exit, longer breath. Used on cards
       for the lift-on-hover and on the reveal-on-scroll fade-up. */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

    /* Card design tokens — unify the masthead's modern look across every
       card-like surface on the site. Anywhere we'd reach for a hard
       border + flat fill, we use these instead. */
    --card-radius:        10px;
    --card-radius-sm:     6px;
    --card-surface:       linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    --card-shadow:        0 1px 0 rgba(255, 255, 255, 0.4) inset,
                          0 8px 22px -8px rgba(15, 14, 13, 0.06),
                          0 1px 3px rgba(15, 14, 13, 0.03);
    --card-shadow-hover:  0 1px 0 rgba(255, 255, 255, 0.4) inset,
                          0 18px 40px -12px rgba(15, 14, 13, 0.10),
                          0 4px 12px rgba(15, 14, 13, 0.04);
    --card-transition:    transform 0.32s var(--ease-premium),
                          box-shadow 0.32s var(--ease-premium),
                          border-color 0.22s var(--ease-out);

    /* ════════════════════════════════════════════════════════════
       The four-register design grammar — viewer-aware design tokens.

       Body classes set the register; components consume the --reg-*
       tokens and adapt naturally. No component knows what register
       it's in — the register only owns the token values. Defaults
       below are the public register; body.viewer-* classes override
       the subset of tokens that matter for that register.

         viewer-public      Anonymous visitor. Marketing CTAs visible,
                            "try it free" copy active. The :root
                            defaults match this register so a body
                            without any viewer- class still renders
                            correctly (defensive against ctx that
                            doesn't pass request through _base_ctx).
         viewer-apprentice  Signed-in Free user. The room recognises
                            them by name (template-level), but visual
                            register stays public. No token override —
                            the room hasn't opened yet.
         viewer-studio      Paying Studio. Section spacing breathes
                            more, eyebrow tracking widens, editorial
                            layer surfaces as default. Paper and CTA
                            unchanged from public — Studio is content
                            density, not paper tone.
         viewer-atelier     Paying Atelier. Full domestic register.
                            Card paper warms (60/40 mix toward wall-2),
                            leading lengthens, eyebrow tracking widens
                            further. Critically: primary CTAs reserve
                            --red for true alarms only and use --frame
                            for routine emphasis — the calmer, more
                            premium read that fits "permission, not
                            coercion".

       Components migrate onto these tokens incrementally as their
       surfaces are touched. Legacy components keep their hardcoded
       values and still render in the public register regardless of
       viewer — graceful, no big-bang migration.
       ════════════════════════════════════════════════════════════ */

    --reg-section-spacing:      56px;
    --reg-section-spacing-lg:   80px;
    --reg-eyebrow-letter:       0.06em;
    --reg-lede-leading:         1.55;
    --reg-card-paper:           var(--wall);
    --reg-card-paper-2:         var(--wall-2);
    --reg-cta-primary-bg:       var(--red);
    --reg-cta-primary-color:    var(--wall);
    --reg-cta-primary-border:   var(--red);
    --reg-accent:               var(--red);
}

/* Apprentice — recognition through template content, not visual
   register. No token override: the room hasn't opened yet. The
   class is still applied so pages can branch content on it
   (greeting line, hidden marketing CTAs) without false positives. */
body.viewer-apprentice {
    /* deliberately empty — see comment above */
}

body.viewer-studio {
    --reg-section-spacing:      64px;
    --reg-section-spacing-lg:   96px;
    --reg-eyebrow-letter:       0.08em;
    /* Paper, CTA, accent unchanged from public — Studio's felt
       difference is editorial density, not paper tone. The
       larger reg lift comes at the Atelier threshold. */
}

body.viewer-atelier {
    --reg-section-spacing:      72px;
    --reg-section-spacing-lg:   112px;
    --reg-eyebrow-letter:       0.10em;
    --reg-lede-leading:         1.65;
    /* Warmer card paper — a 60/40 mix toward wall-2. Subtle
       enough that legacy components on the same page don't clash;
       distinct enough that components consuming --reg-card-paper
       feel materially different from the public register. */
    --reg-card-paper:           color-mix(in srgb, var(--wall) 60%, var(--wall-2));
    --reg-card-paper-2:         var(--wall-2);
    /* The premium CTA inversion. Red is reserved for true alarms
       only (deadlines <14d, prestige warnings). Routine primary
       CTAs land on --frame — dark, calm, editorial. This is the
       single largest felt difference between Studio and Atelier. */
    --reg-cta-primary-bg:       var(--frame);
    --reg-cta-primary-color:    var(--wall);
    --reg-cta-primary-border:   var(--frame);
    --reg-accent:               var(--frame);
}

/* ─── Scroll progress bar — a 2px red line pinned to the top of the
     viewport that scales from left to right as the page scrolls.
     Subtle "the site is alive" feedback without competing with content. ─── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--red) 80%, var(--ink)) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.12s var(--ease-out);
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(165, 62, 44, 0.35);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-progress { transition: none; }
}


/* ─── Reveal-on-scroll — apply .reveal-up to any element and the IIFE
     in app.js fades + lifts it into view on intersection. Honors
     prefers-reduced-motion: those users see the static end-state.
     Apple-tier magnitude: 48px translate + scale-from-0.92 + 4px blur,
     1.1s glide on `--ease-premium`. Each element arrives like a hero
     image landing rather than fading. ─── */
.reveal-up {
    opacity: 0;
    transform: translateY(48px) scale(0.94);
    filter: blur(4px);
    transition:
        opacity 1.1s var(--ease-premium),
        transform 1.1s var(--ease-premium),
        filter 0.7s var(--ease-out);
    will-change: opacity, transform, filter;
}
.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-up { opacity: 1; transform: none; filter: none; transition: none; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--wall);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
button { font-family: inherit; font-size: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { display: block; max-width: 100%; }
em { font-style: italic; color: var(--red); }

h1, h2, h3, h4 { margin: 0 0 0.5em 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 1em 0; }
ul { margin: 0 0 1em 0; padding-left: 1.2em; }

.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.warn  { color: var(--red); }

/* ═════ Masthead ═════ */
.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid var(--rule);
    background: var(--wall);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
/* Inline SVG mark in the masthead — sized to align with .brand-name's
   x-height. Was a 10px solid red circle pre-2026-05-04; replaced with
   the full frame-and-dot inline SVG so masthead branding matches the
   favicon and og:image. flex-shrink: 0 keeps it from squishing in the
   tight masthead row on narrow viewports. */
.brand-mark {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: block;
}
.brand-sub { color: var(--ink-3); font-weight: 400; }
.nav { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); align-items: center; }
.nav a:hover { color: var(--frame); }
/* Sign-in sits at the end of the nav, visually lifted with a thin ink
   border so returning users can find their way back in. Stays text
   only — no red CTA — so it doesn't compete with the brand mark. */
.nav-signin {
    border: 1px solid var(--rule-2);
    padding: 6px 14px;
    border-radius: 4px;
    color: var(--frame);
    transition: border-color 0.15s, background 0.15s;
}
.nav-signin:hover {
    border-color: var(--frame);
    background: var(--frame);
    color: var(--wall);
}

/* Signed-in account chip — replaces .nav-signin when the entitlement
   cookie verifies. Uses a small filled red dot so the user gets a
   visceral "I'm signed in" cue at every page load. The full email
   shows on hover via [title]; the visible label stays "Account" so
   long emails don't blow out the nav. */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    color: var(--frame);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.nav-account-mark {
    color: var(--red);
    font-size: 10px;
    line-height: 1;
}
.nav-account:hover {
    border-color: var(--frame);
    background: var(--frame);
    color: var(--wall);
}
.nav-account:hover .nav-account-mark { color: var(--wall); }

/* ── Tier-aware nav treatment ──
   Studio + Atelier accounts pick up a thin red border + a tier pill
   inline next to the display name. Apprentice (free) keeps the
   neutral chrome — labelling free reads as a downgrade and we don't
   want to do that. The pill itself is small mono-uppercase, sized
   so it doesn't dominate the nav even at desktop widths. */
.nav-account-paid {
    border-color: color-mix(in srgb, var(--red) 35%, var(--rule-2));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--red) 10%, transparent) inset;
}
.nav-account-paid .nav-account-mark { color: var(--red); }
.nav-account-paid:hover {
    border-color: var(--red);
    background: var(--red);
    color: var(--wall);
}
.nav-account-paid:hover .nav-account-mark,
.nav-account-paid:hover .nav-account-tier {
    color: var(--wall);
    border-color: var(--wall);
}
.nav-account-tier {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: 100px;
    line-height: 1.2;
    transition: color 0.15s, border-color 0.15s;
}
/* Atelier wins a slightly darker chip to read as the higher
   tier — same hue, ~+10% saturation, distinguishable at a glance
   from Studio's lighter pill but still in the brand vocabulary. */
.nav-account-tier-deep {
    color: var(--wall);
    background: var(--red);
    border-color: var(--red);
}
.nav-account-paid:hover .nav-account-tier-deep {
    background: var(--wall);
    color: var(--red);
}
@media (max-width: 720px) {
    /* On narrow viewports the tier pill collapses to its first
       letter (S / A) so the nav doesn't wrap the user's name onto
       a second line. We use ::before / hide-text for the
       responsive treatment to avoid duplicating markup per breakpoint. */
    .nav-account-tier {
        font-size: 0;
        padding: 2px 4px;
        line-height: 1;
    }
    .nav-account-tier::before {
        font-size: 9.5px;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }
    .nav-account-tier-pro::before { content: "S"; }
    .nav-account-tier-deep::before { content: "A"; }
}

/* ═════ Main layout ═════ */
.main { max-width: 1100px; margin: 0 auto; padding: 60px 40px; flex: 1; width: 100%; }

/* ═════ Hero — editorial masthead, text-forward ═════ */
.hero { margin-bottom: 60px; padding-top: 24px; }
.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 28px;
    display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before {
    content: '№';
    font-family: var(--font-sans); font-weight: 700;
    font-size: 14px; color: var(--ink); letter-spacing: 0;
}
.hero-title {
    font-size: clamp(40px, 6.4vw, 76px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.038em;
    max-width: 16ch;
    margin: 0 0 28px;
    color: var(--ink);
}
.hero-sub {
    font-size: 18px; line-height: 1.55; color: var(--ink-2);
    max-width: 64ch; margin: 0 0 36px;
    letter-spacing: -0.005em;
}
.hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-note {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 18px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* First-time-user prompt: tiny tour link under the hero note. Keeps the hero
   clean while giving new visitors a 30-second walkthrough path. */
.hero-tour {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-3);
}
.hero-tour-link {
    color: var(--red);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 0.2s var(--ease-out);
    font-weight: 500;
}
.hero-tour-link:hover { border-color: var(--red); }

/* ═════ Sections ═════ */
.section { margin-bottom: 80px; scroll-margin-top: 80px; }
.section-title {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--ink-3); font-weight: 500; margin-bottom: 28px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 36px;
}
.step-n {
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
    margin-bottom: 10px;
}
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p  { color: var(--ink-2); font-size: 15px; }

/* ═════ Privacy section ═════ */
.privacy { background: var(--wall-2); padding: 48px 40px; border-radius: 2px; margin: 0 -40px 80px; }
.no-list { list-style: none; padding: 0; margin: 0 0 24px 0; }
.no-list li {
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}
.no-list li:last-child { border-bottom: none; }
.no-list li::before {
    content: "✕"; position: absolute; left: 0; color: var(--red); font-weight: 500;
}
.privacy-footnote { color: var(--ink-2); font-size: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ═════ Buttons ═════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--frame);
    background: var(--frame);
    color: var(--wall);
    font-weight: 500; font-size: 15px;
    letter-spacing: -0.005em;
    border-radius: 2px;
    transition: all 0.15s var(--ease-out);
    cursor: pointer;
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--wall); }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--wall); }
.btn-primary:hover { background: var(--red-dim); border-color: var(--red-dim); }
.btn-outline {
    background: transparent; color: var(--frame); border-color: var(--rule-2);
}
.btn-outline:hover { background: var(--frame); color: var(--wall); border-color: var(--frame); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* Disabled-state — was missing entirely, so the "Find competitions"
   button looked fully active even with zero photos uploaded. Now it
   visibly communicates "not clickable yet" and suppresses the hover
   color shift that made the lie worse on hover. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
    background: var(--frame);
    border-color: var(--frame);
    color: var(--wall);
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
    background: var(--red);
    border-color: var(--red);
}
.btn-outline:disabled:hover,
.btn-outline[disabled]:hover {
    background: transparent;
    color: var(--frame);
    border-color: var(--rule-2);
}

/* ═════ CTA mid-page ═════ */
.cta-box {
    text-align: center; padding: 56px 40px;
    background: var(--frame); color: var(--wall); border-radius: 2px;
}
.cta-box h2 { font-size: 28px; margin-bottom: 12px; }
.cta-box p { color: var(--ink-4); margin-bottom: 24px; }
.cta-box .btn-primary { background: var(--wall); color: var(--frame); border-color: var(--wall); }
.cta-box .btn-primary:hover { background: var(--red); color: var(--wall); border-color: var(--red); }

/* ═════ Analyze page — premium upload flow ═════ */
.analyze { max-width: 760px; margin: 0 auto; }
.analyze-head {
    margin-bottom: 56px;
    /* Premium spacing — give the hero room to breathe instead of
       feeling like a documentation block. */
}
.analyze-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}
/* Smaller, calmer H1 (was 44px max → 36px max). The header used to
   shout "Drop your photos. We'll tell you which to submit." across
   two lines; new copy is one assertive sentence and the type can
   relax. */
.page-title {
    font-size: clamp(28px, 3.6vw, 36px);
    margin-bottom: 14px;
    letter-spacing: -0.022em;
    line-height: 1.12;
    font-weight: 500;
}
.lede {
    font-size: 15.5px;
    color: var(--ink-2);
    max-width: 600px;
    margin-bottom: 0;
    line-height: 1.6;
}
/* Inline tour CTA inside the lede paragraph. Subtle by default,
   underlines on hover. Replaces the noisy onboarding-hint card. */
.lede-tour-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms;
    font-size: 14px;
}
.lede-tour-link:hover { border-bottom-color: var(--red); }

/* Collapsible mode-explainer — keeps the page calm but lets the
   curious user expand to see tier caps + behaviour. */
.upload-mode-details {
    margin: 14px 0 32px;
    padding: 0;
    font-size: 13.5px;
    color: var(--ink-3);
}
.upload-mode-details summary {
    cursor: pointer;
    list-style: none;
    color: var(--ink-2);
    font-size: 13px;
    padding: 4px 0;
    user-select: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 120ms;
}
.upload-mode-details summary::-webkit-details-marker { display: none; }
.upload-mode-details summary::before {
    content: "+ ";
    color: var(--red);
    font-weight: 600;
}
.upload-mode-details[open] summary::before { content: "− "; }
.upload-mode-details summary:hover { border-bottom-color: var(--rule); }
.upload-mode-details p {
    margin: 12px 0 0;
    line-height: 1.55;
}
.upload-mode-details p strong { color: var(--ink-2); font-weight: 600; }
.upload-mode-details p em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 12.5px;
    color: var(--ink-3);
}

.analyze-form { margin-bottom: 32px; }

/* ─── Drag-drop dropzone ─── */
.upload-zone {
    position: relative;
    border: 2px dashed var(--rule-2);
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 80% 100% at 50% 100%,
            color-mix(in srgb, var(--red) 5%, transparent) 0%,
            transparent 65%),
        var(--card-surface);
    padding: 56px 32px;
    margin-bottom: 16px;
    box-shadow: var(--card-shadow);
    transition:
        border-color 0.32s var(--ease-premium),
        background 0.32s var(--ease-premium),
        box-shadow 0.32s var(--ease-premium),
        transform 0.32s var(--ease-premium);
    min-height: 220px;
    display: flex; align-items: center; justify-content: center;
}
.upload-zone:hover {
    border-color: color-mix(in srgb, var(--red) 50%, var(--rule-2));
    box-shadow: var(--card-shadow-hover);
}
.upload-zone.dragging {
    border-color: var(--red);
    background:
        radial-gradient(ellipse 80% 100% at 50% 100%,
            color-mix(in srgb, var(--red) 16%, transparent) 0%,
            transparent 65%),
        var(--red-wash);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}
.upload-zone.staged { border-style: solid; padding: 24px; }
.upload-zone.error { border-color: var(--red); background: var(--red-wash); }

/* The native file input — covers the zone for drag-drop, transparent. */
.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.upload-zone.staged input[type="file"] { pointer-events: none; }

.upload-zone-prompt {
    text-align: center;
    z-index: 2;
    pointer-events: none;
}
.upload-zone-icon {
    width: 48px; height: 48px;
    color: var(--ink-3);
    margin-bottom: 14px;
    transition: color 0.2s var(--ease-out);
}
.upload-zone.dragging .upload-zone-icon { color: var(--red); }
.upload-zone-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.upload-zone-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0;
    pointer-events: auto;
}
.upload-zone-pick {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    pointer-events: auto;
    z-index: 2;
    position: relative;
}
.upload-zone-pick:hover { color: var(--red-dim); }
.upload-zone-divider { margin: 0 6px; color: var(--ink-4); }
.upload-zone-meta { font-family: var(--font-mono); }

/* Preview state — when a file is staged */
.upload-zone-preview {
    display: flex; align-items: center; gap: 18px;
    width: 100%;
    z-index: 2;
    position: relative;
}
.upload-zone-preview img {
    width: 120px; height: 120px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--rule-2);
    flex-shrink: 0;
}
.upload-zone-info {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1; min-width: 0;
}
.upload-zone-info strong {
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.005em;
    word-break: break-all;
}
.upload-preview-stats {
    display: flex; gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.upload-zone-clear {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--rule-2);
    padding: 6px 12px;
    font-size: 12px;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 2px;
    margin-top: 4px;
    pointer-events: auto;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.upload-zone-clear:hover { border-color: var(--red); color: var(--red); }

/* Trust strip below the dropzone */
.upload-trust {
    list-style: none; padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
}
.upload-trust li {
    font-size: 13px;
    color: var(--ink-2);
    display: flex; align-items: center; gap: 8px;
}
.upload-trust-x {
    color: var(--red);
    font-weight: 600;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Profile details — same as before, with mono "optional" tag */
.profile { margin-bottom: 28px; }
.profile-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    text-transform: uppercase;
}

/* Submit + demo row */
.analyze-actions {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    padding-top: 24px;
}
.btn-lg { padding: 14px 28px; font-size: 15px; }
.analyze-actions-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-left: auto;
}

/* Premium spinner — mimics the mechanism's beam aesthetic */
.analyze-spinner {
    display: none;
    text-align: center;
    padding: 56px 20px;
    margin-bottom: 32px;
}
.htmx-request .analyze-spinner { display: block; }
.analyze-spinner-stage {
    position: relative;
    height: 4px;
    width: 240px;
    margin: 0 auto 28px;
    background: var(--wall-2);
    border-radius: 2px;
    overflow: hidden;
}
.analyze-spinner-track {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--red) 30%,
        var(--red-dim) 50%,
        var(--red) 70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: mech-sweep 1400ms linear infinite;
}
.analyze-spinner-beam {
    position: absolute;
    top: -8px; bottom: -8px;
    left: 50%;
    width: 1px;
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
    animation: mech-beam-glow 2400ms var(--ease-in-out) infinite;
}
.analyze-spinner-title {
    font-size: 17px; font-weight: 500;
    color: var(--ink); margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.analyze-spinner-sub {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--red);
    margin: 0 0 8px;
    letter-spacing: 0.02em;
    min-height: 1.4em;
}
.analyze-spinner-note {
    font-size: 12px;
    color: var(--ink-3);
    margin: 0;
}

/* Legacy class kept for the original .upload-form usage if any. */
.upload-form {
    background: var(--wall-2);
    padding: 32px;
    border-radius: 2px;
    max-width: 640px;
    margin-bottom: 32px;
}
.field { margin-bottom: 20px; }
.field label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.field input, .field select {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--rule-2); border-radius: 2px;
    background: var(--wall); font-size: 15px;
}
.field input:focus, .field select:focus {
    outline: none; border-color: var(--frame);
}
.field-hint { color: var(--ink-3); font-size: 12px; margin-top: 6px; margin-bottom: 0; }
.field-file input[type="file"] { cursor: pointer; padding: 8px; }

.profile summary {
    cursor: pointer; font-size: 13px; color: var(--ink-2);
    padding: 8px 0; font-weight: 500;
}
.profile-note { font-size: 13px; color: var(--ink-3); margin: 8px 0 16px; }
.profile-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}

/* ═════ Spinner ═════ */
.spinner { display: none; text-align: center; padding: 40px; color: var(--ink-2); }
.htmx-request .spinner { display: block; }
.spinner-dots { display: inline-flex; gap: 6px; margin-bottom: 16px; }
.spinner-dots span {
    width: 8px; height: 8px; border-radius: 50%; background: var(--red);
    animation: pulse 1.2s infinite ease-in-out;
}
.spinner-dots span:nth-child(2) { animation-delay: 0.15s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
.spinner-sub { font-size: 13px; color: var(--ink-3); }

/* ═════ Shortlist / results ═════ */
.shortlist:empty { display: none; }
.results-head { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.results-title { font-size: 28px; margin-bottom: 10px; }
.results-analysis { color: var(--ink-2); font-size: 14px; }
.chip-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-block; padding: 2px 10px;
    background: var(--wall-2); border: 1px solid var(--rule);
    font-size: 12px; border-radius: 2px; font-family: var(--font-mono);
}
.chip-cultural { border-color: var(--red-line); color: var(--red); }

/* AI chip — for categories with ai_policy_override (ai_permitted or ai_required).
   Distinct from the photographic categories. Uses a muted violet tint so it reads
   as "different track" at a glance without dominating the chip row. */
.chip-ai {
    border-color: color-mix(in srgb, var(--ink-1) 22%, transparent);
    background: color-mix(in srgb, #7c5cff 6%, var(--wall-2));
    color: color-mix(in srgb, #4a3aa8 80%, var(--ink-1));
}
.chip-ai-marker {
    display: inline-block;
    margin-right: 1px;
    font-size: 9px;
    color: color-mix(in srgb, #7c5cff 60%, var(--ink-3));
    transform: translateY(-1px);
}

.match-cards { display: grid; gap: 20px; }
.match-card {
    position: relative;
    background: var(--card-surface);
    border-radius: var(--card-radius);
    padding: 24px 28px;
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    /* Verdict Reveal — cards arrive one at a time, like a deck being
       turned over. Each card carries the same 540ms reveal but a
       staggered animation-delay so the eye reads them sequentially.
       The first card fires immediately on render; each subsequent
       card lands 120ms later. After the 8th card the delays cap so
       a long shortlist doesn't feel sluggish — readers can scroll
       past pre-revealed cards without waiting for the choreography
       to catch up. The original keyframe stays unchanged so no
       cascade math drifts elsewhere. */
    animation: match-card-in 540ms var(--ease-premium) both;
    animation-fill-mode: both;
}
.match-cards > .match-card:nth-child(1) { animation-delay: 0ms; }
.match-cards > .match-card:nth-child(2) { animation-delay: 120ms; }
.match-cards > .match-card:nth-child(3) { animation-delay: 240ms; }
.match-cards > .match-card:nth-child(4) { animation-delay: 360ms; }
.match-cards > .match-card:nth-child(5) { animation-delay: 460ms; }
.match-cards > .match-card:nth-child(6) { animation-delay: 540ms; }
.match-cards > .match-card:nth-child(7) { animation-delay: 600ms; }
.match-cards > .match-card:nth-child(n+8) { animation-delay: 640ms; }
@keyframes match-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0); }
}
.match-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
/* Prestige cards: soft red rule on the left edge — same language as the
   judge-CTA card, no hard 3px border that fights the rounded corners. */
.match-card-prestige::before {
    content: '';
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--red);
    opacity: 0.85;
}
.match-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.match-id {
    display: flex; align-items: flex-start; gap: 14px;
    flex: 1; min-width: 0;
}
.match-emblem {
    flex-shrink: 0;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    background: linear-gradient(135deg, var(--wall) 0%, var(--wall-2) 100%);
    margin-top: 2px;
    overflow: hidden;
    position: relative;
    transition:
        color 0.18s var(--ease-out),
        border-color 0.18s var(--ease-out),
        transform 0.25s var(--ease-out),
        box-shadow 0.25s var(--ease-out);
}
/* SVG monogram fallback — when no fetched logo exists. Sized to fill the
   72×72 card so it reads as an intentional cover, not a tiny postage-stamp
   icon. The .emblem-rich variants (NG / LensCulture / AAP) use the full
   frame; the simpler monograms still feel deliberate at this scale. */
.match-emblem svg { width: 56px; height: 56px; }
.match-emblem svg.emblem-rich { width: 64px; height: 64px; }
.match-card:hover .match-emblem {
    color: var(--red);
    border-color: var(--red-line);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

/* Real fetched logo / photo — overrides the SVG-monogram size and renders
   the image edge-to-edge inside the framed card. Matches the photographic
   feel the operator asked for ("make it feel like a photographer's site"). */
.match-emblem-photo {
    background: var(--wall);
    padding: 0;
}
.match-emblem-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight desaturation in resting state, full color on hover — keeps the
       page calm while making the card feel alive when the user engages. */
    filter: saturate(0.92);
    transition: filter 0.25s var(--ease-out), transform 0.5s var(--ease-out);
}
.match-card:hover .match-emblem-photo img {
    filter: saturate(1);
    transform: scale(1.04);
}
.match-id-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-title {
    font-size: 20px; margin: 0;
    font-weight: 600; letter-spacing: -0.018em;
    line-height: 1.2;
}
.match-title a:hover { color: var(--red); }
.match-organizer {
    margin: 0;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.02em;
}

.match-meta {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.match-fit {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 26px;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    display: flex; align-items: baseline; gap: 1px;
}
.fit-score-num {
    font-variant-numeric: tabular-nums;
    color: var(--red);
}
.fit-score-suffix {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 400;
    margin-left: 2px;
}
.match-fit-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-left: 8px;
    align-self: center;
}
.fit-score {
    font-family: var(--font-mono); font-weight: 600; font-size: 20px;
    color: var(--frame);
}
.fit-score small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.deadline {
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
    padding: 3px 8px; border: 1px solid var(--rule-2); border-radius: 2px;
    letter-spacing: 0.04em;
}
.deadline-close {
    color: var(--red);
    border-color: var(--red-line);
    background: var(--red-wash);
}

/* ════════════════════════════════════════════════════════════════════════════
   Verdict tier pills — honest label per match.
   Ported from autonomy/JUDGEMENT_BRAIN.md §5: strong_submit / submit / maybe /
   weak_match. Color-coded so a 10-row shortlist is scannable in one glance.
   The user makes the final call; we just label honestly.
   ════════════════════════════════════════════════════════════════════════════ */
.verdict-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 2px;
    line-height: 1.6;
    cursor: help;
}
/* strong_submit — green, the "yes go for it" tier */
.verdict-pill-strong_submit {
    color: var(--positive);
    border-color: rgba(88, 110, 78, 0.45);
    background: var(--positive-wash);
}
/* submit — red, the "worth the entry fee" tier (Magnum-red, our brand color) */
.verdict-pill-submit {
    color: var(--red);
    border-color: var(--red-line);
    background: var(--red-wash);
}
/* maybe — neutral grey, the "decent but unlikely" tier */
.verdict-pill-maybe {
    color: var(--ink-2);
    border-color: var(--rule-2);
    background: var(--wall-2);
}
/* weak_match — amber, the "best available, your call" tier */
.verdict-pill-weak_match {
    color: var(--amber);
    border-color: rgba(150, 113, 42, 0.45);
    background: rgba(150, 113, 42, 0.08);
}

.match-prestige-warn {
    margin: 16px 0;
    padding: 12px 14px;
    background: var(--red-wash);
    border-left: 3px solid var(--red);
    border-radius: 2px;
}
.match-prestige-warn strong {
    color: var(--red);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.match-prestige-warn p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
}

.match-actions { margin-top: 16px; }

/* Reasoning emphasis — concept hits as inline mono pills */
.category-line .hits em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    padding: 1px 6px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* Demo banner — honest framing when /analyze/demo renders */
.results-demo-banner {
    margin-bottom: 20px;
    padding: 10px 14px;
    background: var(--wall-2);
    border-left: 3px solid var(--amber);
    font-size: 13px;
    color: var(--ink);
}
.results-demo-banner strong {
    color: var(--amber);
    font-weight: 600;
    margin-right: 4px;
}

.results-footnote {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.55;
}
.results-footnote strong { color: var(--ink); font-weight: 600; }

/* ─── AI Act Art. 50 per-output disclosure tag ─── small, calm,
   always present at the bottom of any verdict surface. The dot
   uses --red so the tag reads as ours, not as a system warning.
   Placed inside the verdict container so HTMX swaps don't
   leave it stranded. */
.ai-output-tag {
    margin-top: 24px;
    padding: 12px 16px;
    border-top: 1px dashed var(--rule);
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-output-tag-mark {
    color: var(--red);
    font-size: 14px;
    line-height: 1;
}

/* Empty state — friendlier than the original */
.empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    color: var(--ink-3);
}
.empty h3 {
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}
.empty p {
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 52ch;
    margin-left: auto; margin-right: auto;
    font-size: 15px;
}
.empty-suggestions {
    list-style: none; padding: 0;
    margin: 24px auto 0;
    max-width: 380px;
    text-align: left;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.8;
}
.empty-suggestions li::before {
    content: '→';
    color: var(--red);
    font-family: var(--font-mono);
    margin-right: 8px;
}
.empty-suggestions a {
    color: var(--red);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s var(--ease-out);
}
.empty-suggestions a:hover { border-color: var(--red); }

.category-line { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.category-line .hits { color: var(--ink-3); font-size: 13px; margin-left: 6px; }
.reasoning { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }

.match-facts {
    display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr;
    gap: 6px 14px;
    padding: 12px 0; margin-bottom: 16px;
    border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
    font-size: 13px;
}
.match-facts dt { color: var(--ink-3); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; margin: 0; }
.match-facts dd { margin: 0; color: var(--ink); font-family: var(--font-mono); }

.caveats { margin-bottom: 16px; }
.caveats summary {
    cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--red); padding: 4px 0;
}
.caveats ul { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.caveats li { margin-bottom: 6px; }

/* ═════ Empty / error states ═════ */
.empty, .error {
    padding: 32px;
    background: var(--wall-2);
    border-radius: 2px;
    text-align: center;
}
.error { background: var(--red-wash); border: 1px solid var(--red-line); }
.error strong { color: var(--red); }

/* ═════ Competition detail ═════ */
.competition-detail { max-width: 860px; }
.back-link { display: inline-block; margin-bottom: 24px; color: var(--ink-3); font-size: 13px; }
.back-link:hover { color: var(--red); }
.comp-title { font-size: 40px; margin-bottom: 6px; letter-spacing: -0.025em; }
.comp-organizer { color: var(--ink-3); margin-bottom: 28px; }

.prestige-warning {
    background: var(--red-wash);
    border-left: 3px solid var(--red);
    padding: 20px 24px;
    margin: 0 0 28px;
    border-radius: 2px;
}
.prestige-warning strong { color: var(--red); display: block; margin-bottom: 6px; }
.prestige-warning p { margin: 0; font-size: 14px; color: var(--ink); }

.comp-facts {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 10px 24px; padding: 24px 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    margin-bottom: 48px;
}
.comp-facts dt { color: var(--ink-3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.comp-facts dd { margin: 0; font-size: 15px; }

.comp-section { margin-bottom: 48px; }

.category-list { display: grid; gap: 24px; }
.cat {
    padding: 20px;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
}
.cat h3 { font-size: 17px; margin-bottom: 4px; }
.cat .override {
    font-size: 13px; color: var(--amber);
    padding: 8px 12px; background: rgba(150, 113, 42, 0.08); border-radius: 2px;
    margin-top: 10px;
}
.extra { font-size: 13px; color: var(--ink-2); margin-top: 10px; }

/* AI-track category card — visual differentiation for categories with
   ai_policy_override (ai_permitted / ai_required). Same structure as .cat,
   subtle violet tint to mark it as a different track from the photographic
   categories. Apple-style restraint: tint, no border-color shouting. */
.cat-ai {
    background: color-mix(in srgb, #7c5cff 3%, var(--wall));
    border-color: color-mix(in srgb, #7c5cff 18%, var(--rule-2));
}

.cat-ai-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
    vertical-align: middle;
    transform: translateY(-2px);
}
.cat-ai-badge-required {
    background: color-mix(in srgb, #7c5cff 18%, transparent);
    color: color-mix(in srgb, #4a3aa8 80%, var(--ink-1));
    border: 1px solid color-mix(in srgb, #7c5cff 35%, transparent);
}
.cat-ai-badge-permitted {
    background: color-mix(in srgb, #7c5cff 8%, transparent);
    color: color-mix(in srgb, #4a3aa8 75%, var(--ink-1));
    border: 1px solid color-mix(in srgb, #7c5cff 22%, transparent);
}

.cat-ai-policy-note {
    font-size: 13.5px;
    color: var(--ink-2);
    padding: 10px 14px;
    background: color-mix(in srgb, #7c5cff 5%, transparent);
    border-left: 2px solid color-mix(in srgb, #7c5cff 40%, transparent);
    border-radius: 0 4px 4px 0;
    margin-top: 12px;
    line-height: 1.55;
}
.cat-ai-policy-note strong {
    color: color-mix(in srgb, #4a3aa8 70%, var(--ink-1));
}

.format-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.format-spec {
    padding: 16px; background: var(--wall-2); border-radius: 2px;
    font-family: var(--font-mono); font-size: 13px;
}
.format-spec h4 { font-family: var(--font-sans); font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.format-spec ul { list-style: none; padding: 0; margin: 0; }
.format-spec li { padding: 3px 0; color: var(--ink); }

.eligibility { list-style: none; padding: 0; }
.eligibility li {
    padding: 16px 20px; border: 1px solid var(--rule-2); border-radius: 2px;
    margin-bottom: 10px;
}
.elig-hard { border-left: 3px solid var(--red); }
.elig-soft { border-left: 3px solid var(--amber); }
.severity {
    display: inline-block; font-size: 11px; text-transform: uppercase;
    font-family: var(--font-mono); letter-spacing: 0.1em;
    padding: 2px 8px; border-radius: 2px; margin-left: 10px;
}
.severity-hard { background: var(--red-wash); color: var(--red); }
.severity-soft { background: rgba(150, 113, 42, 0.1); color: var(--amber); }

.persona { font-size: 16px; line-height: 1.6; font-style: italic; color: var(--ink-2); }
.criteria { margin: 14px 0; font-size: 14px; }

.tag {
    display: inline-block; font-size: 12px; padding: 3px 10px;
    background: var(--wall-2); border: 1px solid var(--rule);
    border-radius: 2px; margin: 2px 4px 2px 0;
    font-family: var(--font-mono);
}
.tag-positive { border-color: rgba(88, 110, 78, 0.25); color: var(--positive); background: var(--positive-wash); }
.tag-negative { border-color: var(--red-line); color: var(--red); background: var(--red-wash); }

.winners-notes {
    background: var(--wall-2); padding: 20px 24px; border-radius: 2px;
    margin-top: 20px;
}
.winners-notes h4 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-3); margin-bottom: 10px;
}

.rights { display: grid; grid-template-columns: 220px 1fr; gap: 10px 24px; }
.rights dt { color: var(--ink-3); font-size: 13px; }
.rights dd { margin: 0; font-size: 14px; }

.source-note {
    margin-top: 64px; padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.prize-summary { margin-top: 14px; }

/* ═════ Disclosure modal ═════ */
.disclosure-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 14, 13, 0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.disclosure-content {
    background: var(--wall); max-width: 560px; width: 100%;
    padding: 36px 40px; border-radius: 2px;
    box-shadow: 0 20px 60px rgba(15, 14, 13, 0.3);
    max-height: 90vh; overflow-y: auto;
}
.disclosure-content h3 { font-size: 22px; margin-bottom: 16px; }
.disclosure-lead { color: var(--ink-2); margin-bottom: 16px; }
.disclosure-list { font-size: 14px; color: var(--ink); padding-left: 20px; }
.disclosure-list li { margin-bottom: 10px; }
.disclosure-actions { margin-top: 24px; text-align: right; }

/* ═════ Footer ═════ */
.footer {
    padding: 28px 40px 36px;
    border-top: 1px solid var(--rule);
    font-size: 13px; color: var(--ink-3);
    background: var(--wall-2);
    display: flex; flex-direction: column; gap: 14px;
}
.footer-line {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.footer-ai { font-family: var(--font-mono); }
.footer-legal {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.footer-legal a {
    color: var(--ink-2);
    transition: color 0.15s var(--ease-out);
}
.footer-legal a:hover { color: var(--red); }
.footer-sep { opacity: 0.5; }
.footer-tag { color: var(--ink-3); }

/* ─── Trademark / independence one-liner ─── pinned below the legal
   link cluster, smaller and lighter so it reads as a footer note
   rather than navigation. Wraps gracefully on narrow screens. */
.footer-tm {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink-3);
    max-width: 880px;
}
.footer-tm a {
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-tm a:hover { color: var(--red); }

/* ═════ Waitlist form (Pro tier card) ═════ */
.waitlist-form {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--red-line);
}
.waitlist-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.waitlist-row {
    display: flex; gap: 8px;
    align-items: stretch;
}
.waitlist-input {
    flex: 1; min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--rule-2);
    background: var(--wall);
    font-size: 14px;
    color: var(--ink);
    border-radius: 2px;
    transition: border-color 0.15s var(--ease-out);
}
.waitlist-input:focus {
    outline: none;
    border-color: var(--red);
}
.waitlist-btn {
    padding: 10px 18px;
    flex-shrink: 0;
    font-size: 13px;
}
.waitlist-result { min-height: 0; }
.waitlist-msg {
    margin: 12px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 2px;
    border-left: 2px solid transparent;
    animation: waitlist-msg-in 280ms var(--ease-out);
}
@keyframes waitlist-msg-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.waitlist-msg-success {
    border-left-color: var(--positive);
    background: var(--positive-wash);
    color: var(--ink);
}
.waitlist-msg-success strong { color: var(--positive); font-weight: 600; }
.waitlist-msg-success em { font-style: italic; color: var(--ink); }
.waitlist-msg-error {
    border-left-color: var(--red);
    background: var(--red-wash);
    color: var(--red);
}

/* ═════ Hunter "How the index is built" — honest disclosure subsection ═════ */
.curation-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.curation-steps li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.curation-step-n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--red);
    font-weight: 500;
    padding-top: 2px;
}
.curation-steps strong {
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.005em;
}
.curation-steps li > div {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
}
.curation-steps em {
    font-style: normal;
    color: var(--red);
    font-weight: 500;
}
.curation-steps code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
}
.curation-steps abbr {
    text-decoration: dotted underline;
    cursor: help;
}
.curation-steps a {
    color: var(--red);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s var(--ease-out);
}
.curation-steps a:hover { border-color: var(--red); }
.curation-truth {
    padding: 16px 18px;
    background: var(--red-wash);
    border-left: 3px solid var(--red);
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}
.curation-truth strong { color: var(--red); }
.curation-truth em { font-style: italic; color: var(--ink); }

/* ═════ /submit page — URL + Poster submission ═════ */
.submit-page {
    max-width: 760px;
    margin: 0 auto;
}
.submit-head {
    margin-bottom: 40px;
}
.submit-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
}

/* Mode tabs (URL ↔ Poster) — same visual language as the main service tabs */
.submit-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 32px;
}
.submit-mode-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 18px 24px;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 16px;
    align-items: center;
    color: var(--ink-3);
    font-family: inherit;
    position: relative;
    transition: color 0.2s var(--ease-out);
}
.submit-mode-tab + .submit-mode-tab { border-left: 1px solid var(--rule); }
.submit-mode-tab:hover { color: var(--ink); }
.submit-mode-tab::after {
    content: '';
    position: absolute;
    left: 24px; right: 24px; bottom: -1px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--ease-out);
}
.submit-mode-tab.active::after { transform: scaleX(1); }
.submit-mode-tab.active { color: var(--ink); }
.submit-mode-n {
    grid-column: 1; grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.submit-mode-tab.active .submit-mode-n {
    color: var(--red);
    border-color: var(--red-line);
}
.submit-mode-body { display: flex; flex-direction: column; gap: 2px; }
.submit-mode-t {
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.014em;
}
.submit-mode-d {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

/* Submission forms — only one visible at a time */
.submit-form {
    display: none;
    margin-bottom: 32px;
}
.submit-form.active {
    display: block;
    animation: submit-form-in 320ms var(--ease-out);
}
@keyframes submit-form-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.submit-form .field { margin-bottom: 24px; }
.submit-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--wall);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s var(--ease-out);
}
.submit-form textarea:focus {
    outline: none;
    border-color: var(--frame);
}

.field-req {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--red-wash);
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
    vertical-align: middle;
}
.field-opt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    text-transform: uppercase;
    vertical-align: middle;
}

.submit-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
}
.submit-actions-note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    line-height: 1.5;
}
.submit-actions-note code {
    font-size: 11px;
    padding: 1px 5px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
}

/* Submission result — HTMX target */
.submit-result {
    margin: 0 0 32px;
    min-height: 0;
}
.submit-msg {
    padding: 16px 18px;
    border-radius: 2px;
    border-left: 3px solid;
    line-height: 1.55;
    font-size: 14px;
    animation: submit-msg-in 320ms var(--ease-out);
}
@keyframes submit-msg-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.submit-msg-success {
    border-left-color: var(--positive);
    background: var(--positive-wash);
    color: var(--ink);
}
.submit-msg-success strong {
    color: var(--positive);
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}
.submit-msg-success p { margin: 0; }
.submit-msg-success code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 2px;
}
.submit-msg-error {
    border-left-color: var(--red);
    background: var(--red-wash);
    color: var(--ink);
}

/* "What happens next" + "What we keep" sections */
.submit-process,
.submit-trust {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
}
.submit-process-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.submit-process-list li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: start;
}
.submit-process-list li:last-child { border-bottom: none; }
.submit-process-n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--red);
    font-weight: 500;
    padding-top: 2px;
}
.submit-process-list strong {
    color: var(--ink);
    font-weight: 600;
    margin-right: 6px;
}
.submit-process-list code {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 1px 5px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
}
.submit-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.submit-trust-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}
.submit-trust-list li:last-child { border-bottom: none; }
.submit-trust-list strong {
    color: var(--ink);
    font-weight: 600;
    margin-right: 4px;
}

/* Mobile: stack the mode tabs */
@media (max-width: 720px) {
    .submit-modes {
        grid-template-columns: 1fr;
    }
    .submit-mode-tab + .submit-mode-tab {
        border-left: none;
        border-top: 1px solid var(--rule);
    }
    .curation-steps li {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ═════ Legal pages (Terms / Privacy / Imprint) ═════ */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink);
}
.legal-head {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
.legal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
}
.legal-page h1 {
    font-size: clamp(32px, 4.4vw, 48px);
    letter-spacing: -0.028em;
    margin: 0 0 12px;
    font-weight: 500;
}
.legal-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0;
}
.legal-section {
    margin-bottom: 40px;
}
.legal-section h2 {
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.018em;
    margin: 0 0 16px;
    font-weight: 600;
}
.legal-section h3 {
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 24px 0 8px;
    font-weight: 600;
}
.legal-section p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong {
    color: var(--ink);
    font-weight: 600;
}
.legal-section a {
    color: var(--red);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s var(--ease-out);
}
.legal-section a:hover { border-color: var(--red); }
.legal-section ul {
    margin: 0 0 16px 20px;
    padding: 0;
}
.legal-section li {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: 8px;
}
.legal-block {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    padding: 16px 20px;
    background: var(--wall-2);
    border-left: 2px solid var(--rule-2);
    border-radius: 2px;
    margin: 0 0 14px;
}
.legal-section-summary {
    padding: 24px 28px;
    background: var(--wall-2);
    border-left: 3px solid var(--red);
    border-radius: 2px;
    margin-bottom: 48px;
}
.legal-section-summary h2 {
    margin-bottom: 12px;
}
.legal-summary-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.legal-summary-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px !important;
    color: var(--ink) !important;
}
.legal-summary-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 13px;
    border: 1px solid var(--rule);
}
.legal-table th, .legal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
    font-family: var(--font-mono);
}
.legal-table th {
    background: var(--wall-2);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-note {
    font-size: 13px;
    color: var(--ink-3);
    font-style: italic;
}
.legal-contact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.legal-contact li {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
    margin: 0 !important;
}
.legal-contact li:last-child { border-bottom: none; }
.legal-back {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.legal-back a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    transition: color 0.15s var(--ease-out);
}
.legal-back a:hover { color: var(--red); }

/* Hero emphasis — static underline on the key phrase. No animation.
   The red accent reserves its color budget for the one word that matters. */
.hero-win {
    font-style: normal;
    color: inherit;
    white-space: nowrap;
    border-bottom: 2px solid var(--red);
    padding-bottom: 2px;
}

/* ═════ Tutorial strip — 3-step workflow inside the Judge tab panel.
   The standalone wrapper is removed; the track now lives inside `.svc-subsection`. */
.tutorial-track {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}
.tutorial-track-inline { margin: 24px auto; }
.tutorial-step {
    text-align: center;
    padding: 24px 20px;
    color: var(--ink);
    position: relative;
}
.tutorial-step .step-n {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}
.tutorial-step h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.tutorial-step p {
    font-size: 14px; color: var(--ink-2); margin: 0;
    max-width: 260px; margin-left: auto; margin-right: auto;
    line-height: 1.55;
}
/* Small technical data-strip under each step body — mono, uppercase markers.
   Gives each step a verifiable fact anchor without adding another visual. */
.tutorial-step .step-meta {
    margin: 16px auto 0;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: none;
    display: inline-block;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--wall);
}
.tutorial-connector {
    align-self: center;
    width: 44px; height: 1px;
    background: var(--rule-2);
    position: relative;
}
.tutorial-connector::after {
    content: ""; position: absolute;
    right: -1px; top: -3px;
    width: 0; height: 0;
    border-left: 5px solid var(--rule-2);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
.tutorial-cta {
    text-align: center;
    margin-top: 48px;
}
.tutorial-link {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--red);
    letter-spacing: 0.05em;
    padding: 8px 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease-out);
}
.tutorial-link:hover {
    border-color: var(--red);
    color: var(--red);
}

/* ════════════════════════════════════════════════════════════════════════════
   Mechanism — live scanner on the landing page.
   Ported 1:1 from autonomy/src/api/static/dashboard.html (lines 306-690+).
   A film-strip of photos scrolls horizontally; a vertical red beam scans each;
   verdict chips float up; "Strong submit" photos get an AF-LOCK confirmation.
   ════════════════════════════════════════════════════════════════════════════ */

.mechanism {
    /* Card-wrapped mechanism — keeps the dark darkroom stage inside
       the card so the photographic-development metaphor stays intact,
       but the FRAME picks up the rest of the site's rounded card +
       soft shadow language. */
    margin: 60px 0 80px;
    padding: 22px 12px 18px;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    position: relative;
}
.mechanism-head {
    padding: 0 16px;
}
.mech-caption {
    padding: 0 16px;
}
.mechanism-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
    gap: 20px;
}
.mechanism-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex; align-items: center; gap: 10px;
}
.mechanism-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: mech-pulse 1400ms var(--ease-in-out) infinite;
}
@keyframes mech-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--red-line); }
    50% { opacity: 0.7; transform: scale(0.9); box-shadow: 0 0 0 5px rgba(165, 62, 44, 0); }
}
.mechanism-status {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2); letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 10px;
    min-width: 260px; justify-content: flex-end;
}
.mechanism-status-track {
    width: 24px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    background-size: 200% 100%;
    animation: mech-sweep 1400ms linear infinite;
}
@keyframes mech-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* The dark stage against which frames are developed. The dark
   metaphor is intentional (photographic darkroom). Now wrapped with
   rounded corners so it sits cleanly inside the lighter card frame. */
.mech-stage {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: var(--frame);
    border-radius: var(--card-radius-sm);
    mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.mech-strip {
    position: absolute; left: 0; top: 16px;
    display: flex; gap: 6px;
    animation: mech-strip-scroll 50s linear infinite;
    will-change: transform;
}
@keyframes mech-strip-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.mech-strip:hover { animation-play-state: paused; }

.mech-frame {
    position: relative;
    width: 148px; height: 188px;
    flex-shrink: 0;
    background: var(--frame-soft);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(245, 244, 240, 0.03);
    transition:
        transform 680ms var(--ease-exhibit),
        box-shadow 520ms var(--ease-out),
        filter 700ms var(--ease-exhibit),
        opacity 520ms var(--ease-out);
    filter: grayscale(0.6) brightness(0.72) blur(1.5px);
    opacity: 0.55;
}
.mech-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.92;
    transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out), transform 900ms var(--ease-exhibit);
}

/* Focal distance — frames closer to the beam come INTO focus */
.mech-frame.focus-mid {
    filter: grayscale(0.35) brightness(0.85) blur(0.4px);
    opacity: 0.78;
}
.mech-frame.focus-near {
    filter: grayscale(0.1) brightness(0.95) blur(0);
    opacity: 0.95;
}

/* DSLR viewfinder overlay — four corner brackets + crosshair + AF·LOCK label. */
.mech-viewfinder {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition:
        width 420ms var(--ease-out),
        height 420ms var(--ease-out),
        top 420ms var(--ease-out),
        left 420ms var(--ease-out),
        opacity 200ms var(--ease-out);
}
.mech-viewfinder.active { opacity: 1; }
.mech-viewfinder.locked { opacity: 1; }

.mech-vf-corner {
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--red);
    border-style: solid;
    border-width: 0;
}
.mech-vf-corner.tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.mech-vf-corner.tr { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.mech-vf-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.mech-vf-corner.br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.mech-vf-cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    transform: translate(-50%, -50%);
}
.mech-vf-cross::before, .mech-vf-cross::after {
    content: '';
    position: absolute;
    background: var(--red);
}
.mech-vf-cross::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }
.mech-vf-cross::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }

.mech-vf-label {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--red);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
}
.mech-viewfinder.locked .mech-vf-label { opacity: 1; }
.mech-viewfinder.locked .mech-vf-corner { animation: mech-vf-lock 900ms var(--ease-in-out) 2; }
@keyframes mech-vf-lock {
    0%, 100% { border-color: var(--red); }
    50%      { border-color: rgba(245, 244, 240, 0.9); }
}

/* Soft exposure flash on lock */
.mech-stage::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(245, 244, 240, 0);
    pointer-events: none;
    z-index: 8;
    mix-blend-mode: screen;
    opacity: 0;
}
.mech-stage.flash::after { animation: mech-exposure 360ms var(--ease-out); }
@keyframes mech-exposure {
    0%   { background: rgba(245, 244, 240, 0);    opacity: 0; }
    30%  { background: rgba(245, 244, 240, 0.25); opacity: 0.7; }
    100% { background: rgba(245, 244, 240, 0);    opacity: 0; }
}

/* Soft vignette on the judging frame — focus pull */
.mech-frame.judging::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 45%, rgba(15, 14, 13, 0.25) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: mech-vignette 420ms var(--ease-out) forwards;
}
@keyframes mech-vignette { to { opacity: 1; } }

/* The fixed vertical scanning beam */
.mech-beam {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(165, 62, 44, 0) 8%,
        var(--red) 30%,
        var(--red) 70%,
        rgba(165, 62, 44, 0) 92%,
        transparent 100%);
    transform: translateX(-0.5px);
    z-index: 4;
    box-shadow: 0 0 24px rgba(165, 62, 44, 0.5), 0 0 6px var(--red);
    pointer-events: none;
}
.mech-beam::before {
    content: '';
    position: absolute;
    left: -1px; right: -1px; top: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(165, 62, 44, 0.12), transparent);
    animation: mech-beam-glow 2400ms var(--ease-in-out) infinite;
}
@keyframes mech-beam-glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.mech-beam::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -16px; right: -16px;
    background: radial-gradient(ellipse 20px 100% at center, rgba(165, 62, 44, 0.18), transparent 70%);
    pointer-events: none;
}

/* When a frame hits the beam, it "develops" */
.mech-frame.judging {
    filter: grayscale(0) brightness(1);
    transform: scale(1.02);
    z-index: 2;
    box-shadow:
        inset 0 0 0 1px rgba(245, 244, 240, 0.12),
        0 12px 40px rgba(0, 0, 0, 0.55);
}
.mech-frame.judging img { opacity: 1; filter: saturate(1.05); }

/* Verdict chip that floats up from a judged frame */
.mech-verdict {
    position: absolute;
    left: 50%; bottom: 8px;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    background: rgba(15, 14, 13, 0.9);
    backdrop-filter: blur(6px);
    font-family: var(--font-mono); font-size: 9px;
    color: var(--wall);
    letter-spacing: 0.12em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0;
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
    white-space: nowrap;
    border-left: 1.5px solid var(--ink-4);
}
.mech-frame.judging .mech-verdict { opacity: 1; transform: translateX(-50%) translateY(0); }
.mech-verdict-score {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
}
.mech-verdict.strong_submit              { border-left-color: var(--positive); }
.mech-verdict.strong_submit .mech-verdict-score { color: #A7C19A; }
.mech-verdict.submit                     { border-left-color: var(--red); }
.mech-verdict.submit .mech-verdict-score { color: var(--wall); }
.mech-verdict.maybe                      { border-left-color: var(--ink-4); }
.mech-verdict.maybe .mech-verdict-score  { color: var(--ink-5); }
.mech-verdict.skip                       { border-left-color: var(--ink-5); }
.mech-verdict.skip .mech-verdict-score   { color: var(--ink-4); }

/* Winner treatment — the photo gets lifted and breathes */
.mech-frame.winner {
    filter: grayscale(0) brightness(1.05) blur(0);
    opacity: 1;
    z-index: 5;
    animation: mech-winner-float 3800ms var(--ease-in-out) infinite,
               mech-winner-glow 2400ms var(--ease-in-out) infinite alternate;
}
.mech-frame.winner img { filter: saturate(1.08) contrast(1.03); }
@keyframes mech-winner-float {
    0%, 100% { transform: scale(1.08)  translateY(-10px); }
    50%      { transform: scale(1.085) translateY(-13px); }
}
@keyframes mech-winner-glow {
    from {
        box-shadow:
            inset 0 0 0 1.5px var(--red),
            0 0 0 2px rgba(165, 62, 44, 0.18),
            0 16px 48px rgba(0, 0, 0, 0.6),
            0 0 24px rgba(165, 62, 44, 0.08);
    }
    to {
        box-shadow:
            inset 0 0 0 1.5px var(--red),
            0 0 0 4px rgba(165, 62, 44, 0.08),
            0 24px 72px rgba(0, 0, 0, 0.75),
            0 0 48px rgba(165, 62, 44, 0.18);
    }
}

/* Small crown-mark that appears above the winner */
.mech-frame .mech-crown {
    position: absolute;
    top: -18px; left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 3px 8px;
    background: var(--red);
    color: var(--wall);
    font-family: var(--font-mono); font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
    pointer-events: none;
}
.mech-frame.winner .mech-crown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Virtual cursor — a small arrow that travels between scan targets */
.mech-cursor {
    position: absolute;
    top: 50%; left: 52%;
    width: 14px; height: 17px;
    z-index: 6;
    color: var(--wall);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    pointer-events: none;
    transition: left 2600ms var(--ease-in-out), top 2600ms var(--ease-in-out);
}
.mech-cursor svg { width: 100%; height: 100%; display: block; }
.mech-cursor::after {
    content: '';
    position: absolute;
    left: -4px; top: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    background: rgba(245, 244, 240, 0.2);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}
.mech-cursor.click::after { animation: mech-cursor-click 700ms var(--ease-out); }
@keyframes mech-cursor-click {
    0%   { transform: scale(0);   opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}

/* Commentary strip beneath the stage */
.mech-caption {
    margin-top: 14px;
    display: flex; align-items: center; gap: 18px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.04em;
    flex-wrap: wrap;
}
.mech-caption-step {
    display: flex; align-items: center; gap: 8px;
    padding-right: 18px;
    border-right: 1px solid var(--rule-2);
}
.mech-caption-step:last-child       { border-right: none; }
.mech-caption-step .n               { font-weight: 500; color: var(--ink); }
.mech-caption-step.active           { color: var(--red); }
.mech-caption-step.active .n        { color: var(--red); }

/* Motion preferences — static display for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    .mechanism-label::before,
    .mechanism-status-track,
    .mech-strip,
    .mech-beam::before {
        animation: none !important;
    }
    .mech-frame.winner {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   The Curator's Atlas — Hunter-panel animation.
   A stylized world map (dot-grid continents) with a curator's desk in EU-West
   (Ireland — matches our Bedrock-Ireland claim per DRQ-02) and country pins
   for each tracked competition. One competition at a time gets visited:
   line draws from desk → pin pulses → info card slides in → VERIFIED stamp →
   line retracts → next country. Geographic storytelling beats abstract cards.
   ════════════════════════════════════════════════════════════════════════════ */

.atlas {
    /* Same outer footprint as before — but the stage now extends nearly
       edge-to-edge inside the card so the world-map reads as the dominant
       element. Operator: "more marked, distinct, a little bigger without
       making the card bigger". */
    margin: 40px 0 56px;
    padding: 22px 12px 18px;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
}
.atlas-head {
    padding: 0 16px;
}
.atlas-caption {
    padding: 0 16px;
}
.atlas-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
    gap: 20px;
}
.atlas-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-3);
    display: flex; align-items: center; gap: 10px;
}
.atlas-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: mech-pulse 1400ms var(--ease-in-out) infinite;
}
.atlas-status {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2); letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 10px;
    min-width: 260px; justify-content: flex-end;
}

/* The map stage — bigger, edge-to-edge inside the card. */
.atlas-stage {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%,
            color-mix(in srgb, var(--red) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 0%,
            color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    padding: 0;
    aspect-ratio: 2.1 / 1;
    max-height: 480px;
    min-height: 320px;
    overflow: hidden;
    border-radius: var(--card-radius-sm);
    border: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.atlas-svg {
    display: block;
    width: 100%; height: 100%;
    color: var(--ink-3);
}

/* ─── Continent dots — bigger and more contrast so the silhouette
     reads as a confident map, not a faint backdrop. ─── */
.atlas-land-dot {
    fill: color-mix(in srgb, var(--ink) 28%, transparent);
    transition: fill 0.5s var(--ease-out);
    r: 2.4;
}

/* ─── Curator's desk — fixed marker in EU-West. Slower, more deliberate
     pulse + a wider radial sweep so the eye registers it as the origin
     point of every connection line. ─── */
.atlas-desk-ring {
    fill: none;
    stroke: var(--red);
    stroke-width: 1.2;
    opacity: 0.55;
    animation: atlas-desk-pulse 3200ms var(--ease-in-out) infinite;
}
@keyframes atlas-desk-pulse {
    0%, 100% { r: 7;  opacity: 0.7; }
    50%      { r: 14; opacity: 0.05; }
}
.atlas-desk-dot {
    fill: var(--red);
    stroke: var(--wall);
    stroke-width: 1.4;
    filter: drop-shadow(0 1px 2px rgba(165, 62, 44, 0.4));
}
.atlas-desk-label {
    fill: var(--ink-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ─── Country pins — bigger and more confident so they read clearly
     on the larger stage. Inactive: ink mark. Active: red flare. ─── */
.atlas-pin-halo {
    fill: var(--red);
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
}
.atlas-pin-ring {
    fill: none;
    stroke: color-mix(in srgb, var(--ink) 38%, transparent);
    stroke-width: 1.3;
    transition: stroke 0.4s var(--ease-out), stroke-width 0.4s var(--ease-out);
}
.atlas-pin-dot {
    fill: color-mix(in srgb, var(--ink) 65%, transparent);
    transition: fill 0.4s var(--ease-out);
}
/* Pin labels — only revealed for the active pin. Larger, bolder so
   the country reads as a confident editorial mark, not a tiny tag. */
.atlas-pin-label {
    fill: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    paint-order: stroke;
    stroke: var(--wall);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.atlas-pin-emblem {
    /* Real competition emblem rendered as <image> inside the SVG; fades in
       only when the pin becomes active so the inactive map stays minimal. */
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    pointer-events: none;
}
.atlas-pin-emblem-frame {
    fill: var(--wall);
    stroke: var(--red);
    stroke-width: 1.4;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    filter: drop-shadow(0 2px 6px rgba(15, 14, 13, 0.18));
}
.atlas-pin.active .atlas-pin-ring {
    stroke: var(--red);
    stroke-width: 2.2;
}
.atlas-pin.active .atlas-pin-dot {
    fill: var(--red);
    filter: drop-shadow(0 0 4px rgba(165, 62, 44, 0.5));
}
.atlas-pin.active .atlas-pin-label { opacity: 1; }
.atlas-pin.active .atlas-pin-emblem { opacity: 1; }
.atlas-pin.active .atlas-pin-emblem-frame { opacity: 1; }
.atlas-pin.active .atlas-pin-halo {
    animation: atlas-halo 1600ms var(--ease-out);
}
@keyframes atlas-halo {
    0%   { opacity: 0.55; transform: scale(0.4); }
    60%  { opacity: 0.18; }
    100% { opacity: 0;    transform: scale(3.0); }
}

/* ─── Connection line (desk → pin). Slower draw, thicker stroke,
     soft red glow so it reads as the curator reaching toward the
     contest. ─── */
.atlas-line {
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition:
        stroke-dashoffset 900ms var(--ease-premium),
        opacity 400ms var(--ease-out);
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(165, 62, 44, 0.55));
}
.atlas-line.on { opacity: 0.95; }

/* ─── Info card overlay — appears next to the active pin. Modern
     light card with rounded corners + soft shadow + tinted accent
     border. Matches the rest of the site's design language. ─── */
.atlas-card {
    position: absolute;
    top: 12%;
    width: 290px;
    max-width: 38%;
    padding: 16px 18px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(245, 244, 240, 0.95) 100%);
    border-radius: var(--card-radius-sm);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--red);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 0.5s var(--ease-premium),
        transform 0.5s var(--ease-premium);
    pointer-events: none;
    z-index: 5;
}
.atlas-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.atlas-card.hide {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}
.atlas-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.atlas-card-emblem {
    width: 36px; height: 36px;
    color: var(--red);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    background: var(--wall);
    overflow: hidden;
}
.atlas-card-emblem svg { width: 22px; height: 22px; }
.atlas-card-emblem img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.atlas-card-id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.atlas-card-name {
    font-size: 13px; font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.atlas-card-region {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
}
.atlas-card-deadline {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2); font-weight: 600;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--wall-2);
}
.atlas-card-deadline.close {
    color: var(--red);
    background: var(--red-wash);
    border: 1px solid var(--red-line);
}
.atlas-card-source,
.atlas-card-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
    font-size: 11px;
}
.atlas-card-source-label,
.atlas-card-meta-label {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-3);
    flex-shrink: 0;
}
.atlas-card-source code {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink);
    background: var(--wall-2);
    padding: 1px 5px;
    border-radius: 2px;
}
.atlas-card-meta-value {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink);
}
.atlas-card-stamp {
    margin-top: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--positive) 40%, transparent);
    background: var(--positive-wash);
    color: var(--positive);
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600;
    transform: rotate(-2deg);
    border-radius: 2px;
}
.atlas-card-stamp-check { font-size: 11px; font-weight: 600; }
.atlas-card-stamp.flash { animation: atlas-stamp-flash 900ms var(--ease-exhibit); }
@keyframes atlas-stamp-flash {
    0%   { opacity: 0; transform: scale(1.4)  rotate(-8deg); }
    30%  { opacity: 1; transform: scale(0.96) rotate(-2deg); }
    60%  { transform: scale(1.02) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1)    rotate(-2deg); }
}

/* ─── Caption strip — matches the Judge's pattern ─── */
.atlas-caption {
    margin-top: 14px;
    display: flex; align-items: center; gap: 18px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.04em;
    flex-wrap: wrap;
}
.atlas-caption-step {
    display: flex; align-items: center; gap: 8px;
    padding-right: 18px;
    border-right: 1px solid var(--rule-2);
}
.atlas-caption-step:last-child { border-right: none; }
.atlas-caption-step .n        { font-weight: 500; color: var(--ink); }
.atlas-caption-step.active    { color: var(--red); }
.atlas-caption-step.active .n { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
    .atlas-label::before,
    .atlas-desk-ring,
    .atlas-pin.active .atlas-pin-halo {
        animation: none !important;
    }
    .atlas-line { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Competition emblems — inside the coverage table and the sample cards.
   ════════════════════════════════════════════════════════════════════════════ */
.coverage-name {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
}
.coverage-emblem {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--wall);
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.coverage-emblem svg { width: 20px; height: 20px; }
.coverage-row:hover .coverage-emblem {
    color: var(--red);
    border-color: var(--red-line);
}
.coverage-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coverage-name-text strong {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Image-emblem fallback for AI-extracted entries — when we've fetched an
   og:image / favicon, render it as <img>; otherwise the macro renders an SVG. */
.emblem-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 1px;
}

/* Provenance badges — clarify which entries are curator-verified vs AI-extracted.
   Keeps visual hierarchy: verified is the strongest, ai_extracted is secondary,
   user_submission (legacy queue path) is amber. */
.provenance-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 2px;
    font-weight: 500;
    flex-shrink: 0;
    line-height: 1.6;
}
.provenance-badge-verified {
    color: var(--positive);
    border-color: rgba(88, 110, 78, 0.4);
    background: var(--positive-wash);
}
.provenance-badge-ai_extracted {
    color: var(--red);
    border-color: var(--red-line);
    background: var(--red-wash);
}
.provenance-badge-user_submission {
    color: var(--amber);
    border-color: rgba(150, 113, 42, 0.4);
    background: rgba(150, 113, 42, 0.08);
}
.provenance-badge-curated {
    color: var(--ink-2);
    border-color: var(--rule-2);
    background: var(--wall-2);
}

/* Submit message — warning variant (queued-for-review outcome) */
.submit-msg-warn {
    border-left: 3px solid var(--amber);
    background: rgba(150, 113, 42, 0.08);
    color: var(--ink);
    padding: 16px 18px;
    border-radius: 2px;
    line-height: 1.55;
    font-size: 14px;
    animation: submit-msg-in 320ms var(--ease-out);
}
.submit-msg-warn strong {
    color: var(--amber);
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}
.submit-msg-warn p { margin: 0; }
.submit-msg-warn code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 2px;
}
.submit-msg-success a {
    color: var(--positive);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s var(--ease-out);
}
.submit-msg-success a:hover { border-color: var(--positive); }

.sample-card-id {
    display: flex; align-items: flex-start; gap: 14px;
    flex: 1; min-width: 0;
}
.sample-card-emblem {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--wall);
    margin-top: 2px;
}
.sample-card-emblem svg { width: 24px; height: 24px; }
.sample-card:hover .sample-card-emblem {
    color: var(--red);
    border-color: var(--red-line);
}

/* ════════════════════════════════════════════════════════════════════════════
   First-visit hint — dismissible, remembered in localStorage.
   WWAD audit (2026-05-09): the prior treatment used a red-wash gradient +
   red-line border, which read as a sales-banner energy at the top of every
   first-visit page. Restyled to a quieter inline note: subtle wall
   background, hairline rule, smaller type. Same content (helps newcomers
   understand the two-views structure), much quieter visual register.
   ════════════════════════════════════════════════════════════════════════════ */
.first-visit {
    margin: 24px 0 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.32s var(--ease-out),
        transform 0.32s var(--ease-out);
}
.first-visit.in { opacity: 1; transform: translateY(0); }
.first-visit.out { opacity: 0; transform: translateY(-4px); }
.first-visit-inner {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    background: var(--wall-2);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
}
.first-visit-icon {
    color: var(--ink-3);
    display: flex; align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
}
.first-visit-text {
    flex: 1;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.first-visit-text strong {
    font-weight: 600;
    color: var(--ink);
    margin-right: 4px;
}
.first-visit-text em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink);
    padding: 0;
}
.first-visit-text a {
    margin-left: 4px;
    color: var(--ink-2);
    font-weight: 500;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 1px;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.first-visit-text a:hover { color: var(--ink); border-color: var(--ink-2); }
.first-visit-close {
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 2px;
    font-family: var(--font-sans);
    transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.first-visit-close:hover { color: var(--red); background: rgba(165, 62, 44, 0.05); }

/* ════════════════════════════════════════════════════════════════════════════
   Sample — "What you get back" preview cards.
   Three realistic mock match cards using real registry competitions so
   prospective users can see the shape of the output before uploading.
   ════════════════════════════════════════════════════════════════════════════ */
.sample { margin-bottom: 100px; }
.sample-head { max-width: 720px; margin-bottom: 36px; }
.sample-lede { color: var(--ink-2); font-size: 16px; line-height: 1.6; }

.sample-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.sample-card {
    background: var(--wall);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: 24px 26px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.sample-card:hover { border-color: var(--frame-soft); transform: translateY(-1px); }
.sample-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 0;
}
.sample-card-title { font-size: 17px; margin: 0 0 4px; letter-spacing: -0.01em; }
.sample-card-org   { font-size: 12px; color: var(--ink-3); margin: 0; font-family: var(--font-mono); letter-spacing: 0.02em; }
.sample-card-score { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sample-card-cat {
    font-size: 13px; color: var(--ink-2); margin: 0;
    padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.sample-card-cat strong { color: var(--ink); font-weight: 600; }
.sample-card-reason { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.sample-card-reason em {
    font-style: normal; color: var(--ink);
    font-family: var(--font-mono); font-size: 12px;
    padding: 1px 6px; background: var(--wall-2);
    border: 1px solid var(--rule); border-radius: 2px;
}
.sample-card-facts {
    display: grid; grid-template-columns: auto 1fr;
    gap: 4px 12px; margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    font-size: 12px;
}
.sample-card-facts dt {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin: 0;
}
.sample-card-facts dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }

.sample-card-caveat {
    padding: 10px 12px;
    background: var(--red-wash);
    border-left: 2px solid var(--red);
    font-size: 12px; color: var(--ink);
    line-height: 1.55;
}
.sample-card-caveat strong { color: var(--red); }
.sample-card-caveat-soft {
    background: rgba(150, 113, 42, 0.08);
    border-left-color: var(--amber);
}
.sample-card-caveat-soft strong { color: var(--amber); }

.sample-footnote {
    margin-top: 24px; font-size: 13px; color: var(--ink-3);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   Coverage — live index pulled from the registry.
   Dense, editorial-table aesthetic. Each row links to the competition detail.
   ════════════════════════════════════════════════════════════════════════════ */
.coverage { margin-bottom: 100px; }
.coverage-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: end;
    margin-bottom: 32px;
}
.coverage-head-text { max-width: 620px; }
.coverage-lede { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }
.coverage-stats {
    display: flex; gap: 32px;
    border-left: 1px solid var(--rule);
    padding-left: 32px;
}
.coverage-stats .stat { display: flex; flex-direction: column; gap: 4px; }
.coverage-stats strong {
    font-size: 32px; font-weight: 600;
    letter-spacing: -0.02em; color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1;
}
.coverage-stats span {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3);
}

.coverage-table {
    display: flex; flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    background: var(--wall);
}
.coverage-row {
    display: grid;
    grid-template-columns: 2.2fr 0.6fr 0.8fr 0.8fr 0.7fr 0.8fr 0.5fr;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rule-soft);
    align-items: center;
    color: var(--ink);
    transition: background 0.12s var(--ease-out);
}
.coverage-row:last-child  { border-bottom: none; }
.coverage-row:not(.coverage-row-head):hover { background: var(--wall-2); }
.coverage-row-head {
    background: var(--wall-2);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500;
    padding: 10px 20px;
}
.coverage-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coverage-name strong {
    font-size: 14px; font-weight: 500;
    letter-spacing: -0.01em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coverage-name small { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.coverage-region, .coverage-ai, .coverage-cats {
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
.coverage-fee { font-family: var(--font-mono); font-size: 12px; }

/* Free vs Paid fee pill — clear visual distinction in the coverage table.
   "Free" reads green (positive); paid reads neutral with a tier qualifier. */
.fee-pill {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid;
    line-height: 1.6;
}
.fee-pill-free {
    color: var(--positive);
    border-color: rgba(88, 110, 78, 0.4);
    background: var(--positive-wash);
}
.fee-pill-paid {
    color: var(--ink);
    border-color: var(--rule-2);
    background: var(--wall-2);
}
.fee-pill-tier {
    font-weight: 400;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}

/* ═════ Discovery panel — user-triggered AI search inside the Hunter ═════ */
.discover-panel {
    background: linear-gradient(
        180deg,
        var(--red-wash) 0%,
        transparent 100%
    );
    border-left: 3px solid var(--red);
    padding-left: 24px;
    padding-right: 24px;
    margin-left: -24px;
    margin-right: -24px;
}
.discover-head {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.discover-refresh {
    flex-shrink: 0;
    font-variant: small-caps;
    letter-spacing: 0.04em;
}
.discover-refresh:hover { border-color: var(--red-line); color: var(--red); }


/* Dedicated Hunt CTA — primary action at the top of the Hunter panel */
.hunter-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.hunter-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-size: 15px;
}
.hunter-cta-icon { width: 18px; height: 18px; }
.hunter-cta-note {
    font-size: 13px;
    color: var(--ink-3);
    max-width: 50ch;
}

/* "Live AI research" eyebrow above the discover heading — signals to the
   operator that this section is live work, not just a static form. */
.discover-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
    padding: 2px 8px;
    border: 1px solid var(--red-line);
    border-radius: 2px;
    background: var(--red-wash);
}
.discover-eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red);
    margin-right: 8px;
    vertical-align: 1px;
    animation: mech-pulse 1400ms var(--ease-in-out) infinite;
}

.discover-btn-icon {
    flex-shrink: 0;
    margin-right: 4px;
}

.discover-form { margin: 0 0 18px; }
.discover-row {
    display: flex; gap: 8px; align-items: stretch;
    flex-wrap: wrap;
}
.discover-region {
    flex: 1; min-width: 240px;
    padding: 12px 14px;
    border: 1px solid var(--rule-2);
    background: var(--wall);
    font-size: 14px;
    color: var(--ink);
    border-radius: 2px;
    transition: border-color 0.15s var(--ease-out);
}
.discover-region:focus {
    outline: none;
    border-color: var(--red);
}
.discover-btn { flex-shrink: 0; padding: 12px 22px; }
.discover-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.55;
    font-style: italic;
}

/* Mid-search spinner — reuses the analyze-spinner aesthetic. */
.discover-spinner {
    display: none;
    text-align: center;
    padding: 32px 16px;
    margin: 12px 0;
    background: var(--wall-2);
    border-radius: 2px;
}
.htmx-request .discover-spinner { display: block; }
.discover-spinner-stage {
    position: relative;
    height: 3px;
    width: 220px;
    margin: 0 auto 16px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}
.discover-spinner-track {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--red) 30%,
        var(--red-dim) 50%,
        var(--red) 70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: mech-sweep 1400ms linear infinite;
}
.discover-spinner-title {
    font-size: 15px; font-weight: 500;
    color: var(--ink); margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.discover-spinner-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    margin: 0;
    letter-spacing: 0.04em;
}

/* ═════════════════════════════════════════════════════════════════
   Add-a-contest panel — inline contest submission form on the Hunter
   page so the user never has to navigate away. AI extracts in under a
   minute and auto-publishes when the data is clean.
   ═════════════════════════════════════════════════════════════════ */
.add-contest-panel {
    background:
        radial-gradient(ellipse 50% 100% at 100% 50%,
            color-mix(in srgb, var(--positive) 8%, transparent) 0%, transparent 60%),
        var(--card-surface);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 26px 28px;
    border-left: 3px solid var(--positive);
    margin: 18px 0;
}
.add-contest-head { margin-bottom: 16px; }
.add-contest-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--positive);
    margin-bottom: 8px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--positive) 40%, transparent);
    border-radius: 2px;
    background: var(--positive-wash);
}
.add-contest-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--positive);
    animation: mech-pulse 1400ms var(--ease-in-out) infinite;
}

.add-contest-form { margin: 12px 0 0; }
.add-contest-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.add-contest-input {
    flex: 1;
    min-width: 280px;
    padding: 14px 16px;
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    background: var(--wall);
    font-size: 15px;
    color: var(--ink);
    font-family: var(--font-mono);
    transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.add-contest-input:focus {
    outline: none;
    border-color: var(--positive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 16%, transparent);
}
.add-contest-btn {
    flex-shrink: 0;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.add-contest-trust {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.55;
}
.add-contest-trust strong { color: var(--ink-2); }

/* Inline 3-dot bouncing spinner shown while the AI extracts. */
.add-contest-spinner {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: 3px;
    background: var(--positive-wash);
    border: 1px solid color-mix(in srgb, var(--positive) 30%, transparent);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
}
.add-contest-spinner.htmx-request,
.htmx-request .add-contest-spinner {
    display: flex;
}
.add-contest-spinner-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--positive);
    animation: add-contest-bounce 1.2s var(--ease-in-out) infinite;
}
.add-contest-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.add-contest-spinner-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes add-contest-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}
.add-contest-spinner-text { margin-left: 4px; }

/* Tier-tease aside — coming-soon Pro/Deep Hunter capabilities. */
.add-contest-tease {
    margin: 18px 0 0;
    padding: 16px 18px;
    border-top: 1px dashed var(--rule);
    background: linear-gradient(180deg, transparent 0%, var(--wall-2) 100%);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.add-contest-tease-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
    padding: 2px 8px;
    border: 1px solid var(--red-line);
    border-radius: 2px;
    background: var(--red-wash);
}
.add-contest-tease-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.add-contest-tease-list .lock {
    color: var(--red);
    font-size: 11px;
    margin-right: 4px;
}
.add-contest-tease-list .info {
    margin-left: 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--ink-3);
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    padding: 0 5px;
    cursor: help;
    background: var(--wall-2);
    transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.add-contest-tease-list .info:hover,
.add-contest-tease-list .info:focus {
    color: var(--red);
    border-color: var(--red-line);
    outline: none;
}
.add-contest-tease-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
    letter-spacing: 0.04em;
}
.add-contest-tease-cta:hover { color: var(--red-dim); border-bottom-color: var(--red); }


/* Discovery result fragment styles */
.discover-result { margin-top: 12px; }
.discover-msg {
    padding: 16px 18px;
    border-left: 3px solid;
    background: var(--wall);
    border-radius: 2px;
    line-height: 1.55;
    font-size: 14px;
    animation: submit-msg-in 320ms var(--ease-out);
}
.discover-msg-success {
    border-left-color: var(--positive);
    background: var(--positive-wash);
}
.discover-msg-success strong {
    color: var(--positive);
    font-size: 15px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}
.discover-msg-warn {
    border-left-color: var(--amber);
    background: rgba(150, 113, 42, 0.08);
}
.discover-msg-warn strong {
    color: var(--amber);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.discover-msg-error {
    border-left-color: var(--red);
    background: var(--red-wash);
    color: var(--ink);
}

.discover-published {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.discover-published li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--wall);
    border: 1px solid rgba(88, 110, 78, 0.25);
    border-radius: 2px;
    font-size: 13px;
}
.discover-pub-icon {
    color: var(--positive);
    font-weight: 700;
    flex-shrink: 0;
}
.discover-pub-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--positive);
    margin-left: auto;
    padding: 2px 6px;
    background: var(--positive-wash);
    border-radius: 2px;
}

.discover-queued, .discover-failed {
    margin: 12px 0 0;
    font-size: 13px;
}
.discover-queued summary,
.discover-failed summary {
    cursor: pointer;
    color: var(--ink-2);
    padding: 4px 0;
    font-weight: 500;
}
.discover-queued ul,
.discover-failed ul {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
}
.discover-queued li,
.discover-failed li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 12px;
}
.discover-queued li:last-child,
.discover-failed li:last-child { border-bottom: none; }
.discover-q-url {
    font-family: var(--font-mono);
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discover-q-reason {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: lowercase;
}

.discover-rerun-hint {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
}
.discover-rerun-hint code {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 1px 5px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
    font-style: normal;
}
.coverage-deadline {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink); font-weight: 500;
}
.coverage-deadline-close { color: var(--red); }
.coverage-prize {
    font-family: var(--font-mono); font-size: 13px;
    color: var(--ink); font-weight: 500;
}
.coverage-empty {
    padding: 24px; background: var(--wall-2); border-radius: 2px;
    text-align: center; color: var(--ink-3);
}
.coverage-footnote {
    margin-top: 16px; font-size: 13px; color: var(--ink-3);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   Service tabs — the two-tool IA.
   Sticky nav with editorial № 01 / № 02 prefixes. Pre-rendered both panels
   server-side; tabs.js toggles .active for instant panel swap + hash sync.
   ════════════════════════════════════════════════════════════════════════════ */
.svc-tabs {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 40px -40px 0;
    padding: 0 40px;
    background: rgba(245, 244, 240, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.svc-tabs-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.svc-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 22px 28px;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 20px;
    align-items: center;
    color: var(--ink-3);
    font-family: inherit;
    position: relative;
    transition: color 0.2s var(--ease-out);
}
.svc-tab + .svc-tab { border-left: 1px solid var(--rule); }
.svc-tab:hover { color: var(--ink); }
.svc-tab::after {
    content: '';
    position: absolute;
    left: 28px; right: 28px; bottom: 0;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--ease-out);
}
.svc-tab.active::after { transform: scaleX(1); }
.svc-tab.active { color: var(--ink); }

.svc-tab-n {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
    grid-column: 1; grid-row: 1 / 3;
    align-self: center;
    transition: color 0.2s var(--ease-out);
}
.svc-tab.active .svc-tab-n { color: var(--red); }
.svc-tab-body { grid-column: 2; display: flex; flex-direction: column; gap: 2px; }
.svc-tab-t {
    font-size: 20px; font-weight: 600;
    letter-spacing: -0.018em;
    color: inherit;
}
.svc-tab-d {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

/* ─── Panels ─── */
.svc-panel {
    display: none;
    padding: 56px 0 24px;
    scroll-margin-top: 96px;
}
.svc-panel.active {
    display: block;
    animation: svc-panel-in 420ms var(--ease-out);
}
@keyframes svc-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Judge panel gets a subtle dark-stage wash at the top to frame the scanner. */
.svc-panel[data-panel="judge"] { background: transparent; }

/* ─── Panel content blocks ─── */
.svc-lead {
    max-width: 780px;
    margin-bottom: 56px;
}
.svc-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 20px;
}
.svc-h2 {
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.028em;
    font-weight: 500;
    margin: 0 0 20px;
    color: var(--ink);
}
.svc-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    letter-spacing: -0.005em;
}
.svc-lede strong { color: var(--ink); font-weight: 500; }

.svc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin: 48px 0 56px;
}
.pillar {
    padding: 32px 28px 32px 0;
    border-right: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 10px;
}
.pillar:last-child { border-right: none; }
.pillar:not(:first-child) { padding-left: 28px; }
.pillar-n {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--red);
    font-weight: 500;
}
.pillar h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--ink);
}
.pillar h3 em {
    font-style: italic;
    color: var(--red);
    font-weight: 500;
}
.pillar p {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
    margin: 4px 0 0 0;
}
.pillar p em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    padding: 1px 5px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* Sub-sections within a panel (sample output, workflow, etc.) */
.svc-subsection {
    margin: 72px 0;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
}
.svc-subhead {
    font-size: 24px;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink);
    font-weight: 600;
}
.svc-subhead-sub {
    color: var(--ink-2);
    font-size: 15px;
    max-width: 64ch;
    margin: 0 0 32px;
    line-height: 1.55;
}
.svc-footnote {
    margin-top: 28px;
    font-size: 13px;
    color: var(--ink-3);
    font-style: italic;
}
.svc-footnote-center { text-align: center; margin-top: 32px; }

.svc-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 56px 0 24px;
    padding: 32px 0 0;
    border-top: 1px solid var(--rule);
}
.svc-cta-note {
    font-size: 13px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* Inline mechanism when used inside a Judge panel (no outer margins, softer borders) */
.mechanism-inline {
    margin: 0 0 48px;
    padding: 20px 0 24px;
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
}

/* Divider between tab content and global (pricing / privacy / FAQ) sections */
.svc-divider {
    margin: 80px 0 56px;
    text-align: center;
    position: relative;
}
.svc-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px; background: var(--rule-2);
    z-index: 0;
}
.svc-divider span {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 20px;
    background: var(--wall);
}

/* Privacy compliance chips — inline, mono, beneath the "What we don't do" list.
   Ties the Privacy section to research-backed commitments (DRQ-02, DRQ-07, DRQ-08). */
.privacy-chips {
    list-style: none; padding: 0; margin: 24px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.privacy-chips li {
    padding: 6px 10px;
    background: var(--wall);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    font-size: 12px;
    color: var(--ink-2);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.privacy-chips strong {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
    padding-right: 6px;
    margin-right: 6px;
    border-right: 1px solid var(--rule);
}

/* ════════════════════════════════════════════════════════════════════════════
   Pricing — Free + Pro (waitlist).
   Two-column grid. Pro card gets a subtle red accent to draw the eye,
   but without screaming about it — we're not upselling aggressively.
   ════════════════════════════════════════════════════════════════════════════ */
.pricing { margin-bottom: 100px; }
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.price-card {
    background: var(--wall);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: 32px;
    display: flex; flex-direction: column; gap: 20px;
}
.price-card-pro {
    border-color: var(--red-line);
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
}
.price-tag {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
    display: flex; align-items: center; gap: 10px;
}
.price-pill {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; padding: 2px 7px;
    background: var(--red); color: var(--wall);
    border-radius: 2px;
}
.price-amount {
    font-size: 40px; font-weight: 600;
    letter-spacing: -0.025em; color: var(--ink);
    margin: 0;
}
.price-amount span {
    font-size: 14px; font-weight: 400;
    color: var(--ink-3); letter-spacing: 0;
    margin-left: 4px;
}
.price-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.price-features li {
    font-size: 14px; color: var(--ink-2); line-height: 1.5;
    display: flex; align-items: flex-start; gap: 10px;
}
.price-check {
    color: var(--red); font-weight: 600; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 13px;
    line-height: 1.5;
}
.price-cta { align-self: flex-start; margin-top: 8px; }
.price-note {
    font-size: 12px; color: var(--ink-3); margin: 0;
    font-style: italic;
}
.price-footnote {
    margin-top: 20px; font-size: 13px; color: var(--ink-3);
    font-style: italic; text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   FAQ — native <details>/<summary> accordion, no JS.
   Matches the rest of the page's editorial rhythm.

   WWAD audit (2026-05-10): the FAQ moved off the homepage to /faq —
   the homepage now carries a .faq-link card that lands on the
   dedicated page. The accordion CSS below still drives /faq itself.
   ════════════════════════════════════════════════════════════════════════════ */

/* Quiet "Common questions" link card — replaces the prior inline
   FAQ accordion on the homepage. Apple-pattern: long-form Q&A on
   its own page, a quiet link from the homepage. */
.faq-link {
    margin: 60px 0 100px;
}
.faq-link-anchor {
    display: block;
    padding: 28px 32px;
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--wall-2);
    transition: border-color 0.18s var(--ease-out),
                background 0.18s var(--ease-out),
                transform 0.18s var(--ease-premium);
}
.faq-link-anchor:hover,
.faq-link-anchor:focus-visible {
    border-color: var(--ink-3);
    background: var(--wall);
    transform: translateY(-1px);
}
.faq-link-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.faq-link-title {
    display: block;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 6px;
}
.faq-link-arrow {
    display: inline-block;
    margin-left: 4px;
    color: var(--ink-2);
    transition: transform 0.18s var(--ease-premium);
}
.faq-link-anchor:hover .faq-link-arrow,
.faq-link-anchor:focus-visible .faq-link-arrow {
    transform: translateX(4px);
}
.faq-link-sub {
    display: block;
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.55;
}

/* Dedicated /faq page header — mirrors the legal-page treatment. */
.faq-page {
    max-width: 800px;
    margin: 60px auto 100px;
    padding: 0 24px;
}
.faq-page-head {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
}
.faq-page-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.faq-page-title {
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.faq-page-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 60ch;
}
.faq-page-lede a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
}
.faq-page-lede a:hover { color: var(--ink); border-color: var(--ink); }

.faq { margin-bottom: 100px; }
.faq-list {
    border-top: 1px solid var(--rule);
}
.faq-item {
    border-bottom: 1px solid var(--rule);
    padding: 0;
}
.faq-item summary {
    cursor: pointer;
    padding: 22px 0 22px 0;
    list-style: none;
    position: relative;
    padding-right: 40px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    transition: color 0.15s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--ink-3);
    font-weight: 300;
    transition: transform 0.25s var(--ease-out), color 0.15s var(--ease-out);
    line-height: 1;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: var(--red);
}
.faq-item summary:hover { color: var(--red); }
.faq-body {
    padding: 0 0 24px 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.65;
    max-width: 720px;
}
.faq-body p { margin: 0 0 12px 0; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body em {
    font-style: italic; color: var(--ink);
}

/* ═════ Responsive ═════ */
@media (max-width: 720px) {
    .masthead { padding: 16px 20px; }
    .nav { gap: 16px; font-size: 13px; }
    .main { padding: 40px 20px; }
    .hero { margin-bottom: 60px; }
    .comp-facts, .rights { grid-template-columns: 1fr; gap: 4px 0; }
    .comp-facts dt, .rights dt { margin-top: 12px; }
    .match-facts { grid-template-columns: auto 1fr; }
    .privacy { margin: 0 -20px 60px; padding: 32px 20px; }
    .tutorial-track {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tutorial-connector { display: none; }

    /* Service tabs — tighter padding, preserve horizontal layout (2 tabs
       always fit side-by-side, even at 320px width). */
    .svc-tabs { margin: 24px -20px 0; padding: 0 20px; }
    .svc-tab {
        padding: 16px 14px;
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .svc-tab-n { grid-column: 1; grid-row: 1; }
    .svc-tab-body { grid-column: 1; grid-row: 2; }
    .svc-tab-t { font-size: 16px; }
    .svc-tab-d { font-size: 10px; }
    .svc-tab::after { left: 14px; right: 14px; }

    /* Panels lose their deep top padding on mobile. */
    .svc-panel { padding: 36px 0 16px; }
    .svc-lead { margin-bottom: 36px; }
    .svc-pillars {
        grid-template-columns: 1fr;
        border: none;
        margin: 32px 0;
    }
    .pillar {
        padding: 20px 0;
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
    .pillar:not(:first-child) { padding-left: 0; }
    .pillar:last-child { border-bottom: none; }
    .svc-subsection { margin: 48px 0; padding-top: 28px; }

    /* Coverage head stacks, stats shift to inline. */
    .coverage-head {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
    }
    .coverage-stats {
        border-left: none; padding-left: 0;
        padding-top: 16px; border-top: 1px solid var(--rule);
        gap: 28px;
    }
    .coverage-stats strong { font-size: 26px; }

    /* Coverage table — reflow to a stacked card layout on mobile, since the
       7-column grid is unreadable at narrow widths. Hide the header row,
       label cells via CSS pseudo-elements drawn from data attributes would be
       cleanest but require HTML changes; here we just rely on column order. */
    .coverage-row {
        grid-template-columns: 1fr auto;
        padding: 12px 16px;
        gap: 6px 12px;
    }
    .coverage-row-head { display: none; }
    .coverage-name { grid-column: 1 / -1; }
    .coverage-region, .coverage-deadline, .coverage-prize,
    .coverage-fee, .coverage-ai, .coverage-cats {
        font-size: 11px;
    }

    /* Personas stack vertically with a horizontal divider between cards. */
    .personas-grid { grid-template-columns: 1fr; }
    .persona-card {
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
    .persona-card:not(:first-child) { padding-left: 0; }
    .persona-card:last-child { border-bottom: none; }

    /* Sample cards stack at narrow widths. */
    .sample-cards { grid-template-columns: 1fr; }

    /* Pricing cards stack vertically. */
    .price-grid { grid-template-columns: 1fr; }

    /* FAQ summary text shrinks slightly on mobile. */
    .faq-item summary { font-size: 15px; padding-right: 32px; }

    /* Curator's Board — 5 cards don't fit side-by-side, so reflow to a
       horizontal scroll strip. Preserves the editorial density rather than
       stacking them into a tall column. */
    .board-stage { padding: 16px; }
    .board-cards {
        grid-template-columns: repeat(5, 160px);
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .board-card { height: 130px; }

    /* First-visit banner: stack vertically so the text has breathing room. */
    .first-visit-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }
    .first-visit-close {
        position: absolute; top: 6px; right: 8px;
    }
    .first-visit { position: relative; }

    /* Coverage name column — emblem stays visible on mobile but shrinks. */
    .coverage-emblem { width: 24px; height: 24px; }
    .coverage-emblem svg { width: 16px; height: 16px; }

    /* Sample-card emblem aligns with the title on mobile. */
    .sample-card-id { gap: 10px; }
    .sample-card-emblem { width: 32px; height: 32px; }
    .sample-card-emblem svg { width: 20px; height: 20px; }
}


/* ═════════════════════════════════════════════════════════════════
   Multi-photo curate flow — tray, tiles, capacity counter
   Used on /analyze. Pairs with curate.js + analyze.html.
   ═════════════════════════════════════════════════════════════════ */

.curate-zone .upload-zone-prompt { padding-bottom: 28px; }
.curate-cap-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0;
}
.curate-cap-note strong {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.curate-tier-label {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--wall-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Both interactive controls inside .curate-cap-note must override the
   parent .upload-zone-prompt's pointer-events: none — otherwise clicks
   pass through to the absolutely-positioned <input type="file"> below
   and trigger the OS file picker instead of the link/button handler.
   The "choose files" + dragstart-clear buttons already have this
   override; these two were missed when the cap-note line shipped. */
.curate-upgrade-link,
.curate-clear-link {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.curate-upgrade-link {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
}
.curate-upgrade-link:hover { color: var(--red-dim); border-bottom-color: var(--red); }

/* Inline clear-all button — matches the upgrade link grammar (red,
   underline-on-the-baseline) so the cap-note reads as one line of
   secondary actions rather than a button beside text. Visible only
   when the tray has at least one photo (toggled by curate.js). */
.curate-clear-link {
    margin-left: 10px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink-4);
    padding: 0 0 1px;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
}
.curate-clear-link:hover { color: var(--red); border-bottom-color: var(--red); }

.upload-zone.at-cap { border-color: var(--ink-4); }
.upload-zone.at-cap .upload-zone-title { color: var(--ink-3); }

.curate-announce {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--red-wash);
    border: 1px solid var(--red-line);
    border-radius: 4px;
    color: var(--red-dim);
    font-size: 14px;
}

.photo-tray {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.photo-tray-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}
.photo-tray-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--ink);
}
.photo-tray-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.photo-tile {
    /* Premium gallery card — matches the rest of the site's card language.
       The user's photograph is the hero; the frame whispers around it. */
    position: relative;
    background: var(--card-surface);
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    animation: photo-tile-in 540ms var(--ease-premium) both;
}
@keyframes photo-tile-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.photo-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}
.photo-tile:hover .photo-tile-img { transform: scale(1.04); filter: saturate(1.05); }
.photo-tile .photo-tile-img {
    transition: transform 0.6s var(--ease-premium), filter 0.4s var(--ease-out);
}
.photo-tile-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--wall-2);
}
.photo-tile-img-pending {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--wall-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-tile-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink-4);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: tile-spin 0.9s linear infinite;
}
@keyframes tile-spin {
    to { transform: rotate(360deg); }
}
.photo-tile-meta {
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--wall);
    border-top: 1px solid var(--rule);
}
.photo-tile-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.photo-tile-size {
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.photo-tile-status {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    font-size: 11px;
    color: var(--ink-3);
    font-style: italic;
}
.photo-tile-pending .photo-tile-meta { opacity: 0.6; }
.photo-tile-error {
    border-color: var(--red-line);
    background: var(--red-wash);
}
.photo-tile-error .photo-tile-status { color: var(--red-dim); font-style: normal; }

.photo-tile-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 14, 13, 0.78);
    color: var(--wall);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 2;
}
.photo-tile-remove:hover {
    background: var(--red);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}

/* ═════════════════════════════════════════════════════════════════
   Portfolio shortlist — multi-photo result table
   ═════════════════════════════════════════════════════════════════ */

.results-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: 0;
}
.results-explainer {
    color: var(--ink-2);
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 0;
}

.portfolio-card .recommended-pick {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    background: var(--positive-wash);
    border: 1px solid rgba(88, 110, 78, 0.20);
    border-radius: 4px;
    margin-bottom: 14px;
}
.recommended-thumb {
    flex: 0 0 96px;
}
.recommended-thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    border: 1px solid var(--rule);
}
.recommended-text { flex: 1; min-width: 0; }
.recommended-label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--positive);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recommended-filename {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    word-break: break-word;
}
.recommended-reason {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.deep-judged-pip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--wall);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.recommended-strengths {
    margin: 8px 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--ink-2);
}
.recommended-strengths li { margin-bottom: 2px; }
.recommended-concerns summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 6px;
}
.recommended-concerns summary:hover { color: var(--ink-2); }
.recommended-concerns ul {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--ink-2);
}

.ranking-table {
    margin: 14px 0;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
}
.ranking-table summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 12px;
    padding: 4px 0;
}
.ranking-table summary:hover { color: var(--ink); }
.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ranking-row {
    display: grid;
    grid-template-columns: 32px 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.ranking-row-strong_submit { border-left: 3px solid var(--positive); }
.ranking-row-submit         { border-left: 3px solid #4F7AAB; }
.ranking-row-maybe          { border-left: 3px solid var(--amber); }
.ranking-row-weak_match     { border-left: 3px solid var(--ink-4); }

.ranking-pos {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: center;
}
.ranking-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}
.ranking-meta {
    min-width: 0;
}
.ranking-name {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking-reason {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.45;
}
.ranking-score {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.ranking-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* Per-photo pivot section */
.per-photo-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}
.per-photo-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--ink);
}
.per-photo-explainer {
    font-size: 14px;
    color: var(--ink-2);
    max-width: 600px;
    margin: 0 0 18px;
}
.per-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.per-photo-card {
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 14px;
}
.per-photo-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.per-photo-thumb img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}
.per-photo-name {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.per-photo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.per-photo-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}
.per-photo-pos {
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    font-weight: 600;
}
.per-photo-link {
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.per-photo-link:hover { color: var(--red); }

@media (max-width: 700px) {
    .photo-tray-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    .recommended-pick {
        flex-direction: column;
        gap: 10px;
    }
    .recommended-thumb { flex-basis: auto; }
    .recommended-thumb img {
        width: 100%;
        height: 180px;
    }
    .ranking-row {
        grid-template-columns: 28px 48px 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
    }
    .ranking-thumb img { width: 48px; height: 48px; }
    .ranking-score {
        grid-column: 2 / 4;
        flex-direction: row;
        gap: 8px;
    }
    .per-photo-grid {
        grid-template-columns: 1fr;
    }
}


/* ═════════════════════════════════════════════════════════════════
   Judge panel — direction-B target-first flow on /competitions/{id}
   ═════════════════════════════════════════════════════════════════ */

.judge-panel {
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px;
    margin: 32px 0;
}
.judge-panel-empty {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.judge-panel-lede {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0 0 16px;
    max-width: 70ch;
}

.judge-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.judge-cat-pick {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 0;
}
.judge-cat-pick legend {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
    padding: 0 6px;
}
.judge-cat-option {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 14px;
}
.judge-cat-option:hover { color: var(--red); }
.judge-cat-option input { margin: 0; }
.judge-cat-name { font-weight: 500; color: var(--ink); }
.judge-cat-kind {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.judge-form-note {
    font-size: 12px;
    color: var(--ink-3);
    margin: 0;
}

.judge-spinner {
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--wall-2);
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 14px;
    font-style: italic;
}

.judge-error {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--red-wash);
    border: 1px solid var(--red-line);
    border-radius: 4px;
    color: var(--red-dim);
}
.judge-error p { margin: 4px 0 0; font-size: 14px; font-style: normal; }

.judge-result { margin-top: 18px; }
.judge-result-head { margin-bottom: 18px; }
.judge-result-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}
.judge-result-explainer {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0;
}

.judge-winner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    background: var(--positive-wash);
    border: 1px solid rgba(88, 110, 78, 0.20);
    border-radius: 4px;
    margin-bottom: 16px;
}
.judge-winner-thumb { flex: 0 0 120px; }
.judge-winner-thumb img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    border: 1px solid var(--rule);
}
.judge-winner-text { flex: 1; min-width: 0; }
.judge-winner-label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--positive);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.judge-winner-name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    word-break: break-word;
}
.judge-winner-score-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 10px;
}
.judge-winner-score-row .fit-score-num {
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.judge-winner-score-row .fit-score-suffix {
    font-size: 14px;
    color: var(--ink-3);
}
.judge-winner-reason {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
}
.judge-winner-strengths {
    margin: 8px 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--ink-2);
}
.judge-winner-strengths li { margin-bottom: 2px; }
.judge-winner-concerns summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-3);
    padding: 4px 0;
}
.judge-winner-concerns summary:hover { color: var(--ink-2); }
.judge-winner-concerns ul {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--ink-2);
}

.judge-ranking-list { margin-top: 12px; }
.ranking-detail {
    margin-top: 8px;
}
.ranking-detail summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-3);
    padding: 2px 0;
}
.ranking-detail summary:hover { color: var(--ink-2); }
.ranking-detail ul {
    margin: 4px 0 8px;
    padding-left: 18px;
    font-size: 12px;
    color: var(--ink-2);
}
.ranking-strengths, .ranking-concerns {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ink-2);
}

.judge-result-footnote {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-3);
}

@media (max-width: 700px) {
    .judge-winner {
        flex-direction: column;
    }
    .judge-winner-thumb { flex: none; }
    .judge-winner-thumb img {
        width: 100%;
        height: 180px;
    }
}


/* ═════════════════════════════════════════════════════════════════
   "See full debate" — transparency drawer
   Renders three columns: what AI saw / the rubric / the verdict.
   ═════════════════════════════════════════════════════════════════ */

.debate-panel {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
}
.debate-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    list-style: none;
    user-select: none;
}
.debate-summary::-webkit-details-marker { display: none; }
.debate-summary::before {
    content: "▸";
    font-size: 10px;
    color: var(--ink-3);
    transition: transform 0.18s var(--ease-out);
    display: inline-block;
}
.debate-panel[open] > .debate-summary::before {
    transform: rotate(90deg);
}
.debate-summary:hover { color: var(--ink); }
.debate-summary-icon {
    font-size: 14px;
    color: var(--ink-3);
}
.debate-summary-meta {
    color: var(--ink-3);
    font-size: 12px;
    font-style: italic;
}

.debate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 14px;
    padding: 16px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.debate-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.debate-saw     { border-left: 3px solid var(--ink-4); padding-left: 12px; }
.debate-rubric  { border-left: 3px solid var(--amber); padding-left: 12px; }
.debate-verdict { border-left: 3px solid var(--positive); padding-left: 12px; }

.debate-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ink-3);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.debate-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.debate-dl dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    font-weight: 600;
    margin-top: 2px;
}
.debate-dl dd {
    margin: 0 0 0 0;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.45;
}
.debate-dl dd .muted { font-size: 11px; }

.debate-warn { color: var(--red-dim); font-weight: 500; }

.debate-past-winners {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
    font-style: italic;
}

.debate-reasoning {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.55;
}
.debate-list-label {
    margin: 8px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    font-weight: 600;
}
.debate-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.debate-list li { margin-bottom: 3px; }
.debate-list-positive li::marker { color: var(--positive); }
.debate-list-negative li::marker { color: var(--red); }

.debate-muted {
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
    margin: 0;
}

/* Extra chip variants the debate uses */
.chip-small { font-size: 10px; padding: 1px 7px; letter-spacing: 0.02em; }
.chip-group-small { gap: 4px; }
.chip-positive {
    border-color: rgba(88, 110, 78, 0.30);
    color: var(--positive);
    background: var(--positive-wash);
}
.chip-negative {
    border-color: var(--red-line);
    color: var(--red-dim);
    background: var(--red-wash);
}

@media (max-width: 900px) {
    .debate-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .debate-saw, .debate-rubric, .debate-verdict {
        border-left-width: 0;
        border-top: 3px solid var(--ink-4);
        padding-left: 0;
        padding-top: 10px;
    }
    .debate-rubric  { border-top-color: var(--amber); }
    .debate-verdict { border-top-color: var(--positive); }
}


/* ═════════════════════════════════════════════════════════════════
   Phase 6 — Pro-tier portfolio brainstorm (button + result + upsell)
   ═════════════════════════════════════════════════════════════════ */

.brainstorm-section {
    margin: 32px 0 0;
    padding: 24px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.brainstorm-head { margin-bottom: 16px; }
.brainstorm-eyebrow {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ink);
    color: var(--wall);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    margin-bottom: 6px;
}
.brainstorm-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--ink);
}
.brainstorm-lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
    max-width: 60ch;
}
.brainstorm-form { display: flex; flex-direction: column; gap: 10px; }
.brainstorm-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.brainstorm-row .field { display: flex; flex-direction: column; gap: 4px; }
.brainstorm-row .field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
}
.brainstorm-row input[type="number"] {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 14px;
    background: var(--wall);
}
.brainstorm-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.brainstorm-note {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-3);
}
.brainstorm-spinner {
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--wall);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 14px;
    font-style: italic;
}

/* ── Free-tier upsell ── */
.portfolios-upsell {
    margin: 18px 0;
    padding: 22px;
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
    text-align: center;
}

/* Quota-exhausted upsell card — same grammar as .portfolios-upsell
   but with a softer red-wash hint to communicate "you hit the free
   limit" rather than "this is locked behind a paywall". Used by
   _portfolio_shortlist.html and _judge_for_competition.html when
   the free deep-judge quota is exceeded. */
.quota-upsell {
    margin: 24px 0;
    padding: 28px 24px;
    background:
        linear-gradient(180deg, var(--red-wash) 0%, var(--wall) 100%);
    border: 1px solid var(--red-line);
    border-radius: 6px;
    text-align: center;
}
.quota-upsell-eyebrow {
    display: inline-block;
    padding: 3px 10px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
}
.quota-upsell-title {
    margin: 12px 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
}
.quota-upsell-lede {
    margin: 0 auto 18px;
    max-width: 60ch;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.6;
}
.quota-upsell-lede em { color: var(--ink); font-style: normal; font-weight: 600; }
.quota-upsell-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.quota-upsell-cta .btn { padding: 10px 22px; font-size: 14px; }
.quota-upsell-critic {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px dotted var(--ink-3);
    padding-bottom: 1px;
}
.quota-upsell-critic:hover { color: var(--red); border-bottom-color: var(--red); }
.quota-upsell-foot {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}
.portfolios-upsell-eyebrow {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ink);
    color: var(--wall);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}
.portfolios-upsell-title {
    margin: 10px 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
}
.portfolios-upsell-lede {
    margin: 0 auto 16px;
    max-width: 56ch;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
}
.portfolios-upsell-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
}
.portfolios-upsell-tier {
    font-size: 13px;
    color: var(--ink-3);
}

/* ── Brainstorm result ── */
.portfolios-result {
    margin-top: 18px;
}
.portfolios-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.portfolios-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
}
.portfolios-candor {
    margin: 0;
    padding: 10px 14px;
    background: var(--wall);
    border-left: 3px solid var(--amber);
    color: var(--ink-2);
    font-size: 13px;
}
.portfolios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
}
.portfolio-card {
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 18px;
}
.portfolio-card-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.portfolio-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}
.portfolio-thesis {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    font-style: italic;
}
.portfolio-meta {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
}
.portfolio-photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.portfolio-photo {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: flex-start;
}
.portfolio-photo-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    border: 1px solid var(--rule);
}
.portfolio-photo-text { min-width: 0; }
.portfolio-photo-pos {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.portfolio-photo-name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portfolio-photo-note {
    margin: 0;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.45;
}
.portfolios-footnote {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-3);
}

@media (max-width: 700px) {
    .portfolios-grid { grid-template-columns: 1fr; }
    .brainstorm-row { flex-direction: column; align-items: stretch; }
    .brainstorm-row input[type="number"] { width: 100%; }
}


/* ═════════════════════════════════════════════════════════════════
   Phase 7 — Per-competition brainstorm + watch competition
   ═════════════════════════════════════════════════════════════════ */

.brainstorm-eyebrow-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.brainstorm-eyebrow-row .brainstorm-eyebrow {
    margin-bottom: 0;
}
.brainstorm-eyebrow-row .section-title {
    margin: 0;
}

.comp-brainstorm-panel,
.comp-watch-panel {
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px;
    margin: 24px 0;
}
.comp-brainstorm-lede,
.comp-watch-lede {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0 0 16px;
    max-width: 70ch;
    line-height: 1.55;
}

.watch-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.watch-field { flex: 1; min-width: 240px; }
.watch-field input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    background: var(--wall);
}
.watch-field input[type="email"]:focus {
    outline: none;
    border-color: var(--ink-2);
}

.watch-msg {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 14px;
}
.watch-msg-success {
    background: var(--positive-wash);
    border: 1px solid rgba(88, 110, 78, 0.30);
    color: var(--positive);
}
.watch-msg-error {
    background: var(--red-wash);
    border: 1px solid var(--red-line);
    color: var(--red-dim);
}
.watch-msg-info {
    background: var(--wall);
    border: 1px solid var(--rule);
    color: var(--ink-2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ═════════════════════════════════════════════════════════════════
   Phase 8 — /pricing page + onboarding polish
   ═════════════════════════════════════════════════════════════════ */

.pricing-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.pricing-head {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
.pricing-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.pricing-honest {
    margin: 14px 0 0;
    padding: 12px 16px;
    background: var(--wall-2);
    border-left: 3px solid var(--amber);
    border-radius: 0 3px 3px 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.55;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.pricing-card {
    position: relative;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.pricing-card-featured {
    border-color: var(--ink);
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(15, 14, 13, 0.06);
}
.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--ink);
    color: var(--wall);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
}
.pricing-card-head {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}
.pricing-card-tier {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}
.pricing-card-price {
    margin: 0 0 4px;
    color: var(--ink);
}
.pricing-card-amount {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pricing-card-bill {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
}
.pricing-features li {
    padding-left: 22px;
    position: relative;
}
.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--positive);
    font-weight: 600;
}
.pricing-feature-muted {
    color: var(--ink-3) !important;
}
.pricing-feature-muted::before {
    content: "—" !important;
    color: var(--ink-4) !important;
}
.pricing-cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.pricing-waitlist {
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 28px;
    margin: 32px 0;
}
.pricing-waitlist h2 {
    margin: 0 0 8px;
    font-size: 22px;
}
.waitlist-lede {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0 0 16px;
    max-width: 60ch;
}
.waitlist-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.waitlist-field { flex: 1; min-width: 240px; }
.waitlist-field input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    background: var(--wall);
}
.waitlist-result { margin-top: 14px; }

.pricing-why {
    background: var(--wall);
    border-top: 1px solid var(--rule);
    padding-top: 28px;
    margin-top: 28px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
}
.pricing-why p {
    max-width: 70ch;
    margin: 0 0 14px;
}

.pricing-footnote {
    margin-top: 36px;
    font-size: 13px;
    color: var(--ink-3);
}

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card-featured { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════
   "How it works" — compact strip. Small icons, tight typography.
   Replaced the previous over-sized infographic that ate the page.
   ═════════════════════════════════════════════════════════════════ */

.how-it-works {
    margin: 48px 0;
    padding: 28px 24px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.how-head {
    text-align: center;
    margin: 0 0 22px;
}
.how-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.how-sub {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.how-strip {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    max-width: 980px;
}
.how-step {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 320px;
    display: grid;
    grid-template-columns: auto 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 18px 20px;
    background: var(--card-surface);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}
.how-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.how-step-num {
    grid-row: 1 / span 2;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    align-self: center;
}
.how-step-icon {
    grid-row: 1 / span 2;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    color: var(--ink);
    display: block;
}
.how-step:nth-child(3) .how-step-icon { color: var(--red); }
.how-step:nth-child(5) .how-step-icon { color: var(--positive); }

.how-step-text { min-width: 0; }
.how-step-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.how-step-meta {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}

.how-step-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-4);
    list-style: none;
}
.how-step-arrow svg {
    width: 18px !important;
    height: 10px !important;
    display: block;
}

/* ─── Step-cascade animation — opt-in via .in-view applied by the observer.
     Each step lifts in with a small Y-translate; arrows draw their stroke.
     Subtle, fast, premium — fires once per visit. ─── */
.how-strip .how-step,
.how-strip .how-step-arrow {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 480ms var(--ease-out),
        transform 480ms var(--ease-out);
}
.how-strip .how-step-arrow svg path {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset 520ms var(--ease-out) 240ms;
}
.how-strip.in-view .how-step,
.how-strip.in-view .how-step-arrow {
    opacity: 1;
    transform: translateY(0);
}
.how-strip.in-view .how-step-arrow svg path { stroke-dashoffset: 0; }

/* Stagger via positional pseudo-classes so the cascade lands left-to-right.
   .how-strip > li sequence is: step / arrow / step / arrow / step. */
.how-strip.in-view .how-step:nth-child(1)        { transition-delay: 0ms; }
.how-strip.in-view .how-step-arrow:nth-child(2)  { transition-delay: 160ms; }
.how-strip.in-view .how-step:nth-child(3)        { transition-delay: 260ms; }
.how-strip.in-view .how-step-arrow:nth-child(4)  { transition-delay: 420ms; }
.how-strip.in-view .how-step:nth-child(5)        { transition-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
    .how-strip .how-step,
    .how-strip .how-step-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .how-strip .how-step-arrow svg path { stroke-dashoffset: 0; }
}

.how-footnote {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
}
.how-tutorial-link {
    color: var(--red);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
}
.how-tutorial-link:hover { color: var(--red-dim); border-bottom-color: var(--red); }

@media (max-width: 720px) {
    .how-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .how-step { max-width: none; }
    .how-step-arrow { transform: rotate(90deg); margin: 0 auto; }
}


/* ═════════════════════════════════════════════════════════════════
   Phase 9 — phase-aware progress board (replaces the rotating-phrase
   spinner on /analyze). Each phase shows actual work happening so the
   user knows the AI is doing something — not just a generic loader.
   ═════════════════════════════════════════════════════════════════ */

.progress-board {
    display: none;
    margin: 24px 0;
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
    /* Highlight on long-running requests so the user sees something happen
       within 100ms of clicking the button — no more dead-air interactions. */
    box-shadow: 0 0 0 1px var(--red-line), 0 4px 18px rgba(165, 62, 44, 0.08);
}
/* htmx adds .htmx-request to the indicator element itself when its trigger
   form/button is in flight (because of hx-indicator pointing at us). The
   selector previously read `.htmx-request .progress-board`, which expected
   a wrapping element to carry the class — that never matches because the
   board is a sibling of the form, not a descendant. */
.progress-board.htmx-request { display: block; }
/* Belt-and-braces: also show the board when an ancestor (e.g. the form
   itself) is in request state, in case the markup is ever restructured. */
.htmx-request .progress-board { display: block; }
.progress-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.progress-board-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.progress-board-time {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.progress-board-time .muted { font-size: 11px; margin-left: 2px; }

/* Stop button — sits in the progress-board header opposite the title.
   Quiet by default (red text on a transparent surface), flips to a
   solid red on hover so the user reads it as the "I'm in control"
   exit. Visible only when the board is in flight. */
.progress-board-stop {
    margin-left: 14px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--red-line);
    border-radius: 999px;
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.progress-board-stop:hover { background: var(--red); color: #fff; border-color: var(--red); }
.progress-board-stop:focus { outline: 2px solid var(--red); outline-offset: 2px; }

.progress-phases {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.progress-phase {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 6px 0;
    transition: opacity 0.2s ease;
    opacity: 0.5;
}
.progress-phase.active,
.progress-phase.done { opacity: 1; }

.progress-phase-marker {
    position: relative;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    display: inline-block;
}
.progress-phase-dot,
.progress-phase-spinner,
.progress-phase-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pending — small grey dot */
.progress-phase-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-4);
}

/* Active — animated spinner ring */
.progress-phase-spinner {
    display: none;
}
.progress-phase-spinner::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink-5);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: phase-spin 0.85s linear infinite;
}
@keyframes phase-spin { to { transform: rotate(360deg); } }

/* Done — green check */
.progress-phase-check {
    display: none;
    color: var(--positive);
    font-size: 14px;
    font-weight: 700;
}

.progress-phase.active .progress-phase-dot { display: none; }
.progress-phase.active .progress-phase-spinner { display: flex; }
.progress-phase.active .progress-phase-check { display: none; }

.progress-phase.done .progress-phase-dot { display: none; }
.progress-phase.done .progress-phase-spinner { display: none; }
.progress-phase.done .progress-phase-check { display: flex; }

.progress-phase-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.progress-phase-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.progress-phase.active .progress-phase-label { color: var(--red); }
.progress-phase.done .progress-phase-label { color: var(--ink-2); }
.progress-phase-detail {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    transition: opacity 0.22s var(--ease-out);
}
/* Subtle pulse on the active phase label so the user knows the system
   is still working even when the phase row hasn't advanced for a while. */
.progress-phase.active .progress-phase-label {
    animation: progress-active-pulse 2.2s var(--ease-in-out) infinite;
}
@keyframes progress-active-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .progress-phase.active .progress-phase-label { animation: none; }
}

.progress-board-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}


/* ── Onboarding hint on /analyze ── */
.onboarding-hint {
    margin: -8px 0 18px;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--positive-wash) 0%, transparent 100%);
    border-left: 3px solid var(--positive);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.onboarding-hint-icon {
    flex-shrink: 0;
    color: var(--positive);
    font-weight: 600;
}
.onboarding-hint-dismiss {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin-left: auto;
}
.onboarding-hint-dismiss:hover { color: var(--ink); }


/* ═════════════════════════════════════════════════════════════════
   Judge page empty-state — three ghost photo cards previewing how
   the user's photographs will be displayed once dropped. Each ghost
   card carries a subtle gradient + viewfinder corner brackets so it
   reads as "a photo will live here", not as a generic placeholder.
   Hidden by curate.js as soon as a real photo is staged.
   ═════════════════════════════════════════════════════════════════ */
.judge-empty-preview {
    margin: 14px 0 0;
}
.judge-empty-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.judge-empty-preview-label::before {
    content: '';
    display: inline-block;
    width: 18px; height: 1px;
    background: var(--ink-4);
}
.judge-empty-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.ghost-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    /* Soft gradient body so each ghost looks like a real photo's stand-in
       (warm clay / cool ocean / pale stone). Three variations so the
       preview row reads as a portfolio, not three identical squares. */
}
.ghost-photo::after {
    /* Viewfinder corner brackets — small camera-frame cue that this is
       where a photograph will live. */
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    background:
        linear-gradient(to right, currentColor 0 12px, transparent 12px) top left / 12px 1px no-repeat,
        linear-gradient(to bottom, currentColor 0 12px, transparent 12px) top left / 1px 12px no-repeat,
        linear-gradient(to left, currentColor 0 12px, transparent 12px) top right / 12px 1px no-repeat,
        linear-gradient(to bottom, currentColor 0 12px, transparent 12px) top right / 1px 12px no-repeat,
        linear-gradient(to right, currentColor 0 12px, transparent 12px) bottom left / 12px 1px no-repeat,
        linear-gradient(to top, currentColor 0 12px, transparent 12px) bottom left / 1px 12px no-repeat,
        linear-gradient(to left, currentColor 0 12px, transparent 12px) bottom right / 12px 1px no-repeat,
        linear-gradient(to top, currentColor 0 12px, transparent 12px) bottom right / 1px 12px no-repeat;
    color: color-mix(in srgb, var(--ink) 24%, transparent);
    pointer-events: none;
}
.ghost-photo::before {
    /* Tiny aperture mark in the center — barely there, just enough
       to read "this is photography ground". */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle 4px at center,
            color-mix(in srgb, var(--ink) 22%, transparent) 0%,
            transparent 100%);
}
.ghost-photo-1 {
    background:
        radial-gradient(ellipse 90% 60% at 50% 100%,
            color-mix(in srgb, #d18a55 32%, transparent) 0%, transparent 70%),
        linear-gradient(160deg, #efe5d7 0%, #d8c8b0 60%, #c2a784 100%);
}
.ghost-photo-2 {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            color-mix(in srgb, #6e8c9c 28%, transparent) 0%, transparent 70%),
        linear-gradient(170deg, #d8e1e5 0%, #a9bcc4 55%, #7d96a3 100%);
}
.ghost-photo-3 {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            color-mix(in srgb, #6f7a52 24%, transparent) 0%, transparent 70%),
        linear-gradient(150deg, #e2e1d6 0%, #b6b8a3 55%, #8b8e74 100%);
}
.ghost-photo:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}


/* ═════════════════════════════════════════════════════════════════
   Judge showcase — photo-forward gallery on the index Judge tab.
   The entire panel is now about PHOTOGRAPHS (operator's instruction:
   "the Judge part is all about photographs not competitions"). Five
   gradient photo cards demonstrate the verdict tier range. Each card
   reads as a print landing on a contact sheet — viewfinder corners,
   verdict pill, fit slate, slight rotation per card, dramatic cascade.
   ═════════════════════════════════════════════════════════════════ */
.judge-showcase {
    margin: 64px 0 48px;
    padding: 48px 36px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            color-mix(in srgb, var(--red) 6%, transparent) 0%, transparent 60%),
        var(--card-surface);
    box-shadow: var(--card-shadow);
}
.judge-showcase-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}
.judge-showcase-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
}
.judge-showcase-title {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--ink);
}
.judge-showcase-sub {
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 56ch;
}

/* Five-card gallery row. The middle card sits a touch larger to anchor
   the eye; the four siblings tilt outward like prints fanned on a desk. */
.judge-showcase-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 0 auto;
    max-width: 1100px;
}

@media (max-width: 920px) {
    .judge-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .judge-photo-card-5 { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 540px) {
    .judge-showcase { padding: 28px 18px; }
    .judge-showcase-grid { grid-template-columns: 1fr; }
    .judge-photo-card-5 { max-width: none; }
}

/* The photo card — premium gallery print. Aspect ratio 3:4 vertical so
   the row reads as portrait prints, not horizontal banners. The image
   itself carries a slow idle "breath" so the row stays alive even when
   nobody's hovering — but the breath lives on the inner ::before
   background image, not the card transform, so it never fights the
   reveal-up entrance. */
.judge-photo-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition:
        transform 0.42s var(--ease-premium),
        box-shadow 0.42s var(--ease-premium);
    isolation: isolate;
    cursor: default;
}
.judge-photo-card:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow: var(--card-shadow-hover),
                0 0 0 6px color-mix(in srgb, var(--red) 8%, transparent);
    z-index: 2;
}

/* Real photographic backdrops — five curated Unsplash images covering
   the genre range a photographer would shoot (landscape / portrait /
   wildlife / architecture / cultural). The fallback gradient sits
   underneath each `url(...)` so a slow connection still sees a
   tasteful photographic wash before the image lands.

   Image credits (Unsplash, free commercial use):
     1. Misty mountain landscape — Joshua Earle
     2. Portrait, golden hour — Christopher Campbell
     3. Wildlife close, lion — Wolfgang Hasselmann
     4. Architecture geometry — Joel Filipe
     5. Cultural / street tea-house — Kevin Lanceplaine */
/* All five backdrops: forced 600×800 portrait crop via Unsplash params
   (`w=600&h=800&fit=crop&crop=entropy/faces`) so the subject always fills
   the cadre regardless of source-image aspect ratio. */
.judge-photo-card-1 {
    background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 14, 13, 0.20) 100%),
        url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=600&h=800&crop=entropy&q=80') center/cover,
        linear-gradient(165deg, #f3e3cd 0%, #d8b58a 50%, #9c6940 100%);
}
.judge-photo-card-2 {
    /* Portrait — face-aware crop fills the frame with the subject's face. */
    background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 14, 13, 0.20) 100%),
        url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=600&h=800&crop=faces,center&q=80') center/cover,
        linear-gradient(170deg, #e0e8ec 0%, #9bb3bf 55%, #4a6878 100%);
}
.judge-photo-card-3 {
    /* Wildlife — entropy crop centers the deer in the cadre. */
    background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 14, 13, 0.20) 100%),
        url('https://images.unsplash.com/photo-1474511320723-9a56873867b5?auto=format&fit=crop&w=600&h=800&crop=entropy&q=80') center/cover,
        linear-gradient(160deg, #f6e9c8 0%, #d4a558 45%, #8c5a1f 100%);
}
.judge-photo-card-4 {
    background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 14, 13, 0.20) 100%),
        url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=600&h=800&crop=entropy&q=80') center/cover,
        linear-gradient(155deg, #e6e6da 0%, #adb19c 55%, #6f7560 100%);
}
.judge-photo-card-5 {
    /* Cultural / documentary — face-aware crop. */
    background:
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 14, 13, 0.20) 100%),
        url('https://images.unsplash.com/photo-1542359649-31e03cd4d909?auto=format&fit=crop&w=600&h=800&crop=faces,center&q=80') center/cover,
        linear-gradient(150deg, #d8d6d2 0%, #9e9d9a 55%, #585758 100%);
}

/* Inner mask gives the card a hint of darkroom glass — barely visible
   highlight at the top, soft shadow at the bottom. */
.judge-photo-mask {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 22%,
            transparent 60%,
            rgba(15, 14, 13, 0.35) 100%);
    pointer-events: none;
}

/* Viewfinder corner brackets — camera-frame language, very subtle. */
.judge-photo-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.55);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}
.judge-photo-corner-tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.judge-photo-corner-tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.judge-photo-corner-bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.judge-photo-corner-br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

/* Top-right slate: fit score + verdict tier pill. The slate sits on a
   semi-transparent dark wash so it stays readable against any palette. */
.judge-photo-meta {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 2;
}
.judge-photo-fit {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
    font-variant-numeric: tabular-nums;
}
.judge-photo-fit-suffix {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 1px;
    font-weight: 400;
}
.judge-photo-tier {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.judge-photo-tier-strong {
    background: rgba(88, 110, 78, 0.65);
    color: #e8f0e1;
    border-color: rgba(167, 193, 154, 0.5);
}
.judge-photo-tier-submit {
    background: rgba(245, 244, 240, 0.82);
    color: var(--ink);
    border-color: rgba(15, 14, 13, 0.18);
}
.judge-photo-tier-maybe {
    background: rgba(150, 113, 42, 0.65);
    color: #fff5dc;
    border-color: rgba(213, 178, 96, 0.5);
}
.judge-photo-tier-weak {
    background: rgba(165, 62, 44, 0.65);
    color: #f7e0d8;
    border-color: rgba(220, 130, 110, 0.5);
}
/* Personalised "Yours" pill — used when the showcase renders the
   user's own photographs from their session tray. */
.judge-photo-tier-yours {
    background: rgba(15, 14, 13, 0.65);
    color: #f5f4f0;
    border-color: rgba(245, 244, 240, 0.40);
    letter-spacing: 0.20em;
}
/* Honest "PRE-RANK · CONCEPT" chip — used on tray photos that have a
   concept-overlap best fit but no actual deep-judge verdict. Avoids the
   false-promise of "STRONG SUBMIT 100/100" coming from raw concept
   scores that the AI judge later contradicts. Reads as informational
   metadata, not a verdict tier. */
.judge-photo-tier-prerank {
    background: rgba(15, 14, 13, 0.55);
    color: rgba(245, 244, 240, 0.92);
    border-color: rgba(245, 244, 240, 0.30);
    letter-spacing: 0.20em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.judge-photo-cta {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--red);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.92;
}
/* Category line shown under the caption when a real deep-judge verdict
   is rendered — tells the user which category produced the verdict
   (e.g. "in Family"), not just the contest. */
.judge-photo-cat {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.10em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Per-photo individual signal — the AI judge's strength or concern
   written specifically for THIS photograph. Operator: "individual
   treatment for each photo". Even when two photos score the same,
   their strength/concern text differs because the AI describes what's
   actually unique in each frame. */
.judge-photo-individual {
    display: block;
    margin: 6px 0 4px;
    padding: 4px 9px;
    border-left: 2px solid;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(15, 14, 13, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 0 2px 2px 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.judge-photo-individual-good {
    border-left-color: rgba(167, 193, 154, 0.7);
}
.judge-photo-individual-warn {
    border-left-color: rgba(213, 178, 96, 0.7);
}

/* Per-photo classification chip strip — surfaces THIS photo's own
   scene categories (landscape · portrait · cultural_context) so the
   user sees what the AI saw in this frame, distinct from neighboring
   cards even when they share a shoot. */
.judge-photo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.judge-photo-chip {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: lowercase;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(245, 244, 240, 0.18);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(245, 244, 240, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Alternative-comp list under the verdict — surfaces "+ 2 more matches"
   so the user sees this photo's full footprint, not just the top contest. */
.judge-photo-alts {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.66);
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Tier-aware action link rendered at the bottom of each judged-photo
   card. Strong/Submit tiers get a colored chip (the action is "post it");
   Maybe gets a neutral debate link; Weak suggests an upload instead.
   Operator: "if score is weak, encourage more uploads". */
.judge-photo-action {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(15, 14, 13, 0.55);
    color: rgba(255, 255, 255, 0.92);
    transition: transform 0.18s var(--ease-out),
                background 0.18s var(--ease-out),
                border-color 0.18s var(--ease-out);
}
.judge-photo-action:hover {
    transform: translateX(2px);
    background: rgba(15, 14, 13, 0.78);
}
.judge-photo-action-strong {
    background: rgba(88, 110, 78, 0.78);
    border-color: rgba(167, 193, 154, 0.55);
    color: #f1f6ec;
}
.judge-photo-action-strong:hover {
    background: rgba(88, 110, 78, 0.92);
}
.judge-photo-action-submit {
    background: rgba(245, 244, 240, 0.85);
    color: var(--ink);
    border-color: rgba(15, 14, 13, 0.20);
}
.judge-photo-action-submit:hover {
    background: rgba(245, 244, 240, 0.95);
}
.judge-photo-action-weak {
    background: rgba(165, 62, 44, 0.55);
    border-color: rgba(220, 130, 110, 0.45);
    color: #f7e0d8;
}
.judge-photo-action-weak:hover {
    background: rgba(165, 62, 44, 0.78);
}

/* Personalised showcase variant — user's actual photos render via
   inline background-image style. The card uses the same chrome
   (corners + caption + tier pill) so the visual identity stays
   consistent. The eyebrow accent shifts to a positive green tint to
   signal "this is your tray, you're already in." */
.judge-photo-card-yours {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.judge-showcase-grid-yours {
    /* Tray photos may be < 5 — left-align rather than space-distribute
       so two photos don't stretch awkwardly across the row. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    justify-content: center;
}
.judge-showcase-eyebrow-yours {
    color: var(--positive);
    border: 1px solid color-mix(in srgb, var(--positive) 35%, transparent);
    padding: 4px 10px;
    border-radius: 2px;
    background: var(--positive-wash);
}
.judge-showcase-eyebrow-yours::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--positive);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
    animation: mech-pulse 1400ms var(--ease-in-out) infinite;
}

/* When a tray photo has a real verdict, the caption becomes a link to
   that competition's Judge page. Underline-on-hover is the only chrome —
   the text itself stays readable as a pencil-mark on the photo. */
.judge-photo-caption-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s var(--ease-out);
}
.judge-photo-card:hover .judge-photo-caption-link {
    transform: translateX(2px);
}
.judge-photo-caption-link strong {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 600;
}

/* Strong-submit honest line — green-tinted to celebrate the win. */
.judge-showcase-honest-strong {
    color: var(--ink);
    background: var(--positive-wash);
    border-left: 3px solid var(--positive);
    padding: 14px 18px;
    border-radius: 2px;
    text-align: left;
    max-width: 720px;
    margin: 32px auto 0;
}
.judge-showcase-honest-strong strong { color: var(--positive); }


/* ─── Tier-tease card — shows up under the personalised showcase once
     the user has at least one judged photo. Now hosts a full 3-column
     Free/Pro/Deep comparison grid so the value gap is visible at a
     glance — operator: "make next tiers more attractive". ─── */
.judge-tier-tease {
    margin: 32px 0 0;
    padding: 32px 36px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%,
            color-mix(in srgb, var(--red) 10%, transparent) 0%,
            transparent 65%),
        var(--card-surface);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}
.judge-tier-tease::before {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--red);
    opacity: 0.85;
}
.judge-tier-tease-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
}
.judge-tier-tease-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.judge-tier-tease-lede {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 60ch;
}
.judge-tier-tease-locked {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
}
.judge-tier-tease-locked li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.judge-tier-tease-locked .lock {
    font-size: 11px;
    opacity: 0.7;
}

/* 3-tier side-by-side comparison — Free / Pro / Deep, with the value
   gap between tiers visible at a glance. Pro card lifts visually so
   the eye reads it as the recommended next step. */
.judge-tier-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 0;
}
.judge-tier-tier {
    padding: 18px 18px 16px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall);
    transition: var(--card-transition);
}
.judge-tier-tier:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}
.judge-tier-tier-pro {
    border-color: var(--red);
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
    box-shadow: 0 0 0 1px var(--red) inset;
}
.judge-tier-tier-deep {
    border-color: var(--ink);
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.judge-tier-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.judge-tier-tier-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
}
.judge-tier-tier-pro .judge-tier-tier-name { color: var(--red); }
.judge-tier-tier-price {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.judge-tier-tier-price span {
    font-size: 10px;
    color: var(--ink-3);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-left: 1px;
}
.judge-tier-tier ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2);
}
.judge-tier-tier li {
    padding-left: 0;
}
.judge-tier-tier li.muted {
    color: var(--ink-4);
    font-style: italic;
}
.judge-tier-tier li strong { color: var(--ink); font-weight: 600; }

.judge-tier-tease-cta {
    margin-top: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
}
.judge-tier-tease-cta-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* Forward-action CTA stack — lays out the 3 forward actions cleanly
   when the user already has judged photos. */
.judge-showcase-cta-forward {
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 720px) {
    .judge-tier-tease {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .judge-tier-tiers {
        grid-template-columns: 1fr;
    }
}

/* Bottom caption — filename + one-line reason. Reads as a print's
   pencil mark on the back. */
.judge-photo-caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.judge-photo-slug {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.judge-photo-reason {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* Cascade entrance — Apple-tier: 60px translate, 5° max rotation,
   0.88 scale, 1.2s glide, 200ms cascade between cards. Reads like
   prints flung onto a contact sheet, settling into place one by one. */
.judge-showcase .judge-photo-card.reveal-up {
    transition:
        opacity 1.2s var(--ease-premium),
        transform 1.2s var(--ease-premium),
        filter 0.7s var(--ease-out),
        box-shadow 0.42s var(--ease-premium);
    filter: blur(6px);
}
.judge-showcase .judge-photo-card-1.reveal-up { transform: translateY(60px) rotate(-3deg)   scale(0.88); }
.judge-showcase .judge-photo-card-2.reveal-up { transform: translateY(70px) rotate(2deg)    scale(0.88); }
.judge-showcase .judge-photo-card-3.reveal-up { transform: translateY(80px) rotate(-1.4deg) scale(0.88); }
.judge-showcase .judge-photo-card-4.reveal-up { transform: translateY(70px) rotate(2.4deg)  scale(0.88); }
.judge-showcase .judge-photo-card-5.reveal-up { transform: translateY(60px) rotate(-2.6deg) scale(0.88); }
.judge-showcase .judge-photo-card.reveal-up.in-view {
    transform: translateY(0) rotate(0) scale(1);
    opacity: 1;
    filter: blur(0);
}
.judge-showcase.reveal-stagger .judge-photo-card.reveal-up:nth-child(1) { transition-delay: 0ms; }
.judge-showcase.reveal-stagger .judge-photo-card.reveal-up:nth-child(2) { transition-delay: 200ms; }
.judge-showcase.reveal-stagger .judge-photo-card.reveal-up:nth-child(3) { transition-delay: 400ms; }
.judge-showcase.reveal-stagger .judge-photo-card.reveal-up:nth-child(4) { transition-delay: 600ms; }
.judge-showcase.reveal-stagger .judge-photo-card.reveal-up:nth-child(5) { transition-delay: 800ms; }

@media (prefers-reduced-motion: reduce) {
    .judge-showcase .judge-photo-card.reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.judge-showcase-honest {
    margin: 36px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--ink-2);
    max-width: 56ch;
    line-height: 1.55;
}
.judge-showcase-honest strong { color: var(--ink); font-weight: 600; }

.judge-showcase-cta {
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.judge-showcase-cta-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}


/* ═════════════════════════════════════════════════════════════════
   Sample shortlist embedded on the index — frozen demo using real
   registry data so visitors see the actual output shape on landing.
   Visually framed so it doesn't get confused with a live result.
   ═════════════════════════════════════════════════════════════════ */
.sample-shortlist {
    margin: 56px 0;
    padding: 32px 28px;
    background:
        linear-gradient(180deg, var(--wall-2) 0%, var(--wall) 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
    position: relative;
}
.sample-shortlist::before {
    /* "DEMO" wash, lightly stamped in the corner — premium wallet-card vibe. */
    content: "SAMPLE";
    position: absolute;
    top: 14px; right: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-4);
    border: 1px solid var(--rule-2);
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--wall);
}
.sample-shortlist-head {
    margin: 0 0 22px;
    text-align: left;
    max-width: 640px;
}
.sample-shortlist-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    display: inline-block;
    margin-bottom: 8px;
}
.sample-shortlist-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--ink);
}
.sample-shortlist-sub {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
}
.sample-shortlist-frame {
    /* The included _shortlist.html partial uses .results / .match-cards
       which already styled — we just constrain width here. */
    margin: 0 -8px;
}
.sample-shortlist-cta {
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sample-shortlist-cta-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .sample-shortlist { padding: 24px 18px; }
    .sample-shortlist::before { top: 10px; right: 10px; }
    .sample-shortlist-title { font-size: 19px; }
}


/* ═════════════════════════════════════════════════════════════════
   Cross-flow score reconciliation — small line on each match card
   that tells the user the same photo against the same competition
   under a different category will produce a different score.
   ═════════════════════════════════════════════════════════════════ */
.cross-flow-hint {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: var(--wall-2);
    border-left: 2px solid var(--ink-4);
    border-radius: 2px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}
.cross-flow-hint strong { color: var(--ink-2); font-weight: 600; }
.cross-flow-hint a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
}
.cross-flow-hint a:hover { color: var(--red-dim); border-bottom-color: var(--red); }

/* Tier-aware variants of the cross-flow hint — strong/submit cards
   carry a subtle positive accent; weak-match cards a calm red wash so
   the honest "not this one" signal reads correctly. */
.cross-flow-hint-strong {
    border-left-color: var(--positive);
    background: var(--positive-wash);
}
.cross-flow-hint-strong strong { color: var(--positive); }
.cross-flow-hint-weak {
    border-left-color: var(--red);
    background: var(--red-wash);
}


/* ═════════════════════════════════════════════════════════════════
   Results header — large editorial number + tier breakdown.
   The match-count is now the dominant element on the results screen
   (operator: "make the UI more attractive for this phase").
   ═════════════════════════════════════════════════════════════════ */
.results-head-large {
    margin: 0 0 32px;
    padding: 8px 0 24px;
    border-bottom: 1px solid var(--rule);
}
.results-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
    padding: 3px 9px;
    border: 1px solid var(--red-line);
    border-radius: 2px;
    background: var(--red-wash);
}
.results-title-xl {
    margin: 0 0 14px;
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.05;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.results-title-num {
    /* Big red anchor — the number is what the eye lands on first. */
    color: var(--red);
    font-variant-numeric: tabular-nums;
    /* A subtle slide-down so the count "lands" when the result swaps in. */
    animation: results-num-in 720ms var(--ease-premium) both;
}
@keyframes results-num-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.results-title-text {
    color: var(--ink);
    font-weight: 600;
}

/* Tier breakdown line — the X strong / Y submit / Z maybe stat strip. */
.results-tier-line {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    animation: results-tier-in 720ms var(--ease-premium) 120ms both;
}
@keyframes results-tier-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.results-tier-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid;
}
.results-tier-stat strong {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.results-tier-stat-strong {
    color: var(--positive);
    border-color: rgba(88, 110, 78, 0.4);
    background: var(--positive-wash);
}
.results-tier-stat-submit {
    color: var(--ink);
    border-color: var(--rule-2);
    background: var(--wall-2);
}
.results-tier-stat-maybe {
    color: var(--amber);
    border-color: rgba(150, 113, 42, 0.4);
    background: rgba(150, 113, 42, 0.08);
}
.results-tier-stat-empty {
    color: var(--ink-3);
    border-color: var(--rule);
    background: var(--wall-2);
    font-style: italic;
}


/* ═════════════════════════════════════════════════════════════════
   Pro-tier upsell card — injected mid-results (after the 2nd match)
   so the user has already seen what single-judge produces. The card
   sells dual-judge in concrete terms, then routes to /pricing.
   ═════════════════════════════════════════════════════════════════ */
.results-pro-upsell {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px 32px;
    align-items: center;
    margin: 24px 0;
    padding: 28px 32px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 50% 100% at 100% 50%,
            color-mix(in srgb, var(--red) 14%, transparent) 0%,
            transparent 60%),
        var(--card-surface);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}
.results-pro-upsell::before {
    /* Soft red accent rule on the left edge, same language as the
       judge-CTA card on the detail page. */
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--red);
    opacity: 0.85;
}
.results-pro-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}
.results-pro-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.results-pro-lede {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 60ch;
}
.results-pro-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-2);
}
.results-pro-features li {
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
}
.results-pro-features li::before {
    content: '✓';
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--red);
    font-weight: 700;
}
.results-pro-cta {
    align-self: center;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .results-pro-upsell {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .results-title-xl { font-size: clamp(32px, 9vw, 42px); }
}


/* ═════════════════════════════════════════════════════════════════
   Progress-pending — masks the result container while the progress
   board is showing. Combined with data-progress-min-ms on the board
   itself, this lets a fully-cached response (~6ms) still display the
   board for the configured minimum so the user sees real work, not
   an instant flash to results.
   ═════════════════════════════════════════════════════════════════ */
.progress-pending {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out);
}


/* ═════════════════════════════════════════════════════════════════
   Judge-CTA card on the Analyze (detail) page. Replaces the inline
   judge form — the operator asked for Analyze and Judge to be two
   separate pages, so the detail page now just points at the new
   /competitions/{id}/judge route with a premium CTA card.
   ═════════════════════════════════════════════════════════════════ */
.judge-cta-card {
    /* Modern action card — uses the unified card surface with a tinted
       gradient overlay anchored on the left so the red accent reads as
       a "this is the action" cue without the old hard left-border line. */
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px 36px;
    align-items: center;
    margin: 48px 0;
    padding: 30px 34px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 40% 100% at 0% 50%,
            color-mix(in srgb, var(--red) 14%, transparent) 0%,
            transparent 65%),
        var(--card-surface);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    overflow: hidden;
}
.judge-cta-card::before {
    /* Subtle red rule on the left edge — replaces the prior 3px hard
       border with a softer color presence that fits the rounded card. */
    content: '';
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--red);
    opacity: 0.85;
}
.judge-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.judge-cta-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.judge-cta-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
}
.judge-cta-title {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.judge-cta-lede {
    margin: 8px 0 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.55;
    max-width: 60ch;
}
.judge-cta-lede strong {
    color: var(--ink);
    font-weight: 600;
}
.judge-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.judge-cta-actions .btn-lg {
    /* Slight lift on hover via the parent so the CTA feels like the
       single, obvious next action — not just another button. */
    transition: transform 0.18s var(--ease-out);
}
.judge-cta-card:hover .judge-cta-actions .btn-lg {
    transform: translateX(2px);
}
.judge-cta-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
    max-width: 24ch;
}
@media (max-width: 720px) {
    .judge-cta-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .judge-cta-actions {
        align-items: stretch;
    }
    .judge-cta-note { text-align: left; max-width: none; }
}


/* ═════════════════════════════════════════════════════════════════
   Judge page — premium photo-first layout at /competitions/{id}/judge.
   Numbered sections (01 → 02 → 03) anchor the flow: tray, category,
   results. Reuses the photo-tray + curate.js wiring from /analyze.
   ═════════════════════════════════════════════════════════════════ */
.judge-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0 64px;
}

.judge-head {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px 0 32px;
    margin: 8px 0 24px;
    border-bottom: 1px solid var(--rule);
    animation: judge-head-in 520ms var(--ease-out) both;
}
@keyframes judge-head-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.judge-head-mark {
    width: 96px;
    height: 96px;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--wall) 0%, var(--wall-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}
.judge-head-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.judge-head-mark svg { width: 56px; height: 56px; }
.judge-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.judge-head-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
}
.judge-head-title {
    margin: 2px 0 4px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: var(--ink);
}
.judge-head-meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

.judge-section {
    margin: 32px 0 48px;
}
.judge-section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.judge-section-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--red);
    padding: 4px 10px;
    border: 1px solid var(--red-line);
    border-radius: 2px;
    background: var(--red-wash);
    align-self: center;
}
.judge-section-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.judge-section-sub {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 70ch;
}

/* New category picker — card-style radios. Each category reads as a
   pickable pane with the kind, name, and a short description, instead
   of an inline radio strip. */
.judge-form-v2 { margin-top: 8px; }
.judge-form-v2 .judge-cat-pick {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.judge-form-v2 .judge-cat-option {
    display: block;
    padding: 0;
    cursor: pointer;
}
.judge-form-v2 .judge-cat-option input { display: none; }
.judge-form-v2 .judge-cat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--wall);
    transition:
        border-color 0.18s var(--ease-out),
        background 0.18s var(--ease-out),
        transform 0.18s var(--ease-out);
    height: 100%;
}
.judge-form-v2 .judge-cat-option:hover .judge-cat-card {
    border-color: var(--red-line);
    transform: translateY(-1px);
}
.judge-form-v2 .judge-cat-option input:checked + .judge-cat-card {
    border-color: var(--red);
    background: var(--red-wash);
    box-shadow: 0 0 0 1px var(--red) inset;
}
.judge-form-v2 .judge-cat-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.judge-form-v2 .judge-cat-kind {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.judge-form-v2 .judge-cat-desc {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-top: 4px;
}
.judge-form-actions {
    margin-top: 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.judge-form-actions-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* Visually-hidden helper used by the legend on the new picker */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ═════════════════════════════════════════════════════════════════
   Contest list — clean editorial rows ported from the original
   autonomy dashboard. Two-column layout: text block on the left
   (deadline stub, title linking to organizer URL, origin · status
   · fee · AI policy, category chips) and a facts column on the
   right (top prize + ANALYZE / JUDGE buttons). No emblems on the
   list itself — photography belongs on the match cards and on the
   detail-page hero, not as table-row decoration.
   ═════════════════════════════════════════════════════════════════ */
.contest-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.contest-row {
    /* Each row is now a card on the unified surface — picks up the same
       rounded-shadow language as the masthead, stat-cards, and aside.
       Three-column premium layout: organizer mark, text block, facts. */
    display: grid;
    grid-template-columns: 88px 1fr minmax(200px, 260px);
    gap: 28px;
    padding: 26px 28px;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    align-items: flex-start;
}
.contest-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

/* Organizer mark — the real fetched logo at premium 72px frame on the
   list. Hover lifts and saturates the image so the row feels alive when
   the photographer engages it. */
.contest-row-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    background: linear-gradient(135deg, var(--wall) 0%, var(--wall-2) 100%);
    color: var(--ink-2);
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    margin-top: 4px;
    transition:
        transform 0.25s var(--ease-out),
        border-color 0.2s var(--ease-out),
        box-shadow 0.25s var(--ease-out);
}
.contest-row-mark svg { width: 38px; height: 38px; }
.contest-row-mark-photo { background: var(--wall); padding: 0; }
.contest-row-mark-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
    transition: filter 0.25s var(--ease-out), transform 0.5s var(--ease-out);
}
.contest-row:hover .contest-row-mark {
    border-color: var(--rule);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
}
.contest-row:hover .contest-row-mark-photo img {
    filter: saturate(1);
    transform: scale(1.04);
}

.contest-row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contest-row-deadline {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.contest-row-deadline::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--ink-4);
}
.contest-row-deadline.close { color: var(--red); }
.contest-row-deadline.close::before { background: var(--red); }

.contest-row-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--ink);
    /* Long titles wrap rather than overflow */
    overflow-wrap: break-word;
}
.contest-row-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s var(--ease-out);
}
.contest-row-title a:hover { color: var(--red); }

.contest-row-origin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.contest-row-host { color: var(--ink-2); }
.contest-row-sep { color: var(--ink-4); }
.contest-row-status { color: var(--positive); text-transform: lowercase; }
.contest-row-ai { color: var(--ink-3); }

.contest-row-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.contest-row-cats .chip {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 4px 10px;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--wall);
    transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.contest-row:hover .contest-row-cats .chip {
    border-color: var(--rule);
}
.contest-row-cats .chip-more {
    color: var(--ink-3);
    border-style: dashed;
    background: transparent;
}

.contest-row-facts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    text-align: right;
}
.contest-row-facts .fact-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.contest-row-facts .fact-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.contest-row-facts .fact-value {
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    /* Allow long prize phrases to wrap onto a second line cleanly */
    max-width: 26ch;
    text-align: right;
}

.contest-row-actions {
    display: flex;
    gap: 8px;
}
.contest-row-actions .btn {
    min-width: 88px;
    text-align: center;
    letter-spacing: 0.04em;
}

@media (max-width: 920px) {
    .contest-row {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 18px 18px;
    }
    .contest-row-mark { width: 64px; height: 64px; margin-top: 0; }
    .contest-row-mark svg { width: 32px; height: 32px; }
    .contest-row-facts {
        grid-column: 1 / -1;
        align-items: flex-start;
        text-align: left;
        padding-top: 8px;
        border-top: 1px dashed var(--rule);
    }
    .contest-row-facts .fact-row { align-items: flex-start; }
    .contest-row-facts .fact-value { text-align: left; }
    .contest-row-title { font-size: 22px; }
}


/* ═════════════════════════════════════════════════════════════════
   Competition detail — premium photographic cover. The operator
   asked for the detail page to be "more about photos not only text",
   so the title now sits over a real fetched logo (or a richer SVG
   monogram for the three competitions whose og:image we couldn't
   resolve). Editorial framing, soft red wash, monospace eyebrow.
   ═════════════════════════════════════════════════════════════════ */
/* Legacy comp-hero styles kept dormant — competition.html no longer renders
   .comp-hero, but unrelated tests/templates may reference these classes if
   reused. Display: none keeps them out of the visual flow without breaking
   any selector match. */
.comp-hero { display: none; }


/* ─── Editorial masthead — typography-first replacement for the dark
     hero. Reads like a magazine article header: small publication mark,
     monospace dateline, big title, accent rule, organizer + source link,
     prominent deadline action strip. The logo is no longer stretched as
     a backdrop, so low-res monochrome marks (Tasweer, NG) look intentional
     instead of pixelated. ─── */
.comp-masthead {
    margin: 24px 0 28px;
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--rule);
    animation: comp-masthead-in 520ms var(--ease-out) both;
}
@keyframes comp-masthead-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.comp-masthead-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.comp-masthead-mark {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    background: linear-gradient(135deg, var(--wall) 0%, var(--wall-2) 100%);
    color: var(--ink-2);
    overflow: hidden;
}
.comp-masthead-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Padding pulls the logo off the frame edge so it reads as an emblem
       in a card, not a fullbleed photo (which is what made low-res marks
       look "stretched and blurry" in the prior design). */
    padding: 6px;
    background: var(--wall);
}
.comp-masthead-mark svg { width: 36px; height: 36px; }

.comp-masthead-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.5;
}
.comp-masthead-verified {
    color: var(--positive);
    text-transform: lowercase;
    letter-spacing: 0.06em;
}

.comp-masthead-title {
    margin: 0;
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -0.024em;
    font-weight: 700;
    color: var(--ink);
    max-width: 22ch;
    /* Long titles wrap rather than overflow. */
    overflow-wrap: break-word;
}
.comp-masthead-rule {
    border: none;
    height: 2px;
    width: 64px;
    background: var(--red);
    margin: 18px 0 14px;
}
.comp-masthead-organizer {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    font-size: 15px;
    color: var(--ink-2);
}
.comp-masthead-organizer span:first-child { font-weight: 500; }
.comp-masthead-source {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
    letter-spacing: 0.02em;
    transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.comp-masthead-source:hover {
    color: var(--red-dim);
    border-bottom-color: var(--red);
}

.comp-masthead-deadline {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--wall-2);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-2);
    letter-spacing: 0.02em;
}
.comp-masthead-deadline strong {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.comp-masthead-deadline-sep { color: var(--ink-4); }
.comp-masthead-deadline.close {
    border-color: var(--red-line);
    background: var(--red-wash);
    color: var(--red);
}
.comp-masthead-deadline.close strong { color: var(--red); }
.comp-masthead-deadline svg { color: inherit; }

@media (max-width: 720px) {
    .comp-masthead-title { font-size: 26px; }
    .comp-masthead-mark { width: 52px; height: 52px; }
}


/* ─── At-a-glance stats grid — surfaces the four pieces of data a
     photographer evaluates first (top prize, fee, AI policy, jury) so
     the decision to enter or skip is scannable from the first screen.
     Each card has its own visual weight: monospace label, large value,
     soft sub-line. ─── */
.comp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 36px;
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid transparent;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.stat-value {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.stat-value-policy { font-size: 18px; }
.stat-sub {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}
/* Free entry gets a quiet positive accent so it pops without yelling. */
.stat-card-free .stat-value { color: var(--positive); }
.stat-card-free .stat-label { color: var(--positive); }


/* ─── Editorial masthead band — Swiss/Magnum-style restraint. No
     gradient, no backdrop typography. Just hairlines and three rows
     of mono meta with the title as the only big type. The contest's
     own data (year, country, title, categories, organizer, deadline,
     AI policy) IS the variation. The tinted hairline beneath the
     title is the only color element — picked up per-page from the
     inline --cover-tint custom property. ─── */
.comp-masthead-band {
    --cover-tint: var(--red);
    position: relative;
    margin: 12px 0 28px;
    padding: 22px 28px 28px;
    /* Modern premium card — rounded, no hard borders. The tinted gradient
       does the framing work: corner glows at the bottom with the warmer
       brand wash, fading up into the page background. Soft drop shadow
       grounds the card without adding a line. */
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 62% 90% at 16% 110%,
            color-mix(in srgb, var(--cover-tint) 32%, transparent) 0%,
            transparent 58%),
        radial-gradient(ellipse 58% 80% at 84% 110%,
            color-mix(in srgb, var(--cover-tint) 22%, transparent) 0%,
            transparent 56%),
        radial-gradient(ellipse 70% 60% at 50% 0%,
            color-mix(in srgb, var(--cover-tint) 8%, transparent) 0%,
            transparent 65%),
        linear-gradient(180deg,
            var(--wall) 0%,
            color-mix(in srgb, var(--cover-tint) 5%, var(--wall)) 50%,
            color-mix(in srgb, var(--cover-tint) 16%, var(--wall-2)) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 12px 36px -10px color-mix(in srgb, var(--cover-tint) 22%, rgba(0, 0, 0, 0.06)),
        0 2px 6px rgba(0, 0, 0, 0.03);
}

.comp-masthead-band-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.comp-masthead-band-meta { white-space: nowrap; }
.comp-masthead-band-meta-r { text-align: right; }
.comp-masthead-band-sep { color: var(--ink-4); margin: 0 2px; }
/* The top-left year + country line lifts toward the contest's tint —
   a small, deliberate color moment that keeps the band from reading
   purely black-and-white without disturbing the rest of the meta. */
.comp-masthead-band-meta-tint {
    color: color-mix(in srgb, var(--cover-tint) 70%, var(--ink));
}

/* Date + country sit at the top of the band. Letter-spaced uppercase
   mono — gallery exhibition placard energy. No divider line: whitespace
   is the separator now (the operator found the hairlines "cheesy"). */
.comp-masthead-band-top { /* spacing only */ }

/* The masthead's anchor — small framed logo + tracked uppercase title
   + tinted hairline + italic categories line. Centered on the page,
   constrained width so the title breathes. The --parallax-y custom
   prop is set by app.js scrollHandler — center floats slightly slower
   than the band frame, giving the masthead a subtle depth shift. */
.comp-masthead-band-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 28px 24px 22px;
    transform: translateY(var(--parallax-y, 0));
    transition: transform 0.05s linear;
    will-change: transform;
}
.comp-masthead-band-mark {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wall);
    /* Tinted border + soft outer halo — the framed logo sits on a gentle
       wash of brand color, so the eye reads "this is the contest's
       identity" rather than a generic photo frame. */
    border: 1px solid color-mix(in srgb, var(--cover-tint) 35%, var(--rule-2));
    border-radius: 2px;
    overflow: hidden;
    color: var(--ink-2);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--cover-tint) 6%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.04);
}
.comp-masthead-band-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.comp-masthead-band-mark svg { width: 40px; height: 40px; }

.comp-masthead-band-titles {
    flex: 0 1 auto;
    text-align: center;
    min-width: 0;
}
.comp-masthead-band-h {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.05;
    /* Long organizer names ("Comedy Wildlife Photography") need to
       break gracefully without bursting the band. */
    overflow-wrap: break-word;
}
.comp-masthead-band-rule {
    border: none;
    height: 2px;
    width: 64px;
    background: var(--cover-tint);
    margin: 14px auto 10px;
    /* The single accent line — the only color element in the masthead.
       Lined up to the title, brand-tinted per competition. */
}
.comp-masthead-band-sub {
    margin: 0;
    font-family: 'Inter', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-3);
    letter-spacing: 0.005em;
    line-height: 1.4;
}

.comp-masthead-band-bottom { /* spacing only — divider removed */ }

/* ─── Related tracks — small editorial note shown below the masthead band
       when an organization runs parallel cycles (e.g. HIPA Family + the
       Dreams Through AI sister track). Apple-style restraint: muted color,
       smaller font, no border, no card. Reads as a footnote, not a
       feature block. */
.comp-related-tracks {
    margin: -16px 0 28px;       /* -16px pulls it visually closer to the band above */
    padding: 0 4px;
    color: var(--ink-3);
}

.comp-related-tracks-lede {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: 0.003em;
}

.comp-related-tracks-label {
    color: var(--ink-2);
    font-weight: 500;
    margin-right: 4px;
}

.comp-related-tracks-item strong {
    color: var(--ink-1);
    font-weight: 600;
}
.comp-related-tracks-item a {
    color: var(--ink-1);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-4);
}
.comp-related-tracks-item a:hover { border-bottom-color: var(--ink-2); }

.comp-related-tracks-status { color: var(--ink-3); }

.comp-related-tracks-sep {
    margin: 0 8px;
    color: var(--ink-4);
}

.comp-related-tracks-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .comp-masthead-band-center {
        flex-direction: column;
        gap: 18px;
        padding: 22px 18px;
    }
    .comp-masthead-band-row { padding: 5px 18px; font-size: 10px; }
    .comp-masthead-band-h { font-size: clamp(22px, 7vw, 30px); letter-spacing: 0.12em; }
    .comp-masthead-band-mark { width: 56px; height: 56px; }
}


/* ─── Two-column layout: scrolling main + sticky aside.
     The aside pins the deadline + Judge CTA so the action is reachable
     anywhere on the page without scrolling back. On mobile the aside
     drops below the main content and goes back to natural flow. ─── */
.comp-layout {
    margin-top: 0;
}
.comp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: flex-start;
    margin-top: 24px;
}
.comp-main { min-width: 0; }

.comp-aside {
    /* Sticky on desktop. Top offset accounts for the masthead height. */
    position: sticky;
    top: 24px;
    align-self: start;
}
.comp-aside-inner {
    padding: 24px 22px;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}

/* Aside deadline block — the red number is the visual anchor. */
.comp-aside-deadline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
}
.comp-aside-deadline-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.comp-aside-deadline-num {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-top: 4px;
}
.comp-aside-deadline-date {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.comp-aside-deadline.close .comp-aside-deadline-num,
.comp-aside-deadline.close .comp-aside-deadline-label { color: var(--red); }

/* Aside facts — three stacked rows, label left, value right. */
.comp-aside-facts {
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comp-aside-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--rule-2);
}
.comp-aside-facts > div:last-child { border-bottom: none; }
.comp-aside-facts dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.comp-aside-facts dd {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    text-align: right;
    letter-spacing: -0.005em;
}

.comp-aside-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    /* Slight pulse so the eye knows this is the action. */
    box-shadow: 0 0 0 0 var(--red-line);
    transition: box-shadow 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.comp-aside-cta:hover {
    box-shadow: 0 0 0 4px var(--red-wash);
    transform: translateY(-1px);
}
.comp-aside-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    text-align: center;
}

/* Watch form inside the aside — secondary action, intentionally smaller
   so it doesn't compete with the Judge CTA. */
.comp-aside-watch {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.comp-aside-watch-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.comp-aside-watch-form {
    display: flex;
    gap: 6px;
}
.comp-aside-watch-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--rule-2);
    background: var(--wall);
    font-size: 12px;
    color: var(--ink);
    border-radius: 2px;
    font-family: var(--font-mono);
}
.comp-aside-watch-input:focus {
    outline: none;
    border-color: var(--red);
}

@media (max-width: 960px) {
    /* Aside drops below content on tablet+phone. No sticky behavior —
       the photographer scrolls naturally. */
    .comp-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .comp-aside {
        position: static;
    }
}


/* ─── Editorial pull-quote — the jury's persona/character sentence
     surfaced as a magazine pull-quote so the eye lands on it before
     the section list. Highest-signal line on the page for "is this
     contest for my work?" ─── */
.comp-pullquote {
    margin: 36px 0 32px;
    padding: 24px 28px 24px 32px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(ellipse 28% 100% at 0% 50%,
            color-mix(in srgb, var(--red) 12%, transparent) 0%,
            transparent 60%),
        var(--card-surface);
    box-shadow: var(--card-shadow);
    position: relative;
    transition: var(--card-transition);
    overflow: hidden;
}
.comp-pullquote:hover { box-shadow: var(--card-shadow-hover); }
.comp-pullquote::after {
    /* Soft red left rule, same language as the action cards. */
    content: '';
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--red);
    opacity: 0.85;
}
.comp-pullquote-mark {
    position: absolute;
    left: 0;
    top: -12px;
    transform: translateX(-50%);
    background: var(--wall);
    color: var(--red);
    font-family: 'Inter', serif;
    font-size: 36px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    padding: 0 8px;
}
.comp-pullquote p {
    margin: 0;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.005em;
    font-style: italic;
}
.comp-pullquote footer {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

@media (max-width: 720px) {
    .comp-pullquote p { font-size: 18px; }
}


/* ─── Collapsed details — Format requirements, Eligibility, Rights are
     reference data, not decision data. They live in <details> so the
     page above the fold stays focused on what the photographer
     actually evaluates. ─── */
.comp-details {
    margin: 14px 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--card-transition);
}
.comp-details:hover { box-shadow: var(--card-shadow-hover); }
.comp-details[open] { background: var(--card-surface); }
.comp-details-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    list-style: none;
    /* Reset the default disclosure triangle — we render our own marker. */
    position: relative;
    user-select: none;
    transition: color 0.15s var(--ease-out);
}
.comp-details-summary::-webkit-details-marker { display: none; }
.comp-details-summary:hover { color: var(--red); }
.comp-details-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red-wash);
    color: var(--red);
    border: 1px solid var(--red-line);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}
.comp-details-hint {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    font-weight: 400;
}
.comp-details-summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-3);
    transition: transform 0.18s var(--ease-out);
}
.comp-details[open] .comp-details-summary::after {
    content: '−';
}
.comp-details > :not(summary) {
    padding: 4px 22px 22px;
}
.comp-hero-cover {
    position: relative;
    background: var(--wall-2);
    overflow: hidden;
    /* Diagonal seam between cover and meta — adds editorial structure */
    border-right: 1px solid rgba(245, 244, 240, 0.08);
}
.comp-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight saturation hold so the photo doesn't shout louder than the
       editorial frame; full color on hover for engagement. */
    filter: saturate(0.95);
    transition: transform 0.5s var(--ease-out), filter 0.4s var(--ease-out);
}
.comp-hero:hover .comp-hero-image {
    transform: scale(1.03);
    filter: saturate(1);
}
.comp-hero-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
}
.comp-hero-mark svg {
    width: 72%;
    height: 72%;
    max-width: 220px;
    max-height: 220px;
}
.comp-hero-veil {
    /* Soft inner gradient so a busy logo doesn't fight the editorial frame.
       Only on the cover side; the meta side is its own composition. */
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(15, 14, 13, 0.0) 0%,
        rgba(15, 14, 13, 0.0) 60%,
        rgba(15, 14, 13, 0.45) 100%);
    pointer-events: none;
}

.comp-hero-svg .comp-hero-cover {
    /* When falling back to SVG, give it a richer wash so the mark sits in
       a proper editorial card rather than an empty square. */
    background:
        radial-gradient(ellipse at 30% 20%, rgba(165, 62, 44, 0.10) 0%, transparent 60%),
        linear-gradient(135deg, var(--wall) 0%, var(--wall-2) 100%);
}

.comp-hero-meta {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--frame) 0%, #14130f 100%);
}
.comp-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(245, 244, 240, 0.55);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.comp-hero-title {
    margin: 4px 0 0;
    font-size: 30px;
    font-weight: 600;
    color: var(--wall);
    letter-spacing: -0.018em;
    line-height: 1.15;
    /* Keep long titles legible without breaking the layout */
    overflow-wrap: break-word;
}
.comp-hero-organizer {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(245, 244, 240, 0.45);
    letter-spacing: 0.04em;
}
.comp-hero-deadline {
    margin-top: 14px;
    padding: 8px 12px;
    background: rgba(245, 244, 240, 0.06);
    border: 1px solid rgba(245, 244, 240, 0.10);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(245, 244, 240, 0.78);
    letter-spacing: 0.02em;
    align-self: flex-start;
}
.comp-hero-deadline strong { color: var(--wall); font-weight: 600; }
.comp-hero-deadline.close {
    border-color: var(--red-line);
    background: rgba(165, 62, 44, 0.18);
    color: var(--wall);
}
.comp-hero-deadline.close strong { color: var(--wall); }

@media (max-width: 720px) {
    .comp-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .comp-hero-cover {
        height: 200px;
        border-right: none;
        border-bottom: 1px solid rgba(245, 244, 240, 0.08);
    }
    .comp-hero-meta { padding: 22px 22px 26px; }
    .comp-hero-title { font-size: 22px; }
}


/* ──────────────────────────────────────────────────────────────────
   Pricing band — homepage anchor for the three tiers. The single
   /pricing page is the canonical source of truth for the numbers;
   this surface names the tiers in editorial form, anchors the
   activation CTA (Try free), and lifts Studio (recommended) and
   Atelier (premium) visually so the value gap reads at a glance.

   Reuses the design grammar already established by .judge-tier-tier
   in this file — same gradient + accent tokens — under new class
   names so the homepage band can evolve independently of contextual
   tier-tease surfaces elsewhere.
   ────────────────────────────────────────────────────────────────── */
.pricing-band {
    max-width: 1080px;
    margin: 0 auto;
    padding: 88px 24px 72px;
}
.pricing-band-head { margin-bottom: 36px; max-width: 64ch; }
.pricing-band-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.pricing-band-title {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.15;
}
.pricing-band-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}
.pricing-band-lede em {
    color: var(--red);
    font-style: italic;
    font-weight: 500;
}

/* The 3-card grid. On desktop, three equal columns with a small gap
   so each tier stands as a distinct piece of editorial. On narrow
   viewports we collapse to a single column. */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0 0 36px;
}
@media (max-width: 880px) {
    .tier-grid { grid-template-columns: 1fr; gap: 14px; }
}
.tier-card {
    padding: 26px 24px 22px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
    transition: var(--card-transition);
    display: flex;
    flex-direction: column;
}
.tier-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}
/* Studio is the recommended next step — soft-red accent + inset
   border, matches the pattern for .judge-tier-tier-pro. */
.tier-card-studio {
    border-color: var(--red);
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
    box-shadow: 0 0 0 1px var(--red) inset;
}
/* Atelier reads as the premium tier — deeper card weight, no red. */
.tier-card-atelier {
    border-color: var(--ink);
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.tier-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}
.tier-card-mark {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 2px;
}
.tier-card-studio .tier-card-mark { color: var(--red); }
.tier-card-atelier .tier-card-mark { color: var(--ink-2); }
.tier-card-name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
}
/* Hide the duplicate name in Studio/Atelier marks (the mark already
   names the tier) — keep .tier-card-name as the visual anchor. */
.tier-card-price {
    margin: 8px 0 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.tier-card-amount {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1;
}
.tier-card-cadence {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.tier-card-bill {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}
.tier-card-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.tier-card-features li {
    padding-left: 14px;
    position: relative;
}
.tier-card-features li::before {
    content: '·';
    position: absolute;
    left: 2px;
    top: -2px;
    color: var(--ink-4);
    font-weight: 700;
    font-size: 16px;
}
.tier-card-studio .tier-card-features li::before { color: var(--red); }
.tier-card-atelier .tier-card-features li::before { color: var(--ink-2); }

/* ─── Tier-card recognition states (signed-in viewer) ───────────
   Three states layered atop the per-tier base styles above:

     .tier-card-available  — viewer can choose this tier; default,
                             matches the existing card behaviour.
                             Class still applied for explicit state
                             selectors but carries no overrides.
     .tier-card-current    — this IS the viewer's plan. Subtle border
                             lift in --reg-accent so the eye lands
                             here without shouting. Renewal cadence +
                             "since" date + manage-subscription
                             button render in the CTA slot.
     .tier-card-graduated  — viewer has moved past this tier. Card
                             stays visible (pricing transparency) but
                             the hover lift disappears, opacity drops,
                             and the CTA slot is replaced by a quiet
                             editorial note.

   Under .viewer-atelier the --reg-accent token resolves to --frame
   (the calmer dark-ink emphasis), so an Atelier viewer sees their
   own "Your plan" card outlined in dark editorial ink rather than
   Magnum red — the premium register difference compounds across
   the surface.                                              */

.tier-card-available {
    /* Default state — class is applied for explicit selectors but
       carries no overrides; the per-tier base styles do the work. */
}

.tier-card-current {
    border-color: var(--reg-accent);
    box-shadow:
        0 0 0 1px var(--reg-accent),
        var(--card-shadow);
}
.tier-card-current:hover {
    box-shadow:
        0 0 0 1px var(--reg-accent),
        var(--card-shadow-hover);
}

/* The recognition pill — small mono-cap label in the card head,
   above the tier mark. Reads as a quiet acknowledgment, not a
   badge. Colour follows --reg-accent so the pill picks up the
   register's emphasis ink. */
.tier-card-current-pill {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--reg-accent);
    background: color-mix(in srgb, var(--reg-accent) 8%, transparent);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

/* "Opened on YYYY-MM-DD" — small mono date stamp above the manage-
   subscription button. The since-date is the temporal anchor for
   the relationship; rendering it in mono gives it the receipt-stub
   character the operator's brand voice favours. */
.tier-card-since {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-align: center;
}
.tier-card-since time {
    color: var(--ink-2);
    font-weight: 500;
}

.tier-card-current-form {
    margin: 12px 0 0;
}

/* Manage-subscription button. Inherits btn base styles and uses
   --reg-* tokens so the visual register is correct: under
   .viewer-atelier the button lands on --frame instead of --red,
   which is the largest single felt difference between Studio and
   Atelier reading their own cards. */
.tier-card-manage {
    width: 100%;
    background: var(--reg-cta-primary-bg);
    color: var(--reg-cta-primary-color);
    border: 1px solid var(--reg-cta-primary-border);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s var(--ease-out),
                filter 0.15s var(--ease-out),
                transform 0.15s var(--ease-out);
}
.tier-card-manage:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.tier-card-manage:focus-visible {
    outline: 2px solid var(--reg-cta-primary-bg);
    outline-offset: 3px;
}

.tier-card-renewal {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
    font-style: italic;
}

/* Graduated — viewer has moved past this tier. Visible but quiet.
   The opacity drop reads as "this is in the room but it's not
   where you are now." Removing the hover lift signals the card
   is informational, not actionable. */
.tier-card-graduated {
    opacity: 0.62;
}
.tier-card-graduated:hover {
    transform: none;
    box-shadow: var(--card-shadow);
    opacity: 0.78;
}
.tier-card-graduated .tier-card-cta,
.tier-card-graduated .tier-card-current-form,
.tier-card-graduated .tier-card-renewal,
.tier-card-graduated .tier-card-since {
    display: none;
}
.tier-card-graduated-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
    font-style: italic;
    text-align: center;
}

/* ─── Critic Pass — Atelier-included reframe ───────────────────
   When the viewer is on Atelier, the Critic Pass single-shot offer
   is replaced by an acknowledgment that their plan already covers
   it. The band stays visible (transparency), the price + CTA
   disappear, and the surface tone shifts to read as recognition
   rather than purchase. */
.critic-pass-band-included {
    /* Slightly warmer paper than the default critic-pass-band, so
       the included variant reads as part of the Atelier register
       without competing with the tier-card-current styling above. */
    background: color-mix(in srgb, var(--wall-2) 70%, var(--wall));
    border-color: var(--rule-soft);
}
.critic-pass-band-included .critic-pass-mark {
    color: var(--frame);
}
.critic-pass-band-included .critic-pass-name {
    color: var(--ink);
}

/* CTA row — primary (Try free) lifts the eye, secondary (Compare in
   detail) is a quiet text-link. Both align baseline. */
.pricing-band-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.pricing-band-compare {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: color 0.18s, border-color 0.18s;
}
.pricing-band-compare:hover {
    color: var(--red);
    border-color: var(--red);
}
.pricing-band-footnote {
    margin: 0;
    max-width: 64ch;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--ink-4);
}


/* ──────────────────────────────────────────────────────────────────
   Coverage refresh button — lives in the coverage-head, gives the
   user explicit control over freshness. Quiet by default, clear
   feedback on hover, brief animation on click via HTMX indicator.
   Wires to the same registry-rendering route as the index, scoped
   to the contest-list partial.
   ────────────────────────────────────────────────────────────────── */
.coverage-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.coverage-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s;
}
.coverage-refresh:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-wash);
}
.coverage-refresh-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.6s var(--ease-premium, cubic-bezier(0.4, 0, 0.2, 1));
}
.coverage-refresh.htmx-request .coverage-refresh-icon {
    animation: coverage-refresh-spin 0.8s linear infinite;
}
@keyframes coverage-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.coverage-refresh-stamp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    text-transform: uppercase;
}


/* ──────────────────────────────────────────────────────────────────
   Coverage filter bar — sits above the contest list, server-side via
   GET /hunter/coverage with Pydantic Literal validation. Plain-
   language labels per the council's UX bar (e.g. "Allows AI-edited
   photos? · Yes / No / Unclear" rather than the manifest's enum
   "ai_policy"). Chip styling reuses the design grammar already
   established by .chip / .verdict-pill — single visual vocabulary
   for selectable atoms across the product.
   ────────────────────────────────────────────────────────────────── */
.coverage-filters {
    margin: 18px 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.coverage-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: flex-start;
}
.coverage-filters-row-search {
    align-items: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
}
.coverage-filter-search {
    flex: 1 1 320px;
    display: block;
}
.coverage-filter-search input[type="search"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.coverage-filter-search input[type="search"]:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-wash);
}
.coverage-filter-search input[type="search"]::placeholder {
    color: var(--ink-4);
}
.coverage-filter-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.coverage-filter-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.coverage-filter-sort select {
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2358574f' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.coverage-filter-sort select:focus {
    outline: none;
    border-color: var(--red);
}

/* Chip-grouped fieldsets — one row per filter dimension. Legend acts
   as the row label in mono-uppercase; chips inline beside it. */
.coverage-filter-group {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.coverage-filter-group legend {
    flex: 0 0 100%;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
@media (min-width: 760px) {
    .coverage-filter-group legend {
        flex: 0 0 auto;
        margin-bottom: 0;
        margin-right: 4px;
    }
}
.coverage-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.coverage-chip input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.coverage-chip span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: var(--wall);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    transition: all 0.16s;
}
.coverage-chip:hover span {
    border-color: var(--ink-3);
    color: var(--ink);
}
.coverage-chip input[type="radio"]:checked + span {
    border-color: var(--red);
    background: var(--red-wash);
    color: var(--red);
    font-weight: 600;
}
.coverage-chip input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Result count + refresh stamp — quiet line under the filter bar,
   above the list itself. */
.coverage-list-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.coverage-list-count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
}
.coverage-list-count strong {
    color: var(--ink);
    font-weight: 600;
}
/* "Tonight's pulse" — the small inline urgency line right after the
   count, e.g. "12 open tonight · 3 closing this week". The pulse
   number is rendered in the brand red so the urgency reads at a
   glance without becoming alarming. */
.coverage-list-pulse {
    margin-left: 4px;
    color: var(--ink-3);
}
.coverage-list-pulse strong {
    color: var(--red);
}
.coverage-list-stamp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.coverage-empty-filtered {
    margin: 18px 0;
    padding: 20px;
    text-align: center;
    color: var(--ink-3);
    background: var(--wall-2);
    border-radius: 6px;
    font-size: 14px;
}
.coverage-empty-filtered a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ──────────────────────────────────────────────────────────────────
   /pricing page — canonical pricing surface. Reuses the .tier-grid
   and .tier-card-* design grammar from the homepage band so both
   surfaces speak one visual language. Page-specific surfaces below:
   masthead head, currency+billing toggle, tier-card info tooltips
   and "what's also included" expander, Critic Pass single-shot band,
   hardship paragraph, collapsible legal expander.
   ────────────────────────────────────────────────────────────────── */
.pricing-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 24px 96px;
}
.pricing-page-head {
    margin-bottom: 28px;
    max-width: 68ch;
}
.pricing-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.pricing-page-title {
    margin: 0 0 18px;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.12;
}
.pricing-page-lede {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}
.pricing-page-anchor {
    /* WWAD audit (2026-05-09): the prior treatment (red border-left +
       red-wash background) read as a sales-banner. Operator's standing
       rule: never coercion, banners, or urgency tactics. The sentence
       itself is load-bearing for value framing and stays — just rendered
       as quiet italic copy in line with the lede above, no visual
       elevation that calls attention to it as "marketing." */
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
    font-style: italic;
}
.pricing-page-teams {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.pricing-page-teams a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
}
.pricing-page-teams a:hover { color: var(--ink); border-color: var(--ink); }

/* Currency + billing toggle — text-link affordance, not chips. The active
   value renders bold; alternates are hairline-underlined links. The dot
   between groups is the page's mid-dot brand grammar. */
/* WWAD audit (2026-05-09): currency + bill toggles now live on a
   single row inside .pricing-controls, saving vertical space and
   reading as one unified control. The currency toggle drops its
   bordered-box treatment in favour of plain inline text-link
   group — the bordered-box was carrying weight that competed
   with the bill toggle next to it. */
.pricing-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 36px;
}
.pricing-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}
.pricing-toggle-prefix { color: var(--ink-3); }
.pricing-toggle-group { display: inline-flex; align-items: baseline; gap: 6px; }
.pricing-toggle-group strong {
    color: var(--ink);
    font-weight: 600;
}
.pricing-toggle-group a {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: color 0.18s, border-color 0.18s;
}
.pricing-toggle-group a:hover { color: var(--red); border-color: var(--red); }
.pricing-toggle-sep { color: var(--ink-4); }

/* Billing-cycle segmented toggle — visible two-state control above the
   tier grid. Designed to read instantly as a control, not as text:
   strong inset shadow on the rail, white pill that physically slides
   under the active option, generous touch targets, and an honest
   "save 2 months" tag on Annual that's always visible (not just when
   selected). Both options carry equal weight in the resting state. */
.bill-toggle-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.bill-toggle-label-prefix {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.bill-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 6px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--wall-2);
    box-shadow: inset 0 1px 2px rgba(15, 14, 13, 0.06);
    align-self: flex-start;
}
.bill-toggle-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    min-width: 168px;
    color: var(--ink-3);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    justify-content: center;
}
.bill-toggle-option:hover {
    color: var(--ink);
}
.bill-toggle-option.is-active {
    background: var(--wall);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 14, 13, 0.10), 0 0 0 1px var(--rule);
}
.bill-toggle-option.is-active:hover {
    color: var(--ink);
}
.bill-toggle-label {
    line-height: 1;
}
.bill-toggle-saving {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--red);
    color: var(--wall);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.bill-toggle-option.is-active .bill-toggle-saving {
    background: var(--red);
    color: var(--wall);
}
@media (max-width: 640px) {
    .bill-toggle { width: 100%; }
    .bill-toggle-option { flex: 1; min-width: 0; padding: 12px 14px; gap: 8px; font-size: 14px; }
    .bill-toggle-saving { font-size: 9.5px; padding: 2px 7px; }
}

/* Tier-card additions for /pricing — positioning sentence under the
   head, info-tooltip <details> for each feature, "What's also included"
   expander for the secondary feature list, compliance band footer. */
.pricing-tier-grid { margin-bottom: 36px; }
.tier-card-positioning {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-3);
    font-style: italic;
}
.tier-card-info {
    display: inline-block;
    margin-left: 4px;
    vertical-align: baseline;
}
.tier-card-info > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    transition: all 0.16s;
    user-select: none;
}
.tier-card-info > summary::-webkit-details-marker { display: none; }
.tier-card-info > summary:hover {
    border-color: var(--red);
    color: var(--red);
}
.tier-card-info[open] > summary {
    background: var(--red-wash);
    border-color: var(--red);
    color: var(--red);
}
.tier-card-info > p {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: var(--wall-2);
    border-left: 2px solid var(--red);
    border-radius: 0 4px 4px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    font-style: normal;
}
.tier-card-extra {
    margin: 12px 0 16px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}
.tier-card-extra > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color 0.18s;
}
.tier-card-extra > summary::-webkit-details-marker { display: none; }
.tier-card-extra > summary::after {
    content: '  +';
    color: var(--ink-4);
    font-weight: 700;
}
.tier-card-extra[open] > summary::after { content: '  −'; }
.tier-card-extra > summary:hover { color: var(--red); }
.tier-card-extra ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
}
.tier-card-extra ul li::before {
    content: '·  ';
    color: var(--ink-4);
}
.tier-card-cta {
    margin-top: auto;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.tier-card-compliance {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--ink-4);
    opacity: 0.85;
}

/* Critic Pass single-shot band — horizontal aside below the grid, lower
   visual weight than the tier cards (no shadow, no gradient). Lives as
   the fourth option without competing for the same eye-track as the grid. */
/* WWAD audit (2026-05-09): Critic Pass elevated from a tacked-on
   band to its own section with a header above. .critic-pass-section
   wraps a .critic-pass-section-head + the existing band, mirroring
   the .pricing-page-head treatment so the two-tier hierarchy
   (subscriptions ↑ / one-shot ↓) reads cleanly. */
.critic-pass-section {
    margin: 16px 0 28px;
}
.critic-pass-section-head {
    margin: 0 0 16px;
}
.critic-pass-section-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.critic-pass-section-title {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.critic-pass-section-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 64ch;
}

.critic-pass-band {
    margin: 0;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border: 1px dashed var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
}
.critic-pass-text { flex: 1 1 320px; }
.critic-pass-mark {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.critic-pass-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.critic-pass-price {
    font-family: var(--font-mono);
    color: var(--red);
}
.critic-pass-cadence {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.critic-pass-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 64ch;
}
.critic-pass-cta { flex: 0 0 auto; }

/* Hardship paragraph — quiet emphasis. The content is load-bearing
   trust copy; the styling stays restrained so the words do the work. */
.pricing-hardship {
    margin: 0 0 36px;
    padding: 16px 20px;
    border-left: 3px solid var(--ink-3);
    background: var(--wall-2);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    border-radius: 0 6px 6px 0;
    max-width: 76ch;
}
.pricing-hardship a {
    color: var(--red);
    border-bottom: 1px solid var(--red);
    text-decoration: none;
    padding-bottom: 1px;
}

/* Legal expander — full T&Cs collapsed at the bottom. Curiosity-gap
   label in mono-uppercase, expanded content in body type. */
.pricing-legal {
    margin: 0 0 36px;
    padding: 18px 22px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--wall);
}
.pricing-legal > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color 0.18s;
}
.pricing-legal > summary::-webkit-details-marker { display: none; }
.pricing-legal > summary::after {
    content: '  +';
    color: var(--ink-4);
    font-weight: 700;
}
.pricing-legal[open] > summary::after { content: '  −'; }
.pricing-legal > summary:hover { color: var(--red); }
.pricing-legal h3 {
    margin: 22px 0 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.pricing-legal p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}
.pricing-legal a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pricing-page-footnote {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.pricing-page-footnote a {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
.pricing-page-footnote a:hover { color: var(--red); border-color: var(--red); }


/* ──────────────────────────────────────────────────────────────────
   Contest analyze — № 02 Editorial layer (Studio+) + tier teasers.
   Renders as body-type article (Designer reviewer's spec): NOT a
   tinted card, NOT a sidebar, NOT chrome-bound. Sub-sections
   stack with hairline separators; chips accent the value labels.
   ────────────────────────────────────────────────────────────────── */
.comp-editorial {
    margin: 28px 0 32px;
    padding: 28px 0 0;
    border-top: 1px solid var(--rule);
}
.comp-editorial-head { margin-bottom: 18px; }
.comp-editorial-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.comp-editorial-block {
    margin: 0 0 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--rule);
}
.comp-editorial-block:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.comp-editorial-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.comp-editorial-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
}
.comp-editorial-chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--rule-2);
    color: var(--ink-3);
    background: var(--wall-2);
    font-weight: 600;
}
.comp-editorial-chip-fair {
    border-color: var(--ink-3);
    color: var(--ink-2);
    background: var(--wall);
}
.comp-editorial-chip-generous {
    border-color: #5a8060;
    color: #3a6448;
    background: #ebf3ec;
}
.comp-editorial-chip-questionable {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-wash);
}
.comp-editorial-chip-rights-friendly {
    border-color: #5a8060;
    color: #3a6448;
    background: #ebf3ec;
}
.comp-editorial-chip-rights-neutral {
    border-color: var(--ink-3);
    color: var(--ink-2);
    background: var(--wall-2);
}
.comp-editorial-chip-rights-hostile {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-wash);
}

/* Comparable contests — small list, links in red, mono meta */
.comp-editorial-comparables {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comp-editorial-comparables li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
}
.comp-editorial-comparables a {
    color: var(--red);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s;
}
.comp-editorial-comparables a:hover { border-color: var(--red); }
.comp-editorial-comp-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

/* Apprentice teaser — gate is editorial elision, not blur or padlock.
   Real text fades to ellipsis; the gate copy below is the affordance. */
.comp-editorial-teaser-body {
    color: var(--ink-2);
    /* CSS-mask gradient on the last 80px so the truncated ellipsis
       feels graceful rather than abrupt. */
    -webkit-mask-image: linear-gradient(180deg, var(--ink) 60%, transparent 100%);
    mask-image: linear-gradient(180deg, var(--ink) 60%, transparent 100%);
}
.comp-editorial-gate {
    margin: 4px 0 22px;
    padding: 22px;
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
    border: 1px solid var(--red);
    border-radius: 8px;
    text-align: center;
}
.comp-editorial-gate-lede {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.comp-editorial-gate-cta {
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    align-items: baseline;
    flex-wrap: wrap;
}
.comp-editorial-gate-link {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
.comp-editorial-gate-link:hover { color: var(--red); border-color: var(--red); }

/* Atelier № 03 personalised — quiet card, button currently disabled
   while auth lands. Honest disclosure beats fake-functional buttons. */
.comp-editorial-personalised {
    margin-top: 22px;
    padding: 22px 24px;
    background: var(--wall-2);
    border-radius: 8px;
    border-left: 3px solid var(--ink);
}
.comp-editorial-personalised-cta {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.comp-editorial-personalised-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.comp-editorial-atelier-tease {
    margin: 18px 0 0;
    padding: 14px 18px;
    background: var(--wall-2);
    border-left: 2px solid var(--ink-3);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.comp-editorial-atelier-tease a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
}


/* ──────────────────────────────────────────────────────────────────
   Pre-checkout consent screen + recorded confirmation. Single-column
   max 580px, masthead only — the legally-loaded surface must read
   like signing a contract, not filling a SaaS form.
   ────────────────────────────────────────────────────────────────── */
.consent-page,
.teams-page,
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 88px;
}
.consent-page { max-width: 640px; }
.consent-page-head { margin-bottom: 26px; }
.consent-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.consent-page-eyebrow-success { color: #3a6448; }
.consent-page-title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.18;
}
.consent-page-bill {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-3);
}

.consent-cart {
    margin: 0 0 28px;
    padding: 18px 22px;
    background: var(--wall-2);
    border-radius: 6px;
    border-left: 3px solid var(--red);
}
.consent-cart-items {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    font-size: 13.5px;
}
.consent-cart-items dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    align-self: baseline;
}
.consent-cart-items dd {
    margin: 0;
    color: var(--ink);
}

.consent-form {
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.consent-block {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
}
.consent-block-mark {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 4px;
}
.consent-block-context {
    grid-column: 2 / -1;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.consent-checkbox,
.consent-radio {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    cursor: pointer;
    padding: 10px 0;
    align-items: start;
}
.consent-radio + .consent-radio {
    border-top: 1px solid var(--rule);
    padding-top: 14px;
    margin-top: 4px;
}
.consent-checkbox input,
.consent-radio input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    cursor: pointer;
    accent-color: var(--red);
}
.consent-checkbox-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.consent-checkbox-body strong {
    color: var(--ink);
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}
.consent-checkbox-body a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Email-input block — same grid-column escape as the checkbox/radio
   variants, otherwise the <label> falls into the 32px mark column
   and the descriptive text wraps one word per line. */
.consent-email {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: text;
}
.consent-email-label {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.consent-email-label strong {
    color: var(--ink);
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}
.consent-email-input {
    font: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--wall);
    color: var(--ink);
    transition: border-color 0.12s;
}
.consent-email-input:focus {
    outline: none;
    border-color: var(--red);
}

.consent-cite {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

.consent-honest {
    margin: 0 0 22px;
    padding: 16px 20px;
    background: var(--wall-2);
    border-left: 3px solid var(--ink-3);
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
}
.consent-honest strong { color: var(--ink); font-weight: 600; }

.consent-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.consent-submit { padding: 14px 24px; }
.consent-back {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
.consent-back:hover { color: var(--red); border-color: var(--red); }

.consent-page-footnote {
    margin: 32px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
}

.consent-recorded-card {
    margin: 0 0 28px;
    padding: 26px 28px;
    background: var(--wall);
    border-radius: 8px;
    border: 1px solid var(--rule-2);
}
.consent-recorded-card p {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
}
.consent-recorded-card p:last-child { margin-bottom: 0; }
.consent-recorded-card code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
}
.consent-recorded-email a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    margin-left: 8px;
}


/* ──────────────────────────────────────────────────────────────────
   Teams contact page — multi-seat plans, custom-quoted. Editorial
   3-feature row + contact form. No bullets, no marketing flourishes.
   ────────────────────────────────────────────────────────────────── */
.teams-page-head { margin-bottom: 32px; max-width: 64ch; }
.teams-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.teams-page-title {
    margin: 0 0 14px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.15;
}
.teams-page-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}
.teams-features {
    margin: 0 0 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 760px) {
    .teams-features { grid-template-columns: 1fr; }
}
.teams-feature {
    padding: 22px 22px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
}
.teams-feature-mark {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.teams-feature h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.teams-feature p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.teams-contact-band {
    margin: 0 0 32px;
    padding: 32px 36px;
    background: var(--wall-2);
    border-radius: 10px;
}
.teams-contact-head { margin-bottom: 22px; max-width: 56ch; }
.teams-contact-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.teams-contact-lede {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.teams-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.teams-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .teams-contact-row { grid-template-columns: 1fr; }
}
.teams-contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.teams-contact-form .field-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.teams-contact-form input,
.teams-contact-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.teams-contact-form input:focus,
.teams-contact-form textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-wash);
}
.teams-contact-form textarea { resize: vertical; min-height: 96px; }
.teams-contact-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.teams-contact-trust {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.teams-page-footnote { margin: 0; font-family: var(--font-mono); font-size: 12px; }
.teams-page-footnote a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.teams-page-footnote a:hover { color: var(--red); border-color: var(--red); }


/* ──────────────────────────────────────────────────────────────────
   Legal pages — DPA, similar layout for any future legal surface.
   Body-type prose with tabular sub-processor breakdown.
   ────────────────────────────────────────────────────────────────── */
.legal-page-head { margin-bottom: 26px; max-width: 68ch; }
.legal-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.legal-page-title {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.18;
}
.legal-page-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}
.legal-section { margin: 0 0 28px; }
.legal-section h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.legal-section p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-2);
}
.legal-section a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.legal-section-note {
    font-size: 13px;
    color: var(--ink-3);
}
.legal-list {
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-2);
}
.legal-list li { margin: 0 0 4px; }
.subprocessors {
    width: 100%;
    margin: 12px 0 14px;
    border-collapse: collapse;
    font-size: 13.5px;
}
.subprocessors th {
    text-align: left;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
}
.subprocessors td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    line-height: 1.5;
    vertical-align: top;
}
.legal-page-footnote {
    margin: 32px 0 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}
.legal-page-footnote a {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
.legal-page-footnote a:hover { color: var(--red); border-color: var(--red); }
.legal-page-footnote span { color: var(--ink-4); }


/* ──────────────────────────────────────────────────────────────────
   Auth + account surfaces — single-column 560-720px, masthead only.
   Same restraint posture as /checkout/consent: this is a private
   surface, not a marketing one. The dev-mode banner is intentionally
   conspicuous so it doesn't ship to production by accident.
   ────────────────────────────────────────────────────────────────── */
.auth-page,
.account-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 64px 24px 88px;
}
.account-page { max-width: 720px; }

/* "Continue with Google" pill — official Google button styling.
   White background, neutral border, subtle elevation that grows on
   hover. Sits above the email form and the OR divider. */
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.auth-google-btn:hover {
    background: #f7f8fa;
    border-color: var(--frame);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.auth-google-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.auth-google-label { letter-spacing: 0.01em; }

/* "or use your email" divider — horizontal rule with inline text.
   Sandwiched between the Google button and the email form. */
.auth-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    font-size: 12px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.auth-or-divider::before,
.auth-or-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule);
}
.auth-page-head,
.account-page-head { margin-bottom: 32px; }
.auth-page-eyebrow,
.account-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.auth-page-eyebrow-success { color: #3a6448; }
.auth-page-title,
.account-page-title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.18;
}
.account-page-title {
    font-family: var(--font-mono);
    font-size: 22px;
    letter-spacing: 0;
}
.auth-page-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}
.auth-page-lede strong { color: var(--ink); }
.auth-page-lede code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
}
.account-page-bill {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
}
.account-page-bill time {
    color: var(--ink-2);
}

/* Login form */
.auth-login-form {
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.auth-field input[type="email"] {
    padding: 12px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    background: var(--wall);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-field input[type="email"]:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-wash);
}
.auth-submit { padding: 13px 22px; align-self: flex-start; }

.auth-page-footnote {
    margin: 24px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.auth-page-footnote a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Dev-mode banner — conspicuous so we don't ship it to production
   without noticing. Only renders when WPC_EMAIL_DEV_MODE=1. */
.auth-dev-banner {
    margin: 0 0 24px;
    padding: 18px 22px;
    background: #fff8e1;
    border: 1px solid #d4a72c;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b4f00;
}
.auth-dev-banner strong { display: block; margin-bottom: 6px; color: #4a3700; }
.auth-dev-link {
    margin: 10px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}
.auth-dev-link a {
    color: var(--red);
    text-decoration: underline;
}

/* Account page tier card — reuses .tier-card grammar with quieter
   accents (this is a "you have this" not "buy this" surface). */
.account-tier-card {
    margin: 0 0 32px;
    padding: 24px 26px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: var(--wall);
}
.account-tier-card-pro {
    border-color: var(--red);
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
}
.account-tier-card-deep {
    border-color: var(--ink);
    background: linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.account-tier-mark {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.account-tier-name {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.account-tier-meta {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    font-style: italic;
}
.account-tier-cta { padding: 10px 18px; }
.account-tier-renewal {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ink-3);
}
.account-tier-renewal a { color: var(--red); }

/* Welcome page — the post-claim "what should we call you" surface.
   Single-task layout, the input is the hero. Premium feel comes from
   the same eyebrow/title/lede grammar as /checkout/consent. */
.welcome-page {
    max-width: 580px;
    margin: 60px auto 80px;
    padding: 0 20px;
}
.welcome-page-head { margin-bottom: 36px; }
.welcome-page-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.welcome-page-title {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.welcome-page-lede {
    margin: 0;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
}
.welcome-form {
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: var(--card-shadow);
}
.welcome-name { display: block; margin-bottom: 22px; }
.welcome-name-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.welcome-name-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;
    font-family: inherit;
    color: var(--ink);
    background: var(--wall);
    border: 1.5px solid var(--rule-2);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.welcome-name-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(165, 62, 44, 0.16);
}
.welcome-name-help {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}
.welcome-error {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--red-wash);
    border: 1px solid var(--red-line);
    border-radius: 4px;
    font-size: 13px;
    color: var(--red-dim);
}
.welcome-actions { margin-bottom: 16px; }
.welcome-actions .btn { width: 100%; }
.welcome-foot {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--ink-3);
}
.welcome-foot strong { color: var(--ink-2); }
.welcome-foot a { color: var(--red); border-bottom: 1px solid var(--red-line); }

/* Inline display-name editor on /account — small form sandwiched
   between the hero greeting and the tier card. */
.account-name-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.account-name-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin-right: 4px;
}
.account-name-input {
    flex: 1 1 220px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--wall);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
}
.account-name-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(165, 62, 44, 0.14);
}
.account-name-help {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ink-3);
}

.account-section { margin: 0 0 28px; }
.account-section-title {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.account-meter-placeholder {
    margin: 0;
    padding: 14px 18px;
    background: var(--wall-2);
    border-left: 2px solid var(--ink-3);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.account-meter-placeholder a { color: var(--red); }
.account-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.account-link-list a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.account-logout {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.account-tier-portal {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}
.account-tier-portal-note {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    max-width: 36ch;
}

/* ─── Saved searches (account.html) ───
   Studio + Atelier feature surfaces inside /account. Apprentice sees
   the upsell card; Studio sees the list with delete actions and
   headroom badge; Atelier sees the same list with no headroom badge.
   The grammar reuses the existing tier-card editorial restraint —
   hairline rules, mono-font filter chips, red accent only on the
   delete action. */
.account-saved-empty {
    margin: 0;
    padding: 14px 18px;
    background: var(--wall-2);
    border-left: 2px solid var(--ink-3);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.account-saved-upsell {
    border-left-color: var(--red);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.account-saved-lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 13.5px;
}
.account-saved-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.account-saved-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-saved-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.account-saved-name {
    font-weight: 600;
    color: var(--ink-1);
    font-size: 14px;
}
.account-saved-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
}
.account-saved-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.account-saved-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    background: var(--wall-2);
    color: var(--ink-3);
    border-radius: 3px;
    letter-spacing: 0.02em;
}
.account-saved-chip-empty {
    color: var(--ink-4);
    font-style: italic;
}
.account-saved-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.account-saved-run {
    color: var(--red);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.account-saved-run:hover {
    text-decoration: underline;
}
.account-saved-delete-form {
    margin: 0;
}
.account-saved-delete {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-4);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.account-saved-delete:hover {
    color: var(--red);
}
.account-saved-headroom {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
}

/* Mobile: actions row (Run / Delete) is laid out with gap:14px in
   a flex row at desktop, but on narrow screens the long contrast
   between "Run now →" and "Delete" reads cluttered. Keep them in
   the same row but tighten the gap, and let the chip filters wrap
   naturally. */
@media (max-width: 640px) {
    .account-saved-item { gap: 6px; }
    .account-saved-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .account-saved-meta { font-size: 10px; }
    .account-saved-actions {
        gap: 16px;
        font-size: 12.5px;
    }
    .account-saved-chip { font-size: 10.5px; padding: 2px 7px; }
    .account-saved-name { font-size: 13.5px; }
}

/* ─── Upload cadres (analyze.html, free tier only) ───
   Three editorial cells sitting below the drop zone — same wall
   palette as the page, hairline rule borders, mono № marks in the
   corner. Empty state shows "№ 01" + "Photo one" subtitle in the
   page's quiet ink tone. As photos upload, each cadre fills with
   the thumbnail; the mark stays as the corner badge so the row
   still reads as a numbered contact-sheet. A × handle appears on
   filled cadres for one-tap remove.

   Hidden for Studio + Atelier — their caps of 30 / 60 wouldn't fit
   a three-cell row, so those tiers fall back to the existing
   .photo-tray grid below. Free tier: cadres ARE the tray (the
   existing .photo-tray is hidden via the rule near the bottom of
   this block).

   Animation discipline: borders + opacity transitions on the
   --ease-premium curve, no transforms, no fills jumping. Honors
   prefers-reduced-motion. */
.upload-cadres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 24px;
    list-style: none;
    padding: 0;
}
.cadre {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: 144px;
    /* Match the site's existing card grammar — the same elevation
       shadow, the same premium-curve transition. Three little
       floating cards that read as part of the same family, not as a
       separate UI element. The PER-CADRE gradient (set via :nth-child
       below) gives each card its own identity — warm clay, neutral
       wall, cool stone — three distinct tints all sharing the same
       --wall top so the row reads as cohesive. */
    border-radius: var(--card-radius-sm);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px 14px 12px;
    box-sizing: border-box;
    transition: var(--card-transition);
    /* No border by default — the elevation IS the boundary. */
    border: 1px solid transparent;
}
/* ─── Per-cadre gradient identities ───
   All three share the same --wall (#F5F4F0) at the top so the row
   reads as one continuous warm sheet. The bottom anchor shifts
   subtly — clay-warm, wall-neutral, stone-cool — giving each cadre
   a recognisable identity without breaking palette discipline. */
.cadre:nth-child(1) {
    background: linear-gradient(180deg, var(--wall) 0%, #EAD8C8 100%);
}
.cadre:nth-child(2) {
    background: linear-gradient(180deg, var(--wall) 0%, #E5DAD0 100%);
}
.cadre:nth-child(3) {
    background: linear-gradient(180deg, var(--wall) 0%, #DEDDD3 100%);
}
.cadre:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.cadre-mark {
    position: absolute;
    top: 10px;
    left: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    /* Subtle backdrop so the mark stays legible once a thumbnail
       fills the cell — no heavy chip, just enough contrast. */
    text-shadow: 0 0 4px var(--wall-2);
}
.cadre-empty-label {
    font-size: 12px;
    color: var(--ink-4);
    font-style: italic;
    letter-spacing: 0.01em;
    transition: opacity 0.32s var(--ease-premium);
}
/* Filled state — thumbnail fills the cell, empty subtitle hides,
   × handle reveals on hover/focus. The base box-shadow stays so the
   filled cadre keeps the same elevation profile as the empty one —
   the row reads as three floating cards, with or without photos. */
.cadre[data-filled="true"] {
    background:
        linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.cadre[data-filled="true"] .cadre-empty-label { display: none; }
.cadre-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cadre-pending {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wall-2);
}
.cadre-pending::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-4);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: cadre-pending-spin 0.8s linear infinite;
}
@keyframes cadre-pending-spin { to { transform: rotate(360deg); } }
.cadre-remove {
    /* Always visible — earlier hover-only opacity hid this from touch
       users entirely (and forced desktop users to discover it by
       accident). The price of permanent visibility is small: a 28px
       chip in the corner, dark glass that reads against any photo. */
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
    z-index: 3;
}
.cadre-remove:hover { background: var(--red); transform: scale(1.05); }
.cadre-remove:focus { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Studio + Atelier · flexible photo grid ──
   Replaces the fixed-3-cadre rail. Cards pack on the grid as photos
   land — 2 across mobile, 3 across tablet, 4 across desktop. Each
   .upload-grid-photo is a standalone card sized to mirror the cadre
   aesthetic (square thumbnail with the same × remove handle), but
   the count grows with the user's tier cap. The grid container
   shows an empty-state caption when zero cells are present.
   curate.js toggles .upload-grid-empty visibility on add/remove. */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px;
    margin-bottom: 16px;
    background:
        linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
    border: 1px solid var(--rule);
    border-radius: var(--card-radius);
    min-height: 180px;
}
@media (min-width: 640px) {
    .upload-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
    .upload-grid { grid-template-columns: repeat(4, 1fr); }
}
.upload-grid-empty {
    grid-column: 1 / -1;
    margin: 28px 0;
    text-align: center;
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    font-style: italic;
}
.upload-grid-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition:
        transform 0.18s var(--ease-out),
        box-shadow 0.18s var(--ease-out),
        border-color 0.15s var(--ease-out);
}
.upload-grid-photo:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
    border-color: color-mix(in srgb, var(--red) 30%, var(--rule));
}
.upload-grid-photo .cadre-thumb,
.upload-grid-photo .cadre-pending {
    /* Reuse the existing cadre image + spinner styling so the visual
       vocabulary stays consistent across both layouts. The .cadre-
       remove × button also applies as-is via the same selector. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upload-grid-photo .cadre-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wall-2);
}
/* Drag-over feedback for the grid layout — same warm red wash as
   the cadre rail so the visual feedback is consistent. */
.upload-zone.dragging ~ .upload-grid {
    border-color: var(--red);
    background:
        linear-gradient(180deg,
            rgba(165, 62, 44, 0.07) 0%,
            rgba(165, 62, 44, 0.02) 100%);
}
/* Drag-over state — empty cadres bloom into a warm red-wash gradient
   that mirrors the upload-zone's drag accent. Border stays the
   transparent line (the gradient does the work) and the shadow lifts
   so the cadres feel pulled UP toward the dragged photo, not just
   re-tinted. */
.upload-zone.dragging ~ .upload-cadres .cadre:not([data-filled="true"]) {
    background:
        linear-gradient(180deg,
            rgba(165, 62, 44, 0.14) 0%,
            rgba(165, 62, 44, 0.04) 100%);
    border-color: var(--red);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.upload-zone.dragging ~ .upload-cadres .cadre-mark { color: var(--red); }
.upload-zone.dragging ~ .upload-cadres .cadre-empty-label { color: var(--red); opacity: 0.85; }

/* Hide cadres for non-free tiers (data-cap != "3"). Hide the
   existing .photo-tray for free tier so we have ONE source of
   truth — the cadres ARE the tray. The :has() check scopes the
   tray-hide rule to ONLY pages that actually render the cadres
   rail (analyze.html). Earlier this rule fired on judge.html too
   (data-cap="3" but no cadres), making free-tier photos render
   into a `display:none` tray — a black-hole. */
.upload-zone:not([data-cap="3"]) ~ .upload-cadres { display: none; }
.upload-zone[data-cap="3"]:has(~ .upload-cadres) ~ .photo-tray { display: none !important; }
/* Studio + Atelier render .upload-grid in place of the cadre rail.
   The photo-tray below the dropzone is the legacy single-source-of-
   truth for staged photos but its visual chrome is now duplicated by
   the grid above, so we hide it whenever the grid is present.
   Portfolio mode re-enables it via the rule below this — that's where
   the larger 25/100-photo trays render the comparison thumbnails. */
.upload-zone:has(~ .upload-grid) ~ .photo-tray { display: none !important; }

@media (max-width: 640px) {
    .upload-cadres { gap: 10px; }
    .cadre { max-height: 108px; }
}
@media (max-width: 480px) {
    .upload-cadres { gap: 8px; }
    .cadre { max-height: 88px; padding: 10px 8px 8px; }
    .cadre-mark { font-size: 9px; top: 7px; left: 8px; }
    .cadre-empty-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .cadre, .cadre-empty-label, .cadre-remove { transition: none; }
    .cadre-pending::after { animation: none; }
}

/* ─── HTMX swap-out fade for saved-search delete ───
   The form on each .account-saved-item carries
   hx-swap="outerHTML swap:280ms". HTMX adds .htmx-swapping to the
   target during that 280ms window, then replaces the element. This
   rule fades + collapses the row during the swap so it dissolves
   instead of disappearing instantly. Generic on .htmx-swapping so
   future HTMX deletes inherit the same behaviour without per-feature
   plumbing. */
.account-saved-item.htmx-swapping {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 240ms var(--ease-out),
        transform 240ms var(--ease-out);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .account-saved-item.htmx-swapping {
        opacity: 0;
        transform: none;
        transition: none;
    }
}

/* ─── Personalised memo result fragment ───
   The memo HTMX fragment fades in via .reveal-up. These rules give
   the inner blocks a tighter editorial rhythm — staggered margins,
   hairline rules between sections, and a quiet treatment for the
   "from cache" notice so the user reads it as honesty rather than a
   warning. */
.memo-result {
    margin: 24px 0 0;
    padding: 24px 26px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.memo-head {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.memo-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: 8px;
}
.memo-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.memo-from-cache {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
}
.memo-headline {
    margin: 0 0 18px;
}
.memo-headline-text {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}
.memo-recommendation {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.memo-rec-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.memo-rec-enter        { background: var(--red); color: #fff; }
.memo-rec-skip         { background: var(--ink-3); color: #fff; }
.memo-rec-partial-enter { background: var(--wall-2); color: var(--ink-2); border: 1px solid var(--ink-3); }
.memo-confidence {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.memo-conf-high     { color: var(--red); }
.memo-conf-moderate { color: var(--ink-2); }
.memo-conf-low      { color: var(--ink-4); }
.memo-confidence-rationale {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    font-style: italic;
}
.memo-honesty-note {
    margin: 14px 0 18px;
    padding: 10px 14px;
    background: var(--wall-2);
    border-left: 2px solid var(--ink-3);
    border-radius: 0 4px 4px 0;
    font-size: 12.5px;
    color: var(--ink-3);
}
.memo-section {
    margin: 18px 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.memo-section:first-of-type { border-top: none; padding-top: 0; }
.memo-section-title {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.memo-per-cat-list,
.memo-tensions,
.memo-comparables {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.memo-per-cat-item { display: flex; flex-direction: column; gap: 4px; }
.memo-per-cat-name {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 600;
}
.memo-per-cat-photos {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.memo-per-cat-photos code {
    background: var(--wall-2);
    padding: 1px 6px;
    border-radius: 3px;
}
.memo-per-cat-rationale {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}
.memo-tensions li,
.memo-comparables li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}
.memo-quota {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-4);
}

/* Mobile: tighter padding on the memo card so the per-category
   ranking list doesn't overflow horizontally with photo IDs +
   rationale text. The recommendation row (badge + confidence +
   rationale) wraps gracefully because of flex-wrap higher up. */
@media (max-width: 640px) {
    .memo-result { padding: 18px 18px; }
    .memo-title { font-size: 18px; }
    .memo-headline-text { font-size: 15px; }
    .memo-recommendation { font-size: 12.5px; gap: 8px; }
    .memo-section-title { font-size: 10px; }
    .memo-per-cat-name { font-size: 13px; }
    .memo-per-cat-rationale { font-size: 12.5px; }
}

/* ─── Second-opinion result fragment ───
   Same editorial grammar, distinct accent treatment per disagreement
   state — the "agree" headline reads as quiet confirmation, the
   "disagree" headline reads as a real caveat. NEVER quote the
   numeric threshold in any visible CSS content/data attribute
   (Legal council resolution: false-precision risk). */
.second-op-result {
    margin: 18px 0 0;
    padding: 22px 24px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.second-op-result-disagree { border-left: 3px solid var(--red); }
.second-op-result-agree    { border-left: 3px solid var(--ink-3); }
.second-op-head { margin: 0 0 14px; }
.second-op-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: 6px;
}
.second-op-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.second-op-headline {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--wall-2);
    border-radius: 4px;
}
.second-op-flag {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.second-op-flag-disagree { color: var(--red); }
.second-op-flag-agree    { color: var(--ink-2); }
.second-op-explain {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5;
}
.second-op-consensus {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.second-op-consensus-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.second-op-consensus-tier {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.second-op-consensus-tier-strong_submit { background: var(--red); color: #fff; }
.second-op-consensus-tier-submit        { background: var(--ink-2); color: #fff; }
.second-op-consensus-tier-maybe         { background: var(--wall-2); color: var(--ink-2); border: 1px solid var(--ink-3); }
.second-op-consensus-tier-weak_match    { background: var(--wall-2); color: var(--ink-3); }
.second-op-details {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.second-op-details summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--red);
    text-transform: uppercase;
    padding: 4px 0;
}
.second-op-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}
.second-op-pass {
    padding: 14px;
    background: var(--wall-2);
    border-radius: 4px;
}
.second-op-pass-name {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.second-op-pass-reasoning {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.second-op-pass-strengths,
.second-op-pass-concerns {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.45;
}
.second-op-quota {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-4);
}
@media (max-width: 640px) {
    .second-op-pair { grid-template-columns: 1fr; }
}

/* ─── Upload-mode toggle (analyze.html) ───
   Two floating cards side-by-side: "Single image" and "Portfolio".
   Same card grammar as tier-cards / cadres — gradient surface,
   premium shadow, lift on hover. The active option carries
   .upload-mode-option-active and shows a red accent bar + a heavier
   shadow so the user reads it as "you are here".
   The radio input is visually hidden (sr-only style) but stays
   keyboard-focusable; the LABEL is the click target so the whole
   card behaves as one button. */
.upload-mode {
    border: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.upload-mode-legend {
    grid-column: 1 / -1;
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.upload-mode-option {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    padding: 18px 20px;
    background: var(--card-surface);
    border-radius: var(--card-radius-sm);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: var(--card-transition);
    border: 1px solid transparent;
}
.upload-mode-option input[type="radio"] {
    /* Visually hidden; keyboard + screen readers still see it. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.upload-mode-option:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.upload-mode-option:focus-within {
    /* Honor keyboard nav — outline lifts to red + shadow boost. */
    box-shadow: var(--card-shadow-hover);
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.upload-mode-option-active {
    /* Subtle red accent strip on the left edge — the only chrome
       differentiation between active and inactive. The card itself
       stays in the same gradient family so the row reads as one
       continuous choice surface. */
    border-left: 2px solid var(--red);
    box-shadow: var(--card-shadow-hover);
}
.upload-mode-option-active::before {
    content: "Selected";
    position: absolute;
    top: 14px;
    right: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    line-height: 1;
}
.upload-mode-mark {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    line-height: 1;
}
.upload-mode-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
}
.upload-mode-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 44ch;
}
@media (max-width: 640px) {
    .upload-mode { grid-template-columns: 1fr; gap: 10px; }
    .upload-mode-option { padding: 16px 18px; }
    .upload-mode-name { font-size: 16px; }
    .upload-mode-desc { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .upload-mode-option { transition: none; }
    .upload-mode-option:hover { transform: none; }
}

/* When portfolio mode is active, hide the cadres regardless of
   tier — portfolio mode lives in the photo-tray (which can grow up
   to 100 cells). The cadres are a single-mode + free-tier device. */
.upload-zone[data-mode="portfolio"] ~ .upload-cadres { display: none; }
.upload-zone[data-mode="portfolio"] ~ .photo-tray { display: block !important; }

/* ═════════════════════════════════════════════════════════════════════
   /admin — operator dashboard. Dense, mono-typed, scannable. Not
   meant to look like product surface; this is a tool. Keep it ugly
   and informative.
   ═════════════════════════════════════════════════════════════════════ */
.admin-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.admin-page-head { margin-bottom: 32px; }
.admin-page-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 6px;
}
.admin-page-title {
    margin: 0 0 6px;
    font-family: var(--font-sans);
    font-size: 32px;
    color: var(--ink);
}
.admin-page-meta { margin: 0; font-size: 12px; color: var(--ink-3); }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 36px;
}
@media (max-width: 760px) { .admin-grid { grid-template-columns: 1fr 1fr; } }
.admin-card {
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    padding: 18px 16px;
    background: var(--wall);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-card-hero {
    background: linear-gradient(180deg, var(--wall) 0%, var(--red-wash) 100%);
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red) inset;
}
.admin-card-positive { border-color: var(--green, #4f7a45); }
.admin-card-negative { border-color: var(--red); }
.admin-card-label {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.admin-card-value {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
}
.admin-card-sub { font-size: 11px; color: var(--ink-3); }

.admin-section-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    margin: 36px 0 12px;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    vertical-align: top;
}
.admin-table th {
    font-weight: 500;
    color: var(--ink-3);
    width: 50%;
}
.admin-table td { color: var(--ink); font-family: var(--font-mono); }
.admin-table strong { font-weight: 600; }
.admin-table code {
    background: var(--wall-2);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
}
.admin-error { color: var(--red); }

.admin-footnote {
    margin-top: 36px;
    font-size: 11px;
    color: var(--ink-4);
    border-top: 1px solid var(--rule);
    padding-top: 16px;
}

/* ═════════════════════════════════════════════════════════════════════
   Public editorial prose section on /competitions/{id}. Long-form
   reading surface — typography optimized for ~1000-word essay flow,
   not for skimming. Sits between the stat grid and the structured
   editorial layer. The lede gets a slightly larger size + lighter
   color to signal "start here." Section headings use the page's
   editorial register (smaller than h2 elsewhere; we're inside an
   already-titled page).
   ═════════════════════════════════════════════════════════════════════ */
.comp-prose {
    max-width: 68ch;
    margin: 36px auto 48px;
    padding: 0 24px;
    color: var(--ink);
}
.comp-prose-lede {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
/* Each editorial section is a <details> collapsible — the page scans
   as four headings instead of four essays. First one defaults open
   (set in the template) so users land on real content; the rest stay
   closed until the user asks for them. */
.comp-prose-section {
    margin: 0;
    border-top: 1px solid var(--rule);
}
.comp-prose-section:last-of-type {
    border-bottom: 1px solid var(--rule);
}
.comp-prose-heading {
    font-family: var(--font-sans);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    padding: 18px 36px 18px 0;
    margin: 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color 140ms ease;
}
.comp-prose-heading::-webkit-details-marker { display: none; }
.comp-prose-heading::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono, monospace);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-3);
    transition: transform 200ms ease, color 140ms ease;
}
.comp-prose-section[open] > .comp-prose-heading::after {
    content: '−';
    color: var(--red);
}
.comp-prose-heading:hover { color: var(--red); }
.comp-prose-heading:hover::after { color: var(--red); }
.comp-prose-body {
    padding: 0 0 22px;
}
.comp-prose-body p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 14px;
}
.comp-prose-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .comp-prose { padding: 0 18px; margin: 24px auto 32px; }
    .comp-prose-lede { font-size: 16px; }
    .comp-prose-heading { font-size: 15.5px; padding: 16px 32px 16px 0; }
    .comp-prose-body p { font-size: 14.5px; }
}

/* ═════════════════════════════════════════════════════════════════════
   THE ATELIER  ·  /account post-sign-in experience
   ───────────────────────────────────────────────────────────────────
   Premium "darkroom" treatment for the signed-in surface. The page is
   structured as a sequence of small reverent sections — the Reception
   (typewriter greeting), Tonight's Open List, the photographer profile
   (when not yet filled), the tier card, saved searches, and the Door
   (single soft upgrade panel) — with the sign-out moved entirely off
   this page to /account/settings. Every section uses the same
   eyebrow/title/lede grammar so the page reads like one long thought,
   not a dashboard.
   ═════════════════════════════════════════════════════════════════════ */

.atelier {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

/* ─── The Reception ─────────────────────────────────────────────────
   Hero greeting in the critic's voice. Big text, generous space, no
   chrome. The "name" inline gets a subtle red underline so it reads
   as personal without shouting. The typewriter behaviour runs only
   when motion is allowed; the full text is always in the DOM. */
.atelier-hero {
    margin-bottom: 56px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule);
}
.atelier-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 4px 12px;
    background: var(--ink);
    color: var(--wall);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
}
.atelier-greeting {
    margin: 0 0 18px;
    font-size: 44px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.atelier-name {
    color: var(--ink);
    background-image: linear-gradient(transparent 70%, var(--red-line) 70%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 2px;
}
.atelier-lede {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 56ch;
}
.atelier-cta .btn { padding: 14px 28px; font-size: 16px; }

/* Section grammar shared across Tonight's Open List, profile, tier
   card, saved-searches, and any future Atelier section. */
.atelier-section {
    margin-bottom: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--rule);
}
.atelier-section:last-of-type { border-bottom: none; }
.atelier-section-head { margin-bottom: 22px; }
.atelier-section-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.atelier-section-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.atelier-section-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 60ch;
}

/* WWAD audit (2026-05-09): collapsed empty-state for sections like
   Your wall + Saved searches when there's nothing to show. Apple
   pattern: a single quiet line acknowledging the empty state, not a
   full card with explanation paragraph. The section reappears as a
   real .atelier-section with cards once the user has content. */
.atelier-section-empty {
    margin: 0 0 28px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 24px;
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}
.atelier-section-empty-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex-shrink: 0;
}
.atelier-section-empty-state {
    color: var(--ink-3);
    font-style: italic;
}

/* ─── Tonight's Open List ────────────────────────────────────────── */
.tonight-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tonight-row {
    border-top: 1px solid var(--rule);
}
.tonight-row:last-child { border-bottom: 1px solid var(--rule); }
.tonight-link {
    display: block;
    padding: 18px 4px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, padding 0.15s;
}
.tonight-link:hover {
    background: var(--wall-2);
    padding-left: 12px;
    padding-right: 12px;
}
.tonight-row-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.tonight-row-take {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    font-style: italic;
    margin-bottom: 6px;
}
.tonight-row-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.tonight-meta-deadline { color: var(--red); }
.tonight-meta-sep { margin: 0 8px; opacity: 0.5; }

/* ─── Photographer profile form ──────────────────────────────────── */
.profile-form {
    margin-top: 8px;
}
.profile-block {
    margin: 0 0 28px;
    padding: 0;
    border: none;
}
.profile-legend {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.profile-help {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}
.profile-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.profile-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    background: var(--wall);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.profile-option:hover { border-color: var(--frame); color: var(--ink); }
.profile-option input { accent-color: var(--red); cursor: pointer; }
.profile-option:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--wall);
}
.profile-options-radio {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.profile-option-radio {
    border-radius: 6px;
    padding: 12px 16px;
    align-items: flex-start;
}
.profile-option-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.profile-option-label-main { font-weight: 600; }
.profile-option-label-hint {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.45;
}
.profile-option-radio:has(input:checked) .profile-option-label-hint {
    color: rgba(255, 255, 255, 0.78);
}
.profile-country-input {
    display: block;
    width: 96px;
    padding: 10px 14px;
    font-size: 16px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    background: var(--wall);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
}
.profile-country-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(165, 62, 44, 0.18);
}
.profile-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}
.profile-skip {
    color: var(--ink-3);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px dotted var(--ink-3);
    padding-bottom: 1px;
}
.profile-skip:hover { color: var(--red); border-bottom-color: var(--red); }

/* ─── Tier card (Atelier flavour) ────────────────────────────────── */
.atelier-tier-card { /* no extra chrome — uses .atelier-section */ }
.atelier-tier-action {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.atelier-tier-action-note {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    max-width: 40ch;
}

/* ─── The Door — single soft upgrade panel at the bottom ─────────── */
.atelier-door {
    margin: 56px 0 32px;
    padding: 36px 32px;
    background:
        radial-gradient(circle at 20% 0%, rgba(165, 62, 44, 0.06) 0%, transparent 60%),
        var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
}
.atelier-door-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.atelier-door-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.atelier-door-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.atelier-door-list li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--rule);
}
.atelier-door-list li:last-child { border-bottom: none; }
.atelier-door-list li::before {
    content: "·";
    position: absolute;
    left: 4px;
    top: 8px;
    font-size: 22px;
    color: var(--red);
    line-height: 1;
}
.atelier-door-cta {
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}
.atelier-door-cta a {
    color: var(--red);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1.5px solid var(--red);
    padding-bottom: 1px;
}
.atelier-door-cta a:hover { background: var(--red); color: var(--wall); padding: 2px 6px; border-radius: 3px; border-bottom-color: transparent; }
.atelier-door-or { color: var(--ink-3); font-size: 13px; }
.atelier-door-round { font-size: 13px !important; font-weight: 500 !important; }
.atelier-door-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ink-3);
    font-style: italic;
    line-height: 1.55;
    max-width: 56ch;
}

.atelier-settings {
    margin: 56px 0 0;
    text-align: center;
    font-size: 13px;
}
.atelier-settings a {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-3);
    padding-bottom: 1px;
}
.atelier-settings a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }

/* ─── Settings sub-page ─────────────────────────────────────────── */
.settings-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}
.settings-page-head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.settings-page-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.settings-page-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 600;
    color: var(--ink);
}
.settings-page-lede {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}
.settings-page-back a {
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
}
.settings-page-back a:hover { color: var(--red); }
.settings-section { margin-bottom: 36px; }
.settings-section-title {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.settings-meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}
.settings-meta dt { color: var(--ink-3); }
.settings-meta dd { margin: 0; color: var(--ink); }
.settings-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
}
.settings-link-list li { padding: 6px 0; }
.settings-link-list a { color: var(--red); text-decoration: none; border-bottom: 1px dotted var(--red); }
.settings-end {
    padding: 24px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.settings-end-lede {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ink-2);
    font-style: italic;
}
.settings-danger {
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.settings-danger-lede {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.55;
}
.settings-danger-link {
    color: var(--red);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--red);
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .atelier { padding: 36px 18px 72px; }
    .atelier-greeting { font-size: 32px; }
    .atelier-lede { font-size: 16px; }
    .atelier-section-title { font-size: 20px; }
    .atelier-door { padding: 28px 22px; }
    .atelier-door-title { font-size: 22px; }
    .profile-options { gap: 6px; }
    .profile-option { padding: 7px 12px; font-size: 12.5px; }
}

/* ─── Letters from past winners ──────────────────────────────────
     Curated archive of attributed quotes. Editorial layout: blockquote
     plus operator-written context plus source link. Empty state
     encourages the user to send sources to hello@winphoto.io. */
.winners-archive {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}
.winners-head { margin-bottom: 48px; }
.winners-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.winners-title {
    margin: 0 0 14px;
    font-size: 40px;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.winners-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 60ch;
}
.winners-empty {
    padding: 36px 28px;
    border: 1px dashed var(--rule);
    border-radius: 6px;
    background: var(--wall-2);
}
.winners-empty h2 {
    margin: 0 0 12px;
    font-size: 22px;
    color: var(--ink);
}
.winners-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}
.winners-tier-note {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--ink-3);
    font-style: italic;
}
.winners-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.winners-card {
    padding: 28px 0;
    border-top: 1px solid var(--rule);
}
.winners-card:first-child { border-top: none; }
.winners-quote p {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
}
.winners-quote cite {
    font-style: normal;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.winners-quote cite strong {
    color: var(--ink-2);
    font-weight: 600;
}
.winners-context {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
}
.winners-source {
    margin: 10px 0 0;
    font-size: 13px;
}
.winners-source a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.winners-source a:hover { color: var(--red); }
.winners-upsell {
    margin: 48px 0 0;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--wall);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.winners-upsell p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 56ch;
}
.winners-footnote {
    margin: 64px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .winners-archive { padding: 40px 18px 72px; }
    .winners-title { font-size: 30px; }
    .winners-quote p { font-size: 16px; }
}

/* ─── 60-second Tour ─────────────────────────────────────────────
     Editorial walkthrough page at /tour. Four stages, each a small
     story panel with restrained typography. The closing CTA points
     into /analyze so the user runs real Bedrock on their own work
     after they've understood the shape of the experience. */
.tour {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}
.tour-head { margin-bottom: 56px; }
.tour-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tour-title {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.tour-lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 56ch;
}
.tour-stage {
    padding: 32px 0 36px;
    border-top: 1px solid var(--rule);
}
.tour-stage:first-of-type { border-top: none; }
.tour-stage-step {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
}
.tour-stage-title {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.25;
    color: var(--ink);
}
.tour-stage-body {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-2);
}
.tour-mock-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #2c2622, #1c1817);
    border-radius: 4px;
    color: rgba(245, 244, 240, 0.62);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tour-mock-photo-glyph {
    font-size: 36px;
    color: var(--red);
}
.tour-mock-photo-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
}
/* ─── Cinematic Tour ─────────────────────────────────────────────
     The /tour page when a real-photo fixture is rendering. Four
     full-height stages stitched into a single scroll surface, with
     a sticky stage indicator on the right and per-stage motion
     idioms (full-bleed photo, typewriter narration, staggered
     verdict reveal, calm wall coda). Reduced-motion users get the
     same content laid out flat — no scroll-tied animations.

     Layout note: each stage is its own block, NOT a CSS scroll-
     snap container. Snap was tested and felt jail-cell on long
     verdict lists; free scroll with stage anchors lets the user
     skim. */

.tour-cinema {
    margin: 0;
    padding: 0;
    background: var(--wall);
    position: relative;
}
.tour-cinema-stage {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    position: relative;
}

/* ─── Sticky stage navigator (right rail) ──────────────────── */
.tour-stage-nav {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 6px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(245, 244, 240, 0.86);
    backdrop-filter: blur(6px);
}
.tour-stage-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    text-decoration: none;
    color: var(--ink-3);
    background: transparent;
    transition: background 200ms, color 200ms;
}
.tour-stage-dot span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}
.tour-stage-dot:hover { background: var(--wall-2); color: var(--ink); }
.tour-stage-dot.tour-stage-dot-active {
    background: var(--ink);
    color: var(--wall);
}

/* ─── Stage 1 · Full-bleed hero ────────────────────────────── */
.tour-cinema-hero {
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    color: #f5f4f0;
}
.tour-hero-pic {
    position: absolute; inset: 0; z-index: 0;
    display: block;
}
.tour-hero-pic img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.tour-hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(15, 14, 13, 0.20) 0%,
        rgba(15, 14, 13, 0.45) 60%,
        rgba(15, 14, 13, 0.85) 100%
    );
    pointer-events: none;
}
.tour-hero-stage-num {
    position: absolute; top: 28px; left: 28px; z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(245, 244, 240, 0.7);
}
.tour-hero-content {
    position: relative; z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px;
    text-align: left;
}
.tour-hero-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 244, 240, 0.78);
}
.tour-hero-title {
    margin: 0 0 22px;
    font-size: clamp(36px, 7vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #f5f4f0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.tour-hero-lede {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(245, 244, 240, 0.9);
    max-width: 52ch;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.tour-hero-credit {
    margin: 0 0 56px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(245, 244, 240, 0.62);
}
.tour-hero-credit em {
    font-style: italic;
    color: rgba(245, 244, 240, 0.85);
    margin-right: 4px;
}
.tour-hero-scroll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(245, 244, 240, 0.85);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 1px solid rgba(245, 244, 240, 0.3);
    border-radius: 999px;
    transition: background 200ms, border-color 200ms, transform 200ms;
}
.tour-hero-scroll:hover {
    background: rgba(245, 244, 240, 0.08);
    border-color: rgba(245, 244, 240, 0.6);
    transform: translateY(-1px);
}
.tour-hero-scroll svg {
    animation: tour-hero-bounce 2.4s ease-in-out infinite;
}
@keyframes tour-hero-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* ─── Stage 2 · The read (typewriter narration) ────────────── */
.tour-cinema-read {
    background: var(--wall);
}
.tour-read-shell {
    max-width: 680px;
    width: 100%;
}
.tour-cinema-narration {
    list-style: none;
    margin: 28px 0 24px;
    padding: 28px 32px;
    border-left: 3px solid var(--red);
    background: var(--wall-2);
    border-radius: 0 4px 4px 0;
}
.tour-cinema-narration li {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
    opacity: 0;  /* JS reveals; reduced-motion overrides */
}
.tour-cinema-narration li:last-child { margin: 0; }
.tour-cinema-narration li.tour-cinema-narration-revealed {
    opacity: 1;
}

/* ─── Stage 3 · Verdicts (staggered cards) ─────────────────── */
.tour-cinema-verdicts {
    background: var(--wall);
}
.tour-verdicts-shell {
    max-width: 720px;
    width: 100%;
}
.tour-cinema-verdict-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}
.tour-cinema-verdict-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 16px;
    margin: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    border-radius: 4px;
    transition: background 200ms;
}
.tour-cinema-verdict-row:first-child {
    border-top: none;
    padding-top: 12px;
}
.tour-cinema-verdict-row:hover {
    background: var(--wall-2);
}
.tour-cinema-verdict-pill {
    flex: 0 0 auto;
    margin-top: 2px;
}
.tour-cinema-verdict-body { flex: 1; }
.tour-cinema-verdict-name {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms;
}
.tour-cinema-verdict-name:hover { border-bottom-color: var(--red); }
.tour-cinema-verdict-reason {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.tour-cinema-verdict-strong_submit {
    background:
        linear-gradient(90deg, rgba(165, 62, 44, 0.06), transparent 40%);
}
.tour-cinema-verdict-archived .tour-cinema-verdict-name-archived {
    color: var(--ink-3);
    cursor: default;
    text-decoration: line-through;
    text-decoration-color: var(--ink-3);
    text-decoration-thickness: 1px;
    border-bottom: none;
}
.tour-cinema-verdict-archived-tag {
    margin-left: 8px;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 400;
    text-decoration: none;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

/* Stagger the reveal of verdict cards using the existing
   reveal-stagger wrapper. Each row's reveal-up gets a per-child
   transition-delay so they cascade in. */
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(5) { transition-delay: 380ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(6) { transition-delay: 460ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(7) { transition-delay: 520ms; }
.reveal-stagger > .tour-cinema-verdict-row.reveal-up:nth-child(n+8) { transition-delay: 580ms; }

/* ─── Stage 4 · The wall (calm coda) ───────────────────────── */
.tour-cinema-wall {
    background: var(--wall-2);
    min-height: 60vh;
}
.tour-wall-shell {
    max-width: 720px;
    text-align: center;
}
.tour-wall-mock {
    margin: 32px auto 0;
    max-width: 280px;
    position: relative;
}
.tour-wall-mock-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(15, 14, 13, 0.5);
    transform: rotate(-1.5deg);
    transition: transform 320ms var(--ease-premium);
}
.tour-wall-mock-card:hover { transform: rotate(0); }
.tour-wall-mock-card img {
    width: 100%; height: auto; display: block;
}
.tour-wall-mock-pin {
    position: absolute;
    top: 8px; right: 8px;
    color: var(--red);
    font-size: 18px;
    text-shadow: 0 0 6px rgba(245, 244, 240, 0.8);
}

/* ─── Closing CTA ─────────────────────────────────────────── */
.tour-cinema-close {
    background: var(--wall);
    min-height: 60vh;
    border-top: 1px solid var(--rule);
}
.tour-close-shell {
    max-width: 640px;
    text-align: center;
}

/* ─── Stage steps + titles (shared) ────────────────────────── */
.tour-cinema-stage .tour-stage-step,
.tour-cinema-stage .tour-stage-title,
.tour-cinema-stage .tour-stage-body {
    text-align: left;
}
.tour-wall-shell .tour-stage-step,
.tour-wall-shell .tour-stage-title,
.tour-wall-shell .tour-stage-body {
    text-align: center;
}

/* ─── Mobile (stack the right-rail nav as a bottom dock) ───── */
@media (max-width: 720px) {
    .tour-cinema-stage { padding: 64px 18px; min-height: 70vh; }
    .tour-cinema-hero { min-height: 88vh; }
    .tour-hero-content { padding: 48px 24px; }
    .tour-stage-nav {
        right: 50%;
        top: auto;
        bottom: 14px;
        transform: translateX(50%);
        flex-direction: row;
    }
    .tour-cinema-narration { padding: 22px 22px; }
    .tour-cinema-narration li { font-size: 15px; }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tour-cinema-narration li { opacity: 1 !important; }
    .tour-hero-scroll svg { animation: none !important; }
    .tour-wall-mock-card { transform: none !important; transition: none !important; }
    .tour-stage-dot { transition: none !important; }
}

.tour-real-photo {
    margin: 22px 0 0;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--wall-2);
    box-shadow: 0 18px 40px -28px rgba(15, 14, 13, 0.45);
}
.tour-real-photo img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1.2s var(--ease-premium);
}
/* Subtle Ken-Burns-on-reveal — only when the stage enters the viewport. */
.tour-stage-photo.in-view .tour-real-photo img {
    transform: scale(1.015);
}
.tour-real-photo figcaption {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 12px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.tour-real-photo-title { color: var(--ink-2); }
.tour-real-photo-credit { color: var(--ink-3); }

.tour-verdict-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}
.tour-verdict-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--rule);
    /* Per-row reveal stagger — index `--n` set inline by Jinja.
       In-view trigger: parent .tour-stage-verdicts.in-view animates
       each row from the staggered start state to the end state. */
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 540ms var(--ease-premium),
        transform 540ms var(--ease-premium);
    transition-delay: calc(var(--n, 0) * 90ms);
}
.tour-stage-verdicts.in-view .tour-verdict-row {
    opacity: 1;
    transform: translateY(0);
}
.tour-verdict-row:first-child { border-top: none; padding-top: 8px; }
.tour-verdict-pill {
    flex: 0 0 auto;
    margin-top: 2px;
    align-self: start;
}
.tour-verdict-meta { min-width: 0; }
.tour-verdict-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tour-verdict-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms, color 120ms;
}
.tour-verdict-name:hover { border-bottom-color: var(--red); }
.tour-verdict-name-inactive {
    color: var(--ink-3);
    cursor: default;
    border-bottom: none;
}
.tour-verdict-reason {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.tour-verdict-row-strong_submit {
    background:
        linear-gradient(90deg, rgba(165, 62, 44, 0.05), transparent 30%);
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px;
    border-top-color: transparent;
}
.tour-verdict-row-strong_submit + .tour-verdict-row {
    border-top: none;
}

/* Right rail: score + save button. Stacks vertically, narrow.
   On mobile collapses below the meta block. */
.tour-verdict-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 80px;
}
.tour-verdict-score {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-mono);
    color: var(--ink-2);
}
.tour-verdict-score-num {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.tour-verdict-score-suffix {
    font-size: 11px;
    color: var(--ink-3);
}
.tour-verdict-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--wall);
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 120ms, border-color 120ms, background 120ms;
}
.tour-verdict-save:hover {
    color: var(--red);
    border-color: var(--red);
    background: var(--wall-2);
}
.tour-verdict-save-icon {
    color: var(--red);
    font-size: 11px;
    line-height: 1;
}

/* Closed / archived states. Strikethrough the name, soften the
   reason, gray out the score; the verdict pill stays vivid because
   the verdict was real at capture time. */
.tour-verdict-row-closed .tour-verdict-name,
.tour-verdict-row-closed .tour-verdict-name-inactive {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-3);
}
.tour-verdict-row-closed .tour-verdict-reason,
.tour-verdict-row-archived .tour-verdict-reason {
    color: var(--ink-3);
}
.tour-verdict-row-closed .tour-verdict-score,
.tour-verdict-row-archived .tour-verdict-score {
    opacity: 0.5;
}
.tour-verdict-row-closed .tour-verdict-save,
.tour-verdict-row-archived .tour-verdict-save {
    opacity: 0.4;
    pointer-events: none;
}
.tour-verdict-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--rule);
    color: var(--ink-3);
    white-space: nowrap;
}
.tour-verdict-badge-closed {
    border-color: var(--ink-3);
    color: var(--ink-2);
    background: var(--wall-2);
}
.tour-verdict-badge-archived {
    border-style: dashed;
}

/* Mobile: collapse the rail below the meta. */
@media (max-width: 640px) {
    .tour-verdict-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "pill meta"
            "rail rail";
    }
    .tour-verdict-pill { grid-area: pill; }
    .tour-verdict-meta { grid-area: meta; }
    .tour-verdict-rail {
        grid-area: rail;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* Narration line stagger — same per-line index pattern. */
.tour-narration li {
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 460ms var(--ease-premium),
        transform 460ms var(--ease-premium);
    transition-delay: calc(var(--n, 0) * 110ms);
}
.tour-stage-read.in-view .tour-narration li {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Stage 4 — the wall + cinematic hanging sequence ─────────
     Operator review: the previous version was "sloppy at the start
     and not clear about hanging on a wall". This rewrite does the
     full pin-it-up gesture in choreographed stages so the user sees:
       1. Camera-pull-back: the wall fades + scales in.
       2. The photograph descends from above the viewport.
       3. The photograph holds in place, slightly tilted ("being
          held against the wall").
       4. The pin descends from above and presses in.
       5. The photograph settles, then begins the gentle sway.
     Total sequence: ~3.2 s before the sway loop begins. The sway
     itself is unchanged. Honors prefers-reduced-motion. */
.tour-wall-stage {
    margin: 36px 0 0;
    /* Generous padding under the stage so the descending elements
       have room to come from "off-camera" without clipping. */
    padding-bottom: 32px;
    perspective: 1000px;
    perspective-origin: 50% 30%;
    /* Hide the descent overflow — the card and pin start above the
       wall board's top edge. Without this, the off-screen start
       state would leak into the verdict list above. */
    overflow: hidden;
}
.tour-wall-board {
    position: relative;
    margin: 0 auto;
    /* Bigger wall = "farther away" point of view. The card now
       reads as a small photograph on a large wall, not a card
       filling its container. Min-height anchors the bottom so the
       card's drop trajectory has somewhere to land. */
    padding: 56px 32px 64px;
    max-width: 720px;
    min-height: 360px;
    background:
        radial-gradient(
            ellipse at 50% 25%,
            rgba(255, 250, 242, 0.96),
            var(--wall-2) 72%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 2px,
            rgba(15, 14, 13, 0.014) 2px,
            rgba(15, 14, 13, 0.014) 4px
        );
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -32px 64px -48px rgba(15, 14, 13, 0.10),
        0 30px 64px -40px rgba(15, 14, 13, 0.30);
    /* Quick camera-set: the wall fades + scales in fast so the
       user is looking at the wall before the photo descends.
       Slow scale-up was making the whole sequence feel laggy. */
    transform: scale(0.97);
    opacity: 0;
    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 400ms ease-out;
}
.tour-stage-wall.in-view .tour-wall-board {
    transform: scale(1);
    opacity: 1;
}
/* A faint horizontal shelf line near the bottom of the wall to
   suggest depth — like the wall meets a mantel below the frame. */
.tour-wall-board::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 14, 13, 0.08) 20%,
        rgba(15, 14, 13, 0.08) 80%,
        transparent
    );
    opacity: 0;
    transition: opacity 800ms ease-out 600ms;
}
.tour-stage-wall.in-view .tour-wall-board::after { opacity: 1; }

.tour-wall-pin {
    position: absolute;
    /* SVG pushpin: 36×60 viewBox, rendered 30×50 on screen.
       Anatomy: head (radius 15, top of SVG), spec highlight,
       cast shadow, dark collar, tapered metallic needle.

       Position physics: in real life you don't pin a photo at
       its very top edge — the paper would tear. You pin it
       ~10–25 mm inside. We mimic that by placing the needle
       entry ~32 px below the card's top edge:
         wall-board padding-top (56) + card margin-top (32) = 88 (card top)
         needle tip lands at 120 (= card top + 32)
         pin top: 120 - 50 = 70
       Result: head straddles the photo's top edge (top half above
       the photo, lower half drawn over the photo surface), with
       the visible portion of the needle shaft going down into the
       photo. The card's transform-origin is set to (50%, 32px)
       so the sway pivots from this same entry point — physically
       correct.  */
    top: 70px;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    z-index: 3;
    /* Soft drop-shadow on the SVG wrapper so the head casts a
       small shadow on the photo below. Real pushpin feel. */
    filter: drop-shadow(0 3px 4px rgba(15, 14, 13, 0.38))
            drop-shadow(0 1px 1px rgba(15, 14, 13, 0.20));
    transform-origin: 50% 100%; /* pivot at the needle tip */
    /* Initial state: well above the viewport, slightly tilted as
       if held in a hand. Pin is INVISIBLE while the photo descends
       — it only enters the scene after the photo has landed. */
    opacity: 0;
    transform: translateY(-240px) rotate(-9deg);
}
.tour-wall-pin svg {
    display: block;
    width: 100%;
    height: 100%;
}
.tour-stage-wall.in-view .tour-wall-pin {
    /* Pin descent starts AFTER the photo has landed (photo
       finishes at ~1050 ms). Synced so the pin's contact moment
       (78% of the animation, ~1468 ms after page load) lines up
       with the photo's compression-react keyframe (1450 ms). */
    animation: tour-wall-pin-pierce 600ms
        cubic-bezier(0.32, 0, 0.18, 1) 1000ms forwards;
}
@keyframes tour-wall-pin-pierce {
    0% {
        opacity: 0;
        transform: translateY(-240px) rotate(-9deg);
    }
    /* Becomes visible above the photo, still tilted. */
    18% {
        opacity: 1;
        transform: translateY(-160px) rotate(-7deg);
    }
    /* Approaching contact, straightening — the "hand" aligns
       the pin perpendicular to the wall. */
    62% {
        opacity: 1;
        transform: translateY(-30px) rotate(-3deg);
    }
    /* Contact — needle tip touches the photo's top edge. */
    78% {
        transform: translateY(0) rotate(0deg);
    }
    /* THE PIERCE — head drives DOWN, needle goes into the photo.
       Pivoting from the needle tip (transform-origin 50% 100%)
       means the head moves down while the tip stays put — exactly
       how a pin pushes through paper. */
    88% {
        transform: translateY(5px) rotate(0deg);
    }
    /* Settle: head pulls back up flush against the photo's top. */
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

.tour-wall-card {
    position: relative;
    /* Smaller card relative to the wall — sells the "small photo on
       a big wall" perspective. */
    margin: 32px auto 0;
    width: 56%;
    max-width: 320px;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow:
        0 10px 22px -12px rgba(15, 14, 13, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
    /* Pivot at the pin's needle-entry point on the photo — 32 px
       below the card's top edge (matches the pin's `top: 70px`
       calculation above). The sway swings the photo around this
       point, exactly the way a real photo hanging on a single
       pushpin pivots from where the needle pierces the paper. */
    transform-origin: 50% 32px;
    /* Start: above the viewport, locked to the pin. Slight tilt
       so the descent doesn't read as a flat drop. */
    opacity: 0;
    transform: translateY(-260px) rotate(-2.5deg) scale(0.97);
}
.tour-stage-wall.in-view .tour-wall-card {
    /* Three chained animations on the card, each on `transform`
       (later declarations override on overlap, but their
       schedules are non-overlapping so the composition is clean):

         PLACE   200–1050 ms — descent + land flat against wall
         REACT  1450–1700 ms — paper compresses under pin pressure
                                (vertical squeeze + small downward
                                push), then recoils slightly
         SWAY   1700 ms +    — pendulum from the pin entry point

       Total: ~1.7 s before the sway. */
    animation:
        tour-wall-card-place 850ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards,
        tour-wall-card-react 250ms cubic-bezier(0.34, 1.56, 0.64, 1) 1450ms forwards,
        tour-wall-sway 6s ease-in-out 1700ms infinite;
}
@keyframes tour-wall-card-place {
    /* Smooth ease-out descent — no sub-stages, no wobble. */
    0% {
        opacity: 0;
        transform: translateY(-180px) rotate(-2.2deg);
    }
    /* Visible from early descent. */
    18% {
        opacity: 1;
        transform: translateY(-130px) rotate(-2.2deg);
    }
    /* Land flat at the resting tilt. */
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
    }
}
@keyframes tour-wall-card-react {
    /* Physics: under the pin's downward force the paper
       compresses vertically (~1.5%) and the photo dips down
       1.5 px. Then the spring-back overshoots slightly (scaleY
       1.005) before settling — this is the "ringing" you'd see
       if you slow-mo'd a real pin going into a sheet of paper. */
    0%   { transform: translateY(0) rotate(-2deg) scaleY(1); }
    40%  { transform: translateY(1.5px) rotate(-2.3deg) scaleY(0.985); }
    70%  { transform: translateY(0) rotate(-1.8deg) scaleY(1.005); }
    100% { transform: translateY(0) rotate(-2deg) scaleY(1); }
}
@keyframes tour-wall-sway {
    0% {
        transform: translateY(0) rotate(-2deg) scale(1);
        box-shadow:
            -4px 12px 22px -12px rgba(15, 14, 13, 0.32),
            0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
    50% {
        transform: translateY(0) rotate(0.6deg) scale(1);
        box-shadow:
            4px 12px 22px -12px rgba(15, 14, 13, 0.32),
            0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
    100% {
        transform: translateY(0) rotate(-2deg) scale(1);
        box-shadow:
            -4px 12px 22px -12px rgba(15, 14, 13, 0.32),
            0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
}

/* Mobile: shrink the wall a bit but keep the proportions. */
@media (max-width: 640px) {
    .tour-wall-board {
        padding: 44px 22px 52px;
        min-height: 280px;
    }
    .tour-wall-card { margin-top: 24px; }
    /* Pin retune for mobile padding (44 + 24 - 7 = 61px). */
    .tour-wall-pin { top: 61px; }
    @keyframes tour-wall-card-place {
        0% { opacity: 0; transform: translateY(-220px) rotate(-14deg) scale(0.92); }
        20% { opacity: 1; transform: translateY(-150px) rotate(-11deg) scale(0.94); }
        40% { transform: translateY(-72px) rotate(-7deg) scale(0.97); }
        55% { transform: translateY(-40px) rotate(-5deg) scale(0.99); }
        72% { transform: translateY(0) rotate(-2deg) scale(1); }
        85% { transform: translateY(2px) rotate(-2.4deg) scale(1); }
        100% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
    }
}
.tour-wall-card-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--wall-2);
    border-bottom: 1px solid var(--rule);
}
.tour-wall-card-meta {
    padding: 10px 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tour-wall-card-tier {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(165, 62, 44, 0.1);
    color: var(--red);
    border: 1px solid rgba(165, 62, 44, 0.3);
}
.tour-wall-card-comp {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reduced-motion: kill the choreography. The stage lands with all
   elements in their end-states from first paint. */
@media (prefers-reduced-motion: reduce) {
    .tour-real-photo img,
    .tour-stage-photo.in-view .tour-real-photo img { transform: none !important; transition: none !important; }
    .tour-narration li,
    .tour-verdict-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .tour-wall-board,
    .tour-stage-wall.in-view .tour-wall-board {
        transform: scale(1) !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .tour-wall-board::after { opacity: 1 !important; transition: none !important; }
    .tour-wall-pin,
    .tour-stage-wall.in-view .tour-wall-pin {
        opacity: 1 !important;
        transform: translateY(0) rotate(0deg) !important;
        transition: none !important;
        animation: none !important;
    }
    .tour-wall-card,
    .tour-stage-wall.in-view .tour-wall-card {
        opacity: 1 !important;
        transform: translateY(0) rotate(-2deg) scaleY(1) !important;
        transition: none !important;
        animation: none !important;
    }
}

.tour-narration {
    list-style: none;
    margin: 0 0 18px;
    padding: 18px 22px;
    border-left: 2px solid var(--red);
    background: var(--wall-2);
    border-radius: 0 4px 4px 0;
}
.tour-narration li {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    font-style: italic;
}
.tour-narration li:last-child { margin: 0; }
.tour-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 2px;
}
.tour-pill-strong {
    background: rgba(165, 62, 44, 0.12);
    color: #a53e2c;
    border: 1px solid rgba(165, 62, 44, 0.4);
}
.tour-pill-submit {
    background: rgba(165, 62, 44, 0.04);
    color: var(--ink);
    border: 1px solid var(--rule);
}
.tour-pill-maybe {
    background: var(--wall-2);
    color: var(--ink-2);
    border: 1px solid var(--rule);
}
.tour-pill-skip {
    background: transparent;
    color: var(--ink-3);
    border: 1px solid var(--rule);
}
.tour-close {
    margin-top: 56px;
    padding: 36px 0 0;
    border-top: 1px solid var(--rule);
}
.tour-close-title {
    margin: 0 0 14px;
    font-size: 32px;
    color: var(--ink);
}
.tour-close-lede {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 56ch;
}
.tour-close-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.tour-close-secondary {
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding: 2px 0;
    transition: color 120ms, border-color 120ms;
}
.tour-close-secondary:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

@media (max-width: 640px) {
    .tour { padding: 40px 18px 72px; }
    .tour-title { font-size: 34px; }
    .tour-stage-title { font-size: 22px; }
    .tour-close-title { font-size: 26px; }
}

/* ─── Mirror Moment ─────────────────────────────────────────────
     Full-bleed photo + critic-voice typewriter narration. Sits as
     the first thing the user sees after /analyze POST; below it,
     the verdict shortlist lives hidden until the reveal. */
.mirror {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: grid;
    place-items: center;
    padding: 64px 24px 80px;
    margin: 0 0 48px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #1a1715; /* fallback when preview missing */
    background-size: cover;
    background-position: center;
    color: #f5f4f0;
}
.mirror-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 14, 13, 0.40) 0%,
        rgba(15, 14, 13, 0.55) 50%,
        rgba(15, 14, 13, 0.86) 100%
    );
    pointer-events: none;
}
.mirror-stage {
    position: relative;
    z-index: 1;
    max-width: 640px;
    width: 100%;
    text-align: left;
}
.mirror-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(245, 244, 240, 0.18);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 244, 240, 0.78);
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
}
.mirror-eyebrow-mark { color: var(--red); font-size: 11px; }

.mirror-narration {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.mirror-line {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.45;
    color: #f5f4f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* JS will add .mirror-line-typing for the in-flight character
       reveal; the static CSS just hides each line until the JS
       picks it up. Reduced-motion skips JS entirely so the lines
       are visible from the start (see the @media block below). */
    opacity: 0;
}
.mirror-line.mirror-line-revealed { opacity: 1; }

.mirror-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.mirror-reveal-btn {
    /* Button is hidden until the typewriter finishes — JS toggles
       .mirror-reveal-btn-ready. Reduced-motion users see it
       immediately. */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 280ms ease-out, transform 280ms ease-out;
    pointer-events: none;
}
.mirror-reveal-btn.mirror-reveal-btn-ready {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mirror-act-note {
    margin: 0;
    font-size: 12px;
    color: rgba(245, 244, 240, 0.62);
    letter-spacing: 0.01em;
}

/* The shortlist hides until reveal. The .mirror-pre-reveal class
   is removed by JS on click; we keep `display: none` rather than
   `visibility` so layout doesn't shift behind the mirror. */
.mirror-shortlist.mirror-pre-reveal {
    display: none;
}

@media (max-width: 640px) {
    .mirror { min-height: 360px; padding: 48px 18px 56px; }
    .mirror-line { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .mirror-line { opacity: 1 !important; }
    .mirror-reveal-btn {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
    }
}

/* ─── First Save — the wall on /account ──────────────────────────
     Persistent saved-verdict cards. Each card carries a 256-px JPEG
     thumbnail (generated server-side at save-time, lives inside the
     verdict record as a data: URI) plus the verdict-tier pill, the
     competition name, and the headline. Free tier holds 3; paid
     unlimited. The visual goal: gallery wall, not data table. */
.atelier-wall { /* inherits .atelier-section spacing */ }

.saved-verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.saved-verdict-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--card-surface);
    overflow: hidden;
    transition: transform 220ms var(--ease-premium),
                box-shadow 220ms var(--ease-premium);
}
.saved-verdict-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.saved-verdict-thumb-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--wall-2);
    overflow: hidden;
}
.saved-verdict-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.saved-verdict-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    padding: 3px 8px;
    backdrop-filter: blur(4px);
}
.saved-verdict-meta {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.saved-verdict-comp {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}
.saved-verdict-category {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
}
.saved-verdict-headline {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    /* clamp to 3 lines so cards stay visually balanced */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.saved-verdict-saved-at {
    margin: 6px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.saved-verdict-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
}
.saved-verdict-link {
    font-size: 12.5px;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms;
}
.saved-verdict-link:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}
.saved-verdict-delete-form { margin: 0; }
.saved-verdict-delete {
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
    transition: color 120ms, background 120ms;
}
.saved-verdict-delete:hover { color: var(--red); background: var(--wall-2); }
.saved-verdict-delete:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.saved-verdict-card.htmx-swapping {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.saved-verdict-just-in {
    animation: saved-verdict-in 460ms var(--ease-premium) both;
}
@keyframes saved-verdict-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: tighter grid */
@media (max-width: 640px) {
    .saved-verdict-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    .saved-verdict-meta { padding: 10px 12px 12px; }
    .saved-verdict-comp { font-size: 13px; }
}

/* Reduced-motion: kill the lift, keep static cards */
@media (prefers-reduced-motion: reduce) {
    .saved-verdict-card { transition: none; }
    .saved-verdict-card.htmx-swapping { transition: none; }
    .saved-verdict-just-in { animation: none; }
}

/* ─── First Save — the save button on the judge surface ───────── */
.judge-save-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
}
.judge-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.judge-save-anon {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
    font-size: 12.5px;
    color: var(--ink-3);
}
.judge-save-anon a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.judge-save-anon a:hover { color: var(--red); }

/* ─── Sign-in confirmation toast ───────────────────────────────────
     Small reassurance banner at the top of /account when arrived at
     via a fresh sign-in (?welcome=1). Slides in from above, auto-
     fades after ~6 seconds via app.js, dismissable with the × button
     or Esc key. Reduced-motion users see it static — no slide, no
     fade. Layout-wise it sits in the .atelier flow above the hero
     so the page below shifts down by ~52px while it's visible; that
     shift is part of the welcome rhythm, not a layout bug. */
.atelier-toast {
    margin: 0 auto 24px;
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--wall-2);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    animation: atelier-toast-in 320ms var(--ease-premium) both;
}
.atelier-toast-mark {
    color: var(--red);
    font-size: 14px;
    line-height: 1;
}
.atelier-toast-body { flex: 1; }
.atelier-toast-body strong {
    font-weight: 600;
    color: var(--ink);
    margin: 0 2px;
}
.atelier-toast-close {
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-size: 22px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 4px;
}
.atelier-toast-close:hover { color: var(--red); background: var(--wall); }
.atelier-toast-close:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.atelier-toast.atelier-toast-out {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 280ms ease-out, transform 280ms ease-out;
}
@keyframes atelier-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .atelier-toast { animation: none; }
    .atelier-toast.atelier-toast-out { transition: none; }
}

/* ─── Reduced motion — Atelier ───────────────────────────────────────
     European Accessibility Act (mandatory June 2025 for e-commerce):
     all motion-based decoration must collapse for users who request
     it. The typewriter hero already opts out in JS (atelierHero IIFE
     in app.js); this block kills the hover transitions and any
     reveal animations on the Atelier surface so the page reads as
     stable from first paint. */
@media (prefers-reduced-motion: reduce) {
    .tonight-link,
    .profile-option,
    .atelier-door-cta a {
        transition: none !important;
    }
    .atelier-name {
        /* Inert the red-wash underline animation if any future change
           adds one. Currently the underline is static, but locking
           transition: none is a cheap forward-defense. */
        transition: none !important;
    }
}

/* ─── Global reduced-motion safety net ─────────────────────────────
     European Accessibility Act (mandatory June 2025): every motion-
     based decoration must collapse for users who request it.
     This block runs LAST so it overrides anything that didn't have
     its own guard. We don't kill ALL transitions wholesale (focus
     rings, hover state-changes, form-element transitions are still
     useful for interaction feedback), but we DO disable:
       · all keyframe-driven animations (`animation: none`)
       · long-distance transforms (translate, scale, rotate) on
         decorative classes that ride the page-load reveal cadence
       · the ambient pulse/bloom decorations that run in idle
     Specific component-level reduced-motion blocks above this still
     apply; this is the catch-all for anything that escaped them. */
@media (prefers-reduced-motion: reduce) {
    /* Kill every keyframe animation. New keyframes are picked up
       automatically because this is a wildcard rule. */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
    }
    /* Decorative reveal-in classes — collapse to end-state. */
    .reveal-up,
    .reveal-up.in-view,
    .match-card-in,
    .photo-tile-in,
    .results-num-in,
    .results-tier-in,
    .judge-photo-card,
    .comp-masthead-band,
    .atelier-greeting,
    .atelier-lede {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    /* Idle pulses + glows — visually inert, but the elements
       themselves remain visible. */
    .mech-strip,
    .mech-beam::before,
    .mech-frame.winner,
    .mech-cursor-click,
    .atlas-pin.active .atlas-pin-halo,
    .atlas-stamp-flash,
    .progress-active-pulse,
    .progress-phase.active .progress-phase-label {
        animation: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   LOCKED FEATURES PANEL  ·  Free + Studio verdict shortlist
   ───────────────────────────────────────────────────────────────────
   Renders below the verdict, above the AI-output tag. Six rows
   (or two for Studio) describing the paid features the user
   doesn't have yet. The register is calm — soft chrome, no red
   alerts, single quiet "See pricing →" link at the bottom that
   matches "The Door" panel pattern from the Atelier reception
   ("That's allowed to stay where you are.").
   ═════════════════════════════════════════════════════════════════════ */
.locked-features {
    margin: 48px 0 24px;
    padding: 28px 32px 24px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}
.locked-features-head { margin: 0 0 18px; }
.locked-features-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.locked-features-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .locked-features-list { grid-template-columns: 1fr 1fr; gap: 0 32px; }
}
.locked-feature {
    position: relative;
    padding: 16px 0 18px 38px;
    border-top: 1px solid var(--rule);
}
.locked-feature:first-child { border-top: none; padding-top: 4px; }
@media (min-width: 720px) {
    /* In two-column mode, the second column doesn't get a top
       border on its first item — the visual rule is shared with
       the first column's first item. */
    .locked-feature:nth-child(2) { border-top: none; padding-top: 4px; }
}
/* The lock glyph — a small monoline padlock SVG-like character built
   from box-drawing characters, plus a faint ring in --rule-2.
   Rendered as a CSS pseudo-element so we don't need an actual SVG
   per row. */
.locked-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ink-3);
    border-radius: 4px;
    background:
        radial-gradient(circle at 50% 60%, var(--ink-3) 0 2px, transparent 2.5px),
        var(--card-surface);
}
.locked-feature::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    width: 12px;
    height: 8px;
    border: 1.5px solid var(--ink-3);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.locked-feature-tier {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid var(--red);
    padding: 2px 7px;
    border-radius: 100px;
    margin-bottom: 8px;
    line-height: 1.2;
}
.locked-feature-studio .locked-feature-tier { /* Studio = lighter red */
    color: var(--red);
}
.locked-feature-atelier .locked-feature-tier {
    /* Atelier = filled chip, reads as the deeper tier at a glance */
    color: var(--wall);
    background: var(--red);
}
.locked-feature-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.locked-feature-desc {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}
.locked-features-tail {
    border-top: 1px dashed var(--rule);
    padding-top: 18px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink-3);
    font-style: italic;
}
.locked-features-link {
    font-style: normal;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    transition: color 0.15s ease;
}
.locked-features-link:hover { color: var(--red-dim, var(--red)); }
@media (max-width: 640px) {
    .locked-features { padding: 22px 20px 18px; margin-top: 36px; }
    .locked-feature { padding-left: 32px; }
    .locked-feature::before { top: 16px; width: 18px; height: 18px; }
    .locked-feature::after { top: 10px; width: 10px; height: 7px; }
}

/* ═════════════════════════════════════════════════════════════════════
   ATELIER  ·  Personalised memo CTA in shortlist  (.memo-cta)
   ───────────────────────────────────────────────────────────────────
   Inline trigger for the existing /competitions/{id}/personalised-memo
   route. Sits between the .reasoning paragraph and the triangulated
   block on each top-K card. HTMX swaps the result into a per-card
   target so each competition's memo lands in its own row.
   ═════════════════════════════════════════════════════════════════════ */
.memo-cta {
    margin: 14px 0 0;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: var(--wall);
    border: 1px dashed var(--rule-2);
    border-radius: 4px;
}
.memo-cta-btn { flex-shrink: 0; }
.memo-cta-note {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
}
.memo-cta-indicator {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--red);
}
.memo-result {
    margin: 12px 0 0;
}
.memo-result:empty { display: none; }
@media (max-width: 640px) {
    .memo-cta { padding: 10px 12px; }
    .memo-cta-note { font-size: 12px; min-width: 0; }
}

/* ═════════════════════════════════════════════════════════════════════
   ATELIER  ·  Triangulated Read  (.triangulated)
   ───────────────────────────────────────────────────────────────────
   Three independent Opus passes + synthesis, the heaviest Atelier
   feature. The synthesis paragraph reads as the headline take; the
   three raw voices live inside an expandable drawer.

   Three agreement states gate a small qualitative chip (no numbers,
   per the Legal council resolution that thresholds must not surface):
     · aligned — all three judges converged. Pleasant.
     · mixed   — two close, one outlier. Useful detail.
     · split   — three different reads. The drawer is where the
                 photographer learns the most. Visually warmer red.
   ═════════════════════════════════════════════════════════════════════ */
.triangulated {
    margin: 16px 0 0;
    padding: 18px 22px 18px 22px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    border-top: 3px solid var(--ink-3);
    box-shadow: var(--card-shadow);
}
.triangulated-aligned { border-top-color: #1F6B3A; }
.triangulated-mixed { border-top-color: #C28A00; }
.triangulated-split { border-top-color: var(--red); }
.triangulated-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
.triangulated-eyebrow {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}
.triangulated-agreement {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    border: 1px solid var(--rule);
    color: var(--ink-3);
    white-space: nowrap;
}
.triangulated-agreement-aligned {
    color: #1F6B3A;
    border-color: rgba(31, 107, 58, 0.30);
    background: rgba(31, 107, 58, 0.06);
}
.triangulated-agreement-mixed {
    color: #8A6200;
    border-color: rgba(138, 98, 0, 0.30);
    background: rgba(138, 98, 0, 0.06);
}
.triangulated-agreement-split {
    color: var(--red);
    border-color: rgba(165, 62, 44, 0.40);
    background: rgba(165, 62, 44, 0.06);
}
.triangulated-synthesis {
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 14px;
    /* Slightly heavier weight than .reasoning so the synthesis reads
       as the take, not just another paragraph in the comp body. */
    font-weight: 450;
}
.triangulated-drawer {
    margin: 0;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
}
.triangulated-drawer > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 4px 0 4px 22px;
    position: relative;
    transition: color 0.15s ease;
}
.triangulated-drawer > summary::-webkit-details-marker { display: none; }
.triangulated-drawer > summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    border-radius: 50%;
    transition: transform 0.2s ease, color 0.15s ease;
}
.triangulated-drawer[open] > summary::before {
    content: '−';
    color: var(--red);
    border-color: var(--red);
}
.triangulated-drawer > summary:hover { color: var(--red); }

.triangulated-pass {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--wall);
    border-left: 2px solid var(--rule-2);
    border-radius: 2px;
}
.triangulated-pass-redteam {
    border-left-color: var(--red);
}
.triangulated-pass-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 6px;
    font-weight: 500;
}
.triangulated-pass-body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
}
.triangulated-pass-concerns {
    list-style: disc;
    padding-left: 18px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-2);
}
.triangulated-pass-concerns li {
    line-height: 1.5;
    margin: 2px 0;
}
@media (max-width: 640px) {
    .triangulated { padding: 14px 16px; }
    .triangulated-synthesis { font-size: 14.5px; }
    .triangulated-pass { padding: 10px 12px; }
    .triangulated-pass-body { font-size: 13.5px; }
}

/* ═════════════════════════════════════════════════════════════════════
   ATELIER  ·  Eligibility Audit  (.eligibility-pill, .eligibility-actions)
   ───────────────────────────────────────────────────────────────────
   GREEN/AMBER/RED status for each top-K competition card. The pill
   sits in the match-meta header alongside the verdict pill; the
   action list is a <details> block below the header, defaulting open
   on RED (so the photographer sees blockers before reading the
   verdict) and closed otherwise. Silent for green findings — there's
   nothing to do.

   Three confidence states with distinct hues — the audit IS a
   stoplight (a hard "do not submit" deserves red), unlike the coach
   block which steers away from stoplight semantics on tonal grounds.
   ═════════════════════════════════════════════════════════════════════ */
.eligibility-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    background: var(--card-surface);
    color: var(--ink-2);
    white-space: nowrap;
}
.eligibility-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3);
    flex-shrink: 0;
}
.eligibility-pill-green {
    color: #1F6B3A;
    border-color: rgba(31, 107, 58, 0.30);
    background: rgba(31, 107, 58, 0.06);
}
.eligibility-pill-green .eligibility-dot { background: #1F6B3A; }
.eligibility-pill-amber {
    color: #8A6200;
    border-color: rgba(138, 98, 0, 0.30);
    background: rgba(138, 98, 0, 0.06);
}
.eligibility-pill-amber .eligibility-dot { background: #C28A00; }
.eligibility-pill-red {
    color: var(--red);
    border-color: rgba(165, 62, 44, 0.40);
    background: rgba(165, 62, 44, 0.06);
}
.eligibility-pill-red .eligibility-dot { background: var(--red); }

/* ── Actions list ──
   Block sits below the header, above the verdict body. Default-open
   on RED (the photographer needs to see the blocker before they read
   the verdict and start daydreaming about submitting). Default-closed
   on AMBER (information available, not urgent). */
.eligibility-actions {
    margin: 0 18px;
    padding: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
}
.eligibility-actions[open] {
    padding-bottom: 14px;
}
.eligibility-actions > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 0 12px 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    position: relative;
    transition: color 0.15s ease;
}
.eligibility-actions > summary::-webkit-details-marker { display: none; }
.eligibility-actions > summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.eligibility-actions[open] > summary::before {
    content: '−';
    color: var(--red);
    border-color: var(--red);
}
.eligibility-actions-red > summary { color: var(--red); font-weight: 600; }
.eligibility-actions-red > summary::before {
    color: var(--red);
    border-color: var(--red);
    background: rgba(165, 62, 44, 0.08);
}
.eligibility-actions > summary:hover { color: var(--red); }

.eligibility-action-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 24px;
}
.eligibility-action {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed var(--rule);
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
}
.eligibility-action:first-child { border-top: none; padding-top: 4px; }
.eligibility-action-status {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    line-height: 1.4;
    font-size: 12px;
    color: var(--ink-3);
}
.eligibility-action-red .eligibility-action-status { color: var(--red); }
.eligibility-action-amber .eligibility-action-status { color: #C28A00; }
.eligibility-action-text {
    flex: 1;
    color: var(--ink);
}
.eligibility-action-red .eligibility-action-text { color: var(--ink); font-weight: 500; }
.eligibility-action-ref {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-3);
}
.eligibility-action-ref summary {
    cursor: pointer;
    color: var(--ink-3);
    font-style: italic;
}
.eligibility-action-ref summary:hover { color: var(--red); }
.eligibility-action-ref p {
    margin: 6px 0 0;
    padding: 8px 12px;
    background: var(--wall);
    border-left: 2px solid var(--rule-2);
    font-style: italic;
    color: var(--ink-2);
}
@media (max-width: 640px) {
    .eligibility-actions { margin: 0 14px; }
    .eligibility-action-list { margin-left: 20px; }
    .eligibility-action { font-size: 13px; }
}

/* ═════════════════════════════════════════════════════════════════════
   ATELIER  ·  Path-to-Strong-Submit  (.verdict-coach)
   ───────────────────────────────────────────────────────────────────
   Atelier-only coaching block, attached on top of every deep-judged
   verdict. The visual treatment reads as a "second voice" on the
   verdict — set apart with a tinted left rule + premium-card
   surface, but staying in the same column flow as the verdict prose
   so the photographer reads judge → coach as one continuous thought.

   Three confidence states gate the surrounding tone (NOT the inner
   colour, which would feel like a stoplight):
     · high   — full accent on the eyebrow + bullets
     · medium — same as high, no special hue
     · low    — desaturated (this photo is being held, not coached
                up) and the honest-tail explainer reveals
   ═════════════════════════════════════════════════════════════════════ */
.verdict-coach {
    margin: 18px 0 0;
    padding: 14px 18px 14px 18px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--red);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}
.verdict-coach-compact {
    margin: 12px 0 0;
    padding: 12px 14px;
    /* In the per-row comparison list the coach block lives inside an
       already-bordered row; tone the surface down so it doesn't
       compete for attention with the recommended-winner card. */
    box-shadow: none;
    background: var(--wall);
}
.verdict-coach-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
}
.verdict-coach-headline {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}
.verdict-coach-bullets {
    list-style: decimal;
    padding-left: 22px;
    margin: 0;
    color: var(--ink-2);
}
.verdict-coach-bullets li {
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 6px;
}
.verdict-coach-bullets li::marker {
    color: var(--red);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.verdict-coach-bullets li:last-child { margin-bottom: 0; }
.verdict-coach-honest-tail {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
    font-style: italic;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--rule);
}
/* Low-confidence: desaturate the eyebrow + drop the accent left-rule
   so the photographer reads "this is a hold-recommendation, not a
   path-up" at a glance. */
.verdict-coach-low {
    border-left-color: var(--rule-2);
}
.verdict-coach-low .verdict-coach-eyebrow {
    color: var(--ink-3);
}
.verdict-coach-low .verdict-coach-bullets li::marker {
    color: var(--ink-3);
}
@media (max-width: 640px) {
    .verdict-coach { padding: 12px 14px; margin-top: 14px; }
    .verdict-coach-compact { padding: 10px 12px; }
    .verdict-coach-headline { font-size: 14.5px; }
    .verdict-coach-bullets li { font-size: 13.5px; }
}

/* ═════════════════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON  ·  site-wide
   ───────────────────────────────────────────────────────────────────
   Hidden until the user scrolls past 600px (toggled by app.js setting
   data-scrolled="true" on <body>). Fixed bottom-right, premium-card
   surface so it doesn't read as a tacked-on widget. The chevron uses
   currentColor so it inherits the button's tone on hover.

   The HTML carries `hidden` so it's invisible on first paint even
   before app.js loads — no FOUC chip flicker on the homepage.
   ═════════════════════════════════════════════════════════════════════ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-surface);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 50;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
        opacity 0.24s var(--ease-out),
        transform 0.24s var(--ease-out),
        color 0.18s var(--ease-out),
        border-color 0.18s var(--ease-out),
        box-shadow 0.18s var(--ease-out);
}
.back-to-top svg {
    width: 20px;
    height: 20px;
}
/* When app.js flips body[data-scrolled="true"] we reveal the button.
   `hidden` is removed by the same JS so display becomes the default. */
body[data-scrolled="true"] .back-to-top {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    color: var(--red);
    border-color: var(--red);
    box-shadow: var(--card-shadow-hover);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 0.12s linear;
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   JOURNAL  ·  /blog index + per-post page  (.journal-*)
   ───────────────────────────────────────────────────────────────────
   Editorial typography. The journal is a real publication, not a
   side-effect of the newsletter — its surface treats the reader as
   somebody who came here to read, not to convert. Centred column,
   serif-ish-feeling sans (Inter at the lower weights, line-height
   1.65), generous whitespace, no chrome around the prose.

   The index is a structured list, the post is a single column with
   a wider eyebrow and a soft CTA at the bottom. Both pages share the
   .journal-* prefix so future ledes (a podcast, a portfolio
   showcase) can branch off cleanly.
   ═════════════════════════════════════════════════════════════════════ */

.journal {
    max-width: 1180px;
    margin: 56px auto 96px;
    padding: 0 24px;
    color: var(--ink);
}
.journal-head {
    margin: 0 0 56px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
}
.journal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 14px;
}
.journal-title {
    font-family: var(--font-sans);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 16px;
}
.journal-lede {
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
    max-width: 60ch;
}
.journal-lede strong { color: var(--ink); font-weight: 600; }
.journal-rss-link {
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
.journal-rss-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* ── Card grid ──
   Magazine layout. Posts are cards stacked on mobile, two-up at the
   tablet breakpoint, three-up at the wide breakpoint. Cover image
   tops every card; the text body sits below it with a meta line +
   title + summary + tag chips. The whole card is a single anchor
   so any click anywhere lands on the post. */
.journal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 0 0 64px;
}
@media (min-width: 640px) {
    .journal-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (min-width: 1100px) {
    .journal-grid { grid-template-columns: repeat(3, 1fr); }
}
.journal-card {
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    /* Each card is a column-flex so the body's "summary" can grow to
       fill any extra height when sibling cards have longer titles —
       the bottom edge of the cards line up across the row. */
    display: flex;
    flex-direction: column;
    transition:
        transform 0.24s var(--ease-out),
        box-shadow 0.24s var(--ease-out),
        border-color 0.18s var(--ease-out);
}
.journal-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: color-mix(in srgb, var(--red) 30%, var(--rule));
}
.journal-card:hover .journal-card-title { color: var(--red); }
.journal-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.journal-card-cover {
    aspect-ratio: 16 / 9;
    background: var(--wall);
    overflow: hidden;
    position: relative;
}
.journal-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-out);
}
.journal-card:hover .journal-card-cover-img {
    transform: scale(1.02);
}
.journal-card-cover-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}
.journal-card-body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.journal-card-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
}
.journal-card-meta-sep { color: var(--rule-2); margin: 0 6px; }
.journal-card-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.28;
    color: var(--ink);
    margin: 0 0 10px;
    transition: color 0.15s ease;
}
.journal-card-summary {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 14px;
    /* Clamp the summary to ~4 lines so cards with longer summaries
       don't blow the grid rhythm. The full summary is always
       visible in the post page itself. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.journal-card-tags {
    list-style: none;
    padding: 0;
    margin: auto 0 0;  /* push to bottom with auto top-margin */
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
}
.journal-card-tags li {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.journal-card-tags li:not(:last-child)::after {
    content: " ·";
    color: var(--rule-2);
    margin-left: 4px;
}

/* ── Section band · The Sunday Submission ────────────────────────
   Mid-size editorial section between the journal masthead and the
   post grid. The column is a SEPARATE PUBLICATION nested inside
   the journal page — visually marked by:
     · Warm parchment background tint, clearly distinct from the
       page cream so the band reads as a different region
     · 2px brick-red top accent + 1px ink-muted bottom rule
     · Centered magazine-grade typography: tiny mono caps eyebrow,
       BIG italic Georgia logotype, italic serif tagline
     · Typographic ornament rule (short line · brick-red diamond ·
       short line) — same ornament as the column-home masthead so
       the two surfaces share a visual signature
     · Small framed cover inset paired with the latest issue's
       № / title / dek
     · Centered "Visit the column →" CTA on the bottom rule
   The whole preview row is a single anchor (the inner CTA visually
   labels it, the click lands on the issue). The bottom "Visit the
   column →" link goes to the dedicated /blog/tag/sunday-submission/
   landing. */
.column-band {
    margin: 0 0 64px;
    padding: 0;
    background:
        linear-gradient(180deg, #F1EDE3 0%, #E9E3D6 100%);
    border-top: 2px solid var(--red);
    border-bottom: 1px solid rgba(15, 14, 13, 0.18);
}
.column-band-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 36px 36px;
    text-align: center;
}
@media (min-width: 720px) {
    .column-band-inner { padding: 56px 48px 40px; }
}
.column-band-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 700;
    margin: 0 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.column-band-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    display: inline-block;
    flex: 0 0 auto;
}
.column-band-eyebrow-sep {
    color: var(--ink-3);
    font-weight: 400;
    margin: 0 2px;
}
.column-band-logotype {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(38px, 6vw, 58px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0 0 12px;
}
.column-band-logotype em {
    font-style: italic;
    font-weight: 500;
}
.column-band-tagline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.5;
    color: var(--ink-2);
    font-style: italic;
    margin: 0 auto 28px;
    max-width: 44ch;
    letter-spacing: 0.005em;
}
/* Typographic ornament — line · diamond · line. Same vocabulary as
   .column-masthead-rule on the column-home page. Visual signature
   that ties the band to the column's front-cover masthead. */
.column-band-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 32px;
    max-width: 180px;
}
.column-band-rule-line {
    flex: 1;
    height: 1px;
    background: var(--ink);
    opacity: 0.45;
}
.column-band-rule-mark {
    width: 6px;
    height: 6px;
    background: var(--red);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* Latest-issue preview row inside the band. Editorial layout: small
   framed square cover on the left, mono meta + serif title + sans
   dek + mono CTA on the right. The whole row is one anchor; the
   inner CTA visually labels the action. */
.column-band-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    padding: 28px 0 12px;
    border-top: 1px solid rgba(15, 14, 13, 0.10);
    transition: opacity 0.18s var(--ease-out);
}
@media (min-width: 600px) {
    .column-band-preview {
        grid-template-columns: 140px 1fr;
        gap: 28px;
        align-items: start;
    }
}
.column-band-preview:hover .column-band-preview-title { color: var(--red); }
.column-band-preview:hover .column-band-preview-cover-img { transform: scale(1.03); }
.column-band-preview:hover .column-band-preview-cta {
    border-bottom-color: var(--red);
}
.column-band-preview-cover {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--ink);
    background: var(--wall-2);
    max-width: 140px;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 600px) {
    .column-band-preview-cover { margin: 0; }
}
.column-band-preview-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-out);
}
.column-band-preview-body {
    display: flex;
    flex-direction: column;
}
.column-band-preview-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 0 8px;
    flex-wrap: wrap;
}
.column-band-preview-num {
    color: var(--red);
    font-weight: 700;
}
.column-band-preview-sep { color: var(--rule-2); }
.column-band-preview-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 10px;
    transition: color 0.15s ease;
}
.column-band-preview-dek {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.column-band-preview-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    align-self: start;
    transition: border-color 0.15s ease;
}

/* Bottom rule of the band + centered "Visit the column →" CTA.
   Sits on a slightly lighter strip so the section closes elegantly. */
.column-band-foot {
    margin: 32px -36px 0;
    padding: 18px 36px 0;
    border-top: 1px solid rgba(15, 14, 13, 0.10);
    text-align: center;
}
@media (min-width: 720px) {
    .column-band-foot { margin: 36px -48px 0; padding: 22px 48px 0; }
}
.column-band-all {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rule-2);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.column-band-all:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Column rail [legacy] ─────────────────────────────────────────
   Superseded by .column-band above (the slim rail proved too subtle
   — operator could not detect it from the journal). Kept defined so
   any in-flight cached page doesn't break. */
.column-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    margin: 0 0 56px;
    padding: 18px 0 20px;
    border-top: 1px solid var(--red-line);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s var(--ease-out);
}
@media (min-width: 760px) {
    .column-rail {
        grid-template-columns: auto 1fr auto;
        gap: 28px;
    }
}
.column-rail:hover {
    border-top-color: var(--red);
    border-bottom-color: var(--rule-2);
}
.column-rail:hover .column-rail-cta {
    border-bottom-color: var(--red);
}
.column-rail:hover .column-rail-cta-arrow {
    transform: translateX(3px);
}
.column-rail-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.column-rail-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    display: inline-block;
    flex: 0 0 auto;
}
.column-rail-tagline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
    letter-spacing: 0.002em;
}
.column-rail-tagline em {
    font-style: italic;
    color: var(--ink);
    font-weight: 600;
}
.column-rail-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--red-line);
    transition: border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    justify-self: start;
}
@media (min-width: 760px) {
    .column-rail-cta { justify-self: end; }
}
.column-rail-cta-arrow {
    transition: transform 0.18s var(--ease-out);
    display: inline-block;
}

/* ── Featured column hero · The Sunday Submission [legacy] ────────
   Older oversized hero replaced by .column-rail above; kept defined
   only so any cached page or in-flight render doesn't break.
   Renders above the regular card grid on the /blog index page. The
   hero is a wide editorial band: monospace masthead, italic tagline,
   then a full-bleed cover on the left and a Georgia serif title +
   dek + CTA on the right. Mobile collapses to stack: cover on top,
   text below. */
.featured-column {
    margin: 0 0 64px;
    padding: 36px 0 0;
    border-top: 3px solid var(--red);
    background:
        linear-gradient(180deg, #FFFEFB 0%, var(--wall) 100%);
}
.featured-column-head {
    padding: 0 36px 24px;
    border-bottom: 1px solid var(--rule);
}
.featured-column-eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.featured-column-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex: 0 0 auto;
}
.featured-column-sep { color: var(--ink-3); margin: 0 2px; font-weight: 400; }
.featured-column-tagline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-2);
    font-style: italic;
    margin: 0;
    letter-spacing: 0.005em;
}
.featured-issue {
    padding: 0;
}
.featured-issue-link {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.18s var(--ease-out);
}
@media (min-width: 860px) {
    .featured-issue-link {
        grid-template-columns: 1.05fr 1fr;
        gap: 0;
    }
}
.featured-issue:hover .featured-issue-cover-img {
    transform: scale(1.015);
}
.featured-issue:hover .featured-issue-title {
    color: var(--red);
}
.featured-issue-cover {
    aspect-ratio: 4 / 3;
    background: var(--wall-2);
    overflow: hidden;
}
@media (min-width: 860px) {
    .featured-issue-cover { aspect-ratio: auto; min-height: 380px; }
}
.featured-issue-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-out);
}
.featured-issue-body {
    padding: 32px 36px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 860px) {
    .featured-issue-body { padding: 36px 40px 40px; }
}
.featured-issue-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
}
.featured-issue-num {
    color: var(--red);
    font-weight: 700;
    letter-spacing: 0.16em;
}
.featured-issue-sep { color: var(--rule-2); }
.featured-issue-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 18px;
    transition: color 0.15s ease;
}
.featured-issue-dek {
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 24px;
    /* Clamp to ~4 lines so a long summary doesn't unbalance the band */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-issue-cta {
    margin: 0;
}
.featured-issue-cta-button {
    display: inline-block;
    background: var(--ink);
    color: #FFFEFB;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 13px 24px;
    text-decoration: none;
    transition: background 0.18s var(--ease-out);
}
.featured-issue:hover .featured-issue-cta-button {
    background: var(--red);
}
.featured-column-foot {
    border-top: 1px solid var(--rule);
    padding: 20px 36px 24px;
    background: rgba(255, 254, 251, 0.6);
}
.featured-column-all {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--red-line);
    padding-bottom: 2px;
    transition: border-color 0.15s ease;
}
.featured-column-all:hover { border-bottom-color: var(--red); }

/* Section label between the featured column hero and the regular
   grid below — visually thin so it doesn't compete with either. */
.journal-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}

/* Small column badge inside a journal-card meta line — shown on a
   Sunday Submission card whenever it appears in the regular grid
   (tag-filtered pages or future views). Reads as a chip in front of
   the date so the card stands out at a glance. */
.journal-card-column-badge {
    color: var(--red);
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* ── Sunday Submission column archive ─────────────────────────────
   The /blog/tag/sunday-submission/ landing — the column's own front
   cover. Distinct from the regular journal index: no 3-up card grid,
   instead a manifesto + chronological numbered issue list. Each
   issue is a wide row with cover-left / text-right. */
/* ── Column home masthead — /blog/tag/sunday-submission/ ──────────
   The Sunday Submission's own front cover. Editorial register, NOT
   a tag-archive header: italic logotype title, typographic ornament
   rule between deck and lede, drop cap on the lede first letter,
   generous breathing room. Premium magazine masthead. */
.column-masthead {
    margin: 0 0 64px;
    padding: 56px 0 44px;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    text-align: center;
}
.column-masthead-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 700;
    margin: 0 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.column-masthead-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    flex: 0 0 auto;
}
.column-masthead-sep { color: var(--ink-3); margin: 0 4px; font-weight: 400; }
.column-masthead-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(42px, 6.5vw, 76px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0 0 14px;
    max-width: none;
}
.column-masthead-title em {
    font-style: italic;
    font-weight: 500;
}
.column-masthead-deck {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(15.5px, 1.5vw, 17px);
    line-height: 1.55;
    color: var(--ink-2);
    font-style: italic;
    margin: 0 auto 32px;
    max-width: 46ch;
    letter-spacing: 0.005em;
}
/* Typographic ornament between deck and lede: short rule · diamond
   mark · short rule. No images, pure CSS. Reads as a magazine
   section divider. */
.column-masthead-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 36px;
    max-width: 200px;
}
.column-masthead-rule-line {
    flex: 1;
    height: 1px;
    background: var(--ink);
    opacity: 0.5;
}
.column-masthead-rule-mark {
    width: 6px;
    height: 6px;
    background: var(--red);
    transform: rotate(45deg);
    flex: 0 0 auto;
}
.column-masthead-lede {
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.78;
    color: var(--ink-2);
    margin: 0 auto 36px;
    max-width: 58ch;
    text-align: left;
}
.column-masthead-lede em {
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
}
/* Drop cap on the manifesto lede — premium magazine signal.
   Georgia serif, brick-red, large, floated left. */
.column-masthead-lede::first-letter {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(58px, 6vw, 72px);
    line-height: 0.85;
    float: left;
    margin: 6px 12px -2px 0;
    color: var(--red);
    font-weight: 600;
    font-style: normal;
}
.column-masthead-meta {
    margin: 0;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.column-masthead-meta-sep {
    color: var(--rule-2);
    font-size: 11px;
}
.column-masthead-backlink,
.column-masthead-rss {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.column-masthead-backlink:hover,
.column-masthead-rss:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

.column-issue-list {
    list-style: none;
    padding: 0;
    margin: 0 0 64px;
}
.column-issue {
    border-bottom: 1px solid var(--rule);
    padding: 32px 0;
}
.column-issue:first-child { padding-top: 8px; }
.column-issue-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-decoration: none;
    color: inherit;
    align-items: start;
}
@media (min-width: 720px) {
    .column-issue-link {
        grid-template-columns: 220px 1fr;
        gap: 36px;
    }
}
.column-issue-cover {
    aspect-ratio: 4 / 3;
    background: var(--wall-2);
    overflow: hidden;
    border: 1px solid var(--rule);
}
.column-issue-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-out);
}
.column-issue-cover-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--wall-2) 0%, var(--wall-3) 100%);
}
.column-issue:hover .column-issue-cover-img { transform: scale(1.02); }
.column-issue:hover .column-issue-title { color: var(--red); }
.column-issue-body {
    display: flex;
    flex-direction: column;
}
.column-issue-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.column-issue-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex: 0 0 auto;
}
.column-issue-eyebrow time {
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: 0.12em;
}
.column-issue-sep { color: var(--rule-2); font-weight: 400; }
.column-issue-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 14px;
    transition: color 0.15s ease;
}
.column-issue-summary {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.column-issue-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin: 0;
}

.journal-empty {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--ink-3);
    text-align: center;
    padding: 56px 0;
    font-style: italic;
}

/* ── Tag cloud ── */
.journal-tags {
    border-top: 1px solid var(--rule);
    padding-top: 32px;
    margin-top: 48px;
}
.journal-tags-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
}
.journal-tag-cloud {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.journal-tag-cloud a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    padding: 4px 12px;
    border-radius: 100px;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.journal-tag-cloud a:hover {
    color: var(--red);
    border-color: var(--red);
}
.journal-tag-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}

/* ── Post page ── */
.journal-post {
    max-width: 680px;
    margin: 56px auto 96px;
    padding: 0 24px;
    color: var(--ink);
}
.journal-post-head {
    margin: 0 0 48px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
}
.journal-post-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.journal-post-eyebrow a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.journal-post-eyebrow a:hover { border-bottom-color: var(--red); }
.journal-post-title {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 18px;
}
.journal-post-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.journal-post-meta-sep { color: var(--rule-2); }
.journal-post-author { color: var(--ink-2); }
.journal-post-updated { color: var(--ink-3); font-style: italic; }
.journal-post-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.journal-post-tags li a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.15s ease;
}
.journal-post-tags li a:hover { color: var(--red); }

/* ── Post-page cover photograph ──
   Full-width hero between the header and the prose body. The
   prose column is 680px max; the cover breaks out a little wider
   (up to 880px) so the photograph carries visual weight without
   dominating the page. Caption sits in the same mono register as
   the meta line — quiet, attribution-style. */
.journal-post-cover {
    margin: 0 0 36px;
    /* Negative inline margins on wide viewports to break out of the
       680px prose column. CSS clamp keeps it responsive: at small
       widths (mobile), the negative margin reduces to 0; at desktop
       widths, the cover extends about 100px on each side. */
    margin-left: clamp(-100px, calc((100% - 680px) * -0.5), 0px);
    margin-right: clamp(-100px, calc((100% - 680px) * -0.5), 0px);
    border-radius: 4px;
    overflow: hidden;
    background: var(--wall);
    box-shadow: var(--card-shadow);
}
.journal-post-cover-img {
    display: block;
    width: 100%;
    height: auto;
    /* Soft contrast cap — most editorial covers benefit from a
       gentle saturation pullback against the page's wall surface,
       and this is preferable to baking it into every JPEG. */
    filter: saturate(0.97);
}
.journal-post-cover-caption {
    margin: 0;
    padding: 12px 18px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
    font-style: italic;
    border-top: 1px solid var(--rule);
    background: var(--card-surface);
}
@media (max-width: 640px) {
    .journal-post-cover {
        margin-left: -18px;
        margin-right: -18px;
        border-radius: 0;
    }
    .journal-post-cover-caption {
        font-size: 12.5px;
        padding: 10px 18px 12px;
    }
}

/* ── The actual prose body ── */
.journal-post-body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
}
.journal-post-body > p {
    margin: 0 0 22px;
    max-width: 60ch;
}
/* Override the global `em { color: var(--red) }` rule the rest of
   the site uses as an editorial accent. In a long-form post body em
   appears too often (proper italics for titles, pull-quotes,
   emphasis) to get the same red treatment without the page feeling
   shouted-at. Inherit the body ink colour, italic style only. */
.journal-post-body em { font-style: italic; color: inherit; }
.journal-post-body strong { font-weight: 600; color: var(--ink); }
.journal-post-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--red);
    text-decoration: none;
    transition: color 0.15s ease;
}
.journal-post-body a:hover { color: var(--red); }
.journal-post-body h2 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
    margin: 44px 0 16px;
}
.journal-post-body h3 {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 32px 0 12px;
}
.journal-post-body ul, .journal-post-body ol {
    padding-left: 24px;
    margin: 0 0 24px;
    max-width: 56ch;
}
.journal-post-body li {
    margin: 0 0 8px;
    line-height: 1.65;
}
.journal-post-body blockquote {
    margin: 28px 0;
    padding: 0 0 0 22px;
    border-left: 3px solid var(--red);
    font-family: var(--font-sans);
    font-style: italic;
    color: var(--ink-2);
    max-width: 56ch;
}
.journal-post-body hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 36px 0;
}
.journal-post-body code {
    font-family: var(--font-mono);
    font-size: 14.5px;
    background: var(--wall);
    padding: 1px 6px;
    border-radius: 2px;
}
.journal-post-body pre {
    background: var(--wall);
    padding: 16px 18px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 13.5px;
    line-height: 1.55;
}
.journal-post-body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* ── Soft CTA at the post tail ── */
.journal-post-cta {
    margin: 56px 0 0;
    padding: 24px 26px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.journal-post-cta-lede {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 16px;
    max-width: 60ch;
}
.journal-post-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin: 0;
}
.journal-post-cta-back {
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}
.journal-post-cta-back:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Related posts ── */
.journal-related {
    margin: 56px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
}
.journal-related-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 18px;
}
.journal-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.journal-related-list li {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
}
.journal-related-list li:first-child { border-top: none; }
.journal-related-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s ease;
}
.journal-related-item-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.15s ease;
}
.journal-related-list a:hover .journal-related-item-title { color: var(--red); }
.journal-related-item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .journal { margin: 32px auto 64px; padding: 0 18px; }
    .journal-post { margin: 32px auto 64px; padding: 0 18px; }
    .journal-post-body { font-size: 16px; }
    .journal-post-body > p { font-size: 16px; }
    .journal-entry-summary { font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════════════
   Sequence 2 — homepage tier-aware presentation system

   Hero, judge-showcase, hunter-tease and final-CTA variants for the
   four-register grammar. Components consume the existing --reg-*
   tokens; this block adds the tier-specific selectors that paid
   viewers see on /. The Atelier register goes harder than Studio:
   the room is theirs, every surface dressed.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Hero variants ──────────────────────────────────────────── */

.hero-name {
    /* The greeting accent — italic + accent ink. Under .viewer-
       atelier the accent resolves to --frame (calmer); under
       .viewer-studio it stays --red. The italic carries the
       /account "Reception" mood: the room is naming the reader. */
    font-style: italic;
    color: var(--reg-accent);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.hero-eyebrow-atelier,
.hero-eyebrow-studio {
    color: var(--reg-accent);
    letter-spacing: var(--reg-eyebrow-letter);
    text-transform: uppercase;
}

.hero-atelier {
    /* Atelier hero — domestic register breathing. Section spacing
       lifts via --reg-section-spacing-lg. The hero-sub adopts the
       longer leading from --reg-lede-leading. No marketing chrome
       at all in here. */
    padding-top: clamp(40px, 6vh, 80px);
    padding-bottom: clamp(40px, 6vh, 80px);
}

.hero-title-atelier {
    /* Slightly tighter than the marketing hero — observational
       greeting, not a declarative sales line. Inherits .hero-title
       size; we just tighten the leading. */
    line-height: 1.05;
}

.hero-sub-atelier {
    line-height: var(--reg-lede-leading);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.hero-studio {
    padding-top: clamp(36px, 5vh, 72px);
    padding-bottom: clamp(36px, 5vh, 72px);
}

/* ─── Judge-showcase eyebrow tier variants ──────────────────── */

.judge-showcase-eyebrow-atelier,
.judge-showcase-eyebrow-studio {
    color: var(--reg-accent);
    letter-spacing: var(--reg-eyebrow-letter);
}

.judge-showcase-honest-paid {
    /* The "this is what's running for you" line under the feature
       cards. Drops the marketing weight (no <strong> emphasis)
       and reads as observation. */
    color: var(--ink-3);
    font-style: italic;
    font-weight: 400;
}

/* ─── (Photo-overlay feature-card variants from Sequence 2 were
       removed in Sequence 3 in favour of the editorial .feature-card
       grammar at the bottom of this file. The Atelier + Studio
       showcases now render as product-fragment cards rather than
       photo-overlay cards — see .feature-card / .feature-card-atelier
       / .feature-card-studio below.) */

/* ─── Hunter tab tier-aware tease ───────────────────────────── */

.add-contest-tease-atelier,
.add-contest-tease-studio {
    /* The "what's running for you" panel — observation, not
       upsell. Warmer paper signals "you're inside the room".
       The list-item bullet uses the register accent dot rather
       than the lock-star marker that the upsell variant uses. */
    background: var(--reg-card-paper);
    border-color: var(--rule-soft);
}

.add-contest-tease-atelier .add-contest-tease-label,
.add-contest-tease-studio .add-contest-tease-label {
    color: var(--reg-accent);
    letter-spacing: var(--reg-eyebrow-letter);
}

.add-contest-tease-atelier .add-contest-tease-list,
.add-contest-tease-studio .add-contest-tease-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 16px;
}

.add-contest-tease-atelier .add-contest-tease-list li,
.add-contest-tease-studio .add-contest-tease-list li {
    position: relative;
    padding: 8px 0 8px 22px;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.add-contest-tease-atelier .add-contest-tease-list li:last-child,
.add-contest-tease-studio .add-contest-tease-list li:last-child {
    border-bottom: none;
}

.add-contest-tease-atelier .add-contest-tease-list li::before,
.add-contest-tease-studio .add-contest-tease-list li::before {
    content: '·';
    position: absolute;
    left: 6px;
    top: 6px;
    color: var(--reg-accent);
    font-weight: 700;
    font-size: 18px;
}

.add-contest-tease-atelier .add-contest-tease-list li strong,
.add-contest-tease-studio .add-contest-tease-list li strong {
    color: var(--ink);
    font-weight: 600;
}

/* ─── Final-CTA Studio variant ──────────────────────────────── */

.cta-box-studio {
    /* Editorial register — drop the marketing chrome. The Studio
       reader doesn't need a "ready to see where your photos land"
       sales prompt; they're already inside the relationship. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--frame) 96%, var(--wall)) 0%,
        var(--frame) 100%);
}

.cta-box-studio h2 {
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ─── Mobile overrides ──────────────────────────────────────── */

@media (max-width: 640px) {
    .hero-title-atelier { font-size: 36px; }
}


/* ════════════════════════════════════════════════════════════════════
   Photographic feature-card grammar — Sequence 3 redesign

   Each Atelier + Studio showcase card is now a real photograph with
   one physical artifact placed on it (editorial coaching pill,
   archival metadata tabs, triptych verdict band, printed brief
   sheet, editorial deadline pill on the Atelier side; notification
   chips, bookmark ribbons, sticky-note jury read, narrative chips,
   fast-lane stamp on the Studio side).

   Visual register: the Curator's Proofing Station structure dressed
   in Projected Atelier warm light. The brand voice "the room reads
   photographs" rendered as actual photographs being read.

   Card anatomy:
     .feature-card-photo            outer article
     .feature-card-photo-frame      1:1 photo container, overflow:hidden
       <img>                        the photograph (Ken-Burns on hover)
       .feature-card-photo-vignette readability scrim
       (per-card artifact overlay)  positioned absolutely inside the frame
     .feature-card-photo-caption    eyebrow + title block below the photo
     .feature-card-link             "see your last X" anchor at the bottom

   ════════════════════════════════════════════════════════════════════ */

.feature-card-photo {
    /* Override the editorial-text-card padding/min-height defaults
       from the .feature-card base — photographic cards have their
       own anatomy. */
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

/* Kill the register-accent left stripe on photographic cards —
   the photograph is the canvas, no extra chrome competes with it. */
.feature-card-photo::before { display: none !important; }

.feature-card-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;  /* iteration 8: was 1/1. Operator's note:
                            "the photos are taking so much space like
                            its special display for my photos." 3:2
                            (classic 35mm) reads as feature-card cover
                            image, not portfolio frame — cuts ~33%
                            more height vs the prior square. */
    background: var(--ink);
    overflow: hidden;
}

.feature-card-photo-frame > picture,
.feature-card-photo-frame > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-card-photo-frame > picture img {
    transition: transform 1.4s var(--ease-premium);
}

.feature-card-photo:hover .feature-card-photo-frame > picture img {
    transform: scale(1.04);
}

/* Vignette scrim — softer at top, deeper at bottom so the bottom-
   anchored artifacts and any caption-edge elements remain readable. */
.feature-card-photo-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(15, 14, 13, 0.20) 0%,
            rgba(15, 14, 13, 0)    20%,
            rgba(15, 14, 13, 0)    55%,
            rgba(15, 14, 13, 0.50) 100%);
    pointer-events: none;
    z-index: 1;
}

.feature-card-photo-caption {
    padding: 16px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--reg-card-paper);
}

.feature-card-photo-caption .feature-card-eyebrow {
    /* Keep the existing eyebrow style — mono-cap, accent-coloured
       pulse-dot, register tracking. */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: var(--reg-eyebrow-letter);
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.feature-card-photo-caption .feature-card-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.feature-card-photo .feature-card-link {
    margin: 10px 18px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
}


/* ─────────── 1. Atelier · COACHING — camera autofocus animation ───────────
   Iteration 6. Operator's brief: when the cursor lands on the photo
   a viewfinder appears, the photograph defocuses then refocuses
   like a real camera autofocusing, the shutter fires (white flash),
   and the captured score-lift readout resolves in the lower-right
   corner of the frame. ~2s sequence, all-CSS keyframes triggered
   by :hover on the parent card.

   Photographic-process metaphor — opens the row's spirit. The
   cards downstream carry it through (eligibility = inspector
   reading the negative; triangulated = light meter triangulation;
   memo = critic placing a brief on the print; alert = aperture
   closing as the deadline runs out). */

/* The viewfinder SVG overlay — 4 L-corners, rule-of-thirds grid,
   center reticle. Fades in when hover begins, sits there through
   the autofocus sequence, fades out with the rest. */
.camera-focus {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
}

.feature-card-photo:hover .camera-focus,
.feature-card-photo:focus-within .camera-focus {
    opacity: 1;
}

.camera-focus-corner {
    fill: none;
    stroke: rgba(245, 244, 240, 0.96);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(15, 14, 13, 0.55));
}

.camera-focus-grid-line {
    stroke: rgba(245, 244, 240, 0.32);
    stroke-width: 0.35;
    stroke-dasharray: 1.6 1.6;
}

.camera-focus-reticle {
    stroke: rgba(245, 244, 240, 0.88);
    stroke-width: 0.55;
    fill: none;
    filter: drop-shadow(0 1px 2px rgba(15, 14, 13, 0.5));
}

/* The photo itself blurs and refocuses on hover — the autofocus
   beat that's the heart of this artifact. 2s keyframe: the lens
   races slightly past sharp, settles back, then locks. Subtle
   Ken-Burns scale ramp runs alongside. */
.feature-card-coaching:hover .feature-card-photo-frame > picture > img,
.feature-card-coaching:focus-within .feature-card-photo-frame > picture > img {
    animation: camera-focus-blur 2s var(--ease-in-out) forwards;
}

@keyframes camera-focus-blur {
    0%   { filter: blur(0);   transform: scale(1); }
    20%  { filter: blur(7px); transform: scale(1.012); }
    55%  { filter: blur(7px); transform: scale(1.022); }
    80%  { filter: blur(0);   transform: scale(1.04); }
    100% { filter: blur(0);   transform: scale(1.05); }
}

/* Shutter flash — quick white pulse at t≈80% to mark the capture.
   Brief but bright, then immediately gone — the way a real shutter
   does it. */
.camera-focus-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
    z-index: 4;
}

.feature-card-coaching:hover .camera-focus-flash,
.feature-card-coaching:focus-within .camera-focus-flash {
    animation: camera-focus-flash 2s var(--ease-in-out) forwards;
}

@keyframes camera-focus-flash {
    0%, 76% { background: rgba(255, 255, 255, 0); }
    82%     { background: rgba(255, 255, 255, 0.6); }
    90%     { background: rgba(255, 255, 255, 0); }
    100%    { background: rgba(255, 255, 255, 0); }
}

/* Captured readout — same mono-cap pill grammar as alert-tag for
   row consistency, but green dot (= captured/successful) instead of
   red (= deadline). Resolves into place after the flash. */
.camera-focus-readout {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(15, 14, 13, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(245, 244, 240, 0.94);
    padding: 5px 10px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}

.feature-card-coaching:hover .camera-focus-readout,
.feature-card-coaching:focus-within .camera-focus-readout {
    animation: camera-focus-readout-in 2s var(--ease-in-out) forwards;
}

@keyframes camera-focus-readout-in {
    0%, 80% { opacity: 0; transform: scale(0.92); }
    88%     { opacity: 1; transform: scale(1.05); }
    100%    { opacity: 1; transform: scale(1); }
}

.camera-focus-readout-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4caf7a;   /* green = captured/successful */
    box-shadow: 0 0 0 2px rgba(76, 175, 122, 0.28);
}


/* ─────────── 2. Atelier · ELIGIBILITY — archival metadata tabs ─────────── */

.elig-tab {
    position: absolute;
    z-index: 3;
    background: var(--wall);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    box-shadow:
        0 2px 5px rgba(15, 14, 13, 0.35),
        0 0 0 1px rgba(15, 14, 13, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s, transform 0.45s var(--ease-premium);
    will-change: transform, opacity;
}

.elig-tab em {
    font-style: normal;
    color: #1F6B3A;
    font-weight: 700;
    margin-left: 5px;
}

/* Tab transition-delays sync to the inspector-scanline's vertical
   position: top tabs (1,2) develop as the line crosses the top edge,
   mid tabs (3,4) at half-travel, bottom tab (5) at the end of the
   sweep. Total cinematic length: ~1.6s scanline + 0.45s tab settle. */
.elig-tab-1 { top: 14px; left: 14px; transform: translateY(-8px) rotate(-3deg); transition-delay: 0.10s; }
.elig-tab-2 { top: 14px; right: 14px; transform: translateY(-8px) rotate(2deg); transition-delay: 0.18s; }
.elig-tab-3 { top: 50%; left: 14px; transform: translateX(-8px) rotate(-1deg); transition-delay: 0.70s; }
.elig-tab-4 { top: 50%; right: 14px; transform: translateX(8px) rotate(1deg); transition-delay: 0.78s; }
.elig-tab-5 { bottom: 18px; left: 50%; transform: translateX(-50%) translateY(8px) rotate(-2deg); transition-delay: 1.30s; }

.feature-card-photo:hover .elig-tab,
.feature-card-photo:focus-within .elig-tab { opacity: 1; }

.feature-card-photo:hover .elig-tab-1 { transform: translateY(0) rotate(-3deg); }
.feature-card-photo:hover .elig-tab-2 { transform: translateY(0) rotate(2deg); }
.feature-card-photo:hover .elig-tab-3 { transform: translateX(0) rotate(-1deg); }
.feature-card-photo:hover .elig-tab-4 { transform: translateX(0) rotate(1deg); }
.feature-card-photo:hover .elig-tab-5 { transform: translateX(-50%) translateY(0) rotate(-2deg); }

/* Inspector scanline — thin bright bar sweeping the photograph
   top to bottom on hover. Contact-sheet inspection / film scanner
   metaphor. The bar is a 6px-tall light gradient that travels
   from above the frame down past the bottom over ~1.6s. */
.inspector-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.inspector-scanline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0)    0%,
        rgba(255, 244, 220, 0.25) 30%,
        rgba(255, 248, 230, 0.95) 50%,
        rgba(255, 244, 220, 0.25) 70%,
        rgba(255, 255, 255, 0)    100%);
    /* Subtle bloom so the line reads against bright skies / backgrounds. */
    box-shadow: 0 0 26px 8px rgba(255, 248, 230, 0.35);
    mix-blend-mode: screen;
    transform: translateY(-100%);
    opacity: 0;
    transition: opacity 0.25s var(--ease-out);
}

.feature-card-photo:hover .inspector-scanline::before,
.feature-card-photo:focus-within .inspector-scanline::before {
    animation: inspector-scanline-sweep 1.6s var(--ease-in-out) forwards;
    opacity: 1;
}

@keyframes inspector-scanline-sweep {
    0%   { transform: translateY(-100%); opacity: 0.0; }
    8%   { opacity: 0.95; }
    92%  { opacity: 0.95; }
    100% { transform: translateY(720%); opacity: 0; }
}


/* ─────────── 3. Atelier · TRIANGULATED — editorial triptych band ───────────
   Three slim labels at the top of the photograph (A · jury rubric,
   B · winner pattern, C · red team) with thin vertical lines that
   slice the photograph into a triptych on hover. A bottom-centre
   verdict pill confirms the convergent read. Reads as "three
   readings being applied to the same image" — photographic and
   editorial, not UI-graphic. */

.triptych {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.triptych-label {
    position: absolute;
    top: 16px;
    background: rgba(15, 14, 13, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(245, 244, 240, 0.92);
    padding: 5px 9px 5px 5px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.4);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s, transform 0.5s var(--ease-premium);
    white-space: nowrap;
}

.triptych-letter {
    background: var(--red);
    color: var(--wall);
    padding: 3px 6px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1;
}

.triptych-label-a { left: 12px; transition-delay: 0s; }
.triptych-label-b { left: 50%; transform: translateX(-50%) translateY(-8px); transition-delay: 0.15s; }
.triptych-label-c { right: 12px; transition-delay: 0.3s; }

.feature-card-photo:hover .triptych-label,
.feature-card-photo:focus-within .triptych-label {
    opacity: 1;
    transform: translateY(0);
}
.feature-card-photo:hover .triptych-label-b,
.feature-card-photo:focus-within .triptych-label-b {
    transform: translateX(-50%) translateY(0);
}

.triptych-line {
    position: absolute;
    top: 56px;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg,
        rgba(245, 244, 240, 0.55) 0%,
        rgba(245, 244, 240, 0.15) 80%,
        rgba(245, 244, 240, 0) 100%);
    transition: height 0.7s var(--ease-premium) 0.4s;
}
.triptych-line-1 { left: 33.33%; }
.triptych-line-2 { left: 66.66%; }

.feature-card-photo:hover .triptych-line,
.feature-card-photo:focus-within .triptych-line {
    height: calc(100% - 110px);
}

.triptych-verdict {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(31, 107, 58, 0.92);
    color: var(--wall);
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.45);
    opacity: 0;
    transition: opacity 0.45s var(--ease-out) 0.7s,
                transform 0.45s var(--ease-premium) 0.7s;
    white-space: nowrap;
}

.triptych-verdict-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(245, 244, 240, 0.92);
    box-shadow: 0 0 0 2px rgba(245, 244, 240, 0.25);
}

.feature-card-photo:hover .triptych-verdict,
.feature-card-photo:focus-within .triptych-verdict {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Lock-on reticle (iteration 7) — a small target reticle traverses
   the three label positions A → B → C, dwelling ~280ms on each
   ("target acquired" beat), then drops to the verdict-pill
   location where it expands and fades out. Photographic-process
   spirit (a light meter triangulating between three readings).
   Total duration synced with triptych reveal: ~1.8s. */
.triptych-reticle {
    position: absolute;
    top: 24px;
    left: 18%;
    width: 22px;
    height: 22px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.triptych-reticle svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.triptych-reticle-ring {
    fill: none;
    stroke: rgba(245, 244, 240, 0.95);
    stroke-width: 0.8;
    filter: drop-shadow(0 0 3px rgba(245, 244, 240, 0.55));
}

.triptych-reticle-tick {
    stroke: rgba(245, 244, 240, 0.95);
    stroke-width: 0.6;
    stroke-linecap: round;
}

.feature-card-photo:hover .triptych-reticle,
.feature-card-photo:focus-within .triptych-reticle {
    animation: triptych-reticle-traverse 1.85s var(--ease-in-out) forwards;
}

@keyframes triptych-reticle-traverse {
    0%   { left: 18%; top: 24px;              opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
    8%   { left: 18%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    25%  { left: 18%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    35%  { left: 50%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    50%  { left: 50%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    60%  { left: 82%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    75%  { left: 82%; top: 24px;              opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    88%  { left: 50%; top: calc(100% - 32px); opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { left: 50%; top: calc(100% - 32px); opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}


/* ─────────── 4. Atelier · MEMO — printed editorial brief ───────────
   A real one-page document laid on the photograph: serif title,
   horizontal rule, italic body excerpt in the same Times-school
   serif, and a handwritten-script signature ("— the critic"). The
   document looks like a real curator's brief — heavy paper, subtle
   shadow, slight rotation — not a tilted index card. */

/* WWAD pass (iteration 6): the brief was previously visible by
   default at rotate(-1.5deg), which covered the turtle's subject
   on every page-load. Operator's correction: like every other
   artifact in the row, the brief is hover-only — when the
   photographer lands on the photo, the critic places a memo on
   the print. Default state is tucked just below the frame edge,
   tilted slightly off-axis. On hover it slides up and rotates
   into its pinned position. */
.brief {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 38%;
    max-width: 178px;
    z-index: 3;
    background: linear-gradient(180deg, #FBF6E9 0%, #F1EAD6 100%);
    padding: 10px 12px 9px;
    box-shadow:
        0 14px 26px rgba(15, 14, 13, 0.55),
        0 3px 8px rgba(15, 14, 13, 0.3),
        inset 0 0 0 1px rgba(15, 14, 13, 0.04);
    opacity: 0;
    transform: rotate(-4deg) translateY(20px);
    transform-origin: bottom left;
    transition: opacity 0.55s var(--ease-out) 0.05s,
                transform 0.7s var(--ease-premium) 0.05s;
    pointer-events: none;
}

.brief-eyebrow {
    margin: 0 0 3px;
    font-family: var(--font-mono);
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.brief-title {
    margin: 0 0 5px;
    font-family: 'Times New Roman', Georgia, 'EB Garamond', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.012em;
    line-height: 1.05;
}

.brief-rule {
    display: block;
    height: 1px;
    background: var(--ink);
    opacity: 0.3;
    margin: 0 0 6px;
}

.brief-body {
    margin: 0 0 7px;
    font-family: 'Times New Roman', Georgia, 'EB Garamond', serif;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--ink-2);
    font-style: italic;
}

.brief-sig {
    margin: 0;
    font-family: 'Caveat', 'Apple Chancery', cursive, var(--font-sans);
    font-size: 13px;
    color: var(--ink-3);
    text-align: right;
    letter-spacing: 0;
    line-height: 1;
}

.feature-card-photo:hover .brief,
.feature-card-photo:focus-within .brief {
    opacity: 1;
    transform: rotate(-1.5deg) translateY(0);
}

/* Sequential reveal of brief contents (iteration 7) — after the
   brief itself slides into its pinned position, the children
   resolve in sequence: eyebrow → title → rule (draws across) →
   body → signature. The brief "writes itself" as if the critic
   is composing it in real time. Typewriter-spirit, not literal
   character-by-character (would feel gimmicky); each child fades
   up over 0.4s in a stepped sequence. Total: ~1.4s after the
   brief settles, ~2.1s end-to-end. */
.brief-eyebrow,
.brief-title,
.brief-body,
.brief-sig {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s var(--ease-out),
                transform 0.4s var(--ease-premium);
}

.brief-rule {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out),
                transform 0.55s var(--ease-premium);
}

.feature-card-photo:hover .brief-eyebrow,
.feature-card-photo:focus-within .brief-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.feature-card-photo:hover .brief-title,
.feature-card-photo:focus-within .brief-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.75s;
}

.feature-card-photo:hover .brief-rule,
.feature-card-photo:focus-within .brief-rule {
    opacity: 0.3;
    transform: scaleX(1);
    transition-delay: 0.95s;
}

.feature-card-photo:hover .brief-body,
.feature-card-photo:focus-within .brief-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.15s;
}

.feature-card-photo:hover .brief-sig,
.feature-card-photo:focus-within .brief-sig {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.45s;
}


/* ─────────── 5. Atelier · ALERT — editorial deadline pill ───────────
   Iteration 4. Operator's note: prior Caveat handwritten "D − 7"
   annotation was off-brand for the site's editorial register.
   Replaced with a mono-cap pill in the site's typography system —
   same shape as .coaching-tag, .discovery-chip, .triptych-label. A
   small red dot before the text signals urgency without graphic
   ornament. */

.alert-tag {
    position: absolute;
    top: 56px;       /* sits below the deadline-strip at top:14px */
    right: 14px;
    z-index: 3;
    background: rgba(15, 14, 13, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(245, 244, 240, 0.94);
    padding: 5px 10px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    transform: translateY(-6px);
    /* Drops in AFTER the 7 day-ticks finish filling (≈1.20s). */
    transition: opacity 0.5s var(--ease-out) 1.20s,
                transform 0.5s var(--ease-premium) 1.20s;
    pointer-events: none;
}

.alert-tag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px rgba(165, 62, 44, 0.25);
    animation: alert-tag-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes alert-tag-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(165, 62, 44, 0.25); }
    50%      { box-shadow: 0 0 0 4px rgba(165, 62, 44, 0.10); }
}

.feature-card-photo:hover .alert-tag,
.feature-card-photo:focus-within .alert-tag {
    opacity: 1;
    transform: translateY(0);
}

/* Day-tick countdown (iteration 7) — 7 small horizontal ticks
   above the alert pill. On hover the ticks fill red sequentially
   over ~1s (each tick = one of the 7 days remaining). After the
   7th tick fills, the alert pill drops in below. The film-strip
   / exposure-timeline metaphor: time being consumed, frame by
   frame. */
.deadline-strip {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 9px;
    background: rgba(15, 14, 13, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.4);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.45s var(--ease-out) 0.10s,
                transform 0.45s var(--ease-premium) 0.10s;
    pointer-events: none;
}

.deadline-strip-tick {
    width: 6px;
    height: 11px;
    background: rgba(245, 244, 240, 0.18);
    border-radius: 1px;
    transition: background 0.20s var(--ease-out);
}

.feature-card-photo:hover .deadline-strip,
.feature-card-photo:focus-within .deadline-strip {
    opacity: 1;
    transform: translateY(0);
}

.feature-card-photo:hover .deadline-strip-tick,
.feature-card-photo:focus-within .deadline-strip-tick {
    background: var(--red);
}

/* Stagger so the ticks "burn down" left → right over ~1s.
   Spread: 0.30s … 1.02s. Pill follows at 1.20s. */
.feature-card-photo:hover .deadline-strip-tick:nth-child(1),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(1) { transition-delay: 0.30s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(2),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(2) { transition-delay: 0.42s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(3),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(3) { transition-delay: 0.54s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(4),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(4) { transition-delay: 0.66s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(5),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(5) { transition-delay: 0.78s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(6),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(6) { transition-delay: 0.90s; }
.feature-card-photo:hover .deadline-strip-tick:nth-child(7),
.feature-card-photo:focus-within .deadline-strip-tick:nth-child(7) { transition-delay: 1.02s; }


/* ═══════════════════ STUDIO ARTIFACTS — cinematic photographic-process ═══════════════════
   Iteration 8 (operator: "now that I have studio, land page needs to
   be designed according to our new standards"). All 5 Studio artifacts
   rebuilt to match Atelier's cinematic level. Each card gets a
   sustained 1.4–1.8s sequence with a photographic-process metaphor:
     1. live-search    → discovery scanner (search radar sweep)
     2. saved-searches → bookmark ribbons affix one by one
     3. jury-reads     → loupe scan + sticky-note arrives
     4. brainstorm     → narrative cards stamp in with flash
     5. priority-queue → "RUSH" stamp slams in (impactful)
   All hover-only — operator's WWAD rule: subject visible by default,
   artifact reveals on read. */

/* ─────────── 1. Studio · LIVE SEARCH — discovery scanner ─────────── */

/* The scanner beam — a vertical light bar sweeps left-to-right
   across the photo on hover. As it passes each chip's horizontal
   position, the chip materializes. Search-radar metaphor. */
.discovery-scanbeam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.discovery-scanbeam::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 9%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0)    0%,
        rgba(255, 252, 235, 0.18) 30%,
        rgba(255, 252, 235, 0.85) 50%,
        rgba(255, 252, 235, 0.18) 70%,
        rgba(255, 255, 255, 0)    100%);
    box-shadow: 0 0 22px 6px rgba(255, 252, 235, 0.30);
    mix-blend-mode: screen;
    transform: translateX(-110%);
    opacity: 0;
}

.feature-card-photo:hover .discovery-scanbeam::before,
.feature-card-photo:focus-within .discovery-scanbeam::before {
    animation: discovery-scan 1.55s var(--ease-in-out) forwards;
}

@keyframes discovery-scan {
    0%   { transform: translateX(-110%); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(1100%); opacity: 0; }
}

.discovery-stack {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    pointer-events: none;
}

.discovery-chip {
    background: rgba(245, 244, 240, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateX(12px) scale(0.9);
    transition: opacity 0.35s var(--ease-out),
                transform 0.45s var(--ease-premium);
}

.discovery-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1F6B3A;
    box-shadow: 0 0 0 2px rgba(31, 107, 58, 0.18);
}

/* Each chip materializes as the scanner beam passes its position.
   Beam sweeps over ~1.55s; chips fire at ~0.45s, 0.85s, 1.20s. */
.feature-card-photo:hover .discovery-chip-1,
.feature-card-photo:focus-within .discovery-chip-1 { transition-delay: 0.45s; }
.feature-card-photo:hover .discovery-chip-2,
.feature-card-photo:focus-within .discovery-chip-2 { transition-delay: 0.85s; }
.feature-card-photo:hover .discovery-chip-3,
.feature-card-photo:focus-within .discovery-chip-3 { transition-delay: 1.20s; }

.feature-card-photo:hover .discovery-chip,
.feature-card-photo:focus-within .discovery-chip {
    opacity: 1;
    transform: translateX(0) scale(1);
}


/* ─────────── 2. Studio · SAVED — bookmark ribbons affix ─────────── */

/* Each bookmark slides in from off-frame-right as if being pinned to
   the photo's edge. Stagger creates an "affixing one by one" feel.
   Subject (Paris LV architecture) visible by default — bookmarks
   only appear on read. */
.bookmark-stack {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.bookmark {
    background: var(--red);
    color: var(--wall);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 14px 5px 16px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
    box-shadow: 0 4px 10px rgba(165, 62, 44, 0.35);
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.35s var(--ease-out),
                transform 0.55s var(--ease-premium);
    font-weight: 600;
}

.feature-card-photo:hover .bookmark-1,
.feature-card-photo:focus-within .bookmark-1 { transition-delay: 0.20s; }
.feature-card-photo:hover .bookmark-2,
.feature-card-photo:focus-within .bookmark-2 { transition-delay: 0.32s; }
.feature-card-photo:hover .bookmark-3,
.feature-card-photo:focus-within .bookmark-3 { transition-delay: 0.44s; }
.feature-card-photo:hover .bookmark-4,
.feature-card-photo:focus-within .bookmark-4 { transition-delay: 0.56s; }
.feature-card-photo:hover .bookmark-5,
.feature-card-photo:focus-within .bookmark-5 { transition-delay: 0.68s; }

.feature-card-photo:hover .bookmark,
.feature-card-photo:focus-within .bookmark {
    opacity: 1;
    transform: translateX(-6px);
}


/* ─────────── 3. Studio · JURY READS — loupe scan + sticky note ─────────── */

/* Loupe SVG scans across the photo before the sticky-note arrives.
   Critical WWAD fix: the prior jury-note was visible by default,
   covering the Lyon basilica subject. Now hover-only — subject
   preserved at scroll-by; the critic places the read on hover. */
.jury-loupe {
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}

.jury-loupe-ring {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(245, 244, 240, 0.95);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 6px rgba(245, 244, 240, 0.45));
}

.jury-loupe-handle {
    stroke: rgba(245, 244, 240, 0.85);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.feature-card-photo:hover .jury-loupe,
.feature-card-photo:focus-within .jury-loupe {
    animation: jury-loupe-scan 1.7s var(--ease-in-out) forwards;
}

@keyframes jury-loupe-scan {
    0%   { left: -8%;   opacity: 0; }
    10%  { left: 12%;   opacity: 1; }
    55%  { left: 88%;   opacity: 1; }
    72%  { left: 105%;  opacity: 0; }
    100% { left: 105%;  opacity: 0; }
}

.jury-note {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    background: rgba(245, 244, 240, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 10px 12px 9px;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(15, 14, 13, 0.42);
    opacity: 0;
    transform: rotate(-3deg) translateY(20px);
    transform-origin: bottom left;
    transition: opacity 0.45s var(--ease-out) 0.95s,
                transform 0.6s var(--ease-premium) 0.95s;
    pointer-events: none;
}

.jury-note-comp {
    margin: 0 0 5px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.jury-note-quote {
    margin: 0 0 7px;
    font-style: italic;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ink-2);
}

.jury-note-chips {
    display: flex;
    gap: 4px;
}

.jury-note-chip {
    background: var(--wall-2);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
}

.feature-card-photo:hover .jury-note,
.feature-card-photo:focus-within .jury-note {
    opacity: 1;
    transform: rotate(-1deg) translateY(0);
}


/* ─────────── 4. Studio · BRAINSTORM — narrative stamps ─────────── */

/* Each narrative card stamps in with a brief scale-flash, like a
   contact-print being labelled. Stagger creates the "sequence
   coming together" feel. */
.narrative-stack {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 32px);
}

.narrative {
    background: rgba(245, 244, 240, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 5px 10px 5px 5px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(15, 14, 13, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-12px) scale(1.15);
}

.narrative-num {
    background: var(--red);
    color: var(--wall);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

.narrative-name {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.feature-card-photo:hover .narrative-1,
.feature-card-photo:focus-within .narrative-1 {
    animation: narrative-stamp 0.55s var(--ease-premium) 0.20s forwards;
}
.feature-card-photo:hover .narrative-2,
.feature-card-photo:focus-within .narrative-2 {
    animation: narrative-stamp 0.55s var(--ease-premium) 0.55s forwards;
}
.feature-card-photo:hover .narrative-3,
.feature-card-photo:focus-within .narrative-3 {
    animation: narrative-stamp 0.55s var(--ease-premium) 0.90s forwards;
}

@keyframes narrative-stamp {
    0%   { opacity: 0; transform: translateX(-12px) scale(1.15); }
    65%  { opacity: 1; transform: translateX(0)     scale(0.96); }
    100% { opacity: 1; transform: translateX(0)     scale(1.0); }
}


/* ─────────── 5. Studio · PRIORITY QUEUE — RUSH stamp slam ─────────── */

/* The flagship Studio cinematic move — a "RUSH 01" stamp slams in
   from oversized + transparent to actual size + opaque, with a
   rotation snap. Mimics a real rubber stamp being pressed into ink
   and onto paper. Brief shadow-pulse on impact. */
.priority-stamp {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    background: rgba(165, 62, 44, 0.95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--wall);
    padding: 11px 15px;
    border-radius: 3px;
    box-shadow: 0 8px 18px rgba(15, 14, 13, 0.45);
    text-align: center;
    border: 2px solid rgba(245, 244, 240, 0.88);
    pointer-events: none;
    opacity: 0;
    transform: rotate(8deg) scale(2.4);
}

.priority-stamp-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.priority-stamp-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 4px;
    font-weight: 500;
}

.feature-card-photo:hover .priority-stamp,
.feature-card-photo:focus-within .priority-stamp {
    animation: priority-stamp-slam 0.7s var(--ease-premium) 0.25s forwards;
}

@keyframes priority-stamp-slam {
    0%   { opacity: 0;    transform: rotate(8deg)  scale(2.4); }
    55%  { opacity: 1;    transform: rotate(-7deg) scale(0.85); box-shadow: 0 12px 28px rgba(165, 62, 44, 0.6); }
    75%  { opacity: 1;    transform: rotate(-3deg) scale(1.08); }
    100% { opacity: 1;    transform: rotate(-4deg) scale(1.0);  box-shadow: 0 8px 18px rgba(15, 14, 13, 0.45); }
}


/* ─────────── Reduced motion — honour OS preference ─────────── */

@media (prefers-reduced-motion: reduce) {
    .feature-card-photo .feature-card-photo-frame > picture img,
    .feature-card-photo:hover .feature-card-photo-frame > picture img,
    .feature-card-coaching:hover .feature-card-photo-frame > picture > img,
    .feature-card-coaching:focus-within .feature-card-photo-frame > picture > img {
        transition: none;
        transform: none;
        animation: none !important;
        filter: none !important;
    }
    /* Camera-focus: skip the cinematic, just show the readout. */
    .camera-focus { opacity: 1; }
    .camera-focus-flash { animation: none !important; background: rgba(255,255,255,0); }
    .camera-focus-readout {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .alert-tag,
    .elig-tab,
    .discovery-chip,
    .narrative,
    .triptych-label,
    .triptych-verdict,
    .brief,
    .brief-eyebrow,
    .brief-title,
    .brief-rule,
    .brief-body,
    .brief-sig,
    .deadline-strip,
    .deadline-strip-tick,
    .bookmark,
    .jury-note,
    .priority-stamp {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .alert-tag-dot {
        animation: none;
    }
    .deadline-strip-tick {
        background: var(--red) !important;
    }
    .triptych-label-b,
    .triptych-verdict {
        transform: translateX(-50%) !important;
    }
    .triptych-reticle,
    .discovery-scanbeam,
    .jury-loupe {
        animation: none !important;
        opacity: 0 !important;
    }
    .triptych-line {
        height: calc(100% - 110px) !important;
        transition: none !important;
    }
}


/* ─────────── Responsive — mobile overrides ─────────── */

@media (max-width: 760px) {
    .feature-card-photo .feature-card-photo-caption .feature-card-title {
        font-size: 15px;
    }
    .brief { width: 50%; padding: 11px 12px 9px; bottom: 14px; left: 14px; }
    .brief-title { font-size: 14px; }
    .brief-body { font-size: 10px; }
    .brief-sig { font-size: 13px; }
    .jury-note { padding: 9px 11px; bottom: 16px; left: 14px; right: 14px; }
    .jury-note-comp { font-size: 11px; }
    .jury-note-quote { font-size: 10.5px; }
    .priority-stamp { padding: 9px 12px; }
    .priority-stamp-num { font-size: 22px; }
    .priority-stamp-label { font-size: 8px; }
    .alert-tag { top: 12px; right: 12px; font-size: 9px; padding: 4px 8px; }
    .coaching-tag { bottom: 12px; left: 12px; font-size: 9px; padding: 4px 8px; }
    .triptych-label { font-size: 9px; padding: 4px 7px 4px 4px; gap: 5px; }
    .triptych-letter { font-size: 9.5px; padding: 2px 5px; }
    .triptych-verdict { font-size: 9px; padding: 4px 10px 4px 7px; bottom: 14px; }
    .narrative { padding: 4px 8px 4px 4px; }
    .narrative-name { font-size: 10.5px; }
    .narrative-num { font-size: 9px; padding: 2px 5px; }
    .bookmark { font-size: 9px; padding: 4px 11px 4px 13px; }
    .elig-tab { font-size: 9px; padding: 3px 7px; }
    .discovery-chip { font-size: 10px; padding: 4px 9px; }
}


/* ════════════════════════════════════════════════════════════════════
   Editorial feature-card family — Sequence 2 redesign

   A separate card grammar from .judge-photo-card (the photo-overlay
   verdict samples for the anonymous demo). These cards are for paid
   viewers' showcase: editorial product-fragment layouts that mirror
   the actual feature surfaces in the product (verdict-coach,
   eligibility-pill, triangulated synthesis, memo header, alert email
   preview, queue position display).

   No stock photos, no metaphor mismatches — each card looks like a
   peek at the real feature. Hover micro-animations carry the premium
   register. Status pulses signal "this is live for you." A "see it
   in your work" link at the bottom of every card lets the photographer
   reach the surface where the feature activates.

   Naming convention: .feature-card{,-atelier,-studio,-alert}, with
   sub-elements like .feature-card-headline / .feature-card-quote /
   .feature-card-bullets that describe the editorial shape rather
   than the feature.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────── Atelier showcase — section header (WWAD pass) ───────────
   Replaces the per-card "Atelier · X" eyebrows with a single confident
   header above the row. The cards then carry only the photograph + the
   artifact + a single-line title — Apple's pattern for a feature grid
   on a product page (one big section title, then let the cards speak).
   The eyebrow + pulse-dot ornament still lives on Studio cards; this
   override is local to the Atelier branch. */

.atelier-showcase-header {
    max-width: 1180px;
    margin: 36px auto 0;
    padding: 0 4px;
    text-align: center;
}

.atelier-showcase-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.atelier-showcase-sub {
    margin: 12px auto 0;
    max-width: 56ch;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-2);
    line-height: 1.45;
    letter-spacing: -0.005em;
}

/* The Atelier showcase grid runs slightly wider gutters than the
   default Studio grid — generous spacing reads as premium room. */
.feature-grid-atelier {
    gap: 30px;
    margin-top: 28px;
}

@media (max-width: 760px) {
    .atelier-showcase-header { margin-top: 28px; }
    .atelier-showcase-sub { font-size: 14.5px; padding: 0 12px; }
}


/* ─────────── Studio showcase — section header (WWAD parity, iter 8) ───────────
   Mirrors the Atelier treatment: per-card "Studio · X" eyebrows
   replaced by a single section header above the row. Studio reads
   slightly tighter than Atelier (working register, not contemplative)
   — same typography family, slightly less vertical breathing room. */

.studio-showcase-header {
    max-width: 1180px;
    margin: 36px auto 0;
    padding: 0 4px;
    text-align: center;
}

.studio-showcase-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.studio-showcase-sub {
    margin: 12px auto 0;
    max-width: 56ch;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-2);
    line-height: 1.45;
    letter-spacing: -0.005em;
}

.feature-grid-studio {
    gap: 26px;
    margin-top: 28px;
}

@media (max-width: 760px) {
    .studio-showcase-header { margin-top: 28px; }
    .studio-showcase-sub { font-size: 14.5px; padding: 0 12px; }
}


.feature-grid {
    /* 6-column grid so each card spans 2 cols (effectively a
       3-column row), and the two row-2 cards can offset to columns
       2–3 and 4–5 — centered with empty col 1 and col 6 framing
       the second row symmetrically. Five cards in 3+2 layout with
       no asymmetry. */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
    margin: 36px auto 24px;
    max-width: 1180px;
    padding: 0 4px;
}

.feature-grid > .feature-card { grid-column: span 2; }

.feature-grid > .feature-card:nth-child(4) { grid-column: 2 / span 2; }
.feature-grid > .feature-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 1024px) {
    /* Tablet: 2 cards per row. Cards 1–4 fill two rows of two; card
       5 lands alone in row 3, centered across both columns so the
       last card doesn't feel orphaned. */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .feature-grid > .feature-card { grid-column: span 1; }
    .feature-grid > .feature-card:nth-child(4) { grid-column: span 1; }
    .feature-grid > .feature-card:nth-child(5) {
        grid-column: 1 / span 2;
        max-width: calc(50% - 9px);
        justify-self: center;
    }
}

@media (max-width: 640px) {
    /* Mobile: single-column stack. All cards full width, all
       five visible — reading sequentially is more honest than
       truncating. */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .feature-grid > .feature-card,
    .feature-grid > .feature-card:nth-child(4),
    .feature-grid > .feature-card:nth-child(5) {
        grid-column: 1;
        max-width: 100%;
        justify-self: stretch;
    }
}

.feature-card {
    /* Editorial paper background that picks up the register paper
       token. Under .viewer-atelier the paper warms toward wall-2;
       under .viewer-studio it stays at wall. The frame is a thin
       rule, not a marketing border. */
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--reg-card-paper);
    border: 1px solid var(--rule);
    border-radius: var(--card-radius);
    padding: 22px 20px 16px;
    min-height: 360px;
    text-align: left;
    transition: var(--card-transition);
    overflow: hidden;
}

.feature-card::before {
    /* A 2px register-accent strip on the left edge, scaled from the
       top on hover. Reads as "this card is alive" without shouting. */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--reg-accent);
    opacity: 0.18;
    transition: opacity 0.32s var(--ease-premium);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--rule-2);
}

.feature-card:hover::before {
    opacity: 0.7;
}

.feature-card-atelier::before { background: var(--frame); }
.feature-card-studio::before  { background: var(--red); }


/* ─── Card head — eyebrow alone, no right-side element ───────
   The previous iteration tried to fit a tag/status pill on the
   right side of the eyebrow in a flex row. At narrow column
   widths the eyebrow wrapped and collided with the right-side
   pill. Solution: head is eyebrow-only; tag/status/deadline move
   into .feature-card-lead below as the body's signature element.
*/

.feature-card-head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    min-height: 18px;
}

.feature-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: var(--reg-eyebrow-letter);
    text-transform: uppercase;
    line-height: 1.2;
    /* The eyebrows are short ("Atelier · coaching", "Atelier ·
       eligibility", etc.) — under nowrap they fit at any
       reasonable card width without wrapping. */
    white-space: nowrap;
}


/* ─── Card lead — the body's signature element ───────────────
   Each card's signature visual lives here at the top of the body:
   the score-shift, the green status pill, the tally (3/3 etc.),
   the comp + recommendation, the deadline display. Underneath
   sits a small mono-cap caption that names the signal.
*/

.feature-card-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule-soft);
    min-height: 64px;
}

.feature-card-lead-caption {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Tally display — 3 / 3, 5 / 5, 27, 01 */
.feature-card-tally {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1;
}

.feature-card-tally-num {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    color: var(--reg-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

.feature-card-tally-of {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--ink-3);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Deadline display — D − 7 in the alert card lead */
.feature-card-deadline-display {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    color: var(--red);
    letter-spacing: -0.01em;
    line-height: 1;
}

.feature-card-deadline-dash {
    margin: 0 3px;
    font-weight: 400;
}

/* Lead variants — overrides when specific elements sit in the
   lead container */
.feature-card-lead .feature-card-status {
    /* The eligibility pill — slightly larger here than when it
       was in the head. */
    font-size: 12px;
    padding: 5px 11px;
    letter-spacing: 0.05em;
}

.feature-card-lead .feature-card-comp-name {
    /* HIPA 2026 — large, bold, the lead element of the memo card */
    margin: 0;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.feature-card-lead .feature-card-rec {
    margin-top: 2px;
}

.feature-card-pulse {
    /* Live-status dot — a small register-accent circle that breathes
       on a slow loop. Signals to the paid viewer that this feature
       is currently active for them. Honors prefers-reduced-motion. */
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reg-accent);
    flex-shrink: 0;
    animation: feature-card-pulse 2.4s var(--ease-in-out) infinite;
}

.feature-card-pulse-deadline {
    /* The tray-aware-alert pulse uses --red (deadlines are alarms)
       even under .viewer-atelier where --reg-accent is --frame. */
    background: var(--red);
}

@keyframes feature-card-pulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50%      { transform: scale(1.4); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card-pulse { animation: none; opacity: 0.7; }
}

/* (Earlier iteration had .feature-card-tag and .feature-card-deadline
   single-line variants that sat on the right side of the eyebrow in
   the head row. Removed — the head no longer has a right-side slot.
   Tag-style chips that survived in the body, like the brainstorm
   "3 portfolios proposed" caption, are now expressed via
   .feature-card-lead-caption.) */


/* ─── Status pill (Eligibility-style green pill) ─────────────── */

.feature-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
}

.feature-card-status-green {
    color: #1F6B3A;
    background: rgba(31, 107, 58, 0.10);
}

.feature-card-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1F6B3A;
    box-shadow: 0 0 0 2px rgba(31, 107, 58, 0.18);
}


/* ─── Card body — headline + supporting content ──────────────── */

.feature-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-card-headline {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.feature-card-quote {
    margin: 0;
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    border-left: 2px solid var(--rule);
    padding-left: 10px;
}


/* ─── List variants in the body — bullets / checks / passes / etc. */

.feature-card-bullets {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: feature-bullet;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-card-bullets li {
    counter-increment: feature-bullet;
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
}

.feature-card-bullets li::before {
    content: counter(feature-bullet);
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--reg-accent);
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    font-weight: 500;
    background: var(--wall);
}


/* Eligibility checks — key/value rows */
.feature-card-checks {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.feature-card-checks li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 12.5px;
    line-height: 1.4;
}

.feature-card-checks li:last-child { border-bottom: none; }

.feature-card-check-key {
    color: var(--ink-2);
    font-family: var(--font-sans);
}

.feature-card-check-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.feature-card-check-mark {
    color: #1F6B3A;
    font-weight: 600;
}


/* Triangulated passes — three pass labels in compact rows */
.feature-card-passes {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-card-passes li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--ink-2);
}

.feature-card-pass-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-weight: 600;
    min-width: 50px;
    flex-shrink: 0;
}

.feature-card-pass-name {
    font-family: var(--font-sans);
    color: var(--ink-3);
    font-style: italic;
}


/* Score-shift display — 78 → 91 lift visualization. Sized to
   match .feature-card-tally and .feature-card-deadline-display
   (38px) so the lead row reads at consistent visual weight
   across the five cards. */

.feature-card-shift {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    line-height: 1;
}

.feature-card-shift-from {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: -0.02em;
    line-height: 1;
}

.feature-card-shift-arrow {
    font-family: var(--font-mono);
    font-size: 26px;
    color: var(--reg-accent);
    font-weight: 400;
    line-height: 1;
    animation: feature-card-shift-arrow 4.5s var(--ease-in-out) infinite;
}

.feature-card-shift-to {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    color: var(--reg-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

@keyframes feature-card-shift-arrow {
    0%, 90%, 100% { transform: translateX(0); opacity: 0.7; }
    45%, 55%      { transform: translateX(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card-shift-arrow { animation: none; opacity: 1; }
}


/* Memo card — competition name + recommendation chip + section list */

.feature-card-comp-name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.feature-card-rec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    align-self: flex-start;
}

.feature-card-rec-enter {
    color: #1F6B3A;
    background: rgba(31, 107, 58, 0.10);
}

.feature-card-rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1F6B3A;
}

.feature-card-memo-sections {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-card-memo-sections li {
    position: relative;
    padding-left: 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2);
}

.feature-card-memo-sections li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--reg-accent);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    top: 1px;
}


/* Alert card — single-quote + attribution variant. Earlier
   iteration used a full email mockup with from/subject lines that
   broke awkwardly at narrow card widths (the angle-bracketed
   addr "<hello@winphoto.io>" wrapped across three lines and
   read like garbage). Replaced with: the agent's voice as a
   plain quote, attribution underneath. Same information, no
   layout fragility. */

.feature-card-email-attribution {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.4;
}


/* Discoveries (live search) — recent comp finds */

.feature-card-discoveries {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.feature-card-discoveries li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.feature-card-discoveries li:last-child { border-bottom: none; }

.feature-card-discovery-name {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.feature-card-discovery-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}


/* Saved-search rows */

.feature-card-saved {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.feature-card-saved li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.feature-card-saved li:last-child { border-bottom: none; }

.feature-card-saved-name {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
}

.feature-card-saved-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}


/* Tag chips (jury-read card) */

.feature-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.feature-card-chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    background: var(--wall);
    border: 1px solid var(--rule);
    padding: 3px 7px;
    border-radius: 3px;
}


/* Brainstorm portfolios — numbered narrative entries */

.feature-card-portfolios {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: feature-portfolio;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-card-portfolios li {
    counter-increment: feature-portfolio;
    position: relative;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.feature-card-portfolios li::before {
    content: counter(feature-portfolio, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--reg-accent);
    letter-spacing: 0.04em;
}

.feature-card-portfolio-name {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
    font-style: italic;
}

.feature-card-portfolio-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}


/* Priority queue — three rows, the user's row marked */

.feature-card-queue {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.feature-card-queue-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.feature-card-queue-row-you {
    background: rgba(165, 62, 44, 0.07);
    border: 1px solid var(--red-line);
}

.feature-card-queue-pos {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

.feature-card-queue-row-you .feature-card-queue-pos { color: var(--red); }

.feature-card-queue-name {
    font-family: var(--font-sans);
    color: var(--ink-2);
    line-height: 1.3;
}

.feature-card-queue-row-you .feature-card-queue-name { color: var(--ink); font-weight: 500; }

.feature-card-queue-eta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    text-align: right;
}

.feature-card-queue-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--ink-3);
    font-style: italic;
    line-height: 1.45;
}


/* ─── Card link — bottom "see it in your work" anchor ───────── */

.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--reg-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.18s var(--ease-out);
}

.feature-card-link:hover {
    color: var(--reg-accent);
    /* CSS variable inheritance — under .viewer-atelier the accent
       resolves to --frame and on hover we want it slightly darker;
       we use brightness() for a generic "lift on hover" effect. */
    filter: brightness(0.85);
}

.feature-card-link-arrow {
    display: inline-block;
    transition: transform 0.22s var(--ease-premium);
    font-size: 13px;
    line-height: 1;
}

.feature-card:hover .feature-card-link-arrow {
    transform: translateX(5px);
}


/* Mobile tweaks */
@media (max-width: 760px) {
    .feature-card { min-height: 0; padding: 18px 16px 14px; }
    .feature-card-headline { font-size: 15px; }
    .feature-card-shift-from,
    .feature-card-shift-to { font-size: 26px; }
    .feature-card-shift-arrow { font-size: 18px; }
}


/* ─────────────────────────────────────────────────────────────
   AI policy database — /ai-policy-2026
   Reference-grade table page in the journal voice. Editorial,
   restrained, two columns of meaning (position card + table).
   Mirrors journal-post type scale so it reads as a sibling of
   the journal even though it's mounted at the site root.
   ───────────────────────────────────────────────────────────── */
.ai-policy-page {
    max-width: 1080px;
    margin: 56px auto 96px;
    padding: 0 24px;
    color: var(--ink);
}
.ai-policy-masthead {
    margin: 0 0 56px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
}
.ai-policy-cover {
    margin: 0 0 36px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wall);
    box-shadow: var(--card-shadow);
}
.ai-policy-cover img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.97);
}
.ai-policy-page h1 {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 18px;
}
.ai-policy-lead {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 14px;
    max-width: 720px;
}
.ai-policy-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.ai-policy-meta a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.ai-policy-meta a:hover { border-bottom-color: var(--red); }

.ai-policy-page h2 {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 24px;
}

/* ── The four position cards ── */
.ai-policy-positions {
    margin: 0 0 64px;
}
.ai-policy-positions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.ai-policy-position {
    padding: 22px 22px 20px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    scroll-margin-top: 24px;
}
.ai-policy-position-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 8px;
}
.ai-policy-position h3 {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
    line-height: 1.3;
}
.ai-policy-position-summary {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.ai-policy-position-rules {
    margin: 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 14px;
    font-size: 13px;
    line-height: 1.5;
}
.ai-policy-position-rules dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ai-policy-position-rules dd {
    margin: 0;
    color: var(--ink-2);
}

/* ── The 22-row contest table ── */
.ai-policy-table-section {
    margin: 0 0 64px;
}
.ai-policy-table-note {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: -12px 0 20px;
    max-width: 720px;
}
.ai-policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.5;
}
.ai-policy-table thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--rule);
    font-weight: 500;
}
.ai-policy-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    color: var(--ink-2);
}
.ai-policy-table tbody tr:last-child td {
    border-bottom: none;
}
.ai-policy-cell-contest {
    color: var(--ink);
    font-weight: 500;
    min-width: 200px;
}
.ai-policy-cell-contest a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-bottom-color 0.15s ease;
}
.ai-policy-cell-contest a:hover { border-bottom-color: var(--red); color: var(--red); }
.ai-policy-cell-policy { max-width: 380px; }
.ai-policy-cell-source a {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--red);
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ai-policy-cell-source a:hover { text-decoration: underline; }
.ai-policy-unverified {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Position pills (in the table) — the four positions are coloured
   to read at a glance, but quietly. No screaming reds. */
.ai-policy-pos-pill {
    display: inline-block;
    padding: 3px 9px 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 99px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.15s ease;
}
.ai-policy-pos-pill-1 {
    background: rgba(165, 62, 44, 0.10);
    color: var(--red);
    border-color: rgba(165, 62, 44, 0.18);
}
.ai-policy-pos-pill-2 {
    background: rgba(15, 14, 13, 0.06);
    color: var(--ink);
    border-color: rgba(15, 14, 13, 0.12);
}
.ai-policy-pos-pill-3 {
    background: rgba(15, 14, 13, 0.04);
    color: var(--ink-2);
    border-color: rgba(15, 14, 13, 0.10);
}
.ai-policy-pos-pill-4 {
    background: rgba(15, 14, 13, 0.02);
    color: var(--ink-3);
    border-color: rgba(15, 14, 13, 0.08);
}
.ai-policy-pos-pill-unknown {
    color: var(--ink-3);
    font-style: italic;
}
.ai-policy-pos-pill:hover { filter: brightness(0.95); }

/* ── Methodology + CTA ── */
.ai-policy-methodology,
.ai-policy-cta {
    max-width: 720px;
    margin: 0 0 56px;
}
.ai-policy-methodology p,
.ai-policy-cta p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.ai-policy-methodology a,
.ai-policy-cta a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.ai-policy-methodology a:hover,
.ai-policy-cta a:hover { border-bottom-color: var(--red); }

/* The "subscribers get the full edition as a printable PDF" pointer
   sits at the tail of the methodology section. Set apart by a top
   border so the eye registers it as a distinct editorial note rather
   than another methodology paragraph. */
.ai-policy-yearbook-link {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink);
}

.ai-policy-cta {
    padding: 28px 28px 24px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}
.ai-policy-cta blockquote {
    margin: 0 0 16px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--red);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
}

@media (max-width: 760px) {
    .ai-policy-positions-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ai-policy-position { padding: 18px 16px 16px; }
    .ai-policy-position-rules {
        grid-template-columns: 80px 1fr;
        gap: 4px 10px;
    }
    .ai-policy-table thead {
        display: none;
    }
    .ai-policy-table,
    .ai-policy-table tbody,
    .ai-policy-table tr,
    .ai-policy-table td {
        display: block;
        width: 100%;
    }
    .ai-policy-table tbody tr {
        padding: 14px 0;
        border-bottom: 1px solid var(--rule);
    }
    .ai-policy-table tbody td {
        padding: 4px 0;
        border-bottom: none;
    }
    .ai-policy-cell-contest { font-size: 15px; margin-bottom: 4px; }
    .ai-policy-cell-policy { max-width: none; font-size: 14px; }
    .ai-policy-cta { padding: 20px 18px 18px; }
}

/* ═════ Public newsletter signup widget — _letters_signup.html ═════
   Embeddable on /blog, /blog/{slug}, /ai-policy-2026. Tokens from the
   journal-card aesthetic so the widget reads as part of the editorial
   surface, not a marketing intrusion. */

.letters-signup {
    margin: 56px 0 0;
    padding: 28px 30px 24px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: var(--card-radius);
    max-width: 640px;
}
/* Bonus framing — the lead-magnet PDF promise. Sits ABOVE the eyebrow
   so it's the first thing the reader's eye lands on. Styled as an
   editorial pull-quote — slightly larger body, accent-red "Free bonus"
   label, no aggressive box. WWAD: restraint as luxury. */
.letters-signup-bonus {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--rule);
    max-width: 56ch;
}
.letters-signup-bonus strong {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 600;
    display: inline-block;
    margin-right: 4px;
}
.letters-signup-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 10px;
    font-weight: 500;
}
.letters-signup-headline {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 12px;
    max-width: 30ch;
}
.letters-signup-lede {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 22px;
    max-width: 55ch;
}
.letters-signup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 18px;
}
.letters-signup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.letters-signup-field-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.letters-signup-input {
    font-family: var(--font-sans);
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--rule-2);
    border-radius: var(--card-radius-sm);
    background: var(--wall);
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.letters-signup-input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--red-wash);
}
.letters-signup-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    cursor: pointer;
}
.letters-signup-checkbox {
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: var(--red);
}
.letters-signup-consent-text {
    user-select: none;
}
.letters-signup-submit {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    background: var(--ink);
    color: var(--wall);
    border: none;
    border-radius: var(--card-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    min-width: 180px;
}
.letters-signup-submit:hover {
    background: var(--frame-soft);
}
.letters-signup-submit:active {
    transform: translateY(1px);
}
.letters-signup-disclosure {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
    max-width: 60ch;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
}
.letters-signup-disclosure a {
    color: var(--ink-2);
    text-decoration: underline;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 2px;
}
.letters-signup-disclosure a:hover {
    color: var(--red);
    text-decoration-color: var(--red);
}

/* Error / success messages returned inline from the signup POST */
.letters-signup-msg {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: var(--card-radius-sm);
    border-left: 2px solid transparent;
}
.letters-signup-msg-error {
    border-left-color: var(--red);
    background: var(--red-wash);
    color: var(--red);
}

/* Pending state — replaces the widget after a successful POST */
.letters-signup-pending {
    background: var(--positive-wash);
    border-color: var(--positive);
}
.letters-signup-pending .letters-signup-eyebrow {
    color: var(--positive);
}
.letters-signup-pending-email {
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--ink);
    background: var(--wall);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--rule-2);
}
.letters-signup-pending-note {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 14px 0 0;
}
.letters-signup-pending-note a {
    color: var(--ink-2);
}

/* ─── Confirmed page — letters_confirmed.html ─── */
.letters-confirmed-meanwhile {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.letters-confirmed-meanwhile-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 16px;
}
.letters-confirmed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.letters-confirmed-card {
    display: block;
    padding: 20px 22px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: var(--card-radius);
    color: var(--ink);
    text-decoration: none;
    transition: var(--card-transition);
}
.letters-confirmed-card:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--rule-2);
}
.letters-confirmed-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
}
.letters-confirmed-card-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ink);
}
.letters-confirmed-card-body {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 12px;
}
.letters-confirmed-card-cta {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
}

/* Two-column layout for /ai-policy-2026 — disclosure quote left,
   signup widget right. Stacks on narrow viewports. */
.ai-policy-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.ai-policy-cta-grid > .letters-signup {
    margin: 0;
    max-width: none;
}
@media (max-width: 760px) {
    .ai-policy-cta-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .letters-signup {
        padding: 22px 20px 18px;
    }
    .letters-signup-headline {
        font-size: 19px;
    }
}


/* ─────────────────────────────────────────────────────────────
   Cookie consent banner — minimal, ePrivacy + GDPR compliant.
   Bottom-right, single small card. Two buttons (Accept / Decline),
   no dark patterns (Decline is same visual weight as Accept,
   no pre-checked boxes, no "manage cookies" maze). Renders only
   when Meta Pixel is configured AND user has not yet decided.
   ───────────────────────────────────────────────────────────── */
#wpc-consent-banner {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    max-width: 380px;
    padding: 16px 18px 14px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 14, 13, 0.12),
                0 2px 8px rgba(15, 14, 13, 0.06);
    font-family: var(--font-sans);
}
.wpc-consent-text {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.wpc-consent-text a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.wpc-consent-text a:hover { border-bottom-color: var(--red); }
.wpc-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.wpc-consent-btn {
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--rule-2);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wpc-consent-btn:hover {
    background: var(--wall-2);
    color: var(--ink);
}
.wpc-consent-btn-accept {
    background: var(--ink);
    color: var(--wall);
    border-color: var(--ink);
}
.wpc-consent-btn-accept:hover {
    background: var(--ink-2);
    color: var(--wall);
    border-color: var(--ink-2);
}
@media (max-width: 520px) {
    #wpc-consent-banner {
        left: 16px;
        right: 16px;
        max-width: none;
        bottom: 12px;
    }
}


/* ─────────────────────────────────────────────────────────────
   Public-sample verdicts page (/verdicts) — three worked examples
   showing how the /analyze engine reads against a contest's
   rubric. Editorial layout matching the journal aesthetic;
   colour-coded verdict pills (Submit / Refine / Skip).
   ───────────────────────────────────────────────────────────── */
.verdicts-page {
    max-width: 760px;
    margin: 56px auto 96px;
    padding: 0 24px;
    color: var(--ink);
}
.verdicts-masthead {
    margin: 0 0 56px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
}
.verdicts-page h1 {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 18px;
}
.verdicts-lead {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.verdicts-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.verdicts-meta a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.verdicts-meta a:hover { border-bottom-color: var(--red); }

/* ── Per-verdict sample card ── */
.verdict-sample {
    margin: 0 0 56px;
    padding: 28px 28px 24px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-left-width: 4px;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}
.verdict-sample-submit { border-left-color: #2d7a2d; }
.verdict-sample-skip { border-left-color: var(--red); }
.verdict-sample-refine { border-left-color: #c08416; }
.verdict-sample-hold { border-left-color: var(--ink-3); }

.verdict-sample-head { margin: 0 0 22px; }
.verdict-sample-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
}
.verdict-sample-verdict-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.verdict-sample-verdict {
    display: inline-block;
    padding: 5px 12px 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 600;
}
.verdict-sample-verdict-submit {
    background: rgba(45, 122, 45, 0.12);
    color: #2d7a2d;
}
.verdict-sample-verdict-skip {
    background: rgba(165, 62, 44, 0.12);
    color: var(--red);
}
.verdict-sample-verdict-refine {
    background: rgba(192, 132, 22, 0.12);
    color: #c08416;
}
.verdict-sample-verdict-hold {
    background: rgba(15, 14, 13, 0.06);
    color: var(--ink-2);
}
.verdict-sample-tested-against {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-2);
}
.verdict-sample-tested-against strong {
    color: var(--ink);
    font-weight: 600;
}

.verdict-sample-frame,
.verdict-sample-reasoning,
.verdict-sample-next,
.verdict-sample-honesty {
    margin: 0 0 18px;
}
.verdict-sample-frame-label,
.verdict-sample-reasoning-label,
.verdict-sample-next-label,
.verdict-sample-honesty-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 6px;
}
.verdict-sample-frame-text,
.verdict-sample-reasoning p,
.verdict-sample-next p,
.verdict-sample-honesty p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 12px;
}
.verdict-sample-frame-text {
    font-style: italic;
    color: var(--ink);
    border-left: 2px solid var(--rule-2);
    padding-left: 14px;
}
.verdict-sample-honesty {
    border-top: 1px solid var(--rule);
    padding-top: 16px;
    margin-bottom: 0;
}

/* ── Bottom CTA ── */
.verdicts-cta {
    max-width: 720px;
    margin: 64px 0 0;
    padding: 28px 28px 24px;
    background: var(--card-surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}
.verdicts-cta h2 {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 600;
    margin: 0 0 14px;
}
.verdicts-cta p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 14px;
}
.verdicts-cta a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}
.verdicts-cta a:hover { border-bottom-color: var(--red); }
.verdicts-cta-button-row {
    margin-top: 20px;
}
.verdicts-cta-button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--ink);
    color: var(--wall) !important;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    transition: background 0.15s ease;
}
.verdicts-cta-button:hover {
    background: var(--ink-2);
    border-bottom-color: transparent !important;
}

@media (max-width: 640px) {
    .verdict-sample { padding: 20px 18px 16px; }
    .verdicts-cta { padding: 22px 18px 18px; }
}


/* ─────────────────────────────────────────────────────────────────────
   Premium Reports — /products/hipa-family-2026-report
   ─────────────────────────────────────────────────────────────────────
   Editorial product-landing register. Matches the /pricing typography
   (eyebrow + title + lede + body), but uses two-column CTA cards rather
   than the three-tier grid. Single accent: --red, used sparingly on
   the recommended card border + buy CTA. No marketing gradients, no
   countdown timers, no scare-text — the urgency is the date itself,
   stated once in the deadline aside.
   ───────────────────────────────────────────────────────────────────── */

.product-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.product-page-head {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.product-page-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.product-page-title {
    margin: 0 0 16px;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 40px;
    line-height: 1.12;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.product-page-title-line {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0;
}
.product-page-lede {
    margin: 0;
    max-width: 64ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}

.product-page-cover {
    margin: 0 0 32px;
}
.product-page-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--wall-2);
}
.product-page-cover-caption {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}

.product-page-deadline {
    margin: 0 0 36px;
    padding: 14px 18px;
    background: var(--wall-2);
    border-left: 3px solid var(--amber);
    border-radius: 0 3px 3px 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}
.product-page-deadline-eyebrow {
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.product-page-deadline-body {
    margin: 0;
}
.product-page-deadline-body strong {
    color: var(--ink);
}

.product-page-section-title {
    margin: 0 0 18px;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}

.product-page-inside {
    margin-bottom: 48px;
}
.product-page-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
}
.product-page-toc > li {
    padding: 14px 0 14px 8px;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: baseline;
}
.product-page-toc-num {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.product-page-toc-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.product-page-toc-pages {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}
.product-page-toc-blurb {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}

.product-page-cta {
    margin: 0 0 48px;
    padding: 32px 0 0;
    border-top: 1px solid var(--rule);
}
.product-page-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.product-page-cta-grid-single {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}
.product-page-cta-card {
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
}
.product-page-cta-card-recommended {
    border-color: var(--ink);
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(15, 14, 13, 0.05);
    padding: 27px 25px 25px;
}
.product-page-cta-card-included {
    border-color: var(--red);
    border-width: 2px;
    padding: 27px 25px 25px;
}
.product-page-cta-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    background: var(--wall-2);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    align-self: flex-start;
}
.product-page-cta-card-recommended .product-page-cta-eyebrow {
    background: var(--ink);
    color: var(--wall);
}
.product-page-cta-card-included .product-page-cta-eyebrow {
    background: var(--red);
    color: var(--wall);
}
.product-page-cta-title {
    margin: 0 0 10px;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.product-page-cta-body {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.product-page-cta-includes {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    flex: 1;
}
.product-page-cta-includes li {
    position: relative;
    padding: 4px 0 4px 18px;
}
.product-page-cta-includes li::before {
    content: "·";
    position: absolute;
    left: 4px;
    top: 4px;
    color: var(--ink-3);
    font-size: 16px;
    line-height: 1;
}
.product-page-cta-card-recommended .product-page-cta-includes li::before {
    color: var(--red);
}
.product-page-cta-button {
    width: 100%;
    text-align: center;
}
.product-page-cta-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.product-page-cta-fine {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}
.product-page-cta-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 4px;
}
.product-page-cta-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink);
}
.product-page-cta-input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--wall);
}

.product-page-closer {
    margin: 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--rule);
}
.product-page-closer-body {
    margin: 0 0 14px;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Mobile breakpoints */
@media (max-width: 720px) {
    .product-page { padding: 24px 18px 56px; }
    .product-page-title { font-size: 32px; }
    .product-page-title-line { font-size: 22px; }
    .product-page-toc {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .product-page-cta-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Redeem page — /redeem
   ─────────────────────────────────────────────────────────────────────
   Promo code redemption surface. Editorial register matching /pricing
   and /products/hipa-family-2026-report — eyebrow + title + lede, no
   marketing voice.
   ───────────────────────────────────────────────────────────────────── */

.redeem-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.redeem-page-head {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.redeem-page-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.redeem-page-eyebrow-success { color: var(--red); }
.redeem-page-title {
    margin: 0 0 14px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.redeem-page-lede {
    margin: 0;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}

.redeem-page-error {
    margin: 0 0 22px;
    padding: 12px 16px;
    background: rgba(165, 62, 44, 0.07);
    border-left: 3px solid var(--red);
    border-radius: 0 3px 3px 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.redeem-page-form {
    margin-bottom: 32px;
}
.redeem-page-field {
    display: block;
    margin-bottom: 16px;
}
.redeem-page-field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.redeem-page-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--wall);
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink);
}
.redeem-page-input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper, #fff);
}
.redeem-page-input-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 13px;
}
.redeem-page-submit {
    width: 100%;
    margin: 10px 0 14px;
    text-align: center;
}
.redeem-page-fine {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.55;
    max-width: 58ch;
}

.redeem-page-card {
    margin-bottom: 22px;
    padding: 18px 20px;
    background: var(--wall-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.redeem-page-card-title {
    margin: 0 0 10px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.redeem-page-card-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}
.redeem-page-card-list li { margin-bottom: 4px; }
.redeem-page-card-list code {
    font-size: 12px;
    background: var(--wall);
    padding: 1px 5px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   Premium Reports discovery band — _premium_reports_band.html
   ─────────────────────────────────────────────────────────────────────
   Editorial CTA surface that lives across multiple pages (blog index,
   blog posts, /pricing, /competitions/hipa_2026). Matches the
   column-band's Magnum-mark visual register but uses a slightly
   warmer paper tint (--wall-3) to read as its own surface.
   ───────────────────────────────────────────────────────────────────── */

.reports-band {
    margin: 32px 0 28px;
    padding: 28px 24px 24px;
    background: var(--wall-2);
    border-top: 2px solid var(--red);
    border-bottom: 1px solid var(--ink);
}
.reports-band-inner {
    max-width: 880px;
    margin: 0 auto;
}
.reports-band-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.reports-band-eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}
.reports-band-eyebrow-sep {
    color: var(--ink-3);
    font-weight: 400;
}
.reports-band-title {
    margin: 0 0 8px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 26px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.reports-band-deck {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 60ch;
}

.reports-band-preview {
    display: flex;
    gap: 22px;
    padding: 16px;
    background: var(--paper, #fff);
    border: 1px solid var(--rule);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reports-band-preview:hover {
    border-color: var(--ink);
    box-shadow: 0 6px 20px rgba(15, 14, 13, 0.06);
}
.reports-band-preview-cover {
    flex: 0 0 120px;
    width: 120px;
    height: 165px;
    overflow: hidden;
    border: 0.5px solid var(--ink);
    background: var(--ink);
}
.reports-band-preview-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reports-band-preview-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reports-band-preview-meta {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.reports-band-preview-pages,
.reports-band-preview-price,
.reports-band-preview-free {
    white-space: nowrap;
}
.reports-band-preview-price {
    color: var(--ink);
    font-weight: 600;
}
.reports-band-preview-free {
    color: var(--ink-3);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
}
.reports-band-preview-sep {
    color: var(--rule);
}
.reports-band-preview-dek {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.reports-band-preview-cta {
    margin: 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
    font-style: italic;
}

.reports-band-foot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 0.5px solid var(--rule);
}
.reports-band-foot-line {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.55;
    letter-spacing: 0.02em;
}
.reports-band-foot-link {
    color: var(--ink-2);
    border-bottom: 0.5px dotted var(--ink-3);
    text-decoration: none;
}

@media (max-width: 640px) {
    .reports-band-preview {
        flex-direction: column;
    }
    .reports-band-preview-cover {
        width: 100%;
        max-width: 200px;
        height: auto;
        aspect-ratio: 3/4;
        margin: 0 auto;
    }
    .reports-band-title { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────
   /judge contextual Premium Report CTA
   ─────────────────────────────────────────────────────────────────────
   Fires only on the HIPA-specific judge verdict surface — the moment
   the user has highest intent. Editorial register matching the
   .reports-band sibling, but tighter (sits inside a judge result
   panel; can't dominate the verdict typography).
   ───────────────────────────────────────────────────────────────────── */

.judge-report-cta {
    margin: 22px 0 14px;
    padding: 18px 20px;
    background: var(--wall-2);
    border-left: 3px solid var(--red);
    border-radius: 0 3px 3px 0;
}
.judge-report-cta-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.judge-report-cta-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
}
.judge-report-cta-title {
    margin: 0 0 8px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.judge-report-cta-body {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.judge-report-cta-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}
.judge-report-cta-line strong {
    color: var(--ink);
}
.judge-report-cta-link {
    display: inline-block;
    margin-left: 4px;
    color: var(--red);
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 0.5px solid var(--red);
}
.judge-report-cta-link:hover {
    border-bottom-width: 1.5px;
}

/* Tier-aware "included" pill in the reports-band */
.reports-band-preview-included {
    color: var(--green) !important;
    font-style: italic;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-weight: 600;
}