/* gettenki.com. "Ink on night water": night ground for the storm, washi paper for
   the calm. See release/brand-website-brief.md. Fonts are self-hosted (SIL OFL). */

@font-face { font-family: "Tenki Kanji"; src: url(/assets/fonts/shippori-mincho-kanji.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+4E00-9FFF, U+30FB; }
@font-face { font-family: "Shippori Mincho"; src: url(/assets/fonts/shippori-mincho-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Shippori Mincho"; src: url(/assets/fonts/shippori-mincho-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(/assets/fonts/zen-kaku-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(/assets/fonts/zen-kaku-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/assets/fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #0e0f12;
  --night-2: #16181d;
  --night-3: #22252d;
  --fog: #f4ede3;
  --fog-2: #aaa49a;
  --fog-3: #6f6b64;
  --sand: #d9a05b;
  --paper: #ede6da;
  --paper-2: #e3d9c8;
  --paper-3: #f6f1e8;
  --sumi: #1b1916;
  --sumi-2: #544d44;
  --sumi-3: #8a8175;
  --sand-ink: #8a5a26;
  --line: rgba(27, 25, 22, .2);
  /* Washi: loose fibres (assets/washi.svg) over a fine grain. Both tile without seams. */
  --washi: url(/assets/washi.svg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .38 -.14'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  --f-display: "Tenki Kanji", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
  --f-text: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5.2vw, 64px);
  --measure: 34em;
  --margin-col: 128px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  font: 400 17px/1.62 var(--f-text);
  font-feature-settings: "palt" 0;
  color: var(--sumi);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sand); color: var(--night); }
b, strong { font-weight: 700; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--sand); color: var(--night); padding: 8px 14px; font: 500 14px var(--f-mono); }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- grounds */

.night, body.g-night { background-color: var(--night); color: var(--fog); }
body.g-night { color: var(--sumi); }
.night ::selection { background: var(--sand); color: var(--night); }
.paper {
  background-color: var(--paper);
  background-image: var(--washi);
  color: var(--sumi);
}

.sheet { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- type */

.display, h1, h2 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.12;
  margin: 0;
  font-kerning: normal;
}
h1 { font-size: clamp(42px, 11.2vw, 76px); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: clamp(32px, 7.6vw, 54px); }
h3 { font: 700 18px/1.35 var(--f-text); margin: 0 0 6px; letter-spacing: .005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .big, blockquote, dt { text-wrap: balance; }
/* A compound longer than the line (German, Dutch, Norwegian ...) breaks instead of running off
   narrow screens. Only then: no automatic hyphenation of words that fit. */
h1, h2, h3, .big, dt, .hours b, .modes th { overflow-wrap: break-word; }
@supports (overflow-wrap: anywhere) { h1, h2, h3, .big, dt, .hours b, .modes th { overflow-wrap: anywhere; } }
.lede { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.55; max-width: 31em; }
.night .lede, .night .muted { color: var(--fog-2); }
.paper .muted { color: var(--sumi-2); }
.label {
  font: 500 12px/1.4 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.night .label { color: var(--sand); }
.paper .label { color: var(--sand-ink); }
.mono { font-family: var(--f-mono); font-size: .88em; letter-spacing: .01em; }
.kanji { font-family: var(--f-display); font-weight: 500; }
.tate { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .32em; }
.accent { color: var(--sand); }
.paper .accent { color: var(--sand-ink); }

/* ---------------------------------------------------------------- header */

.masthead { position: relative; z-index: 5; }
.masthead .sheet { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: max(18px, env(safe-area-inset-top)) 18px; }
/* Lockup: the seal + the drawn wordmark (#tenki-wordmark, Shippori Mincho outlines, small master
   below 32 px). --wm-h is the wordmark's height (the i's dot to the baseline); the seal's box is
   1.6x that, the gap 0.42x, the seal centred on the wordmark. Min 12 px. */
.wordmark { --wm-h: 17px; display: inline-flex; align-items: center; gap: calc(var(--wm-h) * .42); text-decoration: none; line-height: 0; }
.wordmark .seal { width: calc(var(--wm-h) * 1.6); height: calc(var(--wm-h) * 1.6); flex: none; }
.wordmark .name { height: var(--wm-h); width: calc(var(--wm-h) * 2807 / 787.61); flex: none; }
.night .wordmark .seal { color: var(--sand); }
.night .wordmark .name { color: var(--fog); --wm-dot: var(--sand); }
.paper .wordmark .seal { color: var(--sumi); }
.paper .wordmark .name { color: var(--sumi); --wm-dot: var(--sand-ink); }
@media (max-width: 560px) { .wordmark { --wm-h: 16px; } }
.masthead nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); font: 500 13px/1 var(--f-mono); letter-spacing: .06em; }
.masthead nav a { text-decoration: none; opacity: .78; }
.masthead nav a:hover { opacity: 1; text-decoration: underline; }
.masthead nav .get { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.night .masthead nav .get { color: var(--sand); }
@media (max-width: 560px) { .masthead nav .optional { display: none; } }
@media (max-width: 374px) { .masthead nav { gap: 11px; font-size: 12px; letter-spacing: .02em; } }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; }
.hero .sheet { position: relative; display: grid; grid-template-columns: 1fr; padding-block: 8px 72px; }
.hero-art { position: relative; justify-self: end; width: min(62vw, 340px); margin: -4px -4px 10px 0; }
.hero-art .ink { width: 100%; height: auto; color: var(--sand); }
/* The margin column: the name's two meanings, in English (the kanji are explained further down). */
.hero-tate {
  position: absolute; left: var(--gutter); top: 10px; margin: 0;
  writing-mode: vertical-rl; font-size: 10.5px; letter-spacing: .24em; color: var(--fog-3) !important;
}
.hero .label { margin-bottom: 18px; }
.hero h1 { color: var(--fog); max-width: 9.5em; }
.hero .lede { margin: 22px 0 30px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 16px; border-radius: 12px;
  background: var(--fog); color: var(--night); text-decoration: none;
  border: 1px solid var(--fog);
  transition: transform .25s var(--ease);
}
.store:hover { transform: translateY(-1px); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; font: 600 19px/1.05 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; }
.store small { font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; opacity: .75; }
.paper .store { background: var(--sumi); color: var(--paper-3); border-color: var(--sumi); }
.textlink { font: 500 14px/1.3 var(--f-mono); letter-spacing: .03em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.night .textlink { color: var(--sand); }
.paper .textlink { color: var(--sand-ink); }
.textlink:hover { border-bottom-width: 2px; }
.facts { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; font: 400 12.5px/1.5 var(--f-mono); letter-spacing: .04em; }
.facts { gap: 6px 18px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.night .facts { color: var(--fog-2); }
.origin { margin: 14px 0 0; font: 400 12.5px/1.6 var(--f-mono); letter-spacing: .02em; color: var(--fog-3); max-width: 38em; }
.origin a { color: var(--fog-2); }
.paper .facts { color: var(--sumi-2); }

@media (min-width: 900px) {
  .hero .sheet { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; column-gap: 40px; padding-block: 24px 110px; min-height: min(80vh, 760px); }
  .hero-copy { grid-column: 1; grid-row: 1; padding-left: calc(var(--margin-col) - 40px); }
  /* The headline scales to its column. --hero-chars (set by the build) is the longest line's
     width in Latin-letter units (a kanji/hangul counts about 2.2); one unit is ≈.46em of the
     display face, so the English two-liner keeps its 76px at 1280px. A line that still does
     not fit wraps inside the column instead of running under the ink. */
  .hero-copy { container-type: inline-size; }
  .hero h1 { max-width: none; font-size: clamp(34px, calc(100cqi / (var(--hero-chars, 16) * .465)), 76px); }
  .hero-art { grid-column: 2; grid-row: 1; width: min(100%, 520px); justify-self: center; margin: 0; }
  .hero-tate { top: 64px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------- ink */

.ink .reveal-path { animation: ink-draw 200ms cubic-bezier(.42, 0, .38, 1) both; }
.ink .wet, .ink .dry, .ink .wash { fill: currentColor; }
.ink .wet { animation: ink-wet 800ms cubic-bezier(.65, 0, .35, 1) both; }
.ink .dry { animation: ink-dry 800ms cubic-bezier(.65, 0, .35, 1) both; }
.ink .ring .wet, .ink .ring .dry { animation-duration: 1500ms; }
.ink .wash { opacity: .3; animation: ink-dry 900ms var(--ease) both; }
.ink .flash { fill: #f4ede3; opacity: 0; animation: ink-flash 260ms ease-out both; }
.ink .roll { transform-box: view-box; transform-origin: 104px 146px; animation: roll 6.5s ease-in-out var(--paint-end) infinite alternate; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes ink-wet { to { opacity: 0; } }
@keyframes ink-dry { from { opacity: 0; } }
@keyframes ink-flash { 0% { opacity: 0; } 8% { opacity: .2; } 100% { opacity: 0; } }
@keyframes roll { from { transform: rotate(-1.2deg) translateY(.6px); } to { transform: rotate(1.4deg) translateY(-.6px); } }
/* Paintings below the fold wait until they are in view (site.js adds .paint). */
.js .ink.later * { animation-play-state: paused; }
.js .ink.later.paint * { animation-play-state: running; }
.ink.static *, .no-motion .ink * { animation: none !important; }
.ink.static .reveal-path, .no-motion .ink .reveal-path { stroke-dashoffset: 0; }
.ink.static .wet, .no-motion .ink .wet { display: none; }

/* ---------------------------------------------------------------- chapters */

.chapter { position: relative; padding-block: clamp(64px, 12vw, 132px); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.chapter-grid > *, .with-screen > *, .plan-wrap > *, .price-grid > *, .quiet-grid > *, .qr-grid > * { min-width: 0; }
.margin { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.margin .num { font: 500 22px/1 var(--f-display); font-variant-numeric: lining-nums; }
.night .margin .num { color: var(--sand); }
.paper .margin .num { color: var(--sand-ink); }
.margin::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .18; align-self: center; }
@media (min-width: 900px) {
  .chapter-grid { grid-template-columns: var(--margin-col) minmax(0, 1fr); }
  .margin { flex-direction: column; align-items: flex-start; gap: 14px; margin: 8px 0 0; }
  .margin .num { font-size: 30px; }
  .margin::after { display: none; }
  .margin .label { writing-mode: vertical-rl; letter-spacing: .22em; }
}
.body > h2 { max-width: 15em; }
.body > h2 + .lede, .body > h2 + p { margin-top: 22px; }

/* the storm */
.storm .big {
  font: 500 clamp(26px, 6.4vw, 44px)/1.3 var(--f-display);
  letter-spacing: -.01em; max-width: 19em; margin: 0;
}
.storm .big em { font-style: normal; color: var(--sand); }
.storm .rain { position: absolute; inset: 0; pointer-events: none; opacity: .5; overflow: hidden; }

/* the hour: what people give it to */
.hours { list-style: none; margin: 34px 0 30px; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(244, 237, 227, .14); }
.hours li { padding: 18px 0; border-bottom: 1px solid rgba(244, 237, 227, .14); display: grid; gap: 4px; align-content: start; }
.hours b { font: 500 clamp(24px, 5.6vw, 30px)/1.2 var(--f-display); color: var(--fog); }
.hours span { color: var(--fog-2); font-size: 16px; }
@media (min-width: 700px) { .hours { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1100px) { .hours { grid-template-columns: 1fr 1fr 1fr; } }

/* screens: real, unedited app screens in a plain frame */
.screen {
  margin: 0; width: min(64vw, 280px); flex: none;
  border-radius: 36px; padding: 7px; background: #25272d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.screen img { width: 100%; height: auto; border-radius: 29px; background: #000; aspect-ratio: 560 / 1216; }
.paper .screen { background: #1d1e22; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 40px 60px -34px rgba(40, 28, 10, .55); }
.screen-cap { font: 400 12px/1.45 var(--f-mono); letter-spacing: .02em; margin-top: 14px; max-width: 280px; }
.night .screen-cap { color: var(--fog-3); }
.paper .screen-cap { color: var(--sumi-3); }

.with-screen { display: grid; gap: 44px; margin-top: 40px; }
.with-screen .shot { justify-self: center; }
@media (min-width: 900px) {
  .with-screen { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
  .with-screen.flip { grid-template-columns: 300px minmax(0, 1fr); }
  .with-screen.flip .shot { order: -1; }
  .with-screen:not(.flip) .shot { margin-top: -120px; }
}

/* the modes, set as a table */
.modes { width: 100%; border-collapse: collapse; margin: 8px 0 30px; }
.modes th, .modes td { text-align: left; vertical-align: top; padding: 16px 0; border-top: 1px solid rgba(244, 237, 227, .14); }
.modes tr:last-child th, .modes tr:last-child td { border-bottom: 1px solid rgba(244, 237, 227, .14); }
.modes th { font: 500 21px/1.25 var(--f-display); padding-right: 20px; width: 38%; color: var(--fog); }
.modes td { color: var(--fog-2); font-size: 16px; }
.modes .rec { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-top: 8px; }
@media (max-width: 520px) {
  .modes th, .modes td { display: block; width: auto; padding: 0; border: 0; }
  .modes tr { display: block; padding: 16px 0; border-top: 1px solid rgba(244, 237, 227, .14); }
  .modes tr:last-child { border-bottom: 1px solid rgba(244, 237, 227, .14); }
  .modes th { margin-bottom: 4px; }
  .modes tr:last-child th, .modes tr:last-child td { border: 0; }
}
.ends { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.ends li { font: 500 13px/1 var(--f-mono); letter-spacing: .04em; padding: 10px 14px; border: 1px solid rgba(217, 160, 91, .5); color: var(--sand); border-radius: 999px; }
.step-h { font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin: 34px 0 12px; }

/* definition list (strict mode etc.) */
.defs { margin: 26px 0 0; display: grid; gap: 0; }
.defs div { padding: 18px 0; border-top: 1px solid rgba(244, 237, 227, .14); }
.defs div:last-child { border-bottom: 1px solid rgba(244, 237, 227, .14); }
.paper .defs div { border-color: rgba(27, 25, 22, .16); }
.defs dt { font: 500 20px/1.3 var(--f-display); margin-bottom: 4px; }
.defs dd { margin: 0; color: var(--fog-2); }
.paper .defs dd { color: var(--sumi-2); }
/* Two columns only when the list itself is wide enough (it sits next to a screen from 900px). */
.defs { container-type: inline-size; }
@container (min-width: 540px) {
  .defs div { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- the turning point */

/* Night turns to paper. Each word is a row: the two kanji stacked, each with its reading and
   meaning beside it, and the word's meaning next to the pair. Both rows share one grid, so the
   two words read as a matched pair. The brush writes the kanji (ink.kanji_svgs, site.js). */
.turn { --kj: clamp(54px, 15vw, 118px); position: relative; background: linear-gradient(to bottom, var(--night) 0%, var(--night) var(--dusk, 58%), #1d1a17 calc(var(--dusk, 58%) + 3%), #4a3622 calc(var(--dusk, 58%) + 6%), #b98a52 calc(var(--dusk, 58%) + 9%), #d9b98a calc(var(--dusk, 58%) + 11%), #e6d8c3 calc(var(--dusk, 58%) + 14%), rgba(237, 230, 218, 0) calc(var(--dusk, 58%) + 20%)), var(--washi); background-color: var(--paper); color: var(--fog); padding-block: clamp(80px, 13vw, 150px) clamp(100px, 16vw, 170px); overflow: hidden; }
.turn .sheet { position: relative; display: grid; gap: clamp(56px, 10vw, 96px); }
.turn-head .label { color: var(--sand); margin: 0 0 12px; }
.turn-intro { font: 500 clamp(20px, 4.6vw, 26px)/1.4 var(--f-display); color: var(--fog); max-width: 24em; margin: 0; }
.turn-intro i { font-style: italic; }
.turn .pair { display: grid; gap: 26px; align-items: center; }
.turn .chars { display: grid; gap: calc(var(--kj) * .08); justify-self: start; }
.turn .ch { display: grid; grid-template-columns: var(--kj) auto; column-gap: 20px; align-items: center; }
.turn .k .kj { display: block; width: var(--kj); height: var(--kj); overflow: visible; }
.turn .gloss { margin: 0; font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.turn .say { max-width: 26em; }
.turn .say p { margin: 0; font-size: 17px; line-height: 1.55; }
.turn .say .read { font: 500 12px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.turn .say .read .kanji { font-size: 15px; letter-spacing: .12em; margin-left: .5em; text-transform: none; }
.turn .weather .kj { color: var(--fog); }
.turn .weather .gloss { color: var(--fog-2); }
.turn .weather .read { color: var(--sand); }
.turn .weather .say p:not(.read) { color: var(--fog-2); }
.turn .point .kj { color: var(--sumi); }
.turn .point .gloss { color: var(--sumi-2); }
.turn .point .read { color: var(--sand-ink); }
.turn .point .say p:not(.read) { color: var(--sumi); }
.turn blockquote { margin: 0; font: 500 clamp(26px, 6.2vw, 46px)/1.25 var(--f-display); letter-spacing: -.01em; max-width: 21em; color: var(--fog); }
.turn blockquote .line2 { display: block; color: var(--sand); }
@media (min-width: 900px) {
  .turn .sheet { padding-left: calc(var(--gutter) + var(--margin-col)); }
  .turn .pair { grid-template-columns: 15em minmax(0, 26em); column-gap: 72px; }
}

/* The brush writes: each stroke uncovers the glyph (wet, then dry); at the end the plain glyph
   takes over, so the resting state is the text itself. Without JS it plays once on load; with
   JS it waits until the words are in view; with reduced motion there is no writing at all. */
.kj text { font: 500 1000px/1 var(--f-display); fill: currentColor; }
.kj .rp { fill: none; stroke: #fff; stroke-width: 120; stroke-linecap: round; stroke-linejoin: round; animation: ink-draw 300ms cubic-bezier(.42, 0, .38, 1) both; }
.kj .wet { animation: ink-wet 650ms cubic-bezier(.65, 0, .35, 1) both; }
.turn .weather .kj .wet { fill: #fff; }
.turn .point .kj .wet { fill: #000; }
.kj .strokes { opacity: 0; animation: kj-out 300ms linear both; }
.kj .whole { animation: ink-dry 300ms linear both; }
@keyframes kj-out { from { opacity: 1; } to { opacity: 0; } }
.js .write:not(.paint) .kj * { animation-play-state: paused; }
.no-motion .kj *, .kj.static * { animation: none !important; }

/* ---------------------------------------------------------------- your code or tag (floor plan) */

.plan-wrap { display: grid; gap: 28px; margin-top: 34px; }
@media (min-width: 900px) { .plan-wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.plan { width: 100%; height: auto; overflow: visible; }
.plan .wall { fill: none; stroke: var(--sumi); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.plan .thin { fill: none; stroke: var(--sumi); stroke-width: 1.3; opacity: .55; stroke-linecap: round; }
.plan .room-name { font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--sumi-3); }
.plan .path { fill: none; stroke: var(--sand-ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1 7.5; }
.plan .you { fill: var(--sumi); }
.plan .spot { cursor: pointer; }
.plan .spot circle.hit { fill: transparent; }
.plan .spot .tag { fill: var(--paper-3); stroke: var(--sumi); stroke-width: 1.6; transition: fill .3s; }
.plan .spot.on .tag { fill: var(--sand-ink); stroke: var(--sand-ink); }
.plan .spot .ring { fill: none; stroke: var(--sand-ink); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.plan .spot.on .ring { opacity: .7; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.places button {
  font: 500 13px/1 var(--f-mono); letter-spacing: .03em; color: var(--sumi);
  background: transparent; border: 1px solid rgba(27, 25, 22, .35); border-radius: 999px;
  padding: 11px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.places button:hover { border-color: var(--sumi); }
.places button[aria-pressed="true"] { background: var(--sumi); color: var(--paper-3); border-color: var(--sumi); }
.verdict { border-top: 1px solid rgba(27, 25, 22, .2); padding-top: 16px; min-height: 7.4em; }
.verdict .strength { font: 500 30px/1.1 var(--f-display); margin: 0 0 8px; }
.verdict .strength small { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-ink); display: block; margin-bottom: 8px; }
.verdict p { color: var(--sumi-2); margin: 0; }
.offmap { margin: 18px 0 0; font: 400 13px/1.55 var(--f-mono); letter-spacing: .02em; color: var(--sumi-2); max-width: 30em; }

.pascal { margin: 44px 0 0; max-width: 30em; }
.pascal p { font: 500 20px/1.45 var(--f-display); margin: 0 0 8px; }
.pascal cite { font: 400 12.5px/1.4 var(--f-mono); font-style: normal; color: var(--sumi-3); }

/* ---------------------------------------------------------------- the receipt */

.price-grid { display: grid; gap: 48px; margin-top: 34px; }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; } }
.receipt {
  position: relative; background: var(--paper-3); color: var(--sumi);
  font: 400 14px/1.55 var(--f-mono); padding: 30px 26px 34px; max-width: 380px; width: 100%;
  justify-self: center; transform: rotate(-1.2deg);
  --tooth: 9px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
}
.receipt-wrap { filter: drop-shadow(0 18px 22px rgba(60, 40, 10, .22)); justify-self: center; width: 100%; max-width: 380px; }
.receipt .head { text-align: center; margin-bottom: 14px; }
.receipt .head .seal { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--sumi); }
.receipt .head span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sumi-2); }
.receipt ul { list-style: none; margin: 0; padding: 12px 0; border-top: 1px dashed rgba(27, 25, 22, .45); border-bottom: 1px dashed rgba(27, 25, 22, .45); }
.receipt li { display: flex; gap: 8px; align-items: baseline; }
.receipt li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(27, 25, 22, .4); transform: translateY(-4px); }
.receipt li span:last-child { order: 2; }
.receipt li.none span:last-child { color: var(--sumi-2); }
.receipt .total { display: flex; justify-content: space-between; font-weight: 500; font-size: 16px; padding: 12px 0 4px; }
.receipt .thanks { text-align: right; padding-left: 70px; font-size: 12px; color: var(--sumi-2); margin: 14px 0 0; }
.receipt .stamp {
  position: absolute; left: 22px; bottom: 16px; width: 58px; height: 58px;
  border: 2px solid var(--sand-ink); border-radius: 50%; color: var(--sand-ink);
  display: grid; place-items: center; transform: rotate(-14deg); opacity: .75;
  font: 500 10px/1.15 var(--f-mono); letter-spacing: .1em; text-align: center; text-transform: uppercase;
}

/* ---------------------------------------------------------------- quiet */

.quiet-grid { display: grid; gap: 40px; margin-top: 40px; }
.quiet-grid .shots { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.quiet-grid .shots .screen { width: auto; flex: 1 1 0; min-width: 0; max-width: 250px; }
.quiet-grid .shots .screen:nth-child(2) { margin-top: 60px; }
@media (min-width: 900px) { .quiet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.quote { margin: 30px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--sand-ink); }
.quote p { font: 500 24px/1.35 var(--f-display); margin: 0 0 10px; }
.quote footer { font: 400 12.5px/1.5 var(--f-mono); color: var(--sumi-2); }

.also { display: grid; gap: 0; margin-top: 64px; border-top: 1px solid rgba(27, 25, 22, .2); }
.also > div { padding: 24px 0; border-bottom: 1px solid rgba(27, 25, 22, .2); }
.also .display { font-size: 23px; line-height: 1.3; margin: 0 0 8px; color: var(--sumi); }
.also p { color: var(--sumi-2); margin: 0; }
.also small { display: block; margin-top: 8px; font: 400 12px/1.4 var(--f-mono); color: var(--sumi-3); }
@media (min-width: 900px) { .also { grid-template-columns: 1fr 1fr; column-gap: 56px; } .also > div { padding: 28px 0; } }

/* ---------------------------------------------------------------- questions */

.qa { margin: 36px 0 0; display: grid; gap: 0; }
.qa div { padding: 22px 0; border-top: 1px solid rgba(27, 25, 22, .2); }
.qa dt { font: 500 21px/1.3 var(--f-display); margin-bottom: 8px; }
.qa dd { margin: 0; color: var(--sumi-2); max-width: 36em; }
@media (min-width: 900px) { .qa { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* ---------------------------------------------------------------- close */

.close { padding-block: clamp(70px, 12vw, 140px) clamp(80px, 12vw, 130px); }
.close .sheet { display: grid; justify-items: center; text-align: center; }
.close .ink { width: min(62vw, 250px); color: var(--sumi); margin-bottom: 28px; }
.close h2 { max-width: 12em; }
.close .cta { justify-content: center; margin-top: 30px; }
.close .facts { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.colophon { padding-block: 56px max(40px, env(safe-area-inset-bottom)); font-size: 14px; }
.colophon.paper { background-color: var(--paper-2); }
.colophon .sheet { display: grid; gap: 30px; }
.colophon .line { font: 500 19px/1.45 var(--f-display); max-width: 24em; margin: 0; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .03em; }
.colophon nav a { text-decoration: none; }
.colophon nav a:hover { text-decoration: underline; }
.colophon .small { font: 400 12px/1.6 var(--f-mono); opacity: .72; margin: 0; }
/* The name's two meanings, the translation first, the kanji beside it. */
.colophon .gloss-mark { margin: 0; display: grid; gap: 6px; white-space: nowrap; font: 400 12px/1.4 var(--f-mono); letter-spacing: .04em; opacity: .72; }
.colophon .gloss-mark .read { letter-spacing: .14em; text-transform: uppercase; }
.colophon .gloss-mark .kanji { font-size: 14px; letter-spacing: .1em; margin-left: .4em; }
/* The signature: the same lockup as the masthead, above the small print. The sheet's 30 px row gap
   keeps more than 1x the wordmark height clear above and below. */
.colophon .sign { justify-self: start; margin-top: 6px; }
.colophon .sign:hover { text-decoration: none; }
@media (min-width: 900px) {
  .colophon .sheet { grid-template-columns: var(--margin-col) 1fr auto; align-items: start; }
  .colophon .sheet > .gloss-mark { grid-row: 1 / span 3; }
  .colophon nav { justify-content: flex-end; }
  .colophon .sign { grid-column: 2; }
  .colophon .small { grid-column: 2 / span 2; }
}
.colophon .sheet > .gloss-mark { justify-self: start; }

/* ---------------------------------------------------------------- text pages (guides, support, legal) */

.page { padding-block: clamp(34px, 7vw, 80px) clamp(70px, 10vw, 120px); }
.page .chapter-grid { align-items: start; }
.page-head { margin-bottom: 36px; }
.page-head h1 { font-size: clamp(36px, 8.4vw, 60px); line-height: 1.08; max-width: 15em; margin-top: 14px; }
.page-head .lede { margin-top: 20px; color: var(--sumi-2); }
.prose { max-width: var(--measure); font-size: 17.5px; }
.prose h2 { font-size: clamp(26px, 5.6vw, 34px); margin: 2.1em 0 .55em; line-height: 1.2; }
.prose h3 { font-size: 18px; margin: 1.8em 0 .4em; }
.prose p, .prose li { color: #2b2723; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--sand-ink); }
.prose a { color: var(--sumi); text-decoration-color: var(--sand-ink); }
.prose code { font: 400 .86em var(--f-mono); background: rgba(27, 25, 22, .06); padding: .1em .35em; border-radius: 3px; }
.prose .table { overflow-x: auto; margin: 1.4em 0 1.8em; -webkit-overflow-scrolling: touch; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid rgba(27, 25, 22, .16); }
.prose thead th { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sand-ink); border-bottom: 1px solid rgba(27, 25, 22, .5); }
.prose .note, .prose .callout { border-left: 2px solid var(--sand-ink); padding: 4px 0 4px 18px; margin: 1.6em 0; }
.prose .callout { background: rgba(255, 255, 255, .35); padding: 18px 20px; border-left-width: 3px; }
.prose .callout > :last-child, .prose .note > :last-child { margin-bottom: 0; }
.byline { font: 400 12.5px/1.5 var(--f-mono); color: var(--sumi-3); margin-top: 16px; letter-spacing: .02em; }
.crumbs { font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--sumi-3); display: flex; gap: 8px; }
.crumbs a { text-decoration: none; color: var(--sumi-2); }
.crumbs a:hover { text-decoration: underline; }

.about-box { display: grid; grid-template-columns: 54px 1fr; gap: 18px; margin: 56px 0 0; padding: 24px 0; border-top: 1px solid rgba(27, 25, 22, .25); border-bottom: 1px solid rgba(27, 25, 22, .25); max-width: var(--measure); }
.about-box svg { width: 54px; height: 54px; color: var(--sumi); }
.about-box b { font: 500 19px/1.3 var(--f-display); display: block; margin-bottom: 6px; }
.about-box p { margin: 0; color: var(--sumi-2); font-size: 15.5px; }

.guide-list { list-style: none; margin: 20px 0 0; padding: 0; max-width: 44em; counter-reset: g; }
.guide-list li { border-top: 1px solid rgba(27, 25, 22, .2); counter-increment: g; }
.guide-list li:last-child { border-bottom: 1px solid rgba(27, 25, 22, .2); }
.guide-list a { display: grid; grid-template-columns: 2.4em 1fr; gap: 4px 12px; padding: 20px 0; text-decoration: none; }
.guide-list a::before { content: counter(g, decimal-leading-zero); font: 500 12px/2 var(--f-mono); color: var(--sand-ink); grid-row: span 2; }
.guide-list b { font: 500 21px/1.3 var(--f-display); }
.guide-list span { color: var(--sumi-2); font-size: 15.5px; }
.guide-list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.related { margin-top: 56px; }
.related h2 { font-size: 26px; }

.legal h2 { font-size: 22px; margin: 1.9em 0 .5em; }
.legal h1 { font-size: clamp(32px, 7vw, 46px); }
.legal { font-size: 16px; }

/* ---------------------------------------------------------------- /qr/ */

.qr-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .qr-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; } }
.qr-sheet {
  background: #fff; color: #111; width: min(100%, 360px); padding: 26px 26px 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 26px 44px -30px rgba(60, 40, 10, .5);
  transform: rotate(.8deg);
}
#qr canvas { width: 100%; height: auto; display: block; }
.qr-label { margin-top: 14px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #333; display: flex; align-items: center; gap: 10px; }
.qr-label .seal { width: 20px; height: 20px; color: #111; flex: none; }
.qr-code { font: 400 11.5px var(--f-mono); color: #888; margin-top: 4px; word-break: break-all; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; }
.qr-actions button {
  font: 500 14px/1 var(--f-mono); letter-spacing: .02em; cursor: pointer;
  padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(27, 25, 22, .4);
  background: transparent; color: var(--sumi);
}
.qr-actions button:hover { border-color: var(--sumi); }
.qr-actions .primary { background: var(--sumi); color: var(--paper-3); border-color: var(--sumi); }
.qr-fine { font: 400 12.5px/1.5 var(--f-mono); color: var(--sumi-2); max-width: 360px; }
.qr-steps { counter-reset: s; list-style: none; padding: 0 !important; margin: 0 0 1.6em !important; }
.qr-steps li { counter-increment: s; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid rgba(27, 25, 22, .18); margin: 0 !important; }
.qr-steps li:last-child { border-bottom: 1px solid rgba(27, 25, 22, .18); }
.qr-steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; font: 500 26px/1 var(--f-display); color: var(--sand-ink); }
.qr-right h2 { margin-top: 1.2em; }
@media print {
  @page { margin: 18mm; }
  .masthead, .colophon, .page-head, .qr-actions, .qr-fine, .qr-right, .margin, .skip { display: none !important; }
  .page { padding: 0; }
  .qr-sheet { width: 120mm; border: 1px dashed #bbb; box-shadow: none; transform: none; margin: 20mm auto 0; }
}

/* ---------------------------------------------------------------- 404 */

.lost { min-height: 72vh; display: grid; align-items: center; padding-block: 40px 90px; }
.lost .sheet { display: grid; gap: 26px; }
.lost .ink { width: 150px; color: var(--sand); opacity: .9; }
.lost h1 { font-size: clamp(38px, 9vw, 64px); }
.lost .guide-list li { border-color: rgba(244, 237, 227, .16); }
.lost .guide-list a::before { color: var(--sand); }
.lost .guide-list span { color: var(--fog-2); }

/* ---------------------------------------------------------------- language switcher */
/* A <details> disclosure in the masthead nav: flag + native name (flag + code on phones), the
   menu a sheet of paper (or night water on night pages). Inline SVG flags: Windows does not
   draw emoji flags. site.js adds Escape, arrow keys and click-outside. */

.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px; margin: -8px; border-radius: 3px; opacity: .78; -webkit-user-select: none; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { opacity: 1; }
.lang .flag { width: 18px; height: 12px; flex: none; border-radius: 1.5px; outline: 1px solid rgba(127, 120, 110, .4); outline-offset: -1px; filter: saturate(.82); }
.lang .chev { width: 9px; height: 6px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.lang[open] .chev { transform: rotate(180deg); }
.lang-short { display: none; }
@media (max-width: 560px) { .lang-name { display: none; } .lang-short { display: inline; } }
.lang-menu {
  position: absolute; right: -10px; top: calc(100% + 14px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  width: max-content; min-width: 214px; max-width: calc(100vw - 24px); max-height: min(72vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--paper-3); background-image: var(--washi); color: var(--sumi);
  border: 1px solid rgba(27, 25, 22, .18); border-radius: 4px; box-shadow: 0 22px 44px -22px rgba(14, 15, 18, .55);
}
.night .lang-menu { background-color: var(--night-2); background-image: none; color: var(--fog); border-color: rgba(244, 237, 227, .14); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .8); }
.masthead nav .lang-menu a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 3px; opacity: 1;
  font: 400 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0; text-decoration: none;
}
.masthead nav .lang-menu a:hover, .masthead nav .lang-menu a:focus-visible { background: rgba(27, 25, 22, .07); text-decoration: none; }
.night .lang-menu a:hover, .night .lang-menu a:focus-visible { background: rgba(244, 237, 227, .08); }
.lang-menu a[aria-current] { font-weight: 600; }
.lang-menu a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-left: auto; background: var(--sand-ink); }
.night .lang-menu a[aria-current]::after { background: var(--sand); }
.lang-menu .flag { width: 21px; height: 14px; }

/* "This page is also available in ...": shown once by site.js, in the reader's language. */
.lang-hint {
  position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(600px, calc(100% - 24px)); display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 10px 14px 18px; background: var(--night-2); color: var(--fog);
  border: 1px solid rgba(244, 237, 227, .16); border-radius: 4px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75);
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
  animation: hint-in .5s var(--ease) both;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.lang-hint .flag { width: 21px; height: 14px; flex: none; border-radius: 1.5px; outline: 1px solid rgba(244, 237, 227, .25); outline-offset: -1px; }
.lang-hint p { margin: 0; flex: 1 1 200px; }
.lang-hint a { color: var(--sand); font: 500 13px/1.3 var(--f-mono); letter-spacing: .05em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lang-hint button { flex: none; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 3px; background: none; color: inherit; opacity: .7; cursor: pointer; font: 400 22px/1 var(--f-text); }
.lang-hint button:hover { opacity: 1; background: rgba(244, 237, 227, .08); }

/* A translated privacy policy: the German original prevails. */
.prevails { border-left: 2px solid var(--sand-ink); padding: 4px 0 4px 18px; margin: 0 0 36px; max-width: var(--measure); font: 400 13px/1.6 var(--f-mono); color: var(--sumi-2); }
.prevails p { margin: 0; }

@media print { .lang, .lang-hint { display: none !important; } }

/* ---------------------------------------------------------------- per-language type */
/* The self-hosted faces are Latin subsets. Japanese and Korean keep them for Latin letters
   and fall through to the system's Mincho/Gothic; Vietnamese needs letters outside the
   subsets, so it uses whole system faces instead of mixing fonts inside a word. */
html[lang="ja"] {
  --f-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --f-text: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, "Noto Sans JP", sans-serif;
}
html[lang="ko"] {
  --f-display: "Shippori Mincho", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", Batang, serif;
  --f-text: "Zen Kaku Gothic New", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
html[lang="vi"] {
  --f-display: ui-serif, "Noto Serif", Georgia, "Times New Roman", serif;
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* IBM Plex Mono (self-hosted) has no Vietnamese, Japanese or Korean letters. Every mono-set
   element (nav, labels, facts, receipt, step headings, glosses ...) uses --f-mono, so these
   languages swap the whole stack: system monospace faces that carry Vietnamese, and the
   ja/ko Gothic stacks, so no word is drawn in two fonts. */
html:lang(vi) { --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", monospace; }
html:lang(ja) { --f-mono: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, "Noto Sans JP", sans-serif; }
html:lang(ko) { --f-mono: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
/* Wide tracking and uppercase are Latin label devices; kana, kanji and hangul set solid. */
html:is(:lang(ja), :lang(ko)) :is(.label, .masthead nav, .facts, .origin, .textlink, .crumbs, .byline, .modes .rec,
  .step-h, .ends li, .turn .gloss, .turn .say .read, .plan .room-name, .verdict .strength small, .receipt,
  .receipt .head span, .receipt .stamp, .colophon nav, .colophon .gloss-mark, .prose thead th, .qr-label,
  .lang-hint a, .prevails, .screen-cap, .offmap) { letter-spacing: 0; }
html:is(:lang(ja), :lang(ko)) :is(.hero-tate, .margin .label) { letter-spacing: .12em; }
html:lang(vi) :is(.label, .modes .rec, .step-h, .turn .gloss, .turn .say .read, .verdict .strength small,
  .receipt .head span, .prose thead th, .qr-label) { letter-spacing: .08em; }
html[lang="ja"] body, html[lang="ko"] body { line-break: strict; }
html[lang="ja"] body { word-break: auto-phrase; }
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] :is(h1, h2, .display), html[lang="ko"] :is(h1, h2, .display) { letter-spacing: 0; }

/* ---------------------------------------------------------------- reveal */

.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ink .reveal-path { stroke-dashoffset: 0; }
  .ink .wet { display: none; }
  .js .rise { opacity: 1; transform: none; }
  .kj .strokes { display: none; }
}

@media print {
  .masthead nav, .colophon nav, .cta { display: none; }
  .kj .strokes { display: none; }
  .kj .whole { animation: none !important; opacity: 1; }
  body, .night, .paper { background: #fff !important; color: #000 !important; }
}