:root{
  --ink:#1A1512;
  --red:#C23B2A;
  --sand:#F6EFE6;
  --gold:#E8A23A;
  --sage:#3F6B5A;
  --surface:#FFFBF5;
  --line:rgba(26,21,18,.18);
  --line-soft:rgba(26,21,18,.10);
  --muted:rgba(26,21,18,.66);
  --display:"Archivo Narrow","Arial Narrow",Helvetica,Arial,sans-serif;
  --text:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:1.25rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}

p{margin:0}

a{color:inherit}

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

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:0;background:var(--ink);color:var(--sand);padding:.6rem 1rem;z-index:60}

/* ---------- build notes (default hidden; see assets/build-notes.js) ---------- */

.bn{display:none}

[data-build-notes] .bn{display:block}

.bn-bar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:.8125rem;
  line-height:1.45;
  color:var(--muted);
}

.bn-bar .wrap{padding-top:.6rem;padding-bottom:.6rem}

.bn-bar strong{color:var(--ink);font-weight:600}

.bn-note{
  border-left:2px solid var(--gold);
  padding:.65rem 0 .65rem .9rem;
  margin-top:1.25rem;
  font-size:.875rem;
  line-height:1.5;
  color:var(--muted);
  max-width:56ch;
}

.bn-note strong{color:var(--ink);font-weight:600}

/* ---------- header ---------- */

.masthead{
  position:relative;
  z-index:50;
  background:var(--sand);
  border-top:3px solid var(--red);
  border-bottom:1px solid var(--line);
}

.masthead .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1rem;
  min-height:60px;
  padding-top:.5rem;
  padding-bottom:.5rem;
}

.wordmark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(16px,4.6vw,1.0625rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}

.wordmark .of{color:var(--red)}

.nav{
  order:3;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:0 1.1rem;
  padding-top:.1rem;
  margin-top:.25rem;
  border-top:1px solid var(--line-soft);
}

.nav a{
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  padding:.72rem 0;
  border-bottom:2px solid transparent;
}

.nav a:hover{color:var(--ink)}

.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}

.btn{
  display:inline-block;
  font-family:var(--text);
  font-weight:600;
  font-size:clamp(12px,3.3vw,.8125rem);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.65rem 1.15rem;
  border:1px solid var(--red);
  background:var(--red);
  color:var(--sand);
  cursor:pointer;
}

.btn:hover{background:var(--ink);border-color:var(--ink)}

.btn[disabled]{opacity:.5;cursor:default}
.btn[disabled]:hover{background:var(--red);border-color:var(--red)}

/* ---------- hero ---------- */

.hero{position:relative;isolation:isolate;background:var(--ink)}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  z-index:-2;
}

.hero-veil{position:absolute;inset:0;background:rgba(26,21,18,.56);z-index:-1}

.hero .wrap{padding-top:4.5rem;padding-bottom:3.25rem}

.hero h1{
  color:#FFFBF5;
  font-size:clamp(2.35rem,10vw,4.5rem);
  max-width:14ch;
  margin-bottom:1rem;
}

.hero p{
  color:rgba(255,251,245,.88);
  font-size:clamp(1rem,3.4vw,1.2rem);
  max-width:38ch;
}

.hero-rule{width:56px;height:3px;background:var(--gold);margin-bottom:1.5rem}

/* ---------- page head (interior pages) ---------- */

.pagehead{background:var(--surface);border-bottom:1px solid var(--line)}

.pagehead .wrap{padding-top:2.75rem;padding-bottom:2.75rem}

.pagehead h1{font-size:clamp(2rem,7.5vw,3.25rem);max-width:18ch;margin-bottom:.85rem}

.pagehead p{color:var(--muted);font-size:1.0625rem;max-width:52ch}

/* ---------- generic section ---------- */

section{border-bottom:1px solid var(--line-soft)}

.section-pad{padding-top:3.25rem;padding-bottom:3.25rem}

.eyebrow{
  font-family:var(--text);
  font-weight:600;
  font-size:clamp(11px,3.1vw,.75rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.25rem;
}

h2{font-size:clamp(1.6rem,6vw,2.35rem);margin-bottom:1.75rem}

.lede{font-size:1.0625rem;max-width:56ch;margin-bottom:1.5rem}

.prose p{max-width:60ch;margin-bottom:1rem}

.prose p:last-child{margin-bottom:0}

/* stacked on mobile, side by side from lg; the gap has to exist at both sizes */
.two-col{display:grid;gap:2.75rem;align-items:start}

/* ---------- how it works ---------- */

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem}

.step-n{
  font-family:var(--display);
  font-weight:700;
  font-size:2.5rem;
  line-height:1;
  color:var(--gold);
  display:block;
  margin-bottom:.4rem;
}

.step h3{font-size:1.25rem;margin-bottom:.4rem}

.step p{color:var(--muted);max-width:42ch}

.step .keep{color:var(--sage);font-weight:600}

.note{
  margin-top:2rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  font-size:1.0625rem;
  max-width:52ch;
}

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

.events{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}

.card{
  position:relative;
  border:1px solid var(--line);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-art{aspect-ratio:16/9;width:100%;object-fit:cover}

.card-body{padding:1.35rem var(--pad) 1.15rem;display:flex;flex-direction:column;flex:1}

.card h3{font-size:1.5rem;margin-bottom:.5rem}

.card--flag h3{font-size:clamp(1.75rem,5.5vw,2.5rem)}

.card-meta{
  font-size:.9375rem;
  color:var(--muted);
  margin-bottom:1rem;
}

.chips{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}

.chips li{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:.3rem .65rem;
  border:1px solid var(--line);
}

.card-note{font-size:.9375rem;margin-bottom:1.25rem}

.card-action{margin-top:auto;padding-top:.25rem}

.link-action{
  display:inline-block;
  padding:.78rem 0;
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--red);
  border-bottom:2px solid var(--red);
  padding-bottom:2px;
}

.link-action:hover{color:var(--ink);border-color:var(--ink)}

/* the whole card is the tap target for its action link */
.card-action .link-action::after{content:"";position:absolute;inset:0}

.card:hover{border-color:var(--ink)}

.pending{
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

.family{
  margin-top:1.75rem;
  font-size:.9375rem;
  color:var(--muted);
}

/* ---------- event detail ---------- */

.detail-meta{
  display:grid;
  gap:1.25rem;
  margin-bottom:2rem;
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--line-soft);
}

.detail-meta div span{display:block}

.detail-k{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.3rem;
}

.detail-v{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.15}

.routes{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}

.routes button{
  font-family:var(--text);
  font-weight:600;
  font-size:.875rem;
  padding:.75rem 1.1rem;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
}

.routes button:hover{border-color:var(--ink)}

.routes button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sand)}

.map-slot{
  border:1px solid var(--line);
  background:var(--surface);
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  color:var(--muted);
  font-size:.9375rem;
}

.included{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}

.included li{
  padding-left:1.1rem;
  position:relative;
  color:var(--muted);
  max-width:46ch;
}

.included li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  background:var(--gold);
}

.sponsor-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}

.sponsor-slot{
  border:1px dashed var(--line);
  color:var(--muted);
  font-size:.8125rem;
  padding:1.1rem 1.75rem;
  background:var(--surface);
}

/* ---------- directory ---------- */

.finder{
  border:1px solid var(--line);
  background:var(--surface);
  padding:1.5rem var(--pad);
  margin-bottom:1.5rem;
}

.field{display:block;margin-bottom:1rem}

.field:last-child{margin-bottom:0}

.field-l{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}

.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--text);
  font-size:1rem;
  color:var(--ink);
  background:var(--sand);
  border:1px solid var(--line);
  padding:.7rem .8rem;
}

.field textarea{min-height:6.5rem;resize:vertical}

.field-hint{font-size:.8125rem;color:var(--muted);margin-top:.35rem}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}

.checks label{display:flex;align-items:center;gap:.55rem;font-size:.9375rem}

.checks input{width:auto}

.results{
  border:1px solid var(--line-soft);
  background:var(--surface);
  padding:2.5rem var(--pad);
  text-align:center;
  color:var(--muted);
  font-size:.9375rem;
}

/* ---------- proof ---------- */

.proof{background:var(--ink);color:var(--sand);border-bottom:none}

.proof .wrap{padding-top:2.75rem;padding-bottom:2.75rem}

.proof-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}

.proof-list li{border-left:2px solid var(--gold);padding-left:1rem}

.proof-n{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.05;
  display:block;
}

.proof-l{font-size:.875rem;color:rgba(246,239,230,.72)}

/* ---------- foundation ---------- */

.foundation .wrap{padding-top:0;padding-bottom:3.25rem}

.found-inner{border:1px solid var(--line);border-top:3px solid var(--sage);background:var(--surface)}

.found-art{aspect-ratio:16/9;width:100%;object-fit:cover}

.found-text{padding:1.75rem var(--pad)}

.found-text .eyebrow{color:var(--sage)}

.found-text p{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.25rem,4.5vw,1.75rem);
  line-height:1.18;
  max-width:26ch;
  margin-bottom:1.25rem;
}

.link-sage{
  display:inline-block;
  padding:.78rem 0;
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--sage);
  border-bottom:2px solid var(--sage);
  padding-bottom:2px;
}

.link-sage:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- footer ---------- */

footer{border-top:1px solid var(--line);padding-top:2rem;padding-bottom:2.5rem}

.foot-mark{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}

.foot-line{font-size:.875rem;color:var(--muted);max-width:44ch;margin-bottom:1.25rem}

.foot-links{display:flex;flex-wrap:wrap;gap:1.5rem}

.foot-links a{
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding:.72rem 0;
}

.foot-links a:hover{border-color:var(--ink)}

/* ---------- desktop ---------- */

@media (min-width:1024px){
  :root{--pad:2.5rem}

  .masthead{position:sticky;top:0}

  .masthead .wrap{min-height:72px;flex-wrap:nowrap}

  .wordmark{font-size:1.25rem}

  .nav{
    order:2;
    width:auto;
    margin-top:0;
    padding-top:0;
    border-top:none;
    gap:1.6rem;
    margin-left:auto;
    margin-right:1.75rem;
  }

  .hero .wrap{padding-top:8.5rem;padding-bottom:6rem}

  .pagehead .wrap{padding-top:4.5rem;padding-bottom:4rem}

  .section-pad{padding-top:5rem;padding-bottom:5rem}

  .steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}

  .events{grid-template-columns:repeat(6,1fr);gap:1.5rem}

  .events > li{grid-column:span 2}

  .events > li.flagship{grid-column:span 6}

  .card--flag{flex-direction:row-reverse}

  .card--flag .card-art{width:46%;aspect-ratio:auto;align-self:stretch;height:auto}

  .card--flag .card-body{width:54%;padding:2.5rem}

  .detail-meta{grid-template-columns:repeat(3,1fr);gap:2rem}

  .two-col{grid-template-columns:1fr 1fr;gap:3.5rem}

  .finder{padding:2rem 2.25rem}

  .proof-list{grid-template-columns:repeat(4,1fr);gap:2rem}

  .found-inner{display:flex;align-items:stretch}

  .found-art{width:42%;aspect-ratio:auto;height:auto}

  .found-text{width:58%;padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center}

  .foot-line{margin-bottom:0}

  footer .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
}

/* ---------- mobile bottom nav (Pam's stated mobile pattern) ---------- */

body{padding-bottom:3.5rem}

.mobilebar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  border-top:1px solid var(--line);
  background:var(--sand);
}

.mobilebar a{
  flex:1;
  padding:.9rem .4rem;
  text-align:center;
  font-family:var(--text);
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
}

.mobilebar a[aria-current="page"]{color:var(--ink)}

.mobilebar a.primary{background:var(--red);color:var(--sand)}

/* ---------- entry categories ---------- */

.entry{list-style:none;margin:0;padding:0;display:grid;gap:1rem}

.entry li{border-top:1px solid var(--line-soft);padding-top:.85rem}

.entry b{display:block;font-family:var(--display);font-weight:700;font-size:1.0625rem;margin-bottom:.15rem}

.entry span{color:var(--muted);font-size:.9375rem}

/* ---------- sponsors ---------- */

.sponsors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .75rem}

.sponsors li{
  border:1px solid var(--line);
  background:var(--surface);
  padding:.6rem 1rem;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
}

@media (min-width:1024px){
  body{padding-bottom:0}
  .mobilebar{display:none}
  .entry{grid-template-columns:repeat(3,1fr);gap:2rem}
}