/* ==========================================================================
   Marillas · main stylesheet

   1. Fonts
   2. Tokens
   3. Base
   4. Layout helpers
   5. Type and small components (labels, links, buttons, icons)
   6. Open status and hours tables
   7. Header and navigation
   8. Footer
   9. Motion preferences, forced colours, print
   Page sections are added below these, one block per page.
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------
   Self-hosted Latin subsets (SIL OFL, licences in assets/fonts/). */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* 2. Tokens ------------------------------------------------------------- */

:root {
  /* Palette, sampled from the logo and the photographs */
  --green: #015f51;        /* the logo's green */
  --green-deep: #0e211d;   /* bottle green from the photo shadows */
  --green-mid: #0a3d34;    /* between the two, for layered dark surfaces */
  --cream: #f3e8d2;        /* the logo's lettering */
  --cream-light: #f8f1e4;
  --oak: #b07a3f;          /* tables and chairs; decorative and large text only */
  --oak-ink: #7d5224;      /* oak dark enough for small text on cream */
  --sage: #a9b5a4;         /* stoneware */
  --amber: #c98b2b;        /* glass rims, lamp light */
  --teal: #0f6b6e;         /* the velvet banquette, used sparingly */
  --glow: #ffd9a0;         /* neon warm white */

  /* Type */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.38vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.68vw, 1.85rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.1vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.7rem + 1.8vw, 3.2rem);
  --step-5: clamp(2.49rem, 1.9rem + 2.9vw, 4.3rem);
  --step-6: clamp(2.99rem, 2.1rem + 4.4vw, 5.8rem);
  --step-7: clamp(3.4rem, 2rem + 7vw, 9rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-label: 0.2em;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --space-l: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --space-3xl: clamp(5rem, 3rem + 9vw, 11rem);

  /* Layout */
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --content-max: 90rem;    /* 1440px */
  --measure: 38rem;        /* comfortable line length for body copy */
  --header-h: clamp(3.75rem, 3.2rem + 1.6vw, 4.75rem);
  --radius: 3px;
  --hairline: 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 700ms;

  /* Paper grain: fractal noise in bottle-green ink at low alpha */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.055 0 0 0 0 0.13 0 0 0 0 0.114 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.82 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Default surface (cream paper) */
  --bg: var(--cream);
  --fg: var(--green-deep);
  --fg-accent: var(--green);
  --rule: color-mix(in srgb, var(--green) 22%, transparent);
  --focus: var(--green);

  color-scheme: light;
}

/* Surfaces set the colours their children inherit. */
.surface-cream {
  --bg: var(--cream);
  --fg: var(--green-deep);
  --fg-accent: var(--green);
  --rule: color-mix(in srgb, var(--green) 22%, transparent);
  --focus: var(--green);
  background: var(--grain), var(--bg);
  color: var(--fg);
}

.surface-green {
  --bg: var(--green);
  --fg: var(--cream);
  --fg-accent: var(--cream);
  --rule: color-mix(in srgb, var(--cream) 24%, transparent);
  --focus: var(--glow);
  background: var(--grain-light), var(--bg);
  color: var(--fg);
}

.surface-ink {
  --bg: var(--green-deep);
  --fg: var(--cream);
  --fg-accent: var(--glow);
  --rule: color-mix(in srgb, var(--cream) 18%, transparent);
  --focus: var(--glow);
  background: var(--grain-light), var(--bg);
  color: var(--fg);
}


/* 3. Base --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--grain), var(--cream);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, address {
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button {
  font: inherit;
  color: inherit;
}

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

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

[hidden] {
  display: none !important;
}

main:focus {
  outline: none;
}

/* Lenis smooth scroll (from lenis.css, kept here to save a request) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* 4. Layout helpers ----------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.measure {
  max-width: var(--measure);
}

.section {
  padding-block: var(--space-2xl);
}

.full-bleed {
  width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  background: var(--green-deep);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-l)));
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--glow);
}


/* 5. Type and small components ----------------------------------------- */

/* Wide-tracked capitals, after "Coffee & Bakes" in the logo */
.label {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

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

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
}

.prose > * + * {
  margin-top: 1em;
}

/* The traced logo, drawn with a CSS mask so it takes the current text colour.
   Inline SVG is kept for the homepage draw-on animation only. */
.wordmark {
  display: block;
  aspect-ratio: 579.44 / 222.71;
  height: auto;
  background-color: currentColor;
  -webkit-mask: url("../img/logo-wordmark.svg") center / contain no-repeat;
  mask: url("../img/logo-wordmark.svg") center / contain no-repeat;
}

.wordmark--full {
  aspect-ratio: 579.44 / 282.13;
  -webkit-mask-image: url("../img/logo.svg");
  mask-image: url("../img/logo.svg");
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

/* Text link with an arrow that nudges on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-fast) ease;
}

.link-arrow .icon {
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .link-arrow:hover span {
    text-decoration-color: currentColor;
  }

  .link-arrow:hover .icon {
    transform: translateX(0.2em);
  }

  .link-arrow:hover .icon--out {
    transform: translate(0.12em, -0.12em);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.7em 1.3em;
  border: var(--hairline) solid var(--fg-accent);
  border-radius: var(--radius);
  background: var(--fg-accent);
  color: var(--bg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.button--line {
  background: transparent;
  color: var(--fg-accent);
}

@media (hover: hover) {
  .button:hover {
    background: transparent;
    color: var(--fg-accent);
  }

  .button--line:hover {
    background: var(--fg-accent);
    color: var(--bg);
  }
}


/* 6. Open status and hours tables -------------------------------------- */

/* "Open now · until 3:30pm" with a small lamp-like dot.
   Filled in by site.js; hidden without JavaScript. */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.open-status__dot {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.open-status[data-state="open"] .open-status__dot {
  background: #3fae74;
  opacity: 1;
  box-shadow: 0 0 0 0.2em color-mix(in srgb, #3fae74 25%, transparent);
}

.surface-green .open-status[data-state="open"] .open-status__dot,
.surface-ink .open-status[data-state="open"] .open-status__dot {
  background: #7fe0a8;
  box-shadow: 0 0 0.6em color-mix(in srgb, #7fe0a8 70%, transparent);
}

/* Full week, today picked out by site.js */
.hours {
  container-type: inline-size;
}

.hours table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hours caption {
  text-align: left;
}

.hours th,
.hours td {
  padding: 0.6em 0;
  border-bottom: var(--hairline) solid var(--rule);
  text-align: left;
  font-weight: 400;
}

.hours td {
  text-align: right;
}

.hours tr[aria-current="date"] th,
.hours tr[aria-current="date"] td {
  font-weight: 700;
}

.hours tr[aria-current="date"] th::after {
  content: "Today";
  margin-left: 0.8em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-accent);
}

@container (max-width: 15rem) {
  .hours tr[aria-current="date"] th::after {
    content: none;
  }
}

/* Compact two-line hours for the footer */
.hours-compact {
  display: grid;
  gap: 0.2em;
  font-variant-numeric: tabular-nums;
}

.hours-compact div {
  display: grid;
}

/* Day and times side by side once the column has room */
@container (min-width: 15rem) {
  .hours-compact div {
    grid-template-columns: 6.5em 1fr;
    column-gap: 0.75em;
  }
}


/* 7. Header and navigation --------------------------------------------- */

.site-header {
  --header-fg: var(--green);
  --header-bg: transparent;
  --header-rule: transparent;

  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--header-fg);
  transition:
    color var(--dur) ease,
    background-color var(--dur) ease,
    box-shadow var(--dur) ease,
    translate var(--dur) var(--ease-out);
}

/* Pages that open on a dark or photographic hero: <body data-header="on-dark"> */
[data-header="on-dark"] .site-header {
  --header-fg: var(--cream);
  --focus: var(--glow);
}

/* After the first screenful (site.js sets these) */
.site-header.is-solid {
  --header-fg: var(--green);
  --header-bg: var(--cream);
  --focus: var(--green);
  background: var(--grain), var(--header-bg);
  box-shadow: 0 var(--hairline) 0 var(--rule), 0 0.75rem 2rem -1.5rem rgb(14 33 29 / 0.35);
}

.site-header.is-hidden {
  translate: 0 -100%;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  height: var(--header-h);
}

.site-header__brand {
  display: block;
  flex: none;
  width: clamp(5.75rem, 4.8rem + 3vw, 7.5rem);
  position: relative;
  z-index: 2;
  margin-right: auto;
  padding-block: 0.4rem;
  color: inherit;
}

.site-header .open-status {
  font-size: var(--step--2);
  letter-spacing: 0.02em;
}

.site-header .open-status__long {
  display: none;
}

@media (min-width: 30rem) {
  .site-header .open-status__long {
    display: inline;
  }

  .site-header .open-status__short {
    display: none;
  }
}

/* Nav links (inline on wide screens) */
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: var(--hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.site-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .site-nav__list a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.site-nav__extra {
  display: none;
}

/* Menu button: two lines that cross when open */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 2;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-toggle__lines,
.menu-toggle__lines::before {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}

.menu-toggle__lines {
  top: calc(50% - 4px);
}

.menu-toggle__lines::before {
  content: "";
  left: 0;
  right: 0;
  top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines {
  top: 50%;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before {
  top: 0;
  transform: rotate(-90deg);
}

/* Narrow screens with JavaScript: full-screen green menu */
@media (max-width: 49.99rem) {
  .js .menu-toggle {
    display: block;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: calc(var(--header-h) + var(--space-l)) var(--gutter) max(var(--space-l), env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--grain-light), var(--green);
    color: var(--cream);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path var(--dur-slow) var(--ease-in-out),
      visibility 0s linear var(--dur-slow);
  }

  .menu-open .site-nav {
    visibility: visible;
    clip-path: inset(0);
    transition: clip-path var(--dur-slow) var(--ease-in-out);
  }

  .js .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .js .site-nav__list a {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.6rem + 6vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    padding-block: 0.1em;
    opacity: 0;
    transform: translateY(0.6em);
    transition: opacity var(--dur) ease, transform var(--dur-slow) var(--ease-out);
  }

  .js .site-nav__list a::after {
    bottom: 0.15em;
    height: 2px;
  }

  .menu-open .site-nav__list a {
    opacity: 1;
    transform: none;
    transition-delay: calc(180ms + var(--i, 0) * 60ms);
  }

  .js .site-nav__extra {
    display: grid;
    gap: var(--space-m);
    font-size: var(--step--1);
    opacity: 0;
    transition: opacity var(--dur) ease;
  }

  .menu-open .site-nav__extra {
    opacity: 1;
    transition-delay: 420ms;
  }

  .site-nav__extra .open-status {
    font-size: var(--step--1);
  }

  .site-nav__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-l);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 2.75rem;
    font-weight: 600;
    text-decoration: none;
  }

  /* While the menu is open the header sits on the green panel */
  .menu-open .site-header {
    --header-fg: var(--cream);
    --focus: var(--glow);
    background: transparent;
    box-shadow: none;
    translate: none;
  }

  .menu-open .site-header__inner > .open-status {
    visibility: hidden;
  }
}

/* Landscape phones: two columns so everything fits without scrolling */
@media (max-width: 49.99rem) and (max-height: 30rem) {
  .js .site-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding-top: calc(var(--header-h) + var(--space-s));
  }

  .js .site-nav__list a {
    font-size: clamp(1.75rem, 1rem + 5vh, 2.5rem);
  }
}

/* Narrow screens without JavaScript: links simply wrap under the logo */
@media (max-width: 49.99rem) {
  html:not(.js) .site-header {
    position: absolute;
  }

  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--space-xs);
    row-gap: 0;
  }

  html:not(.js) .site-nav {
    flex-basis: 100%;
  }
}

@media (max-height: 30rem) {
  :root {
    --header-h: 3.25rem;
  }
}


/* 8. Footer ------------------------------------------------------------- */

.site-footer {
  container-type: inline-size;
  padding-block: var(--space-2xl) var(--space-l);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--space-xl) var(--space-l);
  align-items: start;
}

.site-footer__brand {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.site-footer__brand .wordmark {
  width: clamp(10rem, 8rem + 8vw, 15rem);
}

.site-footer__brand p {
  max-width: 22rem;
}

.site-footer h2 {
  margin-bottom: var(--space-s);
}

.site-footer__block {
  container-type: inline-size;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.site-footer__links {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.75rem;
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    text-decoration: underline;
  }
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xs) var(--space-l);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--step--1);
}

/* Back to top and the designer credit sit together on the right edge. When the
   row is too narrow they drop below the copyright line, still right-aligned. */
.site-footer__base-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2xs) var(--space-l);
  margin-left: auto;
  text-align: right;
}

.site-footer__base a {
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer__base a:hover {
    text-decoration: underline;
  }
}

/* Wide footers: the logo takes a wider first column */
@container (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
}


/* 9. Motion preferences, forced colours, print ------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media (forced-colors: active) {
  .wordmark {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .open-status__dot {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .site-header.is-solid {
    border-bottom: 1px solid CanvasText;
  }
}

@media print {
  .site-header,
  .skip-link,
  .menu-toggle {
    display: none;
  }

  body,
  .surface-green,
  .surface-ink {
    background: #fff;
    color: #000;
  }
}


/* ==========================================================================
   Home (index.html)

   Every section is written first as a plain static layout: that is what
   people get without JavaScript or with reduced motion. html.motion (set in
   the <head> when motion is allowed) switches on the pinned "stage" layouts
   that assets/js/home.js animates.
   ========================================================================== */

/* Shared: a stage fills the screen while it is pinned */
.motion .hero__stage,
.motion .table__stage,
.motion .coffee__stage {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.section-head h2,
.made__intro h2,
.coffee__copy h2,
.room__text h2,
.find__body h2,
.feed__head h2,
.table__head h2 {
  font-size: var(--step-5);
}


/* Home 1. Neon on ------------------------------------------------------- */

.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: var(--space-l);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-2xl);
  text-align: center;
}

/* Sized by width and by height, so short laptops and landscape phones keep
   room for the lines underneath. */
.hero__title {
  width: min(100%, clamp(16rem, 58vw, 60rem), (100vh - 15rem) * 2.6);
  width: min(100%, clamp(16rem, 58vw, 60rem), (100svh - 15rem) * 2.6);
  min-width: min(100%, 12rem);
  transform-origin: 0 0;
}

@media (max-width: 49.99rem) {
  .hero__title {
    width: min(100%, 86vw, (100vh - 15rem) * 2.6);
    width: min(100%, 86vw, (100svh - 15rem) * 2.6);
  }
}

/* The neon: a warm white core with two layers of glow */
.hero__mark {
  width: 100%;
  height: auto;
  overflow: visible;
  color: #fff4df;
  filter:
    drop-shadow(0 0 1px rgb(255 244 223 / 0.9))
    drop-shadow(0 0 10px rgb(255 217 160 / 0.55))
    drop-shadow(0 0 30px rgb(255 228 186 / 0.3));
}

.hero__meta {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
}

.hero__tagline {
  color: var(--glow);
  font-size: var(--step--1);
  letter-spacing: 0.28em;
}

.hero__tagline span {
  white-space: nowrap;
}

/* Very narrow: the two halves stack instead of leaving a stray dot */
@media (max-width: 24rem) {
  .hero__tagline span {
    display: block;
  }

  .hero__tagline .hero__dot {
    display: none;
  }
}

.hero__today {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35em 1.1em;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  font-variant-numeric: tabular-nums;
}

.hero__cue {
  display: none;
}

/* Without motion the room photo simply follows the sign */
.hero__photo {
  order: 2;
}

.hero__photo img {
  width: 100%;
}

.hero__scrim {
  display: none;
}

/* Motion: the photo waits underneath, zoomed onto its own neon sign */
.motion .hero__inner {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.motion .hero__photo,
.motion .hero__scrim {
  position: absolute;
  inset: 0;
}

.motion .hero__photo {
  z-index: 0;
  opacity: 0;
}

.motion .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 50%;
  transform-origin: 0 0;
  will-change: transform;
}

@media (min-aspect-ratio: 5/4) {
  .motion .hero__photo img {
    object-position: 50% 40%;
  }
}

.motion .hero__scrim {
  z-index: 1;
  display: block;
  background:
    linear-gradient(to bottom, rgb(14 33 29 / 0.75), rgb(14 33 29 / 0) 28%),
    rgb(14 33 29 / 0.35);
  opacity: 0;
}

.motion .hero__cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(var(--space-l), env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  translate: -50% 0;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.motion .hero__cue::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(currentColor, transparent);
  transform-origin: top;
  animation: cue-drip 2.4s var(--ease-in-out) 4s infinite both;
}

/* Draw-on: each stroke of the script traces itself, then fills and warms up
   with one faint flicker, like the sign on the wall being switched on. */
.motion .hero__mark {
  filter: drop-shadow(0 0 1px rgb(255 244 223 / 0.6));
  animation: mark-lit 1.5s linear 2.75s both;
}

.motion .hero__mark path {
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation:
    mark-draw var(--dur, 1.5s) var(--ease-in-out) var(--delay, 0s) forwards,
    mark-fill 0.8s ease 2.7s forwards;
}

.motion .hero__meta > *,
.motion .hero__cue > * {
  animation: hero-in 1s var(--ease-out) 3.3s both;
}

.motion .hero__meta > :nth-child(2) {
  animation-delay: 3.45s;
}

@keyframes mark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mark-fill {
  to { fill-opacity: 1; stroke-opacity: 0.5; }
}

@keyframes mark-lit {
  0% {
    opacity: 0.85;
    filter:
      drop-shadow(0 0 1px rgb(255 244 223 / 0.6))
      drop-shadow(0 0 2px rgb(255 217 160 / 0))
      drop-shadow(0 0 4px rgb(255 228 186 / 0));
  }
  30%, 46%, 100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 1px rgb(255 244 223 / 0.9))
      drop-shadow(0 0 10px rgb(255 217 160 / 0.55))
      drop-shadow(0 0 30px rgb(255 228 186 / 0.3));
  }
  36%, 40% {
    opacity: 0.6;
    filter:
      drop-shadow(0 0 1px rgb(255 244 223 / 0.6))
      drop-shadow(0 0 4px rgb(255 217 160 / 0.2))
      drop-shadow(0 0 12px rgb(255 228 186 / 0.1));
  }
}

@keyframes hero-in {
  from { opacity: 0; translate: 0 0.6rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes cue-drip {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (max-height: 30rem) {
  .hero__inner {
    gap: var(--space-s);
    padding-bottom: var(--space-l);
  }

  .motion .hero__cue {
    display: none;
  }
}


/* Home 2. Statement ----------------------------------------------------- */

.statement {
  padding-block: var(--space-3xl);
}

.statement__text {
  max-width: 24em;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

@media (min-width: 50rem) {
  .statement__text {
    font-size: var(--step-5);
  }
}

.motion .statement__text .word {
  opacity: 0.2;
}


/* Home 3. The Table ----------------------------------------------------- */

/* Static: the whole photo, with the six dishes listed beside it */
.table {
  padding-block: var(--space-2xl);
}

.table__stage {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.table__head {
  display: grid;
  gap: var(--space-xs);
}

.table__head .label {
  color: var(--glow);
}

.table__photo {
  width: 100%;
  border-radius: var(--radius);
}

.table__captions {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.table__caption {
  display: grid;
  gap: 0.35em;
  padding-block: var(--space-s);
  border-bottom: var(--hairline) solid var(--rule);
  color: color-mix(in srgb, var(--cream) 85%, transparent);
}

.table__dish {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--glow);
}

.table__note {
  font-style: italic;
}

@media (min-width: 50rem) {
  .table__stage {
    grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
    align-items: center;
  }

  .table__head {
    grid-column: 1 / -1;
  }
}

/* Motion: a camera over the table. home.js sizes the canvas and moves it;
   captions are placed beside each plate (or docked at the bottom on phones). */
.motion .table {
  padding: 0;
}

.motion .table__stage {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
}

.motion .table__head {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h) + var(--space-m));
  left: var(--gutter);
  right: var(--gutter);
  pointer-events: none;
}

.motion .table__head h2 {
  max-width: 10ch;
  text-shadow: 0 0 2rem rgb(14 33 29 / 0.6);
}

.motion .table__figure {
  position: absolute;
  inset: 0;
}

.motion .table__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--table-w, 100vw);
  transform-origin: 0 0;
  will-change: transform;
}

.motion .table__photo {
  border-radius: 0;
  box-shadow: 0 2rem 6rem -2rem rgb(0 0 0 / 0.6);
}

.motion .table__captions {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* The dish's name set straight onto the photograph, like a caption in a
   cookbook, with a soft pool of shade behind it rather than a box. */
.motion .table__caption {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(26rem, 100vw - 2 * var(--gutter));
  padding: 0;
  border-bottom: 0;
  color: var(--cream);
  opacity: 0;
  text-shadow: 0 0 1.2rem rgb(14 33 29 / 0.95), 0 0 0.3rem rgb(14 33 29 / 0.8), 0 1px 2px rgb(0 0 0 / 0.7);
  isolation: isolate;
}

.motion .table__caption::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3.5rem;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(14 33 29 / 0.6), rgb(14 33 29 / 0));
  pointer-events: none;
}

.motion .table__dish {
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.015em;
}

.motion .table__note {
  font-size: var(--step-0);
}

/* Keeps the heading readable over the opening shot */
.table__shade {
  display: none;
}

.motion .table__shade {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: block;
  height: 45%;
  background: linear-gradient(to bottom, rgb(14 33 29 / 0.85), rgb(14 33 29 / 0));
  pointer-events: none;
}



/* Home 4. Breakfast to lunch ------------------------------------------------- */

.made {
  padding-block: var(--space-2xl);
  overflow: hidden;
}

.made__track {
  display: grid;
  gap: var(--space-xl);
}

.made__intro {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.made__intro > p:not(.label) {
  max-width: var(--measure);
}

.made__intro .label,
.made__item .label {
  color: var(--oak-ink);
}

.made__list {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.made__item {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

.made__item h3 {
  font-size: var(--step-3);
}

.made__item p:last-child {
  max-width: 30ch;
}

.made__photo {
  margin-bottom: var(--space-s);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--green-deep);
}

.made__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Narrow screens, and touch screens when motion is on: a swipeable row */
@media (max-width: 49.99rem) {
  /* Each card snaps to the middle of the screen, the first and last too.
     (.made scopes it to beat the ul[role="list"] reset.) */
  .made .made__list {
    --card: min(78vw, 22rem);
    grid-auto-flow: column;
    grid-auto-columns: var(--card);
    padding-inline: calc((100% - var(--card)) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .made__item {
    scroll-snap-align: center;
  }
}

@media (min-width: 50rem) {
  .made__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
  }

  /* A loose, hand-placed rhythm rather than a strict row */
  .made__item:nth-child(even) {
    margin-top: var(--space-xl);
  }
}

@media (min-width: 50rem) and (hover: none), (min-width: 50rem) and (pointer: coarse), (min-width: 50rem) and (max-height: 30rem) {
  .motion .made__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(40vw, 22rem);
    width: auto;
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }

  .motion .made__item {
    scroll-snap-align: start;
  }
}

/* Mouse and trackpad with motion: the whole track slides sideways while the
   section is pinned. Past 2400px wide all four fit, so the grid stays. */
@media (min-width: 50rem) and (max-width: 149.99rem) and (min-height: 30.01rem) and (hover: hover) and (pointer: fine) {
  .motion .made {
    padding: 0;
  }

  .motion .made__stage {
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    padding-top: var(--header-h);
  }

  .motion .made__track {
    display: flex;
    align-items: center;
    gap: clamp(3rem, 7vw, 8rem);
    width: max-content;
    padding-inline: var(--gutter) clamp(3rem, 10vw, 10rem);
    will-change: transform;
  }

  .motion .made__intro {
    flex: none;
    width: min(28rem, 34vw);
    margin: 0;
  }

  .motion .made__list {
    display: flex;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 4.5rem);
    width: auto;
    margin: 0;
  }

  .motion .made__item {
    flex: none;
    width: clamp(14rem, min(24vw, (100svh - var(--header-h) - 15rem) * 0.8), 30rem);
  }

  .motion .made__item:nth-child(even) {
    margin-top: 8svh;
  }

  .motion .made__item:nth-child(odd) {
    margin-top: -4svh;
  }
}


/* Home 5. Coffee -------------------------------------------------------- */

/* The static layout is the last frame of the animation: the cup framed in a
   circle exactly at its rim, on a bed of beans, with the words beside it. */
.coffee__stage {
  --cup: min(78vw, 24rem);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

.coffee__beans {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: brightness(0.42) saturate(0.9);
}

.motion .coffee__beans {
  filter: none;
}

.motion .coffee__beans::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green-deep);
  opacity: var(--dim, 0.62);
}

.coffee__beans img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffee__cup {
  position: relative;
  width: var(--cup);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 217 160 / 0.25), 0 2rem 5rem -1rem rgb(0 0 0 / 0.7);
}

/* The cup sits at 42% across and 31% down the photo, and is 34% of its width
   across. Scale and shift so the rim meets the circle. */
.coffee__canvas {
  position: absolute;
  width: calc(100% / 0.34 * 1.03);
  left: calc(50% - 0.42 * 100% / 0.34 * 1.03);
  top: calc(50% - 0.31 * 1.25 * 100% / 0.34 * 1.03);
}

.coffee__canvas img {
  width: 100%;
}

.coffee__copy {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  max-width: 28rem;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: rgb(14 33 29 / 0.88);
}

.coffee__copy .label {
  color: var(--glow);
}

@media (min-width: 50rem) {
  .coffee__stage {
    --cup: min(40vw, 40rem, 62svh);
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
    padding-block: var(--space-3xl);
  }

  .coffee__cup {
    justify-self: end;
  }

  .coffee__copy {
    justify-self: start;
  }
}

/* Motion: centred on the screen; home.js opens the beans and the cup */
.motion .coffee__stage {
  padding-block: calc(var(--header-h) + var(--space-s)) var(--space-l);
}

@media (max-width: 49.99rem) {
  .motion .coffee__stage {
    --cup: min(70vw, 42svh);
    align-content: center;
    gap: var(--space-l);
  }

  .motion .coffee__copy {
    padding: var(--space-m);
  }
}

/* Small phones: a smaller cup and tighter words so both fit one screen */
@media (max-width: 49.99rem) and (max-height: 44rem) {
  .motion .coffee__stage {
    --cup: min(60vw, 100svh - 24rem);
    gap: var(--space-m);
  }

  .motion .coffee__copy {
    gap: var(--space-2xs);
    font-size: var(--step--1);
  }

  .motion .coffee__copy h2 {
    font-size: var(--step-4);
  }
}

@media (max-height: 30rem) {
  .motion .coffee__stage {
    --cup: min(40vw, 62svh);
    grid-template-columns: auto 1fr;
    gap: var(--space-l);
  }

  .motion .coffee__copy {
    padding: var(--space-s) var(--space-m);
  }
}


/* Home 6. The room ------------------------------------------------------ */

/* The photo is a tall portrait, so on wide screens it is shown whole in a
   full-height frame beside the words rather than cropped to the width. */
.room__frame {
  overflow: hidden;
}

.room__photo img {
  width: 100%;
}

.room__text {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-2xl);
}

.room__text .label {
  color: var(--glow);
}

.room__text > p:last-child {
  max-width: 30ch;
  font-size: var(--step-1);
  line-height: 1.5;
}

@media (min-width: 50rem) {
  .room__stage {
    /* Height-led, but never wider than 55% of the row, so the words keep room */
    --room-h: min(85svh, 56rem, (100vw - 2 * var(--gutter)) * 0.55 / 0.75);
    display: grid;
    grid-template-columns: minmax(0, 28rem) calc(var(--room-h) * 0.75);
    justify-content: center;
    align-items: center;
    gap: var(--space-2xl) clamp(2.5rem, 8vw, 9rem);
    width: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
    padding-block: var(--space-2xl);
  }

  .room__text {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .room__frame {
    grid-column: 2;
    grid-row: 1;
    height: var(--room-h);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
  }

  .room__photo img {
    height: 100%;
    object-fit: cover;
  }
}

/* Motion, phones: the photo grows from a framed print to the whole screen */
@media (max-width: 49.99rem) {
  .motion .room__frame {
    height: 100vh;
    height: 100svh;
  }

  .motion .room__photo,
  .motion .room__photo img {
    width: 100%;
    height: 100%;
  }

  .motion .room__photo img {
    object-fit: cover;
    object-position: 50% 40%;
    transform-origin: 50% 30%;
  }
}

/* Motion, wide screens: a full-screen section the print settles into */
@media (min-width: 50rem) and (min-height: 30.01rem) {
  .motion .room__stage {
    --room-h: min(100svh - var(--header-h) - var(--space-m) - var(--space-l), 56rem, (100vw - 2 * var(--gutter)) * 0.55 / 0.75);
    height: 100vh;
    height: 100svh;
    padding-block: calc(var(--header-h) + var(--space-m)) var(--space-l);
  }

  .motion .room__frame {
    height: var(--room-h);
  }
}


/* Home 7. Find us ------------------------------------------------------- */

.find {
  padding-block: var(--space-2xl);
}

.find__grid {
  display: grid;
  gap: var(--space-xl);
}

.find__photo {
  display: grid;
  gap: var(--space-xs);
}

.find__frame {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  max-height: 75svh;
  background: var(--green-deep);
}

.find__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 45%;
}

.motion .find__frame img {
  height: 116%;
  margin-top: -8%;
}

.find__photo figcaption {
  color: var(--oak-ink);
}

.find__body {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  justify-items: start;
}

.find__body > .label {
  color: var(--oak-ink);
}

.find__address {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
}

.find__body > p {
  max-width: var(--measure);
}

.find .hours {
  width: min(100%, 26rem);
}

.find .hours caption {
  padding-bottom: var(--space-2xs);
  color: var(--oak-ink);
}

.find .hours .open-status {
  margin-top: var(--space-s);
}

.find__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-2xs);
}

@media (min-width: 50rem) {
  .find__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }

  .find__frame {
    aspect-ratio: 4 / 5;
    max-height: 82svh;
  }
}


/* Home 8. On the feed --------------------------------------------------- */

.feed {
  padding-block: var(--space-xl);
}

.feed__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-m) var(--space-xl);
}

.feed__head > div {
  display: grid;
  gap: var(--space-xs);
}

.feed__head .label {
  color: var(--glow);
}

.feed__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .feed__links a:hover {
    text-decoration-color: currentColor;
  }
}

/* Anything revealed on scroll shows at once when a keyboard reaches it */
.motion .coffee__copy:focus-within,
.motion .room__text:focus-within,
.motion .table__caption:focus-within {
  opacity: 1 !important;
}

/* Footer additions used by every page */
.site-footer__brand .link-arrow {
  justify-self: start;
}


/* ==========================================================================
   Inner pages (menu.html, about.html, contact.html, 404.html)

   Quieter than the homepage: no pinning, only the light motion in
   assets/js/pages.js (headings rising in line by line, sections easing in
   once, a little parallax in framed photos). Everything below reads as a
   finished static layout without it.
   ========================================================================== */

/* Shared ---------------------------------------------------------------- */

.page-head {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  padding-top: calc(var(--header-h) + var(--space-2xl));
}

.page-head h1 {
  font-size: var(--step-7);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.page-head .label,
.about-page .surface-cream .label,
.visit-intro .label {
  color: var(--oak-ink);
}

.page-head .lede {
  max-width: var(--measure);
}

.menu-sheet__head h2,
.about-story h2,
.about-counter h2,
.about-room h2,
.about-welcome h2,
.visit-social h2 {
  font-size: var(--step-5);
}

.page-hero .label,
.about-room .label,
.about-welcome .label,
.visit-social .label,
.locator .label,
.lost .label {
  color: var(--fg-accent);
}

/* A framed photo: cropped to its box, the photo itself fills it */
.frame {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--green-deep);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Parallax: the photo is a little taller than its frame (top/height are
   fractions of the frame's height) and pages.js drifts it as the frame
   crosses the screen. Frames that use it need a set aspect-ratio. */
.motion [data-parallax] {
  position: relative;
}

.motion [data-parallax] img {
  position: absolute;
  top: -7%;
  left: 0;
  height: 114%;
}

figure > figcaption.label {
  margin-top: var(--space-xs);
}

/* Gaps in the copy still to be filled (see README "Content to confirm").
   Deliberately loud so none slips through to launch. */
.todo {
  background: color-mix(in srgb, var(--amber) 28%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--oak-ink) 70%, transparent);
  outline-offset: 1px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Headings that rise in line by line. Hidden only until pages.js has split
   them, and shown regardless after 2 seconds in case the script never runs. */
.motion [data-lines]:not(.is-split) {
  visibility: hidden;
  animation: show-anyway 0s linear 2s forwards;
}

@keyframes show-anyway {
  to { visibility: visible; }
}

[data-lines] .line {
  display: block;
  overflow: clip;
  overflow-clip-margin: 0.12em;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

[data-lines] .line__inner {
  display: block;
}

/* Anything eased in on scroll shows at once when a keyboard reaches it */
.motion [data-reveal]:focus-within {
  opacity: 1 !important;
  transform: none !important;
}


/* Menu ------------------------------------------------------------------ */

.menu-page {
  padding-bottom: var(--space-2xl);
}

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  margin-top: var(--space-2xs);
}

.menu-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

@media (hover: hover) {
  .menu-jump a:hover {
    text-decoration-color: currentColor;
  }
}

/* One centred column, about the width of a printed menu card */
.menu-page .page-head {
  justify-items: center;
  text-align: center;
}

.menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: 50rem;
  margin-top: var(--space-xl);
}

/* Each section is a printed card: lighter paper, a fine inner rule */
.menu-sheet {
  container-type: inline-size;
  padding: clamp(1.5rem, 1rem + 3.5vw, 4rem) clamp(1.1rem, 0.4rem + 3.5vw, 4rem);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: var(--grain), var(--cream-light);
  outline: var(--hairline) solid var(--rule);
  outline-offset: calc(-1 * clamp(0.4rem, 0.3rem + 0.4vw, 0.65rem));
  box-shadow: 0 1.5rem 3rem -2.25rem rgb(14 33 29 / 0.45);
}

.menu-sheet__head {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.menu-sheet__head p {
  max-width: 30rem;
  font-style: italic;
}

.menu-group + .menu-group {
  margin-top: var(--space-xl);
}

/* Category label with a rule either side, like a printed menu */
.menu-group > h3 {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  color: var(--oak-ink);
  text-align: center;
}

.menu-group > h3::before,
.menu-group > h3::after {
  content: "";
  flex: 1;
  border-top: var(--hairline) solid var(--rule);
}

.menu-list {
  margin: 0;
}

.menu-item {
  padding-block: 0.4em;
}

/* Name ........ £3.20 */
.menu-item__line {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
}

.menu-item__name {
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.menu-item__leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: 3px;
  margin-bottom: 0.5em;
  background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 50% / 0.55em 3px repeat-x;
  opacity: 0.5;
}

.menu-item__price {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--leading-snug);
}

.menu-item__desc {
  max-width: 32rem;
  margin-top: 0.15em;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}

.menu-group__note {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  font-style: italic;
}

.menu-group__text {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.menu-foot {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  text-align: center;
}

.menu-foot__allergens {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

/* Wide cards: item descriptions sit under the name, not under the price */
@container (min-width: 36rem) {
  .menu-item__desc {
    padding-right: 5rem;
  }
}


/* About ----------------------------------------------------------------- */

/* Photo hero, shared with any page that opens on one */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(100vh, 62rem);
  min-height: min(92svh, 62rem);
  overflow: hidden;
}

.page-hero__photo,
.page-hero__scrim {
  position: absolute;
  inset: 0;
}

.page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 52%;
}

.page-hero__scrim {
  background:
    linear-gradient(to top, rgb(14 33 29 / 0.88), rgb(14 33 29 / 0.25) 55%, rgb(14 33 29 / 0.45)),
    linear-gradient(to right, rgb(14 33 29 / 0.45), transparent 60%);
}

.page-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
}

.page-hero h1 {
  max-width: 12ch;
  font-size: var(--step-7);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.about-story,
.about-counter,
.about-room,
.about-welcome {
  padding-block: var(--space-2xl);
}

.about-story__grid,
.about-room__grid,
.about-welcome__grid {
  display: grid;
  gap: var(--space-xl);
}

.about-story__text,
.about-room__text,
.about-welcome__text,
.about-counter__head,
.about-counter__title,
.about-counter__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  align-content: start;
}

.about-story .prose,
.about-room__text > p,
.about-welcome__text > p,
.about-counter__intro > p {
  max-width: var(--measure);
}

.about-story__quote {
  order: -1;
  max-width: 28rem;
  padding-top: var(--space-m);
  border-top: var(--hairline) solid var(--fg-accent);
  color: var(--fg-accent);
}

.about-story__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.about-story__quote blockquote p::before {
  content: "\201C";
  color: var(--oak-ink);
}

.about-story__quote blockquote p::after {
  content: "\201D";
  color: var(--oak-ink);
}

.about-story__quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-story__quote .wordmark {
  width: 5.5rem;
}

.about-counter figcaption {
  color: var(--oak-ink);
}

.about-counter__photos {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.about-counter__photos li {
  width: min(88%, 26rem);
}

.about-counter__photos li:nth-child(even) {
  justify-self: end;
}

.about-counter__photos .frame {
  aspect-ratio: 4 / 5;
}

.about-room__photo .frame {
  aspect-ratio: 4 / 5;
  max-height: 85vh;
  max-height: 85svh;
}

.about-room__photo img {
  object-position: 50% 30%;
}

/* The amenities as type, not icons */
.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  column-gap: var(--space-l);
  width: 100%;
  margin: var(--space-xs) 0 var(--space-s);
}

.amenities li {
  padding-block: 0.55em;
  border-top: var(--hairline) solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

.about-welcome__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}

@media (min-width: 50rem) {
  .about-story__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
    column-gap: var(--space-2xl);
  }

  .about-story__quote {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-xl));
    justify-self: end;
  }

  .about-story__quote blockquote {
    font-size: var(--step-3);
  }

  .about-counter__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-2xl);
  }

  /* Three prints, hung at different heights */
  .about-counter__photos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-l) clamp(1rem, 0.5rem + 2vw, 3rem);
  }

  .about-counter__photos li,
  .about-counter__photos li:nth-child(even) {
    justify-self: stretch;
    width: auto;
  }

  .about-counter__photos li:nth-child(1) {
    margin-top: var(--space-2xl);
  }

  .about-counter__photos li:nth-child(3) {
    margin-top: var(--space-3xl);
  }

  .about-room__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--space-2xl);
  }

  .about-room__photo .frame {
    aspect-ratio: 1;
  }

}

/* Short, wide windows: the hero keeps its words on screen */
@media (max-height: 30rem) {
  .page-hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .page-hero h1 {
    font-size: var(--step-5);
  }

  .page-hero__inner {
    padding-bottom: var(--space-l);
  }
}


/* Visit ----------------------------------------------------------------- */

.visit-intro {
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
}

.visit-intro__grid {
  display: grid;
  gap: var(--space-xl);
}

.visit-intro__text {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  align-content: start;
}

.visit-intro h1 {
  font-size: var(--step-6);
  line-height: 1;
  letter-spacing: -0.02em;
}

.visit-address {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.2;
}

.visit-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
}

.visit-copy__status {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--oak-ink);
}

.visit-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  margin: 0;
}

/* Stand-in for the street map: the sign to look for, and where it is */
.locator {
  overflow: hidden;
  border-radius: var(--radius);
  align-self: start;
}

.locator__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.locator__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 42%;
}

.locator__text {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-l);
}

.locator__street {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.05;
}

.locator__area {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Used once the real map is rendered (see the comment in contact.html) */
.visit-map__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.visit-map img {
  width: 100%;
  height: auto;
}

.visit-map__credit {
  margin-top: var(--space-2xs);
  font-size: var(--step--2);
}

.visit-info {
  padding-block: var(--space-2xl);
  border-top: var(--hairline) solid var(--rule);
}

.visit-info__grid {
  display: grid;
  gap: var(--space-2xl);
}

.visit-info h2 {
  margin-bottom: var(--space-m);
  font-size: var(--step-4);
}

.visit-hours .hours {
  max-width: 28rem;
}

/* The heading above already says it; the caption stays for screen readers */
.visit-hours .hours caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.visit-hours .open-status {
  margin-top: var(--space-s);
}

.know-list {
  container-type: inline-size;
  display: grid;
  margin: 0;
}

.know-list > div {
  display: grid;
  gap: 0.2em;
  padding-block: 0.8em;
  border-bottom: var(--hairline) solid var(--rule);
}

.know-list > div:first-child {
  border-top: var(--hairline) solid var(--rule);
}

.know-list dt {
  color: var(--oak-ink);
}

@container (min-width: 30rem) {
  .know-list > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: var(--space-m);
    align-items: baseline;
  }
}

.visit-social {
  padding-block: var(--space-2xl);
}

.visit-social__head {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.visit-social__head p:last-child {
  max-width: var(--measure);
}

.social-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-m);
  margin: 0;
}

.social-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon . arrow"
    "action action action"
    "handle handle handle";
  row-gap: var(--space-2xs);
  min-height: 100%;
  padding: var(--space-l);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
}

.social-panel > .icon:first-child {
  grid-area: icon;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-xl);
}

.social-panel__arrow {
  grid-area: arrow;
  transition: transform var(--dur) var(--ease-out);
}

.social-panel__action {
  grid-area: action;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
}

.social-panel__handle {
  grid-area: handle;
  color: var(--fg-accent);
  font-weight: 600;
}

@media (hover: hover) {
  .social-panel--instagram:hover {
    background-color: var(--teal);
    border-color: var(--teal);
  }

  .social-panel--tiktok:hover {
    background-color: var(--green);
    border-color: var(--green);
  }

  .social-panel:hover .social-panel__arrow {
    transform: translate(0.15em, -0.15em);
  }
}

@media (min-width: 50rem) {
  .visit-intro__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
    column-gap: var(--space-2xl);
  }

  .locator__photo {
    aspect-ratio: 16 / 10;
  }

  .visit-info__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-2xl);
  }
}


/* 404 ------------------------------------------------------------------- */

.lost {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.lost__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
}

.lost h1 {
  max-width: 14ch;
  font-size: var(--step-6);
  line-height: 1;
  letter-spacing: -0.02em;
}

.lost .lede {
  max-width: var(--measure);
}

.lost__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  margin: var(--space-s) 0 0;
}

.lost__links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

@media (hover: hover) {
  .lost__links a:hover {
    color: var(--glow);
    text-decoration-color: currentColor;
  }
}

@media (forced-colors: active) {
  .todo {
    outline-color: Highlight;
  }

  .menu-item__leader {
    forced-color-adjust: none;
    background-image: radial-gradient(circle, CanvasText 1px, transparent 1.4px);
  }
}

@media print {
  .menu-jump,
  .site-footer {
    display: none;
  }

  .menu-layout {
    display: block;
  }

  .menu-sheet {
    box-shadow: none;
    break-inside: avoid-page;
    margin-bottom: 1.5rem;
  }
}