/* =========================================================================
   Harbour Sons — site styles
   A warm, light "vintage harbour poster" theme. Every colour is sampled from
   the colour badge artwork: cream sky, brass border, sea blue, ink linework.
   Contrast ratios against the cream paper are noted where they matter.
   ========================================================================= */

:root {
  /* Grounds */
  --paper:      #FBF3E4;  /* page */
  --paper-warm: #F7E9CE;  /* cards */
  --sand:       #F3E0BC;  /* alternating panels */

  /* Ink */
  --ink:        #12181C;  /* 16.2:1 on paper */
  --ink-soft:   #4A565E;  /*  6.8:1 on paper */
  --ink-line:   #DFC9A0;  /* hairlines on warm grounds */

  /* Accents */
  --brass:        #D89C60;  /* fills — ink on brass is 7.5:1 */
  --brass-mid:    #B47830;  /* borders, large type */
  --brass-deep:   #8A5A1F;  /*  5.3:1 on paper — safe for small caps */
  --sea-deep:     #3F5F6C;  /*  6.2:1 on paper */

  /* The hero sits over dark footage and keeps a light-on-dark treatment */
  --hero-ink:   #0B1114;
  --hero-text:  #FBF3E4;

  --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-label:   "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;

  --shadow-card: 0 2px 4px rgb(60 40 15 / 0.06), 0 14px 34px -14px rgb(60 40 15 / 0.28);
  --shadow-lift: 0 8px 14px rgb(60 40 15 / 0.10), 0 26px 54px -18px rgb(60 40 15 / 0.40);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* keep anchors clear of the fixed masthead */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is essential — the width/height attributes on <img> reserve the
   right aspect ratio during load, but must not fight the CSS width. */
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; border-radius: 2px; }

/* ---------- Layout helpers ---------- */
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
/* Video thumbnails are not prose — they should not be held to a reading
   measure. Overriding the token rather than the width keeps .wrap's logic. */
.wrap--wide { --wrap: 1440px; }
.section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; }
.section--panel { background: var(--sand); }

/* Skip link. Parked just above the viewport rather than clipped to 1px, so it
   can actually slide into view when a keyboard user tabs to it — the whole
   point of it. Deliberately NOT built on .btn: sharing a class with equal
   specificity that is defined later means .btn wins the cascade, which is how
   this ended up in the flow and pushing the hero down the page. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -160%);
  padding: 0.7rem 1.5rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--brass-mid);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-label);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; }

.eyebrow {
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-mid), transparent);
  max-width: 8rem;
}

.section-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-block: 0.7rem 1rem;
}

.lede { color: var(--ink-soft); max-width: 56ch; font-size: 1.05em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--brass-mid);
  border-radius: var(--radius);
  color: var(--brass-deep);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
  z-index: -1;
}
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--brass); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn--solid { background: var(--brass); border-color: var(--brass-mid); color: var(--ink); }
.btn--solid::before { background: var(--sand); }

.btn--ghost { border-color: rgb(18 24 28 / 0.25); color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); border-color: var(--ink); }

/* Over the dark hero footage the ghost button flips to light-on-dark */
.hero .btn--ghost { border-color: rgb(251 243 228 / 0.45); color: var(--hero-text); }
.hero .btn--ghost::before { background: var(--paper); }
.hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { color: var(--ink); border-color: var(--paper); }

.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* =========================================================================
   Masthead — transparent over the hero, cream once it lifts off
   ========================================================================= */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
  color: var(--hero-text);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              color 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
  background: rgb(251 243 228 / 0.92);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--ink-line);
  padding-block: 0.6rem;
  color: var(--ink);
  box-shadow: 0 10px 30px -22px rgb(60 40 15 / 0.55);
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-right: auto; }
.brand img {
  width: 46px; height: 46px;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35));
}
.masthead.is-stuck .brand img { width: 38px; height: 38px; filter: none; }
.brand-name {
  display: block;            /* stack over .brand-sub instead of running on */
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 0.78rem + 0.3vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
}
.brand-sub {
  display: block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.28rem;
}
.masthead.is-stuck .brand-sub { color: var(--brass-deep); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-block: 0.35rem;
  position: relative;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--brass); }
.masthead.is-stuck .nav a:hover,
.masthead.is-stuck .nav a[aria-current="true"] { color: var(--brass-deep); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: currentColor;
  position: relative; transition: background 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
  transition: transform 0.35s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 6rem var(--gutter) 2.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-line);
    color: var(--ink);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0.5s;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav a { font-size: 1.35rem; padding-block: 0.6rem; }
  .nav a:hover, .nav a[aria-current="true"] { color: var(--brass-deep); }
}

/* =========================================================================
   Hero — full-bleed video background, colour crest on top
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  /* Two rows: the crest block centres in the flexible row, the scroll cue owns
     the row beneath it. The cue used to be absolutely positioned, which let the
     centred content grow straight through it — reserving space with padding
     only moved the problem, since the hero then outgrew the viewport. */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  row-gap: 1.75rem;
  text-align: center;
  padding: 5.5rem var(--gutter) 2.5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-ink);
  color: var(--hero-text);
}

/* Media layer: holds the <video>, the YouTube iframe, or just the poster */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--hero-ink) center / cover no-repeat;
}
.hero-media > video,
.hero-media > .hero-yt {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-media.is-playing > video,
.hero-media.is-playing > .hero-yt { opacity: 1; }

/* A YouTube iframe cannot be object-fit, so scale a 16:9 box to cover instead.
   The extra zoom crops YouTube's own chrome — the video title and channel name
   it paints over the top-left corner — off the edges of the hero. */
.hero-media > .hero-yt {
  width: max(100vw, 177.7778svh);
  height: max(56.25vw, 100svh);
  transform: translate(-50%, -50%) scale(1.35);
  pointer-events: none;
}

/* Warm darkening so the cream type clears AA, and so the footage reads as the
   same world as the badge rather than a cold video behind a warm logo. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 78% 58% at 50% 42%, rgb(20 14 6 / 0.15), rgb(8 12 14 / 0.88)),
    linear-gradient(to bottom, rgb(8 12 14 / 0.72) 0%, rgb(26 18 8 / 0.38) 32%,
                    rgb(8 12 14 / 0.74) 70%, rgb(8 12 14 / 0.95) 92%, var(--paper) 100%);
  opacity: var(--scrim, 0.78);
}

/* Film grain, drawn in-page so it costs no request */
.grain {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.hero-inner { max-width: 68rem; }

/* The crest is the headline. Sized off the *height* of the viewport as well as
   its width, so it never pushes the tagline and buttons below the fold. */
.hero-title { margin: 0; }
.hero-badge {
  width: min(clamp(180px, 23vw, 320px), 28svh);
  margin-inline: auto;
  filter: drop-shadow(0 16px 44px rgb(0 0 0 / 0.7));
  animation: rise 1.1s var(--ease) both;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.7rem + 1.9vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 1.5rem;
  text-shadow: 0 4px 34px rgb(0 0 0 / 0.75);
  animation: rise 1.1s 0.16s var(--ease) both;
}

.hero-blurb {
  max-width: 46ch;
  margin: 1.3rem auto 0;
  color: rgb(251 243 228 / 0.82);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.7);
  animation: rise 1.1s 0.3s var(--ease) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  animation: rise 1.1s 0.4s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Sound toggle, only revealed when a soundtrack is actually available */
.hero-sound {
  position: absolute;
  right: var(--gutter);
  bottom: 2.2rem;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(251 243 228 / 0.8);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(251 243 228 / 0.28);
  border-radius: 999px;
  background: rgb(8 12 14 / 0.5);
  backdrop-filter: blur(6px);
  transition: color 0.3s, border-color 0.3s;
}
.hero-sound.is-available { display: flex; }
.hero-sound:hover { color: var(--brass); border-color: var(--brass); }
.hero-sound svg { width: 16px; height: 16px; fill: currentColor; }

.scroll-cue {
  justify-self: center;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(251 243 228 / 0.7);
  text-decoration: none;
}
.scroll-cue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(var(--brass), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

@media (max-width: 700px) {
  .hero-sound { bottom: auto; top: 5.2rem; right: 1rem; }
  .scroll-cue { display: none; }
}

/* A short window (a laptop, a browser with lots of toolbars) has no room for
   the cue below the buttons. Reclaim the reserved padding and drop the cue
   rather than letting the two collide. */
/* A short window has no room for the cue at all — drop it rather than squeeze
   the crest. The grid row collapses to zero on its own. */
/* Only the crest scales with viewport height; the tagline, blurb and buttons
   are a fixed ~250px. Below roughly 880px there is no honest room for the cue
   underneath them, so drop it rather than let it crowd the buttons. Measured:
   at 900px tall the gap is a comfortable 40px, at 800px it collapses to 10px.
   Collapse the row too — grid-template-rows declares two rows explicitly, so
   the row-gap outlives display:none on its only item. */
@media (max-height: 880px) {
  .hero { grid-template-rows: 1fr; row-gap: 0; }
  .scroll-cue { display: none; }
}

/* =========================================================================
   Marquee ticker
   ========================================================================= */
.ticker {
  background: var(--brass);
  color: var(--ink);
  padding-block: 0.85rem;
  overflow: hidden;
  border-block: 1px solid var(--brass-mid);
  display: flex;
}
.ticker-track {
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
  animation: slide 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.ticker span::after { content: "\2726"; font-size: 0.7em; opacity: 0.6; }
@keyframes slide { to { transform: translateX(-100%); } }

/* =========================================================================
   Watch — YouTube grid
   ========================================================================= */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 3rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.video-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper-warm);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  width: 100%;
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.section--panel .video-card { background: var(--paper); }
.video-card:hover, .video-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--brass-mid);
  box-shadow: var(--shadow-lift);
}

.video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hero-ink); }
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.9) contrast(1.03);
}
.video-card:hover .video-thumb img,
.video-card:focus-visible .video-thumb img { transform: scale(1.06); filter: saturate(1.05) contrast(1.03); }
.video-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(11 17 20 / 0.55), transparent 55%);
}

.play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.play i {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  background: rgb(11 17 20 / 0.42);
  backdrop-filter: blur(3px);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s;
}
.play svg { width: 20px; height: 20px; fill: var(--paper); margin-left: 3px; transition: fill 0.4s; }
.video-card:hover .play i, .video-card:focus-visible .play i {
  background: var(--brass); border-color: var(--brass); transform: scale(1.08);
}
.video-card:hover .play svg, .video-card:focus-visible .play svg { fill: var(--ink); }

.video-body { padding: 1.35rem 1.5rem 1.6rem; display: grid; align-content: start; gap: 0.45rem; }
.video-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.video-meta {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.grid-note { color: var(--ink-soft); font-size: 0.95rem; }
.channel-cta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(11 17 20 / 0.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
/* The [hidden] attribute is the source of truth for "is this dialog present".
   It needs restating because display:grid above would otherwise beat it — and
   relying on visibility instead would leave the close button unfocusable until
   the transition ran. */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox-frame {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--brass-deep);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.9);
  transform: scale(0.96);
  transition: transform 0.45s var(--ease);
}
.lightbox.is-open .lightbox-frame { transform: scale(1); }
.lightbox-frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgb(251 243 228 / 0.3);
  border-radius: 50%;
  color: var(--paper);
  transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
}
.lightbox-close:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); transform: rotate(90deg); }
.lightbox-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.lightbox-caption {
  margin-top: 1rem;
  font-family: var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgb(251 243 228 / 0.75);
  text-align: center;
}

/* =========================================================================
   About
   ========================================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; } }

.about-art { position: relative; justify-self: center; max-width: 380px; isolation: isolate; }
.about-art img { width: 100%; filter: drop-shadow(0 18px 40px rgb(60 40 15 / 0.35)); }
.about-art::before {
  content: "";
  position: absolute;
  inset: -9%;
  border: 1px solid var(--brass-mid);
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
}

.about-body p + p { margin-top: 1.1rem; }
.about-body p { color: var(--ink-soft); }

.members {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-line);
}
.members li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--ink-line);
}
.members b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.members span {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* =========================================================================
   Shows
   ========================================================================= */
.shows { list-style: none; padding: 0; border-top: 1px solid var(--ink-line); }
.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--ink-line);
  transition: background 0.4s var(--ease), padding-inline 0.4s var(--ease);
}
.show:hover { background: rgb(216 156 96 / 0.16); padding-inline: 1rem; }

.show-date {
  font-family: var(--font-label);
  text-align: center;
  min-width: 4.6rem;
  line-height: 1;
}
.show-date b { display: block; font-size: 2rem; font-weight: 600; color: var(--ink); }
.show-date span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.show-what b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
}
.show-what span {
  font-family: var(--font-label);
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea-deep);
}
.show--past { opacity: 0.45; }
.show--past .show-cta { display: none; }

.tag {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border: 1px solid var(--brass-mid);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  white-space: nowrap;
}

.shows-empty { color: var(--ink-soft); padding-block: 2rem; }

@media (max-width: 640px) {
  .show { grid-template-columns: auto 1fr; }
  .show-cta { grid-column: 1 / -1; justify-self: start; }
}

/* =========================================================================
   Booking
   ========================================================================= */
.booking { text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.booking .eyebrow::after { display: none; }
.booking .section-title { max-width: 18ch; }
.booking-mail {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 1.4vw, 2.1rem);
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-mid);
  padding-bottom: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
  word-break: break-word;
}
.booking-mail:hover { color: var(--ink); border-color: var(--ink); }

.socials { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1rem; }
.social {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border: 1px solid var(--brass-mid);
  border-radius: 50%;
  color: var(--brass-deep);
  transition: color 0.35s, border-color 0.35s, transform 0.35s var(--ease), background 0.35s;
}
.social:hover { color: var(--ink); background: var(--brass); border-color: var(--brass); transform: translateY(-4px); }
.social svg { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================================
   Footer — deep ink, the one dark anchor at the bottom of the page
   ========================================================================= */
.footer {
  background: var(--hero-ink);
  color: rgb(251 243 228 / 0.75);
  padding-block: 3.5rem 2.5rem;
  text-align: center;
}
.footer img { width: 120px; margin-inline: auto; }
.footer-meta {
  margin-top: 1.6rem;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}
.footer-meta a { text-decoration: none; transition: color 0.3s; }
.footer-meta a:hover { color: var(--brass); }

/* =========================================================================
   Scroll reveal
   ========================================================================= */
/* Fail open: content is visible by default and only starts hidden once JS has
   confirmed it can actually observe it. Otherwise a viewport that never
   reports a size (a background tab, a blocked observer) leaves the page blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(34px); }
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}

/* =========================================================================
   Motion preferences
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .grain { display: none; }
}