/* ==========================================================================
   MAZZA — artisan sourdough
   --------------------------------------------------------------------------
   HOW TO EDIT THE LOOK
   Everything about the colors, spacing and rounding lives in the :root block
   directly below. Change a value there and it updates everywhere on the site.
   You do not need to touch anything further down unless you want to move
   things around.

     --oven        the dark page background
     --ember       the warm gold used for buttons, prices and highlights
     --cream       the main text color
     --radius      how rounded the corners are (bigger = rounder; it is
                   deliberately near-square right now)

   To make the site LIGHT instead of dark, swap --oven to #F7F4EF, --cream to
   #14110F, --oven-raised to #FFFFFF, --oven-sunk to #EDEAE5, --cream-dim to
   #6B6560 and --hairline to rgba(20,17,15,.14). That single change flips the
   whole site — though note the loaf photos are cut-outs designed for a dark
   background, so they will need a soft shadow to sit properly on white.
   ========================================================================== */

:root {
  /* ---- color ---- */
  --oven:         #0B0B0C;   /* page ground — neutral black, not warm        */
  --oven-raised:  #141416;   /* cards, nav bar, any raised surface           */
  --oven-sunk:    #060607;   /* footer, the darkest wells                    */
  --ember:        #E8B84B;   /* accent: buttons, prices, rules               */
  --ember-deep:   #C99A2E;   /* accent on hover / pressed                    */
  --ember-glow:   rgba(232, 184, 75, .12);
  --cream:        #FAFAF7;   /* primary text                                 */
  --cream-dim:    #8A8A85;   /* secondary text, captions                     */
  --hairline:     rgba(250, 250, 247, .10);
  --hairline-lit: rgba(250, 250, 247, .22);

  /* ---- shape ---- */
  --radius:       3px;
  --radius-sm:    2px;
  --radius-pill:  3px;    /* was 999px — squared, not pills */

  /* ---- measure ---- */
  --container:    68rem;
  --measure:      68ch;

  /* ---- type ---- */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* so anchored sections clear the sticky nav */
}

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

body {
  margin: 0;
  background: var(--oven);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A very quiet warm glow at the top of the page — the mouth of the oven. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--ember-glow) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.032em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--ember); text-underline-offset: .18em; }
a:hover { color: var(--ember-deep); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--ember); color: var(--oven);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--oven); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

section { padding-block: clamp(5rem, 12vw, 9rem); }

.section-head { margin-bottom: clamp(2.6rem, 5vw, 4rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 .9rem;
}

.section-head h2 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); }

.lede {
  color: var(--cream-dim);
  font-size: 1.075rem;
  max-width: 46ch;
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* ==========================================================================
   SCROLL REVEAL
   --------------------------------------------------------------------------
   Deliberately inverted from the usual pattern: nothing is hidden by default.
   app.js adds .js-anim to <html> ONLY when IntersectionObserver exists AND the
   visitor has not asked for reduced motion. So with JavaScript off, on an old
   browser, or with reduced motion on, no element is ever opacity:0 — the page
   just renders. There is no way for this to swallow content.
   ========================================================================== */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Cards inside a revealed section come in just behind it, one after another. */
.js-anim .reveal .bread-grid > *,
.js-anim .reveal .gallery > *,
.js-anim .reveal .steps > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js-anim .reveal.is-in .bread-grid > *,
.js-anim .reveal.is-in .gallery > *,
.js-anim .reveal.is-in .steps > * {
  opacity: 1;
  transform: none;
}
.js-anim .reveal.is-in :is(.bread-grid, .gallery, .steps) > *:nth-child(1) { transition-delay: .06s; }
.js-anim .reveal.is-in :is(.bread-grid, .gallery, .steps) > *:nth-child(2) { transition-delay: .13s; }
.js-anim .reveal.is-in :is(.bread-grid, .gallery, .steps) > *:nth-child(3) { transition-delay: .20s; }
.js-anim .reveal.is-in :is(.bread-grid, .gallery, .steps) > *:nth-child(4) { transition-delay: .27s; }
.js-anim .reveal.is-in :is(.bread-grid, .gallery, .steps) > *:nth-child(5) { transition-delay: .34s; }

/* ==========================================================================
   NAV — button pills, no hamburger
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.wordmark:hover { color: var(--cream); }
.wordmark .dot { color: var(--ember); }

/* The pill row. Scrolls sideways on small screens instead of wrapping. */
.nav-links {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .3rem 0;
  /* fade the right edge so it reads as scrollable */
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.nav-links::-webkit-scrollbar { display: none; }

@media (min-width: 720px) {
  .nav-links { mask-image: none; -webkit-mask-image: none; overflow: visible; }
}

.nav-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream-dim);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease);
}
.nav-pill:hover {
  color: var(--cream);
  background: var(--oven-raised);
  border-color: var(--hairline);
}
.nav-pill.is-active {
  color: var(--ember);
  background: var(--ember-glow);
  border-color: rgba(232, 184, 75, .34);
}
.nav-pill.is-cta {
  color: var(--oven);
  background: var(--ember);
  border-color: var(--ember);
}
.nav-pill.is-cta:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--oven); }

/* The Contact button sits OUTSIDE the scrolling pill row, so on a phone it is
   always visible even when the section pills have scrolled away. */
.nav-contact { flex: none; margin-left: .5rem; }

/* On small screens the section labels shorten to "Bread" and "How", and the
   wordmark tightens up, to leave the most room for the pills. */
@media (max-width: 640px) {
  .nav-long { display: none; }
  .nav-inner { gap: .6rem; min-height: 3.9rem; }
  .wordmark { font-size: 1.02rem; letter-spacing: .16em; }
  .nav-pill { padding: .5rem .8rem; font-size: .85rem; }
  .nav-links { gap: .25rem; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ember); color: var(--oven); border-color: var(--ember); }
.btn-primary:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--oven); }

.btn-ghost { background: transparent; color: var(--cream); border-color: var(--hairline-lit); }
.btn-ghost:hover { background: var(--oven-raised); border-color: var(--cream-dim); color: var(--cream); }

.btn-block { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  padding-block: clamp(5.5rem, 15vw, 10rem) clamp(4rem, 9vw, 6.5rem);
}

.hero h1 {
  font-size: clamp(3.1rem, 10.5vw, 7rem);
  margin-bottom: .32em;
}
.hero h1 em {
  font-style: italic;
  color: var(--ember);
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  color: var(--ember);
  margin-bottom: 1.1rem;
}

.hero-lede {
  font-size: clamp(1.075rem, 2.2vw, 1.3rem);
  color: var(--cream-dim);
  max-width: 40ch;
  margin-bottom: 2.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 3rem;
}

/* the three little facts under the hero */
.hero-facts {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .hero-facts { grid-template-columns: repeat(3, 1fr); } }

.fact { background: var(--oven); padding: 1.35rem 1.5rem; }
.fact dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember); margin-bottom: .35rem;
}
.fact dd { margin: 0; color: var(--cream); font-size: .975rem; line-height: 1.5; }

/* ==========================================================================
   BAKED WITH PURPOSE — the fundraiser band
   ========================================================================== */

#purpose { padding-block: 0; }

.purpose {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(232, 184, 75, .32);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 140% at 0% 0%, var(--ember-glow) 0%, transparent 62%),
    var(--oven-raised);
  overflow: hidden;
}
/* the same ember rule the story pull-quote uses, so the two bands rhyme */
.purpose::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ember);
}

.purpose .eyebrow { margin-bottom: .7rem; }

.purpose-head {
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  margin-bottom: .55em;
  max-width: 20ch;
}

.purpose-body {
  color: var(--cream-dim);
  font-size: 1.03rem;
  max-width: 58ch;
  margin-bottom: .9rem;
}
.purpose-body strong { color: var(--ember); font-weight: 700; }

.purpose-thanks {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream);
}

/* ==========================================================================
   THE BREAD — flavor cards
   ========================================================================== */

.bread-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .bread-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bread-grid { grid-template-columns: repeat(3, 1fr); } }

.loaf {
  display: flex;
  flex-direction: column;
  background: var(--oven-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.35rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.loaf:hover { border-color: var(--hairline-lit); }

.loaf-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.loaf h3 { font-size: 1.45rem; margin: 0; }
.loaf-price {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ember);
  white-space: nowrap;
}
.loaf-note { color: var(--cream-dim); font-size: .95rem; margin-bottom: 1.35rem; }

.shapes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid var(--hairline);
  margin-top: auto;
  padding-top: 1.15rem;
}

/* Round / oval are just labels now — the site shows the menu, the ordering
   happens by text. */
.shape-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: .88rem;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}
.shape-chip small {
  font-weight: 400;
  font-size: .75rem;
  color: var(--cream-dim);
}
.shape-glyph { flex: none; color: var(--ember); opacity: .85; }

/* The one place the bread section asks for the order */
.order-cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  background: var(--oven-raised);
}
.order-cta p {
  margin: 0;
  flex: 1 1 22rem;
  color: var(--cream-dim);
  font-size: .98rem;
}
.order-cta strong { color: var(--cream); font-weight: 700; }
.order-cta .btn { flex: none; }

@media (max-width: 540px) {
  .order-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .order-cta .btn { width: 100%; }
}

/* ==========================================================================
   OUR STORY
   ========================================================================== */

.story { display: grid; gap: 2.25rem; align-items: start; }
@media (min-width: 880px) {
  .story { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; }
}

.story-body p { color: var(--cream-dim); }
.story-body p:last-child { margin-bottom: 0; }

.story-body p.story-lead {
  color: var(--cream);
  font-size: 1.15rem;
  line-height: 1.6;
}

.story-quote {
  margin: 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--ember);
}
.story-quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  line-height: 1.32;
  color: var(--cream);
  max-width: 26ch;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.steps {
  display: grid;
  gap: 1.15rem;
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step-card {
  position: relative;
  background: var(--oven-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem 1.6rem;
}
.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ember);
  display: block;
  margin-bottom: .85rem;
}
.step-card h3 { font-size: 1.25rem; margin-bottom: .45rem; }
.step-card p { color: var(--cream-dim); font-size: .96rem; margin: 0; }

.how-note {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding: 1.15rem 1.4rem;
  border: 1px dashed var(--hairline-lit);
  border-radius: var(--radius);
  color: var(--cream-dim);
  font-size: .93rem;
}
.how-note strong { color: var(--cream); font-weight: 700; }

/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  /* a warm pool of light under the loaf — the tile reads as an oven mouth */
  background:
    radial-gradient(72% 62% at 50% 58%, var(--ember-glow) 0%, transparent 70%),
    var(--oven-raised);
}
/* Each tile takes its own photo's shape, set inline as --ar, so the loaf fills
   it instead of floating in dead space. The opening shot runs the full width as
   a wide banner. */
.shot { aspect-ratio: var(--ar, 3 / 2); }
@media (min-width: 760px) {
  .shot:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* Most of the photos are cut-outs on a transparent background, so the loaf is
   shown whole and floats on the tile rather than being cropped to fill it. */
.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
}
.shot:nth-child(1) img { padding: 4% 6%; }

/* A photo that ISN'T a cut-out — a full-bleed texture shot — gets this class
   so it fills its tile edge to edge instead. */
.shot-fill { background: var(--oven-raised); }
.shot-fill img { object-fit: cover; padding: 0; }

/* Kept for anyone who hand-writes an empty tile */
.shot-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.25rem;
  color: var(--cream-dim);
  font-size: .8rem;
  letter-spacing: .04em;
  background:
    repeating-linear-gradient(135deg,
      rgba(250,250,247,.03) 0 10px, transparent 10px 20px),
    var(--oven-raised);
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: 1.15rem;
  align-items: start;
}
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; } }

.contact-card {
  background: var(--oven-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
}
.contact-card + .contact-card { margin-top: 1.15rem; }
.contact-card h3 { font-size: 1.2rem; margin-bottom: .7rem; }

/* Text helpers inside the contact cards (these replaced inline styles) */
.card-note     { color: var(--cream-dim); font-size: .95rem; }
.card-intro    { color: var(--cream-dim); font-size: .95rem; margin-bottom: 1.1rem; }
.card-footnote { color: var(--cream-dim); font-size: .93rem; margin-top: 1.25rem; }
.card-action   { margin-top: 1.3rem; margin-bottom: 0; }

.phone-line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 600;
  color: var(--ember);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1.25rem;
  letter-spacing: -.01em;
}
.phone-line:hover { color: var(--ember-deep); }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
  color: var(--cream-dim);
  font-size: .97rem;
}
.checklist li:last-child { margin-bottom: 0; }
.checklist li strong { color: var(--cream); font-weight: 600; }
.checklist li::before {
  content: "";
  position: absolute;
  left: .35rem; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
}

.detail-list { margin: 0; }
.detail-list dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember); margin-bottom: .3rem;
}
.detail-list dd {
  margin: 0 0 1.25rem;
  color: var(--cream);
  font-size: .99rem;
  line-height: 1.55;
}
.detail-list dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   404
   ========================================================================== */

.notfound { padding-block: clamp(4rem, 12vw, 8rem); }
.notfound h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: .4em; }
.notfound .lede { margin-bottom: 2rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--oven-sunk);
  border-top: 1px solid var(--hairline);
  padding-block: 3rem 2.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
}
.footer .wordmark { font-size: 1.15rem; margin-bottom: .6rem; display: inline-block; }
.footer-col { min-width: 12rem; }
.footer-col h4 {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-dim);
  margin: 0 0 .7rem;
}
.footer-col p, .footer-col a {
  font-size: .93rem;
  color: var(--cream-dim);
  margin: 0 0 .4rem;
  display: block;
  text-decoration: none;
}
.footer-col a:hover { color: var(--ember); }
.colophon {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  color: var(--cream-dim);
}