/* ==========================================================================
   THE SINGAPORE BEST — design tokens
   Palette taken from approved brand sheet: primary red, ink secondary,
   signal-yellow tertiary, neutral paper. Editorial, dense, sharp-edged.
   ========================================================================== */

:root{
  --color-primary: #C6362F;      /* deep clay-red — brand, links, badges */
  --color-primary-dark: #A32A24;
  --color-primary-tint: #FBEAE8;
  --color-secondary: #2B2A29;    /* near-black ink */
  --color-tertiary: #F0B429;     /* signal yellow — GUIDE / DEAL accents */
  --color-tertiary-tint: #FDF3DA;
  --color-neutral: #F4F3F0;      /* paper-grey section bg */
  --color-paper: #FFFFFF;
  --color-ink: #201F1E;
  --color-ink-soft: #5B5955;
  --color-border: #E4E1DA;
  --color-border-strong: #201F1E;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1320px;
  --gutter: clamp(16px, 3vw, 40px);

  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-card: 0 1px 2px rgba(32,31,30,0.06);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input{ font-family: inherit; }

.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; line-height:1.15; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow.muted{ color: var(--color-ink-soft); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-secondary); color:#fff;
  padding:10px 16px; z-index:200;
}
.skip-link:focus{ left: var(--gutter); }

:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Buttons & badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:700; font-size:13px; letter-spacing:0.02em;
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-ink);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{ background: var(--color-secondary); color:#fff; }
.btn-primary{
  background: var(--color-primary); color:#fff; border-color: var(--color-primary);
}
.btn-primary:hover{ background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-block{ width:100%; }
.btn-sm{ padding: 7px 12px; font-size: 12px; }

.badge{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding: 3px 7px; border-radius: 2px; color:#fff;
  background: var(--color-secondary);
}
.badge-new{ background: var(--color-primary); }
.badge-guide{ background: var(--color-tertiary); color: var(--color-secondary); }
.badge-deal{ background: #2E7D5B; }
.badge-review{ background: #3A5EBF; }
.badge-sponsored{ background: var(--color-ink-soft); }
.badge-trending{ background: var(--color-secondary); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}
.site-header > .wrap,
.trending-bar .wrap{
  max-width:none;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
  border-bottom: 1px solid var(--color-border);
}
.logo{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(25px,2.1vw,38px);
  color: var(--color-primary); letter-spacing: -0.01em;
  display:flex; align-items:center; gap:8px;
}
.logo .dot{ width:7px; height:7px; background:var(--color-tertiary); border-radius:50%; display:inline-block; }
.topbar-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  width:34px;height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid transparent; color: var(--color-ink);
}
.icon-btn:hover{ background: var(--color-neutral); }
.social-links{ display:flex; gap:10px; }
.subscribe-btn{ display:none; }
@media(min-width: 760px){ .subscribe-btn{ display:inline-flex; } }

.main-nav{
  display:none;
  align-items:center; justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
}
@media(min-width: 980px){ .main-nav{ display:flex; } }
.nav-list{ display:flex; gap: clamp(28px, 3vw, 52px); align-items:center; justify-content:flex-start; flex-wrap:nowrap; }
.nav-list a{
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-ink-soft); padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover, .nav-list a[aria-current="page"]{ color: var(--color-ink); border-color: var(--color-primary); }

.mobile-menu-btn{ display:flex; }
@media(min-width: 980px){ .mobile-menu-btn{ display:none; } }

.trending-bar{
  background: var(--color-secondary); color:#fff;
  overflow: hidden;
}
.trending-bar .wrap{ display:flex; align-items:center; gap:16px; padding: 9px var(--gutter); }
.trending-label{
  flex: 0 0 auto; font-size:11px; font-weight:800; letter-spacing:.08em;
  color: var(--color-tertiary);
}
.trending-track{
  display:flex; gap:28px; overflow-x:auto; scrollbar-width:none;
}
.trending-track::-webkit-scrollbar{ display:none; }
.trending-track a{ font-size:13px; white-space:nowrap; color: #EDEBE7; }
.trending-track a:hover{ color:#fff; text-decoration: underline; }

/* Mobile nav drawer */
.mobile-drawer{
  position: fixed; inset:0; z-index: 200; display:none;
  background: var(--color-paper);
}
.mobile-drawer.open{ display:block; }
.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--gutter); border-bottom:1px solid var(--color-border);
}
.mobile-drawer-list{ padding: 8px var(--gutter); }
.mobile-drawer-list li{ border-bottom:1px solid var(--color-border); }
.mobile-drawer-list a{
  display:block; padding: 16px 2px; font-family: var(--font-display); font-size: 22px;
}
.mobile-search{
  margin: 16px var(--gutter); display:flex; border:1px solid var(--color-border-strong);
}
.mobile-search input{ flex:1; border:0; padding: 10px 12px; font-size:14px; }
.mobile-search button{ border:0; background:var(--color-secondary); color:#fff; padding: 0 14px; }

/* ==========================================================================
   LAYOUT SECTIONS
   ========================================================================== */
.section{ padding: 40px 0; }
.section + .section{ border-top: 1px solid var(--color-border); }
.section-neutral{ background: var(--color-neutral); }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom: 22px;
}
.section-head h2{ font-size: clamp(22px,3vw,30px); }
.view-all{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary); white-space:nowrap; }
.view-all:hover{ text-decoration: underline; }

/* Top stories asymmetric grid */
.top-stories{
  display:grid; grid-template-columns: 1fr; gap: 28px;
}
@media(min-width: 900px){
  .top-stories{ grid-template-columns: 1.6fr 1fr; }
}
.hero-story{ position:relative; }
.hero-story .story-img{ aspect-ratio: 16/9; overflow:hidden; position:relative; background:var(--color-neutral); }
.hero-story .story-img img{ width:100%; height:100%; object-fit:cover; }
.hero-story .story-badge{ position:absolute; top:14px; left:14px; }
.hero-story h3{ font-size: clamp(24px,3.4vw,38px); margin: 14px 0 10px; }
.hero-story p{ color: var(--color-ink-soft); font-size:15px; max-width:60ch; }
.story-meta{ font-size:12px; color: var(--color-ink-soft); margin-top:10px; }

.secondary-stories{ display:flex; flex-direction:column; }
.mini-story{
  display:flex; gap:14px; padding: 16px 0; border-top: 1px solid var(--color-border);
}
.secondary-stories .mini-story:first-child{ border-top:none; padding-top:0; }
.mini-story .story-img{ flex:0 0 96px; width:96px; aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); }
.mini-story .story-img img{ width:100%; height:100%; object-fit:cover; }
.mini-story .story-body h4{ font-size:15px; font-weight:700; margin:4px 0 0; line-height:1.3; }

/* Latest feed */
.latest-feed{ max-width: 820px; }
.feed-row{
  display:flex; gap:16px; padding: 20px 0; border-top: 1px solid var(--color-border);
  align-items:flex-start;
}
.latest-feed .feed-row:first-child{ border-top:none; padding-top:0; }
.feed-row .story-img{ flex:0 0 132px; width:132px; aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); }
.feed-row .story-img img{ width:100%; height:100%; object-fit:cover; }
.feed-row h4{ font-size:17px; margin: 6px 0 4px; }
.feed-row p{ font-size:13.5px; color:var(--color-ink-soft); margin:0; }
.feed-meta{ display:flex; gap:8px; align-items:center; font-size:11px; color:var(--color-ink-soft); text-transform:uppercase; letter-spacing:.03em;}

/* generic card grid (What's Happening / Things To Do / Editor's Picks) */
.card-row{ display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.card-row::-webkit-scrollbar{ height:6px; }
.card-row::-webkit-scrollbar-thumb{ background: var(--color-border-strong); }
.event-card{ flex:0 0 260px; }
.event-card .story-img{ aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); position:relative; }
.event-card .story-img img{ width:100%; height:100%; object-fit:cover; }
.event-card .story-tags{ display:flex; gap:8px; margin-top:10px; font-size:11px; color:var(--color-ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.event-card h4{ font-size:15.5px; margin:6px 0 0; }

.grid-3{ display:grid; grid-template-columns: 1fr; gap:20px; }
@media(min-width:700px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1000px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }
.pick-card .story-img{ aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); }
.pick-card .story-img img{ width:100%; height:100%; object-fit:cover; }
.pick-card h4{ font-size:16px; margin:10px 0 6px; }
.pick-card p{ font-size:13px; color:var(--color-ink-soft); margin:0; }

/* Content + sidebar (two-col) */
.content-with-rail{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:980px){ .content-with-rail{ grid-template-columns: 2.1fr 1fr; } }
.rail-widget{ margin-bottom:28px; padding:20px; background:var(--color-neutral); border:1px solid var(--color-border); }
.rail-widget h5{ font-family:var(--font-display); font-size:16px; margin:0 0 14px; }
.rail-list{ display:flex; flex-direction:column; gap:12px; }
.rail-list li{ display:flex; gap:10px; align-items:flex-start; }
.rail-num{ font-family:var(--font-display); font-weight:700; color: var(--color-primary); font-size:18px; width:22px; flex:0 0 auto; }
.rail-list a{ font-size:13.5px; line-height:1.35; font-weight:600; }
.rail-list a:hover{ color:var(--color-primary); }
.ad-slot{
  border: 1px dashed var(--color-border-strong); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--color-ink-soft);
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; min-height:250px; margin-bottom:28px;
}

/* Newsletter */
.newsletter{
  background: var(--color-secondary); color:#fff;
  padding: 46px var(--gutter); text-align:center;
}
.newsletter h2{ color:#fff; font-size: clamp(26px,4vw,40px); }
.newsletter p{ color:#D8D6D2; margin: 10px auto 20px; max-width:44ch; }
.newsletter-form{ display:flex; max-width:420px; margin:0 auto; gap:10px; flex-wrap:wrap; justify-content:center; }
.newsletter-form input{ flex:1; min-width:200px; padding:12px 14px; border:1px solid transparent; border-radius:var(--radius-sm); }
.newsletter-form .btn-primary{ padding:12px 20px; }
.newsletter-note{ font-size:11px; color:#9A9793; margin-top:12px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-neutral); border-top:1px solid var(--color-border); padding-top:48px; }
.footer-grid{ display:grid; grid-template-columns: 1fr; gap:32px; padding-bottom:36px; }
@media(min-width:760px){ .footer-grid{ grid-template-columns: 1.4fr repeat(3,1fr); } }
.footer-brand .logo{ margin-bottom:10px; }
.footer-brand p{ color:var(--color-ink-soft); font-size:13.5px; max-width:36ch; }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; color:var(--color-ink-soft); }
.footer-col ul{ display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:13.5px; }
.footer-col a:hover{ color:var(--color-primary); }
.footer-bottom{
  border-top:1px solid var(--color-border); padding: 18px 0 28px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--color-ink-soft);
}
.footer-social{ display:flex; gap:12px; }

/* ==========================================================================
   CATEGORY / LISTING PAGE
   ========================================================================== */
.page-hero{ padding: 34px 0 10px; }
.page-hero .eyebrow{ margin-bottom:8px; display:block; }
.page-hero h1{ font-size: clamp(30px,5vw,48px); }
.page-hero p{ color:var(--color-ink-soft); max-width:64ch; margin-top:10px; font-size:15.5px; }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 20px 0 6px; }
.filter-chip{
  border:1px solid var(--color-border-strong); padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
}
.filter-chip.active{ background:var(--color-secondary); color:#fff; border-color:var(--color-secondary); }

/* ==========================================================================
   CATEGORY / LISTING PAGE — editorial publication layout
   ========================================================================== */
.category-page{ overflow-x:hidden; }
.category-page .page-hero{
  padding:34px 0 28px;
  border-bottom:1px solid var(--color-border);
}
.category-page .page-hero .category-label{
  display:inline-block;
  margin-bottom:8px;
  padding:3px 6px;
  background:var(--color-secondary);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.category-page .page-hero h1{
  font-size:clamp(36px,5vw,58px);
  letter-spacing:-.025em;
}
.category-page .page-hero p{
  max-width:72ch;
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
}
.category-feature-section{ padding:32px 0 42px; }
.category-feature-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  align-items:start;
}
@media(min-width:980px){
  .category-feature-layout{ grid-template-columns:minmax(0,3fr) minmax(250px,.95fr); gap:32px; }
}
.category-feature-main, .category-feature-main > *{ min-width:0; }
.category-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-left:12px;
  border-left:3px solid var(--color-primary);
}
.category-section-head h2{
  font-family:var(--font-display);
  font-size:clamp(21px,2.4vw,27px);
}
.category-top-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
@media(min-width:720px){
  .category-top-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
}
.category-secondary-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  min-width:0;
}
.category-story-overlay{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:var(--color-secondary);
  border-radius:var(--radius-md);
}
.category-story-overlay--lead{ min-height:360px; }
.category-story-overlay--small{ min-height:173px; }
.category-story-overlay > a{ display:block; width:100%; height:100%; }
.category-story-overlay .story-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden;
}
.category-story-overlay .story-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,20,18,.86) 0%, rgba(22,20,18,.48) 42%, rgba(22,20,18,.04) 78%);
  pointer-events:none;
}
.category-story-overlay img{ width:100%; height:100%; object-fit:cover; }
.category-story-copy{
  position:absolute;
  z-index:2;
  left:18px; right:18px; bottom:16px;
  color:#fff;
}
.category-story-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
}
.category-story-tags .badge{
  margin:0;
  flex:0 0 auto;
}
.category-story-tags .eyebrow{
  color:#fff;
  opacity:.88;
  font-size:9px;
  line-height:1.25;
}
.category-story-copy h3, .category-story-copy h4{ color:#fff; text-wrap:balance; }
.category-story-copy h3{ font-size:clamp(23px,3vw,34px); margin-top:5px; }
.category-story-copy h4{ font-size:clamp(16px,1.7vw,21px); margin-top:4px; }
.category-story-copy p{
  margin:6px 0 0;
  max-width:56ch;
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  line-height:1.45;
}
.category-sidebar{ min-width:0; }
.category-sidebar .rail-widget{ background:#fff; }
.category-trending{ padding:18px 18px 16px; }
.category-trending h5{
  display:flex; align-items:center; gap:8px;
  font-size:21px;
}
.category-trending h5::before{
  content:"↗";
  color:var(--color-primary);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:800;
}
.category-trending .rail-list{ gap:13px; }
.category-trending .rail-num{ color:#C9C5BF; font-size:12px; padding-top:3px; }
.category-trending .rail-list a{ font-size:12px; }
.category-newsletter-card{
  padding:24px 20px;
  text-align:center;
  background:#fff;
  border:1px solid var(--color-border);
}
.category-newsletter-card .newsletter-icon{
  width:30px; height:30px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border);
  font-size:13px;
}
.category-newsletter-card h3{ font-size:20px; margin-bottom:7px; }
.category-newsletter-card p{ margin:0 0 14px; color:var(--color-ink-soft); font-size:12px; line-height:1.55; }
.category-newsletter-card input{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--color-border);
  margin-bottom:8px;
  font-size:12px;
}
.category-feed-section{
  padding:8px 0 46px;
  border-top:1px solid var(--color-border);
}
.category-feed-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
}
@media(min-width:980px){
  .category-feed-layout{ grid-template-columns:minmax(0,3fr) minmax(250px,.95fr); }
}
.category-feed{ max-width:none; }
.category-feed .feed-row{ padding:18px 0; }
.category-feed .feed-row:first-child{ padding-top:0; }
.category-feed .feed-row .story-img{ flex-basis:170px; width:170px; }
.category-feed .feed-row h4{ font-family:var(--font-display); font-size:clamp(18px,2vw,24px); margin-top:5px; }
.category-feed .feed-row p{ max-width:66ch; font-size:12.5px; }
.category-feed .feed-meta{ color:var(--color-primary); }
@media(max-width:719px){
  .category-story-overlay--lead{ min-height:330px; }
  .category-story-overlay--small{ min-height:210px; }
}
@media(max-width:560px){
  .category-page .page-hero{ padding-top:26px; padding-bottom:22px; }
  .category-feature-section{ padding-top:24px; }
  .category-feed .feed-row{ gap:12px; }
  .category-feed .feed-row .story-img{ flex-basis:112px; width:112px; }
  .category-feed .feed-row p{ display:none; }
}

/* ==========================================================================
   ARTICLE PAGE
   ========================================================================== */
.breadcrumb{ font-size:12px; color:var(--color-ink-soft); padding: 18px 0 0; }
.breadcrumb a:hover{ color:var(--color-primary); }
.article-head{ max-width: 820px; margin: 14px 0 26px; }
.article-head h1{ font-size: clamp(28px,4.6vw,46px); margin: 10px 0 12px; }
.article-dek{ font-size:17px; color: var(--color-ink-soft); max-width:70ch; }
.article-byline{
  display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--color-border);
}
.avatar{ width:38px;height:38px;border-radius:50%; background:var(--color-tertiary-tint); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--color-primary); }
.byline-meta{ font-size:12.5px; color:var(--color-ink-soft); }
.byline-meta strong{ color:var(--color-ink); display:block; font-size:13.5px; }
.share-col{ margin-left:auto; display:flex; gap:8px; }

.article-hero-img{ aspect-ratio:16/9; overflow:hidden; margin: 20px 0 6px; background:var(--color-neutral); }
.article-hero-img img{ width:100%; height:100%; object-fit:cover; }
.img-caption{ font-size:12px; color:var(--color-ink-soft); margin: 6px 0 30px; }

.prose{ max-width: 720px; font-size:16.5px; line-height:1.75; }
.prose h2{ font-size:24px; margin: 34px 0 14px; }
.prose h3{ font-size:19px; margin: 26px 0 10px; }
.prose p{ margin: 0 0 18px; }
.prose figure{ margin: 26px 0; }
.prose figure img{ width:100%; }
.prose blockquote{
  border-left: 3px solid var(--color-primary); margin: 26px 0; padding: 4px 0 4px 20px;
  font-family: var(--font-display); font-size:20px; font-style:italic; color:var(--color-ink);
}
.prose blockquote cite{ display:block; font-family:var(--font-body); font-style:normal; font-size:12.5px; color:var(--color-ink-soft); margin-top:8px; }
.disclosure-note{
  background: var(--color-neutral); border:1px solid var(--color-border); padding:14px 16px; font-size:12.5px;
  color: var(--color-ink-soft); margin: 26px 0; border-radius: var(--radius-sm);
}
.disclosure-note a{ color: var(--color-primary); font-weight:700; }

.read-next{ margin-top: 44px; }
.read-next-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .read-next-grid{ grid-template-columns:repeat(2,1fr);} }

/* Affiliate buying-guide specifics */
.quick-recs{ margin: 30px 0 10px; }
.quick-recs-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:700px){ .quick-recs-grid{ grid-template-columns:repeat(3,1fr);} }
.product-card{ border:1px solid var(--color-border); padding:0 0 16px; background:#fff; }
.product-card .story-img{ aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); position:relative; }
.product-card .story-img img{ width:100%; height:100%; object-fit:cover; }
.product-card .pc-award{ position:absolute; top:10px; left:10px; }
.product-card .pc-body{ padding: 12px 14px 0; }
.product-card h4{ font-size:15px; margin:0 0 6px; }
.product-card p{ font-size:12.5px; color:var(--color-ink-soft); margin:0 0 12px; }
.product-card .price{ font-weight:800; font-family:var(--font-display); font-size:15px; }
.product-card .pc-actions{ display:flex; align-items:center; justify-content:space-between; padding: 0 14px; margin-top:10px; }

.comparison-table-wrap{ overflow-x:auto; margin: 24px 0 34px; }
table.comparison-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
table.comparison-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-soft);
  padding: 10px 12px; border-bottom:2px solid var(--color-border-strong);
}
table.comparison-table td{ padding: 12px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
table.comparison-table tr:hover td{ background: var(--color-neutral); }

.product-review{ border-top:2px solid var(--color-border-strong); padding-top:28px; margin-top:34px; }
.product-review .pr-head{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin-bottom:14px; }
.product-review .pr-img{ width:220px; flex:0 0 220px; aspect-ratio:4/3; overflow:hidden; background:var(--color-neutral); }
.product-review .pr-img img{ width:100%; height:100%; object-fit:cover; }
.pros-cons{ display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0; }
@media(min-width:560px){ .pros-cons{ grid-template-columns:1fr 1fr; } }
.pros-cons > div{ padding:14px 16px; background:var(--color-neutral); }
.pros-cons h5{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }
.pros-cons ul{ font-size:13.5px; display:flex; flex-direction:column; gap:6px; }
.merchant-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.merchant-btn{
  display:flex; align-items:center; gap:10px; border:1px solid var(--color-border-strong);
  padding:9px 14px; font-size:13px; font-weight:700; border-radius:var(--radius-sm);
}
.merchant-btn:hover{ background:var(--color-secondary); color:#fff; }
.merchant-btn .price{ color: var(--color-primary); font-weight:800; }
.merchant-btn:hover .price{ color: var(--color-tertiary); }

/* Restaurant/event info card */
.info-card{ border:1px solid var(--color-border); background:var(--color-neutral); padding:18px; margin:22px 0; }
.info-card dl{ display:grid; grid-template-columns: 110px 1fr; gap:8px 12px; font-size:13.5px; margin:0; }
.info-card dt{ color:var(--color-ink-soft); }
.info-card dd{ margin:0; font-weight:600; }
.info-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* Trust / static pages */
.static-page{ max-width: 760px; padding: 40px 0 60px; }
.static-page h1{ font-size: clamp(28px,4vw,42px); margin-bottom:18px; }
.static-page h2{ font-family:var(--font-display); font-size:21px; margin: 30px 0 10px; }
.static-page p{ color: var(--color-ink-soft); font-size:15.5px; line-height:1.7; margin: 0 0 14px; }
.static-page ul{ list-style:disc; padding-left:20px; color:var(--color-ink-soft); font-size:15.5px; }
.static-page li{ margin-bottom:8px; }

/* Search results */
.search-hero{ background:var(--color-secondary); color:#fff; padding: 40px 0; }
.search-hero .search-input-row{ display:flex; max-width:640px; margin-top:16px; border:1px solid #565450; }
.search-hero input{ flex:1; background:transparent; border:0; padding:14px; color:#fff; font-size:15px; }
.search-hero input::placeholder{ color:#B3B0AB; }
.search-hero button{ background: var(--color-primary); border:0; color:#fff; padding: 0 18px; }
.result-count{ font-size:13px; color:var(--color-ink-soft); margin: 20px 0 10px; }

/* 404 */
.error-page{ text-align:center; padding: 90px 0; }
.error-page .big-num{ font-family:var(--font-display); font-size:clamp(80px,16vw,160px); color:var(--color-primary); line-height:1; }

/* Author page */
.author-hero{ display:flex; gap:20px; align-items:center; padding: 40px 0 20px; flex-wrap:wrap; }
.author-hero .avatar{ width:88px; height:88px; font-size:30px; }
.author-hero h1{ font-size: clamp(24px,3.4vw,34px); }
.author-hero .role{ color:var(--color-primary); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.author-bio{ max-width:64ch; color:var(--color-ink-soft); margin-top:10px; }

/* utility */
.mt-0{margin-top:0;}
.hidden{ display:none !important; }
.text-center{ text-align:center; }


/* ==========================================================================
   HOMEPAGE STABILISATION — 2026-08
   Prevent grid/flex children, long headlines and horizontal rails from
   escaping their sections. Scoped to index.html via .home-page.
   ========================================================================== */
.home-page{
  overflow-x: hidden;
}
.home-page main{
  display:block;
  width:100%;
  min-width:0;
}
.home-page .section{
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  clear:both;
}
.home-page .section[hidden]{ display:none !important; }
.home-page .section > .wrap,
.home-page .top-stories,
.home-page .top-stories > *,
.home-page .secondary-stories,
.home-page .content-with-rail,
.home-page .content-with-rail > *,
.home-page .grid-3,
.home-page .grid-3 > *,
.home-page .feed-row > *,
.home-page .mini-story > *,
.home-page .story-body,
.home-page aside{
  min-width:0;
}
.home-page .top-stories{
  align-items:start;
}
.home-page .hero-story,
.home-page .mini-story,
.home-page .feed-row,
.home-page .pick-card,
.home-page .event-card{
  position:relative;
  z-index:0;
}
.home-page .hero-story .story-img,
.home-page .pick-card .story-img,
.home-page .event-card .story-img,
.home-page .feed-row .story-img,
.home-page .mini-story .story-img{
  isolation:isolate;
}
.home-page .hero-story p,
.home-page .pick-card p{
  margin-top:0;
}
.home-page .section-head{
  flex-wrap:wrap;
  align-items:flex-end;
}
.home-page .card-row{
  width:100%;
  min-width:0;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
}
.home-page .event-card{
  scroll-snap-align:start;
}
.home-page .latest-feed{
  width:100%;
  max-width:none;
}
.home-page .feed-row{
  width:100%;
}
.home-page .hero-story h3,
.home-page .mini-story h4,
.home-page .feed-row h4,
.home-page .event-card h4,
.home-page .pick-card h4{
  overflow-wrap:anywhere;
}

/* Keep the homepage header identical to the editorial header used elsewhere.
   Navigation stays grouped from the left instead of being stretched edge-to-edge. */
@media (min-width:980px){
  .home-page .main-nav{ display:flex; }
  .home-page .mobile-menu-btn{ display:none; }
  .home-page .nav-list{ justify-content:flex-start; }
  .home-page .nav-list a{ white-space:nowrap; }
}

@media (max-width:699px){
  .home-page .section{ padding:32px 0; }
  .home-page .section-head{ margin-bottom:18px; }
  .home-page .section-head > div{ min-width:0; }
  .home-page .section-head .view-all{ margin-left:auto; }
  .home-page .top-stories{ gap:22px; }
  .home-page .secondary-stories{
    border-top:1px solid var(--color-border);
    padding-top:2px;
  }
  .home-page .feed-row{
    gap:12px;
    padding:16px 0;
  }
  .home-page .feed-row .story-img{
    flex-basis:108px;
    width:108px;
  }
  .home-page .feed-row p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .home-page .event-card{ flex-basis:min(78vw,290px); }
}

@media (max-width:430px){
  .home-page .topbar-actions{ gap:6px; }
  .home-page .topbar-actions > .icon-btn:nth-of-type(2),
  .home-page .topbar-actions > .icon-btn:nth-of-type(3){ display:none; }
  .home-page .logo{ font-size:21px; }
  .home-page .feed-row .story-img{
    flex-basis:92px;
    width:92px;
  }
  .home-page .feed-row h4{ font-size:15px; }
  .home-page .section-head h2{ max-width:75vw; }
}

/* Editorial article links — used by sourced production articles. */
.prose a{
  color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Buttons inside article prose must keep button contrast instead of inheriting
   the generic red article-link colour. */
.prose a.btn{
  text-decoration:none;
}
.prose a.btn-primary,
.prose a.btn-primary:visited{
  color:#fff;
}
.prose a.btn-primary:hover,
.prose a.btn-primary:focus-visible{
  color:#fff;
}
.prose .source-note{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--color-border);
  font-size:12.5px;
  color:var(--color-ink-soft);
}


/* ==========================================================================
   ISOLATED HOMEPAGE EDITORIAL GRIDS — production fix
   Things To Do, Editor's Picks and Popular Guides no longer depend on the
   generic grid-3 rules. Their cards are fully contained and flow naturally.
   ========================================================================== */
.section-kicker{color:var(--color-ink-soft);font-size:13.5px;margin:4px 0 0;}
.home-feature-section{
  position:relative;
  display:block;
  width:100%;
  clear:both;
  contain:layout paint;
  overflow:hidden;
}
.home-feature-section > .wrap{display:block;width:100%;min-width:0;}
.editorial-card-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  width:100%;
  min-width:0;
  align-items:stretch;
  grid-auto-flow:row;
}
.editorial-card-grid > .pick-card{
  display:flex;
  flex-direction:column;
  position:relative;
  width:100%;
  min-width:0;
  height:100%;
  overflow:hidden;
  contain:layout paint;
}
.editorial-card-grid .pick-card > a.story-img{
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:4/3;
  overflow:hidden;
  line-height:0;
  flex:0 0 auto;
}
.editorial-card-grid .pick-card > a.story-img img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.editorial-card-grid .pick-card .eyebrow{display:block;margin-top:12px;}
.editorial-card-grid .pick-card h4{margin:7px 0 7px;overflow-wrap:break-word;word-break:normal;}
.editorial-card-grid .pick-card p{margin:0;overflow-wrap:break-word;}
@media(min-width:700px){
  .editorial-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1000px){
  .editorial-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
}
/* A section boundary should always create its own stacking/flow context. */
#things-to-do-section,#editors-picks-section,#popular-guides-section{z-index:0;}
#things-to-do-section + #editors-picks-section,
#popular-guides-section{margin-top:0;}

.prose .article-list{list-style:disc;padding-left:22px;margin:0 0 22px;color:var(--color-ink);}
.prose .article-list li{margin:0 0 9px;}
.source-list{margin-top:40px;padding:22px;background:var(--color-neutral);border:1px solid var(--color-border);}
.source-list h2{margin-top:0;}
.source-list p{font-size:13px;color:var(--color-ink-soft);margin-bottom:12px;}
.source-list ul{list-style:disc;padding-left:20px;}
.source-list li{margin-bottom:8px;font-size:13px;}
.source-list a{overflow-wrap:anywhere;}