/* GENERATED from config/tokens.yaml by af/tokens.py - do not edit */
:root{
  --c-bg:#f6f5f4;
  --c-paper:#ffffff;
  --c-ink:#171514;
  --c-ink2:#272423;
  --c-slate:#625d5b;
  --c-muted:#6c6663;
  --c-line:#e1dedd;
  --c-line2:#c8c3c1;
  --c-chip:#ebe9e8;
  --c-onink:#bbb6b4;
  --c-eyebrow-dark:#e2e0de;
  --c-band-text:#f2f1f0;
  --c-brand:#c02017;
  --c-brand-dk:#9d1a13;
  --c-brand-fill:#ff4d3d;
  --c-brand-fill-ink:#171514;
  --c-brand-fill-hover:#e84739;
  --c-brand-on-dark:#ff8d80;
  --c-brand-tint:#ffe6e4;
  --c-logo:#c02017;
  --c-logo-mark:transparent;
  --c-focus:#c02017;
  --c-focus-ring:rgba(255,77,61,.55);
  --c-link-line:#c02017;
  --c-glow:rgba(255,141,128,.11);
  --c-note:#1c1a17;
  --c-note-dark:#f3efe9;
  --c-hl:#ffe14a;
  --c-hl-a:rgba(255,225,74,.6);
  --c-ramp-lo:#e4e3e2;
  --c-acc:#0f8a5c;
  --c-acc-dark:#5fe0a9;
  --c-ink-rgb:23,21,20;
  --c-thr:#625d5b;
  --c-thr-ink:#ffffff;
  --c-fam:#2f7d52;
  --c-neutral-h:20;
  --c-neutral-s-hi:0.1;
  --c-neutral-s-mid:0.04;
  --c-neutral-s-lo:0.06;
  --t-font-display:"Mona Sans",system-ui,sans-serif;
  --t-font-body:"Onest",system-ui,sans-serif;
  --t-font-note:"Caveat",cursive;
  --t-wide:122%;
  --r-card:12px;
  --r-inner:8px;
  --r-control:999px;
  --s-xs:4px;
  --s-sm:8px;
  --s-md:16px;
  --s-lg:32px;
  --score-high:#4b4745;
  --score-mid:#8f8a88;
  --score-low:#cfcdcc;
  --score-red-hue-max:12;
  --score-red-hue-min:340;
  --score-red-sat-cap:0.4;
  --score-red-light-cap:0.38;
  --score-mid-sat:0.55;
  --score-mid-light:0.6;
  --score-low-sat:0.26;
  --score-low-light:0.7;
  --tsh-photo:0 0 2px rgba(10,9,8,.9),0 1px 4px rgba(10,9,8,.75),0 2px 18px rgba(10,9,8,.6);
  --tsh-photo-sm:0 0 2px rgba(10,9,8,.9),0 1px 6px rgba(10,9,8,.85),0 1px 12px rgba(10,9,8,.6);
}
/* The main menu (GEN-10654, Nate Sun 10/04 "1C, 2A, 3B"): header bar with click-open panels on desktop, logo + search + dark Menu button
   and a full sheet on a phone. ONE stylesheet for every page type and the 404 (the markup is components/_menu.html); palette = var(--c-*)
   (config/tokens.yaml). The logo's own size is GEN-10897's: 34px, 44px from 760px, exactly as before the menu. */
.afn{position:relative;z-index:70;background:var(--c-paper);box-shadow:inset 0 -1px 0 var(--c-line);font-family:var(--t-font-body);color:var(--c-ink)}
.afn svg,.afsheet svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.afn button,.afsheet button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.afn a,.afsheet a{color:inherit;text-decoration:none}
.afin{max-width:1120px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:28px}
.afn .brand.logo img,.afsheet .brand.logo img{display:block;height:34px;width:auto;max-width:none}
@media (min-width:760px){.afn .brand.logo img{height:44px}}
.afm{display:flex;gap:4px}
.afm a,.afm button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:600;color:var(--c-ink2)}
.afm button{border:0;background:none;font-family:inherit;cursor:pointer}   /* a list page's own item: a button, never a link to itself */
.afm button.afhere{background:var(--c-bg)}
@media (hover:hover){.afm a:hover,.afm button:hover{background:var(--c-bg)}}
.afm a[aria-expanded=true],.afm button[aria-expanded=true]{background:var(--c-ink);color:var(--c-paper)}
.afch{width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s;display:inline-block;flex:none}
[aria-expanded=true]>.afch,details[open] .afch{transform:translateY(1px) rotate(-135deg)}
.afsx{position:relative;margin-left:auto}
.afs{display:flex;align-items:center;gap:9px;height:40px;width:290px;padding:0 14px;border-radius:999px;background:var(--c-bg);border:1px solid var(--c-line);color:var(--c-muted);font-size:14px}
.afs svg{width:17px;height:17px;flex:none}
.afs input{border:0;background:none;outline:0;font:inherit;color:var(--c-ink);width:100%;min-width:0}
.afs:focus-within{border-color:var(--c-ink);background:var(--c-paper)}
.afsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.afib{width:44px;height:44px;border-radius:999px;display:none;align-items:center;justify-content:center;flex:none}
.afib svg{width:22px;height:22px}
.afib:active{background:var(--c-bg)}
.afmb{display:none;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:999px;background:var(--c-ink)!important;color:var(--c-paper)!important;font-weight:650!important;font-size:14.5px!important;flex:none}
.afmb svg{width:18px;height:18px}
.afn :focus-visible,.afsheet :focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
.afp{position:absolute;left:0;right:0;top:100%;background:var(--c-paper);border-top:1px solid var(--c-line);box-shadow:0 22px 40px -18px rgba(23,21,20,.35)}
.afp[hidden]{display:none}
.afpi{max-width:1120px;margin:0 auto;padding:22px 22px 24px;display:grid;gap:22px;align-items:start}
.afgc{grid-template-columns:2fr 1fr}.afgp{grid-template-columns:repeat(4,1fr) 1.1fr}
.af2{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}.af3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px}
.afh{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-muted);margin:0 10px 8px}
.afrk{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:10px}
@media (hover:hover){.afrk:hover,.afcs:hover,.afrg a:hover{background:var(--c-bg)}}
.afrk svg{width:34px;height:34px;padding:7px;border-radius:9px;background:var(--c-brand-tint);color:var(--c-brand);flex:none;stroke-width:2.2}
.afrk b,.afcs b{display:block;font-size:14.5px;font-weight:650;color:var(--c-ink)}
.afrk i,.afcs i{display:block;font-style:normal;font-size:12.5px;color:var(--c-muted);margin-top:1px}
.afcs{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px}
.afsw{width:8px;height:30px;border-radius:4px;flex:none}
.afrg a,.afrg span{display:block;padding:6px 10px;border-radius:8px;font-size:14.5px;font-weight:550}
.afhere{background:var(--c-bg)}
.afside{background:var(--c-bg);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.afside b{font-family:var(--t-font-display);font-stretch:112%;font-size:30px;font-weight:800;line-height:1}
.afside span{font-size:13.5px;color:var(--c-muted)}
.afall{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;color:var(--c-brand)!important}
.afall:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.afall:hover{text-decoration:underline!important;text-underline-offset:3px}
.affoot{display:flex;gap:26px;padding-top:14px;border-top:1px solid var(--c-line)}
.afsheet{position:fixed;inset:0;z-index:200;background:var(--c-paper);overflow:auto;font-family:var(--t-font-body);color:var(--c-ink)}
.afsheet[hidden]{display:none}
.afshtop{position:sticky;top:0;background:var(--c-paper);display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-bottom:1px solid var(--c-line);z-index:2}
.afsheet .afib{display:inline-flex}
.afshb{padding:16px}
.afshb .afsx{margin:0 0 12px}
.afshb .afs{width:auto;height:46px;font-size:16px}
.afbig{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;margin-top:8px;border-radius:14px;background:var(--c-bg);font-family:var(--t-font-display);font-stretch:110%;font-weight:750;font-size:20px;list-style:none;cursor:pointer}
.afbig small{font-family:var(--t-font-body);font-weight:500;font-size:13.5px;color:var(--c-muted)}
.afsheet summary::-webkit-details-marker{display:none}
.afrks{padding:6px 0 2px}.afrks .afall{margin:8px 10px 4px}
.afpop{display:flex;flex-wrap:wrap;gap:8px}
.afpop a,.afpop span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--c-line);font-size:14px;font-weight:600}
.afpop i{width:9px;height:9px;border-radius:50%}
@media (max-width:900px){
  .afin{padding:6px 10px 6px 16px;gap:4px}
  .afm,.afn>.afin>.afsx,.afp{display:none!important}
  .afib,.afmb{display:inline-flex}.afsb{margin-left:auto}
}
/* Search results under the menu boxes (GEN-11055 r7, Nate: "There should be a search inside, you know, the menu area as I type"). ONE copy of the
   hit cards, shared by the home hero box and both menu boxes (the rules moved here from home.css). */
.hits{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--c-paper);color:var(--c-ink);
  border-radius:12px;box-shadow:0 2px 4px rgba(23,21,20,.05),0 24px 60px -24px rgba(23,21,20,.35);overflow:auto;max-height:min(330px,52svh);border:1px solid var(--c-line)}
.hits[hidden]{display:none}
.hit{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:11px 15px;
  border-top:1px solid var(--c-line);text-decoration:none;color:var(--c-ink)}
.hit:first-child{border-top:0}
.hit b{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:15px;line-height:1.2}
.hit i{grid-column:1;font-style:normal;font-size:12.5px;color:var(--c-slate)}
.hit u{grid-row:1/3;grid-column:2;text-decoration:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--c-paper);background:#423e3c;border-radius:99px;padding:4px 9px}
.hit u.c{background:var(--c-brand)}
.hit[aria-selected="true"]{background:#f4f2f1}
@media (hover:hover){.hit:hover{background:#f4f2f1}}
.hits .none{padding:14px 15px;font-size:14px;color:var(--c-slate)}
.afsx .hits{width:max(100%,360px);left:auto;right:0}
/* the phone sheet: while a query is typed the results replace the big links, and scroll inside the sheet */
.afshb .afsx .hits{position:static;width:auto;margin-top:0;box-shadow:none;max-height:none;overflow:visible}
.afshb.afq>:not(.afsx){display:none}