/*
Theme Name: GoZen
Theme URI: https://go-zen.app
Author: GoZen
Description: Classic WordPress theme for GoZen. Washi, sumi, hanko, goban. Editorial zen craft, not a SaaS template.
Version: 3.1.9
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: gozen
*/

/* =========================================================================
   Go-zen theme stylesheet

   Every value comes from assets/css/design-tokens.css (enqueued first).
   Order: base → buttons → masthead → home sections → shared components
   → journal → reading → pages → footer → motion / scheme adjustments.
   Breakpoints: 40em, 48em (nav only), 56em, 72em (see design-tokens.css).
   ========================================================================= */


/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  background-color: var(--surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--lh-body);
  /* Long URLs and unbroken words wrap instead of widening the page */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

.site {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  /* Full-bleed blocks (100vw) never add a sideways scroll; clip keeps sticky */
  overflow-x: clip;
}

/* Paper grain (~3.5%) over the whole page, never interactive */
.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("assets/svg/paper-grain.svg");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

h1, h2, h3,
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
  text-wrap: balance;
}
h1,
.hero-tagline {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.wrap {
  width: min(100% - 2 * var(--pad-x), var(--site-max));
  margin-inline: auto;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--lh-meta);
  color: var(--ink-muted);
}

/* Eyebrow label above titles (home hero, journal, 404, status) */
.hero-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--lh-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section-rule {
  display: block;
  width: 3rem;
  height: 0;
  margin: var(--space-3) 0 var(--space-5);
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: transparent;
}

.alignwide { max-width: var(--site-max); }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--surface-deep);
  color: var(--ink);
}

/* Focus: one ring everywhere */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
#main:focus { outline: none; }
#main:focus-visible,
.site-main h1:focus-visible,
.site-main h2:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--pad-x);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  color: var(--surface);
}
.skip-link--search:focus,
.skip-link--search:focus-visible {
  left: calc(var(--pad-x) + 9.5rem);
}


/* -------------------------------------------------------------------------
   Buttons and quiet links
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-hanko {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  box-shadow: 2px 2px 0 var(--shadow-color);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    translate 0.3s var(--ease-settle);
}
/* Press: the offset shadow collapses, as if the seal met the paper */
.btn-hanko:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 var(--shadow-color);
}
.btn-hanko:hover,
.btn-hanko:focus-visible {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--accent-ink);
}
.btn-hanko:focus-visible { outline-color: var(--ink); }

/* The hanko seal reads as a cream stamp on the vermilion button */
.btn-hanko .hanko-mark {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transform: rotate(-3deg);
  transition: transform var(--dur) var(--ease);
}
.btn-hanko:hover .hanko-mark,
.btn-hanko:focus-visible .hanko-mark {
  transform: rotate(-8deg);
}
.btn-hanko:active .hanko-mark { transform: rotate(-3deg) scale(0.86); }
.btn-hanko.is-stamped .hanko-mark {
  animation: gozen-cta-stamp 0.5s var(--ease-settle) 1;
}
@keyframes gozen-cta-stamp {
  0% { opacity: 0.35; transform: rotate(-3deg) scale(1.4); }
  55% { opacity: 1; transform: rotate(-3deg) scale(0.9); }
  100% { opacity: 0.9; transform: rotate(-3deg) scale(1); }
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

.link-quiet {
  font-size: var(--text-ui);
  font-weight: 500;
}


/* -------------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--line);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  min-height: var(--header-h);
}

.site-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.site-brand:hover { color: var(--ink); }
.site-brand .kanji {
  font-size: 0.92em;
  color: var(--accent);
}
.site-brand .custom-logo-link { display: inline-block; }
.site-brand .custom-logo { width: auto; height: 2rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav li a {
  display: block;
  padding-block: var(--space-2);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  text-underline-offset: 0.5em;
}
.site-nav li a:hover,
.site-nav li a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
/* The header CTA is the only Waitlist control; hide a menu duplicate */
.site-nav li a[href$="#download"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-nav__cta {
  min-height: 2.375rem;
  padding: 0 var(--space-4);
  font-size: var(--text-small);
  box-shadow: 1px 1px 0 var(--shadow-color);
}
.site-nav__cta .hanko-mark {
  width: 1.05rem;
  height: 1.05rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  position: relative;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Menu collapses below 48em: the inline nav has no slack at 40em */
@media (max-width: 47.99em) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-2) var(--pad-x) var(--space-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--elev-2);
  }
  .site-nav.is-open { display: flex; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav li a {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--step-0);
  }
  .site-nav__cta {
    width: 100%;
    min-height: 2.875rem;
    font-size: var(--text-ui);
  }
}


/* -------------------------------------------------------------------------
   Home: hero
   ------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-section-tight);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.hero .hero-label { margin-bottom: var(--space-5); }
.hero .hero-label { align-items: center; gap: var(--space-2) var(--space-3); }
/* Home hero eyebrow is a div (it holds the page h1); keep the old <p> box rules. */
div.hero-label { max-width: var(--measure); text-wrap: pretty; }
/* SEO h1 inside the eyebrow: looks exactly like the eyebrow text span it replaced. */
.hero .hero-label__title { all: unset; }
.hero-label__status {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 700;
}

/* Visual headline (was the h1 until 3.1.2; same look, now a <p>).
   font-family mirrors the theme.json heading preset that core prints for h1-h6. */
.hero .hero-tagline {
  font-family: var(--wp--preset--font-family--display, var(--font-display));
  max-width: 11ch;
  margin: 0 0 var(--space-5);
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.hero-lede {
  max-width: 38ch;
  margin: 0 0 var(--space-6);
  font-size: clamp(var(--step-0), 1rem + 0.35vw, var(--step-1));
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

/* App goban (template-parts/goban.php): wood photo, kaya lift in screen
   blend, then grid, hoshi and stones as SVG. One board for hero and plinth;
   identical in both schemes. */
.goban {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--goban-radius);
  background: var(--goban-wood);
  box-shadow: var(--goban-shadow);
}
.goban__wood,
.goban__wood img,
.goban::before,
.goban::after,
.goban__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.goban__wood img {
  object-fit: cover;
}
.goban::before {
  content: "";
  z-index: 1;
  background: var(--goban-wood-lift);
  opacity: 0.48;
  mix-blend-mode: screen;
}
.goban__marks {
  z-index: 2;
  overflow: visible;
}
.goban__lines {
  fill: none;
  stroke: var(--goban-line);
  stroke-opacity: 0.7;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}
.goban__hoshi {
  fill: var(--goban-line);
  fill-opacity: 0.92;
}
/* Frame on top of the wood, as the app's BorderStroke */
.goban::after {
  content: "";
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--goban-wood-border);
  pointer-events: none;
}

/* Board + real Android capture, one composed object */
.hero-visual {
  display: grid;
  width: 100%;
  max-width: 26rem;
  margin: 0;
}
.hero-visual > * { grid-area: 1 / 1; }

.hero-visual__board {
  position: relative;
  justify-self: end;
  align-self: start;
  width: 80%;
}

.hero-visual .hero-visual__phone {
  z-index: var(--z-raised);
  justify-self: start;
  align-self: start;
  width: 38%;
  margin-top: 34%;
}

@media (min-width: 56em) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .hero-visual {
    justify-self: end;
    max-width: 30rem;
  }
}


/* -------------------------------------------------------------------------
   Home: ma strip (one quiet line)
   ------------------------------------------------------------------------- */
.ma-strip {
  padding-block: var(--space-section-loose) var(--space-section);
  border-block: 1px solid var(--line);
  background: var(--surface-deep);
}
.ma-strip p {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 56em) {
  /* Off-center on purpose: the line starts one sixth in, like a hanging scroll */
  .ma-strip p {
    max-width: 16ch;
    margin-left: calc(100% / 6);
    font-size: var(--step-4);
    line-height: 1.12;
  }
}


/* -------------------------------------------------------------------------
   Sections and section heads
   ------------------------------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section--deep { background: var(--surface-deep); }
/* Vary the breath: About opens wide after the ma line, Practice sits closer */
.section-with-rail { padding-block: var(--space-section-loose) var(--space-section); }
.section--practice { padding-block: var(--space-section-tight) var(--space-section); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.section-head h2 {
  max-width: 20ch;
  margin: 0;
  letter-spacing: var(--track-tight);
}
.section-head .section-rule { margin: var(--space-3) 0 0; }

.section-head--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.section-head--row > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section-kanji {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--accent);
}

.notes-all { white-space: nowrap; }

/* Vertical label beside a section (wide screens only) */
.section-rail { display: none; }
@media (min-width: 72em) {
  .section-with-rail { position: relative; }
  .section-rail {
    display: block;
    position: absolute;
    top: var(--space-section);
    left: max(var(--space-2), calc((100vw - var(--site-max)) / 2 - 2.5rem));
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}

.split-60-40 {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 56em) {
  .split-60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.prose p {
  margin: 0;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.prose p + p { margin-top: 1.1em; }

.about-core {
  max-width: 44ch;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent);
  background: var(--surface-deep);
}
.prose .about-core { color: var(--ink); }
.about-core strong {
  margin-right: 0.2em;
  font-family: var(--font-display);
  font-weight: 600;
}
.prose .about-more { margin-top: var(--space-5); }


/* -------------------------------------------------------------------------
   Home: practice list (numbered rows, not cards)
   ------------------------------------------------------------------------- */
.value-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.value-list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--line);
  border-left: 2px solid transparent;
}
.value-list li.is-wide {
  border-left-color: var(--accent);
  background: var(--accent-wash);
}
.value-list .num {
  padding-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--ink-muted);
}
.value-list .is-wide .num { color: var(--ink); }
.value-list h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
}
.value-list p {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-soft);
}
@media (min-width: 40em) {
  .value-list li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding: var(--space-6) var(--space-5);
  }
}
@media (min-width: 56em) {
  /* Uneven on purpose: the guided path carries the weight, the third row steps in */
  .value-list li.is-wide { padding-block: var(--space-7); }
  .value-list .is-wide h3 { font-size: var(--step-2); }
  .value-list .is-wide p { max-width: 52ch; font-size: var(--step-1); line-height: 1.6; }
  .value-list .is-narrow p { max-width: 44ch; }
  .value-list li:nth-child(3) { margin-left: clamp(0rem, 8vw, 6.5rem); }
}


/* -------------------------------------------------------------------------
   Home: material full-bleed (kaya wood stays wood in both schemes)
   ------------------------------------------------------------------------- */
.material-bleed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-section-loose);
  background: var(--goban-wood);
  color: var(--goban-black);
}
/* The app's wood photo, center-cropped, with the same kaya lift as the board */
.material-bleed__wood,
.material-bleed__wood img,
.material-bleed::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.material-bleed__wood { z-index: -2; }
.material-bleed__wood img { object-fit: cover; }
.material-bleed::before {
  content: "";
  z-index: -1;
  background: var(--goban-wood-lift);
  opacity: 0.48;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Goban grid motif: the page's one strong craft beat. The field is taller
   than the band so it can drift; stones sit on its intersections. Lines and
   hoshi use the app's board values (#1A120C at 70% and 92%). */
.material-bleed__field {
  position: absolute;
  inset: -3rem 0;
  z-index: -1;
  pointer-events: none;
}
.material-bleed__field::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Hoshi every six lines, centered on an intersection, then the 2rem grid */
  background-image:
    radial-gradient(circle at 6rem 6rem, rgba(26, 18, 12, 0.92) 0.2rem, transparent calc(0.2rem + 0.5px)),
    linear-gradient(rgba(26, 18, 12, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 18, 12, 0.7) 1px, transparent 1px);
  background-position: right top;
  background-size: 12rem 12rem, 2rem 2rem, 2rem 2rem;
  /* At the app's line strength the grid stays clear of the copy: a low pool
     at the foot of the band on phones, a pool around the hane on wide screens. */
  --pool: radial-gradient(ellipse 80% 16% at 85% 100%, black 20%, transparent 100%);
  -webkit-mask-image: var(--pool);
  mask-image: var(--pool);
}
@media (min-width: 40em) {
  .material-bleed__field::before {
    --pool: radial-gradient(ellipse 15rem 34% at calc(100% - max(4rem, 50% - 18rem) - 1rem) 50%, black 25%, transparent 100%);
  }
}
@media (min-width: 72em) {
  .material-bleed__field::before {
    --pool: radial-gradient(ellipse 21rem 40% at calc(100% - max(4rem, 50% - 18rem) - 1rem) 50%, black 25%, transparent 100%);
  }
}
/* Three stones, a hane: black, white answers, black wraps. Wide screens only;
   on a phone the copy needs the whole width. Same slate and shell as the app
   board: radius 0.45 of a cell, highlight up-left, soft and contact shadow. */
.material-bleed__stone {
  --r: 0.9rem;
  display: none;
  position: absolute;
  top: calc(var(--gy) * 2rem);
  right: calc(6rem + var(--gx) * 2rem);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background: radial-gradient(circle 1.1rem at 0.66rem 0.66rem, #707070 0%, #2C2C2C 33.33%, #101010 66.67%, #040404 100%);
  box-shadow:
    calc(var(--r) * 0.02) calc(var(--r) * 0.045) 0 calc(var(--r) * -0.08) rgba(0, 0, 0, 0.5),
    calc(var(--r) * 0.08) calc(var(--r) * 0.16) 0 calc(var(--r) * 0.05) rgba(0, 0, 0, 0.35);
  transform: translate(50%, -50%);
}
.material-bleed__stone--b1 { --gx: 0; --gy: 6; }
.material-bleed__stone--w1 {
  --gx: -1;
  --gy: 6;
  background:
    repeating-linear-gradient(-20deg, rgba(150, 140, 120, 0.1) 0 1px, transparent 1px 3px),
    radial-gradient(circle 1.3rem at 0.6rem 0.6rem, #FFFFFF 0%, #FBF9F4 33.33%, #E8E2D7 66.67%, #D2CBBE 100%);
  box-shadow:
    calc(var(--r) * 0.02) calc(var(--r) * 0.045) 0 calc(var(--r) * -0.08) rgba(43, 33, 24, 0.35),
    calc(var(--r) * 0.08) calc(var(--r) * 0.16) 0 calc(var(--r) * 0.05) rgba(43, 33, 24, 0.3);
}
.material-bleed__stone--b2 { --gx: -1; --gy: 7; }
@media (min-width: 40em) {
  .material-bleed__stone { display: block; }
}
/* Anchor the hane near the middle of wide screens: a 2rem multiple measured
   from the right edge keeps every stone on a grid intersection. */
@supports (width: round(down, 10px, 2px)) {
  .material-bleed__stone {
    right: calc(max(4rem, round(down, 50% - 18rem, 2rem)) + var(--gx) * 2rem);
  }
}
.material-bleed h2 {
  max-width: 16ch;
  margin: 0 0 var(--space-4);
  color: var(--goban-black);
}
.material-bleed p {
  max-width: 42ch;
  margin: 0;
  color: var(--goban-black);
}


/* -------------------------------------------------------------------------
   Home: notes teaser
   ------------------------------------------------------------------------- */
.section--notes { padding-block: var(--space-section) var(--space-section-tight); }

.notes-teaser {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.notes-teaser li { border-bottom: 1px solid var(--line); }

.note-card { padding-block: var(--space-5); }
.note-card .meta { margin: 0; }
.note-card h3 {
  max-width: 24ch;
  margin: var(--space-2) 0;
  font-size: var(--step-1);
}
.note-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.note-card h3 a:hover,
.note-card h3 a:focus-visible { color: var(--accent); }
.note-excerpt {
  max-width: 42ch;
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 56em) {
  .notes-teaser {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: var(--space-7);
    border-bottom: 1px solid var(--line);
  }
  .notes-teaser li { border-bottom: 0; }
  .notes-teaser .is-featured { grid-row: 1 / span 2; }
  .notes-teaser .is-side + .is-side { border-top: 1px solid var(--line); }
  .note-card--featured h3 { font-size: var(--step-2); }
  .note-card--featured .note-excerpt { font-size: var(--step-0); }
}


/* -------------------------------------------------------------------------
   Phone mock (hero + product): a current Android flagship. Thin uniform
   graphite bezel, concentric corners, punch-hole camera on the screen.
   9:20 window, the same ratio as the 1080x2400 captures.
   ------------------------------------------------------------------------- */
.kaya-frame {
  position: relative;
  margin: 0;
  /* Bezel and corner tokens resolve against the phone width */
  container-type: inline-size;
}
.kaya-frame .kaya-frame__device {
  position: relative;
  padding: var(--device-bezel);
  border-radius: var(--radius-device);
  /* Flat graphite frame: a dark outer edge and one hairline highlight */
  background: var(--device-shell);
  box-shadow:
    inset 0 0 0 1px var(--device-edge),
    inset 0 0 0 1.5px var(--device-edge-light),
    var(--elev-2);
}
/* Power button: a 1px sliver on the right edge */
.kaya-frame .kaya-frame__device::after {
  content: "";
  position: absolute;
  top: 21%;
  right: -1px;
  width: 1px;
  height: 9%;
  border-radius: 0 1px 1px 0;
  background: var(--device-button);
}
.kaya-frame__screen {
  position: relative;
  z-index: var(--z-raised);
  aspect-ratio: 9 / 20;
  overflow: hidden;
  border-radius: var(--radius-screen);
  background: var(--device-screen);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--goban-black) 24%, transparent);
}
/* The capture sits 2% inside the glass (same 9:20 ratio) so the status bar
   clock and battery clear the rounded corners, as on a real device. */
.kaya-frame__screen picture {
  position: absolute;
  inset: 2%;
}
/* Punch-hole camera, centered on the status bar line (2% inset plus about
   1.4% of the capture), where all four captures leave the top center empty. */
.kaya-frame__screen::before {
  content: "";
  position: absolute;
  top: 3.3%;
  left: 50%;
  z-index: 2;
  width: 3.3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #24262E 0 16%, var(--device-camera) 46%);
  box-shadow: 0 0 0 0.5px rgba(60, 60, 66, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.kaya-frame__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--sketch-paper);
}
.kaya-frame__screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to top, var(--sketch-paper) 8%, transparent);
  pointer-events: none;
}
.kaya-frame__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--ink-muted);
}
.kaya-frame__shot-tag {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-deep);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   Home: product showcase (tabs + phone)
   ------------------------------------------------------------------------- */
.section--product { border-top: 1px solid var(--line); }

.product-lede {
  max-width: 48ch;
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
}

.product-showcase {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  max-width: 56rem;
}

.product-chooser {
  display: grid;
  gap: var(--space-4);
}

.product-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.product-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-height: 2.75rem;
  margin-bottom: -1px;
  padding: 0.6rem 0.35rem 0.7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.product-tab__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
}
.product-tab:hover { color: var(--ink); }
.product-tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}
.product-tab[aria-selected="true"] .product-tab__num { color: var(--accent); }

.product-blurb {
  min-height: calc(1.6em * 3);
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--ink-soft);
}

.product-stage {
  --plinth-x: 34%;
  --plinth-y: 10%;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-bottom: var(--space-5);
}
.product-stage > * { grid-area: 1 / 1; }

/* Plinth behind the phone: the same board as the hero, set at an angle */
.product-stage__plinth {
  position: relative;
  align-self: center;
  width: min(12rem, 62vw);
  translate: var(--plinth-x) var(--plinth-y);
  rotate: -4deg;
  pointer-events: none;
}
/* Rotated lines antialias instead of snapping to the pixel grid */
.product-stage__plinth .goban__lines { shape-rendering: geometricPrecision; }

.product-panel {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: 13rem;
}
.product-panel.is-leaving {
  z-index: 0;
  pointer-events: none;
}
.product-panel[hidden] { display: none; }
.product-panel:focus { outline: none; }
.product-panel:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 8px;
  /* The panel is the container, so cqi tokens do not apply to itself */
  border-radius: 2.25rem;
}
/* Tab switch: the old phone lifts away while the new one settles in place */
.product-panel.is-entering .kaya-frame__device {
  animation: gozen-panel-enter var(--dur-enter) var(--ease-settle) both;
}
.product-panel.is-entering .kaya-frame__screen img {
  animation: gozen-screen-settle 0.8s var(--ease-settle) both;
}
.product-panel.is-entering .kaya-frame__caption {
  animation: gozen-fade-in 0.4s var(--ease) 0.12s both;
}
.product-panel.is-leaving .kaya-frame__device,
.product-panel.is-leaving .kaya-frame__caption {
  animation: gozen-panel-leave 0.3s var(--ease) both;
}
.product-blurb.is-swapping {
  animation: gozen-fade-in 0.4s var(--ease) both;
}
@keyframes gozen-panel-enter {
  from { opacity: 0; transform: translateY(1rem) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes gozen-panel-leave {
  to { opacity: 0; transform: translateY(-0.5rem) scale(0.97); }
}
@keyframes gozen-screen-settle {
  from { transform: scale(1.05); }
  to { transform: none; }
}
@keyframes gozen-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gozen-fade-out {
  to { opacity: 0; }
}

@media (min-width: 56em) {
  .product-showcase {
    grid-template-columns: minmax(14rem, 1fr) minmax(13rem, 0.75fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .product-chooser { gap: var(--space-5); }
  .product-tabs {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .product-tab {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0 -1px;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    border-bottom: 0;
    border-left: 2px solid transparent;
    font-size: var(--text-ui);
    text-align: left;
  }
  .product-tab[aria-selected="true"] {
    border-left-color: var(--accent);
    background: var(--accent-wash);
  }
  .product-blurb {
    max-width: 32ch;
    min-height: calc(1.65em * 3);
    padding-left: var(--space-4);
    font-size: var(--step-0);
    line-height: 1.65;
  }
  .product-stage {
    --plinth-x: 42%;
    --plinth-y: 14%;
    justify-items: center;
  }
  .product-stage__plinth { width: 15rem; }
  .product-panel { max-width: 15rem; }
}


/* -------------------------------------------------------------------------
   First-session storyboard (home aside + About page)
   ------------------------------------------------------------------------- */
.session-storyboard {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-deep);
  color: var(--ink);
}
.session-storyboard__head { margin: 0 0 var(--space-4); }
.session-storyboard__eyebrow {
  max-width: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: var(--lh-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.session-storyboard__lede {
  max-width: 48ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-ui);
  line-height: 1.55;
  color: var(--ink-soft);
}

.session-storyboard__track {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-storyboard__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}
.session-storyboard__num {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  color: var(--accent);
}
.session-storyboard__motif {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kaya);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goban-black) 22%, transparent);
}
.session-storyboard__copy {
  grid-column: 2;
  grid-row: 2;
}
.session-storyboard__title {
  max-width: none;
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
}
.session-storyboard__body {
  max-width: 36ch;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
}

/* Motif: a tiny goban per step */
.session-storyboard__grid {
  position: absolute;
  inset: 0.35rem;
  background-image:
    linear-gradient(color-mix(in srgb, var(--goban-black) 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--goban-black) 28%, transparent) 1px, transparent 1px);
  background-position: center;
  background-size: 33.33% 33.33%;
}
.session-storyboard__stone {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--goban-black);
}
.session-storyboard__stone--a { top: 28%; left: 32%; }
.session-storyboard__stone--b {
  top: 52%;
  left: 55%;
  background: var(--goban-white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goban-black) 35%, transparent);
}
.session-storyboard__step--open .session-storyboard__stone--b { opacity: 0; }
.session-storyboard__step--learn .session-storyboard__stone--a { top: 38%; left: 48%; }
.session-storyboard__step--learn .session-storyboard__stone--b { top: 38%; left: 48%; transform: translate(70%, -10%); }
.session-storyboard__step--solve .session-storyboard__stone--a { top: 30%; left: 30%; }
.session-storyboard__step--solve .session-storyboard__stone--b { top: 48%; left: 48%; }
.session-storyboard__step--solve .session-storyboard__motif::after {
  content: "";
  position: absolute;
  top: 62%;
  left: 28%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--goban-black);
}
.session-storyboard__step--close .session-storyboard__stone { opacity: 0.35; }
.session-storyboard__step--close .session-storyboard__grid { opacity: 0.45; }

/* Home aside: hairline list, no box */
.session-storyboard--aside {
  padding: 0;
  border: 0;
  background: transparent;
}
/* An ink thread joins one sitting to the next (drawn on scroll where supported) */
.session-storyboard--aside .session-storyboard__step {
  position: relative;
  view-timeline: --gz-step block;
}
.session-storyboard--aside .session-storyboard__motif { z-index: var(--z-raised); }
.session-storyboard--aside .session-storyboard__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 2.75rem);
  bottom: calc(-1 * var(--space-3));
  left: calc(1.375rem - 0.5px);
  width: 1px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  transform-origin: top;
}
.session-storyboard--aside .session-storyboard__track { gap: 0; }
.session-storyboard--aside .session-storyboard__step {
  padding: var(--space-3) 0;
  background: transparent;
}
.session-storyboard--aside .session-storyboard__step + .session-storyboard__step {
  border-top: 1px solid var(--line);
}
.session-storyboard__more {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.session-storyboard__more .link-quiet { font-size: var(--text-small); }

/* About page: boxed, two columns when there is room */
.session-storyboard--page { margin: var(--space-6) 0; }
@media (min-width: 40em) {
  .session-storyboard--page .session-storyboard__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* -------------------------------------------------------------------------
   Waitlist (home CTA band + form states)
   ------------------------------------------------------------------------- */
.cta-final {
  padding-block: var(--space-section-loose);
  border-top: 1px solid var(--line);
  background: var(--surface-deep);
}
.cta-final h2 {
  max-width: 16ch;
  margin: 0 0 var(--space-4);
}
.cta-final .lede {
  max-width: 40ch;
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
}
@media (min-width: 56em) {
  .cta-final .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-8);
    align-items: center;
  }
  .cta-final .wrap > h2,
  .cta-final .wrap > .lede { grid-column: 1; }
  .cta-final .wrap > h2 { align-self: end; }
  .cta-final .wrap > .lede {
    align-self: start;
    margin-bottom: 0;
  }
  .cta-final .wrap > :not(h2):not(.lede) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.waitlist-form {
  position: relative;
  max-width: 34rem;
}
.waitlist-panel {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}
.waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-small);
  line-height: var(--lh-meta);
  color: var(--ink-muted);
  cursor: pointer;
}
.waitlist-consent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.waitlist-label {
  flex: 0 0 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.waitlist-input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.875rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-input);
  line-height: 1.25;
  appearance: none;
  color-scheme: inherit;
  transition: border-color var(--dur) var(--ease);
}
.waitlist-input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.waitlist-input:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.waitlist-form:focus-within .waitlist-input {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
.waitlist-input[aria-invalid="true"] { border-color: var(--accent); }
.waitlist-input:-webkit-autofill,
.waitlist-input:-webkit-autofill:hover,
.waitlist-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--surface-field) inset;
  transition: background-color 99999s ease-out;
}
.waitlist-row .btn { flex: 0 0 auto; }
.waitlist-btn-label { display: inline; }

.waitlist-hint {
  max-width: 42ch;
  margin: var(--space-4) 0 0;
  font-size: var(--text-small);
  line-height: var(--lh-meta);
  color: var(--ink-muted);
}
.waitlist-hint a { color: var(--ink); }

.waitlist-error {
  max-width: 40ch;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--accent);
  background: var(--error-wash);
  color: var(--ink);
  font-size: var(--text-small);
  animation: gozen-waitlist-error-flash 1.05s ease-out 1;
}

.waitlist-done {
  position: relative;
  max-width: 34rem;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  animation: gozen-waitlist-flash 1.15s ease-out 1;
}
.waitlist-done:focus { outline: none; }
.waitlist-done:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.waitlist-done__stamp {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: 0.3rem 0.55rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  transform: rotate(-3deg);
  transform-origin: center;
  animation: gozen-stamp-press 0.55s ease-out 1;
}
.waitlist-done__title {
  max-width: 20ch;
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
}
.waitlist-done__body {
  max-width: 40ch;
  margin: 0 0 var(--space-4);
  line-height: 1.65;
  color: var(--ink-soft);
}
.waitlist-done__next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}
.waitlist-done__privacy { display: none; }

@keyframes gozen-waitlist-flash {
  from { background-color: var(--accent-wash); }
  to { background-color: var(--surface); }
}
@keyframes gozen-waitlist-error-flash {
  from { background-color: color-mix(in srgb, var(--hanko) 18%, var(--surface)); }
  to { background-color: var(--error-wash); }
}
@keyframes gozen-stamp-press {
  0% { opacity: 0; transform: rotate(-3deg) scale(1.18); }
  55% { opacity: 1; transform: rotate(-3deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

@media (max-width: 39.99em) {
  .waitlist-row { flex-direction: column; }
  .waitlist-input { flex: 0 0 auto; width: 100%; }
  .waitlist-row .btn { width: 100%; }
}


/* -------------------------------------------------------------------------
   Journal: page intros, search, shelves, post grid
   ------------------------------------------------------------------------- */
.site-main { min-height: 50vh; }

.page-intro {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.page-intro h1 {
  max-width: 14ch;
  margin: 0 0 var(--space-3);
}
.page-intro p {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-soft);
}
.page-intro .hero-label { color: var(--ink-muted); }
.page-intro p.page-intro__rss {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

.search-lede,
.archive-lede,
.archive-desc {
  max-width: 44ch;
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
}
.archive-desc p { max-width: none; margin: 0; color: inherit; }
.page-intro .search-count { margin: var(--space-3) 0 0; }
.page-intro .archive-back { margin: var(--space-4) 0 0; }

.search-entry {
  max-width: 28rem;
  margin-top: var(--space-5);
}
.search-refine {
  max-width: 32rem;
  margin-top: var(--space-5);
}
.search-form__label {
  display: block;
  margin: 0 0 var(--space-2);
}
.search-form__visible {
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.search-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2) var(--space-3);
}
.search-form__input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.875rem;
  margin: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-input);
}
.search-form__input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.search-form__input:focus-visible { border-color: var(--line-strong); }
.search-form__submit {
  flex: 0 0 auto;
  margin: 0;
}

/* Shelves: category links with plain counts */
.shelf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.shelf-nav__label {
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.shelf-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelf-nav__list a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-size: var(--text-ui);
  color: var(--ink-soft);
  text-decoration: none;
}
.shelf-nav__list a:hover,
.shelf-nav__list a:focus-visible {
  border-bottom-color: var(--line-strong);
  color: var(--ink);
}
.shelf-nav__list a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
  font-weight: 500;
}
.shelf-nav__count {
  margin-left: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--ink-muted);
}

.blog-grid {
  display: grid;
  padding-bottom: var(--space-8);
}
@media (min-width: 56em) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
}

.post-card {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.post-card .meta { margin: 0; }
.post-card h2 {
  max-width: 24ch;
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--step-1);
}
.post-card h2 a {
  color: var(--ink);
  text-decoration: none;
}
.post-card h2 a:hover,
.post-card h2 a:focus-visible { color: var(--accent); }
.post-card .excerpt {
  max-width: 48ch;
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--ink-soft);
}
.post-card .excerpt p {
  display: -webkit-box;
  max-width: none;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Latest note: full row, title left, excerpt right on wide screens */
.post-card--featured {
  grid-column: 1 / -1;
  padding-block: var(--space-6) var(--space-7);
}
.post-card--featured h2 {
  max-width: 20ch;
  font-size: var(--step-2);
}
.post-card--featured .excerpt {
  max-width: 52ch;
  font-size: var(--step-0);
}
@media (min-width: 56em) {
  .post-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: end;
  }
  .post-card--featured > * { grid-column: 1; }
  .post-card--featured h2 { margin-bottom: 0; }
  .post-card--featured .excerpt {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

.badge-new {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.badge-new img {
  width: 0.95rem;
  height: 0.95rem;
  transform: rotate(-3deg);
}

.pagination {
  padding-block: var(--space-6) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.pagination .page-numbers {
  padding: var(--space-1) 0.15rem;
  border-bottom: 1px solid transparent;
  color: var(--ink-muted);
  text-decoration: none;
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible { color: var(--accent); }
.pagination .page-numbers.current {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.empty-state {
  max-width: 36rem;
  padding: var(--space-8) 0;
}
.empty-state h2 { margin: 0 0 var(--space-3); }
.empty-state p { margin: 0 0 var(--space-5); color: var(--ink-soft); }
.empty-state .empty-state__label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.empty-state .empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0;
}


/* -------------------------------------------------------------------------
   Reading: single notes and pages (one centred column)
   ------------------------------------------------------------------------- */
.site-main--narrow {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-8);
}
.site-main--narrow > .wrap {
  width: min(100% - 2 * var(--pad-x), var(--reading));
}

.entry-back {
  margin: 0 0 var(--space-5);
  font-size: var(--text-small);
}
.entry-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.entry-back__link:hover,
.entry-back__link:focus-visible { color: var(--accent); }
.entry-back__arrow { font-family: var(--font-mono); }

.entry-header { margin-bottom: var(--space-6); }
.entry-header .meta { margin: 0; }
.entry-header h1 {
  max-width: 18ch;
  margin: var(--space-3) 0 var(--space-4);
}
.entry-header .section-rule { margin: 0; }

.entry-content {
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.entry-content > :first-child { margin-top: 0; }
.entry-content p {
  max-width: none;
  margin: 0 0 1.4em;
  line-height: 1.75;
}
.site-main--reading .entry-content > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
}
.entry-content a { color: var(--ink); }
.entry-content a:hover,
.entry-content a:focus-visible { color: var(--accent); }

.entry-content h2 {
  max-width: 28ch;
  margin: 2.25em 0 0.6em;
  font-size: calc(var(--step-2) * 0.85);
}
.entry-content h3 {
  margin: 1.85em 0 0.5em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.35rem;
  line-height: 1.7;
}
.entry-content li { padding-left: 0.15rem; }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content li::marker { color: var(--ink-muted); }
.entry-content li > ul,
.entry-content li > ol { margin: var(--space-2) 0 0; }

.entry-content blockquote,
.entry-content .wp-block-quote {
  max-width: 34ch;
  margin: 2.5rem 0;
  padding-left: 1.35rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.entry-content blockquote p { margin: 0 0 0.65em; line-height: inherit; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite,
.entry-content .wp-block-pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-style: normal;
  font-weight: 500;
  color: var(--ink-muted);
}

.entry-content .wp-block-pullquote {
  max-width: 38ch;
  margin: 2.75rem 0;
  padding: var(--space-5) 0;
  border: 0;
  border-block: 1px solid var(--line);
  text-align: left;
}
.entry-content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.entry-content figure,
.entry-content .wp-block-image { margin: 2.5rem 0; }
.entry-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.entry-content figcaption,
.entry-content .wp-element-caption {
  max-width: 42ch;
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--lh-meta);
  color: var(--ink-muted);
}

.entry-content hr,
.entry-content .wp-block-separator {
  width: 3.5rem;
  height: 0;
  margin: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: transparent;
}
.entry-content .wp-block-separator.is-style-wide { width: 100%; }
.entry-content .wp-block-separator.is-style-dots {
  width: auto;
  border: 0;
  text-align: center;
  color: var(--ink-muted);
}
.entry-content .wp-block-separator.is-style-dots::before {
  content: "· · ·";
  font-family: var(--font-display);
  letter-spacing: var(--track-wide);
}

.entry-content code,
.entry-content kbd,
.entry-content samp {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-field);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.entry-content kbd { border-bottom-width: 2px; }
.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted {
  margin: 2rem 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-field);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: 1.55;
}
.entry-content pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  white-space: inherit;
}

.entry-content .wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
}
.entry-content table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: var(--lh-meta);
}
.entry-content .wp-block-table table { margin: 0; }
.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.entry-content th:last-child,
.entry-content td:last-child { padding-right: 0; }
.entry-content thead th {
  border-bottom-color: var(--line-strong);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink);
}
.entry-content tbody tr:last-child > * { border-bottom-color: var(--line-strong); }

.entry-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}

.meta-cat {
  color: inherit;
  text-decoration: none;
}
.meta-cat:hover,
.meta-cat:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.related-notes {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.related-notes h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.related-notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-notes__list li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.related-notes__list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.related-notes .meta { margin: 0 0 var(--space-1); }
.related-notes__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
  text-decoration: none;
}
.related-notes__title:hover,
.related-notes__title:focus-visible { color: var(--accent); }


/* -------------------------------------------------------------------------
   Pages: legal draft, About, status, 404
   ------------------------------------------------------------------------- */
.legal-draft-banner,
.status-page__banner {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--kaya-deep);
  background: var(--surface-deep);
  font-size: var(--text-ui);
  color: var(--ink-soft);
}
.legal-draft-banner p,
.status-page__banner p { max-width: none; margin: 0; }
.legal-draft-banner strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.about-waitlist {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-deep);
}
.about-waitlist h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
}
.about-waitlist p {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
}

.status-page__body h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--step-1);
}
.status-page__body ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.15rem;
  color: var(--ink-soft);
}
.status-page__body li { margin: var(--space-2) 0; }
.status-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}

.error-404 h1 {
  max-width: 15ch;
  margin: var(--space-2) 0 var(--space-4);
}
.error-404 > p:not(.hero-label) {
  max-width: 42ch;
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
}
.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.error-404__notes {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.error-404__notes h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.error-404__notes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.error-404__notes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}
.error-404__notes li:first-child { border-top: 0; }
.error-404__notes a {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  text-decoration: none;
}
.error-404__notes .meta { white-space: nowrap; }
@media (max-width: 39.99em) {
  .error-404__notes li { grid-template-columns: 1fr; }
  .error-404__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 56em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
.site-footer__tagline {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  margin: var(--space-4) 0 0;
}
.footer-status { color: inherit; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}
.footer-nav__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer-nav ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  font-size: var(--text-small);
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}


/* -------------------------------------------------------------------------
   Back to top
   ------------------------------------------------------------------------- */
.back-top {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px var(--shadow-color);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition:
    opacity 0.2s var(--ease),
    visibility 0.2s var(--ease),
    transform 0.2s var(--ease),
    color var(--dur) var(--ease);
}
.back-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.back-top:hover,
.back-top:focus-visible { color: var(--accent); }


/* -------------------------------------------------------------------------
   Motion: hero ceremony and scroll storytelling (front page)

   Only transform, translate, scale, rotate and opacity move. Scroll-linked
   pieces live behind @supports (animation-timeline) and need no JS; motion.js
   adds an IntersectionObserver fallback for reveals and a parallax fallback
   for the hero. Nothing pins, so phones scroll as they always did.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: label, title, lede, actions arrive in reading order; the board
     settles first (no fade, it is the LCP), the phone is set down after it,
     and the seal on the CTA is stamped last. */
  .hero-copy > * {
    animation: gozen-ink-rise 0.8s var(--ease-settle) both;
  }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.18s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.28s; }
  .hero-visual__board {
    animation: gozen-board-settle 1.1s var(--ease-settle) both;
  }
  .hero-visual__phone {
    animation: gozen-phone-arrive var(--dur-ceremony) var(--ease-settle) 0.32s both;
  }
  .hero-actions .btn-hanko .hanko-mark {
    animation: gozen-cta-stamp 0.5s var(--ease-settle) 0.85s backwards;
  }

  /* Fallback reveals (motion.js marks only blocks still below the fold) */
  .gz-reveal-fallback [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
  }
  .gz-reveal-fallback [data-reveal].is-revealed {
    transition:
      opacity 0.7s var(--ease-settle),
      transform 0.7s var(--ease-settle);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
  }
}

@keyframes gozen-ink-rise {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: none; }
}
@keyframes gozen-board-settle {
  from { transform: translateY(0.6rem) scale(0.975) rotate(-0.8deg); }
  to { transform: none; }
}
@keyframes gozen-phone-arrive {
  from { opacity: 0; transform: translateY(2.25rem) rotate(2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes gozen-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  to { opacity: 1; transform: none; }
}
@keyframes gozen-ink-draw {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes gozen-stone-set {
  from { opacity: 0; scale: 1.45; }
}
@keyframes gozen-drift {
  from { translate: 0 2.5rem; }
  to { translate: 0 -2.5rem; }
}
@keyframes gozen-plinth-drift {
  from { translate: var(--plinth-x) calc(var(--plinth-y) + 2.5rem); }
  to { translate: var(--plinth-x) calc(var(--plinth-y) - 1.5rem); }
}
@keyframes gozen-parallax-board {
  to { translate: 0 -1.1rem; }
}
@keyframes gozen-parallax-phone {
  to { translate: 0 -3.5rem; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Reveals scrub with the scroll: rows in a list arrive one after another */
    [data-reveal] {
      animation: gozen-reveal linear both;
      animation-timeline: view();
      animation-range:
        entry calc(var(--reveal-i, 0) * 7%)
        entry calc(60% + var(--reveal-i, 0) * 7%);
    }

    /* Storyboard: each step sets its stones, then draws the thread onward */
    .session-storyboard--aside .session-storyboard__stone {
      animation: gozen-stone-set linear both;
      animation-timeline: --gz-step;
      animation-range: entry 35% entry 95%;
    }
    .session-storyboard--aside .session-storyboard__stone--b { animation-range: entry 55% cover 40%; }
    .session-storyboard--aside .session-storyboard__step:not(:last-child)::after {
      animation: gozen-ink-draw linear both;
      animation-timeline: --gz-step;
      animation-range: cover 35% cover 60%;
    }

    /* Material band: the grid drifts against the copy and a hane is played,
       one stone at a time, finished by the time the band reaches the middle. */
    .material-bleed { view-timeline: --gz-material block; }
    .material-bleed__field {
      animation: gozen-drift linear both;
      animation-timeline: --gz-material;
      animation-range: cover 0% cover 100%;
    }
    .material-bleed__stone {
      animation: gozen-stone-set linear both;
      animation-timeline: --gz-material;
    }
    .material-bleed__stone--b1 { animation-range: cover 18% cover 28%; }
    .material-bleed__stone--w1 { animation-range: cover 26% cover 36%; }
    .material-bleed__stone--b2 { animation-range: cover 34% cover 44%; }

    /* Product: the plinth moves slower than the phone in front of it */
    .product-stage { view-timeline: --gz-stage block; }
    .product-stage__plinth {
      animation: gozen-plinth-drift linear both;
      animation-timeline: --gz-stage;
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Hero parallax: wide screens only; phones keep a still first fold */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 56em) {
    .hero-visual__board {
      animation:
        gozen-board-settle 1.1s var(--ease-settle) both,
        gozen-parallax-board linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
    .hero-visual__phone {
      animation:
        gozen-phone-arrive var(--dur-ceremony) var(--ease-settle) 0.32s both,
        gozen-parallax-phone linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
  }
}


/* -------------------------------------------------------------------------
   Rendering: skip off-screen home sections until they approach the viewport
   ------------------------------------------------------------------------- */
.site-main--front #practice,
.site-main--front #notes,
.site-main--front #product,
.site-main--front #download {
  content-visibility: auto;
  contain-intrinsic-size: auto 32rem;
}


/* -------------------------------------------------------------------------
   Scheme and motion adjustments
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .site::before {
    opacity: 0.045;
    mix-blend-mode: soft-light;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Feedback stays, motion goes: tab switches crossfade, the blurb fades,
     and the stamp becomes a short change of ink instead of a press. */
  .product-panel.is-entering .kaya-frame__device,
  .product-panel.is-entering .kaya-frame__caption,
  .product-blurb.is-swapping {
    animation: gozen-fade-in 0.24s linear both !important;
  }
  .product-panel.is-entering .kaya-frame__screen img { animation: none !important; }
  .product-panel.is-leaving .kaya-frame__device,
  .product-panel.is-leaving .kaya-frame__caption {
    animation: gozen-fade-out 0.2s linear both !important;
  }
  .btn-hanko:active .hanko-mark { transform: rotate(-3deg); }
  .btn-hanko.is-stamped .hanko-mark { animation: none !important; }
  .btn-hanko.is-stamped {
    animation: gozen-cta-stamp-calm 0.4s linear 1 !important;
  }
}
@keyframes gozen-cta-stamp-calm {
  from { background-color: var(--hanko-deep); }
  to { background-color: var(--accent-fill); }
}