/* Goldera Research — site stylesheet (v2, 2026-08-24)

   TOKEN CONTRACT (edit tokens, not components):
   - Surfaces: --surface-deep/base/raised/overlay (lacquer crimson, DJ 2026-08-24
     "luxurious red, not blood red"). Text: --ink / --ink-muted / --ink-faint.
     Lowest measured ratios on the lightest text surface (overlay #7C1F32):
     ink 8.8, ink-muted 6.8, ink-faint 5.6, gold 5.1 -> all pass AA (4.5); deep band #47101D is darker still;
     --gold-deep is fill/hover only, never text. Map fills carry no text. Recheck with the contrast script in
     knowledge/lessons/2026-08-24-site-v2.md whenever a token changes.
   - Shape: pills (--r-chip) for chips/buttons, 18px (--r-card) for cards,
     14px for panels/menus with 10px items inside (concentric), 50% for
     round icon buttons. No other radii.
   - Type: --font-brush for h1/h2 only; --font-display for h3; --font-body.
   - Motion: --ease-out for enters/hovers, --ease-in-out for on-screen moves;
     everything decorative collapses under prefers-reduced-motion.
   Brand gold values, mark, and Tenor Sans come from the Goldera brand guide v1.3. */

/* ---------- fonts (self-hosted, CSP font-src 'self') ---------- */
@font-face{font-family:"Tenor Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/TenorSans-400.woff2?v=ca2d2994") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/Inter-400.woff2?v=ce87185f") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/Inter-500.woff2?v=af6b2ee4") format("woff2")}
@font-face{font-family:"Noto Sans JP Sub";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/NotoSansJP-400-sub.woff2?v=46c8ab79") format("woff2")}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ShipporiMinchoB1-sub.woff2?v=8154a096") format("woff2")}
@font-face{font-family:"Nanum Myeongjo";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/NanumMyeongjo-sub.woff2?v=fb71e7d6") format("woff2")}
@font-face{font-family:"Noto Sans JP Sub";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/NotoSansJP-500-sub.woff2?v=aa00e44f") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* 和 luxury skin (DJ, 2026-08-24): lacquer red + gold / champagne gold.
     Supersedes the charcoal skin for this site; brand gold values kept. */
  --surface-deep:#47101D;
  --surface-base:#5C1220;
  --surface-raised:#6E1728;
  --surface-overlay:#7C1F32;
  --grad-top:#7A1A2C;
  --grad-bottom:#400B16;
  --hair:rgba(241,226,181,.18);
  --hair-strong:rgba(241,226,181,.34);
  --ink:#F8EFDC;
  --ink-muted:#E6D2B0;
  --ink-faint:#D6BE98;
  --gold:#D9B55E;
  --gold-deep:#B8892E;
  --gold-tint:#F1E2B5;
  --champagne:#E9D8A6;
  --navy:#3A0A14;
  --font-display:"Tenor Sans","Noto Sans JP Sub","Hiragino Sans","Yu Gothic UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-body:"Inter","Noto Sans JP Sub","Hiragino Sans","Yu Gothic UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --container:clamp(min(92vw,1120px),86vw,1760px);
  --r-card:18px;
  --r-chip:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --shadow-card:inset 0 1px 0 rgba(241,226,181,.16),0 1px 2px rgba(30,4,10,.6),0 12px 32px rgba(30,4,10,.5);
  --shadow-lift:inset 0 1px 0 rgba(241,226,181,.22),0 2px 8px rgba(30,4,10,.6),0 30px 60px -12px rgba(30,4,10,.85);
  --header-h:64px;
  --font-brush:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
html[lang="ko"]{--font-brush:"Nanum Myeongjo","Apple Myungjo","Batang",serif;--font-display:"Tenor Sans","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--font-body:"Inter","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
html[lang="en"]{--font-brush:"Tenor Sans","Shippori Mincho",serif;--font-display:"Tenor Sans","Helvetica Neue",Arial,sans-serif;--font-body:"Inter","Helvetica Neue",Arial,sans-serif}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{overflow-x:clip}
/* Chrome caret-browsing (F7) / stray click carets paint a "|" on plain text; the site has no editable text, so hide the caret except in real fields */
body{caret-color:transparent}
input,textarea,[contenteditable="true"]{caret-color:auto}
body{margin:0;background-color:var(--surface-base);background-image:radial-gradient(1200px 700px at 85% -10%,rgba(241,226,181,.28),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(217,181,94,.22),transparent 60%),radial-gradient(700px 400px at 50% 40%,rgba(160,40,60,.35),transparent 70%),linear-gradient(180deg,var(--grad-top),var(--grad-bottom));color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.012em;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--navy);padding:.65rem 1rem;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:var(--r-chip);z-index:100}
.skip-link:focus{left:8px}
.container{width:var(--container);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;display:flex;align-items:center;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out);border-bottom:1px solid transparent;background:linear-gradient(180deg,rgba(58,10,20,.62),rgba(58,10,20,0))}
.site-header.is-solid{background:rgba(92,18,32,.86);border-bottom-color:var(--hair);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.site-header .header-inner{width:100%;max-width:none;padding:0 clamp(16px,2.2vw,40px);display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%}
/* Brand. The lockup is inlined SVG (see _logo() in build.py), not <img>, so the
   gold can carry the foil gradient and the petal field can sit in the same box.
   32px, not the previous 34px: the 2026-08-26 mark is wider (aspect 5.00 vs
   4.82) and the measured nav ceiling is 173px of brand width -- 32px lands at
   160px, 34px at 170px, and 10px of slack is a latent bug, not a margin.
   Keep this number and HEADER_LOGO_H in scripts/_gen_logo.py in step. */
.brand{position:relative;display:flex;align-items:center;height:100%}
.brand-svg{height:32px;width:auto;display:block;overflow:visible}

/* ---------- falling petals over the mark ----------
   DJ, 2026-08-26: "some sakura like or Japanese like leaves ... falling effect on
   my top left logo."

   The fall is CONTINUOUS (DJ, 2026-08-26: "i want leafs to fall more often"). It
   was originally finite -- eight petals once per load, then nothing -- on the
   argument that a permanent loop in a fixed header reads as a widget rather than a
   maison. DJ overruled it, so the restraint moved from duration to density: site.js
   drops ONE petal at a time on a randomised 1.1-2.6s gap and never lets more than
   five be alive, which averages one or two in view. The band stays mostly empty red
   -- that is what keeps it from looking like a screensaver. Hover on the brand still
   adds a small flurry on top.

   Motion is transform and opacity only. Two nested elements per petal: .petal-fall
   carries the descent (linear -- gravity is constant), .petal carries the sway and
   spin (strong ease-in-out -- air is not). Composing them is what stops it reading
   as a sprite sliding down a line.

   The fall is CONFINED TO THE RED BAND (DJ, 2026-08-26: it was raining past the
   header onto the hero photograph). The field is exactly --header-h tall and clips,
   so nothing crosses the banner's lower edge; the drop distance is derived from the
   same variable, and the opacity fade is spent well before that edge, so a petal
   dissolves inside the red rather than being visibly guillotined by the clip. Change
   --header-h and this follows it -- do not re-hardcode a pixel height here.

   Under prefers-reduced-motion nothing is spawned at all (site.js checks first).
   This is pure decoration with nothing to comprehend, so "gentler" would just be a
   slower distraction. */
.petal-field{position:absolute;left:-10px;top:0;width:calc(100% + 26px);height:var(--header-h);
  pointer-events:none;overflow:hidden;contain:layout paint;z-index:-1}
.petal-fall{position:absolute;top:-22px;will-change:transform;
  --drop:calc(var(--header-h) + 26px);
  animation:petal-fall var(--dur,8s) linear var(--delay,0s) 1 both}
.petal{display:block;width:var(--size,11px);height:var(--size,11px);
  color:var(--gold);fill:currentColor;opacity:0;
  animation:petal-drift var(--dur,8s) var(--ease-in-out) var(--delay,0s) 1 both}
.petal-momiji{color:var(--gold-deep)}

@keyframes petal-fall{
  from{transform:translate3d(var(--x,0px),0,0)}
  to{transform:translate3d(calc(var(--x,0px) + var(--drift,12px)),var(--drop,90px),0)}
}
/* The petal must be GONE before its own bottom edge can reach the clip line, not
   merely fading. Geometry: y(t) = -22 + 90t, so the bottom edge of the largest
   petal (17px) touches the band's lower edge at t = (64-17+22)/90 = 0.767. The
   trap is that --ease-in-out is cubic-bezier(.77,0,.175,1), which is almost FLAT
   for the first third of any interval it governs: a fade "starting" at 70% still
   leaves 0.71 of peak opacity at t=0.767 -- a full-brightness gold petal with a
   ruler-straight bottom edge. Hence opacity hits 0 at 75% and stays there; the
   last quarter of the fall is invisible travel. Verified by solving the bezier,
   not by eye. Move --drop or the 9-17px size range in site.js and this 75% has to
   be re-solved with it. */
@keyframes petal-drift{
  0%{opacity:0;transform:rotate(0deg) translateX(0)}
  14%{opacity:var(--peak,.62)}
  35%{transform:rotate(140deg) translateX(6px)}
  55%{opacity:var(--peak,.62)}
  65%{transform:rotate(250deg) translateX(-5px)}
  75%{opacity:0}
  100%{opacity:0;transform:rotate(var(--spin,420deg)) translateX(0)}
}
.main-nav ul{display:flex;gap:2.2rem;align-items:center}
.main-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;letter-spacing:.06em;color:var(--ink-muted);padding:.5rem 0;position:relative;transition:color .2s ease}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--ink)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-right{display:flex;align-items:center;gap:.5rem}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;border:1px solid var(--hair-strong);border-radius:var(--r-chip);font-size:.8rem;letter-spacing:.1em;color:var(--ink);transition:border-color .2s ease,background-color .2s ease}
.lang-btn:hover{border-color:var(--gold)}
.lang-btn svg{width:12px;height:12px;transition:transform .25s var(--ease-out)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:var(--surface-overlay);border:1px solid var(--hair-strong);border-radius:14px;padding:.4rem;box-shadow:var(--shadow-lift);transform-origin:top right;opacity:0;transform:scale(.96) translateY(-4px);pointer-events:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.lang-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 .9rem;border-radius:10px;font-size:.9rem;color:var(--ink-muted);transition:background-color .15s ease,color .15s ease}
.lang-menu a:hover{background:rgba(241,226,181,.08);color:var(--ink)}
.lang-menu a[aria-current="true"]{color:var(--gold)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;transition:background-color .2s ease}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- ステマ規制 disclosure bar (Condition A-3/A-11, 2026-08-31) ----------
   A real, always-rendered component (build.py disclosure_block()), never an overlay:
   it occupies its own space directly under the fixed header so it can never be
   scrolled-under or covered. margin-top:var(--header-h) is what pushes it below the
   header (the header is position:fixed and takes no flow space of its own); every
   page's first content section starts right after it -- see the matching hero/prose
   padding note below, which used to reserve --header-h for a transparent-header
   bleed that no longer happens once this bar is the thing sitting under the header.
   Text sits at or above body size (1rem/16px, never smaller) on --surface-deep with
   --ink at 13.5:1 contrast (script-verified, comfortably above AA's 4.5) -- opacity
   stays at 1 throughout; a legal notice does not fade. No animation: this is not a
   promo bar. State B adds a gold top hairline only -- same slot, same size, same
   contrast, so the State A->B swap in build.py is a text change, not a relayout. */
.disclosure-bar{background:var(--surface-deep);border-bottom:1px solid var(--hair)}
.disclosure-bar .container{padding-block:.7rem}
.disclosure-bar p{margin:0;font-size:1rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
.disclosure-bar[data-affiliate-state="B"]{border-bottom-color:var(--gold);box-shadow:inset 0 1px 0 rgba(217,181,94,.4)}

/* ---------- below-header flow container (2026-08-31 差し戻し, Defect B; scoped to
   hero pages only 2026-08-31 差し戻し #2, Defect B2) ----------
   The bar's height varies with language/text length/viewport (JA wraps to 2-3 lines
   at 390px), so the hero can no longer subtract a fixed --header-h from 100svh/dvh --
   that calc doesn't know the bar exists and undercounts by exactly the bar's height,
   which is how the mobile home CTAs ended up below the fold. Instead this wrapper
   reserves the header's space with padding-top and gives the bar and <main> a shared
   flex column: the bar takes its own natural height, and <main> (and, inside it, the
   hero) absorb whatever is left -- correct for any bar height, no JS measurement.

   The full-viewport reservation (min-height:100svh/dvh) and the flex-fill on <main>
   must NOT apply unconditionally -- a hero-less page (about/regions/privacy/credits/
   404) has no element inside it that wants to grow to fill a viewport, so both rules
   left a full-viewport dead zone between the content and the footer, scaling with the
   viewport size (Defect B2). shell() (site-src/build.py) adds the --hero modifier
   only on pages whose body contains a `.hero` section (home + region pages); every
   other page gets only the header offset from the base class and sizes to its
   content, so the footer sits immediately after it. */
.below-header{padding-top:var(--header-h)}
.below-header--hero{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column}
.below-header--hero>main{flex:1 0 auto;display:flex;flex-direction:column}

/* ---------- hero ---------- */
.hero{position:relative;flex:1 0 auto;min-height:0;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-slides{position:absolute;inset:-4%;z-index:-2;overflow:hidden;will-change:transform;transition:transform .6s var(--ease-out)}
.hero-inner{transition:transform .6s var(--ease-out)}
.hero{perspective:1200px}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero .slide.is-on{opacity:1}
.hero .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero .slide.is-on img{animation:kb-a 9s linear forwards}
.hero .slide.is-on:nth-child(even) img{animation-name:kb-b}
@keyframes kb-a{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes kb-b{from{transform:scale(1.12) translate(1%,1%)}to{transform:scale(1.02) translate(0,0)}}
/* keep the photo clean; the deep red lives in the ground the hero settles into, plus a soft dark pocket behind the headline for legibility */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(62% 75% at 18% 62%,rgba(24,4,10,.42),transparent 72%),linear-gradient(180deg,rgba(24,4,10,.14) 0%,transparent 34%,rgba(40,6,14,.36) 70%,rgba(72,12,26,.88) 90%,var(--surface-base) 100%)}
.hero-inner{padding:3rem 0 clamp(3rem,9vh,6rem);max-width:760px}
.hero h1{font-family:var(--font-brush);font-weight:700;font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.22;letter-spacing:.04em;color:var(--ink);text-shadow:0 2px 3px rgba(30,4,10,.55),0 8px 30px rgba(217,181,94,.32);margin-bottom:1.1rem;opacity:0;transform:translateY(18px);animation:rise .9s var(--ease-out) .25s forwards}
.hero-lead{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-muted);max-width:32em;margin-bottom:1.8rem;opacity:0;transform:translateY(14px);animation:rise .9s var(--ease-out) .45s forwards}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;opacity:0;transform:translateY(12px);animation:rise .9s var(--ease-out) .62s forwards}
.hero--region{flex-grow:.78}
.hero--region h1{font-size:clamp(3.6rem,10vw,8rem);letter-spacing:.1em;line-height:1.05}
.hero-kicker{display:block;font-size:.9rem;font-weight:500;letter-spacing:.16em;color:var(--gold-tint);margin-bottom:1rem}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 和 ornaments: vertical tagline, 落款 seal, 霞 dividers, 菊 crest ---------- */
.hero-wa{position:absolute;right:max(4vw,calc((100vw - var(--container)) / 2));top:calc(var(--header-h) + 3.5rem);display:flex;flex-direction:column;align-items:center;gap:1.2rem;opacity:0;animation:rise 1s var(--ease-out) .9s forwards}
.tategaki{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-brush);font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:.28em;color:var(--gold-tint);text-shadow:0 2px 10px rgba(30,4,10,.6);padding:.6rem .35rem;border-right:1px solid rgba(241,226,181,.35)}
.seal{width:clamp(44px,4.2vw,64px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#C8322B;color:#FFF3E0;font-family:var(--font-brush);font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(255,243,224,.85),inset 0 0 0 4px #C8322B,0 6px 16px rgba(30,4,10,.5);transform:rotate(-4deg)}
.kasumi{height:60px;margin:-10px 0;background:url("/img/kasumi.svg") center/600px 60px repeat-x;opacity:.42;pointer-events:none}
.section-head h2::after{content:"";display:block;width:180px;height:26px;margin-top:.9rem;background:url("/img/kiku.svg") center/26px 26px no-repeat,linear-gradient(90deg,transparent,var(--gold) 30%,transparent 45%,transparent 55%,var(--gold) 70%,transparent) center/100% 1px no-repeat}
.spot,.hcard,.map-panel,.duo article{outline:1px solid rgba(217,181,94,.22);outline-offset:4px}
#kinpaku{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.9}
@media(max-width:760px){.hero-wa{top:calc(var(--header-h) + 1.2rem);right:4vw;gap:.8rem}.tategaki{font-size:1.1rem}.seal{width:40px;font-size:1.3rem}.kasumi{height:40px;background-size:400px 40px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.6rem;border-radius:var(--r-chip);font-size:.92rem;letter-spacing:.05em;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--gold-tint),var(--gold) 55%,var(--gold-deep));color:var(--navy);font-weight:500;box-shadow:0 6px 18px rgba(217,181,94,.25)}
.btn-primary:hover{background:linear-gradient(135deg,#FFF6D6,var(--gold-tint) 55%,var(--gold))}
.btn-ghost{border:1px solid rgba(241,226,181,.55);color:var(--ink);background:rgba(58,10,20,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-tint)}
.btn-line{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);padding:0;min-height:44px;border-radius:0;border-bottom:1px solid transparent;font-size:.86rem;letter-spacing:.04em}
.btn-line svg{width:14px;height:14px;flex:0 0 14px}
.btn-line:hover{border-bottom-color:var(--gold)}
.btn svg{width:16px;height:16px}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{font-family:var(--font-brush);font-weight:700;font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:.06em;margin-bottom:.8rem}
.section-head p{color:var(--ink-muted);font-size:1.02rem}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}.reveal[data-delay="4"]{transition-delay:.32s}

/* ---------- Japan map ---------- */
.map-section,.deck-section{position:relative;background:var(--surface-deep);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);isolation:isolate}
.map-section::before,.deck-section::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/img/pattern-seigaiha.svg") center/72px 72px repeat;opacity:.13;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35))}
.map-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(min(300px,100%),.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.map-stage{perspective:1400px;min-width:0}
.jp-map{display:block;width:100%;max-width:100%;height:auto;transform:rotateX(14deg) rotateZ(-4deg);transform-origin:50% 60%;transition:transform .9s var(--ease-out);overflow:visible;filter:drop-shadow(0 30px 40px rgba(20,3,4,.7))}
.map-stage.is-active .jp-map{transform:rotateX(10deg) rotateZ(-2deg)}
.jp-inset{fill:none;stroke:var(--hair-strong);stroke-dasharray:3 4}
.jp-region{cursor:pointer;outline:none;transition:transform .7s var(--ease-out),opacity .5s ease,filter .7s var(--ease-out)}
.jp-pref{fill:#8C2A3C;stroke:var(--surface-deep);stroke-width:.9;stroke-linejoin:round;transition:fill .35s ease}
.jp-region:hover .jp-pref{fill:#A33448}
.jp-region:focus-visible .jp-pref{fill:#A33448;stroke:var(--gold);stroke-width:1.2}
.jp-region.is-live .jp-pref{fill:#A8752E}
.map-stage.is-active .jp-region:not(.is-selected){opacity:.45}
.jp-region.is-selected{transform:translateY(-22px);filter:drop-shadow(0 18px 18px rgba(0,0,0,.65))}
.jp-region.is-selected .jp-pref{fill:var(--gold-deep);stroke:var(--gold-tint);stroke-width:.7}
.jp-region.is-selected .jp-pref.is-page{fill:var(--gold)}
.map-panel{background:linear-gradient(160deg,var(--surface-overlay),var(--surface-raised) 60%);border:1px solid rgba(217,181,94,.32);border-radius:var(--r-card);padding:clamp(1.4rem,2.6vw,2.2rem);box-shadow:var(--shadow-card);min-height:340px}
.map-panel h3{font-size:1.6rem;margin-bottom:.35rem}
.map-panel .panel-note{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.2rem}
.region-pane{display:none}
.region-pane.is-on{display:block;animation:rise .5s var(--ease-out)}
.pref-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pref-list li{display:inline-flex;align-items:center;min-height:40px;padding:0 .95rem;border-radius:var(--r-chip);border:1px solid var(--hair-strong);color:var(--ink-faint);font-size:.88rem}
.pref-list li a{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;margin:0 -.95rem;padding:0 .95rem;border-radius:inherit;color:var(--navy);background:var(--gold);font-weight:500;transition:background-color .2s ease}
.pref-list li.is-live{border-color:var(--gold);padding:0}
.pref-list li a:hover{background:var(--gold-tint)}
.pref-list li a svg{width:14px;height:14px}
.region-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.region-tabs button{min-height:44px;padding:0 .8rem;border-radius:var(--r-chip);font-size:.8rem;letter-spacing:.04em;color:var(--ink-faint);border:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.region-tabs button:hover{color:var(--ink)}
.region-tabs button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}

/* ---------- feature band (Kyoto teaser) ---------- */
.band{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.band picture,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(92,18,32,.92) 0%,rgba(92,18,32,.62) 50%,rgba(92,18,32,.22) 100%)}
.band-inner{padding:clamp(4rem,10vw,8rem) 0;max-width:560px}
.band h2{font-family:var(--font-brush);font-weight:700;font-size:clamp(3rem,7vw,5.6rem);margin-bottom:1rem;letter-spacing:.04em}
.band p{color:var(--ink-muted);font-size:1.1rem;margin-bottom:1.6rem}

/* ---------- highlights (region page) ---------- */
.rail-wrap{position:relative}
.rail-btn{position:absolute;top:calc(50% - 32px);z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(92,18,32,.88);border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);transition:opacity .25s ease,transform .16s var(--ease-out),background-color .2s ease}
.rail-btn:hover{background:var(--gold);color:var(--navy)}
.rail-btn:active{transform:scale(.96)}
.rail-btn svg{width:20px;height:20px}
.rail-prev{left:-8px}.rail-next{right:-8px}
.rail-wrap.at-start .rail-prev,.rail-wrap.at-end .rail-next{opacity:0;pointer-events:none}
.rail{perspective:1000px;scroll-padding-inline:4vw;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 4vw 1.5rem;margin:0 -4vw;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
@media(max-width:760px){.rail-prev{left:2px}.rail-next{right:2px}}
.spot{scroll-snap-align:start;position:relative;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;background:var(--surface-raised);box-shadow:var(--shadow-card);transform-style:preserve-3d;transition:transform .35s var(--ease-out),box-shadow .5s var(--ease-out)}
.spot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,10,20,0) 40%,rgba(58,10,20,.9) 100%)}
.spot-text{position:absolute;left:0;right:0;bottom:0;padding:1.3rem;z-index:1}
.spot{cursor:pointer}
.spot h3{font-size:1.35rem;margin-bottom:.3rem}
.spot-hint{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font-size:.75rem;letter-spacing:.06em;color:var(--gold)}
.spot-hint svg{width:12px;height:12px}
.spot p{color:var(--ink-muted);font-size:.9rem;line-height:1.5}
@media(hover:hover) and (pointer:fine){
  .spot:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
  .spot:hover img{transform:scale(1.05)}
}

/* ---------- regions index (/{lang}/regions/) ---------- */
/* Same photo-card language as .spot (cover photo, dark gradient, text pinned to the
   floor), but as a plain link into a grid rather than a rail item that opens a dialog. */
.regions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.region-card{display:block;position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--surface-raised);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .5s var(--ease-out)}
.region-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.region-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,10,20,0) 38%,rgba(58,10,20,.94) 100%)}
.region-card-text{position:absolute;left:0;right:0;bottom:0;padding:1.4rem;z-index:1}
.region-card-kicker{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.region-card-text h3{font-family:var(--font-brush);font-weight:700;font-size:1.6rem;letter-spacing:.03em;margin-bottom:.35rem}
.region-card-text p{color:var(--ink-muted);font-size:.92rem;line-height:1.5;margin-bottom:.6rem}
.region-card-hint{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;letter-spacing:.06em;color:var(--gold)}
.region-card-hint svg{width:12px;height:12px}
@media(hover:hover) and (pointer:fine){
  .region-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
  .region-card:hover img{transform:scale(1.05)}
}

/* ---------- spot dialogs ---------- */
.spot-dialog{width:min(92vw,720px);max-height:88vh;padding:0;border:1px solid var(--hair-strong);border-radius:var(--r-card);background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-lift);overflow:hidden}
.spot-dialog::backdrop{background:rgba(30,4,10,.72);backdrop-filter:blur(6px)}
.spot-dialog[open]{animation:rise .35s var(--ease-out)}
.dialog-close{position:absolute;top:.8rem;right:.8rem;width:44px;height:44px;border-radius:50%;background:rgba(58,10,20,.72);color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:2;border:1px solid var(--hair-strong)}
.dialog-close svg{width:18px;height:18px}
.dialog-photo{aspect-ratio:16/8;overflow:hidden}
.dialog-photo img{width:100%;height:100%;object-fit:cover}
.dialog-body{padding:1.4rem 1.6rem 1.8rem;max-height:calc(88vh - 45vw);overflow:auto}
.dialog-body h3{font-size:1.7rem;margin-bottom:.3rem}
.dialog-body .lead{color:var(--ink-muted);margin-bottom:1rem}
.dialog-body h4{font-family:var(--font-body);font-weight:500;font-size:.78rem;letter-spacing:.12em;color:var(--gold);margin:1.1rem 0 .35rem}
.dialog-body p,.dialog-body li{color:var(--ink-muted);font-size:.95rem}
.dialog-body ul{display:grid;gap:.3rem}
.dialog-body li{display:flex;gap:.55rem}
.dialog-body li::before{content:"";flex:0 0 5px;width:5px;height:5px;margin-top:.6em;border-radius:50%;background:var(--gold)}
.dialog-official{margin-top:1.2rem}
@media(min-width:761px){.dialog-photo{aspect-ratio:16/7}.dialog-body{max-height:calc(88vh - 315px)}}

/* ---------- hotel deck (swipe) ---------- */
.deck-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.deck-wrap{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.deck{position:relative;width:min(100%,420px);aspect-ratio:3/4.35;margin-inline:auto;perspective:1200px;touch-action:pan-y}
.hcard{position:absolute;inset:0;background:var(--surface-raised);border-radius:var(--r-card);border:1px solid rgba(217,181,94,.34);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;transform-origin:50% 100%;transition:transform .5s var(--ease-out),opacity .4s ease;will-change:transform;user-select:none;-webkit-user-select:none}
.hcard[data-pos="0"]{z-index:6;cursor:grab}
.hcard[data-pos="0"].is-drag{cursor:grabbing;transition:none}
.hcard[data-pos="1"]{z-index:5;transform:translateY(-14px) scale(.96)}
.hcard[data-pos="2"]{z-index:4;transform:translateY(-28px) scale(.92)}
.hcard[data-pos="3"],.hcard[data-pos="4"],.hcard[data-pos="5"]{z-index:3;transform:translateY(-40px) scale(.88);opacity:0}
.hcard.is-out{transition:transform .55s var(--ease-in-out),opacity .45s ease;opacity:0;pointer-events:none}
.hcard-photo{position:relative;flex:0 0 46%;overflow:hidden}
.hcard-photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hcard-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(110,23,40,0) 55%,var(--surface-raised) 100%)}
.hcard-body{padding:1rem 1.4rem 1.3rem;flex:1;display:flex;flex-direction:column;gap:.55rem}
.seg{display:inline-flex;align-self:flex-start;align-items:center;min-height:26px;padding:0 .7rem;border-radius:var(--r-chip);border:1px solid var(--gold);color:var(--gold);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.hcard h3{font-size:1.45rem;line-height:1.2}
.hcard .hook{color:var(--ink-muted);font-size:.95rem}
.facts{display:grid;gap:.35rem;margin-top:.2rem;font-size:.86rem;color:var(--ink-faint)}
.facts li{display:flex;gap:.55rem;align-items:flex-start}
.facts li::before{content:"";flex:0 0 5px;width:5px;height:5px;margin-top:.55em;border-radius:50%;background:var(--gold)}
.hcard-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.8rem}
.photo-note{color:var(--ink-faint);opacity:.75;font-size:.75rem}
/* swipe verdict. The drag stamps are a 落款-style seal that presses harder the further
   the card travels; the same verdict then flashes over the deck on release, so a button
   or arrow-key swipe reads exactly as clearly as a drag does. --p is 0..1 progress, set in site.js. */
.stamp{position:absolute;top:1.3rem;--p:0;display:flex;align-items:center;gap:.45rem;padding:.5rem .9rem .5rem .75rem;border:2px solid;border-radius:12px;font-family:var(--font-display);letter-spacing:.12em;font-size:1.02rem;line-height:1;opacity:var(--p);background:rgba(30,5,12,.74);box-shadow:0 8px 22px rgba(20,3,8,.45);pointer-events:none;z-index:3;transition:transform .14s var(--ease-out)}
.stamp svg{width:19px;height:19px;flex:0 0 auto}
.stamp-like{left:1.1rem;color:var(--gold);border-color:var(--gold);transform:rotate(-10deg) scale(calc(.76 + .24*var(--p)))}
.stamp-like svg{fill:rgba(217,181,94,.2)}
.stamp-skip{right:1.1rem;color:var(--ink-muted);border-color:var(--ink-muted);transform:rotate(10deg) scale(calc(.76 + .24*var(--p)))}
.deck-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8}
.burst{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.1rem 1.6rem;border-radius:var(--r-card);border:1px solid;font-family:var(--font-display);letter-spacing:.14em;font-size:1.02rem;line-height:1;background:rgba(30,5,12,.84);opacity:0;transform:scale(.72)}
.burst svg{width:36px;height:36px}
.burst-like{color:var(--gold);border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,181,94,.3),0 20px 46px rgba(20,3,8,.6)}
.burst-like svg{fill:rgba(217,181,94,.22)}
.burst-skip{color:var(--ink-muted);border-color:var(--hair-strong);box-shadow:0 20px 46px rgba(20,3,8,.6)}
.burst.is-on{animation:burst-in .8s var(--ease-out) forwards}
@keyframes burst-in{0%{opacity:0;transform:scale(.72) rotate(-4deg)}16%{opacity:1;transform:scale(1.07) rotate(0deg)}30%{transform:scale(1)}68%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.deck-actions{display:flex;justify-content:center;gap:1.2rem;margin-top:1.3rem}
.deck-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;min-width:52px;padding:0 1.3rem;border-radius:var(--r-chip);border:1px solid var(--hair-strong);color:var(--ink);font-size:.86rem;letter-spacing:.06em;transition:transform .16s var(--ease-out),border-color .2s ease,background-color .2s ease}
.deck-actions button:active{transform:scale(.96)}
.deck-actions button svg{width:18px;height:18px}
.deck-actions .act-like{border-color:var(--gold);color:var(--gold)}
.deck-actions .act-like:hover{background:var(--gold);color:var(--navy)}
.deck-actions .act-skip:hover{border-color:var(--ink-muted)}
.deck-hint{text-align:center;color:var(--ink-faint);font-size:.8rem;margin-top:.9rem}
.list-note{color:var(--ink-muted);font-size:1rem;line-height:1.7;margin:1.4rem auto 0;max-width:62ch;text-align:center}
.list-note+.list-note{margin-top:.5rem}
.list-note a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.list-note a:hover{color:var(--gold)}
.prose p>a{display:inline-flex;align-items:center;min-height:24px}
.deck-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:2rem;border:1px dashed var(--hair-strong);border-radius:var(--r-card);color:var(--ink-muted);font-size:.95rem}
.deck.is-empty .deck-empty{display:flex}
.deck-empty button{margin-top:1rem;color:var(--gold);min-height:44px;padding:0 1rem;border:1px solid var(--gold);border-radius:var(--r-chip)}
.shortlist h3{font-size:1.5rem;margin-bottom:.4rem}
.shortlist .sl-note{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.2rem}
.sl-list{display:grid;gap:.6rem}
.sl-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border:1px solid rgba(217,181,94,.3);border-radius:14px;background:var(--surface-raised);animation:rise .45s var(--ease-out)}
.sl-list .sl-name{font-family:var(--font-display);font-size:1.05rem}
.sl-list .sl-seg{display:block;color:var(--ink-faint);font-size:.75rem;letter-spacing:.08em;margin-top:.15rem}
.sl-list a{flex:0 0 auto;color:var(--gold);font-size:.82rem;min-height:44px;display:inline-flex;align-items:center;gap:.3rem}
.sl-list a svg{width:14px;height:14px}
.sl-list .sl-name{flex:1 1 auto;min-width:0}
.sl-remove{flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-faint);border:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.sl-remove:hover{color:var(--ink);border-color:var(--hair-strong)}
.sl-remove svg{width:16px;height:16px}
.sl-empty{color:var(--ink-faint);font-size:.9rem;padding:1.4rem;border:1px dashed var(--hair-strong);border-radius:14px}
.sl-list:not(:empty)+.sl-empty{display:none}
.hotel-index{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hair)}
.hotel-index summary{cursor:pointer;color:var(--ink-faint);font-size:.85rem;letter-spacing:.06em;min-height:44px;display:flex;align-items:center}
.hotel-index ul{display:grid;gap:.4rem;margin-top:.8rem;font-size:.9rem}
.hotel-index a{color:var(--ink-muted)}
.hotel-index a:hover{color:var(--gold)}

/* ---------- itinerary ---------- */
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative}
.route::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--hair-strong)}
.stop{position:relative;padding-top:3rem}
.stop::before{content:"";position:absolute;left:0;top:16px;width:13px;height:13px;border-radius:50%;background:var(--surface-base);border:2px solid var(--gold)}
.stop .when{display:block;color:var(--gold);font-size:.8rem;letter-spacing:.14em;margin-bottom:.5rem}
.stop h3{font-size:1.45rem;margin-bottom:.5rem}
.stop p{color:var(--ink-muted);font-size:.95rem}

/* ---------- access ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.duo article{padding:1.8rem;border:1px solid rgba(217,181,94,.3);border-radius:var(--r-card);background:var(--surface-raised)}
.duo h3{font-size:1.3rem;margin-bottom:.6rem}
.duo p{color:var(--ink-muted);font-size:.95rem}

/* ---------- prose pages ---------- */
.prose{max-width:70ch;padding-top:3rem}
.prose h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.5rem}
.prose h2{font-size:1.4rem;margin:2.2rem 0 .7rem}
.prose p,.prose li{color:var(--ink-muted);margin-bottom:.9rem}
.prose ul{padding-left:1.2rem;list-style:disc}
.prose a{color:var(--gold);border-bottom:1px solid rgba(201,169,97,.4)}
.prose .meta{color:var(--ink-faint);font-size:.85rem}

/* ---------- footer ---------- */
.site-footer{position:relative;isolation:isolate;background:var(--surface-deep);border-top:1px solid var(--hair);padding:3.5rem 0 2rem;font-size:.85rem;color:var(--ink-faint)}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/img/pattern-kikko.svg") center/45px 78px repeat;opacity:.09}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem}
.footer-top img{height:30px;width:auto;opacity:.9}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.6rem}
.footer-nav a{color:var(--ink-muted);min-height:44px;display:inline-flex;align-items:center;transition:color .2s ease}
.footer-nav a:hover{color:var(--gold)}
.footer-lang{display:flex;gap:.3rem}
.footer-lang a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-chip);letter-spacing:.08em;color:var(--ink-faint)}
.footer-lang a[aria-current="true"]{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--hair);padding-top:1.4rem;display:grid;gap:.8rem}
.credits summary{cursor:pointer;font-size:.75rem;opacity:.75;min-height:44px;display:flex;align-items:center}
.credits ul{font-size:.75rem;opacity:.75;margin-top:.4rem;display:grid;gap:.15rem}
.credits li a{display:inline-flex;align-items:center;min-height:24px}
.credits a{text-decoration:underline;text-underline-offset:2px}
.copyright{font-size:.75rem;opacity:.7}
.credits-link{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:2px}
.credit-list li{font-size:.85rem}
.credit-list li a{display:inline-flex;align-items:center;min-height:24px}

/* ---------- mascot v3 (kawaii front-facing 豆柴) + paw prints + treats ---------- */
.shiba{position:fixed;left:0;top:0;z-index:40;width:108px;height:90px;pointer-events:none;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.shiba svg{width:108px;height:90px;overflow:visible;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;filter:drop-shadow(0 8px 8px rgba(30,4,10,.45))}
.shiba.face-left svg{transform:scaleX(-1)}
.shiba .pose-side{display:none}
.shiba.run .pose-side{display:block}
.shiba.run .pose-front{display:none}
.shiba.dash svg{filter:drop-shadow(0 8px 8px rgba(30,4,10,.45)) blur(0)}
.shiba.dash.face-left svg{transform:scaleX(-1) skewX(8deg)}
.shiba.dash:not(.face-left) svg{transform:skewX(-8deg)}
.dust{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:rgba(241,226,181,.55);animation:puff .7s ease-out forwards;pointer-events:none}
@keyframes puff{0%{opacity:.7;transform:translate(var(--dx,0),0) scale(.4)}100%{opacity:0;transform:translate(var(--dx,0),-12px) scale(2.2)}}
.shiba .eyes-happy,.shiba .eyes-sleep,.shiba .wink,.shiba .mouth-open,.shiba .tongue,.shiba .zz{opacity:0}
/* facing: a little lean tells you which way it is heading */
.shiba.run .tongue{opacity:1}
.shiba.sleep .eyes-open,.shiba.happy .eyes-open,.shiba.eat .eyes-open{opacity:0}
.shiba.happy .eyes-happy,.shiba.eat .eyes-happy{opacity:1}
.shiba.sleep .eyes-sleep{opacity:1}
.shiba.sleep .mouth{opacity:0}
.shiba.sleep .zz{opacity:1}
.shiba.blink .eyes-open{opacity:0}
.shiba.blink .eyes-happy{opacity:1}
.shiba.wink .eyes-happy{opacity:0}
.shiba.wink .eye-r{opacity:0}
.shiba.wink .wink{opacity:1}
.shiba.eat .mouth{opacity:0}
.shiba.eat .mouth-open{opacity:1}
.shiba .heart-pop{position:absolute;left:50%;top:-4px;width:26px;height:24px;margin-left:-13px;opacity:0;pointer-events:none}
.shiba .heart-pop svg{width:100%;height:100%;display:block}
.shiba.love .heart-pop{animation:heart 1.3s var(--ease-out) forwards}
.shiba.jump .tongue{opacity:1}
@keyframes heart{0%{opacity:0;transform:translateY(6px) scale(.4)}30%{opacity:1;transform:translateY(-8px) scale(1.15)}100%{opacity:0;transform:translateY(-34px) scale(1)}}
.paw-layer{position:fixed;inset:0;z-index:39;pointer-events:none;overflow:hidden}
.paw-print{position:absolute;left:0;top:0;width:22px;height:22px;fill:var(--gold-tint);opacity:.45;transform-origin:center;animation:pawin .3s ease-out;transition:opacity 1.5s ease}
.paw-print.is-gone{opacity:0}
@keyframes pawin{from{opacity:0}to{opacity:.45}}
.treat{position:fixed;left:0;top:0;width:40px;height:40px;z-index:39;pointer-events:none;animation:drop .5s var(--ease-out);filter:drop-shadow(0 4px 4px rgba(30,4,10,.4))}
.treat.is-eaten .d1{animation:bite .4s ease-in .1s forwards}.treat.is-eaten .d2{animation:bite .4s ease-in .55s forwards}.treat.is-eaten .d3{animation:bite .4s ease-in 1s forwards}
.treat svg circle{transform-box:fill-box;transform-origin:center}
@keyframes bite{to{transform:scale(0);opacity:0}}
@keyframes drop{from{opacity:0;transform:translateY(-30px) var(--tr,)}to{opacity:1}}
.shiba-dock{position:fixed;right:12px;bottom:12px;z-index:41;display:flex;align-items:center;gap:.5rem}
.shiba-toggle,.shiba-treat{height:44px;border-radius:var(--r-chip);background:rgba(92,18,32,.92);border:1px solid var(--hair-strong);color:var(--ink-faint);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.shiba-toggle{width:44px}
.shiba-treat{padding:0 .9rem 0 .5rem;font-size:.78rem;letter-spacing:.06em;color:var(--ink)}
.shiba-treat svg{width:26px;height:26px}
.shiba-toggle svg{width:20px;height:20px}
.shiba-toggle:hover,.shiba-toggle[aria-pressed="true"],.shiba-treat:hover{color:var(--gold);border-color:var(--gold)}
.shiba-treat:active,.shiba-toggle:active{transform:scale(.96)}
body.no-shiba .shiba,body.no-shiba .paw-layer,body.no-shiba .treat{display:none}
@media(max-width:760px){.shiba{width:84px;height:70px}.shiba svg{width:84px;height:70px}.shiba-treat span{display:none}.shiba-treat{width:44px;padding:0}}

/* screenshot-check mode (see site.js ?static=1): cap the hero so a tall headless window shows the page below it */
body.is-static .hero{min-height:820px}
body.is-static .hero--region{min-height:720px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .map-layout,.deck-layout{grid-template-columns:minmax(0,1fr)}
  .deck-wrap{position:static}
  .route{grid-template-columns:1fr;gap:2rem}
  .route::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .stop{padding-top:0;padding-left:2rem}
  .stop::before{top:6px}
}
@media(max-width:760px){
  .main-nav{position:fixed;inset:var(--header-h) 0 0 0;background:var(--surface-overlay);padding:1.5rem 4vw;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
  .main-nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a{display:flex;min-height:56px;align-items:center;font-size:1.15rem;border-bottom:1px solid var(--hair)}
  .main-nav a::after{display:none}
  .nav-toggle{display:flex}
  .site-header.is-solid,.site-header.menu-open{background:rgba(92,18,32,.96)}
  .duo{grid-template-columns:1fr}
  .hero-inner{padding-bottom:4rem}
  .hero--region h1{font-size:clamp(3rem,18vw,5rem)}
  .deck{width:min(100%,360px)}
  .site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/img/pattern-kikko.svg") center/45px 78px repeat;opacity:.09}
.footer-top{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .slide img,.hero h1,.hero-lead,.hero-ctas,.hero-kicker,.hero-wa{animation:none;opacity:1;transform:none}
  .hero .slide{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .jp-map,.jp-region,.spot,.spot img,.hcard{transition-duration:.01ms}
  .stamp{transition:none}
  .burst.is-on{animation:burst-hold .9s linear forwards}
  @keyframes burst-hold{0%,72%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  .shiba .body-group,.shiba .tail,.shiba .head,.shiba .ear,.shiba .paw,.shiba .zz,.paw-print,.treat{animation:none}
  /* Belt and braces: site.js already refuses to spawn petals here. */
  .petal-fall,.petal{animation:none;opacity:0}
}



/* Touch targets: WCAG 2.5.5. Language switcher, card CTAs and short nav labels were 42-43px
   tall or under 44px wide. Min-height/width only -- no visual restyle. */
.lang-menu a,.lang-switch a{min-height:44px;box-sizing:border-box;display:flex;align-items:center}
.btn-line{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.main-nav a{min-width:44px;justify-content:center}