/* Stone Glade: a cairn of shipped games on cool granite. One family (Archivo), width carries the voice:
   expanded black for display, normal for reading, condensed for small data. */
:root {
  --stone: #e5e8e2;      /* page ground: pale granite with a green bias */
  --slab: #d4d9d0;       /* raised surfaces */
  --ink: #17201b;        /* text: moss-black */
  --muted: #535f57;      /* secondary text (4.5:1 on --slab) */
  --stone-sub: #373e39;  /* small text on the cairn stones */
  --moss: #3b6735;       /* accent: links, focus, the moss on the stones */
  --lichen: #b59a2f;     /* rare highlight */
  --line: #b9c0b5;
  --granite-1: #cdd2c9;
  --granite-2: #bfc5bb;
  --granite-3: #b1b8ad;
  --granite-4: #a3aa9f;
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --measure: 66ch;
  --art-dim: none; --icon-dim: none; --grain: url(img/art/grain.webp?v=2e6a8abbe0);
  --hero-wide: url(img/art/hero-light-1792.webp?v=07f65fc548);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone: #121714; --slab: #1b221e; --ink: #e3e8e1; --muted: #9aa69d; --stone-sub: #d3dad4; --art-dim: brightness(.42) saturate(.85); --grain: url(img/art/grain-soft.webp?v=2d242b2613); --icon-dim: brightness(.78); --hero-wide: url(img/art/hero-dark-1792.webp?v=59fd862ba0); --moss: #8fbd73; --lichen: #d8c167;
    --line: #2f3a33; --granite-1: #2a322d; --granite-2: #323b35; --granite-3: #3a443d; --granite-4: #434e46;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --stone: #121714; --slab: #1b221e; --ink: #e3e8e1; --muted: #9aa69d; --stone-sub: #d3dad4; --art-dim: brightness(.42) saturate(.85); --grain: url(img/art/grain-soft.webp?v=2d242b2613); --icon-dim: brightness(.78); --hero-wide: url(img/art/hero-dark-1792.webp?v=59fd862ba0); --moss: #8fbd73; --lichen: #d8c167;
  --line: #2f3a33; --granite-1: #2a322d; --granite-2: #323b35; --granite-3: #3a443d; --granite-4: #434e46;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; } /* safety net: no sideways wobble on phones */
body {
  margin: 0; background: var(--stone) var(--grain); background-blend-mode: soft-light; color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; font-stretch: 100%;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--moss); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 72rem; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--stone); padding: .5rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .logo { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding-block: .25rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--moss); }

/* Type scale (1.25 ratio) */
h1, h2, h3 { font-family: var(--display); line-height: 1.05; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 800; font-stretch: 125%; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; font-stretch: 118%; }
h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 110%; }
p { margin: 0; max-width: var(--measure); }
.lead { font-size: 1.22rem; line-height: 1.55; }
.small, .meta { font-size: .92rem; font-stretch: 87%; color: var(--muted); }

main { display: block; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.section > .wrap { display: grid; gap: 1.5rem; }
.section-head { display: grid; gap: .6rem; }
.stack { display: grid; gap: 1rem; }

/* Breadcrumbs */
.crumbs { padding-top: 1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; font-size: .92rem; font-stretch: 87%; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.crumbs a { color: var(--muted); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn.primary { background: var(--ink); color: var(--stone); }
.btn:hover { background: var(--ink); color: var(--stone); }

/* Hero with cairn */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero-copy { display: grid; gap: 1.4rem; min-width: 0; }
.wordmark { font-size: clamp(3.2rem, 11vw, 7.8rem); line-height: .86; font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; }
.wordmark span { display: block; }
.wordmark span + span { padding-left: .55em; }

.cairn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.cairn li { width: 100%; display: flex; justify-content: center; margin-top: -11px; }
.stone {
  --w: 70%; --x: 0px; --rot: 0deg;
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: var(--w); aspect-ratio: calc(var(--ar, 3.5) / var(--squash, 1)); padding: 3% 8% 1%; color: var(--ink); text-decoration: none; text-align: center; line-height: 1.15;
  transform: translateX(var(--x)) rotate(var(--rot)); transition: transform .18s ease;
}
.stone::before { /* the painted stone */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: center / 100% 100% no-repeat; filter: var(--art-dim) drop-shadow(0 3px 2px rgb(0 0 0 / .12));
}
.s2 { --ar: 3.0; } .s2::before { background-image: url(img/art/stone-2.webp?v=bb27dd6168); }
.s3 { --ar: 3.3; } .s3::before { background-image: url(img/art/stone-3.webp?v=ed03548a87); }
.s4 { --ar: 3.6; } .s4::before { background-image: url(img/art/stone-4.webp?v=d5c391b74c); }
.s5 { --ar: 3.9; } .s5::before { background-image: url(img/art/stone-5.webp?v=09bf894f10); }
.s6 { --ar: 4.2; } .s6::before { background-image: url(img/art/stone-6.webp?v=97bf7cc1bc); }
.s7 { --ar: 4.4; } .s7::before { background-image: url(img/art/stone-7.webp?v=d77992efcd); }
.s8 { --ar: 4.6; } .s8::before { background-image: url(img/art/stone-8.webp?v=2a0660eb42); }
.s9 { --ar: 4.8; } .s9::before { background-image: url(img/art/stone-9.webp?v=2d1c2eca66); }
.stone strong { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(.95rem, 1.9vw, 1.12rem); }
.stone em { font-style: normal; font-size: .78rem; font-stretch: 87%; color: var(--stone-sub); }
.stone:hover { transform: translateX(var(--x)) rotate(var(--rot)) translateY(-3px); }
.stone:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.cairn-ground { /* moss, grass and pebbles at the foot of the cairn */
  position: relative; z-index: 1; width: 104%; height: clamp(46px, 6vw, 68px); margin: -30px -2% 0; pointer-events: none;
  background:
    url(img/art/moss-3.webp?v=5ba369c478) left 2% bottom / auto 86% no-repeat,
    url(img/art/grass.webp?v=d705d549d7) left 21% bottom / auto 74% no-repeat,
    url(img/art/mushrooms.webp?v=7afdbc1993) right 25% bottom / auto 50% no-repeat,
    url(img/art/pebbles-2.webp?v=28f771c04f) right 1% bottom / auto 66% no-repeat;
  filter: var(--art-dim);
}
.cairn-caption { margin: .7rem auto 0; text-align: center; max-width: none; width: fit-content; padding: .2rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--stone) 84%, transparent); position: relative; z-index: 1; }

/* Facts row */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.facts div { border-left: 3px solid var(--moss); padding-left: .8rem; }
.facts dt { font-size: .9rem; font-stretch: 87%; color: var(--muted); order: 2; }
.facts dd { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.facts div { display: flex; flex-direction: column; }

/* Game list */
.game-group { display: grid; gap: .25rem; }
.game-group + .game-group { margin-top: 1.5rem; }
.game-group > p { color: var(--muted); }
.games { list-style: none; margin: .75rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.game {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: .4rem 1.1rem; align-items: center;
  padding-block: 1rem; border-bottom: 1px solid var(--line);
}
.pebble {
  width: 56px; height: 46px; border-radius: 52% 48% 44% 56% / 60% 56% 44% 40%;
  background: radial-gradient(circle at 30% 28%, var(--h1) 0 38%, transparent 39%), var(--h2);
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / .18);
}
.game h3 a { color: var(--ink); text-decoration: none; }
.game h3 a:hover { text-decoration: underline; text-decoration-color: var(--moss); }
.game p { color: var(--muted); }
.game .stat { font-family: var(--display); font-weight: 700; font-stretch: 105%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Game page */
.game-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding-block: 2rem 3rem; }
.cover {
  aspect-ratio: 16 / 10; max-width: 100%; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 32% 30%, var(--h1) 0 34%, transparent 35%), radial-gradient(circle at 72% 70%, color-mix(in oklab, var(--h1) 40%, transparent) 0 22%, transparent 23%), var(--h2);
  box-shadow: inset 0 -14px 0 rgb(0 0 0 / .18);
}
.cover-img { border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.kv { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0; }
.kv dt { color: var(--muted); font-stretch: 87%; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 560px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt { font-size: .9rem; }
  .kv dd { margin-bottom: .7rem; }
}
.code { font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.ticks { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; max-width: var(--measure); }
.ticks li::marker { color: var(--moss); }

/* Credits table */
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; }
th, td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-stretch: 87%; color: var(--muted); font-size: .92rem; }
td:first-child { font-weight: 600; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.timeline > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .3rem 1.5rem; }
.timeline .when { font-stretch: 87%; color: var(--muted); padding-top: .15rem; font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 1.15rem; }
.timeline ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }

/* Profile header */
.profile .wrap { display: grid; gap: 1.2rem; padding-block: 2rem 3rem; }
.names { font-size: 1rem; color: var(--muted); }
.names .job { display: block; }
.names .alt-name { display: block; font-size: .85em; line-height: 1.5; margin-top: .15em; }
.kv-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem 2rem; margin: .5rem 0 0; }
.kv-wide dt { color: var(--muted); font-size: .9rem; font-stretch: 87%; }
.kv-wide dd { margin: 0; font-weight: 600; }

.faq { display: grid; gap: 1.4rem; margin: 0; }
.faq dt { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.12rem; }
.faq dd { margin: .35rem 0 0; max-width: var(--measure); }

/* Lab */
.vr { display: grid; gap: .7rem; margin: 0; }
.vr video { border-radius: 14px; width: 100%; aspect-ratio: 1280 / 592; background: var(--slab); }
.vr figcaption { color: var(--muted); font-size: .95rem; }
.protos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.6rem 2rem; }
.protos li { display: grid; gap: .35rem; align-content: start; }

.callout { background: var(--slab); border-radius: 18px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .9rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.contact-list strong { display: inline-block; min-width: 6.5rem; font-weight: 600; color: var(--muted); font-stretch: 87%; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; color: var(--muted); font-size: .95rem; }
.site-foot .wrap { display: grid; gap: 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.foot-links a { color: var(--muted); }

@media (max-width: 760px) {
  .hero .wrap, .game-hero .wrap, .two-col { grid-template-columns: minmax(0, 1fr); }
  .timeline > li { grid-template-columns: minmax(0, 1fr); }
  .game { grid-template-columns: 88px minmax(0, 1fr); }
  .game .stat { grid-column: 2; text-align: left; font-size: .95rem; }
  .pebble { width: 44px; height: 36px; }
  .cairn { max-width: 26rem; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* heading roles inside lists */
.group-title { font-size: 1.25rem; font-weight: 700; font-stretch: 110%; }
h2.group-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; font-stretch: 118%; }
.game-title { font-family: var(--display); font-size: 1.12rem; font-weight: 700; font-stretch: 108%; line-height: 1.2; margin: 0; }
.game-title a { color: var(--ink); text-decoration: none; }
.game-title a:hover { text-decoration: underline; text-decoration-color: var(--moss); }

/* Lab loops */
.proto-loop { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--slab); margin-bottom: .4rem; }
/* 5 prototypes fill 6 cells: the first (largest project) spans two columns */
.protos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.protos > li:first-child { grid-column: span 2; }
@media (max-width: 900px) { .protos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .protos { grid-template-columns: minmax(0, 1fr); } .protos > li:first-child { grid-column: auto; } }

/* List thumbnails: a gameplay frame where we have footage, a colour swatch of the same size otherwise */
.thumb { width: 128px; height: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; background: var(--slab); }
.thumb.swatch { background: radial-gradient(circle at 30% 30%, var(--h1) 0 30%, transparent 31%), var(--h2); box-shadow: inset 0 -6px 0 rgb(0 0 0 / .16); }
@media (max-width: 760px) { .thumb { width: 88px; height: 50px; border-radius: 8px; } }

.edition { margin: 0; display: grid; gap: .6rem; max-width: 30rem; }
.edition figcaption { color: var(--muted); font-size: .95rem; }

/* ---------- Header: nav + language switcher ---------- */
.head-right { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.langs ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.langs a { display: block; padding: .2rem .65rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .9rem; line-height: 1.4; }
.langs a:hover { color: var(--ink); background: var(--slab); }
.langs a[aria-current="true"] { background: var(--ink); color: var(--stone); }
.sub-h { font-size: 1.25rem; }

/* ---------- Per-language typography ---------- */
.wordmark, .brand { font-family: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif; }
html[lang="ja"] {
  --display: "Archivo", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --body: "Archivo", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --measure: 38em;
}
html[lang="ja"] body { line-height: 1.85; }
html[lang="ja"] :is(h1, h2, h3, .game-title, .group-title) { letter-spacing: 0; line-height: 1.3; word-break: auto-phrase; }
/* Short Japanese labels break between phrases, not inside words */
html[lang="ja"] :is(dt, th, td, .kv dd, figcaption, .btn, .facts dt, .faq dt, .stone span, .meta, .when, .alt-name, .job) { word-break: auto-phrase; }
.nw { word-break: keep-all; } /* a name may wrap at its space, never mid-name */
html[lang="ja"] p, html[lang="ja"] li, html[lang="ja"] dd { line-break: strict; word-break: normal; overflow-wrap: break-word; }
html[lang="ja"] .lead { font-size: 1.12rem; }
html[lang="ja"] h1:not(.wordmark) { font-size: clamp(2rem, 5.2vw, 3.6rem); }

html[lang="ru"] {
  --display: "Unbounded", "Archivo", "Arial Black", sans-serif;
  --body: "Golos Text", "Archivo", "Helvetica Neue", Arial, sans-serif;
}
html[lang="ru"] :is(h1, h2, h3, .game-title, .group-title, .facts dd, .stone strong, .faq dt) { letter-spacing: -0.01em; font-stretch: 100%; }
html[lang="ru"] h1:not(.wordmark) { font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.12; }
html[lang="ru"] h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
html[lang="ru"] p, html[lang="ru"] li, html[lang="ru"] dd { hyphens: auto; }
html[lang="ru"] .stone strong { font-size: clamp(.82rem, 1.6vw, 1rem); }

/* Contact reveal buttons */
.link-btn { font: inherit; color: var(--moss); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.link-btn:hover { text-decoration-thickness: 2px; }
.kv dd .sub { display: block; font-size: .88em; color: var(--muted); }

/* ---------- Artwork (art-src/ -> make_art.py -> static/img/art/) ---------- */
.hero { position: relative; isolation: isolate; }
.hero::before { /* misty glade behind the hero, fading out under the text */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain),
    linear-gradient(90deg, var(--stone) 0%, color-mix(in srgb, var(--stone) 88%, transparent) 34%, color-mix(in srgb, var(--stone) 25%, transparent) 66%, transparent 88%),
    var(--hero-wide) right bottom / cover no-repeat;
  background-color: var(--stone);
  background-blend-mode: soft-light, normal, normal; /* grain on top hides gradient banding */
}
.hero .cairn { background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in srgb, var(--stone) 55%, transparent), transparent 75%); }
.h-icon { width: 2.5rem; height: auto; flex: none; filter: var(--icon-dim); }
.has-icon .h-icon { display: inline-block; vertical-align: -.32em; margin-right: .6rem; }
.callout { position: relative; }
.callout::before { /* a little moss on the corner */
  content: ""; position: absolute; top: -26px; right: 22px; width: 104px; height: 60px; pointer-events: none;
  background: url(img/art/moss-2.webp?v=a188e33f40) center bottom / contain no-repeat; filter: var(--art-dim);
}
.site-foot { border-top: 0; padding-top: 0; }
.site-foot::before { /* pebble-and-moss ground line closing every page */
  content: ""; display: block; height: clamp(38px, 4.6vw, 58px); margin-bottom: 1.6rem;
  background: url(img/art/ground.webp?v=ed176dab46) center bottom / auto 100% repeat-x; filter: var(--art-dim);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.nf-art { width: min(100%, 26rem); height: auto; margin-bottom: 1rem; filter: var(--art-dim); }
@media (max-width: 760px) {
  .hero::before {
    background:
      var(--grain),
      linear-gradient(180deg, var(--stone) 0%, color-mix(in srgb, var(--stone) 55%, transparent) 38%, color-mix(in srgb, var(--stone) 15%, transparent) 75%) left bottom / 100% 36rem no-repeat,
      var(--hero-wide) 80% bottom / auto 36rem no-repeat;
    background-color: var(--stone);
    background-blend-mode: soft-light, normal, normal;
  }
  .h-icon { width: 2.1rem; }
  .cairn { --squash: 1.3; }
  .cairn-caption { border-radius: 1rem; }
}

/* Credits table becomes stacked cards on phones (no sideways scrolling) */
@media (max-width: 600px) {
  .table-wrap table { min-width: 0; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .table-wrap td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; padding: .12rem 0; border: 0; }
  .table-wrap td:first-child { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
  .table-wrap td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .9rem; font-stretch: 87%; }
}

/* About: portrait beside the introduction */
.profile-grid { grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 330px); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.profile-main { display: grid; gap: 1.2rem; min-width: 0; grid-row: 1; grid-column: 1; }
.portrait { display: block; position: relative; grid-row: 1; grid-column: 2; margin-top: .4rem; }
.portrait img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 10px 28px rgb(0 0 0 / .14); }
.portrait::after { /* a tuft of moss on the photo's corner, like the stones */
  content: ""; position: absolute; left: -18px; bottom: -14px; width: 92px; height: 60px; pointer-events: none;
  background: url(img/art/moss-1.webp?v=3b00617b86) center bottom / contain no-repeat; filter: var(--art-dim);
}
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait { grid-column: 1; grid-row: 1; width: 8.5rem; margin-top: 0; }
  .profile-main { grid-row: 2; }
  .portrait img { border-radius: 50%; }
  .portrait::after { left: auto; right: -14px; bottom: -6px; width: 64px; height: 42px; }
}