/* ────────────────────────────────────────────────────────────────
   Personix — review.css  ·  v2 (Stage 2 redesign)

   Drop-in replacement for wwwroot/css/review.css.
   Preserves the existing class vocabulary so the Razor markup keeps
   working; adds new modifiers (--hero, --gift, --info-flat), the
   group-break component, eyebrow labels, the ribbon motif, the
   revised phase rings, and the paper-inset writing surface.

   Self-hosted IM Fell English declared below. Drop the woff2 files
   into wwwroot/fonts/im-fell-english/ (see README.txt there). If
   the font is missing the page degrades gracefully to Palatino.
   ──────────────────────────────────────────────────────────────── */


/* ── self-hosted display face ─────────────────────────────────── */
@font-face {
    font-family: "IM Fell English";
    src: url("/fonts/im-fell-english/IMFellEnglish-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IM Fell English";
    src: url("/fonts/im-fell-english/IMFellEnglish-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ── page surface (unchanged token, kept for back-compat) ─────── */
::deep body[b-qpcwhbx7gc],
.review-page-bg[b-qpcwhbx7gc] { background-color: #f6e7c5; }


/* ── design tokens (scoped to .review) ────────────────────────── */
.review {
    /* color */
    --paper:           #f6e7c5;  /* canvas */
    --paper-inset:     #efdcb4;  /* darker writing surface (new) */
    --paper-shade:     #e9d6a8;  /* slightly darker still, for stamps */
    --ink:             #2b211b;
    --ink-soft:        #5b4d44;
    --ink-faded:       #6e5e54;
    --ink-ghost:       #a89887;
    --rule:            #b8a890;
    --rule-quiet:      #d6c4a3;  /* faint hairlines (new) */
    --accent-warm:     #c56a3a;  /* primary action */
    --accent-warm-d:   #b56a1d;
    --accent-blue:     #3f6b7a;
    --accent-blue-d:   #2e5260;
    --accent-clay:     #b64a3a;
    --accent-sienna:   #9a6b3e;  /* donations · replaces success green */
    --accent-sienna-d: #6e4b27;

    /* type */
    --font-serif:  "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-title:  "IM Fell English", "Palatino", "Palatino Linotype", Georgia, serif;
    --font-sans:   -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* reading column */
    width: min(820px, 92%);
    max-width: min(820px, 92%);
    margin: 0 auto;
    padding: 24px 0 64px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
}


/* ── language switcher ────────────────────────────────────────── */
.review__lang {
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.review__lang--top {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid rgba(43, 33, 27, 0.12);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.review__lang-link {
    color: var(--ink-faded);
    text-decoration: none;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    transition: color .12s ease, background-color .12s ease;
}
.review__lang-link:hover {
    color: var(--ink);
    background-color: rgba(197, 106, 58, 0.1);
}
.review__lang-link--active {
    color: var(--ink);
    background-color: rgba(43, 33, 27, 0.1);
}
.review__lang-sep {
    color: var(--rule);
    user-select: none;
}

/* dropdown variant (multi-language) */
.review__lang-label {
    color: var(--ink-faded);
    margin-right: 0.45rem;
    font-weight: 600;
}
.review__lang-select {
    font-family: var(--font-sans);
    font-size: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(43, 33, 27, 0.2);
    border-radius: 4px;
    padding: 0.15rem 1.4rem 0.15rem 0.5rem;
    cursor: pointer;
    /* custom chevron so the control matches the page rather than the OS */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232b211b' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color .12s ease, background-color .12s ease;
}
.review__lang-select:hover {
    border-color: rgba(197, 106, 58, 0.55);
    background-color: rgba(197, 106, 58, 0.06);
}
.review__lang-go {
    margin-left: 0.35rem;
}


/* ── cover ────────────────────────────────────────────────────── */
.review__cover {
    margin: 0 0 14px;
    text-align: center;
}
.review__lang--top + .review__cover { margin-top: 4px; }

.review__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.review__cover-caption {
    margin: 12px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.45;
}


/* ── intro lead ───────────────────────────────────────────────
   The thesis block between the cover and the first group break.
   One strong serif line states what's at stake; three short
   paragraphs say what Personix is and where to start reading. */
.review__intro {
    margin: 0 0 22px;
}
/* The page's only h1. Deliberately quieter than the lead beneath it — the
   cover already shouts the name, so this is the document's label, not its
   headline. Sized below .review__intro-lead so the visual hierarchy still
   puts the thesis first. */
.review__intro-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink-soft);
}
.review__intro-lead {
    margin: 0 0 0.8rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
}
.review__intro-body {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.review__intro-body:last-child {
    margin-bottom: 0;
}
.review__intro-body strong {
    color: var(--ink);
    font-weight: 600;
}


/* ── group break (NEW)
   A typographic rest between narrative beats: § + label flanked by
   short rules. Rendered as one component <GroupBreak Label="…" />. */
.review__group-break {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 48px 0 24px;
    color: var(--ink-faded);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.review__group-break-rule {
    flex: 0 1 110px;
    height: 1px;
    background: var(--rule-quiet);
}

.review__group-break-label {
    white-space: nowrap;
}

.review__group-break-glyph {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    margin-right: 4px;
    vertical-align: -0.08em;
    color: var(--ink-soft);
}

@media (max-width: 520px) {
    .review__group-break {
        margin: 32px 0 16px;
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }
    .review__group-break-rule { flex-basis: 56px; }
}


/* ── callout · base ───────────────────────────────────────────── */
.review__callout {
    margin: 0 0 1.75rem;
    padding: 22px 24px 24px;
    border-radius: 4px;
    border: 1px solid;
    background-color: var(--callout-bg);
    display: flow-root;  /* contain floated mugshot */
}

.review__callout--accent {
    --callout-bg: rgba(199, 144, 58, 0.07);
    --callout-color: var(--accent-warm-d);
    border-color: rgba(199, 144, 58, 0.32);
}

.review__callout--info {
    --callout-bg: rgba(63, 107, 122, 0.05);
    --callout-color: var(--accent-blue);
    border-color: rgba(63, 107, 122, 0.28);
}

/* GIFT replaces the old SUCCESS — sienna, not green */
.review__callout--gift {
    --callout-bg: rgba(154, 107, 62, 0.06);
    --callout-color: var(--accent-sienna);
    border-color: rgba(154, 107, 62, 0.34);
}

.review__callout--warning {
    --callout-bg: rgba(182, 74, 58, 0.05);
    --callout-color: var(--accent-clay);
    border-color: rgba(182, 74, 58, 0.30);
}

.review__callout--neutral {
    --callout-bg: rgba(108, 92, 76, 0.05);
    --callout-color: #6c5c4c;
    border-color: rgba(108, 92, 76, 0.26);
}

/* HERO modifier — for the pamphlet primary download */
.review__callout--hero {
    padding: 30px 30px 30px;
    border-left-width: 3px;
}

/* INFO-FLAT modifier — used for the Whitepaper.
   Strips the box; just a hairline rule on top. Reads as "and there's
   also this," not as a co-equal action. */
.review__callout--info-flat {
    --callout-bg: transparent;
    border: none;
    border-top: 1px solid var(--rule-quiet);
    border-radius: 0;
    margin-top: -0.4rem;
    padding: 18px 0 12px;
}


/* ── callout · head (eyebrow + title + ribbon motif) ─────────── */
.review__callout-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(43, 33, 27, 0.10);
}

.review__callout--info-flat .review__callout-head {
    border-bottom: none;
    margin-bottom: 6px;
    padding-bottom: 0;
}

.review__callout-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--callout-color);
    opacity: 0.95;
}

.review__callout-head h2,
.review__callout-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.review__callout--hero .review__callout-head h2,
.review__callout--hero .review__callout-title {
    font-size: 1.9rem;
}

.review__callout--info-flat .review__callout-head h2,
.review__callout--info-flat .review__callout-title {
    font-size: 1.2rem;
    color: var(--accent-blue-d);
}

.review__callout-note {
    margin: 0 0 0.85rem;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.55;
}

.review__callout--hero .review__callout-note {
    color: var(--ink);
    font-size: 1rem;
    font-style: italic;
}


/* ── ribbon motif (the typographic motif, used everywhere) ─────
   Two horizontal rules of unequal length sitting under a title.
   Echoes the cover's PERSONIX double-underline. CSS-only. */
.review__ribbon {
    display: block;
    width: 100%;
    height: 7px;
    margin: 6px 0 2px;
    position: relative;
}
.review__ribbon::before,
.review__ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    background: var(--callout-color, var(--ink));
}
.review__ribbon::before {
    top: 0;
    width: 100%;
    height: 1.5px;
    opacity: 0.7;
}
.review__ribbon::after {
    top: 4px;
    width: 38%;
    height: 1px;
    opacity: 0.55;
}

.review__ribbon--quiet { height: 5px; }
.review__ribbon--quiet::before { height: 1px; opacity: 0.5; }
.review__ribbon--quiet::after { top: 3px; width: 30%; height: 1px; opacity: 0.4; }


/* ── download buttons ─────────────────────────────────────────── */
.review__btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0.9rem 0 0.2rem;
}

.review__btn-row--hero {
    gap: 14px;
    margin-top: 1.1rem;
}

.review__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 22px;
    border-radius: 3px;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    transition: transform .12s ease, box-shadow .12s ease,
                background-color .12s ease, color .12s ease;
    border: 1.5px solid transparent;
    /* border-box: tlačítka s `width: 100%` v mobile media query (řádek 443)
       musí počítat padding + border DOVNITŘ své šířky, jinak přečnívají
       parent .review__callout (který má 18px horizontální padding na mobile).
       Bez tohoto resetu = 100% parent + 44px padding + 3px border → ~47px
       přesah vpravo na úzkém viewportu. */
    box-sizing: border-box;
}

.review__btn:hover { transform: translateY(-1px); }

.review__btn--primary {
    background-color: var(--accent-warm);
    color: var(--paper);
    box-shadow: 2px 2px 0 rgba(43, 33, 27, 0.28);
}
.review__btn--primary:hover {
    background-color: #d9804b;
    color: var(--paper);
    box-shadow: 3px 4px 0 rgba(43, 33, 27, 0.32);
}

.review__btn--secondary {
    background-color: transparent;
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}
.review__btn--secondary:hover {
    background-color: rgba(199, 144, 58, 0.1);
    color: var(--accent-warm-d);
}

.review__btn--info {
    background-color: rgba(63, 107, 122, 0.08);
    color: var(--accent-blue);
    border-color: rgba(63, 107, 122, 0.5);
}
.review__btn--info:hover {
    background-color: rgba(63, 107, 122, 0.16);
    color: var(--accent-blue-d);
}

.review__btn--disabled {
    background-color: rgba(168, 152, 135, 0.1);
    color: var(--ink-ghost);
    border-color: rgba(168, 152, 135, 0.4);
    border-style: dashed;
    cursor: not-allowed;
    font-style: italic;
    font-weight: 500;
}
.review__btn--disabled:hover { transform: none; }

.review__btn--compact {
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.review__btn-icon {
    font-size: 1.15em;
    font-weight: 800;
    opacity: 0.9;
}
.review__btn-label { font-weight: inherit; }
.review__btn-meta {
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.78;
}

@media (max-width: 520px) {
    .review__btn { width: 100%; justify-content: center; }
    .review__btn-row { flex-direction: column; }
}


/* ── donate grid ──────────────────────────────────────────────── */
.review__donate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
}

.review__donate-channel {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.review__donate-qr {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border: 1px solid rgba(43, 33, 27, 0.15);
    border-radius: 3px;
    background: var(--paper-inset);   /* no more pure white */
    padding: 4px;
    box-sizing: content-box;
}

.review__donate-meta {
    flex: 1;
    min-width: 0;
}

.review__donate-label {
    margin: 0 0 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.review__donate-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.review__donate-addr {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-soft);
    background: var(--paper-inset);
    padding: 3px 6px;
    border-radius: 2px;
    word-break: break-all;
    line-height: 1.4;
    user-select: all;
}

.review__donate-channel--bank {
    grid-column: 1 / -1;
    border-top: 1px dashed rgba(43, 33, 27, 0.18);
    padding-top: 1.1rem;
    margin-top: 0.25rem;
}

.review__donate-note {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.review__donate-note a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
    .review__donate-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .review__donate-qr { width: 112px; height: 112px; }
    .review__donate-channel {
        flex-direction: row;
        align-items: flex-start;
    }
}


/* ── project phases ───────────────────────────────────────────── */
.review__phases-figure {
    margin: 14px 0 1.6rem;
    padding: 0;
}

.review__phases-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
}

.review__phases-figure figcaption {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-faded);
    text-align: center;
    font-style: italic;
}

/* Concept gallery — mockup screens of a hypothetical node UI */
.review__concept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 16px 0 1.2rem;
}

.review__concept-shot {
    margin: 0;
    padding: 0;
}

.review__concept-link {
    display: block;
    cursor: zoom-in;
    border-radius: 6px;
    outline-offset: 3px;
    transition: opacity 0.12s ease;
}

.review__concept-link:hover { opacity: 0.86; }

.review__concept-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-quiet);
    border-radius: 6px;
    background: #15110c;
}

/* Lightbox overlay (driven by app.js) */
.px-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(12, 9, 6, 0.88);
    cursor: zoom-out;
}

.px-lightbox.is-open { display: flex; }

.px-lightbox img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.px-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    color: #f0e6d4;
    background: rgba(20, 16, 12, 0.55);
    border: 1px solid rgba(240, 225, 200, 0.32);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.px-lightbox__close:hover {
    background: rgba(20, 16, 12, 0.85);
    transform: scale(1.05);
}

.review__concept-shot figcaption {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-faded);
    line-height: 1.4;
}

.review__concept-repo {
    margin: 0.4rem 0 0;
    font-size: 0.86rem;
    color: var(--ink-faded);
}

@media (max-width: 640px) {
    .review__concept-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.review__phases {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.review__phase {
    position: relative;
    padding: 0 0 0 3.6rem;
    min-height: 2.6rem;
}

/* connecting hairline between phase rings */
.review__phase::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 2.6rem;
    bottom: -1.2rem;
    width: 1px;
    background-color: rgba(63, 107, 122, 0.25);
}
.review__phase:last-child::before { display: none; }

/* the new phase ring — thin border, serif numeral, no heavy fill */
.review__phase-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(63, 107, 122, 0.06);
    color: var(--accent-blue-d);
    border: 1px solid rgba(63, 107, 122, 0.45);
    border-radius: 50%;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
    padding-bottom: 0.1em;     /* optical centring of serif numerals */
}

.review__phase-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review__phase-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.review__phase-status {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faded);
}

.review__phase--ongoing .review__phase-num {
    border-style: dashed;
    background-color: rgba(63, 107, 122, 0.10);
}

.review__phase--open .review__phase-num {
    background-color: rgba(182, 74, 58, 0.08);
    color: var(--accent-clay);
    border-color: rgba(182, 74, 58, 0.5);
    border-style: dashed;
}

.review__phase--open .review__phase-status {
    color: var(--accent-clay);
    font-style: italic;
}

.review__phase-body {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
}

.review__phase-infinity {
    display: inline-block;
    margin-left: 0.3em;
    padding: 0 0.45em;
    border: 1px dashed rgba(63, 107, 122, 0.5);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--accent-blue);
    background-color: rgba(63, 107, 122, 0.08);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 0.05em;
}

.review__phase-wink {
    display: inline-block;
    font-size: 1.15em;
    transform: translateY(0.05em);
    margin-left: 0.05em;
}

@media (max-width: 520px) {
    .review__phase { padding-left: 2.8rem; }
    .review__phase-num {
        width: 2rem; height: 2rem;
        font-size: 1.05rem;
    }
    .review__phase::before { left: 1rem; top: 2.2rem; }
}


/* ── mugshot (canon — kept verbatim) ──────────────────────────── */
.review__mugshot {
    float: right;
    width: 220px;
    max-width: 45%;
    margin: 0.2rem 0 0.5rem 1.1rem;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 3px 3px 0 rgba(43, 33, 27, 0.2);
}
.review__mugshot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
}

@media (max-width: 520px) {
    .review__mugshot {
        float: none;
        width: 100%;
        max-width: 240px;
        margin: 0 auto 0.85rem;
    }
}


/* ── money-disclosure body ────────────────────────────────────── */
.review__callout--warning p {
    margin: 0 0 0.7rem;
}
.review__callout--warning p:last-child {
    margin-bottom: 0;
}

.review__legit-fraud {
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(43, 33, 27, 0.18);
    color: var(--ink);
}


/* ── tax & receipts · collapsible legal panels ───────────────── */
.review__legal-details {
    margin: 0 0 0.7rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--paper-inset);
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
}

.review__legal-details[open] {
    background-color: rgba(108, 92, 76, 0.08);
    border-color: rgba(108, 92, 76, 0.32);
}

.review__legal-details summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    padding-right: 1.4rem;
    position: relative;
}
.review__legal-details summary::-webkit-details-marker { display: none; }
.review__legal-details summary::after {
    content: "▸";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--ink-faded);
    font-size: 0.85rem;
    transition: transform .15s ease;
}
.review__legal-details[open] summary::after {
    transform: rotate(90deg);
}

.review__legal-body {
    margin: 0.7rem 0 0.1rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(43, 33, 27, 0.15);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}
.review__legal-body p { margin: 0 0 0.6rem; }
.review__legal-body p:last-child { margin-bottom: 0; }
.review__legal-body a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}


/* ── campaigns · empty state collapses to one line ───────────── */
.review__campaigns-empty {
    margin: 0;
    padding: 0.4rem 0 0.2rem;
    color: var(--ink-faded);
    font-style: italic;
    font-size: 0.95rem;
    text-align: center;
}
.review__campaigns-empty p { margin: 0; }


/* Smooth in-page jumps (feedback ask → footer drop box). Honours the
   user's reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── feedback ask — warm CTA strip closing the Read beat ──────────
   The only orange-tinted block on the page, so the single direct ask
   ("write to me") stands out between the document cards and the gift
   group without adding another full callout card. */
.review__feedback-ask {
    margin: 24px 0 0;
    padding: 16px 18px;
    background: rgba(197, 106, 58, 0.07);
    border: 1.5px solid rgba(197, 106, 58, 0.45);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 22px;
    flex-wrap: wrap;
}
.review__feedback-ask-face {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid rgba(197, 106, 58, 0.55);
    box-shadow: 2px 2px 0 rgba(43, 33, 27, 0.18);
    object-fit: cover;
}
.review__feedback-ask-text {
    margin: 0;
    flex: 1 1 280px;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-soft);
    /* narrow flex column — the global justified+hyphenated <p> style
       produces gappy lines and broken words here; plain left rag reads
       clean at this width */
    text-align: left;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}
.review__feedback-ask-text strong {
    color: var(--ink);
    font-weight: 700;
}
.review__feedback-ask-btn {
    flex: none;
    align-self: center;
}


/* ── contact ──────────────────────────────────────────────────── */
.review__contact {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(43, 33, 27, 0.18);
}

.review__contact h2 {
    margin: 0 0 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-faded);
}

.review__contact-invite {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink);
}

/* anonymous drop box — paper-inset writing surface */
.review__anon {
    margin: 0 0 1.3rem;
    padding: 14px 16px;
    background: var(--paper-inset);
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
}

/* honeypot — parked far off-canvas, not display:none (some bots skip
   fields that are display:none but happily fill absolutely-positioned ones) */
.review__anon-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* post-submit notices */
.review__anon--confirm {
    text-align: center;
}
.review__anon-confirm-text {
    margin: 0.35rem 0;
    font-size: 1.05rem;
    color: var(--ink);
}
.review__anon-notice {
    margin: 0 0 0.7rem;
    padding: 8px 12px;
    background: rgba(182, 74, 58, 0.09);
    border: 1px solid rgba(182, 74, 58, 0.4);
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--accent-clay);
}
.review__anon-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 76px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    resize: vertical;
}
.review__anon-text::placeholder {
    color: var(--ink-ghost);
    font-style: italic;
}
.review__anon-text:focus {
    outline: none;
    border-color: var(--accent-warm);
}
.review__anon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.review__anon-note {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--ink-faded);
}

.review__contact-channels-lead {
    margin: 0 0 0.5rem;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-faded);
}

.review__contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.review__contact li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 0;
}

.review__contact-key {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-ghost);
    width: 10rem;
}

.review__contact a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.18em;
}
.review__contact a:hover { color: #d9804b; }

.review__contact-key { flex: none; }

.review__contact-note {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-ghost);
}

.review__privacy {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px dotted rgba(43, 33, 27, 0.18);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-faded);
}

.review__updated {
    margin: 0.6rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    color: var(--ink-faded);
}

/* machine-translation notice — quiet, italic, translated-versions only */
.review__machine-translation {
    margin: 0.6rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-faded);
    opacity: 0.85;
}


/* ── small-screen sweep ───────────────────────────────────────── */
@media (max-width: 600px) {
    .review {
        font-size: 16px;
        padding: 18px 0 48px;
    }
    .review__callout { padding: 18px 18px 20px; }
    .review__callout--hero { padding: 22px 20px 22px; }
    .review__callout-head h2,
    .review__callout-title { font-size: 1.35rem; }
    .review__callout--hero .review__callout-head h2,
    .review__callout--hero .review__callout-title { font-size: 1.6rem; }
}


/* ── nested callout (TaxAndReceipts inside Donations) ──────────
   When a .review__callout sits inside another .review__callout it
   reads as a subordinate sub-block: no box, a dashed hairline rule
   above, and a small uppercase sans header instead of the IM Fell
   title. The parent callout's eyebrow already establishes the
   register, so the ribbon and eyebrow inside are suppressed.

   The selectors deliberately repeat .review__callout twice — the
   first occurrence matches the parent, the second matches the
   nested child, and only descendants of the nested child are then
   restyled. Otherwise (with a single .review__callout descendant
   selector) the rules would also match every TOP-LEVEL callout's
   own title/eyebrow/ribbon, since those are descendants of their
   own .review__callout.

   If you ever want to promote a nested callout back to top-level,
   nothing in the markup needs to change — these rules only apply
   when one callout is descended from another. */
.review__callout .review__callout {
    margin: 1.75rem 0 0;
    padding: 1.1rem 0 0;
    background: none;
    border: none;
    border-top: 1px dashed var(--rule);
    border-radius: 0;
}

.review__callout .review__callout .review__callout-head {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    border-bottom: none;
}

.review__callout .review__callout .review__callout-title,
.review__callout .review__callout .review__callout-head h2 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    line-height: 1.3;
}

.review__callout .review__callout .review__callout-note {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

/* Hide the ribbon and eyebrow inside nested callouts even if the
   markup still emits them — makes the nested form robust to future
   component changes. */
.review__callout .review__callout .review__ribbon,
.review__callout .review__callout .review__callout-eyebrow {
    display: none;
}


/* ── canary badge ──────────────────────────────────────────────
   Full warrant-canary callout, rendered inside DonationsCallout
   above the TaxAndReceipts sub-block. Mirrors the .review__callout
   visual language (paper-card with hairline border) but uses a
   muted indigo to distinguish it from the gift / info callouts.

   States:
     .canary-badge--alive  → neutral border, regular text.
     .canary-badge--grace  → amber-orange border + warning footer.

   Dead state is handled by Razor (component returns no markup), so
   there's no .canary-badge--dead rule. */
.canary-badge {
    --canary-bg:    rgba(63, 107, 122, 0.045);
    --canary-edge:  rgba(63, 107, 122, 0.28);
    --canary-color: var(--accent-blue);
    margin: 1.25rem 0 0;
    padding: 18px 22px 16px;
    background: var(--canary-bg);
    border: 1px solid var(--canary-edge);
    border-left: 3px solid var(--canary-color);
    border-radius: 6px;
    font-family: var(--font-serif, Georgia, serif);
    color: var(--ink-soft);
}

.canary-badge--grace {
    --canary-bg:    rgba(199, 144, 58, 0.08);
    --canary-edge:  rgba(199, 144, 58, 0.45);
    --canary-color: var(--accent-warm-d, #b6612c);
}

.canary-badge__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.6rem;
}

.canary-badge__title {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--canary-color);
    line-height: 1.2;
    margin: 0;
}

.canary-badge__eyebrow {
    font-size: 0.74rem;
    color: var(--ink-soft);
    opacity: 0.65;
    margin: 0;
    font-style: italic;
}

.canary-badge__statement {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.canary-badge__claims {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.canary-badge__claims li + li {
    margin-top: 0.35rem;
}

.canary-badge__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule-quiet);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    color: var(--ink-soft);
}

.canary-badge__label {
    font-weight: 600;
}

.canary-badge__meta time {
    font-variant-numeric: tabular-nums;
}

.canary-badge__warning {
    flex-basis: 100%;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: rgba(199, 144, 58, 0.14);
    border-left: 2px solid var(--accent-warm-d, #b6612c);
    border-radius: 3px;
    font-weight: 600;
    color: var(--accent-warm-d, #b6612c);
}

/* ── canary compact (footer line) ──────────────────────────────
   Drop-in replacement for the old static PFootnote.Canary <p>.
   Inherits .footnote .text styling from app.css; we only add the
   grace-state inline warning span. */
.canary-compact--grace .canary-compact__warning {
    color: var(--accent-warm-d, #b6612c);
    font-weight: 600;
}


/* ── whitepaper · publication note ────────────────────────────────
   Sits under the PDF/EPUB row in the (info-toned) whitepaper callout.
   The <summary> is a concrete always-visible sentence (what/when/where);
   the disclosure arrow expands the DOI link, licence and timestamp. */
.review__pub {
    /* Reset the heavy global `details` treatment (app.css) — this is a quiet
       inline disclosure, not a boxed panel. */
    margin: 0.9rem 0 0;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px dashed rgba(63, 107, 122, 0.28);
    border-radius: 0;
    background: none;
    box-shadow: none;
    width: auto;
    max-width: none;
}

.review__pub-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55em;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.review__pub-summary::-webkit-details-marker { display: none; }
.review__pub-summary:hover { color: var(--ink); }
.review__pub-summary:hover .review__pub-arrow { color: var(--accent-blue-d); }

/* Disclosure arrow — deliberately visible: solid accent triangle that
   rotates down when the panel opens. */
.review__pub-arrow {
    flex: 0 0 auto;
    color: var(--accent-blue);
    font-size: 1.05em;
    line-height: 1;
    transition: transform .15s ease;
}
.review__pub[open] .review__pub-arrow {
    transform: rotate(90deg);
}

.review__pub-headline {
    flex: 1 1 auto;
}

.review__pub-meta {
    margin: 0.6rem 0 0;
    padding: 0 0 0 1.6em;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.review__pub-meta li {
    margin: 0 0 0.35rem;
    position: relative;
}
.review__pub-meta li::before {
    content: "·";
    position: absolute;
    left: -0.9rem;
    color: var(--ink-faded);
}
.review__pub-meta li:last-child { margin-bottom: 0; }

.review__pub-doi {
    color: var(--accent-blue-d);
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 107, 122, 0.4);
    padding-bottom: 1px;
}
.review__pub-doi:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* ---- Teaser audio ---------------------------------------------------- */
/* Native <audio> controls: the browser renders and localizes them itself,
   which keeps the page free of JS on an otherwise statically rendered site. */
.review__audio {
    display: block;
    width: 100%;
    margin: 1.1rem 0 0.9rem;
    border-radius: 8px;
}

/* Speed pills sit tucked under the player they control. Rendered [hidden]
   until app.js wires them, so they never appear as dead controls. */
.review__speed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.3rem 0 0.9rem;
}

.review__speed-btn {
    font: inherit;
    font-size: 0.78em;
    font-weight: 500;
    padding: 0.12rem 0.6rem;
    border: 1px solid rgba(43, 33, 27, 0.3);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.72;
    cursor: pointer;
}
.review__speed-btn:hover {
    opacity: 1;
}
.review__speed-btn.is-active {
    border-color: var(--accent-warm);
    color: var(--accent-warm);
    font-weight: 600;
    opacity: 1;
}

.review__callout--teaser .review__btn-row {
    margin-top: 0.4rem;
}

/* Long-form intro sits inside the same audio callout, visually subordinate to
   the teaser above it — it is the deeper commitment, not the primary ask. */
.review__audio-long {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.review__audio-long-title {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}


/* ── publications register (/publications) ────────────────────
   The public list of articles and coverage. Reuses the .review
   page frame, so only the list itself needs vocabulary. Entry
   titles keep their own language, which means this block has to
   survive Japanese, Arabic and Greek side by side — hence no
   fixed columns and no truncation. */
.publications__head {
    margin: 0 0 26px;
}
.publications__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
}
.publications__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.publications__year {
    margin: 0 0 28px;
}
.publications__year-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-faded);
    letter-spacing: 0.06em;
}

.publications__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.publications__item {
    padding: 0.7rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.publications__item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.publications__item-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink);
}
.publications__item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.45rem;
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-faded);
}
.publications__outlet {
    font-weight: 600;
    color: var(--ink-soft);
}
.publications__sep {
    opacity: 0.5;
}
.publications__archive {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.publications__empty {
    margin: 0 0 24px;
    font-style: italic;
    color: var(--ink-faded);
}

/* No rule of its own — the last entry already closes the list with one, and
   two hairlines 32px apart read as an empty row. */
.publications__back {
    margin: 26px 0 0;
    font-size: 0.95rem;
}


/* ── author byline ────────────────────────────────────────────
   Signs the page just above the contact footer. Quiet on purpose:
   it is attribution, not another callout competing for attention. */
.review__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.review__author-face {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.review__author-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.review__author-doi {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--ink-faded);
}