/* ==========================================================================
   Cosmocafé · Lucy's Table — Grote Markt 66, Sint-Truiden
   --------------------------------------------------------------------------
   Palette is sampled directly from the venue photography (k-means over the
   two hero images), not chosen from a swatch library:
     #1C110B / #100807  warm near-black of both rooms
     #462518 / #371B12  deep umber
     #7C5034 / #612E19  clay
     #BB805B / #804B30  candle-ember
     #A3291B            the actual COSMO neon red
     #E8CEB8            warm bone highlight
   ========================================================================== */

/* ----- fonts (self-hosted: no third-party request, GDPR-safe) ----- */
@font-face{font-family:'Libre Bodoni';src:url('../font/libre-bodoni-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Bodoni';src:url('../font/libre-bodoni-700.woff2')format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../font/eb-garamond-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../font/eb-garamond-500.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jost';src:url('../font/jost-300.woff2')format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url('../font/jost-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../font/jost-500.woff2')format('woff2');font-weight:500;font-display:swap}

:root{
  /* colour */
  --ink:#14100D;
  --ink-2:#1B1510;
  --umber:#462518;
  --clay:#7C5034;
  --ember:#BB805B;
  --neon:#A3291B;
  --bone:#E8CEB8;
  --bone-dim:#B49E8B;
  --hair:rgba(232,206,184,.22);

  /* type */
  --display:'Libre Bodoni',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --util:'Jost','Helvetica Neue',Arial,sans-serif;

  /* spacing — spacious (density 3/10) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:4rem;  --s6:6rem; --s7:9rem;

  --bar-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* focus: visible everywhere, never removed */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

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

.skip{
  position:absolute;left:var(--s2);top:-4rem;z-index:200;
  background:var(--bone);color:var(--ink);padding:.6rem 1rem;
  font-family:var(--util);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:var(--s2)}

/* ---------- shared type helpers ---------- */
.eyebrow{
  font-family:var(--util);font-weight:400;font-size:.75rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ember);
  margin:0 0 var(--s3);
}
.h-display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.06;
  letter-spacing:-.015em;margin:0 0 var(--s3);
}
.lede{font-size:1.2rem;line-height:1.62;max-width:var(--measure);color:var(--bone)}
/* rhythmic closing line -- reads as a signature, not a sentence */
.tagline{
  font-family:var(--util);font-weight:300;font-size:.82rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ember);
  margin:var(--s4) 0 0;
}
.prose{max-width:var(--measure);color:var(--bone-dim)}
.prose p{margin:0 0 var(--s2)}
.prose strong{color:var(--bone);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-family:var(--util);font-weight:400;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--bone);color:var(--bone);background:transparent;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn--solid{background:var(--bone);color:var(--ink)}
.btn--solid:hover{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.btn--quiet{border-color:var(--hair);color:var(--bone-dim)}
.btn--quiet:hover{border-color:var(--bone);background:transparent;color:var(--bone)}

/* ==========================================================================
   NAV — one shared bar for the whole house (Le Pristine model)
   ========================================================================== */
.bar{
  /* min-height, NOT height:var(--bar-h). The script measures this bar and
     publishes the result as --bar-h; consuming it here too would feed the
     element's own height back into itself, and that loop can ratchet (it blew
     the bar up to 357px). --bar-h is for consumers only: hero padding and
     scroll-margin. The bar sizes itself from its content. */
  position:fixed;inset:0 0 auto;z-index:100;min-height:76px;
  display:flex;align-items:center;gap:var(--s4);
  padding:0 clamp(1rem,3vw,2.5rem);
  background:var(--ink);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .4s var(--ease);
}
/* Solid bar at all times. Replaces the earlier fade-into-the-photo gradient:
   the nav sits over the hero, and bone text on bare photography measured only
   1.41:1 where the red COSMO neon falls behind it. On solid ink it is 12.6:1,
   and it no longer depends on what the photograph happens to be doing. */
.bar.is-stuck{box-shadow:0 1px 24px rgba(0,0,0,.45)}
.bar__home{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.bar__home img{width:110px}
.bar__nav{display:flex;gap:clamp(1rem,2.2vw,2rem);margin-inline:auto;flex-wrap:wrap}
.bar__nav a{
  font-family:var(--util);font-weight:400;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);padding:.5rem 0;position:relative;
}
.bar__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.bar__nav a:hover::after,.bar__nav a[aria-current='true']::after{transform:scaleX(1)}
/* ---- Events dropdown ----------------------------------------------------
   Opens on :hover for mice and on :focus-within for keyboards, so it needs no
   JavaScript to work. All three entries point at #events, which is why a
   touch tap on the parent (no hover, straight to the section) loses nothing. */
.bar__item{position:relative;display:flex;align-items:center}

.bar__sub{
  position:absolute;top:100%;left:50%;z-index:120;
  min-width:14rem;margin:0;padding:.4rem 0;list-style:none;
  background:rgba(20,16,13,.97);border:1px solid var(--hair);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* bridges the gap under the trigger so the menu survives the mouse crossing it */
.bar__sub::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}

.bar__item:hover .bar__sub,
.bar__item:focus-within .bar__sub{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.bar__nav .bar__sub a{
  display:block;padding:.7rem 1.4rem;white-space:nowrap;
  font-size:.72rem;letter-spacing:.14em;color:var(--bone);
}
.bar__nav .bar__sub a::after{display:none}   /* no sliding underline in here */
.bar__nav .bar__sub a:hover,
.bar__nav .bar__sub a:focus-visible{background:rgba(232,206,184,.10)}

/* Events is the last nav item, so once the bar narrows a centred dropdown
   runs off the right edge (measured: 66px past the viewport at 375px).
   Anchor it to the item's right edge instead. */
@media (max-width:900px){
  .bar__sub{left:auto;right:0;transform:translateY(6px)}
  .bar__item:hover .bar__sub,
  .bar__item:focus-within .bar__sub{transform:translateY(0)}
}

.bar__cta{display:flex;gap:.6rem;flex:0 0 auto}
.bar__cta .btn{min-height:42px;padding:.6rem 1.05rem;font-size:.7rem;letter-spacing:.16em}

.bar__toggle{display:none}

/* ==========================================================================
   HERO — the split. The seam is the signature element.
   ========================================================================== */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100svh;
  transition:grid-template-columns .8s var(--ease);
}
.panel{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding:var(--bar-h) var(--s3) clamp(3rem,7vh,5.5rem);
  overflow:hidden;text-align:center;isolation:isolate;
}
.panel__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.1s var(--ease),opacity .6s var(--ease);
}
/* Scrim: legibility floor for the overlaid wordmark.
   Deliberately asymmetric. The stops from 62% down are pinned to the values
   the text band was tuned against, so the wordmark/CTA/note keep exactly the
   contrast they were measured at (bone 4.5-4.8:1). Everything above 62% is
   lifted, which is where the photograph actually reads -- that is what makes
   the hero brighter without trading away legibility. Don't lighten the 62%,
   78% or 100% stops without re-measuring the text band. */
.panel::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(20,16,13,.34)0%,
    rgba(20,16,13,.08)32%,
    rgba(20,16,13,.539)62%,
    rgba(20,16,13,.72)78%,
    rgba(20,16,13,.92)100%);
  transition:opacity .6s var(--ease);
}
.panel__mark{margin:0 auto var(--s3)}
.panel__mark img{width:clamp(150px,16vw,242px)}
.panel--lucy .panel__mark img{width:clamp(104px,11vw,158px)}
.panel__kind{
  font-family:var(--util);font-weight:300;font-size:.74rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--bone);
  margin:0 0 var(--s4);
}
.panel__act{display:flex;flex-direction:column;align-items:center;gap:.7rem}
/* bone, not bone-dim: over photography bone-dim measures only 2.7:1,
   which fails AA. bone clears it at 4.5:1 against the scrimmed text band. */
.panel__note{
  font-family:var(--util);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);margin:0;
}

/* the living seam: hovering one side lets it breathe, the other recedes */
@media (hover:hover) and (pointer:fine){
  .split:has(.panel:first-child:hover){grid-template-columns:1.13fr .87fr}
  .split:has(.panel:last-child:hover){grid-template-columns:.87fr 1.13fr}
  .split:has(.panel:hover) .panel:not(:hover)::after{opacity:.82}
  .panel:hover .panel__bg{transform:scale(1.09)}
}

.split__seam{
  position:absolute;left:50%;bottom:clamp(1rem,3vh,2rem);z-index:5;
  transform:translateX(-50%);
  font-family:var(--util);font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bone-dim);
  margin:0;pointer-events:none;
}
.hero{position:relative}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* anchored sections must clear the fixed bar */
section[id],div[id]{scroll-margin-top:calc(var(--bar-h) + 1.5rem)}

.section{padding:var(--s7) clamp(1.25rem,5vw,4rem)}
.section--tight{padding-block:var(--s6)}
.section--rule{border-top:1px solid var(--hair)}
.wrap{max-width:76rem;margin-inline:auto}

.duo{display:grid;gap:clamp(2rem,5vw,var(--s6));align-items:center}
/* Applies at EVERY width, not just desktop. In the flipped sections the media
   comes first in the DOM; without this the single-column mobile layout showed
   the photo above the heading, so Restaurant and Gatherings read differently
   from every other section. Text always leads. */
.duo--flip .duo__media{order:2}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
}
.duo__media img{width:100%}
.figure{margin:0}

/* menu cards */
.cards{display:grid;gap:1px;background:var(--hair);margin-top:var(--s5)}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--ink);padding:var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:background .3s var(--ease);
}
.card:hover{background:var(--ink-2)}
.card__t{font-family:var(--display);font-size:1.5rem;line-height:1.15;margin:0}
.card__d{color:var(--bone-dim);margin:0;flex:1;font-size:1rem}
.card .btn{align-self:flex-start}

/* practical / contact */
/* Cosmo hours | Lucy hours -- Contact moved out entirely (was duplicating the
   footer verbatim: same address/phone/email/reservation buttons). The footer
   is now the single source of truth for contact details, since it is the
   only one of the two that also appears on the Privacy/Cookies/Disclaimer
   pages. The Route link that lived here moved onto the footer address. */
.facts{display:grid;gap:var(--s5)}
@media (min-width:820px){.facts{grid-template-columns:1fr 1fr}}
.hours{width:100%;border-collapse:collapse;max-width:26rem}
.hours th{
  text-align:left;font-family:var(--util);font-weight:400;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);
  padding:.55rem 0;border-bottom:1px solid var(--hair);
}
.hours td{
  text-align:right;padding:.55rem 0;border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums;
}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours .is-late td{color:var(--ember)}
.hours .is-closed td{color:var(--bone-dim)}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  border-top:1px solid var(--hair);
  padding:var(--s5) clamp(1.25rem,5vw,4rem) var(--s4);
  font-family:var(--util);font-size:.76rem;letter-spacing:.06em;color:var(--bone-dim);
}
.foot__grid{display:grid;gap:var(--s4);max-width:76rem;margin-inline:auto}
@media (min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h2{
  font-family:var(--util);font-weight:500;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);margin:0 0 var(--s2);
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot__base{
  max-width:76rem;margin:var(--s5) auto 0;padding-top:var(--s3);
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;
  font-size:.7rem;
}
.foot__marks{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.foot__marks img{width:64px;opacity:.7}

/* ==========================================================================
   MOTION — subtle reveals (motion 4/10)
   ========================================================================== */
/* Visible by default. The hidden state is applied only once JS has confirmed
   it can actually reveal it again (html.js), so a failed script, a blocked
   file or a dead IntersectionObserver can never leave content invisible. */
.rise{opacity:1;transform:none}
html.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rise.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .bar__nav{order:3;width:100%;margin:0;justify-content:center}
  .bar{min-height:0;flex-wrap:wrap;padding-block:.7rem;gap:var(--s2)}
  /* pre-JS fallback only; the script replaces this with the measured value */
  :root{--bar-h:118px}
  .bar__cta{margin-left:auto}
}
/* The split needs real width to work. Below ~840px the two halves get too
   narrow to carry a wordmark plus a CTA, so they stack instead. */
@media (max-width:840px){
  .split{grid-template-columns:1fr;min-height:0}
  .panel{min-height:72svh;justify-content:center}
    .split__seam{display:none}
}

@media (max-width:720px){
  /* keep the bar to two rows: logo + Cadeaubon, then the nav. */
  .bar__cta{margin-left:auto}
  .bar__home img{width:88px}

  .split{grid-template-columns:1fr;min-height:0}
  .panel{min-height:74svh;justify-content:center}
    .split__seam{display:none}
  .bar__nav{gap:.9rem}
  .bar__nav a{font-size:.7rem;letter-spacing:.14em}
  .bar__home img{width:94px}
  :root{--s7:4.5rem;--s6:3.5rem}
  .lede{font-size:1.1rem}
}

/* ==========================================================================
   TOUCH — on any coarse pointer every target clears 44px.
   Kept out of the width breakpoints on purpose: a touch laptop needs this
   at 1440px just as much as a phone does at 375px.
   ========================================================================== */
@media (pointer:coarse){
  .bar__nav a{padding-block:.85rem}                 /* 36px -> 48px */
  .bar__nav .bar__sub a{padding-block:.95rem}       /* 41px -> 48px */
  .foot ul{gap:.15rem}
  .foot ul a{display:inline-block;padding-block:.75rem;min-height:44px}
  .contact{line-height:2.4}
  .contact a{display:inline-block;padding-block:.55rem}
  .foot__base a{display:inline-block;padding:.6rem .2rem}
  .foot__marks a{display:inline-block;padding-block:.7rem}
}

/* ==========================================================================
   REDUCED MOTION — honour it completely
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise,html.js .rise{opacity:1;transform:none}
  .split,.panel__bg{transition:none}
  .split:has(.panel:hover){grid-template-columns:1fr 1fr}
  .panel:hover .panel__bg{transform:scale(1.03)}
}

@media print{
  .bar,.split__seam{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   LEGAL PAGES — privacy / cookies / disclaimer, migrated off WordPress
   ========================================================================== */
.legal{padding-top:calc(var(--bar-h) + var(--s6))}
.legal__body{max-width:46rem;color:var(--bone-dim)}
.legal__body p{margin:0 0 var(--s2)}
.legal__body h1,.legal__body h2,.legal__body h3,.legal__body h4,.legal__body h5,.legal__body h6{
  font-family:var(--util);font-weight:500;letter-spacing:.06em;
  color:var(--bone);margin:var(--s4) 0 var(--s2);font-size:1rem;
}
.legal__body strong{color:var(--bone);font-weight:500}
.legal__body a{color:var(--ember)}
.legal__body ul,.legal__body ol{margin:0 0 var(--s2) 1.2rem;padding:0}
.legal__body li{margin:0 0 .4rem}
.legal__body table{
  width:100%;border-collapse:collapse;margin:0 0 var(--s3);
  display:block;overflow-x:auto;font-size:.95rem;
}
.legal__body th,.legal__body td{
  text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top;
}
.legal__body th{color:var(--bone);font-family:var(--util);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400}

/* secondary menu links under a card's primary button */
.card__more{
  margin:.2rem 0 0;font-family:var(--util);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);
}
.card__more a{text-decoration:none;border-bottom:1px solid var(--hair)}
.card__more a:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* ==========================================================================
   v2 additions
   ========================================================================== */
/* second-tier note under a button: smaller, quieter than .panel__note */
.panel__note--small{font-size:.62rem;letter-spacing:.14em}
.panel__note a{color:inherit;text-underline-offset:3px}
.panel__note a:hover{color:var(--ember)}
.small-call{
  font-family:var(--util);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);margin:.9rem 0 0;
}
.small-call a{color:var(--bone);text-underline-offset:3px}
.small-call a:hover{color:var(--ember)}

/* vouchers: two cards, each with a photo and four amounts */
@media (min-width:900px){.cards--two{grid-template-columns:repeat(2,1fr)}}
.card--bon{gap:var(--s2)}
.card__img{width:100%;height:clamp(200px,28vw,320px);object-fit:cover;object-position:50% 25%;margin-bottom:var(--s1)}
.amounts{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.amounts span{
  font-family:var(--util);font-size:.78rem;letter-spacing:.16em;
  border:1px solid var(--hair);color:var(--bone);padding:.45rem .8rem;
}

/* jobs: a single readable column */
.jobs{max-width:var(--measure)}
.jobs .lede{margin-bottom:var(--s3)}

/* menu cards: button groups.  The three cards share one set of row lines
   (title / description / buttons / language links) via subgrid, so every
   button row sits at exactly the same height however long the descriptions
   run, and the extra "English" line under Cosmo's buttons hangs below the
   row instead of pushing it up. Without subgrid they fall back to the plain
   stacked flex card. */
.card__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.card__btns .btn{padding-inline:1.25rem}
.card__lang{color:var(--bone);margin-right:.5rem}
@supports (grid-template-rows:subgrid){
  .cards--menu .card{
    display:grid;grid-row:span 4;grid-template-rows:subgrid;
    row-gap:var(--s2);align-content:start;
  }
  .cards--menu .card__more{margin:0}
}

/* ==========================================================================
   v6 — Restaurant photo carousel
   ========================================================================== */
.carousel{position:relative}
.carousel__frame{position:relative}
.carousel__stage{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--ink-2);touch-action:pan-y;
}
.carousel__slide{
  position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .8s var(--ease),visibility 0s .8s;
}
.carousel__slide.is-active{opacity:1;visibility:visible;transition:opacity .8s var(--ease),visibility 0s}
.carousel__slide picture{display:block;width:100%;height:100%}
.carousel__slide img{display:block;width:100%;height:100%;object-fit:cover}

/* controls only exist when scripting does; without it you just see photo 1 */
.carousel__btn,.carousel__bar{display:none}
.js .carousel__btn{display:grid}
.js .carousel__bar{display:flex}
/* v7: arrows are quiet -- a small faint disc, no outline, full strength only on hover/focus */
.carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;place-items:center;padding:0;cursor:pointer;
  color:var(--bone);background:rgba(20,16,13,.40);border:0;opacity:.85;
  transition:background .25s var(--ease),opacity .25s var(--ease);
}
.carousel__btn:hover,.carousel__btn:focus-visible{background:rgba(20,16,13,.7);opacity:1}
.carousel__btn--prev{left:.6rem}
.carousel__btn--next{right:.6rem}
.carousel__btn:focus-visible,.carousel__dot:focus-visible,.carousel__toggle:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;
}
.carousel__bar{align-items:center;justify-content:space-between;gap:1rem;margin-top:.55rem}
.carousel__dots{display:flex;flex-wrap:wrap}
.carousel__dot{
  width:28px;height:28px;display:grid;place-items:center;
  padding:0;background:none;border:0;cursor:pointer;
}
.carousel__dot::before{
  content:'';width:8px;height:8px;border-radius:50%;
  border:1px solid var(--bone-dim);transition:background .25s var(--ease),border-color .25s var(--ease);
}
.carousel__dot[aria-current="true"]::before{background:var(--ember);border-color:var(--ember)}
.carousel__toggle{
  font-family:var(--util);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);background:none;border:0;padding:.6rem 0 .6rem .6rem;cursor:pointer;
}
.carousel__toggle:hover{color:var(--bone)}
@media (prefers-reduced-motion:reduce){
  .carousel__slide,.carousel__slide.is-active{transition:none}
}

/* 11 dots + the Pauze button must fit one row on a phone */
@media (max-width:480px){
  .carousel__dot{width:24px;height:28px}
  .carousel__bar{gap:.4rem}
  .carousel__toggle{padding-left:.2rem}
}

/* landscape carousel (Cosmogarden): the photos are 3:2, shown whole */
.carousel--land .carousel__stage{aspect-ratio:3/2}

/* ==========================================================================
   v11 — agenda (Events section), compact
   One line per event: weekday + day on the left, name, note at the far right.
   (v10 was ~127 px per row; this is ~42 px.)
   ========================================================================== */
.duo--top{align-items:start}
@media (min-width:900px){.duo--top .duo__text{position:sticky;top:calc(var(--bar-h) + 2rem)}}
.agenda{max-width:34rem}
.agenda__month{margin:0 0 var(--s3)}
.agenda__month.is-empty{display:none}
.agenda__mh{
  font-family:var(--util);font-weight:400;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ember);margin:0;
  padding-bottom:.5rem;border-bottom:1px solid var(--hair);
}
.agenda__ul{list-style:none;margin:0;padding:0}
.ev{
  display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--hair);
}
.ev.is-past{display:none}
.ev.is-extra{display:none}
.agenda.is-open .ev.is-extra:not(.is-past){display:grid}
.ev__date{display:flex;align-items:baseline;gap:.35rem;line-height:1}
.ev__dow{
  font-family:var(--util);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);width:1.2rem;
}
.ev__day{font-family:var(--display);font-size:1.15rem;color:var(--bone)}
.ev__what{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:1rem;row-gap:.1rem}
.ev__name{font-family:var(--display);font-size:1.05rem;line-height:1.25;color:var(--bone)}
.ev__note{
  font-family:var(--util);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);
}
.ev--closed .ev__name,.ev--closed .ev__day{color:var(--bone-dim)}
.ev--closed .ev__name{font-style:italic}
/* the toggle only exists with JS */
.agenda__more{margin-top:var(--s1);min-height:38px;padding:.55rem 1.1rem;font-size:.66rem}
.agenda__more[hidden],.agenda__none[hidden]{display:none}
.agenda__none{color:var(--bone-dim);margin:0;font-size:.95rem}

/* v12: the Lucy voucher photo sits in a <picture>; keep it block-level so no stray line gap */
.card--bon picture{display:block}