/* ─────────────────────────────────────────────────────────────────────────
   Beri — India
   Mobile first. Every media query is min-width; the phone layout is the one
   written without a query.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Sampled from the brand artwork, so the page and the photos agree. */
  --ground: #F5EBE1;   /* the cream every brand card sits on */
  --panel:  #FFFFFF;
  --ink:    #1C1310;
  --muted:  #68584F;   /* dark enough to clear AA on every sector ground */
  --berry:  #9E0B2F;   /* the wordmark crimson */

  /* Sticker pastels, from the brand's sticker sheet. Crimson handwriting on
     each clears WCAG AA. Lavender is left out: crimson on it only reaches
     4.26:1. */
  --pink:   #F7B4C8;
  --butter: #FCD885;
  --sage:   #C3D1B4;

  /* The footage is shot on #020202, not pure black. The hero matches it so
     the edge of the video panel does not show as a seam — on OLED, where
     #000 switches the pixel off entirely, the difference is plain. */
  --shot-black: #020202;

  /* Sector grounds: each pastel mixed a quarter of the way into the cream, so
     the sections read as their own blocks without turning into a rainbow. */
  --g-pink:   #F6DDDA;
  --g-butter: #F7E6C9;
  --g-sage:   #E8E4D5;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --hand:    "Gaegu", "Comic Sans MS", ui-rounded, cursive;

  --max: 1080px;
  --pad-x: clamp(1.25rem, 6vw, 4rem);
  --gap: clamp(4rem, 13vw, 7.5rem);   /* between blocks */
  --nav-h: 4.25rem;
  --track: 280vh;                     /* hero scroll length */

  --r-card: 22px;
  --r-pill: 999px;

  --lift: 0 24px 60px rgba(28, 19, 16, 0.10), 0 2px 6px rgba(28, 19, 16, 0.05);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48em) { :root { --r-card: 26px; --track: 300vh; } }

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

/* No sideways scroll anywhere. `clip` and not `hidden`, because `hidden`
   turns the root into a scroll container and breaks both sticky elements. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 3.6vw, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.018em;
}

h1 { font-size: clamp(2.5rem, 9.5vw, 4.6rem); max-width: 13ch; }
h2 { font-size: clamp(1.85rem, 6.6vw, 2.85rem); max-width: 16ch; }

p { margin: 0; max-width: 34rem; }

a { color: inherit; }

:focus-visible { outline: 2.5px solid var(--berry); outline-offset: 3px; border-radius: 4px; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  padding: 0.8rem 1.1rem; background: var(--ink); color: #fff; font-weight: 500;
}
.skip:focus { left: 0; }

/* Every band is full width so backgrounds reach the edges, while the content
   inside stays on one measure. */
.nav, .lede, .blk, .social, .order, .foot {
  padding-inline: max(var(--pad-x), calc((100% - var(--max)) / 2));
}

/* ── nav ─────────────────────────────────────────────────────────────────*/

/* The hero runs to all four edges, so the nav would sit on top of the video.
   It waits until the pour is done and then drops in. Scripting off: it is
   there from the start (see the noscript block in index.html). */
.js .nav { transform: translateY(-105%); }
.js .nav.is-up { transform: none; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.45s var(--ease);
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(245, 235, 225, 0.9);
  border-bottom: 1px solid rgba(28, 19, 16, 0.06);
}

@supports (backdrop-filter: blur(12px)) {
  .nav { background: rgba(245, 235, 225, 0.74); backdrop-filter: blur(14px); }
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* the tap target, taller than the logo */
}
.nav__mark img { height: 2.75rem; width: auto; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* 44px */
  padding: 0 1.35rem;
  border-radius: var(--r-pill);
  background: var(--berry);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__cta:hover { background: var(--ink); transform: translateY(-1px); }

/* ── cards ───────────────────────────────────────────────────────────────*/

.card {
  position: relative;
  margin: 0 0 1.6rem;
  isolation: isolate;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--lift);
}

.card__media { width: 100%; height: 100%; object-fit: cover; }

/* The slot keeps each picture's own proportions, so nothing gets cropped. If
   a file is missing it shows a dashed box naming what belongs there. */
.slot { position: relative; aspect-ratio: var(--ar, 4 / 5); }
.slot::after {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1.5rem;
  border: 1.5px dashed rgba(28, 19, 16, 0.18);
  border-radius: var(--r-card);
  color: var(--muted); font-size: 0.875rem; text-align: center;
}
.slot.is-filled::after, .slot:not([data-slot])::after { content: none; }
.slot img[hidden] { display: none; }

/* ── handwritten labels ──────────────────────────────────────────────────
   Stickers, exactly as the brand uses them: pastel ground, crimson hand. */

.tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.85rem 0.4rem;
  border-radius: 6px;
  color: var(--berry);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  transform: rotate(-1.6deg);
}

.tag--pink   { background: var(--pink); }
.tag--butter { background: var(--butter); transform: rotate(1.2deg); }
.tag--sage   { background: var(--sage); transform: rotate(-0.8deg); }

.tag--onCard {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  left: 0.9rem;
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.note {
  display: block;
  width: fit-content;
  margin-top: 1.25rem;
  color: var(--berry);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  transform: rotate(-1deg);
}
.note--top { margin: 0 0 0.35rem; }

/* ── hero ────────────────────────────────────────────────────────────────
   Full bleed: no card, no radius, no margin. The video is the screen. The
   track is tall and the frame sticks to the top, so scrolling the track is
   what advances the pour. */

.hero { position: relative; height: var(--track); background: var(--shot-black); }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.hero__frame {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--shot-black);
}

/* On a phone the video fills the screen edge to edge. The subject is centred
   and the frame is 9:16, so covering a taller phone only trims the sides. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* A wide screen is nothing like 9:16. Containing the footage in the middle of
   it leaves a narrow strip floating in dead black, so from here the hero is a
   composition instead: the video is a full-height column down one side, sized
   to its own ratio so nothing is cropped, and the narration takes the space
   the video cannot fill. */
@media (min-width: 52em) {
  .hero__frame {
    display: grid;
    grid-template-columns: 1fr min(54%, calc(100svh * 9 / 16));
    align-items: center;
    /* The narration lines up with the body copy of every section below; the
       video column runs off the right edge. */
    padding-left: max(var(--pad-x), calc((100% - var(--max)) / 2));
    padding-block: clamp(1.5rem, 4vh, 3rem);
  }

  .hero__video {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }

  /* The caption sits on plain black beside the video, so it needs no scrim. */
  .hero__frame::after { content: none; }
}

/* The white pour sends drips down through the caption, and cream lettering
   over white chocolate disappears. This gives the words their own ground. */
.hero__frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.tag--onHero {
  position: absolute;
  z-index: 3;
  top: max(1.1rem, env(safe-area-inset-top));
  left: var(--pad-x);
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* Stage captions: cream handwriting on the black, one at a time. */
.hero__say {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 4.2rem;
  display: grid;
  pointer-events: none;
}

.hero__say span {
  grid-area: 1 / 1;
  align-self: end;
  color: #F5EBE1;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(0.35rem) rotate(-1.5deg);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.hero__say span.is-on { opacity: 1; transform: rotate(-1.5deg); }

.hero__cue {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  margin: 0;
  color: rgba(245, 235, 225, 0.72);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.2rem;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.hero.is-moving .hero__cue { opacity: 0; }

/* How much of the pour is left, so the scroll visibly has an end. */
.hero__progress {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(245, 235, 225, 0.16);
}
.hero__progress span {
  display: block;
  height: 100%;
  background: var(--pink);
  transform-origin: left;
  transform: scaleX(0);
}

/* In the split layout the narration is the left column: it is the only thing
   in that space, so it carries it at full size. */
@media (min-width: 52em) {
  .tag--onHero {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin: 0 0 auto;
    padding-top: 0.3rem;
  }

  /* One line of handwriting lost in that much space reads as an accident.
     Set large and allowed to wrap, it becomes the other half of the hero. */
  .hero__say {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: 11ch;
    padding-right: clamp(2rem, 5vw, 4rem);
  }
  .hero__say span { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 0.98; }

  .hero__cue {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-top: auto;
    padding-bottom: 0.4rem;
  }

  /* Three things share one grid cell, each pinned to its own edge of it. */
  .hero__frame > .tag--onHero,
  .hero__frame > .hero__cue { width: fit-content; }
}

/* Scrubbing is off (slow connection, data saver, reduced motion, or the video
   failed): the hero becomes a normal picture of the finished piece, and the
   track collapses so nobody scrolls through screens of nothing. */
/* A fixed nav reserves no space, which is what lets the video run to the top
   edge. In still mode there is no scroll animation and the nav is up from the
   start, so the hero has to leave room for it. */
.hero.is-still { height: auto; padding-top: var(--nav-h); background: var(--ground); }
.hero.is-still .hero__stage { position: static; height: auto; }
.hero.is-still .hero__frame { height: auto; aspect-ratio: 4 / 5; }
.hero.is-still .hero__cue,
.hero.is-still .hero__progress { display: none; }

@media (min-width: 46em) {
  .hero.is-still .hero__frame { aspect-ratio: 16 / 9; }
}

/* ── opening ─────────────────────────────────────────────────────────────*/

.lede { padding-block: clamp(3rem, 10vw, 5rem) var(--gap); background: var(--ground); }
.lede h1 { margin-bottom: 1.1rem; }
.lede__p { color: var(--muted); margin-bottom: 2rem; }

/* ── blocks ──────────────────────────────────────────────────────────────*/

/* Each block is its own sector: a band of colour running the full width, with
   the content on the same measure as everywhere else. The colour change is
   the divider — no rules needed between them. */
.blk { padding-block: var(--gap); background: var(--ground); }
.blk--pink { background: var(--g-pink); }
.blk--sage { background: var(--g-sage); }

.blk h2 { margin-bottom: 0.85rem; }
.blk p { color: var(--muted); }

/* Wide enough for picture and words side by side. The sides swap on the
   middle block so the page does not march down one edge. */
@media (min-width: 60em) {
  .blk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Spacer rows take the height the card does not need, so the text stays
       a tight group centred on the picture. */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(3rem, 6vw, 5.5rem);
  }
  /* Capped so the artwork is never blown far past its own resolution. */
  .blk > .card { grid-column: 1; grid-row: 1 / -1; align-self: center; width: min(100%, 30rem); justify-self: end; margin-bottom: 0; }
  .blk > .tag  { grid-column: 2; grid-row: 2; justify-self: start; }
  .blk > h2    { grid-column: 2; grid-row: 3; }
  .blk > p     { grid-column: 2; grid-row: 4; }

  .blk--flip > .card { grid-column: 2; justify-self: start; }
  .blk--flip > .tag,
  .blk--flip > h2,
  .blk--flip > p { grid-column: 1; }
}

/* ── social ──────────────────────────────────────────────────────────────*/

.social { padding-block: var(--gap); background: var(--g-butter); }
.social h2 { margin-bottom: 0.7rem; }
.social__p { color: var(--muted); margin-bottom: 1.6rem; }

/* A preview of the feed, laid out the way Instagram lays it out: three
   across, square, hairline gaps. The whole grid is one link. */
.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 1.4rem;
  background: var(--panel);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--lift);
  max-width: 40rem;
  text-decoration: none;
}

.feed img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.feed:hover img { transform: scale(1.02); }

/* The sixth cell is the invitation, lettered like one of the brand's own
   stickers rather than filled with a repeated photo. */
.feed__more {
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;
  background: var(--butter);
  color: var(--berry);
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 1.5rem);
  line-height: 1.05;
  text-align: center;
  transform: none;
}
.feed__heart { display: inline-block; transform: rotate(-10deg); }

.social__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Raised white pill: the same object as the buttons, but quieter, because
   following somebody is a smaller ask than ordering from them. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;                 /* 48px */
  padding: 0 1.35rem;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(28, 19, 16, 0.09), 0 1px 3px rgba(28, 19, 16, 0.06);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(28, 19, 16, 0.14), 0 1px 3px rgba(28, 19, 16, 0.06);
}
.pill__icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* On the narrowest phones the two pills share the row instead of stacking. */
@media (max-width: 23em) {
  .social__row { flex-wrap: nowrap; gap: 0.6rem; }
  .pill { flex: 1 1 0; justify-content: center; padding: 0 0.8rem; }
}

/* ── order ───────────────────────────────────────────────────────────────*/

.order { padding-block: var(--gap); background: var(--ground); }

/* The brand's own crimson card, cream lettering on it. */
.order__card {
  position: relative;
  padding: clamp(1.5rem, 6.5vw, 3.5rem);
  border-radius: 26px;
  background: var(--berry);
  color: var(--ground);
  box-shadow: 0 30px 70px rgba(158, 11, 47, 0.26);
}

/* Two strips of tape holding the card to the page. */
.order__tape {
  position: absolute;
  top: -0.7rem;
  width: 5.5rem;
  height: 1.6rem;
  background: rgba(255, 255, 255, 0.55);
}
.order__tape--l { left: 1.6rem; transform: rotate(-6deg); }
.order__tape--r { right: 2rem; transform: rotate(5deg); }

.order__card .note { color: var(--pink); margin: 0 0 0.35rem; }
.order__card h2 { margin-bottom: 0.9rem; }
.order__p { color: rgba(245, 235, 225, 0.92); margin-bottom: 1.9rem; }
.order__fine { margin-top: 1.1rem; color: rgba(245, 235, 225, 0.8); font-size: 0.9375rem; }

/* ── buttons ─────────────────────────────────────────────────────────────*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;              /* 52px */
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(28, 19, 16, 0.20);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: #2E201A; }
.btn__icon { width: 1.3rem; height: 1.3rem; flex: none; }

/* Full width on a phone: the easiest possible target for a thumb. The side
   padding comes in so the label stays on one line inside the order card. */
@media (max-width: 32em) { .btn { display: flex; width: 100%; padding-inline: 1.1rem; } }
@media (min-width: 40em) { .btn--wide { width: auto; } }

/* ── footer ──────────────────────────────────────────────────────────────*/

.foot {
  padding-block: 3rem max(3.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(28, 19, 16, 0.08);
  text-align: center;
}

.foot__mark { margin: 0 auto 0.8rem; width: fit-content; }
.foot__mark img { height: 2.5rem; width: auto; }

.foot__line { margin: 0 auto 1.1rem; color: var(--muted); font-size: 0.9375rem; }

.foot__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  text-decoration-color: rgba(28, 19, 16, 0.25);
  text-underline-offset: 0.25em;
}
.foot__links a:hover { text-decoration-color: currentColor; }

/* Copy the client still has to supply. */
.ph { border-bottom: 1px dashed currentColor; opacity: 0.85; }

/* ── reduced motion ──────────────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tag, .note, .hero__say span { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}