/* Layout: a festival-night almanac — a dark 紺 hero lit by the current season's traditional colour, with the season falling across it (petals, fireflies, maple leaves, snow); vermilion (朱) and gold (金) carry the energy through every page. */
:root{
  --paper:#EEF0F4;      /* 白藍がかった紙 */
  --surface:#FFFFFF;
  --ink:#141927;        /* 墨 */
  --muted:#545B6C;
  --line:#D3D8E2;
  --ai:#1F4FA0;         /* 瑠璃 */
  --shu:#D3381C;        /* 朱 */
  --gold-t:#9A7120;     /* gold for text on paper */
  --pat:rgba(20,25,39,.16);
  --shadow:0 18px 36px -16px rgba(20,25,39,.38);
  /* constant: the night stage (same in both themes) */
  --night:#0B1129; --night2:#1A2558; --on-night:#F5F0E4; --on-night-m:#B9BFD8; --gold:#E9C66B; --shu-c:#E9462A;
  --kisetsu:#917347;    /* seasonal colour, set by script */
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --s-1:.8125rem; --s0:1rem; --s1:1.1875rem; --s2:1.5rem; --s3:2.25rem; --s4:3.25rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C101C; --surface:#151B2C; --ink:#EDEBF3; --muted:#A6ACC0; --line:#262E46; --ai:#93B4FF; --shu:#FF6A4B; --gold-t:#E9C66B; --pat:rgba(237,235,243,.12); --shadow:0 18px 36px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C101C; --surface:#151B2C; --ink:#EDEBF3; --muted:#A6ACC0; --line:#262E46; --ai:#93B4FF; --shu:#FF6A4B; --gold-t:#E9C66B; --pat:rgba(237,235,243,.12); --shadow:0 18px 36px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.7}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
a{color:var(--ai)}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}

/* bilingual */
.bi{display:flex;flex-direction:column;gap:.1em}
.ja{font-family:var(--f-body)}
.bi>.ja{font-size:.82em;color:var(--muted);font-weight:500}
h1.bi>.ja,h2.bi>.ja,h3.bi>.ja{font-family:var(--f-display)}
html[data-lang="en"] .ja{display:none!important}
html[data-lang="ja"] .en{display:none!important}
html[data-lang="ja"] .bi>.ja{font-size:1em;color:inherit}
.label{font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;color:var(--shu);font-weight:700;display:flex;align-items:center;gap:10px}
.label::before{content:"";width:22px;height:3px;background:currentColor;flex:none}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--shu-c),var(--gold) 45%,var(--kisetsu));transition:background .6s}
.head-row{display:flex;align-items:center;gap:18px;padding-block:12px 15px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--shu-c);color:#fff;font-family:var(--f-display);font-size:24px;font-weight:800;line-height:1;border-radius:6px;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transition:transform .3s}
.brand:hover .brand-mark{transform:rotate(4deg) scale(1.06)}
.brand b{display:block;font-family:var(--f-display);font-size:var(--s1);letter-spacing:.02em;font-weight:800}
.brand small{display:block;font-size:var(--s-1);color:var(--muted);letter-spacing:.2em}
.nav{display:flex;gap:4px;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none}
.nav a{white-space:nowrap;text-decoration:none;color:var(--ink);padding:7px 10px;font-size:.92rem;border-radius:999px;font-weight:500;transition:background .2s,color .2s}
.nav a:hover{background:color-mix(in srgb,var(--shu) 12%,transparent);color:var(--shu)}
.nav a .ja{margin-left:.35em;color:var(--muted);font-size:.85em}
html[data-lang="ja"] .nav a .ja{margin-left:0;color:inherit;font-size:1em}
.nav a[aria-current="page"]{background:var(--shu-c);color:#fff}
.nav a[aria-current="page"] .ja{color:#fff;opacity:.85}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.lang button{font:inherit;font-size:var(--s-1);background:transparent;color:var(--muted);border:0;padding:6px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ticker */
.ticker{background:var(--shu-c);color:#fff;overflow:hidden;white-space:nowrap;font-size:.9rem;border-bottom:1px solid rgba(0,0,0,.15)}
.tk-track{display:inline-flex;gap:0;padding-block:9px;animation:tick 55s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-item{display:inline-flex;align-items:center;gap:10px;padding-inline:22px}
.tk-item b{font-family:var(--f-display);font-weight:800}
.tk-item .gem{color:var(--gold);font-size:.7em}
.tk-item .tag{font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.22);padding:1px 8px;border-radius:999px}
@keyframes tick{to{transform:translateX(-50%)}}

/* hero — the night stage */
.hero{position:relative;overflow:hidden;padding-block:56px 48px;color:var(--on-night);isolation:isolate;
  --ink:var(--on-night); --muted:var(--on-night-m); --line:rgba(245,240,228,.18); --ai:var(--gold); --shu:var(--gold);
  background:
    radial-gradient(55% 75% at 22% 42%, color-mix(in srgb,var(--kisetsu) 62%,transparent), transparent 72%),
    radial-gradient(38% 55% at 88% 12%, color-mix(in srgb,var(--shu-c) 42%,transparent), transparent 70%),
    radial-gradient(30% 40% at 70% 95%, color-mix(in srgb,var(--gold) 18%,transparent), transparent 70%),
    linear-gradient(165deg,var(--night2),var(--night) 70%);
  transition:background .8s}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;
  background-image:radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%),radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%);
  background-size:64px 32px;background-position:0 0,32px 16px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 55%);mask-image:linear-gradient(to top,#000,transparent 55%)}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.wheel-box{max-width:480px;width:100%;justify-self:center;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
#wheel{width:100%;height:auto;display:block;overflow:visible}
#wheel .seg{cursor:pointer;transition:fill-opacity .25s;transform-box:view-box;transform-origin:center;animation:segin .7s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--d) * 14ms)}
#wheel .seg:hover{fill-opacity:1}
#wheel .seg.cur{filter:drop-shadow(0 0 7px var(--gold))}
@keyframes segin{from{opacity:.25;transform:scale(.82) rotate(-14deg)}}
#wheel .sk-label{font-family:var(--f-display);font-size:11px;fill:var(--on-night-m);text-anchor:middle;dominant-baseline:central}
#wheel .sk-label.now{fill:var(--gold);font-weight:800;font-size:13px}
#wheel .c-date{font-family:var(--f-display);font-size:46px;font-weight:800;fill:var(--gold);text-anchor:middle}
#wheel .c-sub{font-size:10.5px;letter-spacing:.2em;fill:var(--on-night-m);text-anchor:middle}
#wheel .c-kou{font-family:var(--f-display);font-size:15px;fill:var(--on-night);text-anchor:middle}
#wheel .ring{fill:rgba(11,17,41,.55);stroke:var(--gold);stroke-opacity:.5}
#wheel .ring2{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-dasharray:2 5}
#wheel .cur-out{fill:none;stroke:var(--gold);stroke-width:2;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{stroke-opacity:.35}}
#wheel .today-dot{fill:var(--gold)}

.kou{display:flex;gap:28px;align-items:flex-start;min-width:0}
.kou-kanji{writing-mode:vertical-rl;font-size:clamp(3.75rem,8vw,7rem);font-weight:800;letter-spacing:.08em;line-height:1;padding:.18em .12em;flex:none;color:var(--gold);text-shadow:0 0 28px color-mix(in srgb,var(--gold) 45%,transparent),0 2px 0 rgba(0,0,0,.35);border-right:6px solid var(--kisetsu);animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:.3;transform:translateY(18px)}}
.kou-text{display:flex;flex-direction:column;gap:14px;min-width:0;padding-top:6px}
.kou-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hanko{display:inline-grid;place-items:center;width:50px;height:50px;background:var(--shu-c);color:#fff;font-family:var(--f-display);font-weight:800;font-size:15px;line-height:1.05;text-align:center;border-radius:6px;transform:rotate(-8deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 6px 16px rgba(233,70,42,.45);animation:stamp .6s .3s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp{from{transform:rotate(-8deg) scale(1.5);opacity:.4}}
.kou-reading{font-family:var(--f-display);font-size:var(--s1);letter-spacing:.14em}
.kou-romaji{font-style:italic;color:var(--muted);margin-top:-10px}
.kou-en{font-family:var(--f-display);font-size:var(--s3);line-height:1.18;text-wrap:balance;font-weight:800}
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:4px 0 0;font-size:.92rem}
.meta dt{color:var(--muted);font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.meta dd{margin:0;font-variant-numeric:tabular-nums}
.meta dd .ja{display:block}
.chip{display:inline-flex;align-items:center;gap:8px}
.sw{width:14px;height:14px;background:var(--kisetsu);outline:1px solid var(--line);flex:none;border-radius:3px}
.notes{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:16px;max-width:62ch}
.nb{display:grid;gap:4px}
.nb .bi{font-size:.95rem}
.nb .bi>.ja{color:var(--muted)}
.nb .lede{font-family:var(--f-display);font-size:var(--s1);line-height:1.6}
.nb .lede>.ja{font-family:var(--f-display)}
html[data-lang="ja"] .nb .bi>.ja{color:var(--ink)}
.btn{font:inherit;font-size:.9rem;font-weight:700;display:inline-flex;align-items:center;gap:8px;background:var(--gold);border:0;color:var(--night);padding:9px 18px;cursor:pointer;text-decoration:none;border-radius:999px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px var(--gold)}
.intro{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-top:1px solid var(--line);padding-top:26px}
.intro .num{font-family:var(--f-display);font-size:var(--s4);font-weight:800;line-height:1;color:var(--gold)}
.intro p.bi{font-size:.92rem}
.intro b{color:var(--on-night)}

/* page banners */
.pbanner{position:relative;overflow:hidden;color:#fff;background:var(--bb);padding-block:60px 52px;isolation:isolate}
.pbanner::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background-image:var(--bp);background-size:var(--bs,40px 40px)}
.pbanner .bk{position:absolute;right:max(16px,4vw);top:50%;transform:translateY(-52%) rotate(-6deg);font-family:var(--f-display);font-weight:800;font-size:clamp(8rem,22vw,15rem);line-height:1;color:rgba(255,255,255,.14);pointer-events:none;z-index:-1}
.pbanner .eyebrow{font-size:var(--s-1);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pbanner h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1.1;margin-top:8px;text-shadow:0 3px 18px rgba(0,0,0,.3)}
.pbanner h1 .ja{font-size:.5em;color:rgba(255,255,255,.85);margin-top:6px}
html[data-lang="ja"] .pbanner h1 .ja{font-size:1em;color:#fff}
.pbanner p{max-width:56ch;margin-top:14px;color:rgba(255,255,255,.88)}
.pbanner p .ja{color:rgba(255,255,255,.8)}
.pb-seasons{--bb:linear-gradient(130deg,color-mix(in srgb,var(--kisetsu) 85%,#000) 0%,var(--night2) 60%,var(--night));--bp:radial-gradient(circle,#fff 1.5px,transparent 2px);--bs:22px 22px}
.pb-places{--bb:radial-gradient(60% 90% at 85% 20%,#F2A33A55,transparent 70%),linear-gradient(130deg,#C8321A,#6E160F);--bp:repeating-linear-gradient(45deg,#fff 0 1.5px,transparent 1.5px 14px),repeating-linear-gradient(-45deg,#fff 0 1.5px,transparent 1.5px 14px)}
.pb-culture{--bb:radial-gradient(60% 90% at 85% 20%,#E9462A44,transparent 70%),linear-gradient(130deg,#2457B5,#0E1636);--bp:radial-gradient(circle at 50% 100%,transparent 22%,#fff 23% 28%,transparent 29% 46%,#fff 47% 52%,transparent 53% 70%,#fff 71% 76%,transparent 77%);--bs:48px 24px}
.pb-crafts{--bb:radial-gradient(60% 90% at 85% 20%,#E9C66B55,transparent 70%),linear-gradient(130deg,#9C6A1C,#2B1A08);--bp:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);--bs:30px 30px}
.pb-travel{--bb:radial-gradient(60% 90% at 85% 20%,#E9C66B44,transparent 70%),linear-gradient(130deg,#24805A,#0B2A21);--bp:linear-gradient(#fff 2px,transparent 2px),linear-gradient(90deg,#fff 2px,transparent 2px);--bs:28px 28px}

/* sections */
section.band{padding-block:72px}
section.band.alt{background:var(--surface)}
.sec-head{display:grid;gap:10px;margin-bottom:36px;max-width:70ch}
.sec-head h2{font-size:var(--s3);font-weight:800}
.sec-head .lead{color:var(--muted)}
.sec-head .lead>.ja{color:var(--muted)}

/* upcoming */
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.day{padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--paper);border-radius:14px;border-top:5px solid var(--gold);transition:transform .25s,box-shadow .25s}
section.band.alt .day{background:var(--paper)}
.day:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
section.band .day:first-child,.day:first-child{background:linear-gradient(150deg,var(--shu-c),#9E1F10);color:#fff;border-top-color:var(--gold);--muted:rgba(255,255,255,.85)}
.day .when{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.day .date{font-family:var(--f-display);font-size:var(--s3);font-weight:800;line-height:1}
.day .count{font-size:var(--s-1);color:var(--muted);font-weight:700}
.day .count.today{color:var(--night);background:var(--gold);padding:1px 10px;border-radius:999px}
.day h3{font-size:var(--s1)}
.day p{font-size:.9rem;color:var(--muted)}
.day h3.bi>.ja{color:var(--muted)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.season{display:flex;flex-direction:column;gap:14px;min-width:0;--sc:#E8839B}
.season:nth-child(2){--sc:#1E9E8A}
.season:nth-child(3){--sc:#DC5A1E}
.season:nth-child(4){--sc:#3B6FB6}
.season-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--sc);color:#fff}
.season-h b{font-family:var(--f-display);font-size:var(--s3);line-height:1;font-weight:800}
.season-h .label{color:#fff}
.season-h .label::before{display:none}
.sekki{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--c);padding:14px;border-radius:12px;transition:box-shadow .25s,transform .25s}
.sekki:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.sekki.is-now{box-shadow:0 0 0 2px var(--shu),var(--shadow)}
.sekki-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;margin-bottom:8px}
.sekki-h .sw{width:22px;height:22px;background:var(--c);border-radius:50%;outline:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.sekki-h h3{font-size:var(--s1);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:800}
.sekki-h h3 small{font-family:var(--f-body);font-size:var(--s-1);color:var(--muted);font-weight:500}
.sekki-h .cn{grid-column:2;font-size:var(--s-1);color:var(--muted)}
.sekki-m{font-size:var(--s-1);color:var(--muted);margin:-2px 0 8px;line-height:1.55}
.kl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kl button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:0 8px;padding:7px 8px;border-top:1px dotted var(--line);font-size:.86rem;line-height:1.45;border-radius:6px;transition:background .15s}
.kl button:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}
.kl button:focus-visible{outline:2px solid var(--shu);outline-offset:-2px}
.kl .d{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--s-1);padding-top:2px}
.kl .k{font-family:var(--f-display);font-weight:800;font-size:1rem}
.kl .t{grid-column:2;display:flex;flex-direction:column}
.kl .t .ja{color:var(--muted);font-size:.92em}
.kl button.now{background:var(--shu-c);color:#fff}
.kl button.now .d,.kl button.now .t .ja{color:#fff;opacity:.85}

/* tabs + cards */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.tabs button{font:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:9px 20px;border-radius:999px;display:flex;gap:8px;align-items:baseline;transition:transform .2s}
.tabs button:hover{transform:translateY(-2px)}
.tabs button b{font-family:var(--f-display);font-size:1.15rem}
.tabs button[aria-selected="true"]{background:var(--shu-c);color:#fff;border-color:var(--shu-c);box-shadow:0 8px 18px -8px var(--shu-c)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
section.band.alt .card{background:var(--paper)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:var(--s2);font-weight:800}
.card .where{font-size:var(--s-1);letter-spacing:.08em;color:var(--shu);font-weight:700;display:flex;gap:12px;flex-wrap:wrap}
.card .desc{font-size:.93rem}
.card .desc>.ja{font-size:.88em}
.card-foot{padding:0 20px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pr{font-size:11px;letter-spacing:.1em;border:1px solid var(--muted);color:var(--muted);padding:0 6px;border-radius:999px;line-height:1.6}
.link{font-size:.9rem;font-weight:700;text-decoration:none;color:#fff;background:var(--shu-c);padding:6px 14px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.link:hover{transform:translateX(3px);box-shadow:0 6px 14px -6px var(--shu-c)}
a.link.plain{background:none;color:var(--shu);padding:0;border-bottom:2px solid currentColor;border-radius:0}

/* place scenes */
.scene{position:relative;height:150px;overflow:hidden;display:flex;align-items:flex-end;padding:14px 18px;color:#fff;background:var(--sg)}
.scene::before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle at 50% 100%,transparent 22%,#fff 23% 28%,transparent 29% 46%,#fff 47% 52%,transparent 53% 70%,#fff 71% 76%,transparent 77%);background-size:40px 20px;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.scene .sun{position:absolute;right:22px;top:18px;width:56px;height:56px;border-radius:50%;background:var(--sun);box-shadow:0 0 30px var(--sun);transition:transform .5s}
.card:hover .scene .sun{transform:translateY(-6px) scale(1.08)}
.scene .nm{position:relative;font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;text-shadow:0 3px 14px rgba(0,0,0,.35);letter-spacing:.04em}
.s-spring{--sg:linear-gradient(160deg,#F7B6C4,#D9607E 70%,#8E2F52);--sun:#FFF1F4}
.s-summer{--sg:linear-gradient(160deg,#2DB3A6,#1C6FA8 70%,#123E6E);--sun:#FFE27A}
.s-autumn{--sg:linear-gradient(160deg,#F2A33A,#D63A1E 65%,#6E1610);--sun:#FFE7A8}
.s-winter{--sg:linear-gradient(160deg,#B9D2EE,#5B86C2 65%,#1E3263);--sun:#FFFFFF}

/* pattern bands for crafts (traditional textile patterns) */
.pat{height:130px;position:relative;background-color:var(--cc);--pat:rgba(255,255,255,.32);transition:background-size .5s}
.pat span{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.35);color:#fff;padding:2px 9px;border-radius:999px}
.p-ichimatsu{--cc:#2A5CAA;background-image:conic-gradient(var(--pat) 25%,transparent 0 50%,var(--pat) 0 75%,transparent 0);background-size:26px 26px}
.p-seigaiha{--cc:#1D3F8C;background-image:radial-gradient(circle at 50% 100%,transparent 22%,var(--pat) 23% 30%,transparent 31% 46%,var(--pat) 47% 54%,transparent 55% 70%,var(--pat) 71% 78%,transparent 79%),radial-gradient(circle at 50% 100%,transparent 22%,var(--pat) 23% 30%,transparent 31% 46%,var(--pat) 47% 54%,transparent 55% 70%,var(--pat) 71% 78%,transparent 79%);background-size:44px 22px;background-position:0 0,22px 11px}
.p-same{--cc:#9E1B1B;background-image:radial-gradient(var(--pat) 1.6px,transparent 2.2px),radial-gradient(var(--pat) 1.6px,transparent 2.2px);background-size:10px 10px;background-position:0 0,5px 5px}
.p-shima{--cc:#4D5B6B;background-image:repeating-linear-gradient(90deg,var(--pat) 0 3px,transparent 3px 8px,var(--pat) 8px 9px,transparent 9px 18px)}
.p-koshi{--cc:#6E8B3D;background-image:linear-gradient(var(--pat) 2px,transparent 2px),linear-gradient(90deg,var(--pat) 2px,transparent 2px);background-size:24px 24px}
.p-hishi{--cc:#2C2F3A;background-image:repeating-linear-gradient(45deg,var(--pat) 0 1.5px,transparent 1.5px 13px),repeating-linear-gradient(-45deg,var(--pat) 0 1.5px,transparent 1.5px 13px)}

/* customs */
.customs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.custom{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-width:0;transition:transform .3s,box-shadow .3s}
section.band.alt .custom{background:var(--paper)}
.custom:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow)}
.custom .v{writing-mode:vertical-rl;font-family:var(--f-display);font-size:2rem;font-weight:800;line-height:1.05;letter-spacing:.06em;color:var(--shu)}
.custom h3{font-size:var(--s1);font-weight:800}
.custom .when{font-size:var(--s-1);color:var(--gold-t);letter-spacing:.06em;font-weight:700}
.custom .desc{font-size:.9rem}
.custom .desc>.ja{font-size:.88em}
.customs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.customs.four .custom:nth-child(1) .v{color:#E8839B}
.customs.four .custom:nth-child(2) .v{color:#1E9E8A}
.customs.four .custom:nth-child(3) .v{color:#DC5A1E}
.customs.four .custom:nth-child(4) .v{color:#3B6FB6}

/* plan */
.plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.plan a{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:22px;text-decoration:none;color:#fff;min-width:0;border-radius:16px;background:var(--pc);transition:transform .3s,box-shadow .3s;isolation:isolate}
.plan a::after{content:attr(data-k);position:absolute;right:-6px;bottom:-22px;font-family:var(--f-display);font-weight:800;font-size:6.5rem;line-height:1;color:rgba(255,255,255,.16);z-index:-1;transition:transform .4s}
.plan a:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan a:hover::after{transform:rotate(-8deg) scale(1.1)}
.plan a:nth-child(1){--pc:linear-gradient(150deg,#C8321A,#7A1A0E)}
.plan a:nth-child(2){--pc:linear-gradient(150deg,#2457B5,#14295C)}
.plan a:nth-child(3){--pc:linear-gradient(150deg,#B88424,#5E3F0C)}
.plan a:nth-child(4){--pc:linear-gradient(150deg,#24805A,#0F3D2B)}
.plan .pr{color:#fff;border-color:rgba(255,255,255,.7)}
.plan b{font-family:var(--f-display);font-size:var(--s2);font-weight:800}
.plan b .ja{color:rgba(255,255,255,.85)}
.plan small{font-size:.86rem;opacity:.9}

/* pages */
section.band.page{padding-block:56px 72px}

/* home teasers */
.teasers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.teaser{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:22px;min-height:230px;border-radius:18px;text-decoration:none;color:#fff;min-width:0;background:var(--tc);isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.teaser:hover{transform:translateY(-8px) rotate(-.8deg);box-shadow:var(--shadow)}
.teaser:nth-child(1){--tc:linear-gradient(155deg,var(--kisetsu),color-mix(in srgb,var(--kisetsu) 35%,#0B1129))}
.teaser:nth-child(2){--tc:linear-gradient(155deg,#E2452B,#7A1A0E)}
.teaser:nth-child(3){--tc:linear-gradient(155deg,#2D63C8,#101E4A)}
.teaser:nth-child(4){--tc:linear-gradient(155deg,#C6922C,#4F340A)}
.teaser .tv{position:absolute;right:-10px;bottom:-18px;font-family:var(--f-display);font-size:5.5rem;font-weight:800;line-height:1;color:rgba(255,255,255,.18);z-index:-1;writing-mode:vertical-rl;transition:transform .45s}
.teaser:hover .tv{transform:translateY(-10px) scale(1.06)}
.teaser b{font-family:var(--f-display);font-size:var(--s2);font-weight:800;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.teaser .tx{font-size:.9rem;color:rgba(255,255,255,.9);margin-top:auto}
.teaser .tx>.ja{color:rgba(255,255,255,.82)}
.teaser .bi>b.ja{color:rgba(255,255,255,.85);font-size:.62em;font-weight:700}
html[data-lang="ja"] .teaser .bi>b.ja{color:#fff;font-size:1em}
.teaser .go{font-size:var(--s-1);font-weight:700;letter-spacing:.12em;color:var(--gold)}

/* festival year list */
.fest{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.fest li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:4px 16px;padding:16px 18px;background:var(--paper);border-radius:12px;min-width:0;transition:transform .2s}
.fest li:hover{transform:translateX(4px)}
.fest .fd{font-family:var(--f-display);font-weight:800;font-size:var(--s1);font-variant-numeric:tabular-nums;color:var(--shu)}
.fest .fd small{display:block;font-family:var(--f-body);font-weight:500;font-size:var(--s-1);color:var(--muted)}
.fest h3{font-size:var(--s1)}
.fest p{font-size:.9rem;color:var(--muted)}
.fest p>.ja{color:var(--muted)}
.fest li.next{background:linear-gradient(150deg,var(--shu-c),#9E1F10);color:#fff;--muted:rgba(255,255,255,.85)}
.fest li.next .fd{color:var(--gold)}

footer{position:relative;background:var(--night);color:var(--on-night-m);padding-block:48px 52px;font-size:.85rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,var(--shu-c),var(--gold),var(--kisetsu))}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px}
.foot p+p{margin-top:8px}
.foot b{color:var(--gold);font-family:var(--f-display);font-size:1.1rem}
footer .bi>.ja{color:var(--on-night-m)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));background:var(--night);color:var(--on-night);padding:10px 18px;font-size:.88rem;border-radius:999px;max-width:calc(100% - 32px);z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.35)}

@media (min-width:1000px){.head-row{flex-wrap:nowrap}.lang{flex:none}}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .wheel-box{max-width:400px}
  .cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.customs,.customs.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan,.days,.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hero{padding-block:32px}
  .kou{gap:18px}
  .kou-en{font-size:var(--s2)}
  .intro{grid-template-columns:1fr;gap:16px}
  .cal,.grid3,.customs,.customs.four,.plan,.days,.teasers,.fest{grid-template-columns:1fr}
  .teaser{min-height:180px}
  section.band.page{padding-block:32px 48px}
  .foot{grid-template-columns:1fr}
  section.band{padding-block:48px}
  .sec-head h2{font-size:var(--s2)}
  .pbanner{padding-block:40px 36px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker{overflow-x:auto}
}
.tk-g{display:inline-flex}
.pbanner .eyebrow .ja{margin-left:.8em}
html[data-lang="ja"] .pbanner .eyebrow .ja{margin-left:0}
#wheel .qline{stroke:var(--gold);stroke-opacity:.35}

/* ===== Japan map ===== */
.pb-map{--bb:radial-gradient(60% 90% at 85% 20%,#E9462A55,transparent 70%),linear-gradient(130deg,#1F6E8C,#0B1129 75%);--bp:radial-gradient(circle at 50% 100%,transparent 22%,#fff 23% 28%,transparent 29% 46%,#fff 47% 52%,transparent 53% 70%,#fff 71% 76%,transparent 77%);--bs:48px 24px}
.pb-samurai{--bb:radial-gradient(55% 90% at 85% 15%,#E9C66B44,transparent 70%),linear-gradient(130deg,#7A1A0E,#2A0F0B 55%,#0B1129);--bp:repeating-linear-gradient(45deg,#fff 0 1.5px,transparent 1.5px 14px),repeating-linear-gradient(-45deg,#fff 0 1.5px,transparent 1.5px 14px)}
.pbanner .nick{font-family:var(--f-display);font-size:var(--s2);font-weight:700;color:var(--gold);margin-top:10px}
.pbanner .nick .ja{color:var(--gold)}
.mapstage{position:relative;overflow:hidden;isolation:isolate;padding-block:32px 40px;color:var(--on-night);
  --ink:var(--on-night);--muted:var(--on-night-m);--line:rgba(245,240,228,.2);--shu:var(--gold);--ai:var(--gold);
  background:radial-gradient(45% 55% at 70% 35%,color-mix(in srgb,var(--shu-c) 20%,transparent),transparent 70%),radial-gradient(40% 50% at 15% 85%,color-mix(in srgb,var(--kisetsu) 35%,transparent),transparent 70%),linear-gradient(170deg,var(--night2),var(--night) 75%)}
.mapstage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;background-image:radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%),radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%);background-size:64px 32px;background-position:0 0,32px 16px}
.modes{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);margin-bottom:22px}
.modes a{display:flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--on-night);padding:9px 20px;border-radius:999px;font-weight:500;transition:background .2s}
.modes a:hover{background:rgba(255,255,255,.1)}
.modes a b{font-family:var(--f-display);font-size:1.1rem}
.modes a[aria-current="true"]{background:var(--gold);color:var(--night)}
.map-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}
.map-box{min-width:0}
.jmap{width:100%;height:auto;display:block;max-height:82vh;overflow:visible}
.jmap .pf{fill:var(--rc);stroke:#0B1129;stroke-width:.45;stroke-linejoin:round;cursor:pointer;outline:none;transition:fill .3s,filter .2s}
.jmap .pf:hover,.jmap .pf.on{filter:brightness(1.2) saturate(1.1)}
.jmap .hov{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 0 4px var(--gold))}
.jmap .mk{display:none}
.jmap.sam .pf{fill:#2A3463}
.jmap.sam .pf.has2{fill:#4A3D74}
.jmap.sam .pf.has{fill:#9C2E1C}
.jmap.sam .mk{display:inline}
.mkr circle{fill:var(--shu-c);stroke:var(--gold);stroke-width:1.1;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.mkr text{fill:#fff;font-family:var(--f-display);font-weight:800;font-size:7.6px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mkr:hover circle,.mkr:focus-visible circle{transform:scale(1.35)}
.mkr:focus-visible{outline:none}
.map-panel{min-width:0;position:sticky;top:120px;background:rgba(11,17,41,.62);border:1px solid var(--line);border-radius:20px;padding:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;gap:12px;min-height:340px;align-content:start}
.mp-kicker,.mp-sub{font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.mp-kicker .ja,.mp-sub .ja{margin-left:.6em}
html[data-lang="ja"] .mp-kicker .ja,html[data-lang="ja"] .mp-sub .ja{margin-left:0}
.mp-sub{margin-top:6px}
.mp-reg{justify-self:start;display:inline-flex;gap:8px;font-size:var(--s-1);font-weight:700;color:#fff;background:var(--rc);padding:2px 12px;border-radius:999px}
.mp-name{font-size:var(--s3);font-weight:800;color:var(--gold);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;line-height:1.15}
.mp-name small{font-family:var(--f-body);font-size:1rem;color:var(--on-night);font-weight:500}
.mp-name .ja{font-family:var(--f-display)}
h3.mp-name>.en+.ja{display:block;width:100%;font-size:.6em;color:var(--on-night-m)}
.mp-cap{display:flex;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--on-night-m)}
.mp-cap b{color:var(--on-night);font-weight:700;display:flex;gap:8px}
.mp-d{font-size:.95rem}
.mp-d>.ja{color:var(--on-night-m)}
.mp-h{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mp-h li{padding-left:16px;position:relative;font-size:.92rem}
.mp-h li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.mp-h li .ja{color:var(--on-night-m)}
.mp-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:.85rem}
.mp-legend span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-legend i{width:14px;height:14px;border-radius:4px;background:var(--rc);flex:none}
.mp-count{font-size:.95rem}.mp-count b{font-family:var(--f-display);font-size:var(--s3);color:var(--gold);margin-right:6px}
.mp-sam{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:transform .2s,background .2s}
.mp-sam:hover{transform:translateX(4px);background:rgba(255,255,255,.12)}
.mp-sam b{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--f-display);font-size:1.05rem}
.mp-sam small{color:var(--muted);font-size:.82rem}
.sk{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--shu-c);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.15rem;box-shadow:inset 0 0 0 2px var(--gold);flex:none}
.map-credit{margin-top:14px;font-size:11px;color:var(--on-night-m)}
.map-credit a{color:var(--on-night-m)}
.reg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.reg{min-width:0;display:grid;gap:10px;align-content:start}
.reg h3{display:flex;gap:10px;align-items:baseline;font-size:var(--s1);font-weight:800;padding-bottom:6px;border-bottom:3px solid var(--rc)}
.reg h3.bi{flex-direction:row}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);padding:6px 14px;border-radius:999px;border:1.5px solid var(--rc);background:var(--surface);font-size:.9rem;transition:background .2s,color .2s,transform .2s}
.pchip b{font-family:var(--f-display)}
.pchip span{color:var(--muted);font-size:.85em}
.pchip:hover{background:var(--rc);color:#fff;transform:translateY(-2px)}
.pchip:hover span{color:#fff}
html[data-lang="ja"] .pchip span{display:none}
html[data-lang="en"] .pchip b{font-family:var(--f-body);font-weight:500}
.sam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.scard .sk{width:48px;height:48px;font-size:1.35rem}
.st{display:flex;flex-direction:column;min-width:0}
.st b{font-family:var(--f-display);font-size:1.2rem;font-weight:800;line-height:1.3}
.st>span{font-size:.9rem}
.st small{color:var(--muted);font-size:.8rem}
.st em{font-style:normal;color:var(--shu);font-size:.82rem;font-weight:700}
.st em .ja{color:var(--shu)}

/* home map CTA */
.mapcta{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;border-radius:24px;padding:36px;color:var(--on-night);
  --ink:var(--on-night);--muted:var(--on-night-m);--shu:var(--gold);
  background:radial-gradient(50% 80% at 85% 30%,color-mix(in srgb,var(--shu-c) 40%,transparent),transparent 70%),linear-gradient(150deg,var(--night2),var(--night))}
.mapcta h2{font-size:var(--s3);font-weight:800}
.mapcta h2 .ja{color:var(--on-night-m)}
.mapcta .tx{color:var(--on-night-m);margin-top:10px;max-width:46ch}
.mapcta .tx .ja{color:var(--on-night-m)}
.mc-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mc-btns .btn.alt{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
#ctaMap{display:grid}
.ctam{width:100%;max-width:340px;height:auto;justify-self:center;display:block;filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}
.ctam .pf{fill:var(--rc);stroke:#0B1129;stroke-width:.5}
@keyframes floaty{50%{transform:translateY(-8px) rotate(-1deg)}}

/* detail pages */
.dgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px;align-items:start}
.dmain{min-width:0;display:grid;gap:20px;align-content:start}
.dside{min-width:0;position:sticky;top:120px;display:grid;gap:10px;justify-items:start}
.dh{font-size:var(--s2);font-weight:800;margin-top:14px}
.dh.bi{flex-direction:row;gap:12px;align-items:baseline;flex-wrap:wrap}
.lede{font-family:var(--f-display);font-size:var(--s1);line-height:1.65}
.lede>.ja{font-family:var(--f-display)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.facts>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.facts dt{font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;gap:8px;flex-wrap:wrap}
.facts dd{margin:4px 0 0;font-family:var(--f-display);font-size:1.15rem;font-weight:800;display:flex;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.facts dd a{color:var(--shu);display:flex;gap:8px}
.hl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hlc{position:relative;overflow:hidden;min-height:110px;display:flex;align-items:flex-end;padding:16px;border-radius:16px;color:#fff;background:linear-gradient(150deg,var(--rc),color-mix(in srgb,var(--rc) 40%,#0B1129));transition:transform .25s}
.hlc:hover{transform:translateY(-4px) rotate(-.5deg)}
.hlc b{font-family:var(--f-display);font-size:1.1rem;line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hlc .ja{color:rgba(255,255,255,.85)}
html[data-lang="ja"] .hlc .ja{color:#fff}
.mini-sams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini-sams .mp-sam{background:var(--surface);color:var(--ink)}
.mini-sams .mp-sam small{color:var(--muted)}
.muted{color:var(--muted)}
.aff{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:14px;border:1px dashed var(--line);background:var(--surface)}
.pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.pn a{text-decoration:none;color:var(--shu);font-weight:700;display:flex;gap:6px}
.minimap{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}
.mini{width:100%;height:auto;display:block}
.mini .pf{fill:var(--line);stroke:var(--surface);stroke-width:.5}
.mini .pf.hl{fill:var(--shu-c)}
.mini .pf.hl2{fill:var(--gold)}
.mm-cap{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.key{width:12px;height:12px;border-radius:3px;display:inline-block}
.key.k1{background:var(--shu-c)}.key.k2{background:var(--gold);margin-left:8px}
.tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--shu);display:grid;gap:14px}
.tl li{position:relative;display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:12px;align-items:baseline}
.tl li::before{content:"";position:absolute;left:-26px;top:.45em;width:13px;height:13px;border-radius:50%;background:var(--surface);border:3px solid var(--shu)}
.tl .yr{font-family:var(--f-display);font-weight:800;font-size:1.2rem;color:var(--shu);font-variant-numeric:tabular-nums}
.tl .bi>.ja{color:var(--muted)}
.visit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vcard{display:grid;gap:4px;padding:16px;border-radius:14px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gold);transition:transform .2s,box-shadow .2s}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vcard b{font-family:var(--f-display);font-size:1.05rem}
.vcard b .ja{color:var(--muted)}
.vcard small{color:var(--shu);font-weight:700;font-size:.82rem}

@media (max-width:980px){
  .map-grid,.dgrid,.mapcta{grid-template-columns:1fr}
  .map-panel,.dside{position:static}
  .sam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctam{max-width:260px}
}
@media (max-width:620px){
  .reg-list,.sam-grid,.facts,.hl3,.visit,.mini-sams{grid-template-columns:1fr}
  .mapcta{padding:24px}
  .hlc{min-height:80px}
  .mp-name{font-size:var(--s2)}
}

/* header fit */
.brand{flex:none;white-space:nowrap}
.nav a{display:flex;flex-direction:column;align-items:center;line-height:1.25;padding:5px 11px}
.nav a .ja{margin-left:0;font-size:.72em}
html[data-lang="ja"] .nav a .ja{font-size:.95em}
.mm-cap.bi{align-items:flex-start;gap:2px}
html[data-lang="both"] a .en+.ja{margin-left:.5em}

/* bigger map + zoom */
.mapstage .wrap{max-width:1500px}
.mapstage .map-grid{grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr);gap:24px}
.map-wrap{position:relative;min-width:0;display:grid;gap:12px}
.map-box{position:relative;border-radius:18px;overflow:hidden;background:rgba(11,17,41,.35);border:1px solid var(--line)}
.jmap{width:100%;height:auto;max-height:none;aspect-ratio:505/516;max-height:calc(100vh - 150px);touch-action:pan-y;cursor:default;user-select:none;-webkit-user-select:none}
.jmap.zoomed{touch-action:none;cursor:grab}
.jmap.dragging{cursor:grabbing}
.jmap.dragging .pf{cursor:grabbing}
.jmap .pf{vector-effect:non-scaling-stroke;stroke-width:.8}
.jmap .hov{vector-effect:non-scaling-stroke;stroke-width:2.6}
.jmap .mkr{transform:scale(var(--ms,1))}
.plab{display:none;pointer-events:none}
.jmap.lbl .plab{display:inline}
.plab text{font-family:var(--f-display);font-weight:800;font-size:calc(10.5px * var(--ms,1));fill:#fff;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(11,17,41,.8);stroke-width:calc(2.6px * var(--ms,1));stroke-linejoin:round}
.jmap.sam .plab{transform:translateY(calc(11px * var(--ms,1)))}
.zoom-ui{position:absolute;top:12px;right:12px;display:grid;gap:6px;z-index:2}
.zoom-ui button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(233,198,107,.6);background:rgba(11,17,41,.82);color:var(--gold);font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,transform .15s}
.zoom-ui button:hover:not(:disabled){background:var(--gold);color:var(--night);transform:scale(1.06)}
.zoom-ui button:disabled{opacity:.35;cursor:default}
.zoom-ui button span{font-family:var(--f-display);font-size:1.05rem}
.map-hint{margin:0;font-size:.8rem;color:var(--on-night-m);justify-self:start;padding:3px 12px;border-radius:999px;border:1px solid transparent;transition:background .3s,color .3s}
.map-hint .ja{margin-left:.5em}
html[data-lang="ja"] .map-hint .ja{margin-left:0}
.map-hint.show{color:#fff;background:var(--shu-c);border-color:var(--shu-c)}
.reg-zoom{display:flex;flex-wrap:wrap;gap:6px}
.reg-zoom button{font:inherit;font-size:.82rem;display:flex;gap:6px;align-items:baseline;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--on-night);background:rgba(255,255,255,.06);border:1.5px solid var(--rc);transition:background .2s,transform .15s}
.reg-zoom button b{font-family:var(--f-display)}
.reg-zoom button:hover{background:var(--rc);transform:translateY(-2px)}
html[data-lang="ja"] .reg-zoom .en{display:none}
@media (max-width:980px){
  .mapstage .map-grid{grid-template-columns:1fr}
  .jmap{max-height:none}
  .map-hint{font-size:.72rem}
}

/* bilingual map labels */
.plab .pl-en{font-family:var(--f-body);font-weight:700;font-size:calc(8.4px * var(--ms,1));letter-spacing:.02em}
html[data-lang="both"] .jmap:not(.lbl2) .plab .pl-en{display:none}
html[data-lang="both"] .jmap.lbl2 .plab .pl-ja{transform:translateY(calc(-4.8px * var(--ms,1)))}
html[data-lang="both"] .jmap.lbl2 .plab .pl-en{font-size:calc(7.2px * var(--ms,1));transform:translateY(calc(5.6px * var(--ms,1)))}

/* Sengoku provinces */
.jmap .provs{display:none}
.jmap.sam .provs{display:inline}
.jmap.sam .pf{display:none}
.pv{fill:#2C3768;stroke:#0B1129;stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;outline:none;transition:filter .2s}
.pv.has{fill:#A3301D}
.pv.outer{fill:#3B3166}
.jmap .pv:hover,.jmap .pv.on{filter:brightness(1.3)}
.vlab{display:none;pointer-events:none}
.jmap.sam.lbl .vlab{display:inline}
.jmap.sam .plab{display:none!important}
.vlab text{font-family:var(--f-display);font-weight:800;font-size:calc(10px * var(--ms,1));fill:#F5E7C0;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(11,17,41,.85);stroke-width:calc(2.6px * var(--ms,1));stroke-linejoin:round;transform:translateY(calc(10px * var(--ms,1)))}
.vlab .pl-en{font-family:var(--f-body);font-weight:700;font-size:calc(7.6px * var(--ms,1))}
html[data-lang="both"] .jmap:not(.lbl2) .vlab .pl-en{display:none}
html[data-lang="both"] .jmap.lbl2 .vlab .pl-ja{transform:translateY(calc(5.6px * var(--ms,1)))}
html[data-lang="both"] .jmap.lbl2 .vlab .pl-en{font-size:calc(6.8px * var(--ms,1));transform:translateY(calc(15.4px * var(--ms,1)))}
.mini .pv{fill:var(--line);stroke:var(--surface);stroke-width:.4;cursor:default}
.mini .pv.has,.mini .pv.outer{fill:var(--line)}
.mini .pv.hl{fill:var(--shu-c)}
.mm-dot{fill:var(--gold);stroke:var(--surface);stroke-width:1.5}
.mp-today{display:flex;flex-wrap:wrap;gap:6px}
.mp-today .pchip{background:rgba(255,255,255,.06);color:var(--on-night)}
.mp-today .pchip span{color:var(--on-night-m)}

/* ===== ILoveJapan home ===== */
.brand b em{font-style:normal;color:var(--shu-c)}
.brand-mark{width:45px;height:30px;background:#fff;border-radius:3px;transform:none;box-shadow:0 0 0 1px rgba(20,25,39,.18),0 3px 8px -2px rgba(20,25,39,.3)}
.brand-mark::before{content:"";width:18px;height:18px;border-radius:50%;background:#BC002D}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06)}
.site-head::after{background:linear-gradient(90deg,var(--shu-c),var(--gold))}
footer::before{background:linear-gradient(90deg,var(--shu-c),var(--gold),var(--shu-c))}
.hero-eyebrow{margin-bottom:22px}
.home-hero{position:relative;overflow:hidden;isolation:isolate;color:var(--on-night);padding-block:56px 64px;
  --ink:var(--on-night);--muted:var(--on-night-m);--line:rgba(245,240,228,.2);--shu:var(--gold);
  background:radial-gradient(45% 70% at 78% 45%,rgba(233,70,42,.38),transparent 70%),radial-gradient(35% 50% at 10% 90%,rgba(233,198,107,.18),transparent 70%),linear-gradient(160deg,var(--night2),var(--night) 70%)}
.home-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.1;background-image:radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%),radial-gradient(circle at 50% 100%,transparent 22%,var(--gold) 23% 27%,transparent 28% 46%,var(--gold) 47% 51%,transparent 52% 70%,var(--gold) 71% 75%,transparent 76%);background-size:64px 32px;background-position:0 0,32px 16px;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.hh-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.hh-text{min-width:0;display:grid;gap:18px;align-content:center}
.hh-kicker{font-size:var(--s-1);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;gap:12px;flex-wrap:wrap}
.hh-title{font-family:var(--f-display);font-weight:800;font-size:clamp(3.2rem,9vw,7rem);line-height:.95;letter-spacing:-.01em;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.35);animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hh-title .love{color:var(--shu-c);position:relative;display:inline-block}
.hh-title .love::after{content:"\2665";position:absolute;right:-.12em;top:-.28em;font-size:.32em;color:var(--gold);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
.hh-sub{font-size:var(--s1);max-width:40ch}
.hh-sub>.ja{color:var(--on-night-m)}
.hh-stats{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 0}
.hh-stats>div{display:grid;gap:2px}
.hh-stats dt{font-family:var(--f-display);font-weight:800;font-size:var(--s3);color:var(--gold);line-height:1}
.hh-stats dd{margin:0;font-size:.85rem;color:var(--on-night-m)}
.hh-map{display:grid;min-width:0;justify-items:center}
.hh-map #ctaMap{display:grid;width:100%;justify-items:center}
.hh-map .ctam{max-width:520px}
.hh-map:hover .ctam .pf{filter:brightness(1.12)}
.teasers{grid-template-columns:repeat(3,minmax(0,1fr))}
.teaser{min-height:200px}
.teaser:nth-child(1){--tc:linear-gradient(155deg,#2A86A8,#0F2A45)}
.teaser:nth-child(2){--tc:linear-gradient(155deg,#E2452B,#7A1A0E)}
.teaser:nth-child(3){--tc:linear-gradient(155deg,#2D63C8,#101E4A)}
.teaser:nth-child(4){--tc:linear-gradient(155deg,#C6922C,#4F340A)}
.teaser:nth-child(5){--tc:linear-gradient(155deg,#7A5BB8,#2A1C4F)}
.teaser:nth-child(6){--tc:linear-gradient(155deg,#2F9A6A,#0E3B2A)}
.kou-mini{margin-top:18px;display:inline-grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);max-width:100%;transition:transform .2s}
.kou-mini:hover{transform:translateY(-2px)}
.km-k{font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--shu)}
.kou-mini small{font-size:var(--s-1);color:var(--muted);letter-spacing:.06em}
.kou-mini b{font-weight:500;font-size:.92rem;display:flex;gap:8px;flex-wrap:wrap}
.km-go{font-size:.85rem;font-weight:700;color:var(--shu);white-space:nowrap}
@media (max-width:980px){.hh-grid{grid-template-columns:1fr}.hh-map .ctam{max-width:360px}.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.teasers{grid-template-columns:1fr}.home-hero{padding-block:36px 44px}.kou-mini{grid-template-columns:auto minmax(0,1fr)}.km-go{grid-column:2}}

/* ===== Food: nabe ===== */
.pb-food{--bb:radial-gradient(55% 90% at 80% 20%,#F2A33A55,transparent 70%),linear-gradient(130deg,#9C3A12,#4A1708 55%,#1A0B07);--bp:radial-gradient(circle at 50% 100%,transparent 22%,#fff 23% 28%,transparent 29% 46%,#fff 47% 52%,transparent 53% 70%,#fff 71% 76%,transparent 77%);--bs:48px 24px}
.fsteam{position:absolute;right:max(16px,6vw);bottom:0;width:260px;height:100%;z-index:-1;pointer-events:none}
.fsteam i,.steam i{position:absolute;bottom:10%;width:18px;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);filter:blur(6px);animation:steam 4.5s ease-in-out infinite;opacity:0}
.fsteam i:nth-child(1){left:20%}.fsteam i:nth-child(2){left:42%;animation-delay:1.1s}.fsteam i:nth-child(3){left:64%;animation-delay:2.2s}.fsteam i:nth-child(4){left:84%;animation-delay:3.3s}
@keyframes steam{0%{transform:translateY(20%) scaleX(.8);opacity:0}30%{opacity:.9}100%{transform:translateY(-40%) scaleX(1.6);opacity:0}}
.nsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.nsteps li{counter-increment:st;position:relative;display:grid;gap:8px;align-content:start;padding:22px 20px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.nsteps li::before{content:counter(st);font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--shu)}
.nsteps b{font-family:var(--f-display);font-size:1.1rem}
.nsteps li>span{font-size:.9rem}
.nsteps .bi>.ja{color:var(--muted)}
.nabe-top{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:28px}
.nabe-map{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:12px}
.nmap .pf{fill:var(--line);stroke:var(--paper);stroke-width:.5}
.ndot{cursor:pointer;outline:none}
.ndot circle{stroke:var(--surface);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.ndot circle{r:9}
.ndot text{font-family:var(--f-display);font-weight:800;font-size:15px;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.ndot:hover circle,.ndot:focus-visible circle{transform:scale(1.4)}
.nabe-legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:.88rem}
.nabe-legend span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nabe-legend i,.broth i{width:14px;height:14px;border-radius:50%;background:var(--bc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);flex:none}
.nabe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nabe{display:flex;flex-direction:column;min-width:0;border-radius:18px;overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.nabe:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.nabe.flash{animation:flash 1.2s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px var(--shu-c)}}
.pot{position:relative;height:120px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 120%,var(--bc) 0 55%,color-mix(in srgb,var(--bc) 55%,#1A0B07) 56% 62%,transparent 63%),linear-gradient(180deg,#2A1A12,#3B2418);color:#fff}
.pot-k{position:relative;font-family:var(--f-display);font-weight:800;font-size:1.7rem;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pot-r{position:relative;font-size:.8rem;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.steam{position:absolute;inset:0 30% 30% 30%}
.steam i:nth-child(1){left:10%}.steam i:nth-child(2){left:45%;animation-delay:1.4s}.steam i:nth-child(3){left:80%;animation-delay:2.8s}
.nabe-body{padding:16px 18px;display:grid;gap:10px;flex:1;align-content:start}
.nabe-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem}
.broth{display:flex;align-items:center;gap:6px;color:var(--muted);flex-wrap:wrap}
.reg-link{font-weight:700;color:var(--shu);text-decoration:none;display:flex;gap:6px}
.reg-link.nat{color:var(--muted)}
.nabe h3{font-size:var(--s2);font-weight:800}
.nd{font-size:.92rem}
.nd>.ja{font-size:.88em}
.ing{font-size:.85rem;color:var(--muted);display:grid;gap:2px}
.ing b{font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:flex;gap:8px}
.nabe-foot{padding:0 18px 18px}
.amz{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.88rem;color:#111;background:#FFB627;padding:7px 14px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.amz:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px #FF9900}
.amz .pr{border-color:rgba(0,0,0,.45);color:rgba(0,0,0,.65)}
.amz .ja{margin-left:.4em}
html[data-lang="both"] .amz .ja{display:none}
.amz{white-space:nowrap}
.base-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.base,.gear{position:relative;display:grid;gap:6px;align-content:start;padding:18px 18px 16px;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--bc,#FFB627);transition:transform .25s,box-shadow .25s}
.base:hover,.gear:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.base .pr,.gear .pr{position:absolute;top:12px;right:12px}
.base b,.gear b{font-family:var(--f-display);font-size:1.2rem;padding-right:34px}
.base>span,.gear>span{font-size:.88rem}
.base>span>.ja,.gear>span>.ja{color:var(--muted)}
.base em,.gear em{font-style:normal;font-weight:700;font-size:.85rem;color:#C46A00;margin-top:4px}
.sub-h{font-size:var(--s2);font-weight:800;margin:40px 0 16px}
.sub-h.bi{flex-direction:row;gap:12px;align-items:baseline;flex-wrap:wrap}
.gear-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gear{border-top-color:var(--ink)}
.amz-note{margin-top:22px;font-size:.82rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
/* home: seasonal special band */
.special{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center;padding:30px 34px;border-radius:22px;text-decoration:none;color:#fff;background:radial-gradient(60% 120% at 85% 50%,#F2A33A66,transparent 70%),linear-gradient(130deg,#9C3A12,#3A1308);transition:transform .3s,box-shadow .3s}
.special:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.special .sp-k{position:absolute;right:28px;bottom:-30px;font-family:var(--f-display);font-weight:800;font-size:9rem;line-height:1;color:rgba(255,255,255,.14);z-index:-1}
.special .label{color:var(--gold)}
.special h2{font-size:var(--s3);font-weight:800}
.special h2 .ja{color:rgba(255,255,255,.85)}
.special p.bi{color:rgba(255,255,255,.9);max-width:56ch;margin-top:8px}
.special p.bi .ja{color:rgba(255,255,255,.78)}
.special .btn{justify-self:end}
@media (max-width:980px){.nsteps,.gear-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nabe-grid,.base-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nabe-top{grid-template-columns:1fr}.nabe-map{max-width:340px}.special{grid-template-columns:1fr}.special .btn{justify-self:start}}
@media (max-width:620px){.nsteps,.gear-grid,.nabe-grid,.base-grid{grid-template-columns:1fr}.special{padding:24px}}

/* editor's picks */
.pick{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#FFB627 12%,var(--surface));border:1px solid color-mix(in srgb,#FFB627 45%,var(--line))}
.pick-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#C46A00;display:flex;gap:8px}
.pick b{font-size:1rem;line-height:1.4}
.pick-en{font-size:.8rem;color:var(--muted)}
.pick-why{font-size:.85rem}
.pick-why>.ja{color:var(--muted)}
.pick .amz{justify-self:start;margin-top:6px}
.base.has-pick{gap:10px}
.base .pick .pr{position:static}
.base.has-pick:hover{transform:none;box-shadow:none}
.base .more{font-size:.82rem;font-weight:700;color:var(--shu);text-decoration:none;display:flex;gap:8px;flex-wrap:wrap}
html[data-lang="both"] .base .more .ja{display:none}

/* nabe illustrations */
.pot{height:auto;aspect-ratio:3/2;padding:14px 18px;background:#2A1A12;border-bottom:5px solid var(--bc)}
.pot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nabe:hover .pot-img{transform:scale(1.06)}
.pot::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,rgba(26,11,7,.8));pointer-events:none}
.pot-k,.pot-r{z-index:2}
.pot-k{font-size:1.9rem}
.special .sp-img{position:absolute;right:0;top:0;height:100%;width:55%;object-fit:cover;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);transition:transform .6s}
.special:hover .sp-img{transform:scale(1.04)}
.special .sp-k{right:auto;left:42%}
@media (max-width:980px){.special .sp-img{width:100%;opacity:.35;-webkit-mask-image:none;mask-image:none}}

/* ===== Recipe pages ===== */
.pot-link{text-decoration:none;color:#fff}
.rec-btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:4px;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.9rem;color:#fff;background:var(--shu-c);transition:transform .2s,box-shadow .2s}
.rec-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px var(--shu-c)}
html[data-lang="both"] .rec-btn .ja{display:none}
.rhero{position:relative;overflow:hidden;isolation:isolate;color:#fff;min-height:360px;display:flex;align-items:flex-end;background:#1A0B07}
.rhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.rhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,8,4,.15),rgba(20,8,4,.55) 45%,rgba(20,8,4,.92))}
.rh-in{display:grid;gap:10px;padding-block:48px 34px;width:100%}
.rhero .eyebrow a{color:var(--gold);text-decoration:none;font-weight:700}
.rhero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.rhero h1 .ja{color:rgba(255,255,255,.88);font-size:.75em}
.rh-read{opacity:.85;letter-spacing:.12em}
.rh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rh-chips>*{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.85rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;backdrop-filter:blur(4px)}
.rh-chips i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.rh-chips .ja{margin-left:.35em}
html[data-lang="both"] .rh-chips .ja{opacity:.8}
.rgrid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:start}
.rside{display:grid;gap:14px;position:sticky;top:90px;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.rside .dh,.rmain .dh{margin-top:0}
.rside .dh small{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--f-body,inherit);font-size:.75rem;font-weight:500;color:var(--muted);margin-top:4px}
.rbroth{font-size:.92rem}
.rbroth>.ja,.rsteps .ja,.rbox .ja{color:var(--muted)}
.ings{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ings li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.ings li:last-child{border-bottom:0}
.ings input{width:18px;height:18px;margin-top:2px;accent-color:var(--shu-c);cursor:pointer}
.ings label{cursor:pointer}
.ings label .ja{color:var(--muted);font-size:.9em}
.ings input:checked+label{text-decoration:line-through;opacity:.5}
.rmain{display:grid;gap:22px;min-width:0}
.rsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:rs}
.rsteps li{counter-increment:rs;position:relative;padding:16px 18px 16px 70px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.rsteps li::before{content:counter(rs);position:absolute;left:18px;top:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:#fff;background:var(--shu-c)}
.rbox{padding:16px 18px;border-radius:14px;border-left:5px solid var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.rbox.abroad{border-left-color:#2A86A8;background:color-mix(in srgb,#2A86A8 9%,var(--surface))}
.rbox.gearb{border-left-color:var(--muted);background:var(--surface)}
.rb-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:980px){.rgrid{grid-template-columns:1fr}.rside{position:static}}
@media (max-width:620px){.rhero{min-height:300px}.rsteps li{padding:14px 14px 14px 60px}.rsteps li::before{left:14px;width:32px;height:32px}}

/* ===== Food map ===== */
.fmapstage .sec-head .lead{max-width:62ch}
.fcats{margin-bottom:18px;border-radius:24px}
.fcats button{font:inherit;display:flex;gap:8px;align-items:baseline;color:var(--on-night);background:none;border:0;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .2s}
.fcats button:hover{background:rgba(255,255,255,.1)}
.fcats button b{font-family:var(--f-display);font-size:1.1rem}
.fcats button small{font-size:.75rem;opacity:.75}
.fcats button[aria-pressed="true"]{background:var(--gold);color:var(--night)}
.fmap .pf{fill:#2A3463}
.fmap .pf.hasf{fill:var(--rc)}
.fmap .pf.hasf.dim{fill:#2A3463}
.fpin{cursor:pointer;outline:none}
.fpin circle{fill:var(--fc);stroke:#fff;stroke-width:1.3;transform-box:fill-box;transform-origin:center;transition:transform .2s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.fpin .fk{fill:#fff;font-family:var(--f-display);font-weight:800;font-size:7.2px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.fpin:hover circle,.fpin:focus-visible circle,.fpin.on circle{transform:scale(1.35)}
.fpin.on circle{stroke:var(--gold);stroke-width:2}
.fpin.off{display:none}
.flab{pointer-events:none}
.flab text{font-family:var(--f-display);font-weight:800;font-size:7.4px;fill:#fff;dominant-baseline:central;paint-order:stroke;stroke:rgba(11,17,41,.88);stroke-width:2.4px;stroke-linejoin:round}
.flab .mkr text{text-anchor:inherit}
.flab .pl-en{font-family:var(--f-body);font-weight:700;font-size:6.4px}
html[data-lang="both"] .fmap:not(.lbl2) .flab .pl-en{display:none}
html[data-lang="both"] .fmap.lbl2 .flab .pl-en{transform:translateY(8px)}
.fp-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.fp-tags{display:flex;flex-wrap:wrap;gap:6px}
.fp-tags>*{display:inline-flex;gap:6px;align-items:center;font-size:var(--s-1);font-weight:700;padding:2px 12px;border-radius:999px;color:#fff;text-decoration:none;background:var(--rc,rgba(255,255,255,.12))}
.fp-tags i{width:10px;height:10px;border-radius:50%;background:var(--fc)}
.fp-read{color:var(--on-night-m);letter-spacing:.1em;font-size:.88rem;margin-top:-6px}
.fp-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fp-acts .rec-btn{margin-top:0}
.fp-acts .amz .ja{margin-left:.4em}
html[data-lang="both"] .fp-acts .amz .ja{display:none}
.fp-pick .pick{background:rgba(255,182,39,.1);border-color:rgba(255,182,39,.4)}
.fp-pick .pick-en,.fp-pick .pick-why{color:var(--on-night-m)}
.fline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-align:left;font:inherit;color:var(--ink);padding:8px 12px 8px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;transition:transform .2s,background .2s;width:100%}
.fline:hover{transform:translateX(4px);background:rgba(255,255,255,.12)}
.fline img,.fline .fl-k{width:52px;height:40px;border-radius:8px;object-fit:cover}
.fline .fl-k{display:grid;place-items:center;background:var(--fc);font-family:var(--f-display);font-weight:800;color:#fff}
.fline b{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--f-display);font-size:1.02rem}
.fline small{display:block;color:var(--muted);font-size:.8rem}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips button{font:inherit;font-size:.85rem;display:flex;gap:6px;align-items:baseline;padding:5px 12px;border-radius:999px;cursor:pointer;color:var(--on-night);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.fchips button:hover{background:rgba(255,255,255,.14)}
.fchips button b{font-family:var(--f-display)}
.fcount{font-family:var(--f-display);font-weight:800;font-size:var(--s3);color:var(--gold);line-height:1}
.nabe-legend{margin-bottom:24px}
/* local food on prefecture pages */
.lfood{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lfood a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.lfood a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lfood img,.lfood .fl-k{width:72px;height:52px;border-radius:10px;object-fit:cover}
.lfood .fl-k{display:grid;place-items:center;background:var(--fc);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.lfood b{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--f-display)}
.lfood b .ja{color:var(--muted)}
.lfood small{color:var(--shu);font-weight:700;font-size:.8rem}
@media (max-width:620px){.lfood{grid-template-columns:1fr}}
.fp-back{justify-self:start;background:none;border:0;padding:0;color:var(--gold);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.fcount small{font-family:var(--f-body);font-size:.9rem;font-weight:500;color:var(--on-night-m);margin-left:8px}
.fcount small .ja{margin-left:.3em}
html[data-lang="both"] .fcount small .ja{display:none}
html[data-lang="both"] .fp-back .ja,html[data-lang="both"] .lfood small .ja{display:none}
@media (max-width:620px){.fmap:not(.lbl) .flab{display:none}}
.fmap [data-cat].off{display:none}
.flab .lz{display:none}
.fmap.lbl .flab .lz{display:inline}
.fchips button i{width:8px;height:8px;border-radius:50%;background:var(--fc);align-self:center}
.fcats button[aria-pressed="false"] b{color:var(--fc,inherit)}
.fp-when{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.92rem;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.fp-when b{font-size:var(--s-1);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;gap:6px}
html[data-lang="both"] .fp-when b .ja{display:none}
.fp-when .bi>.ja{color:var(--on-night-m)}
.fp-acts .pr{color:var(--on-night-m);border-color:var(--on-night-m)}
html[data-lang="both"] .fp-acts .link .ja{display:none}
.pb-about{--bb:radial-gradient(55% 90% at 80% 20%,#E9C66B44,transparent 70%),linear-gradient(130deg,#1F4FA0,#101E4A 55%,#0B1129)}
.about{max-width:760px;display:grid;gap:12px}
.about p.bi{font-size:1rem}
.about p.bi>.ja{color:var(--muted)}
.about-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.foot-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);font-size:.88rem}
.foot-links a{color:inherit}
html[data-static] section#plan,html[data-static] [data-aff],html[data-static] .aff,html[data-static] .fp-acts:has([data-aff]),html[data-static] .card-foot:has([data-aff]){display:none!important}