/* about.html only. Adds no tokens and touches nothing else.

   The page shell (header, footer, lead modal) is index.html's compiled Tailwind
   reused verbatim, so it needs no CSS here. The About panel below is written by
   hand on purpose: vendor.css is a FINISHED Tailwind build with no build step,
   so a class that is not already compiled into it does not exist.

   Every value resolves a token already recorded in DESIGN.md: paper #FCFAF8 as
   the canvas, forest #1E3E39 ink, forest-muted #364946 secondary copy, amber as
   the single accent, 2.5rem section radius, and the card lift shadow. */

.ab {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #FCFAF8;                 /* hsl(40 33% 98%) = --background, the page canvas */
  color: #1E3E39;
  /* top pad clears the fixed header (logo h-10 inside py-6) at every width; the
     bottom pad leaves room for the wave, which now caps the band below and
     overlaps up into this panel */
  padding: clamp(8rem, 14vw, 10.5rem) 0 clamp(5rem, 9vw, 8rem);
}

/* ---------------- the curves ---------------- */
/* The site already owns its background curves: the cream ribbon artwork behind
   community.html's sections (river-01..03.png, .gb-river in site-paper.css).
   Reusing that artwork instead of drawing new arcs is what keeps this page in
   the same world. The class names are page scoped on purpose: two live
   definitions of .gb-river in two stylesheets is a footgun the moment some page
   loads both, and this panel wants its own placement anyway, since ribbons read
   louder on the pale canvas than they do on cream. */
.ab__river {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 118% auto;
}
.ab__river--upper {
  background-image: url(assets/img/river-02.png);
  background-position: right -2% top 16%;
  opacity: .9;
}
.ab__river--lower {
  background-image: url(assets/img/river-01.png);
  background-position: right -4% bottom -18%;
  transform: scaleX(-1);
  opacity: .7;
}
@media (max-width: 900px) {
  .ab__river { background-size: 210% auto; opacity: .65; }
}

/* The curve at the hand off to the band is NOT drawn here. index.html is built on
   the paper system now, so the band arrives already capped by .gb-pwave filled
   with this panel's ivory (site-paper.css, and pwave("#FCFAF8") in
   build_site_from_finclarity.py). That is what makes the curve and the band share
   one green: everything under the curve is the band's own ground, amber glows and
   all. A wave drawn at the bottom of this panel instead painted a second flat
   green above a gradient lit band, and the join between the two showed. */

.ab__wrap {
  position: relative;
  z-index: 1;
  width: min(1200px, 100% - 2 * clamp(20px, 4vw, 48px));
  margin-inline: auto;
}

/* Photograph left, copy right, as the reference sets it. Stacked, the photograph
   still comes first, so narrow screens read the same order rather than a new one. */
.ab__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .ab__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5.5vw, 5rem); }
}

/* ---------------- the film ---------------- */
/* Same card the photograph had: 2.5rem, DESIGN.md's card lift. It is square, so
   it stands taller than the photograph did and the column reads closer to the
   reference. Silent and looping, so no control furniture. */
.ab__film {
  border-radius: 2.5rem;
  overflow: hidden;
  background: #1E3E39;                 /* the film's own ground, so no flash of
                                          canvas before the first frame paints */
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .3);
}
.ab__film { position: relative; }
.ab__film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  transition: filter .45s var(--ab-ease, cubic-bezier(.16, 1, .3, 1)), transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* While the prompt is up, the poster is a GROUND, not content. Every frame of this
   film is typographic, so an unblurred poster put the prompt's words on top of the
   frame's own words: "Watch why this club exists" landed across "of Canadians have
   no", and the play circle sat on the 91%. Blurring and darkening it settles which
   layer is being read. The slight scale stops the blur showing the card edge. */
.ab__film[data-idle] video {
  filter: blur(13px) brightness(.62) saturate(.92);
  transform: scale(1.07);
}

/* The watch prompt. The film does not autoplay, so the card opens as a poster with
   this over it, and the whole card is the button: a small play glyph is a target,
   an invitation is a target the size of the picture. */
.ab__filmstart {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 2rem;
  color: #FCFAF8;
  text-align: center;
  /* a light forest wash on top of the blurred poster, enough to hold ivory type at
     full contrast without turning the card into a flat panel */
  background: linear-gradient(rgba(17, 44, 40, .3), rgba(17, 44, 40, .42));
  transition: background .3s;
}
.ab__filmstart:hover { background: linear-gradient(rgba(17, 44, 40, .2), rgba(17, 44, 40, .34)); }
.ab__filmstart:focus-visible { outline: 3px solid #EDAE1D; outline-offset: -6px; }
.ab__filmstart[hidden] { display: none; }

.ab__filmstart__ring {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #112C28;
  background: #EDAE1D;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.ab__filmstart__ring svg { fill: currentColor; margin-left: 3px; }
.ab__filmstart:hover .ab__filmstart__ring { transform: scale(1.07); }

.ab__filmstart__say {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  max-width: 22ch;
}
.ab__filmstart__meta {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(252, 250, 248, .72);
}

/* Sound and pause, shown only while the film is running. */
.ab__filmbar[hidden] { display: none; }
.ab__filmbar {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
}
.ab__filmbtn {
  width: 44px;                         /* a real touch target, not an 18px icon */
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #FCFAF8;
  background: rgba(17, 44, 40, .55);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(252, 250, 248, .22);
  transition: background .25s, transform .25s;
}
.ab__filmbtn:hover { background: rgba(17, 44, 40, .78); transform: translateY(-1px); }
.ab__filmbtn:focus-visible { outline: 2px solid #EDAE1D; outline-offset: 3px; }
.ab__ico { fill: currentColor; }
.ab__filmbtn .ab__ico--play,
.ab__filmbtn .ab__ico--on { display: none; }
.ab__filmbtn[data-paused] .ab__ico--play { display: block; }
.ab__filmbtn[data-paused] .ab__ico--pause { display: none; }
.ab__filmbtn[data-loud] .ab__ico--on { display: block; }
.ab__filmbtn[data-loud] .ab__ico--off { display: none; }

/* Sound is on from the first frame, so amber is this control's resting state and
   the grey is the muted exception. */
.ab__filmbtn[data-loud] { background: #EDAE1D; color: #112C28; }
.ab__filmbtn[data-loud]:hover { background: #F2B72E; }

/* The figures the film shows, as text. Present for screen readers and crawlers,
   and it is what the film is described by; not shown twice to a reader who can
   already watch it. */
.ab__film-says {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- copy ---------------- */
.ab__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #364946;                      /* --muted-foreground, a warm ink, not a grey */
}
.ab__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E0DBD1;                 /* --border */
}

.ab__h1 {
  font-family: Inter, sans-serif;      /* DESIGN.md: the Inter Default Rule */
  font-weight: 700;                    /*            and the Heavy-Head Rule */
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}
/* Amber as text on a pale ground uses the darkened display ink, per the
   --amber-display note in styles.css, or the contrast does not hold. */
.ab__h1 em { font-style: normal; color: #B8820A; }

.ab__lede {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #364946;
}

.ab__actions { margin-top: 2.25rem; }

/* The band's own top padding comes from site-paper.css (section.gb-pt, with
   !important), which is sized to clear the wave cap. Nothing to add here. */