:root{
    --ink:#14233A;        /* deep coastal dusk */
    --ink-2:#1C3052;      /* lifted blue panel */
    --sand:#F6EFE2;       /* warm sand */
    --sand-2:#ECE0CB;     /* deeper sand */
    --sol:#EFA63C;        /* golden sol */
    --sol-bright:#F8C661; /* bright sun */
    --ember:#C2552A;      /* burnt amber */
    --berry:#B681E3;      /* açaí violet — accent bridge */
    --sage:#7E8B63;       /* blue-zone botanical */
    --text-dark:#2A2014;
    --text-light:#F6EFE2;
    --muted-dark:rgba(42,32,20,.64);
    --muted-light:rgba(246,239,226,.66);
    --line-dark:rgba(42,32,20,.16);
    --line-light:rgba(246,239,226,.22);
    --maxw:1180px;
    --font-display:'Fraunces',Georgia,serif;
    --font-body:'Hanken Grotesk',system-ui,sans-serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color-scheme:light;
    background:var(--sand);
    color:var(--text-dark);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-size:.72rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.22em;color:var(--ember);
  }
  .eyebrow.on-dark{color:var(--sol-bright)}

  h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.04;letter-spacing:-.01em}
  h2{font-size:clamp(2rem,5vw,3.4rem)}
  p{font-size:1.02rem}
  .lead{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.5;color:var(--muted-dark)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.5em;
    font-family:var(--font-body);font-weight:600;font-size:.95rem;
    padding:.85em 1.5em;border-radius:999px;border:1px solid transparent;
    cursor:pointer;transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  }
  .btn-sun{background:var(--sol);color:#3A2710}
  .btn-sun:hover{background:var(--sol-bright);transform:translateY(-2px)}
  .btn-ghost{border-color:var(--line-light);color:var(--text-light)}
  .btn-ghost:hover{border-color:var(--sol-bright);color:var(--sol-bright);transform:translateY(-2px)}
  .btn-ink{border-color:var(--line-dark);color:var(--text-dark)}
  .btn-ink:hover{background:var(--ink);color:var(--text-light);border-color:var(--ink);transform:translateY(-2px)}
  /* Instagram brand gradient (used only on the IG follow CTA), flowing continuously */
  .btn-ig{color:#fff;border-color:transparent;
    background-image:linear-gradient(60deg,#fdf497 0%,#fd5949 25%,#d6249f 50%,#cc2366 62%,#bc1888 76%,#285AEB 100%);
    background-size:300% 300%;
    animation:ig-flow 8s ease-in-out infinite;
    box-shadow:0 10px 26px -12px rgba(214,36,159,.65)}
  .btn-ig:hover{color:#fff;border-color:transparent;filter:brightness(1.07) saturate(1.05);transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(214,36,159,.75)}
  @keyframes ig-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

  /* ---------- star-border CTA (rotating glow ring on a gold pill) ---------- */
  .star-border{position:relative;display:inline-flex;padding:2.5px;border-radius:999px;overflow:hidden;isolation:isolate;text-decoration:none;background:var(--sol-bright);transition:transform .25s ease,box-shadow .25s ease}
  .star-border::before{content:"";position:absolute;z-index:0;top:50%;left:50%;width:230%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 0deg,var(--sol-bright) 0deg,var(--sol) 70deg,#ffffff 130deg,var(--sol-bright) 200deg,var(--sol) 290deg,var(--sol-bright) 360deg);animation:sb-spin 4s linear infinite}
  .star-border .sb-inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--sol);color:#3A2710;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.78em 1.5em;border-radius:999px;transition:background .25s ease}
  .star-border:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(239,166,60,.4)}
  .star-border:hover .sb-inner{background:var(--sol-bright)}
  @keyframes sb-spin{to{rotate:360deg}}

  /* ---------- nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(22px,3vw,44px);
    box-shadow:0 1px 0 rgba(246,239,226,.16);
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  .nav.scrolled{background:rgba(20,35,58,.92);backdrop-filter:blur(10px);padding:11px 28px;box-shadow:0 1px 0 var(--line-light)}
  .brand{display:flex;align-items:center;gap:.6em;font-family:var(--font-display);font-size:1.32rem;font-weight:600;color:var(--text-light);letter-spacing:-.01em}
  .brand .disc{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--sol-bright),var(--sol) 55%,var(--ember));box-shadow:0 0 14px rgba(248,198,97,.6);flex:none}
  /* hairline caps, generously spaced, divided by thin rules — the nav is the
     first thing over the photograph so it carries a lot of the tone */
  .nav-links{display:flex;align-items:center;gap:0}
  .nav-links a{
    position:relative;color:rgba(246,239,226,.82);
    font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
    padding:.35em clamp(20px,2.6vw,40px);
    transition:color .2s}
  /* thin divider between items, never before the first */
  .nav-links a + a::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:13px;background:rgba(246,239,226,.26)}
  .nav-links a:hover{color:var(--sol-bright)}
  .nav-links a[aria-current="page"]{color:var(--sol-bright)}
  .nav .btn{padding:.62em 1.2em}

  /* ---------- hero: full-bleed photograph + bleeding wordmark ---------- */
  .hero{
    position:relative;min-height:100svh;color:var(--text-light);
    background:var(--ink);
    display:grid;grid-template-rows:auto 1fr auto auto;
    padding:104px 0 0;
    /* NOT overflow:hidden — the wordmark deliberately hangs past the bottom
       edge and finishes over the band below. The photo is clipped by its own
       <picture> wrapper instead (the entrance scales it to 1.06). */
  }
  /* the <picture> must be taken out of grid flow, or it claims a row and
     pushes .hero-meta-top onto the 1fr spacer row */
  .hero>picture{position:absolute;inset:0;z-index:0;overflow:hidden}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;z-index:0}
  /* dark at the very top (the nav is not colour-adaptive), clear through the
     middle so the bowl reads, dark again behind the wordmark */
  .hero-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(20,35,58,.74) 0%,
      rgba(20,35,58,.20) 24%,
      rgba(20,35,58,.10) 50%,
      rgba(20,35,58,.58) 82%,
      rgba(20,35,58,.84) 100%);
  }
  .hero .grain{position:absolute;inset:0;z-index:2;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  /* hairline uppercase meta rows */
  .hero-meta{
    position:relative;z-index:3;display:flex;justify-content:space-between;gap:18px;
    padding:0 28px;font-family:var(--font-body);font-size:.68rem;letter-spacing:.16em;
    text-transform:uppercase;font-weight:600;color:rgba(246,239,226,.84);
  }
  .hero-meta a{color:inherit;transition:color .2s}
  .hero-meta a:hover{color:var(--sol-bright)}
  .hero-meta-bottom{align-items:flex-end;margin-bottom:clamp(10px,1.8vh,22px)}
  /* the weather chip loses its pill inside the meta row and becomes hairline type */
  .hero-meta .wx-line{margin:0;padding:0;background:none;backdrop-filter:none;border-radius:0;
    font-size:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:inherit;color:inherit}
  .hero-meta .wx-dot{width:6px;height:6px}
  /* the colossal wordmark — clipped by the hero's bottom edge */
  .wordmark{
    position:relative;z-index:3;margin:0;padding:0 10px;
    /* it's a grid item and it's nowrap, so its min-content width would stretch
       the hero's track wider than the viewport and drag every sibling with it.
       min-width:0 lets it bleed off the edges instead, which is the point. */
    min-width:0;
    font-family:var(--font-display);font-weight:900;font-variation-settings:'opsz' 144;
    font-size:clamp(4rem,22.5vw,30rem);line-height:.78;letter-spacing:-.035em;
    color:#fff;white-space:nowrap;text-align:center;
    margin-bottom:-.17em; /* the bleed — finishes over the band below */
    /* it overlaps the band, so don't let it swallow clicks/selection there */
    pointer-events:none;
  }
  /* Cream at the top, dipping into gold toward the fold.
     SplitText moves the glyphs into child divs that inherit the transparent
     text-fill but have no background of their own, so the wordmark vanishes for
     the whole entrance unless the chars carry the gradient too. The gradient is
     vertical and every char box is one line-height tall, so per-char and
     per-word paint identically. */
  .wordmark,
  .wordmark .wm-char{
    background:linear-gradient(180deg,#FFFDF7 0%,#FFF6E2 42%,var(--sol-bright) 78%,var(--sol) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  @keyframes shine{0%{background-position:160% 0}100%{background-position:-60% 0}}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  /* ---------- statement band directly under the hero ---------- */
  /* extra top padding clears the wordmark hanging down out of the hero —
     at the clamp ceiling that overhang is ~82px, so don't reduce this */
  .statement{background:var(--sand);color:var(--text-dark);padding:clamp(70px,8vw,132px) 0 clamp(34px,4.6vw,58px)}
  /* slightly wider than the site's 1180 wrap, and the collage takes the larger
     share — the photos are the point of this band */
  .statement .wrap{max-width:1280px}
  .statement-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.22fr);
    gap:clamp(30px,4.2vw,68px);align-items:center}
  /* the script accent, after Luisa's "North Beach" */
  .script-accent{font-family:var(--font-display);font-style:italic;font-weight:500;
    font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--ember);margin-bottom:.15em}
  .statement h2{font-size:clamp(1.95rem,3.9vw,3rem);letter-spacing:-.02em;max-width:13ch}
  .statement h2 em{font-style:italic}
  .statement h2 em.shine{
    background:linear-gradient(100deg,var(--ember) 0%,var(--sol) 28%,#8A4A1E 48%,var(--sol) 70%,var(--ember) 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;animation:shine 6.5s linear infinite}
  .statement .lead{margin-top:.8em;max-width:46ch;color:var(--muted-dark)}
  .statement-rule{height:1px;background:var(--line-dark);margin:clamp(20px,2.8vw,32px) 0}
  .statement-tags{display:flex;flex-wrap:wrap;gap:9px 26px;list-style:none;
    margin:0 0 clamp(22px,2.8vw,32px)}
  .statement-tags li{display:flex;align-items:center;gap:.6em;font-size:.66rem;
    text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--muted-dark)}
  .statement-tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sol);flex:none}
  /* .btn-ghost is built for dark sections — it is cream-on-cream here */
  .statement .btn-ghost{border-color:var(--line-dark);color:var(--text-dark)}
  .statement .btn-ghost:hover{border-color:var(--ember);color:var(--ember)}

  /* editorial collage, after Ma Joie — big shot, a smaller one dropped low and
     overlapping, hairline caps floating in the gap */
  .collage{position:relative;padding-bottom:15%;padding-right:3%}
  .shot{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--sand-2)}
  .shot img{display:block;width:100%;height:100%;object-fit:cover}
  /* 66 + 30 must stay under 100 or the floating note lands on the photo */
  .shot-a{width:66%;aspect-ratio:4/5}
  .shot-b{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:1;z-index:2;
    box-shadow:0 20px 46px rgba(42,32,20,.22)}
  /* captions land on bright areas in some shots (the lamp, the cabinet) —
     a bottom scrim keeps them legible without darkening the whole photo */
  .shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:1;
    pointer-events:none;
    background:linear-gradient(to top,rgba(18,14,8,.74),rgba(18,14,8,.28) 46%,transparent)}
  .shot figcaption{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;color:#F6EFE2;
    text-shadow:0 1px 16px rgba(18,14,8,.7)}
  .cap-l{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700}
  .cap-s{display:block;font-family:var(--font-display);font-style:italic;font-size:.85rem;margin-top:.1em;opacity:.92}
  .collage-note{position:absolute;right:0;top:5%;width:30%;
    font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;line-height:2.1;
    font-weight:600;color:var(--muted-dark)}
  @media (max-width:880px){
    /* the fixed .actionbar owns the bottom 62px here (body{padding-bottom:62px});
       end the hero above it or the wordmark's clipped bottom is buried behind it */
    .hero{padding-top:88px;min-height:calc(100svh - 62px)}
    .hero-meta{font-size:.6rem;letter-spacing:.13em;padding:0 20px}
    .hero-meta-bottom{flex-direction:column;align-items:flex-start;gap:7px}
    /* NO .wordmark override here on purpose — it inherits the desktop rule
       (nowrap, 22.5vw, -.17em bleed) so the phone reads like the desktop.
       It used to stack to two lines, which ate half the screen. */
    /* statement band stacks: copy, then the collage keeps its offset feel */
    .statement-grid{grid-template-columns:1fr;gap:36px}
    .statement h2{max-width:none}
    .collage{padding-bottom:0;padding-right:0}
    .shot-a{width:100%}
    .shot-b{position:static;width:58%;margin:-16% 0 0 auto}
    .collage-note{position:static;width:auto;margin-top:18px}
  }

  /* ---------- section base ---------- */
  .section{padding:clamp(38px,5.2vw,62px) 0;position:relative}
  .section .wrap{position:relative;z-index:2}
  .blend-down::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(48px,7vh,90px);pointer-events:none;z-index:1;background:linear-gradient(to bottom,transparent,var(--bd))}
  .section.ink{background:var(--ink);color:var(--text-light)}
  .section.sand2{background:var(--sand-2)}
  .sec-head{max-width:680px;margin-bottom:40px}
  .sec-head h2{margin-top:.34em}
  .sec-head p{margin-top:1em}
  .ink .sec-head p{color:var(--muted-light)}

  /* ---------- story ---------- */
  .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
  .story-copy h2{font-size:clamp(1.9rem,4vw,3rem)}
  .story-copy p{margin-top:1.1em;color:var(--muted-dark)}
  .story-copy .sign{margin-top:1.6em;font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--ember)}
  .photo{
    position:relative;border-radius:18px;overflow:hidden;min-height:420px;
    background:
      radial-gradient(90% 70% at 70% 18%, rgba(248,198,97,.5), transparent 60%),
      linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 45%,var(--ember) 130%);
    box-shadow:0 24px 60px -28px rgba(20,35,58,.5);
  }
  .photo .tag{
    position:absolute;left:16px;bottom:14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(246,239,226,.62);background:rgba(20,35,58,.4);padding:.4em .8em;border-radius:999px;border:1px solid var(--line-light);
  }
  .photo .sundot{position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;
    background:radial-gradient(circle at 38% 38%,var(--sol-bright),var(--sol) 60%,var(--ember));box-shadow:0 0 26px rgba(248,198,97,.55)}

  /* ---------- menu ---------- */
  .menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
  .menu-col h3{font-size:1.35rem;color:var(--sol-bright);display:flex;align-items:baseline;gap:.5em;margin-bottom:.2em}
  .menu-col h3 .n{font-family:var(--font-body);font-size:.7rem;letter-spacing:.2em;color:var(--muted-light);font-weight:600}
  /* a second heading inside a column (Specialties sits under Classico, the way
     it flows on page 1 of the real menu) needs room above it */
  .menu-col h3.sub{margin-top:1.5em}
  .menu-item{display:flex;align-items:baseline;gap:.7em;padding:14px 0;border-bottom:1px solid var(--line-light)}
  .menu-item .name{font-weight:600;white-space:nowrap}
  .menu-item .desc{color:var(--muted-light);font-size:.9rem;flex:1;line-height:1.35}
  .menu-item .dots{flex:1;border-bottom:1px dotted var(--line-light);transform:translateY(-4px)}
  .menu-item .price{font-family:var(--font-display);color:var(--sol);font-size:1.02rem}
  /* açaí accent — nods to the real color of the bowls without repainting the palette */
  .menu-col.berry h3::before{content:"";flex:none;align-self:center;width:.5em;height:.5em;border-radius:50%;background:var(--berry);box-shadow:0 0 12px rgba(182,129,227,.75)}
  .menu-col.berry .price{color:var(--berry)}
  .menu-note{margin-top:40px;font-size:.86rem;color:var(--muted-light);font-style:italic}

  /* ---------- menu.html page head (clears the fixed nav) ---------- */
  .menu-hero{background:var(--ink);color:var(--text-light);padding:clamp(122px,15vh,164px) 0 0}
  .menu-hero h1{font-size:clamp(2.4rem,5.6vw,4rem);letter-spacing:-.02em;margin:.16em 0 .34em}
  .menu-hero .lead{color:var(--muted-light);max-width:52ch}
  .menu-hero + .section{padding-top:clamp(30px,4vw,48px)}

  /* ---------- bowls: three arched panels, after the Baillotte reference ---------- */
  .bowls{position:relative;background:linear-gradient(180deg,#0E1929 0%,#14233A 100%);
    padding:clamp(56px,8vw,96px) 0 0}
  /* centred over the arches, like the reference */
  .bowls-head{margin-bottom:clamp(34px,5vw,58px);text-align:center}
  .bowls-head h2{color:var(--text-light);font-size:clamp(2.6rem,6.4vw,4.6rem);
    margin-top:.12em;letter-spacing:-.02em}
  /* set in the display serif so it reads as part of the title block, not as a
     small-caps utility link */
  .bowls-menu-link{display:inline-flex;align-items:baseline;gap:.4em;margin-top:.9em;
    font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.5rem);
    font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--sol-bright);border-bottom:1px solid rgba(248,198,97,.38);padding-bottom:4px;
    transition:color .2s,border-color .2s}
  .bowls-menu-link:hover{color:#fff;border-color:#fff}
  /* full-bleed row of arches, flush to each other and to the section floor */
  .arches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.9vw,14px);
    padding:0 clamp(6px,.9vw,14px);align-items:end}
  .arch{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4;
    /* horizontal radius = half the width, vertical ~= the same in px, so the
       top reads as a true semicircle at this aspect ratio */
    border-radius:50% 50% 0 0 / 37% 37% 0 0;
    background:linear-gradient(150deg,#2a2440,#14233A)}
  .arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .arch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
    pointer-events:none;background:linear-gradient(to top,rgba(10,16,28,.82),rgba(10,16,28,.25) 48%,transparent)}
  .arch figcaption{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,26px);z-index:2;
    text-align:center;color:#F6EFE2;text-shadow:0 1px 16px rgba(10,16,28,.7)}
  .arch-name{font-family:var(--font-display);font-size:clamp(1.05rem,1.7vw,1.5rem)}
  .arch-price{font-family:var(--font-display);font-style:italic;color:var(--sol-bright);
    font-size:clamp(.95rem,1.5vw,1.3rem);margin-left:.15em}
  @media (max-width:820px){
    .arches{grid-template-columns:1fr;gap:14px;padding:0 22px}
    .arch{aspect-ratio:4/5;border-radius:50% 50% 0 0 / 30% 30% 0 0}
  }

  /* ---------- lounge ---------- */
  .lounge{position:relative;overflow:hidden;
    background:linear-gradient(160deg,#0E1929 0%,#16263F 55%,#3A2A3F 100%);color:var(--text-light)}
  .lounge .glow{position:absolute;right:-10%;top:-20%;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(239,166,60,.4),transparent 65%);pointer-events:none}
  .lounge-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:2}
  .lounge h2{font-size:clamp(1.9rem,4vw,3rem)}
  .lounge p{margin-top:1.1em;color:var(--muted-light);max-width:460px}
  .lounge .when{margin-top:26px;display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:var(--sol-bright);border:1px solid var(--line-light);padding:.6em 1.1em;border-radius:999px;font-size:.92rem}
  .lounge .photo{min-height:360px;background:
      radial-gradient(80% 60% at 30% 80%, rgba(248,198,97,.42), transparent 60%),
      linear-gradient(150deg,#13233A,#3A2A3F 120%)}

  /* ---------- retail strip ---------- */
  .retail{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
  .retail .card{background:var(--sand);border:1px solid var(--line-dark);border-radius:16px;padding:26px;transition:transform .25s ease}
  .retail .card:hover{transform:translateY(-4px)}
  .retail .card .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,var(--sol),var(--ember));margin-bottom:16px}
  .retail .card h3{font-size:1.2rem;margin-bottom:.3em}
  .retail .card p{font-size:.92rem;color:var(--muted-dark)}

  /* ---------- visit ---------- */
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
  .detail{padding:22px 0;border-top:1px solid var(--line-light);display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}
  .detail .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sol-bright);padding-top:3px}
  .detail .v{color:rgba(246,239,226,.92)}
  .detail .v a{color:var(--sol-bright);border-bottom:1px solid rgba(248,198,97,.4)}
  .visit-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .map{min-height:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line-light);
    background:
      radial-gradient(60% 50% at 50% 50%, rgba(248,198,97,.28), transparent 70%),
      linear-gradient(160deg,var(--ink-2),var(--ink));
    display:flex;align-items:center;justify-content:center;min-height:340px;position:relative}
  .map .pin{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-light);text-align:center}
  .map .pin .dot{width:18px;height:18px;border-radius:50%;background:var(--sol-bright);box-shadow:0 0 0 8px rgba(248,198,97,.18),0 0 28px rgba(248,198,97,.6)}
  .map .pin span{font-size:.82rem;letter-spacing:.08em;color:var(--muted-light)}

  /* ---------- footer ---------- */
  /* ---------- events: horizontal rail of clickable upcoming events ---------- */
  .events-rail{display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(18px,3vw,44px);margin-top:clamp(26px,4vw,44px);align-items:start}
  /* the staggered drop that gives the row its rhythm */
  .ev:nth-child(2){margin-top:clamp(22px,5vw,68px)}
  .ev:nth-child(3){margin-top:clamp(44px,10vw,136px)}
  .ev{display:block;position:relative;text-decoration:none;color:inherit}
  .ev-date{display:block;font-family:var(--font-display);font-weight:600;
    font-size:clamp(1.35rem,2.4vw,2rem);color:var(--sol-bright);
    letter-spacing:-.01em;margin-bottom:.35em}
  .ev-photo{display:block;position:relative;overflow:hidden;border-radius:14px;
    aspect-ratio:4/5;background:linear-gradient(150deg,#2a2440,#14233A)}
  .ev-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .ev:hover .ev-photo img{transform:scale(1.05)}
  /* the title rides up over the bottom of the photo, like the reference */
  .ev-body{display:block;position:relative;z-index:2;margin-top:-1em;padding-right:8%}
  .ev-title{display:block;font-family:var(--font-display);font-weight:600;
    font-size:clamp(1.4rem,2.7vw,2.15rem);line-height:1.03;color:var(--text-light);
    text-shadow:0 2px 24px rgba(10,16,28,.8);transition:color .25s}
  .ev:hover .ev-title{color:var(--sol-bright)}
  .ev-sub{display:block;margin-top:.6em;font-size:.66rem;text-transform:uppercase;
    letter-spacing:.18em;font-weight:600;color:var(--muted-light)}
  .ev-go{display:inline-flex;align-items:center;gap:.45em;margin-top:1.1em;
    font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
    color:var(--sol-bright);border-bottom:1px solid rgba(248,198,97,.32);
    padding-bottom:3px;transition:border-color .2s}
  .ev:hover .ev-go{border-color:var(--sol-bright)}
  .ev:focus-visible{outline:2px solid var(--sol-bright);outline-offset:6px;border-radius:6px}
  @media (max-width:820px){
    /* one per row on phones; the stagger only makes sense across a row */
    .events-rail{grid-template-columns:1fr;gap:40px}
    .ev:nth-child(2),.ev:nth-child(3){margin-top:0}
    .ev-photo{aspect-ratio:16/10}
  }
  .events-cta{margin-top:clamp(38px,5vw,64px);text-align:center}

  footer{background:#0E1A2B;color:var(--muted-light);padding:64px 0 40px}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-end;padding-bottom:34px;border-bottom:1px solid var(--line-light)}
  .foot-brand{font-family:var(--font-display);font-size:1.8rem;color:var(--text-light);display:flex;align-items:center;gap:.5em}
  .foot-links{display:flex;gap:26px;font-size:.92rem}
  .foot-links a:hover{color:var(--sol-bright)}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:26px;font-size:.8rem;color:rgba(246,239,226,.4)}
  .foot-bottom a{color:rgba(246,239,226,.55)}

  /* ---------- photo drop-in (replace gradient panels with real <img>) ---------- */
  .photo img,.ig-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  /* gentle life on real photography (activates once an <img> is dropped in) */
  .photo img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .photo:hover img{transform:scale(1.06)}
  .photo.kenburns img{animation:kenburns 22s ease-in-out infinite alternate}
  .ig-cell img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .ig-cell:hover img{transform:scale(1.08)}
  @keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.09) translate(-1.5%,-1%)}}

  /* ---------- nav phone ---------- */
  .nav-right{display:flex;align-items:center;gap:16px}
  .nav-call{color:var(--muted-light);font-size:.92rem;font-weight:600;transition:color .2s}
  .nav-call:hover{color:var(--sol-bright)}

  /* ---------- testimonials (warm golden-hour dark + breathing light) ---------- */
  #love{position:relative;overflow:hidden;color:var(--ink);
    background:linear-gradient(180deg,#F8EFE4 0%,#F6DCC6 52%,#F1CCB0 100%)}
  #love .wrap{position:relative;z-index:2}
  #love .eyebrow{color:#B85730}
  #love h2{color:var(--ink)}
  #love .sec-head>p{color:#6B4A36}
  #love .rating-line{color:#5A3A28}
  #love .rating-line .big{color:var(--ink)}
  #love .review-link{color:#B85730;border-color:rgba(184,87,48,.45)}
  #love .review-link:hover{color:var(--ink);border-color:var(--ink)}
  .love-glows{display:none}
  .love-glows span{position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;opacity:.26}
  .love-glows .g1{width:48vw;height:48vw;left:-10%;top:26%;background:radial-gradient(circle,rgba(248,198,97,.95),transparent 66%);animation:glowpulse 11s ease-in-out infinite}
  .love-glows .g2{width:40vw;height:40vw;right:-8%;top:50%;background:radial-gradient(circle,rgba(239,166,60,.9),transparent 64%);animation:glowpulse 15s ease-in-out infinite 2.5s}
  .love-glows .g3{width:36vw;height:36vw;left:32%;bottom:-20%;background:radial-gradient(circle,rgba(194,85,42,.8),transparent 64%);animation:glowpulse 9s ease-in-out infinite 1.2s}
  .rating-line{display:inline-flex;align-items:center;gap:.5em;margin-top:1em;font-weight:600;color:var(--sol-bright)}
  .rating-line .big{font-family:var(--font-display);font-size:1.6rem;color:var(--sol)}
  .review-link{display:flex;width:fit-content;align-items:center;gap:.3em;margin-top:.85em;font-size:.9rem;font-weight:600;color:var(--sol-bright);text-decoration:none;border-bottom:1px solid rgba(248,198,97,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
  .review-link:hover{color:#fff;border-color:#fff}
  .status-chip{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;letter-spacing:.01em;padding:.42em .82em;border-radius:999px;border:1px solid var(--line-light);background:rgba(255,255,255,.05);color:rgba(246,239,226,.92);margin-bottom:.7em}
  .status-chip .dot{width:.58em;height:.58em;border-radius:50%;background:var(--muted-light);flex:none}
  .status-chip.is-open{border-color:rgba(143,191,122,.5);background:rgba(143,191,122,.12);color:#d7ead0}
  .status-chip.is-open .dot{background:#8FBF7A;box-shadow:0 0 0 4px rgba(143,191,122,.18)}
  .status-chip.is-closed{border-color:rgba(194,85,42,.45);background:rgba(194,85,42,.12);color:#f0cdbd}
  .status-chip.is-closed .dot{background:#C2552A}
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
  .quote{background:#FCF6EC;border:1px solid rgba(20,35,58,.1);border-radius:16px;padding:28px;box-shadow:0 14px 34px -22px rgba(120,70,40,.5);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
  .quote:hover{transform:translateY(-5px);border-color:rgba(184,87,48,.35);box-shadow:0 20px 40px -22px rgba(120,70,40,.55)}
  .quote .stars{color:var(--sol);letter-spacing:.12em;font-size:1rem;margin-bottom:.7em}
  .quote p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.16rem,1.5vw,1.32rem);line-height:1.5;color:#2A2320}
  .quote .who{margin-top:1.1em;font-size:.82rem;letter-spacing:.08em;color:#8A6A52;font-weight:600;text-transform:uppercase}
  @keyframes glowpulse{0%,100%{opacity:.22;transform:scale(.94)}50%{opacity:.44;transform:scale(1.12)}}

  /* ---------- instagram ---------- */
  .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:40px}
  .ig-cell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;display:block;
    background:linear-gradient(150deg,var(--ink-2),var(--ember) 150%);transition:transform .25s ease}
  .ig-cell:hover{transform:scale(1.03)}
  .ig-cell .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(246,239,226,.35);font-size:1.4rem;z-index:2}

  /* ---------- real map ---------- */
  .map-embed{border:0;width:100%;height:100%;min-height:340px;display:block}

  /* ---------- mobile action bar ---------- */
  .actionbar{display:none}
  @media (max-width:880px){
    .actionbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
      background:rgba(20,35,58,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line-light)}
    .actionbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;color:var(--text-light);font-size:.7rem;letter-spacing:.04em;font-weight:600}
    .actionbar a .i{font-size:1.05rem;line-height:1}
    .actionbar a+a{border-left:1px solid var(--line-light)}
    .actionbar a.primary{color:var(--sol-bright)}
    body{padding-bottom:62px}
  }

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
  .reveal.in{opacity:1;transform:none}


  /* ---------- responsive ---------- */
  @media (max-width:880px){
    .nav-links{display:none}
    .story-grid,.lounge-grid,.visit-grid{grid-template-columns:1fr}
    .menu-grid{grid-template-columns:1fr;gap:8px}
    .retail{grid-template-columns:1fr}
    .quotes{grid-template-columns:1fr}
    .ig-grid{grid-template-columns:repeat(3,1fr)}
    .photo{min-height:300px}
    .story-grid .photo{order:-1}
    .detail{grid-template-columns:96px 1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none;transition:none}
  }
  :focus-visible{outline:2px solid var(--sol-bright);outline-offset:3px;border-radius:4px}

  /* ---- keep light surfaces light in aggressive/forced dark-mode viewers ----
     Some in-app browsers darken solid background COLORS but leave gradient
     background-IMAGES untouched (and keep dark text dark). Painting the light
     sections as flat gradients keeps them cream/sand even when the viewer
     ignores color-scheme — so the story text stays dark-on-cream. (Scoped to
     #story + sand2: the lounge and reviews sections set their own dark
     gradients and must NOT be repainted cream.) */
  body{background-image:linear-gradient(var(--sand),var(--sand))}
  #story{background-image:linear-gradient(var(--sand),var(--sand))}
  .section.sand2{background-image:linear-gradient(var(--sand-2),var(--sand-2))}
  /* ===== açaí film band ===== */
  .film-band{position:relative;height:84vh;min-height:520px;background:var(--ink)}
  .film-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .film-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,35,58,.5) 0%,rgba(20,35,58,.08) 42%,rgba(20,35,58,.62) 100%)}
  .film-sticky{position:relative;height:100%;overflow:hidden}
  .film-copy{position:relative;z-index:1;display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(30px,6vh,60px)}
  .film-copy h2{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45);margin-top:.34em}
  @media (prefers-reduced-motion:reduce){.film-band video{display:none}.film-band{background:url('images/acai-film-poster.jpg') center/cover}}
  /* live Pacifica weather line */
  .wx-line{display:inline-flex;align-items:center;gap:.55em;margin-top:1.15em;padding:.5em 1.05em;border-radius:999px;background:rgba(20,35,58,.35);backdrop-filter:blur(6px);color:var(--text-light);font-size:.88rem}
  /* the author rule above outranks the UA [hidden]{display:none}, so without
     this the chip renders as a lone pulsing dot until the fetch resolves */
  .wx-line[hidden]{display:none}
  .wx-dot{width:8px;height:8px;border-radius:50%;background:var(--sol-bright);box-shadow:0 0 10px var(--sol-bright);animation:wxpulse 2.6s ease-in-out infinite}
  @keyframes wxpulse{50%{opacity:.45}}