/* /ja/: Japanese on top of d.css. Loaded only by the Japanese page, after d.css.
   Bread's letters have no Japanese, so display words are set in Dela Gothic One (.jw / .cj in d.css);
   Patrick Hand's voice lines fall through to Yomogi for kana and kanji; quiet UI text is the system Japanese face. */
:root{
  --f-disp:"Dela Gothic One";
  --f-hand:"Patrick Hand","Yomogi",ui-rounded,system-ui,sans-serif;
  --f-quiet:"Patrick Hand","Yomogi","Comic Sans MS",cursive;
  --f-ink:"Caveat","Yomogi",cursive;
  --f-ui:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
/* Yomogi has one weight: never smear it into a fake bold. */
html{font-synthesis:none}
body{line-break:strict;line-height:1.7}
/* Break at the phrase marks (<wbr>) and punctuation only, never mid-word; anywhere is the last resort. */
.sub,.end-line,.strips li,.nudge,.cue-text,.anno,.snip-note,.open-hint,.ed-hint,.soon,.foot{word-break:keep-all;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){.sub,.end-line,.strips li,.faq summary,.doc h2,.doc .lede{word-break:auto-phrase}}

/* ---------- display words ---------- */
.rebus{margin-bottom:.4em}
.rl{margin-bottom:.16em}
.lt{column-gap:0;row-gap:.16em}
.fly-copy h2 .jw,.snip-copy h2 .jw{--jw-size:.92em}

/* ---------- voice lines (Yomogi) ---------- */
.sub{font-size:clamp(19px,1.65vw,24px);line-height:1.45;letter-spacing:.02em}
.hero .sub{margin-bottom:26px}
.nav nav{font-size:17px}
.btn-mini{padding:7px 16px 8px;font-size:17px}
.btn-store{font-size:22px;padding:12px 26px 13px}
.btn-store small{font-size:11px;letter-spacing:.04em;margin-bottom:2px}
.soon{font-size:13px}
.nudge{font-size:28px}
.nudge span,.open-hint,.cue-text span{letter-spacing:.02em}
.open-hint{font-size:clamp(20px,1.9vw,26px)}
.cue-text{font-size:24px}
.snip-note{font-size:clamp(20px,4.8cqi,28px)}
.snip-cut{aspect-ratio:auto;height:auto;top:41%;width:38%}
.anno{font-size:2em}
.rebus .note-ink{font-size:.4em;line-height:1.05}
.note{letter-spacing:0;line-height:1}
.end-line{font-size:clamp(26px,3vw,42px);line-height:1.35;letter-spacing:.02em}
.foot{font-size:14px}
.notif span{font-size:.92em;line-height:1.35}

/* ---------- yours, or everyone's ---------- */
.ks-head .cutout{font-size:.86em}
.ks-lt{font-size:.4em;padding-bottom:.18em}
.ks-lt .jw{--jw-size:.92em}

/* ---------- plain words ---------- */
.strips li{font-size:clamp(24px,3.3vw,46px);line-height:1.25;padding:.2em .5em .24em;letter-spacing:.02em}
.strips li+li{margin-top:-.04em}

/* ---------- the slice, opened ---------- */
.ed-title{font-size:21px}
.ed-title span{font-size:16px}
.ed-done{font-size:18px;padding:10px 20px 10px}
.ed-hint{font-size:21px}
.ed-hint.is-bread{font-size:18px}
.ed-bar button{font-size:17px;gap:6px}

@media (max-width:860px){
  .nav nav{font-size:15px;gap:12px}
  .btn-mini{padding:6px 12px 7px;font-size:15px}
  .hero .sub{font-size:18px}
  .nudge{font-size:23px}
  .nudge span{width:3.2em;white-space:normal;text-align:center}
  .open-hint{font-size:19px}
  .cue-text{font-size:20px}
  .btn-store{font-size:20px;padding:11px 22px 12px}
  .fly-copy h2,.snip-copy h2{font-size:30px}
  .fly-copy .sub{font-size:17px}
  .strips li{font-size:clamp(18px,5.2vw,26px)}
  .ed-hint{font-size:18px}
  .ed-hint.is-bread{font-size:15px;white-space:normal;width:calc(100% - 32px);text-align:center}
  .ed-bar button{font-size:15px}
}
@media (max-width:420px){
  .ks-head{font-size:clamp(44px,12vw,50px)}
  .nav nav{font-size:13px;gap:8px}
  .nav-lang{white-space:nowrap}
  .btn-mini{font-size:13px;padding:6px 10px 7px;white-space:nowrap}
}

/* ---------- questions (faq.css) ---------- */
.faq h2{letter-spacing:.02em}
.faq summary{line-height:1.4;letter-spacing:.02em}
.faq .faq-a,.faq .faq-more{line-height:1.8}

/* ---------- long-form pages (page.css) ---------- */
.doc h1{letter-spacing:.02em}
.doc .lede{line-height:1.5}
.doc h2{line-height:1.3;letter-spacing:.02em}
.doc p,.doc li{line-height:1.85}
.doc .updated{font-size:16px}
.doc .lede+.quiet{margin-top:14px;font-size:15px}
.doc .toc a{font-size:16px}