/* The Second Third of Tucson — Desert Race Poster
   Theme direction: Desert Race Poster
   A loud vintage screenprint event poster in cream, rust, teal and sunset gold — condensed all-caps type, stamped emblems, diagonal bands and a whisper of halftone grain, El Tour de Tucson energy. */

/* ============================================================
   DESERT RACE POSTER  —  t3
   Warm vintage screenprint event poster for a Tucson ride
   Palette: cream paper, rust/oxblood, desert teal, sunset gold, ink
   ============================================================ */

:root{
  --paper:#F3E9D2;
  --paper-2:#EBDCBB;      /* deeper cream, panels */
  --paper-3:#E2CFA6;      /* dusty edge */
  --rust:#A8331F;
  --rust-deep:#822415;
  --teal:#2E7B86;
  --teal-deep:#215860;
  --teal-bright:#63B9C6;  /* light teal for text on dark ink */
  --gold:#E6A020;
  --gold-deep:#C8811A;
  --gold-pale:#FFE08A;    /* pale sunset gold, highlight text on dark */
  --ink:#2A211A;
  --ink-soft:#4A3C30;
  --ink-70:rgba(42,33,26,.7);
  --line:#2A211A;

  --font-display:"Anton","Arial Narrow",sans-serif;
  --font-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Zilla Slab",Georgia,"Times New Roman",serif;

  --shadow-hard:6px 6px 0 var(--ink);
  --shadow-hard-sm:4px 4px 0 var(--ink);
  --maxw:1220px;

  /* halftone / riso grain, reused as a tileable overlay */
  --grain:radial-gradient(circle at 50% 50%, rgba(42,33,26,.10) 0.6px, transparent 1.1px);
}

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

html,body{margin:0;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;              /* clip horizontal overflow at the scroll root so position:sticky still works */
}
body{
  background-color:var(--paper);
  /* layered: warm vignette wash + halftone dots */
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 12% -10%, rgba(230,160,32,.18), transparent 55%),
    radial-gradient(120% 90% at 92% 4%, rgba(46,123,134,.14), transparent 50%);
  background-size:4px 4px, 100% 100%, 100% 100%;
  background-attachment:fixed, scroll, scroll;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.62;
  min-height:100vh;
}

img{max-width:100%;display:block;}

.page{
  max-width:100%;
}

/* ---- shared type helpers ------------------------------------ */
h1,h2{margin:0;text-wrap:balance;}
p{margin:0 0 1em;}
strong{color:var(--rust);font-weight:700;}

.eyebrow,.section-eyebrow,.hero-meta,.stat-label,.stat-sub,
.nav a,.nav-cta,.btn,.file-fmt,.file-size,.elev-axis span,
figcaption,.route-facts,.site-footer span,.brand-name{
  font-family:var(--font-cond);
}

/* stamped badge look, reused for eyebrows */
.eyebrow,.section-eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--rust);
  padding:.42em .95em .34em;
  border:2px solid var(--ink);
  box-shadow:var(--shadow-hard-sm);
  transform:rotate(-1.4deg);
  margin:0 0 1.1rem;
}
.section-eyebrow{
  background:var(--teal-deep);
  transform:rotate(-1deg);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:var(--ink);
  border-bottom:4px solid var(--gold);
  background-image:var(--grain);
  background-size:4px 4px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--paper);
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--gold);
  border-radius:50%;
  border:2px solid var(--paper);
  box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--gold);
}
.brand-name{
  font-weight:700;
  font-size:1.28rem;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--paper);
}
.brand-name em{
  font-style:normal;
  color:var(--gold);
}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(.6rem,2vw,1.5rem);
  flex-wrap:wrap;
}
.nav a{
  position:relative;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--paper);
  padding:.25em 0;
  transition:color .18s ease;
}
.nav a::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-2px;
  height:3px;background:var(--gold);
  transition:right .22s ease;
}
.nav a:hover{color:var(--gold);}
.nav a:hover::after{right:0;}

.nav-cta{
  color:var(--ink)!important;
  background:var(--gold);
  padding:.5em 1.05em!important;
  border:2px solid var(--paper);
  box-shadow:3px 3px 0 var(--rust);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta::after{display:none;}
.nav-cta:hover{
  color:var(--ink)!important;
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--rust);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.78em 1.5em;
  border:2.5px solid var(--ink);
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow-hard-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}
.btn:active{
  transform:translate(1px,1px);
  box-shadow:2px 2px 0 var(--ink);
}
.btn-primary{
  background:var(--rust);
  color:var(--paper);
}
.btn-primary:hover{background:var(--rust-deep);}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-ghost:hover{
  background:var(--teal-deep);
  color:var(--paper);
  border-color:var(--ink);
}
.btn-lg{
  font-size:1.2rem;
  padding:1em 2rem;
  box-shadow:var(--shadow-hard);
}
.btn-lg:hover{box-shadow:9px 9px 0 var(--ink);}
.btn-file{
  width:100%;
  background:var(--teal-deep);   /* AA: cream on teal-deep ≈ 6.6:1 (plain teal was 4.05:1) */
  color:var(--paper);
  border-color:var(--ink);
  margin-top:1rem;
}
.btn-file:hover{background:var(--ink);}

/* ============================================================
   HERO  —  split poster: framed photo panel + text block
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem) clamp(2.5rem,6vw,5rem);
  overflow:hidden;
  background-color:var(--paper-2);
  /* diagonal poster bands + grain, behind everything */
  background-image:
    var(--grain),
    repeating-linear-gradient(135deg,
      rgba(168,51,31,.10) 0 34px,
      rgba(46,123,134,.10) 34px 68px);
  background-size:4px 4px, auto;
  border-bottom:5px solid var(--ink);
}
.hero::after{
  /* sunburst glow anchored to the corner */
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(70% 80% at 82% 20%, rgba(230,160,32,.30), transparent 60%);
  pointer-events:none;
}

.hero-media{
  position:relative;
  z-index:2;
}
.hero-img{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  background:var(--ink);
  /* thick printed photo border + hard offset */
  border:6px solid var(--paper);
  outline:3px solid var(--ink);
  box-shadow:12px 12px 0 var(--rust), 12px 12px 0 4px var(--ink);
}
/* poster photo links to the Facebook group */
.hero-media-link{display:block;text-decoration:none;color:inherit;}
.hero-img{transition:transform .15s ease, box-shadow .15s ease;}
.hero-media-link:hover .hero-img{
  transform:translate(-2px,-2px);
  box-shadow:14px 14px 0 var(--rust), 14px 14px 0 4px var(--ink);
}

/* metric-century kicker under the headline — display face, smaller */
.hero-kicker{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.05rem,2vw,1.7rem);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--teal-deep);
  line-height:1.05;
  margin:0 0 1rem;
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:640px;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem,9vw,6.4rem);
  line-height:1;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 .18em;
  text-shadow:4px 4px 0 var(--gold), 7px 7px 0 var(--ink);
}
.hero-sub{
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  line-height:1.5;
  color:var(--ink);
  max-width:46ch;
  margin-bottom:1.6rem;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:1.5rem;
}
.hero-meta{
  display:inline-block;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  padding-top:.9rem;
  border-top:3px dashed var(--ink);
}

@media (min-width:900px){
  .hero{
    display:grid;
    /* cap + center the two columns so text and photo sit close, no dead gutter on wide screens */
    grid-template-columns:minmax(0,34rem) minmax(0,38rem);
    grid-template-areas:"text media";
    justify-content:center;
    align-items:center;
    gap:clamp(1.5rem,3vw,3rem);
    padding-block:clamp(3rem,6vw,6rem);
  }
  .hero-inner{grid-area:text;max-width:none;}
  .hero-media{grid-area:media;}
}

/* ============================================================
   STATS  —  ticket-stub row
   ============================================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  max-width:var(--maxw);
  margin:clamp(-2.2rem,-4vw,-3rem) auto 0;
  position:relative;
  z-index:5;
  padding:0 clamp(1rem,4vw,2.5rem);
}
.stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.15rem;
  padding:1.25rem 1.35rem;
  background:var(--ink);
  color:var(--paper);
  border-right:2px dashed rgba(243,233,210,.35);
  background-image:var(--grain);
  background-size:4px 4px;
}
.stat:first-child{border-left:5px solid var(--gold);}
.stat:last-child{border-right:5px solid var(--gold);}
.stat-num{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:baseline;
  gap:.15em;
}
.stat-unit{
  font-family:var(--font-cond);
  font-size:.5em;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--paper);
  text-transform:uppercase;
}
.stat-label{
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  margin-top:.35rem;
}
.stat-sub{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-bright);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr);margin-top:-1.5rem;}
  .stat:nth-child(2){border-right:5px solid var(--gold);}
  .stat:nth-child(3){border-left:5px solid var(--gold);}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:2px dashed rgba(243,233,210,.35);}
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 .6em;
}

/* ---- ROUTE -------------------------------------------------- */
.route{
  display:grid;
  gap:clamp(1.5rem,4vw,3rem);
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem);
  align-items:start;
}
@media (min-width:900px){
  .route{grid-template-columns:0.9fr 1.1fr;}
}
.route-copy{color:var(--ink);}
.route-copy p{color:var(--ink-soft);max-width:52ch;}
.route-note{
  font-style:italic;
  color:var(--rust);
  border-left:4px solid var(--gold);
  padding-left:1rem;
  margin-top:1.2rem;
}
.route-facts{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  border-top:3px solid var(--ink);
}
.route-facts li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.7rem .2rem;
  border-bottom:2px dotted var(--ink);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.route-facts span{
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
}

.route-map{
  margin:0;
  padding:1rem;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-hard);
}
.routemap{
  display:block;
  width:100%;
  height:auto;
  background:
    linear-gradient(0deg, rgba(46,123,134,.06), rgba(46,123,134,.06)),
    var(--paper-2);
}
.route-line{
  stroke:var(--rust);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(2px 2px 0 rgba(42,33,26,.35));
}
.route-start{
  fill:var(--teal);
  stroke:var(--ink);
  stroke-width:3;
  r:9px;
}
.route-end{
  fill:var(--gold);
  stroke:var(--ink);
  stroke-width:3;
  r:9px;
}
figcaption{
  margin-top:.85rem;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-70);
  text-align:center;
}

/* ---- ELEVATION --------------------------------------------- */
.elevation{
  background:var(--teal-deep);
  color:var(--paper);
  border-block:5px solid var(--ink);
  background-image:
    var(--grain),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,.06) 0 30px, transparent 30px 60px);
  background-size:4px 4px, auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem);
}
.elev-head{
  max-width:var(--maxw);
  margin:0 auto 1.8rem;
}
.elevation .section-title{color:var(--paper);}
.elevation .section-eyebrow{background:var(--gold);color:var(--ink);}
.elev-head p{color:rgba(243,233,210,.9);max-width:58ch;}
.elev-head strong{color:var(--gold-pale);}   /* AA: pale gold on teal-deep ≈ 6.2:1 (gold was 3.58:1) */

.elev-chart{
  max-width:var(--maxw);
  margin:0 auto;
  padding:1rem 1rem .5rem;
  background:rgba(15,44,48,.55);
  border:3px solid var(--ink);
  box-shadow:var(--shadow-hard-sm);
}
.elev{
  display:block;
  width:100%;
  height:clamp(200px,32vw,300px);
}
.elev-area{
  fill:rgba(230,160,32,.28);
}
.elev-line{
  fill:none;
  stroke:var(--gold);
  stroke-width:2.5;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.elev-axis{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.9rem;
  max-width:var(--maxw);
  margin-inline:auto;
}
.elev-axis span{
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.elev-axis span:nth-child(2){color:var(--gold-pale);}

/* ---- FILES -------------------------------------------------- */
.files{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem);
}
.files-head{max-width:60ch;margin-bottom:2rem;}
.files-head p{color:var(--ink-soft);}
.file-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.file-card{
  display:flex;
  flex-direction:column;
  padding:1.5rem 1.4rem 1.4rem;
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.file-card::before{
  /* punched ticket hole up top */
  content:"";
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:46px;height:8px;
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-top:none;
  border-radius:0 0 8px 8px;
}
.file-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--ink);
}
.file-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  padding-bottom:.75rem;
  margin-bottom:.9rem;
  border-bottom:2px dashed var(--ink);
}
.file-fmt{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:1;
  color:var(--rust);
  letter-spacing:.02em;
}
.file-size{
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-variant-numeric:tabular-nums;
}
.file-desc{
  color:var(--ink-soft);
  font-size:1rem;
  flex:1;
  margin:0;
}

/* ---- JOIN band --------------------------------------------- */
.join{
  background:var(--rust);
  color:var(--paper);
  border-top:5px solid var(--ink);
  background-image:
    var(--grain),
    radial-gradient(80% 120% at 50% -20%, rgba(230,160,32,.35), transparent 60%);
  background-size:4px 4px, auto;
}
.join-inner{
  max-width:820px;
  margin:0 auto;
  padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,2.5rem);
  text-align:center;
}
.join .section-eyebrow{background:var(--gold);color:var(--ink);transform:rotate(1deg);}
.join-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.3rem,6vw,4.2rem);
  line-height:.92;
  text-transform:uppercase;
  color:var(--paper);
  margin:0 0 .5em;
  text-shadow:3px 3px 0 var(--ink);
}
.join-inner p{
  color:rgba(243,233,210,.92);
  font-size:1.15rem;
  max-width:52ch;
  margin:0 auto 1.8rem;
}

/* ---- FOOTER ------------------------------------------------- */
.site-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem 1.5rem;
  padding:1.6rem clamp(1rem,4vw,2.5rem);
  background:var(--ink);
  color:var(--paper);
  border-top:4px solid var(--gold);
  background-image:var(--grain);
  background-size:4px 4px;
}
.site-footer span{
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(243,233,210,.85);
}
.site-footer span:first-child{color:var(--gold);font-weight:700;}
.site-footer a{
  color:var(--teal-bright);
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
.site-footer a:hover{color:var(--gold);}

/* ============================================================
   FOCUS / ACCESSIBILITY / MOTION
   ============================================================ */
/* two-tone focus ring: the ink outline clears 3:1 on cream surfaces,
   the gold halo stays visible against the dark ink header */
a:focus-visible,
.btn:focus-visible,
.nav a:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--gold);
  border-radius:2px;
}
.btn:focus-visible{outline-offset:4px; box-shadow:0 0 0 6px var(--gold), var(--shadow-hard-sm);}
main:focus{outline:none;}

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

/* ============================================================
   RESPONSIVE POLISH
   ============================================================ */
@media (max-width:640px){
  .site-header{justify-content:center;text-align:center;}
  .nav{width:100%;justify-content:center;}
  .hero-img{box-shadow:8px 8px 0 var(--rust),8px 8px 0 4px var(--ink);}
  .hero-title{text-shadow:3px 3px 0 var(--gold),5px 5px 0 var(--ink);}
  .btn{width:100%;}
  .hero-cta{flex-direction:column;}
  /* the header wraps to multiple rows on small screens — bigger offset so anchored titles clear it */
  :where(#top,#route,#map,#elevation,#files,#join){scroll-margin-top:150px;}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr;margin-top:-1.2rem;}
  .stat,.stat:nth-child(n){
    border-right:5px solid var(--gold);
    border-left:5px solid var(--gold);
    border-bottom:2px dashed rgba(243,233,210,.35);
  }
}

/* ============================================================
   ADDITIONS FOR THE LIVE SITE
   skip link · sticky-header offset · scrollspy · map embed
   ============================================================ */

/* keep sticky header from covering anchored section headings */
:where(#top,#route,#map,#elevation,#files,#join){scroll-margin-top:96px;}

/* skip link — visible only on keyboard focus */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--font-cond);font-weight:700;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);
  padding:.7em 1.2em;border:2px solid var(--ink);
  box-shadow:var(--shadow-hard-sm);
}
.skip-link:focus{left:.6rem;top:.6rem;}

/* scrollspy active nav link */
.nav a.is-current{color:var(--gold);}
.nav a.is-current::after{right:0;}

/* ---- MAP (RideWithGPS embed) ------------------------------- */
.map{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem);
}
.map-head{max-width:60ch;margin-bottom:2rem;}
.map-head p{color:var(--ink-soft);}
.map-frame{
  margin:0;
  padding:1rem;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-hard);
}
.map-embed{
  display:block;
  width:100%;
  height:clamp(360px,58vh,560px);
  border:0;
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper-3) 10px 20px);
}
.map-frame figcaption{
  margin-top:.9rem;
  text-align:left;
}
.map-frame figcaption a{
  color:var(--teal-deep);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.map-frame figcaption a:hover{color:var(--rust);}