/* ================== Very Markova — Midcentury CSS
   (page-grid wrapper, mobile drawer, higher-contrast lights, zippy headers)
   Integrated with Depth + Palette Boost
   ================== */

/* Self-hosted Sorts Mill Goudy – WOFF2 first, WOFF fallback */
@font-face {
    font-family: "Sorts Mill Goudy";
    src:
        url("/assets/SortsMillGoudy-Regular.woff2") format("woff2"),
        url("/assets/SortsMillGoudy-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sorts Mill Goudy";
    src:
        url("/assets/SortsMillGoudy-Italic.woff2") format("woff2"),
        url("/assets/SortsMillGoudy-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

html {
    font-synthesis: weight style;
}

/* allow synthetic bold since you don’t have one */
:root {
    --fw-bold: 700;
}

/* ------------------ Design Tokens ------------------ */
:root {
    /* Core palette — LIGHT (boosted) */
    --paper: #ead9be;
    --ink: #16110b;
    --muted: #443b33;

    --accent: #7a1f22;
    --accent-2: #0f5a45;
    --accent-3: #b88314;
    --rule: #b29b7a;

    /* Typographic rhythm */
    --lh: 1.4;
    --font-serif: "Sorts Mill Goudy", Garamond, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout scale */
    --maxw: 78rem;
    --r: 0.625rem;
    /* 10px */

    /* Type scale */
    --body-size: 1.2rem;
    /* ~19.2px if root=16 */
    --h1: 2.5rem;
    --h2: 2rem;
    --h3: 1.5rem;

    /* ================== Depth system ================== */
    --bg-soft-ratio: 84%;
    --bg-softer-ratio: 88%;
    --bg-card-ratio: 74%;
    --bg-card-2-ratio: 66%;

    /* Derived elevation backgrounds */
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);

    /* Decorative rule pattern */
    --bg-sweet:
        linear-gradient(var(--rule), var(--rule)) 0 0.125rem/100% 1px no-repeat,
        linear-gradient(var(--rule), var(--rule)) 0 0.5rem/100% 1px no-repeat,
        repeating-linear-gradient(to right,
            color-mix(in oklab, var(--accent-3) 85%, transparent) 0 0.375rem,
            color-mix(in oklab, var(--muted) 45%, transparent) 0.375rem 0.75rem);

    /* Shared decorative rule tokens (single source of truth) */
    --rule-strip-bg: var(--bg-sweet);
    --rule-strip-mask: linear-gradient(to right, #000 0%, transparent);
    --rule-strip-height: .6875rem;

    /* Focus and selection */
    --focus: color-mix(in oklab, var(--accent-2) 72%, white);
    --select-bg: color-mix(in oklab, var(--accent-2) 28%, var(--paper));
    --select-ink: var(--ink);

    /* Link underline thickness token */
    --link-underline-thickness: 0.125rem;
    /* 2px */

    /* ------------------ Header sizing controls ------------------ */
    --header-pad-y: 1rem;
    --header-pad-x: 1rem;
    --header-gap: 1rem;
    --title-scale: 1;
    --intro-ms: 3000ms;
}

/* Optional global depth crank */
html[data-depth="deep"] {
    --bg-soft-ratio: 82%;
    --bg-softer-ratio: 86%;
    --bg-card-ratio: 72%;
    --bg-card-2-ratio: 62%;
}

html[data-depth="max"] {
    --bg-soft-ratio: 80%;
    --bg-softer-ratio: 84%;
    --bg-card-ratio: 68%;
    --bg-card-2-ratio: 58%;
}

/* rem baseline + language hint */
html {
    font-size: 100%;
    hyphens: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: auto;
    min-height: 100%;
}

/* ------------------ Base ------------------ */
body {
    display: grid;
    grid-template-columns: 1fr clamp(15rem, 30%, 24rem);
    grid-template-areas:
        "buttons buttons"
        "main    aside"
        "footer  aside";
    grid-template-rows: auto;
    align-items: start;
    align-content: start;
    gap: 1rem;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 1rem;

    background:
        radial-gradient(75rem 37.5rem at 18% -10%, color-mix(in oklab, var(--accent-3) 11%, transparent) 0, transparent 62%),
        radial-gradient(62.5rem 32.5rem at 120% 10%, color-mix(in oklab, var(--accent) 7%, transparent) 0, transparent 57%),
        var(--paper);
    color: var(--ink);

    font-family: var(--font-serif);
    font-size: var(--body-size);
    line-height: var(--lh);
    letter-spacing: .01em;
    text-rendering: optimizeLegibility;
    font-synthesis: weight style;
}

b,
strong {
    font-weight: var(--fw-bold);
}

/* Global text defaults */
main,
article,
section,
p,
li,
blockquote,
figcaption {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

p+p {
    margin-top: 1rem;
}

/* Selection */
::selection {
    background: var(--select-bg);
    color: var(--select-ink);
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    [data-site] {
        opacity: 1 !important;
    }

    [data-intro] {
        display: none !important;
    }
}

/* ------------------ Toolbar ------------------ */
#buttons {
    grid-area: buttons;
    align-self: start;
    display: flex;
    gap: .5rem;
    padding: .5rem 1rem;
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--bg-soft);
    justify-content: flex-end;
    /* main axis */
    align-items: center;
    /* cross axis */
    min-height: 0;
    position: static;

    --btn-bg: transparent;
    --btn-ink: var(--ink);
    --btn-bd: color-mix(in oklab, var(--rule) 78%, var(--ink));
    --btn-bg-hover: color-mix(in oklab, var(--accent-2) 18%, var(--bg-softer));
    --btn-bd-hover: color-mix(in oklab, var(--accent-2) 45%, var(--rule));
}

#buttons :is(a, button) {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: .45rem .7rem .25rem .7rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 400 1rem/1 var(--font-serif);
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
    line-height: 1;
}

#buttons p {
    margin: 0;
    padding-top: .5rem;
    border: 0;
}

#buttons :is(a, button):where(:hover, :focus-visible) {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bd-hover);
}

#buttons :is(a, button):active {
    transform: translateY(0.0625rem);
}

@media (min-width: 55em) {
    [data-hide-lg] {
        display: none !important;
    }

    #buttons {
        position: static;
    }
}

/* ------------------ Grid areas ------------------ */
main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

/* ------------------ Headers ------------------ */
#page-header {
    padding: var(--header-pad-y) var(--header-pad-x);
    border: 0.09375rem solid var(--rule);
    /* 1.5px */
    border-radius: var(--r);
    background: var(--bg-softer);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 1px 0 rgba(0, 0, 0, .08);
}

/* Title scales */
#page-header {
    --title-scale-home: calc(var(--title-scale) * 1.6);
    --title-scale-nonhome: calc(var(--title-scale) * 1);
}

#meta {
    display: inline-block;
    margin: 0;
    padding: 0;
    font: 400 1.4rem/var(--lh) var(--font-serif);
    letter-spacing: .1em;
    text-transform: lowercase;
    color: color-mix(in oklab, var(--accent-2) 82%, var(--ink));
}

body:not([data-home]) #page-header :is(#page-title, #site-name, h1) {
    margin: 0;
    font-weight: var(--fw-bold);
    padding: 0;
    font-size: clamp(calc(2.2rem * var(--title-scale-nonhome)), calc((1.4rem + 3.8vw) * var(--title-scale-nonhome)), calc(3.4rem * var(--title-scale-nonhome)));
}

body[data-home] #page-header :is(#name, #site-name, h1) {
    margin: 0;
    font-weight: var(--fw-bold);
    padding: 0;
    font-size: clamp(calc(2.2rem * var(--title-scale-home)), calc((1.4rem + 3.8vw) * var(--title-scale-home)), calc(3.4rem * var(--title-scale-home)));
}

#page-header [data-dek] {
    max-width: 20ch;
    margin: .25rem 0 var(--header-gap);
    color: color-mix(in oklab, var(--muted) 92%, var(--ink));
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.45;
}

/* header decorative rule now uses shared tokens */
#page-header .rule {
    height: var(--rule-strip-height);
    margin: .5rem 0 calc(var(--header-gap));
    background: var(--rule-strip-bg);
    -webkit-mask-image: var(--rule-strip-mask);
    mask-image: var(--rule-strip-mask);
    opacity: .98;
}

#page-header #site-tag {
    margin: 0 0 .5rem;
    color: color-mix(in oklab, var(--muted) 90%, var(--ink));
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    max-width: 70ch;
}

@media (max-width: 50em) {
    #page-header {
        padding: .9rem .95rem 1rem;
    }

    #page-header .rule {
        height: .625rem;
        margin-top: .55rem;
    }
}

/* ------------------ Content ------------------ */
main article {
    margin-top: 1rem;
    padding: .5rem 1rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--bg-card);
    box-shadow: 0 0.03125rem 0 rgba(0, 0, 0, .10);
    /* 0.5px */
}

main h1 {
    margin: .5rem 0 0;
    padding: 0;
    font-size: clamp(1.375rem, 1rem + 1.8vw, 1.9rem);
    line-height: 1;
}

main h2 {
    margin: 1rem 0;
    font-weight: var(--fw-bold);
    font-size: var(--h2);
    line-height: 1.3;
    letter-spacing: .01em;
    font-family: "Sorts Mill Goudy", "Goudy Bookletter 1911", serif;
}

main h3 {
    margin: .75rem 0;
    font-weight: var(--fw-bold);
    font-size: var(--h3);
    line-height: 1.35;
    letter-spacing: .01em;
}

.lead {
    margin: 0 0 0;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

article p {
    margin: 1rem 0 0;
    padding: 0;
}

/* Circular back-to-top */
#topbtn {
    --p: 0%;
    position: fixed;
    bottom: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(var(--bg-soft) 45%, transparent 46%) padding-box,
        conic-gradient(var(--accent-3) var(--p), color-mix(in oklab, var(--accent-3) 15%, transparent) 0);
    border: .125rem solid var(--accent-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-3);
    font: 700 1.5rem/1 var(--font-serif, ui-serif);
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s, transform .2s;
    z-index: 999;
}

#topbtn::before {
    content: "▴";
    position: relative;
    top: -0.05em;
    text-shadow: 0 1px 0 color-mix(in oklab, var(--paper) 60%, transparent);
}

#topbtn:hover {
    opacity: 1;
    transform: scale(1.2);
}

@media (max-width:50em) {
    #topbtn {
        display: none;
    }
}

/* ===== Article underline ===== */
:root {
    --heading-underline-thickness: .4rem;
}

main article :is(h1, h2, h3) {
    position: relative;
    padding-bottom: .2em;
    font-variant: small-caps;
    letter-spacing: .03em;
}

main article :is(h1, h2, h3)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(var(--heading-underline-thickness), .22rem);
    background: var(--accent-3);
    pointer-events: none;
    background-image: linear-gradient(to right, var(--accent-3) 0%, transparent);
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
}

/* keep link underline behavior consistent */
main a:not(.plain):not(nav a):not(#buttons a)::after {
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Cards and grids */
[data-card] {
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--bg-card);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    box-shadow: 0 0.03125rem 0 rgba(0, 0, 0, .10);
}

[data-card] p {
    margin: 0;
    padding: 0;
}



.grid {
    display: grid;
    gap: 1rem;
    grid-template-rows: min-content auto min-content;
    margin-top: 1rem;
}

/* ------------------ Sidebar ------------------ */
aside {
    position: sticky;
    top: 1rem;
    align-self: start;
    height: fit-content;
    padding: 0;
    z-index: 1;
}

/* ================== Ledger nav ================== */
nav[data-nav="ledger"] {
    --leader: currentColor;
    margin: 0 0 1rem;
    padding: 1rem .25rem 1rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--bg-soft);
}

nav[data-nav="ledger"] [data-sec] {
    margin: .5rem 0 .25rem;
    font: small-caps 700 1.4rem/1 var(--font-serif);
    letter-spacing: .1em;
    color: var(--accent-2);
}

nav[data-nav="ledger"] ol {
    list-style: none;
    margin: .1rem 0 .6rem;
    padding: 0;
    counter-reset: item;
}

nav[data-nav="ledger"] li {
    position: relative;
    counter-increment: item;
    padding-left: 2.2rem;
}

nav[data-nav="ledger"] li+li {
    margin-top: .2em;
}

nav[data-nav="ledger"] li::before {
    content: counter(item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .1rem;
    width: 1.6rem;
    text-align: center;
    font: 700 .8rem/1 var(--font-mono);
    color: var(--accent);
    border: 1px solid var(--rule);
    border-radius: .1875rem;
    /* 3px */
    background: color-mix(in oklab, var(--paper) 90%, white);
    padding: .2rem;
    transition: all .3s ease;
}

nav[data-nav="ledger"] a {
    display: block;
    padding: .0rem 0rem;
    border-radius: var(--r);
    position: relative;
    text-decoration: none;
    color: var(--ink);
    font: small-caps 600 1/1 var(--font-serif);
    letter-spacing: .06em;
    background: none;
    transition: color .6s cubic-bezier(.25, .1, .25, 1), transform .6s ease;
}

nav[data-nav="ledger"] a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .2rem;
    width: 100%;
    height: var(--link-underline-thickness);
    background-color: var(--accent-3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
}

nav[data-nav="ledger"] li:has([data-current="true"]) {
    font-variant: small-caps;
    font-weight: bold;
    outline: 0;
}

nav[data-nav="ledger"] a:where(:hover, :focus-visible) {
    outline: 0;
    color: var(--accent-2);
}

nav[data-nav="ledger"] a:where(:hover, :focus-visible)::after,
nav[data-nav="ledger"] a[data-current="true"]::after {
    transform: scaleX(1);
}

nav[data-nav="ledger"] a:active {
    transform: translateY(.0625rem);
}

nav[data-nav="ledger"] li:has(a:where(:hover, :focus-visible, [data-current="true"]))::before {
    background: var(--accent-2);
    color: var(--paper);
    border-color: color-mix(in oklab, var(--accent-2) 40%, var(--rule));
}

/* ===== Unordered lists ===== */
main article ul {
    margin: 1rem 0;
    padding-left: 0rem;
    list-style: none;
}

main article li {
    position: relative;
    margin: .4rem 0;
    padding-left: 2.2rem;
}

/* Brass tick */
main article li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 2rem;
    height: .25rem;
    /* 4px */
    background: linear-gradient(to right, var(--accent-3) 0%, color-mix(in oklab, var(--accent-3) 45%, transparent) 100%);
    mask: linear-gradient(to right, #000 0%, transparent);
}

main article li>ul {
    margin-top: .25rem;
    padding-left: 1.1rem;
}

main article li>ul>li::before {
    width: .55rem;
    height: .125rem;
    /* 2px */
    background: linear-gradient(to right, color-mix(in oklab, var(--accent-3) 70%, var(--muted)) 0%, transparent 100%);
}

main article li>ul>li>ul>li::before {
    width: .45rem;
    height: .0625rem;
    /* 1px */
    background: var(--muted);
}

/* Rhythm */
main article :is(h2, h3)+ul {
    margin-top: .5rem;
}

/* High-contrast / forced colors */
@media (prefers-contrast: more),
(forced-colors: active) {
    main article ul {
        list-style: disc outside;
        padding-left: 1.25rem;
    }

    main article li {
        padding-left: 0;
    }

    main article li::before {
        content: none;
    }
}

/* ------------------ Links and Text ------------------ */
h1,
h2,
h3 {
    text-align: left;
    font-variant: small-caps;
}

hr {
    height: var(--heading-underline-thickness);
    background: var(--accent-3);
    pointer-events: none;
    background-image: linear-gradient(to right, var(--accent-3) 0%, transparent);
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
    margin: 1rem auto;
}

/* underline behavior */
a:not(img):not(nav a):not(#buttons a)::after {
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

a {
    color: var(--rule);
}

a:where(:hover, :focus-visible) {
    color: var(--accent-3);
}

a:not(.plain):not(nav a):not(#buttons a) {
    position: relative;
    text-decoration: none;
    color: var(--accent-3);
    transition: color .2s ease;
}

a:not(.plain):not(nav a):not(#buttons a)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .08em;
    width: 100%;
    height: var(--link-underline-thickness);
    background-color: var(--accent-3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    mask: linear-gradient(to right, #000 0%, transparent);
}

a:not(.plain):not(nav a):not(#buttons a):where(:hover, :focus-visible) {
    color: var(--accent-3);
}

a:not(.plain):not(nav a):not(#buttons a):where(:hover, :focus-visible)::after {
    transform: scaleX(1);
}

@media (prefers-contrast: more) {
    a:not(.plain):not(nav a):not(#buttons a) {
        text-decoration: underline;
        text-decoration-thickness: var(--link-underline-thickness);
        text-underline-offset: .14em;
    }

    a:not(.plain):not(nav a):not(#buttons a)::after {
        display: none;
    }
}

/* Focus ring */
:where(a, button, [tabindex]):focus-visible {
    outline: .125rem solid var(--focus);
    /* 2px */
    outline-offset: .125rem;
    /* 2px */
    border-radius: calc(var(--r) - .125rem);
    /* var(--r) - 2px */
}

/*! keep:start */
/* ================== Intro Film-Leader Overlay ================== */
[data-site] {
    opacity: 0;
    transition: opacity .45s ease;
    animation: site-reveal .45s ease calc(var(--intro-ms) - 150ms) forwards;
}

[data-intro] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--paper);
    color: var(--ink);
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: film-start var(--intro-ms) cubic-bezier(.2, .8, .1, 1) both, intro-dismiss 1ms linear calc(var(--intro-ms)) forwards;
}

[data-intro][hidden] {
    display: none;
}

[data-intro] [data-frame] {
    position: relative;
    padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 3rem);
    filter: contrast(1.02) saturate(.98);
    animation: focus-jitter 900ms ease-in-out 2;
}

[data-intro]::before,
[data-intro]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

[data-intro]::before {
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
    opacity: .18;
    animation: scan-flick 120ms steps(2) 8;
}

[data-intro]::after {
    width: 8%;
    left: 46%;
    top: -10%;
    bottom: -10%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .9), transparent);
    filter: blur(.0625rem);
    opacity: 0;
    animation: gate-flare 420ms ease 160ms 1;
}

[data-intro] [data-wordmark] {
    margin: 0;
    font: 700 clamp(2.4rem, 2rem + 5vw, 6rem)/1 "Sorts Mill Goudy", Garamond, serif;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    width: 0ch;
    --chars: 15;
    /* m i d c e n t u r y . n o w */
    animation: type-steps calc(var(--intro-ms) - 700ms) steps(var(--chars)) 200ms forwards,
        kerning-settle 360ms ease calc(var(--intro-ms) - 540ms) forwards;
}

/* film-leader rule now uses shared tokens, retains animations */
[data-intro] [data-rule] {
    height: var(--rule-strip-height);
    margin-top: .5rem;
    position: relative;
    background: var(--rule-strip-bg);
    -webkit-mask-image: var(--rule-strip-mask);
    mask-image: var(--rule-strip-mask);
    width: 0%;
    transform-origin: left;
    animation: rule-sweep 780ms cubic-bezier(.18, .9, .2, 1.02) calc(var(--intro-ms) - 620ms) forwards,
        rule-settle 420ms cubic-bezier(.2, .8, .2, 1) calc(var(--intro-ms) - 60ms) forwards;
}

@keyframes film-start {
    0% {
        filter: brightness(.75) contrast(1.1)
    }

    6% {
        filter: brightness(1.05) contrast(1.15)
    }

    12% {
        filter: brightness(.9) contrast(1.05)
    }

    20% {
        filter: brightness(1) contrast(1.06)
    }

    45% {
        filter: brightness(.98)
    }

    100% {
        filter: none
    }
}

@keyframes focus-jitter {
    0% {
        transform: translateY(.6px) scaleX(1.0015)
    }

    50% {
        transform: translateY(-.6px) scaleX(.9985)
    }

    100% {
        transform: none
    }
}

@keyframes scan-flick {
    to {
        opacity: .12
    }
}

@keyframes gate-flare {
    0% {
        opacity: 0;
        transform: translateX(-2%)
    }

    30% {
        opacity: .9
    }

    100% {
        opacity: 0;
        transform: translateX(2%)
    }
}

@keyframes type-steps {
    to {
        width: calc(var(--chars) * 1ch)
    }
}

@keyframes kerning-settle {
    to {
        letter-spacing: .02em
    }
}

@keyframes rule-sweep {
    to {
        width: 100%
    }
}

@keyframes rule-settle {
    from {
        transform: scaleX(1.02)
    }

    to {
        transform: none
    }
}

@keyframes site-reveal {
    to {
        opacity: 1
    }
}

@keyframes intro-dismiss {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/*! keep:end */

/* ================== Non-Home Graceful Fade-In ================== */
body:not([data-home]) [data-site] {
    opacity: 0;
    animation: page-fadein .8s ease-out .1s forwards;
}

body:not([data-home])> :where(main, footer) {
    opacity: 0;
    transform: translateY(.4rem);
    filter: blur(.09375rem);
    /* 1.5px */
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    animation: page-fadein 1s ease-out 1s forwards;
}

/* Sticky bits */
body:not([data-home])> :where(#buttons, aside) {
    opacity: 0;
    transform: translateY(.4rem);
    filter: blur(.09375rem);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    animation: page-fadein 1s ease-out 1s forwards;
}

@keyframes page-fadein {
    from {
        opacity: 0;
        transform: translateY(.4rem);
        filter: blur(.09375rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

body[data-home].intro-skip> :where(#buttons, main, aside, footer) {
    opacity: 0;
    transform: translateY(.4rem);
    filter: blur(.09375rem);
    will-change: opacity, transform, filter;
    animation: page-fadein .8s ease-out .1s forwards;
}

body[data-home].intro-skip [data-site] {
    opacity: 1;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {

    body[data-home].intro-skip> :where(#buttons, main, aside, footer),
    body:not([data-home])> :where(#buttons, main, aside, footer) {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}

/* Kill intro on narrow screens */
@media (max-width:50em) {
    [data-intro] {
        animation: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    [data-site] {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ------------------ Footer ------------------ */
footer {
    margin: 0;
    color: var(--muted);
    padding: .75rem 1.2rem;
    border: .09375rem solid var(--rule);
    /* 1.5px */
    border-radius: var(--r);
    background: var(--bg-softer);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    font-size: .95rem;
    line-height: 1.5;
    font-family: var(--font-serif);
}

/* Drawer fixes on mobile */
@media (max-width:55em) {
    body>aside {
        animation: none !important;
        filter: none !important;
    }

    aside {
        transform: translateX(100%) !important;
    }

    body[data-nav="open"] aside {
        transform: translateX(0) !important;
    }
}

/* Make drawer visible again on mobile */
@media (max-width:55em) {
    body>aside {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    aside {
        transform: translateX(100%) !important;
    }

    body[data-nav="open"] aside {
        transform: translateX(0) !important;
    }
}

/* ================== Drawer Backdrop Element ================== */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .2);
    backdrop-filter: blur(.0625rem);
    /* 1px */
    z-index: 55;
    display: none;
}

/* ------------------ Mobile: single column + drawer ------------------ */
@media (max-width:55em) {
    body {
        grid-template-columns: 1fr;
        padding-top: 0;
        grid-template-areas: "buttons" "main" "footer";
    }

    aside {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(85vw, 24rem);
        max-width: 24rem;
        height: 100dvh;
        overflow: auto;
        transform: translateX(100%);
        transition: transform .22s ease;
        z-index: 60;
        padding: 1rem;
        border-left: .09375rem solid var(--rule);
        /* 1.5px */
        background: var(--bg-softer);
        box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
        will-change: transform;
        contain: layout paint;
        overscroll-behavior: contain;
    }

    body[data-nav="open"] aside {
        transform: translateX(0);
    }

    body[data-nav="open"] .nav-backdrop {
        display: block;
    }

    body[data-nav="open"]::before {
        content: none !important;
    }

    body[data-nav="open"] {
        overflow: hidden;
        touch-action: none;
    }

    #buttons {
        position: sticky;
        top: 0;
        z-index: 25;
        isolation: isolate;
        margin-inline: -1rem;
        width: calc(100% + 2rem);
        margin-top: calc(-1rem - env(safe-area-inset-top));
        padding-top: .5rem;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        background: var(--bg-soft);
    }

    aside [data-nav-close] {
        appearance: none;
        position: sticky;
        top: 0;
        margin: -1rem -1rem 1rem;
        padding: .75rem 1rem;
        width: calc(100% + 2rem);
        border: 0;
        border-bottom: 1px solid var(--rule);
        background: var(--bg-softer);
        text-align: right;
        font: 600 1rem/1 var(--font-serif);
        color: var(--accent-2);
        cursor: pointer;
    }

    @supports (-webkit-touch-callout:none) {
        #buttons {
            position: -webkit-sticky;
            top: 0;
        }
    }
}

/* optional: notch-perfect variant for iOS devices with safe areas */
@supports (padding: max(0px)) {
    @media (max-width:55em) {
        #buttons {
            margin-inline: calc(-1rem - env(safe-area-inset-left));
            width: calc(100% + 2rem + env(safe-area-inset-left) + env(safe-area-inset-right));
        }
    }
}

/* ------------------ Alternate Palettes (LIGHTS strengthened) ------------------ */
html[data-theme="ink"] {
    --paper: #e8d7bd;
    --ink: #140f0a;
    --muted: #41382f;
    --accent: #702017;
    --accent-2: #0a5c44;
    --accent-3: #c08c1a;
    --rule: #a98f6f;
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
}

html[data-theme="sage"] {
    --paper: #e6ebdc;
    --ink: #130f0b;
    --muted: #453e35;
    --accent: #552519;
    --accent-2: #255b41;
    --accent-3: #958017;
    --rule: #b5c29f;
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
}

html[data-theme="rose"] {
    --paper: #ecdde0;
    --ink: #181113;
    --muted: #514245;
    --accent: #7b2035;
    --accent-2: #553172;
    --accent-3: #a76e79;
    --rule: #bea5ad;
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
}

html[data-theme="rose"] body {
    background:
        radial-gradient(68.75rem 32.5rem at 15% -10%, color-mix(in oklab, var(--accent-3) 11%, transparent) 0, transparent 62%),
        radial-gradient(56.25rem 27.5rem at 120% 10%, color-mix(in oklab, var(--accent) 8%, transparent) 0, transparent 57%),
        var(--paper);
}

html[data-theme="lilac"] {
    --paper: #d9d6df;
    --ink: #16131a;
    --muted: #4a4453;
    --accent: #53348e;
    --accent-2: #286662;
    --accent-3: #8089c9;
    --rule: #bdb6cd;
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
}

/* ------------------ Darks (retuned) ------------------ */
html[data-theme="noir"] {
    --paper: #2f241b;
    --ink: #f6efe5;
    --muted: #d2c4b2;
    --rule: #4f463b;
    --accent: #f1cb73;
    --accent-2: #f1cb73;
    --accent-3: #f1cb73;
    --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
    --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
    --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
    --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
    --lh: 1.5;
    --focus: color-mix(in oklab, var(--accent) 78%, white);
    --select-bg: color-mix(in oklab, var(--accent) 36%, var(--paper));
    --select-ink: var(--ink);
    color-scheme: dark;
}

/* auto-dark fallback when no data-theme is set */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --paper: #2e2722;
        --ink: #f3ede3;
        --muted: #cdbfae;
        --rule: #5a5044;
        --accent: #f1cb73;
        --accent-2: #f1cb73;
        --accent-3: #f1cb73;
        --bg-soft: color-mix(in oklab, var(--paper) var(--bg-soft-ratio), white);
        --bg-softer: color-mix(in oklab, var(--paper) var(--bg-softer-ratio), white);
        --bg-card: color-mix(in oklab, var(--paper) var(--bg-card-ratio), white);
        --bg-card-2: color-mix(in oklab, var(--paper) var(--bg-card-2-ratio), white);
        --lh: 1.5;
        --focus: color-mix(in oklab, var(--accent) 72%, white);
        --select-bg: color-mix(in oklab, var(--accent) 30%, var(--paper));
        --select-ink: var(--ink);
        color-scheme: dark;
    }
}

/* ================== Legacy portrait modal (kept aligned) ================== */
.portrait-modal {
    border: none;
    padding: 0;
    background: none;
    backdrop-filter: blur(1.25px);
}

.portrait-modal::backdrop {
    background: color-mix(in oklab, var(--accent-3) 24%, rgba(0, 0, 0, .45));
    backdrop-filter: blur(1.25px);
}

.portrait-modal img {
    max-width: 80vw;
    max-height: 90vh;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow:
        0 0 0 6px color-mix(in oklab, var(--accent-3) 32%, transparent),
        0 0 24px 10px color-mix(in oklab, var(--accent-3) 22%, transparent),
        0 10px 28px color-mix(in oklab, var(--ink) 18%, transparent);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ================== Chat Logs — Markova style (attribute-only) ================== */
:root {
    --portrait-col: 12rem;
}

/* Column width token */

/* Wrapper */
[data-chat] {
    display: block;
    margin-inline: auto;
    max-width: min(var(--maxw), 92vw);
    padding: 0rem;
}

[data-chat] li::before {
    content: none !important;
}

[data-chat] ol {
    margin-top: 1rem;
}

[data-chat] li {
    padding-left: 0;
    margin-top: 0rem;
}

/* Header */
[data-chat-head]>h1 {
    margin: 0 0 .25rem;
    font-variant: small-caps;
    letter-spacing: .02em;
}

[data-chat-meta] {
    margin: 0;
    color: color-mix(in oklab, var(--ink) 70%, var(--paper));
}

/* Log list */
[data-chat-log] {
    list-style: none;
    padding: 0;
    margin: 0 0;
    display: grid;
    gap: 1rem;
}

/* Message block: portrait + bubble */
[data-msg] {
    display: grid;
    grid-template-columns: var(--portrait-col) 1fr;
    gap: 1rem;
    align-items: start;
}

/* Portrait figure */
[data-portrait] {
    margin: 0;
    text-align: center;
}

[data-portrait] a[data-portrait-link] {
    display: inline-block;
    text-decoration: none;
}

[data-portrait] picture,
[data-portrait] img {
    display: block;
    width: 100%;
    height: auto;
}

[data-portrait] img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: calc(var(--r) - 2px);
    border: 1px solid color-mix(in oklab, var(--rule) 80%, var(--ink));
    background: var(--bg-softer);
}

/* Speech bubble */
[data-bubble] {
    position: relative;
    margin-top: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--rule);
    border-radius: calc(var(--r) - 1px);
    background: var(--paper);
    color: var(--ink);
}

[data-bubble] p:first-of-type {
    margin-top: .3em;
}

[data-bubble-head] {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .25rem;
}

[data-speaker-name] {
    font-variant: small-caps;
    font-size: 1.4rem;
    text-align: left;
    display: block;
    margin-bottom: .3em;
}

[data-time] {
    color: color-mix(in oklab, var(--ink) 35%, var(--paper));
}

[data-text] {
    margin: 0;
    line-height: var(--lh);
}

/* Subtle tints per speaker key */
[data-msg][data-speaker="cathy"] [data-bubble] {
    background: color-mix(in oklab, var(--paper) 96%, var(--accent-3));
}

[data-msg][data-speaker="anna"] [data-bubble],
[data-msg][data-speaker="other"] [data-bubble] {
    background: color-mix(in oklab, var(--paper) 96%, var(--accent-2));
}

/* Stack on phones */
@media (max-width:720px) {
    [data-msg] {
        grid-template-columns: 1fr;
    }

    [data-portrait] {
        order: -1;
        max-width: var(--portrait-col);
        margin-inline: auto;
    }
}

/* Portrait link underline exclusions */
a[data-portrait-link]::after {
    content: none !important;
}

a[data-portrait-link] {
    color: inherit;
    cursor: zoom-in;
}

/* Aesthetic Modal for Portraits (attribute-only) */
dialog[data-portrait-modal] {
    border: none;
    padding: 0;
    background: none;
    inset: 0;
}

dialog[data-portrait-modal]::backdrop {
    background: color-mix(in oklab, var(--accent-3) 24%, rgba(0, 0, 0, .45));
    backdrop-filter: blur(1.25px);
}

dialog[data-portrait-modal] figure {
    margin: 0;
}

dialog[data-portrait-modal] img {
    display: block;
    max-width: min(80vw, var(--maxw));
    max-height: 90vh;
    width: auto;
    height: auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow:
        0 0 0 6px color-mix(in oklab, var(--accent-3) 32%, transparent),
        0 0 24px 10px color-mix(in oklab, var(--accent-3) 22%, transparent),
        0 10px 28px color-mix(in oklab, var(--ink) 18%, transparent);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

dialog[open][data-portrait-modal] {
    cursor: zoom-out;
}

@media (max-width:50em) {
    dialog[data-portrait-modal] img {
        max-width: 92vw;
        max-height: 86vh;
    }
}

/* Chat separators */
[data-chat] .rule[data-chat-sep] {
    grid-column: 1 / -1;
    height: .6875rem;
    margin: .9rem 0 0;
    background: var(--bg-sweet);
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent);
    mask-image: linear-gradient(to right, #000 0%, transparent);
    opacity: .98;
    border-radius: 0;
}

/* ================== Characters list ================== */
[data-characters] {
    /* match chat portrait width */
    --portrait-col: 12rem;
    display: block;
    max-width: min(var(--maxw), 92vw);
    margin-block: 1rem 2rem;
}

/* list reset */
[data-characters-list] {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

[data-characters-list] li::before {
    content: none;
}

/* two-column row */
[data-character] {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: var(--portrait-col) 1fr;
    /* same as chat */
    gap: 0 1rem;
    align-items: start;
    padding: .25rem 0 .9rem;
}

/* portrait */
[data-portrait] {
    margin: 0;
    max-width: var(--portrait-col);
    /* belt-and-suspenders */
}

[data-portrait] picture,
[data-portrait] img {
    display: block;
    width: 100%;
    height: auto;
}

[data-portrait] img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: calc(var(--r) - 2px);
    /* match chat’s softer border tone */
    border: 1px solid color-mix(in oklab, var(--rule) 80%, var(--ink));
    background: var(--bg-softer);
    cursor: pointer;
}

/* bio panel — same semantics as [data-bubble] */
li[data-character]>div[data-bio] {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--rule);
    border-radius: calc(var(--r) - 1px);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px .5rem rgba(0, 0, 0, .06);
}

/* name + copy */
[data-name] {
    margin: 0 0 .15rem 0;
    font-variant: small-caps;
    letter-spacing: .03em;
    font-weight: 700;
}

[data-summary] {
    margin: .3rem 0 0 0;
    line-height: 1.45;
    color: var(--ink);
}

/* ================== Characters Modal (no button; luxe frame) ================== */
[data-modal] {
    border: none;
    padding: 0;
    background: none;
    inset: 0;
}

[data-modal]::backdrop {
    /* accent-tinged blur */
    background: color-mix(in oklab, var(--accent-3) 18%, rgba(0, 0, 0, .45));
    backdrop-filter: blur(3px) saturate(1.02);
}

[data-modal-img] {
    display: block;
    max-width: min(86vw, var(--maxw));
    max-height: 90vh;
    width: auto;
    height: auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background-clip: padding-box;

    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* kill blue tap halo */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* phones: stack */
@media (max-width:720px) {
    [data-character] {
        grid-template-columns: 1fr;
    }

    [data-portrait] {
        order: -1;
        max-width: var(--portrait-col);
        margin-inline: auto;
    }
}

/* --- Nuke the blue/white halo around the portrait modal --- */

/* 1) Browsers love to focus <dialog> and draw a ring */
[data-modal]:focus,
[data-modal]:focus-visible,
dialog[data-portrait-modal]:focus,
dialog[data-portrait-modal]:focus-visible {
    outline: none !important;
}

/* 2) If the image itself ever gets focus, silence it too */
[data-modal-img]:focus,
[data-modal-img]:focus-visible,
dialog[data-portrait-modal] img:focus,
dialog[data-portrait-modal] img:focus-visible {
    outline: none !important;
}

/* 3) WebKit/iOS tap highlight (the blue/white flash) */
[data-modal],
[data-modal] *,
dialog[data-portrait-modal],
dialog[data-portrait-modal] * {
    -webkit-tap-highlight-color: transparent;
    /* iOS Safari */
}

/* 4) Extra belt-and-suspenders for WebKit’s ring color */
[data-modal],
[data-modal] *,
dialog[data-portrait-modal],
dialog[data-portrait-modal] * {
    outline-color: transparent;
}

/* 5) Stop “image selection” artifacts and callouts on long-press */
[data-modal-img],
dialog[data-portrait-modal] img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

/* 6) Keep our nice soft frame without any UA seam showing */
[data-modal-img],
dialog[data-portrait-modal] img {
    background-clip: padding-box;
    /* keep your existing border + shadows; just reassert the clip */
}

/* ================== Characters page hard override to match chat ================== */
/* Put this at the very end so it wins the cascade. */
[data-characters] {
    --portrait-col: 12rem;
}

[data-characters] [data-character] {
    grid-template-columns: var(--portrait-col) 1fr;
}

[data-characters] [data-portrait] {
    max-width: var(--portrait-col);
    justify-self: start;
}

[data-characters] [data-portrait] img {
    width: var(--portrait-col) !important;
    /* beat earlier width:100% */
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: calc(var(--r) - 2px);
    border: 1px solid color-mix(in oklab, var(--rule) 80%, var(--ink));
    background: var(--bg-softer);
}

[data-characters] [data-name] {
    font-variant: small-caps;
    font-size: 1.4rem !important;
    text-align: left;
    display: block;
    padding-bottom: 0;
    margin-bottom: 0em;
}

/* ================== Person Card — integrated with Midcentury tokens ================== */
/* ================== Person Card — Midcentury.now Compact ================== */
/* ================== Person Card — Midcentury.now Compact (final) ================== */

.person-card[data-person-card] {
    /* sizing: FIXED width so parents can’t stretch it */
    inline-size: 12rem;
    /* logical width */
    width: 12rem;
    /* physical fallback */
    max-inline-size: 12rem;

    background: color-mix(in oklab, var(--paper) 92%, var(--accent-3));
    /* layout */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    /* don’t flex-grow in parent flex/grids */
    align-self: start;
    /* don’t stretch if parent aligns items */

    /* spacing and chrome */
    gap: .4rem;
    padding: .4rem .5rem .5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    color: var(--ink);
    font-family: var(--font-serif);
    box-shadow: 0 1px .5rem rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .2s ease;
    cursor: default;
    margin: .5rem;
}

.person-card[data-person-card]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px .75rem rgba(0, 0, 0, .12);
}

/* image area */
.person-card__media {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: calc(var(--r) - 2px);
    border: 1px solid color-mix(in oklab, var(--rule) 80%, var(--ink));
    background: var(--bg-softer);
}

/* ensure nothing inside can exceed the card’s box */
.person-card__media img,
.person-card__media picture {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}

/* empty portrait */
.person-card__media--empty {
    display: grid;
    place-items: center;
    color: color-mix(in oklab, var(--muted) 80%, var(--ink));
    background:
        repeating-linear-gradient(45deg,
            color-mix(in oklab, var(--rule) 25%, transparent) 0 .5rem,
            transparent .5rem 1rem);
}

/* caption */
.person-card__caption {
    font: 700 1rem/1.1 var(--font-serif);
    font-variant: small-caps;
    letter-spacing: .02em;
    text-align: center;
    margin: 0;
}

.plain {
    text-decoration: none !important;
}

/* missing entry */
.person-card--missing {
    border-style: dashed;
    background: var(--bg-soft);
    color: color-mix(in oklab, var(--muted) 80%, var(--ink));
}

/* grid of cards (content-sized columns; never stretch to 1fr) */
.person-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
    gap: 1rem;
    justify-content: start;
    margin-block: 1rem 2rem;
}

/* optional large variant you can opt into */
.person-card[data-large] {
    inline-size: 12rem;
    width: 12rem;
    max-inline-size: 12rem;
    padding: .6rem .8rem .8rem;
}

/* theme harmonization */
html[data-theme="noir"] .person-card[data-person-card] {
    background: var(--bg-card);
    border-color: var(--rule);
    box-shadow: 0 0 .25rem rgba(0, 0, 0, .5);
}

html[data-theme="noir"] .person-card[data-person-card]:hover {
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .7);
}

/* safety: if someone wraps the card in a link, don’t let the link go 100% wide */
a>.person-card[data-person-card] {
    display: inline-flex;
    inline-size: 8rem;
    width: 8rem;
    max-inline-size: 8rem;
}

.left {
    float: left;
    margin: 0 !important;
}

.right {
    float: right;
    margin: 0 0 .5rem .5rem;
}

/* Reduced motion: keep intro strip visible without sweep */
@media (prefers-reduced-motion: reduce) {
    [data-intro] [data-rule] {
        animation: none !important;
        width: 100% !important;
    }
}

/* Phone comfort: lighten the strip slightly */
@media (max-width: 50em) {
    :root {
        --rule-strip-height: .625rem;
    }
}

/* ================== Chat index: title + summary (no HTML changes) ================== */
article .chat-list {
    display: grid;
    gap: .75rem;
    margin: .75rem 0 1.25rem;
}

article .chat-list .chat-ref {
    position: relative;
    background: var(--bg-card);
    transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

article .chat-list .chat-ref>p:first-child {
    margin: 0;
    padding: 0;
}

article .chat-list .chat-ref>p:first-child>a[rel="bookmark"] {
    margin-top: .8rem;
    margin-bottom: 0;
}

article .chat-list .chat-ref>p:first-child>a[rel="bookmark"] {
    display: inline-block;
    font-variant: small-caps;
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    text-decoration: none;
    color: var(--ink);
    text-wrap: balance;
}

article .chat-list .chat-ref .chat-ref__summary {
    margin: .4rem 0 0;
    color: color-mix(in oklab, var(--muted) 92%, var(--ink));
    line-height: 1.45;
    max-width: 70ch;
    text-wrap: pretty;
}



article .chat-list .chat-ref:where(:hover, :focus-within)>p:first-child>a[rel="bookmark"] {
    color: var(--accent-2);
}

article h2+.chat-list {
    margin-top: .5rem;
}

@media (max-width:50em) {
    article .chat-list .chat-ref {
        padding: .6rem .75rem .75rem;
    }

    article .chat-list .chat-ref>p:first-child>a[rel="bookmark"] {
        font-size: 1.15rem;
    }

    article .chat-list .chat-ref .chat-ref__summary {
        max-width: 100%;
    }
}