/* KwickEat — one accent (tomato), warm ink on near-white paper, real dish photos as the visual language.
   Display face: Bricolage Grotesque (narrow, heavy, printed-menu-board). Body: system sans. */

:root{
  --paper:#fffcf7;
  --sand:#f3eadf;
  --ink:#241a14;
  --slate:#6e5c4e;
  --rule:#e6dbce;
  --tomato:#e8452c;      /* graphics, numerals, star */
  --btn:#d03a1f;         /* anything with text on top */
  --btn-dark:#ab2d14;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gut:20px;
  --r:12px;
}
@media (min-width:700px){ :root{ --gut:32px } }
@media (min-width:1280px){ :root{ --gut:48px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  overflow-wrap:break-word;
  min-height:100vh;display:flex;flex-direction:column;   /* short pages keep the footer at the bottom */
}
main{flex:1 0 auto}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:'opsz' 96,'wght' 800,'wdth' 88;
  letter-spacing:-.025em;line-height:1;margin:0;
  font-weight:800;
}
p{margin:0 0 .8em}
.wrap{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--gut)}
.muted{color:var(--slate)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--tomato);outline-offset:2px;border-radius:2px}

/* ---------- header ---------- */
.top{background:var(--paper);border-bottom:1px solid var(--rule)}
.top-in{
  width:100%;max-width:1760px;margin-inline:auto;padding:12px var(--gut) 14px;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 18px;
}
.brand{display:block;line-height:0}
.brand img{display:block;width:118px;height:auto}
.topnav{display:flex;justify-content:flex-end;gap:18px;font-size:14px;font-weight:600}
.topnav a{text-decoration:none;color:var(--slate);padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--tomato)}
.q{grid-column:1/-1;display:flex;gap:8px}
.q input{
  flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 14px;
  border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--ink);
}
.q input::placeholder{color:#a3917f}
.q button{
  font:inherit;font-size:15px;font-weight:650;padding:10px 20px;cursor:pointer;
  border:0;border-radius:999px;background:var(--ink);color:var(--paper);
}
.q button:hover{background:var(--btn-dark)}
@media (min-width:900px){
  .top-in{grid-template-columns:auto 1fr auto;gap:0 24px}
  .q{grid-column:2;max-width:520px}
  .topnav{grid-column:3}
  .top{position:sticky;top:0;z-index:10}
  .top.is-stuck{box-shadow:0 1px 0 var(--rule),0 10px 24px -18px rgba(36,26,20,.5)}
  .brand img{width:141px}
  .topnav{font-size:15px;gap:26px}
}

/* ---------- hero ---------- */
.hero{padding:26px 0 40px;border-bottom:1px solid var(--rule)}
.hero-in{display:grid;gap:26px;align-items:center}
.hero h1{font-size:clamp(2.45rem,8.4vw,5.4rem);max-width:13ch}
.hero .lede{font-size:clamp(1.02rem,1.45vw,1.3rem);color:var(--slate);max-width:44ch;margin-top:18px}
.hero-q{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 14px;max-width:640px}
.hero-q input{
  flex:1 1 220px;min-width:0;font:inherit;font-size:1.05rem;padding:15px 20px;
  border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);
}
.hero-q input::placeholder{color:#a3917f}
.hero-q button{
  font:inherit;font-size:1.05rem;font-weight:700;padding:15px 30px;cursor:pointer;
  border:2px solid var(--btn);border-radius:999px;background:var(--btn);color:#fff;
}
.hero-q button:hover{background:var(--btn-dark);border-color:var(--btn-dark)}
.hero-fact{font-size:.95rem;color:var(--slate);max-width:48ch;margin:0}
.hero-fact b{font-variant-numeric:tabular-nums;color:var(--ink)}

.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--sand);text-decoration:none}
.tile:first-child{grid-column:span 2}
.tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tile:first-child img{aspect-ratio:8/3}
.tile b{
  display:none;position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;
  font-family:var(--display);font-variation-settings:'opsz' 14,'wght' 700,'wdth' 92;
  font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15;
  background:linear-gradient(to top,rgba(20,12,8,.82),rgba(20,12,8,0));
}
.tile:hover img{filter:brightness(1.06)}
@media (min-width:700px){ .tile b{display:block} }
@media (min-width:1100px){
  .hero{padding:44px 0 56px}
  .hero-in{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(34px,4vw,72px)}
  .wall{gap:10px}
}

/* ---------- section furniture ---------- */
.sect{padding:44px 0}
.sect+.sect{border-top:1px solid var(--rule)}
.sect-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:6px}
.sect-h h2{font-size:clamp(1.55rem,2.5vw,2.45rem)}
.sect-h a{font-size:.95rem;font-weight:650;color:var(--btn);text-decoration:none;border-bottom:1px solid currentColor}
.sect-h a:hover{color:var(--btn-dark)}
.deck{color:var(--slate);max-width:62ch;margin:0 0 26px}
@media (min-width:900px){ .sect{padding:58px 0} }

/* ---------- how it works (a real 3-step sequence) ---------- */
.steps{list-style:none;display:grid;gap:0;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--rule)}
.steps li::before{
  counter-increment:s;content:counter(s);
  font-family:var(--display);font-variation-settings:'opsz' 96,'wght' 800,'wdth' 80;
  font-size:2.6rem;line-height:.8;color:var(--tomato);
}
.steps h3{font-size:1.12rem;margin-bottom:5px}
.steps p{margin:0;color:var(--slate);font-size:.97rem;max-width:46ch}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:36px}
  .steps li{padding:22px 0 0}
}

/* ---------- cuisine chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips a{
  display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  padding:9px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--sand);
  font-weight:620;font-size:.98rem;
}
.chips a:hover{border-color:var(--ink);background:#fff}
.chips span{font-size:.82rem;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- restaurant cards ---------- */
/* 12 cards per listing block, so every column count below divides cleanly into it. */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:620px){ .grid{grid-template-columns:repeat(2,1fr);gap:22px} }
/* Three from tablet width: on a hub listing two columns make the cards that have no dish photo read as
   two big empty blocks per row. */
@media (min-width:780px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){ .grid{grid-template-columns:repeat(4,1fr);gap:26px} }
@media (min-width:1620px){ .grid{grid-template-columns:repeat(6,1fr);gap:20px} }

.card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff;
}
.card:hover{border-color:var(--ink)}
.card-top{position:relative;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.card-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card:hover .card-img{filter:brightness(1.05)}
/* Two thirds of the menus we hold have no dish photo at all, so this tile is a normal sight on a hub
   listing, not an error state: give it a little depth rather than one flat beige rectangle. */
.card-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-variation-settings:'opsz' 96,'wght' 800,'wdth' 88;
  font-size:3.4rem;color:#cdbaa6;
  background:linear-gradient(150deg,#f8f1e7,#eadfd0);
}
.card-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.card-b h3{font-size:1.06rem;line-height:1.15;font-variation-settings:'opsz' 18,'wght' 700,'wdth' 92}
.card:hover .card-b h3{text-decoration:underline;text-underline-offset:2px}
.card-w{margin:0;font-size:.92rem;color:var(--slate)}
.card-m{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:.92rem}
.rating{font-weight:640;white-space:nowrap}
.star{color:var(--tomato);margin-right:4px}
.card img.bad,.tile img.bad,.dish img.bad,.rst-ph img.bad,.ctile img.bad{visibility:hidden}
/* Phones get a scannable list with a thumbnail — 12 full-bleed photo cards is a 4,000px scroll.
   Kept last so it wins over the card rules above, which have the same specificity. */
@media (max-width:619px){
  .card{flex-direction:row;align-items:stretch}
  .card-top{flex:0 0 128px;width:128px}
  .card-ph{font-size:2.1rem}
  .card-b{padding:11px 14px;justify-content:center;gap:4px}
  .card-b h3{font-size:1rem}
}

/* ---------- cities ---------- */
.places{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.places li{background:var(--paper)}
.places a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px;text-decoration:none}
.places a:hover{background:var(--sand)}
.places b{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700,'wdth' 92;font-weight:700;font-size:1rem}
.places span{font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:700px){ .places{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .places{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1620px){ .places{grid-template-columns:repeat(6,1fr)} }

/* ---------- restaurant CTA band ---------- */
.band{background:var(--ink);color:var(--paper)}
/* padding-block only: a `padding` shorthand here would cancel the gutters .wrap sets on the same element. */
.band-in{display:grid;gap:20px;padding-block:44px;align-items:center}
.band h2{font-size:clamp(1.55rem,2.4vw,2.3rem);max-width:18ch}
.band p{color:#c9b9a8;max-width:52ch;margin:14px 0 0}
.band .go{
  display:inline-block;justify-self:start;background:var(--tomato);color:#fff;text-decoration:none;
  font-weight:700;font-size:1.02rem;padding:14px 28px;border-radius:999px;
}
.band .go:hover{background:#fff;color:var(--ink)}
@media (min-width:900px){ .band-in{grid-template-columns:1fr auto;gap:48px;padding-block:56px} }

/* ---------- breadcrumbs (used by inner pages) ---------- */
.crumbs{padding:16px 0 0;font-size:.88rem;color:var(--slate)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs a{color:var(--slate)}

/* ---------- restaurant page ---------- */
/* How far a menu anchor has to clear: the jump bar on phones, the header plus the jump bar from 900px up. */
:root{--stick:57px}
@media (min-width:900px){ :root{--stick:calc(var(--hdr,68px) + 57px)} }

.rst{padding:10px 0 32px;border-bottom:1px solid var(--rule)}
.rst-in{display:grid;gap:24px;align-items:center}
.rst-ph{border-radius:var(--r);overflow:hidden;background:var(--sand)}
/* One column: a 4:3 hero would push the Order button off a phone screen, so the photo is a banner there. */
.rst-ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rst-noph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:16/9;
  background:linear-gradient(150deg,hsl(var(--h,24) 44% 92%),hsl(var(--h,24) 34% 78%));
}
.rst-noph b{
  font-family:var(--display);font-variation-settings:'opsz' 96,'wght' 800,'wdth' 86;
  font-size:clamp(3.4rem,11vw,7rem);line-height:1;color:#fff;
}
.rst-noph i{font-style:normal;font-weight:650;font-size:.95rem;color:var(--ink);opacity:.72}
.rst-kind{margin:0 0 10px;font-size:.95rem;font-weight:650;color:var(--btn)}
.rst h1{font-size:clamp(2rem,5vw,3.9rem);max-width:17ch}
.rst-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:16px 0 0;font-size:1rem}
.rst-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:1rem}
.rst-facts li{display:flex;gap:10px;align-items:baseline}
.rst-facts .ico{color:var(--tomato);flex:0 0 auto}
.rst-facts a{text-decoration:none;border-bottom:1px solid var(--rule)}
.rst-facts a:hover{border-bottom-color:var(--ink)}
.rst-cta{
  display:inline-block;margin:24px 0 10px;padding:16px 34px;border-radius:999px;
  background:var(--btn);color:#fff;text-decoration:none;font-weight:700;font-size:1.08rem;
}
.rst-cta:hover{background:var(--btn-dark)}
.rst-note{margin:0;font-size:.9rem;color:var(--slate);max-width:48ch}
@media (min-width:1000px){
  .rst{padding:14px 0 46px}
  .rst-in{grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:clamp(32px,4vw,68px)}
  .rst-ph img{aspect-ratio:4/3}   /* the photoless panel stays a band: 4:3 of flat colour is a dead half-screen */
}

/* jump bar — one scrollable row at every width, so 20+ categories never eat the viewport */
.jump{position:sticky;top:0;z-index:9;background:var(--paper);border-bottom:1px solid var(--rule)}
/* the row scrolls sideways: fade the right edge so it reads as "there is more" */
.jump::after{content:"";position:absolute;top:0;bottom:1px;right:0;width:56px;pointer-events:none;
  background:linear-gradient(to right,rgba(255,252,247,0),var(--paper))}
@media (min-width:900px){ .jump{top:var(--hdr,68px)} }
/* the scrollbar itself is hidden: it would double the height of a bar that sits under the header all day,
   and the fade plus a half-cut chip already say "keep going" */
.jump-in{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.jump-in::-webkit-scrollbar{display:none}
.jump ul{display:flex;gap:8px;list-style:none;margin:0;padding:10px 0;white-space:nowrap}
.jump a{
  display:inline-block;padding:7px 15px;border:1px solid var(--rule);border-radius:999px;
  background:var(--sand);text-decoration:none;font-size:.92rem;font-weight:620;
}
.jump a:hover{border-color:var(--ink);background:#fff}
.jump a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.menu .cat{padding-top:30px;scroll-margin-top:calc(var(--stick) + 10px)}
.cat-h{display:flex;align-items:baseline;gap:10px;font-size:clamp(1.2rem,2vw,1.6rem);padding-bottom:2px}
.cat-h span{font-family:var(--body);font-size:.8rem;font-weight:500;letter-spacing:0}
.dishes{list-style:none;margin:0;padding:0;display:grid}
@media (min-width:1000px){ .dishes{grid-template-columns:repeat(2,1fr);column-gap:52px} }
@media (min-width:1560px){ .dishes{grid-template-columns:repeat(3,1fr);column-gap:48px} }
.dish{display:flex;gap:14px;align-items:flex-start;padding:14px 2px;border-top:1px solid var(--rule)}
/* On /search/ a dish row is a link to a *different* restaurant than the page it's on, so it gets the same
   .dish rhythm plus link behaviour: no underline until hover, and the hover state lands on the dish name
   rather than the whole row so it reads like a real link, not a button. */
a.dish{text-decoration:none;color:inherit}
a.dish:hover .dish-t h4{text-decoration:underline;text-underline-offset:2px}
.dish-i{flex:0 0 88px;width:88px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--sand);display:block}
.dish-i0{aspect-ratio:4/3;background:none}
.dish-t{flex:1;min-width:0;max-width:62ch}
.dish-t h4{
  margin:0;font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700,'wdth' 92;
  font-size:1.02rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;
}
.dish-t p{margin:4px 0 0;font-size:.9rem;color:var(--slate)}
.dish-p{font-size:1rem;font-weight:680;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 404 ---------- */
.miss{padding:60px 0 70px;max-width:60ch}
.miss h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.miss .lede{color:var(--slate);font-size:1.1rem;margin:16px 0 24px}
.miss ul{padding-left:18px;color:var(--slate)}

/* ---------- hub header (city + cuisine listings) ---------- */
.hub{padding:20px 0 0}
.hub h1{font-size:clamp(2.05rem,5.2vw,4rem);max-width:20ch}
.hub .lede{color:var(--slate);font-size:clamp(1rem,1.3vw,1.18rem);max-width:60ch;margin:16px 0 0}
.hub .lede b{color:var(--ink);font-variant-numeric:tabular-nums}
.hub-chips{margin-top:22px}
.sect-note{color:var(--slate);font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- pager ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.pager-go{display:inline-flex;align-items:center;gap:7px;padding:12px 26px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:650;background:#fff}
.pager-go:hover{background:var(--ink);color:var(--paper)}
/* phones read the position first and then the two buttons side by side; from 620px it is one row */
.pager-at{order:-1;flex-basis:100%;text-align:center;color:var(--slate);font-size:.95rem;font-variant-numeric:tabular-nums}
@media (min-width:620px){ .pager-at{order:0;flex-basis:auto} }

/* ---------- directory rows (states, cities) ---------- */
/* State on the left, its cities flowing beside it: a one-city state stays a line rather than a ragged grid. */
.dir{list-style:none;margin:0;padding:0}
.dir>li{display:grid;gap:10px;padding:22px 0;border-top:1px solid var(--rule)}
@media (min-width:900px){ .dir>li{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 44px} }
.dir-st{display:flex;align-items:baseline;gap:10px;scroll-margin-top:96px}
.dir-st h2,.dir-st h3{font-size:1.3rem}
.dir-st span{font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums}
.dir-c{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 20px}
.dir-c a{text-decoration:none;font-size:.98rem;border-bottom:1px solid transparent}
.dir-c a:hover{border-bottom-color:var(--tomato)}
.dir-c i{font-style:normal;margin-left:5px;font-size:.8rem;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- cuisine tiles ---------- */
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){ .cgrid{grid-template-columns:repeat(3,1fr);gap:18px} }
@media (min-width:1100px){ .cgrid{grid-template-columns:repeat(4,1fr)} }
/* Five, not six: there are nineteen cuisines, and five columns leave a tidy last row instead of one orphan. */
@media (min-width:1620px){ .cgrid{grid-template-columns:repeat(5,1fr);gap:20px} }
.ctile{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.ctile:hover{border-color:var(--ink)}
/* The lettered tile sits behind the photo, so a photo missing on the restaurant's server leaves a tile. */
.ctile-top{position:relative;display:block;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.ctile img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ctile:hover img{filter:brightness(1.05)}
.ctile-no{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#f8f1e7,#eadfd0);
  font-family:var(--display);font-variation-settings:'opsz' 96,'wght' 800,'wdth' 88;font-size:2.6rem;color:#cdbaa6}
.ctile-b{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px 14px}
.ctile-b b{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700,'wdth' 92;font-size:1.05rem;line-height:1.15}
.ctile:hover .ctile-b b{text-decoration:underline;text-underline-offset:2px}
.ctile-b span{font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- prose (about / for-restaurants / privacy / terms) ---------- */
.prose{padding:34px 0 64px;max-width:74ch}
.prose .meta{color:var(--slate);font-size:.9rem;margin:0 0 30px}
.prose h2{font-size:clamp(1.3rem,2.1vw,1.7rem);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink);max-width:70ch}
.prose ul,.prose ol{color:var(--ink);max-width:70ch;padding-left:22px;margin:0 0 .8em}
.prose li{margin:0 0 .4em}
.prose a{color:var(--btn);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--btn-dark)}
/* A pill CTA (.rst-cta, reused from the restaurant page) keeps its own white-on-button label here — without
   this, ".prose a" (a class + an element) outranks ".rst-cta" (one class) and repaints the label the same
   red as its own background, so the button reads as blank. */
.prose a.rst-cta{color:#fff;text-decoration:none}
.prose a.rst-cta:hover{color:#fff}
@media (min-width:900px){ .prose{padding:44px 0 80px} }

/* ---------- footer ---------- */
.foot{background:var(--sand);border-top:1px solid var(--rule)}
.foot-in{width:100%;max-width:1760px;margin-inline:auto;padding:40px var(--gut) 48px;display:grid;gap:22px}
.foot-lede{font-family:var(--display);font-variation-settings:'opsz' 36,'wght' 800,'wdth' 88;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 10px}
.foot-say p{color:var(--slate);max-width:56ch;margin:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.95rem;font-weight:600}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-fine{font-size:.85rem;color:var(--slate);max-width:78ch;margin:0}
@media (min-width:1100px){ .foot-in{grid-template-columns:minmax(0,1fr) auto;column-gap:60px} .foot-fine{grid-column:1/-1} }

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