/* afolkestad.com — laid-paper design (2026 redesign)
   Shell: peach-clay laid mat + cream sheet, Heliotrope throughout.
   Born from prototypes/homepage-2026-08 (gen-05/23). */

@font-face {
    font-family: 'Heliotrope OT';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/heliotrope/heliotrope_ot_3_book.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope OT';
    font-style: italic;
    font-weight: 300;
    src: url('/fonts/heliotrope/heliotrope_ot_3_book_italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope OT';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/heliotrope/heliotrope_ot_4_medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope OT';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/heliotrope/heliotrope_ot_4_medium_italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope OT';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/heliotrope/heliotrope_ot_6_semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope OT';
    font-style: italic;
    font-weight: 600;
    src: url('/fonts/heliotrope/heliotrope_ot_6_semibold_italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Heliotrope Caps';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/heliotrope/heliotrope_4_caps_regular.woff2') format('woff2');
}

:root {
    /* Paper color scheme. These seven roles are the palette-editing surface;
       component rules below should not introduce their own opaque colors. */
    --color-canvas: hsl(0 10% 24.3%);         /* page surround */
    --color-surface: hsl(31.8 41.5% 94%);     /* reading sheet */
    --color-text-primary: #1b1815;
    --color-text-secondary: #5d564f;
    --color-text-muted: #635b52;
    --color-text-subtle: #a5998b;
    --color-accent: hsl(180.8 28.9% 44.6%);
    --color-accent-hover: color-mix(
        in srgb,
        var(--color-accent) 70%,
        var(--color-text-primary)
    );

    /* Material-effect ingredients. Alpha remains local to each shadow or
       texture layer, while its hue lives here with the color scheme. */
    --rgb-texture-dark: 101 93 83;
    --rgb-texture-light: 252 249 245;
    --rgb-shadow: 20 19 22;
    --rgb-neutral-dark: 0 0 0;
    --rgb-neutral-light: 255 255 255;
    --serif: 'Heliotrope OT', Georgia, serif;

    /* Homepage rhythm and material controls. The development tuner temporarily
       overrides these variables without rewriting the design stylesheet. */
    --home-heading-content-gap: 0.4rem;
    --home-row-padding: 0;
    --home-section-gap: 2.82rem;
    --home-about-line-height: 1.45;
    /* Texture recipe contract: a neutral pattern, a contrast gain, and a
       midpoint bias. Strength changes opacity only; overlay blending keeps the
       mean surface color approximately fixed. */
    --mat-texture-opacity: 0.2;
    --sheet-texture-opacity: 0.45;
    /* The stacked SVG noise has a light bias before its final contrast pass;
       these calibrated inputs render to a 50% effective midpoint. */
    --mat-texture-neutral: rgb(101, 101, 101);
    --sheet-texture-neutral: rgb(100, 100, 100);
    --mat-texture-contrast: 2;
    --sheet-texture-contrast: 2;

    /* pulp-fibre mottle — the cloudy formation of a mould-made sheet */
    --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.45' intercept='0.275'/%3E%3CfeFuncG type='linear' slope='0.45' intercept='0.275'/%3E%3CfeFuncB type='linear' slope='0.45' intercept='0.275'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23f)'/%3E%3C/svg%3E");
    /* fine surface tooth */
    --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");

    /* laid ribbing: hard-stop 1px lines, 4px period — flat color, not a gradient */
    --laid-mat: repeating-linear-gradient(180deg,
        rgb(var(--rgb-texture-dark) / 0.03) 0px, rgb(var(--rgb-texture-dark) / 0.03) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 2px,
        rgb(var(--rgb-texture-light) / 0.025) 2px, rgb(var(--rgb-texture-light) / 0.025) 3px,
        rgb(var(--rgb-neutral-dark) / 0) 3px, rgb(var(--rgb-neutral-dark) / 0) 4px);
    /* chain lines: the widely-spaced perpendicular wires of the mould */
    --chain-mat: repeating-linear-gradient(90deg,
        rgb(var(--rgb-texture-dark) / 0.02) 0px, rgb(var(--rgb-texture-dark) / 0.02) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 104px);
    --laid-sheet: repeating-linear-gradient(180deg,
        rgb(var(--rgb-texture-dark) / 0.008) 0px, rgb(var(--rgb-texture-dark) / 0.008) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 2px,
        rgb(var(--rgb-texture-light) / 0.01) 2px, rgb(var(--rgb-texture-light) / 0.01) 3px,
        rgb(var(--rgb-neutral-dark) / 0) 3px, rgb(var(--rgb-neutral-dark) / 0) 4px);
    --chain-sheet: repeating-linear-gradient(90deg,
        rgb(var(--rgb-texture-dark) / 0.006) 0px, rgb(var(--rgb-texture-dark) / 0.006) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 104px);

    /* Neutral laid-paper recipe used by the homepage tuner. Dark and light
       marks are paired around 50% gray so gain does not also become color. */
    --laid-mat-neutral: repeating-linear-gradient(180deg,
        rgb(var(--rgb-neutral-dark) / 0.0275) 0px, rgb(var(--rgb-neutral-dark) / 0.0275) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 2px,
        rgb(var(--rgb-neutral-light) / 0.0275) 2px, rgb(var(--rgb-neutral-light) / 0.0275) 3px,
        rgb(var(--rgb-neutral-dark) / 0) 3px, rgb(var(--rgb-neutral-dark) / 0) 4px);
    --chain-mat-neutral: repeating-linear-gradient(90deg,
        rgb(var(--rgb-neutral-dark) / 0.02) 0px, rgb(var(--rgb-neutral-dark) / 0.02) 1px,
        rgb(var(--rgb-neutral-light) / 0.02) 1px, rgb(var(--rgb-neutral-light) / 0.02) 2px,
        rgb(var(--rgb-neutral-dark) / 0) 2px, rgb(var(--rgb-neutral-dark) / 0) 104px);
    --laid-sheet-neutral: repeating-linear-gradient(180deg,
        rgb(var(--rgb-neutral-dark) / 0.009) 0px, rgb(var(--rgb-neutral-dark) / 0.009) 1px,
        rgb(var(--rgb-neutral-dark) / 0) 1px, rgb(var(--rgb-neutral-dark) / 0) 2px,
        rgb(var(--rgb-neutral-light) / 0.009) 2px, rgb(var(--rgb-neutral-light) / 0.009) 3px,
        rgb(var(--rgb-neutral-dark) / 0) 3px, rgb(var(--rgb-neutral-dark) / 0) 4px);
    --chain-sheet-neutral: repeating-linear-gradient(90deg,
        rgb(var(--rgb-neutral-dark) / 0.006) 0px, rgb(var(--rgb-neutral-dark) / 0.006) 1px,
        rgb(var(--rgb-neutral-light) / 0.006) 1px, rgb(var(--rgb-neutral-light) / 0.006) 2px,
        rgb(var(--rgb-neutral-dark) / 0) 2px, rgb(var(--rgb-neutral-dark) / 0) 104px);

    /* Active recipe slots. A future texture only needs to replace these image
       stacks and its neutral/contrast calibration values. */
    --mat-texture-image: var(--laid-mat-neutral), var(--chain-mat-neutral), var(--fibre), var(--tooth);
    --sheet-texture-image: var(--laid-sheet-neutral), var(--chain-sheet-neutral), var(--tooth), var(--fibre);
    --texture-internal-blend: normal, normal, soft-light, soft-light;
}

/* Gallery color scheme. Keeping the same roles makes the gallery a theme,
   rather than a parallel set of component-specific colors. */
body.art-index-page,
body.artwork-detail-page {
    --color-canvas: #171716;
    --color-surface: #171716;
    --color-text-primary: #e4dfd6;
    --color-text-secondary: #aaa49b;
    --color-text-muted: #87827a;
    --color-text-subtle: #6f6b64;
    --color-accent: #c17b63;
    --color-accent-hover: color-mix(
        in srgb,
        var(--color-accent) 70%,
        var(--color-text-primary)
    );
    --rgb-shadow: 0 0 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

/* the homepage reads best a notch above browser default */
html:has(body.home) { font-size: 110%; }

body {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
    font-synthesis: none;
    color: var(--color-text-primary);
    background-color: var(--color-canvas);
    /* flat clay + ribbing + chains + fibre + tooth — no gradients */
    background-image: var(--laid-mat), var(--chain-mat), var(--fibre), var(--tooth);
    background-blend-mode: normal, normal, soft-light, soft-light;
    background-attachment: fixed, fixed, fixed, fixed;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 4rem 1.5rem 4.5rem;
}

/* Keep the homepage's color and paper texture on separate layers so the
   development tuner can fade the texture without fading the surface color. */
body.home {
    position: relative;
    background-image: none;
}

body.home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--mat-texture-neutral);
    background-image: var(--mat-texture-image);
    background-blend-mode: var(--texture-internal-blend);
    mix-blend-mode: overlay;
    filter: contrast(var(--mat-texture-contrast));
    opacity: var(--mat-texture-opacity);
}

body.home > .sheet { z-index: 1; }

::selection { background: var(--color-accent); color: var(--color-surface); }

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

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* ---------- the framed sheet ---------- */

.sheet {
    position: relative;
    width: 67rem;
    max-width: 100%;
    margin: auto;
    background-color: var(--color-surface);
    background-image: var(--laid-sheet), var(--chain-sheet), var(--tooth), var(--fibre);
    background-blend-mode: normal, normal, soft-light, soft-light;
    padding: 6rem 4.25rem 6.25rem;
    box-shadow:
        0 1px 2px rgb(var(--rgb-shadow) / 0.24),
        0 5px 12px rgb(var(--rgb-shadow) / 0.15),
        0 16px 34px rgb(var(--rgb-shadow) / 0.13);
}

body.home .sheet {
    background-image: none;
}

body.home .sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--sheet-texture-neutral);
    background-image: var(--sheet-texture-image);
    background-blend-mode: var(--texture-internal-blend);
    mix-blend-mode: overlay;
    filter: contrast(var(--sheet-texture-contrast));
    opacity: var(--sheet-texture-opacity);
}

.spread {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 19rem 1fr;
    column-gap: 3rem;
}

.spread > * { min-width: 0; }

/* ---------- identity ---------- */

h1 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.0;
    color: var(--color-text-primary);
}

h1 .stop { color: var(--color-accent); }

.contact {
    margin-top: 1.15rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.contact a { transition: color 0.15s; }
.contact a:hover { color: var(--color-accent); }
.contact .dot { color: var(--color-accent); margin: 0 0.42em; }

/* ---------- sections ---------- */

section { margin-top: var(--home-section-gap); }
.col-right > section:first-child { margin-top: 0; }
.col-left > section:first-of-type { margin-top: var(--home-section-gap); }


.head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: var(--home-heading-content-gap);
}

h2 {
    font-size: 1.34rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.2;
    color: var(--color-text-primary);
}

/* clickable heads: "all …" runs inline after the headline, quiet until hover */
.head a {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
}

.head a h2 { transition: color 0.15s; }

.head .all {
    font-size: 1.02rem;
    color: var(--color-text-subtle);
    white-space: nowrap;
    transition: color 0.15s;
}

.head .all .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.head a:hover h2 { color: var(--color-accent); }
.head a:hover .all { color: var(--color-text-secondary); }
.head a:hover .all .arrow { transform: translateX(4px); }

.more {
    font-size: 1.02rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color 0.15s;
}

.more .arrow {
    display: inline-block;
    color: var(--color-accent);
    margin-left: 0.15em;
    transition: transform 0.2s ease;
}

.more:hover { color: var(--color-accent); }
.more:hover .arrow { transform: translateX(4px); }

/* the "all …" link closes its section as a final line */
.more.end {
    display: inline-block;
    margin-top: 0.6rem;
}

/* ---------- about ---------- */

.about p {
    font-size: 1.11rem;
    line-height: var(--home-about-line-height);
    color: var(--color-text-primary);
}

.about p + p { margin-top: 0.85rem; }

/* keep the italic title whole */
.about .keep { white-space: nowrap; }

.about a { transition: color 0.15s; }
.about a:hover { color: var(--color-accent); }

.about-mobile { display: none; }

/* ---------- list rows ---------- */

.list { display: flex; flex-direction: column; }

.row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.3em;
    padding: var(--home-row-padding) 0;
    min-width: 0;
}

.t {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
    transition: color 0.15s;
}

.meta {
    font-size: 1rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color 0.15s;
}

.meta.gloss { font-style: italic; color: var(--color-text-subtle); }

/* papers: venue runs inline after the title; the title yields if space runs out */
.row.squeeze-title .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row.squeeze-title .meta { flex: none; color: var(--color-text-subtle); }

/* essays, software: the gloss runs inline after the title, quiet until hover */
.row.squeeze-meta .t { flex: none; }
.row.squeeze-meta .meta { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.row:hover .t { color: var(--color-accent); }
.row:hover .meta { color: var(--color-text-secondary); }

/* the two tracks share one gloss, set beneath them */
.stack a.t { display: block; padding: 0.17rem 0; }
a.t:hover { color: var(--color-accent); }
.stack .gloss { display: block; padding-top: 0.3rem; }

.ext::after {
    content: "↗";
    font-size: 0.68em;
    color: var(--color-accent);
    margin-left: 0.15em;
    vertical-align: 0.18em;
}

/* ---------- the tipped-in plate ---------- */

.plate { display: block; }

/* no frame — the shadow alone separates the plate from the sheet */
.mount {
    display: block;
    box-shadow:
        0 1px 2px rgb(var(--rgb-shadow) / 0.20),
        0 5px 11px rgb(var(--rgb-shadow) / 0.13),
        0 14px 28px rgb(var(--rgb-shadow) / 0.10);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

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

.plate:hover .mount {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgb(var(--rgb-shadow) / 0.22),
        0 7px 16px rgb(var(--rgb-shadow) / 0.15),
        0 20px 40px rgb(var(--rgb-shadow) / 0.12);
}

figcaption {
    margin-top: 0.85rem;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--color-text-primary);
    transition: color 0.15s;
}

figcaption .meta { font-style: normal; color: var(--color-text-subtle); margin-left: 0.3em; }

.plate:hover figcaption { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .more:hover .arrow, .head a:hover .all .arrow, .plate:hover .mount { transform: none; }
}

/* ================= essay pages ================= */

@font-face {
    font-family: 'Equity OT B';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/equity/equity_ot_b_regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Equity OT B';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/equity/equity_ot_b_italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Equity OT B';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/equity/equity_ot_b_bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Equity OT B';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/equity/equity_ot_b_bold_italic.woff2') format('woff2');
}

:root {
    --prose: 'Equity OT B', Georgia, serif;
}

/* reading pages: no sheet-on-mat — the page IS the paper */
body.reading {
    background-color: var(--color-surface);
    background-image: var(--laid-sheet), var(--chain-sheet), var(--tooth), var(--fibre);
    background-blend-mode: normal, normal, soft-light, soft-light;
    display: block;
    padding: 0;
}

body.reading .sheet.essay {
    position: relative;
    width: auto;
    max-width: 100rem;
    margin: 0 auto;
    background: none;
    box-shadow: none;
    padding: 0 3rem 7rem;
}

.sheet.essay article {
    max-width: 51.5rem;
    margin: 0 auto;
    padding-top: 3rem;
}

/* The way home lives in the unused reading margin rather than reserving a
   sticky bar above the article. */
.crumb {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    width: max-content;
}

.crumb .home {
    display: inline-flex;
    align-items: center;
    padding: 1rem;
    margin: -1rem;
    color: var(--color-text-subtle);
    opacity: 0.55;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.025em;
}

/* Once the side margin is too narrow, the link returns to ordinary flow. It
   still has no sticky background or full-width bar. */
@media (max-width: 62rem) {
    .crumb {
        position: static;
        margin-left: -1.5rem;
        padding-top: 1.5rem;
    }

    .sheet.essay article { padding-top: 2.25rem; }
}

/* ---------- essay header ---------- */

.essay-header h1 {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.016em;
    line-height: 1.12;
    color: var(--color-text-primary);
}

.essay-subtitle {
    font-family: var(--prose);
    font-style: italic;
    font-size: 1.58rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: 0.6rem;
}

.essay-header time {
    display: block;
    margin-top: 0.7rem;
    font-size: 1.15rem;
    color: var(--color-text-subtle);
}

/* ---------- essay body ---------- */

.essay-body {
    font-family: var(--prose);
    font-size: 1.56rem;
    line-height: 1.62;
    margin-top: 2.3rem;
}

.essay-body p { margin: 0 0 1.05em; }

.essay-body a { color: var(--color-accent); transition: color 0.15s; }
.essay-body a:hover { color: var(--color-accent-hover); }

.essay-body .footnote-anchor {
    margin-left: 0.06em;
    font-size: 0.68em;
    line-height: 0;
    vertical-align: super;
    text-decoration: none;
}

.essay-body h2 {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.25;
    color: var(--color-text-primary);
    margin: 2.2rem 0 0.8rem;
}

.essay-body h3 {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 1.8rem 0 0.6rem;
}

.essay-body blockquote {
    margin: 1.3rem 0 1.3rem 1.6rem;
    color: var(--color-text-secondary);
}

.essay-body hr {
    border: none;
    text-align: center;
    margin: 2rem 0;
}

.essay-body hr::after {
    content: "· · ·";
    color: var(--color-text-muted);
    letter-spacing: 0.6em;
}

.essay-figure {
    margin: 1.9rem 0;
    text-align: center;
}

.essay-figure img { max-width: 100%; height: auto; }

.essay-body iframe { max-width: 100%; }

/* ---------- essay embeds & special blocks ---------- */

.essay-body ul,
.essay-body ol {
    margin: 0 0 1.05em;
    padding-left: 1.6rem;
}

.essay-body li { margin-bottom: 0.45em; }

.essay-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 2em 0;
}

.essay-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.essay-audio { margin: 2em 0; }

.essay-body .essay-embed-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin: 1.5em 0;
    color: inherit;
    background-color: rgb(var(--rgb-texture-dark) / 0.05);
    border: 1px solid rgb(var(--rgb-texture-dark) / 0.16);
    transition: background-color 0.2s, border-color 0.2s;
}

.essay-body .essay-embed-card:hover {
    background-color: rgb(var(--rgb-texture-dark) / 0.08);
    border-color: rgb(var(--rgb-texture-dark) / 0.28);
}

.essay-embed-card img { width: 100px; height: auto; flex-shrink: 0; }

.essay-embed-card-text { display: flex; flex-direction: column; gap: 0.3rem; }

.essay-embed-card-text strong {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-text-primary);
}

.essay-embed-card-text p {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0;
}

.essay-body .essay-media-placeholder {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    margin: 1.5em 0;
    border: 1px dashed rgb(var(--rgb-texture-dark) / 0.35);
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.essay-body .essay-media-placeholder:hover {
    background-color: rgb(var(--rgb-texture-dark) / 0.05);
    border-color: rgb(var(--rgb-texture-dark) / 0.55);
    color: var(--color-text-primary);
}

.essay-media-icon { font-size: 1.25rem; color: var(--color-accent); }

.essay-figure figcaption {
    margin-top: 0.55rem;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--color-text-muted);
}

.eikonal-project-page .eikonal-artwork-caption { font-size: 1rem; }

/* ---------- Eikonal project draft ---------- */

.eikonal-project-page .essay-image-placeholder {
    color: var(--color-text-subtle);
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
}

.eikonal-project-page .essay-placeholder-frame {
    display: grid;
    min-width: 0;
    min-height: clamp(11rem, 34vw, 20rem);
    place-items: center;
    padding: 1.5rem;
    border: 1px dashed rgb(var(--rgb-texture-dark) / 0.3);
    background: rgb(var(--rgb-texture-dark) / 0.035);
}

.eikonal-project-page .eikonal-placeholder-sequence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.eikonal-project-page .eikonal-placeholder-sequence .essay-placeholder-frame {
    min-height: clamp(8rem, 22vw, 13rem);
}

.eikonal-project-page .eikonal-media-sequence img {
    display: block;
    width: 100%;
    min-width: 0;
}

.eikonal-project-page .eikonal-square-sequence > :not(.eikonal-placeholder-operator) {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
}

.eikonal-project-page .eikonal-square-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eikonal-project-page .eikonal-letter-shape {
    display: grid;
    place-items: center;
    color: var(--color-text-primary);
    font-family: var(--serif);
    font-size: clamp(8rem, 24vw, 14rem);
    font-weight: 600;
    font-style: normal;
    line-height: 1;
}

.eikonal-placeholder-operator {
    color: var(--color-text-muted);
    font-size: 1.6rem;
    font-style: normal;
}

.eikonal-project-page .essay-equation {
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
    padding: 0.8rem 1rem;
    overflow-x: auto;
    color: var(--color-text-primary);
}

.eikonal-project-page .essay-equation math { font-size: 1.35em; }

.eikonal-project-page .eikonal-map {
    gap: 1em;
    align-items: center;
    font-family: var(--serif);
    font-size: 1.25em;
}

.eikonal-project-page .eikonal-technical-aside {
    margin: 1.4em 0;
    padding: 0.15rem 0 0.15rem 1.15rem;
    border-left: 2px solid rgb(var(--rgb-texture-dark) / 0.24);
    color: var(--color-text-secondary);
    font-size: 1.32rem;
    line-height: 1.55;
}

.eikonal-project-page .eikonal-technical-aside p { margin: 0; }

.eikonal-project-page .essay-footnotes {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgb(var(--rgb-texture-dark) / 0.2);
}

.eikonal-project-page .footnote {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.55rem;
    color: var(--color-text-muted);
    font-size: 1.12rem;
    line-height: 1.5;
}

.eikonal-project-page .footnote-number {
    color: var(--color-accent);
    text-decoration: none;
}

.eikonal-project-page .footnote-content p { margin: 0; }

@media (max-width: 34rem) {
    .eikonal-project-page .eikonal-placeholder-sequence { gap: 0.55rem; }
    .eikonal-project-page .essay-placeholder-frame { padding: 0.75rem; }
    .eikonal-project-page .eikonal-map { gap: 0.55em; font-size: 1.08em; }
}

.essay-footer {
    margin-top: 3.5rem;
    font-family: var(--prose);
    font-size: 1.25rem;
    color: var(--color-text-subtle);
}

.essay-footer a { color: var(--color-text-muted); transition: color 0.15s; }
.essay-footer a:hover { color: var(--color-accent); }

/* ================= index pages (essays, research) ================= */

.index-header h1 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--color-text-primary);
}

.index-sub {
    margin-top: 0.8rem;
    font-size: 1.15rem;
    color: var(--color-text-secondary);
}

.index-sub a { color: var(--color-accent); transition: color 0.15s; }
.index-sub a:hover { color: var(--color-accent-hover); }

.index-section { margin-top: 3rem; }

.index-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    color: var(--color-text-primary);
    margin-bottom: 1.1rem;
}

/* selected essays: flat thumbnail cards */
.pick {
    display: flex;
    gap: 1.35rem;
    align-items: flex-start;
    padding: 0.8rem 0;
}

.pick img { width: 11rem; height: auto; flex: none; }

.pick-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.pick-text strong {
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.25;
    color: var(--color-text-primary);
    transition: color 0.15s;
}

.pick:hover .pick-text strong { color: var(--color-accent); }

.pick-gloss {
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.pick-date { font-size: 1.02rem; color: var(--color-text-subtle); }

/* all-essays rows: homepage grammar, scaled for the reading page */
.index-list .row { padding: 0.3rem 0; }
.index-list .t { font-size: 1.22rem; }
.index-list .meta { font-size: 1.1rem; }
.index-list .meta.yr { flex: none; }

/* ================= artwork index ================= */

/* Artworks leave the reading-paper environment for a dark, neutral gallery. */
body.art-index-page,
body.artwork-detail-page {
    background-color: var(--color-surface);
    background-image: none;
}

body.art-index-page .crumb .home,
body.artwork-detail-page .crumb .home {
    color: var(--color-text-muted);
    opacity: 0.62;
}

.sheet.essay article.art-index { max-width: 64rem; }

.art-catalogue { margin-top: 0; }

.art-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 3rem;
    align-items: center;
    margin-top: 5.5rem;
    scroll-margin-top: 3rem;
}

.art-entry:first-child { margin-top: 0; }

.art-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.art-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 45rem);
    max-height: 30rem;
    box-shadow:
        0 0 0 1px rgb(var(--rgb-neutral-light) / 0.035),
        0 5px 14px rgb(var(--rgb-shadow) / 0.25),
        0 18px 38px rgb(var(--rgb-shadow) / 0.19);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.art-entry-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    font-style: normal;
}

.art-entry-caption strong {
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: -0.008em;
    line-height: 1.25;
    color: var(--color-text-primary);
    transition: color 0.15s;
}

.art-entry-meta {
    margin-top: 0.25rem;
    font-size: 1.05rem;
    color: var(--color-text-subtle);
}

.art-entry-action {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--color-text-subtle);
    transition: color 0.15s;
}

.art-entry-action span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.art-entry-link:hover .art-preview img {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgb(var(--rgb-neutral-light) / 0.05),
        0 8px 19px rgb(var(--rgb-shadow) / 0.29),
        0 24px 48px rgb(var(--rgb-shadow) / 0.22);
}

.art-entry-link:hover .art-entry-caption strong,
.art-entry-link:hover .art-entry-action { color: var(--color-accent); }
.art-entry-link:hover .art-entry-action span { transform: translateX(4px); }

/* ================= individual artwork pages ================= */

.sheet.essay article.artwork-detail {
    max-width: 78rem;
    padding-top: 2.5rem;
}

.artwork-hero { margin: 0; }

.artwork-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, calc(108svh + 7.5rem));
    height: 72svh;
    margin-inline: auto;
}

.artwork-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 25%;
    color: var(--color-text-secondary);
    opacity: 0.42;
    font-size: 1.55rem;
    line-height: 1;
    transition: color 0.15s, opacity 0.15s;
}

.artwork-arrow span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 3.75rem;
    transition: transform 0.2s ease;
}

.artwork-arrow:hover { color: var(--color-text-primary); opacity: 0.9; }
.artwork-arrow-previous { left: 0; }
.artwork-arrow-next { right: 0; }
.artwork-arrow-previous span { left: 0; }
.artwork-arrow-next span { right: 0; }
.artwork-arrow-previous:hover span { transform: translateX(-3px); }
.artwork-arrow-next:hover span { transform: translateX(3px); }

.artwork-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(calc(100% - 7.5rem), var(--artwork-width, 72svh));
    height: 100%;
    cursor: zoom-in;
}

.artwork-image-link img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow:
        0 0 0 1px rgb(var(--rgb-neutral-light) / 0.035),
        0 7px 18px rgb(var(--rgb-shadow) / 0.31),
        0 24px 52px rgb(var(--rgb-shadow) / 0.25);
}

.artwork-caption {
    max-width: 51.5rem;
    margin: 1.25rem auto 0;
    font-style: normal;
    color: var(--color-text-primary);
}

.artwork-caption h1 {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.008em;
    line-height: 1.2;
    color: var(--color-text-secondary);
}

.artwork-year {
    margin-left: 0.25em;
    font-size: 0.88em;
    font-weight: 400;
    color: var(--color-text-subtle);
}

.artwork-description {
    max-width: 39rem;
    margin-top: 0.85rem;
    font-family: var(--prose);
    font-size: 1.06rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.artwork-description a { color: var(--color-accent); transition: color 0.15s; }
.artwork-description a:hover { color: var(--color-accent-hover); }

.artwork-return {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    color: var(--color-text-subtle);
}

.artwork-return a { transition: color 0.15s; }
.artwork-return a:hover { color: var(--color-text-secondary); }

@media (max-width: 48rem) {
    body.art-index-page .sheet.essay,
    body.artwork-detail-page .sheet.essay { padding: 0 1.5rem 5rem; }

    .art-catalogue { margin-top: 3.5rem; }

    .art-entry {
        grid-template-columns: 1fr;
        gap: 1.15rem;
        margin-top: 4.5rem;
    }

    .art-preview { justify-content: flex-start; }

    .art-preview img {
        width: 100%;
        max-height: none;
    }

    .art-entry-portrait .art-preview { justify-content: center; }

    .art-entry-portrait .art-preview img {
        width: auto;
        max-width: 72%;
        max-height: 76svh;
    }

    .art-entry-action { margin-top: 0.65rem; }

    .sheet.essay article.artwork-detail { padding-top: 2.25rem; }

    .artwork-stage {
        width: 100%;
        height: min(72svh, calc(100vw - 3rem));
    }

    .artwork-image-link {
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .artwork-arrow {
        border-radius: 0;
        color: rgb(var(--rgb-neutral-light) / 0.82);
        opacity: 0.62;
    }

    .artwork-arrow span { width: 3rem; }

    .artwork-arrow-previous {
        left: 0;
        background: linear-gradient(90deg, rgb(var(--rgb-shadow) / 0.24), transparent);
    }

    .artwork-arrow-next {
        right: 0;
        background: linear-gradient(270deg, rgb(var(--rgb-shadow) / 0.24), transparent);
    }

    .artwork-caption { margin-top: 1.05rem; }

    .artwork-caption h1 { font-size: 1.12rem; }

    .artwork-description { font-size: 1.03rem; }
}

/* publications */
.pub { margin-bottom: 1.4rem; }

.pub-title {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--color-text-primary);
    transition: color 0.15s;
}

.pub-title:hover { color: var(--color-accent); }

.pub-meta {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.pub-meta .me { font-weight: 600; color: var(--color-text-secondary); }

/* ================= narrow screens ================= */

@media (max-width: 60rem) {
    html:has(body.home) { font-size: 100%; }

    body.home {
        align-items: flex-start;
        padding: 1rem;
    }

    body.home .sheet {
        width: 100%;
        margin: 0;
        padding: 4rem clamp(1.5rem, 6vw, 3rem) 5rem;
    }

    .spread {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .spread > .col-left,
    .spread > .col-right { display: contents; }

    .about-mobile { display: block; }
    .about-desktop { display: none; }

    .home-identity { order: 1; }
    .about-mobile { order: 2; }
    .home-projects { order: 3; }
    .home-artworks { order: 4; }
    .home-essays { order: 5; }
    .home-papers { order: 6; }
    .home-music { order: 7; }

    .home .col-left > .about-mobile { margin-top: 1.15rem; }

    .home .plate { max-width: 32rem; }

    .home .row.squeeze-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
    }

    .home .row.squeeze-title .t {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}

@media (max-width: 48rem) {
    body.reading:not(.art-index-page):not(.artwork-detail-page) .sheet.essay {
        padding: 0 clamp(1.2rem, 5vw, 2.25rem) 5rem;
    }

    body.reading:not(.art-index-page):not(.artwork-detail-page) .crumb {
        margin-left: 0;
        padding-top: 1rem;
    }

    body.reading:not(.art-index-page):not(.artwork-detail-page) .sheet.essay article {
        padding-top: 1.5rem;
    }

    .essay-header h1,
    .index-header h1 {
        font-size: clamp(2.35rem, 8vw, 3rem);
    }

    .essay-subtitle {
        font-size: clamp(1.24rem, 4vw, 1.45rem);
        line-height: 1.42;
    }

    .essay-body {
        margin-top: 1.8rem;
        overflow-wrap: break-word;
        font-size: clamp(1.28rem, 3.6vw, 1.45rem);
        line-height: 1.58;
    }

    .essay-body h2 { font-size: clamp(1.55rem, 5vw, 1.75rem); }
    .essay-body h3 { font-size: clamp(1.35rem, 4.5vw, 1.5rem); }

    .essay-body blockquote { margin-left: 0.8rem; }

    .essay-body ul,
    .essay-body ol { padding-left: 1.3rem; }

    .index-section { margin-top: 2.5rem; }
    .index-section h2 { margin-bottom: 0.75rem; }

    .pick { gap: 1rem; }
    .pick img { width: 8rem; }

    .index-list .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.05rem 0.75rem;
        padding: 0.45rem 0;
    }

    .index-list .t {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .index-list .meta.gloss {
        grid-column: 1 / -1;
        grid-row: 2;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        line-height: 1.35;
    }

    .index-list .meta.yr {
        grid-column: 2;
        grid-row: 1;
    }

    .pub-title { font-size: 1.18rem; }
    .pub-meta { font-size: 1rem; }
}

@media (max-width: 34rem) {
    body.home { padding: 0; }

    body.home .sheet {
        min-height: 100svh;
        padding: 3rem 1.25rem 4.5rem;
        box-shadow: none;
    }

    .home h1 { font-size: 2.75rem; }

    .home .row.squeeze-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0.18rem 0 0.35rem;
    }

    .home .row.squeeze-meta .t,
    .home .row.squeeze-meta .meta {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .home .row.squeeze-meta .meta {
        font-size: 0.96rem;
        line-height: 1.35;
    }

    .home .home-papers .row.squeeze-title {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0.18rem 0 0.35rem;
    }

    .home .home-papers .row.squeeze-title .meta {
        grid-row: 2;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        font-size: 0.96rem;
        line-height: 1.35;
    }

    .essay-body .essay-embed-card {
        flex-direction: column;
    }

    .essay-embed-card img { width: min(100%, 12rem); }

    .eikonal-project-page .eikonal-placeholder-sequence {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .eikonal-project-page .eikonal-placeholder-operator {
        line-height: 1;
        transform: rotate(90deg);
    }

    .eikonal-project-page .eikonal-map {
        flex-direction: column;
        gap: 0.4em;
        text-align: center;
    }

    .eikonal-project-page .eikonal-technical-aside {
        padding-left: 0.85rem;
        font-size: 1.12rem;
    }
}

@media (max-width: 28rem) {
    .pick {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .pick img { width: min(100%, 20rem); }
}

@media (pointer: coarse) {
    a { touch-action: manipulation; }
}