/* Self-hosted fonts — no third-party round-trip (latin subsets; Sora is variable) */
@font-face{ font-family:'Sora'; src:url('../fonts/sora-var.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }

:root{
  --font: "Sora", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, serif;   /* headlines only, weight 600 */
  /* spacing scale — use for all NEW rules (audit: no more magic numbers) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --lagoon:#0FA396; --lagoon-bright:#12C7B5; --rose:#E8736B;
  --coral:#EE6A52; --coral-deep:#D8523B;      /* punchy energy accent (live/latest) */
  --ink:#14161F;                               /* dark chrome (ribbon/footer) — both modes */
  --grad:linear-gradient(90deg,var(--lagoon),var(--rose));
  --champagne:#E8DCC8; --radius:16px; --r:12px;
  /* Side margins, 25% narrower than the old 1240px container (2026-08-08).
     "25% less margin" is not a single width: at 1920px the gutter either side was 340px,
     at 1440px it was 100px, and no fixed max-width shrinks both by a quarter. So the
     margin is what is controlled, not the content:
         margin = (100vw - maxw) / 2,  and we want 0.75 of it
         maxw   = 100vw - 0.75(100vw - 1240) = 25vw + 930
     which is exactly 25% less whitespace at every width. Check: 1920 -> 340 becomes 255,
     1440 -> 100 becomes 75, 2560 -> 660 becomes 495.
     Below a 1240px viewport this still exceeds the screen, so phones and tablets are
     unchanged except for --gutter, which is the margin that shows there. */
  --maxw:calc(25vw + 930px); --gutter:18px;   /* gutter was 24px, also 25% less */
}
:root, [data-theme="light"]{
  --bg:#FBFAF6; --bg-soft:#F4F1E9; --surface:#fff; --sand:#F2ECE0; --text:#11141F; --muted:#4E5464;
  --hair:rgba(17,20,31,.11); --link:#0A6C61; --pill-fg:#06231f; --label-teal:#0A6C61; --coral-text:#B23A24;
  --hero-glow:rgba(15,163,150,.10); --shadow:0 14px 40px rgba(17,20,31,.08);
}
[data-theme="dark"]{
  --bg:#10131F; --bg-soft:#161A29; --surface:#171B2A; --sand:#1B2030; --text:#EEF0F4; --muted:#AEB4C2;
  --hair:rgba(255,255,255,.11); --link:#12C7B5; --pill-fg:#06231f; --label-teal:#12C7B5; --coral-text:#F0836E;
  --hero-glow:rgba(15,163,150,.22); --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--lagoon); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--label-teal); }
.muted{ color:var(--muted); }
/* horizon signature */
.horizon{ position:relative; height:1px; margin:30px 0;
  background:linear-gradient(90deg,transparent,var(--lagoon) 30%,var(--rose) 70%,transparent); }
.horizon[data-coord]::after{ content:attr(data-coord); position:absolute; right:0; top:-9px;
  font-size:10px; letter-spacing:.3em; color:var(--muted); }
/* pills */
.pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px;
  font-size:12px; font-weight:700; background:var(--grad); color:var(--pill-fg); width:max-content; }
.pill--ghost{ background:transparent; color:var(--link); border:1px solid var(--hair); }
/* circular gradient "read more" arrow */
.more{ display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--text); }
.more .arrow{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:var(--grad); color:#06231f; transition:transform .2s; }
.more:hover{ text-decoration:none; } .more:hover .arrow{ transform:translateX(3px); }
/* cards */
.card .ph{ aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); }
.card .ph img{ width:100%; height:100%; object-fit:cover; }
.card .ck{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label-teal); margin-top:12px; display:block; }
.card h3{ font-size:14px; letter-spacing:-.02em; margin-top:6px; }
.card h3 a{ color:var(--text); } .card h3 a:hover{ color:var(--link); }
/* category circle */
/* header / footer */
.site-foot{ border-top:1px solid var(--hair); margin-top:64px; padding:40px 0; color:var(--muted); font-size:14px; }
.toggle{ width:38px; height:38px; border-radius:999px; border:1px solid var(--hair); background:var(--surface);
  color:var(--text); display:grid; place-items:center; cursor:pointer; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 17px; border-radius:999px;
  background:var(--lagoon); color:#04231f; font-weight:800; border:0; cursor:pointer; text-decoration:none;
  white-space:nowrap; transition:filter .15s, transform .15s; }
.btn:hover{ filter:brightness(1.05); text-decoration:none; }
.btn--coral{ background:var(--coral); color:#2a0b04; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } .more .arrow{ transition:none; } }

/* ── Task 2: Header / nav / ticker / footer ───────────────────────────── */

/* Brand logotype */

/* Sun / moon icon swap */
[data-theme="dark"]  .i-moon{ display:none; }
[data-theme="light"] .i-sun { display:none; }
/* Default (no attribute = light): hide sun, show moon */
:root:not([data-theme]) .i-sun{ display:none; }

/* (Old orphaned mobile-menu CSS removed — the live burger lives in the
   "Batch 1" section at the end of this file, wired to .rak-burger markup.) */

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.rak-ticker{ background:var(--bg-soft); border-bottom:1px solid var(--hair); font-size:13px; }
.rak-ticker .wrap{ display:flex; align-items:center; gap:14px; height:36px; overflow:hidden; }
.rak-ticker__track{ display:flex; gap:32px; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.rak-ticker__track a{ color:var(--text); flex-shrink:0; }
.rak-ticker__track a:hover{ color:var(--link); text-decoration:none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.rak-foot-grid{ display:grid; gap:32px 48px;
  grid-template-columns:2fr 1fr 1fr; margin:32px 0; }
.rak-foot-grid h2{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; }
.rak-foot-grid a{ display:block; color:var(--muted); font-size:14px; margin-bottom:6px; }
.rak-foot-grid a:hover{ color:var(--link); text-decoration:none; }
.rak-foot-grid .rak-brand{ display:inline-flex; margin-bottom:10px; }
.rak-foot-grid p{ font-size:14px; line-height:1.6; margin:0; }

.rak-foot-base{ display:flex; align-items:center; gap:14px; font-size:13px;
  padding-top:16px; border-top:1px solid var(--hair); }

@media (max-width: 680px){
  .rak-foot-grid{ grid-template-columns:1fr 1fr; }
  .rak-foot-grid > div:first-child{ grid-column:1/-1; }
}
@media (max-width: 420px){
  .rak-foot-grid{ grid-template-columns:1fr; }
}

/* ── Task 4: Article page ─────────────────────────────────────────────────── */

/* Article reading column — narrower than the full wrap */
.rak-article{ max-width:760px; padding-top:32px; padding-bottom:64px; }

/* Breadcrumb */
.rak-crumbs{ font-size:13px; margin-bottom:24px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.rak-crumbs a{ color:var(--muted); }
.rak-crumbs a:hover{ color:var(--link); text-decoration:underline; }

/* Article header */
.rak-article__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.rak-article__head h1{
  font-size:clamp(20px,1.875vw,25px);
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.2;
}

/* Lead / excerpt */
.rak-lead{ font-size:clamp(12px,1.5vw,15px); line-height:1.55; margin:0; }

/* Byline + share row */
.rak-byline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px; }

/* Share buttons */
.rak-share{ display:inline-flex; gap:8px; margin-left:4px; }
.rak-share__b{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  border:1px solid var(--hair); color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.05em;
  transition:background .15s, color .15s;
}
.rak-share__b:hover{ background:var(--lagoon); color:#fff; border-color:var(--lagoon); text-decoration:none; }

/* Hero image */
.rak-article__hero{
  width:100%; border-radius:var(--radius);
  box-shadow:0 0 60px var(--hero-glow);
  margin-bottom:40px;
  object-fit:cover;
}

/* ── Prose — GoRAK-rendered article body ──────────────────────────────────── */
.rak-prose{
  font-size:clamp(12.5px,0.75vw,13.5px);   /* editorial baseline — tamed from 19px */
  line-height:1.78;
  max-width:66ch;      /* comfortable reading measure */
  color:var(--text);
}
/* Event and offer pages reuse .rak-prose for a short description, and 66ch is a reading
   measure for a long article body. Everything else on those pages (facts bar, hero, venue
   card) fills the article column, so the description alone sat inset and looked misaligned.
   The measure is kept where it earns its place: article bodies, and the long-form pages
   that re-declare it inline. */
.rak-prose--full{ max-width:none; }
.rak-prose > * + *{ margin-top:1.4em; }
/* Body images open in the shared lightbox. Purely an affordance: no extra request is made
   until the image is actually clicked. */
.rak-prose img[data-zoom]{ cursor:zoom-in; }
.rak-prose img[data-zoom]:focus-visible{ outline:2px solid var(--lagoon); outline-offset:3px; }
.rak-prose h2{
  font-size:clamp(15px,1.875vw,21px);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.15;
  margin-top:2.2em;
  margin-bottom:.5em;
  color:var(--text);
}
.rak-prose h3{
  font-size:clamp(12px,1.5vw,16px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-top:1.8em;
  margin-bottom:.4em;
  color:var(--text);
}
.rak-prose p{ margin:0; }
.rak-prose a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.rak-prose a:hover{ text-decoration:none; }
.rak-prose strong{ font-weight:700; }
.rak-prose em{ font-style:italic; }

/* Block quote — lagoon left rule */
.rak-prose blockquote{
  margin:1.6em 0;
  padding:.8em 1.2em;
  border-left:4px solid var(--lagoon);
  background:var(--bg-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--muted);
  font-style:italic;
}
.rak-prose blockquote p{ margin:0; }

/* Lists */
.rak-prose ul, .rak-prose ol{
  padding-left:1.5em;
  margin:0;
}
.rak-prose li{ margin-bottom:.35em; }
.rak-prose ul li{ list-style:disc; }
.rak-prose ol li{ list-style:decimal; }

/* Images and figures */
.rak-prose img{
  width:100%; border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:1.2em 0;
}
.rak-prose figure{
  margin:1.6em 0;
}
.rak-prose figure img{ margin:0; }
.rak-prose figcaption{
  font-size:12.5px;
  color:var(--muted);
  margin-top:.5em;
  text-align:center;
  font-style:italic;
}

/* Tables */
.rak-prose table{
  width:100%; border-collapse:collapse;
  font-size:14px;
  margin:1.4em 0;
}
.rak-prose th{
  text-align:left; font-weight:700;
  padding:8px 12px;
  border-bottom:2px solid var(--hair);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.rak-prose td{
  padding:8px 12px;
  border-bottom:1px solid var(--hair);
  vertical-align:top;
}
.rak-prose tr:last-child td{ border-bottom:0; }

/* GoRAK media-placeholder divs carry inline styles — leave them untouched */

/* Tags row */
.rak-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }

/* ── Task 3: Home magazine layout (editorial) ─────────────────────────────── */

/* Hero band — overlay lead + mixed-media rail, with an ambient lagoon glow */
.rak-hero-band{ position:relative; padding:34px 0 6px; }
.rak-hero-band::before{ content:""; position:absolute; inset:0 0 45% 0; pointer-events:none;
  background:radial-gradient(72% 80% at 28% 0,var(--hero-glow),transparent 70%); }
.rak-hero{ position:relative; display:grid; grid-template-columns:1.7fr 330px; gap:34px; align-items:stretch; }

/* Lead: big image with overlaid headline */
.rak-lead{ position:relative; display:block; min-height:540px; border-radius:calc(var(--radius) + 4px);
  overflow:hidden; box-shadow:var(--shadow); color:#fff; isolation:isolate; }
.rak-lead__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.rak-lead:hover .rak-lead__img{ transform:scale(1.04); }
.rak-lead__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,12,22,.04) 28%,rgba(8,12,22,.50) 70%,rgba(8,12,22,.82) 100%); }
.rak-lead__ex{ color:rgba(255,255,255,.84); font-size:11px; line-height:1.5; max-width:54ch; margin:0; }
.rak-lead__meta{ color:rgba(255,255,255,.7); font-size:12.5px; letter-spacing:.02em; }
.rak-lead:hover, .rak-lead:hover .rak-lead__cap h1{ text-decoration:none; }

/* Rail */
.rak-rail{ display:flex; flex-direction:column; gap:18px; }
.rak-rail .eyebrow{ margin-bottom:2px; }
.rak-rail__item{ display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--hair); }
.rak-rail__item:last-child{ border-bottom:0; padding-bottom:0; }
.rak-rail__item:hover{ text-decoration:none; }
.rak-rail__thumb{ width:88px; height:66px; border-radius:12px; background:var(--bg-soft) center/cover;
  box-shadow:0 7px 18px var(--hero-glow); }
.rak-rail__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rak-rail__cat{ font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--label-teal); }
.rak-rail__title{ font-weight:600; font-size:11px; line-height:1.24; color:var(--text); }
.rak-rail__item:hover .rak-rail__title{ color:var(--link); }
@media (max-width: 900px){
  .rak-hero{ grid-template-columns:1fr; }
  .rak-lead{ min-height:420px; }
}

/* Explore / categories */
/* (.rak-cats ring strip removed — no template renders it.) */

/* Section heads */
.rak-section{ padding-top:46px; padding-bottom:46px; }  /* vertical only — keep .wrap's side gutter */
.rak-section__head{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.rak-section__head h2{ font-size:clamp(15px,1.5vw,19px); white-space:nowrap; }
.rak-section__head .more{ margin-left:auto; }
.rak-headrule{ flex:1; height:1px; background:linear-gradient(90deg,var(--lagoon),var(--rose),transparent); opacity:.55; }
.more--sm{ font-size:13px; } .more--sm .arrow{ width:28px; height:28px; }

/* Overlay cards + asymmetric mosaic */
.ov-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  color:#fff; box-shadow:var(--shadow); isolation:isolate; }
.ov-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ov-card:hover img{ transform:scale(1.05); }
.ov-card:hover{ text-decoration:none; }
.ov-card__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,12,22,.02) 35%,rgba(8,12,22,.74) 96%); }
.ov-card__pill{ position:absolute; top:14px; left:14px; }
.ov-card__cap{ position:absolute; left:0; right:0; bottom:0; padding:20px; }
.ov-card__cap h3{ color:#fff; font-size:13.5px; letter-spacing:-.02em; line-height:1.18; }
.ov-card__cap p{ color:rgba(255,255,255,.84); font-size:13.5px; line-height:1.45; margin:8px 0 0; max-width:46ch; }
@media (max-width: 820px){
}
@media (max-width: 540px){ .ov-card{ min-height:220px; } }

/* Latest — two-column compact cards */
.rak-compact{ display:grid; grid-template-columns:98px 1fr; gap:16px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--hair); }
.rak-compact:hover{ text-decoration:none; }
.rak-compact__thumb{ width:98px; height:72px; border-radius:12px; background:var(--bg-soft) center/cover;
  box-shadow:0 6px 16px var(--hero-glow); flex-shrink:0; }
.rak-compact__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rak-compact__cat{ font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--label-teal); }
.rak-compact__title{ font-weight:600; font-size:11.5px; line-height:1.24; color:var(--text); }
.rak-compact:hover .rak-compact__title{ color:var(--link); }
.rak-compact__date{ font-size:12px; }
@media (max-width: 700px){ }

/* ── Task 5: Category + search grid ─────────────────────────────────────────── */

/* Card grid — uniform overlay cards for category + search pages */
.rak-cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; grid-auto-rows:240px; }
/* Author display:grid beats the UA [hidden] rule — restore hidden semantics for the
   JS-toggled events grid (its no-JS baseline is the agenda list). */
.rak-cardgrid[hidden]{ display:none; }
@media (max-width: 820px){ .rak-cardgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .rak-cardgrid{ grid-template-columns:1fr; } .rak-cardgrid .ov-card{ min-height:220px; } }

/* Search page — larger centred search form (self-contained; the old header
   .rak-search base rules were removed with the retired header) */
.rak-search--page{ display:flex; justify-content:center; margin:24px 0; }
.rak-search--page input{ width:min(480px,100%); height:46px; font-size:12px; padding:0 20px;
  border-radius:999px; border:1px solid var(--hair); background:var(--surface); color:var(--text);
  font-family:var(--font); outline:none; transition:border-color .2s; }
.rak-search--page input::placeholder{ color:var(--muted); }
.rak-search--page input:focus{ border-color:var(--lagoon); }

/* ── Task 6: Polish — responsive, a11y, reduced-motion, contrast ─────────────── */

/* Focus rings: ensure all interactive elements have a visible ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Override: pill links need the radius to match their shape */
.pill:focus-visible, .pill--ghost:focus-visible { border-radius: 999px; }
/* Toggle button focus */
.toggle:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; }
/* More arrow focus */
.more:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; border-radius: 4px; }

/* prefers-reduced-motion: disable all hover transforms + transitions explicitly on known elements */
@media (prefers-reduced-motion: reduce) {
  *{ animation: none !important; transition: none !important; }
  .more .arrow{ transition: none !important; }
  /* hover zoom on images and category rings */
  .rak-lead:hover .rak-lead__img{ transform: none !important; }
  .ov-card:hover img{ transform: none !important; }
  .rak-cats .cat:hover .ring{ transform: none !important; box-shadow: none !important; }
  .rak-plan__grid a:hover{ transform: none !important; box-shadow: none !important; }
  .rak-cats .cat:hover .ring,
  .ov-card img,
  .rak-lead__img { transition: none !important; }
}

/* Contrast: nudge --muted to meet AA on light bg (#FBFAF6 → #5C6373 is ~4.5:1 OK)
   In dark mode --muted #AEB4C2 on --bg #10131F is ~7.1:1 — no change needed.
   Adding explicit muted colour enforcements to be safe: */
[data-theme="light"] .muted { color: #515666; }  /* slightly darker: ~5.2:1 on #FBFAF6 */

/* Mobile nav: ensure the details/summary is positioned so dropdown sits below header */
@media (max-width: 860px) {
  .site-head { position: sticky; overflow: visible; }
  /* Category strip: always horizontal scroll, no wrap overflow */
  .rak-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Hero + mosaic + latest: already stack via existing media queries, confirm no h-overflow */
  /* Prevent wrap overflow on hero band */
  .rak-hero { overflow: visible; }
}

/* Section padding specificity: unify rak-section and page-level overrides */
.rak-section + .rak-section { padding-top: 0; }
/* The wrap style="padding-top:36px" on category/search overrides OK; no clash needed */

/* 404 page: constrain to wrap width cleanly */
.rak-404 { box-sizing: border-box; }

/* About page: constrain prose width */
.rak-about .rak-prose { box-sizing: border-box; }

/* Nav: prevent search input from overflowing on very small screens */
@media (max-width: 380px) {
  .rak-search input { width: 90px; }
  .rak-search input:focus { width: 110px; }
}

/* ── Branded fallback art — used when an article has no real image ───────────── */
/* Base brand tile (covers any/unknown category). Sits under card scrims + white text. */
.rak-fallback{
  --fb-a:var(--lagoon); --fb-b:var(--rose);
  background:
    radial-gradient(130% 120% at 14% 10%, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(135deg, var(--fb-a) 0%, var(--fb-b) 100%);
}
.rak-fallback::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px);
  opacity:.7;
}
/* Per-launch-category accents (unknown slugs fall through to the brand base). */
.rak-fallback--things-to-do  { --fb-a:#0E7C8B; --fb-b:#12C7B5; }
.rak-fallback--beaches       { --fb-a:#0FA396; --fb-b:#37B9C9; }
.rak-fallback--where-to-stay { --fb-a:#C7566B; --fb-b:#E8736B; }
.rak-fallback--where-to-eat  { --fb-a:#E8736B; --fb-b:#E0A24E; }
.rak-fallback--heritage      { --fb-a:#B98A54; --fb-b:#E8736B; }
.rak-fallback--itineraries   { --fb-a:#0FA396; --fb-b:#E8736B; }
/* Fallback used as a block image inside overlay cards / hero (absolute-filled). */
.ov-card .rak-fallback, .rak-lead .rak-fallback,
.rak-article__hero.rak-fallback{ position:absolute; inset:0; width:100%; height:100%; }
.rak-article__hero.rak-fallback{ position:relative; display:block; aspect-ratio:16/9; height:auto; }
/* Fallback used as a small thumb (rail / compact / ring) — element already sized. */
.rak-fallback.is-thumb{ position:relative; overflow:hidden; }

/* ── Nav dropdowns (Guides / Plan) — <details>-based, keyboard + click ───────── */
.rak-dd{ position:relative; }
.rak-dd > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  color:var(--text); font-weight:600; font-size:14.5px;
}
.rak-dd > summary::-webkit-details-marker{ display:none; }
.rak-dd > summary:hover{ color:var(--link); }
.rak-dd__caret{ font-size:10px; transition:transform .18s; }
.rak-dd[open] > summary .rak-dd__caret{ transform:rotate(180deg); }
.rak-dd__panel{
  position:absolute; top:calc(100% + 14px); left:-14px; min-width:196px;
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; z-index:50;
}
.rak-dd__panel a{ padding:9px 12px; border-radius:9px; color:var(--text); font-size:14.5px; font-weight:500; }
.rak-dd__panel a:hover{ background:var(--bg-soft); color:var(--link); text-decoration:none; }
@media (max-width: 860px){
  .rak-dd{ width:100%; }
  .rak-dd > summary{ padding:8px 0; border-bottom:1px solid var(--hair); justify-content:space-between; }
  .rak-dd__panel{ position:static; box-shadow:none; border:0; background:transparent;
    padding:4px 0 8px 12px; border-radius:0; min-width:0; }
  .rak-dd__panel a{ padding:7px 0; }
}

/* ── Home Phase 1: positioning hero, plan block, strips ─────────────────────── */
.eyebrow--on-dark{ color:rgba(255,255,255,.92); }
.rak-lead__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.btn--ghost-light{ background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); text-decoration:none; }
.rak-lead__feat{ color:rgba(255,255,255,.82); font-size:13px; margin-top:6px; display:inline-block; }
.rak-lead__feat:hover{ color:#fff; }

/* Plan-your-trip start block */
.rak-plan{ padding:44px 0 8px; }
.rak-plan__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.rak-plan__head h2{ font-size:clamp(15px,1.5vw,19px); }
.rak-plan__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rak-plan__grid a{ display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  border:1px solid var(--hair); border-radius:14px; background:var(--surface);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
.rak-plan__grid a:hover{ border-color:var(--lagoon); transform:translateY(-3px);
  box-shadow:var(--shadow); text-decoration:none; }
.rak-plan__grid b{ font-size:12px; color:var(--text); letter-spacing:-.01em; }
.rak-plan__grid small{ color:var(--muted); font-size:13px; }
@media (max-width: 760px){ .rak-plan__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 460px){ .rak-plan__grid{ grid-template-columns:1fr; } }

/* Category ring fallback art (win over the plain .ring background) */
.rak-cats .cat .ring.rak-fallback{ background:
  radial-gradient(130% 120% at 14% 10%, rgba(255,255,255,.20), transparent 46%),
  linear-gradient(135deg, var(--fb-a), var(--fb-b)); }

/* When-to-go + how-far strips */
.rak-strip{ border:1px solid var(--hair); border-radius:16px; padding:20px 22px; background:var(--bg-soft); }
.rak-strip__k{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--label-teal); }
.rak-strip p{ margin:8px 0 12px; font-size:14.5px; line-height:1.6; }
@media (max-width: 720px){ }

/* Share buttons rendered as <button> (copy-link, native share) */
button.rak-share__b{ width:auto; padding:0 12px; background:transparent; cursor:pointer; font-family:var(--font); }
button.rak-share__b:hover{ background:var(--lagoon); color:#fff; border-color:var(--lagoon); }

/* Read-next sits full-width below the narrow article column */
.rak-readnext{ padding-top:20px; }

/* Empty-states + browse chips (category / search) */
.rak-empty{ padding:22px 0 64px; }
.rak-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* Category intro line */
.rak-cat-intro{ font-size:13px; line-height:1.55; max-width:62ch; margin:.5em 0 0; }

/* At-a-glance quick-facts strip (practical info) */
.rak-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px;
  background:var(--hair); border:1px solid var(--hair); border-radius:14px; overflow:hidden; }
.rak-facts > div{ background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.rak-facts__k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.rak-facts b{ font-size:11px; }
@media (max-width:560px){ .rak-facts{ grid-template-columns:1fr 1fr; } }

/* ── Phase 4: Offers & Events ───────────────────────────────────────────────── */
/* Coming-soon empty state (offers / events primary state today) */
.rak-comingsoon{ text-align:center; padding:38px 0 72px; }
.rak-comingsoon h2{ font-size:clamp(16.5px,1.8vw,22.5px); margin:.35em 0 .25em; }
.rak-comingsoon .rak-chips{ justify-content:center; }

/* Offer / event overlay cards — venue + CTA inside the cap */
.offer-card__venue{ color:rgba(255,255,255,.85); font-size:12.5px; display:block; margin-top:2px; }
.offer-card__cta{ margin-top:12px; align-self:flex-start; padding:8px 15px; font-size:13px; }

/* Events: filter bar + view toggle */
.rak-events__bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.rak-events__filters{ margin-top:0; }
.rak-viewtoggle{ display:inline-flex; border:1px solid var(--hair); border-radius:999px; overflow:hidden; }
.rak-viewtoggle button{ background:transparent; border:0; padding:7px 16px; font-family:var(--font);
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.rak-viewtoggle button.is-active{ background:var(--grad); color:#06231f; }

/* Events: agenda list */
.rak-agenda__month{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin:26px 0 8px; }
.event-row{ display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--hair); }
.event-row:hover{ text-decoration:none; }
.event-row__date{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--hair); }
.event-row__date b{ font-size:16.5px; line-height:1; color:var(--text); }
.event-row__date em{ font-style:normal; font-size:11px; letter-spacing:.1em; color:var(--label-teal); font-weight:700; }
.event-row__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.event-row__title{ font-weight:600; font-size:12px; color:var(--text); line-height:1.25; }
.event-row:hover .event-row__title{ color:var(--link); }
.event-row__meta{ font-size:13px; color:var(--muted); }
.event-row__type{ font-style:normal; color:var(--label-teal); font-weight:600; }

/* ── Events list with a thumbnail (events page only) ──────────────────────────
   A modifier rather than a change to .event-row, because the area and search pages
   share that class with a two-column layout and must not move.

   The row is a container with a stretched title link, so the thumbnail can be a real
   <button>: a button inside an anchor is invalid markup and browsers drop one of them.
   The button sits above the stretched link so a click on the photo enlarges it while a
   click anywhere else follows the row. */
.event-row--thumb{ position:relative; grid-template-columns:64px 88px 1fr; }
.event-row__thumb{
  width:88px; height:64px; border-radius:10px; overflow:hidden; flex:none;
  padding:0; border:0; background:var(--bg-soft); cursor:zoom-in;
  position:relative; z-index:1;   /* above the stretched link */
}
.event-row__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-row__thumb:focus-visible{ outline:2px solid var(--lagoon); outline-offset:2px; }
/* An event with no photo keeps the column's shape so the rows stay aligned. */
.event-row__thumb--empty{
  display:block; cursor:default;
  background:linear-gradient(135deg,rgba(15,163,150,.18),rgba(238,106,82,.16));
}
.event-row__link{ color:inherit; text-decoration:none; }
.event-row__link::after{ content:""; position:absolute; inset:0; }
.event-row--thumb:hover .event-row__title{ color:var(--link); }
@media (max-width:560px){
  .event-row--thumb{ grid-template-columns:56px 68px 1fr; gap:12px; }
  .event-row__thumb{ width:68px; height:56px; }
}

/* Event detail */
.rak-event__tags{ display:flex; align-items:center; gap:10px; }
.rak-event__state{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; border:1px solid var(--hair); color:var(--muted); }
.rak-event__state--on-now{ color:#06231f; background:var(--grad); border:0; }
.rak-event__facts{ display:flex; flex-direction:column; gap:6px; font-size:11px; margin:6px 0 2px; }
.rak-event__facts b{ display:inline-block; min-width:58px; color:var(--muted); font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.rak-event__facts a{ text-decoration:underline; text-underline-offset:2px; }
.btn--ghost-alt{ background:transparent; border:1px solid var(--hair); color:var(--text); }
.btn--ghost-alt:hover{ border-color:var(--lagoon); text-decoration:none; }
@media (max-width:520px){ .rak-events__bar{ gap:10px; } }

/* ══════════════════════════════════════════════════════════════════════════════
   PORTAL — dense RAK city-guide layout (live ribbon, two-tier nav, 3-col hero +
   widget sidebar, dense category feed, what's-on, most-read, offers). Own design:
   teal structure + punchy coral energy, light/dark via tokens.
   ══════════════════════════════════════════════════════════════════════════════ */
.p-label{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.p-ago{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; }
.c-teal{ color:var(--label-teal); } .c-coral{ color:var(--coral-text); }

/* ── Live ribbon ───────────────────────────────────────────────────────────── */
.rak-ribbon{ background:var(--ink); color:#EAEAF0; font-size:12.5px; }
.rak-ribbon .wrap{ display:flex; align-items:center; justify-content:center; text-align:center; height:38px; gap:16px; }
.rak-ribbon .wrap::-webkit-scrollbar{ display:none; }
.rak-ribbon__l, .rak-ribbon__r{ display:flex; align-items:center; gap:16px; white-space:nowrap; }
.rak-ribbon b{ color:#fff; font-weight:700; }
.rak-ribbon .sep{ color:var(--lagoon-bright); }
.rak-ribbon .live{ color:var(--coral); font-weight:800; letter-spacing:.04em; }
.rak-ribbon a{ color:#EAEAF0; opacity:.85; } .rak-ribbon a:hover{ opacity:1; text-decoration:none; }

/* ── Masthead ──────────────────────────────────────────────────────────────── */
.rak-mast{ background:var(--bg); border-bottom:1px solid var(--hair); }
.rak-mast .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px; }
.rak-brand{ display:flex; align-items:baseline; gap:10px; }
.rak-mast__r{ display:flex; align-items:center; gap:12px; }
.rak-mast__search{ display:flex; align-items:center; gap:8px; height:40px; padding:0 6px 0 15px; border:1px solid var(--hair);
  border-radius:999px; background:var(--surface); }
.rak-mast__search input{ border:0; background:transparent; outline:none; font-family:var(--font); font-size:14px; color:var(--text); width:190px; }
.rak-mast__search input::placeholder{ color:var(--muted); }
.rak-mast__search button{ width:30px; height:30px; border:0; border-radius:999px; background:var(--lagoon); color:#04231f; font-size:11px; font-weight:800; cursor:pointer; }
.rak-social{ display:flex; gap:8px; }
.rak-social a{ width:30px; height:30px; display:grid; place-items:center; border-radius:7px; font-size:11px; font-weight:800;
  background:var(--bg-soft); color:var(--muted); text-transform:lowercase; }
.rak-social a:hover{ background:var(--lagoon); color:#04231f; text-decoration:none; }

/* ── Category ribbon (flat, visible, sticky) ───────────────────────────────── */
.rak-catnav{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(0,0,0,.03); }
.rak-catnav .wrap{ display:flex; align-items:center; gap:0; height:52px; }
.rak-catnav__scroll{ display:flex; align-items:center; gap:0; height:52px; flex:1; min-width:0; }
.rak-catnav a{ position:relative; padding:0 15px; height:52px; display:inline-flex; align-items:center; white-space:nowrap;
  font-weight:700; font-size:14.5px; color:var(--text); }
.rak-catnav a:hover, .rak-catnav a.is-on{ color:var(--link); text-decoration:none; }
.rak-catnav a.is-on::after, .rak-catnav a:hover::after{ content:""; position:absolute; left:12px; right:12px; bottom:0;
  height:3px; background:var(--coral); border-radius:3px 3px 0 0; }
.rak-catnav .hot{ color:var(--coral-text); }
.rak-catnav .spacer{ margin-left:auto; }

/* ── Section scaffolding ───────────────────────────────────────────────────── */
.p-sec{ padding-top:34px; padding-bottom:34px; }  /* vertical only — keep .wrap's side gutter (was padding:34px 0, which zeroed it on mobile) */
.p-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:14px; }
.p-head h2{ font-size:clamp(14px,1.35vw,16.5px); }
.p-head .kick{ display:inline-flex; align-items:center; gap:10px; }
.p-head .kick::before{ content:""; width:22px; height:4px; border-radius:3px; background:var(--coral); flex-shrink:0; }
.p-more{ font-size:13px; font-weight:800; color:var(--link); white-space:nowrap; }
.p-more:hover{ text-decoration:none; filter:brightness(1.1); }

/* placeholder art (until real photos) — a branded gradient tile */
.p-ph{ position:relative; overflow:hidden; background:
  radial-gradient(130% 120% at 14% 10%, rgba(255,255,255,.16), transparent 46%),
  linear-gradient(150deg, var(--lagoon), var(--coral)); }
.p-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── Hero (3 columns) ──────────────────────────────────────────────────────── */
.rak-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,16,.03) 28%,rgba(8,10,16,.55) 72%,rgba(8,10,16,.87)); }
.rak-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:5px 11px; border-radius:6px;
  background:var(--coral); color:#2a0b04; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.rak-badge--teal{ background:var(--lagoon); color:#04231f; }

.rak-tops{ display:flex; flex-direction:column; }
.rak-tops h3{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  padding-bottom:9px; border-bottom:2px solid var(--text); margin:0 0 2px; }
.rak-top{ display:flex; flex-direction:column; gap:4px; padding:13px 0; border-bottom:1px solid var(--hair); }
.rak-top:hover{ text-decoration:none; } .rak-top:hover .rak-top__t{ color:var(--link); }
.rak-top__t{ font-size:11px; font-weight:700; line-height:1.26; color:var(--text); }

/* widget sidebar */
.rak-rail2{ display:flex; flex-direction:column; gap:14px; }
.rak-w{ border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.rak-w__h{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hair); }
.rak-w--wx{ background:linear-gradient(150deg,#0E7C8B,var(--lagoon)); color:#fff; border:0; }
.rak-w--wx .rak-w__h{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.22); }
.rak-wx__body{ padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rak-wx__temp{ font-size:31.5px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.rak-wx__meta{ font-size:12.5px; text-align:right; opacity:.94; }
.rak-wx__row{ padding:0 14px 13px; display:flex; justify-content:space-between; font-size:12px; opacity:.9; }
.rak-pray{ padding:6px 0; }
.rak-pray__row{ display:flex; justify-content:space-between; padding:7px 14px; font-size:13px; }
.rak-pray__row.next{ background:var(--sand); color:var(--label-teal); font-weight:800; }
.rak-mini{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rak-mini b{ font-size:11px; color:var(--text); } .rak-mini small{ color:var(--muted); font-size:12px; }
.rak-fx{ display:flex; gap:16px; padding:12px 14px; overflow-x:auto; font-size:13px; scrollbar-width:none; }
.rak-fx::-webkit-scrollbar{ display:none; }
.rak-fx b{ color:var(--link); }
@media (max-width:1000px){ }

/* ── What's on band ────────────────────────────────────────────────────────── */
.rak-band2{ background:var(--sand); }
.rak-whatson{ display:flex; gap:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.rak-whatson::-webkit-scrollbar{ display:none; }
.rak-ev{ flex:0 0 262px; display:flex; gap:12px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:12px; }
.rak-ev:hover{ text-decoration:none; } .rak-ev:hover .rak-ev__t{ color:var(--link); }
.rak-ev__d{ flex:0 0 52px; height:56px; border-radius:9px; background:var(--ink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rak-ev__d b{ font-size:15px; line-height:1; } .rak-ev__d span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.rak-ev__t{ font-weight:700; font-size:14.5px; line-height:1.2; color:var(--text); }
.rak-ev__v{ font-size:12px; color:var(--muted); margin-top:3px; }

/* ── Dense feed (per-category sections) ────────────────────────────────────── */
.rak-feed{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px; }
.rak-big{ border-radius:var(--r); overflow:hidden; position:relative; min-height:300px; display:flex; align-items:flex-end; color:#fff; }
.rak-big .p-ph{ position:absolute; inset:0; }
.rak-big__b{ position:relative; padding:20px; display:flex; flex-direction:column; gap:8px; }
.rak-big h3{ font-size:16px; color:#fff; max-width:18ch; line-height:1.14; }
.rak-col{ display:flex; flex-direction:column; }
.rak-row{ display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--hair); align-items:flex-start; }
.rak-row:first-child{ padding-top:0; } .rak-row:last-child{ border-bottom:0; }
.rak-row:hover{ text-decoration:none; } .rak-row:hover .rak-row__t{ color:var(--link); }
.rak-row__ph{ flex:0 0 96px; height:70px; border-radius:9px; }
.rak-row__b{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rak-row__t{ font-weight:700; font-size:11px; line-height:1.28; color:var(--text); }
.rak-row__m{ display:flex; gap:10px; align-items:center; }
@media (max-width:900px){ .rak-feed{ grid-template-columns:1fr; } .rak-big{ min-height:240px; } }

/* two-up dense sections */
.rak-two{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
@media (max-width:760px){ .rak-two{ grid-template-columns:1fr; } }

/* ── Most read ─────────────────────────────────────────────────────────────── */
.rak-trend{ background:var(--ink); color:#fff; }
.rak-trend .p-head h2{ color:#fff; }
.rak-trend .p-head .kick::before{ background:var(--lagoon); }
.rak-ranks{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.rak-rank2{ display:flex; gap:12px; align-items:flex-start; }
.rak-rank2:hover{ text-decoration:none; } .rak-rank2:hover .rak-rank2__t{ color:var(--lagoon-bright); }
.rak-rank2__n{ font-size:22.5px; font-weight:800; color:var(--lagoon-bright); line-height:.9; letter-spacing:-.03em; }
.rak-rank2__t{ font-size:14px; font-weight:700; line-height:1.28; color:#fff; }
.rak-rank2__c{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--coral); display:block; margin-top:6px; }
@media (max-width:1000px){ .rak-ranks{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .rak-ranks{ grid-template-columns:1fr; } }

/* ── Offers row ────────────────────────────────────────────────────────────── */
.rak-offer2{ border-radius:var(--r); overflow:hidden; position:relative; min-height:220px; display:flex; align-items:flex-end; color:#fff; }
.rak-offer2 .p-ph{ position:absolute; inset:0; }
.rak-offer2__b{ position:relative; padding:18px; display:flex; flex-direction:column; gap:8px; }
.rak-tag{ align-self:flex-start; background:var(--surface); color:var(--text); font-size:11px; font-weight:800; padding:4px 9px; border-radius:6px; }
.rak-offer2 h3{ font-size:13.5px; color:#fff; line-height:1.16; }
@media (max-width:820px){ }

/* ── Landscape hero (full-width banner, no widgets crowding it) ────────────── */
.rak-herowide{ position:relative; border-radius:var(--r); overflow:hidden; margin-top:22px;
  min-height:clamp(300px,40vw,470px); display:flex; align-items:flex-end; color:#fff; }
.rak-herowide .p-ph{ position:absolute; inset:0; }
.rak-herowide__b{ position:relative; padding:clamp(20px,3vw,40px); display:flex; flex-direction:column; gap:11px; max-width:780px; }
.rak-herowide h1{ font-size:clamp(18px,2.025vw,27px); color:#fff; line-height:1.12; max-width:24ch; }
.rak-herowide p{ margin:0; color:rgba(255,255,255,.88); font-size:clamp(10.5px,1.05vw,13px); max-width:62ch; }
.rak-herowide__meta{ display:flex; gap:12px; font-size:12.5px; color:rgba(255,255,255,.82); flex-wrap:wrap; }

/* Top-stories strip below the hero */
.rak-topstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px; }
.rak-tcard{ display:flex; flex-direction:column; gap:8px; }
.rak-tcard .p-ph{ aspect-ratio:16/10; border-radius:10px; }
.rak-tcard__c{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.rak-tcard__t{ font-weight:700; font-size:11px; line-height:1.26; color:var(--text); }
.rak-tcard:hover{ text-decoration:none; } .rak-tcard:hover .rak-tcard__t{ color:var(--link); }
@media (max-width:820px){ .rak-topstrip{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .rak-topstrip{ grid-template-columns:1fr; } }

/* Content + right rail (widgets live here now, not by the banner) */
.rak-main{ display:grid; grid-template-columns:minmax(0,1fr) 302px; gap:36px; align-items:start; }
.rak-main__content{ min-width:0; }
.rak-main__rail{ display:flex; flex-direction:column; gap:14px; position:sticky; top:64px; }
.rak-main__rail .rak-w__h.railtitle{ background:var(--sand); }
@media (max-width:980px){
  .rak-main{ grid-template-columns:1fr; }
  .rak-main__rail{ position:static; flex-direction:row; flex-wrap:wrap; }
  .rak-main__rail .rak-w{ flex:1 1 230px; }
}

/* ── Article page — wide editorial grid: main column + sticky sidebar ──────── */
.rak-article{ max-width:1120px; padding-top:26px; padding-bottom:60px; }
.rak-article__head-wrap{ max-width:none; }   /* header uses the full content width — no dead space on the right */
.rak-crumbs{ color:var(--muted); }
.rak-kicker{ display:inline-block; margin:2px 0 8px; }
.rak-kicker:hover{ text-decoration:none; filter:brightness(1.1); }
.rak-dek{ font-size:clamp(12px,0.975vw,13.5px); color:var(--muted); line-height:1.6; margin:12px 0 0; max-width:none; font-weight:400; }
.rak-byline{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:20px 0 2px;
  padding:14px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-size:13.5px; color:var(--muted); }
.rak-byline__by{ color:var(--text); font-weight:700; }
.rak-byline .rak-share{ margin-left:auto; }

/* Full-width hero — wider than the text column */
.rak-article__hero{ width:100%; aspect-ratio:16/9; object-fit:cover; margin:26px 0 34px;
  box-shadow:var(--shadow); border-radius:var(--r); }
.rak-article__hero.rak-fallback{ aspect-ratio:16/9; border-radius:var(--r); }

/* Body + sidebar grid — uses the horizontal space instead of empty margins */
.rak-article__grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:60px; align-items:start; }
.rak-article__main{ min-width:0; }
.rak-article__aside{ position:sticky; top:64px; display:flex; flex-direction:column; gap:18px; }
.rak-aside-card{ border:1px solid var(--hair); border-radius:var(--r); background:var(--surface); overflow:hidden; }
.rak-aside-card__h{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  padding:12px 15px; border-bottom:1px solid var(--hair); }
.rak-aside-more a{ display:flex; gap:11px; padding:11px 15px; border-bottom:1px solid var(--hair); align-items:center; }
.rak-aside-more a:last-child{ border-bottom:0; }
.rak-aside-more a:hover{ text-decoration:none; background:var(--bg-soft); }
.rak-aside-more__ph{ flex:0 0 54px; height:42px; border-radius:7px; }
.rak-aside-more__t{ font-size:13.5px; font-weight:700; line-height:1.25; color:var(--text); }
.rak-aside-cta{ padding:18px 16px; background:var(--sand); }
.rak-aside-cta b{ font-size:12px; display:block; }
.rak-aside-cta p{ font-size:13px; color:var(--muted); margin:4px 0 12px; }
.rak-aside-share{ display:flex; align-items:center; gap:10px; padding:12px 15px; }
.rak-aside-share .p-label{ color:var(--muted); }

/* Inline body images stay in-column; heading rhythm scaled up for 19px body */
.rak-prose img{ max-width:100%; height:auto; }
.rak-prose .fr-dib{ display:block; margin:1.6em auto; float:none; }
.rak-prose .fr-fic{ max-width:100%; }
.rak-prose figure{ margin:1.8em 0; }
.rak-prose h2{ font-size:clamp(16px,1.5vw,19.5px); margin-top:1.7em; }
.rak-prose h3{ font-size:clamp(13.5px,1.2vw,16px); }

@media (max-width:1000px){
  .rak-article{ max-width:760px; }
  .rak-article__grid{ grid-template-columns:1fr; }
  .rak-article__aside{ position:static; }
  .rak-article__head-wrap{ max-width:none; }
}

/* ── Unified portal card grid (category / search / listings) ───────────────── */
.rak-pagehead{ padding-top:30px; padding-bottom:4px; }  /* vertical only — keep .wrap's side gutter */
.rak-pagetitle{ font-size:clamp(19.5px,1.95vw,25.5px); line-height:1.12; letter-spacing:-.018em; margin:4px 0 0; }
.cat-hero{ width:100%; max-height:360px; object-fit:cover; border-radius:16px; margin-top:20px; display:block; }
.rak-cardgrid2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:24px 22px; }
.rak-card{ display:flex; flex-direction:column; gap:9px; }
.rak-card:hover{ text-decoration:none; } .rak-card:hover .rak-card__t{ color:var(--link); }
.rak-card__ph{ aspect-ratio:16/10; border-radius:var(--r); }
.rak-card__c{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-top:2px; }
.rak-card__t{ font-weight:700; font-size:13px; line-height:1.26; color:var(--text); }
.rak-card__ex{ font-size:13.5px; color:var(--muted); line-height:1.45; }
@media (max-width:560px){ .rak-cardgrid2{ grid-template-columns:1fr 1fr; gap:18px 14px; } .rak-card__t{ font-size:11px; } }
@media (max-width:380px){ .rak-cardgrid2{ grid-template-columns:1fr; } }

/* Skip-to-content link (visible on keyboard focus) */
.skip{ position:absolute; left:12px; top:-48px; z-index:100; background:var(--ink); color:#fff;
  padding:9px 16px; border-radius:8px; font-weight:700; font-size:14px; transition:top .15s; }
.skip:focus{ top:8px; text-decoration:none; }
/* Visually hidden but exposed to screen readers / AI agents (e.g. a page's H1). */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Two-tier header responsive (mobile search lives in the sticky catnav) ── */
@media (max-width:860px){
  .rak-mast .wrap{ height:60px; }
  .rak-mast__search{ display:none; }
  .rak-social{ display:none; }
  .rak-mast__r{ gap:8px; }
  .rak-mast .btn--coral{ padding:8px 13px; font-size:13.5px; }   /* compact CTA so it never wraps */
}
/* Narrow phones (Galaxy S23 ≈ 360px): tighten further so "Get in touch" stays on one line. */
@media (max-width:410px){
  .rak-brand__logo{ height:26px; }
  .rak-mast__r{ gap:6px; }
  .rak-mast .btn--coral{ padding:7px 11px; font-size:12.5px; }
}

/* Casual image-save deterrent — blocks image dragging, text-selection of
   images, and the iOS long-press "Save Image" callout. Pairs with the
   contextmenu/dragstart handlers in theme.js. Not foolproof (screenshots and
   devtools still work); the reader site only serves the downsized web copy. */
img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* ── Directory + venue pages + offers-by-venue ─────────────────────────────── */
.rak-dirfilter{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.rak-dirfilter--areas{ margin-top:8px; }
.rak-dirfilter a{ padding:6px 14px; border-radius:999px; border:1px solid var(--hair);
  font-size:13px; font-weight:600; color:var(--text); background:var(--surface); text-decoration:none; }
.rak-dirfilter a:hover{ border-color:var(--text); }
.rak-dirfilter a.is-on{ background:var(--text); color:var(--surface); border-color:var(--text); }

.venue-card__type{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  opacity:.9; display:block; margin-bottom:2px; }

/* Venue detail */
.rak-venue__offers .p-head{ margin-bottom:14px; }
.rak-venue__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:760px){ .rak-venue__grid{ grid-template-columns:1fr; } }
.rak-venue__facts{ display:grid; gap:0; border:1px solid var(--hair); border-radius:14px; overflow:hidden; }
.rak-venue__facts > div{ display:flex; justify-content:space-between; gap:16px; padding:13px 16px;
  border-bottom:1px solid var(--hair); font-size:14px; }
.rak-venue__facts > div:last-child{ border-bottom:0; }
.rak-venue__facts b{ color:var(--muted); font-weight:600; }
.rak-venue__facts span{ text-align:right; }
.rak-venue__facts a{ color:var(--link); text-decoration:none; }
.rak-venue__map{ border-radius:14px; overflow:hidden; border:1px solid var(--hair); min-height:280px; }
.rak-venue__map iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }
.rak-venue__guidelink{ margin-top:22px; }

/* Offers grouped by venue */
.rak-offergroup{ margin:0 0 34px; }
.rak-offergroup__head{ display:flex; align-items:center; gap:14px; padding:0 0 14px; margin-bottom:16px;
  border-bottom:1px solid var(--hair); }
.rak-offergroup__ph{ flex:0 0 auto; width:56px; height:56px; border-radius:12px; overflow:hidden; }
.rak-offergroup__ph img{ width:100%; height:100%; object-fit:cover; }
.rak-offergroup__id{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.rak-offergroup__name{ font-family:var(--font-display,inherit); font-weight:800; font-size:14px;
  color:var(--text); text-decoration:none; line-height:1.15; }
.rak-offergroup__name:hover{ text-decoration:underline; }
.rak-offergroup__meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.rak-offergroup__link{ flex:0 0 auto; font-size:13px; font-weight:600; color:var(--link); text-decoration:none; white-space:nowrap; }
.offer-card__desc{ display:block; font-size:12.5px; opacity:.9; margin:2px 0 6px; }

/* Homepage campaign promo band */
.rak-campaigns__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.rak-campaign{ position:relative; display:block; min-height:160px; border-radius:16px; overflow:hidden;
  color:#fff; text-decoration:none; }
.rak-campaign img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rak-campaign .rak-fallback{ position:absolute; inset:0; }
.rak-campaign .rak-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72)); }
.rak-campaign__b{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; display:flex; flex-direction:column; gap:3px; }
.rak-campaign__k{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.rak-campaign__b b{ font-family:var(--font-display,inherit); font-size:15px; line-height:1.12; font-weight:800; }
.rak-campaign__d{ font-size:12.5px; opacity:.9; }

/* ── Venue-profile offer band — prominent image-split cards ─────────────────── */
.rak-offerband{margin:8px 0 6px;display:flex;flex-direction:column;gap:14px}
.rak-offerband__bar{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:8px 15px;border-radius:999px;
  background:linear-gradient(90deg,var(--coral),var(--coral-deep));color:#fff}
.rak-offerband__badge{font-weight:800;letter-spacing:.01em;font-size:0.712rem}
.rak-offerband__count{font-size:.72rem;font-weight:700;opacity:.92;text-transform:uppercase;letter-spacing:.08em}
/* card: full-text body left, image right */
.rak-offercard{display:grid;grid-template-columns:1fr 42%;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--surface)}
/* clean image — NO overlay; flyer shown WHOLE (contain) on a soft ground. It's a
   <button> so a click opens the lightbox. */
.rak-offercard__media{position:relative;min-height:200px;overflow:hidden;display:block;width:100%;border:0;padding:0;
  cursor:zoom-in;appearance:none;background:#f4efe6}
.rak-offercard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s ease}
.rak-offercard__media:hover img{transform:scale(1.03)}
/* deal + expiry live in the text column now (chips), not on the image */
.rak-offercard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:1px}
.rak-offercard__deal{display:inline-flex;align-items:center;font-weight:800;font-size:.82rem;color:var(--coral-deep);
  background:rgba(238,106,82,.12);border:1px solid rgba(216,82,59,.28);padding:5px 12px;border-radius:999px}
.rak-offercard__ends{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.03em;
  color:#fff;background:var(--coral-deep);padding:5px 11px;border-radius:999px}
.rak-offercard__body{padding:18px 20px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.rak-offercard__body:only-child{grid-column:1 / -1}   /* no image → body spans full width */
.rak-offercard__eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--coral-text)}
.rak-offercard__title{margin:0;color:var(--text);font-weight:700;font-size:0.855rem;line-height:1.28;letter-spacing:-.01em}
.rak-offercard__desc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.56}
.rak-offercard__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;color:#fff;
  background:var(--coral);padding:9px 17px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(216,82,59,.26);transition:background .15s ease,transform .12s ease}
.rak-offercard__cta:hover{background:var(--coral-deep);transform:translateY(-1px);text-decoration:none}
@media(max-width:680px){
  .rak-offercard{grid-template-columns:1fr}
  .rak-offercard__media{order:-1;min-height:0;aspect-ratio:16/9}
  .rak-offercard__body{padding:16px 17px}
}

/* ── Clean offer card (grids: /offers, /venue, home) — image top, text below ── */
/* offer grid — natural card heights (NOT .rak-cardgrid, which forces 240px rows) */
.rak-ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px}
@media (max-width:540px){.rak-ogrid{grid-template-columns:1fr}}
.rak-ocard{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:0 8px 22px rgba(17,20,31,.07)}
/* flyer shown WHOLE (contain) on a soft ground — never cropped */
.rak-ocard__media{position:relative;display:block;width:100%;aspect-ratio:4/5;border:0;padding:0;margin:0;overflow:hidden;
  cursor:zoom-in;appearance:none;background:#f4efe6}
.rak-ocard__media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s ease}
.rak-ocard__media:hover img{transform:scale(1.03)}
.rak-ocard__zoom{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;
  background:rgba(17,20,31,.5);color:#fff;display:grid;place-items:center;font-size:.9rem;pointer-events:none}
.rak-ocard__body{padding:14px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.rak-ocard__title{margin:0;color:var(--text);font-weight:700;font-size:0.75rem;line-height:1.28;letter-spacing:-.01em}
.rak-ocard__desc{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}
.rak-ocard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:auto;padding-top:2px}
.rak-ocard__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.82rem;color:#fff;
  background:var(--coral);padding:8px 15px;border-radius:999px;text-decoration:none;transition:background .15s ease}
.rak-ocard__cta:hover{background:var(--coral-deep);text-decoration:none}

/* ── Image lightbox (offer flyers — expand to read the fine print) ──────────── */
.rak-lb{position:fixed;inset:0;z-index:140;display:none;place-items:center;padding:26px;
  background:rgba(17,20,31,.88)}
.rak-lb.is-open{display:grid}
.rak-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(1000px,94vw);max-height:92vh}
.rak-lb__fig img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r);box-shadow:0 30px 90px rgba(0,0,0,.55)}
.rak-lb__cap{color:#fff;font-size:.92rem;font-weight:600;text-align:center;max-width:60ch;line-height:1.4}
.rak-lb__x{position:absolute;top:16px;right:18px;width:42px;height:42px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.15);color:#fff;font-size:0.862rem;line-height:1;display:grid;place-items:center}
.rak-lb__x:hover{background:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){.rak-ocard__media img,.rak-offercard__media img{transition:none}}

/* ── Venue location map at the end of a venue-profile article ────────────────── */
.rak-venuemap{margin:34px 0 4px;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.rak-venuemap__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:16px 20px}
.rak-venuemap__kick{font-weight:800;font-size:0.788rem;color:var(--text);letter-spacing:-.01em}
.rak-venuemap__addr{margin:5px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5;max-width:62ch}
.rak-venuemap__dir{white-space:nowrap}
.rak-venuemap__frame{display:block;width:100%;height:360px;border:0}
@media(max-width:640px){.rak-venuemap__frame{height:280px}.rak-venuemap__head{padding:14px 16px}}

/* ── Batch 0 (UX audit P0s): word-safe clamps, table scroll, CTA buttons ── */
/* Excerpts end on a clean 2-line ellipsis instead of a mid-word slice. */
.rak-card__ex, .rak-herowide__b p, .rak-campaign__d{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.rak-dek--clamp3{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
/* Prose tables scroll in place on narrow viewports (wrapper added in theme.js). */
.rak-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rak-tablewrap > table{ min-width:460px; }
/* Offer CTAs can be <button> (flyer zoom fallback) — match the pill look. */
button.rak-ocard__cta, button.rak-offercard__cta{ border:0; cursor:pointer; font-family:var(--font); }

/* ── Batch 1 (UX audit): nav dropdowns, mobile burger, quick row, gestures ── */
/* Desktop dropdowns (Explore / Plan) — <details class="rak-dd rak-navdd"> */
.rak-navdd{ position:relative; height:52px; display:flex; align-items:center; }
.rak-navdd > summary{ list-style:none; cursor:pointer; user-select:none; padding:0 15px; height:52px;
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px; color:var(--text); white-space:nowrap; }
.rak-navdd > summary::-webkit-details-marker{ display:none; }
.rak-navdd > summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5; transition:transform .15s ease; }
.rak-navdd[open] > summary::after{ transform:rotate(-135deg) translateY(2px); }
.rak-navdd > summary:hover, .rak-navdd.is-on > summary{ color:var(--link); }
.rak-navdd.is-on > summary{ box-shadow:inset 0 -3px 0 var(--coral); }
.rak-navdd__panel{ position:absolute; top:52px; left:6px; z-index:60; min-width:262px; padding:8px;
  background:var(--surface); border:1px solid var(--hair); border-radius:12px; box-shadow:0 18px 44px rgba(17,20,31,.16); }
.rak-navdd--right .rak-navdd__panel{ left:auto; right:0; }
.rak-navdd__panel a{ display:block; padding:10px 12px; height:auto; border-radius:8px; font-weight:600; font-size:14px; color:var(--text); }
.rak-navdd__panel a:hover{ background:var(--bg-soft); color:var(--link); text-decoration:none; }
.rak-navdd__panel a.is-on{ color:var(--link); }
.rak-navdd__panel a.is-on::after, .rak-navdd__panel a:hover::after{ content:none; }

/* Base visibility (mobile pieces off on desktop) */
.rak-burger{ display:none; }
.rak-burger__panel{ display:none; }
.rak-catnav__mob{ display:inline-flex; } /* category links — flat row on ALL breakpoints (was mobile-only; replaced the Explore dropdown) */
.rak-catnav__search{ display:none; }

@media (max-width:860px){
  /* Quick row: swipeable short-label pills with a right-edge fade cue. */
  .rak-navdd, .rak-catnav__desk{ display:none; }
  .rak-catnav__mob{ display:inline-flex; }
  .rak-catnav .wrap{ gap:6px; }
  .rak-catnav a{ padding:0 12px; }
  .rak-catnav__scroll{ overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); }
  .rak-catnav__scroll::-webkit-scrollbar{ display:none; }

  /* Burger: the full menu, in the sticky bar so it's reachable mid-page.
     Explicit 40px flex-basis — Chrome sizes a closed <details> flex item to
     its hidden content's box otherwise, swallowing the whole bar. */
  .rak-burger{ display:block; flex:0 0 40px; width:40px; margin-right:2px; }
  .rak-burger > summary{ list-style:none; display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0; -webkit-tap-highlight-color:transparent;
    border-radius:999px; border:1px solid var(--hair); background:var(--bg-soft); color:var(--text); cursor:pointer; }
  .rak-burger > summary svg{ display:block; }
  .rak-burger > summary::-webkit-details-marker{ display:none; }
  .rak-burger .i-close{ display:none; }
  .rak-burger[open] .i-burger{ display:none; }
  .rak-burger[open] .i-close{ display:block; }
  /* Drawer: a SIBLING of the details (Chrome makes <details> the containing
     block for abs-positioned descendants, which pinned the panel to 40px). */
  .rak-burger[open] + .rak-burger__panel{ display:block; }
  .rak-burger__panel{ position:absolute; top:52px; left:0; right:0; z-index:70; max-height:calc(100dvh - 52px);
    overflow:auto; background:var(--bg); border-bottom:1px solid var(--hair);
    box-shadow:0 30px 60px rgba(17,20,31,.20); padding:4px 22px 20px; }
  .rak-burger__panel a{ display:flex; align-items:center; min-height:46px; height:auto; padding:2px 0;
    border-bottom:1px solid var(--hair); font-weight:600; font-size:11px; color:var(--text); white-space:normal; }
  .rak-burger__panel a.is-on{ color:var(--link); }
  .rak-burger__panel a.is-on::after, .rak-burger__panel a:hover::after{ content:none; }
  .rak-burger__grp{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin:18px 0 4px; }
  a.rak-burger__cta{ display:inline-flex; justify-content:center; min-height:0; margin-top:16px;
    padding:12px 22px; border-bottom:0; color:#2a0b04; }

  /* Sticky-bar search (mobile) */
  .rak-catnav__search{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    flex:0 0 40px; padding:0; border-radius:999px; border:1px solid var(--hair); background:var(--bg-soft);
    color:var(--text); margin-left:8px; }
  .rak-catnav__search svg{ display:block; }
  .rak-catnav__search.is-on::after, .rak-catnav__search:hover::after{ content:none; }

  /* Touch targets ≥ ~40px (WCAG 2.5.8 with margin) */
  .pill, .pill--ghost{ min-height:38px; padding:8px 15px; }
  .rak-dirfilter a{ padding:9px 15px; }
}

/* Ribbon condensation: sea/FX go at 680; date goes at 560 (temp + prayer stay).
   A right-edge fade replaces the hard mid-word clip while scrolling. */
@media (max-width:680px){
  .rak-ribbon .rib-sea, .rak-ribbon__r{ display:none; }
  .rak-ribbon__l{ gap:12px; }
  .rak-ribbon .wrap{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); }
}
@media (max-width:560px){
  .rak-ribbon .rib-date{ display:none; }
}

/* Homepage hero on small screens: taller stage, 3-line title clamp. */
@media (max-width:560px){
  .rak-herowide{ min-height:400px; display:flex; align-items:flex-end; }
  .rak-herowide h1{ font-size:16.5px; display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:3; overflow:hidden; }
}

/* Lightbox: tap to magnify the flyer (fine print), figure pans via scroll. */
.rak-lb__fig{ overflow:auto; }
.rak-lb__fig img{ cursor:zoom-in; }

/* ── Hero slider — latest article per category (JS: theme.js [data-slider]) ──── */
.rak-slider{ position:relative; border-radius:var(--r); overflow:hidden; margin-top:22px;
  box-shadow:var(--shadow); background:var(--bg-soft); }
.rak-slider__track{ display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); }
/* 15% taller, 2026-08-08. All three clamp stops scale together (380/46/520 x 1.15), so the
   banner grows by the same 15% at every width instead of only where the clamp happens to
   land: below ~826px it sits on the floor, above ~1130px on the ceiling, and between the
   two it tracks the viewport. Changing one stop would have moved those crossovers instead
   of the height. Phones are governed by the 16:9 rule below, not by this. */
.rak-slide{ position:relative; flex:0 0 100%; min-height:clamp(437px,52.9vw,598px); display:block; color:#fff; }
.rak-slide .p-ph{ position:absolute; inset:0; }
.rak-slide .rak-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,12,20,.03),rgba(10,12,20,.10) 45%,rgba(10,12,20,.82)); }
.rak-slide__b{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,3.4vw,44px); max-width:760px; }
.rak-slide__b h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(17px,2.4vw,30px); line-height:1.1; color:#fff; margin:.3em 0 0; }
.rak-slide__b p{ margin:.55em 0 0; color:rgba(255,255,255,.9); font-size:clamp(10.5px,1.013vw,12px);
  line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.rak-slide__meta{ display:block; margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.74); }
/* Phones: stack the banner instead of overlaying it. The slide was a tall fixed box
   with the photo cropped to fill, which on a narrow screen cut most of a landscape
   shot away and left the headline fighting whatever was behind it. Here the photo
   keeps a 16:9 landscape shape (close to the desktop crop, so little is lost) and the
   words sit underneath on solid ink, where contrast no longer depends on the picture. */
@media (max-width:760px){
  .rak-slide{ min-height:0; display:flex; flex-direction:column; background:var(--ink); }
  .rak-slide .p-ph{ position:relative; inset:auto; width:100%; aspect-ratio:16/9; flex:none; }
  .rak-slide .p-ph img{ position:absolute; inset:0; }
  .rak-slide .rak-scrim{ display:none; }        /* nothing sits on the photo now */
  .rak-slide__b{ position:relative; inset:auto; z-index:auto; max-width:none;
    padding:14px 16px 34px; background:var(--ink); }
  .rak-slide__b h2{ font-size:19px; line-height:1.2; }
  .rak-slide__b p{ font-size:12.5px; }
  .rak-slider__dots{ bottom:10px; }             /* dots now sit over the ink block */
}

.rak-slider__arw{ position:absolute; top:calc(50% - 22px); z-index:3; width:44px; height:44px; border-radius:999px;
  border:0; background:rgba(17,20,31,.42); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .15s; }
.rak-slider__arw:hover{ background:rgba(17,20,31,.7); }
.rak-slider__arw--prev{ left:14px; } .rak-slider__arw--next{ right:14px; }
.rak-slider__dots{ position:absolute; left:0; right:0; bottom:14px; z-index:3; display:flex; gap:8px; justify-content:center; }
.rak-slider__dots button{ width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.5); transition:background .15s,width .2s; }
.rak-slider__dots button[aria-current="true"]{ width:22px; background:#fff; }
/* No-JS / pre-init fallback: native horizontal snap-scroll; hide arrows/dots. */
.rak-slider:not([data-ready]) .rak-slider__track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rak-slider:not([data-ready]) .rak-slider__track::-webkit-scrollbar{ display:none; }
.rak-slider:not([data-ready]) .rak-slide{ scroll-snap-align:start; }
.rak-slider:not([data-ready]) .rak-slider__arw,
.rak-slider:not([data-ready]) .rak-slider__dots{ display:none; }
@media (max-width:560px){ .rak-slider__arw{ display:none; } }

/* ── "Just in" — a single row of news cards (news reads as its own strand: a
      coral eyebrow, no Do/Stay category chips) ──────────────────────────────── */
.rak-newsrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; }
.rak-newscard{ display:flex; flex-direction:column; gap:10px; }
.rak-newscard__ph{ aspect-ratio:16/10; border-radius:12px; }
.rak-newscard__k{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--coral-text); }
.rak-newscard__t{ font-weight:700; font-size:12px; line-height:1.28; letter-spacing:-.01em; color:var(--text); }
.rak-newscard:hover{ text-decoration:none; } .rak-newscard:hover .rak-newscard__t{ color:var(--link); }
@media (max-width:900px){ .rak-newsrow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .rak-newsrow{ grid-template-columns:1fr; } }

/* ── Events — compact "short cards": coral date block + title + venue ───────── */
.rak-evrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rak-evcard{ display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; padding:15px 16px; transition:box-shadow .15s,transform .15s; }
.rak-evcard:hover{ text-decoration:none; box-shadow:var(--shadow); transform:translateY(-2px); }
.rak-evcard__date{ flex:0 0 auto; width:54px; text-align:center; background:var(--coral); color:#2a0b04;
  border-radius:10px; padding:9px 0 8px; line-height:1; }
.rak-evcard__date b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.rak-evcard__date span{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.rak-evcard__t{ font-weight:700; font-size:14.5px; line-height:1.28; color:var(--text); display:block; }
.rak-evcard:hover .rak-evcard__t{ color:var(--link); }
.rak-evcard__v{ font-size:12.5px; color:var(--muted); margin-top:6px; display:block; }
@media (max-width:900px){ .rak-evrow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .rak-evrow{ grid-template-columns:1fr; } }

/* ── Offers — compact "short cards": big discount + venue + ends ────────────── */
.rak-dealrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rak-dealcard{ display:flex; gap:14px; align-items:center; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; padding:14px 16px; transition:box-shadow .15s,transform .15s; }
.rak-dealcard:hover{ text-decoration:none; box-shadow:var(--shadow); transform:translateY(-2px); }
.rak-dealcard__deal{ flex:0 0 auto; min-width:58px; text-align:center; font-family:var(--font-display);
  font-weight:600; font-size:14px; line-height:1; color:var(--coral-text); background:rgba(238,106,82,.10);
  border-radius:10px; padding:12px 8px; }
.rak-dealcard__t{ font-weight:700; font-size:14px; line-height:1.26; color:var(--text); display:block; }
.rak-dealcard:hover .rak-dealcard__t{ color:var(--link); }
.rak-dealcard__v{ font-size:12.5px; color:var(--muted); display:block; margin-top:4px; }
.rak-dealcard__ends{ font-size:11.5px; font-weight:700; color:var(--coral-text); display:block; margin-top:6px;
  letter-spacing:.02em; }
@media (max-width:900px){ .rak-dealrow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .rak-dealrow{ grid-template-columns:1fr; } }

/* Optional one-line section dek under a heading */
.p-head .p-dek{ display:block; font-size:13.5px; color:var(--muted); font-weight:500; margin-top:3px; }

/* Empty-state placeholder — a section keeps its space + says something when it has
   no content yet (offers/events/venues fill in over time). */
.rak-empty{ display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:132px; padding:28px; border:1px dashed var(--hair); border-radius:var(--r);
  background:var(--bg-soft); color:var(--muted); font-size:14.5px; font-weight:500; }

/* Ribbon tagline (replaced weather/prayer/forex) */
.rib-tag{ color:#EAEAF0; letter-spacing:.02em; }
.rak-lb.is-zoom .rak-lb__fig img{ max-width:none; max-height:none; width:min(190vw,1700px); cursor:zoom-out; }
.rak-lb__x{ width:44px; height:44px; }

/* ── Batch 2 (UX audit): pagination, type-ahead, unified search, directory ── */
.rak-pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:30px 0 6px; }
.rak-pager__n{ min-width:38px; height:38px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hair); border-radius:10px; font-weight:700; font-size:14px; color:var(--text); background:var(--surface); }
.rak-pager__n:hover{ border-color:var(--link); color:var(--link); text-decoration:none; }
.rak-pager__n.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rak-pager__b{ height:38px; padding:0 15px; display:inline-flex; align-items:center; border:1px solid var(--hair);
  border-radius:999px; font-weight:700; font-size:13.5px; color:var(--text); background:var(--surface); }
.rak-pager__b:hover{ border-color:var(--link); color:var(--link); text-decoration:none; }
.rak-pager__gap{ padding:0 4px; color:var(--muted); }

/* Type-ahead dropdown (attaches to any role=search form) */
.rak-mast__search{ position:relative; }
.rak-search--page{ position:relative; }
.rak-sug{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; box-shadow:0 18px 44px rgba(17,20,31,.16); overflow:hidden; }
.rak-search--page .rak-sug{ left:50%; transform:translateX(-50%); width:min(480px,100%); right:auto; }
.rak-sug a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px;
  font-size:14px; font-weight:600; color:var(--text); }
.rak-sug a:hover, .rak-sug a.is-sel{ background:var(--bg-soft); color:var(--link); text-decoration:none; }
.rak-sug em{ font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); flex-shrink:0; }

/* Unified search result groups */
.rak-sres{ margin-top:28px; }
.rak-sres__count{ margin:0 0 4px; }

/* Directory: search-within + area select */
.rak-dirbar{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 2px; }
.rak-dirbar__q{ flex:1; min-width:200px; height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--hair);
  background:var(--surface); color:var(--text); font-family:var(--font); font-size:14px; outline:none; }
.rak-dirbar__q:focus{ border-color:var(--lagoon); }
.rak-dirbar__area{ height:42px; padding:0 12px; border-radius:12px; border:1px solid var(--hair);
  background:var(--surface); color:var(--text); font-family:var(--font); font-size:14px; max-width:220px; }

/* Category pinned strip + topic chips */
.rak-pinned{ margin-bottom:28px; }
.rak-chipcount{ opacity:.6; font-weight:800; margin-left:2px; }

/* ── Batch 3 (UX audit): newsletter, saved ♡, article action bar, TOC ── */
/* The GoRAK Brief — footer newsletter card */
.rak-nl{ position:relative; overflow:hidden; margin:26px 0; padding:26px 28px;
  border:1px solid var(--hair); border-radius:var(--radius);
  background:radial-gradient(130% 150% at 100% 0, color-mix(in srgb, var(--lagoon) 12%, transparent), transparent 55%), var(--sand);
  transition:box-shadow .3s, border-color .3s; }
.rak-nl:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--lagoon) 32%, var(--hair)); }
.rak-nl__glow{ position:absolute; top:-38%; right:-8%; width:320px; height:320px; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--rose) 24%, transparent), transparent 62%);
  filter:blur(30px); opacity:.55; animation:nlFloat 9s ease-in-out infinite; }
@keyframes nlFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-18px,14px) scale(1.1); } }
.rak-nl__in{ position:relative; z-index:1; display:flex; align-items:center; gap:20px 34px; flex-wrap:wrap; }
.rak-nl__txt{ flex:1 1 240px; }
.rak-nl__kick{ font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--label-teal); }
.rak-nl__txt b{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2vw,23px); letter-spacing:-.02em; margin:6px 0 5px; color:var(--text); }
.rak-nl__txt p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:46ch; }
.rak-nl__form{ flex:1 1 300px; }
.rak-nl__field{ display:flex; gap:6px; padding:5px; border-radius:999px; background:var(--surface);
  border:1px solid var(--hair); transition:border-color .2s, box-shadow .2s; }
.rak-nl__field:focus-within{ border-color:var(--lagoon); box-shadow:0 0 0 3px color-mix(in srgb, var(--lagoon) 15%, transparent); }
.rak-nl__field input[type="email"]{ flex:1; min-width:0; height:40px; padding:0 6px 0 15px; border:0; background:transparent;
  color:var(--text); font-family:var(--font); font-size:14.5px; outline:none; }
.rak-nl__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rak-nl__btn{ display:inline-flex; align-items:center; gap:7px; flex:none; height:40px; padding:0 18px; cursor:pointer;
  border:0; border-radius:999px; background:var(--coral); color:#fff; font-family:var(--font); font-weight:700; font-size:14px;
  transition:background .2s, transform .1s; }
.rak-nl__btn:hover{ background:var(--coral-deep); }
.rak-nl__btn:active{ transform:translateY(1px); }
.rak-nl__btn svg{ transition:transform .2s; }
.rak-nl__btn:hover svg{ transform:translateX(3px); }
.rak-nl__btn:disabled{ opacity:.65; cursor:default; }
.rak-nl__err{ margin:8px 6px 0; font-size:12.5px; font-weight:600; color:var(--coral-text); }
/* success state — replaces the form; fades in with a drawn check */
.rak-nl__done{ position:relative; z-index:1; display:flex; align-items:center; gap:15px; }
.rak-nl__in[hidden], .rak-nl__done[hidden]{ display:none; }   /* let the hidden attr win over display:flex */
.rak-nl.is-done{ animation:nlDone .45s ease both; }
@keyframes nlDone{ from{ opacity:.35; } to{ opacity:1; } }
.rak-nl__check{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--lagoon) 16%, transparent); color:var(--lagoon); }
.rak-nl__check svg path{ stroke-dasharray:30; stroke-dashoffset:0; animation:nlCheck .6s .12s ease; }  /* visible by default; anim just draws it in */
@keyframes nlCheck{ from{ stroke-dashoffset:30; } to{ stroke-dashoffset:0; } }
.rak-nl__msg{ margin:0; font-family:var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:-.01em; color:var(--text); }
.rak-nl__sub{ font-size:12.5px; color:var(--muted); }
.site-foot .rak-nl{ margin-top:0; }
@media (prefers-reduced-motion:reduce){ .rak-nl__glow, .rak-nl.is-done, .rak-nl__check svg path{ animation:none; } }

/* Save ♡ buttons */
.rak-saveb{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--hair); background:var(--surface); color:var(--text); font-family:var(--font);
  font-size:13px; font-weight:700; cursor:pointer; }
.rak-saveb:hover{ border-color:var(--coral); color:var(--coral-text); }
.rak-saveb.is-saved{ background:var(--coral); border-color:var(--coral); color:#2a0b04; }
.rak-ocard{ position:relative; }
.rak-ocard__save{ position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; padding:0;
  justify-content:center; background:rgba(255,255,255,.92); color:#B23A24; }
.rak-ocard__save.is-saved{ background:var(--coral); color:#2a0b04; }

/* Header saved-shortlist link + count badge */
.rak-savedlink{ position:relative; width:38px; height:38px; display:grid; place-items:center; flex-shrink:0;
  border-radius:999px; border:1px solid var(--hair); background:var(--surface); color:var(--text); }
.rak-savedlink:hover{ color:var(--coral-text); text-decoration:none; }
.rak-savedlink svg{ display:block; }
.rak-savedlink__n{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--coral); color:#2a0b04; font-size:10.5px; font-weight:800; display:grid; place-items:center; }

/* /saved shortlist rows */
.rak-savedgrid{ border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--surface); }
.rak-savedrow{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hair); }
.rak-savedrow:last-child{ border-bottom:0; }
.rak-savedrow a{ display:flex; align-items:center; gap:14px; padding:14px 18px; color:var(--text); font-weight:600; flex:1; min-width:0; }
.rak-savedrow a:hover{ color:var(--link); text-decoration:none; }
.rak-savedrow em{ font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); flex-shrink:0; width:46px; }
.rak-savedrow button{ border:0; background:none; color:var(--muted); font-size:11px; cursor:pointer; padding:14px 18px; }
.rak-savedrow button:hover{ color:var(--coral-text); }

/* Sticky article action bar + reading progress */
/* Instagram embed — click-to-load facade. Nothing is fetched from Instagram until
   the reader taps the card (see theme.js), so articles keep their speed and set no
   third-party cookies by default. The mark is CSS because the publish sanitizer
   allowlist has no <svg>. */
.rak-ig{ margin:22px 0; }
.rak-ig__card{ display:flex; align-items:center; gap:14px; padding:16px 18px; text-decoration:none;
  border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); color:var(--text);
  transition:border-color .2s, box-shadow .2s, transform .12s; }
.rak-ig__card:hover{ border-color:color-mix(in srgb, #DD2A7B 45%, var(--hair)); box-shadow:var(--shadow); transform:translateY(-1px); }
.rak-ig__mark{ flex:none; width:40px; height:40px; border-radius:12px; position:relative;
  background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF); }
/* the camera glyph, drawn with the two pseudo-elements (no <svg> allowed) */
.rak-ig__mark::before{ content:""; position:absolute; inset:10px; border:2px solid #fff; border-radius:50%; }
.rak-ig__mark::after{ content:""; position:absolute; top:8px; right:8px; width:4px; height:4px; border-radius:50%; background:#fff; }
.rak-ig__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.rak-ig__txt b{ font-size:15px; font-weight:700; }
.rak-ig__hint{ font-size:12px; color:var(--muted); }
.rak-ig__go{ flex:none; color:var(--muted); font-size:18px; }
.rak-ig.is-loaded .rak-ig__card{ display:none; }
.rak-ig__frame{ width:100%; border:0; border-radius:var(--radius); background:var(--surface); display:block; }
@media(max-width:520px){ .rak-ig__hint{ display:none; } }

/* Sticky newsletter bar — appears after a screen of scrolling, dismissible, and
   never shown on pages that already pin the article action bar to the bottom. */
.rak-nlbar{ position:fixed; left:0; right:0; bottom:0; z-index:85; background:var(--ink,#14161F); color:#fff;
  border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -10px 30px rgba(17,20,31,.20);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.rak-nlbar.is-in{ transform:translateY(0); }
.rak-nlbar[hidden]{ display:none; }
.rak-nlbar__in{ position:relative; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:11px; padding-bottom:11px; }
.rak-nlbar__row{ display:flex; align-items:center; gap:16px; flex:1; flex-wrap:wrap; }
.rak-nlbar__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; padding-right:26px; }
.rak-nlbar__txt b{ font-size:14.5px; font-weight:700; }
.rak-nlbar__txt span{ font-size:12.5px; color:#C7CCD8; }
.rak-nlbar__form{ display:flex; gap:7px; flex:none; }
.rak-nlbar__form input[type="email"]{ height:38px; min-width:210px; padding:0 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff;
  font-family:var(--font); font-size:14px; outline:none; }
.rak-nlbar__form input[type="email"]::placeholder{ color:#9AA2B2; }
.rak-nlbar__form input[type="email"]:focus{ border-color:var(--lagoon); box-shadow:0 0 0 3px rgba(15,163,150,.25); }
.rak-nlbar__form .rak-nl__btn{ height:38px; }
.rak-nlbar__done{ display:flex; align-items:center; gap:10px; font-size:14px; padding:3px 0; }
/* display:flex would otherwise beat the hidden attribute and show the success
   message next to the form it is meant to replace. */
.rak-nlbar__row[hidden], .rak-nlbar__done[hidden]{ display:none; }
.rak-nlbar__tick{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--lagoon); color:#fff; font-size:13px; font-weight:700; flex:none; }
.rak-nlbar__x{ position:absolute; top:6px; right:0; width:30px; height:30px; border:0; cursor:pointer;
  background:transparent; color:#A9B0C0; font-size:14px; line-height:1; border-radius:50%; }
.rak-nlbar__x:hover{ color:#fff; background:rgba(255,255,255,.10); }
@media(max-width:720px){
  .rak-nlbar__txt span{ display:none; }               /* keep the bar one line tall on phones */
  .rak-nlbar__in{ gap:10px; padding-top:9px; padding-bottom:9px; }
  .rak-nlbar__row{ gap:9px; }
  .rak-nlbar__form{ flex:1; }
  .rak-nlbar__form input[type="email"]{ min-width:0; flex:1; }
}
@media(prefers-reduced-motion:reduce){ .rak-nlbar{ transition:none; } }
@media print{ .rak-nlbar{ display:none !important; } }

.rak-artbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--surface);
  border-top:1px solid var(--hair); box-shadow:0 -12px 30px rgba(17,20,31,.10); }
.rak-artbar__prog{ position:absolute; top:-2px; left:0; height:2px; background:var(--coral); width:0; }
.rak-artbar__row{ display:flex; align-items:center; gap:8px; padding:9px 24px calc(9px + env(safe-area-inset-bottom));
  overflow-x:auto; scrollbar-width:none; }
.rak-artbar__b{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--hair); background:var(--bg); color:var(--text); font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; }
.rak-artbar__b:hover{ border-color:var(--link); color:var(--link); text-decoration:none; }
.rak-artbar__b.is-saved{ background:var(--coral); border-color:var(--coral); color:#2a0b04; }
.rak-artbar__b--top{ margin-left:auto; }

/* "On this page" TOC */
.rak-toc{ margin:0 0 22px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); }
.rak-toc > summary{ list-style:none; cursor:pointer; padding:12px 16px; font-weight:800; font-size:14px; }
.rak-toc > summary::-webkit-details-marker{ display:none; }
.rak-toc > summary::after{ content:"▾"; float:right; opacity:.5; }
.rak-toc[open] > summary::after{ content:"▴"; }
.rak-toc__l{ padding:0 16px 12px; display:flex; flex-direction:column; }
.rak-toc__l a{ padding:7px 0; font-size:14px; font-weight:600; color:var(--muted); border-bottom:1px dashed var(--hair); }
.rak-toc__l a:last-child{ border-bottom:0; }
.rak-toc__l a:hover{ color:var(--link); text-decoration:none; }

/* Offer chip under the article header + urgency state */
.rak-offerchip{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:7px 14px; border-radius:999px;
  background:var(--sand); color:var(--coral-text); font-size:13px; font-weight:700; width:max-content; }
.rak-offerchip:hover{ text-decoration:none; filter:brightness(.97); }
/* Expiry chip: quiet by default, strong coral fill only when ending soon. */
.rak-offercard__ends{ color:var(--muted); background:var(--bg-soft); border:1px solid var(--hair); }
.rak-offercard__ends.is-urgent{ color:#fff; background:var(--coral-deep); border-color:var(--coral-deep); }

/* Search pending state */
form[role="search"].is-busy input{ opacity:.55; }

/* ── Batch 4 (UX audit): planning band, trust strip, today card, area hubs ── */
.rak-planband{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:14px; align-items:stretch;
  margin-top:26px; padding:20px 22px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--sand); }
.rak-planband__lead b{ font-size:13.5px; letter-spacing:-.02em; display:block; }
.rak-planband__lead p{ margin:4px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.rak-planband > a{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:12px 16px;
  border-radius:12px; background:var(--surface); border:1px solid var(--hair); color:var(--text); }
.rak-planband > a:hover{ border-color:var(--link); text-decoration:none; }
.rak-planband > a b{ font-size:14.5px; letter-spacing:-.01em; }
.rak-planband > a small{ font-size:12px; color:var(--muted); }
.rak-planband > a:hover b{ color:var(--link); }
.rak-truststrip{ display:block; margin-top:10px; font-size:12px; font-weight:700; color:var(--label-teal); }
@media (max-width:980px){ .rak-planband{ grid-template-columns:1fr 1fr; } .rak-planband__lead{ grid-column:1/-1; } }
@media (max-width:460px){ .rak-planband{ grid-template-columns:1fr; } }

/* Today-in-RAK rail card */
.rak-today{ display:flex; flex-direction:column; }
.rak-today a{ padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--text); border-bottom:1px solid var(--hair); }
.rak-today a:last-child{ border-bottom:0; }
.rak-today a:hover{ color:var(--link); text-decoration:none; }
.rak-today a span{ color:var(--muted); font-weight:500; }

/* Area hub + near-this reuse existing grids; section head hub link */
.rak-section__head .p-more{ margin-left:12px; flex-shrink:0; }

/* ── Batch 5 (UX audit): display face, icon states, inline-style cleanup ── */
/* Fraunces carries page-level headlines only; Sora keeps body/UI/cards. */
.rak-article__head h1, .rak-pagetitle, .rak-herowide h1, .rak-comingsoon h2,
.p-head h2, .rak-section__head h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.005em; }
.rak-offergroup__name, .rak-campaign__b b{ font-weight:600; }

/* Icon buttons: crisp SVGs, filled heart when saved */
.rak-saveb svg, .rak-artbar__b svg, .rak-offerband__badge svg, .rak-venuemap__kick svg,
.rak-offerchip svg, .ov-card__pill svg{ flex-shrink:0; vertical-align:-2px; }
.rak-saveb.is-saved svg, .rak-artbar__b.is-saved svg{ fill:currentColor; }
.rak-offerband__badge, .rak-venuemap__kick, .rak-offerchip{ display:inline-flex; align-items:center; gap:7px; }
.rak-ocard__zoom svg{ display:block; }

/* Replaces the removed inline styles */
.rak-two{ margin-top:30px; }
.p-ago--onimage{ color:rgba(255,255,255,.85); }
.rak-section .rak-dek{ margin-bottom:20px; }

/* ── Batch 6 (UX audit): month calendar, trip planner, print, webcal ── */
.rak-cal__m{ font-family:var(--font-display); font-weight:600; font-size:15px; margin:26px 0 12px; }
.rak-cal__t{ width:100%; border-collapse:collapse; table-layout:fixed; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; overflow:hidden; }
.rak-cal__t th{ padding:9px 6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--hair); }
.rak-cal__t td{ vertical-align:top; height:74px; padding:6px; border:1px solid var(--hair); font-size:12px; }
.rak-cal__t td.is-out{ background:var(--bg-soft); }
.rak-cal__t td.has-ev{ background:var(--sand); }
.rak-cal__d{ font-weight:700; color:var(--muted); display:block; margin-bottom:3px; }
.rak-cal__ev{ display:block; margin-top:2px; padding:3px 6px; border-radius:6px; background:var(--coral);
  color:#2a0b04; font-weight:700; font-size:11px; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rak-cal__ev:hover{ text-decoration:none; filter:brightness(1.05); }
.rak-cal__more{ display:block; margin-top:2px; font-size:10.5px; font-weight:700; color:var(--muted); }
@media (max-width:680px){ .rak-cal__t td{ height:58px; padding:4px; } .rak-cal__ev{ font-size:0; padding:0; height:6px; } }

/* Trip planner (on /saved) */
.rak-planday{ font-family:var(--font-display); font-weight:600; font-size:14px; margin:26px 0 10px; }
.rak-savedrow__day{ height:34px; padding:0 8px; margin-right:4px; border-radius:9px; border:1px solid var(--hair);
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:12.5px; flex-shrink:0; }
.rak-printbtn{ margin-top:14px; }
.rak-webcal{ align-self:center; }
@media print{
  .rak-ribbon, .rak-mast, .rak-catnav, .site-foot, .rak-printbtn, .rak-savedrow button,
  .rak-savedrow__day, .rak-artbar, .rak-nl{ display:none !important; }
  body{ background:#fff; }
}

/* ── Brand logo (GoRAK mark, PNG pair swapped per theme) ── */
.rak-brand{ align-items:center; }
.rak-brand__logo{ height:38px; width:auto; display:block; }
.rak-logo--ondark{ display:none; }
[data-theme="dark"] .rak-logo--onlight{ display:none; }
[data-theme="dark"] .rak-logo--ondark{ display:block; }
.site-foot .rak-brand{ display:inline-flex; }
.site-foot .rak-brand__logo{ height:28px; }
@media (max-width:860px){ .rak-brand__logo{ height:30px; } }

/* ── Events: enhanced cards (home + venue) · chips · event→venue block ──── */
/* event cards get their OWN grid — natural row heights. NOT .rak-cardgrid,
   whose grid-auto-rows:240px + the card's overflow:hidden clips the body/CTAs. */
.rak-ecardgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; align-items:start; }
@media(max-width:820px){ .rak-ecardgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .rak-ecardgrid{ grid-template-columns:1fr; } }
/* Recommendations strip — the "You might also like" slider under offer/event pages.
   Reuses the poster .rak-ecard in a no-JS horizontal scroll-snap row. */
.rak-reco{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 8px; margin:0 -2px; }
.rak-reco::-webkit-scrollbar{ display:none; }
.rak-reco > .rak-ecard{ flex:0 0 216px; scroll-snap-align:start; }
@media(max-width:560px){ .rak-reco > .rak-ecard{ flex-basis:70vw; max-width:280px; } }
/* Card gallery inside an article body: a group of small posters between two
   paragraphs, written as one [CARDS: ...] token and resolved at publish time.
   Poster width matches .rak-reco so a gallery reads as small cards, not billboards. */
.rak-gal{ margin:var(--s7,48px) 0; }
.rak-gal__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:var(--s4,16px); }
.rak-gal__head h3{ font-family:var(--font-display); font-weight:600; font-size:20px; margin:0; }
.rak-gal__rule{ flex:1; height:1px; background:var(--hair); }
/* Always one row, swiped rather than wrapped, at every width. Wrapping turned six
   cards into a block the height of the article; one row keeps the gallery an aside,
   and the gesture is the one the recommendation strip already taught. */
.rak-gal__items{ display:flex; flex-wrap:nowrap; gap:var(--s4,16px);
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:2px 2px 10px; margin:0 -2px;
  /* the last card can reach the left edge, so the end of the row is reachable */
  scroll-padding-left:2px; }
.rak-gal__items::-webkit-scrollbar{ display:none; }
.rak-gal__items > .rak-ecard{ flex:0 0 216px; scroll-snap-align:start; }
@media(max-width:560px){
  .rak-gal__items > .rak-ecard{ flex-basis:min(70vw, 280px); }
}
/* The article body styles every h3, every link and every img inside it, and a card is
   none of those things. Live, that made card titles ink-dark, 19.5px and pushed 33px down
   the card by a prose margin, and put a 1.2em margin plus a radius on the photograph
   filling the frame. Reset here, scoped to the gallery, rather than weakening the prose
   rules that the rest of the article depends on. */
.rak-prose .rak-ecard{ text-decoration:none; }
.rak-prose .rak-ecard__title{ font-family:var(--font-display); font-weight:600;
  font-size:17.5px; line-height:1.2; letter-spacing:-.01em; margin:0 0 4px; color:#fff; }
.rak-prose .rak-ecard__media img{ width:100%; height:100%; margin:0;
  border-radius:0; box-shadow:none; }
.rak-prose .rak-gal__head h3{ font-size:20px; margin:0; color:var(--text); }
/* Compact event/offer card — a poster tile: an image OR the gradient placeholder
   fills the whole card and the text sits on a scrim over it (so a no-image card still
   reads), giving every card the SAME height. Coral accent = offer, teal = event. */
.rak-ecard{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); color:#fff; text-decoration:none; isolation:isolate; }
.rak-ecard__media{ position:absolute; inset:0; z-index:0; }
.rak-ecard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.rak-ecard__media .rak-fallback{ position:absolute; inset:0; }
.rak-ecard:hover .rak-ecard__media img{ transform:scale(1.04); }
.rak-ecard__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(8,10,17,.94) 3%, rgba(8,10,17,.55) 32%, rgba(8,10,17,.03) 60%); }
.rak-ecard__accent{ position:absolute; top:0; left:0; right:0; height:4px; z-index:3; }
.rak-ecard--offer .rak-ecard__accent{ background:var(--coral); }
.rak-ecard--event .rak-ecard__accent{ background:var(--lagoon); }
.rak-ecard--place .rak-ecard__accent{ background:var(--champagne); }
.rak-ecard--article .rak-ecard__accent{ background:var(--grad); }
.rak-ecard--place .rak-ecard__tag{ background:var(--champagne); color:#2b2415; }
.rak-ecard--article .rak-ecard__tag{ background:#fff; color:#14161F; }
.rak-ecard--place .rak-ecard__cta{ color:#f0e4cd; }
.rak-ecard--article .rak-ecard__cta{ color:#fff; }
/* top-left identifier: coral OFFER/discount tag (offers) or the date chip (events) */
.rak-ecard__tag{ position:absolute; top:14px; left:12px; z-index:3; font-size:11px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:8px; max-width:62%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rak-ecard--offer .rak-ecard__tag{ background:var(--coral); color:#2a0b04; }
.rak-ecard__date{ position:absolute; top:14px; left:12px; z-index:3; background:rgba(8,10,17,.66); color:#fff;
  border-radius:10px; padding:5px 9px 6px; text-align:center; line-height:1; }
.rak-ecard__date b{ font-family:var(--serif); font-weight:600; font-size:20px; display:block; }
.rak-ecard__date i{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; opacity:.9; font-style:normal; }
.rak-ecard__badges{ position:absolute; top:14px; right:12px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-end;
  /* Capped here, against the card, not on the badge itself: a percentage width on a
     shrink-to-fit parent resolves circularly and clipped "Ends 31 Aug" to "Ends…". */
  max-width:58%; }
.rak-ecard__type{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:20px; background:rgba(255,255,255,.92); color:#0A7268;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rak-ecard__ends{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:rgba(8,10,17,.66); color:#fff;
  /* A price like "from AED 125 per person" ran the full width and collided with the date
     chip on the left. Capped and clipped, with the full text on hover. */
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rak-ecard__foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 15px 15px; }
.rak-ecard__title{ font-family:var(--serif); font-weight:600; font-size:17.5px; line-height:1.2; margin:0 0 4px; letter-spacing:-.01em; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rak-ecard__venue{ font-size:12.5px; color:rgba(255,255,255,.8); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rak-ecard__cta{ display:inline-block; margin-top:9px; font-weight:700; font-size:13px; }
.rak-ecard--offer .rak-ecard__cta{ color:#ffb9a8; }
.rak-ecard--event .rak-ecard__cta{ color:#7fe0d3; }
.rak-ecard:hover .rak-ecard__cta{ text-decoration:underline; }
.rak-ecard[hidden]{ display:none; }  /* filter hides cards; beats .rak-ecard{display:block} */
.rak-empty[hidden]{ display:none; }  /* the /offers 'no results' line, toggled by the filter */
/* /offers type filter */
.rak-offerfilter{ display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 22px; }
.rak-filterchip{ font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--hair); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.rak-filterchip:hover{ border-color:var(--coral); }
.rak-filterchip.is-active{ background:var(--coral); border-color:var(--coral); color:#2a0b04; }
.rak-filterchip__n{ opacity:.55; font-weight:700; margin-left:3px; }
/* /contact — business "Get in touch" form */
.rak-contact__grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:40px; align-items:start; margin-top:14px; }
@media(max-width:820px){ .rak-contact__grid{ grid-template-columns:1fr; gap:24px; } }
.rak-contact__intro .rak-pagetitle{ margin:6px 0 10px; }
.rak-contact__points{ list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:9px; }
.rak-contact__points li{ padding-left:24px; position:relative; color:var(--muted); font-size:14.5px; }
.rak-contact__points li::before{ content:"\2192"; position:absolute; left:0; color:var(--coral); font-weight:800; }
.rak-contact__points b{ color:var(--text); }
.rak-contact__alt{ font-size:13px; margin-top:10px; }
.rak-contact__card{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.rak-contact__form{ display:flex; flex-direction:column; gap:14px; }
.rak-contact__form[hidden]{ display:none; }  /* let the hidden attr win over display:flex, so on success the form (and its "Sending…" button) disappears */
.rak-cf{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rak-cf label{ font-size:12.5px; font-weight:600; color:var(--muted); }
.rak-cf .req{ color:var(--coral); }
.rak-cf2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .rak-cf2{ grid-template-columns:1fr; } }
.rak-in{ width:100%; font:inherit; font-size:14px; padding:10px 12px; border-radius:var(--r); border:1px solid var(--hair); background:var(--bg); color:var(--text); }
.rak-in:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(238,106,82,.15); }
textarea.rak-in{ resize:vertical; min-height:92px; }
.rak-cf-consent{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--muted); cursor:pointer; }
.rak-cf-consent input{ margin-top:2px; flex:none; }
.rak-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rak-cf-err{ font-size:13px; color:var(--coral); font-weight:600; }
.rak-cf-btn{ align-self:flex-start; margin-top:4px; }
.rak-contact__done{ text-align:center; padding:26px 8px; }
.rak-contact__tick{ width:52px; height:52px; border-radius:50%; background:var(--lagoon); color:#fff; font-size:26px; display:grid; place-items:center; margin:0 auto 14px; }
/* profile mixed grid — poster card as a modal-opening button + corner ribbon */
.rak-ecard--btn{ border:0; background:none; padding:0; width:100%; cursor:pointer; font:inherit; text-align:left; }
.rak-cardribbon{ position:absolute; top:15px; left:-33px; z-index:4; width:132px; transform:rotate(-45deg); text-align:center; padding:4px 0; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 2px 8px rgba(0,0,0,.35); pointer-events:none; }
.rak-cardribbon--offer{ background:var(--coral); color:#2a0b04; }
.rak-cardribbon--event{ background:var(--lagoon); color:#04231f; }
/* details modal (offer/event on the profile) */
.rak-dm{ position:fixed; inset:0; z-index:400; display:none; }
.rak-dm[aria-hidden="false"]{ display:block; }
.rak-dm__backdrop{ position:absolute; inset:0; background:rgba(6,8,14,.72); }
.rak-dm__panel{ position:relative; z-index:1; width:560px; max-width:94vw; margin:6vh auto; max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:0 30px 90px -20px rgba(0,0,0,.6); }
.rak-dm__x{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%; border:0; background:rgba(6,8,14,.6); color:#fff; font-size:14px; cursor:pointer; }
.rak-dm__media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.rak-dm__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rak-dm__media .rak-fallback{ position:absolute; inset:0; }
.rak-dm__content{ padding:20px 22px 24px; }
.rak-dm__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.rak-dm__title{ font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.16; margin:0 0 10px; letter-spacing:-.01em; }
.rak-dm__desc{ font-size:14.5px; color:var(--muted); margin:0 0 18px; line-height:1.55; }
.rak-dm__ctas{ display:flex; gap:10px; flex-wrap:wrap; }
@media(max-width:560px){ .rak-dm__panel{ margin:0; width:100%; max-width:100%; min-height:100vh; max-height:100vh; border-radius:0; } }
.rak-ecardx{ position:relative; display:grid; grid-template-columns:230px 1fr; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); scroll-margin-top:90px; margin-bottom:16px; }
.rak-ecardx__accent{ position:absolute; top:0; left:0; right:0; height:4px; z-index:2; }
.rak-ecardx--offer .rak-ecardx__accent{ background:var(--coral); }
.rak-ecardx--event .rak-ecardx__accent{ background:var(--lagoon); }
.rak-ecardx__tag{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:8px; background:var(--coral); color:#2a0b04; }
.rak-ecardx__media{ position:relative; min-height:190px; }
.rak-ecardx__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.rak-ecardx__media .rak-fallback{ position:absolute; inset:0; }
.rak-ecardx__body{ padding:18px 20px; display:flex; flex-direction:column; justify-content:center; }
.rak-ecardx__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:9px; }
.rak-ecardx__title{ font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.15; margin:0 0 8px; letter-spacing:-.01em; }
.rak-ecardx__desc{ font-size:14px; color:var(--muted); margin:0 0 16px; }
.rak-ecardx__ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.rak-ecardx__ctas .btn{ padding:8px 16px; font-size:13.5px; }
.rak-chip{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--sand); color:var(--text); }
.rak-chip--free{ background:var(--lagoon); color:#fff; }
.rak-chip--price{ background:var(--coral); color:#fff; }
@media(max-width:560px){ .rak-ecardx{ grid-template-columns:1fr; } .rak-ecardx__media{ aspect-ratio:16/9; min-height:0; } }
.rak-ocard__ctas{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.rak-ocard__cta--ghost{ background:transparent; border:1px solid var(--hair); color:var(--link); }
.rak-ocard__cta--ghost:hover{ border-color:var(--link); }
.rak-eventvenue{ margin:22px 0 0; }
.rak-eventvenue__card{ display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit;
  background:var(--sand); border:1px solid var(--hair); border-radius:var(--radius); padding:12px 14px; }
.rak-eventvenue__card:hover{ border-color:var(--link); }
/* One contact action under the venue card. Full width on a phone so it is a thumb target,
   inline on desktop where the card is wide. */
.rak-eventvenue__contact{ margin-top:10px; }
@media (max-width:560px){ .rak-eventvenue__contact{ display:block; text-align:center; } }
.rak-eventvenue__card img, .rak-eventvenue__ph{ width:74px; height:74px; border-radius:var(--r); object-fit:cover; flex:none; }
.rak-eventvenue__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rak-eventvenue__k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.rak-eventvenue__more{ color:var(--link); font-weight:600; font-size:13px; margin-top:3px; }
.rak-eventvenue__map{ width:100%; height:280px; border:0; border-radius:var(--radius); margin:14px 0 0; display:block; }

/* Recurring-event badges — teal, matching the event accent */
.event-row__recur{ display:inline-block; font-size:11px; font-weight:700; color:#0A5F55; background:rgba(15,163,150,.15); padding:1px 8px; border-radius:20px; vertical-align:middle; white-space:nowrap; }
.event-row--recur .event-row__date b{ color:var(--lagoon); }
.rak-ecard__recur{ background:#0A6C61; color:#fff; font-weight:800; font-size:10px; letter-spacing:.02em; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.rak-chip--recur{ background:rgba(15,163,150,.13); color:var(--lagoon); font-weight:700; border-color:transparent; }