/* ============================================================
   阿部農園 v4 — cinematic redesign
   navy × gold × cream / Noto Serif JP × Marcellus
   ============================================================ */
:root{
  --navy:#1c2c4d;
  --navy-deep:#131e35;
  --navy-darker:#0e1628;
  --gold:#d4af5f;
  --gold-soft:#e3c787;
  --gold-deep:#b8923f;
  --cream:#f6f4ef;
  --cream-deep:#efeae0;
  --white:#ffffff;
  --ink:#26313f;
  --ink-soft:#5a6472;
  --line:rgba(28,44,77,.12);
  --line-gold:rgba(212,175,95,.32);

  --serif:'Noto Serif JP', serif;
  --gothic:'Noto Sans JP', sans-serif;
  --latin:'Marcellus', 'Noto Serif JP', serif;
  --latin-sc:'Marcellus SC', 'Marcellus', serif;

  --maxw:1200px;
  --gutter:clamp(20px,5vw,72px);
  --ease-out:cubic-bezier(.16,.84,.28,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--navy-deep);
  overflow-y:scroll;scrollbar-gutter:stable;
  overflow-x:clip;
}
body{
  font-family:var(--gothic);color:var(--ink);background:var(--cream);
  line-height:1.85;font-size:16px;
  /* overflow-x:clip (NOT hidden) — hidden would turn body into a scroll
     container and silently kill position:sticky for the story section */
  overflow-x:clip;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(212,175,95,.4);color:var(--navy-deep);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---- shared type ---- */
.latin{font-family:var(--latin);font-weight:500;letter-spacing:.22em;text-transform:uppercase;}
.eyebrow{
  font-family:var(--latin);font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-deep);display:inline-flex;align-items:center;gap:.85em;font-weight:600;white-space:nowrap;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7;}
.eyebrow.center{justify-content:center;}
.eyebrow.on-navy{color:var(--gold-soft);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.45;letter-spacing:.04em;}
.section{padding:clamp(84px,12vw,168px) var(--gutter);}
.wrap{max-width:var(--maxw);margin:0 auto;}
.narrow{max-width:760px;margin:0 auto;}

.jp-wrap{word-break:keep-all;overflow-wrap:break-word;line-break:strict;}
@media(max-width:640px){.dbr{display:none;}}

.h-display{font-size:clamp(2rem,4.8vw,3.5rem);font-weight:500;line-height:1.55;letter-spacing:.06em;}
.body-soft{font-weight:300;color:var(--ink-soft);line-height:2.05;letter-spacing:.04em;}

/* ---- buttons (sheen sweep + magnetic via JS) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--gothic);font-weight:500;font-size:.92rem;letter-spacing:.16em;
  padding:1.1em 2.5em;border-radius:2px;cursor:pointer;border:1px solid transparent;
  position:relative;white-space:nowrap;overflow:hidden;
  transition:background .45s var(--ease-soft),color .45s var(--ease-soft),border-color .45s var(--ease-soft),box-shadow .45s var(--ease-soft),transform .55s var(--ease-soft);
  will-change:transform;
}
.btn > *{position:relative;z-index:1;}
.btn::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease-out);pointer-events:none;
}
.btn:hover::after{left:130%;}
.btn .arr{font-family:var(--gothic);font-size:1.05em;line-height:1;display:inline-flex;align-items:center;transition:transform .4s ease;}
.btn:hover .arr{transform:translateX(5px);}
.btn-gold{background:var(--gold);color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-soft);box-shadow:0 14px 34px -12px rgba(212,175,95,.65);}
.btn-outline-gold{border-color:rgba(212,175,95,.5);color:var(--gold-soft);}
.btn-outline-gold:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy);color:var(--cream);}

/* ---- image placeholder / slots ---- */
.ph{
  position:relative;overflow:hidden;background:#e7e2d6;
  background-image:repeating-linear-gradient(135deg,rgba(28,44,77,.05) 0 12px,transparent 12px 24px);
}
image-slot.fill-slot{display:block;width:100%;height:auto;}
image-slot.ph{background:none;}

/* ============================================================
   REVEAL SYSTEM
   .rv          — fade/translate (data-rv="left|right|scale|soft")
   .lns         — line-mask reveal (split on <br>)
   .chs         — char-by-char rise
   .casc        — children cascade
   ============================================================ */
.js .rv{opacity:0;transform:translateY(40px);filter:blur(6px);
  transition:opacity 1.05s var(--ease-soft),transform 1.25s var(--ease-out),filter 1.05s ease;}
.js .rv[data-rv="left"]{transform:translateX(-60px);}
.js .rv[data-rv="right"]{transform:translateX(60px);}
.js .rv[data-rv="scale"]{transform:scale(.94) translateY(28px);}
.js .rv[data-rv="soft"]{transform:translateY(20px);}
.js .rv.in{opacity:1;transform:none;filter:blur(0);}

.js .lns{opacity:0;}
.js .lns.in{opacity:1;}
.lns .ln{display:block;overflow:hidden;}
.lns .ln > span{display:block;transform:translateY(118%);
  transition:transform 1.15s var(--ease-out);}
.lns.in .ln > span{transform:none;}

.js .chs{opacity:0;}
.js .chs.in{opacity:1;}
.chs .ch{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(5px);
  transition:opacity .85s var(--ease-soft),transform .95s var(--ease-out),filter .85s ease;}
.chs.in .ch{opacity:1;transform:none;filter:blur(0);}
/* each <wbr>-delimited phrase is glued into one unbreakable run so the line
   can only wrap where the author placed a <wbr> — otherwise every character
   becoming its own inline-block gives the browser a break opportunity
   between ANY two characters, which orphans trailing 、。」 etc. */
.chs .ch-seg{white-space:nowrap;}

.js .casc > *{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .95s var(--ease-soft),transform 1.05s var(--ease-out),filter .9s ease;}
.js .casc.in > *{opacity:1;transform:none;filter:blur(0);}
.casc.in > *:nth-child(2){transition-delay:.12s;}
.casc.in > *:nth-child(3){transition-delay:.24s;}
.casc.in > *:nth-child(4){transition-delay:.36s;}
.casc.in > *:nth-child(5){transition-delay:.48s;}
.casc.in > *:nth-child(6){transition-delay:.6s;}

.eyebrow.rv{letter-spacing:.62em;
  transition:opacity 1s var(--ease-soft),transform 1.15s var(--ease-out),filter 1s ease,letter-spacing 1.3s var(--ease-out);}
.eyebrow.rv.in{letter-spacing:.34em;}

@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv[data-rv]{transition:opacity .5s ease;transform:none;filter:none;}
  .lns .ln > span{transition:none;transform:none;}
  .chs .ch{transition:opacity .5s ease;transform:none;filter:none;}
  .js .casc > *{transition:opacity .5s ease;transform:none;filter:none;}
  .eyebrow.rv,.eyebrow.rv.in{letter-spacing:.34em;}
}

/* ---- scroll progress ---- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));}

/* ---- cursor follower ---- */
.cursor-ring{
  position:fixed;left:0;top:0;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(212,175,95,.65);z-index:9998;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .4s ease,border-color .35s ease,background .35s ease;
}
.cursor-ring.big{width:58px;height:58px;background:rgba(212,175,95,.08);border-color:rgba(212,175,95,.9);}
@media(pointer:coarse){.cursor-ring{display:none;}}
.calm-motion .cursor-ring{display:none;}
#motes{transition:opacity .6s ease;}

/* ============================================================
   PRELOADER — branded navy load veil → lifts into the hero
   ============================================================ */
html.is-loading,html.is-loading body{overflow:hidden;}
.preloader{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);
  opacity:1;visibility:visible;
  transition:opacity .95s var(--ease-soft),visibility .95s var(--ease-soft);
}
.preloader::after{
  content:"";position:absolute;left:50%;bottom:-12%;width:min(620px,108vw);height:42vh;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 100%, rgba(232,178,92,.16) 0%, transparent 62%);
}
.preloader.done{opacity:0;visibility:hidden;}
.pre-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1.7rem;
  transition:transform 1s var(--ease-out),opacity .8s ease;
}
.preloader.done .pre-inner{transform:translateY(-14px);opacity:0;}
.pre-crest{
  height:clamp(118px,17vw,176px);width:auto;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.5));
  opacity:0;transform:translateY(16px) scale(1.03);
  animation:preCrest 1.5s var(--ease-out) .12s forwards;
}
@keyframes preCrest{to{opacity:1;transform:none;}}
.pre-tag{
  font-size:.62rem;letter-spacing:.46em;color:var(--gold-soft);text-indent:.46em;
  opacity:0;animation:preFade 1s ease .55s forwards;
}
.pre-bar{
  position:relative;width:clamp(116px,15vw,168px);height:1px;overflow:hidden;
  background:rgba(212,175,95,.16);
  opacity:0;animation:preFade .8s ease .45s forwards;
}
.pre-bar i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));
  transition:transform .55s var(--ease-out);
}
@keyframes preFade{to{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .pre-crest{animation:none;opacity:1;transform:none;}
  .pre-tag,.pre-bar{animation:none;opacity:1;}
  .preloader,.pre-inner{transition:opacity .4s ease,visibility .4s ease;}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:0 var(--gutter);
  transition:background .5s ease,box-shadow .5s ease,transform .55s var(--ease-out);
}
.site-header.hide{transform:translateY(-105%);}
.hd-inner{
  max-width:var(--maxw);margin:0 auto;height:94px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:height .5s ease;
}
.logo{display:flex;align-items:center;line-height:1;}
.logo-img{height:64px;width:auto;transition:height .5s ease;}
.site-header.scrolled .logo-img{height:52px;}
.hd-nav{display:flex;gap:2.4em;font-size:.86rem;letter-spacing:.12em;font-weight:400;}
.hd-nav a{color:rgba(246,244,239,.82);transition:color .35s ease;position:relative;padding:.3em 0;white-space:nowrap;}
.hd-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease-out);}
.hd-nav a:hover{color:var(--cream);}
.hd-nav a:hover::after{width:100%;}
.hd-cta{padding:.75em 1.6em;font-size:.82rem;border-color:rgba(212,175,95,.5);color:var(--gold-soft);white-space:nowrap;}
.hd-cta:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.site-header.scrolled{background:rgba(19,30,53,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(212,175,95,.18);}
.site-header.scrolled .hd-inner{height:74px;}
@media(max-width:780px){.hd-nav{display:none;}}

/* ============================================================
   HERO — duotone photo + gold motes + char title
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:130px var(--gutter) 100px;
  background:var(--navy-deep);overflow:hidden;
}
.hero-photo{
  position:absolute;inset:-4%;z-index:0;
  background-image:url('assets/rice-in-hand.jpg');
  background-size:cover;background-position:center 40%;
  filter:saturate(.34) brightness(.5) contrast(1.05);
  opacity:0;transform:scale(1.1);
  transition:opacity 2.2s ease,transform 2.6s var(--ease-out);
  will-change:transform,opacity;
}
.fonts-ready .hero-photo{opacity:1;transform:scale(1.02);}
html:not(.js) .hero-photo{opacity:1;transform:scale(1.02);}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(19,30,53,.62) 0%, rgba(19,30,53,.34) 42%, rgba(14,22,40,.86) 100%),
    radial-gradient(120% 80% at 50% 32%, transparent 30%, rgba(14,22,40,.6) 100%);
}
.hero-glow{
  position:absolute;left:50%;bottom:-14%;z-index:1;
  width:min(760px,110vw);height:46vh;
  background:radial-gradient(circle at 50% 100%, rgba(232,178,92,.22) 0%, rgba(212,140,70,.08) 36%, transparent 64%);
  filter:blur(10px);pointer-events:none;animation:glowPulse 7s ease-in-out infinite;
  transform:translate(-50%,0) translateZ(0);will-change:opacity;
}
@keyframes glowPulse{0%,100%{opacity:.6;}50%{opacity:.85;}}
#motes{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;}

.hero-inner{position:relative;z-index:3;pointer-events:none;will-change:transform,opacity;}
.hero-inner a{pointer-events:auto;}
.hero-crest-wrap{
  position:relative;display:inline-block;margin:0 auto 1.7rem;
  opacity:0;transform:translate3d(0,24px,0) scale(1.04);
  transition:opacity 1.4s var(--ease-soft) .1s,transform 1.5s var(--ease-out) .1s;
  will-change:transform,opacity;
}
.fonts-ready .hero-crest-wrap{opacity:1;transform:translate3d(0,0,0) scale(1);}
html:not(.js) .hero-crest-wrap{opacity:1;transform:none;}
.hero-crest{height:clamp(200px,26vw,330px);width:auto;display:block;filter:drop-shadow(0 14px 44px rgba(0,0,0,.55));}
.hero-title{
  color:var(--cream);
  font-size:clamp(2.2rem,5.8vw,4.4rem);font-weight:500;line-height:1.58;letter-spacing:.08em;
  text-shadow:0 2px 44px rgba(0,0,0,.45);
}
.hero-sub{
  margin:2.3rem auto 0;max-width:640px;
  color:rgba(246,244,239,.82);font-weight:300;font-size:clamp(.95rem,1.5vw,1.12rem);
  line-height:2.15;letter-spacing:.08em;
}
.hero-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:3.2rem;}

/* vertical side captions */
.hero-side{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  writing-mode:vertical-rl;pointer-events:none;
  font-size:.66rem;letter-spacing:.5em;color:rgba(227,199,135,.7);
  opacity:0;transition:opacity 1.6s ease 1.2s;
}
.fonts-ready .hero-side{opacity:1;}
html:not(.js) .hero-side{opacity:1;}
.hero-side.left{left:clamp(14px,3vw,40px);font-family:var(--serif);text-orientation:upright;letter-spacing:.42em;}
.hero-side.right{right:clamp(14px,3vw,40px);font-family:var(--latin);text-transform:uppercase;}
@media(max-width:880px){.hero-side{display:none;}}

.hero-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.64rem;letter-spacing:.4em;color:var(--gold-soft);opacity:.85;padding-bottom:34px;
}
.hero-scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:26px;
  background:linear-gradient(var(--gold-soft),transparent);animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{opacity:.3;transform:translateX(-50%) scaleY(.5);}50%{opacity:1;transform:translateX(-50%) scaleY(1);}}

@media(prefers-reduced-motion:reduce){
  .hero-photo,.fonts-ready .hero-photo{transition:none;opacity:1;transform:scale(1.02);}
  .hero-crest-wrap,.fonts-ready .hero-crest-wrap{transition:none;opacity:1;transform:none;}
  .hero-glow{animation:none;}
  .hero-scroll::after{animation:none;}
  .hero-side,.fonts-ready .hero-side{opacity:1;transition:none;}
}

/* ============================================================
   INTRO — vertical writing
   ============================================================ */
.intro{background:var(--cream);text-align:center;position:relative;}
.intro .eyebrow{justify-content:center;margin:0 auto 3.2rem;}
.intro-grid{display:flex;justify-content:center;align-items:center;gap:clamp(36px,7vw,100px);}
.intro-vert-wrap{display:flex;justify-content:center;}
.intro-vert{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:500;
  line-height:2.05;letter-spacing:.16em;color:var(--navy);
}
.intro-photo{aspect-ratio:3/4;width:min(380px,38vw);height:auto;flex-shrink:0;border-radius:3px;
  box-shadow:0 36px 80px -44px rgba(28,44,77,.6);}
.intro-sub{margin:3.4rem auto 0;max-width:660px;font-size:1rem;}
@media(max-width:680px){
  .intro-vert{writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:.08em;line-height:1.85;}
  .intro-grid{flex-direction:column;}
  .intro-photo{width:min(360px,80vw);}
}

/* ============================================================
   STRIP — outlined latin marquee divider
   ============================================================ */
.strip{background:var(--cream);overflow:hidden;padding:clamp(10px,2vw,26px) 0 clamp(48px,6vw,90px);}
.strip-track{display:flex;width:max-content;white-space:nowrap;animation:stripMove 46s linear infinite;will-change:transform;}
.strip-track span{
  font-family:var(--latin);text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,6rem);line-height:1.1;letter-spacing:.14em;
  padding-right:.8em;
  color:rgba(28,44,77,.12);
}
@supports((-webkit-text-stroke:1px black)){
  .strip-track span{color:transparent;-webkit-text-stroke:1px rgba(28,44,77,.26);}
}
@keyframes stripMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none;}}
.calm-motion .strip-track{animation:none;}

/* ============================================================
   STORY — pinned scrollytelling
   ============================================================ */
.story{background:var(--white);}
.story-head{margin-bottom:clamp(8px,1.5vw,20px);}
.story-head .eyebrow{margin-bottom:1.1rem;}
.story-head .h-display{color:var(--navy);}
.story-stage{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,84px);align-items:stretch;}
.story-vis{position:relative;}
.story-sticky{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:40px 0;
}
.story-frame{
  position:relative;width:min(100%,calc(72svh * .8));aspect-ratio:4/5;
  border-radius:4px;overflow:visible;
}
.story-figs{position:absolute;inset:0;border-radius:4px;overflow:hidden;
  box-shadow:0 36px 80px -42px rgba(28,44,77,.55);background:var(--cream-deep);}
.story-fig{position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--ease-soft),transform 1.5s var(--ease-out);}
.story-fig.on{opacity:1;transform:scale(1);}
.story-fig image-slot{display:block;width:100%;height:100%;}
.story-no{
  position:absolute;top:-.52em;right:-.18em;z-index:2;
  font-family:var(--latin);font-size:clamp(4.2rem,8vw,7rem);line-height:1;letter-spacing:.02em;
  color:rgba(212,175,95,.3);
  pointer-events:none;
}
@supports((-webkit-text-stroke:1px black)){
  .story-no{color:transparent;-webkit-text-stroke:1.5px rgba(184,146,63,.75);}
}
.story-no.tick{animation:noTick .7s var(--ease-out);}
@keyframes noTick{0%{opacity:0;transform:translateY(.3em);filter:blur(6px);}100%{opacity:1;transform:none;filter:none;}}
.story-dots{display:flex;gap:10px;}
.sdot{width:36px;height:2px;background:var(--line);transition:background .5s ease,width .5s var(--ease-out);}
.sdot.on{background:var(--gold);width:56px;}

.story-chs{display:flex;flex-direction:column;}
.story-ch{min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,72px) 0;}
/* 第1章は見出し直下に寄せて、セクション冒頭の空白を詰める */
.story-ch:first-child{min-height:62svh;justify-content:flex-start;padding-top:clamp(28px,6svh,56px);}
.story-ch + .story-ch{border-top:1px solid var(--line);}
.story-ch-label{
  font-family:var(--latin);font-size:.74rem;letter-spacing:.4em;color:var(--gold-deep);
  display:flex;align-items:center;gap:1em;margin-bottom:1.6rem;text-transform:uppercase;
}
.story-ch-label::after{content:"";flex:0 0 44px;height:1px;background:var(--line-gold);}
.story-title{font-size:clamp(1.55rem,2.9vw,2.15rem);color:var(--navy);margin-bottom:1.4rem;font-weight:500;}
.story-text strong{color:var(--gold-deep);font-weight:600;}

.story-land{text-align:center;margin-top:clamp(28px,5vw,64px);padding-top:clamp(44px,6vw,72px);border-top:1px solid var(--line);}
.story-land-lead{font-family:var(--serif);font-size:clamp(1rem,1.8vw,1.2rem);color:var(--gold-deep);letter-spacing:.1em;margin-bottom:1.1rem;}
.story-land-title{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--navy);font-weight:500;line-height:1.6;letter-spacing:.07em;}
.story-land-btn{margin-top:2.4rem;}

/* モバイル用：各チャプターカード上部の画像受け皿（デスクトップでは非表示） */
.story-ch-media{display:none;}

@media(max-width:880px){
  .story-stage{display:block;}
  /* 固定クロスフェードはスマホでは使わず、画像は各チャプターに直接表示 */
  .story-vis{display:none;}
  .story-chs{position:relative;z-index:1;margin-top:8px;}
  .story-ch,.story-ch:first-child{
    min-height:0;background:var(--white);border:1px solid var(--line);border-radius:6px;
    padding:clamp(16px,4vw,22px);margin-bottom:22px;justify-content:flex-start;
    box-shadow:0 24px 50px -30px rgba(28,44,77,.35);
  }
  .story-ch + .story-ch{border-top:1px solid var(--line);}
  .story-ch-media{
    display:block;position:relative;width:100%;aspect-ratio:16/10;
    border-radius:4px;overflow:hidden;margin-bottom:clamp(18px,4.5vw,24px);
    background:var(--cream-deep);
  }
  .story-ch-media image-slot{display:block;width:100%;height:100%;}
  .story-ch-no{
    position:absolute;top:6px;right:14px;z-index:2;pointer-events:none;
    font-family:var(--latin);font-size:clamp(2.6rem,12vw,3.6rem);line-height:1;letter-spacing:.02em;
    color:var(--gold-soft);text-shadow:0 2px 12px rgba(14,22,40,.55),0 0 1px rgba(14,22,40,.4);
  }
  .story-ch-label{margin-top:.2rem;}
}

/* ============================================================
   VOICE — producer
   ============================================================ */
.voice{background:var(--cream);}
.voice-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:center;}
.voice-media{position:relative;}
.voice-media .ph{border-radius:3px;box-shadow:0 30px 70px -40px rgba(28,44,77,.55);}
.voice-cap{
  position:absolute;left:0;bottom:24px;transform:translateX(-18px);
  background:var(--navy-deep);color:var(--cream);padding:1em 1.6em;border-left:3px solid var(--gold);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.5);
}
.voice-name{display:block;font-family:var(--serif);font-size:1.1rem;letter-spacing:.14em;}
.voice-role{display:block;font-size:.6rem;letter-spacing:.26em;color:var(--gold-soft);margin-top:.3em;}
.voice-text .eyebrow{margin-bottom:1rem;}
.qmark{display:block;font-family:var(--serif);font-size:4rem;line-height:.4;color:var(--gold);opacity:.5;height:.5em;}
.voice-quote{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(1.5rem,3.1vw,2.4rem);line-height:1.75;letter-spacing:.05em;margin:.3em 0 0;
}
.voice-quote mark{
  background:transparent;color:var(--navy);
  background-image:linear-gradient(transparent 62%, rgba(212,175,95,.55) 62%);
  background-repeat:no-repeat;background-size:0% 100%;
  padding:0 .04em;transition:background-size 1.4s var(--ease-out) .5s;
}
.voice-quote.marked mark{background-size:100% 100%;}
html:not(.js) .voice-quote mark{background-size:100% 100%;}
.voice-body{margin-top:1.8rem;max-width:30em;}
@media(max-width:760px){
  .voice-grid{grid-template-columns:1fr;gap:46px;}
  .voice-media .ph{max-width:400px;}
  .voice-cap{left:10px;bottom:10px;transform:none;padding:.85em 1.2em;}
}

/* ============================================================
   QUALITY
   ============================================================ */
.quality{background:var(--cream-deep);}
.quality-head{margin-bottom:clamp(40px,6vw,68px);text-align:center;}
.quality-head .eyebrow{margin-bottom:1.2rem;}
.quality-title{color:var(--navy);}
.quality-list{max-width:800px;margin:0 auto;border-top:1px solid var(--line);}
.q-row{
  display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:baseline;
  padding:clamp(22px,3vw,32px) 8px;border-bottom:1px solid var(--line);
  border-radius:4px;transition:background .7s var(--ease-soft),box-shadow .7s ease;
}
.q-row dt{display:flex;align-items:baseline;gap:1.2em;}
.q-label{font-size:.6rem;letter-spacing:.28em;color:var(--gold-deep);min-width:5.6em;}
.q-jp{font-family:var(--serif);font-size:1.12rem;color:var(--ink-soft);letter-spacing:.12em;font-weight:500;}
.q-row dd{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);color:var(--navy);font-weight:500;letter-spacing:.05em;line-height:1.4;}
.q-row dt,.q-row dd{transition:transform .7s var(--ease-out),color .7s var(--ease-soft);}
.q-row:hover{background:rgba(212,175,95,.07);box-shadow:inset 3px 0 0 rgba(212,175,95,.55);}
.q-row:hover dt,.q-row:hover dd{transform:translateX(.5em);}
.q-row:hover dd{color:var(--gold-deep);}
.quality-note{
  max-width:800px;margin:1.4rem auto 0;text-align:right;
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);font-weight:300;
}
@media(max-width:560px){
  .q-row{grid-template-columns:1fr;gap:.4em;}
  .q-label{min-width:0;}
  .quality-note{text-align:left;}
}

/* ============================================================
   KOHAKU — emblem feature
   ============================================================ */
.kohaku-feature{position:relative;background:var(--navy-darker);overflow:hidden;text-align:center;}
.kohaku-bg{position:absolute;inset:0;
  background-image:
    radial-gradient(125% 95% at 50% 30%, rgba(14,22,40,.60) 0%, rgba(14,22,40,.80) 52%, rgba(14,22,40,.93) 100%),
    url('assets/rice-in-hand.jpg');
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
.kohaku-bg::after{content:"";position:absolute;inset:0;opacity:.22;
  background-image:repeating-linear-gradient(115deg,rgba(197,137,63,.05) 0 1px,transparent 1px 26px);}
.kohaku-kicker{
  display:flex;flex-direction:column;align-items:center;gap:1.05rem;margin:0 auto 1.95rem;
  font-family:var(--serif);font-size:.94rem;letter-spacing:.5em;color:var(--gold-soft);text-indent:.5em;
}
.kohaku-kicker::after{content:"";width:1px;height:38px;background:linear-gradient(var(--gold-soft),transparent);}
.kohaku-frame{
  position:relative;display:block;width:fit-content;margin:0 auto 2.5rem;
  padding:clamp(40px,4.8vw,66px) clamp(54px,7vw,104px) clamp(34px,4vw,52px);
  border:1px solid rgba(212,175,95,.55);
}
.kohaku-frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(212,175,95,.26);pointer-events:none;}
.kohaku-frame::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 60% at 50% 44%, rgba(197,137,63,.18), transparent 72%);}
.kf-corner{position:absolute;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);}
.kf-tl{left:-4.5px;top:-4.5px;} .kf-tr{right:-4.5px;top:-4.5px;}
.kf-bl{left:-4.5px;bottom:-4.5px;} .kf-br{right:-4.5px;bottom:-4.5px;}
.kohaku-emblem{position:relative;display:block;width:clamp(128px,15vw,186px);margin:0 auto;}
.kohaku-emblem-img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));}
.kohaku-est{display:block;margin-top:1.5rem;white-space:nowrap;font-family:var(--serif);
  font-size:.8rem;font-weight:700;letter-spacing:.34em;color:rgba(227,199,135,.82);text-indent:.34em;}
.kohaku-feature .eyebrow{margin-bottom:1.5rem;}
.kohaku-title{color:var(--cream);font-size:clamp(1.8rem,4.2vw,3rem);font-weight:500;line-height:1.62;letter-spacing:.08em;}
.kohaku-copy{color:rgba(246,244,239,.82);margin:1.9rem auto 0;font-size:1.02rem;line-height:2.15;letter-spacing:.04em;}
.kohaku-copy strong{color:var(--gold-soft);font-weight:500;font-family:var(--serif);}

/* ============================================================
   REVIEWS — draggable marquee
   ============================================================ */
.reviews{background:var(--cream);}
.reviews-head{text-align:center;margin-bottom:clamp(44px,6vw,72px);}
.reviews-head .eyebrow{margin-bottom:1.1rem;}
.reviews-title{color:var(--navy);}
.reviews-lead{margin-top:1rem;}
.rev-marquee{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.rev-marquee.dragging{cursor:grabbing;}
.rev-track{display:flex;width:max-content;will-change:transform;}
.review{
  flex:0 0 clamp(300px,32vw,400px);
  margin-right:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:1rem;
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:clamp(26px,2.8vw,36px);
  transition:box-shadow .55s ease,border-color .55s ease,transform .55s var(--ease-out);
}
.review:hover{box-shadow:0 30px 60px -34px rgba(28,44,77,.45);border-color:rgba(212,175,95,.6);transform:translateY(-6px);}
.review-stars{color:var(--gold);font-size:.92rem;letter-spacing:.22em;}
.review-quote{font-family:var(--serif);font-size:1.02rem;line-height:2;letter-spacing:.03em;color:var(--ink);font-weight:400;}
.review-by{margin-top:auto;font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);}
.review-by::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:.7em;}
.rev-hint{margin-top:1.6rem;text-align:center;font-size:.66rem;letter-spacing:.3em;color:var(--ink-soft);opacity:.7;}

/* ============================================================
   PRODUCTS — subscription + grid + assurance
   ============================================================ */
.products{background:var(--white);}
.subs{
  background:var(--navy-deep);border:1px solid rgba(212,175,95,.3);border-radius:6px;
  padding:clamp(34px,4.5vw,60px) clamp(26px,4vw,56px);
}
.subs-head{text-align:center;margin-bottom:clamp(32px,4vw,48px);}
.subs-head .eyebrow{margin-bottom:1.1rem;}
.subs-title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);color:var(--cream);font-weight:500;letter-spacing:.08em;}
.subs-lead{margin-top:.9rem;color:rgba(246,244,239,.7);font-weight:300;font-size:.92rem;letter-spacing:.04em;}
.subs-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.6vw,30px);row-gap:0;}
/* 2カードの内部行（top / concept / desc / points / foot）を揃えて
   価格・ボタンが常に横一列になるようにする */
.subcard{
  display:grid;grid-template-rows:subgrid;grid-row:span 5;
  background:rgba(255,255,255,.03);border:1px solid rgba(246,244,239,.12);border-radius:5px;
  padding:clamp(26px,3vw,38px);
  transition:box-shadow .55s ease,border-color .55s ease,background .55s ease,transform .55s var(--ease-out);
}
.subcard:hover{border-color:rgba(212,175,95,.75);box-shadow:0 30px 60px -32px rgba(0,0,0,.5);background:rgba(212,175,95,.05);transform:translateY(-6px);}
.subcard-feature{border-color:rgba(212,175,95,.55);background:rgba(212,175,95,.07);}
.subcard-feature:hover{background:rgba(212,175,95,.11);}
.subcard-top{display:flex;align-items:center;gap:1em;flex-wrap:wrap;margin-bottom:1.1rem;}
.subcard-tag{
  display:inline-block;padding:.34em .85em;font-size:.58rem;letter-spacing:.24em;font-weight:600;
  color:var(--navy-deep);background:var(--gold);border-radius:2px;
}
.subcard:not(.subcard-feature) .subcard-tag{background:transparent;color:var(--gold-soft);border:1px solid rgba(212,175,95,.5);}
.subcard-name{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--cream);font-weight:600;letter-spacing:.1em;flex-basis:100%;}
.subcard-yomi{font-family:var(--gothic);font-size:.66rem;letter-spacing:.26em;color:var(--gold-soft);margin-left:.9em;font-weight:400;}
.subcard-concept{font-family:var(--serif);font-size:1.12rem;color:var(--gold-soft);letter-spacing:.06em;margin-bottom:.7rem;}
.subcard-desc{color:rgba(246,244,239,.78);font-weight:300;font-size:.88rem;line-height:1.95;letter-spacing:.03em;min-height:5.7em;}
.subcard-points{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6em;}
.subcard-points li{position:relative;padding-left:1.6em;font-size:.85rem;color:rgba(246,244,239,.9);letter-spacing:.02em;}
.subcard-points .spec-l{display:inline-block;min-width:4.6em;margin-right:.5em;color:var(--gold-soft);font-size:.72rem;letter-spacing:.1em;font-weight:500;}
.subcard-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gold);}
.subcard-foot{margin-top:auto;padding-top:1.6rem;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.subcard-price{font-family:var(--latin);color:var(--cream);display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;}
.subcard-price em{font-style:normal;font-size:1.85rem;font-weight:400;letter-spacing:.02em;}
.subcard-price small{font-family:var(--gothic);font-size:.72rem;color:rgba(246,244,239,.6);letter-spacing:.03em;}
.subcard-price-note{
  flex-basis:100%;font-family:var(--gothic);font-size:.72rem;letter-spacing:.06em;
  color:var(--gold-soft);margin-top:.3em;
}
.subcard-price-note::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold);vertical-align:middle;margin-right:.55em;}
.subcard-btn{width:100%;}
@supports not (grid-template-rows:subgrid){
  .subs-grid{row-gap:clamp(20px,2.6vw,30px);}
  .subcard{display:flex;flex-direction:column;grid-row:auto;}
  .subcard-points{min-height:9.4em;}
}
@media(max-width:760px){.subs-grid{grid-template-columns:1fr;row-gap:clamp(20px,2.6vw,30px);}.subcard{display:flex;flex-direction:column;grid-row:auto;}.subcard-desc{min-height:0;}.subcard-points{min-height:0;}}

.prod-head{text-align:center;margin:clamp(64px,9vw,120px) 0 clamp(50px,7vw,84px);}
.prod-head .eyebrow{margin-bottom:1.1rem;}
.prod-h2{color:var(--navy);}
.prod-lead{margin-top:1.1rem;}
.prod-help{display:inline-block;margin-top:.5em;font-size:.92rem;color:var(--ink);}
.prod-help strong{color:var(--gold-deep);font-weight:600;}
.ship-link{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;
  font-family:var(--gothic);font-size:.84rem;letter-spacing:.1em;color:var(--navy);
  border:1px solid var(--line);border-radius:2px;padding:.7em 1.5em;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.ship-link .arr{font-family:var(--latin);transition:transform .35s ease;}
.ship-link:hover{background:var(--navy);color:var(--cream);border-color:var(--navy);}
.ship-link:hover .arr{transform:translateX(4px);}

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(30px,4.5vw,60px);row-gap:0;}
/* カード内部の6行（画像・タグライン・名称・説明・おすすめの食べ方・フッター）を
   3カードで横一列に揃える——「おすすめの食べ方」と「価格」の高さがズレない */
.prod-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;will-change:transform;}
@supports not (grid-template-rows:subgrid){
  .prod-card{display:flex;flex-direction:column;grid-row:auto;}
  .prod-feat{min-height:6.7em;}
  .prod-pair{min-height:5.6em;}
  .prod-foot{margin-top:auto;}
}
.prod-imgwrap{display:block;overflow:hidden;border-radius:3px;transition:box-shadow .55s ease;}
.prod-img{display:block;aspect-ratio:4/5;transition:transform 1.1s var(--ease-out);}
.prod-card:hover .prod-imgwrap{box-shadow:0 28px 54px -30px rgba(28,44,77,.42);}
.prod-card:hover .prod-img{transform:scale(1.06);}
.prod-tagline{font-family:var(--serif);font-size:.92rem;color:var(--gold-deep);letter-spacing:.1em;margin:1.7rem 0 .45rem;}
.prod-gift-tag{
  display:inline-block;margin-right:.8em;padding:.25em .7em;
  font-size:.6rem;letter-spacing:.24em;font-weight:600;
  color:var(--navy-deep);background:var(--gold);border-radius:2px;vertical-align:middle;
}
.prod-gift .prod-imgwrap{box-shadow:0 0 0 1px rgba(212,175,95,.5);border-radius:3px;}
.prod-gift .prod-foot{border-top-color:rgba(212,175,95,.4);}
.prod-name{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--navy);font-weight:600;letter-spacing:.12em;transition:color .45s ease;}
.prod-card:hover .prod-name{color:var(--gold-deep);}
.prod-feat{margin-top:1rem;font-size:.9rem;color:var(--ink-soft);font-weight:300;line-height:1.95;letter-spacing:.03em;}
/* おすすめの食べ方 */
.prod-pair{margin-top:1.3rem;}
.prod-pair-label{
  display:flex;align-items:center;gap:.6em;
  font-size:.62rem;letter-spacing:.22em;color:var(--gold-deep);font-weight:600;margin-bottom:.75rem;
}
.prod-pair-label svg{width:15px;height:15px;flex-shrink:0;}
.prod-pair-chips{display:flex;flex-wrap:wrap;gap:8px;}
.prod-pair-chips li{
  list-style:none;white-space:nowrap;
  font-family:var(--serif);font-size:.82rem;letter-spacing:.05em;color:var(--navy);
  background:rgba(212,175,95,.1);border:1px solid var(--line-gold);border-radius:2px;
  padding:.42em .9em;line-height:1.3;
  transition:background .4s var(--ease-soft),color .4s var(--ease-soft),border-color .4s ease;
}
.prod-card:hover .prod-pair-chips li{background:rgba(212,175,95,.16);border-color:rgba(212,175,95,.5);}
.prod-foot{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.prod-price{font-family:var(--latin);color:var(--navy);}
.prod-price em{font-style:normal;font-size:1.85rem;font-weight:400;letter-spacing:.02em;}
.prod-price small{font-size:.74rem;color:var(--ink-soft);margin-left:.6em;font-family:var(--gothic);letter-spacing:.03em;}
.prod-link{
  font-family:var(--gothic);font-size:.85rem;letter-spacing:.12em;color:var(--navy);
  border-bottom:1px solid var(--gold);padding-bottom:.35em;
  display:inline-flex;align-items:center;gap:.6em;transition:color .35s ease;
}
.prod-link .arr{font-family:var(--latin);transition:transform .35s ease;}
.prod-link:hover{color:var(--gold-deep);}
.prod-link:hover .arr{transform:translateX(5px);}
@media(max-width:820px){
  .prod-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;row-gap:clamp(42px,9vw,60px);}
  .prod-card{display:flex;flex-direction:column;grid-row:auto;}
  .prod-feat,.prod-pair{min-height:0;}
  .prod-foot{margin-top:1.5rem;}
}

.assure{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px);
  margin-top:clamp(50px,6vw,80px);padding-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--line);
}
.assure-item{display:flex;gap:16px;align-items:flex-start;text-align:left;}
.assure-ic{flex-shrink:0;width:38px;height:38px;color:var(--gold-deep);
  transition:color .45s ease,transform .55s var(--ease-out);}
.assure-ic svg{width:100%;height:100%;}
.assure-item:hover .assure-ic{color:var(--gold);transform:translateY(-4px);}
.assure-h{font-family:var(--serif);font-size:1.05rem;color:var(--navy);font-weight:600;letter-spacing:.06em;margin-bottom:.5em;}
.assure-p{font-size:.82rem;color:var(--ink-soft);font-weight:300;line-height:1.85;letter-spacing:.02em;}
.assure-note{display:block;margin-top:.5em;font-size:.74rem;letter-spacing:.04em;color:var(--gold-deep);font-weight:400;}
@media(max-width:760px){.assure{grid-template-columns:1fr;gap:24px;max-width:460px;margin-left:auto;margin-right:auto;margin-top:clamp(50px,6vw,80px);}}

/* ============================================================
   LINE CTA
   ============================================================ */
.line-cta{position:relative;background:var(--navy-deep);overflow:hidden;}
.line-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 120%, #21345a 0%, var(--navy-deep) 50%, var(--navy-darker) 100%);}
.line-bg::after{content:"";position:absolute;inset:0;opacity:.4;
  background-image:repeating-linear-gradient(115deg,rgba(212,175,95,.05) 0 1px,transparent 1px 26px);}
.line-glow{position:absolute;left:50%;top:-20%;transform:translateX(-50%);width:min(700px,110vw);height:50vh;
  background:radial-gradient(circle at 50% 0, rgba(232,178,92,.3),transparent 65%);filter:blur(10px);}
.line-cta .eyebrow{margin-bottom:1.5rem;}
.line-title{color:var(--cream);font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:500;line-height:1.65;letter-spacing:.07em;}
.btn-line{
  margin-top:2.6rem;background:#06c755;color:#fff;font-weight:700;letter-spacing:.1em;
  padding:1.1em 2.6em;border-radius:3px;font-size:1rem;
  box-shadow:0 16px 40px -18px rgba(6,199,85,.7);
}
.btn-line:hover{background:#05b54d;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-darker);color:rgba(246,244,239,.62);padding:clamp(60px,8vw,96px) var(--gutter) 40px;overflow:hidden;}
.foot-logo{display:block;width:clamp(208px,23vw,272px);max-width:100%;height:auto;margin:0 0 1.6rem 0;}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(40px,6vw,72px);flex-wrap:wrap;
  padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid rgba(212,175,95,.16);}
.foot-brand{max-width:338px;text-align:center;}
.foot-brand .foot-logo{margin-left:auto;margin-right:auto;}
.foot-nav{display:flex;gap:clamp(44px,6vw,84px);}
.foot-est{font-size:.66rem;letter-spacing:.26em;color:var(--gold-soft);text-transform:uppercase;margin-bottom:1.1rem;}
.foot-tag{font-family:var(--serif);font-size:1.12rem;font-weight:500;line-height:1.85;letter-spacing:.08em;color:rgba(246,244,239,.82);}
.foot-col{display:flex;flex-direction:column;gap:.95em;}
.foot-h{font-size:.66rem;letter-spacing:.3em;color:var(--gold-soft);margin-bottom:.4em;}
.foot-col a{font-size:.88rem;letter-spacing:.05em;color:rgba(246,244,239,.7);transition:color .3s ease,padding .3s ease;}
.foot-col a:hover{color:var(--gold-soft);padding-left:4px;}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;
  font-size:.74rem;letter-spacing:.08em;color:rgba(246,244,239,.4);flex-wrap:wrap;}
.foot-grain{color:var(--gold-soft);opacity:.7;font-size:.78rem;}
@media(max-width:760px){
  .foot-grid{gap:36px;}
  .foot-brand{flex:0 0 100%;max-width:none;}
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweak-panel{
  position:fixed;right:16px;bottom:16px;z-index:9999;width:288px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);overflow:auto;
  background:#15233f;color:var(--cream);border:1px solid rgba(212,175,95,.36);border-radius:8px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  font-family:var(--gothic);
}
.tweak-panel[hidden]{display:none;}
.tweak-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid rgba(212,175,95,.2);
  font-family:var(--latin);letter-spacing:.22em;font-size:.78rem;color:var(--gold-soft);text-transform:uppercase;
}
.tweak-close{background:none;border:none;color:rgba(246,244,239,.6);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 2px;transition:color .25s ease;}
.tweak-close:hover{color:var(--gold-soft);}
.tweak-section{padding:14px 16px 6px;font-size:.62rem;letter-spacing:.22em;color:var(--gold-soft);text-transform:uppercase;}
.tweak-opts{padding:0 12px 14px;display:flex;flex-direction:column;gap:6px;}
.tweak-opt{
  display:flex;flex-direction:column;gap:.18em;cursor:pointer;
  padding:11px 12px;border:1px solid rgba(246,244,239,.14);border-radius:5px;
  transition:border-color .25s ease,background .25s ease;position:relative;
}
.tweak-opt:hover{border-color:rgba(212,175,95,.5);background:rgba(212,175,95,.06);}
.tweak-opt input{position:absolute;opacity:0;pointer-events:none;}
.tweak-opt b{font-size:.82rem;font-weight:600;color:var(--cream);letter-spacing:.04em;display:flex;align-items:center;gap:.5em;}
.tweak-opt b::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(246,244,239,.4);flex-shrink:0;transition:all .25s ease;}
.tweak-opt span{font-size:.74rem;color:rgba(246,244,239,.62);font-family:var(--serif);letter-spacing:.03em;padding-left:1.6em;}
.tweak-opt:has(input:checked){border-color:rgba(212,175,95,.7);background:rgba(212,175,95,.1);}
.tweak-opt:has(input:checked) b::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 2.5px #15233f;}

/* ============================================================
   PHONE (≤600px)
   ============================================================ */
@media(max-width:600px){
  .section{padding:clamp(58px,15vw,84px) var(--gutter);}
  .hd-inner{height:70px;}
  .site-header.scrolled .hd-inner{height:62px;}
  .logo-img{height:50px;}
  .site-header.scrolled .logo-img{height:44px;}
  .hd-cta{padding:.6em 1.05em;font-size:.72rem;letter-spacing:.08em;}

  .hero{padding:104px var(--gutter) 84px;}
  .hero-crest{height:clamp(170px,48vw,240px);}
  .hero-crest-wrap{margin-bottom:1.3rem;}
  .hero-title{font-size:clamp(1.9rem,8.5vw,2.5rem);line-height:1.55;}
  .hero-sub{font-size:.92rem;line-height:2;margin-top:1.7rem;}
  .hero-sub br{display:none;}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:300px;margin:2.4rem auto 0;gap:12px;}
  .hero-cta .btn{width:100%;}
  .btn{padding:1.05em 1.6em;}

  .intro .eyebrow{margin-bottom:2rem;}
  .intro-sub{margin-top:2.2rem;}

  .voice-name{font-size:1rem;}

  .kohaku-frame{padding:26px 32px 22px;margin-bottom:2.1rem;}
  .kohaku-emblem{width:clamp(132px,38vw,180px);}
  .kohaku-est{margin-top:1.1rem;font-size:.72rem;letter-spacing:.26em;text-indent:.26em;}

  .subs{padding:30px 20px;}
  .subcard{padding:24px 20px;}
  .subcard-yomi{display:block;margin:.5em 0 0;}

  .foot-grid{justify-content:center;}
  .foot-brand{text-align:center;}
  .foot-logo{width:min(190px,48vw);margin:0 auto 1.6rem;}
  .foot-nav{width:100%;justify-content:center;text-align:center;}
  .foot-col{align-items:center;}
  .foot-col a:hover{padding-left:0;}
  .foot-base{flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;}
}
@media(max-width:380px){
  .hero-title{font-size:2rem;}
  .prod-grid{max-width:100%;}
}