/* The Miles We Run
   Ported from Squarespace, 2026-08-21. Values below were measured off the live
   site at a 1440px viewport, not eyeballed:
     body      Poppins 300, 16px / 28.8px, #000 on #fff
     headings  futura-pt 500 (700 for bold)  ->  Jost, see note
     hero h1   62.08px / 76.5px, white
     h3        34.43px / 45.89px
     h4        25.22px / 34.5px
     button    Poppins 500 16px, ls 0.32px, #fff on #000, 16px/20.8px, radius 10px
     grid      26 columns (24 content + 2 gutters), 11px gap, max 1500px
     header    92px tall, absolute over the hero, transparent

   FONT NOTE: the original headings use futura-pt, which the site rented through
   Squarespace's Adobe Fonts kit. That kit dies with the Squarespace subscription,
   so headings are set in Jost, the closest free Futura revival. If Alison has an
   Adobe Creative Cloud subscription, swap the stack back to futura-pt and add her
   own Adobe Fonts kit link, and it becomes pixel-identical again. */

:root {
  --ink: #000;
  --paper: #fff;
  --paper-light: #f7f6f4;
  --rule: #e3e1de;

  --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Jost", "Futura", "Century Gothic", "Poppins", sans-serif;

  --site-max: 1500px;
  --gap: 11px;
  /* measured off the live site at 1440px: 29px content rows, 26px hero rows */
  --row: max(24px, 2.014vw);
  --row-hero: max(21px, 1.806vw);
  --gutter: max(20px, 3.235vw);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }
a:hover { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  line-height: 1.33;
}
h1 { font-size: 62.08px; line-height: 76.5px; }
h2 { font-size: 43.04px; line-height: 57.36px; }
h3 { font-size: 34.43px; line-height: 45.89px; }
h4 { font-size: 25.22px; line-height: 34.5px; }
strong { font-weight: 700; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* ---------- 26 column fluid grid, as the original ---------- */

.section { position: relative; }
/* Columns that must share a top edge rather than float to their own centre.
   Both selectors carry the .grid class deliberately: the base .grid rules below
   have equal specificity and would otherwise win on source order alone. */
.grid.grid--top { align-items: start; }
.grid.grid--top > * { align-self: start; }

/* the cover is a square source. Contain it, never crop it, or the book gets
   sliced top and bottom. */
.book-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* awards sit on one baseline as a pair, instead of two independently floating blocks */
.awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.award { margin: 0; }
.award img { width: 100%; max-width: 190px; margin: 0 auto 14px; }
.award figcaption {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #4a4540;
}

/* venue marks live with the venue name */
.event-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 18px; }
.event-marks .event-logo { max-width: 150px; margin: 0; }
.section--inset  .grid { max-width: calc(var(--site-max) - 115px); margin: 0 auto; }
.section--light  { background: var(--paper-light); }

.grid {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(24, minmax(0, calc((var(--site-max) - (var(--gap) * 23)) / 24)))
    minmax(var(--gutter), 1fr);
  grid-auto-rows: minmax(var(--row), auto);
  gap: var(--gap);
  align-items: stretch;
}
/* each block is centred in its grid area, as Squarespace does, with its own
   internal layout untouched so inline <strong> and <em> keep flowing */
.grid > * { min-width: 0; align-self: center; }
.grid > img, .grid > * > img { width: 100%; }

/* an image block that fills and crops its grid area rather than sitting centred */
.fill { align-self: stretch; }
.fill img { height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px var(--gutter) 0;
}
.site-header--solid { position: static; background: var(--paper); }

.wordmark { display: block; }
.wordmark img { width: 500px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.site-nav a {
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.98);
  text-decoration: none;
  padding: 1.6px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: rgba(0, 0, 0, 0.4); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* mobile menu toggle, hidden on desktop */
.nav-toggle { display: none; }

/* ---------- button ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  color: var(--paper);
  background: var(--ink);
  padding: 16px 20.8px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;      /* the label sits in a 3-column area and must not wrap */
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.82; color: var(--paper); }

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 300;
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.marquee__track span { padding-right: 0.5em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- hero ---------- */

.hero { padding-top: 92px; padding-bottom: 57.6px; }
.hero .grid { grid-auto-rows: var(--row-hero); row-gap: 0; }
.hero__media { position: relative; overflow: hidden; align-self: stretch; }
.hero__media img { width: 100%; height: 100%; object-fit: contain; }
.hero__title, .hero__sub { position: relative; z-index: 2; }
.hero__title,
.hero__sub { color: var(--paper); text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,0.28); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--paper-light);
  padding: 34px 0;
  font-size: 16px;
}
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.footer-social { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand { font-family: var(--font-display); font-size: 25.22px; line-height: 34.5px; }

/* ---------- page furniture shared by inner pages ---------- */

.page-title { text-align: center; }
/* page titles are h1 for structure, sized like the h3 the original used */
.as-h3 { font-size: 34.43px; line-height: 45.89px; }
@media (max-width: 767px) { .as-h3 { font-size: 26px; line-height: 34px; } }
.eyebrow {
  font-family: var(--font-display);
  font-size: 25.22px;
  line-height: 34.5px;
  text-align: center;
}
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.stores { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--gap); }
.stores a { display: block; }
.stores img { width: 100%; }

.review { max-width: 68ch; margin: 0 auto; text-align: center; }
.review__stars { font-size: 15px; letter-spacing: 3px; color: #c9873a; }
.review__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  margin: 12px 0 6px;
  text-wrap: balance;
}
.review__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a837c;
  margin-bottom: 18px;
}
.review p { text-wrap: pretty; }

}

.quote { max-width: 68ch; }
.quote p:first-child {
  font-size: 19px;
  line-height: 1.62;
  margin: 0 0 16px;
  text-wrap: pretty;
}
/* No hanging quote mark. Only five of the seven endorsements are quoted, so
   hanging them left two flush and five poking out, which read as ragged.
   Everything starts on the same edge instead. */
.quote__by {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: #6b6560;
  margin-top: 0;
  max-width: 58ch;
}
.quote__by em { font-style: italic; }

.entry { border-top: 1px solid var(--rule); padding: 52px 0; }
/* both columns start at the top, so artwork always sits next to its own headline */
.entry .grid { align-items: start; }
.entry .grid > *, .entry__media, .entry__body { align-self: start; }
.entry__date {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a837c;
  margin-bottom: 10px;
}
.entry__title {
  font-family: var(--font-display);
  font-size: 25.22px;
  line-height: 1.28;
  margin-bottom: 18px;
  text-wrap: pretty;
}
.entry__body { max-width: 68ch; }
.entry__body p { margin-bottom: 0.9em; }
.entry__art { width: 100%; max-width: 340px; }

/* a lead-in line and its list read as one unit */
.list-lead { margin-bottom: 0.35em; font-weight: 500; }
.topics { margin: 0 0 1em; padding-left: 1.1em; }
.topics li { margin-bottom: 0.28em; }

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.badges img { height: 30px; width: auto; }
.badges a { display: inline-flex; opacity: 0.9; transition: opacity 0.15s ease; }
.badges a:hover { opacity: 1; }

/* logos are sized as logos; photographs get the full column */
.event-logo { max-width: 200px; margin: 0 0 20px; }
.event-photo { width: 100%; margin: 0 0 18px; }
.entry__media img:last-child { margin-bottom: 0; }

/* ---------- responsive: the original collapses to one column at 768 ---------- */

@media (max-width: 767px) {
  :root { --gutter: 6vw; }
  .grid {
    grid-template-columns: var(--gutter) repeat(8, minmax(0, 1fr)) var(--gutter);
    grid-auto-rows: minmax(24px, auto);
  }
  /* content blocks stack; !important is needed because the areas are inline styles */
  .grid > * { grid-column: 2 / 10 !important; grid-row: auto !important; }

  /* the hero keeps its overlay on mobile too, on the original's own 10-track areas.
     16 rows at 14px matches the 16:9 portrait's height at phone widths, so the
     image fills its area instead of floating in white space. */
  .hero .grid { row-gap: 0; grid-auto-rows: minmax(14px, auto); }
  .hero { padding-top: 8px; padding-bottom: 24px; }
  /* on mobile the marquee sits over the dark portrait, so it flips to white */
  .hero .marquee { font-size: 16px; line-height: 22px; color: var(--paper);
                   text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
  /* cropping to fill only makes sense in the desktop grid */
  .fill { align-self: center; }
  .fill img { height: auto; object-fit: contain; }
  .hero .marquee     { grid-area: 1 / 2 / 3 / 10 !important; }
  .hero .hero__media { grid-area: 1 / 1 / 17 / 11 !important; }
  .hero .hero__title { grid-area: 9 / 1 / 12 / 11 !important; font-size: 30px; line-height: 38px; }
  .hero .hero__sub   { grid-area: 11 / 1 / 14 / 11 !important; font-size: 15px; line-height: 22px; }
  h1 { font-size: 38px; line-height: 46px; }
  h2 { font-size: 30px; line-height: 40px; }
  h3 { font-size: 26px; line-height: 34px; }
  h4 { font-size: 20px; line-height: 29px; }
  .site-header { position: static; height: auto; padding: 18px var(--gutter); }
  .site-header + .hero { padding-top: 0; }
  .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
  .wordmark img { width: 220px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 14px; }
  .stores { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* thumb-sized tap targets: footer links were 22 to 29px tall, under the 44px
     minimum, which makes them a genuine miss-and-retry on a phone */
  .site-nav a, .footer-nav a, .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-social a { min-width: 44px; min-height: 44px; justify-content: center; }
  .footer-social svg { width: 22px; height: 22px; }
  .footer-nav { gap: 4px 18px; }
  /* entry and quote type steps down with everything else on a phone */
  .entry__title { font-size: 20px; line-height: 1.3; }
  .entry { padding: 36px 0; }
  .entry__art { max-width: 100%; }
  .quote p:first-child { font-size: 17px; }
  .review__title { font-size: 19px; }
  .event-logo { max-width: 150px; }
  .footer-social { justify-content: center; }
  .footer-nav { justify-content: center; }
}

/* ---------- Mailchimp signup form ---------- */

.signup { display: flex; flex-direction: column; gap: 6px; position: relative; }
.signup__note { font-size: 13px; opacity: 0.7; margin-bottom: 10px; }
.signup label { font-size: 14px; margin-top: 12px; }
.signup input[type="email"],
.signup input[type="text"],
.signup textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #c9c6c2;
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
}
.signup input:focus, .signup textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}
.signup textarea { resize: vertical; }
.signup .btn { align-self: flex-start; margin-top: 22px; border: 0; cursor: pointer; }