/* Munchie Man — Davis, CA
   Black ink on warm paper. Big type, hairline rules, lots of air. */

:root {
  --ink:    #14110f;
  --paper:  #f7f5f1;
  --grey:   #6d665e;
  --rule:   #d8d2c8;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(4.5rem, 12vh, 11rem);

  /* 12px floor for the tracked uppercase labels. Editorial design loves 11px
     caps; below 12px it stops being readable for a lot of people. */
  --label: 0.75rem;
  --tap: 44px;   /* WCAG / HIG minimum interactive size */

  /* header height, derived once so the hero can subtract it exactly */
  --mark-h: clamp(2.5rem, 6vw, 3.3rem);
  --bar-h: calc(var(--mark-h) + 1.4rem + 1px);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

/* Small tracked-caps links are ~19px tall — well under the 44px minimum.
   Rather than pad them (which would break the header rhythm and the
   underline's relationship to the text), extend the hit area with an overlay.
   The link looks identical; the tappable box is 44px tall. */
.bar nav a,
.ig {
  position: relative;
}
.bar nav a::after,
.ig::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tap);
  transform: translateY(-50%);
}

/* Honour reduced-motion globally, including the transitions declared further
   down. Individual components opt out of their own animations too, but this
   catches anything added later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--pad);
  background: rgba(247, 245, 241, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.bar__mark {
  display: inline-flex; align-items: center;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}
.bar__mark img {
  height: var(--mark-h);
  width: auto;
  /* hung slightly crooked, and multiplied so the ink sits on the paper */
  transform: rotate(-2deg);
  mix-blend-mode: multiply;
}

.bar__mark span,
.bar nav a {
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.bar__mark { text-decoration: none; }

/* Below ~352px the wordmark and the nav link fight for the bar. Drop the
   wordmark — the drawn mark is right beside it and the link is already
   labelled "Munchie Man — home", so nothing is lost to a screen reader. */
@media (max-width: 22rem) {
  .bar__mark span { display: none; }
}

.bar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.bar nav a {
  color: var(--grey);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.bar nav a:hover { color: var(--ink); border-color: var(--ink); }
.bar nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

.bar__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  margin: calc(var(--tap) * -0.28) calc(var(--tap) * -0.28) calc(var(--tap) * -0.28) 0;
  padding: 0;
  background: none; border: none; color: var(--ink);
  cursor: pointer;
}
.bar__toggle svg { width: 1.4rem; height: 1.4rem; }

/* Six nav links plus the wordmark stop fitting comfortably below ~64rem —
   collapse behind a toggle button instead of wrapping mid-bar. Gated on
   .has-js (set unconditionally, unlike .reveal's .js) so a no-JS visitor
   still gets the full nav, just wrapped onto multiple lines. */
@media (max-width: 64rem) {
  .has-js .bar__toggle { display: flex; }
  .has-js .bar nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.9rem); right: calc(var(--pad) * -1 + 0.6rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    min-width: 12rem;
    padding: 1.2rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 0.8rem 2rem rgba(20, 17, 15, 0.12);
  }
  .has-js .bar nav.is-open { display: flex; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  /* full-bleed on purpose — no max-width, so the background paths reach the
     screen edges without a 100vw hack. .hero__inner caps the content. */
  /* svh, not vh: mobile browser chrome would otherwise push the hero taller
     than the screen and hide the Instagram link below the fold. */
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  display: grid;
  place-items: center;
  /* heavier bottom padding: content reads as centered when nudged slightly up */
  padding: 2.5rem var(--pad) 4rem;
}

.hero__inner {
  width: 100%;
  max-width: 78rem;
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__art {
  width: min(100%, 21rem);
  justify-self: start;
  transform: rotate(1.4deg);   /* hung slightly crooked */
  mix-blend-mode: multiply;    /* ink sits on the paper instead of on a white box */
}

@media (min-width: 56rem) {
  .hero__art { width: 100%; justify-self: end; }
}

/* Decorative only, so it lives in CSS and stays invisible to screen readers.
   Absolutely positioned, therefore not a flex item of .hero. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/paths.svg") center / cover no-repeat;
  opacity: 0.8;
  pointer-events: none;
}
.hero > * { position: relative; } /* lift the type above the paths */

.ig {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
}
.ig svg { width: 1.15rem; height: 1.15rem; }
.ig:hover { color: var(--ink); }

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.2em; text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.6rem, 15vw, 11.5rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 36ch;
  margin: 2.25rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- editorial spreads ---------- */

.spread {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--gap) var(--pad);
  scroll-margin-top: calc(var(--bar-h) + 1rem); /* clears the sticky header on #roles jumps */
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
}

@media (min-width: 56rem) {
  .spread { grid-template-columns: 14rem minmax(0, 1fr); }
  .spread__label { position: sticky; top: calc(var(--bar-h) + 2rem); align-self: start; }
}

.spread__label {
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.18em; text-transform: uppercase;
}
/* real heading (h1 on single-topic pages, h2 when a page has several
   spreads) so screen-reader users can navigate by section — styled to look
   like the small label it is either way */
.spread__label h1, .spread__label h2 { font: inherit; margin: 0; }
.num {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.spread__body { max-width: 60ch; }
.roles__photo {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  margin: 0 0 1.75rem;
  transform: rotate(-1.4deg);
}
.spread__body > p {
  margin: 0 0 1.4em;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  text-wrap: pretty;
}

/* ---------- Christopher's story ----------
   Emphasis only — which paragraph is set large or italic. The words are
   untouched, so no line is pulled out, duplicated or dropped. */

/* selectors match `.spread__body > p`'s specificity so no !important is needed */

.spread__body > .story__open {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}

.spread__body > .story__beat {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.3;
  margin: 2.6rem 0;
  max-width: 24ch;
}

.spread__body > .story__sign {
  margin: 2.5rem 0 0;
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- gallery ----------
   A static collage of the 4 posters. No script, no scroll, no motion. */

.gallery {
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
}

.gallery__head {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.gallery__head h2 {
  margin: 0 0 0.7rem;
  color: var(--grey);
  font-size: var(--label); font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
}

.collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  max-width: 60rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto clamp(3rem, 7vh, 5rem);
  padding: 0 var(--pad);
}
.collage li {
  width: clamp(8rem, 19vw, 14rem);
  margin: 0 clamp(-2.5rem, -3vw, -1rem);
  box-shadow: 0 1.2rem 2.5rem rgba(20, 17, 15, 0.18);
}
.collage img {
  display: block;
  width: 100%;
  height: auto;
  /* grayscale unifies posters shot on wood with those shot on paper, and keeps
     the page to the black/white/grey palette */
  filter: grayscale(1);
}

/* Hand-set scatter — fixed, not computed, since it's exactly these 4 posters. */
.collage li:nth-child(1) { transform: rotate(-6deg) translateY(0.6rem);  z-index: 2; }
.collage li:nth-child(2) { transform: rotate(4deg)  translateY(-1rem);   z-index: 3; }
.collage li:nth-child(3) { transform: rotate(-3deg) translateY(1rem);    z-index: 1; }
.collage li:nth-child(4) { transform: rotate(6deg)  translateY(-0.4rem); z-index: 4; }

/* ---------- travel photos ----------
   Full colour, unlike the grayscaled posters — these are the one place on the
   site where the photographs are the point. */

.trips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  list-style: none;
  max-width: 68rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto clamp(3rem, 7vh, 5rem);
  padding: 0 var(--pad);
}
.trips figure {
  margin: 0;
  /* hung slightly crooked, alternating, like the posters and the logo */
  transform: rotate(-1deg);
}
.trips li:nth-child(even) figure { transform: rotate(1deg); }
.trips img {
  width: 100%;
  box-shadow: 0 0.8rem 2rem rgba(20, 17, 15, 0.16);
}
.trips figcaption {
  margin-top: 0.8rem;
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- apply ---------- */

.apply {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  background: var(--ink); color: var(--paper);
  font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--quiet { background: transparent; color: var(--ink); }
.btn--quiet:hover { background: var(--ink); color: var(--paper); }

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

.foot {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--gap) var(--pad) 3.5rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 2rem 4rem;
  align-items: end; justify-content: space-between;
  font-size: var(--label); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--grey);
}
.foot p { margin: 0; }
.foot__where { line-height: 1.9; color: var(--ink); }

/* ---------- CTA rows, hours, map, forms ---------- (home / visit / contact) */

.cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.badge {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ink);
  font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase;
}

.hours {
  margin: 0 0 1.4em;
  max-width: 26rem;
}
.hours > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.hours > div:last-child { border-bottom: 1px solid var(--rule); }
.hours dt, .hours dd { margin: 0; font-weight: 400; }
.hours dt { color: var(--grey); }

.map {
  aspect-ratio: 4 / 3;
  max-width: 34rem;
  margin: 0 0 1.75rem;
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.05);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.field {
  display: block;
  margin: 0 0 1.4rem;
  max-width: 34rem;
}
.field span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--grey);
  font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase;
}
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 8rem; }

.form__hint {
  margin: -0.6rem 0 1.6rem;
  color: var(--grey);
  font-size: var(--label);
}

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.in { opacity: 1; transform: none; }

@media print {
  .bar, .skip { display: none; }
  body { background: #fff; }
}