/* ===================================================================
   GOAT HOUSE — SEVENTIES THEME
   Joe chose "Seventies warm" on 2026-10-12: mustard, orange, rust and
   brown on cream, heavy rounded headings, striped bands and chunky
   rounded photos. It picks up the mustard throws and curtains and the
   wood in the rooms.

   This file loads after styles.css and only re-points the family tokens
   and restyles a few components. tokens.css is overwritten by
   brand/sync.js, so the theme lives here, not there. Same two fonts
   (Fraunces + Inter), so no brand-font change.

   Contrast (WCAG AA, checked 2026-10-12):
     brown #4a2717 on cream 11.2:1, on tint 9.9:1, on mustard 6.7:1
     body  #4f3524 on cream  9.6:1
     muted #6b4a33 on cream  6.8:1, on tint 6.0:1
     rust text #a3431a on cream 5.3:1, on tint 4.7:1
     brown on mustard fill 6.0:1; mustard on brown 6.7:1
   The brighter rust #c2541f (3.9:1) and orange are decoration only.
   =================================================================== */

:root {
  /* The seventies palette, named for what it is. */
  --seventies-cream: #f7ecd6;
  --seventies-paper: #fffaf0;
  --seventies-tint: #f2deb0;
  --seventies-mustard: #e3b23c;
  --seventies-orange: #e98a2b;
  --seventies-rust: #c2541f;
  --seventies-brown: #4a2717;
  --seventies-brown-deep: #3a1d10;

  /* The family tokens, re-pointed. Every component in styles.css reads these. */
  --colour-bg: var(--seventies-cream);
  --colour-surface: var(--seventies-paper);
  --colour-surface-2: var(--seventies-tint);
  --colour-ink: var(--seventies-brown);
  --colour-ink-light: #6a3a20;
  --colour-text: #4f3524;
  --colour-muted: #6b4a33;
  --colour-muted-light: #b8996c;   /* decorative only */
  --colour-line: #e3c98f;
  --colour-accent: #e3a33a;        /* fill only, always brown text on it */
  --colour-accent-hover: #ecb553;
  --colour-accent-text: #a3431a;   /* rust at text size */
  --colour-accent-light: #f3c763;  /* on the dark photo scrim only */
  --colour-on-accent: var(--seventies-brown);
  --colour-accent-soft: var(--seventies-tint);
  --colour-highlight: #e3a33a;
  --colour-on-highlight: var(--seventies-brown);
  --colour-secondary: var(--seventies-brown);
  --colour-hero-panel: var(--seventies-tint);
  --colour-inverse-bg: var(--seventies-brown);
  --colour-inverse-text: var(--seventies-cream);
  --colour-inverse-muted: #e8cfa3;
  --colour-footer-bg: var(--seventies-brown-deep);
  --colour-focus: var(--seventies-brown);

  --radius-sm: 0.75rem;
  --radius-md: 1.75rem;
  --radius-lg: 2.25rem;
  --shadow-card: none;
  --shadow-raised: 8px 8px 0 var(--seventies-orange);

  /* The four-band stripe, used on the hero, under the bar and over the footer. */
  --seventies-stripes: linear-gradient(180deg,
    var(--seventies-mustard) 0 25%,
    var(--seventies-orange) 25% 50%,
    var(--seventies-rust) 50% 75%,
    var(--seventies-brown) 75% 100%);
}

/* ---------- Type: heavy, tight, warm ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-weight: 900; line-height: 1.02; }
h2 { font-weight: 900; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; }

.eyebrow {
  letter-spacing: 0.14em;
}

/* Three short bars under each section heading: the stripe in miniature. */
.section-heading h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 12px;
  margin: var(--space-sm) auto 0;
  border-radius: 6px;
  background: var(--seventies-stripes);
}

.split-content h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 12px;
  margin-top: var(--space-sm);
  border-radius: 6px;
  background: var(--seventies-stripes);
}

/* ---------- Header ---------- */
.site-header::before {
  background-color: color-mix(in srgb, var(--seventies-cream) 96%, transparent);
}

/* The solid bar sits on a stripe; the clear bar on the home photo does not. */
.site-header {
  border-bottom: 0;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: var(--seventies-stripes);
  pointer-events: none;
}

/* On the home page the bar's ::after is the dark shade behind the clear bar
   (styles.css); restate it in brown and keep the stripe off it. */
.js .site-header--overlay::after {
  bottom: auto;
  height: calc(var(--header-height) + 2.5rem);
  background: linear-gradient(rgba(42, 20, 9, 0.66) 0%, rgba(42, 20, 9, 0.5) 60%, rgba(42, 20, 9, 0) 100%);
}

.js .site-header--overlay.is-scrolled,
.js .site-header--overlay.is-open {
  box-shadow: 0 4px 0 var(--seventies-mustard), 0 8px 0 var(--seventies-orange), 0 12px 0 var(--seventies-rust);
}

/* ---------- Hero ---------- */
.hero-media.photo::after {
  background: linear-gradient(180deg, rgba(42, 20, 9, 0.5) 0%, rgba(42, 20, 9, 0.35) 40%, rgba(42, 20, 9, 0.85) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  z-index: 3;
  background: var(--seventies-stripes);
}

.hero-content {
  padding-bottom: calc(var(--space-xxl) + 28px);
}

/* ---------- Buttons: fat pills ---------- */
.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.btn-primary {
  box-shadow: 0 4px 0 var(--seventies-rust);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 6px 0 var(--seventies-rust);
}

.btn-outline {
  border-width: 3px;
}

/* ---------- Photos: chunky and rounded ---------- */
.photo {
  border-radius: var(--radius-md);
}

.split-image {
  border: 6px solid var(--seventies-mustard);
  box-shadow: 10px 10px 0 var(--seventies-orange);
}

.photo-tag {
  background-color: rgba(58, 29, 16, 0.86);
}

/* ---------- Cards ---------- */
.benefit-list li,
.feature-card {
  border: 2px solid var(--colour-line);
}

.benefit-icon {
  background-color: var(--seventies-mustard);
  color: var(--seventies-brown);
}

.feature-card:hover,
.room-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-raised);
}

.room-card {
  border: 2px solid var(--colour-line);
}

.room-image {
  border-radius: 0;
}

.room-body h3 {
  font-size: 1.6rem;
}

.facility-list li {
  background-color: var(--seventies-brown);
  color: var(--seventies-cream);
  border-radius: var(--radius-pill);
}

.room-open__count {
  background-color: var(--seventies-mustard);
  color: var(--seventies-brown);
  border-radius: var(--radius-pill);
}

/* ---------- Footer: sits on the stripe ---------- */
.site-footer {
  box-shadow:
    inset 0 8px 0 var(--seventies-mustard),
    inset 0 16px 0 var(--seventies-orange),
    inset 0 24px 0 var(--seventies-rust);
}