/* ==========================================================================
   Na Mesa — one-page prototype
   Built from three Figma frames on a shared 7838-unit-wide canvas:
     Frame 15  the hero            (7838 x 4396)
     Frame 16  "Feito em casa"     (7838 x 4396, pink band)
     Frame 17  everything below    (7838 x 17190)
   Every size and position below is measured off those frames and expressed
   as a share of viewport width — 1 comp unit = 100/7838 vw = 0.012759vw —
   so the page keeps the comp's proportions at any width.
   ========================================================================== */

:root {
  --paper:      #FAF5E7;
  --ink:        #4B301F;   /* the brown everything is drawn in */
  --ink-soft:   #4B211F;   /* the slightly redder brown of the running text */
  --star:       #D6988B;   /* the rose below — the sky is drawn in it too */
  --star-glow:  transparent;
  --flame-glow: transparent;

  /* section palette, straight off Frames 16/17 */
  --pink:       #E4C1B5;   /* the band's #D1958B at 54% flattened onto paper */
  --rose:       #D6988B;   /* footer logo + the tiled table strip */
  --green:      #54732D;   /* filled pills */
  --green-dark: #0D4943;   /* the script line and its outline pill */
  --cocoa:      #4B211F;   /* the dark "A lojinha" band */
  --on-cocoa:   #FAF5E7;   /* type on that band — not --paper, which inverts */
  --olive:      #6E7A03;

  /* Every face was fitted to the comp rather than guessed: Sometype Mono 700
     reproduces the nav's advance-to-cap-height ratio (0.892 vs 0.906),
     Instrument Serif matches the running text's relative string widths to
     within 0.5%, and Big Shoulders Display is the only condensed face that
     lands the card titles' width-to-cap ratio (7.13 vs 7.33). */
  --font-mono:   'Sometype Mono', 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-serif:  'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype',
                 Palatino, Georgia, serif;
  --font-cond:   'Big Shoulders Display', 'Oswald', 'Archivo Narrow',
                 'Arial Narrow', sans-serif;
  --font-script: 'Allura', 'Snell Roundhand', 'Apple Chancery', cursive;

  /* type scale, in comp units -> vw */
  --t-nav:    clamp(10px, 0.933vw, 18px);   /*  73.1u  nav, eyebrows, footer  */
  --t-body:   clamp(13px, 1.446vw, 28px);   /* 113.3u  hero running text      */
  --t-tag:    clamp(17px, 1.915vw, 37px);   /* 150.1u  tagline, section title */
  --t-ui:     clamp(9px,  0.80vw,  15px);
  --t-micro:  clamp(11px, 0.714vw, 14px);   /*  56.0u  card copy, meta, date  */
  --t-btn:    clamp(9px,  0.593vw, 12px);   /*  46.5u  pill labels            */
  --t-cardh:  clamp(19px, 1.132vw, 23px);   /*  88.7u  card titles            */
  --t-lojah:  clamp(26px, 3.195vw, 62px);   /* 250.4u  "Leve a Na Mesa..."    */
  --t-script: clamp(30px, 2.744vw, 54px);   /* 215.1u  "Feito em casa"        */

  /* page margins, straight off the comp: 282/7838 and 266/4396 */
  --pad-x: 3.6vw;
  --pad-t: 3.6vh;
  --pad-b: 6.6vh;

  /* vertical rhythm between and inside sections, in comp units */
  --gap-sec:   5.9vw;    /* 462u between sections            */
  --gap-head:  3.52vw;   /* 276u from section title to grid  */
  --gap-col:   4.12vw;   /* 323u between grid columns        */
  --radius:    3.06vw;   /* 240u photo corner                */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme='noite'] {
  --paper:      #171009;
  --ink:        #E8D6B4;
  --ink-soft:   #DFC9A2;
  --star:       #C98679;   /* the rose again, in its night value */
  --star-glow:  rgba(201, 134, 121, .5);
  --flame-glow: rgba(255, 186, 84, .85);

  --pink:       #2B1A16;
  --rose:       #C98679;
  --green:      #6A8F39;
  --green-dark: #BFD9C4;
  --cocoa:      #241811;   /* lighter than --paper here, so the band still reads */
  --on-cocoa:   #E8D6B4;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  overflow-x: hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}

/* the hero keeps the full-screen column layout the body used to own */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
}

.wrap {
  max-width: none;
  padding-inline: var(--pad-x);
}

[id] { scroll-margin-top: 2vw; }

/* ------------------------------------------------------------------ a11y */

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

.skip {
  position: fixed;
  top: .5rem; left: 50%;
  z-index: 50;
  transform: translate(-50%, -160%);
  padding: .55rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

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

/* ============================================================== starfield */

/* the <symbol> library — must not take part in layout */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Scoped to the hero and absolute, not fixed: the field belongs to the first
   screen and scrolls away with it, and inset:0 keeps --x/--y honest as
   percentages of that screen so the two original stars land where the comp
   puts them. */
.starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--star);
  transition: color .6s var(--ease);
}

/* Parallax moves three layers, not every star. Driving each star's own
   transform off a shared custom property meant one style recalc per star
   per frame on the main thread — that was most of the judder. */
.star-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  /* an independent property, so `transform` stays free for the layer */
  translate: -50% -50%;
  animation: breathe var(--dur2) var(--delay2) infinite ease-in-out;
}

.star svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: var(--dim);
  rotate: var(--rot);
  animation: twinkle var(--dur) var(--delay) infinite ease-in-out;
}

/* The glow is only visible at night; skipping the filter by day saves
   50-odd drop-shadow passes per frame. */
[data-theme='noite'] .star svg {
  filter: drop-shadow(0 0 calc(var(--w) * .34) var(--star-glow));
}

.star use { fill: currentColor; }

/* Each star now goes all the way out and all the way back — 0% to 100% —
   instead of swelling around a fixed dimness. Every star carries its own
   period and its own negative delay, so at any instant some are gone and
   others are arriving: the field reads as stars taking each other's place
   rather than a fixed constellation breathing. --dim survives as the
   still-frame value for reduced motion. */
@keyframes twinkle {
  from, to { opacity: 0;   scale: .94; rotate: var(--rot); }
  50%      { opacity: 1;   scale: 1.06; rotate: calc(var(--rot) + 2.5deg); }
}

@keyframes breathe {
  from, to { opacity: 1; }
  50%      { opacity: .62; }
}

/* a star being put out by the minus button. The wrapper's breathe is left
   running, so there is nothing to jump from — only the glyph is retimed. */
.star--out svg {
  animation: snuff .5s var(--ease) forwards;
}

@keyframes snuff {
  from { opacity: var(--out-from, 1); scale: 1;   rotate: var(--rot); }
  to   { opacity: 0;                  scale: .25; rotate: calc(var(--rot) - 55deg); }
}

/* a star lit by a click */
.star--born svg {
  animation: born .8s var(--ease), twinkle var(--dur) .8s infinite ease-in-out;
}

@keyframes born {
  from { opacity: 0;          scale: .15; rotate: calc(var(--rot) - 90deg); }
  55%  { opacity: 1;          scale: 1.3; rotate: calc(var(--rot) + 8deg); }
  to   { opacity: 0;          scale: 1;   rotate: var(--rot); }
}

/* ============================================================== joaninha */

/* The bug gets a clipped box of its own rather than flying loose in the hero:
   it is allowed to cross the edges on the way round, and without the clip that
   overshoot would widen the page. Above the wordmark (z-index 1) so it reads
   as being in front of the drawing, below the nav's panels (5) so it never
   crosses an open submenu. */
.joana-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  transition: color .6s var(--ease);
}

/* Parked at the origin and moved only by `transform`, which is the one thing
   the compositor can do without the main thread — the flight loop below writes
   this property and nothing else. */
.joana {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(34px, 4vw, 72px);
  opacity: .88;
  /* an independent property, the same trick the stars use: the flight loop
     writes `transform` every frame and this stays out of its way, so the
     coordinates it writes are the bug's middle rather than its top corner */
  translate: -50% -50%;
  will-change: transform;
}

.joana__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* One wingbeat is four slots long — down, half up, up, half up — so the wings
   come back down through the same pose they rose through, and three drawings
   buy four frames. Each one is opaque for its own slot and gone for the rest:
   hard cuts, because anything softer shows two sets of wings at once. */
.joana__f {
  animation-duration: var(--flap, .34s);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.joana__f--down { animation-name: flap-down; }
.joana__f--mid  { animation-name: flap-mid; }
.joana__f--up   { animation-name: flap-up; }

@keyframes flap-down { 0% { opacity: 1 } 25%, 100% { opacity: 0 } }
@keyframes flap-mid  { 0% { opacity: 0 } 25% { opacity: 1 }
                       50% { opacity: 0 } 75%, 100% { opacity: 1 } }
@keyframes flap-up   { 0% { opacity: 0 } 50% { opacity: 1 } 75%, 100% { opacity: 0 } }

/* startled by the pointer — it beats harder while it gets away */
.joana--dash { --flap: .2s; }

/* ================================================================== nav */

.topbar { position: relative; z-index: 2; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  /* the comp indents the nav a touch further than the running text */
  padding: 0 .22vw;
}

.nav__item {
  position: relative;
  padding-bottom: .5em;
  color: inherit;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-nav);
  line-height: 1;
  /* none needed — a monospace's own advance supplies the comp's tracking */
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: .82;
  transition: opacity .25s var(--ease), letter-spacing .35s var(--ease);
}

/* the rule draws itself out from the left */
.nav__item::after {
  content: '';
  position: absolute;
  left: 0; bottom: .18em;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
}

.nav__item:hover,
.nav__item:focus-visible { opacity: 1; letter-spacing: .05em; }
.nav__item:hover::after,
.nav__item:focus-visible::after,
.nav__item.is-active::after { transform: scaleX(1); }
.nav__item.is-active { opacity: 1; }

/* --- dropdowns -------------------------------------------------------- */

/* Each tab is a group so the panel can hang off it. The group keeps the
   nav's flex layout unchanged — it is still five items spread edge to edge. */
.nav__group { position: relative; }

/* Opened by hover on pointer devices and by the JS below on touch/keyboard.
   `visibility` rather than `display` so the panel can transition, and so it
   stays out of the tab order while closed. */
.nav__menu {
  position: absolute;
  top: calc(100% + .35em);
  left: -.9em;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: max-content;
  padding: .9em 1.2em;
  background: var(--paper);
  border: 1.5px solid currentColor;
  border-radius: .9em;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.35em);
  transition: opacity .22s var(--ease), transform .22s var(--ease),
              visibility 0s linear .22s, background-color .6s var(--ease);
}

/* The last tab sits on the right margin, so its panel opens inward. */
.nav__group:last-child .nav__menu { left: auto; right: -.9em; }

.nav__group:hover  > .nav__menu,
.nav__group:focus-within > .nav__menu,
.nav__group.is-open > .nav__menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__sub {
  display: block;
  padding: .5em 0;
  color: inherit;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-nav);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: .72;
  transition: opacity .2s var(--ease);
}

.nav__sub:hover,
.nav__sub:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }

/* The little caret only appears once a tab actually carries a panel. */
.nav__item[aria-haspopup]::before {
  content: '';
  position: absolute;
  right: -.85em; top: .34em;
  width: .34em; height: .34em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  opacity: .6;
  transition: rotate .25s var(--ease), opacity .25s var(--ease);
}
.nav__group:hover .nav__item::before,
.nav__group:focus-within .nav__item::before,
.nav__group.is-open .nav__item::before { rotate: 225deg; opacity: 1; }

/* ================================================================ hero */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 2000 of the comp's 7838 units across */
  width: clamp(280px, 25.5vw, 620px);
}

.lockup__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- the things standing on the table --- */

.obj {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.obj:hover,
.obj:focus-visible { transform: translateY(-3.2%) scale(1.045); }
.obj:focus { outline: none; }
.obj:focus-visible { opacity: .72; }

/* The invisible bounding-box target the script drops into each group, so the
   holes in a drawing hover like the drawing does. `all` rather than the
   default, which would ignore a fill this transparent on some engines. */
.obj__hit { fill: transparent; pointer-events: all; }

/* Not part of the drawing's own hover — keep the clipped group from jumping. */
.obj--flowers { transform-origin: 50% 96%; }

/* --- the candle is lit, so it behaves like it --- */

.flame {
  transform-box: view-box;
  transform-origin: 3460px 1140px;
  animation: flicker 3.1s infinite;
  filter: drop-shadow(0 0 14px var(--flame-glow));
}

@keyframes flicker {
   0%  { transform: scale(1, 1)        skewX(0deg);   opacity: 1; }
  12%  { transform: scale(.93, 1.08)   skewX(-2.5deg); opacity: .86; }
  25%  { transform: scale(1.04, .95)   skewX(1.8deg);  opacity: 1; }
  38%  { transform: scale(.97, 1.05)   skewX(-1deg);   opacity: .92; }
  52%  { transform: scale(1.02, 1.02)  skewX(2.6deg);  opacity: 1; }
  63%  { transform: scale(.9, 1.11)    skewX(-3deg);   opacity: .8; }
  78%  { transform: scale(1.05, .96)   skewX(1.2deg);  opacity: 1; }
  90%  { transform: scale(.96, 1.03)   skewX(-1.6deg); opacity: .9; }
 100%  { transform: scale(1, 1)        skewX(0deg);    opacity: 1; }
}

/* --- NA MESA rises under its table --- */

.wm__l {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.is-ready .wm__l {
  animation: rise .9s var(--ease) backwards;
  animation-delay: calc(var(--i) * 80ms);
}

@keyframes rise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* --- lines under the lockup --- */

.tagline {
  /* comp: 211u from the art box down to the tagline's cap top */
  margin: clamp(12px, 2.0vw, 40px) 0 0;
  font-size: var(--t-tag);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink-soft);
  text-align: center;
}

/* Hung below the lockup rather than stacked inside it, so it neither shifts
   the layout nor pulls the lockup off the comp's optical centre. */
.caption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: .7em 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-ui);
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.caption:not(:empty) { opacity: .6; }

/* ==================================================== hero bottom row */

/* A grid, not a flex row: auto columns give way when the viewport is narrower
   than the comp's 16:9, instead of shoving the right-hand line off-screen. */
.screen__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: end;
  gap: 2vw;
}

.footer__lead,
.footer__welcome {
  margin: 0;
  font-size: var(--t-body);
  /* comp sets these two lines 105u apart at a 113u size */
  line-height: .95;
  color: var(--ink-soft);
}

/* Comp line one runs 3013u = 38.4vw; a hair more than that puts the natural
   break after "cozinhar", matching the comp without a hard <br>. */
.footer__lead { max-width: 39.6vw; }
.footer__welcome { justify-self: end; text-align: right; }

/* ---- prototype controls ---- */

.controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .1em;
  font-family: var(--font-mono);
  font-size: var(--t-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ctl {
  margin: 0;
  padding: .5em .85em;
  border: 1px solid currentColor;
  border-radius: 100px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease);
}
.ctl:hover,
.ctl:focus-visible { opacity: 1; background: var(--ink); color: var(--paper); }

.ctl__mark { margin-right: -.15em; }
.ctl__n { font-variant-numeric: tabular-nums; }

/* --- the star readout is a stepper, not a button --------------------- */

/* It keeps the pill frame the other controls wear, but the frame itself is
   inert now: the two round steppers inside it are what you press. */
.ctl--stars {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .3em .35em;
  cursor: default;
}
.ctl--stars:hover,
.ctl--stars:focus-within { opacity: 1; background: none; color: inherit; }

.ctl__step {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease);
}
.ctl__step:hover:not(:disabled),
.ctl__step:focus-visible { opacity: 1; background: var(--ink); color: var(--paper); }
.ctl__step:disabled { opacity: .22; cursor: not-allowed; }

/* The ring is small because the control row is small. The target under it
   does not have to be — this spills over the readout beside it, which is
   only text and has nothing to catch. */
.ctl__step::after {
  content: '';
  position: absolute;
  inset: -.55em;
}

/* Lifted out of the grid — at opacity 0 it was still claiming 250px and
   forcing the footer's left-hand paragraph to break a word early. */
.controls__hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: .8em;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.controls:hover .controls__hint { opacity: .45; }

/* ========================================================== responsive */

@media (max-width: 900px) {
  :root {
    --t-nav:  clamp(9px,  1.35vw, 14px);
    --t-body: clamp(12px, 1.85vw, 17px);
    --t-tag:  clamp(16px, 3.2vw,  28px);
    --t-ui:   clamp(9px,  1.25vw, 12px);
  }
  .lockup { width: clamp(280px, 46vw, 460px); }
  .footer__lead { max-width: 44vw; }
}

@media (max-width: 620px) {
  :root {
    --pad-x: 5vw; --pad-b: 3vh;
    --t-nav: 10px; --t-body: 13px; --t-tag: clamp(17px, 5.2vw, 26px); --t-ui: 10px;
  }

  .nav { flex-wrap: wrap; justify-content: center; gap: .55rem 1.1rem; }
  /* wrapped and centred, so every panel drops straight below its own tab */
  .nav__menu,
  .nav__group:last-child .nav__menu {
    left: 50%; right: auto;
    transform: translate(-50%, -.35em);
  }
  .nav__group:hover  > .nav__menu,
  .nav__group:focus-within > .nav__menu,
  .nav__group.is-open > .nav__menu { transform: translate(-50%, 0); }
  .lockup { width: min(78vw, 340px); }
  .footer__lead { max-width: 34ch; }

  /* one column, centred, so nothing collides at this width */
  .screen__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
  }
  .footer__lead { max-width: 34ch; text-align: center; line-height: 1.2; }
  .footer__welcome { justify-self: center; text-align: center; }
  .controls { order: -1; }
  .controls__hint { display: none; }
}

/* landscape phones: reclaim the vertical room */
@media (max-height: 560px) and (min-width: 620px) {
  :root { --pad-t: 2.4vh; --pad-b: 3vh; }
  .lockup { width: clamp(200px, 20vw, 300px); }
}

/* ====================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
  .star,
  .star svg,
  .star--born svg,
  .flame,
  .is-ready .wm__l { animation: none; }

  .star svg { opacity: clamp(0, calc(var(--dim) * 1.25), 1); scale: 1; }

  /* A joaninha that cannot fly is not a still drawing, it is a bug pinned to
     the sky in a pose that only makes sense mid-beat. It stays away. */
  .joana-field { display: none; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   BELOW THE FOLD — Frames 16 and 17
   ========================================================================== */

.sec { padding-block: var(--gap-sec); }

.band { padding-inline: 0; }

/* --- section headers ------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-nav);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sec__title {
  /* comp sets these at 150.4u — the same size as the hero's tagline */
  margin: .32em 0 0;
  font-family: var(--font-serif);
  font-size: var(--t-tag);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink-soft);
}

.sec__head { margin-bottom: var(--gap-head); }

/* --- grids ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* comp: a wide first column then three even ones — 2238u vs 1350u.
   minmax(0,...) keeps the photos' intrinsic width from widening the track. */
.grid--feature { grid-template-columns: 1.657fr repeat(3, minmax(0, 1fr)); }
.grid--3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--videos  { gap: 2.51vw; }          /* 197u */

/* --- photo slots ------------------------------------------------------- */

.card__media,
.ph {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #CFC3B0;
  /* 1680u tall in the comp, whatever the column is wide */
  height: 21.43vw;
}

.card__media--tall { height: 36.58vw; border-radius: 3.41vw; }  /* 2867u */
.ph--casa          { height: 34.64vw; border-radius: 1.75vw; }  /* 2715u */

.card__media img,
.ph img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}

.card__media:hover img,
.card__media:focus-visible img,
.tile a:hover .ph img,
.tile a:focus-visible .ph img { transform: scale(1.045); }

[data-theme='noite'] .card__media img,
[data-theme='noite'] .ph img { filter: brightness(.82) saturate(.9); }

/* --- cards ------------------------------------------------------------- */

.card { display: flex; flex-direction: column; }

.card__cat {
  margin: 1.84vw 0 0;                     /* 144u below the photo */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-micro);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card__title {
  margin: .48em 0 0;
  font-family: var(--font-cond);
  font-weight: 400;
  font-size: var(--t-cardh);
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card__body {
  margin: .85em 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  /* the comp justifies these — both edges land flush */
  text-align: justify;
  color: var(--ink-soft);
}

.card__date {
  margin: 1.65vw 0 0;                     /* 129u */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-micro);
  line-height: 1;
  color: var(--ink-soft);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.6vw;
}

.card__meta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-micro);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* videos have nothing under the label, so pin it tight to the frame */
.grid--videos .card__cat { margin-top: 1.21vw; }   /* 95u */

/* --- pills ------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: .95em 2.34em;                  /* 516u wide around an 11-char label */
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-btn);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}

/* Frame 17 exports this label in the band's own brown, which leaves it
   invisible on the green; Frame 16 gets it right, so use that treatment. */
.pill--green {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.pill--green:hover,
.pill--green:focus-visible { background: transparent; color: var(--green); }

.pill--line-green { border-color: var(--green-dark); color: var(--green-dark); }
.pill--line-green:hover,
.pill--line-green:focus-visible { background: var(--green-dark); color: var(--pink); }

.pill--line-cream { border-color: var(--on-cocoa); color: var(--on-cocoa); }
.pill--line-cream:hover,
.pill--line-cream:focus-visible { background: var(--on-cocoa); color: var(--cocoa); }

.pill--line { border-color: currentColor; color: inherit; opacity: .85; }
.pill--line:hover,
.pill--line:focus-visible { opacity: 1; background: var(--ink); color: var(--paper); }

/* ================================================== "Feito em casa" band */

.band--casa {
  padding-block: 3.15vw 2.83vw;           /* 246u / 222u */
  background: var(--pink);
  transition: background-color .6s var(--ease);
}

.casa__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  margin-bottom: 3.45vw;                  /* 270u down to the cards */
}

.script {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--t-script);
  font-weight: 400;
  line-height: 1;
  color: var(--green-dark);
}

.btns { display: flex; gap: 1.65vw; flex-shrink: 0; }

.casa__grid { gap: 7.67vw; }              /* 601u */

.tile a {
  display: block;
  color: var(--green-dark);
  text-decoration: none;
}

.tile__cap {
  display: block;
  margin-top: 1.86vw;                     /* 146u */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-nav);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* ======================================================== "A lojinha" band */

.band--loja {
  padding-block: 10.7vw 5.9vw;            /* 840u / 460u */
  background: var(--cocoa);
  color: var(--on-cocoa);
  transition: background-color .6s var(--ease), color .6s var(--ease);
}

.loja {
  max-width: 56vw;                        /* the comp's 4400u measure */
  margin-inline: auto;
  text-align: center;
}

.band--loja .eyebrow { color: var(--on-cocoa); }

.loja__title {
  margin: .42em 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-lojah);
  line-height: 1.05;
}

.loja__body {
  margin: 1.1em auto 0;
  max-width: 51vw;                        /* comp line one runs 3916u = 49.96vw */
  font-family: var(--font-mono);
  font-size: var(--t-body);               /* 112.6u, not the card size */
  line-height: 1.55;
  text-align: justify;
  text-align-last: center;
}

.band--loja .pill { margin-top: 4.2vw; }  /* 330u */

/* ================================================================ eventos */

/* Same centred measure as the shop band, on cream instead of cocoa. */
.eventos {
  max-width: 56vw;
  margin-inline: auto;
  text-align: center;
}

.eventos__title {
  margin: .42em 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-lojah);
  line-height: 1.05;
}

.eventos__body {
  margin: 1.1em auto 0;
  max-width: 51vw;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: 1.55;
  text-align: justify;
  text-align-last: center;
}

.eventos .pill { display: inline-block; margin-top: 3.4vw; }

/* ============================================================== page footer */

.pagefoot {
  position: relative;
  overflow: hidden;
  padding-top: 11vw;                      /* 864u */
  background: var(--paper);
  transition: background-color .6s var(--ease);
}

.pagefoot__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Frame 17's two oversized sparkles used to sit here. They were dropped by
   request — the footer keeps only the small scattered ones. */

.pflogo {
  position: relative;
  margin: 0;
  line-height: 0;
}

.pflogo__mark {
  display: block;
  width: 14.32vw;                          /* 1122u */
  aspect-ratio: 1840.4 / 1011.5;
  height: auto;
  overflow: visible;
  color: var(--rose);
  transition: color .6s var(--ease);
}
.pflogo__mark use { fill: currentColor; }

.pflogo__sprig {
  position: absolute;
  right: -1vw;
  top: 28%;
  width: 1.38vw;                           /* 108u */
  aspect-ratio: 108.4 / 96.5;
  height: auto;
  color: var(--olive);
}
.pflogo__sprig use { fill: currentColor; }

.pfnav {
  display: flex;
  gap: 4.7vw;                              /* 368u */
  margin-top: 6.4vw;                       /* 501u */
}

.pfnav a {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-nav);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .85;
  transition: opacity .25s var(--ease);
}
.pfnav a:hover, .pfnav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .4em; }

.pfsocial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .98vw;                              /* 77u */
  margin-top: 4.1vw;                       /* 323u */
  color: var(--ink-soft);
}

/* --- the tiled table strip -------------------------------------------- */

/* Frame 17 repeats the hero's five objects at 2x along the bottom edge. */
.strip {
  display: flex;
  margin-top: .96vw;                       /* 75u */
  pointer-events: none;
}

.strip svg {
  flex: 0 0 auto;
  width: 48.47vw;                          /* 1899u x 2 */
  aspect-ratio: 1899.3 / 651.9;
  height: auto;
  color: var(--rose);
  transition: color .6s var(--ease);
}
.strip use { fill: currentColor; }

/* ============================================================ reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(1.4vw);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--r, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ================================================== responsive, below the fold */

@media (max-width: 1100px) {
  :root {
    --t-micro:  clamp(11px, 1.05vw, 14px);
    --t-btn:    clamp(9px,  0.86vw, 12px);
    --t-cardh:  clamp(17px, 1.7vw,  23px);
    --t-lojah:  clamp(24px, 4.2vw,  62px);
    --t-script: clamp(28px, 4.0vw,  54px);
  }
  .grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__media   { height: 30vw; }
  .loja          { max-width: 74vw; }
  .loja__body    { max-width: 66vw; }
}

@media (max-width: 720px) {
  :root { --gap-sec: 12vw; --gap-col: 6vw; --radius: 5vw; }

  .grid--feature,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .card__media        { height: 64vw; }
  .card__media--tall  { height: 96vw; border-radius: 6vw; }
  .ph--casa           { height: 92vw; border-radius: 4vw; }

  .casa__head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .band--casa { padding-block: 10vw 9vw; }
  .band--loja { padding-block: 18vw 14vw; }

  .loja       { max-width: none; }
  .loja__body { max-width: none; text-align: center; }

  .eventos       { max-width: none; }
  .eventos__body { max-width: none; text-align: center; }

  .pagefoot     { padding-top: 22vw; }
  .pflogo__mark { width: 42vw; }
  .pfnav        { gap: 1.4rem; flex-wrap: wrap; justify-content: center; margin-top: 12vw; }
  .pfsocial     { margin-top: 9vw; gap: .7rem; }
  .strip svg    { width: 90vw; }
  .card__body   { text-align: left; }
  .card__foot   { flex-wrap: wrap; gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   WHATSAPP
   A floating CTA rather than a pill in the layout: the shop copy is about
   "bolos por encomenda", and ordering happens over WhatsApp. It stays hidden
   over the hero, whose bottom-right corner already holds a line of type.
   ========================================================================== */

.wa {
  position: fixed;
  right: var(--pad-x);
  bottom: var(--pad-x);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .7em;
  color: var(--paper);
  text-decoration: none;
  /* out of the way, and untabbable, until it is actually on screen */
  opacity: 0;
  translate: 0 .9rem;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .45s var(--ease), translate .45s var(--ease),
              visibility .45s;
}

.wa.is-shown {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  visibility: visible;
}

.wa__icon {
  /* Percentage padding would resolve against the flex container's width, not
     the disc's own, so the inset is derived from the diameter instead. */
  --d: clamp(48px, 3.6vw, 66px);
  width: var(--d);
  height: var(--d);
  padding: calc(var(--d) * .22);
  border-radius: 50%;
  background: var(--green);
  fill: var(--paper);
  box-shadow: 0 .35rem 1.3rem rgba(75, 33, 31, .26);
  transition: background-color .3s var(--ease), scale .3s var(--ease);
}

.wa:hover .wa__icon,
.wa:focus-visible .wa__icon { scale: 1.07; background: var(--ink-soft); }

/* the label rides out from behind the disc on hover */
.wa__label {
  padding: .85em 1.15em;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-btn);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 .3rem 1rem rgba(75, 33, 31, .18);
  opacity: 0;
  translate: .8rem 0;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}

.wa:hover .wa__label,
.wa:focus-visible .wa__label { opacity: 1; translate: 0 0; }

[data-theme='noite'] .wa__icon { fill: #171009; }
[data-theme='noite'] .wa__label { background: var(--ink); color: #171009; }

/* no hover on touch, so the label would never show — drop it */
@media (hover: none), (max-width: 620px) {
  .wa__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa { translate: 0 0; }
  .wa__label { translate: 0 0; }
  .wa:hover .wa__icon, .wa:focus-visible .wa__icon { scale: 1; }
}

/* ==========================================================================
   SPRINKLES
   The hero's sky, carried through the rest of the page: the same two
   hand-drawn shapes, sparser and smaller, tinted per band so they read as
   part of each background rather than as stars pasted on top.
   ========================================================================== */

.sec, .band { position: relative; }

/* content sits above its own field */
.sec > .wrap,
.band > .wrap { position: relative; z-index: 1; }
.strip        { position: relative; z-index: 1; }

.sprinkles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: color .6s var(--ease), opacity .6s var(--ease);
}

/* pink band -> the same deep green its type is set in */
.band--casa .sprinkles { color: var(--green-dark); opacity: .42; }

/* cream sections -> the drawing brown, kept quiet so photos stay the subject */
.sec .sprinkles { color: var(--ink); opacity: .40; }

/* dark cocoa band -> cream, the one place they read as actual starlight */
.band--loja .sprinkles { color: var(--on-cocoa); opacity: .55; }

/* footer -> the rose of the logo and the tiled strip */
.pagefoot .sprinkles { color: var(--rose); opacity: .8; }

/* At sprinkle size the scale/rotate half of the twinkle reads as nothing, and
   animating an SVG's scale forces a re-raster every frame. Out here the
   flicker is opacity only — same 0-to-100 swap, no raster cost. */
@keyframes twinkle-flat {
  from, to { opacity: 0; }
  50%      { opacity: 1; }
}

.sprinkles .star svg { animation-name: twinkle-flat; }

@media (prefers-reduced-motion: reduce) {
  .sprinkles .star,
  .sprinkles .star svg { animation: none; }
}