/* =========================================================
   Dine American Table — Design System
   Americana diner: masthead, full-bleed bands, checkerboard,
   dotted-leader menu lines, outlined step numerals.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Libre+Franklin:wght@400;500;600;700;800&display=swap');

:root{
  --cream:   #FBF4E4;
  --cream-2: #F2E7CC;
  --navy:    #12263F;
  --navy-2:  #1D3A5E;
  --cherry:  #D12F3F;
  --aqua:    #8ED6CC;
  --aqua-lt: #D3EEE9;
  --teal:    #1B756B;
  --butter:  #F6C453;
  --ink-soft:#3B4B62;

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'Libre Franklin', -apple-system, Segoe UI, sans-serif;

  --max: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background: var(--butter); color: var(--navy); }
:focus-visible{ outline: 3px solid var(--cherry); outline-offset: 3px; }

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

.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 .4em;
  color: var(--navy);
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
strong{ color: var(--navy); }
.lede{ font-size: 1.2rem; line-height: 1.55; color: var(--navy); max-width: 58ch; }
.label{
  display:inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Ribbon + masthead + nav
   --------------------------------------------------------- */
.ribbon{
  background: var(--navy);
  color: var(--cream);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.ribbon i{ font-style: normal; color: var(--butter); padding: 0 8px; }

.masthead{ text-align: center; padding: 26px 24px 20px; }
.wordmark{
  display:inline-block;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: .86;
  letter-spacing: .01em;
  color: var(--navy);
}
.wordmark em{ font-style: normal; color: var(--cherry); }
.masthead.compact{ padding: 18px 24px 14px; }
.masthead.compact .wordmark{ font-size: clamp(2.2rem, 6vw, 3.8rem); }
.tagline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 16px;
  margin-top: 12px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.tagline::before, .tagline::after{
  content:'';
  flex: 0 1 140px;
  height: 7px;
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
}
.masthead.compact .tagline{ display:none; }
@media (max-width: 600px){ .tagline::before, .tagline::after{ display:none; } .tagline{ letter-spacing: .16em; } }

.nav{
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--cream);
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
}
.nav-links{ display:none; list-style:none; margin:0; padding:0; justify-content:center; }
.nav-links a{
  display:block;
  padding: 15px 26px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  transition: background .15s ease;
}
.nav-links li + li a{ border-left: 2px solid rgba(18,38,63,.2); }
.nav-links a:hover{ background: var(--aqua); }
.nav-links a.active{ background: var(--navy); color: var(--cream); }
@media (min-width: 900px){ .nav-links{ display:flex; } }

.nav-toggle{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  background: none;
  border: 0;
  padding: 14px 0;
  cursor: pointer;
  font: 800 .8rem/1 var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
}
@media (min-width: 900px){ .nav-toggle{ display:none; } }

.nav-mobile{ display:none; list-style:none; margin:0; padding:0; }
.nav-mobile.open{ display:block; }
.nav-mobile a{
  display:block;
  padding: 15px 24px;
  border-top: 2px solid rgba(18,38,63,.2);
  text-decoration:none;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-mobile a:hover{ background: var(--aqua); }
@media (min-width: 900px){ .nav-mobile, .nav-mobile.open{ display:none; } }

/* ---------------------------------------------------------
   Buttons (cut-corner badges)
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font: 800 .78rem/1 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 18px 28px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline: 3px solid currentColor; outline-offset: -7px; }
.btn-cherry{ background: var(--cherry); color:#fff; }
.btn-cherry:hover{ background: var(--navy); }
.btn-navy{ background: var(--navy); color: var(--cream); }
.btn-navy:hover{ background: var(--cherry); }
.btn-cream{ background: var(--cream); color: var(--navy); }
.btn-cream:hover{ background: var(--butter); }
.btn-butter{ background: var(--butter); color: var(--navy); }
.btn-butter:hover{ background: var(--cream); }

/* ---------------------------------------------------------
   Bands + dividers
   --------------------------------------------------------- */
.band{ padding: clamp(46px,7vw,92px) 0; }
.band-aqua{ background: var(--aqua); }
.band-aqua-lt{ background: var(--aqua-lt); }
.band-cream-2{ background: var(--cream-2); }
.band-navy{ background: var(--navy); color: var(--cream); }
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy strong{ color: var(--cream); }
.band-navy p{ color: #C5CFDD; }
.band-cherry{ background: var(--cherry); color:#fff; }
.band-cherry h2,.band-cherry h3,.band-cherry strong{ color:#fff; }
.band-cherry p{ color: #FBE3E5; }

.checker{
  height: 28px;
  background: repeating-conic-gradient(var(--navy) 0 25%, var(--cream) 0 50%) 0 0 / 28px 28px;
}

/* ---------------------------------------------------------
   Home hero
   --------------------------------------------------------- */
.hero{ padding: clamp(40px,7vw,88px) 0 clamp(48px,8vw,104px); }
.hero-grid{ display:grid; gap: 34px; grid-template-columns: minmax(0,1fr); align-items:end; }
@media (min-width: 900px){ .hero-grid{ grid-template-columns: minmax(0,1fr) 220px; } }
.hero h1{
  font-weight: 900;
  font-size: clamp(3.3rem, 10.5vw, 8.6rem);
  line-height: .86;
  margin-bottom: .3em;
}
.hero h1 em{ font-style: normal; color: var(--cherry); }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 30px; }

.stamp{
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--cherry);
  color: #fff;
  display:grid;
  place-content:center;
  text-align:center;
  transform: rotate(10deg);
  box-shadow: inset 0 0 0 6px var(--cherry), inset 0 0 0 9px #fff;
  justify-self: start;
}
@media (min-width: 900px){ .stamp{ justify-self:end; width: 210px; height: 210px; } }
.stamp b{ font-family: var(--display); font-weight: 900; font-size: 4.6rem; line-height: .8; }
.stamp span{ font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; padding: 0 22px; }

/* ---------------------------------------------------------
   Menu board + menu lines
   --------------------------------------------------------- */
.board{
  border: 7px double var(--navy);
  background: var(--cream);
  padding: clamp(24px,4vw,58px);
}
.board-head{ text-align:center; margin-bottom: 30px; }
.board-head h2{ font-size: clamp(2.8rem,7vw,5rem); margin: 0; }
.board-head h2 i{ font-style: normal; color: var(--cherry); padding: 0 .25em; }
.board-head p{ margin: 8px auto 0; max-width: 46ch; }
.mi-grid{ display:grid; grid-template-columns: minmax(0,1fr); gap: 4px 64px; }
@media (min-width: 900px){ .mi-grid{ grid-template-columns: 1fr 1fr; } }

.mi{ display:block; padding: 18px 0 20px; text-decoration:none; color: inherit; }
.mi-top{ display:flex; align-items:baseline; gap: 12px; }
.mi-name{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.02;
  text-transform: uppercase;
  transition: color .15s ease;
}
.mi-dots{ flex:1 1 24px; min-width: 24px; border-bottom: 3px dotted rgba(18,38,63,.5); transform: translateY(-5px); }
.mi-time{ font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--cherry); }
.mi-desc{ display:block; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); margin-top: 6px; max-width: 50ch; }
.mi-cat{ display:inline-block; margin-top: 9px; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
a.mi:hover .mi-name{ color: var(--cherry); }
.center{ text-align:center; }
.board-foot{ text-align:center; margin-top: 30px; }

/* Stats on cherry band */
.split{ display:grid; gap: 30px 60px; grid-template-columns: minmax(0,1fr); align-items:center; }
@media (min-width: 900px){ .split{ grid-template-columns: 1.1fr .9fr; } }
.split h2{ font-size: clamp(2.8rem,6.4vw,5rem); font-weight: 900; }
.stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; border-top: 3px solid rgba(255,255,255,.55); padding-top: 22px; }
.stat b{ display:block; font-family: var(--display); font-weight: 900; font-size: clamp(2.8rem,7vw,5.4rem); line-height: .9; color: #fff; }
.stat span{ display:block; margin-top: 6px; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.duo{ display:grid; gap: 40px 64px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px){ .duo{ grid-template-columns: 1fr 1fr; } }
.duo h3{ font-size: clamp(2rem,4vw,2.9rem); }
.duo h3 i{ font-style: normal; color: var(--butter); }

/* ---------------------------------------------------------
   Page headers + prose
   --------------------------------------------------------- */
.page-head{ padding: clamp(40px,6vw,76px) 0 clamp(44px,6vw,80px); }
.page-head h1{ font-weight: 900; font-size: clamp(3rem,9vw,7rem); line-height: .88; margin-bottom: .2em; max-width: 14ch; }
.page-head h1 em{ font-style: normal; color: var(--butter); }
.page-head .label{ color: var(--butter); margin-bottom: 14px; }

.prose{ max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,72px) 24px clamp(60px,8vw,100px); }
.prose h2{ font-size: 2.3rem; margin-top: 1.7em; }
.prose h2:first-child{ margin-top: 0; }
.prose h2::before{ content:''; display:block; width: 56px; height: 7px; background: var(--cherry); margin-bottom: 14px; }
.prose ul{ color: var(--ink-soft); padding-left: 1.2em; }
.prose li{ margin-bottom: .5em; }
.prose a{ color: var(--cherry); font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------------------------------------------------------
   Recipes index
   --------------------------------------------------------- */
.tabs{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 26px; }
.tabs a{
  text-decoration:none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 16px;
  border: 2px solid var(--cream);
  color: var(--cream);
  transition: background .15s ease, color .15s ease;
}
.tabs a:hover{ background: var(--butter); border-color: var(--butter); color: var(--navy); }

.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 16px; flex-wrap:wrap; border-bottom: 4px solid var(--navy); padding-bottom: 8px; margin-bottom: 8px; }
.cat-head h2{ font-weight: 900; font-size: clamp(3.4rem,10vw,7.4rem); line-height: .84; margin: 0; }
.cat-head span{ font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.cat-list{ display:grid; grid-template-columns: minmax(0,1fr); gap: 0 64px; }
@media (min-width: 900px){ .cat-list{ grid-template-columns: 1fr 1fr; } .cat-list.one{ grid-template-columns: minmax(0,1fr); } }
.cat-list .mi{ border-bottom: 2px solid rgba(18,38,63,.14); }

/* ---------------------------------------------------------
   Recipe detail
   --------------------------------------------------------- */
.crumb{ font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color: var(--cherry); }
.rhero{ background: var(--band, var(--aqua)); padding: clamp(32px,5vw,62px) 0 clamp(70px,8vw,110px); }
.rhero h1{ font-weight: 900; font-size: clamp(3rem,9vw,7.2rem); line-height: .86; max-width: 15ch; margin-bottom: .3em; }
.rhero .lede{ max-width: 52ch; }
.k-breakfast{ --band: #F7D27A; }
.k-appetizer{ --band: #F2A89F; }
.k-main{ --band: #8ED6CC; }
.k-soup{ --band: #C5E1A5; }
.k-side{ --band: #E7D3A6; }
.k-dessert{ --band: #F4B6C7; }
.k-drink{ --band: #A9CBE8; }

.stamps{ display:flex; gap: 16px; flex-wrap:wrap; margin-top: 30px; }
.stamp-s{
  width: 124px; height: 124px;
  border-radius: 50%;
  border: 3px solid var(--navy);
  display:grid;
  place-content:center;
  text-align:center;
  background: rgba(255,255,255,.4);
  padding: 8px;
}
.stamp-s small{ font-size: .56rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.stamp-s b{ font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; margin-top: 3px; text-transform: uppercase; }
.stamp-s em{ font-style: normal; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }

.rwrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.rwrap > *{ max-width: 900px; }
.need{
  background: var(--cream-2);
  border-top: 10px solid var(--cherry);
  padding: clamp(24px,4vw,44px);
  margin-top: -50px;
  position: relative;
  box-shadow: 0 18px 0 -8px rgba(18,38,63,.9);
}
.need h2{ font-size: 2.2rem; margin-bottom: 14px; }
.need ul{ list-style:none; margin:0; padding:0; columns: 2; column-gap: 44px; }
@media (max-width: 700px){ .need ul{ columns: 1; } }
.need li{ break-inside: avoid; position: relative; padding: 10px 0 10px 28px; border-bottom: 1px dotted rgba(18,38,63,.4); font-size: .98rem; color: var(--navy); }
.need li::before{ content:'\2605'; position:absolute; left:0; top: 11px; color: var(--cherry); font-size: .85rem; }

.method{ padding: 64px 0 20px; }
.method > h2{ font-size: clamp(2.6rem,6vw,4rem); font-weight: 900; margin-bottom: 8px; }
.steps{ list-style:none; counter-reset: s; margin:0; padding:0; }
.steps li{
  counter-increment: s;
  display:grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 4px 24px;
  padding: 30px 0;
  border-top: 3px solid var(--navy);
}
.steps li::before{
  content: counter(s);
  font-family: var(--display);
  font-weight: 900;
  font-size: 6.4rem;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
}
.steps h3{ font-size: 2rem; margin: 0 0 6px; }
.steps p{ margin: 0; color: var(--ink-soft); }
@media (max-width: 600px){
  .steps li{ grid-template-columns: 62px minmax(0,1fr); gap: 4px 14px; }
  .steps li::before{ font-size: 4.2rem; -webkit-text-stroke-width: 1.6px; }
}
.cook-note{
  background: var(--butter);
  padding: 24px 30px;
  margin: 24px 0 20px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.cook-note .label{ color: var(--navy); margin-bottom: 6px; }
.cook-note p{ margin: 0; color: var(--navy); font-weight: 600; font-size: 1.08rem; }

/* ---------------------------------------------------------
   Regional kitchens
   --------------------------------------------------------- */
.region-grid{ display:grid; gap: 22px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px){ .region-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px){ .region-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.region{ border: 3px solid var(--navy); background: var(--cream); display:flex; flex-direction:column; }
.region-top{ padding: 12px 22px; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; border-bottom: 3px solid var(--navy); background: var(--rc, var(--aqua)); }
.region-body{ padding: 22px 22px 26px; flex:1; }
.region h3{ font-size: 2.6rem; margin-bottom: 10px; }
.region p{ font-size: .95rem; }
.region ul{ list-style:none; margin: 14px 0 0; padding: 0; }
.region li{ border-top: 2px dotted rgba(18,38,63,.4); }
.region li a{ display:flex; justify-content:space-between; gap: 10px; padding: 11px 0; text-decoration:none; font-weight: 700; font-size: .93rem; }
.region li a::after{ content:'\2192'; color: var(--cherry); font-weight: 800; }
.region li a:hover{ color: var(--cherry); }
.r1{ --rc: #F7D27A; } .r2{ --rc: #A9CBE8; } .r3{ --rc: #F2A89F; }
.r4{ --rc: #C5E1A5; } .r5{ --rc: #E7D3A6; } .r6{ --rc: #8ED6CC; }
.region .none{ font-size: .86rem; font-style: italic; margin-top: 14px; }

/* ---------------------------------------------------------
   Forms + info
   --------------------------------------------------------- */
.contact-grid{ display:grid; gap: 30px 56px; grid-template-columns: minmax(0,1fr); padding: clamp(40px,6vw,72px) 0; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: 1.1fr .9fr; } }
.form-card{ background: var(--cream-2); border-top: 10px solid var(--cherry); padding: clamp(24px,4vw,40px); }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px; }
.field input,.field textarea,.field select{
  width:100%;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 0;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline: 3px solid var(--butter); outline-offset: 0; }
.form-note{ display:none; margin-top: 14px; font-size: .86rem; }
.info{ list-style:none; margin:0; padding:0; }
.info li{ padding: 18px 0; border-top: 2px dotted rgba(18,38,63,.4); }
.info li:first-child{ border-top: 0; padding-top: 0; }
.info b{ display:block; font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cherry); margin-bottom: 4px; }
.info span{ color: var(--navy); }

/* ---------------------------------------------------------
   Hidden invite: marquee sign
   --------------------------------------------------------- */
.sign{ background: var(--navy); padding: 0; }
.bulbs{
  height: 24px;
  background: radial-gradient(circle at 50% 50%, var(--butter) 0 5px, rgba(246,196,83,.28) 6px 9px, transparent 10px) 0 0 / 36px 24px repeat-x;
}
.sign-inner{ text-align:center; padding: clamp(40px,7vw,90px) 24px; }
.sign-inner .label{ color: var(--butter); margin-bottom: 18px; }
.sign-inner h1{ color: var(--cream); font-weight: 900; font-size: clamp(3.4rem, 12vw, 9.6rem); line-height: .84; margin: 0 auto .3em; max-width: 12ch; }
.sign-inner h1 em{ font-style: normal; color: var(--butter); }
.sign-inner .lede{ color: #D5DDE9; margin: 0 auto; }
.sign-stamps{ display:flex; gap: 16px; justify-content:center; flex-wrap:wrap; margin-top: 34px; }
.sign-stamps .stamp-s{ border-color: var(--butter); color: var(--cream); background: transparent; }
.sign-stamps .stamp-s b{ color: var(--cream); }
.course-list{ list-style:none; margin: 0; padding: 0; }
.course-list li{ display:flex; align-items:baseline; gap: 12px; padding: 14px 0; }
.course-list .c-name{ font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; }
.course-list .c-dots{ flex:1 1 24px; min-width: 24px; border-bottom: 3px dotted rgba(18,38,63,.5); transform: translateY(-5px); }
.course-list .c-what{ font-size: .86rem; font-weight: 700; color: var(--teal); text-align:right; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer{ background: var(--navy); color: var(--cream); padding: 60px 0 30px; }
.foot-grid{ display:grid; gap: 38px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 820px){ .foot-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-word{ font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: .88; }
.foot-word em{ font-style: normal; color: var(--butter); }
.footer p{ color: #AEBBCD; font-size: .93rem; max-width: 34ch; margin-top: 14px; }
.footer h4{ color: var(--butter); font-size: 1.2rem; letter-spacing: .12em; margin-bottom: 14px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom: 10px; }
.footer a{ text-decoration:none; font-size: .94rem; color: #DCE4EF; }
.footer a:hover{ color: var(--butter); }
.stars{ text-align:center; color: var(--butter); letter-spacing: .7em; margin: 44px 0 20px; font-size: .9rem; }
.foot-bottom{ display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap; font-size: .78rem; color: #8E9DB3; border-top: 1px solid rgba(251,244,228,.18); padding-top: 22px; font-weight: 600; }

.small{ font-size: .85rem; color: var(--ink-soft); }