/* Kruvasante prototype */

@font-face {
  font-family: "Donau Neue";
  src: url("../fonts/DonauNeue-Uppercase.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #5c261a;
  --blush: #e4c7c4;
  --paper: #f8f2ef;
  --ink-soft: rgba(92, 38, 26, 0.72);
  --ink-line: rgba(92, 38, 26, 0.2);
  --paper-soft: rgba(248, 242, 239, 0.72);
  --paper-line: rgba(248, 242, 239, 0.2);
  --gutter: clamp(1rem, 5vw, 5.5rem);
  /* Corners of photos. The branch cards keep their own arch and soft corners. */
  --corner: 0.5rem;
  --display: "Donau Neue", "DM Sans", system-ui, sans-serif;
  --text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Scroll distance of the pinned story, in viewport heights. */
  --story-length: 590;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Keyboard focus never lands underneath the fixed header. */
a,
button {
  scroll-margin: 5rem 0 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0;
  font-family: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Logo, drawn as a mask so it takes the current text color. */
.logo {
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

/* Header logo: the wordmark, and only the croissant mark where the bar gets tight. */
.logo--nav {
  width: 8.75rem;
  aspect-ratio: 894 / 168;
  -webkit-mask-image: url("../brand/wordmark.svg?v=2");
  mask-image: url("../brand/wordmark.svg?v=2");
}

.logo--lockup {
  width: min(78vw, 33rem);
  aspect-ratio: 912 / 400;
  -webkit-mask-image: url("../brand/lockup.svg?v=2");
  mask-image: url("../brand/lockup.svg?v=2");
}

.logo--foot {
  width: min(60vw, 13rem);
}

.logo--mark {
  width: 2.5rem;
  aspect-ratio: 199 / 131;
  -webkit-mask-image: url("../brand/mark.svg?v=2");
  mask-image: url("../brand/mark.svg?v=2");
}

.logo--word {
  width: 7rem;
  aspect-ratio: 894 / 168;
  -webkit-mask-image: url("../brand/wordmark.svg?v=2");
  mask-image: url("../brand/wordmark.svg?v=2");
}

/* The mark beside the name: only in the phone header (see below). */
.nav__mark {
  display: none;
}

/* Beside the name, the mark is raised a touch: its arcs lean, so its weight sits below the
   middle of its outline, and centering the outlines alone makes the name look too high. */
.nav__mark,
.panel__brand .logo--mark {
  transform: translateY(-1.5px);
}

.logo--serve {
  width: 6.5rem;
  aspect-ratio: 964 / 222;
  -webkit-mask-image: url("../brand/serve-grup.svg?v=2");
  mask-image: url("../brand/serve-grup.svg?v=2");
}

/* ---------- Header: logo in the middle, links set apart, one long line underneath ---------- */

.nav {
  --nav-line: rgba(92, 38, 26, 0.42);
  --nav-veil: rgba(248, 242, 239, 0.7);
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  padding: max(0.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
  color: var(--ink);
  /* Only the bar itself takes clicks; the veil around it lets them through. */
  pointer-events: none;
  transition: color 0.3s;
}

/* No frame. A soft veil in the color of the section underneath keeps the links readable
   over photos, and fades out downward so it never shows an edge. */
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -0.75rem;
  background: var(--nav-veil);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  transition: background-color 0.3s;
}

.nav--on-blush {
  --nav-veil: rgba(228, 199, 196, 0.7);
}

.nav--on-dark {
  --nav-line: rgba(248, 242, 239, 0.45);
  --nav-veil: rgba(92, 38, 26, 0.7);
  color: var(--paper);
}

/* Equal side columns keep the logo on the center line of the page. */
.nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* The line under the bar never runs the full width of the screen. */
  width: min(60rem, 86%);
  margin: 0 auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--nav-line);
  pointer-events: auto;
  transition: border-color 0.3s;
}

.nav__side {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.nav__home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 clamp(0.5rem, 4vw, 3rem);
  border-radius: 0.5rem;
  text-decoration: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

@media (max-width: 39rem) {
  .nav {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  /* Phones need the whole width for four links and the mark. */
  .nav__bar {
    width: 100%;
  }

  .nav__link {
    padding: 0 0.4rem;
    font-size: 0.875rem;
  }

  .nav__home {
    padding: 0 0.35rem;
  }

  .logo--nav {
    width: 2.25rem;
    aspect-ratio: 199 / 131;
    -webkit-mask-image: url("../brand/mark.svg?v=2");
    mask-image: url("../brand/mark.svg?v=2");
  }
}

@media (max-width: 22.5rem) {
  .nav__link {
    padding: 0 0.25rem;
    font-size: 0.8125rem;
  }
}

/* The button that opens the full-screen menu. Phones only, and only once the script runs;
   without it the four links above stay in the bar. */
.nav__toggle,
.panel__close {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Two lines. */
.nav__toggle span {
  width: 1.625rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 1.5px 0;
}

@media (max-width: 39rem) {
  .js .nav__bar {
    grid-template-columns: 1fr auto;
  }

  .js .nav__side {
    display: none;
  }

  /* The mark and the name side by side. */
  .js .nav__home {
    justify-self: start;
    gap: 0.6rem;
    padding: 0;
  }

  .js .nav__mark {
    display: block;
  }

  .js .nav__toggle {
    display: grid;
    margin-right: -0.5rem;
  }

  .js .logo--nav {
    width: 7rem;
    aspect-ratio: 894 / 168;
    -webkit-mask-image: url("../brand/wordmark.svg?v=2");
    mask-image: url("../brand/wordmark.svg?v=2");
  }
}

/* ---------- Full-screen menu (phones) ---------- */

.panel {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(0.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--ink);
  color: var(--paper);
  animation: panel-in 0.35s var(--ease) both;
}

.panel[hidden] {
  display: none;
}

@keyframes panel-in {
  from { opacity: 0; }
}

/* Same height and line as the header, so the mark and the button do not jump when it opens. */
.panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(248, 242, 239, 0.45);
}

.panel__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.panel__close {
  display: grid;
  margin-right: -0.5rem;
}

/* A cross. */
.panel__close span {
  position: relative;
  width: 1.625rem;
  height: 1.625rem;
}

.panel__close span::before,
.panel__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
}

.panel__close span::after {
  transform: rotate(-45deg);
}

.panel__links {
  display: grid;
  align-content: center;
  flex: 1;
  gap: 0.25rem;
  padding: 2rem 0;
}

.panel__links a {
  display: block;
  padding: 0.35rem 0;
  font-family: var(--display);
  font-size: clamp(3rem, 17vw, 5rem);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  animation: panel-link 0.6s var(--ease) both;
}

.panel__links a:nth-child(2) { animation-delay: 0.05s; }
.panel__links a:nth-child(3) { animation-delay: 0.1s; }
.panel__links a:nth-child(4) { animation-delay: 0.15s; }

@keyframes panel-link {
  from { opacity: 0; transform: translateY(1.25rem); }
}

.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
  color: var(--paper-soft);
  font-size: 0.875rem;
}

.panel__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--paper);
  text-underline-offset: 0.3em;
}

/* The page behind the open menu does not scroll. */
.menu-open {
  overflow: hidden;
}

/* ---------- Links drawn as an oval ---------- */

/* An outlined oval, as wide as its words need. Used for the quieter calls to action. */
.oval {
  display: inline-flex;
  align-items: center;
  min-height: 3.75rem;
  padding: 0 2.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}

.oval:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Story ---------- */

.story {
  background: var(--paper);
}

.story__head {
  padding: clamp(7.5rem, 18vh, 10rem) var(--gutter) 2rem;
  text-align: center;
}

/* The brand line: "Günlük. Katkısız." over "Nitelikli üretim." */
.story__motto {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 9.6vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.story__row {
  display: block;
}

.story__pitch {
  max-width: 30rem;
  margin: 1.5rem auto 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.story__heading {
  margin: clamp(3.5rem, 10vh, 6rem) 0 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.story__lead {
  margin: 1rem 0 0;
  color: var(--ink-soft);
}

.story__count {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.story__count span {
  opacity: 0.74;
}

.story__title {
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.story__text {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Static version: shown without JavaScript and with reduced motion. */
.story__track {
  display: none;
}

.story__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) clamp(4rem, 12vh, 8rem);
  list-style: none;
}

.story__item img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
  border-radius: var(--corner);
}

.story__item .story__title {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Scroll-driven version. */
.js .story:not(.story--static) .story__head,
.js .story:not(.story--static) .story__list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.js .story:not(.story--static) .story__track {
  display: block;
  height: calc(100vh + var(--story-length) * 1vh);
  height: calc(100svh + var(--story-length) * 1vh);
}

.story__stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.story__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Fades in with its first frame, so the page does not open on a picture popping in. */
  opacity: 0;
  transition: opacity 0.8s;
}

.story__stage.is-drawn .story__canvas {
  opacity: 1;
}

.story__copy {
  position: absolute;
  z-index: 1;
  display: grid;
}

/* The opening lines and the six captions lie on top of each other; the stage shows one of them. */
.story__intro,
.story__chapters {
  grid-area: 1 / 1;
  min-width: 0;
}

/* The swap is animated only once the script has settled on a side, so a page that is
   reloaded in the middle of the story does not flash the opening lines. */
.story__stage.is-live .story__intro,
.story__stage.is-live .story__chapters {
  transition: opacity 0.35s, transform 0.5s var(--ease), visibility 0s 0.35s;
}

.story__stage.is-live.is-intro .story__intro,
.story__stage.is-live:not(.is-intro) .story__chapters {
  transition-delay: 0.1s, 0.1s, 0s;
}

.story__stage:not(.is-intro) .story__intro {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
}

.story__stage.is-intro .story__chapters {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
}

.story__stage.is-intro .story__caption {
  visibility: hidden;
}

.story__opening > *,
.story__begin {
  animation: opening-in 1s var(--ease) both;
}

.story__opening > :nth-child(2) { animation-delay: 0.08s; }
.story__opening > :nth-child(3) { animation-delay: 0.16s; }
.story__begin { animation-delay: 0.24s; }

@keyframes opening-in {
  from { opacity: 0; transform: translateY(1rem); }
}

.story__opening .story__motto {
  margin-top: 1.1rem;
}

.story__opening .story__pitch {
  max-width: none;
  margin: 1.25rem 0 0;
}

/* The way into the story: its name and an arrow that points down the page. */
.story__begin {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 2.75rem;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.story__begin svg {
  display: block;
  flex: none;
  animation: nudge 2.4s var(--ease) 1.4s infinite;
}

@keyframes nudge {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(0.3rem); }
}

.story__eyebrow {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story__captions {
  display: grid;
}

.story__caption {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.35s, transform 0.5s var(--ease), visibility 0s 0.35s;
}

.story__caption.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.1s, 0.1s, 0s;
}

.story__nav ol {
  display: flex;
  gap: 0.375rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.story__nav button {
  display: block;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: width 0.4s var(--ease);
}

.story__nav button[aria-current="step"] {
  width: 3.75rem;
}

.story__nav button span {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(92, 38, 26, 0.55);
}

.story__nav button span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.story__nav button:hover span {
  background: rgba(92, 38, 26, 0.75);
}

/* Wide: copy on the left, croissant on the right. */
.story__stage[data-layout="wide"] .story__copy {
  /* Centered in the space under the header. */
  top: calc(50% + 1.5rem);
  left: max(var(--gutter), env(safe-area-inset-left));
  width: min(22rem, 30vw);
  align-items: center;
  transform: translateY(-50%);
}

/* Sized so that each row of the brand line fits the column. */
.story__stage[data-layout="wide"] .story__motto {
  font-size: min(3.5rem, 4.7vw);
}

/* Large screens: a wider column, so the brand line can grow with the croissant. */
@media (min-width: 100rem) {
  .story__stage[data-layout="wide"] .story__copy {
    width: min(27rem, 30vw);
  }

  .story__stage[data-layout="wide"] .story__motto {
    font-size: min(4.5rem, 4.7vw);
  }
}

/* Stacked: croissant above, copy below. */
.story__stage[data-layout="stacked"] .story__copy {
  left: 50%;
  bottom: max(4vh, 1.25rem, env(safe-area-inset-bottom));
  width: min(30rem, calc(100% - 2 * var(--gutter)));
  align-items: end;
  transform: translateX(-50%);
  text-align: center;
}

.story__stage[data-layout="stacked"] .story__motto {
  font-size: clamp(2.1rem, 10.5vw, 3.75rem);
}

.story__stage[data-layout="stacked"] .story__opening .story__pitch {
  margin-top: 0.9rem;
}

.story__stage[data-layout="stacked"] .story__begin {
  margin-top: 0.5rem;
}

/* Short windows: the brand line alone, so the croissant keeps its room. */
@media (max-height: 37rem) {
  .story__opening .story__pitch {
    display: none;
  }

  .story__opening .eyebrow {
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}

.story__stage[data-layout="stacked"] .story__eyebrow {
  margin-bottom: 0.75rem;
}

.story__stage[data-layout="stacked"] .story__title {
  font-size: clamp(2.25rem, 10vw, 3.75rem);
}

.story__stage[data-layout="stacked"] .story__nav ol {
  justify-content: center;
  margin-top: 0.5rem;
}

@media (max-width: 43.75rem) {
  :root {
    --story-length: 485;
  }
}

/* ---------- Shared pieces ---------- */

/* Arch window: a photo behind an arched opening. The photo is taller than the opening,
   and the script moves it a little slower than the page. */
.arch {
  --foot: 1.75rem;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  /* The vertical radius is half the width, written as a share of the height: a true half circle. */
  border-radius: 50% 50% var(--foot) var(--foot) / 37.5% 37.5% var(--foot) var(--foot);
  background: rgba(92, 38, 26, 0.14);
}

.arch img {
  position: absolute;
  top: -8%;
  left: 0;
  display: block;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

/* The same window without the arch: plain rounded corners. The arch is kept for the branches. */
.arch--flat {
  border-radius: var(--corner);
}

/* Shows the whole photo, uncropped: no extra height and no movement. */
.arch--whole {
  aspect-ratio: auto;
}

.arch--whole img {
  position: static;
  height: auto;
}

/* ---------- Production: the butter card ---------- */

.atelier {
  padding: clamp(1rem, 5vh, 3rem) clamp(0.75rem, 2.5vw, 2rem) 0;
  background: var(--paper);
}

/* --inset is the space between the card's edge and the photo on wide screens;
   the card's corner radius is the photo's plus that space, so the two corners run parallel. */
.atelier__panel {
  --inset: 0.75rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vh, 3.5rem) clamp(1.25rem, 5vw, 2rem);
  border-radius: calc(var(--corner) + var(--inset));
  background: var(--blush);
}

.craft {
  display: grid;
  gap: 2.25rem;
}

.craft__title {
  max-width: 13em;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.craft__body {
  margin-top: 1.5rem;
}

.craft__body p {
  max-width: 34rem;
  margin: 0 0 1.1rem;
  color: rgba(92, 38, 26, 0.88);
  text-wrap: pretty;
}

.craft__body p:last-child {
  margin-bottom: 0;
}

.craft__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem 1.25rem;
  max-width: 30rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
}

.craft__facts dt {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.craft__facts dd {
  max-width: 12rem;
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Small screens: the photo is as wide as the text column, starting where the text starts. */
.craft__photo {
  width: min(100%, 28rem);
}

/* Wider screens: text on the left, the photo on the right, close to the card's edge. */
@media (min-width: 48rem) {
  .atelier__panel {
    padding: var(--inset);
  }

  .craft {
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 30%, 25rem);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .craft__copy {
    padding: 2rem 0 2rem clamp(1.25rem, 4vw, 3.75rem);
  }

  .craft__photo {
    width: 100%;
  }
}

/* ---------- Menu ---------- */

.menu {
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(5rem, 14vh, 9rem);
  background: var(--paper);
}

.menu__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
}

.menu__heading {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.menu__lead {
  max-width: 27rem;
  margin: 1.25rem 0 2rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.menu__photo {
  width: min(100%, 26rem);
  justify-self: center;
}

@media (min-width: 48rem) {
  .menu__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }
}

/* ---------- Branches ---------- */

.branches {
  /* The rounded corners show the page background, which matches the sections above and below. */
  border-radius: 2.5rem;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(3rem, 9vh, 6rem);
  background: var(--ink);
  color: var(--paper);
}

.branches__inner {
  max-width: 84rem;
  margin: 0 auto;
}

.branches__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

.branches .eyebrow {
  color: var(--blush);
}

.branches__heading {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.75rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.branches__lead {
  max-width: 21rem;
  margin: 0;
  color: var(--paper-soft);
  text-wrap: pretty;
}

/* Small screens: one row that scrolls sideways, the next card peeking in. */
.branches__list {
  display: flex;
  gap: 1rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.5rem var(--gutter) 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.branches__list::-webkit-scrollbar {
  display: none;
}

.branch {
  flex: 0 0 min(76vw, 21rem);
  scroll-snap-align: start;
}

.branch__link {
  position: relative;
  display: block;
  border-radius: 1.75rem;
  color: var(--paper);
  text-decoration: none;
}

.branch__link:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: 4px;
}

/* Warm glass, only ever on top of a photo. */
.branch__card {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  left: 0.625rem;
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem 0.9rem;
  border: 1px solid rgba(248, 242, 239, 0.22);
  border-radius: 1.2rem;
  background: rgba(92, 38, 26, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.3) brightness(0.85);
  backdrop-filter: blur(16px) saturate(1.3) brightness(0.85);
  transition: background-color 0.3s, border-color 0.3s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .branch__card {
    background: rgba(92, 38, 26, 0.88);
  }
}

.branch__name {
  font-family: var(--display);
  font-size: clamp(1.875rem, 2.6vw, 2.375rem);
  line-height: 1;
  text-transform: uppercase;
}

.branch__meta {
  font-size: 0.875rem;
  line-height: 1.35;
}

.branch__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  color: var(--blush);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.branch__icon {
  flex: none;
  transition: transform 0.3s var(--ease);
}

.branch__link:hover .branch__card {
  border-color: rgba(248, 242, 239, 0.45);
  background: rgba(92, 38, 26, 0.72);
}

.branch__link:hover .branch__icon {
  transform: translate(2px, -2px);
}

@media (min-width: 44rem) {
  .branches__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 68rem) {
  .branches__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
  }

  /* Every second arch sits lower, so the row reads as layers, not a grid. */
  .branch:nth-child(even) {
    margin-top: 3.5rem;
  }
}

/* ---------- Line-up: six sweet croissants, cut open, each with its name ---------- */

.lineup {
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 9vh, 6rem);
  background: var(--paper);
}

.lineup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lineup__heading {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.lineup__side {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 24rem;
}

.lineup__lead {
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Shown only where the row is wider than the screen. */
.lineup__hint {
  display: none;
  margin: 2rem 0 0;
  padding: 0 var(--gutter);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lineup__hint::after {
  content: " \2192";
}

.lineup__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lineup__scroll::-webkit-scrollbar {
  display: none;
}

.lineup__scroll:focus-visible {
  outline-offset: -3px;
}

/* The photo with room above and below it for the names. Never narrower than 60rem:
   on small screens the row scrolls sideways instead of shrinking. */
.lineup__canvas {
  width: max(100%, 60rem);
  max-width: 96rem;
  margin: 0 auto;
  padding: 10rem 0 9rem;
}

.lineup__stage {
  position: relative;
}

.lineup__photo {
  display: block;
  width: 100%;
  height: auto;
  /* The photo's backdrop is the page color; fading its ends hides the last trace of an edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
}

.lineup__list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One name: centered on its croissant (--x), with a thin line reaching to the top or the bottom of it (--y). */
.pick {
  --stem: 3rem;
  position: absolute;
  left: var(--x);
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: 12rem;
  margin-left: -6rem;
  text-align: center;
}

.pick::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: var(--stem);
  background: rgba(92, 38, 26, 0.6);
}

.pick--up {
  bottom: calc(100% - var(--y) + 0.5rem);
  padding-bottom: calc(var(--stem) + 0.75rem);
}

.pick--up::before {
  bottom: 0;
}

.pick--down {
  top: calc(var(--y) + 0.5rem);
  padding-top: calc(var(--stem) + 0.75rem);
}

.pick--down::before {
  top: 0;
}

.pick__group {
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pick__name {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}

.pick__text {
  max-width: 11rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.35;
  text-wrap: balance;
}

/* Small screens with the script running: the row is pinned while the page scrolls on, and slides
   sideways with it, from the first croissant to the last. The script sets the height of the track
   (how long the row stays pinned), --pan-h (the row's height) and the row's position. */
.lineup--pan .lineup__scroll {
  position: -webkit-sticky;
  position: sticky;
  top: max(calc(3.75rem + env(safe-area-inset-top)), calc((100vh - var(--pan-h, 30rem)) / 2));
  top: max(calc(3.75rem + env(safe-area-inset-top)), calc((100svh - var(--pan-h, 30rem)) / 2));
  overflow: hidden;
}

.lineup--pan .lineup__canvas {
  will-change: transform;
}

.lineup--pan .lineup__hint {
  display: none !important;
}

@media (max-width: 60rem) {
  .lineup__hint {
    display: block;
  }

  .lineup__canvas {
    padding-top: 9rem;
  }
}

/* ---------- Career: an outlined card with the kitchen video ---------- */

.career {
  padding: 0 clamp(0.75rem, 2.5vw, 2rem) clamp(4rem, 12vh, 8rem);
  background: var(--paper);
}

/* Built like the butter card, mirrored: the video sits close to the card's edge on the left. */
.career__card {
  --inset: 0.75rem;
  display: grid;
  gap: 1.5rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: var(--inset);
  border: 1px solid var(--ink-line);
  border-radius: calc(var(--corner) + var(--inset));
}

.career__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--corner);
  background: rgba(92, 38, 26, 0.14);
}

.career__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stops and restarts the video. */
.reel__toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(248, 242, 239, 0.5);
  border-radius: 50%;
  background: rgba(92, 38, 26, 0.55);
  color: var(--paper);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.reel__toggle[hidden] {
  display: none;
}

.reel__toggle::before {
  content: "";
  width: 0.625rem;
  height: 0.75rem;
  border: solid currentColor;
  border-width: 0 0.1875rem;
}

.reel__toggle[data-state="paused"]::before {
  width: 0.75rem;
  margin-left: 0.125rem;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.reel__toggle:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.career__copy {
  display: grid;
  justify-items: start;
  padding: 0.5rem 0.75rem 1.5rem;
}

.career__heading {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.career__text {
  max-width: 27rem;
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The three kinds of work: one line with dots on small screens, a numbered list on wide ones. */
.career__roles {
  display: flex;
  flex-wrap: wrap;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.career__roles li + li::before {
  content: "\00b7";
  content: "\00b7" / "";
  margin: 0 0.6em;
}

@media (min-width: 48rem) {
  .career__card {
    grid-template-columns: clamp(16rem, 30%, 25rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .career__copy {
    padding: 2rem clamp(1.25rem, 4vw, 3.75rem) 2rem 0;
  }
}

/* Wide screens: the video turns to a landscape crop, close to 16:9, and takes half of the card,
   from its top edge to its bottom edge. The text sits beside it with a larger headline. */
@media (min-width: 68rem) {
  .career__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .career__media {
    aspect-ratio: auto;
  }

  /* Keeps the video at least 16:10; it grows taller only if the text beside it needs the room. */
  .career__media::before {
    content: "";
    display: block;
    padding-top: 62.5%;
  }

  /* Which band of the upright video shows: a little below the middle, where the plates are. */
  .career__media video {
    object-position: 50% 58%;
  }

  .career__copy {
    align-self: center;
  }

  .career__heading {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
  }
}

/* ---------- Footer ---------- */

.foot {
  /* The dark block starts here; its rounded corners show the page color. */
  border-radius: 2.5rem 2.5rem 0 0;
  padding: clamp(1rem, 4vh, 2.5rem) var(--gutter) max(1.75rem, env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--paper);
}

.foot__inner {
  max-width: 84rem;
  margin: 0 auto;
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem clamp(2rem, 8vw, 7rem);
  padding: clamp(2rem, 6vh, 3.5rem) 0;
}

.foot__tag {
  margin: 1.25rem 0 0;
  color: var(--paper-soft);
  font-size: 0.9375rem;
}

.foot__nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2rem clamp(1.5rem, 5vw, 4.5rem);
}

.foot__title {
  margin: 0 0 0.5rem;
  color: var(--blush);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.foot__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: 0.9375rem;
  text-decoration: none;
}

.foot__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-line);
  color: var(--paper-soft);
  font-size: 0.8125rem;
}

.foot__legal p {
  margin: 0;
}

.foot__legal a {
  text-underline-offset: 0.3em;
}

.foot__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--paper-line);
  font-size: 0.9375rem;
}

.foot__group p {
  margin: 0;
}

@media (max-width: 30rem) {
  .foot__nav {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
}

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

  .story__caption,
  .story__nav button,
  .branch__card,
  .branch__icon,
  .nav,
  .nav::before,
  .nav__bar {
    transition: none;
  }

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

  .story__canvas,
  .story__stage.is-live .story__intro,
  .story__stage.is-live .story__chapters {
    transition: none;
  }

  .story__opening > *,
  .story__begin,
  .story__begin svg {
    animation: none;
  }

  .oval {
    transition: none;
  }

  .panel,
  .panel__links a {
    animation: none;
  }
}

/* Windows high contrast: masks painted with a background color would vanish. */
@media (forced-colors: active) {
  .logo,
  .story__nav button span::after {
    background: CanvasText;
  }

  .panel__close span::before,
  .panel__close span::after,
  .reel__toggle[data-state="paused"]::before {
    background: ButtonText;
  }


  .story__nav button span {
    background: GrayText;
  }

  .nav::before {
    background: Canvas;
  }
}