/* ==========================================================================
   Rashtions — editorial monograph
   Cream paper stock, espresso ink, label geometry as structure.
   ========================================================================== */

:root{
  /* paper + ink */
  --paper:#F4EFE5;
  --paper-2:#EAE2D3;
  --ink:#221913;
  --ink-60:rgba(34,25,19,.62);
  --ink-30:rgba(34,25,19,.30);
  --ink-12:rgba(34,25,19,.12);
  --rust:#8A4B32;

  /* flavour zones, pulled off the labels */
  --cocoa:#7A5240;
  --coffee:#48685A;
  --truffle:#6B4A78;
  --original:#3F5C84;
  --dark:#1B1410;

  /* live zone tokens — GSAP drives these */
  --zone-bg:var(--paper);
  --zone-ink:var(--ink);

  --runway:450vh;   /* 0.86 of it is film — see FILM_END in js/site.js */
  --gut:clamp(20px,5vw,96px);

  --display:"Fraunces",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",sans-serif;
  --arabic:"Noto Kufi Arabic",var(--ui);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:var(--zone-bg);
  color:var(--zone-ink);
  font-family:var(--ui);
  font-size:16px;
  overflow-x:hidden;
  transition:background-color .55s ease,color .55s ease;
}
img{max-width:100%;display:block}
::selection{background:var(--rust);color:var(--paper)}

/* paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.label{
  margin:0 0 18px;
  font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--rust);
}
.display{
  font-family:var(--display);
  font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  line-height:.94;letter-spacing:-.025em;
  margin:0;
}
.lede{
  font-size:clamp(15px,1.15vw,18px);line-height:1.66;
  color:var(--ink-60);max-width:46ch;margin:0;
}

/* geometric rule, drawn from the label tiles */
.rule{
  height:26px;width:100%;border:0;margin:0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px, currentColor 14px 15px, transparent 15px 30px);
  opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .7s ease,visibility .7s ease;
  overflow:hidden;isolation:isolate;
}
.loader::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  opacity:.1;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__mark{height:clamp(34px,4.6vw,48px);width:auto}
.loader__bar{width:min(220px,46vw);height:1px;background:var(--ink-12);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0%;background:var(--rust)}
.loader__pct{font-size:.62rem;letter-spacing:.24em;color:var(--ink-30);font-variant-numeric:tabular-nums}

/* ---------- topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gut);
  color:var(--ink);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition:background-color .45s ease, border-color .45s ease;
}
.topbar__logo{height:24px;width:auto}
.topbar__nav{display:flex;gap:clamp(16px,2.2vw,32px)}
.topbar__nav a{
  color:currentColor;text-decoration:none;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  opacity:.8;transition:opacity .3s ease;
}
.topbar__nav a:hover{opacity:1}

/* ==========================================================================
   HERO
   ========================================================================== */
/* nothing an element does off the right edge may ever scroll the page */
html,body{overflow-x:clip}

.hero{position:relative;height:var(--runway)}
.hero__stage{
  position:sticky;top:0;height:100svh;width:100%;
  /* --paper, not the film's own #F4F2EF: this ground is only ever seen once
     the film has dissolved off it, and at that moment it has to be the same
     floor the story below is standing on. */
  overflow:hidden;background:var(--paper);
}
/* The same tile field the story, bundles, gift and FAQ walls use, so the film
   dissolves into the page's own floor rather than a blank white screen.
   --hero-tile-y is driven per frame from js/site.js instead of by
   alignTiles(): the stage is sticky, so its document position changes as it
   pins and releases, and the phase has to follow it to stay locked to the
   same document-wide grid every other tiled section sits on. */
.hero__stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--hero-tile-x,0) var(--hero-tile-y,0);
  opacity:.1;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;will-change:opacity}

/* The handoff flyer: a real element, not part of the canvas, that
 * js/site.js (paintFlyer) drives from a rect projected out of the film's own
 * coordinates to #storyDates — see the comment on the <img> in index.html.
 * It is laid out at the cutout's own pixel size and moved by transform alone,
 * so a frame of the flight costs a matrix and never a layout. It is pinned
 * exactly to scroll position with zero lag in either direction. */
.hero__flyer{
  position:fixed;top:0;left:0;
  width:603px;height:382px;   /* FLYER_SRC_BOX's own pixels, scaled by transform */
  opacity:0;z-index:20;pointer-events:none;
  transform-origin:50% 50%;will-change:transform,opacity;
  /* matches .story__ings-item img's shadow, so the flyer doesn't read as a
     flat cutout next to its five already-shadowed, already-landed siblings */
  filter:drop-shadow(0 20px 26px rgba(27,20,16,.16));
}

.beats{
  position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  width:min(36ch,44vw);z-index:4;pointer-events:none;
}
.beat{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);opacity:0;will-change:opacity,transform}

/* There is no wash over the film any more. The type carries its own
   legibility instead: a paper-coloured halo that only exists within a few
   pixels of each glyph. Behind this block the film is bright for most of its
   length — median luminance about 200 against ink at 26 — so paper on paper
   is invisible there and the footage plays at full strength. Where a jar lid,
   a coffee bean or the burst passes behind a line and the background drops
   into the 90s, the halo is what holds the contrast up. It costs a hairline
   around the letterforms rather than a slab across a quarter of the frame. */
.beat{
  text-shadow:
    0 0 2px  rgba(244,239,229,.92),
    0 0 9px  rgba(244,239,229,.75),
    0 0 24px rgba(244,239,229,.55),
    0 0 48px rgba(244,239,229,.32);
}
.beat__k{
  margin:0 0 16px;font-size:.64rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rust);
}
.beat__h{
  font-family:var(--display);font-weight:300;
  font-size:clamp(40px,5.4vw,88px);line-height:.9;letter-spacing:-.03em;
  margin:0 0 20px;
  /* the display line runs to 88px, so its halo is scaled to the glyph size —
     a 9px blur that reads as an edge on 15px body copy vanishes on this */
  text-shadow:
    0 0 3px  rgba(244,239,229,.92),
    0 0 15px rgba(244,239,229,.75),
    0 0 38px rgba(244,239,229,.55),
    0 0 76px rgba(244,239,229,.32);
}
.beat__p{
  margin:0;max-width:34ch;font-size:clamp(15px,1.3vw,19px);
  line-height:1.6;
  /* --ink-60 is a translucent ink: with the wash gone the film would show
     through the strokes themselves, which no halo can fix. Same tone on
     paper, but opaque, and pulled darker for the film's mid greys. */
  color:color-mix(in srgb, var(--ink) 78%, var(--paper));
}
.beat__p b{font-weight:600;color:var(--ink)}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  text-decoration:none;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:18px 34px;
  transition:background-color .3s ease,transform .3s ease;
}
.btn:hover{background:var(--rust);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:currentColor;border:1px solid currentColor}
.btn--ghost:hover{background:currentColor;color:var(--zone-bg)}
/* the buy button: solid paper on the flavour stage's coloured ground, so the
   one action that earns money is also the heaviest mark on the screen */
.btn--buy{background:var(--paper);color:#1B1410}
.btn--buy:hover{background:var(--rust);color:var(--paper)}

/* The jump to the flavours, dead centre at the foot of the film. It is the
   only way past the hero for someone who does not want to scroll the whole
   reel, so it is a solid fill rather than a ghost: over footage this bright,
   a bordered transparent button would disappear. js/site.js fades it on the
   same curve as the film itself, so it leaves when the footage does instead
   of hanging over the blank paper the dates fly across. */
.herocta{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(24px,4.5vh,48px);z-index:6;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;white-space:nowrap;
  transition:background-color .3s ease,transform .3s ease;
}
.herocta:hover{background:var(--rust);transform:translateX(-50%) translateY(-2px)}
.herocta:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.scrollcue{
  position:absolute;right:var(--gut);bottom:clamp(24px,4.5vh,48px);z-index:6;
  display:flex;align-items:center;gap:11px;
  font-size:.6rem;letter-spacing:.26em;color:var(--ink-30);text-transform:uppercase;
}
.scrollcue span{
  width:32px;height:1px;background:currentColor;display:block;
  transform-origin:left center;animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* ==========================================================================
   INGREDIENTS — pinned chapter
   ========================================================================== */

/* ==========================================================================
   FLAVOURS — colour-flooded panels
   ========================================================================== */
.flavours{position:relative}
.flavour{
  position:relative;min-height:100svh;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(30px,5vw,90px);
  padding:clamp(70px,10vh,120px) var(--gut);
  color:#F6F1E7;
  overflow:hidden;
  isolation:isolate;
}
.flavour__tile{
  position:absolute;inset:-12% -6%;z-index:-2;
  background-repeat:repeat;background-size:clamp(280px,26vw,460px);
  opacity:.13;will-change:transform;
}
.flavour::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(0,0,0,.34) 100%);
}
.flavour--cocoa{background:var(--cocoa)}
.flavour--coffee{background:var(--coffee)}
.flavour--truffle{background:var(--truffle)}
.flavour--original{background:var(--original)}

.flavour:nth-child(even) .flavour__media{order:-1}

.flavour__media{display:flex;justify-content:center;will-change:transform}
.flavour__media img{
  width:clamp(200px,26vw,380px);height:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.42));
}
.flavour__body{max-width:38ch}
.flavour__idx{
  font-family:var(--display);font-size:.9rem;opacity:.55;
  letter-spacing:.04em;margin:0 0 18px;
}
.flavour__h{font-size:clamp(40px,5.4vw,88px);margin:0 0 20px}
.flavour__p{font-size:clamp(14px,1.1vw,17px);line-height:1.7;opacity:.82;margin:0 0 30px;max-width:36ch}
.flavour__meta{
  display:flex;gap:clamp(20px,3vw,44px);margin:0 0 34px;
  padding-top:22px;border-top:1px solid rgba(246,241,231,.24);
}
.flavour__meta div{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.flavour__meta b{
  display:block;font-family:var(--display);font-size:1.6rem;font-weight:500;
  letter-spacing:-.02em;opacity:1;margin-top:8px;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}

/* Gifting styles live in components.css (two-act reveal + carousel); the old
   grid block here was silently turning the acts into side-by-side columns. */

/* ==========================================================================
   FOLLOW ON INSTAGRAM
   The one section that borrows a colour that isn't the brand's own — the
   platform's, not a flavour's, because the point here is Instagram itself.
   ========================================================================== */
.social{
  position:relative;isolation:isolate;overflow:hidden;
  /* the copy column carries a 44px headline beside a 130px button, so it gets
     the wider share; the card is capped at 460px anyway, so on wide screens
     this changes nothing and only buys the headline room at mid widths */
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  align-items:center;gap:clamp(28px,4vw,80px);
  padding:var(--social-pad) var(--gut);
  color:#fff;
  /* named because .social__copy has to discount it: the copy sits in the grid's
     content box while the button is absolute against the section's padding box,
     and the two only sit on one line once the copy subtracts the padding */
  --social-pad:clamp(80px,12vh,160px);
  /* the widely-used approximation of the app icon's own gradient */
  background:radial-gradient(120% 130% at 12% 108%,
    #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285AEB 92%);
  /* single source of truth for the video's own box, so .social__follow can
     find the fingertip in the pointing pose without duplicating the maths */
  --jar-w:clamp(220px,26vw,460px);
  --jar-right:clamp(10px,4vw,60px);
  --jar-h:calc(var(--jar-w) * 720 / 624);
  /* the button is given this width rather than left to size itself, so the
     copy above it can be placed off the same edge and actually line up */
  --follow-w:130px;
  /* the fingertip's own distance in from the section's right edge — the one
     number the button and the copy above it are both hung from */
  --finger-x:calc(var(--jar-right) + var(--jar-w) * .968);
}
.social::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* the brand's own tile, tinted through Instagram's colour rather than
     stamped in brown on top of it — same trick as .gift::after */
  background:url(../assets/theme-blue.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--social-tile-x,0) var(--social-tile-y,0);
  mix-blend-mode:overlay;opacity:.5;
}
.social > *{position:relative;z-index:1}
/* Dropped out of the grid's centre onto the same floor line the figure stands
   on: he's pinned to the section's bottom edge, which sits a --social-pad below
   the grid's own content box, so the card gives that padding back as negative
   margin. His soles aren't on that edge either — the video keeps 2.9% of its
   height as clear frame under them — so the card is lifted by the same share
   and the two sit on one line. It keeps its full size; the section simply ends
   where both of them do, which also brings its top back down into view. */
.social__widget{
  background:#FDFBF6;border-radius:14px;aspect-ratio:5/6;max-width:460px;
  width:100%;overflow:hidden;box-shadow:0 30px 70px rgba(20,10,30,.35);
  align-self:end;margin-bottom:calc(var(--jar-h) * .029 - var(--social-pad));
  /* the card's own margin, so the widget's avatar and captions aren't run up
     against the edge. It's a border rather than padding because the iframe is
     deliberately taller than the card (see below) and overflow:hidden clips at
     the padding edge — padding would sit *inside* the clip and the frame would
     simply bleed through it at the bottom. A border is outside that region, so
     the same figure holds on all four sides. box-sizing:border-box keeps the
     outer 5:6 box, and with it the figure's floor line, exactly where it was. */
  border:var(--widget-inset) solid #FDFBF6;
  --widget-inset:16px;
}
/* the iframe is cross-origin — can't reach in and remove Elfsight's own
   "free widget" badge from its DOM, so instead it's run taller than the
   visible card and pinned to the top; the badge, which sits at the bottom
   of the iframe's own page, ends up past the card's edge and .social__widget's
   overflow:hidden crops it off along with some of the trailing post image.
   scrolling="no" in the markup goes with this: the card's inset takes 32px off
   the frame's width, Elfsight's own layout reflows a little taller for it, and
   without it the frame answers by showing its own scrollbar down the crop. */
.social__widget-frame{
  display:block;position:absolute;top:0;left:0;
  width:100%;height:calc(100% + 110px);border:0;
}
.social__handle{
  display:flex;align-items:center;gap:8px;margin:0 0 18px;
  font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  opacity:.92;
}
/* no more .social__follow sitting under it holding the block down, so the
   headline can drop straight to the widget's own optical centre instead of
   the old middle-of-three-lines position */
.social__h{font-size:clamp(22px,3vw,44px);margin:0}
/* The copy sits immediately left of the button and on its line, so the two
   read as one phrase the hand is pointing at.
   padding-right clears the button, its 20px fingertip gap and the 28px the
   text keeps off it, less the section's own gutter (the grid's box already
   stops a gutter short of the edge).
   padding-bottom lands the copy's last line flush with the button's bottom
   edge — the button's own .678 - 25px, less the section padding the grid box
   sits inside. The text itself reads left to right, so it starts at the
   column's left edge and the padding is only there to stop it running into
   the button. */
.social__copy{
  align-self:end;
  padding-right:calc(var(--finger-x) + 20px + var(--follow-w) + 20px - var(--gut));
  padding-bottom:calc(var(--jar-h) * .678 - 25px - var(--social-pad));
}
.social__jar{
  display:block;position:absolute;z-index:1;right:var(--jar-right);bottom:0;
  width:var(--jar-w);height:auto;aspect-ratio:624/720;object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(15,5,20,.4));
}
/* Pinned to the pointing hand's own fingertip, measured off the frames the
   loop actually holds: 3.21% in from the video box's left edge, 32.18% down
   from its top, so 1 - those for the offsets below. The finger runs level
   (it rises ~3° over its length), so the ray leaves the fingertip sideways
   and enters the button through the middle of its right edge — hence the
   two flat px terms, both real button geometry rather than fudge: 25px is
   half its fixed 50px height, 20px the gap that keeps the fingertip off
   the border. The fractions carry the tracking at any viewport width. */
.social__follow{
  position:absolute;z-index:2;
  width:var(--follow-w);text-align:center;
  right:calc(var(--finger-x) + 20px);
  bottom:calc(var(--jar-h) * .678 - 25px);
}
.social .btn--ghost:hover{background:var(--rust);border-color:var(--rust);color:#fff}
/* stacks earlier than the page's usual 860: the figure takes 26vw and the
   button another 130px out of the copy's column, so below about a thousand
   the headline is left breaking into orphans beside them */
@media (max-width:1000px){
  .social{grid-template-columns:1fr;justify-items:center;text-align:center}
  .social__handle{justify-content:center}
  /* nothing to sit level with once the figure is in flow below the card */
  .social__widget{align-self:auto;margin-bottom:0}
  /* the fingertip offsets don't apply once the video drops into normal flow */
  .social__copy{padding-right:0;padding-bottom:0}
  .social__jar{position:relative;right:auto;bottom:auto;margin-top:24px;width:clamp(180px,58vw,300px)}
  /* the pointing hand isn't reliably positioned once the jar drops into
     normal flow below the copy, so the button rejoins the text stack here */
  .social__follow{position:relative;right:auto;bottom:auto;margin-top:8px}
}

/* ==========================================================================
   FAQ — editorial rules, no boxes
   ========================================================================== */
.faq{
  position:relative;overflow:clip;isolation:isolate;
  padding:clamp(80px,13vh,170px) var(--gut) clamp(60px,9vh,110px);
  background:var(--paper);
}
/* the same tile walls the story scene stands in — one pattern, one house */
.faq::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(../assets/theme-brown.png) repeat;
  background-size:clamp(280px,26vw,460px);
  background-position:var(--faq-tile-x,0) var(--faq-tile-y,0);
  opacity:.1;
}
.faq__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,6vh,70px)}
.faq__h{font-size:clamp(38px,5.4vw,86px);margin:20px 0 0}
/* the questions sit on a cream card, the same paper the label card uses */
.faq__list{
  background:#FDFBF6;border:1px solid var(--ink-12);
  box-shadow:0 20px 44px rgba(27,20,16,.08);
  padding:0 clamp(24px,3vw,46px);
}
.faq__item{border-bottom:1px solid var(--ink-12)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(22px,3.2vh,34px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2.1vw,30px);line-height:1.25;letter-spacing:-.015em;
  color:var(--zone-ink);
  transition:color .3s ease;
}
.faq__q:hover{color:var(--rust)}
.faq__q i{
  flex:none;width:16px;height:16px;position:relative;opacity:.5;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;background:currentColor;
  left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);
}
.faq__q i::after{transform:translateY(-50%) rotate(90deg);transition:opacity .35s ease}
.faq__item.is-open .faq__q i{transform:rotate(135deg)}
.faq__a{overflow:hidden;height:0}
.faq__a p{margin:0 0 clamp(22px,3.2vh,34px);max-width:60ch;line-height:1.72;color:var(--ink-60)}

/* ==========================================================================
   NEWSLETTER + FOOTER
   ========================================================================== */
/* Was two half-width columns centred in tall padding — 61% of the block was
   empty. Now the heading and the field sit on a shared baseline, the field runs
   the full width of its column as a rule rather than a stubby 460px box, and
   the padding is spent on the content instead of around it. */
/* .signup__form survives in the footer; the standalone band is gone */
.signup__form{
  display:flex;gap:0;align-items:baseline;width:100%;
  border-bottom:1px solid var(--ink);
}
.signup__form input{
  flex:1;min-width:0;background:none;border:0;outline:none;padding:20px 2px;
  font-family:var(--ui);font-size:1.05rem;color:var(--zone-ink);
}
.signup__form input::placeholder{color:var(--ink-30)}
.signup__form button{
  background:none;border:0;cursor:pointer;padding:16px 4px 16px 20px;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);
}

.foot{
  padding:clamp(40px,6vh,70px) var(--gut);
  border-top:1px solid var(--ink-12);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-30);
  background:var(--paper);
}
.foot__ar{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:.8rem}

/* ==========================================================================
   reveal primitives
   ========================================================================== */
.r-up{opacity:0;transform:translateY(26px);will-change:transform,opacity}
.r-left{opacity:0;transform:translateX(-38px);will-change:transform,opacity}
.r-right{opacity:0;transform:translateX(38px);will-change:transform,opacity}
.r-scale{opacity:0;transform:scale(.93);will-change:transform,opacity}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:980px){
  .flavour{grid-template-columns:1fr;text-align:left;min-height:auto;gap:34px}
  .flavour:nth-child(even) .flavour__media{order:0}
  .gift{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--runway:360vh}
  .beats{left:0;right:0;width:auto;top:auto;bottom:16vh;transform:none;padding:0 24px}
  .beat{position:absolute;bottom:0;top:auto;transform:none;padding:0 24px;left:0}
  /* the copy occupies the foot of the screen here, so the cue would collide */
  .scrollcue{display:none}
  .herocta{bottom:clamp(16px,3vh,28px);padding:13px 22px;font-size:.6rem}
  .topbar__nav{display:none}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .scrollcue span{animation:none}
  .r-up,.r-left,.r-right,.r-scale{opacity:1;transform:none}
}