.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.stage::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -38vh;
  width: 140vw; height: 80vh;
  transform: translateX(-50%) scale(var(--glow, 0));
  background: radial-gradient(closest-side, rgba(255, 122, 46, .55), rgba(199, 63, 46, .28) 45%, rgba(28, 17, 12, 0) 100%);
  z-index: -2;
  transition: transform 1.6s var(--ease-out);
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
#embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-name {
  position: absolute;
  left: 50%;
  top: 33%;
  z-index: 0;
  margin: 0;
  width: max-content;
  max-width: 98vw;
  transform: translate(calc(-50% + var(--px, 0px) * .5), calc(-50% + var(--py, 0px) * .5 + var(--sy, 0px) * .35));
  font-size: clamp(120px, 23vw, 400px);
  line-height: .82;
  color: var(--hardal);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 80px rgba(255, 122, 46, .25);
  user-select: none;
}
.hero-name .ch { display: inline-block; transform-origin: 50% 100%; }
.product {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 2;
  width: min(40vw, 580px);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--px, 0px) * -1), calc(-50% + var(--py, 0px) * -1 + var(--sy, 0px) * -.15)) scale(calc(1 - var(--sp, 0) * .18));
}
.product a { position: absolute; inset: 0; display: block; }
.product img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(255, 122, 46, .18));
}
.product .shadow {
  position: absolute;
  left: 18%; right: 18%;
  bottom: 6%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  filter: blur(6px);
  z-index: -1;
}
.sticker {
  position: absolute;
  z-index: 3;
  right: 2%;
  top: 6%;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--koz);
  color: var(--ekmek);
  font-family: "Cajun", sans-serif;
  font-size: 30px;
  transform: rotate(-12deg) scale(0);
  box-shadow: 0 12px 30px -8px rgba(199, 63, 46, .7);
  pointer-events: none;
}
.sticker::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px dashed rgba(241, 223, 192, .55);
}
.sticker.is-on { animation: stamp .55s var(--ease-drop) .55s forwards; }
@keyframes stamp {
  0% { transform: rotate(-30deg) scale(1.8); opacity: 0; }
  100% { transform: rotate(-12deg) scale(1); opacity: 1; }
}
.hero-info {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: clamp(120px, 15vh, 170px);
  width: min(330px, 25vw);
}
.hero-info p { margin: 0 0 24px; font-size: 18px; color: rgba(241, 223, 192, .82); }
.hero-info .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: clamp(120px, 15vh, 170px);
  text-align: right;
  font-family: "Barlow Condensed", sans-serif;
}
.hero-facts strong { display: block; font-family: "Cajun", sans-serif; font-weight: 400; font-size: 64px; line-height: 1; }
.hero-facts span { font-size: 18px; opacity: .7; }
.hero-facts div + div { margin-top: 14px; }
.rail {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 22px;
}
.rail button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ekmek);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 112px;
  padding: 6px 4px 10px;
  border-radius: 14px;
  font: 600 15px/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  opacity: .55;
  position: relative;
  transition: opacity .3s, background .3s;
}
.rail button img { width: 64px; height: 64px; object-fit: contain; transition: transform .45s var(--ease-drop); }
.rail button:hover { opacity: .9; background: rgba(241, 223, 192, .05); }
.rail button:hover img { transform: translateY(-4px) rotate(-4deg); }
.rail button[aria-pressed="true"] { opacity: 1; }
.rail button[aria-pressed="true"] img { transform: translateY(-6px) scale(1.08); }
.rail button .bar {
  position: absolute;
  left: 22px; right: 22px; bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: rgba(241, 223, 192, .12);
  overflow: hidden;
}
.rail button .bar i { position: absolute; inset: 0; background: var(--kor); transform: scaleX(0); transform-origin: left; }
.rail button[aria-pressed="true"] .bar i { animation: fill var(--dur, 6500ms) linear forwards; }
.rail.is-paused button .bar i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

.menu .section-head h2 { color: var(--ekmek); }
.menu .chips { margin-bottom: 44px; }
.menu .dish-grid { min-height: 420px; }
.menu-foot { margin-top: 48px; display: flex; justify-content: center; }

.story { overflow: hidden; padding-bottom: 0; }
.story .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.story h2 { margin: 0; font-size: clamp(58px, 8.4vw, 132px); color: var(--koz); }
.story .body p { margin: 0 0 18px; font-size: 19px; max-width: 46ch; }
.story .count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .35em;
  margin: 28px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
}
.story .count b { font-family: "Cajun", sans-serif; font-weight: 400; font-size: 2.2em; line-height: .9; color: var(--koz); }
.story-spread { position: relative; margin-top: clamp(40px, 6vw, 80px); margin-right: calc(var(--gutter) * -1); }
.story-spread img {
  display: block;
  width: min(1180px, 100%);
  margin-left: auto;
  transform: translateX(var(--spread, 0px));
  filter: drop-shadow(0 30px 30px rgba(36, 20, 13, .25));
}

.sig {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
}
.sig + .sig { border-top: 1px solid rgba(241, 223, 192, .08); }
.sig:nth-child(even) .sig-media { order: 2; }
.sig-media { position: relative; display: grid; place-items: center; padding-top: clamp(24px, 3vw, 48px); }
.sig-media .ghost {
  position: absolute;
  inset: 0 0 auto 0;
  text-align: center;
  font-family: "Cajun", sans-serif;
  font-size: clamp(90px, 13vw, 210px);
  line-height: .8;
  color: rgba(248, 191, 24, .1);
  -webkit-text-stroke: 2px rgba(248, 191, 24, .6);
  white-space: nowrap;
  pointer-events: none;
}
.sig-media img {
  position: relative;
  width: min(100%, 560px);
  transform: translateY(var(--par, 0px)) rotate(var(--rot, 0deg));
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55));
}
.sig-copy h3 { margin: 0 0 16px; font-size: clamp(48px, 6vw, 86px); color: var(--hardal); }
.sig-copy p { margin: 0 0 26px; max-width: 44ch; color: rgba(241, 223, 192, .8); font-size: 18px; }

.hours { background: var(--hardal); color: var(--komur); padding: clamp(56px, 8vw, 96px) 0; overflow: hidden; }
.hours .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hours .time { margin: 0; font-size: clamp(64px, 11vw, 176px); line-height: .85; white-space: nowrap; }
.hours .time span { color: var(--koz); }
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 700 24px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .01em;
}
.open-status i {
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #2f8f3a;
  animation: ping 2s infinite;
}
.open-status.is-closed i { background: var(--koz); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(47, 143, 58, .6); } 70% { box-shadow: 0 0 0 12px rgba(47, 143, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 143, 58, 0); } }
.hours p { margin: 0; max-width: 44ch; font-size: 18px; }

.branches { overflow: hidden; }
.branches .wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.branches h2 { margin: 0 0 18px; font-size: clamp(54px, 7vw, 100px); color: var(--ekmek); }
.branches .lede { margin: 0 0 28px; color: var(--soluk); }

.franchise { background: var(--koz); color: var(--ekmek); overflow: hidden; isolation: isolate; }
.franchise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(241, 223, 192, .12) 1.6px, transparent 2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
}
.franchise .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.franchise h2 { margin: 0 0 20px; font-size: clamp(56px, 8vw, 124px); }
.franchise p { margin: 0 0 30px; max-width: 42ch; font-size: 19px; }
.franchise .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.franchise .link-arrow:hover { color: var(--komur); }

.news .dish-grid { gap: 32px; }

@media (max-width: 900px) {
  .hero-name { top: 24%; font-size: clamp(84px, 30vw, 190px); }
  .product { top: 45%; width: min(86vw, 440px); }
  .sticker { width: 72px; height: 72px; font-size: 20px; right: 0; top: 4%; }
  .hero-info { left: 20px; right: 20px; width: auto; bottom: 128px; text-align: center; }
  .hero-info p { font-size: 16px; margin-bottom: 16px; }
  .hero-info .actions { justify-content: center; }
  .hero-facts { display: none; }
  .rail { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
  .rail button { flex: 0 0 auto; width: 92px; scroll-snap-align: center; }
  .rail button img { width: 52px; height: 52px; }
  .story .wrap, .branches .wrap, .franchise .wrap, .hours .wrap { grid-template-columns: 1fr; }
  .sig { grid-template-columns: 1fr; }
  .sig:nth-child(even) .sig-media { order: 0; }
  .news .dish-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #embers { display: none; }
}
.hero-title { margin: 0 0 12px; font: 700 21px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .02em; color: var(--hardal); }
@media (max-width: 900px) { .hero-title { font-size: 18px; margin-bottom: 8px; } }