/* ===================================================================
   Japango — 案HK "Zasshi, Warmed" redesign
   (案H bold-magazine system + 案K people/warmth grafts — owner decision
   2026-07-23. Replaces the 案F "Norikae" skin; all mechanics unchanged.)
   Ported from deploy/redesign-mocks/proposal-hk/, mapped onto the SAME
   selector contract as the 案D/案F builds: PHP templates, the [char]
   chat plugin output, and the §13b legacy-content compat layer.

   Design language (案H law):
     - White + ink #141414 + brand red #C0361D (bright #EE614C for large
       display/graphics only) + brand yellow #F3C66C. 3px ink rules,
       sharp 2px radii, offset-shadow hovers.
     - Type: Archivo (expanded black display) / Instrument Sans (text) /
       Zen Kaku Gothic New (JP). ◎ double-circle = the brand system mark
       (logo → 正解 → 検印).
   案K grafts (recolored to H tokens):
     - The illustrated cast (assets/people/*.png) in the trust band,
       phrase card, author box; ringed plugin avatars in the chat.
     - The ◎ stamp rally (single.php emits .stamp-rally after the body).
     - Yellow tape marks on the phrase card + author box.

   AA-checked pairs (computed): ink/white 18.4 · muted/white 7.0 ·
   white/ink 18.4 · white/red 5.55 · ink/yellow 11.5 · ink/tint 16.7 ·
   red/white 5.55 (text-red). #A87413 is 4.06:1 — 3:1 NON-TEXT ONLY
   (stamp/ring borders), never body text.

   Sections (numbering parallel to the 案F file for diffability):
     0 tokens · 1 base/a11y · 2 header+nav · 3 hero+search · 4 bones ·
     5 category tiles+ticket · 6 mokuji rows · 7 phrase sticker card ·
     8 trust band (+cast) · 9 footer · 10 breadcrumb+article ·
     11 ◎ badges/stamps (+.code-badge alias) · 12 Q&A (12a mock, 12b chat) ·
     12c stamp rally · 13 body+ruby · 13b legacy compat · 14 author ·
     15 related · 16 CTA · 17 guide · 18 archive · 19 about ·
     20 pagination+ads · 21 reduced motion
=================================================================== */

/* ---------- 0. design tokens ---------- */
:root{
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --tint:#F4F4F2;
  --ink:#141414;
  --ink-soft:#333333;
  --muted:#595959;           /* AA 7.0:1 on white                     */
  --hairline:#E3E3E0;
  --red:#C0361D;             /* text/button/band red (AA w/ white)    */
  --red-bright:#EE614C;      /* logo red — large display + graphics   */
  --red-tint:#F9E7E2;
  --yellow:#F3C66C;          /* blocks/stickers/tape — ink text on it */
  --yellow-deep:#A87413;     /* dark yellow derivative (rings, AA 4.6)*/
  --yellow-tint:#FBF0D3;
  --sans:"Instrument Sans","Noto Sans JP",system-ui,-apple-system,Arial,sans-serif;
  --display:"Archivo",var(--sans);
  --jp:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --rule:3px solid var(--ink);
  --pop:4px 4px 0 var(--ink);
}

/* ---------- 1. base / reset / a11y ---------- */
.jd *,.jd *::before,.jd *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.jd{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.jd img,.jd svg{max-width:100%;height:auto}
.jd :lang(ja){font-family:var(--jp)}
/* zero-specificity base link colors (:where() so components always win) */
.jd :where(a){color:var(--red);text-underline-offset:2px}
.jd :where(a:hover){color:var(--ink)}
/* 賢威8 wp_head echo guard (hook removal in functions.php is layer 1) */
h2:not(.title_no-style){background:transparent}
h3:not(.title_no-style),h4:not(.title_no-style),h5:not(.title_no-style){color:inherit}
q{background:transparent}
.jd a:focus-visible,.jd button:focus-visible,.jd input:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-radius:2px;
}
/* dark/red surfaces need a light ring */
.jd .site-footer a:focus-visible,
.jd .trust-strip a:focus-visible,
.jd .cat-hero--travel a:focus-visible,.jd .cat-hero--business a:focus-visible,
.jd .cat-hero--q-and-a a:focus-visible{outline-color:#fff}
.jd .sr-only,.jd .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jd .wrap{max-width:1140px;margin:0 auto;padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem)}
.jd .skip-link{
  position:absolute;left:1rem;top:-3.5rem;z-index:1200;
  background:var(--ink);color:#fff;padding:.65rem 1rem;border-radius:0 0 4px 4px;
  text-decoration:none;font-size:.85rem;font-weight:600;transition:top .15s;
}
.jd .skip-link:focus{top:0}
/* the ◎ system mark, drawn with borders (outer 3px + inner 1.5px) */
.maru{
  display:inline-block;flex:none;width:18px;height:18px;border-radius:50%;
  border:3px solid var(--red-bright);position:relative;vertical-align:-.15em;
}
.maru::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1.5px solid var(--red-bright)}
.maru--ink{border-color:var(--ink)}.maru--ink::after{border-color:var(--ink)}
.maru--s{width:13px;height:13px;border-width:2.5px}.maru--s::after{inset:1.5px;border-width:1px}

/* ---------- 2. header + nav ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:var(--rule);
}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
.header-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:.8rem;padding-bottom:.8rem}
.brand{display:inline-flex;align-items:center;text-decoration:none;min-height:44px}
.brand-logo{display:block;width:170px;height:auto}
@media (max-width:560px){.brand-logo{width:144px}}
.nav-toggle{
  display:none;margin-left:auto;align-items:center;justify-content:center;
  width:44px;height:44px;border:1.5px solid var(--ink);border-radius:2px;
  background:var(--card);color:var(--ink);cursor:pointer;
}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.1rem;list-style:none;margin:0;padding:0}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  text-decoration:none;color:var(--ink);font-size:.94rem;font-weight:600;
  box-shadow:inset 0 0 0 0 transparent;
}
.site-nav a:hover{color:var(--ink);box-shadow:inset 0 -3px 0 0 var(--yellow)}
.site-nav .current-menu-item>a,.site-nav a[aria-current]{box-shadow:inset 0 -3px 0 0 var(--ink)}
.site-nav a.nav-em{background:var(--red);color:#fff;font-weight:700;border-radius:999px;padding:0 1.1rem;min-height:40px;align-self:center}
.site-nav a.nav-em:hover{background:var(--ink);color:#fff;box-shadow:none}
@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;width:100%;margin-left:0;padding-bottom:.5rem}
  .site-header.nav-open .site-nav{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li{border-top:1px solid var(--hairline)}
  .site-nav a{width:100%;min-height:48px;padding:0 .25rem}
  .site-nav a.nav-em{width:max-content;padding:0 1rem;margin:.4rem 0}
}

/* ---------- 3. hero — the magazine cover ---------- */
.hero{background:var(--paper);border-bottom:var(--rule)}
.hero-inner{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.25rem,5vw,3.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{
  display:inline-block;margin:0 0 1.2rem;padding:.3rem .85rem;
  border:1.5px solid var(--ink);
  font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.hero-title{
  margin:0;max-width:24ch;
  font-family:var(--display);font-weight:880;font-stretch:118%;
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.08;
}
/* FOR FREE — the yellow sticker with the ◎ ring */
.hero-title em{
  font-style:normal;position:relative;display:inline-block;
  background:var(--yellow);padding:0 .18em;transform:rotate(-2deg);
}
.hero-title em::before,
.hero-title em::after{
  content:"";position:absolute;inset:-.14em -.3em;border-radius:50%;
  border:3px solid var(--red-bright);pointer-events:none;
}
.hero-title em::after{inset:-.02em -.16em;border-width:1.5px}
.hero-sub{max-width:56ch;margin:1.4rem 0 0;color:var(--muted);font-size:1.02rem;line-height:1.7}
/* VOL. ticker line */
.hero-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;
  margin:1.3rem 0 1.6rem;padding:.55rem 0;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  font-family:var(--display);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.hero-facts .dotsep{color:var(--red)}
.search{
  display:flex;align-items:center;gap:.5rem;max-width:640px;
  background:var(--card);border:3px solid var(--ink);border-radius:999px;
  padding:.3rem .35rem .3rem 1.1rem;
}
.search:focus-within{box-shadow:var(--pop)}
.search svg{flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;color:var(--ink);padding:.6rem 0}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none}
.search-btn{
  flex:none;border:0;cursor:pointer;border-radius:999px;min-height:44px;padding:0 1.35rem;
  background:var(--red);color:#fff;font:inherit;font-size:.95rem;font-weight:700;
}
.search-btn:hover{background:var(--ink)}
.search-hint{margin:.85rem 0 0;font-size:.82rem;color:var(--muted)}
.search-hint b{font-weight:600;color:var(--ink)}
/* vertical JA spine (front page, desktop) */
.hero-spine{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding-left:clamp(1rem,2.5vw,2rem);border-left:var(--rule);
}
.hero-spine .spine-ja{
  writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;
  font-size:1.02rem;letter-spacing:.14em;color:var(--ink);
}
@media (max-width:900px){
  .hero-spine{flex-direction:row;border-left:0;padding-left:0;border-top:1.5px solid var(--ink);padding-top:.9rem}
  .hero-spine .spine-ja{writing-mode:horizontal-tb}
}

/* ---------- 4. shared section bones ---------- */
.section{padding-top:clamp(2.5rem,5.5vw,4rem);padding-bottom:clamp(2.5rem,5.5vw,4rem)}
.section+.section{border-top:var(--rule)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 .7rem;
  font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.kicker::before{
  content:"";flex:none;width:14px;height:14px;border-radius:50%;
  border:3px solid var(--red-bright);box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 3px var(--red-bright);
}
.section-title{
  margin:0;font-family:var(--display);font-weight:800;font-stretch:106%;
  letter-spacing:-.005em;font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.12;
}
.section-link{
  flex:none;font-size:.9rem;font-weight:700;color:var(--red);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.section-link:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow);text-underline-offset:4px}

/* ---------- 5. category tiles + archive ticket ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:940px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cat-grid{grid-template-columns:1fr}}
.cat-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.6rem;
  padding:2.1rem 1.2rem 1.2rem;border-radius:2px;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.cat-card:hover{transform:translate(-3px,-3px);box-shadow:var(--pop)}
.cat-card.travel{background:var(--red);color:#fff}
.cat-card.daily{background:var(--yellow);color:var(--ink)}
.cat-card.business{background:var(--ink);color:#fff}
.cat-card.basic{background:var(--tint);color:var(--ink)}
/* the watermark initial (template's .cat-icon span, repurposed) */
.cat-icon{
  position:absolute;top:-1.6rem;left:.1rem;width:auto;height:auto;border:0;background:none;
  font-family:var(--display);font-weight:900;font-stretch:120%;
  font-size:5.2rem;line-height:1;opacity:.18;color:currentColor;pointer-events:none;
}
.cat-card h3{margin:0;font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:1.22rem;letter-spacing:.02em}
.cat-card p{margin:0;font-size:.88rem;line-height:1.55;flex:1;opacity:.92}
.cat-card .cat-go{font-size:.85rem;font-weight:700;color:inherit}
.cat-go::after{content:"\2192";margin-left:.35rem}
/* archive strip = the ticket */
.archive-strip{
  position:relative;margin-top:1.1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border:var(--rule);border-radius:2px;background:var(--card);
  padding:1.05rem 2rem;text-decoration:none;color:var(--ink);
  -webkit-mask:radial-gradient(circle 11px at 0 50%,transparent 10px,#fff 11px) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% 50%,transparent 10px,#fff 11px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 50%,transparent 10px,#fff 11px) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% 50%,transparent 10px,#fff 11px) right/51% 100% no-repeat;
}
.archive-strip:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.archive-strip .cat-icon{display:none}
.archive-strip .as-text{flex:1;min-width:220px;border-left:2px dashed var(--hairline);padding-left:1.25rem}
.archive-strip h3{margin:0 0 .1rem;font-family:var(--display);font-weight:800;font-size:1.1rem}
.archive-strip p{margin:0;font-size:.88rem;color:var(--muted)}
.archive-strip .cat-go{flex:none;color:var(--red);font-weight:700}

/* ---------- 6. latest questions — the MOKUJI ---------- */
.latest-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,4vw,3.25rem);align-items:start}
@media (max-width:960px){.latest-grid{grid-template-columns:1fr}}
.q-list{list-style:none;margin:0;padding:0}
.q-list li{border-top:1.5px solid var(--ink)}
.q-list li:last-child{border-bottom:1.5px solid var(--ink)}
.q-list a{
  display:flex;gap:1rem;align-items:baseline;padding:.95rem .35rem;
  text-decoration:none;color:inherit;
}
.q-list a:hover{color:inherit}
.q-num{
  flex:none;min-width:2.4ch;font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:1.05rem;color:var(--red);font-variant-numeric:tabular-nums;
}
.q-main{flex:1;min-width:0}
.q-title{display:block;font-weight:600;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.42}
.q-list a:hover .q-title{box-shadow:inset 0 -10px 0 -3px var(--yellow)}
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin-top:.3rem;font-size:.76rem;color:var(--muted)}
.q-tag{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;color:var(--ink)}
.q-tag::before{
  content:"";width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--red-bright);box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 2.2px var(--red-bright);
}
.q-read{font-weight:600;font-size:.76rem;color:var(--muted)}
.q-arrow{flex:none;align-self:center;color:var(--red);opacity:0;transform:translateX(-4px);transition:.15s}
.q-list a:hover .q-arrow{opacity:1;transform:none}

/* ---------- 7. phrase of the day — the sticker panel (+K tape) ---------- */
.phrase-card{
  position:sticky;top:120px;
  background:var(--card);border:var(--rule);border-radius:2px;padding:0 0 1.2rem;
}
body.admin-bar .phrase-card{top:150px}
/* keep position:relative below 960px — the tape ::before needs the card as
   its containing block (static would detach it to the document top) */
@media (max-width:960px){.phrase-card{position:relative;top:auto;max-width:520px}}
/* K graft: one yellow tape strip on the top edge */
.phrase-card::before{
  content:"";position:absolute;top:-9px;left:50%;width:64px;height:15px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(243,198,108,.72);
}
.pc-label{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;padding:.6rem 1.1rem;
  background:var(--red);color:#fff;
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.pc-label::after{
  content:"";width:13px;height:13px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:inset 0 0 0 1px var(--red),inset 0 0 0 2.2px #fff;
}
.pc-panel{margin:0;padding:0 1.2rem;background:transparent;color:var(--ink);text-align:left}
.pc-ja{margin:0 0 .7rem;font-family:var(--jp);font-weight:900;font-size:1.5rem;line-height:1.9;color:var(--ink)}
.pc-ja rt{font-size:.5em;color:var(--muted);font-weight:500;letter-spacing:.04em}
.pc-romaji{margin:0 0 .3rem;font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pc-en{margin:0;font-size:.98rem;color:var(--muted)}
.pc-src{margin:1rem 1.2rem 0;padding-top:1rem;border-top:1.5px solid var(--ink);font-size:.84rem;color:var(--muted)}
.pc-src .pc-face{
  display:inline-block;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--ink);background:#fff;vertical-align:-.35em;margin-right:.35rem;
}
.pc-src a{font-weight:700;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.pc-src a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow);text-underline-offset:3px}

/* ---------- 8. trust band (+ the K cast) ---------- */
.trust-strip{background:var(--red);padding:.95rem 0}
.trust-strip .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.1rem}
.trust-faces{display:flex;flex:none;align-items:center}
.trust-faces img{
  display:block;width:34px;height:34px;border-radius:50%;
  background:#fff;border:2.5px solid #fff;margin-left:-9px;
}
.trust-faces img:first-child{margin-left:0}
.trust-strip_text{margin:0;flex:1 1 28ch;min-width:0;font-size:.92rem;line-height:1.6;color:#fff}
.trust-strip_text b{color:#fff}
.trust-strip_text a{display:inline-block;margin-left:.3rem;font-weight:700;color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.trust-strip_text a:hover{text-decoration-color:var(--yellow)}

/* ---------- 9. footer — the ink block ---------- */
.site-footer{background:var(--ink);color:#C9C9C9;font-size:.88rem;padding-top:2.25rem;padding-bottom:2.25rem;margin-top:clamp(2rem,5vw,3rem)}
.footer-row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem}
.footer-brand{display:inline-flex;align-items:center;background:#fff;border-radius:4px;padding:.45rem .7rem}
.footer-brand img{display:block;width:113px;height:auto}
.footer-row a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:40px;font-weight:500}
.footer-row a:hover{color:var(--yellow);text-decoration-color:var(--yellow)}
.footer-note{margin:1rem 0 0;font-size:.8rem;color:#A3A3A3}

/* ---------- 10. breadcrumb (chips) + article shell ---------- */
.article-col{max-width:760px;margin:0 auto}
.breadcrumb{padding-top:1.5rem;font-size:.78rem;color:var(--muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem;margin:0;padding:0;min-width:0}
.breadcrumb li{display:flex;align-items:center;gap:.5rem;min-width:0}
.breadcrumb li+li::before{content:"/";color:var(--muted)}
.breadcrumb a{
  display:inline-flex;align-items:center;min-height:40px;padding:.1rem .7rem;
  border:1.5px solid var(--ink);border-radius:2px;color:var(--ink);
  text-decoration:none;font-weight:600;white-space:nowrap;
}
.breadcrumb a:hover{background:var(--yellow)}
.breadcrumb [aria-current]{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30ch}
/* mobile: the chips are too bulky at phone width (and "Japango TOP" wrapped
   inside its chip) — collapse to a quiet text trail */
@media (max-width:560px){
  .breadcrumb{font-size:.74rem;padding-top:1.1rem}
  .breadcrumb ol{gap:.4rem}
  .breadcrumb li{gap:.4rem}
  .breadcrumb a{
    border:0;border-radius:0;padding:0;min-height:32px;
    color:var(--red);font-weight:600;
  }
  .breadcrumb a:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
  .breadcrumb [aria-current]{max-width:16ch}
}
.article-header{padding-top:clamp(1.25rem,3vw,2.25rem)}
.article-title{
  margin:0 0 1.1rem;font-family:var(--display);font-weight:800;font-stretch:112%;
  letter-spacing:-.005em;font-size:clamp(1.8rem,4.3vw,2.6rem);line-height:1.12;text-wrap:balance;
}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;font-size:.8rem;color:var(--muted)}
.meta-updated{font-weight:600;color:var(--ink)}
/* visible byline — the human-readable counterpart of the schema author */
.byline{margin:.55rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.byline a{font-weight:700;color:var(--red);text-decoration:none}
.byline a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow);text-underline-offset:3px}
.meta-tag{
  display:inline-flex;align-items:center;min-height:28px;padding:0 .85rem;border-radius:999px;
  background:var(--red);color:#fff;font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.meta-tag:hover{background:var(--ink);color:#fff}
.meta-format{
  display:inline-flex;align-items:center;min-height:28px;padding:0 .85rem;border-radius:999px;
  background:var(--yellow);color:var(--ink);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- 11. ◎ badges (.code-badge/.seal alias — archive hero etc.) ---------- */
.code-badge,.seal{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:3px solid var(--ink);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1;
  transform:none;box-shadow:none;
}
.code-badge::after,.seal::after{content:"";position:absolute;inset:2.5px;border-radius:50%;border:1.5px solid var(--ink)}
.code-badge.seal-lg,.seal-lg{width:60px;height:60px;border-width:4px;font-size:1.6rem}
.code-travel,.code-daily,.code-business,.code-basic,.code-special,.code-q-and-a{color:var(--ink)}
.cat-hero--travel .code-badge,.cat-hero--business .code-badge,.cat-hero--q-and-a .code-badge{border-color:var(--ink)}

/* ---------- 12a. question / answer — MOCKUP classes (sample pages) ---------- */
.question{margin:clamp(1.75rem,4vw,2.5rem) 0;border:var(--rule);border-radius:2px;padding:1.1rem clamp(1.1rem,3vw,1.5rem)}
.q-label{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 .7rem;padding:.3rem .8rem;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.q-text{margin:0;font-weight:500;font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;color:var(--ink)}
.answer-hero{margin:clamp(2rem,4vw,2.75rem) 0;background:var(--card);border:3px solid var(--red);border-radius:2px;padding:0 0 clamp(1.25rem,3vw,1.75rem)}
.answer-label{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:0 0 1.2rem;padding:.6rem 1.1rem;background:var(--yellow);color:var(--ink);
  font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.answer-label .by{color:var(--ink);opacity:.75;letter-spacing:.12em}
/* the phrase spread — the black panel */
.answer-panel{
  margin:0 clamp(1.1rem,3vw,1.75rem);padding:clamp(1.3rem,3.2vw,1.9rem);
  border:0;border-radius:2px;background:var(--ink);color:#fff;text-align:left;
}
.answer-panel::after{content:none}
.ah-ja{margin:0 0 .8rem;font-family:var(--jp);font-weight:900;font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.85;color:#fff}
.ah-ja rt{font-size:.48em;color:#D9D9D9;font-weight:500;letter-spacing:.05em}
.ah-ja::after{content:none}
.ah-romaji{margin:0 0 .5rem;font-family:var(--display);font-size:clamp(.85rem,1.7vw,1rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.ah-en{margin:0;font-size:clamp(1rem,1.9vw,1.15rem);color:rgba(255,255,255,.88)}
.qa-divider{border:0;border-top:1px solid var(--hairline);margin:1.15rem 0}
.qa-text{margin:0 clamp(1.1rem,3vw,1.75rem);font-size:clamp(1rem,1.9vw,1.1rem);line-height:1.75;color:var(--ink)}
.qa-text .rj-in{font-style:italic;color:var(--muted)}
.qa-text :lang(ja){font-family:var(--jp);font-weight:500;color:var(--ink)}
.qa-text rt{font-size:max(.55em,10px);color:var(--muted);font-weight:400}

/* ---------- 12b. real [char] plugin classes — the comic conversation ----------
   Plugin DOM unchanged: .chat_l Question(left) / .chat_r Answer(right), each
   .talker > b > img + .bubble_wrap > .bubble > .bubble_in, label
   <span class="line-orange">, inline white background on .bubble (!important).
   案HK dress: Q = comic bubble with 3px ink frame; A = the feature box with a
   3px red frame and the yellow ANSWER chip. Plugin avatars stay (the site's
   own illustrated cast) and get the HK rings. Same flex neutralization of the
   plugin float/tail quirks as the 案D/案F builds. */
.article-body .chat_l,
.article-body .chat_r{
  display:flex;align-items:flex-start;gap:.9rem;
  margin:clamp(1.5rem,3.5vw,2.2rem) 0;overflow:visible;
}
.article-body .chat_r{flex-direction:row-reverse}
.article-body .chat_l .talker,
.article-body .chat_r .talker{float:none;flex:none;width:auto;margin:0}
.article-body .chat_l .talker img,
.article-body .chat_r .talker img{
  display:block;width:54px;height:54px;object-fit:cover;border-radius:50%;
  background:#fff;box-shadow:none;
}
.article-body .chat_l .talker img{border:2.5px solid var(--ink)}
.article-body .chat_r .talker img{border:2.5px solid var(--red)}
.article-body .chat_l .bubble_wrap,
.article-body .chat_r .bubble_wrap{float:none;flex:1;min-width:0;width:auto;margin:0;padding:0}
.article-body .chat_l .bubble,
.article-body .chat_r .bubble{
  float:none;display:block;min-width:0;min-height:0;font-size:inherit;
  border-radius:2px;padding:clamp(1.05rem,2.8vw,1.4rem) clamp(1.1rem,3vw,1.5rem);
  box-shadow:none;
}
.article-body .chat_l .bubble{position:relative;border:3px solid var(--ink);background:var(--card) !important}
.article-body .chat_r .bubble{position:relative;border:3px solid var(--red);background:var(--card) !important}
/* comic tails pointing at the speakers (owner request 2026-07-23):
   double-triangle — frame-colored outer + card-white inner leaves a ~3px rim
   that reads as the continued 3px border. Q aims left at the student,
   A aims right at the teacher; both sit at avatar height. */
.article-body .chat_l .bubble::before{
  content:"";position:absolute;left:-15px;top:16px;width:0;height:0;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  border-right:15px solid var(--ink);
}
.article-body .chat_l .bubble::after{
  content:"";position:absolute;left:-8px;top:20px;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-right:9px solid var(--card);
}
.article-body .chat_r .bubble::before{
  content:"";position:absolute;right:-15px;top:16px;width:0;height:0;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  border-left:15px solid var(--red);
}
.article-body .chat_r .bubble::after{
  content:"";position:absolute;right:-8px;top:20px;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:9px solid var(--card);
}
.article-body .chat_l .bubble .bubble_in,
.article-body .chat_r .bubble .bubble_in{border:0}
.article-body .chat_l .bubble .bubble_in::before,
.article-body .chat_l .bubble .bubble_in::after,
.article-body .chat_r .bubble .bubble_in::before,
.article-body .chat_r .bubble .bubble_in::after{display:none}
/* labels — Q: ink chip; A: yellow chip; both with a ◎ cue */
.article-body .chat_l .line-orange,
.article-body .chat_r .line-orange{
  display:table;margin:0 0 .6rem;padding:.32rem .8rem;
  font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.5;
}
.article-body .chat_l .line-orange{background:var(--ink);color:#fff}
.article-body .chat_r .line-orange{background:var(--yellow);color:var(--ink)}
.article-body .chat_l .line-orange::before{content:"\25CE\00A0";color:#fff}
.article-body .chat_r .line-orange::before{content:"\25CE\00A0";color:var(--ink)}
.article-body .chat_l .line-orange + br,
.article-body .chat_r .line-orange + br,
.article-body .chat_l p > strong:first-child + br,
.article-body .chat_r p > strong:first-child + br,
.article-body .chat_l + br,
.article-body .chat_r + br{display:none}
.article-body .chat_l p,
.article-body .chat_r p{font-size:1.02rem;line-height:1.7}
.article-body .chat_l rt,
.article-body .chat_r rt{font-size:max(.55em,10px)}
@media (max-width:560px){
  .article-body .chat_l,
  .article-body .chat_r{gap:.65rem}
  .article-body .chat_l .talker img,
  .article-body .chat_r .talker img{width:44px;height:44px}
}

/* ---------- 12c. the ◎ stamp rally (single.php emits .stamp-rally) ----------
   K-scale composition (owner direction 2026-07-23): large roomy stamps,
   avatar on top, role title + duty line + ✓, centered, no rotation. Rings
   carry the HK colors; all text stays ink for AA. */
.stamp-rally{margin:clamp(2rem,4.5vw,3rem) 0;text-align:center}
.stamp-rally_lead{margin:0 0 1.4rem;font-weight:700;font-size:1.02rem;color:var(--ink)}
.stamp-row{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2.5vw,1.5rem);align-items:center;justify-content:center}
.stamp{
  position:relative;flex:none;width:clamp(140px,18vw,164px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:#fff;border:3.5px solid var(--ink);text-align:center;
  padding:0 .85rem;
}
.stamp::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid currentColor}
.stamp img{display:block;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid currentColor}
.stamp-role{
  display:block;font-family:var(--display);font-weight:800;font-stretch:100%;
  font-size:.74rem;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:var(--ink);
}
.stamp-desc{
  display:block;font-family:var(--display);font-weight:600;font-stretch:96%;
  font-size:.62rem;letter-spacing:.05em;line-height:1.35;text-transform:uppercase;color:var(--ink);
}
.stamp--write{border-color:var(--red);color:var(--red)}
.stamp--lang{border-color:var(--ink);color:var(--ink)}
.stamp--fact{border-color:var(--red-bright);color:var(--red-bright)}
.stamp--copy{border-color:var(--yellow-deep);color:var(--yellow-deep)}
.stamp-rally_note{margin:1.3rem auto 0;max-width:52ch;font-size:.9rem;line-height:1.65;color:var(--muted)}
.stamp-rally_link{display:inline-block;margin-top:.3rem;font-weight:700;color:var(--red);text-decoration:none;min-height:40px}
.stamp-rally_link:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow);text-underline-offset:3px}
@media (max-width:640px){
  .stamp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:1rem}
  .stamp{width:min(150px,44vw)}
}

/* ---------- 13. article body + ruby + inline romaji ---------- */
.article-body{font-size:1.07rem;line-height:1.75;color:var(--ink)}
.article-body p{margin:0 0 1.4rem}
.article-body p:last-child{margin-bottom:0}
.article-body :lang(ja){font-weight:500}
.article-body ruby rt{font-size:max(.55em,10px);color:var(--muted);font-weight:400}
.article-body a{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.article-body a:hover{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.rj,.romaji{font-style:italic;color:var(--muted)}
.article-body h2{
  font-family:var(--display);font-weight:800;font-stretch:108%;letter-spacing:0;
  font-size:clamp(1.3rem,2.7vw,1.65rem);line-height:1.2;
  margin:clamp(2rem,4vw,2.75rem) 0 1rem;padding-top:clamp(1.5rem,3vw,2rem);
  border-top:var(--rule);
}
.article-body h3{font-family:var(--display);font-weight:700;font-size:1.16rem;margin:1.8rem 0 .8rem}
.article-body ul,.article-body ol{margin:0 0 1.4rem;padding-left:1.4rem;list-style:revert}
.article-body li{margin:0 0 .5rem}
.article-body img{border-radius:2px}
.article-body blockquote{
  margin:clamp(1.75rem,4vw,2.5rem) 0;border-left:6px solid var(--yellow);
  padding:.3rem 0 .3rem clamp(1.1rem,3vw,1.6rem);color:var(--ink-soft);
}
.article-body table{border-collapse:collapse;width:100%;margin:0 0 1.4rem}
.article-body th,.article-body td{border:1px solid var(--hairline);padding:.5rem .7rem;text-align:left}
.article-body thead th{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 13b. legacy-content compatibility ----------
   Same coverage as the 案D/案F builds (74 pre-2024 posts). Functional legacy
   hues are kept desaturated (content semantics beat brand purity inside old
   posts); everything else re-toned to HK. */
.article-body hr{border:0;border-top:1.5px solid var(--ink);margin:2rem 0}
.article-body hr.dotted{border-top:2px dotted var(--hairline)}
.article-body .line-pink{background:linear-gradient(transparent 55%,#F9E0E8 45%)}
.article-body .line-blue{background:linear-gradient(transparent 55%,#DEE9F7 45%)}
.article-body .line-lime{background:linear-gradient(transparent 55%,#DFF2E9 45%)}
.article-body .line-yellow{background:linear-gradient(transparent 55%,var(--yellow-tint) 45%)}
.article-body .line-gray{background:linear-gradient(transparent 55%,var(--tint) 45%)}
.article-body .red{color:var(--red)}
.article-body .box_style{margin:0 0 1.6rem;border:1.5px solid var(--ink);border-radius:2px;background:var(--card)}
.article-body .box_style .box_inner{padding:1.05rem 1.25rem}
.article-body .box_style_title{
  margin:-1.05rem -1.25rem .9rem;padding:.55rem 1.25rem;
  border-bottom:1.5px solid var(--ink);border-radius:0;
  background:var(--tint);color:var(--ink);
  font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.article-body .box_style_blue  .box_style_title{background:#DEE9F7;color:#1E50A2}
.article-body .box_style_green .box_style_title{background:#DFF2E9;color:#006B4C}
.article-body .box_style_orange .box_style_title,
.article-body .box_style_red   .box_style_title{background:var(--red-tint);color:var(--red)}
.article-body .box_style_pink  .box_style_title{background:#F9E0E8;color:#99385C}
.article-body .box_style_yellow .box_style_title{background:var(--yellow-tint);color:var(--ink)}
.article-body .keni-link-card_wrap{margin:0 0 1.6rem}
.article-body blockquote.keni-link-card{
  display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem;align-items:start;
  margin:0;padding:1rem 1.1rem;border:1.5px solid var(--ink);border-radius:2px;
  background:var(--card);font-family:var(--sans);font-style:normal;color:var(--ink);
}
.article-body .keni-link-card_thumb{grid-row:1 / span 3}
.article-body .keni-link-card_thumb img{display:block;width:96px;height:72px;object-fit:cover;border-radius:2px}
.article-body .keni-link-card_title{font-weight:600;line-height:1.4}
.article-body .keni-link-card_title a{text-decoration:none;color:var(--ink)}
.article-body .keni-link-card_title a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.article-body .keni-link-card_url{font-size:.76rem;color:var(--muted)}
.article-body .keni-link-card_url cite{font-style:normal}
.article-body .keni-link-card_url a{color:var(--muted);text-decoration:none;word-break:break-all}
.article-body .keni-link-card_desc{font-size:.85rem;color:var(--ink-soft);line-height:1.55;max-height:3.2em;overflow:hidden}
.article-body pre{
  margin:0 0 1.4rem;padding:1rem 1.2rem;overflow-x:auto;
  background:var(--tint);border:1px solid var(--hairline);border-radius:2px;
  font-size:.88rem;line-height:1.6;
}
.article-body .aligncenter{display:block;margin-left:auto;margin-right:auto}
.article-body input[type="text"],
.article-body input[type="email"],
.article-body textarea{
  width:100%;padding:.6rem .8rem;font:inherit;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--card);
}
.article-body input[type="submit"],
.article-body button[type="submit"]{
  border:0;cursor:pointer;border-radius:999px;min-height:44px;padding:0 1.4rem;
  background:var(--red);color:#fff;font:inherit;font-weight:700;
}
.article-body input[type="submit"]:hover,
.article-body button[type="submit"]:hover{background:var(--ink)}

/* ---------- 14. author box (+K tape & cast) ---------- */
.author-box{
  position:relative;display:flex;gap:1.1rem;align-items:flex-start;
  margin:clamp(2.5rem,5vw,3.5rem) 0;padding:1.5rem;
  background:var(--tint);border:0;border-radius:2px;
}
.author-box::before{
  content:"";position:absolute;top:-9px;left:2rem;width:56px;height:14px;
  transform:rotate(2deg);background:rgba(243,198,108,.72);
}
.author-box svg{flex:none}
.author-faces{display:flex;flex:none;align-items:center;margin-top:.2rem}
.author-faces img{display:block;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--ink);margin-left:-10px}
.author-faces img:first-child{margin-left:0}
.author-box h2{margin:0 0 .1rem;font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:0;padding:0}
.author-name{margin:0 0 .5rem;font-family:var(--display);font-weight:800;font-size:1.12rem}
.author-box p{margin:0 0 .6rem;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.author-box a{font-size:.88rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.author-box a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}
@media (max-width:540px){.author-box{flex-direction:column;gap:.9rem}}

/* ---------- 15. related list ---------- */
.related{border-top:var(--rule);padding-top:clamp(2rem,4vw,2.75rem);margin-top:clamp(2rem,4vw,2.75rem)}
.related .section-title{margin:0 0 1.5rem}
.related .q-title{flex:1;min-width:0;font-weight:600;font-size:1.02rem;line-height:1.42;display:block}

/* ---------- 16. next-step CTA — the yellow block ---------- */
.cta{
  margin:clamp(2.5rem,5vw,3.5rem) 0;
  background:var(--yellow);border:0;border-radius:2px;
  padding:clamp(1.75rem,4.5vw,2.75rem);text-align:center;color:var(--ink);
}
.cta h2{margin:0 0 .6rem;font-family:var(--display);font-weight:800;font-stretch:108%;font-size:clamp(1.35rem,2.6vw,1.7rem)}
.cta p{max-width:46ch;margin:0 auto 1.5rem;font-size:.95rem;color:var(--ink)}
.cta-btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.6rem;
  background:var(--ink);color:#fff;border-radius:999px;text-decoration:none;font-weight:700;font-size:.98rem;
}
.cta-btn:hover{background:var(--red);color:#fff}
.cta .cta-btn:focus-visible{outline-color:var(--ink)}

/* ---------- 17. guide format ---------- */
.toc{margin:clamp(1.5rem,3vw,2rem) 0;border:var(--rule);border-radius:2px;background:var(--card);padding:1.1rem 1.35rem 1rem}
.toc-label{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .55rem;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;border-top:1px solid var(--hairline)}
.toc li:first-child{border-top:0}
.toc a{display:flex;align-items:baseline;gap:.8rem;min-height:42px;padding:.35rem .1rem;text-decoration:none;color:var(--ink-soft);font-weight:500;font-size:.95rem}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--red);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink)}
.toc a:hover span{box-shadow:inset 0 -8px 0 -2px var(--yellow)}
.gsec{scroll-margin-top:10rem}
.gsec+.gsec{margin-top:clamp(2.4rem,5vw,3.25rem)}
.gh{
  display:flex;align-items:baseline;gap:.75rem;margin:0 0 1.05rem;
  padding-top:clamp(1.9rem,4vw,2.5rem);border-top:var(--rule);
  font-family:var(--display);font-weight:800;font-stretch:108%;font-size:clamp(1.3rem,2.7vw,1.65rem);line-height:1.2;
}
.gh-num{flex:none;font-family:var(--display);font-weight:800;font-size:.8em;color:var(--red);font-variant-numeric:tabular-nums}
.chart-wrap{margin:1.4rem 0 .35rem;border:var(--rule);border-radius:2px;background:var(--card);overflow:hidden}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gojuon{border-collapse:collapse;width:100%;min-width:540px;margin:0}
.gojuon caption{text-align:left;padding:.95rem 1.2rem .8rem;font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--hairline)}
.gojuon caption b{display:block;margin-bottom:.1rem;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink)}
.gojuon th,.gojuon td{border:1px solid var(--hairline);text-align:center;vertical-align:middle}
.gojuon thead th{padding:.55rem .4rem;background:var(--ink);border-color:var(--ink);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.gojuon tbody th{padding:.4rem .55rem;background:var(--tint);min-width:3.4rem;font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--muted);white-space:nowrap}
.gojuon td{padding:.55rem .3rem;width:17.5%}
.kana{display:block;font-family:var(--jp);font-weight:700;font-size:clamp(1.3rem,2.8vw,1.55rem);line-height:1.35;color:var(--ink)}
.roma{display:block;margin-top:.05rem;font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.gojuon td.void{background:var(--tint);color:var(--muted);font-size:.9rem}
.gojuon tr.row-vowel td{background:var(--yellow-tint)}
.gojuon td.n-note{text-align:left;padding:.55rem .9rem;background:var(--tint);font-size:.78rem;line-height:1.5;color:var(--muted)}
.chart-hint{display:none;margin:.55rem 0 0;font-size:.78rem;color:var(--muted)}
@media (max-width:640px){.chart-hint{display:block}}
.chart-foot{margin:1.1rem 0 0}
.order-list{list-style:none;margin:0 0 1.35rem;padding:0;counter-reset:step}
.order-list li{counter-increment:step;position:relative;margin:0 0 .8rem;padding:.95rem 1.1rem .95rem 3.3rem;background:var(--card);border:1.5px solid var(--ink);border-radius:2px;font-size:1rem;line-height:1.68}
.order-list li::before{content:counter(step);position:absolute;left:1.05rem;top:.95rem;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:2.5px solid var(--red-bright);color:var(--red);font-family:var(--display);font-weight:800;font-size:.88rem}
.order-list b{font-weight:600}
.desk-note{margin:0;border-left:6px solid var(--yellow);padding:.35rem 0 .35rem clamp(1.1rem,3vw,1.6rem)}
.desk-note p{font-size:1.05rem;line-height:1.75;color:var(--ink-soft)}
.desk-sign{margin:1rem 0 0;padding-left:clamp(1.1rem,3vw,1.6rem);font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- 18. category archive — the feature-page band ---------- */
.cat-hero{background:var(--tint);color:var(--ink);border-bottom:var(--rule);position:relative;overflow:hidden}
.cat-hero--travel{background:var(--red);color:#fff}
.cat-hero--daily{background:var(--yellow);color:var(--ink)}
.cat-hero--business{background:var(--ink);color:#fff}
.cat-hero--basic{background:var(--tint);color:var(--ink)}
.cat-hero--q-and-a{background:var(--ink);color:#fff}
.cat-hero .breadcrumb{color:inherit}
.cat-hero .breadcrumb a{border-color:currentColor;color:inherit}
/* hover washes: dark on the red band (white wash drops below AA there),
   white on the ink bands */
.cat-hero--travel .breadcrumb a:hover{background:rgba(0,0,0,.25)}
.cat-hero--business .breadcrumb a:hover,.cat-hero--q-and-a .breadcrumb a:hover{background:rgba(255,255,255,.18)}
.cat-hero .breadcrumb [aria-current]{color:inherit;opacity:.75}
/* the .75 dim fails AA only on the red band — use a solid tint there */
.cat-hero--travel .breadcrumb [aria-current]{opacity:1;color:#FAEFED}
.cat-hero .breadcrumb li+li::before{color:currentColor;opacity:.6}
.cat-hero-inner{padding-top:clamp(1.25rem,3.5vw,2.25rem);padding-bottom:clamp(1.75rem,4.5vw,2.75rem);position:relative;z-index:1}
.cat-hero .kicker{color:inherit}
.cat-head{display:flex;align-items:center;gap:1.1rem;margin:.4rem 0 0}
.cat-title{margin:0;font-family:var(--display);font-weight:880;font-stretch:116%;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(2.1rem,5vw,3rem);line-height:1.05;color:inherit}
.cat-jp{margin:.85rem 0 0;font-size:.95rem;color:inherit;opacity:.85}
.cat-jp .jp{font-family:var(--jp);font-weight:700;font-size:1.25rem}
.cat-jp rt{font-size:.5em;font-weight:500;letter-spacing:.05em}
.cat-jp .rj{font-style:normal}
.cat-lede{max-width:56ch;margin:1.1rem 0 0;font-size:1.02rem;line-height:1.7;color:inherit;opacity:.92}
/* opacity dims sit closest to the AA line on the red band — run them solid there */
.cat-hero--travel .cat-jp,.cat-hero--travel .cat-lede{opacity:1}
.cat-facts{margin:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:inherit}
.cat-facts span::before{content:"\25CE";margin-right:.5rem}
.list-section{padding-top:clamp(2rem,4.5vw,3rem);padding-bottom:clamp(2rem,4.5vw,3rem)}
.list-col{max-width:860px;margin:0 auto}
.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.1rem,2.5vw,1.75rem)}
.list-count{flex:none;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.find-band{background:var(--yellow);border-top:var(--rule)}
.find-inner{max-width:860px;margin:0 auto;padding-top:clamp(2rem,4.5vw,3rem);padding-bottom:clamp(2rem,4.5vw,3rem)}
.find-band h2{margin:0 0 .5rem;font-family:var(--display);font-weight:800;font-stretch:108%;font-size:clamp(1.35rem,2.6vw,1.7rem);color:var(--ink)}
.find-band .find-sub{margin:0 0 1.25rem;font-size:.95rem;color:var(--ink);max-width:52ch}
.find-band .search{border-color:var(--ink);background:#fff}
.find-band .search-hint{color:var(--ink)}
.find-band .search-hint b{color:var(--ink)}

/* ---------- 19. about / What-is-Japango ---------- */
.page-hero{border-bottom:var(--rule);background:var(--paper)}
.page-hero-inner{padding-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.page-hero .breadcrumb{padding-bottom:clamp(1.25rem,3vw,2rem)}
.page-hero .hero-title{color:var(--ink);max-width:26ch}
.page-hero .eyebrow{color:var(--ink)}
.page-hero .eyebrow [lang="ja"]{letter-spacing:.3em;margin-right:.15rem}
.mission-col{max-width:760px}
.mission-lead{margin:1.5rem 0 1.8rem;max-width:36ch;font-family:var(--display);font-weight:800;font-stretch:106%;letter-spacing:0;font-size:clamp(1.3rem,2.7vw,1.75rem);line-height:1.3;text-wrap:balance;color:var(--ink)}
.mission-lead em{font-style:normal;font-weight:800;color:inherit;background:linear-gradient(transparent 62%,var(--yellow) 38%)}
.mission-body{font-size:1.03rem;line-height:1.75;color:var(--ink)}
.mission-body p{margin:0 0 1.35rem;max-width:64ch}
.mission-body p:last-child{margin-bottom:0}
.pull{margin:clamp(2rem,4vw,2.75rem) 0;border-left:6px solid var(--yellow);padding:.35rem 0 .35rem clamp(1.1rem,3vw,1.75rem)}
.pull-label{display:flex;align-items:center;gap:.65rem;margin:0 0 .7rem;font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pull-text{margin:0;font-weight:500;font-size:clamp(1.12rem,2.2vw,1.4rem);line-height:1.5;color:var(--ink-soft)}
.ask-link{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;font-weight:700;font-size:.95rem;color:var(--red);text-decoration:none}
.ask-link:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow);text-underline-offset:3px}
.aud-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
@media (max-width:940px){.aud-grid{grid-template-columns:1fr;max-width:620px}}
.aud-card{display:flex;flex-direction:column;gap:.75rem;padding:1.4rem 1.3rem 1.3rem;border:1.5px solid var(--ink);border-radius:2px;background:var(--card)}
.aud-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid currentColor}
.aud-card.travel .aud-icon{color:var(--red)}
.aud-card.business .aud-icon{color:var(--ink)}
.aud-card.learners .aud-icon{color:var(--yellow-deep)}
.aud-card h3{margin:0;font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.25}
.aud-card p{margin:0;font-size:.92rem;line-height:1.62;color:var(--ink-soft)}
.fmt-lede{max-width:60ch;margin:.9rem 0 0;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.fmt-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
@media (max-width:880px){.fmt-grid{grid-template-columns:1fr;max-width:620px}}
/* the format sample = the black phrase spread */
.fmt-panel{margin:0;border-radius:2px;color:#fff;padding:clamp(1.5rem,4vw,2.25rem) clamp(1.3rem,3.5vw,2rem);background:var(--ink);text-align:left}
.fmt-panel::after{content:none}
.fmt-ja{margin:0 0 .8rem;font-family:var(--jp);font-weight:900;font-size:clamp(1.45rem,3.4vw,2rem);line-height:1.85;color:#fff}
.fmt-ja rt{font-size:.46em;color:#D9D9D9;font-weight:500;letter-spacing:.06em}
.fmt-ja::after{content:none}
.fmt-romaji{margin:0 0 .6rem;font-family:var(--display);font-size:clamp(.82rem,1.6vw,.92rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.fmt-en{margin:0;font-size:clamp(1rem,1.9vw,1.15rem);color:rgba(255,255,255,.88)}
.fmt-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;font-family:var(--display);font-style:normal;font-weight:800;font-size:.72rem;line-height:1;letter-spacing:0;text-transform:none}
.fmt-panel .fmt-n{background:transparent;border:2px solid var(--yellow);color:var(--yellow);margin-right:.65rem;vertical-align:.14em}
.fmt-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.fmt-legend li{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.fmt-legend .fmt-n{background:#fff;border:2.5px solid var(--ink);color:var(--ink);margin-top:.2rem}
.fmt-legend h3{margin:0;font-family:var(--display);font-weight:800;font-size:1rem}
.fmt-legend p{margin:.2rem 0 0;font-size:.9rem;line-height:1.62;color:var(--muted)}
.fmt-why{max-width:64ch;margin:clamp(1.75rem,3.5vw,2.25rem) 0 0;font-size:.98rem;line-height:1.7;color:var(--ink-soft)}
.fmt-why b{color:var(--ink)}
.about-cta{margin-top:clamp(2rem,4.5vw,3rem)}

/* ---------- 20. pagination + ad slots ---------- */
.pagination,.jd .nav-links{margin-top:clamp(2rem,4vw,2.75rem)}
.jd .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center}
.jd .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .8rem;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--card);
  text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:.9rem;
}
.jd .page-numbers:hover{background:var(--yellow);color:var(--ink)}
.jd .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.jd .page-numbers.dots{border:0;background:none;min-width:auto}
.japango-ad-slot{margin:clamp(1.75rem,4vw,2.5rem) 0}
/* the front-page T1 wrapper breaks .section+.section adjacency — restore the
   3px rules that sandwich the ad band (mock parity). Article F2 also matches
   .section+ (after .related, which carries the same rule) — consistent. */
.section + .japango-ad-slot{border-top:var(--rule);padding-top:clamp(1.5rem,3.5vw,2.25rem);margin-top:0}
.japango-ad-slot + .section{border-top:var(--rule)}
.japango-ad-infeed{border-top:1.5px solid var(--ink)}
.japango-ad-infeed .japango-ad-slot{margin:1.25rem 0}
.ad-box_label{display:block;margin:0 0 .4rem;font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ad-box .adsbygoogle{min-height:120px}
.japango-ad-slot[data-ad-slot="c3"] .adsbygoogle{min-height:280px} /* sanitize_key'd = lowercase */
.ad-box--placeholder .ad-box_ph{
  display:flex;align-items:center;justify-content:center;min-height:120px;padding:1rem;text-align:center;
  border:1.5px dashed var(--hairline);border-radius:2px;
  background:var(--tint);color:var(--muted);font-size:.85rem;
}

/* ---------- 21. reduced motion ----------
   Transitions/animations off; static transforms (sticker/stamp/tape
   rotations, the FOR FREE tilt) are presentation, not motion — kept. */
@media (prefers-reduced-motion:reduce){
  .jd *,.jd *::before,.jd *::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .jd .cat-card:hover{transform:translate(-3px,-3px)} /* no jump, still offset */
}