/* Components: scene, chrome, pills, menu panel, sheet, rows. See docs/DESIGN.md. */

/* ================= scene ================= */
.stage {
  --fig: min(70vw, 36svh);
  --feet: .885;
  --far: 1100 / 1144;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky) 0, var(--sky) 26%, color-mix(in srgb, var(--sky) 55%, var(--mist)) 52%, var(--mist) 74%, color-mix(in srgb, var(--mist) 70%, var(--hill)) 100%);
}
.stage--short { min-height: 72svh; --wh: clamp(110px, 22svh, 240px); }
.stage--sheet { --fr: 34px; }

.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene > * { position: absolute; }
.L {
  left: -28px; right: -28px;
  translate: calc(var(--dx, 0px) * var(--d, 0)) calc(var(--dy, 0px) * var(--d, 0));
}

.sun {
  left: 61%; top: 22%;
  width: clamp(110px, 15vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spore);
  opacity: .55;
}
/* phones: the headline fills the sky, so the disc moves down-right, above the water */
@media (max-width: 600px) {
  .sun { left: auto; right: 6%; top: 50%; width: 76px; opacity: .4; }
}

.hills-far, .hills-near {
  mask-repeat: no-repeat;
  mask-position: 40% 100%;
}
.hills-far {
  bottom: calc(var(--wh) - 12px);
  height: clamp(150px, 36svh, 440px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hill) 55%, var(--sky)) 0, color-mix(in srgb, var(--hill) 22%, var(--mist)) 100%);
  mask-image: url(../scene/hills-far.svg);
  mask-size: max(100%, 1100px) 100%;
}
.hills-near {
  bottom: calc(var(--wh) - 12px);
  height: clamp(110px, 25svh, 330px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hill) 80%, var(--mold)) 0, color-mix(in srgb, var(--hill) 62%, var(--mist)) 100%);
  mask-image: url(../scene/hills-near.svg);
  mask-size: max(100%, 1300px) 100%;
  mask-position: 70% 100%;
}

.fog {
  left: 0;
  width: 200%;
  background: var(--mist);
  mask-image: url(../scene/fog-a.svg);
  mask-size: 50% 100%;
  mask-repeat: repeat-x;
}
.fog--a { bottom: calc(var(--wh) + 9svh); height: clamp(90px, 24svh, 280px); opacity: .8; }
.fog--b { bottom: calc(var(--wh) - 22px); height: clamp(70px, 15svh, 180px); opacity: .9; mask-image: url(../scene/fog-b.svg); }
@media (prefers-reduced-motion: no-preference) {
  .fog--a { animation: drift 150s linear infinite; }
  .fog--b { animation: drift 95s linear infinite reverse; }
}
@keyframes drift { to { transform: translateX(-50%); } }

.water {
  left: 0; right: 0; bottom: 0;
  height: var(--wh);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--water) 70%, var(--mist)) 0, var(--water) 32%, color-mix(in srgb, var(--water) 72%, var(--mold)) 100%);
  overflow: hidden;
}
.water::before { /* mirror of the sky near the horizon */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(to bottom, var(--mist), transparent);
  opacity: .35;
}
.ripples, .algae { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; mask-repeat: repeat-x; mask-size: 50% 100%; }
.ripples--a { background: var(--spore); opacity: .34; mask-image: url(../scene/ripples-a.svg); }
.ripples--b { background: var(--paper); opacity: .2; mask-image: url(../scene/ripples-b.svg); }
.algae { background: var(--plaster); opacity: .3; mask-image: url(../scene/algae.svg); mask-size: 25% 62%; mask-position: 0 40%; }
@media (prefers-reduced-motion: no-preference) {
  .ripples--a { animation: drift 220s linear infinite; }
  .ripples--b { animation: drift 150s linear infinite reverse; }
}

/* silhouettes standing in the shallows */
.prop {
  bottom: calc(var(--wh) * .74);
  -webkit-box-reflect: below 0 linear-gradient(transparent 62%, rgb(0 0 0 / .26));
}
.prop > i { position: absolute; inset: 0; mask-repeat: no-repeat; mask-position: 50% 100%; mask-size: contain; background: var(--mold); }
.prop > i + i { background: color-mix(in srgb, var(--plaster) 55%, var(--hill)); opacity: .75; }
.dead-a { left: 74%; height: 62%; aspect-ratio: 640 / 960; }
.dead-a > i { mask-image: url(../scene/dead-a.svg); }
.dead-a > i + i { mask-image: url(../scene/dead-a-lichen.svg); }
.dead-b { left: 47%; height: 34%; aspect-ratio: 420 / 720; bottom: calc(var(--wh) * .62); }
.dead-b > i { mask-image: url(../scene/dead-b.svg); }
.dead-b > i + i { mask-image: url(../scene/dead-b-lichen.svg); }
.reed > i { mask-image: url(../scene/reeds-a.svg); }
.reed--a { left: 1%; height: clamp(110px, 20svh, 260px); aspect-ratio: 760 / 480; bottom: calc(var(--wh) * .56); }
.reed--b { left: 41%; height: clamp(70px, 13svh, 170px); aspect-ratio: 520 / 340; bottom: calc(var(--wh) * .86); }
.reed--b > i { mask-image: url(../scene/reeds-b.svg); }
.reed--c { right: 30%; height: clamp(60px, 10svh, 130px); aspect-ratio: 360 / 240; bottom: calc(var(--wh) * .8); }
.reed--c > i { mask-image: url(../scene/reeds-c.svg); }

/* foreground reeds, in front of the figure */
.fg { z-index: 3; position: absolute; bottom: calc(var(--wh) * .12); pointer-events: none; -webkit-box-reflect: below 0 linear-gradient(transparent 70%, rgb(0 0 0 / .22)); }
.fg > i { position: absolute; inset: 0; background: var(--mold); mask: url(../scene/reeds-b.svg) 50% 100% / contain no-repeat; }
.fg--l { left: -3%; height: clamp(120px, 24svh, 300px); aspect-ratio: 520 / 340; }
.fg--r { right: -4%; height: clamp(90px, 18svh, 230px); aspect-ratio: 520 / 340; }
.fg--r > i { transform: scaleX(-1); }

/* figure: the mascot on a mossy hummock, with its reflection */
.figure {
  position: absolute;
  z-index: 2;
  width: var(--fig);
  aspect-ratio: var(--far);
  right: clamp(0px, 2vw, 40px);
  bottom: calc(var(--wh) * .62 + 6px);
  translate: calc(var(--dx, 0px) * -1) calc(var(--dy, 0px) * -1);
  pointer-events: none;
}
.figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.figure .hum, .figure .hum-m, .figure .hum-r {
  position: absolute;
  left: -8%;
  width: 116%;
  aspect-ratio: 1000 / 260;
  top: calc(var(--feet) * 100% - .088 * var(--fig) * 1.16);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.figure .hum { z-index: -2; background: linear-gradient(to bottom, color-mix(in srgb, var(--mold) 85%, var(--plaster)), var(--mold) 60%); mask-image: url(../scene/hummock.svg); }
.figure .hum-m { z-index: -1; background: linear-gradient(to bottom, color-mix(in srgb, var(--plaster) 60%, var(--hill)), color-mix(in srgb, var(--plaster) 40%, var(--mold))); mask-image: url(../scene/hummock-moss.svg); }
.figure .hum-r { z-index: -3; top: calc(var(--feet) * 100% - .088 * var(--fig) * 1.16 + 100% * .72); background: var(--mold); mask-image: url(../scene/hummock.svg); transform: scaleY(-1); opacity: .22; }
.figure .refl {
  top: 100%; z-index: -3;
  transform: scaleY(-1);
  opacity: .22;
  mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
}
.figure--sm { --fig: min(46vw, 26svh); --feet: .93; --far: 1; }
.figure--sm img { filter: none; }

.spores { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .6 .6 .6 0 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain { mix-blend-mode: soft-light; opacity: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: soft-light; opacity: .12; } }

/* ================= stage content ================= */
.stage__inner {
  position: relative;
  z-index: 4;
  flex: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(96px, 15svh, 168px) var(--gutter) calc(var(--fig) * 1.04 + var(--wh) * .5 + 8px);
}
.stage__inner > .figure { right: var(--gutter); }
.hero { display: grid; gap: var(--s-5); justify-items: start; }

.duet {
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: var(--tracking);
  text-wrap: balance;
}
.duet > span { display: block; }
.duet__a { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.duet__b { font-family: var(--font-sans); font-weight: 400; margin-top: .04em; }
.lead-line { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.4; color: var(--ink); max-width: min(36ch, 44vw); }
@media (max-width: 600px) { .lead-line { max-width: 36ch; } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.noscript-note { font-size: var(--fs-small); }

@media (min-width: 900px) {
  .stage { --fig: min(40vw, 62svh, 680px); }
  .stage--short { --fig: min(34vw, 50svh, 520px); }
  .stage .figure--sm { --fig: min(26vw, 40svh, 400px); }
  .stage__inner { padding-bottom: clamp(48px, 8svh, 96px); }
  .hero { max-width: 56%; }
  .stage--short .hero { max-width: 58%; }
  .duet { font-size: clamp(3.5rem, 0.9rem + 4.4vw, 7rem); }
}

/* mist band behind small text over busy parts of the scene */
.hero .lead-line, .hero .actions { position: relative; }

/* ================= chrome ================= */
.top {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 6px clamp(8px, 2vw, 24px) 6px clamp(20px, 3vw, 40px);
  pointer-events: none;
}
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sheet); opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
html.past .top::before { opacity: 1; }
html.menu-open .top::before { opacity: 0; }
.top > *, .top a, .top button { pointer-events: auto; }
.top__r { display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); }

.brand {
  display: block;
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 1.875rem; line-height: var(--disc-zone);
  letter-spacing: var(--tracking);
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); height: var(--disc-zone); font-size: var(--fs-nav); transition: opacity var(--t-fast) var(--ease); }
html.menu-open .nav { opacity: 0; visibility: hidden; }
.nav a { color: var(--ink); line-height: 1.1; white-space: nowrap; }
.ch { display: inline-grid; }
.ch > i { grid-area: 1 / 1; font-style: normal; text-align: center; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); transition-delay: calc(var(--i) * 26ms); }
.ch > i + i { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 1.22em; line-height: .9; opacity: 0; translate: 0 .15em; }
.nav a:hover .ch > i:first-child, .nav a:focus-visible .ch > i:first-child, .nav a[aria-current] .ch > i:first-child { opacity: 0; }
.nav a:hover .ch > i + i, .nav a:focus-visible .ch > i + i, .nav a[aria-current] .ch > i + i { opacity: 1; translate: 0; }
@media (max-width: 600px) { html.js .nav { display: none; } }
html:not(.js) .nav { height: auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; padding-top: 16px; }

/* corner disc: 43px circle in a 59px hit zone */
.disc {
  display: grid; place-items: center; flex: none;
  width: var(--disc-zone); height: var(--disc-zone);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.disc__c {
  position: relative; display: grid; place-items: center;
  width: var(--disc); height: var(--disc);
  border-radius: 50%;
  background: var(--paper); color: var(--on-paper);
  transition: background-color var(--t-mid) var(--ease), scale var(--t-fast) var(--ease);
}
.disc:hover .disc__c { scale: 1.08; }
.disc:active .disc__c { scale: .94; }
.menu-btn .disc__c i {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  translate: calc(-50% + var(--ox, 0px)) -50%;
  transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease), rotate var(--t-mid) var(--ease), translate var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.menu-btn .disc__c i:first-child { --ox: -5px; }
.menu-btn .disc__c i:last-child { --ox: 5px; }
html.menu-open .menu-btn .disc__c { background: var(--ink); color: var(--panel); }
html.menu-open .menu-btn .disc__c i { --ox: 0px; width: 16px; height: 1.5px; border-radius: 2px; }
html.menu-open .menu-btn .disc__c i:first-child { rotate: 45deg; }
html.menu-open .menu-btn .disc__c i:last-child { rotate: -45deg; }
.half { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.chrome-bot {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--fr, 6px);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: 0 clamp(8px, 2vw, 24px) 0 clamp(20px, 3vw, 40px);
  --pc: var(--paper); --pt: var(--on-paper);
}
.chrome-bot__l { display: flex; align-items: center; gap: var(--s-2); }
.copy { color: var(--paper); font-size: var(--fs-small); margin-right: var(--s-3); }

.langs { display: flex; gap: var(--s-1); }
.lp {
  height: 25px; padding: 0 11px;
  border: 1px solid var(--pc); border-radius: 200px;
  background: transparent; color: var(--pc);
  font-size: var(--fs-small); line-height: 1; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
html[data-lang="ru"] .lp[data-lang-set="ru"], html[data-lang="en"] .lp[data-lang-set="en"] { background: var(--pc); color: var(--pt); }
html:not(.js) .langs, html:not(.js) .disc--theme { display: none; }


/* ================= menu panel ================= */
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease); }
html.menu-open .scrim { opacity: .16; pointer-events: auto; }
.panel {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0;
  width: min(656px, 100vw);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
  padding: clamp(96px, 16svh, 140px) clamp(24px, 4vw, 56px) var(--s-6);
  background: var(--panel);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
  --pc: var(--ink); --pt: var(--panel);
}
html.menu-open .panel { visibility: visible; transform: none; transition-delay: 0s; }
html:not(.js) .panel, html:not(.js) .scrim { display: none; }
.mi {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-menu); line-height: 1.02; letter-spacing: var(--tracking);
  padding-block: var(--s-1);
  color: var(--ink);
  transition: translate var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.mi sup { font: 400 20px/1 var(--font-sans); font-style: normal; letter-spacing: 0; margin-top: .9em; color: var(--ink-soft); }
.mi span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.mi:hover { translate: 10px 0; }
.mi[aria-current] { color: var(--ink-soft); }
.mi[aria-current] span { text-decoration-color: var(--dim); }
.panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.panel__foot .langs { gap: var(--s-1); }
.panel__foot .disc__c { background: var(--ink); color: var(--panel); }

/* ================= pills ================= */
.pill {
  --bg: var(--paper); --fg: var(--on-paper); --hv: var(--on-paper); --hf: var(--paper);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 41px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-pill); line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer;
  transition: color var(--t-mid) var(--ease);
}
.pill::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--hv);
  translate: -50% -50%; scale: 0;
  transition: scale var(--t-mid) var(--ease);
}
.pill:hover, .pill:focus-visible { color: var(--hf); }
.pill:hover::before, .pill:focus-visible::before { scale: 1; }
.pill--line { --bg: transparent; --fg: var(--ink); --hv: var(--ink); --hf: var(--sheet); border: 1px solid var(--ink); }
.pill--go::after {
  content: ""; flex: none; width: 9px; height: 9px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M3 1h6v6' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--t-mid) var(--ease);
}
.pill--go:hover::after { translate: 2px -2px; }
.pill--sm { height: 25px; padding: 0 12px; font-size: var(--fs-small); border-radius: 200px; }
.pill .lbl-done { display: none; }
.pill.is-done .lbl { display: none; }
.pill.is-done .lbl-done { display: inline; }
.pill--addr code { font-family: var(--font-mono); font-size: 1.02rem; letter-spacing: 0; }
.pill--addr .lbl, .pill--addr .lbl-done { font-size: var(--fs-small); opacity: .7; }
.status { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 25px; padding-block: 5px; cursor: default; }
.status p { max-width: none; }
.status:hover { color: var(--fg); }
.status::before { display: none; }

/* ================= sheet ================= */
.sheet { position: relative; z-index: 1; background: var(--sheet); }
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; margin-bottom: -1px;
  background: var(--sheet);
  mask: url(../scene/edge.svg) 0 100% / 800px 100% repeat-x;
}
.stage--sheet + .sheet::before { height: 40px; }
.block { padding-block: var(--section) 0; }
.block:last-child { padding-bottom: var(--section); }
.block + .block { padding-top: calc(var(--section) * .8); }
.block--tight { padding-top: calc(var(--section) * .5) !important; }
.lead {
  font-size: var(--fs-lead); font-weight: 300; line-height: 1.22; letter-spacing: -0.014em;
  max-width: 30ch; color: var(--ink);
}
.quiet { color: var(--ink-soft); max-width: 52ch; }
.quiet + .quiet { margin-top: var(--s-3); }
.title { font-size: var(--fs-title); font-weight: 400; line-height: 1; letter-spacing: var(--tracking); }
.title--serif { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: clamp(32px, 4vw, 56px); }
.small { font-size: var(--fs-small); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 25px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 200px;
  background: transparent; color: var(--ink);
  font-size: var(--fs-small); line-height: 1; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.chip sup { font-size: .72em; line-height: 1; opacity: .75; }
html:not(.js) .chips { display: none; }

/* project rows */
.rows { border-bottom: 1px solid var(--line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name go" "desc go" "meta go" "aside go";
  column-gap: var(--s-5); row-gap: var(--s-1);
  padding-block: clamp(20px, 2.6vw, 36px);
  border-top: 1px solid var(--line);
}
.row[hidden] { display: none; }
.row__name { grid-area: name; font-size: var(--fs-row); font-weight: 400; line-height: 1.05; letter-spacing: var(--tracking); transition: translate var(--t-mid) var(--ease); }
.row__name a::after { content: ""; position: absolute; inset: 0; }
.row__name a:focus-visible { outline-offset: -2px; border-radius: 0; }
.row__desc { grid-area: desc; font-size: var(--fs-small); color: var(--ink-soft); max-width: 58ch; margin-top: var(--s-2); }
.row__meta { grid-area: meta; font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.row__meta span + span::before { content: ", "; }
.row__aside { grid-area: aside; font-size: var(--fs-small); position: relative; z-index: 1; margin-top: var(--s-1); }
.row__go {
  grid-area: go; align-self: center; width: clamp(20px, 2.4vw, 32px); aspect-ratio: 1; background: var(--ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M3 1h6v6' fill='none' stroke='%23000' stroke-width='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--t-mid) var(--ease);
}
.row:hover .row__name { translate: 10px 0; }
.row:hover .row__go { translate: 4px -4px; }
/* grouped row: a <details> that expands into a sub-list (e.g. Minecraft plugins) */
.row--group { display: block; padding-block: 0; }
.row--group .group__sum {
  position: relative; list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name go" "desc go" "meta go";
  column-gap: var(--s-5); row-gap: var(--s-1);
  padding-block: clamp(20px, 2.6vw, 36px);
}
.row--group .group__sum::-webkit-details-marker { display: none; }
.row--group .group__sum:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.row--group .row__go { rotate: 135deg; transition: rotate var(--t-mid) var(--ease), translate var(--t-mid) var(--ease); }
.row--group:hover .row__go { translate: 0 3px; }
.row--group details[open] .row__go { rotate: -45deg; }
.sub { padding: 0 0 clamp(20px, 2.6vw, 36px) clamp(12px, 4vw, 64px); }
.sub__item { position: relative; display: grid; gap: var(--s-1); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.sub__name { font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); line-height: 1.1; letter-spacing: var(--tracking); text-decoration: none; transition: translate var(--t-mid) var(--ease); justify-self: start; }
.sub__name::after { content: ""; position: absolute; inset: 0; }
.sub__item:hover .sub__name { translate: 8px 0; }
.sub__desc { font-size: var(--fs-small); color: var(--ink-soft); max-width: 58ch; }
@media (prefers-reduced-motion: reduce) { .row--group .row__go, .sub__name { transition: none; } }
@media (min-width: 768px) {
  .row { grid-template-columns: minmax(0, 1fr) 12rem auto; grid-template-areas: "name meta go" "desc meta go" "aside meta go"; }
  .row__meta { align-self: start; padding-top: .9em; }
  .row--group .group__sum { grid-template-columns: minmax(0, 1fr) 12rem auto; grid-template-areas: "name meta go" "desc meta go"; }
}

.say { display: grid; gap: var(--s-6); justify-items: start; }
.say__h { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.say__h h2 { font-size: var(--fs-say); line-height: .95; }
.say__h img { width: clamp(72px, 9vw, 120px); height: auto; }

.steps { counter-reset: step; border-bottom: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: clamp(48px, 7vw, 96px) minmax(0, 1fr); align-items: baseline; padding-block: var(--s-5); border-top: 1px solid var(--line); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.steps li::before { counter-increment: step; content: counter(step); font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 2.2em; line-height: 1; letter-spacing: var(--tracking); }
.steps code { font-size: .86em; }
.sheet--rest { min-height: 28svh; }