/* Home: one day at Bora, 8am to 2am. Static layout first (no-JS, reduced motion, Save-Data); html.motion adds the
   scroll tracks whose frames home.js computes from the scroll position alone, and the turning spits. */

/* ---------- hero: the cream ground under the full-colour logo, the simit, and the olive portal into morning ---------- */
.hero { background: var(--cream); color: var(--night); --focus: var(--olive); }
.hero-stage { position: relative; }
.hero-frame { position: relative; min-height: 100svh; overflow: hidden; }
.hero-copy {
  position: relative; z-index: 2;
  padding: calc(var(--chrome-clear) + clamp(12px, 4svh, 56px)) var(--gutter) 64px;
  max-width: min(50rem, 56vw);
}
.hero-status { font-size: 16px; font-weight: 650; font-stretch: 112%; color: var(--mute-cream); }
.hero-status .sep { margin: 0 0.5em; color: var(--terracotta-text); }
.hero-title { margin-top: clamp(20px, 3.4svh, 36px); }
.hero-logo { width: min(40vw, 62svh, 620px); height: auto; }
.hero-line {
  display: block; margin-top: clamp(20px, 3.2svh, 34px);
  font-family: var(--font-display); font-size: clamp(36px, 4vw, 64px); font-weight: 860; font-stretch: 75%;
  line-height: 0.95; letter-spacing: -0.01em; color: var(--olive);
}
.hero-sub { margin-top: 16px; max-width: 19.7em; font-size: clamp(18px, 1.35vw, 21px); color: var(--mute-cream); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.6svh, 36px); }
.hero-ctas .btn-ghost { color: var(--olive); }
.simit {
  position: absolute; z-index: 1;
  width: min(70svh, 46vw, 900px); aspect-ratio: 1;
  right: 4vw; top: calc(50% - min(35svh, 23vw, 450px));
}
.simit img { width: 100%; height: auto; }

.portal { background: var(--olive); color: var(--cream); --focus: var(--cream); }
.portal-inner {
  min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 0 40px;
  padding: var(--chrome-clear) var(--gutter) clamp(32px, 5svh, 64px);
  transform-origin: 50% 50%;
}
.clock {
  font-family: var(--font-display); font-weight: 900; font-stretch: 75%; line-height: 0.76; letter-spacing: -0.035em;
  font-size: clamp(170px, 31vw, 560px); color: var(--olive); white-space: nowrap;
}
.clock small { font-size: 0.3em; letter-spacing: -0.01em; margin-left: 0.04em; }
.portal .clock { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; font-size: min(66svh, 42vw); margin-top: -2svh; color: var(--sand); }
.portal-text { grid-column: 1 / span 7; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px; }
.portal-text .chapter-lede { margin-top: 0; }
.chapter-title { font-size: clamp(42px, 5vw, 88px); }
.chapter-lede { margin-top: 18px; max-width: 21.5em; font-size: clamp(18px, 1.35vw, 21px); }
.portal .chapter-lede { color: var(--mute-olive); }

.motion .hero-track { height: 280svh; }
.motion .hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.motion .hero-frame { height: 100%; min-height: 0; }
.motion .portal { position: absolute; inset: 0; z-index: 3; clip-path: circle(0px at 50% 50%); }
.motion .simit img, .motion .portal, .motion .portal-inner, .motion .hero-copy { will-change: transform; }

/* ---------- shared chapter scaffolding ---------- */
.chapter { position: relative; padding: clamp(80px, 10vw, 160px) var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; }
.plate { pointer-events: none; }
.plate img { width: 100%; height: auto; }
.motion .plate img { will-change: transform; }
.fav { display: inline-block; font-size: 14px; font-weight: 700; font-stretch: 125%; letter-spacing: 0.02em; color: var(--terracotta-text); }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; }
.board .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: baseline; }
.board .row h4, .board .row h3 { font-size: 20px; font-weight: 720; font-stretch: 100%; line-height: 1.2; }
.board .row .price { font-size: 20px; }
.board .row p { grid-column: 1 / -1; font-size: 16px; color: var(--mute-cream); }
.board-group { display: grid; gap: 22px; align-content: start; }
.board-group > h3 { font-size: 14px; font-weight: 700; font-stretch: 125%; letter-spacing: 0.02em; color: var(--olive); }

/* ---------- breakfast ---------- */
.day { background: var(--cream); color: var(--night); padding-top: clamp(32px, 4vw, 64px); }
.spread { grid-column: 1 / span 7; align-self: start; }
.spread-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.spread-head h3 { font-size: clamp(26px, 2.4vw, 38px); font-weight: 760; font-stretch: 90%; line-height: 1.05; }
.spread-head .price { font-size: clamp(26px, 2.4vw, 38px); color: var(--terracotta-text); }
.spread-list {
  margin-top: 26px;
  font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 76px); font-weight: 860; font-stretch: 75%;
  line-height: 0.98; letter-spacing: -0.01em; color: var(--olive);
}
.spread-list li { display: inline; white-space: nowrap; }
.spread-list li:not(:last-child)::after { content: "/"; margin-left: 0.16em; color: var(--terracotta); font-weight: 600; }
.spread-note { margin-top: 26px; font-size: 18px; color: var(--mute-cream); }
.spread-note .price { color: var(--night); }
.plate-coffee { grid-column: 8 / span 5; align-self: start; width: min(100%, 520px); justify-self: end; }
.day .board { grid-column: 1 / -1; margin-top: clamp(56px, 7vw, 104px); padding-top: 40px; border-top: 2px solid var(--line); }
.day .more { grid-column: 1 / -1; margin-top: 36px; }

/* ---------- the oven ---------- */
.oven { background: var(--cream); color: var(--night); padding-top: clamp(40px, 6vw, 96px); overflow: hidden; }
/* The lahmacun and iskender plates fill their half of the grid and stop at the page gutter: whole on screen, never cut by
   the viewport edge (Can's ban: products are never cropped). */
.plate-lahmacun { grid-column: 1 / span 6; width: min(100%, 840px); align-self: center; }
.oven-copy { grid-column: 7 / span 6; align-self: center; }
.oven-title { font-size: clamp(56px, 7.4vw, 128px); color: var(--night); }
.oven-lede { margin-top: 20px; max-width: 19em; font-size: clamp(19px, 1.5vw, 23px); }
.oven-list { margin-top: 40px; display: grid; gap: 26px; }
.oven-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: baseline; padding-top: 18px; border-top: 2px solid var(--line); }
.oven-list h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 760; font-stretch: 92%; line-height: 1.1; }
.oven-list .price { font-size: clamp(20px, 1.7vw, 26px); color: var(--terracotta-text); }
.oven-list p { grid-column: 1 / -1; font-size: 17px; color: var(--mute-cream); max-width: 29em; }

/* ---------- doner from the spit: never pinned, the page scrolls straight through ---------- */
.spit { background: var(--cream); color: var(--night); }
.spit-stage {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: end;
  padding: clamp(64px, 8vw, 120px) var(--gutter) 0;
}
.spit-copy { position: relative; z-index: 2; grid-column: 1 / span 4; grid-row: 1; align-self: end; padding-bottom: 6svh; }
.spit-title { font-size: clamp(40px, 4.4vw, 76px); }
.spit-lede { margin-top: 22px; max-width: 17.8em; font-size: clamp(19px, 1.5vw, 23px); }
.spit-fav { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 18px; }
.spit-fav .price { color: var(--terracotta-text); font-size: 22px; }
.spits {
  position: relative; z-index: 1; grid-column: 5 / span 7; grid-row: 1;
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: end; gap: 12px clamp(8px, 2vw, 40px);
}
.spit-fig { display: grid; justify-items: center; }
/* Each spit is its own control while it turns (a slider: drag sideways or use the arrow keys). Vertical swipes stay
   with the browser (touch-action: pan-y), so the page always scrolls. The renders' light edge fringe is hidden by
   multiplying the whole control (both cross-fade layers) onto the cream ground (asset README). */
.spit-control {
  position: relative; display: grid; border-radius: 28px; mix-blend-mode: multiply;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.spit-control img { height: min(72svh, 760px, 1257px); width: auto; max-width: none; -webkit-user-drag: none; }
.spit-control .spit-blend { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.spit-control[role="slider"] { cursor: grab; }
.spit-control[role="slider"]:active { cursor: grabbing; }
.spit-control:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.spits figcaption { grid-column: 1 / -1; justify-self: center; font-size: 14px; font-weight: 600; color: var(--mute-cream); }
.builder { background: var(--cream); color: var(--night); padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(80px, 9vw, 140px); }
.builder-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; padding-top: 40px; border-top: 2px solid var(--line); }
.build-step { grid-column: span 6; display: grid; gap: 18px; align-content: start; }
.build-step h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 780; font-stretch: 88%; line-height: 1.05; }
.build-step h3 .n { font-family: var(--font-display); font-size: 1.6em; font-weight: 900; font-stretch: 75%; color: var(--terracotta); line-height: 0.8; }
.build-step ul { display: grid; gap: 10px; }
.build-step li { display: flex; justify-content: space-between; gap: 18px; font-size: 19px; padding-bottom: 10px; border-bottom: 1px solid rgb(38 40 28 / 0.16); }
.build-step li:last-child { border-bottom: 0; }
.build-step li .price { color: var(--terracotta-text); }
.build-step .note { font-size: 16px; color: var(--mute-cream); }

/* ---------- evening: the main menu on the olive ground, fading to night below the text ---------- */
.evening {
  --fade: clamp(96px, 10vw, 160px);
  padding-bottom: calc(var(--fade) + 24px);
  background-color: var(--olive);
  background-image: linear-gradient(180deg, var(--olive) 0, var(--olive) calc(100% - var(--fade)), var(--night) 100%);
  color: var(--cream); overflow: hidden; --focus: var(--cream);
}
.evening .clock { grid-column: 1 / span 6; grid-row: 1; color: var(--sand); }
.evening-copy { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(28px, 4vw, 56px); }
.evening-copy .chapter-lede { color: var(--mute-olive); }
.plate-iskender { grid-column: 7 / span 6; grid-row: 1 / span 4; width: min(100%, 760px); justify-self: end; align-self: center; }
.evening .feature { grid-column: 1 / span 6; grid-row: 3; margin-top: 48px; padding-top: 22px; border-top: 2px solid var(--cream); }
.evening .feature-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.evening .feature-head h3 { font-size: clamp(32px, 3.2vw, 52px); font-weight: 800; font-stretch: 85%; line-height: 1; }
.evening .feature-head .price { font-size: clamp(28px, 2.6vw, 42px); color: var(--cream); }
.evening .fav { color: var(--sand); }
.evening .feature p { margin-top: 14px; max-width: 25.4em; font-size: 19px; color: var(--mute-olive); }
.evening .board { grid-column: 1 / span 6; grid-row: 4; margin-top: 40px; grid-template-columns: 1fr; }
.evening .board .row p { color: var(--mute-olive); }
.evening .board .price { color: var(--cream); }

.meze { background: var(--night); color: var(--cream); padding: clamp(40px, 6vw, 96px) 0 clamp(80px, 9vw, 140px); overflow: hidden; --focus: var(--sand); }
.meze-head { padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 40px; align-items: center; }
.meze-text { grid-column: 1 / span 7; }
.meze-title { font-size: clamp(56px, 7.4vw, 128px); }
.meze-text p { margin-top: 18px; max-width: 25.4em; font-size: clamp(18px, 1.4vw, 21px); color: var(--mute-night); }
.meze-text .price { color: var(--cream); }
.plate-hummus { grid-column: 9 / span 4; width: min(100%, 420px); justify-self: end; }
.strip-wrap { margin-top: clamp(40px, 6vw, 80px); }
.strip {
  display: flex; flex-wrap: wrap; gap: 0.1em 0; padding: 0 var(--gutter);
  font-family: var(--font-display); font-size: clamp(54px, 8.4vw, 150px); font-weight: 860; font-stretch: 75%; line-height: 0.98;
  letter-spacing: -0.01em;
}
.motion .strip li { white-space: nowrap; }
.strip li::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin: 0 0.32em 0.16em; border-radius: 50%; background: var(--terracotta-night); vertical-align: middle; }
.strip li:last-child::after { display: none; }
.motion .strip { flex-wrap: nowrap; width: max-content; padding: 0; will-change: transform; }

/* ---------- late nights ---------- */
.late { background: var(--night); color: var(--cream); padding-top: clamp(40px, 5vw, 80px); overflow: hidden; --focus: var(--sand); }
.late-type { margin: 0 calc(var(--gutter) * -1); }
.late-type .clock { color: var(--terracotta-night); padding: 0 var(--gutter); font-size: clamp(130px, 24vw, 420px); }
.late-copy { grid-column: 1 / span 6; margin-top: clamp(28px, 4vw, 56px); }
.late-copy .chapter-lede { color: var(--mute-night); }
.late .board { grid-column: 7 / span 6; margin-top: clamp(28px, 4vw, 56px); grid-template-columns: 1fr 1fr; }
.late .board .row p { color: var(--mute-night); }
.late .board .price { color: var(--sand); }
.late .more { grid-column: 1 / -1; margin-top: 40px; }

/* ---------- from a Bora catering event ---------- */
.events { background: var(--night); color: var(--cream); padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(90px, 10vw, 160px); --focus: var(--sand); }
.events-head { display: grid; gap: 18px; }
.events-title { font-size: clamp(44px, 5.4vw, 92px); max-width: 7em; }
.collage {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px);
  grid-template-areas:
    "a a a a a a a a b b b b"
    "c c c c c d d d b b b b";
  align-items: start;
}
.shot { overflow: hidden; background: var(--night-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-a { grid-area: a; aspect-ratio: 16 / 9; }
.shot-b { grid-area: b; aspect-ratio: 9 / 16; }
.shot-c { grid-area: c; aspect-ratio: 16 / 10; }
.shot-d { grid-area: d; aspect-ratio: 3 / 4; }
.motion .shot img { will-change: transform; height: calc(100% + 60px); margin-top: -30px; }

/* ---------- opening list + hiring ---------- */
.list { background: var(--terracotta); color: #fff; padding: clamp(72px, 9vw, 140px) var(--gutter); --focus: var(--night); }
.list-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 40px; align-items: end; }
.list-box { grid-column: 1 / span 7; }
.list-title { font-size: clamp(52px, 6.6vw, 116px); }
.list-box > p { margin-top: 16px; font-size: clamp(18px, 1.4vw, 21px); }
.list-form { margin-top: 30px; display: grid; gap: 10px; max-width: 40rem; }
.list-form label { font-size: 16px; font-weight: 700; font-stretch: 112%; }
.field { display: flex; gap: 8px; padding: 6px; background: var(--cream-lift); border-radius: 999px; }
.field input[type="email"] {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--night); font-size: 18px;
}
.field input[type="email"]:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.field .btn { flex: none; }
.list .fine { color: #fff; font-weight: 500; }
.list .text-link { color: #fff; justify-self: start; }
.team { grid-column: 9 / span 4; display: grid; gap: 18px; justify-items: start; padding-left: 32px; border-left: 2px solid rgb(255 255 255 / 0.5); }
.team p { font-family: var(--font-display); font-size: clamp(32px, 3vw, 48px); font-weight: 860; font-stretch: 75%; line-height: 0.98; }
.team .btn-ghost { color: #fff; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .grid, .portal-inner, .meze-head, .list-inner, .builder-inner, .spit-stage { column-gap: 24px; }
  .hero-copy { max-width: 62vw; }
  .simit { width: min(60svh, 52vw); right: var(--gutter); top: auto; bottom: 6svh; }
  .portal-text { grid-column: 1 / span 10; }
  .spread { grid-column: 1 / -1; }
  /* The coffee plate sits whole inside the page, clear of the board below (no cropped copper arc). */
  .plate-coffee { grid-column: 1 / -1; justify-self: end; width: min(56vw, 440px); margin: 24px 0 0; }
  .plate-lahmacun { grid-column: 1 / -1; width: min(100%, 640px); }
  .oven-copy { grid-column: 1 / -1; margin-top: 24px; }
  .spit-copy { grid-column: 1 / span 5; }
  .spits { grid-column: 6 / -1; }
  /* Both spits fit their seven columns (renders are 0.372 wide per unit of height): whole, clear of the heading. */
  .spit-control img { height: min(72svh, 760px, calc(66vw - 14px)); }
  .evening .clock { grid-column: 1 / span 7; }
  .evening-copy, .evening .feature, .evening .board { grid-column: 1 / span 8; }
  .plate-iskender { grid-column: 7 / -1; grid-row: 1 / span 2; width: min(100%, 560px); align-self: start; }
  .late-copy, .late .board { grid-column: 1 / -1; }
  .list-box, .team { grid-column: 1 / -1; }
  .team { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 2px solid rgb(255 255 255 / 0.5); }
}

/* Portrait tablets: there is no room beside the hero copy, so the simit sits below the buttons, whole, and its size
   also follows the height left under the copy (about 640px tall at these widths). */
@media (min-width: 760px) and (max-width: 1099px) and (orientation: portrait) {
  .simit { width: min(60svh, 52vw, calc(94svh - 640px)); }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  .grid, .portal-inner, .meze-head, .list-inner, .builder-inner, .spit-stage { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .grid > *, .portal-inner > *, .meze-head > *, .list-inner > *, .builder-inner > *, .spit-stage > * { grid-column: 1 / -1; }
  .hero-copy { max-width: none; padding-top: calc(var(--chrome-clear) + 6px); padding-bottom: 0; }
  .hero-status { font-size: 14px; }
  .hero-status .where { display: block; }
  .hero-status .sep { display: none; }
  .hero-logo { width: min(60vw, 280px); }
  .hero-line { font-size: clamp(32px, 9.6vw, 44px); }
  .hero-sub { font-size: 16px; max-width: 19em; }
  .hero-ctas { display: none; }
  /* The whole simit stays on screen: below the hero line, inside the gutter and above the dock with a clear 32px of
     cream between them (Can's ban: products are never cropped). The copy above it grows with the viewport width, so
     its top follows vw. */
  .simit { --simit-top: calc(250px + 60vw); top: var(--simit-top); bottom: auto; right: var(--gutter);
    width: min(80vw, calc(100svh - var(--simit-top) - var(--dock-clear) - 32px)); }
  /* The 8am screen: numeral and heading as one centred group (no empty half-screen between them); the bottom keeps
     the dock footprint free. */
  .portal-inner { grid-template-rows: auto auto; align-content: center; row-gap: 20px; padding-bottom: calc(var(--dock-clear) + 16px); }
  .clock { font-size: clamp(150px, 46vw, 260px); }
  .portal .clock { font-size: min(40svh, 54vw); margin-top: 0; align-self: auto; }
  .portal-text { grid-column: 1 / -1; display: block; }
  .portal-text .chapter-lede { margin-top: 12px; }
  .chapter { padding: 72px var(--gutter); }
  .board { grid-template-columns: 1fr; gap: 24px; }
  .spread-list { font-size: clamp(30px, 9vw, 44px); }
  .spread-list li { white-space: normal; }
  .plate-coffee { width: 64vw; margin: 28px 0 0; }
  .plate-lahmacun { width: 100%; }
  .oven-title, .spit-title, .meze-title { font-size: clamp(50px, 14vw, 72px); }
  .spit-stage { align-items: start; row-gap: 22px; padding-top: 56px; }
  .spit-copy, .spits { grid-row: auto; }
  .spit-copy { align-self: start; padding-bottom: 0; }
  .spit-lede { margin-top: 12px; font-size: 17px; }
  .spit-fav { display: none; }
  .spits { gap: 10px 6px; }
  .spit-control img { height: min(54svh, 440px, 720px); }
  .spits figcaption { font-size: 13px; }
  .builder { padding-top: 32px; }
  .builder-inner { grid-template-columns: 1fr; gap: 36px; }
  .build-step { grid-column: 1 / -1; }
  .build-step li { font-size: 17px; }
  .evening .clock, .evening-copy, .evening .feature, .evening .board { grid-column: 1 / -1; grid-row: auto; }
  .plate-iskender { grid-column: 1 / -1; grid-row: auto; width: 100%; margin: 12px 0 0; }
  .meze-text, .plate-hummus { grid-column: 1 / -1; }
  .plate-hummus { width: 64vw; margin-top: 18px; }
  .strip { font-size: clamp(46px, 13vw, 64px); }
  .late .board { grid-template-columns: 1fr; }
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b d" "c c"; }
  .shot-b { aspect-ratio: 9 / 16; }
  .shot-d { aspect-ratio: 9 / 16; }
  .events-title { font-size: clamp(40px, 11vw, 56px); }
  .field { flex-direction: column; border-radius: 28px; padding: 6px; }
  .field .btn { width: 100%; }
}
@media (max-width: 759px) and (max-height: 720px) {
  .hero-copy { padding-top: calc(var(--chrome-clear) + 2px); }
  .hero-title { margin-top: 14px; }
  .hero-logo { width: min(48vw, 220px); }
  .hero-line { font-size: 30px; margin-top: 14px; }
  .hero-sub { margin-top: 10px; font-size: 15px; }
  .simit { --simit-top: 400px; }
}