/* ─────────────────────────────────────────────────────────────
   ReBone · site-frame.css
   Universal B&W design system. Applied to every page.
   See DESIGN_SYSTEM.md for the rationale behind each token.
   ───────────────────────────────────────────────────────────── */

:root {
    --bg:        #FAFAF8;
    --card:      #FFFFFF;
    --ink:       #1A1A1A;
    --ink-2:     #555555;
    --ink-3:     #888888;
    --ink-4:     #B5B5B5;
    --rule:      #D8D8D8;
    --rule-2:    #ECECEC;
    --banner-bg: #2c2c2c;

    --shell-max:    72rem;
    --shell-pad:    2rem;
    --rail-width:   15rem;  /* ~ a quarter of the canvas */
    --gutter-gap:   2.25rem;

    /* One family across the whole site, by request. English glyphs come
       from Iowan / Georgia; Chinese falls through to Noto Serif SC.
       Mono points to the same stack so previously-mono labels also
       become serif — we'll lean on size + letter-spacing + uppercase
       for tiny-label hierarchy instead of a second font family. */
    --font-serif:  'Iowan Old Style', Georgia, Cambria, 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
    --font-mono:   'Iowan Old Style', Georgia, Cambria, 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ───── Banner (top nav) ──────────────────────────────────── */

.banner {
    background-color: var(--banner-bg);
    background-image: url('../nav-bg.webp'), url('../nav-bg.PNG');
    background-size: 113% 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 50;
}
.banner-inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 1.05rem var(--shell-pad);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.25rem;
}
.brand {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}
.nav-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    letter-spacing: 0.02em;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
}
.nav-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.nav-link.active { color: #fff; border-bottom-color: #fff; }

/* i18n.js mounts the language switch into the first <div> inside <nav>.
   Style it to match. */
[data-language-switch="true"] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    margin-left: auto;
    color: rgba(255,255,255,0.7);
}
[data-language-switch="true"] button {
    color: rgba(255,255,255,0.85);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 0.15rem;
    font-family: inherit;
    font-size: inherit;
}
[data-language-switch="true"] button:hover { color: #fff; }
[data-language-switch="true"] button.underline { color: #fff; }

/* ───── Page shell (rail + gutter + main) ─────────────────── */

.shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 3.25rem var(--shell-pad) 4rem;
    display: grid;
    grid-template-columns: var(--rail-width) 1px minmax(0, 1fr);
    column-gap: var(--gutter-gap);
    align-items: start;
}
.shell-gutter {
    background: var(--rule);
    align-self: stretch;
    min-height: 100%;
}

/* ───── Left rail (universal across all pages) ────────────── */

.rail {
    position: sticky;
    top: 5rem;
    padding-top: 0.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
    padding-right: 0.5rem;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.rail-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
    font-weight: 400;
}
.rail-label + .rail-label { margin-top: 1.6rem; }
.rail-label-link { margin-top: 1.4rem; }
.rail-label-link + .rail-label-link { margin-top: 0.5rem; }
.rail-label-link a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}
.rail-label-link a:hover { color: var(--ink); }
.rail-text {
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.65;
    margin: 0 0 0.4rem;
}
.rail-marker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin: 0 0 0.25rem;
    line-height: 1.6;
}
.rail-marker strong {
    color: var(--ink-2);
    font-weight: 500;
}
.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rail-nav a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1.6;
    padding: 0.05rem 0;
}
.rail-nav a:hover,
.rail-nav a.active { color: var(--ink); }

/* ───── Main column ───────────────────────────────────────── */

.main { min-width: 0; }

/* Hero on any page */
.page-hero { margin-bottom: 3rem; }
.page-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
.page-heading {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 1.5rem;
    white-space: pre-line;
    letter-spacing: 0.01em;
}
.page-subhead {
    font-size: 1.05rem;
    color: var(--ink-2);
    line-height: 1.75;
    margin: 0 0 1.5rem;
    max-width: 36em;
}

/* Intro label + bullet points (used by homepage and some landings) */
.intro-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin: 0 0 0.45rem;
}
.intro-points {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
}
.intro-points li {
    font-size: 0.95rem;
    color: var(--ink-2);
    padding: 0.18rem 0;
    line-height: 1.8;
}
.intro-points li.intro-points-spacer {
    height: 1rem;
    padding: 0;
    list-style: none;
}

/* ───── Chapter/section row pattern (used by homepage cards, project navs) ── */
/* renderHome() emits .section-card / .section-card-title / .section-card-desc /
   .section-card-footer / .section-card-latest / .section-card-arrow — these
   are styled below to render as chapter rows, not boxed cards. */

#home-links {
    border-top: 1px solid var(--rule);
    margin-bottom: 4rem;
}
.section-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    align-items: baseline;
    transition: padding 200ms ease;
    scroll-margin-top: 5rem;
}
.section-card:hover { padding-left: 0.6rem; }
.section-card-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.35rem;
    letter-spacing: 0.005em;
}
.section-card-desc {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.7;
    margin: 0;
    grid-column: 1;
}
.section-card-footer {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3rem;
    text-align: right;
}
.section-card-latest {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.section-card-arrow {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink-3);
    transition: transform 200ms ease, color 200ms ease;
}
.section-card:hover .section-card-arrow {
    color: var(--ink);
    transform: translateX(3px);
}

/* ───── Panel pattern (Updates, Inbox, etc.) ──────────────── */

.panel { margin-bottom: 2.5rem; scroll-margin-top: 5rem; }
.panel-head {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: 0.005em;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 500;
}
.panel-head a {
    color: var(--ink-3);
    font-weight: 400;
    text-decoration: none;
}
.panel-head a:hover { color: var(--ink); }

/* Updates timeline (emitted by renderHome). Class names preserved. */
#updates-list { padding: 0; }
.timeline-item {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1.25rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
    padding-left: 1rem;
    align-items: start;
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
}
.timeline-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    padding-top: 0.15rem;
}
.timeline-lines p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.85;
}
.timeline-lines p + p {
    margin-top: 0.15rem;
}
.updates-more {
    margin-top: 0.6rem;
    text-align: right;
}
.updates-more-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.updates-more-link:hover { color: var(--ink); }

/* Inbox letterbox */
.letterbox-panel { margin-bottom: 2rem; }
.letterbox-strip {
    font-size: 0.9rem;
    color: var(--ink-3);
    margin: 0 0 0.9rem;
    line-height: 1.7;
}
.letterbox-input {
    width: 100%;
    min-height: 5rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.7;
    outline: none;
    resize: vertical;
}
.letterbox-input::placeholder { color: var(--ink-4); }
.letterbox-input:focus { border-bottom-color: var(--ink-2); }
.letterbox-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 0;
    flex-wrap: wrap;
}
.letterbox-meta-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.letterbox-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--ink-2);
    cursor: pointer;
}
.letterbox-radio input { accent-color: var(--ink); }
.letterbox-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.letterbox-contact-input {
    flex: 1 1 16rem;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.35rem 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 0.9rem;
    outline: none;
}
.letterbox-contact-input:focus { border-bottom-color: var(--ink-2); }
.letterbox-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}
.letterbox-button {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    padding: 0.35rem 0.95rem;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 150ms ease, color 150ms ease;
}
.letterbox-button:hover { background: var(--ink); color: #fff; }
.letterbox-button:disabled { color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; background: transparent; }
.letterbox-status {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.panel-head a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.panel-head a:hover { color: var(--ink); }

/* Inbox archive page */
.inbox-archive { display: flex; flex-direction: column; gap: 1.4rem; }
.inbox-entry {
    border-top: 1px solid var(--rule);
    padding: 1.4rem 0 0.4rem;
}
.inbox-entry-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
}
.inbox-entry-question {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--ink);
    margin: 0 0 0.6rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}
.inbox-entry-answer {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.85;
    margin: 0;
}
.inbox-empty {
    font-size: 0.92rem;
    color: var(--ink-3);
    text-align: center;
    padding: 2.5rem 0;
}

/* ───── Rail filters (e.g., Solutions filter buttons in rail) ─ */

.rail-filters {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
}
.rail-filters .filter-button {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.1rem 0;
    cursor: pointer;
    letter-spacing: 0.02em;
    line-height: 1.65;
}
.rail-filters .filter-button:hover { color: var(--ink); }
.rail-filters .filter-button.active {
    color: var(--ink);
    font-weight: 500;
}
.rail-filters .filter-button.active::before {
    content: '— ';
    color: var(--ink-3);
}

/* ───── Six-frames card grid (Solutions list) ─────────────── */

.frame-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.75rem;
    margin-top: 0.4rem;
}
.frame-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0 1.4rem;
    transition: padding 200ms ease;
}
.frame-card:hover { padding-left: 0.6rem; }
.frame-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--rule-2);
}
.frame-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.15);
    transition: filter 250ms ease, transform 400ms ease;
}
.frame-card:hover .frame-card-image img {
    filter: grayscale(0);
    transform: scale(1.02);
}
.frame-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.frame-card-arrow {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink-3);
    margin-left: auto;
    transition: color 150ms ease, transform 150ms ease;
}
.frame-card:hover .frame-card-arrow { color: var(--ink); transform: translateX(3px); }
.frame-card-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.frame-card-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    padding: 0.05rem 0.45rem;
    letter-spacing: 0.04em;
}
.frame-card-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.4rem;
    letter-spacing: 0.005em;
}
.frame-card-subtitle {
    font-size: 0.92rem;
    color: var(--ink-3);
    margin: 0 0 0.85rem;
    line-height: 1.65;
}
.frame-card-summary {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.8;
    margin: 0 0 0.85rem;
}
.frame-card-moves {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.7;
}
.frame-card-moves li {
    padding-left: 1rem;
    position: relative;
}
.frame-card-moves li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--ink-4);
}
.frame-card-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0;
}
.frame-empty {
    font-size: 0.92rem;
    color: var(--ink-3);
    padding: 2.5rem 0;
    text-align: center;
}
@media (max-width: 768px) {
    .frame-grid { grid-template-columns: 1fr; }
}

/* ───── Archive grid / cards (Solutions, Expressions list items) ── */

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}
.archive-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
}

.archive-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms ease, transform 200ms ease;
    overflow: hidden;
}
.archive-card:hover {
    border-color: var(--ink-3);
}
.archive-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}
.archive-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.15);
    transition: filter 250ms ease, transform 400ms ease;
}
.archive-card:hover .archive-card-image img {
    filter: grayscale(0);
    transform: scale(1.02);
}
.archive-card-body {
    padding: 1.2rem 1.3rem 1.1rem;
}
.archive-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.85rem;
    margin: 0 0 0.4rem;
}
.archive-card-title {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.005em;
}
.archive-card-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    margin: 0 0 0.6rem;
    letter-spacing: 0.02em;
}
.archive-card-summary {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.75;
    margin: 0 0 0.7rem;
}
.archive-card-quote {
    border-left: 2px solid var(--ink-3);
    padding-left: 0.85rem;
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-2);
    line-height: 1.7;
}
.archive-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}
.archive-card-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    padding: 0.1rem 0.5rem;
    letter-spacing: 0.04em;
}
.archive-card-items {
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}
.archive-card-items li {
    font-size: 0.86rem;
    color: var(--ink-2);
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--rule-2);
    line-height: 1.6;
}
.archive-card-items li:last-child { border-bottom: 0; }
.archive-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.archive-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-2);
    letter-spacing: 0.02em;
}
.archive-card:hover .archive-card-cta { color: var(--ink); }

/* Expressions intro (multiple paragraphs) */
.expressions-intro p {
    margin: 0 0 0.6rem;
    font-size: 0.96rem;
    color: var(--ink-2);
    line-height: 1.8;
    max-width: 36em;
}
.expressions-intro p:last-child { color: var(--ink-3); font-size: 0.88rem; }

/* ───── Reflections (Venn) ────────────────────────────────── */

.reflections-intro p {
    margin: 0 0 0.6rem;
    font-size: 0.96rem;
    color: var(--ink-2);
    line-height: 1.85;
    max-width: 40em;
}
.reflections-statements {
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
    padding: 0.4rem 0;
}
.reflections-statement {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-2);
}
.reflections-statement:last-child { border-bottom: 0; }
.reflections-statement > summary {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    letter-spacing: 0.04em;
    padding: 0.15rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.reflections-statement > summary::-webkit-details-marker { display: none; }
.reflections-statement > summary::before {
    content: '+';
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    width: 0.9rem;
}
.reflections-statement[open] > summary::before { content: '−'; }
.reflections-statement p {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.85;
    max-width: 40em;
}

.reflections-venn-wrap {
    margin: 2.5rem 0 2rem;
    text-align: center;
    scroll-margin-top: 5rem;
}
.reflections-venn-hint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.venn-stage {
    display: flex;
    justify-content: center;
}
.venn-svg {
    width: 24rem;
    max-width: 100%;
    height: auto;
    display: block;
}
/* Neutral gray Venn — overlap deepens via multiply blend on white bg. */
.venn-circles circle {
    fill: rgba(26, 26, 26, 0.13);
    mix-blend-mode: multiply;
}
.venn-strokes circle {
    fill: none;
    stroke: rgba(26, 26, 26, 0.32);
    stroke-width: 1;
}
.venn-label,
.venn-intersection {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    fill: var(--ink);
    letter-spacing: 0.04em;
    pointer-events: none;
    transition: font-weight 120ms ease, fill 120ms ease;
}
.venn-center { /* same as siblings — no special bold */ }

/* Hover feedback: the label of the region under the cursor goes bold,
   everything else fades slightly. */
.venn-svg[data-hover] .venn-label,
.venn-svg[data-hover] .venn-intersection { fill: var(--ink-3); font-weight: 500; }
.venn-svg[data-hover=""] .venn-label,
.venn-svg[data-hover=""] .venn-intersection { fill: var(--ink); font-weight: 500; }
.venn-svg[data-hover="me"]          [data-region="me"],
.venn-svg[data-hover="human"]       [data-region="human"],
.venn-svg[data-hover="animal"]      [data-region="animal"],
.venn-svg[data-hover="social"]      [data-region="social"],
.venn-svg[data-hover="care"]        [data-region="care"],
.venn-svg[data-hover="reciprocity"] [data-region="reciprocity"],
.venn-svg[data-hover="life"]        [data-region="life"] {
    fill: var(--ink);
    font-weight: 700;
}
.venn-svg[data-active="me"]          [data-region="me"],
.venn-svg[data-active="human"]       [data-region="human"],
.venn-svg[data-active="animal"]      [data-region="animal"],
.venn-svg[data-active="social"]      [data-region="social"],
.venn-svg[data-active="care"]        [data-region="care"],
.venn-svg[data-active="reciprocity"] [data-region="reciprocity"],
.venn-svg[data-active="life"]        [data-region="life"] {
    font-weight: 700;
}

.reflections-venn-pointer {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-left: 0.4rem;
}

/* Two-card hub at the top of Reflections — tab-style toggle */
.reflections-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0 0 2.5rem;
}
.reflections-hub-card {
    display: block;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule);
    text-align: left;
    color: inherit;
    font: inherit;
    padding: 1.4rem 0 1.4rem;
    cursor: pointer;
    transition: padding 200ms ease, border-color 200ms ease;
}
.reflections-hub-card:hover { padding-left: 0.4rem; }
.reflections-hub-card[aria-pressed="true"] {
    border-top-color: var(--ink);
    border-top-width: 2px;
    padding-top: calc(1.4rem - 1px);
}
.reflections-hub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ink-2);
    margin: 0 0 0.5rem;
    letter-spacing: 0.005em;
    transition: color 150ms ease;
}
.reflections-hub-card[aria-pressed="true"] .reflections-hub-title {
    color: var(--ink);
}
.reflections-hub-desc {
    font-size: 0.92rem;
    color: var(--ink-3);
    line-height: 1.75;
    margin: 0;
}
.reflections-hub-card[aria-pressed="true"] .reflections-hub-desc {
    color: var(--ink-2);
}

/* Resources view */
.reflections-resources-intro {
    text-align: left;
    margin: 0 0 1.5rem;
}
.resources-group { margin: 0 0 2.5rem; }
.resources-group-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
    letter-spacing: 0.01em;
}
.resources-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.resources-items li {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.85;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--rule-2);
}
.resources-items li:last-child { border-bottom: 0; }
.resources-item-link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}
.resources-item-link:hover { color: var(--ink-2); }
.resources-item-pending {
    color: var(--ink-3);
    font-style: italic;
}
.resources-item-note {
    color: var(--ink-3);
    font-size: 0.88rem;
}

@media (max-width: 768px) {
    .reflections-hub { grid-template-columns: 1fr; gap: 0; }
}

.reflections-row-empty {
    font-size: 0.9rem;
    color: var(--ink-3);
    line-height: 1.85;
    margin: 1.4rem 0 0;
}

.reflections-panel {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 5rem;
}
.reflections-panel-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule);
}
.reflections-panel-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.01em;
}
.reflections-panel-keywords {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0;
}
.reflections-panel-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--ink-3);
    padding: 0 0.4rem;
    line-height: 1;
}
.reflections-panel-close:hover { color: var(--ink); }
.reflections-footnote {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin: 2.5rem 0 0;
    line-height: 1.7;
}

/* Inbox archive — pending entries shown locally + curated entries */
.inbox-entry-answer-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0.4rem 0 0.3rem;
    text-transform: uppercase;
}
.inbox-entry-pending {
    opacity: 0.7;
}
.inbox-entry-pending .inbox-entry-question {
    color: var(--ink-2);
    font-weight: 400;
}

/* ───── Reflections log layout (legacy, used by panel rows) ─── */

.reflections-region {
    margin-bottom: 3rem;
}
.reflections-region-head {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1.5rem;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
    align-items: baseline;
}
.reflections-region-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reflections-region-title {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.reflections-region-keywords {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    font-weight: 400;
}
.reflections-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1.5rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.reflections-row:last-child { border-bottom: 0; }
.reflections-row-date {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.reflections-row-body { min-width: 0; }
.reflections-row-subtitle {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.4rem;
    letter-spacing: 0.005em;
}
.reflections-row-text {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.78;
    margin: 0;
    white-space: pre-line;
}

/* ───── Project frame (used in main column of project-detail pages) ──── */
/* Visual rhythm of the original homepage: hero + bordered structured cards. */

.project-hero {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.5rem;
}
.project-hero h1 {
    font-size: 1.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    margin: 0.4rem 0 0.6rem;
    letter-spacing: 0.005em;
}
.project-hero-meta {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}
.project-hero-meta span + span::before {
    content: '·';
    margin-right: 0.85rem;
    color: var(--ink-4);
}
.project-hero-summary {
    font-size: 1.02rem;
    color: var(--ink-2);
    line-height: 1.8;
    margin: 0.5rem 0 0;
    max-width: 38em;
}
.project-hero-quote {
    border-left: 2px solid var(--ink-3);
    padding-left: 1rem;
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
    color: var(--ink-2);
    font-style: normal;
    line-height: 1.75;
}

.project-card {
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1rem;
}
.project-card-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 600;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
    letter-spacing: 0.02em;
}
.project-card p {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.75;
}
.project-card p:last-child { margin-bottom: 0; }
.project-card ul, .project-card ol {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.78;
}
.project-card li + li { margin-top: 0.25rem; }

.project-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.project-section {
    margin: 3rem 0;
    scroll-margin-top: 5.5rem;
}
.project-section h2 {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule);
    letter-spacing: 0.01em;
}
.project-section h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.5rem 0 0.6rem;
}
.project-section p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.85;
}
.project-section figure { margin: 1.5rem 0; }
.project-section figure img {
    width: 100%;
    max-width: 560px;
    max-height: 720px;
    object-fit: contain;
    border: 1px solid var(--rule);
    display: block;
    background: #FAFAF8;
}
.project-section figcaption {
    font-size: 0.82rem;
    color: var(--ink-3);
    margin-top: 0.45rem;
    line-height: 1.7;
}
.project-section blockquote {
    border-left: 2px solid var(--ink-3);
    padding-left: 1rem;
    margin: 1.25rem 0;
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.78;
}

/* ───── Project blocks (clean text layout, no boxes) ─────── */

.project-section .section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.project-section .section-lede {
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.85;
    margin: 0.2rem 0 1.4rem;
    font-weight: 400;
}
.project-section .block-list {
    margin: 0.4rem 0 1.2rem;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.85;
}
.project-section .block-list li { margin: 0 0 0.3rem; }
.project-section .block-list li strong { color: var(--ink); font-weight: 600; }

.project-section .meta-list {
    margin: 0.4rem 0 1.4rem;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 0.45rem 1.4rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.85rem;
}
.project-section .meta-list .meta-row {
    display: contents;
}
.project-section .meta-list dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.project-section .meta-list dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.75;
}
.project-section .meta-list + p,
.project-section .meta-list + h3 {
    border-top: 1px solid var(--rule);
    padding-top: 1.2rem;
}

.project-section .block-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    margin: 0.5rem 0 1.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--rule-2);
}
.project-section .block-two-col-cell h4 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.45rem;
}
.project-section .block-two-col-cell .block-list {
    margin: 0;
}

.project-section .block-callout {
    border-left: 2px solid var(--ink-3);
    padding: 0.2rem 0 0.2rem 1.1rem;
    margin: 1rem 0 1.4rem;
}
.project-section .block-callout h4 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.45rem;
}
.project-section .block-callout p {
    margin: 0 0 0.5rem;
    font-size: 0.93rem;
    color: var(--ink-2);
    line-height: 1.8;
}
.project-section .block-callout-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    letter-spacing: 0.02em;
}

.project-section .block-cite {
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

.project-section details {
    margin: 0.7rem 0 1.4rem;
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
    padding: 0.55rem 0;
}
.project-section details > summary {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    letter-spacing: 0.02em;
    padding: 0.15rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.project-section details > summary::-webkit-details-marker { display: none; }
.project-section details > summary::before {
    content: '+';
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    width: 0.9rem;
}
.project-section details[open] > summary::before { content: '−'; }
.project-section .details-body {
    padding-top: 0.6rem;
}

.project-section .image-placeholder {
    margin: 1.2rem 0;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--rule);
    background: transparent;
    text-align: center;
}
.project-section .image-placeholder-label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.1em;
}
.project-section .image-placeholder figcaption {
    margin-top: 0.6rem;
    color: var(--ink-3);
}

.project-section .block-links a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.project-section .block-links a:hover { color: var(--ink-2); }

@media (max-width: 768px) {
    .project-section .block-two-col {
        grid-template-columns: 1fr;
    }
    .project-section .meta-list {
        grid-template-columns: 1fr;
        gap: 0.1rem 0;
    }
    .project-section .meta-list .meta-row {
        display: block;
        padding: 0.4rem 0;
        border-bottom: 1px dashed var(--rule-2);
    }
    .project-section .meta-list dd { margin-top: 0.1rem; }
}

/* ───── Project content overrides ─────────────────────────── */
/* Several project-page renderers in site-content.js emit Tailwind utility
   classes inline (bg-white, border-gray-200, rounded-2xl, text-gray-*).
   To keep the B&W aesthetic without rewriting every renderer, we neutralize
   those utilities inside `.project-content`. */

.project-content {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.85;
}
.project-content .content-section,
.project-content .project-section {
    margin: 0 0 3rem;
    scroll-margin-top: 5.5rem;
}
.project-content h1,
.project-content h2,
.project-content h3,
.project-content h4 {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.project-content h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.project-content h3 { font-size: 1.05rem; font-weight: 600; }
.project-content h4 { font-size: 0.95rem; font-weight: 600; }
.project-content p,
.project-content li {
    color: var(--ink-2);
    line-height: 1.85;
}

/* Tame Tailwind background utilities */
.project-content .bg-white { background: var(--card); }
.project-content .bg-gray-50 { background: var(--bg); }
.project-content .bg-gray-900,
.project-content .bg-black {
    background: #2a2a2a;
    color: #fff;
}
.project-content .bg-gray-900 *,
.project-content .bg-black * { color: inherit; }

/* Tame Tailwind border utilities */
.project-content .border,
.project-content [class*="border-"] {
    border-color: var(--rule);
}
.project-content .border-gray-400,
.project-content .border-l-4 {
    border-color: var(--ink-3);
}
.project-content .border-dashed { border-style: dashed; }

/* Soften rounded utilities to fit the square geometry */
.project-content .rounded-2xl,
.project-content .rounded-xl,
.project-content .rounded-lg,
.project-content .rounded {
    border-radius: 2px;
}
.project-content .rounded-full { border-radius: 999px; }

/* Drop drop-shadows */
.project-content .shadow,
.project-content .shadow-sm,
.project-content .shadow-md,
.project-content .shadow-lg,
.project-content .shadow-xl { box-shadow: none; }

/* Normalize text colors to ink scale */
.project-content .text-gray-900 { color: var(--ink); }
.project-content .text-gray-800 { color: var(--ink); }
.project-content .text-gray-700 { color: var(--ink-2); }
.project-content .text-gray-600 { color: var(--ink-2); }
.project-content .text-gray-500 { color: var(--ink-3); }
.project-content .text-gray-400 { color: var(--ink-4); }
.project-content .text-gray-300 { color: var(--ink-4); }
.project-content .text-white { color: #fff; }

/* Italic is reserved for the original (B&W aesthetic prefers upright);
   blockquotes keep the left border treatment but lose italic. */
.project-content .italic { font-style: normal; }
.project-content blockquote,
.project-content .border-l-4 {
    font-style: normal;
}

/* Drop link underlines except where explicit */
.project-content a:not(.underline) {
    color: var(--ink-2);
}
.project-content a.underline {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Side nav items in the rail (renderer outputs class 'nav-item') */
.rail .nav-item {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    text-decoration: none;
    padding: 0.15rem 0;
    letter-spacing: 0.02em;
    line-height: 1.6;
    background: transparent !important;
    border-radius: 0;
}
.rail .nav-item:hover,
.rail .nav-item.active {
    color: var(--ink);
}
.rail .nav-item.active::before {
    content: '— ';
    color: var(--ink-3);
}

/* Breadcrumb pattern used by project pages */
.project-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.project-breadcrumb a {
    color: var(--ink-3);
    text-decoration: none;
}
.project-breadcrumb a:hover { color: var(--ink); }
.project-breadcrumb span { color: var(--ink-2); }

/* ───── Apple cross-section (README) ─────────────────────── */

.apple-section {
    margin: 0.5rem 0 2.5rem;
    text-align: center;
    scroll-margin-top: 5rem;
}
.apple-hint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.apple-stage {
    display: flex;
    justify-content: center;
}
.apple-svg {
    width: 18rem;
    max-width: 90%;
    height: auto;
    display: block;
}
/* Sketch / fossil-plate aesthetic: thin etched strokes, no heavy fills */
.apple-layer { cursor: pointer; transition: stroke 180ms ease, opacity 180ms ease; }
.apple-skin {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1.1;
}
.apple-skin-inner {
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 0.6;
    pointer-events: none;
}
.apple-flesh {
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 0.9;
}
.apple-core polygon {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1;
    stroke-linejoin: round;
}
.apple-core .apple-seed {
    fill: var(--ink-2);
    stroke: var(--ink);
    stroke-width: 0.5;
    opacity: 0.85;
}
.apple-ticks line {
    stroke: var(--ink-3);
    stroke-width: 0.7;
}
.apple-leader line {
    stroke: var(--ink-3);
    stroke-width: 0.5;
}
.apple-svg:hover .apple-skin  { stroke: var(--ink); }
.apple-svg:hover .apple-flesh { stroke: var(--ink-2); }
.apple-svg:hover .apple-core polygon { stroke: var(--ink); }
.apple-svg[data-active="skin"]  .apple-skin   { stroke: var(--ink); stroke-width: 1.6; }
.apple-svg[data-active="flesh"] .apple-flesh  { stroke: var(--ink); stroke-width: 1.4; }
.apple-svg[data-active="core"]  .apple-core polygon { stroke: var(--ink); stroke-width: 1.5; }
.apple-label {
    font-family: var(--font-serif);
    font-size: 12px;
    fill: var(--ink-3);
    letter-spacing: 0.04em;
    pointer-events: none;
}
.apple-svg[data-active="skin"]  .apple-label-skin,
.apple-svg[data-active="flesh"] .apple-label-flesh,
.apple-svg[data-active="core"]  .apple-label-core { fill: var(--ink); font-weight: 600; }

.readme-sealed {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}
.readme-sealed h2 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 0.8rem;
    letter-spacing: 0.005em;
}
.readme-sealed p {
    color: var(--ink-2);
    line-height: 1.85;
    margin: 0 0 1.2rem;
}

.apple-request {
    margin-top: 1rem;
}
.apple-request-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    margin: 1rem 0 0.35rem;
    text-transform: uppercase;
}
.apple-request-input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.7;
    outline: none;
    resize: vertical;
    min-height: 5rem;
}
.apple-request-input:focus { border-bottom-color: var(--ink-2); }
.apple-request-contact {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 0.92rem;
    outline: none;
}
.apple-request-contact:focus { border-bottom-color: var(--ink-2); }
.apple-request-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ───── Article (readme) ──────────────────────────────────── */

/* README article shares the same width as other long-form pages. */
.article-main {
    max-width: none;
}
.article-main h1, .article-main h2, .article-main h3, .article-main h4 {
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.article-main h1 {
    font-size: 1.85rem;
    margin: 0 0 1.2rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--rule);
}
.article-main h2 {
    font-size: 1.2rem;
    margin: 2.5rem 0 0.8rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--rule);
}
.article-main h3 {
    font-size: 1rem;
    margin: 1.6rem 0 0.6rem;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.article-main h4 {
    font-size: 0.95rem;
    margin: 1.2rem 0 0.5rem;
    font-weight: 600;
}
.article-main p, .article-main li {
    font-size: 0.96rem;
    color: var(--ink-2);
    line-height: 1.85;
}
.article-main p { margin: 0 0 0.95rem; }
.article-main ul, .article-main ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}
.article-main li { margin-bottom: 0.35rem; }
.article-main blockquote {
    border-left: 2px solid var(--ink-3);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--ink-2);
    font-size: 0.94rem;
    line-height: 1.8;
}
.article-main code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: #F0EFEA;
    padding: 0 0.3em;
    border-radius: 2px;
}
.article-main strong { color: var(--ink); font-weight: 600; }
.article-main .article-lede {
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.85;
    margin: 0 0 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--rule);
}
.article-main em { font-style: italic; color: var(--ink-2); }
.article-main a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.article-main a:hover { color: var(--ink-2); }

/* ───── Home credits ──────────────────────────────────────── */

.home-credits {
    margin: 3rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-2);
}
.home-credits-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.7rem;
}
.home-credits-line {
    margin: 0 0 0.3rem;
    font-size: 0.84rem;
    color: var(--ink-3);
    line-height: 1.75;
}

/* ───── Footer ────────────────────────────────────────────── */

.site-footer {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 1.5rem var(--shell-pad) 2.5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    text-align: center;
    letter-spacing: 0.02em;
}

/* ───── Mobile (≤ 768px): S5 frontispiece collapse ───────── */
/* Left rail folds into a compact top strip; main column narrows
   and the hero centers — book-frontispiece feel for phones. */

@media (max-width: 768px) {
    .banner-inner {
        padding: 0.9rem 1.25rem;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    .nav-links {
        gap: 1.1rem;
        font-size: 0.74rem;
    }

    .shell {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 2rem 1.25rem 3rem;
        max-width: 32rem;
    }
    .shell-gutter { display: none; }

    /* Rail collapses to a horizontal meta strip atop the main column */
    .rail {
        position: static;
        padding: 0 0 1.5rem;
        margin: 0 0 1.5rem;
        border-bottom: 1px solid var(--rule);
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        align-items: baseline;
        text-align: left;
    }
    .rail-label {
        margin: 0;
        font-size: 0.66rem;
    }
    .rail-label + .rail-label { margin-top: 0; }
    .rail-text {
        margin: 0;
        font-size: 0.8rem;
        width: 100%;
    }
    .rail-marker { margin: 0; font-size: 0.68rem; }
    .rail-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 0.9rem;
        width: 100%;
    }
    .rail-nav a { font-size: 0.7rem; }

    /* Frontispiece treatment for the hero on phones */
    .page-hero {
        text-align: center;
        margin-bottom: 2.5rem;
        padding-bottom: 1.8rem;
        border-bottom: 1px solid var(--rule);
    }
    .page-heading {
        font-size: 1.4rem;
        line-height: 1.7;
        text-align: center;
    }
    .page-eyebrow { text-align: center; }
    .intro-label { text-align: center; }
    .intro-points li {
        text-align: center;
        padding-left: 0;
    }
    .intro-points li::before { display: none; }
    .intro-points {
        margin-bottom: 2.5rem;
    }

    /* Section cards collapse to single column rows */
    .section-card {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .section-card-footer {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        margin-top: 0.4rem;
    }

    /* Reflections rows collapse */
    .reflections-region-head,
    .reflections-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .reflections-row { padding: 1rem 0; }

    /* Project hero centers like a frontispiece */
    .project-hero {
        text-align: center;
        border-bottom: 1px solid var(--rule);
    }
    .project-hero-meta { justify-content: center; }
    .project-hero h1 {
        font-size: 1.55rem;
        line-height: 1.55;
    }
    .project-hero-summary, .project-hero-quote { text-align: left; }

    .project-cards-grid {
        grid-template-columns: 1fr;
    }

    .article-main {
        max-width: 100%;
    }
}

/* ───── Smaller phones ────────────────────────────────────── */

@media (max-width: 420px) {
    .nav-links { gap: 0.85rem; font-size: 0.7rem; }
    .page-heading { font-size: 1.25rem; }
}