/* Ruhiu Studio — placeholder site.
   Palette from DESIGN/RUHIU STUDIO/LOGOS (abstract mark + gradient). Fonts: OFL only (see /assets/fonts/LICENSES).
   EB Garamond is subset by source/subset-fonts.sh with true small caps kept: labels are Garamond small caps
   (Kevin, 2026-10-01: the mono labels read too clinical). */

@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-sc.woff") format("woff"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-Italic-sc.woff") format("woff"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("/assets/fonts/GrenzeGotisch-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0a0908;
  --ink-2: #14120f;
  --line: rgba(253, 240, 213, .16);
  --cream: #fdf0d5;
  --cream-2: rgba(253, 240, 213, .7);
  --cream-3: rgba(253, 240, 213, .46);
  --red: #c1121f;
  --rose: #d04a4d;
  --blue: #669bbc;
  --spectrum: linear-gradient(180deg, #fdf0d5 10%, #d04a4d 47%, #669bbc 79%);
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --black: "Grenze Gotisch", "EB Garamond", serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 44rem;
  --gold: #d6b062;
  --gold-2: rgba(214, 176, 98, .72);
  --gold-wash: rgba(214, 176, 98, .13);
  --paper: #f4f1ea;
  --wide: min(1240px, calc(100vw - 2 * var(--gutter) - 12px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 400 1.1875rem/1.5 var(--serif); font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--cream-3); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--cream); text-decoration-color: var(--rose); }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--red); color: var(--cream); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type roles: small caps for every label, caption and control ── */
.sc, .label, .bar-nav, .hero-status, .flip-ctrl, .plate figcaption, .index .k, .index .s,
.practice span, .pill, .lightbox figcaption, .lb-btn, .morph-cap, .about-cv span {
  font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .07em; font-variant-numeric: lining-nums;
}
.label { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; color: var(--cream-2); margin: 0 0 1.25rem; }
.blackletter { font: 600 clamp(2.75rem, 7vw, 5rem)/.95 var(--black); letter-spacing: -.005em; margin: 0; text-transform: lowercase; }
.caption { font-size: 1.1875rem; line-height: 1.45; color: var(--cream-2); max-width: 34rem; margin: 1.1rem auto 0; } /* long captions read better in plain Garamond; small caps stay for short labels */

/* the gradient rail at the right edge was removed (Kevin, 2026-10-01) */

/* ── spinning dots (the abstract mark, set in motion) ── */
.dots { position: relative; display: inline-block; width: 44px; height: 40px; animation: turn 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
.dots i { position: absolute; width: 18px; height: 18px; border-radius: 50%; }
.dots i:nth-child(1) { left: 13px; top: 0; background: #fdf0d5; } /* brand cream in both themes (var(--cream) is the text color) */
.dots i:nth-child(2) { left: 0; top: 21px; background: var(--red); }
.dots i:nth-child(3) { left: 26px; top: 21px; background: var(--blue); }
@keyframes turn { to { transform: rotate(360deg); } }
.dots-inline { width: 15px; height: 14px; vertical-align: -1px; margin-right: .7em; animation-duration: 3.2s; }
.dots-inline i { width: 6px; height: 6px; }
.dots-inline i:nth-child(1) { left: 4.5px; top: 0; }
.dots-inline i:nth-child(2) { left: 0; top: 7.5px; }
.dots-inline i:nth-child(3) { left: 9px; top: 7.5px; }

.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--ink); transition: opacity .6s ease, visibility 0s linear .6s; }
.is-ready .loader { opacity: 0; visibility: hidden; }

/* ── top bar (after teenage engineering's index row) ── */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 12px calc(var(--gutter) + 6px) 12px var(--gutter); background: rgba(10, 9, 8, .82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--line); }
.bar-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bar-mark img { width: 62px; height: auto; }
.bar-mark .bar-dots { width: auto; height: 36px; margin: -.5px 0; } /* dots.svg is trimmed to its ink, like the wordmark; +1px overshoot so the circles read as tall as the letters */
.bar-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1.5rem; font-size: 1.0625rem; line-height: 1; }
.bar-nav a { text-decoration: none; color: var(--cream-2); padding: 6px 0; }
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--cream); }
.bar-nav b { font-weight: 500; color: var(--rose); margin-right: .45em; }
.label .num, .foot-label .num { font-weight: 500; color: var(--rose); } /* section numerals in the nav's red */

/* ── pills (buttons and download links) ── */
.pill { display: inline-flex; align-items: center; gap: .4em; font-size: 1.0625rem; line-height: 1; color: var(--cream); text-decoration: none;
  background: none; border: 1px solid var(--cream-3); border-radius: 999px; padding: .62em 1.15em .72em; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pill:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ── hero: under construction ── */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 62px); display: grid; place-content: center; justify-items: center; text-align: center; padding: 8vh var(--gutter) 12vh; }
.hero > :not(canvas):not(.scroll-cue) { position: relative; z-index: 2; transition: color .6s ease; }
.portal-gl, .portal-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.portal-lines { z-index: 1; }
.temple-btn { appearance: none; background: none; border: 0; padding: 14px; margin: 0 0 1.6rem; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.hero-temple { width: clamp(84px, 9vw, 112px); opacity: .95; transition: filter .7s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.temple-btn:hover .hero-temple, .temple-btn:focus-visible .hero-temple { animation: templeThrob 2.8s ease-in-out infinite; }
@keyframes templeThrob {   /* the original odd pulse, turned down (Kevin, 2026-10-01) */
  0% { transform: scale(1) skewX(0); filter: drop-shadow(0 0 0 rgba(193, 18, 31, 0)); }
  18% { transform: scale(1.05) skewX(-1.4deg); filter: drop-shadow(0 0 10px rgba(193, 18, 31, .75)) drop-shadow(0 0 22px rgba(102, 155, 188, .4)); }
  31% { transform: scale(.98) skewX(1deg); filter: drop-shadow(0 0 5px rgba(253, 240, 213, .7)); }
  47% { transform: scale(1.07) rotate(-.7deg); filter: drop-shadow(0 0 16px rgba(253, 240, 213, .8)) drop-shadow(0 0 30px rgba(193, 18, 31, .35)); }
  63% { transform: scale(1.01) rotate(.4deg); filter: drop-shadow(0 0 6px rgba(102, 155, 188, .6)); }
  80% { transform: scale(1.05) skewX(1.6deg); filter: drop-shadow(0 0 13px rgba(193, 18, 31, .7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(193, 18, 31, 0)); }
}
.temple-btn.is-bursting .hero-temple { transform: scale(1.12); }
/* cream → white through a gold glow. Same filter list in both states so it interpolates; brightness(0) used to flash black */
.hero-temple { filter: saturate(1) brightness(1) drop-shadow(0 0 0 rgba(214, 176, 98, 0)); }
.hero.is-open .hero-temple { filter: saturate(0) brightness(1.12) drop-shadow(0 0 12px rgba(214, 176, 98, .85)); animation: none; }
.hero.is-open .hero-title, .hero.is-open .hero-sub, .hero.is-open .hero-status { color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.hero.is-open .scroll-cue { color: #fff; }
.scroll-cue { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); z-index: 2; translate: -50% 0; color: var(--cream-2); display: block; width: 24px; height: 40px; }
.scroll-cue svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: cue 2.4s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-4px); opacity: .45; } 50% { transform: translateY(8px); opacity: 1; } }
.scroll-cue:hover { color: var(--cream); }
.hero-title { font: 600 clamp(2.2rem, 5.6vw, 4.4rem)/.95 var(--black); margin: 0; letter-spacing: -.01em; }
.hero-sub { font: italic 400 clamp(1.25rem, 2.4vw, 1.6rem)/1.35 var(--serif); color: var(--cream-2); margin: 1.1rem 0 0; }
.hero-status { font-size: 1.0625rem; margin: 1.6rem 0 0; color: var(--cream-3); }

/* ── section rule: a plain hairline ── */
.rule { height: 0; margin: 0 auto; border: 0; border-top: 1px solid var(--line); width: var(--wide); }

/* ── about (after lauriparonen.com: one justified column, an illuminated initial) ── */
.about { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(4.5rem, 12vw, 9rem) var(--gutter); }
.lede { margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; letter-spacing: 0; word-spacing: -.01em; font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.45; }
.lede + .lede { margin-top: .85em; }
.initial { float: left; width: 6.4em; height: 6.4em; margin: .32em .8em .2em 0; shape-outside: margin-box; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.motto { margin: 2.5rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid; border-image: var(--spectrum) 1;
  font: italic 400 1.1875rem/1.45 var(--serif); color: var(--cream-2); }
.practice { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.practice li { display: grid; grid-template-columns: 13.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; color: var(--cream-2); align-items: baseline; }
.practice span { font-size: 1.0625rem; font-weight: 500; color: var(--cream); }
.label-sub { margin-top: 4rem; }
.cases { padding-top: clamp(3.5rem, 9vw, 6rem); padding-bottom: clamp(3.5rem, 9vw, 6rem); }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index li { display: grid; grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "n t s" "n k s"; column-gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.index b { grid-area: n; font: 500 1.25rem/1 var(--black); color: var(--rose); }
.index .t { grid-area: t; font-size: 1.1875rem; line-height: 1.3; }
.index .t a { text-decoration-color: var(--rose); }
.index .k { grid-area: k; font-size: .9375rem; line-height: 1.6; color: var(--cream-3); }
.index .s { grid-area: s; font-size: .9375rem; line-height: 1; color: var(--blue); white-space: nowrap; }
.index .s a { color: var(--cream); }
.about-cv { margin: 2.25rem 0 0; font-size: 1.125rem; }
.about-cv span { color: var(--cream-3); margin-left: .5em; font-size: .9375rem; }

/* ── section heads ── */
.sec-head { text-align: center; padding: 0 var(--gutter); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.quad, .gallery, .lab-link { padding: clamp(4.5rem, 11vw, 8rem) 0; }

/* ── the flip book ── */
.flip { --w: min(780px, calc(100vw - 2 * var(--gutter) - 12px), max(320px, calc((100svh - 300px) * 1.56))); width: var(--w); margin: 0 auto; }
.flip-stage { position: relative; width: 100%; aspect-ratio: 1.56; perspective: 2200px; outline: none; touch-action: pan-y; cursor: pointer; }
.flip-stage:focus-visible { outline: 1px solid var(--blue); outline-offset: 10px; }
.flip-cards, .flip-stack { position: absolute; inset: 0; }
.flip-stack::before, .flip-stack::after { content: ""; position: absolute; inset: 0; background: #e9e3d6; border-radius: 2px; transition: transform .5s ease; }
.flip-stack::before { transform: translate(5px, 5px); opacity: .22; }
.flip-stack::after { transform: translate(10px, 10px); opacity: .1; }
.card { position: absolute; inset: 0; margin: 0; background: #f4f1ea center / cover no-repeat; border-radius: 2px; transform-origin: 0 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 18px 40px -18px rgba(0,0,0,.9); will-change: transform; }
.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.turning { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .35)); }
.turning .card { z-index: 1; }
.crease { position: absolute; inset: 0; pointer-events: none; }
.flap-wrap { position: absolute; inset: 0; z-index: 2; filter: drop-shadow(-3px -4px 5px rgba(0, 0, 0, .38)); }
.flap { position: absolute; }
.flip-hit { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 5; }
.flip-hit-prev { left: 0; cursor: w-resize; }
.flip-hit-next { right: 0; cursor: e-resize; }
.flip-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.1rem; margin-top: 2.1rem; font-size: 1.0625rem; }
.flip-count { margin: 0; min-width: 5.5em; text-align: center; color: var(--cream-2); font-variant-numeric: lining-nums tabular-nums; }
.flip-count .n { color: var(--cream); }
.flip-btn { appearance: none; background: none; color: var(--cream); border: 1px solid var(--line); border-radius: 999px; font: inherit; letter-spacing: inherit; font-variant-caps: inherit; padding: .5em 1em .58em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.flip-btn:hover { border-color: var(--cream-2); }
.flip-lucky { border-color: var(--cream-3); }
.flip-scrub { display: block; width: 100%; margin: 1.6rem 0 0; appearance: none; -webkit-appearance: none; height: 18px; background: transparent; cursor: pointer; }
.flip-scrub::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.flip-scrub::-moz-range-track { height: 1px; background: var(--line); }
.flip-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%; background: var(--cream); border: 0; }
.flip-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 0; }

/* ── plates (catalog) ── */
.plates { width: var(--wide); margin: 0 auto; columns: 3 300px; column-gap: clamp(16px, 2.4vw, 32px); }
.plate { break-inside: avoid; margin: 0 0 clamp(28px, 4vw, 44px); }
.plate[hidden] { display: none; }
.plate button { display: block; width: 100%; padding: 0; border: 0; background: var(--ink-2); cursor: zoom-in; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.plate.tilting button { transition: transform .12s linear; }
.plate img { width: 100%; transition: filter .6s; filter: saturate(.92); }
.plate:hover img { filter: saturate(1.04); }
.plate.is-lifting button { visibility: hidden; }
.plate figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; font-size: .9375rem; line-height: 1.3; color: var(--cream-2); }
.plate figcaption b { font-weight: 500; color: var(--rose); }
.plate.arrive { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(22px); } }
.more-wrap { text-align: center; margin: 1rem 0 0; }

/* ── lightbox, and the shards that assemble into it ── */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 9, 8, .99); color: var(--cream); overflow: hidden; }
.lightbox::backdrop { background: rgba(10, 9, 8, .7); }
.lightbox[open] { display: grid; place-items: center; animation: fade .16s ease; }
.lightbox { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lightbox img { -webkit-user-drag: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.lightbox img { max-width: calc(100vw - 2 * var(--gutter) - 96px); max-height: calc(100dvh - 140px); width: auto; object-fit: contain; transition: opacity .25s; }
.lightbox img.is-hidden { opacity: 0; transition: none; }
.lightbox figcaption { font-size: 1rem; color: var(--cream-2); }
.lb-btn { position: absolute; z-index: 3; appearance: none; background: none; border: 1px solid var(--line); color: var(--cream); border-radius: 999px; font-size: 1.0625rem; padding: .5em 1em .58em; cursor: pointer; }
.lb-btn:hover { border-color: var(--cream-2); }
.lb-prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(var(--gutter) + 6px); top: 50%; transform: translateY(-50%); }
.lb-close { top: var(--gutter); right: calc(var(--gutter) + 6px); }
.shards { position: fixed; z-index: 2; pointer-events: none; perspective: 1400px; }
.shard { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; backface-visibility: hidden; }
@keyframes fade { from { opacity: 0; } }

/* ── form studies: trace and morph ── */
.morph { width: min(980px, calc(100vw - 2 * var(--gutter) - 12px)); margin: 0 auto; }
.morph-stage { position: relative; aspect-ratio: 1.52; background: #f5f2ea; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.morph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; }
.morph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trace { fill: none; stroke: url(#gold); stroke-width: .55; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the SVG is drawn at the stage's own 1.52 proportion (viewBox 152×100): a non-scaling stroke would break pathLength into dashes */
.morph-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.morph-thumbs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 8px; margin: -8px 0 -8px -3px; } /* room for the gold outline + wash inside the scroll box */
.morph-thumbs::-webkit-scrollbar { display: none; }
.morph-thumbs button { flex: 0 0 auto; width: 84px; aspect-ratio: 1.52; padding: 0; border: 0; background: #f5f2ea center / cover; cursor: pointer; opacity: .5; outline: 1px solid transparent; outline-offset: 3px; transition: opacity .3s, outline-color .3s; }
.morph-thumbs button:hover { opacity: .85; }
.morph-thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-wash); }
.morph-play { flex: 0 0 auto; font-size: 1.0625rem; font-variant-caps: all-small-caps; letter-spacing: .07em; }
.morph-cap { margin: 1rem 0 0; font-size: 1rem; color: var(--cream-2); min-height: 1.5em; }

/* ── learning lab teaser ── */
.lab-link { text-align: center; padding-left: var(--gutter); padding-right: var(--gutter); }
.lab-link h2 a { text-decoration: none; }
.lab-link h2 a:hover { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-link .pill { margin-top: 2rem; }

/* ── footer: correspondence, all lowercase, brand marks in white on outlined pills ── */
.foot { border-top: 1px solid var(--line); padding: clamp(4rem, 10vw, 7rem) var(--gutter) 3rem; text-align: center; font-variant-caps: normal; }
.foot-dots { margin: 0 auto 2rem; width: 46px; }
.foot-label { font-size: 1.125rem; color: var(--gold); margin: 0 0 1.4rem; }
.foot-label .num { color: var(--gold); }
.links { list-style: none; margin: 0 auto 3rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; max-width: 42rem; }
.links a { display: inline-flex; align-items: center; gap: .5em; color: var(--gold); text-decoration: none; font-size: 1.125rem; line-height: 1; height: 2.6em;
  border: 1px solid var(--gold-2); border-radius: 999px; padding: 0 1.05em 0 .9em; transition: background .3s, color .3s, border-color .3s; }
.links svg { width: 1.1em; height: 1.1em; flex: none; display: block; }
/* lowercase labels: trim the text box to the x-height so the word sits on the icon's center line */
.links a span { display: block; text-box: trim-both ex alphabetic; }
@supports not (text-box: trim-both ex alphabetic) { .links a span { transform: translateY(-.06em); } }
.links li:nth-child(odd) a:is(:hover, :focus-visible, :active) { color: #f0b0a8; border-color: rgba(208, 74, 77, .85); background: rgba(208, 74, 77, .14); }
.links li:nth-child(even) a:is(:hover, :focus-visible, :active) { color: #b6d3e6; border-color: rgba(102, 155, 188, .85); background: rgba(102, 155, 188, .15); }
.love { font-size: 1.1875rem; color: var(--gold); margin: 0 0 .8rem; }
.heart { display: inline-block; color: var(--red); margin: 0 .12em; animation: beat 4.5s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes beat { 0%, 76%, 100% { transform: scale(1); } 80% { transform: scale(1.24); } 84% { transform: scale(1); } 88% { transform: scale(1.16); } 92% { transform: scale(1); } }
.colophon { font-size: .9375rem; color: rgba(214, 176, 98, .55); margin: 0; }
.colophon a { color: inherit; }
.echo .trace { stroke-width: .22; opacity: .6; }

/* ── learning lab page ── */
.lab-hero { padding: clamp(5rem, 14vw, 10rem) var(--gutter) clamp(3rem, 8vw, 5rem); text-align: center; }
.lab-hero .blackletter { font-size: clamp(3.25rem, 10vw, 7rem); }
.lab-list { max-width: calc(46rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(3.5rem, 9vw, 6rem) var(--gutter) clamp(5rem, 12vw, 8rem); }
.lab-list .index .t i { color: var(--cream-2); }
.lab-note { font-size: 1.0625rem; color: var(--cream-2); margin: 2.5rem 0 0; text-align: center; }
.lab-feature { display: block; margin: 0 0 2.5rem; text-decoration: none; border: 1px solid var(--line); }
.lab-feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lab-feature span { display: flex; justify-content: space-between; padding: .7rem 1rem .8rem; font-variant-caps: all-small-caps; letter-spacing: .07em; font-size: 1.0625rem; }

/* ── reveals ── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── small screens ── */
@media (max-width: 760px) {
  .bar { flex-direction: column; align-items: stretch; gap: .3rem; padding-top: 10px; padding-bottom: 4px; }
  .bar-mark img { width: 52px; }
  .bar-mark .bar-dots { width: auto; height: 30px; margin: -.5px 0; }
  .bar-nav { flex-wrap: nowrap; justify-content: flex-start; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; margin-right: -6px; padding-right: 12px; }
  .bar-nav::-webkit-scrollbar { display: none; }
  .bar-nav a { white-space: nowrap; }
  .hero { min-height: calc(100svh - 86px); }
  /* the about copy stays justified on phones too (Kevin, 2026-10-01); auto hyphens keep the rivers small */
  .initial { width: 5em; height: 5em; margin-right: .6em; }
  .practice li { grid-template-columns: 1fr; gap: .1rem; }
  .index li { grid-template-columns: 2.25rem 1fr; grid-template-areas: "n t" "n k" "n s"; }
  .index .s { margin-top: .35rem; }
  .flip-ctrl { gap: .55rem; }
  .lb-prev, .lb-next { top: auto; bottom: var(--gutter); transform: none; }
  .lightbox img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100dvh - 180px); }
  .morph-ctrl { flex-direction: column; align-items: stretch; }
  .morph-thumbs button { width: 64px; }
  .morph-play { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dots, .heart, .scroll-cue svg, .temple-btn:hover .hero-temple { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .plate button { transition: none; }
}
.lab-feature em { font-style: normal; color: var(--cream-2); }
.lab-feature:hover em { color: var(--cream); }

/* ── the trainer window (learning-lab/prototrak): near full screen, the site's bar above it ── */
.sim-page { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); } /* minmax: the one-line nav would otherwise widen the grid past the phone */
.sim-bar { position: relative; }
.sim-left { display: flex; align-items: center; gap: 1rem; }
.sim-back { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cream-3); border-radius: 50%; color: var(--cream); transition: background .25s, color .25s; }
.sim-back:hover { background: var(--cream); color: var(--ink); }
.sim-back svg { width: 18px; height: 18px; }
.sim-frame { position: relative; margin: 10px calc(10px + 6px) 10px 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #e8ecef; min-height: 0; }
.sim-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.sim-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: var(--ink); transition: opacity .7s ease, visibility 0s linear .7s; }
.sim-loading p { margin: 0; font-size: 1.0625rem; color: var(--cream-2); font-variant-caps: all-small-caps; letter-spacing: .07em; }
.sim-frame.is-ready .sim-loading { opacity: 0; visibility: hidden; }
.sim-full { font-size: .9375rem; padding: .4em .9em .48em; } /* in the bar, so it never covers the trainer's own controls */
@media (max-width: 760px) { .sim-full { display: none; } }
.sim-frame:fullscreen { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 760px) { .sim-frame { margin: 6px 10px 6px 6px; border-radius: 10px; } .sim-back { width: 32px; height: 32px; } }

/* ── the theme switch: moon by default, sun in light mode ── */
.theme-row { display: flex; justify-content: center; margin: -1.6rem 0 2.4rem; }   /* in the footer by the contact links (Kevin, 2026-10-01) */
.theme-toggle { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  appearance: none; border: 1px solid var(--line); border-radius: 50%; background: rgba(10, 9, 8, .72); color: var(--cream); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .25s, background .5s, color .5s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.theme-toggle:hover { border-color: var(--cream-2); transform: rotate(-14deg); }
.theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .35s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="light"] .theme-toggle .i-sun { opacity: 1; transform: none; }
.sim-page .theme-toggle { width: 36px; height: 36px; }

/* ── light mode (Kevin, 2026-10-01): white background, ink type; reds and blues darkened to hold 4.5:1 on paper ── */
:root[data-theme="light"] {
  --ink: #ffffff;
  --ink-2: #f2f0ec;
  --line: rgba(22, 20, 18, .16);
  --cream: #161412;
  --cream-2: rgba(22, 20, 18, .74);
  --cream-3: rgba(22, 20, 18, .6);
  --rose: #ad2a31;
  --red: #a8101b;
  --blue: #2f6a90;
  --gold: #87611c;
  --gold-2: rgba(135, 97, 28, .7);
  --gold-wash: rgba(135, 97, 28, .1);
  color-scheme: light;
}
[data-theme="light"] .bar { background: rgba(255, 255, 255, .88); }
[data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, .85); }
[data-theme="light"] .lightbox { background: rgba(255, 255, 255, .98); }
[data-theme="light"] .lightbox::backdrop { background: rgba(255, 255, 255, .7); }
[data-theme="light"] .flip-stack::before, [data-theme="light"] .flip-stack::after { background: #b9ad97; }
[data-theme="light"] .card { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 18px 34px -18px rgba(60, 40, 20, .55); }
[data-theme="light"] .dots i:nth-child(1) { box-shadow: inset 0 0 0 1px rgba(120, 95, 50, .45); }
[data-theme="light"] .links li:nth-child(odd) a:is(:hover, :focus-visible, :active) { color: #8e1d24; background: rgba(193, 18, 31, .08); }
[data-theme="light"] .links li:nth-child(even) a:is(:hover, :focus-visible, :active) { color: #1f557a; background: rgba(102, 155, 188, .14); }
[data-theme="light"] .colophon { color: rgba(135, 97, 28, .75); }
[data-theme="light"] .initial { filter: drop-shadow(0 10px 20px rgba(60, 40, 20, .3)); }
[data-theme="light"] .morph-stage { box-shadow: 0 20px 40px -28px rgba(60, 40, 20, .6); }
[data-theme="light"] .temple-btn:hover .hero-temple { animation-name: templeThrob; }
[data-theme="light"] .hero-temple { filter: invert(0) drop-shadow(0 0 0 rgba(214, 176, 98, 0)); }
[data-theme="light"] .hero.is-open .hero-temple { filter: invert(1) drop-shadow(0 0 12px rgba(214, 176, 98, .85)); }
[data-theme="light"] .sim-loading p { color: var(--cream-2); }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease !important; }
.theme-row .theme-toggle { border-color: var(--gold-2); color: var(--gold); background: transparent; }
.theme-row .theme-toggle:hover { border-color: var(--gold); }

/* ── round 5 (2026-10-04) ── */

/* selected = gold, everywhere (Kevin's "Features" note, 2026-10-02): the gold hairline, gold small caps and a faint gold
   wash of the correspondence pills, for every pressed, current, rolling or held-down control on the site */
:is(.flip-btn, .pill, .lb-btn, .sim-back, .theme-toggle, .fav-star):is([aria-pressed="true"], [aria-expanded="true"], .is-rolling, :active),
.morph-play[aria-pressed="true"] {
  color: var(--gold); border-color: var(--gold); background: var(--gold-wash);
}
.flip-btn, .pill, .lb-btn { -webkit-tap-highlight-color: transparent; }
.pill:active { color: var(--gold); }
.bar-nav a[aria-current] { color: var(--gold); }
.bar-nav a[aria-current] b { color: var(--gold); }
.links a:active { background: var(--gold-wash) !important; color: var(--gold) !important; border-color: var(--gold) !important; }
.flip-btn svg, .tool-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.flip-btn:has(svg) { display: inline-flex; align-items: center; gap: .45em; }

/* ruhiu.photo line: staging only until ruhiu.photo is live (deploy.sh --prod refuses while data-hold is in the page) */
.aside { margin: 2.25rem 0 0; font-style: italic; color: var(--cream-2); font-size: 1.125rem; }
.aside a { text-decoration-color: var(--gold-2); }
.aside a:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ── Quadrangles saved cards ── */
.fav-star { position: absolute; top: 10px; right: 10px; z-index: 6; width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  appearance: none; border: 1px solid rgba(253, 240, 213, .35); border-radius: 50%; background: rgba(10, 9, 8, .62); color: #fdf0d5; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .25s, border-color .25s, background .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.fav-star svg { width: 20px; height: 20px; }
.fav-star:hover { border-color: #d6b062; transform: rotate(-8deg); }
.fav-star[aria-pressed="true"] { --star-fill: currentColor; color: #d6b062; border-color: #d6b062; background: rgba(10, 9, 8, .72); } /* sits on the card's paper, so the dark-mode gold in both themes */
.fav-star[aria-pressed="true"] svg { animation: starSet .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes starSet { 0% { transform: scale(.6) rotate(-30deg); } 100% { transform: none; } }
.fav-folder .fav-n { font-variant-numeric: lining-nums tabular-nums; color: var(--gold); }
.fav-ghost { position: fixed; z-index: 30; pointer-events: none; background: var(--paper) center / cover no-repeat; border-radius: 2px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .6); will-change: transform; }
.fav-tray { margin: 1.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.fav-empty { margin: 0; text-align: center; font-size: 1rem; font-style: italic; color: var(--cream-3); }
.fav-list { list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fav-list:empty { display: none; }
.fav-card { position: relative; width: 92px; aspect-ratio: 1.56; padding: 0; border: 0; border-radius: 2px; background: var(--paper) center / cover no-repeat; cursor: pointer;
  outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .25s, transform .25s; }
.fav-card:hover { transform: translateY(-2px); }
.fav-card[aria-current="true"] { outline-color: var(--gold); }
.fav-card span { position: absolute; left: 4px; bottom: 3px; font-size: .75rem; line-height: 1; padding: 2px 4px 3px; border-radius: 2px; background: rgba(10, 9, 8, .7); color: #fdf0d5;
  font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: .07em; }

/* ── Affordances tools: the dice and the easel ── */
.aff-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; font-size: 1.0625rem;
  font-variant-caps: all-small-caps; letter-spacing: .07em; }
.aff-shuffle.is-rolling svg { animation: roll .9s cubic-bezier(.3, .7, .3, 1) infinite; }
@keyframes roll { 0% { transform: rotate(0); } 50% { transform: rotate(200deg) scale(.85); } 100% { transform: rotate(360deg); } }

/* ── the easel ── */
.easel { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--cream); overflow: hidden; }
.easel[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); animation: fade .2s ease; }
.easel::backdrop { background: rgba(10, 9, 8, .7); }
.ez-head { display: flex; align-items: center; gap: 1rem 1.5rem; padding: 12px calc(var(--gutter) + 6px) 10px var(--gutter); border-bottom: 1px solid var(--line); }
.ez-title { display: flex; align-items: center; gap: .45em; margin: 0; font: 600 2rem/1 var(--black); text-transform: lowercase; }
.ez-title svg { width: .8em; height: .8em; color: var(--gold); }
.ez-hint { margin: 0; flex: 1; font-size: 1rem; font-style: italic; color: var(--cream-3); }
.ez-board, .ez-tools, .ez-tray-wrap { font-size: 1rem; }
.ez-head .flip-btn, .ez-tools, .ez-tray-wrap { font-variant-caps: all-small-caps; letter-spacing: .07em; }
.ez-board { position: relative; overflow: hidden; margin: 12px calc(var(--gutter) + 6px) 0 var(--gutter); background: var(--paper); border-radius: 2px;
  touch-action: none; outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ez-board:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }
.ez-board:empty::after { content: "drag a piece here from the tray"; position: absolute; inset: 0; display: grid; place-items: center;
  font: italic 400 1.25rem var(--serif); color: rgba(22, 20, 18, .45); pointer-events: none; }
.ez-piece { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; filter: drop-shadow(0 2px 3px rgba(40, 25, 10, .35)); cursor: grab; will-change: transform; }
.ez-piece:active { cursor: grabbing; }
.ez-piece.is-sel { filter: drop-shadow(0 0 1.5px #b8892c) drop-shadow(0 0 1px #b8892c) drop-shadow(0 6px 10px rgba(40, 25, 10, .35)); }
.ez-cut { display: block; background-repeat: no-repeat; }
.ez-piece .ez-cut { width: 100%; height: 100%; }
.ez-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: 10px calc(var(--gutter) + 6px) 0 var(--gutter); }
.ez-tools .flip-btn { padding: .38em .85em .46em; }
.ez-tools .flip-btn:disabled { opacity: .35; cursor: default; }
.ez-gap { flex: 1; }
.ez-tray-wrap { display: flex; align-items: center; gap: 1rem; padding: 10px calc(var(--gutter) + 6px) max(12px, env(safe-area-inset-bottom)) var(--gutter); }
.ez-tray { list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; flex: 1; min-width: 0; }
.ez-pick { width: 76px; height: 76px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); cursor: pointer; transition: border-color .2s, transform .2s; }
.ez-pick:hover { border-color: var(--gold-2); transform: translateY(-2px); }
.ez-pick:active { border-color: var(--gold); }
[data-theme="light"] .easel::backdrop { background: rgba(255, 255, 255, .7); }
[data-theme="light"] .ez-board { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
@media (max-width: 760px) {
  .ez-head { flex-wrap: wrap; padding-top: 10px; }
  .ez-hint { order: 3; flex-basis: 100%; font-size: .9375rem; }
  .ez-close { margin-left: auto; }
  .ez-title { font-size: 1.6rem; }
  .ez-gap { display: none; }
  .ez-tools { gap: .35rem; }
  .ez-tools .flip-btn { font-size: .9375rem; padding: .32em .7em .4em; }
  .ez-tray-wrap { flex-direction: column; align-items: stretch; gap: .5rem; }
  .ez-deal { align-self: flex-start; }
  .ez-pick { width: 64px; height: 64px; }
  .fav-star { width: 38px; height: 38px; top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fav-star, .fav-star[aria-pressed="true"] svg, .aff-shuffle.is-rolling svg { animation: none; transition: none; }
}

/* ── loot (hidden page, /loot/): the chest opens a little on hover, and once when the page arrives ── */
.chest { width: clamp(76px, 10vw, 104px); height: auto; margin: 0 auto 1.6rem; display: block; overflow: visible; color: var(--gold);
  fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.chest-lid { transform-box: view-box; transform-origin: 3px 11px; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.chest-glow { fill: var(--gold); stroke: none; opacity: 0; transition: opacity .5s ease .1s; }
.chest-lock { fill: var(--ink); }
.loot-hero:hover .chest-lid, .is-ready .loot-hero .chest-lid { transform: rotate(-16deg); }
.loot-hero:hover .chest-glow, .is-ready .loot-hero .chest-glow { opacity: 1; }
.is-ready .loot-hero .chest-lid { animation: lidOnce 1.8s cubic-bezier(.3, 1.4, .5, 1) .3s both; }
@keyframes lidOnce { 0% { transform: none; } 45%, 70% { transform: rotate(-24deg); } 100% { transform: rotate(-16deg); } }
@media (prefers-reduced-motion: reduce) { .chest-lid, .chest-glow { transition: none; } .is-ready .loot-hero .chest-lid { animation: none; } }

/* easel handles (2026-10-06): a gold dot on each corner of the selected piece; dragging one turns the piece toward the pointer.
   They're counter-scaled (--inv) so they stay the same size when a piece is made larger or smaller. */
.ez-handle { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #fdf0d5; border: 1.5px solid #b8892c;
  box-shadow: 0 1px 3px rgba(40, 25, 10, .35); transform: scale(var(--inv, 1)); display: none; touch-action: none; z-index: 2;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23161412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/g%3E%3C/svg%3E") 12 12, grab; }
.ez-handle::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* a bigger target for fingers */
.ez-piece.is-sel .ez-handle { display: block; }
.ez-nw { left: 0; top: 0; } .ez-ne { right: 0; top: 0; } .ez-se { right: 0; bottom: 0; } .ez-sw { left: 0; bottom: 0; }
.ez-board.is-turning, .ez-board.is-turning * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23161412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/g%3E%3C/svg%3E") 12 12, grabbing; }
.ez-pick { touch-action: pan-x; cursor: grab; }
.ez-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); background-repeat: no-repeat; }
.ez-board.is-drop { box-shadow: inset 0 0 0 2px #b8892c; }