/* =========================================================
   Gui's Burger — Humans of Wagyu
   Identity: "Ember" — dark, candlelit, quiet luxury
   ========================================================= */

:root{
  /* Ember palette — deep navy base */
  --char:    #121F2E;   /* primary dark — deep muted navy */
  --char-2:  #18283A;   /* raised navy panel */
  --char-3:  #0C151F;   /* deepest navy — nav, scrims */
  --gold:    #C2A46B;   /* accent — used sparingly */
  --gold-dim:#9C8350;
  --cream:   #E6DDDA;   /* light text / calm sections */
  --cream-2: #EFE9E6;
  --navy:    #121F2E;   /* anchor */

  /* type */
  --display: "Myriad Pro Condensed", "Myriad Pro", "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  --body:    "Arimo", "Helvetica Neue", Arial, sans-serif;
  --quote:   "Cormorant Garamond", Georgia, serif;
  --jp:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --slow: 1.1s;
  --med:  .7s;

  /* layout */
  --rail: 98px;          /* left trace rail width */
  --pad:  clamp(22px, 6vw, 120px);
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--char);
  color:var(--cream);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--char-3); }

/* ---------- focus states (keyboard accessible) ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:2px;
}

/* =========================================================
   Film grain + heat-bloom veil
   ========================================================= */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sear-veil{
  position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0;
  background:radial-gradient(120% 80% at 50% 60%, rgba(194,120,40,.22), rgba(120,40,8,.10) 40%, transparent 72%);
  transition:opacity .9s var(--ease);
}
.sear-veil.is-blooming{ opacity:1; }

/* =========================================================
   The Trace — fixed left rail with gold hoofprints
   ========================================================= */
.trace{
  position:fixed; top:0; left:0; width:var(--rail); height:100vh; z-index:40;
  pointer-events:none;
}
.trace-line{
  position:absolute; left:50%; top:8vh; bottom:8vh; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(var(--gold-dim), transparent 6%, transparent 94%, var(--gold-dim));
  opacity:.18;
}
.trace-prints{ position:absolute; inset:0; }
.print{
  position:absolute; left:50%; width:40px; height:60px;
  margin-left:-20px; color:var(--gold);
  opacity:.12; transform:translateY(8px) scale(.82);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.print svg{ width:100%; height:100%; fill:currentColor; display:block; }
.print.is-left{  margin-left:-34px; rotate:-7deg; }
.print.is-right{ margin-left:-6px;  rotate:7deg; }
.print.walked{ opacity:.72; transform:translateY(0) scale(1); }
.print.is-current{ opacity:1; }
.print.is-current svg{ filter:drop-shadow(0 0 9px rgba(194,164,107,.55)); }
.print.press{ opacity:1; transform:translateY(0) scale(1.28); }
.print.press svg{ filter:drop-shadow(0 0 14px rgba(194,164,107,.8)); }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,52px); padding-left:calc(var(--rail) + 8px);
  transition:background .5s var(--ease), padding .4s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--char-3) 82%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  padding-top:13px; padding-bottom:13px;
  border-bottom:1px solid rgba(194,164,107,.12);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:30px; height:30px; object-fit:contain; opacity:.95; }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name-en{
  font-family:var(--display); font-weight:400; font-size:18px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream);
}
.brand-name-sub{
  font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:.78; margin-top:3px; font-weight:500;
}
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav-links > a{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream); opacity:.72; transition:opacity .3s var(--ease);
  position:relative; padding:4px 0;
}
.nav-links > a:hover{ opacity:1; }
.nav-links > a::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav-links > a:hover::after{ width:100%; }
/* Preorder CTA in the header — solid gold pill that clearly reads as a button */
.nav-preorder{
  opacity:1 !important; padding:12px 30px !important; margin-left:clamp(6px,1.4vw,18px);
  font-family:var(--display); font-weight:500; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase;
  background:var(--gold); color:var(--char-3) !important;
  border-radius:2px; box-shadow:0 8px 24px -10px rgba(194,164,107,.7);
  transition:transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-preorder:hover{ background:var(--cream-2); color:var(--char-3) !important; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(194,164,107,.85); }
.nav-preorder::after{ display:none !important; }
.lang-toggle{
  display:flex; align-items:center; gap:6px; background:none; border:none;
  cursor:pointer; padding:6px 4px; font-family:var(--body);
  color:var(--cream);
}
.lang-opt{
  font-size:11px; letter-spacing:.18em; opacity:.42; transition:opacity .3s var(--ease);
}
.lang-opt[data-lang-opt="jp"]{ font-family:var(--jp); letter-spacing:.06em; }
.lang-opt.is-on{ opacity:1; color:var(--gold); }
.lang-sep{ opacity:.3; font-size:11px; }

/* =========================================================
   Shared section / type scale
   ========================================================= */
section{ position:relative; }
.section--dark{ background:var(--char); color:var(--cream); }
.section--char2{ background:var(--char-2); color:var(--cream); }
.section--cream{ background:var(--cream); color:var(--char); }

.eyebrow{
  font-size:clamp(10px,1.05vw,12.5px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin:0;
}
.kicker{
  font-family:var(--display); font-weight:300; font-size:13px;
  letter-spacing:.42em; text-transform:uppercase; margin:0 0 22px;
  opacity:.8; white-space:nowrap;
}
.kicker.gold{ color:var(--gold); opacity:1; }
.section-title{
  font-family:var(--display); font-weight:200; line-height:1.02;
  font-size:clamp(38px,6.2vw,86px); letter-spacing:-.01em; margin:0;
}
.section-title .gold{ color:var(--gold); }
.section-sub{
  max-width:34ch; font-size:clamp(16px,1.5vw,19px); opacity:.74;
  line-height:1.6; margin:22px 0 0;
}
.gold{ color:var(--gold); }

/* generic reveal */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal[data-delay="1"].in{ transition-delay:.10s; }
.reveal[data-delay="2"].in{ transition-delay:.20s; }
.reveal[data-delay="3"].in{ transition-delay:.30s; }
.reveal[data-delay="4"].in{ transition-delay:.40s; }

/* hidden-tab fallback: transitions are paused while the document is hidden,
   so motion.js reveals everything instantly — kill the (frozen) transitions
   and any decorative animation so the visible end-state applies at once. */
.reveal-static .reveal,
.reveal-static .reveal.in{ transition:none !important; animation:none !important; }

/* =========================================================
   Photo placeholder system (swap <figure> for <img>)
   ========================================================= */
.photo{
  position:relative; margin:0; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(194,164,107,.05) 0 12px, rgba(194,164,107,0) 12px 24px),
    linear-gradient(160deg, #221a12, #140f0a);
}
.section--cream .photo{
  background:
    repeating-linear-gradient(135deg, rgba(21,16,10,.05) 0 12px, rgba(21,16,10,0) 12px 24px),
    linear-gradient(160deg, #d8cdc7, #cabfb8);
}
.photo::after{
  content:attr(data-shot);
  position:absolute; inset:0; display:grid; place-items:center;
  padding:14% 12%; text-align:center;
  font-family:"SFMono-Regular", ui-monospace, "Menlo", monospace;
  font-size:11px; letter-spacing:.06em; line-height:1.7; text-transform:lowercase;
  color:rgba(230,221,218,.34);
}
.section--cream .photo::after{ color:rgba(21,16,10,.34); }
.photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.photo:has(img)::after{ display:none; }
.photo--full{ position:absolute; inset:0; }

/* =========================================================
   1. HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; overflow:hidden;
  padding:clamp(94px,13vh,150px) var(--pad) clamp(70px,9vh,120px);
  padding-left:calc(var(--rail) + var(--pad)*.5); }

/* big organic "plate" anchored off the right edge — the stage the shots float on */
.hero-plate{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; right:clamp(-200px,-8vw,-120px); translate:0 -50%;
  width:min(52vw, 680px); aspect-ratio:1/1.04;
  background:
    radial-gradient(120% 100% at 36% 30%, #F0EAE7 0%, #E4DAD5 58%, #D8CCC6 100%);
  border-radius:54% 46% 57% 43% / 49% 52% 48% 51%;
  box-shadow:0 80px 150px -60px rgba(0,0,0,.7), inset 0 2px 60px rgba(255,255,255,.25);
  opacity:.96;
}

/* headline — sits over the navy on the left, runs toward the imagery */
.hero-text{ position:relative; z-index:4; max-width:clamp(380px,46vw,560px);
  margin-top:clamp(28px,9vh,104px); }
.hero-title{
  font-family:var(--display); font-weight:200;
  font-size:clamp(54px,7.6vw,120px); line-height:.88; letter-spacing:-.02em;
  margin:20px 0 0; display:flex; flex-direction:column;
}
.hero-title > span{ display:block; }
.hero-title-b{ padding-left:.4em; }
.hero-title-c{ padding-left:.78em; }
.hero-title .gold{ font-weight:300; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* ---- floating product shots ---- */
.hero-float{ position:absolute; z-index:2; }
.hero-float .circ-drift{ width:100%; }
.hero-float .circ{ width:100%; aspect-ratio:1; }
.hero-float .circ img{ box-shadow:0 50px 100px -38px rgba(0,0,0,.78); }
.hero-float--main{ z-index:5; width:clamp(290px,34vw,480px);
  right:10%; top:51%; translate:0 -50%; }
.hero-float--main .circ{ aspect-ratio:1/1; }
.hero-float--main .circ img{ border-radius:52% 48% 51% 49% / 50% 52% 48% 50%; transform:rotate(-2deg); }
.hero-float--main .circ-blob{ left:-5%; top:4%; border-radius:51% 49% 50% 50% / 49% 51% 49% 51%; }

/* vertical edge label running up the trace rail */
.hero-vlabel{
  position:absolute; z-index:4; left:calc(var(--rail) - 6px); top:50%;
  margin:0; transform-origin:left center; rotate:-90deg; translate:0 -50%;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream); opacity:.5; white-space:nowrap; pointer-events:none;
}

/* editorial feature caption, lower-right — sits on the cream plate */
.hero-feature{
  position:absolute; z-index:5; right:clamp(28px,4vw,64px); left:auto;
  bottom:clamp(34px,7vh,66px);
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:500;
  font-size:clamp(16px,1.6vw,21px); letter-spacing:.01em; color:var(--char);
  transition:color .4s var(--ease), gap .4s var(--ease);
}
.hero-feature-go{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid rgba(31,28,26,.32); border-radius:50%;
  font-size:15px; transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.hero-feature:hover{ color:var(--char-3); gap:18px; }
.hero-feature:hover .hero-feature-go{ border-color:var(--char); background:var(--char); color:var(--cream); }
.scroll-hint{
  position:absolute; left:calc(var(--rail) + var(--pad)*.5); right:auto; bottom:clamp(22px,4vh,44px); z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.55;
}
.scroll-hint-line{ width:1px; height:54px; background:linear-gradient(var(--gold), transparent); }
@keyframes hintdrop{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(8px); opacity:1 } }
.scroll-hint-line{ animation:hintdrop 2.6s var(--ease) infinite; transform-origin:top; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px; font-family:var(--display); font-weight:400;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--char-3); }
.btn--gold:hover{ background:var(--cream-2); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(230,221,218,.4); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.section--cream .btn--ghost{ color:var(--char); border-color:rgba(21,16,10,.32); }
.section--cream .btn--ghost:hover{ color:var(--gold-dim); border-color:var(--gold-dim); }

/* =========================================================
   2. INTRO
   ========================================================= */
.intro{ padding:clamp(110px,17vh,200px) var(--pad); }
.intro-inner{ max-width:var(--maxw); margin:0 auto; padding-left:clamp(0px,3vw,40px); }
.intro .kicker{ color:var(--gold-dim); }
.intro-lead{
  font-family:var(--display); font-weight:200; line-height:1.12;
  font-size:clamp(30px,4.6vw,66px); letter-spacing:-.005em; margin:0; max-width:18ch;
  color:var(--char);
}
.intro-jp{
  font-family:var(--jp); font-weight:300; font-size:clamp(14px,1.5vw,18px);
  line-height:1.9; margin:30px 0 0; max-width:40ch; opacity:.6;
}

/* =========================================================
   3. THE THREE HUMANS
   ========================================================= */
.humans{ padding:clamp(100px,15vh,180px) var(--pad) clamp(60px,9vh,110px); }
.humans-head{ max-width:var(--maxw); margin:0 auto clamp(60px,9vh,120px); padding-left:clamp(0px,3vw,40px); }
.human-row{
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,90px);
  align-items:center; padding:clamp(50px,8vh,110px) clamp(0px,3vw,40px);
}
.human-row--reverse{ direction:rtl; }
.human-row--reverse > *{ direction:ltr; }
.human-photo{
  aspect-ratio:4/5; border-radius:2px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.human-text{ max-width:46ch; }
.human-index{
  font-family:var(--quote); font-style:italic; font-size:clamp(34px,4vw,56px);
  color:var(--gold); opacity:.5; margin:0 0 6px; line-height:1;
}
.human-name{
  font-family:var(--display); font-weight:200; font-size:clamp(32px,4.4vw,60px);
  letter-spacing:-.01em; margin:0; line-height:1;
}
.human-meta{ font-family:var(--jp); font-weight:300; font-size:14px; letter-spacing:.18em; color:var(--gold); opacity:.85; margin:14px 0 0; }
.human-body{ font-size:clamp(16px,1.5vw,19px); line-height:1.65; opacity:.8; margin:22px 0 0; }

.eartag, .marble-readout{
  display:flex; flex-direction:column; gap:6px; margin:30px 0 0;
  padding-top:24px; border-top:1px solid rgba(194,164,107,.2);
}
.eartag-label{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; opacity:.55; }
.eartag-num{
  font-family:var(--display); font-weight:300; font-size:clamp(30px,3.6vw,48px);
  letter-spacing:.06em; color:var(--gold); font-variant-numeric:tabular-nums;
}

/* marble reveal on the butcher photo */
.marble-photo::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--char); filter:url(#marble-turb);
  opacity:1; transition:opacity 1.6s var(--ease);
}
.marble-photo.rendered::before{ opacity:0; }

/* cheese drip on the producer photo */
.drip{
  position:absolute; z-index:3; top:0; left:34%; width:14px; height:0;
  background:linear-gradient(var(--gold), #d9b97a);
  border-radius:0 0 8px 8px; opacity:.92;
  transition:height 1.4s var(--ease) .2s;
}
.drip--2{ left:62%; width:9px; transition-delay:.45s; }
.drip-photo.dripping .drip{ height:46%; }
.drip-photo.dripping .drip--2{ height:30%; }

/* =========================================================
   4. BELIEF
   ========================================================= */
.belief{ min-height:96svh; display:grid; place-items:center; overflow:hidden; padding:var(--pad); }
.belief-scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(rgba(6,12,20,.82), rgba(6,12,20,.74)),
            radial-gradient(70% 70% at 50% 50%, rgba(6,12,20,.45), rgba(6,12,20,.8)); }
.belief-quote{ position:relative; z-index:3; margin:0; max-width:24ch; text-align:center; }
.belief-en{
  font-family:var(--display); font-style:normal; font-weight:700;
  font-size:clamp(30px,5.4vw,76px); line-height:1.06; letter-spacing:.005em; margin:0;
}
.belief-jp{
  display:block; font-family:var(--jp); font-style:normal; font-weight:300;
  font-size:clamp(13px,1.4vw,16px); letter-spacing:.16em; opacity:.6; margin-top:30px;
}

/* =========================================================
   5. UPDATES / LIMITED EDITIONS
   ========================================================= */
.updates{ padding:clamp(100px,15vh,180px) var(--pad); }
.updates-head{ max-width:var(--maxw); margin:0 auto clamp(46px,7vh,80px); display:flex; flex-direction:column; align-items:center; text-align:center; }
/* updates 'see more' button */
.updates-more{ display:flex; justify-content:center; margin-top:clamp(34px,5vh,56px); }
.cards{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); padding:0 clamp(0px,3vw,40px); }
/* two-up feature layout for the limited-edition stories */
.cards--feature{ max-width:1000px; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,40px); }
.card-photo{ margin:0; aspect-ratio:16/11; overflow:hidden; background:linear-gradient(160deg,#221a12,#140f0a); }
.card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .card-photo img{ transform:scale(1.05); }
.card--feature .card-tag{ margin:0 0 0; padding-bottom:0; border-bottom:none; }
.card--feature .card-go{ margin-top:auto; padding-top:22px; }
.card{
  display:flex; flex-direction:column; min-height:300px; background:var(--char);
  border:1px solid rgba(194,164,107,.16); border-radius:3px; overflow:hidden;
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
}
.card-body{ padding:32px 30px 30px; display:flex; flex-direction:column; height:100%; }
.card-tag{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 auto;
  padding-bottom:26px; border-bottom:1px solid rgba(194,164,107,.16); }
.card-title{ font-family:var(--display); font-weight:300; font-size:clamp(24px,2.6vw,34px); margin:26px 0 0; letter-spacing:.005em; }
.card-text{ font-size:14.5px; line-height:1.6; opacity:.72; margin:12px 0 0; }
.card-go{ font-size:18px; color:var(--gold); margin-top:22px; opacity:0; transform:translateX(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.card:hover{
  transform:translateY(-6px); border-color:rgba(194,164,107,.5);
  background:linear-gradient(180deg, rgba(194,120,40,.10), rgba(194,120,40,.015));
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
}
.card:hover .card-go{ opacity:1; transform:none; }

/* =========================================================
   6. RECOGNITION
   ========================================================= */
.recognition{ padding:clamp(100px,15vh,180px) var(--pad); }
.recognition-head{ max-width:var(--maxw); margin:0 auto clamp(46px,7vh,90px); padding-left:clamp(0px,3vw,40px); display:flex; flex-direction:column; }
.recog-list{ list-style:none; max-width:var(--maxw); margin:0 auto; padding:0 clamp(0px,3vw,40px); }
.recog-item{
  display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:clamp(20px,4vw,60px);
  align-items:baseline; padding:clamp(28px,4vh,48px) 0;
  border-top:1px solid rgba(194,164,107,.16);
}
.recog-item:last-child{ border-bottom:1px solid rgba(194,164,107,.16); }
.recog-rank{
  font-family:var(--display); font-weight:200; font-size:clamp(46px,7vw,104px);
  color:var(--gold); line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.recog-rank--top{ font-size:clamp(40px,6vw,88px); }
.recog-text{ display:flex; flex-direction:column; gap:8px; }
.recog-title{ font-family:var(--display); font-weight:300; font-size:clamp(22px,2.8vw,38px); letter-spacing:.01em; }
.recog-meta{ font-size:13.5px; letter-spacing:.04em; opacity:.62; }

/* =========================================================
   7. VISIT
   ========================================================= */
.visit-wrap{ padding:clamp(90px,13vh,160px) 0 clamp(70px,10vh,130px); }
.visit-head{ max-width:var(--maxw); margin:0 auto clamp(40px,6vh,72px);
  padding:0 var(--pad); padding-left:calc(var(--rail) + var(--pad)*.4);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.visit{ display:grid; grid-template-columns:1fr 1fr; align-items:center;
  max-width:1140px; margin:0 auto; gap:clamp(20px,4vw,70px); padding:0 var(--pad);
  border-top:1px solid rgba(194,164,107,.14); }
.visit:first-of-type{ border-top:none; }
.visit + .visit{ margin-top:clamp(40px,6vh,72px); padding-top:clamp(40px,6vh,72px); }
.visit-circ{ justify-self:center; width:clamp(240px,28vw,380px); }
.visit-circ .circ{ aspect-ratio:1/1; }
.visit-circ .circ img{ border-radius:55% 45% 50% 50% / 52% 50% 50% 48%; transform:rotate(-2deg); }
.visit-circ .circ-blob{ left:-5%; top:5%; border-radius:54% 46% 49% 51% / 51% 49% 51% 49%; }
.visit--flip .visit-circ{ order:2; }
.visit--flip .visit-circ .circ img{ transform:rotate(2deg); }
.visit-info{ padding:clamp(20px,3vh,40px) 0;
  display:flex; flex-direction:column; justify-content:center; }
.visit-eyebrow{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0; }
.visit-name{ font-family:var(--display); font-weight:200;
  font-size:clamp(40px,5.4vw,76px); line-height:1; letter-spacing:-.01em; margin:14px 0 0; }
.visit-collab{ font-size:clamp(15px,1.4vw,18px); line-height:1.6; opacity:.8; margin:22px 0 0; max-width:42ch; }
.visit-details{ margin:32px 0 0; }
.visit-row{ display:grid; grid-template-columns:120px 1fr; gap:18px; padding:20px 0; border-top:1px solid rgba(194,164,107,.16); }
.visit-row dt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; padding-top:4px; }
.visit-row dd{ margin:0; font-size:16px; line-height:1.5; }
.visit-jp{ display:block; font-family:var(--jp); font-size:13px; opacity:.55; margin-top:5px; letter-spacing:.04em; }
.visit-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:42px; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.footer{ padding:clamp(70px,10vh,120px) var(--pad) 40px; padding-left:calc(var(--rail) + var(--pad)*.4);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.footer-main{
  flex:1; max-width:var(--maxw); width:100%; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px);
  align-items:center;
}
.footer-left{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(28px,5vh,52px); }

/* animated footprint logo */
.footer-logo-wrap{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-logo{
  width:clamp(96px,12vw,160px); height:auto; object-fit:contain; opacity:0;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
@keyframes stampIn{
  0%{ opacity:0; transform:translateY(-22px) scale(1.18); filter:blur(7px); }
  55%{ opacity:1; filter:blur(0); }
  72%{ transform:translateY(0) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes footFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.footer-logo-wrap.in .footer-logo{
  animation:stampIn 1.15s var(--ease) forwards, footFloat 7s ease-in-out 1.3s infinite;
}
.footer-wordmark{
  font-family:var(--display); font-weight:400; font-size:clamp(22px,2.6vw,32px);
  letter-spacing:.2em; text-transform:uppercase; margin:26px 0 0; color:var(--cream); white-space:nowrap;
}
.footer-wordsub{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); opacity:.82; margin:9px 0 0; }
html[data-lang="jp"] .footer-wordsub{ font-family:var(--jp); letter-spacing:.14em; }
.footer-line{
  font-family:var(--display); font-weight:200; line-height:1.06;
  font-size:clamp(24px,2.8vw,40px); letter-spacing:-.005em; margin:0; max-width:18ch;
}

/* big nav links (right half) */
.footer-right{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(6px,1.3vh,14px); }
.footer-biglink{
  font-family:var(--display); font-weight:200; line-height:1.04; white-space:nowrap;
  font-size:clamp(28px,3.6vw,52px); letter-spacing:-.01em; color:var(--cream);
  position:relative; transition:color .35s var(--ease), transform .45s var(--ease), padding-left .45s var(--ease);
}
.footer-biglink:hover{ color:var(--gold); padding-left:.3em; }
html[data-lang="jp"] .footer-biglink{ letter-spacing:.04em; }
.footer-contact{ display:flex; flex-direction:column; gap:7px; margin-top:clamp(22px,3.5vh,40px); }
.footer-contact a, .footer-contact span{ font-size:13.5px; letter-spacing:.02em; opacity:.66; }
.footer-contact a:hover{ opacity:1; }
.footer-jp{ display:block; font-family:var(--jp); font-size:12px; opacity:.7; margin-top:3px; }
.footer-ig{ color:var(--gold); opacity:.92 !important; transition:opacity .3s var(--ease); }

.footer-bottom{
  width:100%; max-width:var(--maxw); margin:clamp(34px,5vh,60px) auto 0;
  padding-top:24px; border-top:1px solid rgba(194,164,107,.14);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer-fine{ margin:0; font-size:11px; letter-spacing:.08em; opacity:.38; }
.footer-totop{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; transition:opacity .3s var(--ease); }
.footer-totop:hover{ opacity:1; color:var(--gold); }
@media (max-width:820px){
  .footer-main{ grid-template-columns:1fr; gap:clamp(40px,7vh,70px); }
  .footer-left{ align-items:center; text-align:center; }
  .footer-logo-wrap{ align-items:center; }
  .footer-right{ align-items:center; text-align:center; }
  .footer-contact{ align-items:center; }
  .footer-bottom{ justify-content:center; }
}

/* =========================================================
   2. STORY / ABOUT  + circular pop-in images
   ========================================================= */
.story{ padding:clamp(96px,15vh,176px) var(--pad) clamp(80px,12vh,150px); }
.story-head{ max-width:var(--maxw); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.story-head .section-title span{ display:block; }
.story-h2b{ margin-top:.12em; }

.story-cols{
  max-width:var(--maxw); margin:clamp(40px,7vh,80px) auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,90px);
  align-items:center;
}

.circle-cluster{
  margin:0;
  padding:clamp(20px,4vh,48px) clamp(10px,2vw,30px);
  display:flex; justify-content:center; align-items:center;
  gap:clamp(20px,3vw,52px); flex-wrap:wrap;
}
.circ-unit{ position:relative; }
.circ--lg{ width:clamp(210px,26vw,350px); }
.circ--md{ width:clamp(168px,20vw,270px); margin-top:clamp(40px,9vw,130px); }
.circ--sm{ width:clamp(146px,16vw,216px); margin-bottom:clamp(40px,8vw,110px); }
.story-cols .circ--lg{ width:clamp(240px,30vw,400px); }
.story-cols .circ--md{ width:clamp(140px,16vw,210px); margin-top:clamp(48px,8vw,120px); }
.circ-drift{ position:relative; z-index:1; }
.circ{ position:relative; margin:0; }
.circ-unit .circ{ width:100%; aspect-ratio:1; }
.circ img{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;
  border:1px solid rgba(194,164,107,.28);
  box-shadow:0 36px 80px -34px rgba(0,0,0,.75);
}
.circ--lg img{ border-radius:58% 42% 47% 53% / 53% 44% 56% 47%; transform:rotate(-3deg); }
.circ--md img{ border-radius:46% 54% 61% 39% / 57% 49% 51% 43%; transform:rotate(4deg); }
.circ--sm img{ border-radius:56% 44% 40% 60% / 46% 57% 43% 54%; transform:rotate(-5deg); }

/* white shape behind (cheesetart-style, parallax) */
.circ-blob{
  position:absolute; z-index:0; width:106%; height:106%; left:-3%; top:5%;
  background:#EFE9E6; border-radius:60% 40% 52% 48% / 53% 47% 53% 47%;
  box-shadow:0 24px 56px -40px rgba(0,0,0,.4); will-change:transform;
}
.circ--lg .circ-blob{ left:-5%; top:6%; border-radius:57% 43% 48% 52% / 52% 45% 55% 48%; }
.circ--md .circ-blob{ left:6%; top:-6%; border-radius:45% 55% 60% 40% / 56% 49% 51% 44%; }
.circ--sm .circ-blob{ left:-6%; top:5%;  border-radius:55% 45% 41% 59% / 47% 56% 44% 53%; }

/* circular pop motion (overrides generic reveal transform) */
.circ.reveal{ opacity:0; transform:scale(.78); }
.circ.reveal.in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform 1.05s var(--ease); }

.story-body{ max-width:42ch; margin:0; text-align:left; }
.story-lead{
  font-family:var(--display); font-weight:200; line-height:1.3;
  font-size:clamp(23px,3vw,40px); letter-spacing:-.005em; margin:0; color:var(--cream);
}
.story-jp{
  font-family:var(--jp); font-weight:300; line-height:2;
  font-size:clamp(13px,1.35vw,16px); opacity:.62; margin:26px 0 0; max-width:46ch;
}
.story-concept{
  max-width:780px; margin:clamp(54px,8vh,94px) auto 0; text-align:center;
  padding-top:clamp(42px,6vh,72px); border-top:1px solid rgba(194,164,107,.16);
}
.concept{ padding-left:calc(var(--rail) + var(--pad)*.3); }
.concept-inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(0px,3vw,40px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:center; }
.concept-text{ max-width:46ch; }
.concept-label{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; opacity:.6; margin:0; }
.concept-big{
  font-family:var(--display); font-weight:200; line-height:1;
  font-size:clamp(38px,6.4vw,84px); letter-spacing:.03em; text-transform:uppercase; margin:16px 0 0;
}
.story-jp--wide{ max-width:54ch; text-align:left; margin-top:30px; }
.concept-circ{ width:clamp(240px,32vw,420px); justify-self:center; }

/* belief — quote over darkened wagyu-blocks photo */
.belief--photo{ min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:clamp(70px,12vh,160px) var(--pad); }
.belief-bg{ position:absolute; inset:0; z-index:1; }
.belief-bg img{ width:100%; height:100%; object-fit:cover; }
.belief--photo .belief-quote{ max-width:min(90vw, 880px); }
.belief--photo .belief-en{ font-size:clamp(34px,5.6vw,80px); line-height:1.04; text-shadow:0 4px 40px rgba(0,0,0,.5); }
.belief--photo .belief-jp{ opacity:.78; }

/* =========================================================
   Full-viewport sections + gentle scroll-snap (cheesetart feel)
   ========================================================= */
html{ scroll-snap-type:y proximity; scroll-padding-top:0; }
main > section{ scroll-snap-align:start; }
.story, .concept, .updates, .recognition, .contact{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.belief--photo{ min-height:100svh; }
.visit-wrap{ min-height:100svh; }
.footer{ min-height:100svh; justify-content:center; }
/* parallax wrappers — transform driven by JS, no transition */
.circ-wrap, .hero-circle-wrap{ transition:none; }

/* =========================================================
   Heading weight — Myriad Condensed Bold character
   ========================================================= */
.hero-title, .section-title, .concept-big, .footer-line, .footer-biglink,
.footer-wordmark, .recog-rank, .recog-title, .card-title{ font-weight:700; letter-spacing:.005em; }
.hero-title .gold, .section-title .gold{ font-weight:700; }
.eyebrow, .kicker, .concept-label, .footer-col-h{ font-weight:600; }

/* =========================================================
   Language state
   ========================================================= */
html[data-lang="jp"] [data-i18n]{ font-family:var(--jp); }
html[data-lang="jp"] .hero-title,
html[data-lang="jp"] .section-title,
html[data-lang="jp"] .footer-line,
html[data-lang="jp"] .intro-lead{ letter-spacing:.02em; line-height:1.2; }
html[data-lang="jp"] .eyebrow{ letter-spacing:.1em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .visit{ grid-template-columns:1fr; max-width:460px; gap:clamp(20px,4vh,34px); text-align:center; }
  .visit--flip .visit-circ{ order:0; }
  .visit-circ{ width:min(64vw,300px); }
  .visit-info{ align-items:center; }
  .visit-collab{ margin-left:auto; margin-right:auto; }
  .visit-details{ text-align:left; width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
}
@media (max-width:880px){
  :root{ --rail:66px; }
  body{ font-size:17px; }
  .nav-links > a{ display:none; }
  .nav-links > a.nav-preorder{ display:inline-flex; }
  .hero{ display:flex; flex-direction:column; justify-content:center;
    min-height:auto; padding-top:clamp(116px,16vh,150px); padding-bottom:clamp(40px,7vh,70px); }
  .hero-text{ margin-top:0; max-width:none; }
  .hero-title{ font-size:clamp(54px,15vw,96px); }
  .hero-title-b{ padding-left:.5em; }
  .hero-title-c{ padding-left:1em; }
  /* mobile: drop the plate, show the hero shot in flow */
  .hero-plate{ display:none; }
  .hero-float--main{ position:relative; z-index:2; width:min(74vw,340px);
    right:auto; top:auto; translate:0; align-self:center;
    margin:clamp(38px,8vh,70px) 0 0; }
  .hero-float--main .circ-drift{ width:100%; }
  .hero-float--main .circ{ width:100%; aspect-ratio:1/1; }
  .hero-vlabel{ display:none; }
  .hero-feature{ position:static; margin-top:clamp(32px,6vh,50px);
    align-self:flex-start; }
  .concept-inner{ grid-template-columns:1fr; gap:clamp(34px,6vh,56px); text-align:center; }
  .concept-text{ max-width:none; }
  .story-jp--wide{ text-align:left; }
  .concept-circ{ width:min(70vw,340px); order:-1; }
  .story-cols{ grid-template-columns:1fr; gap:clamp(34px,6vh,56px); }
  .story-body{ max-width:none; text-align:center; }
  .story-body .story-jp{ max-width:none; }
  .scroll-hint{ display:none; }
  .cards{ grid-template-columns:1fr; max-width:440px; }
  .cards--feature{ grid-template-columns:1fr; max-width:440px; }
  .recog-item{ grid-template-columns:1fr; gap:6px; }
  .recog-rank{ font-size:clamp(54px,16vw,80px); }
}
@media (max-height:760px){ .scroll-hint{ display:none; } }
@media (max-width:560px){
  :root{ --rail:50px; --pad:22px; }
  .trace-line{ opacity:.12; }
  .print{ width:30px; height:39px; margin-left:-15px; }
  .print.is-left{ margin-left:-26px; }
  .print.is-right{ margin-left:-4px; }
  .visit-row{ grid-template-columns:1fr; gap:4px; }
  .visit-row dt{ padding-top:0; }
}

/* Hero on portrait/tall windows — placed last so it wins at ANY portrait width
   (phone through tablet). Keep the headline in the foreground and let the photo
   bleed in behind it from the right, like a hero background. Works because the
   burger photo is dark, so the white/gold headline stays readable over it. */
@media (max-aspect-ratio:11/10){
  .hero{ position:relative; display:flex; flex-direction:column; justify-content:center;
    min-height:100svh; padding-top:clamp(118px,15vh,180px); padding-bottom:clamp(50px,8vh,90px); }
  .hero-plate{ display:none; }
  .hero-vlabel{ display:none; }
  /* photo: anchored right, bleeding off the edge, behind the text */
  .hero-float--main{ position:absolute; z-index:1;
    right:clamp(-110px,-12vw,-50px); top:46%; translate:0 -50%;
    width:min(78vw,560px); margin:0; }
  .hero-float--main .circ-drift{ width:100%; }
  .hero-float--main .circ{ width:100%; aspect-ratio:1/1; }
  /* headline: foreground, over the photo */
  .hero-text{ position:relative; z-index:3; max-width:none; margin:0; }
  .hero-title{ font-size:clamp(54px,12.5vw,150px); }
  .hero-title-b{ padding-left:.4em; }
  .hero-title-c{ padding-left:.78em; }
  .hero-cta{ position:relative; z-index:3; }
  .hero-feature{ position:static; align-self:flex-start; z-index:3; margin-top:clamp(28px,5vh,46px); }
  .scroll-hint{ display:none; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .footer-logo{ opacity:1 !important; animation:none !important; }
  [data-parallax]{ transform:none !important; }
  .marble-photo::before{ opacity:0 !important; }
  .print{ opacity:.5 !important; transform:none !important; }
  .scroll-hint-line{ animation:none; }
  .sear-veil{ display:none; }
  .preloader{ display:none !important; }
}

/* =========================================================
   Intro / preloader
   ========================================================= */
body.intro-lock{ overflow:hidden; }
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--char-3); cursor:pointer;
  transition:transform 1s var(--ease), opacity .85s var(--ease);
}
.preloader.is-instant{ display:none; }
.preloader.is-done{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.preloader-stage{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
.preloader-mark{
  width:clamp(104px,13vw,156px); height:auto;
  opacity:0; transform:translateY(30px) scale(.9);
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.5));
}
.preloader-word{
  font-family:var(--display); font-weight:200; font-size:clamp(26px,3.2vw,40px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
  margin:26px 0 0; opacity:0; transform:translateY(16px);
}
.preloader-sub{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin:11px 0 0; opacity:0;
}
.preloader-line{ width:0; height:1px; background:var(--gold); margin-top:24px; opacity:.85; }

.preloader.is-playing .preloader-mark{ animation:plMark 1.05s var(--ease) .15s forwards; }
.preloader.is-playing .preloader-word{ animation:plRise .9s var(--ease) .55s forwards; }
.preloader.is-playing .preloader-sub{ animation:plFade .9s var(--ease) .8s forwards; }
.preloader.is-playing .preloader-line{ animation:plLine 1s var(--ease) .95s forwards; }
@keyframes plMark{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes plRise{ to{ opacity:1; transform:translateY(0); } }
@keyframes plFade{ to{ opacity:.9; } }
@keyframes plLine{ to{ width:clamp(82px,9vw,124px); } }

/* =========================================================
   8. Contact
   ========================================================= */
.contact{ padding:clamp(100px,15vh,180px) var(--pad); }
.contact-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(0px,3vw,40px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:start;
}
.contact-intro{ max-width:32ch; }
.contact-intro .section-title{ display:flex; flex-direction:column; margin-top:4px; }
.contact-lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.65; opacity:.78; margin:26px 0 0; }
.contact-points{ list-style:none; margin:38px 0 0; padding:0; }
.contact-points li{
  display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-top:1px solid rgba(194,164,107,.16); font-size:16px;
}
.contact-points-l{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; }
.contact-points a{ transition:color .3s var(--ease); }
.contact-points a:hover{ color:var(--gold); }

.contact-form{
  display:flex; flex-direction:column; gap:clamp(18px,2.2vw,24px);
  background:var(--char-2); padding:clamp(28px,3.4vw,46px);
  border:1px solid rgba(194,164,107,.12);
}
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.6; }
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--cream);
  background:transparent; border:none; border-bottom:1px solid rgba(230,221,218,.26);
  padding:10px 0; transition:border-color .35s var(--ease);
}
.contact-form textarea{ resize:vertical; min-height:96px; line-height:1.6; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{ outline:none; border-color:var(--gold); }
.select-wrap{ position:relative; }
.contact-form select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:26px; }
.contact-form select option{ background:var(--char-2); color:var(--cream); }
.select-arrow{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--gold); font-size:11px;
}
.contact-submit{ align-self:flex-start; margin-top:8px; }
.contact-status{ margin:0; font-size:13px; letter-spacing:.02em; min-height:1.2em; opacity:.85; }
.contact-status.is-error{ color:#E0876A; opacity:1; }
.contact-form.is-sent{ justify-content:center; }
.contact-thanks{
  font-family:var(--display); font-weight:200; line-height:1.14;
  font-size:clamp(26px,3vw,40px); letter-spacing:-.01em; margin:0;
}
.contact-thanks-sub{ font-size:16px; opacity:.72; margin:16px 0 0; line-height:1.6; max-width:36ch; }

@media (max-width:880px){
  .contact-inner{ grid-template-columns:1fr; gap:clamp(34px,6vh,54px); }
  .contact-intro{ max-width:none; }
}