/* ==========================================================================
   The Coffee Jesus house style: "Grand Piano, Wet Paint" (2026-10-27)

   CT: "One mode: dark or light. No double designing. One style that will naturally evolve but
   also must be held and maintained in order to create brand recognition. One energy moving
   forward with professionalism and poise but also with creativity and artistic flair ...
   appear approachable, show the rough around the edges dirt bag I am, and then contrast my
   silly lowbrow nature with a more polished, posh energy that feels like ... a grand piano at
   a venue for a fancy performance."

   The posh: black lacquer, ivory, brass hairlines, Fraunces, a spotlight, room to breathe.
   The dirtbag: a taped-up sign, masking tape on the photos, hard sticker shadows, handwriting. Both on the same screen, every time.

   One mode. Every color and font is a token in :root below, and scripts/build_gallery.mjs
   refuses a color or font family anywhere else in this file. To change the look, change a
   token, and update DESIGN.md with it.

   The homepage is a run of screens (CT: "Let's make each block of phone screen height and
   width be its own screen"). Each .screen fills at least one phone screen and holds one idea.
   Nothing snaps: it scrolls like any page.
   ========================================================================== */

/* ---- fonts: free (SIL Open Font License), served from this site. The old site's three ---- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/static/fonts/fraunces-latin-opsz-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/static/fonts/fraunces-latin-opsz-italic.woff2) format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url(/static/fonts/nunito-latin-wght-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/static/fonts/caveat-latin-wght-normal.woff2) format('woff2');
}
/* Georgia stretched to Fraunces' size, so the swap does not jump. */
@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 105%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ---- tokens: the whole palette, one mode ---------------------------------------------- */
:root {
    /* the room */
    --ivory: #F7F1E5;            /* piano keys, playbill paper: the page */
    --ivory-deep: #EFE5D2;       /* the next screen over */
    --card: #FFFCF6;             /* labels, photo mats */
    --lacquer: #16110E;          /* the piano: opening, stage, curtain call */
    /* the words */
    --ink: #241912;              /* text on ivory */
    --coffee: #6B5040;           /* quiet text on ivory (6.5:1) */
    --on-lacquer-muted: #BDB09D; /* quiet text on lacquer (8.8:1) */
    --line: #DCCFB8;
    --line-strong: #A8957A;
    /* the accents */
    --paint: #E0762F;            /* the wet paint, the one loud color */
    --paint-ink: #A5450D;        /* paint dark enough for small text on ivory (5.4:1) */
    --brass: #BC9A52;            /* hairlines and small caps on lacquer (7:1) */
    --brass-faint: rgba(188, 154, 82, 0.35);
    /* materials */
    --black: #000000;            /* behind a video before it loads */
    --tape: rgba(236, 222, 189, 0.85);
    --tape-edge: rgba(120, 100, 70, 0.28);
    --spotlight: rgba(255, 238, 208, 0.10);
    --paint-glow: rgba(224, 118, 47, 0.30);
    --paint-glow-none: rgba(224, 118, 47, 0);
    --smudge: rgba(22, 17, 14, 0.55);
    --veil: rgba(22, 17, 14, 0.58);       /* lacquer over the opening picture: lighter at the edges */
    --veil-deep: rgba(22, 17, 14, 0.86);  /* darker behind the words, so they keep their contrast */
    --shadow: 0 1px 0 rgba(36, 25, 18, 0.05), 0 22px 34px -22px rgba(36, 25, 18, 0.55);
    --shadow-sm: 0 1px 2px rgba(36, 25, 18, 0.08), 0 8px 18px -12px rgba(36, 25, 18, 0.35);
    --shadow-deep: 0 30px 50px -30px rgba(0, 0, 0, 0.9);
    --hard: 3px 3px 0 var(--lacquer);       /* the old site's sticker shadow, kept */
    --hard-paint: 3px 3px 0 var(--paint);
    --hard-ivory: 3px 3px 0 var(--ivory);
    /* type */
    --serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
    --sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    /* layout */
    --gutter-l: max(20px, env(safe-area-inset-left, 0px));
    --gutter-r: max(20px, env(safe-area-inset-right, 0px));
    color-scheme: light;
}

/* ---- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
    overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--paint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--paint-ink); } }
:focus-visible { outline: 3px solid var(--paint); outline-offset: 3px; border-radius: 2px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 10;
    background: var(--lacquer); color: var(--ivory); padding: 10px 14px; border-radius: 4px;
}
.skip:focus { top: 12px; }

/* ---- the lacquer surface: the piano. Opening screen, stage, header bar, footer ---------- */
.screen--lacquer, .site-head, .site-foot {
    --ink: var(--ivory);
    --coffee: var(--on-lacquer-muted);
    --paint-ink: var(--paint);
    --line: var(--brass-faint);
    --line-strong: var(--brass);
    background: var(--lacquer);
    color: var(--ivory);
}
.screen--lacquer {
    background:
        radial-gradient(ellipse 75% 55% at 50% 0%, var(--spotlight), transparent 72%),
        var(--lacquer);
}

/* ---- the bar at the top: the name and a few links (studio/nav.md). On the homepage the
   links sit over the opening picture. ---- */
.site-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px;
    padding-block: 6px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.site-head--over {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    justify-content: flex-end; background: transparent;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
}
.mark {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--serif); font-weight: 500; font-size: 1.05rem; text-decoration: none; color: var(--ivory);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 0.95rem; font-weight: 700; color: var(--ivory); text-decoration: none;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--paint); text-underline-offset: 5px; }
@media (hover: hover) { .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--paint); text-underline-offset: 5px; } }

/* ---- shared small type -------------------------------------------------------------- */
.kicker {
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coffee);
}
.screen--lacquer .kicker { color: var(--brass); }
/* program ornament: a short hairline either side of a screen's kicker */
.screen .kicker { display: inline-flex; align-items: center; gap: 12px; }
.screen .kicker::before, .screen .kicker::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.whisper { font-size: 0.92rem; color: var(--coffee); }
.line { font-size: 1.15rem; color: var(--coffee); }
.line p + p { margin-top: 0.6rem; }
/* the handwriting: the dirtbag in the margins. One note per screen at most. */
.hand {
    font-family: var(--hand); font-weight: 600; font-size: 1.6rem; line-height: 1.1;
    color: var(--paint-ink); transform: rotate(-3deg);
}

/* ---- the screens ---------------------------------------------------------------------- */
.screen {
    position: relative;
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.3rem; text-align: center;
    padding-block: clamp(4rem, 9vh, 6rem);
    padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.screen > * { max-width: 32rem; }
.screen--deep { background: var(--ivory-deep); }
.screen-title {
    font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1.04; letter-spacing: -0.025em; font-variation-settings: 'opsz' 144;
}
.screen-title a { text-decoration: none; }
@media (hover: hover) { .screen-title a:hover { text-decoration: underline; text-decoration-color: var(--paint); } }
.screen-meta { display: flex; justify-content: center; }
.screen-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.more-link a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; font-weight: 700; }

/* 1. the opening: the piano, the spotlight, the sign taped to it */
.screen--title { gap: 1.5rem; }
.screen--title h1 { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.h1-artist {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--sans); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass);
}
.h1-artist::before, .h1-artist::after { content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }
.h1-title {
    font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ivory);
    font-size: clamp(3.3rem, 16vw, 7.5rem); line-height: 0.92; letter-spacing: -0.035em;
    padding-bottom: 0.06em; font-variation-settings: 'opsz' 144;
}
.lede {
    font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 7vw, 2.6rem);
    line-height: 1.1; letter-spacing: -0.02em;
}
.screen--title .signature { margin-top: -0.9rem; transform: rotate(-4deg) translateX(3.2rem); }
/* the picture behind the title, then the loop that fades in over it. Lacquer veil on top so
   the words keep their contrast on every frame. */
.screen--hero { overflow: hidden; }
.screen--hero > * { position: relative; z-index: 1; }
.screen--hero > .hero-media { position: absolute; inset: 0; z-index: 0; max-width: none; }
.screen--hero > .scroll-cue { position: absolute; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-ready { opacity: 1; }
.hero-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 72% 50% at 50% 42%, var(--veil-deep) 62%, var(--veil) 100%),
        linear-gradient(to bottom, var(--veil-deep), transparent 22%, transparent 78%, var(--veil-deep));
}
.sign {
    position: relative; display: inline-flex; flex-direction: column; align-items: center;
    padding: 12px 18px 9px; margin-top: 0.6rem;
    background: var(--paint); color: var(--lacquer); border: 0; border-radius: 2px;
    transform: rotate(-4deg); box-shadow: var(--shadow-sm);
    font-family: var(--sans); line-height: 1.05; user-select: none;
}
/* a strip of masking tape holding the sign up */
.sign::before {
    content: ''; position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; margin-left: -32px;
    background: var(--tape); box-shadow: 0 1px 1px var(--tape-edge); transform: rotate(3deg);
}
.sign-word { font-weight: 900; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }
.sign-small { font-size: 0.8rem; font-weight: 700; margin-top: 3px; }
button.sign { cursor: pointer; font: inherit; }
.smudge {
    position: absolute; width: 26px; height: 32px; pointer-events: none; opacity: 0.55;
    border-radius: 50% 50% 46% 46%;
    background: repeating-radial-gradient(ellipse at 50% 60%, var(--smudge) 0 1px, transparent 1px 3px);
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.sign-thanks { display: block; font-size: 0.9rem; color: var(--coffee); min-height: 1.4em; }
.scroll-cue {
    position: absolute; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
    width: 1px; height: 44px; margin-left: -0.5px; background: var(--brass); overflow: hidden; opacity: 0.8;
}
.scroll-cue::after {
    content: ''; position: absolute; left: 0; top: -14px; width: 1px; height: 14px; background: var(--paint);
    animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0% { top: -14px; } 70%, 100% { top: 44px; } }

/* prints: a photo on a mat, held up with masking tape. Posh frame, cheap tape. */
.print { position: relative; display: block; padding: 8px; background: var(--card); box-shadow: var(--shadow); }
.print::before {
    content: ''; position: absolute; top: -12px; left: 50%; width: 86px; height: 24px; margin-left: -43px; z-index: 1;
    background: var(--tape); box-shadow: 0 1px 1px var(--tape-edge); transform: rotate(-3deg);
}
a.print { text-decoration: none; }

/* 2. the artist */
.frame--portrait img { max-height: min(44svh, 27rem); width: auto; }
.statement { font-family: var(--serif); font-size: clamp(1.8rem, 7.5vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; }
.statement { text-wrap: balance; }

/* 3. the newest piece */
.screen-photo img { max-height: min(46svh, 31rem); width: auto; }

/* 4. the farm: a map read from the bottom up (the list is in walking order, drawn upward) */
.route {
    list-style: none; margin: 0.4rem 0; padding: 0; width: min(100%, 19rem);
    display: flex; flex-direction: column-reverse; gap: 10px; position: relative; text-align: left;
}
.route::before { content: ''; position: absolute; left: 7px; top: 14px; bottom: 14px; border-left: 2px dashed var(--line-strong); }
.stage { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 6px 30px; }
.stage::before {
    content: ''; position: absolute; left: 1px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    border-radius: 50%; background: var(--ivory-deep); border: 2px solid var(--line-strong);
}
.stage-name { font-family: var(--serif); font-size: 1.15rem; }
.stage-state { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coffee); white-space: nowrap; }
.stage--here .stage-name { font-weight: 600; }
.stage--here .stage-state {
    font-family: var(--hand); font-size: 1.35rem; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--paint-ink); transform: rotate(-3deg);
}
.stage--here::before { background: var(--paint); border-color: var(--paint); box-shadow: 0 0 0 5px var(--paint-glow); }
.stage--goal::before { background: var(--brass); border-color: var(--brass); }
.stage--done::before { background: var(--ink); border-color: var(--ink); }

/* 5. the stage: the newest video */
.now-showing { width: min(100%, 30rem); }
.now-card { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.now-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); box-shadow: var(--shadow-deep); outline: 1px solid var(--line); outline-offset: 6px; }
.now-thumb img { width: 100%; height: 100%; object-fit: cover; }
.now-thumb .play { position: absolute; inset: 0; margin: auto; }
.now-title { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; }
.now-date { color: var(--coffee); font-size: 0.9rem; }
.now-fallback a { font-weight: 700; }
.play {
    display: block; width: 64px; height: 64px; border-radius: 50%;
    background: var(--paint); box-shadow: var(--hard-ivory);
}
.play::after {
    content: ''; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -7px;
    border-style: solid; border-width: 12px 0 12px 21px; border-color: transparent transparent transparent var(--lacquer);
}

/* 6. the book */
.screen-object img { max-height: min(40svh, 24rem); width: auto; box-shadow: var(--shadow); }

/* 7. the newsletter */
.mailing { width: min(100%, 24rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mailing-row { display: flex; gap: 10px; }
.mailing input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; font-size: 1rem;
    color: var(--ink); background: var(--card); border: 2px solid var(--lacquer); border-radius: 6px;
}
.quiet-links {
    list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2px 18px; font-size: 0.92rem; color: var(--coffee);
}
.quiet-links a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--ink); }

/* ---- buttons: crisp shapes, sticker shadows ---------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0.7rem 1.35rem;
    background: var(--lacquer); color: var(--ivory); border: 2px solid var(--lacquer); border-radius: 6px;
    box-shadow: var(--hard-paint);
    font-family: var(--sans); font-size: 1rem; font-weight: 800; text-decoration: none; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: var(--hard); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
@media (hover: hover) {
    .btn:hover { color: var(--ivory); transform: translate(-1px, -1px); }
    .btn--ghost:hover { color: var(--ink); }
    .screen--lacquer .btn:hover { color: var(--lacquer); }
}
.screen--lacquer .btn { background: var(--paint); border-color: var(--paint); color: var(--lacquer); box-shadow: var(--hard-ivory); }

/* ---- frames, labels, status ----------------------------------------------------------------- */
.frame { display: block; position: relative; }
a.frame { text-decoration: none; }

.label {
    background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--lacquer); padding: 16px 18px 18px;
    box-shadow: var(--shadow-sm); font-size: 1rem; line-height: 1.5;
}
.facts { margin: 12px 0 0; display: grid; gap: 7px; }
.fact { display: grid; grid-template-columns: 6.4rem 1fr; gap: 10px; align-items: baseline; }
.fact dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee); }
.fact dd { margin: 0; }
.next-steps { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.next-steps-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee); }
.next-steps ol { margin: 6px 0 0; padding-left: 1.2rem; }

.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.status--wet .status-dot { background: var(--paint); animation: wet 2.6s ease-in-out infinite; }
.status--study .status-dot { background: var(--coffee); }
.status--sketch .status-dot { background: transparent; border: 2px dashed var(--coffee); }
.status--building .status-dot { background: repeating-linear-gradient(45deg, var(--paint) 0 3px, var(--lacquer) 3px 6px); }
@keyframes wet { 0%, 100% { box-shadow: 0 0 0 0 var(--paint-glow); } 50% { box-shadow: 0 0 0 6px var(--paint-glow-none); } }

/* ---- footer: the curtain call --------------------------------------------------------------- */
.site-foot {
    border-top: 6px solid var(--paint); text-align: center;
    padding-block: 4rem calc(3rem + env(safe-area-inset-bottom, 0px));
    padding-left: var(--gutter-l); padding-right: var(--gutter-r);
    display: grid; gap: 1.1rem; justify-items: center;
}
.foot-motto { font-size: 2.1rem; color: var(--paint); }
.foot-before a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; font-weight: 700; }
.foot-socials {
    list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0 14px; max-width: 26rem; font-size: 0.92rem;
}
.foot-socials a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-lacquer-muted); }
.foot-small { font-size: 0.82rem; color: var(--coffee); max-width: 28rem; }
.foot-small a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* ---- inner pages: a piece, every piece, older work ---------------------------------- */
.page {
    max-width: 42rem; margin: 0 auto;
    padding-block: 3.5rem 5rem; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
    display: grid; gap: 2.5rem;
}
.page-head { display: grid; gap: 0.7rem; }
.page-head h1 {
    font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 10vw, 4.2rem);
    line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'opsz' 144;
}
.piece-media { display: grid; gap: 2.4rem; }
.piece-fig { margin: 0; }
.piece-fig .print img { width: 100%; }
.piece-fig figcaption { margin-top: 12px; font-size: 0.92rem; color: var(--coffee); }
.story { display: grid; gap: 2.5rem; }
.story-part h2 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; margin-bottom: 0.9rem; }
.story-part:first-child .prose { font-size: 1.15rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 1.5rem; border-top: 1px solid var(--line); font-weight: 700; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; }
.pager span { display: inline-flex; align-items: center; min-height: 44px; color: var(--coffee); font-weight: 500; }

/* video poster on a piece's page */
.video-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-poster .play { position: absolute; inset: 0; margin: auto; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--black); }

/* every piece, in order */
.table-wrap { overflow-x: auto; }
.cat { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.cat th { text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee); padding: 10px 12px 10px 0; border-bottom: 2px solid var(--lacquer); }
.cat td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cat-no { font-family: var(--serif); font-size: 1.3rem; width: 3rem; }
.cat a { display: inline-block; padding-block: 9px; font-weight: 700; }
@media (max-width: 599px) {
    .cat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cat tr { display: grid; grid-template-columns: 2.8rem 1fr; gap: 2px 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .cat td { display: block; padding: 0; border: 0; grid-column: 2; }
    .cat td.cat-no { grid-column: 1; grid-row: 1 / span 4; }
}

/* older work */
.archive { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.archive-item { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.archive-item--text { grid-template-columns: 1fr; }
.archive-thumb img { width: 76px; height: 76px; object-fit: cover; box-shadow: var(--shadow-sm); }
.archive-body h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.archive-meta { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee); margin-top: 4px; }
.archive-medium { font-style: italic; color: var(--coffee); margin-top: 4px; font-size: 0.95rem; }
.archive-body .prose { margin-top: 6px; font-size: 0.95rem; }
.archive-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-weight: 700; font-size: 0.95rem; }
.archive-links a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 40px; }

/* ---- prose -------------------------------------------------------------------------------------- */
.prose > * + * { margin-top: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.25rem; }
.prose strong { font-weight: 800; }
.prose blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--paint); font-family: var(--serif); font-size: 1.2rem; }

/* ---- motion off when asked ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .status--wet .status-dot, .scroll-cue::after { animation: none; }
    .btn { transition: none; }
    .hero-video { transition: none; }
}