/* ==========================================================================
   Hoosier Tool Supply LLC — South Bend, Indiana
   Art direction: industrial supply house. High contrast, utilitarian,
   brand red from the logo used sparingly as the action color.
   ========================================================================== */

:root {
  /* Palette derived from the logo: glossy red, black, silver */
  --red: #c4161c;
  --red-dark: #8d0f14;
  --red-ink: #6d0b0f;
  --ink: #15171a;
  --ink-2: #23272c;
  --steel: #5a6068;
  --steel-light: #8b9299;
  --line: #e0e4e8;
  --surface: #f4f6f8;
  --surface-2: #eaeef2;
  --white: #ffffff;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 2.6vw, 2rem);
  --text-2xl: clamp(2rem, 4.4vw, 3rem);
  --text-hero: clamp(2.5rem, 6.4vw, 4.5rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --maxw: 1240px;

  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(21, 23, 26, 0.06), 0 2px 8px rgba(21, 23, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(21, 23, 26, 0.08), 0 12px 32px rgba(21, 23, 26, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps section headings clear of the sticky header when a nav link is used. */
  scroll-padding-top: 104px;
}
@media (max-width: 900px) { html { scroll-padding-top: 132px; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

/* --------------------------- Layout helpers ----------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface); }
.section--dark { background: var(--ink); color: #d7dbe0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-3);
}

.section--dark .eyebrow { color: #ff5a5f; }

.section-head { max-width: 62ch; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--text-2xl); text-transform: uppercase; }
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--steel);
  max-width: 58ch;
}
.section--dark .section-head h2 { color: #fff; }
.section--dark .section-head p { color: #9aa2aa; }

/* Diagonal accent rule echoing the logo's italic slant */
.rule {
  height: 4px;
  width: 64px;
  background: linear-gradient(90deg, var(--red), var(--red-dark));
  margin-bottom: var(--space-6);
}

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

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

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--red-dark); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--outline:hover { border-color: var(--ink); }

.btn--lg { font-size: var(--text-base); padding: 1em 1.75em; }

/* ------------------------------- Header --------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 88px;
  padding-block: var(--space-3);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 62px; width: auto; }
@media (max-width: 480px) { .brand img { height: 48px; } }
/* Smallest phones still in use (320px) need a touch more room for the button. */
@media (max-width: 360px) { .brand img { height: 40px; } }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-8));
}

.nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.25em;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.nav a:hover { color: var(--red); border-bottom-color: var(--red); }

/* Below 900px the inline links are replaced by a swipeable strip so the header
   still fits the logo and the call-to-action side by side. */
.nav-mobile { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .header-inner { min-height: 76px; }

  .nav-mobile {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
    padding: var(--space-3) var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .nav-mobile::-webkit-scrollbar { display: none; }

  .nav-mobile a {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .nav-mobile a:active { color: var(--red); }
}

.header-phone { display: flex; align-items: center; gap: var(--space-4); }

.header-phone .hours-note {
  font-size: var(--text-xs);
  color: var(--steel);
  line-height: 1.3;
  text-align: right;
}
.header-phone .hours-note strong { color: var(--ink); display: block; }
@media (max-width: 720px) { .header-phone .hours-note { display: none; } }

/* The larger logo needs the room back on small phones, so the header's call
   button gets tighter rather than dropping the phone number. */
@media (max-width: 560px) {
  .header-phone .btn {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    padding: 0.85em 0.9em;
  }
}

/* -------------------------------- Hero ---------------------------------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* On narrow screens "cover" throws away about two thirds of the width, and the
   storefront and the roadside sign sit at opposite ends of the frame, so only
   one can survive. Favour the red storefront and its brand banners: the sign
   only ever lands half-cropped, and the phone number is already a button. */
@media (max-width: 720px) { .hero__media img { object-position: 26% center; } }

/* Two stacked washes, kept deliberately light so the daylight photo and the
   roadside sign stay clearly visible. These multiply, so the values look lower
   than the darkness they actually produce: ~68% at the bottom-left where the
   headline sits, and only ~20% over the sign on the right. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(8, 9, 11, 0.44) 0%,
      rgba(8, 9, 11, 0.3) 44%,
      rgba(8, 9, 11, 0.08) 76%,
      rgba(8, 9, 11, 0.02) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 9, 11, 0.46) 0%,
      rgba(8, 9, 11, 0.2) 46%,
      rgba(8, 9, 11, 0.02) 82%,
      rgba(8, 9, 11, 0) 100%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  width: 100%;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.5em 1em;
  backdrop-filter: blur(6px);
}
.badge--red { background: var(--red); border-color: var(--red); }
.badge .star { color: #ffc32b; }

.hero h1 {
  color: #fff;
  font-size: var(--text-hero);
  text-transform: uppercase;
  max-width: 19ch;
  font-style: italic;
  /* Carries the headline on its own now that the wash over the photo is lighter. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 40px rgba(0, 0, 0, 0.6);
}
.hero h1 em { color: var(--red); font-style: italic; }

.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: #e4e8ec;
  max-width: 52ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.hero__cta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero__phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__phone:hover { color: #ff7a7f; }

/* ---------------------------- Facts strip ------------------------------- */
.facts {
  background: var(--ink);
  border-top: 4px solid var(--red);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.fact {
  background: var(--ink);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.fact__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-style: italic;
  /* Reserve the tallest value's height for every cell so the labels underneath
     all sit on the same line, even where the value is a word set smaller. */
  min-height: clamp(1.75rem, 3.6vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A whole word needs a smaller size than a 4-character figure so it still fits
   on one line in a narrow column. */
.fact__num--word {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  white-space: nowrap;
}

.fact__label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b9299;
  font-weight: 600;
}

/* ------------------------------ Categories ------------------------------ */
/* Six categories across three columns = two full rows, no orphan cards. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

.cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-2); }
.cat:hover::before { transform: scaleY(1); }

.cat__icon { color: var(--red); margin-bottom: var(--space-4); }
.cat h3 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}
.cat p { font-size: var(--text-sm); color: var(--steel); }

/* Footer echo of the slogan, sized to sit under the logo plate. */
.footer-slogan {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  margin: var(--space-6) 0 0;
}

/* -------------------------------- Slogan -------------------------------- */
/* Sits directly under the dark facts strip, so it stays white for contrast.
   "STORE" carries the brand red; "DEPARTMENT" is deliberately drained to
   steel so the comparison lands visually, not just verbally. */
.slogan {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.slogan__lead {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.slogan__sub {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.1vw, 1.625rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--steel);
  max-width: 44ch;
  margin: var(--space-6) auto 0;
  text-wrap: balance;
}
.slogan__sub strong,
.slogan__dept {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.slogan__sub strong { color: var(--red); }
.slogan__dept { color: var(--steel-light); }

/* A short red rule under the lead line ties the band to the brand. */
.slogan__lead::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--red);
  margin: var(--space-6) auto 0;
}

/* -------------------------------- Brands -------------------------------- */
/* The brand count changes as lines are added, so this is a centred flex wall
   rather than a fixed grid: a short final row centres itself instead of
   leaving dead cells. --cols sets how many fit per row at each width.
   Every logo is pre-composited onto an identical 3:1 canvas, so the wall reads
   evenly regardless of each mark's native proportions. */
.brand-grid {
  --cols: 6;
  --bgap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bgap);
}

@media (max-width: 1080px) { .brand-grid { --cols: 4; } }
@media (max-width: 720px)  { .brand-grid { --cols: 3; } }
@media (max-width: 460px)  { .brand-grid { --cols: 2; } }

.brand-cell {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--bgap)) / var(--cols));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.6);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-3), 1.6vw, var(--space-6));
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.brand-cell:hover {
  background: var(--surface);
  border-color: var(--steel);
  box-shadow: var(--shadow-sm);
}

.brand-cell img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.brand-cell:hover img { transform: scale(1.05); }

.brands-note {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--steel);
  text-align: center;
}
.brands-note strong { color: var(--ink); }

/* ------------------------------- Gallery -------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 250px);
  gap: var(--space-4);
}
.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery .g-wide { grid-column: span 2; grid-row: span 2; }

@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vw; }
  .gallery .g-wide { grid-column: span 2; grid-row: span 1; }
}

/* ------------------------------ Testimonials ---------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.quote {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote__stars { color: #ffc32b; letter-spacing: 0.1em; font-size: var(--text-sm); }
.quote__text { color: #dfe3e8; font-size: var(--text-base); }
.quote__who {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b9299;
  margin-top: auto;
  font-weight: 600;
}

/* -------------------------------- Visit --------------------------------- */
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

.info-block + .info-block { margin-top: var(--space-8); }
.info-block h3 {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
}
.info-block p, .info-block address {
  font-style: normal;
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.6;
}
.info-block a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.info-block a:hover { color: var(--red); }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td {
  text-align: left;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.hours-table th { font-weight: 600; color: var(--ink); width: 55%; }
.hours-table td { color: var(--steel); }
.hours-table tr.is-closed td { color: var(--steel-light); }

.map-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
/* 16:9 matches the storefront photo, so the roadside sign at the right edge is
   never cropped out of frame. height:auto is required — without it the HTML
   height attribute wins and aspect-ratio is ignored. */
.map-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.map-card__body { padding: var(--space-6); }

/* ------------------------------- Call band ------------------------------ */
.callband {
  background: linear-gradient(135deg, var(--red-ink), var(--red));
  color: #fff;
  text-align: center;
}
.callband h2 {
  color: #fff;
  font-size: var(--text-2xl);
  text-transform: uppercase;
  font-style: italic;
}
.callband p { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.9); }
.callband .btn--white {
  margin-top: var(--space-8);
  background: #fff;
  color: var(--red-ink);
}
.callband .btn--white:hover { background: var(--ink); color: #fff; }

/* -------------------------------- Footer -------------------------------- */
.site-footer { background: var(--ink); color: #9aa2aa; padding-block: var(--space-16) var(--space-8); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-12);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* The logo has black "TOOL SUPPLY" lettering, so on the dark footer it sits
   on a white plate to stay legible and on-brand. */
.footer-logo-plate {
  display: inline-block;
  background: #fff;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
}
.footer-logo-plate img { height: 66px; width: auto; }

.site-footer p { font-size: var(--text-sm); }
.site-footer h4 {
  color: #fff;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: #c3c9cf; text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #7b838b;
}

/* ------------------------------- Motion --------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ----------------------------- 360 tour ---------------------------------- */
/* Embedded Google photospheres. Click-to-load: nothing touches Google until
   the visitor asks for it, which keeps the page fast and avoids a third-party
   iframe on every pageview. */
.tour { margin-top: var(--space-12); }

.tour__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}

.tour__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}

.tour__views { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tour__view {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6em 1em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tour__view:hover { color: var(--ink); border-color: var(--steel-light); }
.tour__view:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.tour__view.is-active {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.tour__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tour__stage iframe,
.tour__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tour__poster { object-fit: cover; object-position: center 38%; }

.tour__start {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  color: var(--white);
  background: linear-gradient(180deg, rgba(21,23,26,.30), rgba(21,23,26,.62));
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.tour__start:hover { background: linear-gradient(180deg, rgba(21,23,26,.22), rgba(21,23,26,.55)); }
.tour__start:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; }

.tour__start-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--white);
  background: var(--red);
  border-radius: 999px;
  padding: .5em .7em;
  box-shadow: var(--shadow-md);
}
.tour__start-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  /* Narrow phones wrap this to two lines; balance avoids a one-word orphan. */
  text-wrap: balance;
  max-width: 22ch;
}
.tour__start-sub {
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #dfe4e9;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  text-wrap: balance;
  max-width: 30ch;
}

.tour__credit {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--steel);
}
.tour__credit a { color: var(--steel); text-decoration: underline; }
.tour__credit a:hover { color: var(--red); }

/* A 16:9 stage gets uselessly short on a phone; go closer to 4:3 so there is
   something to actually look around in. */
@media (max-width: 700px) {
  .tour__stage { aspect-ratio: 4 / 3; }
  .tour__head { flex-direction: column; align-items: stretch; }
  /* Flex wrapping left these ragged (2 buttons, then 1, then 1) because the
     labels differ in length. A fixed 2-up grid keeps them even. */
  .tour__views { display: grid; grid-template-columns: 1fr 1fr; }
  .tour__view { text-align: center; padding: .7em .5em; }
}
@media (max-width: 380px) {
  .tour__stage { aspect-ratio: 3 / 4; }
}