/* ============================================================
   KOMORE — Home page building blocks (shared by option-b / option-c)
   Section components for the reference-based homepage rebuild.
   ============================================================ */

/* ---------- HERO SLIDESHOW ---------- */
.hero-slider{ position:relative; height:var(--vph,100svh); min-height:600px; overflow:hidden; color:var(--washi); background:var(--sumi); }
.hero-slider .slides{ display:flex; height:100%; transition:transform 1s cubic-bezier(.65,.02,.18,1); will-change:transform; }
.hero-slider .slide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
.hero-slider .slide image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-slider .slide .veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,19,15,.46) 0%, rgba(15,19,15,.12) 38%, rgba(15,19,15,.30) 70%, rgba(15,19,15,.74) 100%); }
.hero-slider .slide .s-inner{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 var(--gut); }
/* per-slide copy — VISIBLE by default; entrance animation only adds motion,
   so it can never get stuck invisible if a re-render interrupts it. */
.hero-slider .s-eyebrow{ font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--brass-lt); margin-bottom:1.7rem; }
.hero-slider .s-title{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.4vw,3.3rem);
  line-height:1.5; letter-spacing:.08em; max-width:22ch; text-shadow:0 2px 40px rgba(0,0,0,.4); }
.hero-slider .s-sub{ font-family:var(--sans); font-weight:300; font-size:.95rem; letter-spacing:.16em;
  color:rgba(244,240,231,.82); margin-top:1.6rem; }
@media (prefers-reduced-motion:no-preference){
  .hero-slider .slide.is-active .s-eyebrow{ animation:heroRise .9s .15s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-slider .slide.is-active .s-title{ animation:heroRise 1s .32s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-slider .slide.is-active .s-sub{ animation:heroRise 1s .48s cubic-bezier(.2,.7,.2,1) backwards; }
}
@keyframes heroRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* fixed brand wordmark over slides */
.hero-wordmark{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:5;
  text-align:center; pointer-events:none; }
.hero-wordmark .mark{ font-family:var(--display); font-weight:300; font-size:clamp(4.5rem,16vw,15rem);
  line-height:.9; letter-spacing:.04em; color:var(--washi); text-shadow:0 4px 60px rgba(0,0,0,.35); }

/* slider controls */
.hero-slider .slider-dots{ position:absolute; left:0; right:0; bottom:clamp(2rem,4vh,3.2rem); z-index:6;
  display:flex; gap:.7rem; justify-content:center; }
.hero-slider .slider-dot{ width:34px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(244,240,231,.32); transition:.4s; }
.hero-slider .slider-dot.is-on{ background:var(--washi); }
.hero-slider .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:54px; height:54px; border:1px solid rgba(244,240,231,.4); background:rgba(15,19,15,.18);
  color:var(--washi); cursor:pointer; border-radius:50%; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.4s; backdrop-filter:blur(2px); }
.hero-slider .slider-arrow:hover{ background:var(--washi); color:var(--sumi); border-color:var(--washi); }
.hero-slider .slider-prev{ left:clamp(1rem,2.5vw,2.4rem); }
.hero-slider .slider-next{ right:clamp(1rem,2.5vw,2.4rem); }
.hero-slider .slide-count{ position:absolute; left:var(--gut); bottom:clamp(2rem,4vh,3.2rem); z-index:6;
  font-family:var(--display); font-size:1.05rem; letter-spacing:.1em; color:rgba(244,240,231,.8); }
.hero-slider .slide-count i{ font-style:normal; }
.hero-slider .slide-count s{ text-decoration:none; opacity:.5; margin:0 .2em; }
.hero-slider .scroll-cue{ position:absolute; right:var(--gut); bottom:clamp(2rem,4vh,3.2rem); z-index:6;
  writing-mode:vertical-rl; font-size:.64rem; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(244,240,231,.7); display:flex; align-items:center; gap:1rem; }
.hero-slider .scroll-cue::after{ content:""; width:1px; height:54px; background:linear-gradient(var(--brass-lt),transparent); }
@media(max-width:860px){
  .hero-slider .slider-arrow{ display:none; }
  .hero-slider .scroll-cue{ display:none; }
  .hero-wordmark .mark{ font-size:clamp(3.6rem,20vw,7rem); }
}

/* ---------- HOME PRODUCTS (intro text + 3 product tins) ---------- */
.home-products{ padding-block:clamp(5rem,11vw,9rem); }
.home-products .grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2.4rem,6vw,6rem); align-items:center; }
.home-products .lead .eyebrow{ margin-bottom:1.5rem; display:block; }
.home-products .lead h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.55; letter-spacing:.05em; margin-bottom:1.5rem; }
.home-products .lead p{ color:var(--ink-mute); max-width:34ch; margin:0 0 2.2rem; }
.tins{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2.2rem); }
.tin{ display:block; }
.tin image-slot{ width:100%; aspect-ratio:3/4; margin-bottom:1.1rem; }
.tin .cat{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); }
.tin h3{ font-family:var(--serif); font-weight:500; font-size:1.18rem; letter-spacing:.04em; margin:.5rem 0 .4rem; }
.tin .price{ font-family:var(--display); font-size:1.05rem; letter-spacing:.04em; color:var(--ink); }
.tin:hover image-slot{ filter:brightness(.96); }
@media(max-width:900px){ .home-products .grid{ grid-template-columns:1fr; } }
@media(max-width:520px){ .tins{ grid-template-columns:1fr; gap:2rem; } .tin{ display:grid; grid-template-columns:120px 1fr; gap:1.2rem; align-items:center; } .tin image-slot{ aspect-ratio:3/4; margin:0; } }

/* ---------- SPLIT PANEL (story / craft) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(440px,56vw,680px); }
.split .panel{ display:flex; align-items:center; padding:clamp(3rem,6vw,6rem); }
.split .panel .inner{ max-width:42ch; }
.split .panel .eyebrow{ display:block; margin-bottom:1.5rem; }
.split .panel h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.4; letter-spacing:.05em; margin-bottom:1.5rem; }
.split .panel h2 small{ display:block; font-family:var(--display); font-style:italic; font-size:.42em;
  letter-spacing:.1em; margin-top:.7rem; font-weight:400; opacity:.8; }
.split .panel p{ margin:0 0 2.1rem; }
.split .media{ position:relative; overflow:hidden; }
.split .media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
/* dark green panel */
.panel--tea{ background:var(--tea); color:var(--washi); }
.panel--tea p{ color:rgba(244,240,231,.82); }
.panel--tea .eyebrow{ color:var(--brass-lt); }
/* cream panel */
.panel--cream{ background:var(--washi-2); color:var(--ink); }
.panel--cream p{ color:var(--ink-mute); }
@media(max-width:840px){
  .split{ grid-template-columns:1fr; }
  .split .media{ min-height:62vw; order:-1; }
  .split.media-first .media{ order:0; }
}

/* ---------- EXPERIENCE (full-bleed) ---------- */
.home-exp{ position:relative; color:var(--washi); overflow:hidden; min-height:clamp(460px,60vw,720px);
  display:flex; align-items:center; }
.home-exp image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.home-exp .veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(18,24,18,.82) 0%, rgba(18,24,18,.5) 50%, rgba(18,24,18,.2) 100%); }
.home-exp .wrap{ position:relative; z-index:2; }
.home-exp .box{ max-width:42ch; }
.home-exp .eyebrow{ display:block; margin-bottom:1.5rem; color:var(--brass-lt); }
.home-exp h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.35; letter-spacing:.05em; margin-bottom:1.4rem; }
.home-exp p{ color:rgba(244,240,231,.82); margin:0 0 2.2rem; max-width:40ch; }

/* ---------- SHOP BY STYLE (4 cards) ---------- */
.shop-style{ padding-block:clamp(5rem,11vw,9rem); }
.shop-style .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2.4rem,5vw,3.6rem); flex-wrap:wrap; }
.shop-style .sec-head .eyebrow{ display:block; margin-bottom:1rem; }
.shop-style .sec-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:.04em; }
.style-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.8rem); }
.style-card{ position:relative; display:block; overflow:hidden; }
.style-card image-slot{ width:100%; aspect-ratio:4/5; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.style-card:hover image-slot{ transform:scale(1.05); }
.style-card .scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,19,15,0) 35%, rgba(15,19,15,.72) 100%); }
.style-card .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.4rem 1.5rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; color:var(--washi); }
.style-card .cap .en{ font-family:var(--display); font-style:italic; font-size:.85rem; letter-spacing:.06em; color:var(--brass-lt); display:block; margin-bottom:.3rem; }
.style-card .cap .jp{ font-family:var(--serif); font-weight:500; font-size:1.18rem; letter-spacing:.05em; line-height:1.3; }
.style-card .ring{ flex:0 0 auto; width:40px; height:40px; border:1px solid rgba(244,240,231,.55);
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; transition:.4s; }
.style-card:hover .ring{ background:var(--washi); color:var(--sumi); }
@media(max-width:880px){ .style-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .style-grid{ grid-template-columns:1fr; } }

/* ---------- JOURNAL ---------- */
.home-journal{ background:var(--sumi); color:var(--washi); padding-block:clamp(5rem,11vw,9rem); }
.home-journal .grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
.home-journal .lead .eyebrow{ display:block; margin-bottom:1.4rem; color:var(--brass-lt); }
.home-journal .lead h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.45; letter-spacing:.05em; margin-bottom:1.6rem; }
.home-journal .lead p{ color:rgba(244,240,231,.7); max-width:32ch; margin:0 0 2.1rem; }
.journal-list{ display:flex; flex-direction:column; }
.jcard{ display:grid; grid-template-columns:120px 1fr auto; gap:clamp(1.2rem,2.4vw,2rem); align-items:center;
  padding:1.5rem 0; border-top:1px solid rgba(244,240,231,.16); }
.jcard:last-child{ border-bottom:1px solid rgba(244,240,231,.16); }
.jcard image-slot{ width:120px; height:84px; }
.jcard .meta{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); margin-bottom:.5rem; }
.jcard h3{ font-family:var(--serif); font-weight:500; font-size:1.12rem; letter-spacing:.03em; line-height:1.45; }
.jcard .go{ font-size:1.1rem; color:rgba(244,240,231,.6); transition:.4s; }
.jcard:hover .go{ color:var(--washi); transform:translateX(4px); }
.jcard:hover h3{ color:var(--brass-lt); }
@media(max-width:900px){ .home-journal .grid{ grid-template-columns:1fr; } }
@media(max-width:520px){ .jcard{ grid-template-columns:84px 1fr; } .jcard image-slot{ width:84px; height:64px; } .jcard .go{ display:none; } }

/* ---------- READING CARDS (journal — horizontal card row + list page) ---------- */
.read-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.8rem); }
.read-card{ display:flex; flex-direction:column; }
.read-card .rc-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  margin-bottom:1.35rem; background:var(--sumi); }
.read-card .rc-media image-slot{ position:absolute; inset:0; width:100%; height:100%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.read-card:hover .rc-media image-slot{ transform:scale(1.05); }
.read-card .rc-media .badge{ position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--sans); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  background:var(--sumi); color:var(--washi); padding:.55em 1.05em; }
.read-card .rc-meta{ display:flex; align-items:center; gap:.95rem; margin-bottom:.8rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.read-card .rc-meta time{ color:var(--ink-mute); letter-spacing:.1em; }
.read-card h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.18rem,1.7vw,1.45rem);
  line-height:1.5; letter-spacing:.03em; color:var(--ink); transition:color .3s; }
.read-card p{ color:var(--ink-mute); font-size:.9rem; line-height:1.8; margin:.85rem 0 0; max-width:42ch; }
.read-card .s-link{ margin-top:1.2rem; align-self:flex-start; }
.read-card:hover h3{ color:var(--tea); }
.read-card:hover .s-link{ border-bottom-color:currentColor; }
.read-card:hover .s-link .arr{ transform:translateX(4px); }
@media(max-width:900px){ .read-grid{ grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,2.4rem); } }
@media(max-width:560px){ .read-grid{ grid-template-columns:1fr; } }

/* light-button variant on cream/light backgrounds already covered by .btn */
.btn--light{ border-color:rgba(244,240,231,.5); color:var(--washi); }
.btn--light:hover{ background:var(--washi); color:var(--sumi); border-color:var(--washi); }

/* ---------- BRAND LOGO (header) ---------- */
.brand-logo{ display:inline-flex; align-items:center; gap:.8rem; }
.brand-logo .bl-mark{ height:40px; width:auto; display:block; flex:0 0 auto; transition:height .5s ease; }
.brand-logo .bl-mark.bl-light{ display:none; }     /* green mark, shown when header is light */
.brand-logo .bl-word{ height:26px; width:auto; display:block; flex:0 0 auto; transition:height .5s ease; }
.brand-logo .bl-word.bl-light{ display:none; }
/* over dark hero: cream art. after scroll (light header): green art + slightly smaller */
.site-head.scrolled .brand-logo .bl-mark.bl-dark,
.site-head.scrolled .brand-logo .bl-word.bl-dark,
.site-head.is-light .brand-logo .bl-mark.bl-dark,
.site-head.is-light .brand-logo .bl-word.bl-dark{ display:none; }
.site-head.scrolled .brand-logo .bl-mark.bl-light,
.site-head.scrolled .brand-logo .bl-word.bl-light,
.site-head.is-light .brand-logo .bl-mark.bl-light,
.site-head.is-light .brand-logo .bl-word.bl-light{ display:block; }
.site-head.scrolled .brand-logo .bl-mark{ height:34px; }
.site-head.scrolled .brand-logo .bl-word{ height:23px; }
@media(max-width:520px){
  .brand-logo .bl-mark{ height:34px; }
  .brand-logo .bl-word{ height:21px; }
}

/* ---------- BRAND LOGO (footer) ---------- */
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.foot-brand .fb-logo{ height:190px; width:auto; display:block; margin:-1.6rem 0 -1rem -1rem; }
@media(max-width:760px){ .foot-brand .fb-logo{ height:152px; } }