:root{ color-scheme: only light; }
/* ============================================================
   Kurokawa 黒川の隠れ家
   Premium remedial & therapeutic massage · Fremantle WA
   Photo-light, Japanese-pattern-rich. Bootstrap 5.3 + this layer.
   ============================================================ */

:root {
  --sumi:      #1A1613;   /* ink black        */
  --sumi-2:    #2A231D;
  --washi:     #F4EDDE;   /* paper cream      */
  --washi-2:   #EDE4D0;
  --washi-3:   #FBF7EC;
  --kinari:    #E4D9BF;
  --ink-soft:  #5A4F41;
  --wood:      #6B5136;
  --ai:        #1E2A38;   /* indigo           */
  --ai-2:      #26374B;
  --kin:       #C2A15A;   /* gold             */
  --kin-deep:  #A8894A;
  --shu:       #B23A2E;   /* vermillion hanko */
  --matcha:    #767C5C;   /* soft green accent*/
  --hair:      rgba(26,22,19,.14);

  --serif:  "Cormorant Garamond", "Times New Roman", serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans:   "Zen Kaku Gothic New", -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body {
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--kin); color: var(--sumi); }

h1,h2,h3,.font-serif{ font-family: var(--serif); font-weight: 500; }
.jp{ font-family: var(--mincho); }

/* ---------- Japanese patterns (subtle, seamless) ---------- */
/* asanoha (hemp-leaf) hairline lattice */
.pat-asanoha{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23C2A15A' stroke-width='0.6' opacity='0.5'%3E%3Cpath d='M28 0v32.3L0 16.2V48.5l28 16.2 28-16.2V16.2L28 32.3z'/%3E%3Cpath d='M28 0L0 16.2m56 0L28 0M0 48.5l28 16.2m0 0l28-16.2M28 32.3L0 16.2m56 0L28 32.3M0 48.5l28-16.2m0 0l28 16.2M28 64.7V97'/%3E%3C/g%3E%3C/svg%3E");
}
/* seigaiha (waves) via layered radial gradients */
.pat-seigaiha{
  background-image:
   radial-gradient(circle at 50% 100%, transparent 32%, var(--kin) 33%, var(--kin) 38%, transparent 39%, transparent 57%, var(--kin) 58%, var(--kin) 63%, transparent 64%),
   radial-gradient(circle at 50% 100%, transparent 32%, var(--kin) 33%, var(--kin) 38%, transparent 39%, transparent 57%, var(--kin) 58%, var(--kin) 63%, transparent 64%);
  background-size: 54px 27px;
  background-position: 0 0, 27px 13.5px;
}

::selection{ background:var(--kin); color:var(--sumi); }

/* ---------- shared ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.1rem;
}
.eyebrow .jp{ color:var(--shu); font-size:.92rem; letter-spacing:.28em; white-space:nowrap; }
.eyebrow::after{ content:""; width:42px; height:1px; background:var(--kin); }
.eyebrow.centered{ justify-content:center; }

.section-title{ font-size:clamp(2rem,4.3vw,2.95rem); line-height:1.14; margin-bottom:1rem; }
.section-pad{ padding:clamp(4rem,9vw,7rem) 0; }
.lead-soft{ color:var(--ink-soft); font-weight:300; max-width:46rem; line-height:1.85; }
.bg-washi-2{ background:var(--washi-2); }
.bg-sumi{ background:var(--sumi); color:var(--washi); }

/* ---------- navbar ---------- */
.navbar-kr{ transition:background-color .35s,box-shadow .35s,padding .35s; padding:1.05rem 0; }
.navbar-kr .navbar-brand{ display:flex; align-items:center; gap:.7rem; color:#fff; font-family:var(--serif); font-size:1.26rem; letter-spacing:.04em; }
.navbar-kr .brand-jp{ display:block; font-size:.6rem; letter-spacing:.4em; color:rgba(255,255,255,.72); margin-top:.12rem; }
.navbar-kr .nav-link{ color:rgba(255,255,255,.85); font-size:.79rem; letter-spacing:.16em; text-transform:uppercase; margin-inline:.3rem; }
.navbar-kr .nav-link:hover{ color:var(--kin); }
.navbar-kr.scrolled{ background:rgba(244,237,222,.94); backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 1px 0 var(--hair); padding:.5rem 0; }
.navbar-kr.scrolled .navbar-brand{ color:var(--sumi); }
.navbar-kr.scrolled .brand-jp{ color:var(--ink-soft); }
.navbar-kr.scrolled .nav-link{ color:var(--ink-soft); }
.navbar-kr.scrolled .nav-link:hover{ color:var(--shu); }
.navbar-kr .navbar-toggler{ border:1px solid rgba(255,255,255,.5); border-radius:2px; }
.navbar-kr.scrolled .navbar-toggler{ border-color:var(--hair); }
.navbar-kr .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.9)' stroke-width='1.5' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); }
.navbar-kr.scrolled .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(26,22,19,.85)' stroke-width='1.5' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); }
@media (max-width:991.98px){
  .navbar-kr .navbar-collapse{ background:rgba(26,22,19,.97); margin-top:.8rem; padding:1rem 1.2rem; border-radius:4px; }
  .navbar-kr.scrolled .navbar-collapse{ background:rgba(244,237,222,.98); box-shadow:0 12px 30px rgba(26,22,19,.14); }
  .navbar-kr .nav-link{ padding-block:.55rem; }
}

/* ---------- buttons ---------- */
.btn-kr,.btn-kr-outline{ font-size:.77rem; letter-spacing:.2em; text-transform:uppercase; border-radius:2px; padding:.85rem 1.7rem; transition:all .25s; }
.btn-kr{ background:var(--kin); border:1px solid var(--kin); color:var(--sumi); }
.btn-kr:hover,.btn-kr:focus{ background:var(--kin-deep); border-color:var(--kin-deep); color:#fff; }
.btn-kr-outline{ background:transparent; border:1px solid rgba(255,255,255,.6); color:rgba(255,255,255,.92); }
.btn-kr-outline:hover,.btn-kr-outline:focus{ border-color:var(--kin); color:var(--kin); }
.btn-kr-outline.on-light{ border-color:rgba(26,22,19,.4); color:var(--sumi); }
.btn-kr-outline.on-light:hover{ border-color:var(--shu); color:var(--shu); }

/* ---------- hero (no photo) ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; color:#fff;
  background:
    radial-gradient(1100px 600px at 78% 18%, rgba(194,161,90,.16), transparent 60%),
    linear-gradient(150deg, var(--sumi) 0%, var(--ai) 60%, var(--ai-2) 100%);
  overflow:hidden;
}
.hero .wave{ position:absolute; inset:auto 0 0 0; height:220px; opacity:.10; background-position:0 100%,27px calc(100% - 13.5px); pointer-events:none; }
.hero .enso{ position:absolute; right:4%; top:50%; transform:translateY(-50%); width:min(40vw,520px); height:auto; opacity:.15; pointer-events:none; }
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ color:rgba(255,255,255,.8); }
.hero .eyebrow .jp{ color:var(--kin); }
.hero-title{ font-size:clamp(3rem,8vw,5.6rem); line-height:1.02; letter-spacing:.015em; text-shadow:0 2px 34px rgba(0,0,0,.32); }
.hero-sub-jp{ font-size:clamp(1rem,2.1vw,1.4rem); letter-spacing:.5em; color:var(--kin); margin:1.15rem 0 1rem; }
.hero-lede{ max-width:34rem; font-weight:300; color:rgba(255,255,255,.9); font-size:1.06rem; line-height:1.85; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin:1.5rem 0 .5rem; }
.hero-tags span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.24); border-radius:2px; padding:.32rem .7rem; }
.hero-vertical{ position:absolute; top:50%; right:clamp(1.2rem,3.5vw,3.2rem); transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--mincho); font-size:1rem; letter-spacing:.5em; color:rgba(255,255,255,.8); border-right:1px solid rgba(255,255,255,.34); padding-right:1rem; height:44vh; min-height:280px; z-index:2; }
.hero-scroll{ position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.72); font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; text-decoration:none; z-index:2; }
.hero-scroll span{ display:block; width:1px; height:40px; margin:.55rem auto 0; background:linear-gradient(to bottom,rgba(255,255,255,.8),transparent); }
.hero-scroll:hover{ color:var(--kin); }

/* ---------- pillars ---------- */
.pillar-kanji{ width:64px; height:64px; border:1px solid var(--kin); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-size:1.55rem; color:var(--wood); margin-bottom:1.2rem; background:var(--washi-3); }
.pillar h3{ font-size:1.28rem; margin-bottom:.5rem; }
.pillar p{ color:var(--ink-soft); font-weight:300; font-size:.95rem; line-height:1.8; }

/* ---------- treatments ---------- */
.treatment-card{ position:relative; background:var(--washi-3); border:1px solid var(--hair); border-radius:4px; padding:1.9rem 1.8rem 1.6rem; height:100%; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.treatment-card:hover{ transform:translateY(-4px); box-shadow:0 20px 42px rgba(26,22,19,.12); }
.treatment-card .watermark{ position:absolute; top:-.7rem; right:.4rem; font-family:var(--mincho); font-size:4.6rem; color:rgba(107,81,54,.08); line-height:1; user-select:none; }
.treatment-card h3{ font-size:1.4rem; margin-bottom:.1rem; }
.treatment-card .jp-name{ font-size:.78rem; letter-spacing:.24em; color:var(--shu); margin-bottom:.7rem; }
.treatment-card .desc{ color:var(--ink-soft); font-weight:300; font-size:.92rem; line-height:1.75; min-height:3rem; }
.rebate-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--matcha); border:1px solid rgba(118,124,92,.45); border-radius:2px; padding:.18rem .5rem; margin-bottom:.7rem; }
.rebate-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--matcha); }
.price-row{ display:flex; align-items:baseline; gap:.6rem; font-size:.92rem; padding-top:.42rem; }
.price-row .leader{ flex:1; border-bottom:1px dotted rgba(26,22,19,.35); transform:translateY(-4px); }
.price-row .price{ font-family:var(--serif); font-size:1.06rem; font-weight:600; }
.menu-note{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em; }

/* ---------- health fund ---------- */
.fund-panel{ background:linear-gradient(160deg,var(--washi-3),var(--washi-2)); border:1px solid var(--hair); border-radius:6px; padding:clamp(1.8rem,4vw,2.8rem); }
.fund-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; }
.fund-list span{ font-size:.8rem; letter-spacing:.04em; color:var(--ink-soft); background:#fff; border:1px solid var(--hair); border-radius:20px; padding:.4rem .9rem; }
.fund-steps{ list-style:none; padding:0; margin:0; counter-reset:s; }
.fund-steps li{ position:relative; padding:.6rem 0 .6rem 2.6rem; border-bottom:1px dashed var(--hair); color:var(--ink-soft); font-size:.95rem; font-weight:300; }
.fund-steps li:last-child{ border-bottom:0; }
.fund-steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:.55rem; width:26px; height:26px; border-radius:50%; background:var(--ai); color:#fff; font-family:var(--serif); font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.hicaps-chip{ display:inline-block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kin-deep); border:1px solid rgba(168,137,74,.5); border-radius:2px; padding:.12rem .5rem; }

/* ---------- experience (icon based, no photos) ---------- */
.exp-card{ text-align:center; padding:1.4rem 1rem; }
.exp-ico{ width:56px; height:56px; margin:0 auto 1rem; color:var(--kin-deep); }
.exp-card h4{ font-family:var(--sans); font-weight:500; font-size:.98rem; letter-spacing:.06em; margin-bottom:.4rem; }
.exp-card .jp{ display:block; color:var(--shu); font-size:.76rem; letter-spacing:.2em; margin-bottom:.55rem; }
.exp-card p{ color:var(--ink-soft); font-weight:300; font-size:.88rem; line-height:1.7; }

/* ---------- standards / quote band ---------- */
.band{ background:radial-gradient(1000px 340px at 20% 0%,rgba(194,161,90,.12),transparent 60%), linear-gradient(135deg,var(--ai) 0%,var(--ai-2) 100%); color:var(--washi); }
.band .enso{ width:96px; height:96px; opacity:.95; }
.standard-line{ font-family:var(--mincho); font-size:clamp(1.2rem,2.6vw,1.6rem); letter-spacing:.16em; line-height:1.9; }
.standard-sub{ color:rgba(244,237,222,.72); font-family:var(--serif); font-style:italic; font-size:1.02rem; }

/* ---------- booking form ---------- */
.book-wrap{ background:var(--washi-3); border:1px solid var(--hair); border-radius:6px; padding:clamp(1.7rem,4vw,2.6rem); box-shadow:0 18px 50px rgba(26,22,19,.08); }
.form-label{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.35rem; }
.form-control,.form-select{ border:1px solid var(--hair); border-radius:3px; background:#fff; padding:.7rem .85rem; font-size:.95rem; color:var(--sumi); }
.form-control:focus,.form-select:focus{ border-color:var(--kin); box-shadow:0 0 0 .18rem rgba(194,161,90,.2); }
.form-check-input:checked{ background-color:var(--kin); border-color:var(--kin); }
.form-hint{ font-size:.78rem; color:var(--ink-soft); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.8rem; color:var(--ink-soft); }
.alert-kr{ border-radius:4px; padding:1rem 1.1rem; font-size:.92rem; }
.alert-kr.ok{ background:rgba(118,124,92,.12); border:1px solid rgba(118,124,92,.4); color:#43492f; }
.alert-kr.err{ background:rgba(178,58,46,.08); border:1px solid rgba(178,58,46,.35); color:#7c281f; }

/* ---------- visit ---------- */
.visit-card{ background:var(--washi-3); border:1px solid var(--hair); border-radius:4px; padding:1.7rem 1.6rem; height:100%; }
.visit-card h3{ font-size:1.02rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--sans); font-weight:500; display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; }
.visit-card h3 .jp{ color:var(--shu); font-size:.98rem; letter-spacing:.18em; }
.hours-row{ display:flex; align-items:baseline; gap:.6rem; font-size:.92rem; padding:.34rem 0; }
.hours-row .leader{ flex:1; border-bottom:1px dotted rgba(26,22,19,.3); transform:translateY(-4px); }
.hours-row .closed{ color:var(--shu); letter-spacing:.06em; }
.visit-card p,.visit-card address{ font-weight:300; font-size:.95rem; color:var(--ink-soft); line-height:1.8; margin-bottom:.4rem; }
.tbc{ display:inline-block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--kin-deep); border:1px solid rgba(168,137,74,.5); border-radius:2px; padding:.08rem .42rem; }
.map-link{ color:var(--ai-2); text-decoration:none; border-bottom:1px solid var(--kin); font-size:.92rem; }
.map-link:hover{ color:var(--shu); }

/* ---------- footer ---------- */
.footer{ background:var(--sumi); color:rgba(244,237,222,.78); }
.footer .brand-line{ display:flex; align-items:center; gap:.8rem; color:#fff; font-family:var(--serif); font-size:1.32rem; }
.footer .jp-sub{ letter-spacing:.34em; font-size:.76rem; color:rgba(244,237,222,.6); }
.footer a{ color:rgba(244,237,222,.75); text-decoration:none; font-size:.85rem; letter-spacing:.1em; }
.footer a:hover{ color:var(--kin); }
.footer .rule{ border-top:1px solid rgba(244,237,222,.14); }
.footer .fine{ font-size:.76rem; color:rgba(244,237,222,.5); letter-spacing:.04em; }

/* ---------- terms page ---------- */
.legal{ max-width:52rem; }
.legal h2{ font-size:1.9rem; margin:2.2rem 0 .8rem; }
.legal h3{ font-family:var(--sans); font-weight:600; font-size:1.02rem; letter-spacing:.04em; margin:1.6rem 0 .5rem; color:var(--sumi); }
.legal p,.legal li{ color:var(--ink-soft); font-weight:300; line-height:1.85; font-size:.96rem; }
.legal ul{ padding-left:1.1rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .treatment-card{transition:none;} }
section[id]{ scroll-margin-top:82px; }

/* ---------- booking / manage top bar (centered seal) ---------- */
.kr-topbar{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.6rem 1.2rem;background:rgba(244,237,222,.96);backdrop-filter:blur(8px) saturate(1.15);border-bottom:1px solid var(--hair)}
.kr-back{justify-self:start;color:var(--ink-soft);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem}
.kr-back:hover{color:var(--shu)}
.kr-back span{font-size:1.15rem;line-height:1}
.kr-mark{justify-self:center;display:block}
.kr-spacer{justify-self:end}
@media(max-width:520px){.kr-back{font-size:0;gap:0}.kr-back span{font-size:1.4rem}}
/* date strip */
.day-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 .6rem;-webkit-overflow-scrolling:touch}
.day-chip{flex:0 0 auto;min-width:60px;text-align:center;border:1px solid var(--hair);background:#fff;border-radius:8px;padding:.5rem .3rem;cursor:pointer;transition:all .15s}
.day-chip:hover{border-color:var(--kin)}
.day-chip.sel{border-color:var(--kin);background:rgba(194,160,99,.16)}
.day-chip.none{opacity:.4;cursor:not-allowed}
.day-chip .dow{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.day-chip .dom{font-family:var(--serif);font-size:1.3rem;color:var(--sumi);line-height:1.1}
.day-chip .cnt{font-size:.6rem;color:var(--matcha)}
.day-chip.none .cnt{color:var(--ink-soft)}
.next-avail{font-size:.9rem;color:var(--matcha);margin:.2rem 0 .7rem}
.code-box{font-family:var(--serif);font-size:2rem;letter-spacing:.3em;color:var(--ai);background:var(--washi-2);border:1px dashed var(--kin);border-radius:6px;padding:.7rem 1rem;display:inline-block;margin:.3rem 0}

/* ---------- backstory extras ---------- */
.story-seal{text-align:center}
.extras{border-top:1px solid var(--hair);padding-top:2.2rem;margin-top:1rem!important}
.extra{text-align:center;padding:.3rem .6rem}
.extra .ex-k{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;font-family:var(--mincho);font-size:1.2rem;color:var(--wood);border:1px solid var(--kin);border-radius:50%;margin-bottom:.6rem;background:var(--washi-3)}
.extra h4{font-family:var(--serif);font-size:1.14rem;margin-bottom:.3rem}
.extra p{color:var(--ink-soft);font-weight:300;font-size:.88rem;line-height:1.7;margin:0}
/* ---------- no-sexual-service highlight (blue band) ---------- */
.no-service-note{max-width:40rem;margin:1.3rem auto 0;color:#fff;font-weight:400;font-size:1rem;line-height:1.8;border:1px solid rgba(194,161,90,.55);border-radius:6px;padding:.9rem 1.2rem;background:rgba(0,0,0,.16)}
/* ---------- white booking panel on blue ---------- */
.book-panel{max-width:600px;margin:3rem auto 0;background:var(--washi-3);border-radius:10px;padding:2.2rem 2rem;text-align:center;box-shadow:0 26px 60px rgba(0,0,0,.34)}
.book-panel h3{font-family:var(--serif);font-size:2rem;color:var(--sumi);margin-bottom:.5rem}
.book-panel-lede{color:var(--ink-soft);font-weight:300;max-width:34rem;margin:0 auto 1.1rem}
.book-facts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.4rem}
.book-facts span{font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);background:var(--washi-2);border:1px solid var(--hair);border-radius:20px;padding:.35rem .8rem}
.book-panel-note{font-size:.85rem;color:var(--ink-soft);margin:.9rem 0 0}
.book-panel-note a{color:var(--ai-2);border-bottom:1px solid var(--kin);text-decoration:none}
.btn-lg-kr{padding:1rem 2.4rem;font-size:.82rem}
/* ---------- topbar wordmark ---------- */
.kr-mark{justify-self:center;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.kr-mark .wm{font-family:var(--serif);font-size:1.16rem;color:var(--sumi);letter-spacing:.03em;line-height:1.05;text-align:left}
.kr-mark .wm small{display:block;font-family:var(--mincho);font-size:.56rem;letter-spacing:.32em;color:var(--ink-soft);margin-top:.12rem}
@media(max-width:520px){.kr-mark .wm{font-size:1rem}.kr-mark .wm small{font-size:.5rem;letter-spacing:.18em}}

/* ---------- apple-style spacing + refinements ---------- */
.section-pad{padding:clamp(4.5rem,10vw,8.5rem) 0}
.section-title{letter-spacing:-.005em}
.lead-soft{line-height:1.9}
.extras{margin-top:2.5rem!important}
.story-seal img{display:block;margin:0 auto}
.book-panel{margin-top:3.4rem}
.hero-tags{margin-top:1.7rem}
/* ---------- mobile / smaller screens ---------- */
@media(max-width:991px){
  .hero{min-height:100svh;align-items:flex-start;padding-top:118px;padding-bottom:90px}
  .hero .enso{ height:auto; width:min(112vw,520px); right:0; left:auto; top:50%; transform:translate(40%,-50%); opacity:.07 }
  .hero-scroll{bottom:1.4rem}
  .hero-scroll span{height:26px}
  .hero-vertical{display:none}
  .hero-title{font-size:clamp(2.6rem,13vw,3.6rem)}
}
@media(max-width:600px){
  .hero{padding-top:112px}
  .hero-lede{font-size:1rem}
  .section-title{font-size:clamp(1.75rem,7vw,2.3rem)}
  .book-panel{padding:1.8rem 1.3rem;margin-top:2.4rem}
  .book-panel h3{font-size:1.6rem}
  .no-service-note{font-size:.92rem;padding:.8rem 1rem}
  
  .extra{padding:.3rem}
}
@media(max-width:600px){
  .hero .eyebrow{flex-wrap:wrap;gap:.25rem .6rem;font-size:.68rem}
  .hero .eyebrow::after{display:none}
  .hero-sub-jp{letter-spacing:.35em}
}

/* ---------- story translation footnote ---------- */
.story-note{font-size:.9rem;color:var(--ink-soft);font-weight:300;line-height:1.85;border-top:1px solid var(--hair);padding-top:1.1rem;margin-top:.6rem}
.story-note .jp{font-weight:500}
/* prevent any horizontal overflow from decorative bleeds */
html,body{overflow-x:hidden;max-width:100%}