/* ==========================================================================
   KONAMORI 粉森 — site stylesheet
   Built to the Brand Book, Edition II. Ten tones, four typefaces, no more.
   Every colour below is canonical. Do not introduce a value that is not here.
   ========================================================================== */

/* ---------- typefaces (self-hosted, SIL OFL) ---------- */
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'EBG';src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EBG';src:url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'EBG';src:url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NotoJP';src:url('../fonts/noto-serif-jp-subset-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+2192,U+3000-30FF,U+4E00-9FFF,U+FF00-FFEF}

/* ---------- the ten tones ---------- */
:root{
  --konayuki:#F4F1EA;  /* 粉雪 powder off-white — base */
  --washi:#E6DECF;     /* 和紙 warm parchment */
  --ishi:#9A9488;      /* 石   ash taupe */
  --kemuri:#6E726F;    /* 煙   slate grey — secondary text */
  --andon:#C2914F;     /* 行灯 signature warmth */
  --kurumi:#5A4434;    /* 胡桃 walnut */
  --kon:#28323F;       /* 紺   night indigo */
  --sugigoke:#44503E;  /* 杉苔 cedar moss */
  --yakisugi:#222420;  /* 焼杉 charred timber — ink */
  --karakane:#9C7A4C;  /* 唐銅 bronze — rules & ornament only */
  --bronze-ink:#755834; /* bronze darkened for text ≥4.5:1 on konayuki/washi */
  --slate-ink:#5A5E5B;  /* kemuri darkened for text ≥4.5:1 */

  --measure:34rem;
  --gutter:clamp(1.5rem,5vw,5rem);
  --rule:rgba(34,36,32,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,picture,svg{display:block;max-width:100%}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  background:var(--konayuki);color:var(--yakisugi);
  font-family:'EBG',Georgia,'Times New Roman',serif;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- typographic scale ---------- */
.display{font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:1.04;letter-spacing:.005em;
  font-size:clamp(2.6rem,1.6rem + 4.2vw,5.6rem)}
h1,h2{font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:1.1;letter-spacing:.004em}
h1{font-size:clamp(2.2rem,1.5rem + 3vw,4rem)}
h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.9rem)}
h3{font-family:'Cormorant',Georgia,serif;font-weight:400;font-size:clamp(1.3rem,1.15rem + .6vw,1.75rem);line-height:1.2}
.jp{font-family:'NotoJP','Noto Serif JP',serif;font-weight:300}
.label{font-family:'Jost',system-ui,sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bronze-ink)}
.label--quiet{color:var(--slate-ink)}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.55;max-width:38rem}
p{max-width:var(--measure)}
/* centered blocks: paragraph boxes must centre too, not hug the left edge */
[style*="text-align:center"] p,[style*="text-align: center"] p,
p[style*="text-align:center"]{margin-inline:auto}
p + p{margin-top:1.1em}
em{font-style:italic}
strong{font-weight:500}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:52rem}
.section{padding-block:clamp(4rem,9vw,9rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4.5rem)}
.stack > * + *{margin-top:1.4rem}
.grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
@media (min-width:52em){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--split{grid-template-columns:1fr 1.15fr;align-items:center}
  .grid--split-r{grid-template-columns:1.15fr 1fr;align-items:center}
}
.rule{height:1px;background:var(--rule);border:0;margin-block:clamp(2.5rem,5vw,4.5rem)}
.hairline{width:3.5rem;height:1px;background:var(--karakane);opacity:.7}

/* ---------- tone blocks ---------- */
.tone-dark{background:var(--yakisugi);color:var(--konayuki)}
.tone-dark .label{color:var(--andon)}
.tone-dark p{color:rgba(244,241,234,.8)}
.tone-dark .hairline{background:var(--andon)}
.tone-washi{background:var(--washi)}
.tone-indigo{background:var(--kon);color:var(--konayuki)}
.tone-indigo .label{color:var(--andon)}
.tone-indigo p{color:rgba(244,241,234,.82)}
.tone-indigo .hairline{background:var(--andon)}
.tone-indigo .btn{background:var(--konayuki);color:var(--kon);border-color:var(--konayuki)}
.tone-indigo .btn:hover,.tone-indigo .btn:focus-visible{background:var(--andon);border-color:var(--andon);color:var(--yakisugi)}
.tone-indigo .signup input{border-color:rgba(244,241,234,.4);color:var(--konayuki)}
.tone-indigo .signup input::placeholder{color:rgba(244,241,234,.55)}
.tone-indigo .signup input:focus-visible{border-color:var(--andon)}
.tone-indigo .notice{color:rgba(244,241,234,.68)}

/* ---------- masthead ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--yakisugi);color:var(--konayuki);padding:.75rem 1.25rem}
.masthead{position:sticky;top:0;z-index:100;background:rgba(244,241,234,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--rule)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:.9rem;max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.brandmark{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--yakisugi)}
.brandmark svg{width:2.4rem;height:auto;color:currentColor}
.brandmark__text{font-family:'Cormorant',Georgia,serif;font-weight:300;font-size:1.25rem;letter-spacing:.22em;line-height:1}
.brandmark__jp{font-family:'NotoJP',serif;font-weight:300;font-size:.72rem;letter-spacing:.3em;color:var(--bronze-ink);margin-top:.28rem}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.9rem)}
.nav a{font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--slate-ink);
  padding-block:.4rem;border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.nav a:hover,.nav a:focus-visible{color:var(--yakisugi);border-color:var(--bronze-ink)}
.nav a[aria-current="page"]{color:var(--yakisugi);border-color:var(--bronze-ink)}
.nav__book{color:var(--konayuki)!important;background:var(--yakisugi);padding:.55rem 1.1rem!important;border:0!important}
.nav__book:hover{background:var(--kurumi)}
.navtoggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--yakisugi)}
@media (max-width:56em){
  .navtoggle{display:block}
  .nav{position:fixed;inset:auto 0 0 0;top:0;background:var(--konayuki);flex-direction:column;
    justify-content:center;gap:1.6rem;transform:translateY(-100%);height:100dvh;
    visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
  .nav[data-open="true"]{transform:translateY(0);visibility:visible;transition:transform .4s var(--ease)}
  .navtoggle{position:relative;z-index:120}
  .nav a{font-size:.95rem;letter-spacing:.24em}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(30rem,88svh,56rem);display:grid;align-items:end;
  background:var(--yakisugi);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) contrast(1.07) brightness(.94)}
.hero__media::after{content:'';position:absolute;inset:0;background:#2b3a4b;
  mix-blend-mode:color;opacity:.34;pointer-events:none}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(26,30,36,.88) 0%,rgba(26,30,36,.70) 22%,rgba(26,30,36,.34) 46%,rgba(26,30,36,.06) 70%,rgba(26,30,36,0) 86%),
    linear-gradient(to top,rgba(26,30,36,.44) 0%,rgba(26,30,36,.10) 26%,rgba(26,30,36,0) 44%)}
.hero__body{position:relative;color:var(--konayuki);width:100%;
  padding-block:clamp(3rem,8vw,6rem) clamp(5.5rem,11vw,9.5rem)}
.hero__body .display{color:var(--konayuki);text-wrap:balance;font-style:normal;
  font-size:clamp(3rem,1.5rem + 5.6vw,6.6rem);max-width:16ch}
.hero__kicker{color:rgba(244,241,234,.88);margin-bottom:1.5rem}
.hero__kicker::before{content:'';display:block;width:2.6rem;height:1px;background:var(--andon);margin-bottom:1.1rem}
.hero__sub{color:rgba(244,241,234,.94);margin-top:1.6rem;max-width:34rem;font-size:clamp(1.02rem,.95rem + .3vw,1.22rem);
  text-shadow:0 1px 14px rgba(34,36,32,.55)}
.hero__kicker{text-shadow:0 1px 12px rgba(34,36,32,.7)}
.hero__body .display{text-shadow:0 2px 26px rgba(34,36,32,.45)}
.hero--page{min-height:clamp(20rem,52svh,32rem)}

/* ---------- figures ---------- */
figure{margin:0}
figure img{width:100%;height:auto}
figcaption{font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate-ink);margin-top:.8rem}
/* caption sits on the washi frame strip, so it stays dark even in dark sections;
   only frames made transparent show the caption on the dark ground */
.tone-dark figcaption,.tone-indigo figcaption{color:var(--slate-ink)}
.tone-dark .frame[style*="transparent"] figcaption,
.tone-indigo .frame[style*="transparent"] figcaption{color:rgba(244,241,234,.62)}
.frame{background:var(--washi);padding:0}

/* ---------- cards / rooms ---------- */
.rooms{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
@media (min-width:44em){.rooms{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70em){.rooms{grid-template-columns:repeat(3,1fr)}}
.room{border-top:1px solid var(--rule);padding-top:1.4rem}
.room__name{font-family:'Cormorant',Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.1;margin-bottom:.15rem}
.room__meta{font-family:'Jost',system-ui,sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-ink)}
.room__mural{margin-top:.9rem;color:#4a4a45;font-size:.95rem;line-height:1.5}
.swatches{display:flex;gap:.4rem;margin-top:1rem}
.swatch{width:1.15rem;height:1.15rem;border:1px solid rgba(34,36,32,.16)}

/* ---------- data list ---------- */
.dl{border-top:1px solid var(--rule)}
.dl__row{display:grid;gap:.3rem 2rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
@media (min-width:40em){.dl__row{grid-template-columns:14rem 1fr}}
.dl__row dt{font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-ink);padding-top:.28rem}
.dl__row dd{margin:0}
.tone-dark .dl,.tone-dark .dl__row{border-color:rgba(244,241,234,.18)}
.tone-dark .dl__row dt{color:var(--andon)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:'Jost',system-ui,sans-serif;font-weight:400;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:1rem 2.2rem;
  background:var(--yakisugi);color:var(--konayuki);border:1px solid var(--yakisugi);
  transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--kurumi);border-color:var(--kurumi)}
.btn--ghost{background:transparent;color:var(--yakisugi)}
.btn--ghost:hover{background:var(--yakisugi);color:var(--konayuki)}
.tone-dark .btn{background:var(--konayuki);color:var(--yakisugi);border-color:var(--konayuki)}
.tone-dark .btn:hover{background:var(--andon);border-color:var(--andon);color:var(--yakisugi)}
.tone-dark .btn--ghost{background:transparent;color:var(--konayuki)}
.tone-dark .btn--ghost:hover{background:var(--konayuki);color:var(--yakisugi)}

/* ---------- pull quote ---------- */
.pull{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.4rem);line-height:1.3;max-width:26ch}

/* ---------- notice ---------- */
.notice{border-left:2px solid var(--andon);padding:.2rem 0 .2rem 1.4rem;
  font-size:.92rem;line-height:1.55;color:var(--slate-ink);max-width:36rem}
.tone-dark .notice{color:rgba(244,241,234,.62)}

/* ---------- journal signup (inline, never a pop-up) ---------- */
.signup{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;max-width:32rem}
.signup input{flex:1 1 14rem;background:transparent;border:0;border-bottom:1px solid var(--rule);
  font-family:'EBG',serif;font-size:1rem;padding:.7rem .2rem;color:inherit}
.signup input:focus-visible{outline:0;border-color:var(--bronze-ink)}
.tone-dark .signup input{border-color:rgba(244,241,234,.4);color:var(--konayuki)}
.tone-dark .signup input::placeholder{color:rgba(244,241,234,.45)}

/* ---------- footer ---------- */
.foot{background:var(--yakisugi);color:rgba(244,241,234,.72);padding-block:clamp(3.5rem,7vw,6rem)}
.foot a{color:rgba(244,241,234,.72);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover,.foot a:focus-visible{color:var(--konayuki);border-color:var(--andon)}
.foot__grid{display:grid;gap:2.5rem}
@media (min-width:48em){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.foot__mark svg{width:3rem;color:var(--konayuki)}
.foot h4{font-family:'Jost',system-ui,sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--andon);margin-bottom:1rem}
.foot li + li{margin-top:.6rem}
.foot__legal{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(244,241,234,.16);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.42)}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--karakane);outline-offset:3px}

/* ---------- quiet reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* ---------- stay: the two equal paths ---------- */
.offer{border-top:2px solid var(--yakisugi);padding-top:1.6rem;height:100%}
.offer--alt{border-top-color:var(--bronze-ink)}
.offer h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)}
.offer .dl__row{grid-template-columns:1fr;gap:.35rem}
@media (min-width:40em){.offer .dl__row{grid-template-columns:9.5rem 1fr}}

/* ---------- mountain: the ten ---------- */
table.mtn{width:100%;border-collapse:collapse;border-top:1px solid var(--rule)}
table.mtn th{font-family:'Cormorant',Georgia,serif;font-weight:400;font-size:1.25rem;text-align:left;
  padding:1.1rem 1.5rem 1.1rem 0;vertical-align:top;white-space:nowrap;border-bottom:1px solid var(--rule);width:1%}
table.mtn td{font-family:'EBG',Georgia,serif;font-size:.98rem;line-height:1.55;padding:1.15rem 0;
  vertical-align:top;border-bottom:1px solid var(--rule);color:#43433f}
@media (max-width:44em){
  table.mtn,table.mtn tbody,table.mtn tr,table.mtn th,table.mtn td{display:block;width:auto}
  table.mtn th{border-bottom:0;padding-bottom:.2rem;white-space:normal}
  table.mtn td{padding-top:0}
}

/* ---------- hero: name lockup ---------- */
.hero__name{font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:1.02;
  letter-spacing:.1em;font-size:clamp(2.4rem,1.4rem + 4vw,5.2rem);color:var(--konayuki);
  text-shadow:0 2px 26px rgba(34,36,32,.45);margin:0}
.hero__name .jp{letter-spacing:.08em;margin-left:.38em;font-size:.58em;vertical-align:.14em;
  color:rgba(244,241,234,.82)}
.hero__name--sm{font-size:clamp(1.4rem,1.1rem + 1vw,2.1rem);letter-spacing:.28em;margin-bottom:.9rem}
.hero__name--sm .jp{font-size:.8em;letter-spacing:.14em;vertical-align:0}
.hero__gloss{font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:.74rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.78);
  margin-top:1.2rem;text-shadow:0 1px 12px rgba(34,36,32,.7)}
.hero__gloss .jp{letter-spacing:0;font-size:1.15em;vertical-align:-.06em;margin-right:.15em;color:var(--andon)}
.hero__tag{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:300;line-height:1.15;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.7rem);color:var(--konayuki);margin-top:.8rem;
  text-shadow:0 2px 22px rgba(34,36,32,.5)}


/* ---------- hero actions ---------- */
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(2rem,3.5vw,2.9rem)}
.btn--light{background:var(--konayuki);color:var(--yakisugi);border-color:var(--konayuki)}
.btn--light:hover,.btn--light:focus-visible{background:var(--andon);border-color:var(--andon);color:var(--yakisugi)}
.btn--outline{background:transparent;color:var(--konayuki);border-color:rgba(244,241,234,.55)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--konayuki);color:var(--yakisugi);border-color:var(--konayuki)}

/* ---------- proof band ---------- */
.proof{background:var(--yakisugi);color:var(--konayuki);padding-block:clamp(2.4rem,4.5vw,3.6rem)}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.proof__item{text-align:center;padding-inline:1rem;border-left:1px solid rgba(244,241,234,.16)}
.proof__item:first-child{border-left:0}
.proof__n{display:block;font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:1;
  font-size:clamp(2.1rem,1.3rem + 2.4vw,3.4rem);color:var(--konayuki)}
.proof__l{display:block;margin-top:.85rem;font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--andon)}
@media (max-width:40em){
  .proof__grid{grid-template-columns:1fr;gap:2rem}
  .proof__item{border-left:0;border-top:1px solid rgba(244,241,234,.16);padding-top:2rem}
  .proof__item:first-child{border-top:0;padding-top:0}
}