/* Glamis Dune Guide
   ------------------------------------------------------------------
   Design system. Same family as the rest of the Dune Guide USA network
   (Barlow Condensed headings, Inter body, sand and sunset palette) but
   pitched at the Imperial Valley: harder light, deeper sky, more
   contrast than the coastal sites. Oceano is soft and grey-green.
   Glamis is glare.
   ------------------------------------------------------------------ */

:root{
  --ink:#1a1410;          /* deep desert shadow, body copy      */
  --deep:#0f0b07;         /* darkest, headings and footer       */
  --sand:#e8d5ad;         /* sun-bleached dune face             */
  --sand-deep:#cdb083;
  --cream:#f7f0e2;        /* page background                    */
  --white:#fffdf7;
  --sunset:#d2532a;       /* the accent. Imperial Valley dusk   */
  --sunset-hot:#b8401d;
  --ember:#e8873c;
  --sky:#2e4a5c;          /* deep desert sky, used sparingly    */
  --rule:rgba(26,20,16,.14);
  --shadow:0 18px 46px rgba(15,11,7,.18);
  --shadow-sm:0 8px 22px rgba(15,11,7,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  font-size:16.5px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sunset-hot)}

.shell{max-width:1120px;margin:0 auto;padding:0 22px}

/* ---- type ---- */
h1,h2,h3,h4{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;line-height:.98;margin:0 0 12px;color:var(--deep);letter-spacing:.3px}
h1{font-size:clamp(38px,7.4vw,74px)}
h2{font-size:clamp(27px,4.4vw,42px)}
h3{font-size:clamp(19px,2.4vw,23px)}
/* The italic serif drop is the network signature. Used once per heading,
   never twice, or it stops meaning anything. */
h1 i,h2 i{font-style:italic;text-transform:none;font-family:Georgia,'Times New Roman',serif;font-size:.84em;color:var(--sunset);letter-spacing:0}
.kicker,.section-label{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:2.4px;font-size:13.5px;font-weight:700;color:var(--sunset);margin:0 0 9px}
.section-label.dark{color:var(--sand-deep)}
.lede{font-size:17.5px;max-width:66ch;margin:0 0 26px}
p{margin:0 0 14px}

/* ---- header ---- */
header{background:var(--white);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;height:44px;width:auto}
@media(max-width:620px){.brand img{height:38px}}
nav ul{display:flex;gap:17px;list-style:none;margin:0;padding:0}
nav a{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.8px;color:var(--ink);text-decoration:none;opacity:.82}
nav a:hover{opacity:1;color:var(--sunset-hot)}
nav a[aria-current="page"]{opacity:1;color:var(--sunset-hot)}
nav a.nav-merch{opacity:1;background:var(--sunset-hot);color:var(--white);
  border-radius:999px;padding:6px 10px}
nav a.nav-merch:hover,nav a.nav-merch[aria-current="page"]{
  background:var(--deep);color:var(--white)}
.menu-toggle{display:none;background:none;border:0;font-size:25px;cursor:pointer;color:var(--deep)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.1px;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;line-height:1}
.btn-primary{background:var(--sunset-hot);color:var(--white)}
.btn-primary:hover{background:#913015}
.btn-ghost{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---- hero ---- */
.hero{position:relative;background:var(--deep);color:var(--white);padding:96px 0 104px;overflow:hidden}
/* Layered sand ridges. Pure CSS so there is no image to wait on and no
   image to get wrong before the photography exists. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:
    radial-gradient(120% 100% at 20% 100%, rgba(232,213,173,.20), transparent 60%),
    radial-gradient(130% 100% at 80% 100%, rgba(210,83,42,.22), transparent 62%);
  pointer-events:none}
/* Photographic heroes. The CSS gradient version above stays as the default,
   so a page without artwork still looks finished rather than broken. Where a
   photo exists it layers underneath, with a left-weighted scrim so the
   headline keeps its contrast whatever the image does. */
.hero-photo{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(15,11,7,.92) 0%, rgba(15,11,7,.78) 38%, rgba(15,11,7,.34) 70%, rgba(15,11,7,.22) 100%);
  pointer-events:none;z-index:1}
.hero-photo::after{opacity:.55}
.hero-home{background-image:url("../images/hero-glamis-home.webp")}
.hero-fuel{background-image:url("../images/hero-glamis-fuel.webp")}
.hero-permits{background-image:url("../images/hero-glamis-permits.webp")}
.hero-camping{background-image:url("../images/hero-glamis-camping.webp")}
.hero-safety{background-image:url("../images/hero-glamis-safety.webp")}
.hero-rules{background-image:url("../images/hero-glamis-rules.webp")}
.hero-first-timers{background-image:url("../images/hero-glamis-first-timers.webp")}
.hero-riding{background-image:url("../images/hero-glamis-riding.webp")}
.hero-maps{background-image:url("../images/hero-glamis-maps.webp")}
.hero-history{background-image:url("../images/hero-glamis-history.webp")}
.hero-planner{background-image:url("../images/hero-glamis-planner.webp")}
/* Safety is shot into a high midday sun and its left side is the brightest of
   the set, which is the point of the picture. It needs a heavier scrim than
   the others or the headline washes out. */
.hero-safety::before{background:linear-gradient(90deg, rgba(15,11,7,.94) 0%, rgba(15,11,7,.86) 42%, rgba(15,11,7,.46) 72%, rgba(15,11,7,.28) 100%)}
@media(max-width:620px){
  /* On a phone the text covers most of the width, so the scrim goes vertical
     or the headline sits on the bright part of the photo. */
  .hero-photo::before{background:linear-gradient(180deg, rgba(15,11,7,.86) 0%, rgba(15,11,7,.72) 60%, rgba(15,11,7,.62) 100%)}
}

.hero .shell{position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero h1 i{color:var(--ember)}
.hero .lede{color:rgba(255,255,255,.86);font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---- live console ---- */
.console{margin-top:-52px;position:relative;z-index:5;padding-bottom:54px}
.console-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:13px}
.status-cell{background:var(--white);border-radius:13px;box-shadow:var(--shadow);padding:16px 17px;text-decoration:none;color:inherit;display:block;border-top:4px solid var(--sand-deep);transition:transform .12s ease}
.status-cell:hover{transform:translateY(-2px)}
.status-cell .k{display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.2px;font-size:13.5px;opacity:.66;margin-bottom:6px}
.status-cell .k svg{width:17px;height:17px;fill:none;stroke:var(--sunset);stroke-width:1.7}
.status-cell .v{font-family:'Barlow Condensed',Inter,sans-serif;font-size:26px;line-height:1.04;color:var(--deep)}
.status-cell small{display:block;margin-top:5px;font-size:12.8px;opacity:.7;line-height:1.4}
.status-open{color:#3f6b43}
.status-caution{color:var(--sunset-hot)}
.status-closed{color:#a3301b}
.status-neutral{color:var(--deep)}
.status-cell.is-open{border-top-color:#4d7c4f}
.status-cell.is-caution{border-top-color:var(--ember)}
.status-cell.is-closed{border-top-color:var(--sunset-hot)}

/* ---- fuel comparison, the signature module ---- */
.fuel{background:var(--white);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.fuel-head{background:var(--deep);color:var(--white);padding:14px 21px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.fuel-head b{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.4px;font-size:16.5px}
.fuel-head span{font-size:12.5px;opacity:.68}
.fuel-sides{display:grid;grid-template-columns:1fr auto 1fr}
.fuel-side{padding:24px 20px;text-align:center}
.fuel-side.win{background:linear-gradient(180deg,rgba(210,83,42,.09),transparent)}
.fuel-side h3{font-size:15.5px;letter-spacing:1.2px;margin:0 0 5px;opacity:.72}
.fuel-price{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(34px,6vw,54px);line-height:1;margin:0;color:var(--deep)}
.fuel-side.win .fuel-price{color:var(--sunset)}
.fuel-grade{font-size:12.5px;opacity:.6;margin:2px 0 13px}
.fuel-diesel{font-size:14.5px;opacity:.85;border-top:1px solid var(--rule);padding-top:11px;margin:0}
.fuel-vs{display:flex;align-items:center;justify-content:center;padding:0 7px;font-family:'Barlow Condensed',Inter,sans-serif;font-size:13px;letter-spacing:1.6px;opacity:.38;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.fuel-verdict{background:var(--sand);padding:15px 21px;font-size:15.5px}
.fuel-verdict b{color:var(--sunset-hot)}
.fuel-fine{padding:11px 21px;font-size:12.5px;opacity:.62;border-top:1px solid var(--rule)}

/* ---- sections and cards ---- */
section{padding:62px 0}
section.tight{padding:44px 0}
.band{background:var(--sand)}
.band-dark{background:var(--deep);color:rgba(255,255,255,.9)}
.band-dark h2{color:var(--white)}
.band-dark h2 i{color:var(--ember)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:17px}
.card{background:var(--white);border-radius:13px;box-shadow:var(--shadow-sm);padding:22px 21px;text-decoration:none;color:inherit;display:block;border-left:4px solid var(--sand-deep)}
.card:hover{border-left-color:var(--sunset)}
.card h3{margin-bottom:7px}
.card p{font-size:14.8px;margin:0;opacity:.82}
.card .card-num{font-family:'Barlow Condensed',Inter,sans-serif;font-size:12.5px;letter-spacing:1.6px;color:var(--sunset);text-transform:uppercase;display:block;margin-bottom:6px}

/* ---- destination newsroom ---- */
.region-news-grid{display:grid;gap:18px;margin-top:26px}
.region-news-card{background:var(--white);border-radius:13px;box-shadow:var(--shadow-sm);padding:25px 24px;border-left:4px solid var(--sand-deep)}
.region-news-card.priority{border-left-color:var(--sunset)}
.region-news-card h2{font-size:clamp(25px,3vw,36px);margin:9px 0}
.region-news-card p{max-width:76ch}
.region-news-card>a{font-weight:700;color:var(--sunset)}
.region-news-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--sunset)}
.region-news-meta small{font:600 12px Inter,sans-serif;letter-spacing:.3px;color:rgba(26,20,16,.68);text-transform:none}

/* ---- editorial visuals ---- */
.editorial-figure{margin:30px 0 4px;max-width:960px}
.editorial-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:15px;box-shadow:var(--shadow);background:var(--sand-deep)}
.editorial-figure figcaption{font-size:12.5px;line-height:1.5;color:rgba(26,20,16,.65);margin:10px 3px 0;max-width:80ch}
.band-dark .editorial-figure figcaption{color:rgba(255,255,255,.62)}
.editorial-figure.diagram img{object-fit:contain;background:var(--white)}

/* ---- data tables (fees, fuel grades, anything tabular) ---- */
.gas-table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15.5px;background:var(--white);box-shadow:var(--shadow-sm);border-radius:11px;overflow:hidden;text-align:left}
.gas-table th,.gas-table td{padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.gas-table thead th{background:var(--deep);color:var(--white);font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:.9px;font-size:14px}
.gas-table tbody th{font-weight:600;color:var(--deep);white-space:nowrap}
.gas-table tbody td:nth-child(2){font-family:'Barlow Condensed',Inter,sans-serif;font-size:21px;color:var(--sunset-hot);white-space:nowrap}
.gas-table tbody tr:last-child th,.gas-table tbody tr:last-child td{border-bottom:0}
.gas-updated{font-size:13.5px;opacity:.66;max-width:70ch}
/* Numeric comparison tables (all grades against time) read better right
   aligned; the fee table above is prose and stays left. */
.gas-table.numeric th,.gas-table.numeric td{text-align:right}
.gas-table.numeric tbody th{text-align:left}
/* The places table on maps.html reuses this styling but carries a coordinate
   pair in the accent column instead of a short price. At 21px the coordinate
   runs off the right edge of a phone before you can finish reading it, and it
   is the one number on that page somebody actually needs in full. Scoped to
   .places so the fuel tables keep their large price. */
.gas-table.places tbody td:nth-child(2){font-size:16.5px;letter-spacing:.2px}
@media(max-width:640px){
  .gas-table{display:block;overflow-x:auto;white-space:nowrap}
  .gas-table.places th,.gas-table.places td{padding:11px 12px}
}

/* ---- interactive map ----
   The map is the page here, so it runs full width with controls above and
   the detail panel below, in normal flow. A permanent side panel squeezes
   the map on a phone, and phones are most of this audience. */
.map-toolbar{display:flex;flex-wrap:wrap;gap:13px 22px;align-items:center;justify-content:space-between;margin-bottom:12px}
.map-views{display:flex;flex-wrap:wrap;gap:7px}
.map-views button{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;
  padding:7px 15px;border-radius:999px;border:1.5px solid var(--rule);background:var(--white);color:var(--ink);cursor:pointer}
.map-views button:hover{border-color:var(--sunset)}
.map-views button.is-active{background:var(--deep);border-color:var(--deep);color:var(--white)}
.map-filters{display:flex;flex-wrap:wrap;gap:9px 16px}
.map-filters label{display:inline-flex;align-items:center;gap:7px;font-size:14px;cursor:pointer}
.map-filters .swatch{width:13px;height:13px;border-radius:3px;display:inline-block}
.map-filters .swatch-open{background:rgba(240,180,41,.45);border:1.5px solid #f0b429}
.map-filters .swatch-roads{background:#29343a;border:1.5px solid #29343a}

/* Road signs are source-backed intersection markers, not decorative map pins. */
.road-sign-icon{display:flex;align-items:center;gap:4px;width:142px!important;height:34px!important;padding:5px 7px;border:1px solid rgba(255,255,255,.92);border-radius:4px;background:#1f3038;box-shadow:0 2px 8px rgba(0,0,0,.35);color:#fff;font:700 10px/1.05 'Barlow Condensed',Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.road-sign-icon span{color:#ffc77a;font-size:17px;line-height:1}
.road-sign-icon b{font-weight:700}

#map{height:min(72vh,640px);width:100%;background:var(--sand-deep);border-radius:15px;box-shadow:var(--shadow)}

.map-detail{background:var(--white);border-radius:15px;box-shadow:var(--shadow);padding:18px 20px;margin-top:14px}
.detail-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.detail-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.detail-head b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:23px;line-height:1.1;color:var(--deep)}
.detail-head small{display:block;font-size:13px;opacity:.65;margin-top:2px}
.detail-close{margin-left:auto;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);opacity:.5}
.detail-close:hover{opacity:1}
.map-detail p{font-size:15px;line-height:1.55}
.detail-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 15px;margin:0 0 13px;font-size:14.5px}
.detail-facts dt{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.1px;font-size:12.5px;opacity:.6;padding-top:2px}
.detail-facts dd{margin:0}
.detail-notice{background:var(--sand);border-left:3px solid var(--sunset);padding:11px 14px;border-radius:0 8px 8px 0}
.detail-verified{opacity:.6;font-size:13px}
.detail-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.btn-sm{padding:8px 16px;font-size:14px;border-color:var(--rule);color:var(--ink)}
.btn-sm:hover{border-color:var(--sunset);background:var(--sand)}
.detail-copied{font-size:13.5px;color:var(--sunset);font-weight:600}
.detail-source{font-size:12.5px;opacity:.62;border-top:1px solid var(--rule);padding-top:10px;margin:0}

.map-index{margin-top:14px;background:var(--white);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}
.map-index summary{padding:14px 18px;cursor:pointer;font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;letter-spacing:1.3px;font-size:15px;color:var(--deep)}
.map-index #map-list{max-height:340px;overflow-y:auto;border-top:1px solid var(--rule)}
.map-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 18px;background:none;border:0;border-bottom:1px solid var(--rule);text-align:left;cursor:pointer;font:inherit;color:inherit}
.map-item:hover{background:var(--sand)}
.map-item .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.map-item b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:17px;letter-spacing:.3px;color:var(--deep)}
.map-item small{display:block;font-size:12.5px;opacity:.62}

.leaflet-popup-content-wrapper{border-radius:11px}
.leaflet-popup-content{margin:14px 16px;font-family:Inter,sans-serif}
.pop-name{font-family:'Barlow Condensed',Inter,sans-serif;font-size:19px;color:var(--deep);display:block}
.pop-cat{display:inline-block;font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.3px;font-size:11.5px;color:var(--sunset);margin-bottom:7px}
.leaflet-popup-content p{font-size:14px;line-height:1.5;margin:0 0 9px}
.pop-coords{display:block;font-size:12.5px;line-height:1.5;opacity:.72;border-top:1px solid var(--rule);padding-top:8px}
.pop-source{display:block;font-size:11.5px;opacity:.55;margin-top:5px;font-style:italic}
@media(max-width:820px){
  #map{height:58vh;min-height:360px}
  .map-toolbar{gap:10px 14px}
  .detail-facts{grid-template-columns:1fr;gap:2px}
  .detail-facts dt{padding-top:7px}
}

/* ---- numbered checklist ----
   For short do-this-in-order sequences in body copy. The design system had no
   list style at all, so anything with an <ol> fell back to browser defaults. */
.steps{counter-reset:step;list-style:none;margin:0 0 26px;padding:0;max-width:66ch}
.steps li{counter-increment:step;position:relative;padding-left:42px;margin-bottom:13px;font-size:16.5px;line-height:1.5}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;
  background:var(--sunset);color:var(--white);font-family:'Barlow Condensed',Inter,sans-serif;font-size:16px;
  display:flex;align-items:center;justify-content:center}

/* ---- footer ---- */
footer{background:var(--deep);color:rgba(255,255,255,.66);padding:52px 0 26px;font-size:14.5px;margin-top:auto}
footer h4{color:var(--white);font-size:18px;margin-bottom:12px}
footer a{color:rgba(255,255,255,.72);text-decoration:none}
footer a:hover{color:var(--ember)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;margin-bottom:34px}
/* The light lockup replaces the first column's heading, so it carries the
   same weight in the layout that the h4 did. */
.foot-logo{display:block;height:96px;width:auto;margin:0 0 18px;margin-left:-8px;max-width:100%;object-fit:contain}
/* The Glamis mark is a paddle-tire tread wrapped around a dune, with a whip
   flag on the crest. Below roughly 80px the tread reads as noise and the flag
   disappears, so the footer is where it gets shown at a legible size. */
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:7px}
.footer-sister-link{font-size:13.5px;opacity:.8;margin-bottom:20px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;opacity:.55}

/* ---- responsive ---- */
@media(max-width:1080px){
  nav ul{display:none}
  .menu-toggle{display:block}
  nav ul.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:14px 22px;gap:12px;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-sm)}
  nav a.nav-merch{display:inline-block}
  .nav{position:relative}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero{padding:66px 0 84px}
  section{padding:46px 0}
}
@media(max-width:620px){
  .fuel-sides{grid-template-columns:1fr}
  .fuel-vs{border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:7px}
  .foot-grid{grid-template-columns:1fr}
  .console{margin-top:-34px}
}

/* ==================================================================
   PARTNERS
   Paid placements rendered by static/partners.js. Nothing paid appears
   until a partner exists in the PARTNERS object; unsold slots run a
   sister-guide advert or a for-sale sign, never an empty hole.
   Ported from the network template and rebuilt on the Glamis tokens.
================================================================== */
.live-sponsor{max-width:1180px;margin:0 auto;padding:0 22px 8px}
.lsp{display:flex;align-items:center;gap:15px;padding:15px 18px;text-decoration:none;border-radius:13px;
  background:var(--white);box-shadow:var(--shadow);color:inherit;transition:transform .12s ease}
.lsp:hover{transform:translateY(-2px)}
.lsp,.pt-sponsor{color:var(--ink)}
.lsp-visual-ad{padding:0;overflow:hidden;display:block}
.lsp-art{display:block;width:100%;height:auto;aspect-ratio:16/5;object-fit:contain}
.lsp-label{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  font-size:11.5px;font-weight:700;color:var(--sunset);white-space:nowrap}
.lsp-body b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:21px;color:var(--deep);line-height:1.1}
.lsp-body span{display:block;font-size:13px;opacity:.72;margin-top:2px}

.section-sponsor-slot{padding-top:26px;padding-bottom:2px}
.pt-sponsor{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:13px;text-decoration:none;
  background:var(--white);box-shadow:var(--shadow);color:inherit;transition:transform .12s ease}
.pt-sponsor:hover{transform:translateY(-2px)}
.pt-sponsor-label{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  font-size:11px;font-weight:700;color:var(--sunset);white-space:nowrap}
.pt-sponsor-body{flex:1 1 auto}
.pt-sponsor-body b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:20px;color:var(--deep);line-height:1.1}
.pt-sponsor-body span{display:block;font-size:13px;opacity:.72;margin-top:2px}
.pt-sponsor-go{color:var(--sunset);font-size:20px;flex:0 0 auto}

.pt-mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
  font-family:'Barlow Condensed',Inter,sans-serif;font-size:17px;letter-spacing:.5px;color:var(--white);flex:0 0 auto}
.pt-mark-b{background:var(--sky)}
.pt-mark-c{background:var(--sunset)}
.pt-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto}

.pt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
/* Explicit ink rather than inherit: these cards also run inside band-dark
   sections, where inherit would give white text on a sand card. */
.pt-card{display:block;padding:18px 20px;border-radius:13px;background:var(--white);box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);transition:transform .12s ease}
.pt-card:hover{transform:translateY(-2px)}
.pt-card b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:22px;color:var(--deep);line-height:1.1;margin-bottom:5px}
.pt-tier{display:block;font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  font-size:11px;font-weight:700;color:var(--sunset);margin-bottom:6px}
.pt-blurb{display:block;font-size:14px;line-height:1.5;opacity:.78}
.pt-phone{display:block;margin-top:8px;font-size:14.5px;font-weight:600;color:var(--deep)}
.pt-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;margin-bottom:11px}
.pt-avail{border:1.5px dashed var(--sand-deep);background:var(--sand)}
.pt-price{display:block;margin-top:9px;font-family:'Barlow Condensed',Inter,sans-serif;font-size:19px;color:var(--deep)}
.pt-price em{display:block;font-style:normal;font-size:12.5px;opacity:.7;letter-spacing:0}
.pt-cta{display:block;margin-top:9px;font-size:14px;font-weight:600;color:var(--sunset)}
.pt-slot-title{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:1.5px;
  font-size:15px;color:var(--deep);margin:0 0 11px}

/* Network house ads share one 1600x500 creative contract. The artwork is
   never cropped; the tier and availability message sit quietly below it. */
.pt-house-creative{display:block;width:100%;margin:0;overflow:hidden;border-radius:13px;background:var(--deep);
  box-shadow:var(--shadow);text-decoration:none;transition:transform .12s ease}
.pt-house-creative:hover{transform:translateY(-2px)}
.pt-house-art{display:block;width:100%;height:auto;aspect-ratio:16/5;object-fit:contain}
.pt-cards.pt-house-slot{display:block}
.pt-tier-link{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 18px;padding:10px 2px;
  border:0;border-top:1px solid var(--rule);background:transparent;color:var(--ink);box-shadow:none;text-decoration:none}
.pt-tier-link:hover{border-top-color:var(--sunset)}
.pt-tier-link span{min-width:0}
.pt-tier-link b,.pt-tier-link small{display:block;overflow-wrap:anywhere}
.pt-tier-link b{font-family:'Barlow Condensed',Inter,sans-serif;font-size:13px;line-height:1.35;letter-spacing:1.2px;text-transform:uppercase;color:var(--deep)}
.pt-tier-link small{margin-top:2px;font-size:11px;opacity:.68}
.pt-tier-link strong{font-family:'Barlow Condensed',Inter,sans-serif;font-size:12px;line-height:1.3;letter-spacing:.8px;
  text-transform:uppercase;color:var(--sunset);border-bottom:1px solid currentColor;white-space:nowrap}

@media(max-width:620px){
  .lsp,.pt-sponsor{flex-wrap:wrap;gap:11px}
  .pt-sponsor-go{display:none}
  .pt-tier-link{align-items:flex-start;flex-direction:column;gap:7px}
  .pt-tier-link strong{white-space:normal}
}

/* ---- 404 -------------------------------------------------------------------
   The one page with nothing else competing for attention, so the mark gets
   shown at a size where the paddle-tire tread and the whip flag actually read. */
.notfound{max-width:820px;padding:18px 0 8px}
.notfound-mark{display:block;width:min(420px,78vw);height:auto;margin:0 0 26px}
.notfound h1{margin-bottom:6px}
.notfound .lede{max-width:620px}
.notfound-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:30px 0 22px}
.notfound-links a{display:block;background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--sunset);border-radius:10px;padding:15px 17px;transition:transform .18s ease,border-color .18s ease}
.notfound-links a:hover{transform:translateY(-2px);border-left-color:var(--deep)}
.notfound-links b{display:block;font-family:'Barlow Condensed',Inter,sans-serif;font-size:20px;color:var(--deep)}
.notfound-links span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--ink);opacity:.72}
.notfound-note{font-size:13.5px;color:var(--ink);opacity:.72}
@media(max-width:600px){.notfound-mark{width:min(320px,84vw);margin-bottom:20px}}

/* Trip fuel calculator. Form is real HTML so the tool reads without JS; only
   the result block is hidden, because it is output. */
.fuel-calc{max-width:1200px;margin:0 auto;padding:60px 24px 0}
.fuel-calc h2{margin:8px 0 12px}
.fuel-calc>p{max-width:68ch;margin:0 0 22px}
.fuel-calc form{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(26,20,16,.18);border:1px solid rgba(26,20,16,.18)}
.fuel-calc label{background:#fffdf7;padding:18px 20px;display:grid;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sunset)}
.fuel-calc input{font-size:1.2rem;padding:10px 12px;border:1px solid rgba(26,20,16,.18);background:#fffdf7;width:100%}
.fuel-calc button{grid-column:1/-1;background:var(--sunset);color:#fff;border:0;padding:18px 20px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.fuel-calc button:hover{filter:brightness(1.06)}
.fuel-hint{font-size:.76rem;margin:12px 0 0;opacity:.75}
.fuel-result{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(26,20,16,.18);border:1px solid rgba(26,20,16,.18);border-top:0}
.fuel-result>div{background:#fffdf7;padding:18px 20px}
.fuel-result span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sunset)}
.fuel-result b{font-size:1.5rem;font-weight:400}
.fuel-result .fuel-total{background:var(--sunset-hot)}
.fuel-result .fuel-total span,.fuel-result .fuel-total b{color:#fff}
@media(max-width:900px){.fuel-calc form,.fuel-result{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fuel-calc{padding:45px 18px 0}.fuel-calc form,.fuel-result{grid-template-columns:1fr}}


/* Glamis at a glance. The size facts existed only inside the history page,
   while "how big is glamis" and "what is glamis" were drawing impressions and
   landing nowhere. Same facts, put where the question gets asked. */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 26px 0 18px;
}

.glance {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}

.glance b {
  display: block;
  font-size: 1.16rem;
  margin-bottom: 6px;
  color: var(--deep);
}

.glance span { display: block; line-height: 1.6; color: var(--ink); }

.glance-note { font-size: .92rem; color: var(--ink); opacity: .85; margin: 0; }

.partner-directory{padding-top:clamp(44px,5vw,76px);padding-bottom:clamp(32px,4vw,64px)}

/* ---- Fringe, the Glamis mascot ---------------------------------------- */

.hero-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:28px;align-items:center}
.hero-home-copy{min-width:0}
.hero-wordmark{display:block;width:100%;max-width:430px;height:auto;margin:0 0 18px}

.hero-fringe{position:relative;display:block;text-decoration:none;justify-self:end;
  width:100%;max-width:460px}
.hero-fringe img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 30px rgba(15,11,7,.45))}
.hero-fringe span{position:absolute;right:6px;bottom:-4px;
  font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;
  letter-spacing:2px;font-size:13.5px;font-weight:700;
  color:var(--deep);background:var(--sand);border-radius:999px;padding:7px 15px;
  box-shadow:0 6px 16px rgba(15,11,7,.35)}
.hero-fringe-guide span{bottom:88px}
.hero-fringe:hover span,.hero-fringe:focus-visible span{background:var(--white)}
.hero-fringe:focus-visible{outline:3px solid var(--sand);outline-offset:6px}

@media(max-width:900px){
  .hero-home-grid{grid-template-columns:1fr;gap:18px}
  .hero-fringe{justify-self:start;max-width:340px;order:2;margin-top:6px}
}
@media(max-width:600px){
  .hero-wordmark{max-width:345px}
  .hero-fringe{max-width:280px}
}

/* ---- Meet Fringe and the store --------------------------------------- */

.fringe-hero{padding:64px 0 72px}
.fringe-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  gap:34px;align-items:center}
.fringe-hero h1{margin:0 0 6px}
.fringe-tagline{font-family:'Barlow Condensed',Inter,sans-serif;font-style:italic;
  font-size:26px;font-weight:600;color:var(--ember);margin:0 0 18px}
.fringe-hero .lede{color:rgba(255,255,255,.86)}
.fringe-hero-art{display:block;width:100%;height:auto;justify-self:end;
  max-width:400px;filter:drop-shadow(0 18px 34px rgba(15,11,7,.5))}

.fringe-intro p{max-width:66ch;font-size:17.5px;margin:0 0 18px}
.fringe-intro p:last-child{margin-bottom:0}

/* The homepage keeps the original illustrated Dune Guide in the hero, then
   introduces the true little desert local in a separate cinematic story. */
.fringe-home-story{background:var(--sand);border-bottom:1px solid var(--rule)}
.fringe-home-story-grid{display:grid;grid-template-columns:minmax(280px,42%) minmax(0,1fr);
  gap:clamp(32px,5vw,70px);align-items:center}
.fringe-home-portrait{margin:0;position:relative}
.fringe-home-portrait img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;
  box-shadow:var(--shadow)}
.fringe-home-portrait figcaption{position:absolute;left:14px;right:14px;bottom:14px;
  padding:10px 12px;border-radius:9px;background:rgba(15,11,7,.82);color:var(--white);
  font-size:12.5px;line-height:1.4}
.fringe-home-copy .lede{margin-bottom:16px}
.fringe-home-copy>p:not(.section-label):not(.lede){max-width:65ch}
.fringe-home-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin:24px 0}
.fringe-home-facts span{display:block;padding:13px 12px;border-top:3px solid var(--sunset);
  background:rgba(255,253,247,.52);font-size:12.5px;line-height:1.4}
.fringe-home-facts b{display:block;color:var(--deep);font-size:13.5px;margin-bottom:3px}

/* Meet Fringe is a story, not a loose image gallery. Each scene has one job:
   establish the species, show its native movement, then show safe riding. */
.fringe-origin{background:var(--cream)}
.fringe-origin-grid{display:grid;grid-template-columns:minmax(260px,38%) minmax(0,1fr);
  gap:clamp(30px,6vw,80px);align-items:start}
.fringe-origin-grid p:last-child{margin-bottom:0}
.fringe-motion{background:var(--sand)}
.fringe-motion-grid,.fringe-rig-grid{display:grid;
  grid-template-columns:minmax(0,56%) minmax(280px,1fr);gap:clamp(28px,5vw,62px);
  align-items:center}
.fringe-motion figure,.fringe-rig figure{margin:0}
.fringe-motion figure img,.fringe-rig figure img{width:100%;aspect-ratio:16/9;
  object-fit:cover;border-radius:17px;box-shadow:var(--shadow)}
.fringe-motion figcaption,.fringe-rig figcaption{font-size:12.5px;line-height:1.45;
  margin-top:9px;opacity:.72}
.fringe-rig{background:var(--deep);color:rgba(255,255,255,.86)}
.fringe-rig-grid{grid-template-columns:minmax(280px,39%) minmax(0,1fr)}
.fringe-rig h2{color:var(--white)}
.fringe-rig h2 i{color:var(--ember)}
.fringe-rig figure img{border:1px solid rgba(255,255,255,.13)}
.fringe-rig figcaption{color:rgba(255,255,255,.68)}

.fringe-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;margin-top:26px}
.fringe-gallery figure{margin:0;background:var(--white);border-radius:13px;
  box-shadow:var(--shadow-sm);padding:16px 16px 0;text-align:center}
.fringe-gallery img{display:block;width:100%;height:auto;max-height:230px;
  object-fit:contain;margin:0 auto}
.fringe-gallery figcaption{font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;letter-spacing:1.6px;font-size:13px;font-weight:700;
  color:var(--ink);padding:12px 0 15px}

.merch-item{display:block;background:var(--white);border-radius:13px;
  box-shadow:var(--shadow-sm);padding:16px 16px 0;text-align:center;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.merch-item img{display:block;width:100%;height:auto;max-height:230px;
  object-fit:contain;margin:0 auto}
.merch-item span{display:block;font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;letter-spacing:1.6px;font-size:13px;font-weight:700;
  color:var(--ink);padding:12px 0 15px}
.merch-item:hover,.merch-item:focus-visible{transform:translateY(-3px);
  box-shadow:var(--shadow)}
.merch-item:focus-visible{outline:3px solid var(--sunset);outline-offset:3px}
.merch-gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.merch-gallery .merch-item{padding:13px 13px 0}
.merch-gallery .merch-item img{aspect-ratio:1;max-height:none;object-fit:contain;
  background:#f4f1ea;border-radius:9px}
.merch-gallery .merch-item span{display:flex;align-items:center;justify-content:center;
  min-height:54px;line-height:1.2;padding:10px 4px 12px}
.merch-shelf{background:rgba(205,176,131,.22);border-block:1px solid var(--rule)}

/* The featured drop is deliberately darker than the catalog shelves so the
   coordinated front, back and sleeve system reads as one collection. */
.merch-drop{position:relative;overflow:hidden;background:var(--deep);color:var(--white)}
.merch-drop::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.3;background:
    radial-gradient(circle at 8% 22%,rgba(232,135,60,.45) 0 7px,transparent 8px),
    radial-gradient(circle at 13% 31%,rgba(247,240,226,.24) 0 13px,transparent 14px),
    radial-gradient(circle at 91% 18%,rgba(232,135,60,.38) 0 10px,transparent 11px),
    radial-gradient(circle at 86% 29%,rgba(247,240,226,.2) 0 16px,transparent 17px)}
.merch-drop .shell{position:relative}
.merch-drop h2,.merch-drop h3{color:var(--white)}
.merch-drop>.shell>.kicker{color:var(--ember)}
.merch-drop>.shell>.lede{color:rgba(255,253,247,.78);max-width:780px}
.merch-drop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin-top:30px}
.merch-drop-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid rgba(255,253,247,.14);border-radius:16px;background:var(--white);
  color:var(--ink);text-decoration:none;box-shadow:0 18px 38px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease}
.merch-drop-card>img{width:100%;aspect-ratio:1;object-fit:contain;background:#f4f1ea}
.merch-drop-card-feature{grid-column:span 2}
.merch-drop-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--sand-deep)}
.merch-drop-duo img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:#f4f1ea}
.merch-drop-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;
  gap:8px;padding:20px}
.merch-drop-copy strong{font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;font-size:25px;line-height:1;color:var(--deep)}
.merch-drop-copy>span:not(.merch-drop-label):not(.merch-drop-link){font-size:14px;
  line-height:1.45;color:rgba(26,20,16,.72)}
.merch-drop-label{font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;letter-spacing:1.7px;font-size:12px;font-weight:700;
  color:var(--sunset-hot)}
.merch-drop-link{margin-top:auto;font-family:'Barlow Condensed',Inter,sans-serif;
  text-transform:uppercase;letter-spacing:1.2px;font-weight:700;color:var(--sunset-hot)}
.merch-drop-card:hover,.merch-drop-card:focus-visible{transform:translateY(-4px);
  box-shadow:0 24px 54px rgba(0,0,0,.32)}
.merch-drop-card:focus-visible{outline:3px solid var(--ember);outline-offset:4px}
.merch-drop-cta{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-height:100%;padding:26px;border:1px solid rgba(255,253,247,.2);
  border-radius:16px;background:rgba(255,253,247,.07)}
.merch-drop-cta .kicker{color:var(--ember)}
.merch-drop-cta h3{font-size:34px}
.merch-drop-cta p:not(.kicker){color:rgba(255,253,247,.76);margin:0 0 20px}
.merch-drop-cta .btn{margin-top:auto}
@media(max-width:900px){
  .merch-drop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .merch-drop-card-feature{grid-column:span 2}
}
@media(max-width:620px){
  .merch-drop-grid{grid-template-columns:1fr}
  .merch-drop-card-feature{grid-column:auto}
  .merch-drop-copy{padding:17px}
  .merch-drop-cta{padding:22px}
}

.fringe-close{text-align:center}
.fringe-close .lede{margin-inline:auto}
.fringe-close .hero-actions{justify-content:center}
.fringe-close-mark{display:block;width:100%;max-width:270px;height:auto;
  margin:0 auto 14px}

@media(max-width:820px){
  .fringe-hero-grid{grid-template-columns:1fr;gap:22px}
  .fringe-hero-art{justify-self:center;max-width:300px;order:2}
}

/* Ghost buttons are drawn for the dark hero: white text, white border. On the
   light sand band that lands at 1.42:1 and all but disappears, so they invert
   there. Fixes the existing "Desert safety" button on weather.html too. */
.band .btn-ghost,.fringe-close .btn-ghost{
  border-color:rgba(26,20,16,.34);color:var(--ink)}
.band .btn-ghost:hover,.fringe-close .btn-ghost:hover{
  background:rgba(26,20,16,.07)}

/* Fringe spot art. Sits beside the copy on a wide screen, above it on a
   phone. Decorative, so it never carries meaning the text does not. */
.fringe-spot{float:right;width:min(36%,210px);height:auto;
  margin:0 0 14px 24px;filter:drop-shadow(0 12px 18px rgba(15,11,7,.2))}
.fringe-spot-cinematic{width:min(42%,260px);border-radius:16px;
  box-shadow:0 12px 22px rgba(15,11,7,.18);filter:none}
@media(max-width:640px){
  .fringe-spot{float:none;margin:0 auto 16px;width:160px}
  .fringe-spot-cinematic{width:220px}
}
.notfound-fringe{width:min(100%,330px);height:auto;margin:0 auto;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.36))}
.notfound-fringe-cinematic{border-radius:18px;box-shadow:0 18px 34px rgba(0,0,0,.38);
  filter:none}

/* Fringe's 404 keeps the joke visible, then gives people an obvious route
   back into planning instead of leaving them in a generic error template. */
.notfound-stage{background:var(--deep);color:rgba(255,255,255,.86);padding:clamp(54px,7vw,90px) 0}
.notfound-stage .notfound{max-width:1120px;padding:0}
.notfound-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,34%);
  gap:clamp(34px,7vw,92px);align-items:center}
.notfound-stage h1{color:var(--white);font-size:clamp(46px,7vw,78px)}
.notfound-stage h1 i{color:var(--ember)}
.notfound-stage .lede{color:rgba(255,255,255,.82)}
.notfound-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.notfound-stage .notfound-links{margin:44px 0 22px}
.notfound-stage .notfound-links a{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);border-left-color:var(--ember);color:var(--white)}
.notfound-stage .notfound-links a:hover{border-left-color:var(--sand)}
.notfound-stage .notfound-links b{color:var(--white)}
.notfound-stage .notfound-links span{color:rgba(255,255,255,.76);opacity:1}
.notfound-stage .notfound-note{color:rgba(255,255,255,.68);opacity:1}
.notfound-stage .notfound-note a{color:var(--sand)}

/* Camping page: Fringe takes the naturally empty half of the second card row.
   The illustration is decorative; the four self-sufficiency answers stay real
   HTML and keep their normal reading order. */
.self-sufficiency-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.fringe-campfire-lounge{display:block;grid-column:2/4;grid-row:2;
  align-self:center;justify-self:center;width:min(100%,690px);height:auto;
  margin:-18px 0 -30px;filter:drop-shadow(0 16px 22px rgba(85,55,22,.22))}
@media(max-width:820px){
  .self-sufficiency-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fringe-campfire-lounge{grid-column:1/-1;grid-row:auto;width:min(100%,640px);
    margin:4px auto -20px}
}
@media(max-width:560px){
  .self-sufficiency-cards{grid-template-columns:1fr}
  .fringe-campfire-lounge{width:min(100%,520px);margin:6px auto -12px}
}


/* Meet Fringe runs the photo hero like every other page. The badge art was
   drawn with charcoal lettering, so it lives in the light closing section
   above the wordmark rather than on the dark hero where its top line vanished. */
.hero-meet-fringe{background-image:url("../images/hero-glamis-meet-fringe.webp?v=2")}
.fringe-badge-art{display:block;width:100%;max-width:360px;height:auto;
  margin:0 auto 22px;border-radius:18px;box-shadow:var(--shadow-sm)}

/* The sunset kicker measures 4.43:1 against the hero scrim, just under AA for
   13.5px text. Ember is the tone the hero italics already use and clears it. */
.hero .kicker{color:var(--ember)}
/* Fringe stands tall in this plate and the default centre crop takes the top
   off his cap. Anchor the image to the top so his head stays in frame. */
.hero-meet-fringe{background-position:center top;
  /* the plate is 1600x900, so match its shape and Fringe is never cropped */
  min-height:clamp(430px,50vw,640px);display:flex;align-items:center}
.hero-meet-fringe > .shell{width:100%}
/* Keep the hero copy clear of Fringe on the right of the plate. */
.hero-meet-fringe .lede,.hero-meet-fringe h1,.hero-meet-fringe .fringe-tagline{max-width:38ch}
@media(max-width:620px){
  .hero-meet-fringe .lede{max-width:20ch}
}

@media(max-width:900px){
  .fringe-home-story-grid,.fringe-origin-grid,.fringe-motion-grid,.fringe-rig-grid,
  .notfound-hero{grid-template-columns:1fr}
  .fringe-home-portrait{max-width:540px;margin-inline:auto}
  .fringe-home-facts{grid-template-columns:1fr}
  .fringe-motion figure,.fringe-rig figure{max-width:760px}
  .notfound-art{grid-row:1;max-width:280px;margin-inline:auto}
  .notfound-copy{text-align:center}
  .notfound-stage .lede{margin-inline:auto}
  .notfound-actions{justify-content:center}
}