/*
 * The Journal and the niches on renoir.info (F49), in the live site's own
 * design. Every value in the chrome below is quoted from his export,
 * site/live/index.html: the ground, the ink, the coral hover, the
 * Montserrat and JetBrains Mono faces, the clamp() gutter and type scale,
 * the #nav row, the #cursor, the contact block and the footer. The
 * Journal and niche values are the app's (WindowSurface.tsx, Journal.tsx,
 * NicheMap.tsx), sized up for a desktop window on the same scale.
 *
 * Self-hosted faces only: this site makes no cross-domain request.
 */

@font-face { font-family:'Montserrat'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/montserrat-400.woff') format('woff'); }
@font-face { font-family:'Montserrat'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/montserrat-600.woff') format('woff'); }
@font-face { font-family:'Montserrat'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/montserrat-700.woff') format('woff'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/jetbrains-mono-400.woff') format('woff'); }

:root {
  --ground: #080808;
  --ink: #FAF9F6;
  --ink-78: rgba(250,249,246,.78);
  --ink-62: rgba(250,249,246,.62);
  --ink-45: rgba(250,249,246,.45);
  --ink-38: rgba(250,249,246,.38);
  --hair: rgba(250,249,246,.1);
  --hair-soft: rgba(250,249,246,.08);
  --coral: #F97079;
  --plum: #61385B;
  /* his page margin, 18px at a phone to 48px at a desktop */
  --gutter: clamp(18px, calc(8.11vw - 13.6px), 48px);
  --sans: Montserrat, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  /* his section air and stamp size */
  --air: clamp(72px, calc(13vw + 8px), 168px);
  --stamp: clamp(9.5px, calc(.27vw + 8.45px), 10.5px);
  --body: clamp(15.5px, calc(.676vw + 12.86px), 18px);
}

html { background:var(--ground); scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink); overflow-x:clip; font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:hover { color:var(--coral); }
::selection { background:var(--coral); color:var(--ground); }
:focus-visible { outline:1px solid rgba(250,249,246,.62); outline-offset:4px; }
img { display:block; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin:0; }
button { font:inherit; color:inherit; }

@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes blink { 0%, 54% { opacity:1; } 55%, 100% { opacity:0; } }

.page { background:var(--ground); min-height:100vh; overflow-x:clip; }
.stamp { font-family:var(--mono); font-size:var(--stamp); letter-spacing:.22em; color:var(--ink-38); }
.stamp a { color:inherit; }
.stamp a:hover { color:var(--ink); }
.rise { animation:fadeUp 1s .1s both; }
.rise + .rise { animation-delay:.35s; }
.rise + .rise + .rise { animation-delay:.5s; }

/* ------------------------------------------------------------ the cursor */
/* His triangle, followed at lerp 0.12 by public.js (the home page's loop). */

#cursor { position:fixed; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; pointer-events:none; z-index:9999; opacity:0; will-change:transform; }
#cursor svg { width:100%; height:100%; display:block; overflow:visible; fill:var(--ink); stroke:var(--ink); stroke-width:5.5; stroke-linejoin:round; stroke-linecap:round; }

/* ------------------------------------------------------------ the nav row */
/* His #nav, value for value. The home page hides it on phones because its
   fold opens on the wordmark; these pages have no such fold, so the row
   stays, keeping the two doors these pages are about. */

#nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2px clamp(16px, calc(4.86vw - 2.9px), 34px); padding:calc(env(safe-area-inset-top,0px) + clamp(14px, calc(3.24vw + 1.35px), 26px)) var(--gutter) 0; }
.wordmark { font-family:var(--sans); font-weight:700; font-size:clamp(20px, calc(.54vw + 17.9px), 24px); line-height:1; letter-spacing:-.04em; color:var(--ink); padding:8px 0; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:clamp(16px, calc(4.86vw - 2.9px), 34px); margin-left:auto; }
.lnk { color:var(--ink-62); }
.lnk:hover { color:var(--ink); }
.nav-link { font-family:var(--sans); font-weight:500; font-size:clamp(10.5px, calc(.27vw + 9.45px), 11.5px); letter-spacing:.16em; white-space:nowrap; padding:clamp(11px, calc(19.2px - 1.08vw), 15px) 0; }
.nav-link[aria-current="page"] { color:var(--ink); }
.pill { background:rgba(250,249,246,.06); font-family:var(--sans); font-weight:600; font-size:clamp(10.5px, calc(.27vw + 9.45px), 11.5px); letter-spacing:.16em; color:var(--ink); border:1px solid rgba(250,249,246,.24); border-radius:22px; line-height:18px; padding:clamp(9px, calc(17.2px - 1.08vw), 13px) clamp(14px, calc(1.08vw + 9.8px), 18px); white-space:nowrap; flex-shrink:0; }
.pill:hover { background:rgba(250,249,246,.12); color:var(--ink); }
@media (max-width: 759.98px) { .nav-far { display:none; } }

/* ------------------------------------------------------------ an index's masthead */
/* The home page's second line, "Develop an eye.", at its own size: right
   set, with his rule running in from the left. */

.mast { padding:var(--air) var(--gutter) clamp(36px, calc(5.4vw + 15px), 92px); }
.display { margin-top:clamp(14px, calc(1.62vw + 7.7px), 22px); font-family:var(--sans); font-weight:700; font-size:clamp(34px, 7.7vw, 132px); line-height:1; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.mast .display { display:flex; align-items:center; justify-content:flex-end; gap:.32em; text-align:right; }
.rule { flex:0 1 2.9em; min-width:.8em; height:.05em; margin-right:auto; background:var(--ink); border-radius:.025em; }

/* ------------------------------------------------------------ the Journal's index */
/* The app's index, read down: the writing, then a grey photograph with one
   rectangle of colour in it, a dot per tag. The picture sits on the right. */

.entries { list-style:none; padding:0 var(--gutter); }
.entry-row { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr); gap:clamp(28px, calc(11.89vw - 18.4px), 72px); align-items:end; padding:clamp(32px, calc(3.6vw + 18px), 72px) 0; border-top:1px solid var(--hair); }
.entry-copy { padding-bottom:4px; }
.entry-title { margin-top:clamp(14px, calc(1.08vw + 9.8px), 20px); font-family:var(--sans); font-weight:700; font-size:clamp(28px, calc(2.6vw + 13px), 52px); line-height:1.06; letter-spacing:-.018em; text-wrap:balance; }
.entry-title a { color:inherit; }
/* the whole row is the door; the tags stand above it */
.entry-title a::after { content:''; position:absolute; inset:0; z-index:1; }
.entry-row:hover .entry-title a { color:var(--coral); }
.entry-line { margin-top:clamp(14px, calc(1.08vw + 9.8px), 20px); font-size:var(--body); line-height:1.67; color:var(--ink-62); max-width:30em; text-wrap:pretty; }
.entry-picture { aspect-ratio:4 / 3; }
.marks { position:relative; z-index:2; list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:clamp(18px, calc(1.08vw + 13.8px), 26px); }
.mark { display:inline-flex; align-items:center; gap:7px; padding:5px 0; font-family:var(--sans); font-weight:600; font-size:10.5px; line-height:12px; letter-spacing:.09em; text-transform:uppercase; color:rgba(250,249,246,.72); }
a.mark:hover { color:var(--ink); }
.dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }

/* ------------------------------------------------------------ a picture */
/* Two layers, one box: the grey ground and the colour, clipped to the
   window. Never outlined: the colour is the edge. */

.picture { position:relative; overflow:hidden; background:#0E0E10; }
.picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ------------------------------------------------------------ an entry */
/* The app's window surface: the photograph in grey with its one window of
   colour, the title and the card's line over it, the tags, then the essay.
   On a desktop the photograph holds its seat beside the essay. */

.entry { display:grid; grid-template-columns:min(36vw, calc((100svh - 56px) * 402 / 874)) minmax(0, 1fr); column-gap:clamp(40px, 6vw, 112px); padding:clamp(28px, 3.6vw, 56px) var(--gutter) 0; align-items:start; }
.entry-hero { display:contents; }
.hero-picture { grid-column:1; grid-row:1 / span 2; position:sticky; top:28px; aspect-ratio:402 / 874; }
.entry-head { grid-column:2; grid-row:1; padding-top:clamp(24px, 6vh, 96px); }
.entry-h1 { margin-top:clamp(16px, calc(1.62vw + 9.7px), 24px); font-family:var(--sans); font-weight:700; font-size:clamp(40px, calc(3.9vw + 10px), 84px); line-height:1.02; letter-spacing:-.022em; text-wrap:balance; max-width:13em; }
.dek { margin-top:clamp(18px, calc(1.62vw + 11.7px), 30px); font-size:clamp(19px, calc(1.08vw + 14.8px), 27px); line-height:1.47; letter-spacing:-.006em; color:var(--ink-78); max-width:26em; text-wrap:pretty; }
.entry-body { grid-column:2; grid-row:2; padding-top:clamp(28px, calc(2.7vw + 17.5px), 48px); max-width:44rem; }

/* the app's tag card: the name in caps, dark on its kind's ink */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(36px, calc(3.24vw + 23.4px), 60px); }
.chip { display:inline-block; padding:5px 8px; background:var(--tag, #7A9CC6); font-family:var(--sans); font-weight:600; font-size:11px; line-height:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ground); }
a.chip:hover { color:var(--ground); background:color-mix(in srgb, var(--tag, #7A9CC6) 78%, #FAF9F6); }

.essay { font-size:clamp(16px, calc(.4vw + 14.4px), 18.5px); line-height:1.74; color:var(--ink-78); }
.essay > p { text-wrap:pretty; }
.essay > * + * { margin-top:1.15em; }
.essay > .opening::first-letter { float:left; font-family:var(--sans); font-weight:700; font-size:3.7em; line-height:.8; margin:.08em .12em 0 -.02em; color:var(--ink); }
.essay blockquote { margin:2.2em 0; padding:1.7em .6em; border-top:1px solid rgba(250,249,246,.14); border-bottom:1px solid rgba(250,249,246,.14); text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.essay blockquote p { font-style:italic; font-size:clamp(21px, calc(.81vw + 17.8px), 27px); line-height:1.4; color:var(--ink); text-wrap:balance; }
.essay cite { font-style:normal; font-weight:600; font-size:12px; letter-spacing:.02em; color:rgba(250,249,246,.6); }
.quote-mark { width:6px; height:6px; border-radius:50%; background:rgba(250,249,246,.5); }

/* his plate: the photograph in grey, a shade at its foot, the caption on it */
.plate { position:relative; margin:2.4em 0; }
.plate-picture { height:clamp(250px, 30vw, 440px); }
.plate.is-portrait .plate-picture { height:clamp(320px, 42vw, 620px); }
.plate::after { content:''; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(180deg, rgba(4,4,4,0), rgba(4,4,4,.55)); pointer-events:none; }
.plate figcaption { position:absolute; z-index:1; left:clamp(14px, calc(2.7vw + 3.5px), 24px); right:clamp(14px, calc(2.7vw + 3.5px), 24px); bottom:clamp(14px, calc(1.62vw + 7.7px), 20px); display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.plate-label { font-family:var(--sans); font-weight:600; font-size:clamp(9.5px, calc(.405vw + 7.9px), 11px); letter-spacing:.18em; color:var(--ink-78); }
.plate-year { font-family:var(--mono); font-size:clamp(9px, calc(.405vw + 7.42px), 10.5px); letter-spacing:.2em; color:var(--ink-62); }

.fin { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:clamp(48px, calc(3.24vw + 35.4px), 72px); font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--ink-38); }
.fin-mark { width:7px; height:7px; border-radius:50%; background:var(--ink); }

/* ------------------------------------------------------------ the niches' index */

.niche-rows { list-style:none; padding:0 var(--gutter); }
.niche-rows li { border-top:1px solid var(--hair); }
.niche-door { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) 9em; gap:10px clamp(24px, 4vw, 72px); align-items:baseline; padding:clamp(24px, calc(1.62vw + 17.7px), 40px) 0; color:inherit; }
.niche-name { font-family:var(--sans); font-weight:700; font-size:clamp(26px, calc(2.2vw + 13px), 46px); line-height:1.06; letter-spacing:-.018em; text-wrap:balance; }
.niche-door:hover .niche-name { color:var(--coral); }
.niche-line { font-size:clamp(15px, calc(.4vw + 13.4px), 17px); line-height:1.62; color:var(--ink-62); max-width:32em; text-wrap:pretty; }
.niche-era { text-align:right; white-space:nowrap; }

/* ------------------------------------------------------------ a niche */

.niche-head { padding:var(--air) var(--gutter) 0; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; column-gap:24px; }
.niche-head > .stamp:first-child { grid-column:1 / -1; }
.niche-h1 { font-size:clamp(40px, 7.7vw, 132px); letter-spacing:-.025em; }
.era { display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding-bottom:.6em; color:var(--ink-62); }

.niche-essay { padding:clamp(48px, calc(5.4vw + 27px), 112px) var(--gutter) 0; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(24px, 5vw, 96px); align-items:start; }
.lead { font-size:clamp(23px, calc(2.43vw + 13.5px), 34px); line-height:1.42; letter-spacing:-.008em; color:var(--ink); text-wrap:pretty; }
.rest { padding-top:.5em; font-size:var(--body); line-height:1.67; color:var(--ink-62); max-width:34em; text-wrap:pretty; }

.niche-map, .films { padding:var(--air) var(--gutter) 0; }
.section-stamp { margin-bottom:clamp(22px, calc(2.16vw + 13.6px), 36px); }
.map-grid { display:flex; gap:clamp(28px, 5vw, 96px); align-items:flex-start; }
/* the map takes about half the width; where it is taller than the window
   it scrolls until its foot shows, then holds there while its threads are
   read beside it */
.map-figure { --fig-w:min(calc((100vw - 2 * var(--gutter)) * .5), 660px); position:sticky; top:min(20px, calc(100svh - var(--fig-w) * var(--map-h) / 402 - 112px)); flex:0 0 auto; width:var(--fig-w); }
.map-side { flex:1 1 0; min-width:0; }
.map-frame { width:100%; }
.map-frame canvas { display:block; width:100%; height:100%; touch-action:manipulation; }
.map-caption { margin-top:14px; min-height:3.6em; display:flex; flex-direction:column; gap:8px; }
.cap-stamp { color:rgba(250,249,246,.5); letter-spacing:.2em; }
.cap-line, .thread-line { font-size:clamp(15px, calc(.4vw + 13.4px), 17px); line-height:1.45; }
.yr { font-family:var(--mono); font-size:.64em; letter-spacing:.06em; color:var(--ink-45); white-space:nowrap; }
.arrow { color:rgba(250,249,246,.5); padding:0 .65em; }

.side-stamp { margin-bottom:6px; }
.threads { list-style:none; padding:0; border-bottom:1px solid var(--hair-soft); }
.thread { display:flex; flex-direction:column; gap:7px; width:100%; padding:15px 0; border:0; border-top:1px solid var(--hair-soft); background:none; text-align:left; color:var(--ink-62); cursor:pointer; transition:color .25s; }
.thread .stamp { font-size:9.5px; letter-spacing:.2em; transition:color .25s; }
.thread:hover, .thread.is-lit { color:var(--ink); }
.thread.is-lit .stamp { color:var(--ink-62); }

.relations { margin-top:clamp(36px, calc(2.7vw + 25.5px), 56px); border-bottom:1px solid var(--hair-soft); }
.relation { display:grid; grid-template-columns:minmax(0, 12em) minmax(0, 1fr); gap:8px 20px; align-items:baseline; padding:16px 0; border-top:1px solid var(--hair-soft); }
.relation dt { font-size:9.5px; letter-spacing:.2em; }
.relation dd { display:flex; flex-direction:column; gap:6px; }
.rel { font-size:clamp(15px, calc(.4vw + 13.4px), 17px); line-height:1.45; }
.rel-by { color:var(--ink-62); }
.rel-by::before { content:'·'; padding:0 .6em; color:var(--ink-38); }

.film-rows { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(28px, 5vw, 96px); }
.film-rows li { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'title year' 'director year'; column-gap:16px; row-gap:3px; align-items:baseline; padding:15px 0; border-top:1px solid var(--hair-soft); }
.film-title { grid-area:title; font-size:clamp(15px, calc(.4vw + 13.4px), 17px); line-height:1.4; }
.film-director { grid-area:director; font-size:13.5px; line-height:1.4; color:var(--ink-62); }
.film-year { grid-area:year; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-45); }

/* ------------------------------------------------------------ a document */
/* /legal, /support and the 404 (F50): an index's masthead, then one column
   of reading at the measure of his "Our why" (780px, centred), in his body
   size and ink. The legal text arrives from legal/*.md as plain headings,
   paragraphs, lists and rules, and is set here without a class of its own. */

.doc-mast { padding-bottom:clamp(36px, calc(4.6vw + 18px), 88px); }
.doc-index { display:flex; flex-wrap:wrap; gap:6px 12px; }
.doc-index span { color:rgba(250,249,246,.24); }
.doc { box-sizing:content-box; max-width:780px; margin:0 auto; padding:0 var(--gutter) clamp(72px, calc(9vw + 20px), 140px); font-size:var(--body); line-height:1.67; color:var(--ink-62); }
.doc section { scroll-margin-top:24px; }
.doc > * + *, .doc section > * + * { margin-top:1.1em; }
.doc p, .doc li { text-wrap:pretty; }
.doc h2 { margin-top:2.4em; font-family:var(--sans); font-weight:600; font-size:clamp(23px, calc(1.08vw + 18.8px), 31px); line-height:1.24; letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
.doc section > h2:first-child { margin-top:0; }
.doc h3 { margin-top:2.2em; font-family:var(--sans); font-weight:600; font-size:clamp(17.5px, calc(.54vw + 15.4px), 21px); line-height:1.35; color:var(--ink); }
.doc h4, .doc h5 { margin-top:1.8em; font-weight:600; font-size:1em; color:var(--ink-78); }
.doc strong { font-weight:600; color:var(--ink-78); }
.doc a { color:var(--ink); border-bottom:1px solid rgba(250,249,246,.28); }
.doc a:hover { color:var(--coral); border-bottom-color:var(--coral); }
.doc ul, .doc ol { padding-left:1.25em; }
.doc li + li { margin-top:.55em; }
.doc li::marker { color:var(--ink-38); }
.doc hr { border:0; border-top:1px solid var(--hair); margin:3.2em 0; }
.doc code { font-family:var(--mono); font-size:.84em; }
.doc .doc-meta { margin-bottom:2.4em; }
.doc .pending { padding-left:1em; border-left:2px solid var(--plum); }
.doc-lead { font-size:clamp(19px, calc(1.08vw + 14.8px), 26px); line-height:1.5; letter-spacing:-.006em; color:var(--ink-78); }
.doc-doors { list-style:none; padding:0 !important; margin-top:2em !important; border-bottom:1px solid var(--hair-soft); }
.doc-doors li { margin:0 !important; border-top:1px solid var(--hair-soft); }
.doc-doors a { display:block; padding:16px 0; border:0; font-weight:600; font-size:clamp(17px, calc(.54vw + 14.9px), 21px); }

/* ------------------------------------------------------------ his contact and footer */

#contact { padding:calc(var(--air) * 1.1) var(--gutter) clamp(36px, calc(9.73vw - 1.9px), 72px); }
#contact .write { margin-top:clamp(16px, calc(1.62vw + 9.7px), 22px); display:flex; align-items:center; }
#contact h2 { font-family:var(--sans); font-weight:600; font-size:clamp(33px, calc(2.97vw + 21.4px), 44px); letter-spacing:-.015em; color:var(--ink); }
.caret { display:inline-block; flex-shrink:0; width:3px; height:clamp(29px, calc(2.43vw + 19.5px), 38px); background:var(--plum); margin-left:clamp(10px, calc(1.08vw + 5.8px), 14px); animation:blink 1.1s infinite; }
#contact p { margin-top:20px; font-size:15px; line-height:1.67; color:var(--ink-62); max-width:400px; text-wrap:pretty; }
#contact .mail { margin-top:16px; font-family:var(--mono); font-size:clamp(11.5px, calc(.676vw + 8.86px), 14px); letter-spacing:.16em; }
#contact .mail a { color:#FAF9F661; }
#contact .mail a:hover { color:var(--coral); }

#download { padding:clamp(36px, calc(4.86vw + 17.1px), 54px) var(--gutter) calc(clamp(28px, calc(4.6vw + 10.1px), 45px) + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:center; text-align:center; }
.availability { font-family:var(--mono); font-size:var(--stamp); letter-spacing:.22em; }
.availability a { color:var(--ink-62); }
.availability a:hover { color:var(--coral); }
.legal { display:flex; flex-wrap:wrap; justify-content:center; gap:0 clamp(18px, calc(2.7vw + 7.5px), 28px); margin-top:clamp(18px, calc(2.7vw + 7.5px), 28px); }
.legal a { font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.16em; padding:11px 0; }
.colophon { margin-top:clamp(14px, calc(2.7vw + 3.5px), 24px); max-width:660px; font-family:var(--mono); font-size:clamp(9px, calc(.405vw + 7.42px), 10.5px); line-height:1.85; letter-spacing:.1em; color:var(--ink-38); text-wrap:pretty; }

/* ------------------------------------------------------------ narrower windows */

@media (max-width: 959.98px) {
  /* an entry opens as the app's does: the photograph takes the page, the
     title and the card's line at its foot, the essay after it */
  .entry { display:block; padding:16px 0 0; }
  .entry-hero { display:block; position:relative; }
  .hero-picture { position:relative; top:auto; width:100%; }
  .entry-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(to top, rgba(8,8,8,.92) 12%, rgba(8,8,8,0) 100%); pointer-events:none; }
  .entry-head { position:absolute; z-index:1; left:24px; right:24px; bottom:clamp(28px, 6vw, 56px); padding:0; }
  .entry-h1 { font-size:clamp(38px, calc(5.4vw + 22px), 64px); text-shadow:0 2px 24px rgba(8,8,8,.5); }
  .dek { font-size:clamp(15px, calc(1.08vw + 10.8px), 19px); line-height:1.55; max-width:24em; }
  .entry-body { padding:clamp(28px, 4vw, 44px) var(--gutter) 0; max-width:44rem; margin:0 auto; }
  .entry-head .stamp { color:var(--ink-62); text-shadow:0 1px 12px rgba(8,8,8,.6); }

  .map-grid { display:block; }
  .map-figure { position:static; width:auto; }
  .map-side { margin-top:clamp(36px, 6vw, 56px); }
  .map-frame { width:auto; margin:0 calc(-1 * var(--gutter)); }
  .map-caption { padding:0; }
}

@media (max-width: 759.98px) {
  .entry-row { grid-template-columns:minmax(0, 1fr); gap:22px; }
  .entry-picture { order:-1; }
  .niche-door { grid-template-columns:minmax(0, 1fr); }
  .niche-era { text-align:left; order:-1; }
  .niche-head { grid-template-columns:minmax(0, 1fr); }
  .era { flex-direction:row; align-items:baseline; gap:14px; padding:14px 0 0; }
  .niche-essay { grid-template-columns:minmax(0, 1fr); }
  .rest { padding-top:0; }
  .relation { grid-template-columns:minmax(0, 1fr); }
  .film-rows { grid-template-columns:minmax(0, 1fr); }
  .mast .display { gap:.24em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rise, .caret { animation:none; }
  .thread, .thread .stamp { transition:none; }
}