/* zengarden.so: the landing (its garden: assets/garden.js), /help, /pen, /terms, /privacy and the 404 page. No cookies,
   no third parties. */

@font-face {
  font-family: "Zen Garden Pen";
  src: url("/fonts/ZenGardenPen-1.002.woff2") format("woff2"),
       url("/fonts/ZenGardenPen-1.002.woff") format("woff");
  font-display: swap;
}

/* The palette comes from the app's daylight model (GardenDaylight, GardenPalette): the page is the sand × 0.82 in
   linear light, by day and at night; the inks are the app's two lettering inks. tools/build.mjs checks every
   text/background pair against WCAG AA, so keep the six hex values on their own lines. */
:root {
  color-scheme: light dark;
  --page: #c5c2bb; /* palette:light */
  --ink: #293330;
  --soft: #434b47;
  --rule: rgb(41 51 48 / 0.16);
  --tile-shadow: 0 1px 2px rgb(41 51 48 / 0.10), 0 10px 28px rgb(41 51 48 / 0.14);
  --cell: rgb(255 255 255 / 0.28);
  --cell-new: rgb(77 106 55 / 0.16);
  --moss: #4d6a37;
  --pen: "Zen Garden Pen", ui-rounded, system-ui, sans-serif;
  /* Every word on the site is in the app's pen (Jip, 25 Oct: "the whole website uses zen garden pen font everywhere").
     The pen draws small, so running text is set at 1.41rem (the app's body: 24 pt where the system's is 17). */
  --body: var(--pen);
  --text: 1.41rem;
  --measure: 36rem;
  --gutter: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #3d4549; /* palette:dark */
    --ink: #e6e8e3;
    --soft: #c9ccc6;
    --rule: rgb(230 232 227 / 0.18);
    --tile-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 10px 28px rgb(0 0 0 / 0.30);
    --cell: rgb(255 255 255 / 0.06);
    --cell-new: rgb(169 197 138 / 0.18);
    --moss: #a9c58a;
  }
}

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

html {
  font: 106.25%/1.3 var(--body); /* 17 px: the rem; running text is var(--text) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page);
  color: var(--ink);
}

/* iOS (and the app's in-app Safari view): follow Dynamic Type. Its default body size is 17 px. */
@supports (-webkit-touch-callout: none) {
  html { font: -apple-system-body; line-height: 1.3; }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  font-size: var(--text);
  font-synthesis: none;
  background: var(--page);
  color: var(--ink);
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

.page {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pen {
  font-family: var(--pen);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}

h1, h2 {
  font-family: var(--pen);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.05;
  margin: 0;
}

h2 { font-size: 2rem; margin: 2.25rem 0 0.5rem; }

p, ul { margin: 0 0 0.9rem; }

ul { padding-left: 1.25rem; }

li { margin: 0 0 0.6rem; }

li::marker { color: var(--soft); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

strong { font-weight: 400; }

/* The landing: one ground under the whole page (canvas.ground, assets/garden.js), as the app's menu lays its garden on
   its own sand (MenuAndGardens.md, "One stage"): the garden lies where its placeholder (.garden) stands, its frame's
   edges eased into the ground, and the lettering is the app's ink on the sand. The light follows the visitor's clock
   (not the page theme): the script sets --sand-rgb (the ground's mean colour), .ink-light at night,
   the frame's shape (--garden-aspect, --garden-ratio, --board-share, --board-share-y, --garden-feather[-y]) and, after
   layout, --garden-inset (its sand margin) and --board-width, in CSS pixels. */

html:has(> body.home) { background: rgb(var(--sand-rgb, 196 192 184)); }

body.home {
  transition: color 1.5s ease;
  --ink: #293330;
  --soft: #434b47;
  --rule: rgb(41 51 48 / 0.18);
  --page: rgb(var(--sand-rgb, 196 192 184));
  color-scheme: light;
  position: relative;
  background: var(--page);
  color: var(--ink);
}

/* At night (the sand's luminance under 0.34) the lettering takes the app's light ink (the script sets each light's
   --ink and --soft). */
body.home.ink-light { --rule: rgb(230 232 227 / 0.2); }

.home .ground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

.home.is-live .ground { opacity: 1; }

.home main,
.home .site-footer { position: relative; z-index: 1; }

/* The lettering lies above the garden's frame, whose sand margin may reach under it. */
.about,
.about > * { position: relative; z-index: 1; }

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%; /* the body is a flex column: without it the page shrinks to the column's lettering */
  overflow-x: clip; /* the garden's sand margin runs past the screen's sides */
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 0.5rem;
}

/* The garden's frame: the board and a margin of sand that runs into the ground (on phones past the screen's edges). */
.garden {
  position: relative;
  flex: none;
  width: calc(min(100vw, 34rem) * 0.9 / var(--board-share, 0.66));
  aspect-ratio: var(--garden-aspect, 3 / 4);
  margin-top: calc(var(--garden-inset, 0px) * -0.72);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.garden.is-finished { cursor: default; }

.garden .poster,
.garden .board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.garden .poster {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--garden-feather, 6%), #000 calc(100% - var(--garden-feather, 6%)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--garden-feather-y, 5%), #000 calc(100% - var(--garden-feather-y, 5%)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--garden-feather, 6%), #000 calc(100% - var(--garden-feather, 6%)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--garden-feather-y, 5%), #000 calc(100% - var(--garden-feather-y, 5%)), transparent);
  mask-composite: intersect;
  transition: opacity 0.45s ease-out;
}

.home.is-live .garden .poster { opacity: 0; }
.garden .poster:not([src]) { visibility: hidden; }
.garden .board:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--garden-inset, 0px) * -1 + 4px); }

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem var(--gutter) 0;
}

.about-head { display: flex; flex-direction: column; align-items: center; }

.logo { display: block; margin: 0 0 1.25rem; }

.logo img {
  display: block;
  width: min(8rem, 36vw);
  height: auto;
  border-radius: 22.5%;
  box-shadow: var(--tile-shadow);
}

.about h1 {
  font-size: clamp(2.5rem, 12.5vw, 4rem); /* "A Relaxing Puzzle" stays one line down to 320 px */
  line-height: 0.98;
}

.about h1 .line { display: block; }

/* The name's " - " stays in the text (screen readers, search, copy) but not on the page: the break shows it. */
.about h1 .dash {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lede {
  max-width: 26rem;
  margin: 1.1rem auto 0;
}

.store {
  margin: 1.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--soft);
}

.store .button { color: var(--ink); }

/* The download button in the app's ink ring (assets/ink.js: GardenInkRingGeometry under the held boil), the label in
   the pen: no CSS border once the ring is drawn. The rings' ink is the ink at 62 % by day, 45 % at night. */
.button.is-ringed {
  position: relative;
  border-color: transparent;
  border-radius: 0;
  transition: transform 0.14s ease-out;
}

.button.is-ringed:hover { background: none; color: var(--ink); }
.button.is-ringed:active { transform: scale(0.98); }

.ink-ring {
  position: absolute;
  left: -4px;
  top: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  opacity: 0.62;
  transition: opacity 0.14s ease-out;
}

.ink-light .ink-ring { opacity: 0.45; }
.button.is-ringed:hover .ink-ring { opacity: 1; }

.facts {
  max-width: 26rem;
  margin: 1.75rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 1.25rem;
}

.facts li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0 0 0.55rem;
}

/* The garden's finish diamond for a bullet (gardenFinishMarker's held, roughened contour), in the soft ink. */
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--soft);
  -webkit-mask: url("/assets/diamond.b59dbe3c.svg") center / contain no-repeat;
  mask: url("/assets/diamond.b59dbe3c.svg") center / contain no-repeat;
}

.more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 1.5rem 0 0;
  font-family: var(--pen);
  font-size: 1.6rem;
  line-height: 1.2;
}


.home .site-footer { margin-top: 2.5rem; }

/* Phones: the name above the garden, then the garden, then the download and the rest (the column's parts join the
   page's flow). */
@media (max-width: 59.99rem) {
  .landing { display: flex; flex-direction: column; }
  .about { display: contents; }
  .about-head { order: -1; position: relative; z-index: 1; padding: 1.1rem var(--gutter) 0; text-align: center; }
  .about-head .logo { display: none; }
  .about h1 { font-size: clamp(2.1rem, 10.5vw, 3.25rem); }
  .about > :not(.about-head) { order: 1; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); text-align: center; }
  .about > .store { order: 0; margin-top: 1.25rem; }
  .about > .facts { max-width: calc(26rem + 2 * var(--gutter)); text-align: left; }
}

@media (min-width: 60rem) {
  .landing {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
    max-width: 88rem;
    min-height: 100svh;
    margin: 0 auto;
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 1.5rem;
  }

  /* As tall as the screen allows the board (with room for its title), as wide as the column allows it. */
  .garden {
    width: min(calc(100% * 0.96 / var(--board-share, 0.66)),
      calc((100svh - 10rem) / var(--board-share-y, 0.74) * var(--garden-ratio, 0.75)));
    margin-top: calc(var(--garden-inset, 0px) * -1 + 0.5rem);
  }


  .about {
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }

  .about-head { align-items: flex-start; }

  .logo img { width: 5.5rem; }

  .about h1 { font-size: clamp(3rem, 4.4vw, 4.25rem); }

  .lede, .facts { margin-left: 0; margin-right: 0; }

  .more { justify-content: flex-start; }
}

/* /help */

.help ul { padding-left: 1.1rem; }

.doc .contact p { margin-bottom: 0.4rem; }

.doc .contact .links { margin-top: 0.9rem; }

/* /help, /terms and /privacy */

.top { padding-top: 1.1rem; }

.top a {
  display: inline-block;
  padding: 0.5rem 0;
  font-family: var(--pen);
  font-size: 1.6rem;
  line-height: 1.1;
  text-decoration: none;
}

.top a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.doc h1 {
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  margin: 1.25rem 0 0.4rem;
}

.updated { color: var(--soft); margin-bottom: 1.75rem; }

.doc h2 { font-size: 1.85rem; margin-top: 2rem; }

/* The 404 page */

.lost {
  text-align: center;
  padding: clamp(4rem, 18vh, 9rem) 0 2rem;
}

.lost h1 { font-size: clamp(2.75rem, 12vw, 4rem); margin-bottom: 1rem; }

.lost .pen { font-size: 1.6rem; }

/* /pen: the Zen Garden Pen specimen. Wider than the other pages; running text keeps the usual measure. */

.pen-page main.page,
.pen-page .top { max-width: calc(52rem + 2 * var(--gutter)); }

.pen-page main p,
.pen-page main section > ul:not(.langs):not(.glyph-grid) { max-width: var(--measure); }

.pen-page main section { margin-top: 1rem; }

.font-hero {
  text-align: center;
  padding: clamp(1.5rem, 6vh, 4rem) 0 0.5rem;
}

.font-hero h1 { font-size: clamp(3.4rem, 15vw, 6.5rem); }

.pen-page .font-hero p { margin-left: auto; margin-right: auto; }

.font-hero .lede { max-width: 30rem; }

.button {
  display: inline-block;
  font-family: var(--pen);
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.7rem 1.5rem 0.8rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
}

.button:hover { background: var(--ink); color: var(--page); }

.download { margin: 1.5rem 0 0.6rem; }

.meta, .note { color: var(--soft); font-size: 1.2rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 34rem;
  margin: 2rem auto 0;
}

.stats div { display: flex; flex-direction: column-reverse; align-items: center; }

.stats dd {
  margin: 0;
  font-family: var(--pen);
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1;
}

.stats dt { font-size: 1.1rem; color: var(--soft); }

.stats div:nth-child(2) dd,
.stats div:nth-child(4) dd { color: var(--moss); }

.poem {
  margin: 3rem 0 0.5rem;
  text-align: center;
}

.poem blockquote {
  margin: 0;
  font-size: clamp(2rem, 7.5vw, 3rem);
  line-height: 1.15;
}

.poem figcaption {
  margin-top: 0.7rem;
  font-size: 1.4rem;
  color: var(--soft);
}

.tester {
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  line-height: 1.2;
  min-height: 5rem;
  padding: 0.9rem 1rem;
  border: 1.5px dashed var(--soft);
  border-radius: 14px;
  outline-offset: 4px;
}

.pen-page main p.tester { max-width: none; }

.waterfall {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.waterfall li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  padding: 0.35rem 0;
  border-top: 1px solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.waterfall li span {
  flex: 0 0 1.6rem;
  font: 1.05rem/1 var(--body);
  color: var(--soft);
}

.waterfall .w72 { font-size: 4.5rem; }
.waterfall .w48 { font-size: 3rem; }
.waterfall .w32 { font-size: 2rem; }
.waterfall .w24 { font-size: 1.5rem; }
.waterfall .w18 { font-size: 1.125rem; }
.waterfall .w14 { font-size: 0.875rem; }

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 1.2rem;
  color: var(--soft);
}

.key span { display: inline-flex; align-items: center; gap: 0.45rem; }

.key span::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  background: var(--cell);
}

.key .k-new::before { background: var(--cell-new); box-shadow: inset 0 0 0 1.5px var(--moss); }

.key .k-redrawn::before { box-shadow: inset 0 0 0 1.5px var(--ink); }

.glyph-group h3 {
  margin: 1.6rem 0 0.6rem;
  font: 1.05rem/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}

.glyph-group h3 span { font-weight: 400; margin-left: 0.3rem; }

.glyph-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
  gap: 4px;
}

.glyph-grid li {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 8px;
  background: var(--cell);
  font-family: var(--pen);
  font-size: 2rem;
  line-height: 1;
}

.glyph-grid li.new { background: var(--cell-new); }

.glyph-grid li.new::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
}

.glyph-grid li.redrawn { box-shadow: inset 0 0 0 1.5px var(--ink); }

@media (max-width: 30rem) {
  .glyph-grid { grid-template-columns: repeat(auto-fill, minmax(2.55rem, 1fr)); gap: 3px; }
  .glyph-grid li { font-size: 1.65rem; border-radius: 6px; }
  .glyph-grid li.new::after { top: 4px; right: 4px; width: 5px; height: 5px; }
}

.langs {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  columns: 13rem;
  column-gap: 1.5rem;
  font-size: 1.25rem;
}

.langs li { margin: 0 0 0.3rem; color: var(--soft); break-inside: avoid; }

.langs li.new { color: var(--ink); }

.langs li.new::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.45rem 0.15rem 0;
  border-radius: 50%;
  background: var(--moss);
}

.strokes {
  list-style: none;
  padding: 0;
}

.strokes li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.strokes .pair { white-space: nowrap; }

.strokes .pen { font-size: 2.1rem; line-height: 1.1; }

.strokes .arrow { margin: 0 0.4rem; font-size: 1.25rem; color: var(--soft); vertical-align: 0.3em; }

/* The footer, on every page */

.site-footer {
  flex-shrink: 0;
  margin-top: 3.5rem;
  padding: 0 0 2.25rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--soft);
}

.site-footer .page::before {
  content: "";
  display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}

.site-footer p { margin: 0 0 0.35rem; }