/* Zen homepage. Washi paper and sumi ink, an ink-stone dark mode, and one
   seal red that means only "needs you". main.js reads these tokens for the
   garden canvas, so keep the names in step. */
:root {
  --paper: #f2ede3;
  --ink: #1c1b19;
  --ink2: #4a463f;
  --faint: #6b655a;
  --rake: rgba(28, 27, 25, 0.26);
  --hair: rgba(28, 27, 25, 0.14);
  --seal: #a63d2a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --serif: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --gutter: clamp(16px, 5vw, 72px);
  --slow: cubic-bezier(0.33, 0, 0.15, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141412;
    --ink: #e6e1d6;
    --ink2: #b5afa2;
    --faint: #8f897d;
    --rake: rgba(230, 225, 214, 0.2);
    --hair: rgba(230, 225, 214, 0.12);
    --seal: #d9694f;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .84 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink2);
  font: 300 17px/1.75 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 { color: var(--ink); font-weight: 300; margin: 0; }
p { margin: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.8s var(--slow); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; border-radius: 2px; }
code { font: 400 0.8em/1 var(--mono); color: var(--ink); }
svg { display: block; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 10; padding: 8px 14px; background: var(--paper); border: 1px solid var(--ink); }
.skip:focus { top: 12px; }

.top {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 26px var(--gutter);
}
.word { font-size: 22px; font-style: italic; text-decoration: none; letter-spacing: 0.01em; }
.top nav { display: flex; gap: 28px; font-size: 15px; }
.top nav a { text-decoration-color: transparent; }
.top nav a:hover { text-decoration-color: currentColor; }

/* Hero: an ensō, one line, and room. */
.hero {
  position: relative;
  min-height: max(620px, 100svh);
  padding: 0 var(--gutter);
}
.enso {
  position: absolute;
  width: min(68vh, 44vw, 600px);
  height: auto;
  left: 50%;
  top: 46%;
  translate: -38% -50%;
  color: var(--ink);
  opacity: 0.94;
}
.enso-mask { fill: none; stroke: #fff; stroke-width: 46; stroke-linecap: round; }
.hero-copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(56px, 12vh, 120px);
  max-width: 30em;
}
.hero h1 {
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.hero-copy p { margin-top: 22px; font-size: 16px; color: var(--faint); max-width: 26em; }

@media (prefers-reduced-motion: no-preference) {
  /* The centerline is 878 user units long (scripts/site-svg/enso.py). */
  .enso-mask { stroke-dasharray: 900 1800; animation: draw 2.4s cubic-bezier(0.55, 0.05, 0.25, 1) 0.4s both; }
  .hero-copy { animation: rise 2s var(--slow) 0.9s both; }
  .top { animation: rise 2s var(--slow) 0.9s both; }
}
@keyframes draw { from { stroke-dashoffset: 930; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* The garden. Without script it collapses to its caption. */
.garden { margin: 0; position: relative; }
.garden canvas {
  display: none; width: 100%; height: clamp(380px, 66vh, 680px); touch-action: pan-y;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.js .garden canvas { display: block; }
.garden figcaption {
  padding: 18px var(--gutter) 0;
  margin-left: 50%;
  font-size: 15px; font-style: italic; color: var(--faint);
  max-width: 24em;
}

/* Four movements, set off-balance on purpose. */
.movements {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: clamp(96px, 18vh, 200px);
  padding: clamp(140px, 24vh, 260px) var(--gutter) 0;
  max-width: 1360px;
  margin: 0 auto;
}
.mv { max-width: 25em; }
.mv .n { font-size: 15px; font-style: italic; color: var(--faint); margin-bottom: 6px; }
.mv h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 22px; }
.mv-begin { grid-column: 2 / span 5; }
.mv-letgo { grid-column: 7 / span 5; }
.mv-return { grid-column: 3 / span 4; align-self: center; }
.glimpse { grid-column: 8 / span 3; margin: 0; }
.mv-yours { grid-column: 5 / span 5; }
.names { margin-top: 18px; font: 400 12.5px/1.6 var(--mono); color: var(--faint); letter-spacing: 0.02em; }
.aside { margin-top: 22px; font-size: 15px; color: var(--faint); }

.glimpse svg { width: 100%; max-width: 230px; height: auto; font-family: var(--serif); font-size: 13px; }
.glimpse .frame { fill: none; stroke: var(--rake); stroke-width: 1; }
.glimpse .faint-fill { fill: var(--hair); }
.glimpse text { fill: var(--ink2); font-weight: 300; }
.glimpse .t-small { font-size: 12px; font-style: italic; fill: var(--faint); }
.glimpse .t-faint { fill: var(--faint); font-size: 11.5px; font-style: italic; }
.glimpse .rows circle { fill: var(--rake); }
.glimpse .needs rect, .glimpse .needs text:last-child { fill: var(--seal); }
.glimpse .needs text:last-child { font-style: italic; font-size: 11.5px; }
.glimpse .needs text:first-of-type { fill: var(--ink); font-weight: 400; }

/* Instruments: a quiet list, not a showcase. */
.also {
  max-width: 1360px;
  margin: clamp(140px, 22vh, 240px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.also h2 { grid-column: 2 / span 3; font-size: 17px; font-style: italic; color: var(--faint); padding-top: 3px; }
.also dl { grid-column: 5 / span 7; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.also dl div { padding: 12px 0 13px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; column-gap: 12px; }
.also dt { color: var(--ink); font-weight: 400; font-size: 15px; }
.also dd { margin: 0; font-size: 15px; color: var(--faint); }

/* One line to begin. */
.install {
  max-width: 1360px;
  margin: clamp(160px, 26vh, 280px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.install > * { grid-column: 2 / span 8; }
.install h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; margin-bottom: 30px; }
.install > p:not(.aside) { margin-top: 22px; max-width: 34em; }
.install .aside { max-width: 38em; }
.cmd {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.cmd code { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.copy {
  font: italic 300 15px/1 var(--serif); color: var(--faint);
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  transition: color 0.8s var(--slow);
}
.copy:hover { color: var(--ink); }

.foot {
  max-width: 1360px;
  margin: clamp(160px, 26vh, 280px) auto 0;
  padding: 28px var(--gutter) 44px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  font-size: 14px; color: var(--faint);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { color: var(--faint); }

/* Slow arrivals as each part comes into view. Content stays visible without script. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 10px; transition: opacity 1.8s var(--slow), translate 1.8s var(--slow); }
  .js .rv.in { opacity: 1; translate: 0 0; }
}

@media (max-width: 900px) {
  .movements, .also, .install { display: block; }
  .mv, .glimpse { max-width: 30em; }
  .movements > * + * { margin-top: 112px; }
  .mv-letgo, .mv-yours { margin-left: 14%; }
  .glimpse { margin-left: 22%; width: 58%; margin-top: 56px; }
  .also h2 { margin-bottom: 14px; }
  .also dl { grid-template-columns: 1fr; }
  .install h2 { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding-top: 20px; }
  .enso { width: 86vw; left: 50%; top: 38%; translate: -44% -50%; }
  .hero { min-height: max(560px, 100svh); }
  .hero-copy { bottom: 48px; right: var(--gutter); }
  .garden figcaption { margin-left: 18%; }
  .mv-letgo, .mv-yours { margin-left: 10%; }
}