/* ===================================================================
   WILTSHIRE DARTS HOUSE - shared stylesheet
   Loaded by every page, AFTER tailwind.css so these rules win.

   Colour tokens for Tailwind classes live in build-tools/tailwind.config.js
   (they used to be in site.js under the Play CDN, which is now gone).
   =================================================================== */

/* ===================================================================
   SELF-HOSTED WEBFONTS
   Previously pulled from fonts.googleapis.com, which is render-blocking
   and adds a DNS lookup plus TLS handshake before any text can paint.
   These are the LATIN subsets only, at the four weights the site uses.
   font-display:swap so text shows immediately in a fallback face.

   To add a weight: drop the woff2 in fonts/ and copy a block below.
   =================================================================== */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/oswald-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/oswald-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/oswald-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/oswald-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --line:rgba(223,232,239,.13);
  --line-strong:rgba(223,232,239,.24);
  --gold:#CB9B34;
  --goldlt:#E0B254;
}
[x-cloak]{ display:none !important; }
html,body{ background:#0B1117; max-width:100vw; overflow-x:clip; }
html{ scroll-padding-top:96px; }
body{ font-family:'Hanken Grotesk',system-ui,sans-serif; color:#F2F6F9; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.font-display{ font-family:'Oswald',sans-serif; }
a,button,input,textarea,select{ -webkit-tap-highlight-color:transparent; }
::selection{ background:#CB9B34; color:#0F1419; }

.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; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:#CB9B34; color:#0F1419;
  padding:.75rem 1.25rem; font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:13px; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid #E0B254; outline-offset:3px; }

/* ============ Section bands ============
   Two alternating tones, each with a soft vertical gradient so the page reads
   as panels of light rather than flat blocks.
   .band-a = lighter charcoal   .band-b = deeper charcoal
   Alternate them strictly down each page. */
.band-a{ background:linear-gradient(178deg,#1A232C 0%,#151E26 55%,#131B23 100%); }
.band-b{ background:linear-gradient(178deg,#0D141B 0%,#0A1016 60%,#0C131A 100%); }

/* ============ Gold glow rule ============
   Hairline that fades in from both edges with a soft bloom.
   Sits under the sticky nav and above the footer.
   To change the glow strength, scale the two opacity values below together. */
.gold-rule{ position:relative; height:1px; width:100%; border:0; margin:0; z-index:3;
  background:linear-gradient(90deg,
    rgba(203,155,52,0)    0%,
    rgba(203,155,52,.40) 10%,
    rgba(240,201,120,1)  34%,
    rgba(255,228,166,1)  50%,
    rgba(240,201,120,1)  66%,
    rgba(203,155,52,.40) 90%,
    rgba(203,155,52,0)  100%); }
.gold-rule::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:4px;
  background:inherit; filter:blur(3px); opacity:.38; pointer-events:none; }
.gold-rule::after{ content:""; position:absolute; left:0; right:0; top:-6px; height:14px;
  background:inherit; filter:blur(9px); opacity:.22; pointer-events:none; }

/* ============ Hero ============ */
.hero-bg{ background-size:cover; background-position:center; transform:scale(1.04);
  will-change:transform; animation:heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
.hero-scrim{ background:
  linear-gradient(100deg, rgba(7,10,14,.86) 0%, rgba(7,10,14,.62) 34%, rgba(7,10,14,.32) 64%, rgba(7,10,14,.24) 100%),
  linear-gradient(to top, rgba(7,10,14,.62) 0%, rgba(7,10,14,0) 42%); }

body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/></svg>");
}
main,header,footer{ position:relative; z-index:2; }

/* ============ Buttons ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; font-size:13px; cursor:pointer; transition:all .25s ease; }

.btn-gold{
  background:linear-gradient(135deg,#E0B254 0%,#CB9B34 58%,#9A7322 100%);
  color:#0F1419; padding:.95rem 1.9rem; position:relative; overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(203,155,52,.7), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-gold::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(203,155,52,.9); }
.btn-gold:hover::after{ left:140%; transition:left .7s ease; }

.btn-ghost{ background:transparent; color:#F2F6F9; padding:.95rem 1.8rem;
  border:1.5px solid var(--line-strong); }
.btn-ghost:hover{ background:#DFE8EF; color:#0F1419; border-color:#DFE8EF; transform:translateY(-2px); }

/* ============ Slide-in mobile menu ============ */
.m-menu{
  position:fixed; inset:0; z-index:95;
  background:linear-gradient(165deg,#070A0E 0%,#0F1419 42%,#1B2C3C 100%);
  transform:translateX(100%); visibility:hidden;
  transition:transform .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s;
  display:flex; flex-direction:column; overflow-y:auto;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.m-menu.open{ transform:translateX(0); visibility:visible;
  transition:transform .42s cubic-bezier(.4,0,.2,1), visibility 0s; }
.m-menu::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at bottom right,rgba(203,155,52,.22) 0%,transparent 60%); }
body.menu-open{ overflow:hidden; }
.m-link{ font-family:'Oswald',sans-serif; font-size:1.6rem; font-weight:600; line-height:1.15;
  color:#F2F6F9; text-transform:uppercase; padding:.26rem .6rem; transition:color .2s ease; }
.m-link:hover,.m-link:active{ color:#E0B254; }

.m-social{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  background:rgba(203,155,52,.09); color:#DFE8EF;
  border:1.5px solid rgba(203,155,52,.4); transition:all .3s ease; }
.m-social:hover{ background:#CB9B34; color:#0F1419; border-color:#CB9B34; }

/* ============ Fixed mobile CTA bar ============ */
.m-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(7,10,14,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(115%); transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.m-cta.show{ transform:translateY(0); }
@media (min-width:1024px){ .m-cta{ display:none !important; } }
body.menu-open .m-cta{ transform:translateY(115%) !important; }
@media (max-width:1023px){ body{ padding-bottom:72px; } }

/* ============ Marquee ============ */
.marquee{ display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; flex-shrink:0; align-items:center; gap:2.6rem; padding-right:2.6rem;
  animation:scroll 38s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-100%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.mq{ font-family:'Oswald',sans-serif; font-weight:500; font-size:1.35rem;
  letter-spacing:.05em; color:#C6D3DE; white-space:nowrap; display:flex; align-items:center; gap:2.6rem; }
.mq svg{ color:#CB9B34; flex:none; }

/* ============ Cards ============ */
.card{ background:linear-gradient(170deg,#1F2A34 0%,#161F27 100%);
  border:1px solid var(--line);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.card:hover{ transform:translateY(-6px); border-color:rgba(203,155,52,.55);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.85); }

.glow-blue{ position:absolute; width:460px; height:460px; border-radius:9999px;
  background:rgba(94,124,149,.22); filter:blur(120px); pointer-events:none; }
.glow-gold-soft{ position:absolute; width:380px; height:380px; border-radius:9999px;
  background:rgba(203,155,52,.18); filter:blur(110px); pointer-events:none; }

/* ============ Reveal on scroll ============ */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

.dot{ width:9px; height:9px; border-radius:999px; flex:none; position:relative; }
.dot::after{ content:""; position:absolute; inset:-4px; border-radius:999px;
  border:1.5px solid currentColor; opacity:.55; animation:ping 2.4s ease-out infinite; }
/* Static dot: used when the venue is closed. A pulsing ring reads as live
   activity, which is exactly the wrong signal outside opening hours. */
.dot--idle::after{ animation:none; opacity:.3; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }

.ul{ position:relative; }
.ul::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:0;
  background:#CB9B34; transition:width .35s cubic-bezier(.16,1,.3,1); }
.ul:hover::after{ width:100%; }

.ghost-num{ font-family:'Oswald',sans-serif; font-weight:700; color:rgba(223,232,239,.055);
  line-height:.8; letter-spacing:-.03em; pointer-events:none; user-select:none; }

/* ============ Form fields ============ */
.field{ width:100%; background:#26313B; border:1.5px solid var(--line-strong);
  color:#F2F6F9; font-family:'Hanken Grotesk',sans-serif; font-size:15px;
  padding:.85rem 1rem; transition:border-color .2s ease; }
.field::placeholder{ color:#A9BAC8; }
.field:focus{ outline:none; border-color:#CB9B34; }

/* ============ Day-of-week strip ============ */
.day{ background:linear-gradient(170deg,#1F2A34 0%,#161F27 100%);
  border:1px solid var(--line); transition:all .25s ease; }
.day.today{ border-color:#CB9B34;
  background:linear-gradient(170deg,#2a2114 0%,#1a150e 100%);
  box-shadow:0 16px 34px -20px rgba(203,155,52,.6); }

/* ============ Instagram fallback tiles ============ */
.ig-tile{ aspect-ratio:1/1; background:linear-gradient(170deg,#1F2A34 0%,#161F27 100%);
  border:1px solid var(--line); display:grid; place-items:center; color:rgba(198,211,222,.75); }

/* ============ Sponsor logo tiles ============
   Sponsor logos are designed for light backgrounds and arrive in every
   colour going, so they sit on a near-white tile rather than on the dark
   band. That is the standard treatment and it keeps a mixed set looking
   deliberate instead of accidental. */
.logo-tile{ background:#F4F7FA; border:1px solid rgba(223,232,239,.14);
  display:grid; place-items:center; padding:1.15rem; aspect-ratio:3/2;
  overflow:hidden; transition:transform .28s ease, box-shadow .28s ease; }
/* width/height 100% + contain is the reliable way to letterbox inside a
   fixed-ratio tile. max-height alone does not clamp a portrait logo here. */
.logo-tile img{ width:100%; height:100%; object-fit:contain;
  mix-blend-mode:multiply; }
a.logo-tile:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(0,0,0,.85); }

/* Some logos arrive as a full square with their own background baked in
   (white artwork on brand colour, typically straight off Facebook). Those
   must NOT sit on a white tile or blend-multiply, or they disappear. This
   variant lets the artwork fill the tile edge to edge instead. */
.logo-tile--bleed{ background:transparent; padding:0; }
.logo-tile--bleed img{ max-width:none; max-height:none;
  width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; }
/* Fallback when a sponsor has no logo yet: their name, set in the display face */
.logo-tile__name{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:#141C24; font-size:1rem; line-height:1.15; text-align:center; }

/* ============ Featured sponsor cards ============
   One card per sponsor: logo panel on top, tier and copy beneath, so a logo
   is never separated from the business it belongs to. The logo sits on its
   own light panel because sponsor artwork is drawn for light backgrounds. */
.sponsor-card{ display:flex; flex-direction:column;
  background:linear-gradient(170deg,#1F2A34 0%,#161F27 100%);
  border:1px solid var(--line); overflow:hidden;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.sponsor-card:hover{ transform:translateY(-5px); border-color:rgba(203,155,52,.5);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.9); }
/* grid-template-rows:minmax(0,1fr) is load-bearing. Without it the image's
   intrinsic height forces the row taller and the aspect-ratio is ignored,
   so a portrait logo makes its panel taller than the others in the row. */
/* Padding kept tight so a contained logo fills as much of the panel as it can.
   Sponsor logos arrive at wildly different aspect ratios and we cannot remake
   them, so this narrows the perceived size difference between a full-bleed
   square and a letterboxed portrait sitting side by side. */
.sponsor-card__logo{ background:#F4F7FA; display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr); padding:.9rem 1.1rem; aspect-ratio:16/9;
  overflow:hidden; }
.sponsor-card__logo img{ width:100%; height:100%; min-height:0;
  object-fit:contain; mix-blend-mode:multiply; }
/* full-square logos with their own baked-in background fill the panel instead */
.sponsor-card__logo--bleed{ background:transparent; padding:0; }
.sponsor-card__logo--bleed img{ object-fit:cover; mix-blend-mode:normal; }
.sponsor-card__body{ padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.sponsor-card__tier{ font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-size:10.5px; color:var(--gold); }
.sponsor-card__name{ font-family:'Oswald',sans-serif; font-weight:600;
  text-transform:uppercase; font-size:1.15rem; color:#F2F6F9; margin-top:.35rem; line-height:1.15; }
.sponsor-card__desc{ font-size:13.5px; line-height:1.6; color:#C6D3DE; margin-top:.6rem; flex:1; }
.sponsor-card__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em;
  font-size:11.5px; color:#DFE8EF; transition:color .2s ease; }
.sponsor-card:hover .sponsor-card__link{ color:var(--goldlt); }
/* the empty slot that invites the next sponsor */
.sponsor-card--open{ background:transparent; border-style:dashed;
  border-color:rgba(203,155,52,.4); }
.sponsor-card--open:hover{ border-color:rgba(203,155,52,.75); }

/* ============ "Proud to Support" roll ============
   Deliberately type-led, no logos. Each entry is a rule with the name set
   large in the display face, so the list reads like a credits roll and
   stays clearly distinct from the paying-sponsor logo wall above. */
.support-roll{ border-top:1px solid var(--line); }
.support-roll__item{ position:relative; display:grid; gap:.2rem;
  padding:1.35rem 0 1.35rem 1.5rem; border-bottom:1px solid var(--line); }
/* gold tick mark down the left edge, drawn in, not an image */
.support-roll__item::before{ content:""; position:absolute; left:0; top:1.6rem;
  width:5px; height:5px; border-radius:999px; background:var(--gold);
  box-shadow:0 0 0 4px rgba(203,155,52,.14); }
.support-roll__tag{ font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.18em; font-size:10.5px; color:var(--goldlt); }
.support-roll__name{ font-family:'Oswald',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(1.35rem, 3.4vw, 1.9rem); color:#F2F6F9; }
.support-roll__note{ font-size:13.5px; line-height:1.5; color:#C6D3DE; }
/* Brand names whose own capitalisation matters (VDUb Radio) opt out of the
   uppercase treatment, otherwise the design flattens them to VDUB and the
   spelling the client asked for never actually reaches the screen. */
.support-roll__name--exact{ text-transform:none; }
@media (min-width:768px){
  .support-roll__item{ grid-template-columns:minmax(0,auto) 1fr; align-items:baseline;
    column-gap:1.5rem; padding-right:.5rem; }
  .support-roll__tag{ grid-column:1 / -1; }
  .support-roll__note{ text-align:right; }
}
@media (hover:hover){
  .support-roll__item{ transition:padding-left .3s ease; }
  .support-roll__item:hover{ padding-left:1.9rem; }
}

/* ============ Expandable panels (sponsor packages, terms) ============ */
.pkg{ background:linear-gradient(170deg,#1F2A34 0%,#161F27 100%);
  border:1px solid var(--line); transition:border-color .28s ease, box-shadow .28s ease; }
.pkg[data-open="true"]{ border-color:rgba(203,155,52,.5);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9); }
.pkg__btn{ width:100%; display:flex; align-items:center; gap:1rem; text-align:left;
  padding:1.15rem 1.25rem; cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track,.dot::after,.hero-bg{ animation:none; }
  .hero-bg{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ REVIEWS ============================
   Real, attributed Google reviews. The quote mark is a pseudo-element
   so it never lands in the accessibility tree or in copied text.
   Cards stretch to equal height and push the attribution to the
   bottom with margin-top:auto, which keeps the name row on one line
   across the grid even though the quotes are different lengths. */
.review{ position:relative; display:flex; flex-direction:column;
  background:linear-gradient(170deg,#1B242D 0%,#141C24 100%);
  border:1px solid var(--line); padding:1.6rem 1.4rem 1.35rem;
  transition:border-color .3s ease, transform .3s ease; }
.review::before{ content:'\201C'; position:absolute; top:-.35rem; right:.75rem;
  font-family:'Oswald',sans-serif; font-size:4.2rem; line-height:1;
  color:rgba(203,155,52,.16); pointer-events:none; }
@media (hover:hover){
  .review:hover{ border-color:rgba(203,155,52,.45); transform:translateY(-3px); }
}
.review__text{ position:relative; font-size:14.5px; line-height:1.62; color:#C6D3DE; }
.review__foot{ margin-top:auto; padding-top:1.1rem; display:flex; align-items:center;
  gap:.7rem; }
.review__avatar{ flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(203,155,52,.5); border-radius:50%;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.03em; color:#E0B254; }
.review__name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.03em; color:#F2F6F9; line-height:1.2; }
/* The star row replaces the old "5 star review on Google" text. It is
   aria-hidden and paired with an sr-only sentence in the markup, so a screen
   reader gets "Rated 5 out of 5 on Google" rather than five star glyphs read
   out one at a time - and the Google provenance survives the swap.
   line-height:1 stops the tall glyph line box adding height to every card. */
.review__stars{ font-size:22px; line-height:1; color:#E0B254;
  letter-spacing:.06em; margin-top:.28rem; }

/* Featured review: same component, more room and a gold edge. */
.review--lead{ border-color:rgba(203,155,52,.42);
  background:linear-gradient(150deg,#22303B 0%,#151E26 62%);
  padding:1.9rem 1.7rem 1.5rem; }
.review--lead::before{ font-size:6.5rem; top:-.7rem; right:1.1rem; }
.review--lead .review__text{ font-size:15.5px; }

/* Star row. Aria-hidden in the markup, with the rating written out in
   text alongside, so screen readers get "5 out of 5" not nine glyphs. */
.stars{ display:inline-flex; gap:.14em; color:#E0B254; font-size:15px;
  letter-spacing:.04em; }