/* =========================================================
   fenestra — stained glass studio, Kobe
   Design system
   ========================================================= */
:root{
  /* grounds */
  --void:#16130F; --void-2:#211B14; --void-3:#2C251C;
  --paper:#F3ECDE; --paper-2:#EAE1CF; --paper-3:#E0D5BF;
  /* ink (on paper) */
  --ink:#231E18; --ink-soft:#4B4238; --ink-mute:#7A7062;
  /* cream (on void) */
  --cream:#F0E8DA; --cream-soft:#CBC0AC; --cream-mute:#948A79;
  /* accent — sunlight through glass */
  --gold:#C6923F; --gold-soft:#DCB16E; --gold-deep:#A9762B;
  /* glass jewels (imagery / accents only) */
  --cobalt:#2E5AA8; --ruby:#B23A48; --emerald:#3E7D5A; --amber:#C6923F; --violet:#6B4E8C;
  /* lines */
  --line:rgba(35,30,24,.14); --line-strong:rgba(35,30,24,.24);
  --line-cream:rgba(240,232,218,.16); --line-cream-strong:rgba(240,232,218,.30);
  /* type */
  --serif-jp:"Shippori Mincho",serif;
  --sans-jp:"Noto Sans JP",sans-serif;
  --serif-en:"Cormorant Garamond",serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
  /* metrics */
  --pad:clamp(20px,5vw,74px);
  --sec-y:clamp(84px,11.5vw,164px);
  --maxw:1280px;
  --maxw-wide:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.16,1,.3,1);
  --hd-h:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans-jp);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-weight:400;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#fff}

/* kinsoku */
h1,h2,h3,h4,p,li,dd,dt,figcaption{
  line-break:strict; word-break:normal; overflow-wrap:break-word;
}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* =============== SHARED TYPO =============== */
.eyebrow{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500;
  display:flex; align-items:center; gap:.9em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.eyebrow-cream{color:var(--gold-soft)}

.h-sec{
  font-family:var(--serif-jp); font-weight:600;
  font-size:clamp(30px,5vw,58px); line-height:1.16; letter-spacing:.02em;
  color:var(--ink); margin-top:.5rem;
}
.h-sec span{display:block}
.h-cream{color:var(--cream)}
.h-mid{
  font-family:var(--serif-jp); font-weight:600;
  font-size:clamp(24px,3.6vw,40px); line-height:1.28; color:var(--ink);
}
.ink-gold{color:var(--gold-deep); font-weight:500}
.h-cream .ink-gold,.section-dark .ink-gold{color:var(--gold-soft)}

.section{padding:var(--sec-y) 0; background:var(--paper)}
.section-paper2{background:var(--paper-2)}
.section-dark{padding:var(--sec-y) 0; background:var(--void); color:var(--cream)}
.section-dark p{color:var(--cream-soft)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

/* =============== BUTTONS =============== */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans-jp); font-weight:500; font-size:14.5px; letter-spacing:.06em;
  padding:.92em 1.7em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:all .4s var(--ease); white-space:nowrap;
}
.btn-arw{transition:transform .4s var(--ease)}
.btn:hover .btn-arw{transform:translateX(4px)}
.btn-cta{background:var(--gold); color:#fff; border-color:var(--gold)}
.btn-cta:hover{background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); box-shadow:0 10px 26px -12px rgba(169,118,43,.7)}
.btn-ghost-cream{background:transparent; color:var(--cream); border-color:var(--line-cream-strong)}
.btn-ghost-cream:hover{border-color:var(--cream); background:rgba(240,232,218,.06); transform:translateY(-2px)}
.btn-lg{font-size:15.5px; padding:1.05em 2.1em}

/* =============== SPLASH =============== */
#splash{
  position:fixed; inset:0; z-index:3000; background:var(--void);
  display:flex; align-items:center; justify-content:center;
  animation:splashOut .9s var(--ease) 2.05s forwards;
}
#splash.done{animation:splashOut .9s var(--ease) forwards}
.splash-inner{position:relative; text-align:center}
.splash-word{
  font-family:var(--serif-en); font-size:clamp(40px,8vw,78px); font-weight:500;
  letter-spacing:.16em; color:var(--cream);
  opacity:0; animation:splashWord 1.3s var(--ease) .5s forwards;
}
.splash-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.42em; color:var(--gold-soft);
  margin-top:.9rem; opacity:0; animation:splashWord 1.3s var(--ease) .95s forwards;
}
.splash-panes{
  position:absolute; left:50%; top:-38px; transform:translateX(-50%);
  display:grid; grid-template-columns:1fr 1fr; gap:5px; width:56px; height:56px;
}
.splash-panes span{border-radius:2px; opacity:0; animation:paneGlow 1.4s var(--ease) forwards}
.splash-panes span:nth-child(1){background:var(--cobalt); animation-delay:.15s}
.splash-panes span:nth-child(2){background:var(--amber); animation-delay:.30s}
.splash-panes span:nth-child(3){background:var(--emerald); animation-delay:.45s}
.splash-panes span:nth-child(4){background:var(--ruby); animation-delay:.60s}
@keyframes paneGlow{from{opacity:0;transform:scale(.5)}to{opacity:.92;transform:scale(1)}}
@keyframes splashWord{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}

/* =============== PROGRESS =============== */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--gold); z-index:2500; transition:width .1s linear;
}

/* =============== HEADER =============== */
#header{
  position:fixed; top:0; left:0; right:0; z-index:1200;
  height:var(--hd-h); display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.hd-inner{
  width:100%; max-width:var(--maxw-wide); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:22px;
}
.brand{position:relative; display:flex; align-items:center; margin-right:auto}
.brand-logo{height:30px; width:auto; display:block; transition:opacity .45s var(--ease)}
.brand-logo-dark{position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0}
#header.is-solid .brand-logo-light{opacity:0}
#header.is-solid .brand-logo-dark{opacity:1}
.nav{display:flex; gap:26px}
.nav a{
  font-size:14px; font-weight:500; letter-spacing:.05em; color:var(--cream);
  position:relative; padding:4px 0; transition:color .35s var(--ease); opacity:.9;
}
.nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold-soft); transition:width .35s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}
.hd-cta{padding:.62em 1.25em; font-size:13.5px}

/* header scrolled → solid paper */
#header.is-solid{background:rgba(243,236,222,.92); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--line), 0 12px 40px -28px rgba(35,30,24,.5); height:66px}
#header.is-solid .brand-word{color:var(--ink)}
#header.is-solid .nav a{color:var(--ink-soft)}
#header.is-solid .nav a:hover{color:var(--ink)}
#header.is-solid .burger span{background:var(--ink)}

.burger{display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; position:relative}
.burger span{position:absolute; left:9px; width:24px; height:1.6px; background:var(--cream); transition:.35s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:25px}

/* =============== DRAWER =============== */
.drawer{
  position:fixed; top:0; right:0; z-index:1600; width:min(88vw,420px); height:100%;
  background:var(--void); color:var(--cream);
  padding:calc(var(--hd-h) - 6px) clamp(26px,6vw,46px) 40px;
  display:flex; flex-direction:column; align-items:flex-start;
  transform:translateX(100%); transition:transform .5s var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.open{transform:translateX(0)}
.drawer-close{
  position:absolute; top:18px; right:20px; width:44px; height:44px;
  background:transparent; border:1px solid var(--line-cream-strong); border-radius:50%;
  color:var(--cream); font-size:26px; line-height:1; cursor:pointer; transition:.3s var(--ease);
}
.drawer-close:hover{background:rgba(240,232,218,.08); transform:rotate(90deg)}
.drawer-nav{display:flex; flex-direction:column; width:100%; margin-top:6px}
.drawer-nav a{
  display:flex; align-items:baseline; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--line-cream); font-family:var(--serif-jp); font-size:21px; font-weight:500;
}
.drawer-nav a em{font-family:var(--serif-en); font-style:italic; font-size:14px; color:var(--cream-mute); margin-left:auto}
.dn-no{font-family:var(--mono); font-size:11px; color:var(--gold-soft); letter-spacing:.1em}
.drawer-cta{margin-top:26px; width:100%; justify-content:center}
.drawer-foot{margin-top:22px; display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:13px; color:var(--cream-soft); letter-spacing:.06em}
.drawer-scrim{position:fixed; inset:0; z-index:1500; background:rgba(10,8,6,.5); opacity:0; visibility:hidden; transition:.4s var(--ease)}
.drawer-scrim.open{opacity:1; visibility:visible}

/* =============== HERO =============== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--void)}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-scrim{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(18,15,11,.5) 0%, rgba(18,15,11,.12) 32%, rgba(18,15,11,.35) 66%, rgba(18,15,11,.82) 100%),
  radial-gradient(120% 90% at 78% 40%, transparent 40%, rgba(18,15,11,.4) 100%);
}
.hero-body{position:relative; z-index:2; width:100%; max-width:var(--maxw-wide); margin:0 auto; padding:0 var(--pad) clamp(56px,9vh,110px)}
.hero-eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:20px;
  opacity:0; animation:heroUp 1s var(--ease) 2.25s forwards;
}
.hero-title{
  font-family:var(--serif-jp); font-weight:600; color:#fff;
  font-size:clamp(52px,11.5vw,150px); line-height:1.0; letter-spacing:.03em;
  text-shadow:0 2px 40px rgba(10,8,6,.4);
}
.hero-title span{display:block; opacity:0; animation:heroUp 1.15s var(--ease) forwards}
.hero-title span:nth-child(1){animation-delay:2.35s}
.hero-title span:nth-child(2){animation-delay:2.5s; margin-left:.7em}
.hero-lead{
  color:rgba(240,232,218,.9); font-size:clamp(15px,1.75vw,18px); line-height:2.05; margin-top:26px; max-width:38ch;
  opacity:0; animation:heroUp 1s var(--ease) 2.75s forwards;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; opacity:0; animation:heroUp 1s var(--ease) 2.9s forwards}
.hero-latin{
  position:absolute; right:calc(var(--pad) - 6px); top:32%; z-index:1; writing-mode:vertical-rl;
  font-family:var(--serif-en); font-size:15px; letter-spacing:.5em; color:rgba(240,232,218,.34);
  text-transform:lowercase; opacity:0; animation:heroUp 1.4s var(--ease) 3.1s forwards;
}
@keyframes heroUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:translateY(0)}}

/* =============== REVEAL =============== */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease-io), transform 1.1s var(--ease-io)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}

/* =============== ABOUT =============== */
.about-wrap{display:grid; grid-template-columns:.9fr 1.4fr; gap:clamp(30px,6vw,90px); align-items:start}
.about-lede p{font-size:clamp(16px,1.55vw,19px); line-height:2.15; color:var(--ink-soft)}
.about-lede p+p{margin-top:1.5em}
.lead-word{font-family:var(--serif-jp); font-weight:600; color:var(--ink); font-size:1.08em}
.h-sec{position:relative}

/* =============== PHILOSOPHY =============== */
.phi-head{max-width:var(--maxw); margin-bottom:clamp(40px,6vw,72px)}
.phi-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,72px); align-items:start}
.phi-text p{font-size:clamp(15px,1.4vw,17px); line-height:2.15; color:var(--cream-soft)}
.phi-text p+p{margin-top:1.4em}
.phi-pull{
  font-family:var(--serif-jp)!important; font-weight:500;
  font-size:clamp(21px,2.5vw,30px)!important; line-height:1.6!important; color:var(--cream)!important;
  margin:1.5em 0!important; padding-left:22px; border-left:2px solid var(--gold); letter-spacing:.03em;
}
.phi-fig{position:sticky; top:100px}
.phi-fig img{width:100%; aspect-ratio:3/2.05; object-fit:cover; border-radius:3px; box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.phi-fig figcaption{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--cream-mute); margin-top:14px; text-align:center}
.phi-between{display:grid; grid-template-columns:.9fr 1.4fr; gap:clamp(30px,5vw,72px); margin-top:clamp(64px,9vw,128px); padding-top:clamp(48px,6vw,80px); border-top:1px solid var(--line-cream)}
.phi-between-body p{font-size:clamp(15px,1.4vw,17px); line-height:2.15; color:var(--cream-soft)}
.phi-between-body p+p{margin-top:1.4em}

/* =============== SIGNATURE =============== */
.sig-head{max-width:760px; margin:0 auto clamp(44px,6vw,70px); text-align:center}
.sig-head .eyebrow{justify-content:center}
.sig-head .h-sec span{display:inline; margin:0}
.sig-head .h-sec span:nth-child(2)::before{content:"　"}
.sig-intro{margin-top:24px; font-size:clamp(15px,1.5vw,17.5px); line-height:2.1; color:var(--cream-soft)}
.sig-stage-wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,4vw,60px); align-items:center; max-width:1180px; margin:0 auto}

.sig-stage{position:relative; border-radius:4px; overflow:hidden; background:#0d0b08; aspect-ratio:3/2.15; box-shadow:0 40px 90px -46px rgba(0,0,0,.9)}
.sig-window{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.sig-window img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transition:filter 1.3s var(--ease), transform 1.3s var(--ease);
}
.sig-wash{position:absolute; inset:0; mix-blend-mode:overlay; opacity:.5; transition:background 1.3s var(--ease), opacity 1.3s var(--ease)}
.sig-floor{position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none; overflow:hidden}
.sig-cast{
  position:absolute; bottom:-30%; width:70%; height:150%; border-radius:50%;
  filter:blur(26px); opacity:.0; transition:all 1.4s var(--ease); mix-blend-mode:screen;
}
.sig-clock{position:absolute; inset:0; pointer-events:none}
#sigSun{position:absolute; width:70px; height:70px; border-radius:50%; filter:blur(16px); opacity:0; transition:all 1.5s var(--ease); mix-blend-mode:screen}

/* light states */
.signature[data-light="morning"] .sig-window img{filter:brightness(1.08) saturate(1.18) contrast(1.03) hue-rotate(-4deg)}
.signature[data-light="morning"] .sig-wash{background:linear-gradient(135deg, rgba(210,228,255,.55), transparent 60%); opacity:.55}
.signature[data-light="morning"] .sig-cast{left:6%; background:radial-gradient(circle, rgba(150,190,255,.5), rgba(200,170,120,.35) 55%, transparent 72%); opacity:.5; transform:scaleX(1.25)}
.signature[data-light="morning"] #sigSun{left:14%; top:12%; background:rgba(220,235,255,.9); opacity:.7}

.signature[data-light="noon"] .sig-window img{filter:brightness(1.14) saturate(1.28) contrast(1.08)}
.signature[data-light="noon"] .sig-wash{background:radial-gradient(80% 60% at 50% 6%, rgba(255,250,235,.5), transparent 70%); opacity:.5}
.signature[data-light="noon"] .sig-cast{left:24%; bottom:-42%; background:radial-gradient(circle, rgba(255,240,200,.6), rgba(180,120,90,.4) 52%, transparent 70%); opacity:.62; transform:scaleX(.9)}
.signature[data-light="noon"] #sigSun{left:46%; top:4%; background:rgba(255,252,240,.95); opacity:.8}

.signature[data-light="cloudy"] .sig-window img{filter:brightness(.9) saturate(.74) contrast(.9)}
.signature[data-light="cloudy"] .sig-wash{background:linear-gradient(180deg, rgba(180,182,186,.5), rgba(150,152,158,.3)); opacity:.5}
.signature[data-light="cloudy"] .sig-cast{left:22%; background:radial-gradient(circle, rgba(170,172,178,.32), transparent 68%); opacity:.28; transform:scaleX(1.1)}
.signature[data-light="cloudy"] #sigSun{left:40%; top:16%; background:rgba(200,200,205,.6); opacity:.3}

.signature[data-light="dusk"] .sig-window img{filter:brightness(.96) saturate(1.16) contrast(1.04) sepia(.16) hue-rotate(-10deg)}
.signature[data-light="dusk"] .sig-wash{background:linear-gradient(300deg, rgba(255,150,70,.5), rgba(150,60,90,.28) 55%, transparent 78%); opacity:.6}
.signature[data-light="dusk"] .sig-cast{left:40%; background:radial-gradient(circle, rgba(255,140,70,.55), rgba(150,50,60,.4) 52%, transparent 72%); opacity:.58; transform:scaleX(1.35)}
.signature[data-light="dusk"] #sigSun{left:74%; top:22%; background:rgba(255,170,90,.92); opacity:.8}

.sig-panel{align-self:center}
.sig-tabs{display:flex; gap:8px; margin-bottom:26px}
.sig-tab{
  flex:1; padding:.85em 0; border:1px solid var(--line-cream-strong); background:transparent;
  color:var(--cream-soft); font-family:var(--serif-jp); font-size:18px; font-weight:500; cursor:pointer;
  border-radius:3px; transition:.4s var(--ease); letter-spacing:.1em;
}
.sig-tab:hover{border-color:var(--cream-mute); color:var(--cream)}
.sig-tab[aria-selected="true"]{background:var(--gold); border-color:var(--gold); color:#fff}
.sig-readouts{position:relative; min-height:150px}
.sig-read{position:absolute; inset:0; opacity:0; transform:translateY(10px); transition:.6s var(--ease); pointer-events:none}
.sig-read.is-on{opacity:1; transform:none; position:relative}
.sig-read-ttl{font-family:var(--serif-jp)!important; font-size:clamp(22px,2.4vw,28px); font-weight:600; color:var(--cream)!important; margin-bottom:12px}
.sig-read-txt{font-size:15px; line-height:2.1; color:var(--cream-soft)!important}
.sig-caption{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-cream); font-family:var(--serif-jp); font-style:normal; font-size:16px; color:var(--gold-soft); letter-spacing:.06em}

/* =============== WORKS =============== */
.works-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(38px,5vw,60px)}
.works-note{font-size:14.5px; line-height:2; color:var(--ink-mute); text-align:right}
.works-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px)}
.work-card{grid-column:span 1}
.work-tall{grid-row:span 2; grid-column:span 2}
.work-wide{grid-column:span 2}
.work-card:nth-child(2){grid-column:span 2}
.work-card:nth-child(3){grid-column:span 2}
.work-img{overflow:hidden; border-radius:3px; background:var(--paper-3)}
.work-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); aspect-ratio:4/3}
.work-tall .work-img img{aspect-ratio:auto; height:100%; min-height:100%}
.work-tall{display:flex; flex-direction:column}
.work-tall .work-img{flex:1}
.work-card:hover .work-img img{transform:scale(1.045)}
.work-card figcaption{display:flex; align-items:baseline; gap:12px; margin-top:14px; flex-wrap:wrap}
.work-ttl{font-family:var(--serif-jp); font-size:18px; font-weight:600; color:var(--ink)}
.work-meta{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-mute)}

/* =============== PRODUCTS =============== */
.prod-head{text-align:center; margin-bottom:clamp(40px,5vw,64px)}
.prod-head .eyebrow{justify-content:center}
.prod-sub{margin-top:16px; font-size:16px; color:var(--ink-soft); font-family:var(--serif-jp)}
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px)}
.prod-card{background:var(--paper); border-radius:4px; overflow:hidden; box-shadow:0 20px 50px -40px rgba(35,30,24,.6); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.section-paper2 .prod-card{background:#fff}
.prod-card:hover{transform:translateY(-5px); box-shadow:0 30px 60px -40px rgba(35,30,24,.7)}
.prod-img{overflow:hidden; aspect-ratio:16/10}
.prod-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.prod-card:hover .prod-img img{transform:scale(1.05)}
.prod-txt{padding:clamp(24px,3vw,38px)}
.prod-tag{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--gold-deep); text-transform:uppercase}
.prod-ttl{font-family:var(--serif-jp); font-size:clamp(20px,2.3vw,26px); font-weight:600; color:var(--ink); margin:.5em 0 .6em}
.prod-desc{font-size:14.5px; line-height:2; color:var(--ink-soft)}

/* =============== LIFE =============== */
.life-grid{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:78vh}
.life-media{position:relative; overflow:hidden}
.life-media img{width:100%; height:100%; object-fit:cover; min-height:420px}
.life-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,7vw,110px) clamp(28px,6vw,92px)}
.life-body .h-sec{margin-bottom:28px}
.life-text p{font-size:clamp(15px,1.45vw,17px); line-height:2.2; color:var(--cream-soft)}
.life-text p+p{margin-top:1.3em}
.life-list{list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:13px}
.life-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--cream-soft); line-height:1.8}
.life-list li::before{content:""; position:absolute; left:0; top:.72em; width:9px; height:9px; background:var(--gold); border-radius:1px; transform:rotate(45deg)}

/* =============== CRAFT =============== */
.craft-head{max-width:840px; margin-bottom:clamp(44px,6vw,72px)}
.craft-lede{margin-top:22px; font-size:clamp(15px,1.5vw,17.5px); line-height:2.15; color:var(--ink-soft)}
.craft-steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px); counter-reset:cs}
.craft-step{display:flex; flex-direction:column}
.craft-img{overflow:hidden; border-radius:3px; aspect-ratio:3/2; background:var(--paper-3)}
.craft-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.craft-step:hover .craft-img img{transform:scale(1.045)}
.craft-cap{display:flex; align-items:flex-start; gap:14px; margin-top:18px}
.craft-no{font-family:var(--mono); font-size:13px; color:var(--gold-deep); letter-spacing:.1em; padding-top:2px}
.craft-cap p{font-size:14.5px; line-height:1.85; color:var(--ink-soft)}
.craft-close{margin-top:clamp(48px,6vw,80px); max-width:800px; text-align:center; margin-left:auto; margin-right:auto}
.craft-close p{font-family:var(--serif-jp); font-size:clamp(18px,2.2vw,25px); line-height:1.95; color:var(--ink); font-weight:500}

/* =============== RESTORE =============== */
.restore-grid{display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; min-height:76vh}
.restore-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,7vw,110px) clamp(28px,6vw,92px)}
.restore-body .h-sec{margin-bottom:26px}
.restore-text p{font-size:clamp(15px,1.45vw,17px); line-height:2.2; color:var(--cream-soft)}
.restore-text p+p{margin-top:1.3em}
.restore-list{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:12px}
.restore-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--cream-soft)}
.restore-list li::before{content:""; position:absolute; left:0; top:.72em; width:9px; height:9px; background:var(--gold); border-radius:1px; transform:rotate(45deg)}
.restore-fin{margin-top:28px; font-family:var(--serif-jp); font-size:clamp(16px,1.8vw,20px); color:var(--gold-soft); line-height:1.8}
.restore-media{overflow:hidden}
.restore-media img{width:100%; height:100%; object-fit:cover; min-height:420px}

/* =============== SCHOOL =============== */
.school-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center}
.school-media{overflow:hidden; border-radius:4px}
.school-media img{width:100%; aspect-ratio:3/2.1; object-fit:cover; box-shadow:0 30px 60px -44px rgba(35,30,24,.7)}
.school-body .h-sec{margin-bottom:24px}
.school-text p{font-size:clamp(15px,1.45vw,17px); line-height:2.2; color:var(--ink-soft)}
.school-list{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:12px}
.school-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-soft)}
.school-list li::before{content:""; position:absolute; left:0; top:.72em; width:9px; height:9px; background:var(--gold); border-radius:1px; transform:rotate(45deg)}

/* =============== FLOW =============== */
.flow-head{text-align:center; margin-bottom:clamp(44px,6vw,70px)}
.flow-head .eyebrow{justify-content:center}
.flow-sub{margin-top:14px; font-family:var(--serif-jp); font-size:16px; color:var(--ink-soft)}
.flow-list{list-style:none; max-width:820px; margin:0 auto; counter-reset:f}
.flow-item{display:flex; gap:clamp(20px,3vw,40px); align-items:flex-start; padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line)}
.flow-item:last-child{border-bottom:0}
.flow-no{font-family:var(--serif-en); font-size:clamp(30px,4vw,48px); font-weight:500; color:var(--gold); line-height:1; min-width:1.4em}
.flow-ttl{font-family:var(--serif-jp); font-size:clamp(18px,2vw,23px); font-weight:600; color:var(--ink); margin-bottom:.4em}
.flow-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.9}

/* =============== MESSAGE =============== */
.message-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,6vw,84px); align-items:center}
.message-media{position:relative}
.message-media img{width:100%; aspect-ratio:3/3.6; object-fit:cover; border-radius:4px; box-shadow:0 40px 80px -46px rgba(0,0,0,.9)}
.message-media figcaption{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--cream-mute); margin-top:14px; text-align:center}
.message-body .h-sec{margin-bottom:20px}
.message-catch{font-family:var(--serif-jp)!important; font-size:clamp(24px,3.4vw,42px); font-weight:600; color:var(--cream)!important; line-height:1.5; letter-spacing:.03em; margin-bottom:26px}
.message-text p{font-size:clamp(14.5px,1.4vw,16.5px); line-height:2.2; color:var(--cream-soft)}
.message-text p+p{margin-top:1.3em}
.message-sign{margin-top:28px; font-family:var(--serif-jp); font-size:15px; color:var(--cream); letter-spacing:.05em}
.message-sign b{font-size:19px; font-weight:600}

/* =============== COMPANY =============== */
.company-head{margin-bottom:clamp(38px,5vw,56px)}
.company-dl{border-top:1px solid var(--line)}
.company-dl>div{display:grid; grid-template-columns:230px 1fr; gap:20px; padding:19px 4px; border-bottom:1px solid var(--line); align-items:baseline}
.company-dl dt{font-family:var(--serif-jp); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.05em}
.company-dl dd{font-size:14.5px; color:var(--ink-soft); line-height:1.85}
.company-dl a{color:var(--gold-deep); border-bottom:1px solid transparent; transition:.3s}
.company-dl a:hover{border-color:var(--gold-deep)}

/* =============== CONTACT =============== */
.contact{text-align:center}
.contact-wrap{max-width:780px; margin:0 auto}
.contact .eyebrow{justify-content:center; margin-bottom:22px}
.contact-title{font-family:var(--serif-jp); font-weight:600; font-size:clamp(32px,5.6vw,62px); line-height:1.2; color:var(--cream); letter-spacing:.02em}
.contact-title span{display:block}
.contact-title span:nth-child(2){color:var(--gold-soft)}
.contact-lede{margin-top:26px; font-size:clamp(15px,1.5vw,17px); line-height:2.05; color:var(--cream-soft)}
.contact-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.contact-hours{margin-top:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--cream-mute)}

/* =============== FOOTER =============== */
.footer{background:#100D0A; color:var(--cream-soft); padding:clamp(56px,7vw,88px) 0 0}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:40px; padding-bottom:clamp(40px,5vw,60px); border-bottom:1px solid var(--line-cream)}
.footer-logo{height:34px; width:auto; display:block; margin-bottom:16px}
.footer-tag{font-family:var(--serif-jp); font-size:14px; color:var(--cream-mute); margin-top:2px}
.footer-nav{display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; align-content:start}
.footer-nav a{font-size:14px; color:var(--cream-soft); transition:color .3s; width:fit-content}
.footer-nav a:hover{color:var(--gold-soft)}
.footer-info{font-size:13px; line-height:2; color:var(--cream-mute)}
.footer-info a{color:var(--cream-soft)}
.footer-info a:hover{color:var(--gold-soft)}
.footer-base{max-width:var(--maxw); margin:0 auto; padding:24px var(--pad); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--cream-mute)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nav,.hd-cta{display:none}
  .burger{display:block}
  .about-wrap{grid-template-columns:1fr; gap:24px}
  .phi-grid{grid-template-columns:1fr; gap:36px}
  .phi-fig{position:static; order:-1}
  .phi-between{grid-template-columns:1fr; gap:20px}
  .sig-stage-wrap{grid-template-columns:1fr; gap:36px}
  .sig-stage{aspect-ratio:3/2}
  .message-grid{grid-template-columns:1fr; gap:40px}
  .message-media{max-width:400px; margin:0 auto}
  .message-media img{aspect-ratio:3/3.4}
}
@media (max-width:880px){
  :root{--hd-h:64px}
  .brand-logo{height:26px}
  .life-grid,.restore-grid{grid-template-columns:1fr}
  .restore-media{order:-1}
  .restore-media img,.life-media img{min-height:340px; max-height:56vh}
  .school-grid{grid-template-columns:1fr; gap:30px}
  .school-media{max-width:520px}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .work-tall{grid-row:span 1; grid-column:span 2}
  .work-tall .work-img img{aspect-ratio:4/3; min-height:0}
  .work-card:nth-child(2),.work-card:nth-child(3){grid-column:span 1}
  .craft-steps{grid-template-columns:1fr; gap:26px; max-width:520px; margin:0 auto}
  .craft-step{flex-direction:row; gap:18px; align-items:center}
  .craft-img{width:44%; flex-shrink:0; aspect-ratio:1/1}
  .craft-cap{margin-top:0; flex-direction:column; gap:6px}
}
@media (max-width:680px){
  :root{--sec-y:clamp(64px,15vw,96px)}
  body{letter-spacing:.01em}
  /* mobile hero: image on top, text below on solid ground */
  .hero{min-height:auto; flex-direction:column; background:var(--void)}
  .hero-media{position:relative; inset:auto; width:100%; height:54svh}
  .hero-media img{height:100%; animation:none; object-position:center 44%}
  .hero-scrim{background:linear-gradient(180deg, rgba(18,15,11,.22), rgba(18,15,11,.22) 52%, rgba(18,15,11,.86) 92%, var(--void) 100%)}
  .hero-body{padding:30px var(--pad) 46px}
  .hero-eyebrow{margin-bottom:14px}
  .hero-title{font-size:clamp(46px,15vw,72px)}
  .hero-title span:nth-child(2){margin-left:.3em}
  .hero-lead{margin-top:20px}
  .hero-lead br{display:none}
  .hero-actions{margin-top:26px}
  .hero-latin{display:none}
  .works-head{flex-direction:column; align-items:flex-start}
  .works-note{text-align:left}
  .prod-grid{grid-template-columns:1fr}
  .company-dl>div{grid-template-columns:1fr; gap:5px; padding:16px 4px}
  .company-dl dt{font-size:13px; color:var(--ink-mute)}
  .footer-inner{grid-template-columns:1fr; gap:32px}
  .footer-nav{max-width:280px}
  .sig-tabs{gap:6px}
  .sig-tab{font-size:16px; padding:.7em 0}
  .flow-item{gap:16px}
}
@media (max-width:440px){
  .hero-actions .btn,.contact-actions .btn{width:100%; justify-content:center}
  .craft-step{flex-direction:column; align-items:stretch}
  .craft-img{width:100%; aspect-ratio:3/2}
  .work-card:nth-child(n){grid-column:span 2}
  .works-grid{grid-template-columns:1fr}
}

/* motion off */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important; transition-duration:.001s!important}
  .reveal{opacity:1; transform:none}
  #splash{animation:none; display:none}
  .hero-title span,.hero-eyebrow,.hero-lead,.hero-actions,.hero-latin{opacity:1; animation:none}
}