/* =============================================================================
   J'BEZ — PAGE LAYOUTS
   Layout that belongs to one page type. Components stay reusable, this file
   holds the arrangement.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HOMEPAGE
   ----------------------------------------------------------------------------- */

/* The brand story. Two columns on wide screens, generous white space, one
   image doing the work rather than four. */
.story { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 56em) {
  .story { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .story--reverse .story__media { order: -1; }
}
.story__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-soft);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__body { max-width: var(--measure); }
.story__body h2 { margin-bottom: var(--space-m); }
.story__body .label { margin-bottom: var(--space-s); }

/* The mission statement, set large on a Jet Black band. One of the few
   moments that carries the brand. */
.statement { text-align: center; }
.statement blockquote {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: var(--weight-light);
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.statement figcaption {
  margin-top: var(--space-l);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(241, 231, 214, 0.66);
}

/* -----------------------------------------------------------------------------
   LOCATION PAGES
   Same components both shops. Only the mood tokens and the copy differ.
   ----------------------------------------------------------------------------- */

.loc-intro { display: grid; gap: var(--space-xl); }
@media (min-width: 56em) {
  .loc-intro { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-3xl); align-items: start; }
}

.loc-marks { display: grid; gap: var(--space-l); margin-top: var(--space-2xl); }
@media (min-width: 48em) { .loc-marks { grid-template-columns: repeat(3, 1fr); } }
.loc-mark { padding-top: var(--space-m); border-top: 1px solid var(--mood-rule); }
.loc-mark h3 { font-size: var(--step-h3); margin-top: var(--space-2xs); }
.loc-mark p { margin-top: var(--space-2xs); color: var(--text-muted); }

/* Visit block. Address, hours, and directions in one calm column. */
.visit { display: grid; gap: var(--space-xl); }
@media (min-width: 56em) { .visit { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.visit dl { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
.visit dl > div {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule-hairline);
}
.visit dt {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.28em;
}
.visit dd { margin: 0; }
.visit address { font-style: normal; }

/* -----------------------------------------------------------------------------
   BARBERS INDEX
   ----------------------------------------------------------------------------- */

.team + .team { margin-top: var(--space-3xl); }
.team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--mood-rule);
}
.team__head h2 { font-size: var(--step-h2); }

/* -----------------------------------------------------------------------------
   PAGE HEADER, used on every page that is not a hero page
   ----------------------------------------------------------------------------- */

.page-head {
  padding-block: calc(var(--space-3xl) + var(--space-l)) var(--space-2xl);
  border-bottom: 1px solid var(--rule-hairline);
}
.page-head .label { margin-bottom: var(--space-m); }
.page-head p { margin-top: var(--space-m); }
.page-head--center { text-align: center; border-bottom: 0; padding-bottom: 0; }
.page-head--center .lede { margin-inline: auto; }

/* -----------------------------------------------------------------------------
   LEGAL PAGES
   Long prose. Narrow measure, clear hierarchy, and a visible marker anywhere
   a lawyer needs to look.
   ----------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 {
  font-size: var(--step-h3);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-hairline);
}
.prose h3 { font-size: var(--step-body); font-weight: var(--weight-medium); font-family: var(--font-text); margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: var(--space-m); display: grid; gap: var(--space-2xs); }
.prose li { color: var(--text-muted); }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--text); font-weight: var(--weight-medium); }
.prose a { overflow-wrap: anywhere; }

/* Table of contents for the legal pages. */
.toc {
  padding: var(--space-l);
  background: var(--surface-soft);
  border-radius: var(--radius-s);
  margin-block: var(--space-xl) var(--space-3xl);
}
.toc ol { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); margin-top: var(--space-s); }
.toc a { font-size: var(--step-small); }

/* Anywhere counsel should look. Deliberately impossible to miss.
   Given its own vertical space so it never merges with the block beneath it,
   which is Heritage Cream too. */
.legal-flag {
  display: grid;
  gap: var(--space-2xs);
  margin-block: var(--space-xl);
  padding: var(--space-m);
  background: var(--surface-soft);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-xs);
  font-size: var(--step-small);
}
.legal-flag__label {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Not the warm accent. On the legal pages the live warm accent is Warm Sand,
     and Warm Sand type on a light ground fails contrast and is banned by the
     brand book. The accent still marks the block, as the left rule. */
  color: var(--text);
  font-weight: var(--weight-medium);
}
.legal-flag p { color: var(--text); margin: 0; }

.legal-updated {
  font-size: var(--step-small);
  color: var(--text-faint);
}

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

.notfound {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 70svh;
  padding-block: var(--space-3xl);
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}