/* ============================================================
   LEGNO — 無垢材オーダー家具工房
   Design DNA: Studio Dado (editorial flare-serif / 24-col grid /
   fluid-rem / Lenis+GSAP) translated to warm walnut craft.
   ============================================================ */

/* ---------- Fluid rem system (Studio Dado method) ---------- */
:root{
  --size: 402;
  --pad: 2rem;

  /* palette — walnut warm */
  --bg:        #efeae1;
  --paper:     #f5f1e9;
  --text:      #221d16;
  --text-soft: rgba(34,29,22,.62);
  --line:      rgba(34,29,22,.14);
  --line-soft: rgba(34,29,22,.09);
  --brown:     #5d5040;
  --brown-deep:#352c21;
  --amber:     #97552a;   /* cherry / 経年の飴色 accent */
  --on-dark:   #efeae1;
  --on-dark-soft: rgba(239,234,225,.62);
  --line-dark: rgba(239,234,225,.16);
}
@media (min-width:650px){ :root{ --size:1500; } }
@media (min-width:1920px){ :root{ --size:1740; } }

*,*::before,*::after{ box-sizing:border-box; }
html{
  font-size: calc(10 * 100vw / var(--size));
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
  font-size:2rem;
  line-height:1.7;
  font-weight:400;
  letter-spacing:.01em;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
  text-wrap:pretty;
  overscroll-behavior:none;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--amber);color:var(--bg);}

/* ---------- Layout ---------- */
.site-max{
  width:100%;
  max-width:160rem;
  margin-inline:auto;
  padding-inline:var(--pad);
}
@media (min-width:650px){ :root{ --pad:4rem; } }
@media (min-width:1280px){ :root{ --pad:6rem; } }

.section{ padding-block:9rem; position:relative; z-index:2; }
@media (min-width:650px){ .section{ padding-block:15rem; } }

/* ---------- Type tokens ---------- */
.h2{
  font-family:"Shippori Mincho B1","Fraunces",serif;
  font-weight:600;
  font-size:4.4rem;
  line-height:1.12;
  letter-spacing:-.02em;
}
@media (min-width:650px){ .h2{ font-size:8.6rem; letter-spacing:-.02em; } }
.h2--light{ color:var(--on-dark); }

.sec-num{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:2.4rem;
}
@media (min-width:650px){ .sec-num{ font-size:1.5rem; margin-bottom:3rem; } }
.sec-num--light{ color:var(--on-dark); opacity:.8; }

.sec-head{ margin-bottom:6rem; }
@media (min-width:650px){ .sec-head{ margin-bottom:9rem; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(2.6rem); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-line{ display:block; overflow:hidden; }
.reveal-line>span{ display:block; transform:translateY(112%); transition:transform 1.15s cubic-bezier(.16,1,.3,1); }
.reveal-line.is-in>span{ transform:none; }

/* ---------- Signature: underline wipe ---------- */
.uline{ position:relative; display:inline-block; white-space:nowrap; }
.uline::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .6s cubic-bezier(.62,.05,0,1);
}
.uline:hover::after{ transform:scaleX(1); transform-origin:left; }

.text-link{ font-size:1.6rem; letter-spacing:.02em; color:var(--text); }
.nb{ white-space:nowrap; }

/* ---------- Signature: char-rise button ---------- */
.btn-chars{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.5em 2.2em; border:1px solid var(--text); border-radius:.4rem;
  font-size:1.5rem; font-weight:500; letter-spacing:.04em; overflow:hidden; isolation:isolate;
}
.btn-chars__bg{
  position:absolute; inset:0; background:var(--text); border-radius:.4rem; z-index:-1;
  transition:inset .55s cubic-bezier(.62,.05,0,1);
}
.btn-chars__text{ display:inline-block; overflow:hidden; position:relative; color:var(--bg); line-height:1; }
.btn-chars__text .rise{
  display:inline-block; text-shadow:0 1.15em currentColor; transform:translateY(0) rotate(.001deg);
  transition:transform .55s cubic-bezier(.62,.05,0,1);
}
.btn-chars:hover .btn-chars__text .rise{ transform:translateY(-1.15em) rotate(.001deg); }
.btn-chars:hover .btn-chars__bg{ inset:.28em; }
.btn-chars--lg{ font-size:1.7rem; padding:1.6em 2.6em; }

/* ---------- Signature: arrow button ---------- */
.arrow-btn{ display:inline-flex; align-items:center; gap:1.1em; font-size:1.6rem; font-weight:500; letter-spacing:.03em; }
.arrow-btn__label{ position:relative; }
.arrow-btn__label::after{
  content:""; position:absolute; left:0; right:0; bottom:-.18em; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .6s cubic-bezier(.62,.05,0,1);
}
.arrow-btn:hover .arrow-btn__label::after{ transform:scaleX(1); transform-origin:left; }
.arrow-btn__arrow{ width:1.7em; height:1.7em; display:grid; place-items:center; overflow:hidden; }
.arrow-btn__arrow svg{ width:100%; height:100%; transition:transform .5s cubic-bezier(.62,.05,0,1); }
.arrow-btn:hover .arrow-btn__arrow svg{ transform:translateX(.28em); }
.arrow-btn--light{ color:var(--on-dark); }

/* ============================================================
   PRELOADER
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:9999; overflow:hidden; background:#211910; color:var(--on-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform 1.15s cubic-bezier(.76,0,.24,1) .2s;
  will-change:transform;
}
.splash__media{
  position:absolute; inset:0; transform:scale(1.14); transform-origin:55% 40%;
  background:#1b140d url('../images/splash.jpg') center / cover no-repeat;
  animation:splashZoom 3.4s cubic-bezier(.2,.7,.2,1) forwards;
}
.splash__grain{ position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background:repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px); }
.splash__veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,14,9,.5) 0%, rgba(20,14,9,.16) 42%, rgba(20,14,9,.58) 100%); }
.splash__inner{ position:relative; z-index:2; text-align:center; }
.splash__eyebrow{
  display:block; font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; letter-spacing:.04em;
  color:rgba(239,234,225,.72); margin-bottom:2.4rem; opacity:0; transform:translateY(1rem);
  animation:splashFade 1s cubic-bezier(.16,1,.3,1) .2s forwards;
}
@media (min-width:650px){ .splash__eyebrow{ font-size:1.9rem; } }
.splash__word{
  display:flex; justify-content:center; font-family:"Fraunces",serif; font-weight:300;
  font-size:8.4rem; line-height:1; letter-spacing:.12em;
  animation:splashSpace 2s cubic-bezier(.16,1,.3,1) .1s both;
}
@media (min-width:650px){ .splash__word{ font-size:15rem; } }
.splash__char{ display:inline-block; overflow:hidden; padding:0 .015em; }
.splash__char i{ display:block; font-style:normal; transform:translateY(118%) rotate(.001deg);
  animation:splashChar 1.05s cubic-bezier(.16,1,.3,1) forwards; }
.splash__char:nth-child(1) i{ animation-delay:.18s; }
.splash__char:nth-child(2) i{ animation-delay:.30s; }
.splash__char:nth-child(3) i{ animation-delay:.42s; }
.splash__char:nth-child(4) i{ animation-delay:.54s; }
.splash__char:nth-child(5) i{ animation-delay:.66s; }
.splash__sub{
  display:block; margin-top:2.6rem; font-size:1.3rem; letter-spacing:.34em;
  color:rgba(239,234,225,.6); opacity:0; animation:splashFade 1s ease 1s forwards;
}
.splash__line{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--amber);
  animation:splashLine 2.7s cubic-bezier(.62,0,.2,1) .1s forwards; }
@keyframes splashZoom{ to{ transform:scale(1); } }
@keyframes splashFade{ to{ opacity:1; transform:none; } }
@keyframes splashChar{ to{ transform:translateY(0) rotate(.001deg); } }
@keyframes splashSpace{ from{ letter-spacing:.46em; } to{ letter-spacing:.12em; } }
@keyframes splashLine{ to{ width:100%; } }
body.is-loaded .splash{ transform:translateY(-100%); pointer-events:none; }
body.is-loaded .splash .splash__inner{ opacity:0; transition:opacity .5s ease; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:1000; pointer-events:none;
  display:grid; place-items:center; width:0; height:0; border-radius:.5rem;
  background:var(--brown); color:var(--bg); font-size:1.3rem; letter-spacing:.04em;
  opacity:0; transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  white-space:nowrap; overflow:hidden;
}
.cursor.is-active{ width:7rem; height:7rem; opacity:1; }
.cursor.is-label{ width:auto; height:auto; padding:1.1em 1.4em; opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   HEADER
   ============================================================ */
.header{ position:fixed; top:0; left:0; width:100%; z-index:100; transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform; backface-visibility:hidden; transform:translateZ(0); }
.header.is-hidden{ transform:translate3d(0,-100%,0); }
.header::before{
  content:""; position:absolute; inset:0; background:var(--bg);
  border-bottom:1px solid var(--line-soft); z-index:-1;
  transform:translateY(-101%); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.header.is-solid::before{ transform:translateY(0); }
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:3rem; padding-block:2.4rem; }

.logo{ display:flex; flex-direction:column; line-height:1; }
.logo__mark{ font-family:"Fraunces",serif; font-weight:500; font-size:2.6rem; letter-spacing:.16em; }
.logo__sub{ font-size:1.1rem; letter-spacing:.24em; color:var(--text-soft); margin-top:.5rem; }
.header.is-hero .logo,.header.is-hero .nav__link,.header.is-hero .header__cta{ color:var(--on-dark); }
.header.is-hero .logo__sub{ color:rgba(239,234,225,.62); }
.header.is-hero .header__cta{ border-color:var(--on-dark); }
.header.is-hero .header__cta .btn-chars__bg{ background:var(--on-dark); }
.header.is-hero .header__cta .btn-chars__text{ color:var(--brown-deep); }
.header.is-hero .menu-btn__line{ background:var(--on-dark); }

.nav{ display:none; gap:3.2rem; margin-left:auto; }
.nav__link{ font-size:1.5rem; letter-spacing:.04em; }
@media (min-width:980px){ .nav{ display:flex; } }

.header__cta{ display:none; }
@media (min-width:980px){ .header__cta{ display:inline-flex; } }

.menu-btn{ display:flex; flex-direction:column; gap:.7rem; width:3rem; padding:.6rem 0; margin-left:auto; }
@media (min-width:980px){ .menu-btn{ display:none; } }
.menu-btn__line{ width:100%; height:1.5px; background:var(--text); transition:transform .4s ease, opacity .3s ease; }
.menu-btn.is-open .menu-btn__line:nth-child(1){ transform:translateY(.85rem) rotate(45deg); }
.menu-btn.is-open .menu-btn__line:nth-child(2){ transform:rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--brown-deep); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s cubic-bezier(.76,0,.24,1); pointer-events:none;
}
.mobile-menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:1.2rem; }
.mobile-menu__link{ font-family:"Shippori Mincho B1",serif; font-size:3.6rem; line-height:1.2; }
.mobile-menu__foot{ position:absolute; left:var(--pad); bottom:var(--pad); display:flex; flex-direction:column; gap:.6rem; font-size:1.5rem; color:var(--on-dark-soft); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:var(--on-dark); padding-bottom:5rem; }
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--brown-deep); }
.hero__media-img{
  position:absolute; inset:-8% 0 0 0; height:116%;
  background:#2b2118 url('../images/hero.jpg') center 35% / cover no-repeat;
}
@media (max-width:680px){
  .hero__media-img{ background-image:url('../images/hero-mobile.jpg'); background-position:center; }
}
.hero__media-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,10,.35) 0%, rgba(20,15,10,.12) 35%, rgba(20,15,10,.62) 100%); }

.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{ font-size:1.4rem; letter-spacing:.16em; color:var(--on-dark-soft); margin-bottom:2.4rem; }
@media (min-width:650px){ .hero__eyebrow{ font-size:1.6rem; } }
.hero__title{ font-family:"Fraunces",serif; font-weight:300; font-size:9rem; line-height:.82; letter-spacing:-.03em; margin-bottom:4rem; }
@media (min-width:650px){ .hero__title{ font-size:18rem; letter-spacing:-.04em; } }
.hero__title-line{ display:block; overflow:hidden; }
.hero__title-line span{ display:block; }
.hero__title-line:nth-child(2){ font-style:italic; text-indent:.12em; }

.hero__foot{ display:flex; flex-direction:column; gap:3rem; }
@media (min-width:980px){ .hero__foot{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:6rem; } }
.hero__lead{ max-width:48rem; font-size:1.7rem; line-height:1.85; color:rgba(239,234,225,.92); }
.hero__actions{ display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }

.hero__scroll{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:2; font-size:1.1rem; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark-soft); }
.hero__scroll span{ display:inline-block; animation:scrollPulse 2.4s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.4; transform:translateY(0); } 50%{ opacity:1; transform:translateY(.4rem); } }

/* ============================================================
   01 MAKE
   ============================================================ */
.make__grid{ display:grid; gap:5rem; }
@media (min-width:980px){ .make__grid{ grid-template-columns:1fr 1fr; gap:8rem; align-items:start; } }
.make__intro{ font-size:1.8rem; line-height:1.95; max-width:46rem; }
@media (min-width:650px){ .make__intro{ font-size:2.1rem; } }
.make__list{ border-top:1px solid var(--line); }
.make__item{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; padding:2.4rem 0; border-bottom:1px solid var(--line); }
.make__item-en{ font-family:"Fraunces",serif; font-style:italic; font-size:2.4rem; }
.make__item-jp{ font-size:1.5rem; color:var(--text-soft); text-align:right; }

.order-cards{ display:grid; gap:2rem; margin-top:7rem; }
@media (min-width:768px){ .order-cards{ grid-template-columns:1fr 1fr; gap:3rem; } }
.order-card{ background:var(--paper); border:1px solid var(--line); border-radius:.6rem; padding:4rem 3.4rem; transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease; }
@media (min-width:650px){ .order-card{ padding:6rem 5rem; } }
.order-card:hover{ transform:translateY(-.6rem); box-shadow:0 3rem 6rem rgba(53,44,33,.1); }
.order-card__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:3rem; }
.order-card__tag{ font-family:"Shippori Mincho B1",serif; font-size:3rem; font-weight:600; }
.order-card__en{ font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; color:var(--amber); }
.order-card__body{ font-size:1.6rem; line-height:1.95; color:var(--text-soft); }

/* ============================================================
   02 WORKS + 05 PRICE — scroll-driven horizontal scroll
   ============================================================ */
.works2{ padding-top:9rem; padding-bottom:7rem; position:relative; z-index:2; }
@media (min-width:650px){ .works2{ padding-top:14rem; padding-bottom:10rem; } }
.works2__head{ margin-bottom:5rem; }
.works2__note{ max-width:42rem; margin-top:2.4rem; font-size:1.6rem; color:var(--text-soft); }

/* shared horizontal mechanism. default = native swipe strip (mobile / no-JS fallback) */
.hscroll{ position:relative; z-index:2; }
.hscroll__track{ display:flex; gap:2rem; padding-inline:var(--pad);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--pad); }
.hscroll__track::-webkit-scrollbar{ display:none; }
.hscroll__track > *{ scroll-snap-align:start; }
/* JS adds --active on desktop → becomes a pinned, scroll-driven track.
   trailing space at the end is added by JS (scrollWidth ignores it otherwise). */
.hscroll--active{ height:100vh; overflow:hidden; }
.hscroll--active .hscroll__track{ height:100vh; align-items:center; overflow:visible; padding-right:0; will-change:transform; scroll-snap-type:none; }

/* mobile carousel UI: dots + swipe hint (hidden in desktop pinned mode) */
.hscroll__dots{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:3.4rem; }
.hscroll__dot{ width:.8rem; height:.8rem; border-radius:50%; background:var(--line); cursor:pointer;
  transition:background .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.hscroll__dot.is-active{ background:var(--amber); transform:scale(1.4); }
.hscroll__hint{ display:block; text-align:center; margin-top:1.5rem; font-size:1.2rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-soft); transition:opacity .5s ease; }
.hscroll__hint.is-hidden{ opacity:0; }
.hscroll--active .hscroll__dots,.hscroll--active .hscroll__hint{ display:none; }

/* work cards */
.work-card{ flex:0 0 74vw; }
@media (min-width:650px){ .work-card{ flex:0 0 42vw; } }
.hscroll--active .work-card{ flex:0 0 auto; }
.work-card__media{ aspect-ratio:4/5; border-radius:.7rem; overflow:hidden; position:relative; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.hscroll--active .work-card__media{ aspect-ratio:auto; height:62vh; width:calc(62vh * 0.8); }
.work-card:hover .work-card__media{ transform:scale(1.015); }
.work-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,15,10,.28)); }
.work-card__meta{ padding-top:1.8rem; }
.work-card__title{ font-family:"Shippori Mincho B1",serif; font-size:2.2rem; font-weight:600; line-height:1.4; }
.work-card__sub{ display:block; margin-top:.6rem; font-size:1.4rem; color:var(--text-soft); }

/* price cards */
.pcard{ flex:0 0 74vw; display:flex; flex-direction:column; gap:1.6rem;
  background:var(--paper); border:1px solid var(--line); border-radius:.9rem; padding:3.6rem 3rem; min-height:33rem;
  transition:border-color .5s ease, transform .6s cubic-bezier(.16,1,.3,1), background .5s ease; }
@media (min-width:650px){ .pcard{ flex:0 0 40vw; padding:4.4rem 4rem; } }
.hscroll--active .pcard{ flex:0 0 auto; width:33vw; max-width:48rem; height:56vh; min-height:0; }
.pcard:hover{ border-color:var(--amber); transform:translateY(-.6rem); }
.pcard__no{ font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; color:var(--amber); }
.pcard__icon{ width:6rem; height:6rem; color:var(--brown); margin-top:.6rem; transition:color .4s ease; }
.pcard__icon svg{ width:100%; height:100%; }
.pcard:hover .pcard__icon{ color:var(--amber); }
.pcard__name{ font-family:"Shippori Mincho B1",serif; font-size:2.6rem; font-weight:600; line-height:1.4; margin-top:auto; }
.pcard__val{ font-family:"Fraunces",serif; font-size:4.4rem; line-height:1; letter-spacing:-.02em; }
@media (min-width:650px){ .pcard__val{ font-size:5.2rem; } }
.pcard__val small{ font-family:"Noto Sans JP",sans-serif; font-size:1.5rem; color:var(--text-soft); margin-inline:.16em; }
.pcard--cta{ background:var(--brown); color:var(--on-dark); border-color:var(--brown); justify-content:center; }
.pcard--cta:hover{ border-color:var(--brown); transform:translateY(-.6rem); }
.pcard--cta .pcard__no{ color:var(--on-dark); font-size:3.2rem; font-style:normal; }
.pcard--cta .pcard__name{ color:var(--on-dark); margin-top:1.4rem; }
.pcard__link{ margin-top:2.4rem; color:var(--on-dark); font-size:1.6rem; align-self:flex-start; }

/* ============================================================
   03 PROCESS — pillars + quote
   ============================================================ */
.pillars{ display:grid; gap:5rem; }
@media (min-width:768px){ .pillars{ grid-template-columns:repeat(3,1fr); gap:4rem; } }
.pillar{ border-top:1px solid var(--text); padding-top:3rem; }
.pillar__num{ font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; color:var(--amber); }
.pillar__title{ font-family:"Shippori Mincho B1",serif; font-size:3.4rem; font-weight:600; letter-spacing:.1em; margin:2rem 0 2.4rem; display:flex; flex-direction:column; gap:.8rem; }
.pillar__en{ font-family:"Fraunces",serif; font-style:italic; font-size:1.7rem; letter-spacing:0; color:var(--text-soft); }
.pillar__body{ font-size:1.6rem; line-height:1.95; color:var(--text-soft); }

.quote{ margin-top:11rem; text-align:center; }
@media (min-width:650px){ .quote{ margin-top:16rem; } }
.quote__text{ font-family:"Shippori Mincho B1",serif; font-weight:500; font-size:4.6rem; line-height:1.5; letter-spacing:.02em; }
@media (min-width:650px){ .quote__text{ font-size:8rem; line-height:1.4; } }
.quote__cap{ margin-top:4rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.quote__name{ font-size:1.5rem; letter-spacing:.06em; }
.quote__role{ font-family:"Fraunces",serif; font-style:italic; font-size:1.4rem; color:var(--amber); }
.quote__lead{ max-width:62rem; margin:5rem auto 0; text-align:center; font-size:1.7rem; line-height:2; color:var(--text-soft); }

/* ============================================================
   04 MATERIALS — species rows
   ============================================================ */
.materials__intro{ max-width:52rem; margin-top:2.6rem; font-size:1.7rem; line-height:1.9; color:var(--text-soft); }
.species{ border-top:1px solid var(--line); }
.species__row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2.4rem; padding:3rem 0; border-bottom:1px solid var(--line); transition:padding-left .5s cubic-bezier(.16,1,.3,1); }
@media (min-width:768px){ .species__row{ grid-template-columns:4rem 14rem 1fr; gap:4rem; padding:4rem 0; }
  .species__row:hover{ padding-left:2rem; } }
.species__idx{ font-family:"Fraunces",serif; font-style:italic; font-size:1.8rem; color:var(--amber); }
.species__swatch{ width:8rem; height:8rem; border-radius:.5rem; }
@media (min-width:768px){ .species__swatch{ width:14rem; height:9rem; } }
.species__name{ font-family:"Shippori Mincho B1",serif; font-size:3rem; font-weight:600; display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; }
@media (min-width:650px){ .species__name{ font-size:4rem; } }
.species__en{ font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; font-weight:400; color:var(--text-soft); }
.species__desc{ margin-top:1rem; font-size:1.5rem; color:var(--text-soft); line-height:1.8; }
.species__txt{ grid-column:2; }
@media (min-width:768px){ .species__txt{ grid-column:3; } }

/* ============================================================
   05 PRICE / lead-time / flow
   ============================================================ */
.price__intro{ max-width:54rem; margin-top:2.6rem; font-size:1.7rem; line-height:1.9; color:var(--text-soft); }

/* editorial price list */
.price-list{ border-top:1px solid var(--text); margin-bottom:7rem; }
@media (min-width:650px){ .price-list{ margin-bottom:10rem; } }
.price-row{ display:grid; grid-template-columns:3.4rem 4.6rem auto 1fr auto; align-items:center; gap:2.2rem;
  padding:3rem 0; border-bottom:1px solid var(--line);
  transition:background .55s cubic-bezier(.16,1,.3,1), padding .55s cubic-bezier(.16,1,.3,1); }
@media (hover:hover){ .price-row:hover{ background:linear-gradient(90deg, rgba(151,85,42,.07), transparent 72%); padding-left:1.8rem; padding-right:1.8rem; } }
.price-row__no{ font-family:"Fraunces",serif; font-style:italic; font-size:1.5rem; color:var(--amber); }
.price-row__icon{ width:4.6rem; height:4.6rem; color:var(--brown); transition:color .4s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.price-row__icon svg{ width:100%; height:100%; }
.price-row:hover .price-row__icon{ color:var(--amber); transform:translateY(-.35rem); }
.price-row__name{ font-family:"Shippori Mincho B1",serif; font-size:2.1rem; font-weight:500; white-space:nowrap; }
.price-row__dots{ align-self:flex-end; height:1px; border-bottom:1px dotted var(--line); margin-bottom:.85rem; transition:border-color .45s ease; }
.price-row:hover .price-row__dots{ border-color:var(--amber); }
.price-row__val{ font-family:"Fraunces",serif; font-size:3rem; letter-spacing:-.01em; white-space:nowrap; transition:color .4s ease; }
@media (min-width:650px){ .price-row__val{ font-size:3.8rem; } }
.price-row:hover .price-row__val{ color:var(--amber); }
.price-row__val small{ font-family:"Noto Sans JP",sans-serif; font-size:1.3rem; color:var(--text-soft); margin-inline:.18em; }
@media (max-width:649px){
  .price-row{ grid-template-columns:3.4rem 1fr auto; gap:1.6rem; }
  .price-row__no,.price-row__dots{ display:none; }
  .price-row__icon{ width:3.4rem; height:3.4rem; }
  .price-row__name{ font-size:1.7rem; white-space:normal; }
  .price-row__val{ font-size:2.5rem; }
}

/* lead-time — two big figures with a connector */
.leadtime{ background:var(--paper); border:1px solid var(--line); border-radius:.9rem; padding:4.4rem 3rem; position:relative; overflow:hidden; }
@media (min-width:650px){ .leadtime{ padding:5.6rem 5rem; } }
.leadtime::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); opacity:.65; }
.leadtime__eyebrow{ display:block; font-family:"Inter",sans-serif; font-size:1.4rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:4rem; }
.leadtime__grid{ display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }
.leadtime__stat{ flex:1 1 18rem; }
.leadtime__label{ display:block; font-size:1.4rem; color:var(--text-soft); letter-spacing:.04em; margin-bottom:1.4rem; }
.leadtime__num{ font-family:"Fraunces",serif; font-weight:400; font-size:5.4rem; line-height:1; letter-spacing:-.02em; color:var(--text); }
@media (min-width:650px){ .leadtime__num{ font-size:6.4rem; } }
.leadtime__num i{ font-style:normal; font-size:2.6rem; color:var(--text-soft); margin-inline:.08em; }
.leadtime__num small{ font-family:"Noto Sans JP",sans-serif; font-size:1.5rem; color:var(--text-soft); margin-left:.4rem; }
.leadtime__arrow{ flex:0 0 auto; width:5rem; color:var(--line); }
.leadtime__arrow svg{ width:100%; }
.leadtime__note{ margin-top:4rem; font-size:1.4rem; line-height:1.9; color:var(--text-soft); max-width:62rem; }
@media (max-width:680px){
  .leadtime__grid{ flex-direction:column; align-items:flex-start; gap:2.2rem; }
  .leadtime__arrow{ transform:rotate(90deg); width:3rem; margin-left:1rem; }
  .leadtime__num{ font-size:4.6rem; }
}

.flow{ margin-top:9rem; }
.flow__title{ font-family:"Shippori Mincho B1",serif; font-size:3rem; font-weight:600; margin-bottom:4rem; }
.flow__steps{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:768px){ .flow__steps{ grid-template-columns:repeat(3,1fr); border-top:0; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:.6rem; overflow:hidden; } }
.flow__step{ display:flex; flex-direction:column; gap:1rem; padding:3rem 0; border-bottom:1px solid var(--line); background:var(--bg); }
@media (min-width:768px){ .flow__step{ padding:3.6rem 3rem; border-bottom:0; } }
.flow__no{ font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; color:var(--amber); }
.flow__label{ font-size:2rem; font-weight:500; }
.flow__desc{ font-size:1.4rem; color:var(--text-soft); line-height:1.8; }

/* ============================================================
   06 CARE (dark panel)
   ============================================================ */
.care{ background:var(--brown-deep); color:var(--on-dark); }
.care__inner{ display:grid; gap:5rem; }
@media (min-width:980px){ .care__inner{ grid-template-columns:1fr 1fr; gap:8rem; align-items:start; } }
.care__text{ font-size:1.8rem; line-height:1.95; color:rgba(239,234,225,.86); margin-bottom:2.4rem; }
@media (min-width:650px){ .care__text{ font-size:2rem; } }
.care__list{ margin-top:4rem; border-top:1px solid var(--line-dark); }
.care__list li{ padding:1.8rem 0; border-bottom:1px solid var(--line-dark); font-size:1.5rem; color:var(--on-dark-soft); padding-left:2.4rem; position:relative; }
.care__list li::before{ content:""; position:absolute; left:0; top:2.5rem; width:1rem; height:1px; background:var(--amber); }

/* ============================================================
   07 VOICES + FAQ
   ============================================================ */
.voices__grid{ display:grid; gap:2rem; }
@media (min-width:768px){ .voices__grid{ grid-template-columns:1fr 1fr; gap:2.4rem; } }
.voice{ border:1px solid var(--line); border-radius:.6rem; padding:4rem 3.4rem; display:flex; flex-direction:column; justify-content:space-between; gap:3rem; min-height:26rem; transition:background .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
@media (min-width:650px){ .voice{ padding:5rem 4.4rem; } }
.voice:hover{ background:var(--paper); transform:translateY(-.5rem); }
.voice__quote{ font-family:"Shippori Mincho B1",serif; font-size:2.2rem; line-height:1.75; font-weight:500; }
@media (min-width:650px){ .voice__quote{ font-size:2.5rem; } }
.voice__cap{ font-size:1.5rem; letter-spacing:.04em; display:flex; align-items:baseline; gap:1.2rem; }
.voice__cap span{ font-size:1.3rem; color:var(--amber); font-family:"Fraunces",serif; font-style:italic; }

.faq{ margin-top:10rem; }
.faq__title{ font-family:"Shippori Mincho B1",serif; font-size:3rem; font-weight:600; margin-bottom:3rem; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:3rem 0; font-size:1.9rem; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; flex:0 0 auto; width:1.6rem; height:1.6rem; background:
  linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:transform .4s cubic-bezier(.16,1,.3,1); color:var(--amber); }
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__a{ padding:0 0 3rem; font-size:1.6rem; line-height:1.9; color:var(--text-soft); max-width:62rem; }

/* ============================================================
   08 STUDIO
   ============================================================ */
.studio__grid{ display:grid; gap:4rem; }
@media (min-width:980px){ .studio__grid{ grid-template-columns:1.1fr .9fr; gap:7rem; align-items:center; } }
.studio__media{ aspect-ratio:4/3; border-radius:.6rem; overflow:hidden; position:relative; }
.studio__media-img{ position:absolute; inset:-6% 0; height:112%; background:#4c3f2e url('../images/studio.jpg') center / cover no-repeat; }
.studio__txt p{ font-size:1.9rem; line-height:1.9; }
.studio__list{ margin-top:3rem; border-top:1px solid var(--line); }
.studio__list li{ padding:1.8rem 0; border-bottom:1px solid var(--line); font-size:1.5rem; color:var(--text-soft); padding-left:2.4rem; position:relative; }
.studio__list li::before{ content:""; position:absolute; left:0; top:2.6rem; width:1rem; height:1px; background:var(--amber); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ background:var(--brown); color:var(--on-dark); padding-block:12rem; position:relative; z-index:2; text-align:center; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:url('../images/cta-bg.jpg') center / cover no-repeat; opacity:.3; z-index:0; }
.cta > .site-max{ position:relative; z-index:1; }
@media (min-width:650px){ .cta{ padding-block:18rem; } }
.cta__eyebrow{ font-family:"Fraunces",serif; font-style:italic; font-size:1.8rem; color:var(--on-dark); opacity:.8; margin-bottom:3rem; }
.cta__title{ font-family:"Shippori Mincho B1",serif; font-weight:600; font-size:4.4rem; line-height:1.4; letter-spacing:.01em; }
@media (min-width:650px){ .cta__title{ font-size:7.6rem; line-height:1.3; } }
.cta__title span{ display:block; }
.cta__lead{ max-width:50rem; margin:4rem auto 0; font-size:1.7rem; line-height:1.9; color:rgba(239,234,225,.82); }
.cta__actions{ margin-top:5rem; display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; }
.cta .btn-chars{ border-color:var(--on-dark); }
.cta .btn-chars__bg{ background:var(--on-dark); }
.cta .btn-chars__text{ color:var(--brown); }

/* ============================================================
   COMPANY
   ============================================================ */
.company__about{ max-width:64rem; font-size:1.8rem; line-height:2; color:var(--text-soft); margin-bottom:6rem; }
.company__table{ border-top:1px solid var(--text); }
.company__tr{ display:grid; grid-template-columns:1fr; gap:.6rem; padding:2.4rem 0; border-bottom:1px solid var(--line); }
@media (min-width:650px){ .company__tr{ grid-template-columns:22rem 1fr; gap:3rem; } }
.company__tr dt{ font-size:1.5rem; color:var(--text-soft); letter-spacing:.04em; }
.company__tr dd{ font-size:1.7rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--brown-deep); color:var(--on-dark); padding-block:6rem 4rem; position:relative; z-index:2; }
.footer__top{ display:flex; flex-direction:column; gap:3rem; padding-bottom:5rem; border-bottom:1px solid var(--line-dark); }
@media (min-width:768px){ .footer__top{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.footer__logo{ font-family:"Fraunces",serif; font-size:3rem; letter-spacing:.16em; }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 4rem; font-size:1.5rem; color:var(--on-dark-soft); }
@media (min-width:768px){ .footer__nav{ display:flex; flex-wrap:wrap; gap:2.4rem; } }
.footer__big{ font-family:"Fraunces",serif; font-style:italic; font-weight:300; font-size:clamp(7rem,22vw,30rem); line-height:1; letter-spacing:-.03em; padding-block:6rem 4rem; opacity:.16; user-select:none; }
.footer__bottom{ display:flex; flex-direction:column; gap:.8rem; font-size:1.3rem; color:var(--on-dark-soft); letter-spacing:.04em; }
@media (min-width:650px){ .footer__bottom{ flex-direction:row; justify-content:space-between; } }

/* ============================================================
   WOOD SWATCH PLACEHOLDERS (until photos arrive)
   ============================================================ */
[data-wood]{ background-color:#5a4632; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; }
/* finished-piece photos on the work cards */
.work-card__media[data-wood="walnut"]{ background-image:url('../images/work-walnut.jpg'); }
.work-card__media[data-wood="oak"]{ background-image:url('../images/work-oak.jpg'); }
.work-card__media[data-wood="cherry"]{ background-image:url('../images/work-cherry.jpg'); }
.work-card__media[data-wood="reclaimed"]{ background-image:url('../images/work-reclaimed.jpg'); }
.work-card__media[data-wood="bench"]{ background-image:url('../images/work-bench.jpg'); }
.work-card__media[data-wood="maple"]{ background-image:url('../images/work-maple.jpg'); }
.work-card__media[data-wood="desk"]{ background-image:url('../images/work-desk.jpg'); }
/* wood-grain macros on the species swatches */
.species__swatch[data-wood="oak"]{ background-image:url('../images/wood-oak.jpg'); }
.species__swatch[data-wood="walnut"]{ background-image:url('../images/wood-walnut.jpg'); }
.species__swatch[data-wood="cherry"]{ background-image:url('../images/wood-cherry.jpg'); }
.species__swatch[data-wood="maple"]{ background-image:url('../images/wood-maple.jpg'); }
.species__swatch[data-wood="ash"]{ background-image:url('../images/wood-ash.jpg'); }

/* ============================================================
   IMAGE INTEGRATIONS (process / founder / care / make band)
   ============================================================ */
.pillar__media{ aspect-ratio:4/5; border-radius:.6rem; overflow:hidden; margin:0 0 2.8rem;
  background:#5a4632 center / cover no-repeat; }
@media (min-width:768px){ .pillar__media{ aspect-ratio:3/4; } }

.make__band{ height:46vh; min-height:30rem; margin-top:9rem; background:#3a2e20 center / cover no-repeat; }
@media (min-width:650px){ .make__band{ margin-top:13rem; height:54vh; } }

.founder{ margin-top:11rem; display:grid; gap:4rem; align-items:center; }
@media (min-width:650px){ .founder{ margin-top:16rem; } }
@media (min-width:900px){ .founder{ grid-template-columns:.92fr 1.08fr; gap:7rem; } }
.founder__portrait{ aspect-ratio:4/5; border-radius:.8rem; overflow:hidden; background:#5a4632 center / cover no-repeat; }
.founder__quote{ font-family:"Shippori Mincho B1",serif; font-weight:500; font-size:3.6rem; line-height:1.5; letter-spacing:.02em; }
@media (min-width:650px){ .founder__quote{ font-size:5.2rem; line-height:1.42; } }
.founder__lead{ margin-top:3rem; font-size:1.7rem; line-height:2; color:var(--text-soft); max-width:48rem; }
.founder__cap{ margin-top:3rem; display:flex; flex-direction:column; gap:.6rem; }

.care__media{ aspect-ratio:4/3; border-radius:.7rem; overflow:hidden; margin-top:4rem;
  background:#352c21 center / cover no-repeat; }
@media (min-width:980px){ .care__media{ margin-top:5rem; } }

/* ============================================================
   RESPONSIVE refinements
   ============================================================ */
@media (max-width:649px){
  .hero__title{ font-size:7.4rem; }
  .quote__text{ font-size:3.8rem; }
  .cta__title{ font-size:3.8rem; }
  .make__item-en{ font-size:2rem; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-line>span{ opacity:1 !important; transform:none !important; }
  .splash{ display:none !important; }
  .splash__char i,.splash__word{ animation:none !important; }
  .hero__scroll span{ animation:none; }
}

/* focus visibility */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }