/* Shared layout and controls. Colours, fonts, frames and ornament come from the theme files
   (barber.css, fallout.css) and art.css. Structure is identical in both worlds; see DESIGN.md section 3. */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 1.05rem;
  line-height: 1.6;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--heading-font);
  color: var(--heading);
  line-height: 1.15;
  font-weight: normal;
}

p {
  margin: 0 0 1rem;
}

/* ---- One structure, two voices: each world shows its own copy and art ---- */
[data-theme="barber"] .w-dark,
[data-theme="fallout"] .w-light {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--skip-bg);
  color: var(--skip-fg);
  font-weight: bold;
}

.skip-link:focus {
  top: 1rem;
}

/* ---- Focus: always visible, on every interactive element ---- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}

/* main takes focus from the skip link; it is not a control, so it needs no ring. */
#main:focus {
  outline: none;
  box-shadow: none;
}

/* ---- Header strip ---- */
.site-header {
  position: relative;
  z-index: 5;
  background: var(--header-bg);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 1440px;
  min-height: 88px;
  margin: 0 auto;
  padding: 0.5rem clamp(16px, 3vw, 40px);
}

.brand,
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.header-right {
  justify-self: end;
}

.site-name {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  text-decoration: none;
  color: var(--heading);
  line-height: 1;
}

.brand-main {
  font-family: var(--heading-font);
  font-size: 1.75rem;
}

.brand-sub {
  font-family: var(--label-font);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plaque {
  margin: 0;
  font-family: var(--label-font);
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
  font-family: var(--label-font);
}

.site-nav a {
  position: relative;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nav-link);
}

/* ---- Phone menu button (js/nav.js shows it below 760px; without the script it never appears) ---- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--toggle-hover);
}

.nav-toggle:focus {
  outline: none;
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -0.4rem;
}

.nav-toggle-bars::after {
  top: 0.4rem;
}

.nav-open .nav-toggle-bars {
  background: transparent;
}

.nav-open .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-open .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  font-family: var(--label-font);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn .icon {
  width: 1em;
  height: 1em;
}

.btn-soon {
  cursor: default;
  border-style: dashed;
}

/* ---- Hero (Home) ---- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 56vw, 640px);
  overflow: hidden;
  background: var(--hero-bg);
  isolation: isolate;
}

/* The scene keeps its own 16:10 box at the right so the overlays line up with the drawing. */
.hero-scene {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 10;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--hero-scrim) 0, var(--hero-scrim) 34%, transparent 62%);
  pointer-events: none;
}

.hero-copy {
  width: min(40rem, 48%);
  margin-left: max(clamp(16px, 3vw, 40px), calc((100vw - 1280px) / 2 + 40px));
  padding: 3rem 0;
}

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--label-font);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  margin-bottom: 1.25rem;
}

.hero h1 em,
.page-banner h1 em {
  display: block;
  font-style: normal;
}

.hero-lede {
  max-width: 34rem;
  font-size: 1.15rem;
}

.hero-cta {
  margin: 1.75rem 0 1.25rem;
}

.hero-flourish {
  margin: 0;
  font-family: var(--label-font);
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Scene overlays: positions are percentages of the 1600x1000 drawing (see the comments in the hero SVGs). */
.scene-layer {
  position: absolute;
  pointer-events: none;
}

/* ---- Inner page banner ---- */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 240px;
  overflow: hidden;
  background-color: var(--hero-bg);
  background-size: cover;
  background-position: right center;
  isolation: isolate;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--hero-scrim) 0, var(--hero-scrim) 40%, var(--banner-scrim-end) 100%);
}

.page-banner .wrap {
  /* The frame behind the heading (css/glass.css) sits --frame-x in from each side and 1rem in from top and bottom.
     Content keeps the same 1.5rem breathing room from the frame on all four sides, at every width. */
  --frame-x: clamp(8px, 2vw, 24px);
  padding: 2.5rem calc(var(--frame-x) + 1.5rem);
}

.page-banner .wrap > * {
  max-width: 43rem;
}

.page-banner h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  margin-bottom: 0.75rem;
}

.page-banner .lede {
  max-width: 40rem;
  margin: 0;
  font-size: 1.1rem;
}

/* ---- Sections ---- */
.section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.section-head {
  margin-bottom: 2rem;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

.section-sub {
  margin: 0.5rem 0 0;
  font-family: var(--label-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* ---- Property cards ---- */
.property-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-row {
  --gap: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

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

.card-sign {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
}

.card-art {
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.card-desc {
  position: relative;
  flex: 1;
}

.card-detail {
  font-size: 1rem;
}

.card-meta {
  font-family: var(--label-font);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Our Properties: the same four cards, larger, two by two. */
.board .card-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --gap: 40px;
  row-gap: 56px;
}

.board .card-sign {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

/* Two cards per row: the picture sits across the top, the words below, so neither column is a thin strip. */
.board .card-art {
  margin: 0 0 1rem;
  aspect-ratio: 16 / 9;
}

.board .card-desc {
  flex: none;
  font-size: 1.1rem;
}

/* Cards in a row are equal height; the button sits on the bottom edge so buttons line up across cards whatever the text length. */
.board .card-sign .btn {
  margin-top: auto;
}

.board .card-meta {
  margin-bottom: 1rem;
}

/* One card per row at 900 to 1099px is wide enough for picture and words side by side. The art spans
   however many text rows there are (rows come from the content, never from a fixed count). */
@media (min-width: 56.25em) and (max-width: 68.6875em) {
  .board .card-sign {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-auto-rows: auto;
    align-content: start;
    column-gap: 1.5rem;
  }

  .board .card-art {
    grid-row: 1 / span 8;
    grid-column: 1;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 15rem;
    margin: 0;
  }

  .board .card-sign > :not(.card-art) {
    grid-column: 2;
  }
}

/* ---- About / Contact band ---- */
.band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.band-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
}

.vignette {
  aspect-ratio: 16 / 9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.band-text h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 0.75rem;
}

/* ---- About page: the story / field log ---- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.story-figure {
  margin: 0;
  position: sticky;
  top: 1.5rem;
}

.story-figure .vignette {
  aspect-ratio: 16 / 9;
}

.story-figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--label-font);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

.log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.log h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.log p:last-child {
  margin-bottom: 0;
}

.footnote {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  font-size: 1rem;
}

/* ---- Contact: the form as part of the world ---- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.contact-form .salutation {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.contact-form label {
  margin-top: 0.85rem;
  font-family: var(--label-font);
  letter-spacing: 0.06em;
}

.contact-form .req {
  font-size: 0.875rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.5rem;
  border: 0;
  color: inherit;
  background: transparent;
}

.contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.contact-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-form button {
  font: inherit;
  cursor: pointer;
}

.form-status {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
}

.form-error {
  font-weight: bold;
}

.contact-aside .vignette {
  margin-bottom: 1.25rem;
}

.contact-aside h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.contact-aside p {
  font-size: 1rem;
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem clamp(16px, 3vw, 40px);
}

.footer-brand {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--footer-heading);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  font-family: var(--label-font);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--footer-link);
}

.footer-line {
  margin: 0;
  font-family: var(--label-font);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-align: right;
}

.footer-small {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
}

/* ---- Theme toggle: a real button, so Tab, Enter and Space all work ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--toggle-hover);
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* The destination is always visible: a leather barber chair in the bunker,
   a machined steel vault door in the shop. No hover-only cover. */
.theme-toggle {
  position: relative;
  overflow: hidden;
  width: 3.25rem;
  height: 3.25rem;
  min-width: 44px;
  min-height: 44px;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 20%), 0 2px 4px rgb(0 0 0 / 15%);
}

.theme-toggle .icon {
  width: 2.9rem;
  height: 2.9rem;
  transition: transform 200ms ease;
}

[data-theme="barber"] .theme-toggle .theme-chair,
[data-theme="fallout"] .theme-toggle .theme-vault {
  display: none;
}

.theme-toggle:hover .icon,
.theme-toggle:focus-visible .icon {
  transform: scale(1.06);
}

/* ---- Responsive ---- */
/* The brand column is 1fr of the header grid; the plaque only fits once that column is wide enough. */
@media (max-width: 89.9375em) {
  :root[data-theme] .plaque-left {
    display: none;
  }
}

@media (max-width: 68.6875em) {
  .card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Theme sheets set display on the plaques, so the hide must outrank them. */
  :root[data-theme] .plaque-right {
    display: none;
  }

  .board .card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 56.1875em) {
  .band,
  .story,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-figure {
    position: static;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .footer-line {
    text-align: center;
  }
}

/* 760 to 1099px: the wordmark and toggle share a row and the menu takes its own row, so the wordmark never runs under it. */
@media (min-width: 47.5em) and (max-width: 68.6875em) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.25rem;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding-bottom: 0.35rem;
  }
}

/* Media queries use em, not px, so they follow the reader's text-size setting as well as the window width. */
/* Below 760px: wordmark and toggle on one row, the four links in a two-by-two grid on the next so none is hidden. No hamburger. */
@media (max-width: 47.4375em) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    row-gap: 0.25rem;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.5rem;
    padding-bottom: 0.25rem;
  }

  .site-nav a {
    min-width: 0;
    white-space: normal;
  }

  /* With the script, the menu collapses behind the button and opens as one full-width column of large tap targets. */
  .nav-js .nav-toggle {
    display: inline-flex;
  }

  .nav-js .site-nav {
    display: none;
  }

  .nav-js .nav-open .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0.25rem 0 0.5rem;
  }

  .nav-js .nav-open .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--rule);
  }

  /* The current-page marker sits at the row's right edge instead of hanging between rows. */
  html.nav-js[data-theme] .nav-open .site-nav a[aria-current="page"]::before {
    left: auto;
    right: 0.75rem;
    bottom: 50%;
    margin: 0 0 -4px;
  }

  /* The wordmark yields to the buttons however large the reader's text is. */
  html[data-theme] .site-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  }

  .brand {
    gap: 0.5rem;
  }

  .header-right {
    gap: 0.5rem;
  }

  html[data-theme] .brand-main {
    font-size: min(1.4rem, 6.4vw);
  }

  html[data-theme] .brand-sub {
    font-size: min(0.8rem, 3vw);
    white-space: nowrap;
    letter-spacing: 0.08em;
  }

  .hero {
    display: block;
    min-height: 0;
  }

  .hero-scene {
    position: relative;
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero::before {
    display: none;
  }

  .hero-copy {
    width: auto;
    margin: 0;
    padding: 2rem clamp(16px, 3vw, 40px) 2.5rem;
  }

  .band-col,
  .board .card-sign {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 37.4375em) {
  .card-row {
    grid-template-columns: minmax(0, 1fr);
    --gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* A small maker's credit in the MCD property card. */
.card-credit {
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid var(--rule);
  font-size: 0.95rem;
}