@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..900&family=Fraunces:opsz,wght@9..144,500..900&display=swap');

:root{
  --red:#cd2920;
  --red-deep:#a92019;
  --blue:#2596be;
  --yellow:#fec30d;
  --rose:#d77a75;
  --cream:#fff8f6;
  --paper:#fffdfb;
  --ink:#211816;
  --muted:#78635e;
  --line:rgba(33,24,22,.13);
  --line-strong:rgba(33,24,22,.22);
  --shadow:0 28px 70px rgba(76,25,19,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --max:1260px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--cream);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}

button,input,select{font:inherit}

button{color:inherit}

img{display:block;max-width:100%}

::selection{background:var(--yellow);color:var(--ink)}

.skip-link{
  position:fixed;
  z-index:9999;
  top:10px;
  left:10px;
  padding:10px 14px;
  border-radius:10px;
  color:#fff;
  background:var(--ink);
  transform:translateY(-160%);
  transition:transform 180ms ease;
}

.skip-link:focus{transform:none}

.kicker{
  margin:0;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.site-header{
  position:fixed;
  z-index:3000;
  top:0;
  left:0;
  width:100%;
  height:78px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 clamp(18px,3vw,44px);
  color:var(--ink);
  pointer-events:none;
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    transform 360ms var(--ease);
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,248,246,.78);
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  opacity:0;
  transition:opacity 240ms ease,border-color 240ms ease;
}

.site-header.scrolled::before{
  opacity:1;
  border-color:var(--line);
}

.site-header.hidden{transform:translateY(-110%)}

.site-header>*{pointer-events:auto}

.header-socials{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}

.header-socials a{
  position:relative;
  padding:8px 0;
}

.header-socials a::after,
.visit-links a::after,
.footer-socials a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:3px;
  height:1px;
  background:currentColor;
  transition:right 260ms var(--ease);
}

.wordmark{
  display:grid;
  justify-items:center;
  line-height:.8;
  transform-origin:center;
  transition:transform 220ms var(--ease);
}

.wordmark span{
  font-size:20px;
  font-weight:950;
  letter-spacing:-.055em;
}

.wordmark small{
  margin-top:6px;
  font-family:"Fraunces",serif;
  font-size:11px;
  font-style:italic;
  color:var(--red);
}

.menu-trigger{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0 12px 0 16px;
  border:1px solid rgba(33,24,22,.11);
  border-radius:999px;
  background:rgba(255,255,255,.56);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.74),
    inset -1px -1px 0 rgba(255,255,255,.2),
    0 8px 24px rgba(68,29,22,.07);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:
    transform 180ms var(--ease),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.menu-trigger .menu-icon{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 420ms var(--ease);
}

.menu-backdrop{
  position:fixed;
  inset:0;
  z-index:3490;
  background:rgba(37,20,16,.3);
  opacity:0;
  pointer-events:none;
  transition:opacity 260ms ease;
}

.menu-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

.menu-drop{
  position:fixed;
  z-index:3500;
  top:88px;
  left:50%;
  width:min(980px,calc(100vw - 30px));
  height:min(72vh,720px);
  padding:24px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:28px;
  background:rgba(255,250,247,.92);
  box-shadow:
    0 38px 110px rgba(41,19,15,.24),
    inset 1px 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-18px) scale(.985);
  transform-origin:50% 0;
  clip-path:inset(0 0 100% 0 round 28px);
  transition:
    opacity 220ms ease,
    transform 460ms var(--ease-ios),
    clip-path 520ms var(--ease);
}

.menu-drop.open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  clip-path:inset(0 0 0 0 round 28px);
}

.menu-drop-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:20px;
}

.menu-drop-head .kicker{color:var(--red)}

.menu-drop-head h2{
  margin:8px 0 0;
  font-family:"Fraunces",serif;
  font-size:clamp(42px,6vw,74px);
  line-height:.86;
  letter-spacing:-.055em;
  font-weight:720;
}

.menu-close{
  position:relative;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.56);
  cursor:pointer;
  transition:
    transform 180ms var(--ease),
    background-color 180ms ease;
}

.menu-close span{
  position:absolute;
  top:50%;
  left:50%;
  width:15px;
  height:1.5px;
  border-radius:3px;
  background:var(--ink);
}

.menu-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.menu-toolbar{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px;
  margin-bottom:12px;
}

.menu-select-wrap,
.menu-search-wrap{
  position:relative;
  display:grid;
  gap:5px;
  min-width:0;
}

.menu-select-wrap>span,
.menu-search-wrap>span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:850;
  color:var(--muted);
}

.menu-select-wrap select,
.menu-search-wrap input{
  width:100%;
  height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.7);
  color:var(--ink);
  outline:none;
  padding:0 14px;
  font-size:13px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.menu-search-wrap input:focus,
.menu-select-wrap select:focus{
  border-color:rgba(205,41,32,.46);
  box-shadow:0 0 0 4px rgba(205,41,32,.07);
  background:#fff;
}

.menu-results-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:10px;
  padding:6px 2px 12px;
}

.menu-list{
  height:calc(100% - 182px);
  overflow:auto;
  border-top:1px solid var(--line);
  scrollbar-width:thin;
  overscroll-behavior:contain;
}

.menu-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:16px 4px;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(12px);
  animation:menuRowIn 420ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 18ms);
}

.menu-row-copy{
  min-width:0;
}

.menu-row small{
  display:block;
  margin-bottom:5px;
  color:var(--red);
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.menu-row strong{
  display:block;
  font-size:16px;
  line-height:1.18;
  letter-spacing:-.025em;
}

.menu-row p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.menu-row-price{
  font-family:"Fraunces",serif;
  font-size:22px;
  font-weight:700;
  white-space:nowrap;
}

.menu-empty{
  display:grid;
  place-items:center;
  min-height:220px;
  color:var(--muted);
  text-align:center;
}

.hero{
  position:relative;
  min-height:82svh;
  padding:150px clamp(20px,4vw,60px) 44px;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr);
  align-items:center;
  gap:20px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero-orbit{
  position:absolute;
  z-index:0;
  width:min(46vw,650px);
  aspect-ratio:1;
  right:-9vw;
  top:16%;
  border-radius:50%;
  background:var(--yellow);
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:800px;
}

.hero-kicker{color:var(--red)}

.hero-title,
.menu-callout h2,
.story h2,
.visit h2{
  margin:14px 0 0;
  font-family:"Fraunces",serif;
  font-weight:740;
  letter-spacing:-.065em;
}

.hero-title{
  font-size:clamp(72px,10.5vw,158px);
  line-height:.76;
}

.hero-title span,
.menu-callout h2 span,
.story h2 span,
.visit h2 span{
  display:block;
  overflow:hidden;
}

.hero-title i,
.menu-callout h2 i,
.story h2 i,
.visit h2 i{
  display:block;
  font-style:normal;
  transform:translateY(112%) rotate(.8deg);
  transform-origin:0 100%;
  transition:transform 900ms var(--ease);
}

[data-reveal="lines"].visible i{
  transform:translateY(0) rotate(0);
}

.hero-title span:nth-child(2){color:var(--red)}

.hero-lead{
  max-width:600px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.58;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-top:30px;
}

.primary-link{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:0 18px 0 20px;
  border:0;
  border-radius:14px;
  background:var(--red);
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:820;
  box-shadow:0 14px 34px rgba(205,41,32,.18);
  transition:
    transform 180ms var(--ease),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.primary-link .arrow{
  transition:transform 220ms var(--ease);
}

.quiet-link{
  position:relative;
  font-size:13px;
  font-weight:720;
  color:var(--muted);
  padding:10px 0;
}

.quiet-link::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:4px;
  height:1px;
  background:var(--ink);
  transition:right 260ms var(--ease);
}

.hero-food{
  position:relative;
  z-index:1;
  height:min(58vw,650px);
  min-height:440px;
}

.food{
  position:absolute;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
  filter:drop-shadow(0 26px 30px rgba(71,27,18,.18));
}

.food-pancake{
  width:min(38vw,520px);
  right:-2%;
  top:6%;
  rotate:7deg;
}

.food-cone{
  width:min(20vw,260px);
  left:2%;
  bottom:0;
  rotate:-11deg;
}

.scribble{
  position:absolute;
  z-index:3;
  display:block;
  font-family:"Fraunces",serif;
  font-style:italic;
  color:var(--red);
  font-size:14px;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}

.scribble-a{top:13%;left:2%;rotate:-9deg}
.scribble-b{right:1%;bottom:12%;rotate:6deg;color:var(--ink)}

.hero-bottom{
  position:absolute;
  z-index:2;
  left:clamp(20px,4vw,60px);
  right:clamp(20px,4vw,60px);
  bottom:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(33,24,22,.5);
  font-size:9px;
  font-weight:780;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.menu-callout{
  position:relative;
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:50px;
  padding:86px max(22px,calc((100vw - var(--max))/2));
  background:var(--red);
  color:#fff;
  overflow:hidden;
}

.menu-callout-copy{
  position:relative;
  z-index:2;
  max-width:760px;
}

.menu-callout .kicker{color:var(--yellow)}

.menu-callout h2{
  font-size:clamp(68px,9vw,132px);
  line-height:.79;
  color:#fff;
}

.menu-callout h2 span:nth-child(2){color:var(--yellow)}

.menu-callout-copy>p:last-child{
  max-width:560px;
  margin:26px 0 0;
  color:rgba(255,255,255,.76);
  font-size:15px;
  line-height:1.62;
}

.menu-launch{
  position:relative;
  z-index:2;
  width:min(390px,34vw);
  min-width:300px;
  min-height:138px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.56);
  border-radius:28px;
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.44),
    inset -1px -1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(79,12,8,.18);
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  backdrop-filter:blur(14px) saturate(155%);
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:
    transform 260ms var(--ease),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.menu-launch::before{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:16%;
  top:50%;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  filter:blur(14px);
  transform:translateY(-50%);
  opacity:.45;
  transition:
    transform 440ms var(--ease),
    opacity 220ms ease;
}

.menu-launch-icon{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.54);
  transition:
    transform 420ms var(--ease-ios),
    border-radius 340ms var(--ease);
}

.menu-launch-icon svg{
  width:38px;
  fill:rgba(33,24,22,.1);
  stroke:currentColor;
  stroke-width:1.5;
}

.menu-launch>span:nth-child(2){
  position:relative;
  z-index:2;
  display:grid;
  gap:4px;
}

.menu-launch small{
  font-size:9px;
  letter-spacing:.14em;
  font-weight:850;
  color:rgba(255,255,255,.58);
}

.menu-launch strong{
  font-family:"Fraunces",serif;
  font-size:30px;
  font-weight:680;
  letter-spacing:-.04em;
}

.menu-launch-arrow{
  position:relative;
  z-index:2;
  font-size:22px;
  transition:transform 280ms var(--ease);
}

.menu-float-art{
  position:absolute;
  right:-120px;
  bottom:-120px;
  width:390px;
  opacity:.13;
  rotate:18deg;
}

.menu-float-art img{
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}

.story{
  padding:96px max(22px,calc((100vw - var(--max))/2)) 90px;
  background:var(--paper);
  overflow:hidden;
}

.story-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:40px;
  margin-bottom:46px;
}

.story-head .kicker{color:var(--blue);align-self:start}

.story h2{
  grid-column:2;
  margin:0;
  font-size:clamp(60px,7.5vw,108px);
  line-height:.82;
}

.story-rail{
  display:grid;
  grid-template-columns:1.12fr .88fr 1fr;
  gap:16px;
  align-items:end;
}

.photo-frame{
  margin:0;
  position:relative;
  transform:
    perspective(900px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translateY(var(--float,0px));
  transform-style:preserve-3d;
  transition:
    transform 340ms var(--ease),
    box-shadow 260ms ease;
  will-change:transform;
}

.photo-placeholder{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--line);
  background:#eee3df;
}

.photo-placeholder::after{
  content:"TEMP ART";
  position:absolute;
  right:10px;
  top:10px;
  padding:5px 7px;
  border-radius:5px;
  background:rgba(255,255,255,.68);
  color:var(--ink);
  font-size:8px;
  letter-spacing:.12em;
  font-weight:850;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.photo-placeholder img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8%;
  transition:transform 800ms var(--ease);
}

.frame-a .photo-placeholder{aspect-ratio:4/5;background:#f6d6d0}
.frame-b .photo-placeholder{aspect-ratio:1/1;background:#ffe78e}
.frame-c .photo-placeholder{aspect-ratio:4/5;background:#cde7ef}

.frame-a{--float:0px}
.frame-b{--float:54px}
.frame-c{--float:16px}

.photo-frame figcaption{
  display:grid;
  gap:4px;
  margin-top:11px;
}

.photo-frame figcaption span{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.13em;
  font-weight:850;
}

.photo-frame figcaption strong{
  font-size:13px;
  font-weight:720;
}

.story-note{
  margin-top:88px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:11px;
}

.visit{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  min-height:610px;
  background:var(--ink);
  color:#fff;
}

.visit-copy{
  padding:82px clamp(24px,4vw,62px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.visit .kicker{color:var(--yellow)}

.visit h2{
  margin-top:14px;
  font-size:clamp(68px,8vw,118px);
  line-height:.8;
}

.visit h2 span:nth-child(2){color:var(--yellow)}

.visit-copy>p:not(.kicker){
  max-width:440px;
  margin:26px 0 0;
  color:rgba(255,255,255,.65);
  font-size:14px;
  line-height:1.62;
}

.visit-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:34px;
}

.visit-links a{
  position:relative;
  padding:7px 0;
  font-size:12px;
  font-weight:720;
  color:rgba(255,255,255,.82);
}

.map-wrap{
  position:relative;
  min-height:610px;
  overflow:hidden;
  background:#d9d9d9;
}

.map-wrap iframe{
  width:100%;
  height:100%;
  min-height:610px;
  border:0;
  filter:saturate(.88) contrast(.98);
  transform:scale(1.035);
  transition:
    transform 1200ms var(--ease),
    filter 500ms ease;
}

.map-wrap.visible iframe{
  transform:scale(1);
}

.map-curtain{
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--yellow);
  transform-origin:100% 50%;
  transform:scaleX(1);
  transition:transform 900ms var(--ease-inout);
  pointer-events:none;
}

.map-wrap.visible .map-curtain{transform:scaleX(0)}

.site-footer{
  padding:54px clamp(20px,4vw,60px) 24px;
  background:var(--cream);
  border-top:1px solid var(--line);
}

.footer-top{
  display:grid;
  grid-template-columns:1fr minmax(280px,480px);
  gap:60px;
  align-items:end;
  padding-bottom:48px;
}

.footer-brand{
  display:grid;
  align-content:end;
}

.footer-brand span{
  font-family:"Fraunces",serif;
  font-size:clamp(70px,12vw,170px);
  line-height:.65;
  letter-spacing:-.075em;
  color:var(--red);
}

.footer-brand small{
  margin-top:20px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:820;
}

.footer-socials{
  border-top:1px solid var(--line);
}

.footer-socials a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:720;
}

.footer-socials a::after{bottom:10px}

.footer-socials b{
  font-size:14px;
  font-weight:500;
  transition:transform 220ms var(--ease);
}

.footer-bottom{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.footer-bottom button{
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-size:10px;
  font-weight:850;
  text-transform:none;
  letter-spacing:0;
}

.footer-bottom>a{justify-self:end}

[data-reveal="fade"]{
  opacity:0;
  transform:translateY(20px);
  filter:blur(5px);
  transition:
    opacity 560ms var(--ease),
    transform 700ms var(--ease),
    filter 560ms ease;
}

[data-reveal="fade"].visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

[data-reveal="scale"]{
  opacity:0;
  transform:translateY(14px) scale(.965);
  transition:
    opacity 500ms ease,
    transform 760ms var(--ease);
}

[data-reveal="scale"].visible{
  opacity:1;
  transform:none;
}

[data-reveal="wipe"] .photo-placeholder{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 850ms var(--ease-inout);
}

[data-reveal="wipe"].visible .photo-placeholder{
  clip-path:inset(0 0 0 0);
}

[data-reveal="wipe"] figcaption{
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity 420ms ease 280ms,
    transform 560ms var(--ease) 280ms;
}

[data-reveal="wipe"].visible figcaption{
  opacity:1;
  transform:none;
}

.cursor-layer{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
}

.ice-cursor{
  --stretch:0;
  --angle:0deg;
  position:fixed;
  left:0;
  top:0;
  width:28px;
  height:36px;
  opacity:0;
  transform:
    translate3d(-100px,-100px,0)
    translate(-50%,-50%)
    rotate(var(--angle))
    scale(calc(1 + var(--stretch)),calc(1 - var(--stretch) * .18));
  transform-origin:50% 58%;
  will-change:transform;
  transition:
    opacity 100ms ease,
    width 160ms var(--ease),
    height 160ms var(--ease);
}

.ice-cursor.ready{opacity:1}

.ice-scoop{
  position:absolute;
  left:50%;
  top:0;
  width:22px;
  height:22px;
  border-radius:52% 48% 48% 52%;
  background:
    radial-gradient(circle at 65% 25%,#fff 0 8%,transparent 9%),
    radial-gradient(circle at 30% 32%,#ffdfd6 0 10%,transparent 11%),
    #fff2d7;
  box-shadow:
    inset -4px -4px 0 rgba(193,115,75,.08),
    0 2px 8px rgba(40,20,15,.16);
  transform:translateX(-50%);
}

.ice-scoop::after{
  content:"";
  position:absolute;
  width:9px;
  height:4px;
  left:8px;
  top:7px;
  border-radius:50%;
  background:var(--red);
  rotate:-18deg;
  opacity:.8;
}

.ice-cone{
  position:absolute;
  left:50%;
  bottom:0;
  width:18px;
  height:18px;
  clip-path:polygon(8% 0,92% 0,50% 100%);
  background:
    linear-gradient(45deg,transparent 40%,rgba(105,59,26,.22) 41% 47%,transparent 48%) 0 0/8px 8px,
    linear-gradient(-45deg,transparent 40%,rgba(105,59,26,.18) 41% 47%,transparent 48%) 0 0/8px 8px,
    #dda44c;
  transform:translateX(-50%);
}

.ice-drip{
  position:absolute;
  left:8px;
  top:16px;
  width:5px;
  height:8px;
  border-radius:50% 50% 60% 60%;
  background:#fff2d7;
  transform-origin:50% 0;
  animation:cursorDrip 1.8s ease-in-out infinite;
}

.ice-cursor.hover{
  width:34px;
  height:43px;
}

.cursor-particle{
  position:fixed;
  width:6px;
  height:6px;
  border-radius:50% 50% 58% 58%;
  background:#fff0d0;
  box-shadow:0 1px 3px rgba(90,42,22,.12);
  pointer-events:none;
  will-change:transform,opacity;
}

@keyframes cursorDrip{
  0%,100%{transform:scaleY(.7);opacity:.78}
  50%{transform:scaleY(1.2) translateY(2px);opacity:1}
}

@keyframes menuRowIn{
  to{opacity:1;transform:none}
}

@media(hover:hover) and (pointer:fine){
  .header-socials a:hover::after,
  .visit-links a:hover::after,
  .footer-socials a:hover::after,
  .quiet-link:hover::after{right:0}

  .wordmark:hover{transform:scale(1.035)}

  .menu-trigger:hover{
    transform:translateY(-1px) scale(1.025);
    background:rgba(255,255,255,.74);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.86),
      0 12px 30px rgba(68,29,22,.1);
  }

  .menu-trigger:hover .menu-icon{transform:rotate(10deg) scale(1.05)}

  .menu-close:hover{
    transform:rotate(4deg) scale(1.06);
    background:#fff;
  }

  .primary-link:hover{
    transform:translateY(-2px);
    background:#b9231b;
    box-shadow:0 18px 40px rgba(205,41,32,.24);
  }

  .primary-link:hover .arrow{transform:translate(2px,-2px)}

  .menu-launch:hover{
    transform:translateY(-5px) scale(1.01);
    background:rgba(255,255,255,.21);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.55),
      0 34px 74px rgba(79,12,8,.23);
  }

  .menu-launch:hover::before{
    transform:translate(25px,-50%) scale(1.15);
    opacity:.7;
  }

  .menu-launch:hover .menu-launch-icon{
    transform:rotate(-7deg) scale(1.06);
    border-radius:50%;
  }

  .menu-launch:hover .menu-launch-arrow{transform:translate(3px,-3px) rotate(8deg)}

  .photo-frame:hover{
    box-shadow:0 22px 46px rgba(68,29,22,.11);
  }

  .photo-frame:hover .photo-placeholder img{
    transform:scale(1.035) translateY(-3px);
  }

  .footer-socials a:hover b{transform:translate(3px,-3px)}

  html.custom-cursor,
  html.custom-cursor body,
  html.custom-cursor body *{
    cursor:none!important;
  }
}

.menu-trigger:active,
.primary-link:active,
.menu-launch:active,
.menu-close:active{
  transform:scale(.97);
}

@media(max-width:980px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:130px;
    padding-bottom:52px;
  }

  .hero-title{font-size:clamp(74px,16vw,126px)}

  .hero-food{
    height:470px;
    min-height:0;
  }

  .hero-orbit{
    width:500px;
    right:-190px;
    top:48%;
  }

  .food-pancake{width:430px;right:2%;top:0}
  .food-cone{width:210px;left:4%;bottom:-4%}

  .menu-callout{
    grid-template-columns:1fr;
    min-height:auto;
    gap:36px;
  }

  .menu-launch{
    width:min(480px,100%);
  }

  .story-head{
    grid-template-columns:1fr;
  }

  .story h2{grid-column:auto}

  .visit{
    grid-template-columns:1fr;
  }

  .map-wrap,
  .map-wrap iframe{
    min-height:500px;
  }
}

@media(max-width:720px){
  .site-header{
    height:68px;
    grid-template-columns:auto 1fr auto;
    padding:0 12px;
  }

  .header-socials{
    gap:7px;
    font-size:10px;
  }

  .header-socials a{
    width:24px;
    padding:8px 0;
    font-size:0;
    text-align:center;
  }

  .header-socials a:first-of-type::before{
    content:"IG";
    font-size:10px;
    font-weight:900;
  }

  .header-socials a:last-of-type::before{
    content:"FB";
    font-size:10px;
    font-weight:900;
  }

  .wordmark{
    justify-self:center;
  }

  .wordmark span{font-size:18px}

  .menu-trigger{
    min-height:40px;
    padding:0 9px 0 13px;
  }

  .menu-trigger>span{display:none}

  .menu-trigger .menu-icon{width:23px;height:23px}

  .menu-drop{
    top:76px;
    width:calc(100vw - 16px);
    height:calc(100svh - 86px);
    padding:18px;
    border-radius:22px;
    clip-path:inset(0 0 100% 0 round 22px);
  }

  .menu-drop.open{clip-path:inset(0 0 0 0 round 22px)}

  .menu-toolbar{
    grid-template-columns:1fr;
  }

  .menu-results-meta{
    align-items:flex-end;
  }

  .menu-results-meta span:last-child{
    max-width:160px;
    text-align:right;
  }

  .menu-list{
    height:calc(100% - 258px);
  }

  .hero{
    padding:118px 18px 42px;
  }

  .hero-title{
    font-size:clamp(66px,20vw,102px);
    line-height:.79;
  }

  .hero-lead{
    margin-top:22px;
    font-size:16px;
  }

  .hero-actions{
    margin-top:24px;
    align-items:flex-start;
    flex-direction:column;
  }

  .hero-food{
    height:360px;
    margin-top:8px;
  }

  .hero-orbit{
    width:360px;
    right:-140px;
    top:55%;
  }

  .food-pancake{
    width:320px;
    right:-2%;
    top:4%;
  }

  .food-cone{
    width:154px;
    left:1%;
    bottom:0;
  }

  .scribble{
    font-size:12px;
  }

  .scribble-a{left:0;top:7%}
  .scribble-b{right:0;bottom:8%}

  .hero-bottom{
    position:static;
    margin-top:20px;
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    font-size:8px;
  }

  .menu-callout{
    min-height:520px;
    padding:72px 18px;
  }

  .menu-callout h2{
    font-size:clamp(66px,19vw,96px);
  }

  .menu-launch{
    min-width:0;
    min-height:116px;
    padding:14px;
    border-radius:22px;
  }

  .menu-launch-icon{
    width:54px;
    height:54px;
    border-radius:17px;
  }

  .menu-launch strong{font-size:25px}

  .menu-float-art{
    width:280px;
    right:-120px;
    bottom:-90px;
  }

  .story{
    padding:72px 18px 64px;
  }

  .story h2{
    font-size:clamp(58px,17vw,86px);
  }

  .story-rail{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .frame-a{
    grid-column:1/-1;
  }

  .frame-a .photo-placeholder{aspect-ratio:16/11}

  .frame-b{--float:0px}
  .frame-c{--float:20px}

  .story-note{
    margin-top:54px;
    flex-direction:column;
    gap:4px;
  }

  .visit-copy{
    padding:70px 18px 54px;
  }

  .visit h2{
    font-size:clamp(66px,19vw,94px);
  }

  .map-wrap,
  .map-wrap iframe{
    min-height:440px;
  }

  .site-footer{
    padding:48px 18px 24px;
  }

  .footer-top{
    grid-template-columns:1fr;
    gap:48px;
    padding-bottom:38px;
  }

  .footer-brand span{
    font-size:clamp(76px,24vw,120px);
  }

  .footer-bottom{
    grid-template-columns:1fr auto;
  }

  .footer-bottom button{display:none}
  .footer-bottom>a{justify-self:end}
}

@media(max-width:480px){
  .story-rail{
    grid-template-columns:1fr;
  }

  .frame-c,
  .frame-b{
    --float:0px;
  }

  .frame-a .photo-placeholder,
  .frame-b .photo-placeholder,
  .frame-c .photo-placeholder{
    aspect-ratio:4/3;
  }

  .photo-frame figcaption strong{font-size:12px}
}

@media(pointer:coarse),(max-width:900px){
  .cursor-layer{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }

  [data-reveal],
  [data-reveal] *,
  [data-reveal="wipe"] .photo-placeholder{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
  }

  .cursor-layer{display:none!important}

  [data-parallax]{
    transform:none!important;
  }
}

@media(prefers-reduced-transparency:reduce){
  .site-header::before,
  .menu-trigger,
  .menu-launch,
  .menu-drop{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .site-header::before,
  .menu-drop{
    background:var(--cream)!important;
  }
}


/* ===== Zoom media + motion refinement ===== */

.wordmark{
  display:flex;
  align-items:center;
  gap:9px;
  line-height:1;
}

.brand-icon-shell{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(33,24,22,.08);
  box-shadow:0 5px 14px rgba(70,31,24,.08);
}

.brand-icon-shell img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.brand-type{
  display:grid;
  line-height:.8;
}

.brand-type b{
  font-size:19px;
  letter-spacing:-.055em;
  font-weight:950;
}

.brand-type small{
  margin-top:6px;
  font-family:"Fraunces",serif;
  font-size:10px;
  font-style:italic;
  color:var(--red);
}

.hero-food{
  isolation:isolate;
}

.hero-photo-shell{
  position:absolute;
  z-index:2;
  right:1%;
  top:5%;
  width:min(39vw,540px);
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(33,24,22,.09);
  box-shadow:
    0 30px 70px rgba(69,28,20,.17),
    inset 0 0 0 1px rgba(255,255,255,.76);
  transform:translate3d(0,var(--py,0px),0) rotate(2.5deg);
  will-change:transform;
}

.hero-photo{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  padding:10px;
}

.hero-photo-tag{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:7px 9px;
  border-radius:8px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.8);
  color:var(--ink);
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.food-cone{
  z-index:3;
  width:min(17vw,220px);
  left:0;
  bottom:2%;
}

.story{
  padding-bottom:76px;
}

.story-gallery{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:start;
}

.story-gallery .photo-frame{
  --float:0px;
}

.story-gallery .frame-a{
  grid-row:span 2;
}

.story-gallery .frame-d{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.5fr);
  gap:18px;
  align-items:center;
}

.story-gallery .frame-d figcaption{
  margin:0;
}

.photo-image-shell{
  position:relative;
  width:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
}

.photo-image-shell img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
  transition:
    transform 820ms var(--ease),
    filter 360ms ease;
}

.frame-a .photo-image-shell{aspect-ratio:4/5}
.frame-b .photo-image-shell,
.frame-c .photo-image-shell{aspect-ratio:4/3}
.frame-d .photo-image-shell{aspect-ratio:16/9}

.shell-warm{background:#fff0dd}
.shell-pink{background:#f9dfdf}
.shell-cool{background:#dceff3}
.shell-pistachio{background:#eef2d7}

[data-reveal="wipe"] .photo-image-shell{
  clip-path:inset(0 100% 0 0 round 18px);
  transition:clip-path 900ms var(--ease-inout);
}

[data-reveal="wipe"].visible .photo-image-shell{
  clip-path:inset(0 0 0 0 round 18px);
}

.reel-section{
  min-height:680px;
  padding:86px max(22px,calc((100vw - var(--max))/2));
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(380px,1.14fr);
  gap:64px;
  align-items:center;
  background:var(--yellow);
  overflow:hidden;
}

.reel-copy{
  max-width:560px;
}

.reel-copy .kicker{
  color:var(--red);
}

.reel-section h2{
  margin:14px 0 0;
  font-family:"Fraunces",serif;
  font-size:clamp(64px,8vw,118px);
  line-height:.8;
  letter-spacing:-.065em;
  font-weight:740;
}

.reel-section h2 span{
  display:block;
  overflow:hidden;
}

.reel-section h2 i{
  display:block;
  font-style:normal;
  transform:translateY(112%);
  transition:transform 900ms var(--ease);
}

.reel-section [data-reveal="lines"].visible i{
  transform:none;
}

.reel-copy>p:not(.kicker){
  margin:26px 0 0;
  max-width:500px;
  color:rgba(33,24,22,.68);
  font-size:14px;
  line-height:1.62;
}

.reel-link{
  display:inline-flex;
  margin-top:26px;
  padding:10px 0;
  border-bottom:1px solid rgba(33,24,22,.34);
  font-size:12px;
  font-weight:780;
}

.reel-device{
  justify-self:end;
  width:min(520px,100%);
  padding:10px;
  border-radius:30px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 30px 80px rgba(88,59,0,.16),
    inset 1px 1px 0 rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}

.reel-topline,
.reel-note{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  font-size:9px;
  font-weight:820;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.reel-topline span:last-child{
  margin-left:auto;
  color:rgba(33,24,22,.5);
}

.reel-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(205,41,32,.1);
}

.reel-embed-wrap{
  position:relative;
  width:100%;
  aspect-ratio:9/12.5;
  overflow:hidden;
  border-radius:22px;
  background:#000;
}

.reel-embed-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.reel-note{
  justify-content:space-between;
  color:rgba(33,24,22,.55);
}

.photo-frame:hover .photo-image-shell img{
  transform:scale(1.025);
}

/* Position is exact; only the ice-cream shape deforms. */
.ice-cursor{
  position:fixed;
  left:0;
  top:0;
  width:34px;
  height:44px;
  opacity:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  will-change:transform,opacity;
  contain:layout paint style;
  transition:
    opacity 90ms ease,
    width 150ms var(--ease),
    height 150ms var(--ease);
}

.ice-cursor.ready{opacity:1}

.cursor-shape{
  --stretch:0;
  --angle:0deg;
  position:absolute;
  inset:0;
  display:block;
  transform:
    rotate(var(--angle))
    scale(calc(1 + var(--stretch)),calc(1 - var(--stretch) * .16));
  transform-origin:50% 58%;
  will-change:transform;
}

.ice-cursor.hover{
  width:38px;
  height:49px;
}

.cursor-particle{
  contain:strict;
  transform:translateZ(0);
}

@media(max-width:980px){
  .hero-photo-shell{
    width:min(58vw,470px);
    right:2%;
  }

  .reel-section{
    grid-template-columns:1fr;
    gap:36px;
  }

  .reel-device{
    justify-self:start;
    width:min(560px,100%);
  }
}

@media(max-width:720px){
  .brand-type{
    display:none;
  }

  .brand-icon-shell{
    width:32px;
    height:32px;
  }

  .hero-photo-shell{
    width:min(78vw,390px);
    right:-2%;
    top:3%;
    border-radius:22px;
  }

  .hero-photo{
    padding:7px;
  }

  .food-cone{
    width:138px;
    left:1%;
  }

  .story-gallery{
    grid-template-columns:1fr;
  }

  .story-gallery .frame-a,
  .story-gallery .frame-d{
    grid-row:auto;
    grid-column:auto;
  }

  .story-gallery .frame-d{
    display:block;
  }

  .story-gallery .frame-d figcaption{
    margin-top:11px;
  }

  .frame-a .photo-image-shell,
  .frame-b .photo-image-shell,
  .frame-c .photo-image-shell,
  .frame-d .photo-image-shell{
    aspect-ratio:4/3;
  }

  .reel-section{
    min-height:auto;
    padding:72px 18px;
  }

  .reel-section h2{
    font-size:clamp(60px,17vw,88px);
  }

  .reel-device{
    width:100%;
    border-radius:24px;
  }

  .reel-embed-wrap{
    border-radius:17px;
  }
}


/* ===== Interaction + media fit pass ===== */

.story-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.story-gallery .photo-frame,
.story-gallery .frame-a,
.story-gallery .frame-b,
.story-gallery .frame-c,
.story-gallery .frame-d{
  grid-column:auto;
  grid-row:auto;
  display:block;
  min-width:0;
  cursor:pointer;
  outline:none;
}

.photo-frame:focus-visible{
  box-shadow:0 0 0 3px rgba(37,150,190,.22);
  border-radius:18px;
}

.photo-image-shell,
.frame-a .photo-image-shell,
.frame-b .photo-image-shell,
.frame-c .photo-image-shell,
.frame-d .photo-image-shell{
  width:100%;
  height:clamp(320px,31vw,480px);
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}

.photo-image-shell img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0;
  transform:none !important;
  filter:none;
}

.photo-frame:hover .photo-image-shell img{
  transform:none !important;
}

.photo-frame figcaption{
  transition:
    transform 260ms var(--ease),
    color 220ms ease;
}

.photo-frame:hover figcaption{
  transform:translateY(-2px);
}

.photo-frame:hover .photo-image-shell{
  box-shadow:0 18px 44px rgba(68,29,22,.1);
}

.reel-embed-wrap iframe{
  pointer-events:none;
}

.reel-muted-badge{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.reel-muted-badge span:last-child{
  font-size:12px;
  animation:reelLoopSpin 2.8s linear infinite;
}

@keyframes reelLoopSpin{
  to{transform:rotate(360deg)}
}

/* Waffle cursor by default; crepe slice on interactive elements. */
.ice-cursor{
  width:26px;
  height:26px;
}

.cursor-shape{
  --sx:1;
  --sy:1;
  --angle:0deg;
  --motion-blur:0px;
  position:absolute;
  inset:0;
  display:block;
  transform:
    rotate(var(--angle))
    scale(var(--sx),var(--sy));
  transform-origin:center;
  filter:blur(var(--motion-blur));
  will-change:transform,filter;
}

.waffle-cursor-shape,
.crepe-cursor-shape{
  position:absolute;
  inset:0;
  display:block;
  transition:
    opacity 150ms ease,
    transform 220ms var(--ease),
    border-radius 220ms var(--ease);
  will-change:transform,opacity;
}

.waffle-cursor-shape{
  border-radius:50%;
  background:
    linear-gradient(45deg,transparent 42%,rgba(115,66,20,.34) 43% 49%,transparent 50%) 0 0/8px 8px,
    linear-gradient(-45deg,transparent 42%,rgba(115,66,20,.28) 43% 49%,transparent 50%) 0 0/8px 8px,
    #e0a34a;
  border:1px solid rgba(109,61,20,.34);
  box-shadow:
    inset -3px -3px 0 rgba(117,64,18,.12),
    inset 2px 2px 0 rgba(255,232,173,.34),
    0 3px 8px rgba(65,28,17,.18);
  opacity:1;
  transform:scale(1) rotate(0deg);
}

.crepe-cursor-shape{
  inset:1px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  border-radius:0;
  background:
    radial-gradient(circle at 50% 62%,#6f3c25 0 13%,transparent 14%),
    radial-gradient(circle at 62% 68%,#d7433e 0 8%,transparent 9%),
    linear-gradient(145deg,#f5c36d 0 55%,#df9b4a 56% 100%);
  box-shadow:0 4px 8px rgba(65,28,17,.17);
  opacity:0;
  transform:scale(.62) rotate(-20deg);
}

.ice-cursor.hover{
  width:30px;
  height:30px;
}

.ice-cursor.hover .waffle-cursor-shape{
  opacity:0;
  transform:scale(.55) rotate(18deg);
}

.ice-cursor.hover .crepe-cursor-shape{
  opacity:1;
  transform:scale(1) rotate(0deg);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:7000;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  pointer-events:none;
}

.lightbox.open{
  visibility:visible;
  pointer-events:auto;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(25,14,12,.68);
  opacity:0;
  transition:opacity 220ms ease;
  cursor:pointer;
}

.lightbox.open .lightbox-backdrop{
  opacity:1;
}

.lightbox-panel{
  position:relative;
  z-index:1;
  width:min(880px,calc(100vw - 40px));
  max-height:calc(100svh - 48px);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  padding:14px;
  border-radius:24px;
  background:rgba(255,248,246,.96);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 34px 100px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(16px) scale(.985);
  transition:
    opacity 220ms ease,
    transform 360ms var(--ease);
}

.lightbox.open .lightbox-panel{
  opacity:1;
  transform:none;
}

.lightbox-panel img{
  width:100%;
  height:100%;
  max-height:calc(100svh - 120px);
  object-fit:contain;
  object-position:center;
  background:#fff;
  border-radius:16px;
}

.lightbox-caption{
  min-height:22px;
  padding:2px 4px 0;
  font-size:12px;
  color:var(--muted);
}

.lightbox-close{
  position:absolute;
  z-index:2;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border:1px solid rgba(33,24,22,.12);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:transform 180ms var(--ease),background-color 180ms ease;
}

.lightbox-close span{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.5px;
  background:var(--ink);
}

.lightbox-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.lightbox-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

@media(hover:hover) and (pointer:fine){
  .lightbox-close:hover{
    transform:scale(1.06) rotate(4deg);
    background:#fff;
  }
}

@media(max-width:980px){
  .story-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .photo-image-shell,
  .frame-a .photo-image-shell,
  .frame-b .photo-image-shell,
  .frame-c .photo-image-shell,
  .frame-d .photo-image-shell{
    height:clamp(360px,58vw,540px);
  }
}

@media(max-width:720px){
  .story{
    padding-bottom:54px;
  }

  .story-gallery{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline:-18px;
    padding:0 18px 8px;
  }

  .story-gallery::-webkit-scrollbar{display:none}

  .story-gallery .photo-frame,
  .story-gallery .frame-a,
  .story-gallery .frame-b,
  .story-gallery .frame-c,
  .story-gallery .frame-d{
    flex:0 0 min(82vw,330px);
    scroll-snap-align:center;
  }

  .photo-image-shell,
  .frame-a .photo-image-shell,
  .frame-b .photo-image-shell,
  .frame-c .photo-image-shell,
  .frame-d .photo-image-shell{
    height:470px;
    max-height:68svh;
  }

  .lightbox{
    padding:10px;
  }

  .lightbox-panel{
    width:calc(100vw - 20px);
    max-height:calc(100svh - 20px);
    border-radius:19px;
    padding:10px;
  }

  .lightbox-panel img{
    max-height:calc(100svh - 90px);
    border-radius:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .reel-muted-badge span:last-child{
    animation:none!important;
  }
}