/* ==========================================================================
   BAD CHX — inner pages
   --------------------------------------------------------------------------
   The approved homepage stylesheet (styles.css) is the design authority and
   is not edited. This file adds only what the homepage never needed: an
   internal-page hero, prose styles for owner-written content, and the few
   states the real ordering data introduced. Every value is expressed in the
   approved tokens so the pages cannot drift away from the homepage.

   Loaded after styles.css, so it inherits the reset, the type scale and the
   button system rather than restating them.
   ========================================================================== */

/* ==========================================================================
   THE hidden ATTRIBUTE ACTUALLY HIDES
   --------------------------------------------------------------------------
   The UA stylesheet's [hidden] { display: none } carries almost no
   specificity, so any component that sets its own display beats it. The
   button system does exactly that, which meant a script setting
   `el.hidden = true` on a .btn left the button on screen -- the map popup
   offered ORDER NOW for a location that has no ordering destination.

   This is the one place to state it, for every script in the theme that
   toggles the attribute. Opening the mobile drawer removes the attribute
   rather than relying on a class, so nothing here can trap it shut.
   ========================================================================== */
[hidden] {
	display: none !important;
}

/* ==========================================================================
   THE ORDERING / STATUS FLAG
   --------------------------------------------------------------------------
   One small pill, stating one verified thing. It began on the locations
   page and now appears on the ordering page too, so it lives here rather
   than in locations.css -- that stylesheet loads only on the location
   archive and single, and a component used by three templates should not
   be defined inside one of them.
   ========================================================================== */
/* A flag states one verified thing. There is deliberately no OPEN NOW flag
   anywhere on this site: the dining-room hours are not recorded, and an
   unverified claim that a restaurant is open is worse than saying nothing.
   Where the ordering window IS recorded, the flag says "ordering" and
   means it. */
.locflag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.locflag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.locflag--on {
  border-color: color-mix(in srgb, var(--red) 55%, transparent);
  color: var(--white);
}

.locflag--on::before { background: var(--red); }

.locflag--off { color: var(--mute-2); }

.locflag--note {
  border-style: dashed;
  color: var(--mute);
}

.locflag--note::before { display: none; }

/* ==========================================================================
   INTERNAL PAGE HERO
   --------------------------------------------------------------------------
   The homepage hero is full-bleed and photographic. Internal pages need a
   shorter, calmer version that still reads as the same website: the ember
   glow and the display type, sized by its content and ending on a straight
   edge so the next section starts cleanly under it.

   The header is fixed and transparent until the page scrolls, so the hero
   carries the header's height in its own top padding.

   .page-hero--classic is the earlier, taller hero -- outlined wordmark,
   breadcrumb trail, angled bottom edge -- kept for Order Online and the
   location pages.
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(20px, 3.4vw, 52px)) clamp(36px, 4.4vw, 64px);
  background: var(--ink-1);
  color: var(--text);
}

.page-hero--classic {
  padding-block: calc(var(--header-h) + clamp(44px, 7vw, 104px)) calc(clamp(44px, 6vw, 92px) + var(--angle));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle)), 0 100%);
}

.page-hero__ember {
  position: absolute;
  left: 50%;
  top: -55%;
  width: 130vw;
  max-width: 1500px;
  aspect-ratio: 1.7;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 34, 40, .34), rgba(181, 22, 27, .1) 55%, transparent 74%);
}

.page-hero__outline {
  position: absolute;
  left: 0;
  bottom: -.14em;
  width: 100%;
  font-family: var(--f-display);
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 56rem;
}

.page-hero--classic .page-hero__inner {
  gap: 18px;
}

.page-hero__title {
  font-size: clamp(3rem, 1.2rem + 7vw, 7.5rem);
}

.page-hero__lede {
  max-width: 40rem;
  font-size: var(--fs-lede);
  color: rgba(255, 255, 255, .78);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

/* A photograph behind the hero, when the page has one worth showing. */
.page-hero--image .page-hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero--image .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}

.page-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 6, 6, .88), rgba(7, 6, 6, .58) 45%, rgba(7, 6, 6, .92));
}

.page-hero--image .page-hero__inner {
  z-index: 1;
}

/* Breadcrumb-style trail, used where a page sits under another. */
.page-hero__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.page-hero__trail a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}

.page-hero__trail a:hover {
  color: var(--white);
  border-color: var(--red);
}

/* ==========================================================================
   PAGE BODY
   ========================================================================== */
.page-body {
  padding-block: clamp(52px, 7vw, 104px);
  background: var(--ink-0);
}

/* Paper on dark, with the approved angled edge where it meets the footer.
   Used as a page's last section, which is where every page uses it today. */
.page-body--paper {
  padding-bottom: calc(clamp(52px, 7vw, 104px) + var(--angle));
  background: var(--bone);
  color: var(--ink-text);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle)), 0 100%);
}

.page-body__inner {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

@media (min-width: 1024px) {
  .page-body--aside .page-body__inner {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }
}

/* ==========================================================================
   PROSE
   --------------------------------------------------------------------------
   The reset zeroes margins and strips list markers, which is right for the
   designed sections and wrong for text the owner writes in the editor. This
   restores a readable document inside — and only inside — .prose.
   ========================================================================== */
.prose {
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

.page-body--paper .prose {
  color: var(--ink-mute);
}

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

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .004em;
  color: var(--white);
}

.page-body--paper .prose h2,
.page-body--paper .prose h3,
.page-body--paper .prose h4 {
  color: var(--ink-0);
}

.prose h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  margin-top: 2em;
}

.prose h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  margin-top: 1.8em;
}

.prose h4 {
  font-family: var(--f-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 1.6em;
}

.prose strong,
.prose b {
  color: var(--white);
  font-weight: 700;
}

.page-body--paper .prose strong,
.page-body--paper .prose b {
  color: var(--ink-0);
}

.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: var(--white);
}

.page-body--paper .prose a:hover {
  color: var(--ink-0);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: none;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: .5em;
}

.prose ul > li {
  position: relative;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: .62em;
  width: 7px;
  height: 2px;
  background: var(--red);
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--red);
  font-size: var(--fs-lede);
  font-weight: 600;
  color: var(--white);
}

.page-body--paper .prose blockquote {
  color: var(--ink-0);
}

.prose figure,
.prose img {
  border-radius: var(--radius-lg);
}

.prose figcaption {
  margin-top: .6em;
  font-size: .85rem;
  color: var(--mute);
}

.prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.page-body--paper .prose hr {
  border-top-color: var(--line-ink);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.prose th,
.prose td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.page-body--paper .prose th,
.page-body--paper .prose td {
  border-bottom-color: var(--line-ink);
}

.prose th {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}

.page-body--paper .prose th {
  color: var(--ink-0);
}

/* A short, dated note above legal copy. Draft wording must say so. */
.prose .note,
.page-note {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--mute);
}

.page-body--paper .page-note {
  border-color: var(--line-ink);
  border-left-color: var(--red);
  color: var(--ink-mute);
}

/* ==========================================================================
   FORMS — catering, contact, careers
   --------------------------------------------------------------------------
   One component for all three. The plugin decides what a form asks; this
   decides how it feels to fill in. Controls are large enough to hit with a
   thumb, labels sit above their fields so nothing is guessed at, and an
   error is attached to the control it belongs to rather than shouted once
   at the top and forgotten.

   The honeypot rule below is load-bearing: the plugin prints a decoy field
   on every form, and without this it would be a visible box that real
   customers dutifully fill in. It is moved off-screen rather than hidden
   with display:none, which a bot can trivially detect.
   ========================================================================== */
.bcx-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form {
  max-width: 760px;
}

.form__intro {
  margin-bottom: 22px;
  font-size: var(--fs-lede);
  color: var(--mute);
}

.form__req-note {
  margin-bottom: 18px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.form__req {
  color: var(--red);
}

.form__grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
  }

  .form__field--wide {
    grid-column: 1 / -1;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.form__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

.form__control {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.form__control::placeholder {
  color: var(--mute-2);
}

.form__control:hover {
  border-color: rgba(255, 255, 255, .34);
}

/* Colour only below: the background shorthand would also reset the select's
   drawn-arrow size and position and tile the arrow across the whole field. */
.form__control:focus {
  border-color: var(--red);
  background-color: rgba(255, 255, 255, .07);
}

.form__control:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.form__control--area {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

/* The native arrow is drawn by the platform and cannot be themed, so the
   select draws its own from two gradients and hides the original. */
.form__control--select {
  appearance: none;
  padding-right: 46px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 24px) calc(50% + 1px), calc(100% - 18px) calc(50% + 1px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The dropdown list itself is painted by the OS: on a dark control it has to
   be told to stay readable. */
.form__control--select option {
  color: var(--ink-text);
  background: var(--bone);
}

.form__control--file {
  padding: 12px 14px;
  cursor: pointer;
}

.form__control--file::file-selector-button {
  margin-right: 14px;
  padding: 9px 14px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--char);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--mute);
  cursor: pointer;
}

.form__check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
}

.form__help {
  font-size: .8rem;
  color: var(--mute-2);
}

.form__err {
  font-size: .82rem;
  font-weight: 700;
  color: var(--red);
}

.form__field.is-bad .form__control {
  border-color: var(--red);
}

.form__send {
  margin-top: 30px;
}

.form__legal {
  margin-top: 16px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--mute);
}

.form__legal a {
  text-decoration: underline;
}

/* The two states a submission comes back in. Both are announced to a screen
   reader and both take focus, because the redirect lands the visitor at the
   top of a form they have already filled in. */
.form__alert {
  margin-bottom: 26px;
  padding: 18px 20px;
  border: 1px dashed var(--red);
  border-radius: var(--radius-lg);
  background: rgba(236, 34, 40, .08);
  color: var(--text);
}

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

.form__alert-head {
  margin-bottom: 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.form__alert-list {
  display: grid;
  gap: 6px;
  font-size: .95rem;
  color: var(--mute);
}

.form__alert-list a {
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
}

.form__done {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
}

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

.form__done-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--white);
  background: var(--red);
  border-radius: 50%;
}

.form__done-text {
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--text);
}

/* On bone paper the same component has to invert: light surfaces, ink text,
   the same red for anything that is wrong. */
.page-body--paper .form__label,
.page-body--paper .form__intro,
.page-body--paper .form__consent {
  color: var(--ink-mute);
}

.page-body--paper .form__req-note,
.page-body--paper .form__help {
  color: var(--ink-mute);
}

.page-body--paper .form__control {
  color: var(--ink-text);
  background-color: rgba(255, 255, 255, .72);
  border-color: var(--line-ink);
}

.page-body--paper .form__control:hover {
  border-color: rgba(20, 17, 17, .32);
}

.page-body--paper .form__control:focus {
  background-color: var(--white);
  border-color: var(--red);
}

.page-body--paper .form__control--select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
}

.page-body--paper .form__control--file::file-selector-button {
  color: var(--ink-text);
  background: var(--bone-2);
  border-color: var(--line-ink);
}

.page-body--paper .form__alert {
  color: var(--ink-text);
  background: rgba(236, 34, 40, .07);
}

.page-body--paper .form__alert-list {
  color: var(--ink-mute);
}

.page-body--paper .form__alert-list a {
  color: var(--ink-text);
}

.page-body--paper .form__done {
  background: var(--white);
  border-color: var(--line-ink);
  border-left-color: var(--red);
}

.page-body--paper .form__done-text {
  color: var(--ink-text);
}

/* ==========================================================================
   CATERING
   --------------------------------------------------------------------------
   The page the homepage's catering band links to, and it opens the same way on
   purpose: the same oversized display line, the same three numbered steps, the
   same circular .plate photography. A visitor who pressed "Explore Catering"
   should feel they went deeper into one idea rather than arriving somewhere
   else. The plate cluster repeats the approved composition -- large plate high
   right, medium low left, small tucked between -- on dark instead of bone.
   ========================================================================== */
.cater {
  overflow: hidden;
}

.cater__grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 1024px) {
  .cater__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(48px, 5vw, 80px);
  }
}

.cater__copy {
  container-type: inline-size;
}

.cater__title {
  margin-bottom: 18px;
  font-size: clamp(3.2rem, 1.4rem + 7.4vw, 7.6rem);
  font-size: min(clamp(3.2rem, 1.4rem + 7.4vw, 7.6rem), 19cqi);
  color: var(--white);
}

.cater__lede {
  max-width: 34rem;
  font-size: var(--fs-lede);
  color: var(--mute);
}

.cater__note {
  margin-top: 22px;
}

.cater__facts {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.cater__facts li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  color: var(--text);
}

.cater__facts .icon {
  flex: none;
  margin-top: .18em;
  color: var(--red);
}

/* The plate cluster. Absolute inside a measured box, as the approved homepage
   section does it, so the circles overlap instead of queueing in a grid. */
.cater__shots {
  position: relative;
  height: clamp(300px, 82vw, 440px);
}

.cater__shots .plate {
  position: absolute;
  box-shadow:
    0 40px 70px -24px rgba(0, 0, 0, .85),
    0 0 0 8px rgba(255, 255, 255, .08);
}

.cater__shot--1 {
  top: 0;
  right: 0;
  width: 66%;
  max-width: 400px;
}

.cater__shot--2 {
  bottom: 6%;
  left: 0;
  width: 44%;
  max-width: 260px;
}

.cater__shot--3 {
  right: 15%;
  bottom: 0;
  width: 33%;
  max-width: 198px;
}

/* ==========================================================================
   FORM PAGES (shared)
   --------------------------------------------------------------------------
   Catering, contact and careers are the same page three times over: a dark
   band that says something true, then a paper surface carrying a form on the
   left and a column of short cards on the right. Every piece all three of them
   use is named for the job it does rather than for whichever page happened to
   need it first, which is why a careers page can be built without inventing a
   third heading scale.
   ========================================================================== */
/* The head of a dark band on an inner page: a measured column, an oversized
   display line, a lede in the muted grey. */
.pageband__head {
  max-width: 46rem;
}

.pageband__h2 {
  margin: 10px 0 clamp(18px, 2.4vw, 28px);
  font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem);
  color: var(--white);
}

.pageband__lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--mute);
}

/* The heading over a form on a paper page, and the paragraph under it. */
.formpage__h2 {
  margin: 10px 0 26px;
  font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.2rem);
  color: var(--ink-0);
}

.formpage__intro {
  max-width: 42rem;
  margin: 10px 0 clamp(24px, 3vw, 36px);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* The aside cards. Catering introduced them, but a short card on a paper
   surface -- a title, a little text, a list of links -- is what every form page
   needs beside its form, so they are named for the job rather than the page:
   catering, contact and careers all share these. */
.sidecards {
  display: grid;
  gap: 18px;
  align-content: start;
}

.sidecard {
  padding: 22px 22px 24px;
  background: var(--white);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-lg);
}

.sidecard__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink-0);
}

.sidecard__text {
  margin-top: 10px;
  color: var(--ink-mute);
}

.sidecard__text a,
.sidecard__links a {
  color: var(--ink-text);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
}

/* .steps is designed as a standalone block with its own breathing room; inside
   a card it only needs the gap under the title. */
.sidecard .steps {
  max-width: none;
  margin: 14px 0 0;
  border-top-color: var(--line-ink);
}

.sidecard .steps li {
  border-bottom-color: var(--line-ink);
}

.sidecard__fine {
  margin-top: 16px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-mute);
}

.sidecard__links {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.sidecard__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  font-weight: 700;
  border-bottom: 1px solid var(--line-ink);
  transition: color .2s var(--ease);
}

.sidecard__links a:hover {
  color: var(--red-ui);
}

.sidecard__links .icon {
  flex: none;
  transition: transform .3s var(--ease-out);
}

.sidecard__links a:hover .icon {
  transform: translateX(4px);
}

/* ==========================================================================
   ABOUT
   --------------------------------------------------------------------------
   The homepage's About band is a single section; this is the page it links to,
   so it has to read as a feature rather than as a longer copy of that band. It
   keeps the approved vocabulary -- the oversized display line, numbered rows, a
   red hairline beside small print -- and lays it out as an editorial spread: a
   two-column opening, one wide photograph, a cinematic line over a darkened
   still, and three honest ways to actually get the food.
   ========================================================================== */
.about__head {
  max-width: 76rem;
}

.about__title {
  margin-bottom: clamp(22px, 3vw, 34px);
  font-size: clamp(3.3rem, 1.5rem + 7.2vw, 7.8rem);
  color: var(--white);
}

.about__cols {
  display: grid;
  gap: clamp(20px, 3vw, 46px);
}

@media (min-width: 860px) {
  .about__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.about__lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text);
}

.about__text {
  display: grid;
  gap: 1.05em;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--mute);
}

/* The spread runs the full column width: a page about how the food is cooked
   should show it larger than a card would. */
.about__spread {
  margin-top: clamp(34px, 5vw, 64px);
}

.about__spread img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.about__cap {
  margin-top: 14px;
  padding-left: 16px;
  font-size: .86rem;
  letter-spacing: .01em;
  color: var(--mute-2);
  border-left: 2px solid var(--red);
}

/* ---- What we cook ---- */
.about__what {
  background: var(--ink-1);
}

.about__what-grid {
  display: grid;
  gap: clamp(36px, 5vw, 68px);
  align-items: start;
}

@media (min-width: 1024px) {
  .about__what-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(44px, 5vw, 80px);
  }
}

.about__h2 {
  margin: 10px 0 clamp(24px, 3vw, 38px);
  font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem);
  color: var(--white);
}

.about__facts {
  display: grid;
  border-top: 1px solid var(--line);
}

.about__facts li {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.about__n {
  flex: none;
  font-family: var(--f-display);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--red);
}

.about__fact-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--white);
}

.about__fact-text {
  margin-top: 6px;
  line-height: 1.6;
  color: var(--mute);
}

/* A counted fact, so it links to the thing it counted. */
.about__tally {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  transition: color .2s var(--ease);
}

.about__tally:hover {
  color: var(--white);
}

.about__tally .icon {
  flex: none;
  transition: transform .3s var(--ease-out);
}

.about__tally:hover .icon {
  transform: translateX(4px);
}

.about__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ---- The line, over a still ---- */
.about__quote {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 44vw, 540px);
  padding-block: clamp(60px, 8vw, 118px);
  overflow: hidden;
  background: var(--ink-0);
}

.about__quote-media {
  position: absolute;
  inset: 0;
}

.about__quote-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .46;
  transform: scale(1.04);
}

/* Legibility is not left to chance: display type on a photograph gets a
   two-direction darkening rather than one flat overlay, so the left edge where
   the words start is always the darkest part of the frame. */
.about__quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7, 6, 6, .93) 0%, rgba(7, 6, 6, .66) 46%, rgba(7, 6, 6, .3) 100%),
    linear-gradient(to top, rgba(7, 6, 6, .9), rgba(7, 6, 6, .18));
}

.about__quote .wrap {
  position: relative;
  z-index: 1;
}

.about__quote-text {
  max-width: 26ch;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 5.6rem);
  color: var(--white);
  text-wrap: balance;
}

.about__quote-by {
  margin-top: 20px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- Three ways to get it ---- */
.about__ways-head {
  max-width: 46rem;
}

.about__ways-grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 46px);
}

/* Three across only once there is room to read them: at tablet width a third
   of the page leaves a display-type heading about 170px to live in, so the
   cards stay full width until the desktop grid starts. */
@media (min-width: 1024px) {
  .about__ways-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about__way {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease), transform .25s var(--ease-out);
}

.about__way:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}

.about__way > .icon {
  width: 1.7em;
  height: 1.7em;
  color: var(--red);
}

.about__way-title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

.about__way-text {
  line-height: 1.6;
  color: var(--mute);
}

.about__way-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.about__way-link .icon {
  color: currentColor;
  transition: transform .3s var(--ease-out);
}

.about__way-link:hover {
  color: var(--white);
}

.about__way-link:hover .icon {
  transform: translateX(4px);
}

/* Both of these are text links rather than buttons, which is right for the
   reading they sit inside -- but a 27px target is not a thumb target, so on
   phones they get the height back without becoming buttons. */
@media (max-width: 1023px) {
  .about__tally {
    padding-block: 9px;
  }

  .about__way-link {
    padding-bottom: 7px;
  }
}

/* ---- The close, on paper ---- */
.about__prose {
  margin-bottom: clamp(30px, 4vw, 52px);
}

.about__end {
  max-width: 44rem;
}

.about__end-title {
  margin: 10px 0 18px;
  font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem);
  color: var(--ink-0);
}

.about__end-text {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-mute);
}

.about__end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
}

/* ==========================================================================
   CONTACT
   --------------------------------------------------------------------------
   A contact page is mostly a form, so the page's job is to make the form the
   obvious thing to do and to be honest about everything around it. The band
   above it is an editorial row list rather than another card grid -- it says
   where each kind of message actually goes -- and the details beside the form
   appear only for the channels the owner has actually published.
   ========================================================================== */
.contact__routes {
  margin-top: clamp(26px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}

.contact__route {
  display: grid;
  gap: 6px 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 880px) {
  .contact__route {
    grid-template-columns: 15rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

.contact__route-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

.contact__route-text {
  line-height: 1.6;
  color: var(--mute);
}

.contact__route-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.contact__route-link .icon {
  flex: none;
  transition: transform .3s var(--ease-out);
}

.contact__route-link:hover {
  color: var(--white);
}

.contact__route-link:hover .icon {
  transform: translateX(4px);
}

/* Touch targets again: a row link on a phone needs height the typography does
   not give it. */
@media (max-width: 1023px) {
  .contact__route-link {
    padding-block: 12px;
  }
}

/* ---- Beside the form, on paper ---- */
.contact__details {
  margin-top: 12px;
}

.contact__detail {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-ink);
}

.contact__detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.contact__value {
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-text);
}

.contact__value a {
  color: var(--ink-text);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
}

.contact__value a:hover {
  color: var(--red-ui);
}

/* ==========================================================================
   CAREERS
   --------------------------------------------------------------------------
   The one page on this site whose main job is to promise nothing. There is no
   vacancy list to show because the business has not published one, so the band
   above the form does the honest thing instead: it names the areas the owner
   has actually configured in Business Settings, as plain chips rather than as
   cards with invented role descriptions, and it says in words that none of
   them is an advertised opening. Everything below the band -- the form, the
   heading over it, the cards beside it -- is the shared form-page kit.
   ========================================================================== */
.jobs__note {
  margin-top: clamp(24px, 3vw, 36px);
}

.jobs__areas-label {
  margin-top: clamp(30px, 4vw, 48px);
}

.jobs__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3.6vw, 40px);
}

/* A chip carries a name and nothing else. The moment one grows a line of
   description it starts sounding like a job advert, which is exactly what this
   page is not allowed to be. */
.jobs__area {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.jobs__area::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--red);
}

.jobs__fine {
  max-width: 46rem;
  margin-top: clamp(22px, 3vw, 32px);
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--mute-2);
  border-left: 2px solid var(--red);
}

/* ---- What happens to an application, on paper ---- */
.jobs__rules {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-mute);
}

.jobs__rules li {
  display: flex;
  gap: 10px;
}

.jobs__rules .icon {
  flex: none;
  margin-top: .2em;
  color: var(--red-ui);
}

/* ==========================================================================
   LEGAL
   --------------------------------------------------------------------------
   Two long documents on the paper surface, read the way legal pages are
   actually read: somebody wants one paragraph. So the column keeps .prose's
   measure, the headings get generated ids and a scroll offset that clears the
   fixed header, and the aside carries a contents list that stays put on a
   desktop. The banner at the top is the most important element on the page and
   is styled to look like what it is -- a notice about the text, not part of it.
   ========================================================================== */
.legal__flag {
  margin-bottom: clamp(26px, 3.4vw, 40px);
  padding: 20px 22px 22px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-mute);
  background: var(--white);
  border: 1px solid var(--line-ink);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
}

.legal__flag-title {
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-deep);
}

.legal__stamp {
  margin-bottom: clamp(18px, 2.4vw, 28px);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* The first heading follows the date stamp, so it does not need .prose's
   two-line run-up. */
.legal .prose > h2:first-child {
  margin-top: 0;
}

/* A jumped-to heading has to clear the fixed header -- but html already carries
   scroll-padding-top for exactly that, sized to the compact header the page
   wears once it has been scrolled. So this adds breathing room on top of that
   and not a second copy of the header's height, which would drop the heading a
   quarter of the way down the screen. */
.legal .prose h2[id] {
  scroll-margin-top: 1rem;
}

/* A paragraph the owner can delete: it marks a section that is deliberately
   unwritten, so it reads as an editorial note rather than as policy. */
.legal .prose .legal__todo {
  padding-left: 16px;
  font-size: .92rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--red);
}

.legal__toc {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  counter-reset: legal-toc;
  list-style: none;
  padding-left: 0;
}

.legal__toc li {
  counter-increment: legal-toc;
}

.legal__toc a {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--line-ink);
  transition: color .2s var(--ease);
}

.legal__toc li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}

.legal__toc a::before {
  content: counter(legal-toc);
  flex: none;
  min-width: 1.2em;
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--red);
}

.legal__toc a:hover {
  color: var(--ink-0);
}

/* Below the aside's breakpoint the two cards stop being an aside at all. The
   contents list is a jump-list for a document five thousand pixels long, so
   leaving it underneath that document puts it exactly where it cannot be used:
   by the time a reader reaches it they have already done the scrolling it
   exists to save. display:contents dissolves the wrapper so the single column
   can order the three cards itself -- contents, then the document, then the
   card that only makes sense once the document has been read. */
@media (max-width: 1023px) {
  .legal .page-body__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 4vw, 40px);
  }

  .legal__doc,
  .legal__aside {
    display: contents;
  }

  /* The notice about the text comes before the text, and before the list of
     where the text goes -- a contents list tall enough to fill a phone screen
     would otherwise push the one paragraph a reader most needs to see below
     the fold. */
  .legal__flag {
    order: -3;
  }

  .legal__stamp {
    order: -2;
  }

  .legal__contents {
    order: -1;
  }

  /* The column's gap now does the spacing these two carried themselves. */
  .legal__flag,
  .legal__stamp {
    margin-bottom: 0;
  }
}

/* Sticky only where there is room for it: a list that followed the reader down
   a phone screen would spend the whole document on top of it. The offset is
   measured against the compact header, because the aside only ever sticks on a
   page that has been scrolled, and by then the header has shrunk. */
@media (min-width: 1024px) {
  .legal__aside {
    position: sticky;
    top: calc(var(--header-h-sm) + 24px);
  }
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound__code {
  font-family: var(--f-display);
  font-size: clamp(5rem, 2rem + 14vw, 13rem);
  line-height: .82;
  color: var(--red);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 8px;
}

.notfound__links a {
  padding: 10px 2px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color .2s, border-color .2s;
}

.notfound__links a:hover {
  color: var(--white);
  border-color: var(--red);
}

/* ==========================================================================
   SEARCH / ARCHIVE FALLBACK
   --------------------------------------------------------------------------
   The site is not a blog, but WordPress can still land a visitor on a list
   of posts, so the list has to look like it belongs here.
   ========================================================================== */
.entry-list {
  display: grid;
  gap: 2px;
  max-width: 48rem;
}

.entry-card {
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}

.entry-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.entry-card__title a {
  text-decoration: none;
}

.entry-card__title a:hover {
  color: var(--red);
}

.entry-card__meta {
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.entry-card__excerpt {
  margin-top: 12px;
  color: rgba(255, 255, 255, .78);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 32rem;
}

.search-form__field {
  flex: 1 1 14rem;
  min-height: 48px;
  padding: 0 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
}

.search-form__field:focus-visible {
  border-color: var(--red);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(28px, 4vw, 48px);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--mute);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--white);
  border-color: var(--red);
}