/* Terra Cafe — home page. All values come from DESIGN.md. */

:root {
  /* Dark */
  --roast: #1E1612;
  --espresso: #2B1F19;
  --charcoal: #34302C;
  --charcoal-raised: #423C37;
  /* Light */
  --cream: #F3EBDD;
  --parchment: #E7DAC6;
  /* Text */
  --oat: #B5A792;
  --taupe: #8C7B6B;
  --bark: #5C4B3F;
  /* Accent */
  --terracotta: #9E5232;
  --terracotta-deep: #864428;
  --terracotta-light: #C4744E;
  /* Lines */
  --line-dark: rgba(243, 235, 221, 0.14);
  --line-dark-strong: rgba(243, 235, 221, 0.28);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Five type steps */
  --step-display: clamp(4rem, 2.4rem + 5.4vw, 7rem);
  --step-h2: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --step-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --step-body: 1.0625rem;
  --step-small: 0.875rem;

  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-11: 160px;

  --margin: 20px;
  --column: 100%;
  --stage-left: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
}

@media (min-width: 768px) {
  :root { --margin: 40px; }
}

/* The pinned left/right story layout starts at 900px; the full nav and wider margins at 1024px. */
@media (min-width: 900px) {
  :root {
    --stage-left: 46vw;
    --column: min(600px, calc(var(--stage-left) - var(--margin) - var(--space-7)));
  }
}

@media (min-width: 1024px) {
  :root { --margin: 64px; }
}

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

html {
  color-scheme: dark;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, dl, dd, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display);
  line-height: 1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--step-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--step-h3);
  line-height: 1.25;
  font-weight: 600;
}

p { max-width: 64ch; }
.lead { color: var(--oat); max-width: 56ch; font-size: 1.125rem; }

a { color: inherit; }

::selection { background: var(--terracotta); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--terracotta-light);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--espresso);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid transparent; /* taste-skill-ignore: transparent until the secondary style */
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--terracotta); color: var(--cream); }
.btn-primary:hover { background: var(--terracotta-deep); }

.btn-secondary { background: transparent; color: var(--cream); border-color: var(--line-dark-strong); } /* taste-skill-ignore: DESIGN.md secondary button */
.btn-secondary:hover { border-color: var(--cream); background: rgba(243, 235, 221, 0.06); }

.btn-compact { min-height: 44px; padding: 0 20px; }

.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: var(--terracotta-light);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(196, 116, 78, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--terracotta-light); }
.text-link span { display: inline-block; transition: transform 300ms var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 64px;
  padding: 0 max(var(--margin), env(safe-area-inset-right)) 0 max(var(--margin), env(safe-area-inset-left));
  background: var(--espresso);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(30, 22, 18, 0.96);
  box-shadow: inset 0 -1px 0 var(--line-dark); /* taste-skill-ignore: sticky bar hairline */
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}

.site-nav { display: none; gap: var(--space-6); }

/* Phone and tablet: a full-screen menu behind an icon button. */
.menu-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--cream);
  cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 1023px) {
  .site-header { gap: 8px; }
  .site-header .btn-compact { padding: 0 14px; letter-spacing: 0.08em; }
}
@media (max-width: 1023px) {
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: fixed;
    inset: 64px 0 0 0;
    padding: var(--space-7) var(--margin);
    background: var(--roast);
  }
  .site-nav.is-open a {
    font-family: var(--font-display);
    font-size: var(--step-h2);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--cream);
  }
  .menu-open { overflow: hidden; }
}
.site-nav a {
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(243, 235, 221, 0.8);
  padding: 12px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--cream); }

@media (min-width: 1024px) {
  .site-header { height: 80px; gap: var(--space-6); }
  .site-nav { display: flex; }
  .menu-toggle { display: none; }
}

/* ---------- Stage: the pinned coffee story ---------- */

.stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--stage-left);
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.scene {
  display: block;
  width: 100%;
  height: 100%;
}

.scene .ln {
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.5px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.scene .fill { fill: var(--bark); }
.scene .accent { fill: var(--terracotta); }
.scene .bean { fill: var(--bark); stroke: var(--cream); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.scene .speck { fill: var(--cream); }
.scene .stream { fill: var(--bark); stroke: var(--cream); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.scene .detail { display: none; }

@media (min-width: 900px) {
  .scene .ln, .scene .bean, .scene .stream { stroke-width: 2px; }
  .scene .detail { display: inline; }

  /* Fine print grain across the whole dark field (behind the text), desktop only. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* Ambient steam once the cup is resting at the end of the page. */
.is-resting .stage .steam {
  animation: steam-drift 7s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes steam-drift {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-4px); opacity: 0.7; }
}

/* ---------- Sections ---------- */

main, .site-footer { position: relative; z-index: 2; }

.section, .site-footer { padding-left: var(--margin); padding-right: var(--margin); }

.panel { width: var(--column); }
.panel > h2 { margin-bottom: var(--space-6); }
.panel > p + p { margin-top: var(--space-5); }
.panel > .lead { margin-bottom: var(--space-7); }

/* Phones and tablets (under 900px): text runs on the plain ground, and the coffee story is a
   full-screen intro at the top of the page instead of a background. */
.intro-stage { display: contents; }
.scroll-hint { display: none; }

@media (max-width: 899px) {
  .stage, .breather { display: none; }
  .panel { width: auto; }
  .section { padding-bottom: var(--space-9); }
  .hero { padding-top: 112px; }
  .site-footer .panel {
    background: var(--roast);
    margin: 0 calc(var(--margin) * -1);
    padding: var(--space-8) var(--margin);
  }

  /* The intro: 460svh tall with a sticky stage inside it. js/story.js plays the story over
     the first 300svh of scroll, then over the next 60svh moves the finished cup to the top
     and fades the hero in below it. svh units keep it steady when the toolbar hides.
     The stage is at least one screen tall but never clips: if the hero text needs more
     room than the screen has (small phones), the stage grows and nothing is cut off.
     .has-intro is full motion; .intro-static is reduced motion (finished cup, no scrolling). */
  .has-intro .intro { height: 460svh; padding: 0; }
  .intro-static .intro { padding: 0; }
  .has-intro .intro-stage,
  .intro-static .intro-stage {
    display: block;
    position: sticky;
    top: 0;
    min-height: 100svh;
  }
  .intro-static .intro-stage { position: relative; }
  .has-intro .intro .scene,
  .intro-static .intro .scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .has-intro .intro .still, .intro-static .intro .still { display: none; }
  .has-intro .intro + .section,
  .intro-static .intro + .section { padding-top: var(--space-9); }

  /* Hero text, in normal flow below the area the cup is framed in (--hero-top). */
  .has-intro .hero-content,
  .intro-static .hero-content {
    position: relative;
    z-index: 2;
    margin: 0 var(--margin);
    padding: var(--hero-top, 60svh) 0 var(--space-7);
    opacity: var(--reveal, 0);
    transform: translateY(calc((1 - var(--reveal, 0)) * 24px));
  }
  .has-intro .hero-content > .lead,
  .intro-static .hero-content > .lead { margin-bottom: 0; }
  .has-intro:not(.is-revealed) .hero-content { pointer-events: none; }
  .intro-static .hero-content { --reveal: 1; }

  .has-intro .scroll-hint {
    display: block;
    position: absolute;
    top: calc(100svh - 76px);
    left: 50%;
    z-index: 2;
    margin: 0;
    color: var(--cream);
    font-size: var(--step-small);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    transform: translateX(-50%);
    opacity: var(--hint, 1);
  }
  .scroll-hint::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 10px auto 0;
    border-right: 1.5px solid currentColor; /* taste-skill-ignore: chevron drawn from two strokes */
    border-bottom: 1.5px solid currentColor; /* taste-skill-ignore: chevron drawn from two strokes */
    transform: rotate(45deg);
    animation: hint-bob 2.4s var(--ease-out) infinite;
  }
  .is-resting .intro .steam {
    animation: steam-drift 7s ease-in-out infinite;
    transform-box: fill-box;
  }
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(5px) rotate(45deg); }
}

@media (min-width: 900px) {
  .section { padding-top: var(--space-11); padding-bottom: var(--space-11); }
  .hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: var(--space-9);
  }
  .hero + .section { padding-top: var(--space-8); }
}

/* Hero */
.hero h1 { margin-bottom: var(--space-6); }

/* Lounge: sit, stay, work, connect */
.ways {
  display: grid;
  gap: var(--space-6) var(--space-7);
}
.ways dt, .value-list dt {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 8px;
}
.ways dd, .value-list dd { color: var(--cream); }

@media (min-width: 600px) {
  .ways { grid-template-columns: 1fr 1fr; }
}

/* What we'll serve */
.serve-list {
  display: grid;
  column-gap: var(--space-7);
}
@media (min-width: 600px) {
  .serve-list { grid-template-columns: 1fr 1fr; }
}
.serve-list li {
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 var(--line-dark); /* taste-skill-ignore: DESIGN.md menu hairline */
}

/* Values */
.value-list {
  display: grid;
  gap: var(--space-6);
}
.value-list dt { font-size: var(--step-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.value-list dd { max-width: 44ch; }

/* Events: the gathering place */
.events .text-link { margin-top: var(--space-6); }

/* The coffee cart: the page's main offer, so it gets the most weight */
.cart .panel {
  background: var(--charcoal);
  padding: var(--space-8) var(--space-7);
}
.cart h2 {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.cart-intro { font-size: 1.25rem; line-height: 1.6; }
.cart .panel > p + p { margin-top: var(--space-5); }
.cart-audiences {
  display: grid;
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-7);
}
@media (min-width: 600px) {
  .cart-audiences { grid-template-columns: 1fr 1fr; }
}
.cart-audiences h3 { margin-bottom: 8px; }
.cart-audiences p { color: var(--oat); }
.cart-area {
  margin-top: var(--space-5);
  color: var(--oat);
  font-size: var(--step-small);
  font-weight: 600;
}
@media (min-width: 900px) {
  .cart { min-height: 120svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 899px) {
  .cart .panel { padding: var(--space-8) var(--margin); margin: 0 calc(var(--margin) * -1); }
  .cart-intro { font-size: 1.125rem; }
}

/* Embedded GoHighLevel widgets (opening form, booking calendar).
   The placeholder hides itself as soon as an iframe is pasted into the container. */
.embed {
  position: relative;
  width: 100%;
  margin-top: var(--space-6);
}
.embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0 !important;
}
.embed:has(iframe) .embed-placeholder { display: none; }
.embed-placeholder {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: var(--space-7) var(--space-6);
  background: var(--charcoal);
}
.embed-placeholder p { color: var(--oat); }
.embed-placeholder .embed-placeholder-title {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.25;
}
.embed-form iframe { min-height: 420px; }

/* Footer social icon */
.social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
}
.social-link svg { display: block; }

/* Footer */
.site-footer { padding-top: var(--space-9); padding-bottom: var(--space-7); }
@media (max-width: 899px) {
  .grain { display: none; }
  .site-footer { padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 900px) {
  .site-footer { padding-top: var(--space-8); }
}
.footer-mark {
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-7);
}
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin-bottom: var(--space-7);
}
.footer-cols nav, .footer-cols div { display: grid; gap: 4px; }
.footer-cols a {
  text-decoration: none;
  color: rgba(243, 235, 221, 0.8);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-cols a:hover { color: var(--cream); }
.legal { color: var(--oat); font-size: var(--step-small); }
@media (max-width: 899px) {
  .footer-cols { gap: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
  .footer-cols a { padding: 4px 0; }
  .footer-mark { font-size: var(--step-h2); margin-bottom: var(--space-6); }
}

/* ---------- Stills: the four stages as static pictures (reduced motion) ---------- */

.still { display: none; }

.is-static .stage { display: none; }
.is-static .still {
  display: block;
  margin: var(--space-8) 0 0;
}
/* Each still is a print on a darker plate: square corners, the whole subject centred
   with room around it (contain framing in js/story.js), and a short title beneath. */
.is-static .still-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--roast);
  overflow: hidden;
}
/* Stills show only each stage’s subject, without the room details, so nothing is cut at the frame. */
.is-static .still .detail { display: none; }
.is-static .still-frame svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.is-static .still figcaption {
  margin-top: var(--space-4);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.25;
}
@media (max-width: 899px) {
  .is-static .section { padding-bottom: var(--space-9); }
  .is-static .hero { padding-top: 112px; }
  .is-static .cart .still { margin-top: var(--space-7); }
}
@media (min-width: 900px) {
  .is-static .still-frame { aspect-ratio: 4 / 5; }
  .is-static .section { position: relative; }
  .is-static .still {
    position: absolute;
    top: var(--space-11);
    left: var(--stage-left);
    width: min(520px, calc(100vw - var(--stage-left) - var(--margin)));
    margin: 0;
  }
  .is-static .hero .still { top: 50%; transform: translateY(-50%); }
  .is-static .has-still { min-height: calc(min(520px, 100vw - var(--stage-left) - var(--margin)) * 1.25 + 2 * var(--space-11) + 64px); }
}

/* ---------- Entrance for section content ---------- */

.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Booking page ---------- */

.booking-wrap {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
}
.booking-intro, .booking-calendar {
  position: relative;
  z-index: 2;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.booking-intro { padding-top: 160px; padding-bottom: var(--space-9); }
.booking-calendar { padding-bottom: var(--space-9); }
.booking-intro h1 { margin-bottom: var(--space-6); }
.booking-note { margin-top: var(--space-5); font-weight: 600; }

.booking-intro-grid {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}
@media (min-width: 1024px) {
  .booking-intro-grid { grid-template-columns: 7fr 5fr; gap: var(--space-9); }
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}
.steps h2 {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 6px;
}
.steps p { color: var(--oat); }

.booking-calendar h2 { margin-bottom: var(--space-6); }

/* The calendar sits in a cream "daylight" frame so a light booking widget reads as part of the page. */
.embed-calendar {
  margin-top: 0;
  padding: var(--space-6);
  background: var(--cream);
  color: var(--espresso);
}
.embed-calendar iframe { min-height: 760px; }
.embed-calendar .embed-placeholder {
  min-height: 520px;
  justify-items: center;
  text-align: center;
  background: transparent;
}
.embed-calendar .embed-placeholder .embed-placeholder-title { color: var(--espresso); }
.embed-calendar .embed-placeholder p { color: var(--bark); max-width: 40ch; }
.embed-art { margin-bottom: var(--space-5); overflow: visible; }
.embed-art path, .embed-art rect, .embed-art line {
  fill: none;
  stroke: var(--espresso);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.embed-art .art-fill { fill: var(--terracotta); stroke: none; }

@media (max-width: 767px) {
  .booking-intro { padding-top: 112px; padding-bottom: var(--space-8); }
  .booking-calendar { padding-left: 0; padding-right: 0; padding-bottom: var(--space-9); }
  .booking-calendar h2 { padding: 0 var(--margin); }
  .embed-calendar { padding: var(--space-3) 0; }
  .embed-calendar iframe { min-height: 1000px; }
  .embed-calendar .embed-placeholder { min-height: 420px; padding: var(--space-7) var(--margin); }
}

.page-booking .site-footer { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.page-booking .site-footer .booking-wrap { background: none; }
@media (max-width: 767px) {
  .page-booking .site-footer { padding-top: var(--space-6); }
}

/* ---------- Phones and tablets: readable text ----------
   All running and secondary text in Cream (about 14:1 on Espresso, 12:1 on Warm
   Charcoal), body at 17px or more with a comfortable line height. */
@media (max-width: 899px) {
  body { font-size: 1.0625rem; line-height: 1.7; }
  .lead,
  .cart-audiences p,
  .cart-area,
  .steps p,
  .embed-form .embed-placeholder p,
  .legal,
  .footer-cols a,
  .site-nav a { color: var(--cream); }
  .lead { font-size: 1.125rem; line-height: 1.65; }
  .cart-area { font-size: 1.0625rem; }
}
@media (max-width: 1023px) {
  /* Fully solid nav, so nothing scrolling beneath it shows through. */
  .site-header.is-scrolled { background: var(--roast); }
}