/* ============================================================
   THE ENAMEL SIGN
   Art direction for oakleygasnsave.com

   The previous theme was near-black with a single amber accent,
   glass cards, blurred surfaces and radial gradient glows. That is
   a look that arrives by default rather than by choice, and it fit
   this business no better than any other.

   This one is taken from the building. The store's identity is
   already designed and bolted to the wall: a white enamel sign with
   heavy black condensed capitals, a red script "Oakley", line-art of
   a horse, a buck and a fish, and underneath, hand-painted white
   capitals on the door glass listing what they do. Add the Valero
   canopy blue and gold. That is the palette and the voice.

   Structure follows the same idea. A gas station is a sign you read
   from the road, so the page is built from boards and rules, not
   floating glass. Photographs are the only place light comes from.

   Loaded LAST. It restates the tokens the older sheets consume, and
   switches off the effects they hardcode.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------------
   Sampled from images/station-exterior-day.jpg, not from a palette
   generator. */
:root {
  /* Surfaces: the enamel field and the stucco wall behind it. */
  --bg-primary: #efeae0;
  --bg-secondary: #e6e0d4;
  --bg-card: #ffffff;
  --bg-glass: #ffffff;
  --bg-glass-hover: #faf8f4;

  /* Brush-black lettering, and the greys under it. */
  --text-primary: #14171a;
  --text-secondary: #4a5158;
  /* #6c7580 measured 3.90:1 on the enamel cream, under the 4.5:1 that small text
     needs. It is the ink for eyebrows, tour notes, price grades and photo
     captions, so a single value carried the failure across the whole site.
     #5a626c measures 5.15:1 on the same cream and is still clearly secondary.
     The dark footer and utility bar must NOT inherit it: they take explicit
     light ink further down this file. */
  --text-muted: #5a626c;
  --text-on-accent: #ffffff;

  /* Valero blue carries every interactive thing: it is the one colour
     on the forecourt a driver already associates with this station,
     and it holds 4.5:1 on white where the gold cannot. */
  --accent: #0b3c86;
  --accent-light: #14509f;
  --accent-dark: #072a5e;
  --accent-glow: rgba(11, 60, 134, 0.16);

  /* Gold is structural only: rules, underlines, the board's frame.
     Never text, never a button. */
  --sign-gold: #f0b323;
  /* The red from the "Oakley" script and the word LIQUOR. */
  --sign-red: #b3242b;
  /* Slough green for the open state. */
  --sign-green: #2f6b4f;

  --accent-green: var(--sign-green);
  --accent-red: var(--sign-red);
  --accent-blue: var(--accent);

  --border-glass: rgba(20, 23, 26, 0.16);
  --border-glass-hover: rgba(20, 23, 26, 0.3);

  /* Enamel signs have square corners and painted edges, not pills. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;

  /* Ink on paper does not glow. Shadows are contact shadows only. */
  --shadow-sm: 0 1px 0 rgba(20, 23, 26, 0.08);
  --shadow-md: 0 1px 2px rgba(20, 23, 26, 0.1);
  --shadow-lg: 0 2px 6px rgba(20, 23, 26, 0.12);
  --shadow-glow: none;

  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
}

/* ---- 2. Switch off the previous theme's effects ----------------
   Grouped and deliberate rather than scattered !important, so the
   older sheets keep owning layout and this sheet owns surface. */
.glass,
.glass-card,
.nav,
.nav.scrolled,
.nav-links,
.nav-mobile,
.mobile-cta-bar,
.util-bar,
.price-board__tile,
.svc-card,
.counter-card,
.step-card,
.promo-deal,
.tier-card,
.prod-card,
.reason-card,
.service-card,
.category-card,
.testimonial-card,
.ferry-live,
.source-note,
.toll-wrap,
.ph,
.contact-info__block,
.hours-table,
.ed-final,
.ed-trip__card,
.ed-quote__item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The ambient glows. A photograph is the only light source here. */
.ed-final__art,
.ed-testimonials-bg::before {
  display: none !important;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ---- 3. Type --------------------------------------------------
   The sign sets GAS N SAVE in heavy condensed capitals. Oswald is
   the closest widely available face to the lettering actually on the
   building; matching the artifact matters more here than reaching
   for something less common. Body stays on the system stack: it is
   free, it renders instantly, and the display face is doing the
   talking. */
.ed-display,
.page-hero h1,
.ed-hero h1,
h1, h2, h3,
.nav-logo .logo-text,
.promo-deal__title,
.counter-card__title,
.svc-card__title,
.step-card__title,
.ed-trip__title,
.ed-index__title,
.ed-stat__num,
.ed-trust__num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  font-style: normal;
}

.ed-display,
.page-hero h1,
.ed-hero h1 {
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.005em;
}

/* The old theme italicised an <em> inside every heading into a serif
   flourish. Here the emphasis is the sign's red, which is how the
   real sign emphasises LIQUOR. */
.ed-display em,
.page-hero h1 em,
.ed-hero h1 em,
h1 em, h2 em {
  font-style: normal;
  font-weight: 700;
  color: var(--sign-red);
}

/* Eyebrows are the small stencilled line above a sign's main text. */
.ed-eyebrow,
.page-hero__kicker,
.ed-hero__kicker,
.section-label {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* A gold rule under every section head. This is the one repeated
   decorative device, and it is the stripe off the Valero canopy. */
.ed-eyebrow::after,
.page-hero__kicker::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--sign-gold);
  margin-top: 0.55rem;
}

.ed-lead, .lead {
  font-family: inherit;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Prices, times, tolls and axle counts are data. Tabular figures stop
   them shifting as they update. */
.price-board__price,
.util-bar__value,
.toll-amount,
.toll-tickets,
.hours-table td,
.propane-bar__price,
.ed-trust__num,
.ed-stat__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---- 4. Surfaces ----------------------------------------------
   Every panel is a painted board: solid fill, hairline keyline. */
.glass,
.glass-card,
.svc-card,
.counter-card,
.step-card,
.promo-deal,
.tier-card,
.prod-card,
.reason-card,
.service-card,
.testimonial-card,
.ferry-live,
.contact-info__block,
.toll-wrap,
.price-board__tile {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
}

/* The propane refill bar was written for the old dark theme and was the single
   component the enamel conversion missed — a black board with an amber keyline
   sitting on a cream page. An audit of all eight pages found no others. Same
   board as a price tile; the gold stays structural, on the top rule only. */
.propane-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-top: 3px solid var(--sign-gold);
  box-shadow: var(--shadow-sm);
}
.propane-bar__desc { color: var(--text-secondary); }
.propane-bar__unit { color: var(--text-muted); }

/* The source note is a stamped annotation, so it keeps the gold edge. */
.source-note {
  background: #fffdf7;
  border: 1px solid var(--border-glass);
  border-left: 4px solid var(--sign-gold);
}

/* ---- 5. Navigation --------------------------------------------
   White field, hairline underneath, no blur. */
.nav.scrolled {
  background: rgba(239, 234, 224, 0.97);
  box-shadow: 0 1px 0 var(--border-glass);
}

.nav-links {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-glass);
}

.nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); background: rgba(20, 23, 26, 0.10); }
.nav-logo, .nav-phone { color: var(--text-primary); }
.nav-mobile { background: var(--bg-primary); }
.nav-toggle span { background: var(--text-primary); }

/* ---- The current page -----------------------------------------
   .active and :hover used to share one declaration - a 6% black
   wash - and that single line carried two separate faults.

   The wash sits on .nav-links' own rgba(255,255,255,0.75) bar, so
   it measured about 2% against its own container. The founder's
   note was that the indicator "is very light which is getting
   blended with the white bar". And because hover said exactly the
   same thing, the page you are ON and the link you happen to be
   under the cursor looked identical - so even a legible version of
   that wash would not have answered the question the indicator
   exists to answer.

   They are two different statements now. The active pill is the
   enamel sign in miniature: black field, gold letters, the same
   figure .util-bar and .ed-ticker already use. It needs no second
   rule for the scrolled state, because .nav-links keeps that
   75%-white bar whether the nav is transparent over the photograph
   or cream after scrolling - near-black on it is over 10:1 either
   way, and gold on near-black is 9.4:1. The glow from the retired
   dark theme goes with it. */
.nav-links a.active,
.nav-links a.active:hover {
  color: var(--sign-gold);
  background: var(--text-primary);
  box-shadow: none;
}

/* The mobile sheet says the same thing in its own idiom. It is the
   surface 80-90% of this site's traffic navigates from, and it had
   the identical active-equals-hover conflation: both went Valero
   blue, so "you are here" was a hue shift against dark grey. The
   gold rule is the marker; the blue stays as the ink. The sheet
   centres its links, so the marker underlines rather than indents -
   a left border would push a centred row off its own axis. */
.nav-mobile a.active {
  color: var(--accent);
  border-bottom: 3px solid var(--sign-gold);
}

/* ---- 6. The utility bar stays dark ----------------------------
   It is the roadside price board in miniature: black field, gold
   hairline, mono numerals. Keeping it dark against a white page is
   what makes it read as a sign rather than as chrome. */
.util-bar {
  background: var(--text-primary);
  border-bottom: 3px solid var(--sign-gold);
}
.util-bar__label { color: rgba(255, 255, 255, 0.62); }
.util-bar__value { color: #fff; }
.util-bar__call { color: rgba(255, 255, 255, 0.82); }
.util-bar__call:hover { color: var(--sign-gold); }
.util-bar .status-bar--open { background: rgba(47, 107, 79, 0.22); color: #7ee0a8; border-color: rgba(126, 224, 168, 0.4); }
.util-bar .status-bar--closed { background: rgba(179, 36, 43, 0.22); color: #ff9ea3; border-color: rgba(255, 158, 163, 0.4); }

/* ---- 7. Buttons ------------------------------------------------
   Painted, not glowing. Square-ish corners, flat fills. */
.btn {
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: none; }
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
}
.btn-secondary:hover { background: var(--text-primary); color: #fff; }

/* Over a photographic hero the secondary button needs light edges. */
.page-hero .btn-secondary,
.ed-hero .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.page-hero .btn-secondary:hover,
.ed-hero .btn-secondary:hover { background: #fff; color: var(--text-primary); }

/* ---- 8. Heroes keep their photograph ---------------------------
   The page is white; the heroes are windows cut into it. Dark scrim
   and light type stay, because that is what keeps a photograph
   legible under text. */
.page-hero, .ed-hero { color: #fff; }
.page-hero h1, .ed-hero h1,
.page-hero .lead, .ed-hero .ed-hero__sub { color: #fff; }
.page-hero .lead, .ed-hero__sub { color: rgba(255, 255, 255, 0.88); }
.page-hero__kicker, .ed-hero__kicker { color: var(--sign-gold); }
.page-hero__kicker::after, .ed-hero__kicker::after { background: var(--sign-gold); }
.page-hero h1 em, .ed-hero h1 em { color: var(--sign-gold); }

/* ---- 8a. EVERY text role inside a photographic hero ---------------
   A hero is a dark field made of pixels, so its ink has to be stated for each
   role that can appear in it. Three separate holes let cream-page ink onto a
   dark photograph on six pages:

   1. elevated.css sets `.page-hero p.lead { color: var(--text-secondary) }`.
      That is specificity (0,2,1); the rule above it here is `.page-hero .lead`
      at (0,2,0), so it lost no matter which sheet loaded last. Matching the
      element selector is what makes this win.
   2. contact.html builds its hero from .ed-eyebrow and .ed-lead, which the
      block above never named at all.
   3. deals.html carried an inline style on its kicker, which no stylesheet can
      beat. That one is fixed in the HTML.

   #4a5158 on a dark hero photograph is luminance 0.08 against a scrim that is
   darker still. It was not low contrast, it was unreadable. */
.page-hero p.lead,
.page-hero .lead,
.page-hero .ed-lead,
.ed-hero p.lead,
.ed-hero .ed-lead { color: rgba(255, 255, 255, 0.9); }

.page-hero .ed-eyebrow,
.ed-hero .ed-eyebrow { color: var(--sign-gold); }

/* Sections that used a flat tinted panel instead of a photo. */
.page-hero__bg--teal { background: var(--text-primary); }

/* ---- 9. Rules and dividers ------------------------------------- */
.ed-rule, .divider { background: var(--border-glass); height: 1px; }

.ed-final {
  background: var(--text-primary);
  color: #fff;
  border: 0;
  border-top: 3px solid var(--sign-gold);
}
.ed-final h2, .ed-final p { color: #fff; }
.ed-final h2 em { color: var(--sign-gold); }

/* The board is a dark field, so every role inside it has to be stated. The
   eyebrow and the secondary button were the two nobody named: the eyebrow kept
   the cream page's muted ink (1.66:1) and the button kept its dark outline ink
   (1.11:1), which is why "See Deals" and "View Deals" read as empty boxes on a
   photograph. An override only protects the selectors you thought of. */
.ed-final .ed-eyebrow { color: var(--sign-gold); }
/* The board centres its type, but the eyebrow's gold rule is a fixed-width
   block, and text-align does not move one of those. It was hanging off the
   far left of a centred heading. */
.ed-final .ed-eyebrow::after { margin-left: auto; margin-right: auto; }
.ed-final .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.ed-final .btn-secondary:hover {
  background: #fff;
  color: var(--text-primary);
  border-color: #fff;
}

/* The footer carries the same wordmark element as the nav (a.nav-logo), so it
   inherited .nav-logo .logo-accent -- Valero blue, on the near-black footer,
   at 1.72:1. sign.css restated the accent for .nav:not(.scrolled) and for
   .nav.scrolled, and the footer is neither. Stated at (0,3,0) so it does not
   depend on winning a tie against style.css by load order. */
.footer .nav-logo .logo-accent,
.footer .nav-logo .logo-ampersand { color: var(--sign-gold); }

.footer { background: var(--text-primary); color: rgba(255, 255, 255, 0.8); border-top: 3px solid var(--sign-gold); }
.footer a, .footer-links a { color: rgba(255, 255, 255, 0.8); }
.footer a:hover { color: var(--sign-gold); }
.footer h5 { color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; }

/* ---- 9a. The footer is a dark field on a light page ---------------
   When the site went light, the footer stayed dark but its text kept pointing
   at --text-muted and --text-secondary, which are ink colours for the cream
   page. On rgb(20,23,26) that measured 2.24:1 for the address and the opening
   hours, which are the two most useful lines a local business publishes. Ink on
   a dark field has to be stated, not inherited. Alphas chosen against the
   measured footer background: 0.86 gives 13.4:1, 0.75 gives 10.4:1, 0.7 gives
   9.2:1. */
.footer-mobile__info-item,
.footer-contact p { color: rgba(255, 255, 255, 0.86); }
.footer-mobile__brand p,
.footer-brand p { color: rgba(255, 255, 255, 0.75); }
.footer-mobile__copy,
.footer-bottom p { color: rgba(255, 255, 255, 0.7); }
/* Decorative separator, not content, but it was compounding a dim colour with
   opacity 0.5 and disappearing entirely. */
.footer-mobile__legal span { color: rgba(255, 255, 255, 0.55); opacity: 1; }

/* 19px tall was the whole tap target for every footer link on a phone. Google
   and Apple both ask for ~44px; padding gets there without moving the layout,
   because the column is a flex stack of block links. */
.footer-mobile__col a {
  display: block;
  padding-block: 0.62rem;
  min-height: 44px;
  box-sizing: border-box;
}

/* That fix named the column links and stopped there. Three more groups were
   still 19-21px tall, which is under even the 24px AA floor, and two of them
   are phone numbers - the single action this business most wants a thumb to
   land on. inline-flex rather than block because the legal row and the
   contact block lay their links out in a line, and turning them into blocks
   would stack them. */
.footer-mobile__legal a,
.footer-mobile__info-item a,
.contact-info__block a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}

/* ---- 10. Data components --------------------------------------- */
.price-board__grade { color: var(--text-muted); }
.price-board__price { color: var(--text-primary); }

/* The premium tile kept its dark-theme treatment: mint #5eead4 with a teal
   glow, which on the white tile the board now uses measured 1.48:1. The
   premium price was effectively unreadable, and a price nobody can read is
   the one thing this board exists to avoid. It needs the higher specificity
   because elevated.css states the same two-class selector.
   A price board is a board: every grade reads the same. */
.price-board__tile--premium .price-board__price {
  color: var(--text-primary);
  text-shadow: none;
}
.price-board__tile .price-board__price { text-shadow: none; }

/* A price slot with nothing confirmable in it. Two class names so it also beats
   .price-board__tile--premium .price-board__price, which would otherwise repaint
   it. It is set smaller than a figure because it is a sentence, and in the accent
   because it is an instruction: pick up the phone. */
.price-board__price.price-board__price--call {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--accent);
}
.price-stamp { color: var(--text-secondary); }

.hours-table td { border-color: var(--border-glass); }
.hours-table tr.is-today { background: rgba(240, 179, 35, 0.18); }
.hours-table tr.is-today td { font-weight: 700; color: var(--text-primary); }

.toll-table thead th { background: var(--bg-secondary); color: var(--text-secondary); }
.toll-table th, .toll-table td { border-color: var(--border-glass); }

.faq-item { border-color: var(--border-glass); }
.faq-item summary { color: var(--text-primary); font-family: var(--font-display); text-transform: none; }

.ferry-facts li { border-color: var(--border-glass); }
.ferry-facts__mark { color: var(--accent); }
.fish-list__mark { background: var(--sign-gold); }

.ed-ticker { background: var(--text-primary); color: #fff; border-block: 0; }
.ed-ticker__item, .ed-ticker span { color: rgba(255, 255, 255, 0.85); }

/* Status pills outside the dark bar. */
.status-bar--open { background: rgba(47, 107, 79, 0.14); color: #235238; border: 1px solid rgba(47, 107, 79, 0.35); }
.status-bar--closed { background: rgba(179, 36, 43, 0.12); color: #8d1c22; border: 1px solid rgba(179, 36, 43, 0.32); }

/* ---- 11. Photographs -------------------------------------------
   Square edges, hairline keyline. The picture is the ornament. */
.ph { border-radius: 2px; border-color: var(--border-glass); background: var(--bg-secondary); }
.ed-split__art { border-radius: 2px; box-shadow: var(--shadow-md); }

/* ---- 12. Accessibility floor ----------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ph img { transition: none; }
  .ph:hover img { transform: none; }
}

/* ---- 13. Corrections from the first render critique -------------
   Found by screenshotting rather than by reading the markup. */

/* The homepage hero emphasises with .highlight, not <em>. It was
   inheriting a blue italic, which fought the sign lettering and sat
   at poor contrast on the photograph. */
.ed-hero h1 .highlight,
.page-hero h1 .highlight {
  color: var(--sign-gold);
  font-style: normal;
  -webkit-text-fill-color: var(--sign-gold);
  background: none;
}

/* ---- Nav ink over the hero ------------------------------------
   ONE decision, stated once, for every role in the nav.

   It used to be two. Up at the top of this sheet a rule scoped to
   [data-page="home"] lit the logo, the phone and the hamburger,
   and its comment stated a CONDITION - "the hero sits under the
   fixed nav on a dark photograph" - while its selector encoded a
   PAGE. The condition is true on all nine public pages: .nav is
   declared with no background at all, so it is transparent until
   .scrolled, and every one of those pages puts a dark photographic
   hero directly under it (.ed-hero on home/ferry/liquor,
   .page-hero on the other six; admin.html has no .nav).

   So the phone number and the mobile hamburger rendered #14171a on
   a dark photograph - about 1.2:1 - on contact, fuel-services,
   store, deals, terms-of-service and privacy-policy. The hamburger
   was the worse of the two and the one nobody reported, because it
   only shows below 1120px and the founder was on a desktop.

   The logo escaped only by accident: the unscoped rule that used to
   live here outranked the page-scoped one, which made that half of
   it dead code. That is the tell - when one role is right for a
   reason none of its siblings share, the ink is being decided in
   more than one place. All of them are decided here now.

   If a page is ever added whose hero is NOT dark, this is the rule
   to give an exception to. Do not re-introduce a per-page selector
   for the pages that ARE dark - that is the shape of the bug, and
   it has now shipped four times. */
.nav:not(.scrolled) .logo-text,
.nav:not(.scrolled) .nav-logo,
.nav:not(.scrolled) .nav-phone { color: #fff; }
.nav:not(.scrolled) .nav-toggle span { background: #fff; }
.nav:not(.scrolled) .logo-accent,
.nav:not(.scrolled) .logo-ampersand { color: var(--sign-gold); }

/* ...and the one state where "transparent" stops meaning "over a
   photograph". The mobile sheet paints cream across the whole
   viewport, and style.css deliberately lifts the fixed nav ON TOP of
   it - `body.nav-open .nav { z-index: calc(var(--z-overlay) + 2) }`,
   302 against the sheet's 300 - so the close button stays tappable.
   The nav is still :not(.scrolled) at that moment, so without this
   the ink stays light and the wordmark and the X sit on cream at
   about 1.1:1.

   The X is the worse of the two: it is the only way out of a
   full-screen overlay, on the surface 80-90% of this site's traffic
   uses. It was already invisible on the home page before the light
   ink was un-scoped from it - a fifth instance of this section's
   defect that nobody had reported, in the state a desktop check
   never enters. */
body.nav-open .nav:not(.scrolled) .logo-text,
body.nav-open .nav:not(.scrolled) .nav-logo,
body.nav-open .nav:not(.scrolled) .nav-phone { color: var(--text-primary); }
body.nav-open .nav:not(.scrolled) .nav-toggle span { background: var(--text-primary); }
body.nav-open .nav:not(.scrolled) .logo-accent,
body.nav-open .nav:not(.scrolled) .logo-ampersand { color: var(--accent); }
.nav.scrolled .logo-accent,
.nav.scrolled .logo-ampersand { color: var(--accent); }
.nav-logo .logo-icon { color: var(--sign-gold); }
.nav.scrolled .nav-logo .logo-icon { color: var(--accent); }

/* The hero fact strip inherited dark body text and vanished into the
   photograph. */
.ed-hero__meta { color: rgba(255, 255, 255, 0.9); }
.ed-hero__meta strong { color: #fff; }
.ed-hero__meta span { border-color: rgba(255, 255, 255, 0.28); }

/* The eyebrow is inline-flex, so its gold rule was sitting beside the
   text instead of under it. */
.ed-eyebrow, .page-hero__kicker, .ed-hero__kicker {
  display: block;
}

/* ---- The hero field -------------------------------------------------
   The founder's note was "a lot of colors are visible on the hero
   images". The instinct is to read that as a contrast problem and pour
   on more scrim. Measured first, and it is not: sampling the rendered
   pixels under the actual glyphs (screenshot with the type, screenshot
   without it, diff for the glyph mask, read the backdrop underneath)
   put every hero's type between 8.4:1 and 19:1, with mean backdrop
   luminance already down at 0.018. The type was never the problem.

   What he is seeing is that the photographs are BUSY. A scrim is a
   multiply: it lowers every pixel together, so it leaves local contrast
   and hue exactly where they were. You can darken a shelf of Corona,
   Modelo and Bud Light until it is nearly black and the eye still picks
   out the logos, because what identifies them is the contrast BETWEEN
   neighbouring pixels, not their absolute value. Proved it by rendering
   the naive fix: pushing the scrim to 0.80/0.96 cost 10 units of mean
   luminance and removed 10% of the colour. The hero just got muddy.

   So the photograph is drained rather than dimmed. Saturation at 0.2
   keeps enough colour to tell a real shop from a stock photo while
   making the sign's own gold the only saturated thing on the page,
   which is the entire enamel direction. On contact.html it is the
   difference between the Valero canopy's yellow chevron cutting
   straight through the gold word HIGHWAY and sitting quietly behind it.

   Two structural rules come with it:

   1. The scrim lives on the HERO, not on the photo layer. A filter
      applies to an element's pseudo-elements too, so a scrim welded to
      the photo cannot be treated separately from it.
   2. It is stated ONCE, here, for both hero systems. It used to be
      copy-pasted into all fourteen per-page background shorthands,
      which is why "tune the scrim" previously meant fourteen edits and
      fourteen chances to leave one behind. */
.page-hero__bg,
.ed-hero__bg {
  filter: saturate(0.2) contrast(0.92) brightness(0.92);
}

/* ---- The scrim's numbers, per hero system ---------------------------
   The founder approved the home page as it stands and asked only the
   interior pages to come up: "reduce those opacity because it's very
   dark, make it little bit more lighter - no, just keep it a little bit
   dark, so that it will be good enough for people to understand. On the
   home it's good."

   That is two sets of numbers, and the obvious way to get them - a
   second ::before rule for .page-hero - would put scrim in two places
   and start the copy-paste this section exists to have ended. So the
   GRADIENT is still stated exactly once below, and what varies is seven
   numbers declared here on the hero element itself. .ed-hero (home,
   ferry, beer-wine-liquor) keeps the approved values; .page-hero
   inherits its own.

   The two ends move least. .page-hero centres its type, but both hero
   systems put their buttons at the bottom and .ed-hero puts its kicker
   at the top, so the top and foot stops are what protect real glyphs.
   The lift is taken through the middle, which is the part of the frame
   that is actually a photograph. */
.ed-hero,
.page-hero {
  --scrim-top: 0.80;
  --scrim-mid: 0.64;
  --scrim-low: 0.76;
  --scrim-foot: 0.94;
  --scrim-left: 0.58;
  --scrim-centre: 0.40;
  --scrim-right: 0.34;
}
.page-hero {
  --scrim-top: 0.70;
  --scrim-mid: 0.50;
  --scrim-low: 0.64;
  --scrim-foot: 0.90;
  --scrim-left: 0.48;
  --scrim-centre: 0.33;
  --scrim-right: 0.28;
}

/* Strong at the top where .page-hero centres its type and .ed-hero's
   kicker sits, strong again at the bottom where .ed-hero aligns its
   type to flex-end and every hero puts its buttons, and lightest
   through the middle so the photograph is still a photograph. The
   second layer leans left, because that is the reading edge, but it no
   longer falls away to 0.12 on the right: that is where the shelves and
   the canopy are, and it was the brightest, busiest part of the frame. */
.page-hero::before,
.ed-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 13, 20, var(--scrim-top)) 0%,
      rgba(12, 14, 17, var(--scrim-mid)) 42%,
      rgba(13, 15, 20, var(--scrim-low)) 72%,
      rgba(13, 15, 20, var(--scrim-foot)) 100%),
    linear-gradient(95deg,
      rgba(12, 14, 17, var(--scrim-left)) 0%,
      rgba(12, 14, 17, var(--scrim-centre)) 55%,
      rgba(12, 14, 17, var(--scrim-right)) 100%);
}

/* The ticker is a strip of enamel: dark field, gold hairline. */
.ed-ticker {
  background: var(--text-primary);
  border-top: 3px solid var(--sign-gold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ed-ticker span {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* The section index reads as a painted list, so its rows get the
   hairline treatment rather than card chrome. */
.ed-index__row { border-color: var(--border-glass); }
.ed-index__row:hover { background: rgba(20, 23, 26, 0.04); }
.ed-index__num { color: var(--sign-gold); font-family: var(--font-mono); }
.ed-index__title { color: var(--text-primary); }
.ed-index__desc { color: var(--text-secondary); }
.ed-index__arrow { color: var(--accent); }

.ed-trust { border-block: 1px solid var(--border-glass); }
.ed-trust__num { color: var(--accent); }
.ed-trust__label { color: var(--text-muted); }

/* A label pinned over a photograph, on its own rgba(13,15,20,0.7) scrim. It was
   Valero blue, which is a dark navy: 1.31:1 against that scrim. Overlay labels
   on this site are white, like the ones on the hero. */
.ed-split__tag { color: #fff; }

/* ---- 14. Second critique pass ----------------------------------- */

/* The ticker's edge mask faded the whole band to transparent, which
   showed the cream page through the dark enamel strip. Move the fade
   onto the moving text so the band itself stays solid. */
.ed-ticker {
  mask-image: none;
  -webkit-mask-image: none;
}
.ed-ticker__track {
  mask-image: linear-gradient(to right, transparent 0, black 4rem, black calc(100% - 4rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4rem, black calc(100% - 4rem), transparent 100%);
}

/* The sticky bottom bar is a dark board, so the outlined button inside
   it needs light edges. It was dark-on-dark and effectively invisible. */
.mobile-cta-bar {
  background: var(--text-primary);
  border-top: 3px solid var(--sign-gold);
}
.mobile-cta-bar .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.mobile-cta-bar .btn-secondary:hover { background: #fff; color: var(--text-primary); }

/* The kicker rule was not drawing because the older sheets set their
   own ::after on these elements. */
.ed-hero__kicker::after,
.page-hero__kicker::after,
.ed-eyebrow::after {
  content: '' !important;
  display: block !important;
  width: 2.5rem;
  height: 3px;
  background: var(--sign-gold);
  margin: 0.55rem 0 0;
  border: 0;
  position: static;
}

/* The card price, under the cash one.
   The station's street sign has two columns about ten cents apart and the site
   published one bare number for months. This line only appears once the owner
   has published both from /admin — js/prices.js hides it for a sheet read,
   because a sheet read cannot tell us which of the two columns it is. */
.price-board__credit {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* A live promotion, so it does not read as one of the three permanent cards. */
.promo-deal--offer {
  border-left: 3px solid var(--sign-gold);
}
.promo-deal--offer .promo-deal__eyebrow {
  color: var(--sign-red);
}

/* ---- The review ask ---------------------------------------------------
   Three placements, one constant: under the 4.9 tile on the homepage, and
   in both footers. Every one of them ships hidden and is only revealed by
   js/main.js once REVIEW_URL is set, so an unset link is an absent element
   rather than a dead one.

   Gold, because on this site gold is the sign's own colour and it is the
   only saturated thing on the page — which is exactly the weight an ask
   deserves: visible, and not shouting. */
.proof__cta {
  margin: var(--space-lg) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--band-ink, rgba(255, 255, 255, 0.86));
}
.proof__cta strong { font-weight: 600; }
.proof__cta a {
  color: var(--sign-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 179, 35, 0.45);
  padding-bottom: 1px;
  margin-left: 0.35rem;
}
.proof__cta a:hover { color: var(--sign-gold); border-bottom-color: var(--sign-gold); }

.footer-review { margin: var(--space-sm) 0 0; }
.footer-review a,
.footer-mobile__review a {
  color: var(--sign-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}
.footer-review a:hover,
.footer-mobile__review a:hover { color: var(--sign-gold); text-decoration: underline; }

.footer-mobile__review {
  text-align: center;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border-glass);
  width: 100%;
}