/* =========================================================
   &TIME — savor.it DNA を翻訳した設計システム
   palette: cream #f7f2e6 / ink #2c2620 / gold #e2a02f / red #c9722e
   type: Fraunces(編集明朝) × Shippori Mincho B1(和) × Inter / Noto Sans JP / JetBrains Mono
   fluid: html 62.5% (1rem=10px), clamp(min, MIN + (MAX-MIN)*(100vw-37.5rem)/106.5, max)
   ========================================================= */

:root{
  --cream:#f7f2e6;
  --cream-2:#f1e9d8;
  --cream-3:#ece2cd;
  --sand:#e3d6ba;
  --ink:#2c2620;
  --ink-2:#473d30;
  --ink-soft:#6b5d49;
  --gold:#e2a02f;
  --gold-deep:#c8861c;
  --red:#c9722e;

  --grid-cols:12;
  --grid-gap:2rem;
  --grid-max:144rem;
  --grid-margin:clamp(2rem, calc(2rem + 2*(100vw - 37.5rem)/106.5), 4rem);

  --serif:"Fraunces", "Shippori Mincho B1", Georgia, serif;
  --mincho:"Shippori Mincho B1", "Fraunces", serif;
  --sans:"Inter", "Noto Sans JP", helvetica, arial, sans-serif;
  --jp:"Noto Sans JP", "Inter", sans-serif;
  --mono:"JetBrains Mono", "SF Mono", monospace;

  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.1,1);

  --header-h:9rem;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:62.5%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-size-adjust:none;
  scrollbar-width:none;
  overflow-x:clip;
}
html::-webkit-scrollbar{display:none}
body{
  margin:0;padding:0;
  font-family:var(--jp);
  font-weight:400;
  font-size:clamp(1.6rem, calc(1.6rem + .2*(100vw - 37.5rem)/106.5), 1.8rem);
  line-height:1.8;
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--cream);
  overflow-x:clip;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05;letter-spacing:-.01em;word-break:keep-all}
em{font-style:normal}
table{border-collapse:collapse;width:100%}

/* ---------- layout helpers ---------- */
.grid{
  width:min(100% - var(--grid-margin)*2, var(--grid-max));
  margin-inline:auto;
}
section{position:relative;z-index:2}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--sans);
  font-size:clamp(1.4rem, calc(1.4rem + .2*(100vw - 37.5rem)/106.5), 1.6rem);
  letter-spacing:.02em;
  cursor:pointer;position:relative;
}
.btn--solid{
  background:var(--ink);color:var(--cream-3);
  padding:1.7rem 3.2rem;border-radius:5px;
  transition:background-color .5s linear .1s;
  font-weight:500;
}
.btn--solid:hover{background:var(--ink-2);transition:background-color .5s linear 0s}

/* savor pill button: [label] —— [label] inside a soft rounded rect */
.btn--pill{
  display:inline-flex;align-items:center;gap:1.2rem;
  background:rgba(44,38,32,.04);
  border:1px solid rgba(44,38,32,.2);
  border-radius:6px;
  padding:1.5rem 2.4rem;color:var(--ink);font-weight:500;white-space:nowrap;
  transition:background-color .45s var(--ease-out), border-color .45s var(--ease-out), color .45s var(--ease-out);
}
.btn--pill .rule{flex:0 0 auto;width:2.6rem;height:1px;background:currentColor;opacity:.45;transition:width .4s var(--ease-out)}
.btn--pill:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--pill:hover .rule{width:3.6rem;opacity:.8}
/* solid/marigold pill for dark sections & primary CTA */
.btn--pill.btn--cream{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--pill.btn--cream:hover{background:var(--gold);border-color:var(--gold)}
.btn--pill.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--pill.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn--invert{color:var(--cream-3)}
.hero .btn--pill{color:var(--cream);border-color:rgba(247,242,230,.55);background:rgba(247,242,230,.08)}
.hero .btn--pill:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}

/* pill label (savor PillLabel) */
.pill{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--mono);
  font-size:clamp(1.2rem, calc(1.2rem + .2*(100vw - 37.5rem)/106.5), 1.4rem);
  letter-spacing:.04em;
  padding:.7rem 1.6rem;border:1.5px solid currentColor;border-radius:5rem;
  text-transform:uppercase;
}
.pill i{font-style:normal;opacity:.6;font-size:.85em;letter-spacing:.06em}

/* ---------- eyebrow / chapter / section title ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--mono);
  font-size:clamp(1.2rem, calc(1.2rem + .1*(100vw - 37.5rem)/106.5), 1.3rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow--light{color:var(--gold)}
.eyebrow-no{
  display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;
  border:1.5px solid currentColor;border-radius:50%;font-size:1.2rem;
}
.chap{
  font-family:var(--mono);font-size:clamp(1.3rem,1.4vw,1.5rem);
  letter-spacing:.2em;color:var(--gold);
}
.sec-title{
  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(4.4rem, calc(4.4rem + (11-4.4)*(100vw - 37.5rem)/106.5), 11rem);
  line-height:.98;letter-spacing:-.02em;
  color:var(--ink);
}
.sec-title--light{color:var(--cream)}

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2rem;
  transition:opacity .9s var(--ease-out), visibility 0s linear .9s;
}
body.is-loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
.loader-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loader-bubbles span{
  position:absolute;bottom:-10rem;border-radius:50%;--drift:0vw;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.65), rgba(247,242,230,.32) 42%, rgba(226,160,47,.14) 66%, transparent 74%);
  border:1px solid rgba(247,242,230,.22);
  box-shadow:inset 0 0 8px rgba(255,255,255,.18);
  animation-name:bubbleUp;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes bubbleUp{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  10%{opacity:1}
  88%{opacity:.85}
  100%{transform:translate(var(--drift),-118vh) scale(1.08);opacity:0}
}
.loader-logo{
  position:relative;z-index:2;display:flex;align-items:baseline;gap:.4rem;
  font-family:var(--serif);color:var(--cream);
  font-size:clamp(5rem,12vw,11rem);font-weight:300;letter-spacing:-.02em;
}
.loader-amp{color:var(--gold);font-style:italic;
  opacity:0;transform:translateY(40%);
  animation:loaderAmp .9s var(--ease-spring) .2s forwards}
.loader-word{overflow:hidden;display:inline-block}
.loader-word{
  opacity:0;transform:translateY(110%);
  animation:loaderWord .9s var(--ease-out) .4s forwards}
@keyframes loaderAmp{to{opacity:1;transform:translateY(0)}}
@keyframes loaderWord{to{opacity:1;transform:translateY(0)}}
.loader-bar{position:relative;z-index:2;width:min(36rem,60vw);height:2px;background:rgba(247,242,230,.18);overflow:hidden}
.loader-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:loaderBar 1.8s var(--ease-soft) .3s forwards}
@keyframes loaderBar{to{transform:scaleX(1)}}

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--gold);z-index:200;pointer-events:none}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:120;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--grid-margin);
  transition:background-color .5s var(--ease-out), height .5s var(--ease-out), box-shadow .5s var(--ease-out), color .4s ease;
  color:var(--cream);
}
.header.is-solid{
  background:var(--cream);color:var(--ink);
  height:6.6rem;
  box-shadow:0 1px 0 rgba(44,38,32,.08);
}
.logo{display:inline-flex;align-items:baseline;gap:.3rem;font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
.logo-amp{font-size:3.4rem;color:var(--gold);font-style:italic;line-height:1}
.header.is-solid .logo-amp{color:var(--red)}
.logo-word{font-size:2.4rem;letter-spacing:.12em}
.nav{display:flex;align-items:baseline;gap:clamp(1.8rem,2.6vw,3.4rem)}
.nav a{font-family:var(--sans);font-size:1.5rem;letter-spacing:.02em;position:relative;padding-block:.6rem}
.nav a::after{content:"";position:absolute;left:0;bottom:.2rem;width:0;height:1.5px;background:currentColor;transition:width .35s var(--ease-out)}
.nav a:hover::after{width:100%}
.nav-cta{font-family:var(--mono)!important;font-size:1.3rem!important;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:5rem;padding:.6rem 1.6rem!important}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:none;cursor:pointer;width:4rem;height:4rem;flex-direction:column;justify-content:center;gap:.7rem;padding:0}
.burger span{display:block;height:1.5px;width:2.6rem;background:currentColor;transition:transform .4s var(--ease-out),opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(.43rem) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-.43rem) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--cream);
  padding:calc(var(--header-h) + 2rem) var(--grid-margin) 4rem;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(-2%);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility 0s linear .5s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mobile-menu nav{display:flex;flex-direction:column;gap:.4rem;margin-top:2rem}
.mobile-menu nav a{font-family:var(--mincho);font-size:clamp(3.2rem,9vw,4.4rem);font-weight:600;display:flex;align-items:baseline;gap:1.4rem;padding-block:.6rem;border-bottom:1px solid rgba(247,242,230,.12)}
.mobile-menu nav a .nav-no{font-family:var(--mono);font-size:1.4rem;color:var(--gold);opacity:1}
.mobile-menu nav a i{font-family:var(--mono);font-style:normal;font-size:1.3rem;opacity:.5;margin-left:auto;letter-spacing:.1em}
.mobile-menu-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:1.3rem;opacity:.7;letter-spacing:.06em}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;position:relative;display:flex;align-items:flex-end;
  padding:var(--header-h) var(--grid-margin) clamp(4rem,6vh,7rem);
  color:var(--cream);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:#efe7d4;
  background-image:url("../images/hero.jpg");
  background-size:cover;background-position:center;
  transform:scale(1.06);
  transition:transform 2.4s var(--ease-out),opacity 1.6s ease;
  opacity:0;
}
body.is-loaded .hero-bg{opacity:1;transform:scale(1)}
/* airy savor-style hero: light wash, gentle bottom lift for legibility */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,18,12,.5) 0%,rgba(24,18,12,.12) 26%,rgba(24,18,12,.28) 58%,rgba(24,18,12,.8) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--grid-max);margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(2rem,5vw,6rem)}
.hero-display{flex:1 1 auto;min-width:0}
.hero-eyebrow{display:block;font-family:var(--mono);font-size:clamp(1.2rem,1.4vw,1.4rem);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,230,.88);margin-bottom:clamp(1.6rem,2.2vw,2.6rem)}
.hero-title{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(5.4rem, calc(5.4rem + (15-5.4)*(100vw - 37.5rem)/106.5), 15rem);
  line-height:1.04;letter-spacing:-.035em;
}
.hero-title .line{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.hero-title .line>span{display:block}
.hero-aside{flex:0 0 auto;width:min(34rem,38vw);display:flex;flex-direction:column;align-items:flex-start;gap:2.4rem;padding-bottom:.8rem}
.hero-sub{
  font-family:var(--jp);font-weight:400;
  font-size:clamp(1.5rem, calc(1.5rem + .3*(100vw - 37.5rem)/106.5), 1.7rem);
  line-height:1.95;margin:0;color:rgba(247,242,230,.92);text-shadow:0 1px 12px rgba(24,18,12,.5);
}

/* =========================================================
   STORY (savor scroll-story: sticky full-bleed + poetic fragments + drawn lines)
   ========================================================= */
.story{position:relative;background:var(--ink);height:360vh}
.story-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.story-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:brightness(.5) saturate(.92)}
.story-bg--1{background:#2a241c;opacity:1}
.story-bg--2{background:linear-gradient(135deg,#3a3026,#241f18)}
.story-bg--3{background:linear-gradient(135deg,#221d17,#2c2620)}
.story-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.78),rgba(20,15,10,.66) 45%,rgba(20,15,10,.82))}
.story-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 1px 5px rgba(20,15,10,.7))}
.sline{fill:none;stroke:var(--gold);stroke-width:2px;vector-effect:non-scaling-stroke;opacity:.95}
.story-eyebrow{position:absolute;top:calc(var(--header-h) + 2.4rem);left:var(--grid-margin);z-index:4;font-family:var(--mono);font-size:1.3rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.story-frag{position:absolute;z-index:4;margin:0;max-width:33vw;color:var(--cream);font-family:var(--mincho);font-weight:500;font-size:clamp(2.4rem,3.6vw,4.6rem);line-height:1.16;opacity:0;will-change:transform,opacity}
.sf1{top:17vh;left:6vw}
.sf2{top:27vh;right:6vw;text-align:right}
.sf3{top:43vh;left:6vw}
.sf4{top:55vh;right:6vw;text-align:right}
.sf5{top:64vh;left:50%;transform:translateX(-50%);text-align:center;max-width:90vw;font-weight:600;font-size:clamp(3.2rem,6.4vw,7.6rem);color:var(--gold);line-height:1.1}

/* =========================================================
   INTRO (legacy — kept for fallback styling)
   ========================================================= */
.intro{padding:clamp(9rem,16vh,18rem) 0;background:var(--cream)}
.intro .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap) var(--grid-gap);align-items:start}
.intro .eyebrow{grid-column:1/-1;margin-bottom:3rem}
.intro-lead{
  grid-column:1/8;
  font-family:var(--mincho);font-weight:500;
  font-size:clamp(3rem, calc(3rem + (6.2-3)*(100vw - 37.5rem)/106.5), 6.2rem);
  line-height:1.18;letter-spacing:-.02em;
}
.intro-lead .line{display:block;overflow:hidden}
.intro-lead .line>span{display:block}
.intro-body{grid-column:8/13;align-self:end;font-size:1.7rem;line-height:2.1;color:var(--ink-soft)}
.intro-body p{margin:0 0 1.6rem}
.intro-body em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.intro-quote{font-family:var(--mincho);font-weight:600;font-size:clamp(2rem,3vw,2.8rem);color:var(--ink);line-height:1.5;margin:2.8rem 0 !important}

/* =========================================================
   PILLARS
   ========================================================= */
/* marquee band */
.marquee{overflow:hidden;background:var(--ink);color:var(--cream);padding:1.8rem 0;border-block:1px solid rgba(236,226,205,.12)}
.marquee-track{display:flex;align-items:center;gap:3.2rem;width:max-content;animation:marquee 32s linear infinite}
.marquee-track span{font-family:var(--mincho);font-weight:500;font-size:clamp(2.2rem,3.4vw,3.4rem);letter-spacing:.02em;white-space:nowrap}
.marquee-track .m-amp{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:300}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.pillars{padding:clamp(6rem,10vh,12rem) 0 clamp(9rem,14vh,16rem);background:var(--cream);overflow:hidden}
.pillars-head{width:min(100% - var(--grid-margin)*2,var(--grid-max));margin:0 auto clamp(4rem,7vh,7rem)}
.pillars-head .eyebrow{margin-bottom:2rem}
.pillars-viewport{width:100%}
.pillars-track{width:min(100% - var(--grid-margin)*2,var(--grid-max));margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.pillar{display:flex;flex-direction:column;position:relative;padding-top:2.4rem;border-top:1.5px solid rgba(44,38,32,.18);transition:border-color .4s}
.pillar-no{font-family:var(--mono);font-size:1.3rem;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:1.8rem}
.pillar-media{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--sand);background-size:cover;background-position:center;position:relative;transition:transform .8s var(--ease-out)}
.pillar-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(34,29,23,.25));opacity:0;transition:opacity .5s}
.pillar:hover .pillar-media{transform:scale(.985)}
.pillar:hover .pillar-media::after{opacity:1}
.pillar:hover{border-color:var(--red)}
.pillar-text{padding-top:2.4rem}
.pillar-text h3{font-family:var(--mincho);font-weight:700;font-size:clamp(2.8rem,4vw,3.8rem);margin-bottom:.6rem}
.pillar-en{font-family:var(--mono);font-size:1.2rem;letter-spacing:.1em;color:var(--ink-soft);display:block;margin-bottom:1.4rem}
.pillar-text p{font-size:1.5rem;line-height:1.9;color:var(--ink-soft);margin:0 0 1.8rem}
.pillar-link{font-family:var(--sans);font-size:1.4rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.8rem}
.pillar-link i{font-style:normal;transition:transform .4s var(--ease-out)}
.pillar:hover .pillar-link i{transform:translateX(.6rem)}
/* horizontal pinned scroll (enabled by JS on desktop) */
.pillars-track.is-horizontal{display:flex;flex-wrap:nowrap;width:max-content;max-width:none;margin-inline:0;gap:clamp(2.4rem,3vw,4rem);padding-inline:var(--grid-margin);will-change:transform}
.pillars-track.is-horizontal .pillar{flex:0 0 clamp(40rem,40vw,54rem)}
.pillars-track.is-horizontal .pillar-media{aspect-ratio:16/11}
.pillars.is-pinned .pillars-head{position:relative}

/* =========================================================
   BLOCK (dark sections: wash / work)
   ========================================================= */
.block{padding:clamp(8rem,14vh,16rem) 0}
.block--wash,.block--work{background:var(--ink);color:var(--cream-3)}
.block-head{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem var(--grid-gap);margin-bottom:clamp(4rem,7vh,7rem)}
.block-head .chap{grid-column:1/-1}
.block-head .eyebrow{grid-column:1/-1;margin-top:.6rem}
.block-head .sec-title{grid-column:1/8;margin-top:1.4rem}
.block-lead{grid-column:8/13;align-self:end;font-size:1.7rem;line-height:2.05;color:rgba(236,226,205,.82)}
.block--wash .block-lead,.block--work .block-lead{color:rgba(236,226,205,.8)}

/* features */
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);margin-bottom:clamp(5rem,9vh,9rem)}
.feature{padding-top:2rem;border-top:1.5px solid rgba(236,226,205,.22)}
.feature-no{font-family:var(--mono);font-size:1.2rem;color:var(--gold);letter-spacing:.1em}
.feature h4{font-family:var(--mincho);font-weight:600;font-size:clamp(1.9rem,2.4vw,2.3rem);margin:1.6rem 0 1rem}
.feature p{font-size:1.45rem;line-height:1.85;color:rgba(236,226,205,.72);margin:0}

/* lineup */
.lineup{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem var(--grid-gap);margin-bottom:clamp(5rem,9vh,9rem);align-items:start}
.lineup-head{grid-column:1/5}
.lineup-head h3{font-family:var(--mincho);font-weight:600;font-size:clamp(2.2rem,3vw,3rem);margin-bottom:1.6rem}
.lineup-head p{font-size:1.5rem;color:rgba(236,226,205,.72);line-height:1.9}
.lineup-list{grid-column:6/13}
.lineup-list li{display:flex;align-items:baseline;gap:1.6rem;padding:1.8rem 0;border-bottom:1px solid rgba(236,226,205,.18);font-size:clamp(1.7rem,2.2vw,2rem);font-family:var(--mincho)}
.lineup-list .li-mark{color:var(--gold)}
.lineup-list li i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:1.3rem;letter-spacing:.08em;color:rgba(236,226,205,.6)}
.lineup-note{grid-column:6/13;font-family:var(--mincho);font-style:italic;font-size:1.6rem;color:var(--gold);margin:2rem 0 0}

/* price */
.price{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem var(--grid-gap);align-items:start}
.price-head{grid-column:1/5}
.price-head .eyebrow{margin-bottom:1.4rem}
.price-head h3{font-family:var(--mincho);font-weight:700;font-size:clamp(3rem,5vw,5rem)}
.price-table{grid-column:6/13}
.price-table th{text-align:left;font-weight:400;font-family:var(--jp);font-size:1.6rem;padding:2rem 0;border-bottom:1px solid rgba(236,226,205,.18);color:rgba(236,226,205,.9)}
.price-table td{text-align:right;padding:2rem 0;border-bottom:1px solid rgba(236,226,205,.18);font-family:var(--sans);white-space:nowrap}
.price-table td b{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,3.4vw,3.4rem);color:var(--gold);letter-spacing:0}
.price-table td span{font-family:var(--mono);font-size:1.2rem;color:rgba(236,226,205,.6);margin-left:.6rem}
.price-note{grid-column:6/13;font-size:1.4rem;color:rgba(236,226,205,.62);margin:2rem 0 0;line-height:1.8}

/* =========================================================
   CAFE (light, food cinema)
   ========================================================= */
.block--cafe{background:var(--cream-2);color:var(--ink)}
.cafe-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:62vh}
.cafe-hero-media{background:#2a241c;background-size:cover;background-position:center}
.cafe-hero-text{padding:clamp(5rem,9vh,9rem) var(--grid-margin);display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.cafe-hero-text .chap{color:var(--red)}
.cafe-hero-text .eyebrow{color:var(--ink-soft)}
.cafe-hero-text .sec-title{margin:1rem 0 1.6rem}
.cafe-hero-text .block-lead{color:var(--ink-soft);font-size:1.7rem;max-width:30em}
.cafe-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);padding-block:clamp(5rem,9vh,9rem);align-items:start}
.cafe-shot{margin:0;position:relative;border-radius:6px;overflow:hidden;background:var(--sand);background-size:cover;background-position:center}
.cafe-shot--tall{grid-column:1;aspect-ratio:4/5}
.cafe-shot:not(.cafe-shot--tall){grid-column:2;aspect-ratio:4/5;margin-top:clamp(3rem,7vw,7rem)}
.cafe-shot figcaption{position:absolute;left:1.6rem;bottom:1.6rem;font-family:var(--mono);font-size:1.2rem;letter-spacing:.08em;color:#fff;background:rgba(34,29,23,.55);padding:.5rem 1rem;border-radius:3px;backdrop-filter:blur(4px)}
.cafe-menu{grid-column:1/3;margin-top:clamp(4rem,7vh,7rem);padding-top:clamp(3rem,5vh,4.5rem);border-top:1px solid rgba(44,38,32,.18)}
.cafe-menu h3{font-family:var(--mincho);font-weight:700;font-size:clamp(2.4rem,3vw,3rem);margin-bottom:clamp(2.4rem,4vh,3.6rem)}
.cafe-menu ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.cafe-menu ul li{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:0;border:none;border-left:1px solid rgba(44,38,32,.16);padding-left:2rem}
.cafe-menu ul li span{font-size:1.6rem;color:var(--ink-soft)}
.cafe-menu ul li b{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,3.4vw,3.6rem);color:var(--red);white-space:nowrap;letter-spacing:0}
.cafe-note{font-size:1.4rem;color:var(--ink-soft);margin-top:2.6rem;line-height:1.9}

/* =========================================================
   WORK (dark)
   ========================================================= */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap);align-items:stretch}
.work-media{grid-column:1/7;border-radius:6px;overflow:hidden;background:#2a241c;background-size:cover;background-position:center;min-height:44rem}
.work-info{grid-column:8/13;align-self:center}
.work-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-bottom:3.6rem}
.work-specs div{padding:1.8rem;border:1.5px solid rgba(236,226,205,.2);border-radius:5px;font-size:1.5rem;line-height:1.5}
.work-specs div span{display:block;font-family:var(--mono);font-size:1.2rem;letter-spacing:.1em;color:var(--gold);margin-bottom:.8rem}
.work-info h3{font-family:var(--mincho);font-weight:600;font-size:clamp(2rem,2.6vw,2.6rem);margin-bottom:1.8rem}
.rules li{position:relative;padding:1.4rem 0 1.4rem 2.6rem;border-bottom:1px solid rgba(236,226,205,.16);font-size:1.5rem;line-height:1.7;color:rgba(236,226,205,.82)}
.rules li::before{content:"—";position:absolute;left:0;color:var(--gold)}

/* =========================================================
   SCENES (banner fullbleed + list)
   ========================================================= */
.scenes{background:var(--cream)}
.scenes-banner{position:relative;min-height:64vh;display:flex;align-items:center;overflow:hidden;color:var(--cream)}
.scenes-banner-bg{position:absolute;inset:0;background:#221d17;background-size:cover;background-position:center;transform:scale(1.05)}
.scenes-banner-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,29,23,.7),rgba(34,29,23,.25))}
.scenes-banner-text{position:relative;z-index:2;padding-inline:var(--grid-margin);width:min(100%,var(--grid-max));margin-inline:auto}
.scenes-banner-text .eyebrow{margin-bottom:1.8rem}
.scenes-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);padding-block:clamp(5rem,9vh,9rem)}
.scene{padding-top:2rem;border-top:1.5px solid rgba(44,38,32,.18)}
.scene-no{font-family:var(--serif);font-style:italic;font-size:3.2rem;color:var(--red);display:block;margin-bottom:1.4rem}
.scene p{font-size:1.6rem;line-height:1.8;margin:0}
.rec{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem var(--grid-gap);padding-bottom:clamp(7rem,12vh,13rem)}
.rec .eyebrow{grid-column:1/-1;margin-bottom:1rem}
.rec-items{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.rec-item{background:var(--cream-2);border-radius:6px;padding:3rem 2.6rem}
.rec-item h4{font-family:var(--mincho);font-weight:600;font-size:2rem;margin-bottom:1.2rem}
.rec-item p{font-size:1.5rem;line-height:1.85;color:var(--ink-soft);margin:0}

/* =========================================================
   TRUST (dark, two col)
   ========================================================= */
.trust{background:var(--ink);color:var(--cream-3);display:grid;grid-template-columns:1fr 1fr;gap:0}
.trust-col{padding:clamp(7rem,12vh,13rem) var(--grid-margin)}
.trust-col:first-child{border-right:1px solid rgba(236,226,205,.14)}
.trust-col .eyebrow{margin-bottom:1.8rem}
.trust-col .sec-title{margin-bottom:2rem}
.trust-col .block-lead{color:rgba(236,226,205,.78);margin-bottom:3rem;font-size:1.7rem}
.trust-list li{position:relative;padding:1.6rem 0 1.6rem 3rem;border-bottom:1px solid rgba(236,226,205,.16);font-size:1.6rem}
.trust-list li::before{content:"";position:absolute;left:0;top:2.3rem;width:1.4rem;height:1px;background:var(--gold)}
.trust-note{font-family:var(--mincho);font-style:italic;color:var(--gold);font-size:1.7rem;margin-top:2.4rem;line-height:1.7}

/* =========================================================
   APP
   ========================================================= */
.app{background:#221d17;color:var(--cream-3);padding:clamp(8rem,14vh,16rem) 0}
.app-inner{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap);align-items:center}
.app-text{grid-column:1/7}
.app-text .eyebrow{margin-bottom:1.8rem}
.app-text .sec-title{margin-bottom:2rem}
.app-text .block-lead{color:rgba(236,226,205,.78);margin-bottom:3rem}
.app-list li{display:flex;align-items:baseline;gap:1.6rem;padding:1.8rem 0;border-bottom:1px solid rgba(236,226,205,.16);font-size:clamp(1.6rem,2vw,1.9rem)}
.app-no{font-family:var(--mono);font-size:1.3rem;color:var(--gold);flex:0 0 auto}
.app-visual{grid-column:8/13;aspect-ratio:3/2;border-radius:8px;background:#2a241c;background-size:cover;background-position:center}

/* =========================================================
   ACCESS
   ========================================================= */
.access{background:var(--cream);padding:clamp(8rem,14vh,16rem) 0}
.access-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap);align-items:start}
.access-info{grid-column:1/6}
.access-info .eyebrow{margin-bottom:1.6rem}
.access-info .sec-title{margin-bottom:3rem}
.access-dl{margin:0}
.access-dl>div{display:grid;grid-template-columns:9rem 1fr;gap:1.6rem;padding:1.8rem 0;border-top:1px solid rgba(44,38,32,.16)}
.access-dl dt{font-family:var(--mono);font-size:1.3rem;letter-spacing:.06em;color:var(--ink-soft);padding-top:.3rem}
.access-dl dd{margin:0;font-size:1.6rem;line-height:1.7}
.access-dl dd b{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--red)}
.access-dl a{border-bottom:1.5px solid var(--red);padding-bottom:1px}
.access-note{margin-top:2.4rem;font-size:1.5rem;color:var(--ink-soft);line-height:1.9}
.access-map{grid-column:6/13;align-self:stretch;min-height:46rem;border-radius:8px;background:var(--sand);position:relative;overflow:hidden}
.access-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(.96)}

/* =========================================================
   INFO + CTA
   ========================================================= */
.info{background:var(--ink);color:var(--cream-3);padding:clamp(8rem,14vh,16rem) 0}
.info-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(3rem,5vw,6rem)}
.info-table-wrap{grid-column:1/8}
.info-table-wrap .eyebrow{margin-bottom:1.6rem}
.info-table-wrap .sec-title{margin-bottom:3rem}
.info-table th{text-align:left;vertical-align:top;width:11rem;font-weight:400;font-family:var(--mono);font-size:1.3rem;letter-spacing:.04em;color:var(--gold);padding:1.8rem 2rem 1.8rem 0;border-bottom:1px solid rgba(236,226,205,.16)}
.info-table td{padding:1.8rem 0;border-bottom:1px solid rgba(236,226,205,.16);font-size:1.55rem;line-height:1.7}
.info-guide{margin-top:2.6rem;display:flex;flex-direction:column;gap:1rem}
.info-guide li{position:relative;padding-left:2rem;font-size:1.4rem;color:rgba(236,226,205,.7)}
.info-guide li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.cta-card{grid-column:9/13;align-self:start;background:linear-gradient(160deg,#3a3026,#2c2620);border:1px solid rgba(226,160,47,.2);border-radius:10px;padding:clamp(3rem,4vw,4.4rem);display:flex;flex-direction:column;gap:2rem;position:sticky;top:9rem}
.cta-amp{font-family:var(--serif);font-style:italic;font-size:6rem;color:var(--gold);line-height:.8}
.cta-card h3{font-family:var(--mincho);font-weight:600;font-size:clamp(2.4rem,3vw,3rem);line-height:1.3}
.cta-card p{font-size:1.45rem;color:rgba(236,226,205,.78);line-height:1.9;margin:0}
.cta-card .btn{width:100%;justify-content:center}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#18140f;color:var(--cream-3);padding:clamp(6rem,10vh,10rem) var(--grid-margin) 4rem;overflow:hidden}
.footer-wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(8rem,25vw,36rem);line-height:.82;letter-spacing:-.03em;color:var(--cream-3);text-align:center;margin:clamp(5rem,9vh,10rem) 0 clamp(3.5rem,6vh,6rem);white-space:nowrap}
.footer-wordmark .fw-amp{font-style:italic;color:var(--gold)}
.footer-bottom{padding-top:2.6rem;border-top:1px solid rgba(236,226,205,.14)}
.footer-top{max-width:var(--grid-max);margin:0 auto clamp(4rem,7vh,7rem);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;border-bottom:1px solid rgba(236,226,205,.14);padding-bottom:clamp(4rem,6vh,6rem)}
.logo--footer .logo-amp{font-size:5rem}
.logo--footer .logo-word{font-size:3.4rem}
.footer-tagline{font-family:var(--mincho);font-size:1.6rem;line-height:1.7;text-align:right;color:rgba(236,226,205,.7);margin:0}
.footer-cols{max-width:var(--grid-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.footer-nav{display:flex;flex-direction:column;gap:1.2rem}
.footer-nav-h{font-family:var(--mono);font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.footer-nav a{font-size:1.5rem;color:rgba(236,226,205,.82);transition:color .3s}
.footer-nav a:hover{color:var(--gold)}
.footer-bottom{max-width:var(--grid-max);margin:clamp(4rem,7vh,7rem) auto 0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:1.2rem;letter-spacing:.06em;color:rgba(236,226,205,.5);flex-wrap:wrap;gap:1rem}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{position:fixed;left:0;bottom:0;width:100%;z-index:90;display:none;gap:1px;background:rgba(44,38,32,.15);transform:translateY(110%);transition:transform .5s var(--ease-out)}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1.6rem;font-family:var(--sans);font-size:1.5rem;font-weight:500}
.sticky-cta-btn i{font-style:normal;font-size:1.6rem}
.sticky-cta-btn--map{background:var(--cream);color:var(--ink)}
.sticky-cta-btn--app{background:var(--ink);color:var(--gold)}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(2.4rem);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-lines] .line>span{transform:translateY(110%);opacity:0;transition:transform 1s var(--ease-out),opacity 1s var(--ease-out)}
[data-reveal-lines].is-in .line>span{transform:none;opacity:1}
[data-reveal-lines].is-in .line:nth-child(2)>span{transition-delay:.12s}
[data-reveal-lines].is-in .line:nth-child(3)>span{transition-delay:.24s}
/* when GSAP controls reveals: resting state is VISIBLE, gsap.from() supplies the hidden start */
.js-anim [data-reveal],
.js-anim [data-reveal-lines] .line>span{opacity:1;transform:none;transition:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nav{gap:2rem}
  .nav a .nav-no{display:none}
  .intro-lead{grid-column:1/9}
  .intro-body{grid-column:1/13;margin-top:3rem}
  .block-head .sec-title{grid-column:1/9}
  .block-lead{grid-column:1/13;margin-top:1.4rem}
  .lineup-head{grid-column:1/13}
  .lineup-list,.lineup-note{grid-column:1/13}
  .price-head{grid-column:1/13;margin-bottom:1rem}
  .price-table,.price-note{grid-column:1/13}
  .work-media{grid-column:1/13;min-height:34rem}
  .work-info{grid-column:1/13;margin-top:3rem}
  .app-text{grid-column:1/8}
  .app-visual{grid-column:8/13}
  .access-info{grid-column:1/6}
  .access-map{grid-column:6/13;min-height:38rem}
  .info-table-wrap{grid-column:1/8}
  .cta-card{grid-column:1/13;position:static;margin-top:1rem}
}

@media (max-width:1024px){
  .hero-aside{width:min(30rem,42vw)}
}
@media (max-width:768px){
  :root{--header-h:6.6rem}
  .nav{display:none}
  .burger{display:flex}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:3.2rem}
  .hero-aside{width:100%;max-width:34rem}
  .hero-title{font-size:clamp(4.2rem,12vw,6.4rem);letter-spacing:-.03em;max-width:100%}
  .hero-eyebrow{font-size:1.05rem;letter-spacing:.08em}
  .mobile-menu nav a{font-size:clamp(2.8rem,7.5vw,3.8rem)}
  /* story: stack fragments on one line each, hide weaving lines on small screens */
  .story{height:300vh}
  .story-lines{display:none}
  .story-frag{max-width:90vw;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1.3}
  .story-frag br{display:none}
  .sf1{top:17vh;left:8vw;right:auto;text-align:left}
  .sf2{top:30vh;left:8vw;right:auto;text-align:left}
  .sf3{top:43vh;left:8vw;right:auto;text-align:left}
  .sf4{top:56vh;left:8vw;right:auto;text-align:left}
  .sf5{top:69vh;left:8vw;transform:none;text-align:left}
  .work-specs{grid-template-columns:1fr;gap:1.2rem}
  .feature-row{grid-template-columns:repeat(2,1fr);gap:3rem var(--grid-gap)}
  .pillars-track{grid-template-columns:1fr;gap:5rem}
  .pillar-media{aspect-ratio:16/10}
  .cafe-hero{grid-template-columns:1fr}
  .cafe-hero-media{min-height:48vh}
  .cafe-grid{grid-template-columns:1fr 1fr}
  .cafe-shot--tall{grid-column:1/2}
  .cafe-shot:not(.cafe-shot--tall){grid-column:2/3}
  .cafe-menu{grid-column:1/3;margin-top:2rem;padding-left:0}
  .scenes-list{grid-template-columns:1fr 1fr;gap:3rem var(--grid-gap)}
  .rec-items{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust-col:first-child{border-right:none;border-bottom:1px solid rgba(236,226,205,.14)}
  .app-inner{grid-template-columns:1fr}
  .app-text{grid-column:1/2}
  .app-visual{grid-column:1/2;margin-top:3rem;width:100%}
  .access-grid{grid-template-columns:1fr}
  .access-info,.access-map{grid-column:1/2}
  .access-map{margin-top:3rem;min-height:30rem}
  .info-grid{grid-template-columns:1fr}
  .info-table-wrap,.cta-card{grid-column:1/2}
  .lineup-list li i{margin-left:auto}
  .footer-cols{grid-template-columns:1fr 1fr;gap:3rem var(--grid-gap)}
  .footer-tagline{text-align:left}
  .sticky-cta{display:flex}
  body{padding-bottom:0}
}

@media (max-width:560px){
  .price-table th{font-size:1.45rem}
  .lineup-list li{flex-wrap:wrap;gap:.6rem 1.2rem}
  .lineup-list li i{margin-left:0;flex-basis:100%}
  .cafe-grid{grid-template-columns:1fr}
  .cafe-shot--tall,.cafe-shot:not(.cafe-shot--tall){grid-column:1/2}
  .cafe-shot:not(.cafe-shot--tall){margin-top:0}
  .cafe-menu ul{grid-template-columns:1fr;gap:0}
  .cafe-menu ul li{border-left:none;border-top:1px solid rgba(44,38,32,.16);padding-left:0;padding-top:1.6rem;padding-bottom:1.6rem;flex-direction:row;justify-content:space-between;align-items:baseline}
  .scenes-list{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .hero-meta{display:none}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .hero-bg{transform:none}
  [data-reveal],[data-reveal-lines] .line>span{opacity:1;transform:none}
}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* =========================================================
   IMAGES — wire generated photos into slots
   ========================================================= */
[data-img="story-1"]{background-image:url("../images/story-1.jpg")}
[data-img="story-2"]{background-image:url("../images/story-2.jpg")}
[data-img="story-3"]{background-image:url("../images/story-3.jpg")}
[data-img="pillar-wash"]{background-image:url("../images/pillar-wash.jpg")}
[data-img="pillar-relax"]{background-image:url("../images/pillar-relax.jpg")}
[data-img="pillar-work"]{background-image:url("../images/pillar-work.jpg")}
[data-img="cafe-coffee"]{background-image:url("../images/cafe-coffee.jpg")}
[data-img="cafe-sweets"]{background-image:url("../images/cafe-sweets.jpg")}
[data-img="cafe-space"]{background-image:url("../images/cafe-space.jpg")}
[data-img="cowork"]{background-image:url("../images/cowork.jpg")}
[data-img="scenes-bg"]{background-image:url("../images/scenes-bg.jpg")}
[data-img="app"]{background-image:url("../images/app.jpg")}
@media (max-width:768px){ .hero-bg{background-image:url("../images/hero-mobile.jpg")} }