/*
Theme Name: Gold Country Classic Cars
Theme URI: https://goldcountryclassiccars.com
Author: Gold Country Classic Cars
Description: Bespoke mobile-first theme for Gold Country Classic Cars, Grass Valley CA. Built from the brand kit: mid-century showroom, cream and gold on espresso and oxblood. No framework, no page builder, near-zero JavaScript.
Version: 1.4.7
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: gccc
*/

/* ==========================================================================
   1. Fonts — self-hosted variable subsets, latin
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../../uploads/2026/11/archivo-normal.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("../../uploads/2026/11/bitter-normal.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("../../uploads/2026/11/bitter-italic.woff2") format("woff2-variations");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens — sampled from the logo artwork
   ========================================================================== */

:root {
  --ivory: #f7f1e3;
  --paper: #fffcf5;
  --espresso: #241b14;
  --saddle: #785a42;
  --gold: #fcd20c;
  --gold-rule: #c4a03a;
  --gold-deep: #7d6212;
  --logo-cream: #ded29c;
  --oxblood: #8c2f27;
  --oxblood-dark: #6e241e;
  --patina: #4f6156;
  --ink60: #5a4e44;
  --rule: #e0d5bf;

  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-btn: 4px;
  --radius-card: 6px;
  --shadow-warm: 0 2px 8px rgba(36, 27, 20, 0.08);

  --container: 1200px;
  --gutter: 24px;
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}

/* ==========================================================================
   3. Reset & base — mobile first
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* Anchor links must clear the sticky header, and the admin bar on top of it. */
@media screen and (min-width: 783px) {
  :root:has(.admin-bar) { scroll-padding-top: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-sans);
  font-size: 18px;          /* mobile floor */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body { font-size: 19px; }
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; border-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--espresso);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }

a { color: inherit; }

button { font: inherit; }

/* Visible 2px focus ring everywhere */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: var(--gold);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--paper);
  color: var(--espresso);
  padding: 16px 24px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   4. Type scale
   ========================================================================== */

.h1-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h2-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h3-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .h1-display { font-size: clamp(46px, 4.6vw, 64px); }
  .h2-display { font-size: 42px; }
  .h3-display { font-size: 26px; }
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}
.eyebrow-dark { color: var(--gold); }

.lead {
  font-size: 20px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .lead { font-size: 22px; }
}

.quote-italic {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

.nums {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .section { padding-block: 96px; }
}

.bg-ivory   { background-color: var(--ivory); }
.bg-paper   { background-color: var(--paper); }
.bg-saddle  { background-color: var(--saddle); color: var(--ivory); }
.bg-espresso{ background-color: var(--espresso); color: var(--ivory); }

.bg-saddle h2, .bg-saddle h3,
.bg-espresso h2, .bg-espresso h3 { color: var(--ivory); }

/* Subtle warm paper grain, 2.8% */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; }

.measure { max-width: 780px; }
.measure-sm { max-width: 720px; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 24px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--solid {
  background-color: var(--oxblood);
  color: #fff;
  border: 1px solid var(--oxblood);
}
.btn--solid:hover { background-color: var(--oxblood-dark); border-color: var(--oxblood-dark); }

.btn--outline {
  background-color: transparent;
  color: var(--espresso);
  border: 2px solid var(--espresso);
}
.btn--outline:hover { background-color: var(--espresso); color: var(--ivory); }

.btn--gold {
  background-color: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn--gold:hover { background-color: var(--gold); color: var(--espresso); }

.btn--lg { min-height: 60px; padding-inline: 32px; }
.btn--block { width: 100%; }

@media (min-width: 640px) {
  .btn--auto-sm { width: auto; }
}

.link-gold {
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.link-rule {
  text-decoration: underline;
  text-decoration-color: var(--gold-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ==========================================================================
   7. Vintage vocabulary
   ========================================================================== */

.starburst { flex-shrink: 0; color: var(--gold-rule); vertical-align: middle; }
.starburst--gold { color: var(--gold); }

.bullets { display: grid; gap: 16px; }
.bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bullets .starburst { margin-top: 0.45em; }

.stars { display: inline-flex; align-items: center; gap: 4px; }
.stars svg { color: var(--gold); flex-shrink: 0; }

/* ==========================================================================
   8. Utility bar
   ========================================================================== */

.utility {
  background-color: var(--espresso);
  border-bottom: 1px solid rgba(252, 210, 12, 0.6);
  color: var(--ivory);
  font-size: 18px;
}
.utility .container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 12px;
}
.utility__group { display: flex; flex-direction: column; gap: 4px; }
.utility a { text-decoration: none; }
.utility a:hover { color: var(--gold); }
.utility__item { display: inline-flex; align-items: center; gap: 8px; }
/* The phone number is the highest-value control on the page for this audience.
   Give it a real tap target even in the utility strip. */
.utility a.utility__item { min-height: 44px; }
@media (min-width: 640px) {
  .utility a.utility__item { min-height: 0; }
}
.utility__item svg { color: var(--gold); flex-shrink: 0; }
.utility__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--patina);
}
.utility__dot--closed { background-color: var(--gold-rule); }

@media (min-width: 640px) {
  .utility .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .utility__group { flex-direction: row; align-items: center; gap: 24px; }
}

/* ==========================================================================
   9. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  border-bottom: 1px solid rgba(196, 160, 58, 0.7);
  box-shadow: var(--shadow-warm);
}

/* Logged-in users get WordPress's admin bar, which is fixed to the top of the
   window. Without an offset the sticky header slides underneath it and the top
   of the logo is clipped. Below 783px the admin bar is absolutely positioned
   and scrolls away, so no offset is wanted there. */
@media screen and (min-width: 783px) {
  .admin-bar .site-header { top: 32px; }
}
.site-header__bar {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.site-header__logo { flex-shrink: 0; display: block; }
.site-header__logo img { height: 52px; width: auto; }

.nav-desktop, .header-actions { display: none; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 2px solid var(--espresso);
  border-radius: 4px;
  background: transparent;
  color: var(--espresso);
  cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav-mobile {
  border-top: 1px solid var(--rule);
  background-color: var(--paper);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile ul { padding-block: 8px; }
.nav-mobile li + li { border-top: 1px solid var(--rule); }
.nav-mobile a {
  display: flex;
  align-items: center;
  height: 56px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--espresso);
}
.nav-mobile a.is-current {
  border-left: 3px solid var(--oxblood);
  padding-left: 12px;
  font-weight: 700;
}
.nav-mobile a.is-sell {
  background-color: rgba(196, 160, 58, 0.1);
  border-radius: 4px;
  padding-inline: 12px;
}
.nav-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}

@media (min-width: 1024px) {
  .site-header__bar { min-height: 104px; padding-inline: 24px; }
  .site-header__logo img { height: 64px; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none; }
  .nav-desktop { display: block; }
  .header-actions { display: flex; align-items: center; gap: 12px; }

  .nav-desktop ul {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
  }
  .nav-desktop a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    text-decoration: none;
    color: var(--espresso);
    border-bottom: 2px solid transparent;
  }
  .nav-desktop a:hover { border-bottom-color: var(--gold-rule); }
  .nav-desktop a.is-current {
    border-bottom-color: var(--oxblood);
    font-weight: 700;
  }
  .nav-desktop a.is-sell {
    border: 1px solid var(--gold-rule);
    border-bottom-color: var(--gold-rule);
    background-color: rgba(196, 160, 58, 0.1);
    border-radius: 999px;
    padding: 8px 16px;
  }
  .nav-desktop a.is-sell:hover { background-color: rgba(196, 160, 58, 0.2); }

  .header-actions .btn { padding-inline: 12px; font-size: 17px; }
  .nav-compact-hide { display: none; }
}

@media (min-width: 1300px) {
  .site-header__bar { min-height: 112px; gap: 16px; }
  .site-header__logo img { height: 80px; }
  .nav-desktop ul { gap: 20px; font-size: 18px; }
  .nav-compact-hide { display: block; }
  .header-actions .btn { padding-inline: 16px; font-size: 18px; }
}

@media (min-width: 1600px) {
  .site-header__bar { gap: 24px; }
  .nav-desktop ul { gap: 24px; }
  .header-actions .btn { padding-inline: 24px; }
}

/* ==========================================================================
   10. Hero
   ========================================================================== */

.hero { background-color: var(--ivory); }
.hero__grid {
  max-width: 1800px;
  margin-inline: auto;
  display: grid;
}
.hero__media { position: relative; order: 1; }
.hero__media img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center;
}
.hero__body { order: 2; display: flex; justify-content: flex-end; }
.hero__inner {
  width: 100%;
  max-width: 620px;
  padding: 56px 24px;
}
.hero__seam, .hero__seam-star { display: none; }

@media (min-width: 640px) {
  .hero__media img { height: 460px; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 55fr 45fr; align-items: stretch; }
  .hero__media { order: 2; }
  .hero__media img { height: 100%; min-height: 620px; }
  .hero__body { order: 1; }
  .hero__inner { padding: 80px 48px; }
  .hero__seam {
    display: block;
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 1px;
    background-color: var(--gold-rule);
    pointer-events: none;
  }
  .hero__seam-star {
    display: block;
    position: absolute;
    left: 0; top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--ivory);
    border-radius: 50%;
    padding: 4px;
    line-height: 0;
  }
}

@media (min-width: 1280px) {
  .hero__inner { max-width: 740px; padding-inline: 64px; }
}

.hero h1 { margin-top: 20px; }
.hero__sub { margin-top: 24px; }

/* Search card */
.search-card {
  margin-top: 36px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 24px;
  box-shadow: var(--shadow-warm);
}
.search-card__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 16px;
}
.field { min-width: 0; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--espresso);
}
.field select {
  height: 56px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--saddle);
  border-radius: 4px;
  background-color: var(--paper);
  padding-inline: 16px;
  font-size: 18px;
  font-family: inherit;
  color: var(--espresso);
}
.search-card .btn { margin-top: 20px; width: 100%; }
@media (min-width: 768px) {
  .search-card .btn { width: auto; }
}

.hero__callnote { margin-top: 24px; font-size: 18px; }

.hero__split {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__split p { flex: 1 1 0; min-width: 0; font-size: 18px; }
.hero__split-label { display: none; }
.hero__split-rule { display: none; }

@media (min-width: 640px) {
  .hero__split { flex-direction: row; align-items: flex-start; gap: 20px; }
  .hero__split-label { display: inline; font-weight: 600; }
  .hero__split-rule {
    display: block;
    width: 1px;
    align-self: stretch;
    background-color: var(--gold-rule);
  }
}

/* ==========================================================================
   11. Trust bar
   ========================================================================== */

.trust { background-color: var(--saddle); }
.trust .container { padding-block: 40px; }
.trust ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 32px;
}
.trust li { padding-inline: 16px; text-align: center; color: var(--ivory); }
.trust__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ivory);
}
.trust__top .h2-display { color: var(--ivory); }
.trust__sub { margin-top: 8px; font-size: 18px; color: var(--ivory); }

/* The fifth tile is the only link in the row. It spans both mobile columns so
   four proof tiles still pair off evenly above it and the one tap target is
   full width, which matters more than symmetry on a phone. */
.trust__item--link { grid-column: 1 / -1; }
.trust__link {
  display: block;
  min-height: 44px;
  padding-block: 4px;
  color: inherit;
  text-decoration: none;
}
.trust__link .trust__sub { display: block; }
.trust__arrow { margin-left: 6px; color: var(--gold); }
.trust__link:hover .trust__top,
.trust__link:focus-visible .trust__top { color: var(--gold); }

@media (min-width: 1024px) {
  /* Five proof points again. Two columns below this, so the four structural
     tiles are always even rather than leaving an orphan. */
  .trust ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .trust li { padding-inline: 24px; }
  .trust li + li { border-left: 1px solid rgba(252, 210, 12, 0.5); }
  .trust__item--link { grid-column: auto; }
}

/* ==========================================================================
   12. Section headers & grids
   ========================================================================== */

.section__intro { margin-bottom: 48px; }
.section__intro h2 { margin-top: 16px; }
.section__intro p { margin-top: 16px; }
.section__intro--center { text-align: center; }
.section__intro--center p { margin-inline: auto; }

.grid-2 { display: grid; gap: 48px; }
.grid-3 { display: grid; gap: 32px; }

/* Grid and flex children default to min-width:auto, which lets a wide child
   (an aspect-ratio box, a long unbroken string) push a column past its
   container. Every layout child in this theme may shrink. */
.grid-2 > *,
.grid-3 > *,
.two-ways > *,
.steps > *,
.categories > *,
.owners .container > *,
.sergio-cta > *,
.trust ul > *,
.event-card > *,
.site-footer__cols > *,
.hero__split > * {
  min-width: 0;
}

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   13. Vehicle cards
   ========================================================================== */

.vehicle-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
}
/* Cards ask for a soft-cropped size and fit the photograph inside the 4:3
   tile instead of cropping it to fit. A 4:3 photograph - almost all of them -
   fills the tile exactly, so the grid is unchanged; a portrait or panoramic
   one sits on the espresso ground with the car still in it. */
.vehicle-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--espresso);
}
.vehicle-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.vehicle-card__year {
  align-self: flex-start;
  border: 1px solid var(--gold-rule);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--gold-deep);
}
.vehicle-card h3 { margin-top: 12px; }
.vehicle-card__price {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.vehicle-card__rule {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--rule);
  margin-block: 20px;
}
.vehicle-card__specs { flex: 1; font-size: 18px; color: var(--ink60); }
.vehicle-card .btn { margin-top: 24px; width: 100%; }

.center-cta { margin-top: 48px; text-align: center; }

/* ==========================================================================
   14. Category tiles
   ========================================================================== */

.categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.categories li:last-child { grid-column: span 2; }
.categories a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 120px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--ivory);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.categories a:hover { border-color: var(--gold-rule); background-color: var(--paper); }
.categories__count { font-size: 18px; color: var(--ink60); }

@media (min-width: 640px) {
  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .categories li:last-child { grid-column: span 1; }
}

.band {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: var(--radius-card);
  background-color: var(--saddle);
  padding: 32px 24px;
  text-align: center;
}
.band p { font-size: 22px; color: var(--ivory); }
@media (min-width: 768px) {
  .band {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-inline: 40px;
  }
}

/* ==========================================================================
   14b. Term index hubs (/inventory/make/, /type/, /era/)
   ========================================================================== */

.term-index { display: grid; gap: 32px; }
.term-index__group { padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.term-index__group:last-child { border-bottom: 0; padding-bottom: 0; }
.term-index__group > h2 a { text-decoration: none; color: var(--ink); }
.term-index__group > h2 a:hover { color: var(--oxblood); }
.term-index__models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 12px;
}
.term-index__models li { display: flex; align-items: center; }
.term-index__models li + li::before {
  content: "\00b7";
  color: var(--ink60);
  padding: 0 10px;
}
.term-index__models a {
  font-size: 18px;
  color: var(--ink60);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.term-index__models a:hover { color: var(--oxblood); border-bottom-color: var(--gold-rule); }

@media (min-width: 900px) {
  .term-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
}

/* ==========================================================================
   15. Two ways we help
   ========================================================================== */

.two-ways { margin-top: 56px; display: grid; gap: 56px; }
.two-ways img {
  margin-bottom: 28px;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
.two-ways p { margin-top: 16px; }
.two-ways .bullets { margin-top: 28px; }
.two-ways .btn { margin-top: 36px; width: 100%; }

@media (min-width: 640px) {
  .two-ways .btn { width: auto; }
}
@media (min-width: 1024px) {
  .two-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .two-ways__col--first { padding-right: 64px; border-right: 1px solid rgba(196, 160, 58, 0.6); }
  .two-ways__col--second { padding-left: 64px; }
}

/* ==========================================================================
   16. Meet the owners
   ========================================================================== */

.owners .container {
  display: grid;
  gap: 48px;
  align-items: center;
}
.owners img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--saddle);
}
.owners figcaption { margin-top: 12px; font-size: 18px; color: var(--ivory); }
.owners h2 { margin-top: 16px; }
.owners__prose {
  margin-top: 24px;
  display: grid;
  gap: 24px;
  font-size: 20px;
  line-height: 1.65;
  color: var(--ivory);
}
.owners__sign { margin-top: 32px; font-size: 24px; color: var(--gold); }
.owners__more {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
  font-size: 19px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 1024px) {
  .owners .container { grid-template-columns: minmax(0, 420px) 1fr; gap: 64px; }
}

/* ==========================================================================
   17. How selling works
   ========================================================================== */

.steps {
  margin-top: 56px;
  display: grid;
  gap: 40px;
}
.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  border: 2px solid var(--gold-rule);
  border-radius: 50%;
  background-color: var(--paper);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--espresso);
}
.step h3 { margin-top: 20px; }
.step p { margin-top: 12px; }

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

.sergio-cta {
  margin-top: 56px;
  display: grid;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--ivory);
  padding: 24px;
}
.sergio-cta img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
.sergio-cta h3 { margin-top: 16px; }
.sergio-cta p { margin-top: 16px; }
.sergio-cta .btn { margin-top: 28px; width: 100%; }

@media (min-width: 640px) {
  .sergio-cta { padding: 32px; }
  .sergio-cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .sergio-cta { grid-template-columns: minmax(0, 300px) 1fr; gap: 48px; }
  .sergio-cta img { height: auto; aspect-ratio: 2 / 3; max-width: 300px; }
}

/* ==========================================================================
   18. Out of state
   ========================================================================== */

.pullquote {
  margin-top: 40px;
  border-left: 4px solid var(--gold-rule);
  background-color: rgba(120, 90, 66, 0.12);
  padding: 24px;
}
.pullquote p {
  font-size: 22px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .pullquote p { font-size: 24px; }
}
.pullquote figcaption { margin-top: 16px; font-size: 18px; font-weight: 600; }

.side-image {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  object-fit: cover;
  background-color: var(--rule);
}

/* ==========================================================================
   19. Reviews
   ========================================================================== */

.reviews__badge {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reviews__score {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
.reviews__count { margin-top: 8px; font-size: 18px; color: var(--ink60); }

.review-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--ivory);
  padding: 28px;
}
.review-card__mark {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-rule);
}
.review-card blockquote {
  margin-top: 16px;
  flex: 1;
  font-size: 20px;
  line-height: 1.55;
}
.review-card__name { margin-top: 24px; font-size: 19px; font-weight: 600; }
.review-card__role { margin-top: 4px; font-size: 18px; color: var(--ink60); }
.review-card__src { margin-top: 8px; font-size: 18px; color: var(--ink60); }

@media (min-width: 1024px) {
  .reviews .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   20. Museum & events
   ========================================================================== */

.museum p + p { margin-top: 20px; }
.museum .bullets { margin-top: 32px; }
.museum figure {
  margin-top: 36px;
  border-left: 4px solid var(--gold-rule);
  background-color: rgba(120, 90, 66, 0.12);
  padding: 24px;
}
.museum figure blockquote { font-size: 22px; line-height: 1.55; }
.museum figure figcaption { margin-top: 16px; font-size: 18px; font-weight: 600; }
/* "Also on our walls" — the Neonetics neon and Craig Bowers strip at the foot
   of the museum section. Separated by a hairline rather than by a heading,
   because this must not add a level to the page outline. */
.walls {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.walls__grid {
  display: grid;
  gap: 40px;
  margin-top: 24px;
}

.walls__grid > * { min-width: 0; }

.walls__grid h3 { margin-top: 20px; }
.walls__grid p { margin-top: 12px; }

/* Square, not 4:3. The two subjects are a square canvas on a wall and a sign
   about as tall as it is wide; a landscape box cropped the top off both. */
.walls__photo,
.walls .img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}

.walls__cta { margin-top: 32px; }

@media (min-width: 900px) {
  .walls { margin-top: 64px; padding-top: 48px; }
  .walls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

.museum__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 24px;
  color: var(--espresso);
}
.event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px; height: 112px;
  flex-shrink: 0;
  border: 2px solid var(--gold-rule);
  border-radius: 4px;
}
.event-card__dow {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.event-card__day {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}
.event-card h3 { color: var(--espresso); }
.event-card__where { margin-top: 8px; font-size: 18px; color: var(--ink60); }
.badge-free {
  display: inline-block;
  margin-top: 12px;
  border: 1px solid var(--patina);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--patina);
}
.events .btn { margin-top: 32px; width: 100%; }

@media (min-width: 640px) {
  .event-card { flex-direction: row; align-items: center; padding: 28px; }
  .events .btn { width: auto; }
}

/* ==========================================================================
   21. Visit
   ========================================================================== */

.visit__card {
  margin-top: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 20px;
}
@media (min-width: 640px) { .visit__card { padding: 28px; } }

.visit__addr2 { margin-top: 4px; font-size: 19px; }
.hr { display: block; height: 1px; width: 100%; background-color: var(--rule); margin-block: 24px; }

.hours { width: 100%; text-align: left; font-size: 18px; border-collapse: collapse; }
.hours caption { margin-bottom: 12px; text-align: left; }
.hours th { padding: 4px 16px 4px 0; font-weight: 600; vertical-align: top; }
.hours td { padding-block: 4px; vertical-align: top; }
@media (min-width: 640px) { .hours { font-size: 19px; } }

.visit__contact { font-size: 19px; }
.visit__contact + .visit__contact { margin-top: 8px; word-break: break-word; }
.visit__card .btn { margin-top: 28px; width: 100%; }
@media (min-width: 640px) { .visit__card .btn { width: auto; } }

.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   22. Final CTA
   ========================================================================== */

.final { text-align: center; }
.final h2 { margin-top: 20px; }
.final p { margin-top: 20px; margin-inline: auto; max-width: 760px; color: var(--ivory); }
.final__actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.final__actions .btn { width: 100%; }
@media (min-width: 640px) {
  .final__actions { flex-direction: row; }
  .final__actions .btn { width: auto; }
}

/* ==========================================================================
   23. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--espresso);
  border-top: 1px solid rgba(252, 210, 12, 0.7);
  color: var(--ivory);
}
.site-footer .container { padding-block: 56px; }
.site-footer__logo { height: 72px; width: auto; }
.site-footer__tag { margin-top: 20px; font-size: 20px; color: var(--logo-cream); }
.site-footer__cols {
  margin-top: 48px;
  display: grid;
  gap: 40px;
}
.site-footer h2 { font-size: 14px; }
.site-footer ul { margin-top: 16px; display: grid; gap: 12px; font-size: 18px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer__legal {
  border-top: 1px solid rgba(252, 210, 12, 0.7);
  background-color: rgba(120, 90, 66, 0.35);
}
.site-footer__legal .container { padding-block: 20px; font-size: 18px; }
.site-footer__legal a { text-decoration: underline; }

@media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   24. Generic page / single templates
   ========================================================================== */

.entry { padding-block: 64px; }
.entry__content { max-width: 780px; }
.entry__content > * + * { margin-top: 24px; }
.entry__content h2 { margin-top: 48px; }
.entry__content a { color: var(--gold-deep); }

/* Labelled placeholder for photography not yet supplied */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: rgba(120, 90, 66, 0.08);
  color: var(--ink60);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__media .img-placeholder { height: 340px; aspect-ratio: auto; border-radius: 0; }
@media (min-width: 1024px) {
  .hero__media .img-placeholder { height: 100%; min-height: 620px; }
}


/* ==========================================================================
   25. Wordmark — stands in for the logo until the artwork is uploaded
   ========================================================================== */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.wordmark__top {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--espresso);
}
.wordmark__script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  margin-top: 4px;
  color: var(--saddle);
}
.site-footer .wordmark__top { color: var(--logo-cream); }
.site-footer .wordmark__script { color: var(--gold); }

@media (min-width: 1024px) {
  .wordmark__top { font-size: 28px; }
  .wordmark__script { font-size: 24px; }
}

/* A vehicle card with no photograph yet keeps the card's proportions */
.vehicle-card__nophoto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: rgba(120, 90, 66, 0.08);
  border-bottom: 1px dashed var(--gold-rule);
  color: var(--ink60);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   26. Sell Your Car
   ========================================================================== */

.sell-hero__grid { display: grid; gap: 48px; }
.sell-hero__method { margin-top: 20px; font-size: 19px; color: var(--ink60); }
.sell-hero__figure { order: -1; }
.sell-hero__portrait,
.sell-hero__figure .img-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
.figcap { margin-top: 12px; font-size: 18px; color: var(--ink60); }
.on-dark .figcap { color: var(--ivory); }

@media (min-width: 1024px) {
  .sell-hero__grid { grid-template-columns: 60fr 40fr; align-items: start; gap: 64px; }
  .sell-hero__figure { order: 0; }
}

/* The phone number, at display size, in its own panel */
.phone-panel {
  position: relative;
  margin-top: 36px;
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-warm);
}
.phone-panel__star { position: absolute; right: 20px; top: 20px; line-height: 0; }
.phone-panel__hours { margin-top: 16px; font-size: 19px; }
.phone-panel__note { display: inline-flex; align-items: center; min-height: 48px; font-size: 19px; }

.display-number {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-color: var(--gold-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.display-number--sm { font-size: 30px; }
/*
 * The smaller phone number measured 33px tall on a phone and 40px on desktop —
 * under the 44px tap target, on the one link the whole site is built to get
 * pressed. The type size is unchanged; only the box grows.
 */
.display-number {
  min-height: 44px;
  padding-block: 4px;
}
@media (min-width: 768px) {
  .display-number { font-size: 56px; }
  .display-number--sm { font-size: 36px; }
}

/* Trust strip — one wrapping row rather than the homepage's five columns */
.sell-trust { padding-block: 28px; }
.sell-trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  text-align: center;
  font-size: 19px;
  color: var(--ivory);
}
.sell-trust__item { display: inline-flex; align-items: center; gap: 10px; }

.center-cta__hours { margin-top: 16px; font-size: 18px; color: var(--ink60); }

/* Promises */
.promises { margin-top: 40px; display: grid; gap: 32px; }
.promises__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
}
.promises__title .starburst { margin-top: 0.35em; }
.promises__body { margin-top: 8px; padding-left: 30px; font-size: 19px; }
.promises__photo,
.grid-2 > figure .img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
@media (min-width: 768px) { .promises__title { font-size: 24px; } }

/* Sergio's note */
.sergio-note__grid { display: grid; gap: 40px; }
.sergio-note__portrait,
.sergio-note__grid > .img-placeholder {
  width: 200px;
  height: 200px;
  max-width: 100%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--gold-rule);
  border-radius: var(--radius-card);
  aspect-ratio: auto;
}
.sergio-note__quote { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--ivory); }
.sergio-note__sign { margin-top: 24px; font-size: 22px; color: var(--gold); }
.sergio-note__cta { margin-top: 32px; }
@media (min-width: 768px) { .sergio-note__quote { font-size: 24px; } }
@media (min-width: 1024px) { .sergio-note__grid { grid-template-columns: 200px 1fr; gap: 64px; } }

/* What we take + estate card */
.kinds__grid { display: grid; gap: 48px; }
.kinds__list { margin-top: 32px; }
@media (min-width: 640px) {
  .kinds__list .bullets { columns: 2; column-gap: 40px; }
  .kinds__list .bullets li { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .kinds__grid { grid-template-columns: 1fr minmax(0, 420px); gap: 64px; }
}
.estate-card,
.phone-aside {
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 28px;
  box-shadow: var(--shadow-warm);
}
.estate-card { min-width: 0; }

/* Contact */
.contact__grid { display: grid; gap: 48px; }
.contact__promise { margin-top: 16px; font-size: 18px; color: var(--ink60); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 60fr 40fr; align-items: start; gap: 64px; }
}
.phone-aside { min-width: 0; }

/* ==========================================================================
   27. HubSpot form embed — held to the brand kit
   HubSpot ships 14–16px text and its own font stack. This audience needs 19px
   and 56px inputs, so the embed is overridden rather than accepted.
   ========================================================================== */

.hs-embed { margin-top: 24px; }
.hs-embed--pending {
  border: 1px dashed var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: rgba(120, 90, 66, 0.06);
  padding: 28px;
  font-size: 19px;
}
.hs-embed__fallback { font-size: 19px; }

.hs-embed .hs-form,
.hs-embed form {
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--espresso);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--ivory);
  padding: 24px;
}
@media (min-width: 640px) { .hs-embed form { padding: 32px; } }

.hs-embed .hs-form-field { margin-bottom: 28px; }
.hs-embed .hs-form-field > label,
.hs-embed .hs-form-field > label span {
  display: block;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.4;
}
.hs-embed .hs-field-desc {
  margin-top: 4px;
  font-size: 18px;
  color: var(--ink60);
}
.hs-embed input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-embed select.hs-input {
  box-sizing: border-box;
  margin-top: 8px;
  width: 100%;
  min-height: 56px;
  padding-inline: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  background-color: var(--paper);
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--espresso);
}
.hs-embed textarea.hs-input {
  box-sizing: border-box;
  margin-top: 8px;
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  background-color: var(--paper);
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--espresso);
}
.hs-embed .hs-input:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.hs-embed .hs-button,
.hs-embed input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding-inline: 32px;
  border: 1px solid var(--oxblood);
  border-radius: var(--radius-btn);
  background-color: var(--oxblood);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
}
@media (min-width: 640px) {
  .hs-embed .hs-button,
  .hs-embed input[type="submit"] { width: auto; }
}
.hs-embed .hs-button:hover,
.hs-embed input[type="submit"]:hover { background-color: var(--oxblood-dark); }
.hs-embed .hs-error-msg,
.hs-embed .hs-error-msgs label {
  color: var(--oxblood);
  font-size: 18px;
  font-weight: 600;
}
.hs-embed .submitted-message {
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--ivory);
  padding: 28px;
  font-size: 19px;
}
.hs-embed .hs-richtext,
.hs-embed .legal-consent-container { font-size: 18px; color: var(--ink60); }

/* ==========================================================================
   28. Sticky mobile call bar
   ========================================================================== */

.btn--ivory {
  background-color: transparent;
  color: var(--ivory);
  border: 2px solid var(--ivory);
}
.btn--ivory:hover { background-color: var(--ivory); color: var(--espresso); }

.callbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  background-color: var(--oxblood);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar[hidden] { display: none !important; }

@media (max-width: 767px) {
  .callbar:not([hidden]) { display: flex; }
  /* Keep the bar from covering the last line of the footer */
  body:has(.callbar:not([hidden])) { padding-bottom: 60px; }
}

/* ==========================================================================
   29. About & Contact
   ========================================================================== */

/* Story sections: prose in one column, a period photograph in the other. */
.story__prose > h2,
.prose > h2 { margin-top: 16px; }
.story__prose > p,
.prose > p { margin-top: 20px; }

.story__aside {
  margin-top: 28px;
  font-size: 21px;
  color: var(--ink60);
}
.on-dark .story__aside { color: var(--ivory); }

.story__figure { align-self: start; }
.story__photo {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  object-fit: cover;
  background-color: var(--rule);
}

/* The vintage slots are square-ish, because a scanned snapshot rarely is 3:2.
   Holding the placeholder to the same ratio stops the layout shifting when the
   real photograph lands. */
.story .img-placeholder { aspect-ratio: 4 / 5; }

/* Markup is prose-first so a phone reads the story before the picture. On a
   wide screen the photograph takes the left column in alternating sections. */
@media (min-width: 1024px) {
  .story--reverse .story__figure { order: -1; }
  .story .container { align-items: start; }
}

.pullquote--strong p { font-weight: 600; }
.on-dark .pullquote { background-color: rgba(247, 243, 233, 0.07); }

/* .link-gold is gold-deep, which is built for a light ground — on saddle it
   measures about 1.2:1 and is effectively invisible. Ivory on saddle is 5.6:1,
   and keeping the underline gold holds the accent. (Bright --gold would only
   reach 4.3:1, under AA for body text, and this audience is largely 55+.) */
.on-dark a.link-gold {
  color: var(--ivory);
  text-decoration-color: var(--gold);
}

/* Tap targets. These are the site's standalone utility links — the phone number
   and email in the visit card, and a link that is the whole paragraph. Inline
   line-height alone gives them about 22px of height, which is half of what a
   thumb needs, and this audience is largely 55+. :only-child keeps the rule off
   links that sit mid-sentence, where extra height would break the text block. */
.visit__contact a,
.phone-panel__note > a:only-child,
p > a.link-gold:only-child,
p > a.link-rule:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The About hero sits the storefront photograph beside the headline. The
   storefront shot is a 2:3 portrait, which left unconstrained makes the hero
   about 900px tall with the headline floating in the middle of it. Cropping to
   4:5 matches the story photographs below and tightens the whole section.

   This was pushed to staging on 12 Sept but was missing from gccc-theme-v2.zip,
   which had been packaged minutes earlier. Restored here so the two lineages
   agree. */
.about-hero figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--rule);
}
.about-hero .img-placeholder { aspect-ratio: 4 / 5; }

@media (min-width: 1024px) {
  .about-hero .container { align-items: center; }
}

/* ==========================================================================
   30. About — the family photo strip
   --------------------------------------------------------------------------
   Version 2 of the About page collapsed six story sections into one, so the
   four vintage slots no longer have a section each to sit beside. They run as
   a strip beneath the story instead — a photo wall. Two across on a phone,
   four across once there is room; below that the captions crush.
   ========================================================================== */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
}

/* Three photographs rather than four. One per row on a phone, because a 4:3
   landscape shot at half a phone's width loses the faces in it. */
.photo-strip--three { grid-template-columns: minmax(0, 1fr); }
.photo-strip > * { min-width: 0; margin: 0; }

@media (min-width: 900px) {
  .photo-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 72px;
  }
  .photo-strip--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4:3 landscape. These are family snapshots from the seventies to the
   nineties, and film prints of that era are landscape almost without
   exception; cropping them tall threw away most of each picture. Reserved
   so a scan drops in without reflow. */
.photo-strip .story__photo,
.photo-strip .img-placeholder { aspect-ratio: 4 / 3; }

/* The placeholder label is uppercase and tracked; at strip width it needs to
   wrap rather than overflow its dashed box. */
.photo-strip .img-placeholder {
  padding: 12px;
  text-align: center;
  line-height: 1.4;
}


/* ==========================================================================
   31. Cars For Sale — filters, pagination, closing ask
   --------------------------------------------------------------------------
   The filter bar is a plain GET form, so it needs no JavaScript and every
   filtered view is a shareable URL. It reuses .field from the hero search card
   so the two controls look like the same object in two places.
   ========================================================================== */

/* ==========================================================================
   Inventory tabs - Cars For Sale / Sold Archive
   ==========================================================================
   Two scopes of the same grid, so the pair reads as one object: a rule with
   the live tab seated on it, not two loose buttons. A visitor should see where
   they are without reading the labels. The count carries the weight - the
   number beside Sold Archive is the whole argument for clicking it.
   ========================================================================== */

.inv-tabs {
  display: flex;
  gap: 4px;
  margin-top: 40px;
  border-bottom: 1px solid var(--rule);
}
.inv-tabs__tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink60);
  text-decoration: none;
  white-space: nowrap;
}
.inv-tabs__tab:hover,
.inv-tabs__tab:focus-visible {
  color: var(--espresso);
  background-color: var(--paper);
}
.inv-tabs__tab.is-current {
  border-color: var(--rule);
  border-bottom: 1px solid var(--paper);
  background-color: var(--paper);
  color: var(--espresso);
  box-shadow: inset 0 3px 0 0 var(--gold-rule);
}
.inv-tabs__count {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.inv-tabs + .inv-filters {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 519px) {
  .inv-tabs__tab { flex: 1; justify-content: center; padding: 14px 10px; font-size: 18px; }
}

/* A sold card. The stamp sits on the photo so the state is legible in a grid
   scan; the price line itself already reads SOLD, from gccc_vehicle_price(). */
.vehicle-card > a { position: relative; display: block; }
.vehicle-card__stamp {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 4px;
  background-color: var(--oxblood);
  color: var(--logo-cream);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.vehicle-card.is-sold img { filter: saturate(0.82); }
.vehicle-card.is-sold .vehicle-card__price {
  font-size: 24px;
  letter-spacing: 0.14em;
}

.inv-filters {
  margin-top: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 24px;
}
.inv-filters__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.inv-filters__row > * { min-width: 0; }

.inv-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.inv-filters__actions .btn { width: 100%; }

@media (min-width: 640px) {
  .inv-filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-filters__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  /* auto-fit rather than a fixed five columns: the body-style select is only
     rendered once some vehicle actually carries a body-style term, and a fixed
     count would leave an empty column reserved for it until then. */
  .inv-filters__row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* The grid follows the filter bar rather than the lead paragraph. */
.inv-filters + .grid-3,
.inv-filters + p + .grid-3 { margin-top: 48px; }

/* Pagination. the_posts_pagination() emits .navigation.pagination with
   .page-numbers children; none of it was styled before this page had more
   than one page of cars. */
.pagination { margin-top: 56px; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding-inline: 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background-color: var(--ivory);
  color: var(--espresso);
  font-weight: 600;
  text-decoration: none;
}
.pagination a.page-numbers:hover {
  border-color: var(--gold-rule);
  background-color: var(--paper);
}
.pagination .page-numbers.current {
  border-color: var(--saddle);
  background-color: var(--saddle);
  color: var(--ivory);
}
.pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  min-width: 0;
  padding-inline: 4px;
}

/* The closing ask, for anyone who reaches the end without finding the car. */
.inv-ask {
  margin-top: 56px;
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 28px 24px;
  max-width: 44em;
}
.inv-ask .btn { margin-top: 20px; }

/* ==========================================================================
   32. The car page — hero, rail, gallery, lightbox
   --------------------------------------------------------------------------
   Mobile-first like the rest: the photograph comes first and the rail follows
   it, and only at 1024px does the rail move alongside and become sticky. The
   gallery rules only ever apply to a car with more than one photograph, because
   the template does not print the markup otherwise.
   ========================================================================== */

.veh-back { font-size: 18px; }
.veh-back a { display: inline-block; min-height: 44px; line-height: 44px; }

.veh-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .veh-hero__grid {
    /* The rail is fixed-width so the price and the call button never reflow
       as the window changes; the photograph takes whatever is left. */
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
  }
}

.veh-media { min-width: 0; }

.veh-shot {
  margin: 0;
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--espresso);
  box-shadow: var(--shadow-warm);
}
/* The frame stays 4:3 so the page does not jump from car to car, but the
   photograph is fitted inside it rather than cropped to it. Most of the
   library is 4:3 and fills the frame exactly. The portrait and panoramic
   shots - roughly one image in nine - were losing their subject to a centre
   crop, which is how a Lincoln ended up as a photograph of a roof. They now
   sit on the espresso ground the frame already carried. */
.veh-shot__img,
.veh-shot .img-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* The sold marker sits on the photograph rather than replacing it, because the
   photograph is still why someone arrived on the page from search. */
.veh-sold {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  background-color: var(--oxblood);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
}

.veh-strip {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 96px;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.veh-strip__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.veh-strip__btn img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
}
.veh-strip__btn.is-current { border-color: var(--gold-rule); }
.veh-strip__btn:hover { border-color: var(--saddle); }

.veh-rail { min-width: 0; }
@media (min-width: 1024px) {
  .veh-rail__inner {
    position: sticky;
    /* Clears the sticky header — 88px min-height, and the same 96px the page
       already uses for scroll-padding-top — plus a little air. */
    top: 112px;
  }
}
.veh-rail__inner {
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 24px;
}
.veh-rail__title { margin-top: 8px; }
.veh-rail__price {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
  color: var(--gold-deep);
}
.veh-rail__price.is-sold { color: var(--oxblood); }
.veh-rail__terms {
  margin-top: 12px;
  font-size: 18px;
  color: var(--ink60);
}
.veh-rail__inner .btn { margin-top: 16px; }
.veh-rail__hours {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink60);
}

.veh-facts { margin: 0; }
.veh-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.veh-facts__row:last-child { border-bottom: 0; }
.veh-facts dt {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink60);
}
.veh-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.veh-glance {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 62em;
}
@media (min-width: 768px) {
  .veh-glance { grid-template-columns: 1fr 1fr; gap: 12px 40px; }
}
.veh-glance > li {
  position: relative;
  padding-left: 28px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}
.veh-glance > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: var(--gold-rule);
}

.veh-photos__note {
  margin-top: 16px;
  max-width: 54em;
}

.veh-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .veh-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .veh-grid { grid-template-columns: repeat(4, 1fr); }
}
.veh-grid__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background-color: var(--espresso);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.veh-grid__btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  transition: transform 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .veh-grid__btn img { transition: none; }
}
.veh-grid__btn:hover img { transform: scale(1.03); }

/* The lightbox. [hidden] does the hiding, so a script failure leaves it shut. */
.veh-box {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(36, 27, 20, 0.92);
  display: grid;
  place-items: center;
  padding: 16px;
}
.veh-box[hidden] { display: none; }
.veh-box__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.veh-box__img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-card);
}
.veh-box__nav,
.veh-box__close {
  position: absolute;
  border: 1px solid var(--gold-rule);
  border-radius: 50%;
  background-color: rgba(36, 27, 20, 0.7);
  color: var(--ivory);
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  font-size: 28px;
  line-height: 1;
}
.veh-box__prev { left: 8px; }
.veh-box__next { right: 8px; }
.veh-box__close { top: 8px; right: 8px; font-size: 24px; }
@media (min-width: 640px) {
  .veh-box__prev { left: 24px; }
  .veh-box__next { right: 24px; }
  .veh-box__close { top: 24px; right: 24px; }
}

.veh-video {
  margin-top: 24px;
  max-width: 900px;
}
.veh-video iframe,
.veh-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-card);
}

.veh-story { max-width: 62em; }
.veh-prose { margin-top: 8px; }

/* The closing note. Brown panel so it reads as an aside in someone's voice
   rather than as another paragraph of the write-up. */
.veh-note {
  margin-top: 40px;
  background-color: var(--saddle);
  color: var(--ivory);
  border-radius: var(--radius-card);
  padding: 28px 24px;
}
.veh-note__text {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .veh-note { padding: 32px; }
  .veh-note__text { font-size: 23px; }
}

.veh-more__note {
  margin-top: 32px;
  font-size: 18px;
  color: var(--ink60);
}
.veh-more__note a { margin-left: 6px; }

/* ==========================================================================
   33. Events — the page, the list, the club section, the gallery
   --------------------------------------------------------------------------
   Mobile-first: the hero photograph comes first and the copy follows, the
   event list is a stack that becomes a date-block-plus-body row at 640px, and
   the gallery goes one, two, then three across.
   ========================================================================== */

.ev-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ev-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
  }
  /*
   * The figure comes first in the markup so a phone sees the photograph
   * before the headline, matching the homepage hero. From 1024px the words
   * lead and the photograph sits to their right.
   */
  .ev-hero__copy { order: 1; }
  .ev-hero__figure { order: 2; }
}

.ev-hero__figure { margin: 0; min-width: 0; }
.ev-hero__img,
.ev-hero__figure .img-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm);
}
.ev-hero__actions,
.ev-empty__actions,
.ev-end__actions,
.ev-single__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---- the upcoming list ---- */

.ev-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.ev-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 24px;
}
@media (min-width: 640px) {
  .ev-item { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1024px) {
  /* The photo column is reserved only when there is a photograph to put in
     it, so an event without one does not sit next to a dead 260px. */
  .ev-item { gap: 28px; }
  .ev-item--photo { grid-template-columns: 88px minmax(0, 1fr) 260px; }
}

/* The date block. A calendar tear-off, which is why the month sits under the
   number rather than beside it. */
.ev-item__date {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-btn);
  background-color: var(--ivory);
  padding: 10px 8px 12px;
  width: 88px;
}
.ev-item__dow {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink60);
}
.ev-item__day {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--espresso);
}
.ev-item__mon {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.ev-item__body { min-width: 0; }
.ev-item__body h3 a { color: inherit; text-decoration-color: var(--gold-rule); }
.ev-item__when {
  margin-top: 8px;
  font-weight: 600;
}
.ev-item__where,
.ev-item__blurb {
  margin-top: 8px;
  color: var(--ink60);
}
.ev-item__blurb { max-width: 54em; }
.ev-item__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.ev-item__fb { min-height: 44px; line-height: 44px; }

.ev-item__photo { min-width: 0; }
.ev-item__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-btn);
}

.ev-empty {
  margin-top: 32px;
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  padding: 28px 24px;
  max-width: 46em;
}

/* ---- the two regulars ---- */

.ev-regulars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 36px;
}
@media (min-width: 900px) {
  .ev-regulars { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.ev-regular {
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background-color: var(--paper);
  overflow: hidden;
}
.ev-regular__figure { margin: 0; }
.ev-regular__img,
.ev-regular__figure .img-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ev-regular__body { padding: 24px; }
.ev-regular__note {
  margin-top: 16px;
  font-size: 18px;
  color: var(--ink60);
}
.ev-regular__note a { margin-inline: 4px; }

/* ---- bring your club ---- */

.ev-club__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 64em;
}
@media (min-width: 768px) {
  .ev-club__list { grid-template-columns: 1fr 1fr; gap: 14px 40px; }
}
.ev-club__list > li {
  position: relative;
  padding-left: 30px;
  color: var(--ivory);
  border-bottom: 1px solid rgba(222, 210, 156, 0.28);
  padding-bottom: 14px;
}
.ev-club__list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background-color: var(--gold);
}
.ev-club__ask {
  margin-top: 28px;
  max-width: 54em;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ivory);
}

/* ---- past events ---- */

.ev-past__note {
  margin-top: 16px;
  max-width: 52em;
  color: var(--ink60);
}
.ev-gallery {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .ev-gallery { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .ev-gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.ev-gallery__img,
.ev-gallery .img-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.ev-end { max-width: 62em; }
.ev-end__hours {
  margin-top: 20px;
  color: var(--ink60);
}

/* ---- one event ---- */

.ev-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .ev-single { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}
.ev-single__copy { min-width: 0; }
.ev-single__past {
  display: inline-block;
  margin-top: 16px;
  background-color: var(--oxblood);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
}
.ev-single__facts {
  margin-top: 24px;
  max-width: 34em;
}
.ev-single__prose { margin-top: 24px; }
.ev-single__club {
  margin-top: 24px;
  color: var(--ink60);
}
.ev-single__club a { margin-left: 4px; }
.ev-single__figure { margin: 0; min-width: 0; }
.ev-single__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm);
}

/* The homepage card when no date is set anywhere. */
.event-card--none {
  display: block;
  color: var(--ivory);
}

/* ------------------------------------------------------------------ */
/* 33. Car page — the photographs live in the hero beside the sticky  */
/*     rail (8 Oct 2026). DOM order is photograph → rail → library so  */
/*     a phone shows the price and call button before the thumbnails. */
/* ------------------------------------------------------------------ */
.veh-library { min-width: 0; }
.veh-library .veh-grid { margin-top: 0; }
@media (min-width: 1024px) {
  .veh-hero__grid {
    grid-template-areas:
      "shot rail"
      "library rail";
    grid-template-rows: auto 1fr;
    row-gap: 24px;
  }
  .veh-hero__grid > .veh-media { grid-area: shot; }
  .veh-hero__grid > .veh-rail { grid-area: rail; align-self: stretch; }
  .veh-hero__grid > .veh-library { grid-area: library; }
  .veh-library .veh-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* 10 Oct 2026 — rail readability: bigger year, hours in bold oxblood;
   and the appointment line in the phone aside. */
.veh-rail__year {
  font-size: 22px;
  letter-spacing: 0.08em;
}
.veh-rail__hours {
  font-size: 18px;
  font-weight: 700;
  color: var(--oxblood);
}
.veh-appt {
  margin-top: 16px;
  font-weight: 700;
  color: var(--oxblood);
}
.veh-appt a {
  color: var(--oxblood);
  text-decoration: underline;
  text-decoration-color: var(--gold-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}