/* brand-afm.css
 *
 * The afmhawaiimusic.com brand layer. Loaded by layouts/base.njk AFTER
 * tokens.css, primitives.css and components.css, and only when the active site
 * sets brandStylesheet. Nothing in the three shared files is edited, which is
 * the point: hereforyoulifecoaching.com is live and taking paid traffic and
 * must not be able to break because a recording studio changed colour.
 *
 * Most of this file is the :root block. Every layout primitive and every
 * component the shared CSS ships reads these custom properties, so redefining
 * them re-skins .section, .btn, .card, .lead-form and the footer in one pass.
 * Only the things that genuinely do not exist yet, the header, the two
 * photographic bands and the video grid, are written as new rules below.
 *
 * EVERY COLOUR WAS SAMPLED FROM THE CAPTURE, none was chosen. Counted over
 * source-capture/afm/page.html:
 *
 *   rgb(3, 2, 0)         x12 inline, plus the background-color of the header,
 *                            the Darrin Chinen band, the contact band and the
 *                            footer. This is the brand's black.
 *   rgb(244, 237, 228)   the two cream bands
 *   rgba(10, 25, 45, 1)  body ink in the founder section
 *   rgba(255,255,255,1)  x16, every line of text on a dark band
 *
 * and one more from the artwork rather than the markup:
 *
 *   #fecc87              the "AFM" wordmark in the logo file, sampled as the
 *                        modal colour of the letterforms. It is a light peach
 *                        gold: it reads on the near-black bands and it must
 *                        never be used for text on cream, where it is about
 *                        1.5:1 and effectively invisible.
 *
 * The contact band's scrim is also verbatim: the original composited
 * rgba(3, 2, 0, 0.79) over its background photograph. That number is reproduced
 * exactly rather than rounded, because it is what makes white body text and a
 * white-bordered form readable on a photograph of a dark studio.
 */

:root {
  /* ---- Required token set, remapped to the AFM palette ---- */
  --bg: #f4ede4; /* cream, rgb(244,237,228), the two light bands */
  --surface: #fdf9f3; /* a half step lighter, for .card and .section--paper */
  --surface-alt: #e9dfd0; /* a half step darker, for .section--warm */
  --ink: #0a192d; /* navy, rgba(10,25,45,1), body copy on cream */
  --ink-muted: #4a5769; /* the same navy lightened, for .muted and .lead */
  --accent: #030200; /* the brand's black. Buttons, links, focus. */
  --accent-ink: #ffffff;
  --accent-dark: #030200; /* .section--dark and the footer plate */

  /* One family. Every headline and every paragraph in the capture is wrapped in
   * font-family: "Rubik", sans-serif. Montserrat appears three times and only
   * ever inside form inputs, so it is not loaded: a whole extra webfont for the
   * text inside three boxes is not a trade worth making. */
  --font-display: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* The original's buttons and panels were square-cornered flat rectangles
   * ("lp-btn-flat"). Softened only enough to stop the form inputs looking like
   * a 2011 web form. */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 14px;

  /* ---- Supporting palette ---- */
  --gold: #fecc87; /* the AFM wordmark gold. DARK BANDS ONLY. See above. */
  --line: #d9cebc; /* a hairline that reads on cream, not on white */

  --container: 1180px;
  --container-narrow: 780px;

  --shadow-sm: 0 1px 2px rgba(3, 2, 0, 0.07);
  --shadow-md: 0 8px 24px rgba(3, 2, 0, 0.1);
  --shadow-lg: 0 18px 44px rgba(3, 2, 0, 0.16);

  --focus-ring: 0 0 0 3px rgba(254, 204, 135, 0.55);

  /* The scrim over the contact photograph, verbatim from the capture. */
  --afm-scrim: rgba(3, 2, 0, 0.79);
}

/* Rubik at 400 is light for display sizes and the original set every headline
 * bold or semibold. Match it rather than leave the headings looking anaemic. */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Links on cream are the brand black, which is the same as the body ink, so
 * they need the underline to stay findable. */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   HEADER
   A near-black plate with the logo on it, exactly as the original: the site had
   a flexed header on rgb(3,2,0) with the logo at the left.

   THE NAV IS NOT MISSING. The original carried two items, HOME and Our Artists,
   and /our-artists/ was never captured and is not rebuilt, so linking it would
   ship a 404 on day one. site.nav is an empty array and the markup renders the
   logo alone. The rules below still cover a nav, so the moment that page is
   rebuilt and added to site.nav the header grows one with no CSS change.
   --------------------------------------------------------------------------- */

.afm-header {
  background: #030200;
  position: relative;
  z-index: 20;
}

.afm-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.8rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.afm-header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

/* The logo file is 288x152 and that is the full resolution Junior uploaded, so
 * 180px on screen is already only 1.6x on a retina display. Do not scale it up
 * past its native width chasing a bigger mark; re-cut the art instead. */
.afm-header__logo img {
  width: clamp(140px, 18vw, 180px);
  height: auto;
  border-radius: var(--radius-sm);
}

.afm-header__logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm);
}

.afm-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.afm-nav__link {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}

.afm-nav__link:hover,
.afm-nav__link.is-current {
  color: #fff;
  border-bottom-color: var(--gold);
}

/* ---------------------------------------------------------------------------
   PHOTOGRAPHIC BANDS
   Two sections in the original sit on a full-bleed background photograph: the
   hero (a studio condenser mic, colour) and the contact band (a studio mic and
   console, black and white, under a 79% black wash).

   The photograph is a CSS background rather than an <img> because it is scenery
   in both places: nothing in either picture carries information the copy beside
   it does not already carry.

   THE SCRIM IS NOT DECORATION. The hero in the original had NO scrim at all,
   just white text straight onto the photograph, and the photograph has bright
   bokeh through its middle. White text on that is exactly the failure mode this
   account has been bitten by before, and it fails at some viewport widths and
   not others, which is how it survives review. A gradient wash is added here so
   the headline holds contrast at every crop. Do not lighten it because the
   picture looks nicer without it.
   --------------------------------------------------------------------------- */

.afm-band {
  position: relative;
  isolation: isolate;
  background-color: #030200;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
}

.afm-band > .container {
  position: relative;
  z-index: 2;
}

.afm-band h1,
.afm-band h2,
.afm-band h3 {
  color: #fff;
}

.afm-band p,
.afm-band .lead,
.afm-band li {
  color: rgba(255, 255, 255, 0.94);
}

/* The hero. A left-to-right wash, heaviest where the copy sits. */
.afm-hero {
  padding-block: clamp(4.5rem, 14vw, 9rem);
}

.afm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(3, 2, 0, 0.78) 0%,
    rgba(3, 2, 0, 0.66) 46%,
    rgba(3, 2, 0, 0.3) 78%,
    rgba(3, 2, 0, 0.18) 100%
  );
}

/* Below the split breakpoint the copy is full width and the bright part of the
 * photograph moves under it, so the wash becomes flat and heavier. */
@media (max-width: 767px) {
  .afm-hero::before {
    background: rgba(3, 2, 0, 0.72);
  }
}

/* The original put the hero copy in the LEFT half of a two column row and left
 * the right half empty so the photograph showed through. Reproduced: a block
 * capped at 34rem, with the text centred inside it exactly as the source had
 * it (every hero headline carried text-align-center).
 *
 * Sized in rem and NOT in ch. ch resolves against the font size of the element
 * it is set on, which here is the ~17px body size and not the ~50px h1 inside,
 * so a value in ch comes out about a third of the intended width and shatters
 * the headline across five lines. */
.afm-hero__copy {
  max-width: 34rem;
  text-align: center;
}

.afm-hero__copy p {
  margin-inline: auto;
}

.afm-hero h1 {
  font-size: var(--step-4);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.afm-hero__tagline {
  font-size: var(--step-1);
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* The contact band. A flat 79% black wash, the value the original composited. */
.afm-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--afm-scrim);
}

/* Same left-half column the original used, with the photograph showing in the
 * right half. Not stretched to full width: the empty half is the picture, and
 * it was put there on purpose. */
.afm-contact__copy {
  max-width: 34rem;
}

/* On a photographic band the flat black button disappears into the wash, so it
 * inverts the way every dark band in components.css already does. This mirrors
 * the .section--dark .btn rule for a band that is not a .section--dark. */
.afm-band .btn {
  background: #fff;
  border-color: #fff;
  color: #030200;
}

.afm-band .btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #030200;
}

/* BUT THE SUBMIT BUTTON IS NOT ON THE BAND. .lead-form is a light card
 * (background: var(--surface)) even when it sits on a photograph, so the rule
 * above would paint the submit button white on a near-white card and the one
 * control that actually converts this page would all but disappear. Put the
 * brand-black button back, exactly the way components.css already does it for
 * .section--dark .lead-form .btn.
 *
 * This was caught in a screenshot, not in review: the button was legible enough
 * to skim past and wrong enough to matter. Everything else inside the card
 * (labels, inputs, placeholders, the error banner) is deliberately left to the
 * shared component styling for the same reason. Do not "fix" the label colour
 * to white here: the label is on the card, not on the photograph. */
.afm-band .lead-form .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.afm-band .lead-form .btn:hover {
  background: #1c1710;
  border-color: #1c1710;
  color: var(--accent-ink);
}

/* The thank-you band. Same machinery as the hero: a photograph with a wash over
 * it, white text on top. The wash is heavier than the hero's because the
 * photograph here is a bright midday Waikiki shoreline, which is the single
 * worst background a white headline can have. Sampled against the brightest
 * pixels of that sky, 0.62 black keeps the headline comfortably past 4.5:1. */

.afm-thanks {
  padding-block: clamp(4rem, 15vw, 9rem);
}

.afm-thanks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(3, 2, 0, 0.66) 0%,
    rgba(3, 2, 0, 0.58) 45%,
    rgba(3, 2, 0, 0.72) 100%
  );
}

.afm-thanks__copy {
  max-width: 46rem;
  margin-inline: auto;
}

/* The wide logo banner, centred, as the live thank-you page had it. It rendered
 * at width:26% there, which on a 1280px page is about 330px. */
.afm-thanks__logo {
  display: block;
  width: min(360px, 76vw);
  margin-inline: auto;
  line-height: 0;
  border-radius: var(--radius-sm);
}

.afm-thanks__logo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   THE DARRIN CHINEN VIDEO GRID
   Four YouTube embeds. The original ran them two per column across two
   half-width columns; this is a two column grid, which is the same 2x2 shape
   with the DOM order and the reading order agreeing.

   Each iframe is wrapped in a 16:9 box so it is responsive rather than the
   fixed 560x315 the original hard-coded, and each is loading="lazy" so four
   YouTube players are not fetched before anyone scrolls to them.
   --------------------------------------------------------------------------- */

.afm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.afm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
   THE ALBUM
   The cover art, optionally wrapped in a link to Apple Music.

   THE CAPTION IS RECOLOURED, and this is a fix rather than a change of mind.
   In the capture "Click the image for the album in Apple Music!" is set in
   rgba(255,255,255,1), white, and it sits in the cream rgb(244,237,228) band.
   White on cream is roughly 1.1:1. That line was invisible on the live page.
   The words are reproduced exactly; only the colour is corrected so they can
   be read.
   --------------------------------------------------------------------------- */

.afm-album {
  margin: 0;
}

.afm-album img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.afm-album a {
  display: block;
  border-radius: var(--radius);
}

.afm-album figcaption {
  margin-top: var(--space-s);
  text-align: center;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   SERVICES LIST
   Three items, each a bold label and a sentence, exactly as the original ran
   them: a bulleted list, not a row of cards. .dotlist already draws the bullet;
   this only lifts the label.
   --------------------------------------------------------------------------- */

.afm-service__label {
  font-weight: 700;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   FOOTER
   The shared .site-footer styling already reads --accent-dark, which is the
   brand black, so the plate is right without help. These rules only add the
   two lines the shared footer has no slot for and centre the block, which is
   how the original ran it.
   --------------------------------------------------------------------------- */

.site-footer--afm .container {
  text-align: center;
}

.site-footer--afm .site-footer__meta,
.site-footer--afm p {
  margin-inline: auto;
}

/* The two legal links, when they exist again. .site-footer__links is a flex row
 * and everything else in this footer is centred, so it centres too. */
.site-footer--afm .site-footer__links {
  justify-content: center;
}

.site-footer__cities {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__credit {
  color: rgba(255, 255, 255, 0.72);
}