/* ZentoMirai — zentomirai.com
   ---------------------------------------------------------------------------
   One stylesheet for all three pages. The tokens live HERE and only here, the
   same reason BRAND lives in one constant in the Topiary repo: three HTML
   files each carrying their own copy of the palette is three places to forget
   when the accent changes.

   Tokens are ZentoMirai's own, carried over from the mark studies: aizome
   indigo, shu vermilion, and Topiary's cream canvas.

   --accent is a deepened shu, used wherever the vermilion carries text or sits
   behind it. The seal's own #C0503C measures 4.47:1 against cream, which is
   under AA for 17px text, and its dark-mode value measures 3.0:1 against a
   cream label. A logo ground is exempt from that rule and a button is not, so
   the seal keeps #C0503C in the SVG and text-bearing surfaces use --accent.
   One pigment, two jobs. Measured floor across both themes: 4.57:1.
   --------------------------------------------------------------------------- */

/* ── Fonts, self-hosted ────────────────────────────────────────────────────
   Served from /fonts rather than Google, so no visitor request leaves this
   site. Both families are SIL Open Font License 1.1; the licence text ships
   beside the files in /fonts, which is the OFL's condition for redistributing
   them.

   TWO THINGS HERE ARE DELIBERATE AND EASY TO UNDO BY ACCIDENT.

   Zen Kaku Gothic New is a JAPANESE family. Google splits one weight of it
   into 121 @font-face blocks, 118 of them kanji chunks. This site sets it
   only on Latin headings, so just the two Latin subsets are hosted. Pulling
   "the whole font" instead would ship megabytes to render the word
   ZentoMirai.

   Source Sans 3 is a VARIABLE font, and Google returns the identical file for
   300, 400 and 600 (verified by checksum) with only the descriptor differing.
   One file therefore covers the range, declared 200-900 so <b> at 700 has a
   real weight to use instead of a synthesised one. Do not split this back
   into one file per weight; that was three copies of the same 28 KB.

   unicode-range is what keeps this cheap: a visitor reading English never
   downloads the -ext files at all. Latin plus Latin Extended is 38 KB on the
   wire, and latin-ext earns its place by carrying the macron for Māori.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/zen-kaku-gothic-new-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/zen-kaku-gothic-new-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream:  #FAF9F5;
  --paper:  #FFFFFF;
  --rule:   #E2DFD6;
  --ink:    #1B2A4A;
  --accent: #B04A36;
  --cta-fg: #FAF9F5;
  --stone:  #6A7285;
  --text:   #171A21;
  --text-2: #545A67;

  --display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:  #12151B;
    --paper:  #1A1E26;
    --rule:   #2A303C;
    --ink:    #9DB4E0;
    --accent: #E0705F;
    --cta-fg: #12151B;
    --stone:  #8B93A5;
    --text:   #EDEFF4;
    --text-2: #A2A9B8;
  }
}

:root[data-theme="dark"] {
  --cream:  #12151B;
  --paper:  #1A1E26;
  --rule:   #2A303C;
  --ink:    #9DB4E0;
  --accent: #E0705F;
  --cta-fg: #12151B;
  --stone:  #8B93A5;
  --text:   #EDEFF4;
  --text-2: #A2A9B8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

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

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead { padding: 40px 0 0; }

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.lockup svg { display: block; }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ── Home: hero ───────────────────────────────────────────────────────── */

.hero { padding: 108px 0 96px; }

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.35rem, 6.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--text);
  max-width: 16ch;
  text-wrap: balance;
}

.lede {
  margin: 28px 0 0;
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 34ch;
}

/* ── Home: sections ───────────────────────────────────────────────────── */

.band { padding-bottom: 96px; }

/* These small caps labels are <h2>, not <p>, and the class does all the
   styling so they do not look like headings. Before the pre-launch audit they
   were paragraphs, which left the home page with exactly two headings in its
   outline: the hero and the word Topiary. A screen-reader user navigating by
   heading could not find Products, The studio or Contact at all.

   font-family is stated rather than inherited: every other heading on the site
   uses --display, and a future "h2 { font-family: var(--display) }" would
   otherwise reach in here and quietly change them. */
.eyebrow {
  margin: 0 0 28px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.prose {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--text-2);
}

.product {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 40px;
}

.product h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.product .prose { margin-top: 16px; }

.availability {
  margin: 24px 0 0;
  font-size: 0.9375rem;
  color: var(--stone);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 32px;
  padding: 12px 22px;
  background: var(--accent);
  color: var(--cta-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 980px;
  transition: opacity 140ms ease;
}

.cta:hover { opacity: 0.88; }

.cta svg { display: block; }

.pipeline {
  margin: 36px 0 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--text-2);
}

/* ── Legal documents ──────────────────────────────────────────────────── */

.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 28px 96px;
}

.doc h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--text);
}

/* Specificity note: `.doc p` below is (0,1,1) and would otherwise win over a
   bare `.updated` (0,1,0), rendering the date line at full body colour. */
.doc p.updated {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--stone);
}

.doc h2 {
  margin: 56px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--text);
}

.doc p {
  margin: 16px 0 0;
  color: var(--text-2);
}

.doc ul {
  margin: 16px 0 0;
  padding-left: 22px;
  color: var(--text-2);
}

.doc li { margin-top: 10px; }

.doc a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 140ms ease;
}

.doc a:hover { text-decoration-color: currentColor; }

/* The opening summary. Not a substitute for the sections below it, and it
   says so on the page rather than only here. */
.summary {
  margin: 40px 0 0;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
}

.summary p { margin-top: 12px; }
.summary p:first-child { margin-top: 0; }

/* ── Inline links in body copy ────────────────────────────────────────── */

/* UNDERLINED AT REST, AND THAT IS NOT NEGOTIABLE FOR STYLE.
   These were colour-only until a pre-launch audit measured them: the accent
   against body text is 1.28:1, where WCAG 1.4.1 wants 3:1 before colour alone
   may carry "this is a link". Anyone with a red-green deficiency saw flat
   prose. The underline sits at 45% so it reads as restraint rather than as a
   1990s hyperlink, and hover brings it to full strength. */
.mail {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 140ms ease;
}

.mail:hover { text-decoration-color: currentColor; }

/* ── Footer ───────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: 32px 0 56px;
  font-size: 0.875rem;
  color: var(--stone);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.footer-links { display: flex; gap: 24px; }

/* Footer links measured 1.00:1 against the copyright line sitting beside them
   and carried no underline, so nothing at all marked them as links except
   position. Underlined, and padded out to a 44px touch target: they were
   24px tall, which clears WCAG 2.2's 24px floor and is still a poor tap. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 140ms ease;
}

.footer-links a:hover { text-decoration-color: currentColor; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .hero { padding: 76px 0 72px; }
  .band { padding-bottom: 72px; }
  .product { padding: 28px 24px; }
  .doc { padding: 52px 28px 72px; }
  .doc h2 { margin-top: 44px; }
  .summary { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}