/* ===========================================================================
   Raven Steele — site styles
   ---------------------------------------------------------------------------
   One stylesheet for every page. Written to be read: plain CSS, no build
   step, no framework. If you want to change a colour, change it once in
   :root below and it changes everywhere.
   =========================================================================== */

/* --- The palette. Change these, change the whole site. ------------------- */
:root{
  --black:      #000000;   /* the page */
  --panel:      #111111;   /* cards */
  --panel-alt:  #080808;   /* every other section, so they separate */
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.06);

  --white:      #ffffff;   /* headings, labels, anything short */
  --grey:       #a9a7a2;   /* body text, so a long paragraph does not glare */
  --grey-dim:   #6f6d69;   /* captions, placeholder text */

  --red:        #e01a24;   /* things you click. Nothing else. */
  --red-dark:   #b2141c;
  --gold:       #c9a227;   /* eyebrows, prices, small marks. Quiet. */

  --display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 30rem;        /* the design is a phone. This is the content width. */
  --bar-h: 5.6rem;      /* the pinned Join the Rebels bar, two lines of text */
}

/* --- The headline face, self-hosted. No call to anyone else's server. ---- */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* room for the pinned bar, so it never covers the last thing on the page */
  padding-bottom:var(--bar-h);
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Anyone tabbing through gets a visible ring. */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* --- Layout ------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  min-width:0;
  margin:0 auto;
  padding:0 1.25rem;
}

section{ padding:3.25rem 0; }
section.alt{ background:var(--panel-alt); }

/* --- Type --------------------------------------------------------------- */
.eyebrow{
  color:var(--gold);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.005em;
}

h2{ font-size:clamp(2rem, 9vw, 2.6rem); }
h3{ font-size:1.05rem; letter-spacing:.02em; }

.lede{ color:var(--grey); margin-top:.85rem; }
.section-head{ margin-bottom:1.25rem; }
.accent{ color:var(--red); }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:block;
  width:100%;
  text-align:center;
  padding:1rem 1.25rem;
  border-radius:.35rem;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--red-dark); }
.btn-ghost{ border:1px solid rgba(255,255,255,.3); color:var(--white); }
.btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.05); }

/* --- Cards -------------------------------------------------------------- */
.card{
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:1.35rem;
  text-decoration:none;
  transition:border-color .15s, background .15s;
}
a.card:hover{ border-color:rgba(255,255,255,.28); background:#161616; }

.stack{ display:grid; gap:.85rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }

/* --- Image and video placeholders --------------------------------------
   Every one of these is a real gap waiting for a real asset. They are
   deliberately obvious. PLACEHOLDERS.md lists them all.                    */
.ph{
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  gap:.3rem;
  padding:1rem;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:.5rem;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.015) 0 10px, transparent 10px 20px),
    var(--panel);
  color:var(--grey-dim);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ph-hero{ min-height:17rem; }
.ph-hero span:last-child{ font-size:.66rem; }
.ph-wide{ aspect-ratio:16/9; }
.ph-square{ aspect-ratio:1; }
.ph-tall{ aspect-ratio:4/5; }

.play{
  width:2.8rem; height:2.8rem;
  border:2px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:grid; place-items:center;
  margin-bottom:.35rem;
}
.play::after{
  content:""; width:0; height:0;
  border-left:.7rem solid rgba(255,255,255,.8);
  border-top:.45rem solid transparent;
  border-bottom:.45rem solid transparent;
  margin-left:.18rem;
}

/* =========================================================================
   Header
   ========================================================================= */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.site-head > .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:3.5rem;
}
.logo{
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.menu-btn{ display:grid; gap:.3rem; padding:.5rem; margin-right:-.5rem; }
.menu-btn span{ display:block; width:1.3rem; height:2px; background:var(--white); }

.site-nav{ display:none; border-top:1px solid var(--line-soft); background:var(--black); }
.site-nav[data-open="true"]{ display:block; }
.site-nav{ max-height:calc(100vh - 3.5rem); overflow-y:auto; }
.site-nav ul{ list-style:none; padding:.5rem 0 1rem; }
.site-nav a,
.site-nav span{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem .25rem;
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.site-nav span{ color:var(--grey-dim); }
.site-nav .soon{
  font-family:var(--body);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--gold);
  border:1px solid rgba(201,162,39,.4);
  border-radius:999px;
  padding:.15rem .5rem;
}
.site-nav a[aria-current="page"]{ color:var(--red); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{ padding:2rem 0 3rem; text-align:center; }
.hero h1{
  font-size:clamp(3.1rem, 18vw, 4.6rem);
  line-height:.92;
  margin:.9rem 0 .5rem;
}
.hero .tagline{ color:var(--grey); font-size:1.02rem; }
.hero .btn{ margin-top:1.6rem; }
.hero .note{
  color:var(--grey-dim);
  font-size:.78rem;
  text-align:center;
  margin-top:.75rem;
}

/* =========================================================================
   Doors — Watch / Listen / Learn
   ========================================================================= */
.door h3{
  font-size:1.65rem;
  color:var(--red);
  margin-bottom:.15rem;
}
.door p{ color:var(--grey); font-size:.92rem; }

/* =========================================================================
   Song rows
   ========================================================================= */
.song{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.1rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.4rem;
  text-decoration:none;
}
.song:hover{ border-color:rgba(255,255,255,.28); }
.song .name{ font-weight:600; font-size:.95rem; }
.song .meta{ color:var(--grey-dim); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.song .go{ color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }

/* =========================================================================
   Event tiles
   ========================================================================= */
.tile{ text-decoration:none; display:block; }
.tile .name{
  margin-top:.5rem;
  font-size:.8rem;
  color:var(--grey);
  letter-spacing:.04em;
}

/* =========================================================================
   Products
   ========================================================================= */
.product .name{ margin-top:.6rem; font-size:.85rem; font-weight:600; }
.product .price{ color:var(--gold); font-size:.85rem; font-weight:600; }

.waitlist{
  border:1px solid var(--red);
  border-radius:.5rem;
  padding:1.25rem;
  margin-top:.85rem;
}
.waitlist h3{ font-size:1.3rem; }
.waitlist p{ color:var(--grey); font-size:.85rem; margin:.35rem 0 1rem; }

/* =========================================================================
   Join the Rebels block
   ========================================================================= */
.rebels{ background:var(--panel-alt); border-top:1px solid var(--line-soft); }
.rebels h2{ font-size:clamp(2.2rem, 11vw, 3rem); }
.rebels .lede{ margin-bottom:1.6rem; }

.field{ margin-bottom:1.1rem; }
.field label{
  display:block;
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.5rem;
}
.field input[type="email"]{
  width:100%;
  padding:.95rem 1rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.35rem;
  color:var(--white);
  font-family:var(--body);
  font-size:1rem;
}
.field input::placeholder{ color:var(--grey-dim); }
.field input:focus{ outline:none; border-color:var(--gold); }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.6rem 1.25rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  transition:background .15s, border-color .15s;
}
.chip[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:var(--white); }

.form-note{
  margin-top:.9rem;
  font-size:.78rem;
  color:var(--grey-dim);
  text-align:center;
  min-height:1.2em;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-foot{ padding:2.5rem 0 3rem; text-align:center; }
.socials{ display:flex; justify-content:center; gap:1.5rem; margin-bottom:1.5rem; }
.socials a{ font-size:.9rem; text-decoration:underline; text-underline-offset:4px; }
.legal{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.legal a{ color:var(--grey-dim); font-size:.74rem; text-decoration:none; }
.legal a:hover{ color:var(--grey); }
.copyright{ color:var(--grey-dim); font-size:.72rem; margin-top:1.25rem; }

/* =========================================================================
   The pinned bar — on every page, promise changes per page
   ========================================================================= */
.pinned{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom));
}
.pinned .wrap{ display:flex; align-items:center; gap:1rem; }
.pinned p{
  flex:1; min-width:0;
  font-size:.75rem; line-height:1.4;
  color:var(--grey);
}
.pinned .btn{
  width:auto; flex:none;
  padding:.7rem 1rem;
  font-size:.68rem;
  letter-spacing:.1em;
}

/* =========================================================================
   Wider screens. The design is a phone; this keeps it from looking lost.
   ========================================================================= */
@media (min-width:46rem){
  :root{ --wrap:62rem; }

  section{ padding:4.5rem 0; }
  h2{ font-size:3.2rem; }

  .hero{ padding:4rem 0 5rem; }
  .hero h1{ font-size:6.5rem; }
  .hero .tagline{ font-size:1.25rem; }
  .hero .btn{ max-width:22rem; margin-left:auto; margin-right:auto; }

  .stack-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-2.events{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .section-head{ text-align:center; margin-bottom:2rem; }
  .section-head .lede{ max-width:38rem; margin-left:auto; margin-right:auto; }

  .rebels .form{ max-width:32rem; margin:0 auto; }
  .rebels .chips{ justify-content:center; }
  .cta-wide{ max-width:22rem; margin:1.25rem auto 0; }

  /* The design is a phone. On a wide screen, stop the blocks stretching:
     a 16/9 placeholder across a full desktop width is enormous, and a
     paragraph 990px wide is unreadable. Cap and centre instead. */
  .ph-hero, .ph-wide{ max-width:46rem; margin-left:auto; margin-right:auto; }
  section > .wrap > .lede{ max-width:38rem; margin-left:auto; margin-right:auto; text-align:center; }
  .grid-3{ max-width:46rem; margin-left:auto; margin-right:auto; }
  .stack:not(.stack-3){ max-width:34rem; margin-left:auto; margin-right:auto; }
  .grid-2:not(.events){ max-width:34rem; margin-left:auto; margin-right:auto; }
  .waitlist{ max-width:34rem; margin-left:auto; margin-right:auto; }
  .song{ padding:1.1rem 1.35rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* =========================================================================
   The Story page
   ========================================================================= */

/* Two entry buttons: start at the beginning, or jump to the latest. */
.entry{ display:grid; gap:.7rem; margin-top:1.4rem; }

/* --- Real pictures in the slots the placeholders used to hold ------------
   Same shapes as .ph-tall and .ph-wide, so nothing moves when a placeholder
   is finally filled in.                                                    */
.shot{ display:block; width:100%; height:auto; border-radius:.5rem; object-fit:cover; }
.shot-tall{ aspect-ratio:4/5; }
.shot-wide{ aspect-ratio:16/9; }

/* --- The new album ------------------------------------------------------
   Cover above the words on a phone, side by side once there is room.     */
.album{ display:grid; gap:1.1rem; align-items:center; }
.album img{ display:block; width:100%; height:auto; border-radius:.5rem; max-width:22rem;
            margin-left:auto; margin-right:auto; }
.album-words{ text-align:center; }
.album-words h2{ margin-top:.15rem; }
.album-words .lede{ margin-bottom:0; }
@media (min-width:46rem){
  .album{ grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:2rem; }
  .album img{ margin:0; }
  .album-words{ text-align:left; }
  .album-words .entry{ justify-items:start; }
}

/* --- The hero clip ------------------------------------------------------
   Same 16:9 block the placeholder held. Raven's final hero may well want
   the whole screen, which is a different thing, and waits for her.     */
.hero-video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; border-radius:.5rem; background:#000;
}

/* --- Meet the cast ------------------------------------------------------ */
.cast{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.cast .who{ margin-top:.55rem; font-size:.95rem; font-weight:600; }
.cast .what{ color:var(--grey); font-size:.8rem; line-height:1.45; }

/* --- The timeline -------------------------------------------------------
   A line down the left with a numbered marker per chapter. The line is
   drawn on the list, not on each item, so it never breaks between them.  */
.timeline{ position:relative; list-style:none; margin-top:1.4rem; padding-left:2.4rem; }
.timeline::before{
  content:"";
  position:absolute; left:.72rem; top:.4rem; bottom:.4rem;
  width:2px;
  background:linear-gradient(var(--red), rgba(201,162,39,.5));
}
.chapter{ position:relative; padding-bottom:1.6rem; }
.chapter:last-child{ padding-bottom:0; }
.chapter .num{
  position:absolute; left:-2.4rem; top:0;
  width:1.5rem; height:1.5rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--black);
  border:2px solid var(--red);
  font-size:.65rem; font-weight:700;
  color:var(--white);
}
.chapter .label{
  color:var(--gold);
  font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.chapter h3{ font-size:1.25rem; margin:.15rem 0 .3rem; }
.chapter p{ color:var(--grey); font-size:.86rem; line-height:1.55; }
.chapter.next .num{ border-color:var(--gold); color:var(--gold); }
.chapter.next h3{ color:var(--grey-dim); }

/* --- Mini stories ------------------------------------------------------- */
.mini .kind{
  color:var(--gold);
  font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.mini .title{ margin-top:.3rem; font-size:.95rem; font-weight:600; }

@media (min-width:46rem){
  .entry{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:40rem; margin-left:auto; margin-right:auto; }
  .cast{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .timeline{ max-width:38rem; margin-left:auto; margin-right:auto; }
  .mini-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:46rem; margin-left:auto; margin-right:auto; }
}

/* =========================================================================
   Filters and tabs — one component, used on Music, Events, Be Like Raven
   and the Shop. The chips on the signup form share the .chip look.
   ========================================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.filters .chip{ font-size:.78rem; padding:.5rem 1rem; }

.tabs{ display:flex; gap:1.5rem; border-bottom:1px solid var(--line); margin-bottom:1.1rem; }
.tabs button{
  padding:.7rem 0;
  font-family:var(--display); font-size:1.15rem;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--grey-dim);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tabs button[aria-selected="true"]{ color:var(--white); border-bottom-color:var(--red); }
.tabs button[disabled]{ opacity:.45; cursor:default; }

[data-hidden="true"]{ display:none !important; }

.empty{ color:var(--grey-dim); font-size:.85rem; padding:1.5rem 0; text-align:center; }

/* =========================================================================
   Music
   ========================================================================= */
.song .tag{
  color:var(--gold); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.listen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.listen a, .listen span{
  display:grid; place-items:center;
  padding:1rem .5rem;
  border:1px solid var(--line);
  border-radius:.4rem;
  background:var(--panel);
  font-size:.78rem; font-weight:600;
  text-decoration:none;
  text-align:center;
}
.listen span{ color:var(--grey-dim); border-style:dashed; }
.listen .state{ display:block; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:.2rem; }

/* =========================================================================
   Events
   ========================================================================= */
.event-card{ display:block; text-decoration:none; }
.event-card .name{ margin-top:.6rem; font-family:var(--display); font-size:1.25rem; text-transform:uppercase; }
.event-card .meta{ color:var(--grey-dim); font-size:.78rem; }

.finder{
  margin-top:1.6rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:1.25rem;
}
.finder h3{ font-size:1.3rem; }
.finder p{ color:var(--grey); font-size:.84rem; margin:.3rem 0 .9rem; }
.finder input[type="search"]{
  width:100%; padding:.9rem 1rem;
  background:var(--black); border:1px solid var(--line);
  border-radius:.35rem; color:var(--white);
  font-family:var(--body); font-size:1rem;
}
.finder input:focus{ outline:none; border-color:var(--gold); }
.results{ margin-top:.9rem; font-size:.85rem; }
.results li{ list-style:none; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
.results .where{ color:var(--gold); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }

/* --- One event --------------------------------------------------------- */
.back{ display:inline-block; color:var(--grey); font-size:.8rem; text-decoration:none; margin-bottom:1rem; }
.back:hover{ color:var(--white); }
.event-date{ color:var(--gold); font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.guests{ display:flex; flex-wrap:wrap; gap:.5rem; }
.guests span{
  padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); font-size:.8rem;
}
.photo-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.photo-grid button{ position:relative; display:block; width:100%; }
.photo-grid .badge{
  position:absolute; right:.45rem; bottom:.45rem;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.5);
  display:grid; place-items:center;
}
.photo-grid .badge::after{
  content:""; width:0; height:0;
  border-left:.42rem solid var(--white);
  border-top:.27rem solid transparent;
  border-bottom:.27rem solid transparent;
  margin-left:.12rem;
}
.hint{ color:var(--grey-dim); font-size:.78rem; text-align:center; margin-top:.9rem; }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.94);
  display:none; place-items:center;
  padding:1.5rem;
}
.lightbox[data-open="true"]{ display:grid; }
.lightbox .ph{ width:min(100%, 34rem); aspect-ratio:1; }
.lightbox .close{
  position:absolute; top:1rem; right:1rem;
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:1px solid var(--line); color:var(--white); font-size:1.2rem;
}
.lightbox .label{ margin-top:1rem; color:var(--grey); font-size:.85rem; text-align:center; }

/* =========================================================================
   Be Like Raven
   ========================================================================= */
.steps{ display:grid; gap:.85rem; counter-reset:step; }
.step{ display:flex; gap:1rem; align-items:flex-start; }
.step .n{
  flex:none;
  width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--red); color:var(--white);
  font-weight:700; font-size:.9rem;
}
.step .what{ font-size:1.05rem; font-weight:600; }
.step .where{ color:var(--gold); font-size:.78rem; margin-top:.15rem; }

.free{
  margin-top:1.6rem;
  border:1px solid var(--gold);
  border-radius:.5rem;
  padding:1.4rem;
  text-align:center;
}
.free .eyebrow{ margin-bottom:.4rem; }
.free h3{ font-size:1.5rem; }
.free p{ color:var(--grey); font-size:.85rem; margin:.4rem 0 1.1rem; }

.skools{ display:grid; gap:.85rem; }
.skool{ display:flex; gap:1rem; align-items:center; }
.skool .ph{ flex:none; width:5.5rem; aspect-ratio:16/10; }
.skool .name{ font-family:var(--display); font-size:1.2rem; text-transform:uppercase; }
.skool .line{ color:var(--grey); font-size:.8rem; }
.skool.main .name{ color:var(--red); }

.packs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.packs span{
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:.35rem;
  background:var(--panel); font-size:.82rem;
}

.win{ border-left:3px solid var(--red); padding:.3rem 0 .3rem 1rem; }
.win p{ color:var(--grey); font-size:.88rem; font-style:italic; }
.win .who{ color:var(--gold); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.4rem; }

/* =========================================================================
   Shop
   ========================================================================= */
.best{ border:1px solid var(--red); border-radius:.5rem; padding:1.25rem; margin-bottom:1.4rem; }
.best .eyebrow{ color:var(--red); }
.best .name{ font-family:var(--display); font-size:1.6rem; text-transform:uppercase; margin-top:.2rem; }
.best .price{ color:var(--gold); font-weight:600; }
.best .ph{ margin-bottom:1rem; }

@media (min-width:46rem){
  .listen{ max-width:34rem; margin-left:auto; margin-right:auto; }
  .finder{ max-width:34rem; margin-left:auto; margin-right:auto; }
  .photo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .steps, .free, .skools, .packs, .best{ max-width:34rem; margin-left:auto; margin-right:auto; }
  .filters, .tabs{ justify-content:center; }
  .guests{ justify-content:center; }
}


/* =========================================================================
   Jumping to an anchor
   -------------------------------------------------------------------------
   The header is sticky, so without this a link to #chapter-1 parks that
   chapter underneath the header and the first thing you actually read is
   chapter two. scroll-margin-top reserves the header's height plus a little
   air above whatever you jumped to.
   ========================================================================= */
:target,
.chapter,
section[id],
[id^="chapter-"]{ scroll-margin-top:5rem; }

/* =========================================================================
   Buttons that cannot work yet
   -------------------------------------------------------------------------
   Something that looks like a button and does nothing reads as broken. These
   say "soon" instead, so it is clearly waiting for content rather than bust.
   Remove data-pending when the real link exists.
   ========================================================================= */
.btn[data-pending]{
  position:relative;
  opacity:.5;
  cursor:default;
}
.btn[data-pending]::after{
  content:"Soon";
  margin-left:.6rem;
  font-size:.58rem;
  letter-spacing:.16em;
  color:var(--gold);
  border:1px solid rgba(201,162,39,.45);
  border-radius:999px;
  padding:.1rem .4rem;
  vertical-align:middle;
}
.btn-primary[data-pending]{ background:var(--panel); color:var(--grey); border:1px solid var(--line); }


/* --- Things inside a centred hero that should still read left -----------
   The hero is centred, which is right for a title block. It is wrong for a
   row of text sitting beside a number, and wrong for a back link.          */
.step{ text-align:left; }
.back{ display:block; text-align:left; }

/* =========================================================================
   Skool tiles
   -------------------------------------------------------------------------
   The customer asked for big picture tiles using each Skool's own icon,
   not text cards: "Raven is very visual, more pictures and less text."
   So the picture leads and the words sit under it.
   ========================================================================= */
.skool-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.skool-tile{ display:block; text-decoration:none; }
.skool-tile .ph{ aspect-ratio:1; margin-bottom:.6rem; }
.skool-tile .name{
  display:block;
  font-family:var(--display); font-size:1.15rem;
  text-transform:uppercase; letter-spacing:.02em;
}
.skool-tile .line{ display:block; color:var(--grey); font-size:.78rem; line-height:1.45; }
.skool-tile.main .name{ color:var(--red); }
.skool-tile.main{ grid-column:1 / -1; }
.skool-tile.main .ph{ aspect-ratio:16/9; }
.skool-tile .free-tag{
  display:inline-block; margin-left:.4rem;
  font-family:var(--body); font-size:.55rem; font-weight:700;
  letter-spacing:.14em; color:var(--gold);
  border:1px solid rgba(201,162,39,.45); border-radius:999px; padding:.1rem .4rem;
  vertical-align:middle;
}
@media (min-width:46rem){
  .skool-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:46rem; margin-left:auto; margin-right:auto; }
  .skool-tile.main{ grid-column:1 / -1; }
}

/* =========================================================================
   The player, and thumbnails on every song
   -------------------------------------------------------------------------
   Songs now play on the page instead of sending people to YouTube. Nothing
   is requested from YouTube until somebody actually presses play: until
   then it is our own thumbnail sitting there.
   ========================================================================= */
.player{ margin-bottom:1.1rem; }
.player-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:.5rem;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  display:block;
  width:100%;
  padding:0;
}
.player-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.player-frame iframe{ width:100%; height:100%; border:0; display:block; }
.player-frame .play-big{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(transparent 40%, rgba(0,0,0,.55));
}
.player-frame .play-big::after{
  content:"";
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--red);
  box-shadow:0 .4rem 1.4rem rgba(0,0,0,.5);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.player-frame .play-big::before{
  content:""; position:absolute; z-index:2;
  border-left:1.15rem solid var(--white);
  border-top:.72rem solid transparent;
  border-bottom:.72rem solid transparent;
  margin-left:.3rem;
}
.now-playing{
  margin-top:.6rem;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-dim);
}
.now-playing strong{ color:var(--white); letter-spacing:.02em; text-transform:none; font-size:.95rem; }

/* Songs: picture first, as the customer asked for everywhere */
.song{ gap:.8rem; }
.song .thumb{
  flex:none;
  width:5rem; height:2.8rem;
  object-fit:cover;
  border-radius:.25rem;
  background:var(--panel-alt);
}
.song .words{ flex:1; min-width:0; }
.song .name{ display:block; }
.song .tag{ display:block; margin-top:.1rem; }

@media (min-width:46rem){
  .player{ max-width:46rem; margin-left:auto; margin-right:auto; }
  .song .thumb{ width:6.5rem; height:3.6rem; }
}

/* =========================================================================
   Links out to the Instagram highlights
   -------------------------------------------------------------------------
   Most of this story is already told in Raven's highlights, so a chapter
   points at the one it belongs to rather than repeating it.
   ========================================================================= */
.highlight-link{
  display:inline-block;
  margin-top:.5rem;
  color:var(--gold);
  font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.4);
  padding-bottom:.1rem;
}
.highlight-link:hover{ color:var(--white); border-bottom-color:var(--white); }
.highlight-link::after{ content:" \2197"; }

/* Product cards became links when the shop got real products. Without this
   the browser underlines every word inside them. */
a.product{ text-decoration:none; display:block; }
a.product:hover .name{ color:var(--red); }
a.product .ph{ transition:border-color .15s; }
a.product:hover .ph{ border-color:rgba(255,255,255,.4); }
a.tile{ text-decoration:none; }
a.skool-tile{ text-decoration:none; }
.song{ text-decoration:none; }


/* =========================================================================
   A chapter with a picture
   -------------------------------------------------------------------------
   Reels and posts give up their cover frame, so a chapter that has one shows
   it. Highlights do not, so most chapters are still words only.
   ========================================================================= */
.chapter figure{ margin:.8rem 0 0; }
.chapter figure img{
  display:block;
  width:100%;
  max-width:11rem;
  border-radius:.4rem;
  border:1px solid var(--line);
}
.chapter figure a{ display:inline-block; }

/* Product pictures are square and they are the whole point of the card. */
.product img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:.4rem;
  border:1px solid var(--line);
  background:var(--panel);
}
.product .name{ margin-top:.6rem; }

/* The Skool artwork is wide banner art, so the tiles are too. */
.skool-tile img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:.4rem; border:1px solid var(--line); margin-bottom:.6rem;
}
.skool-tile .ph{ aspect-ratio:16/9; }

/* The toolboxes come with a line of their own. */
.product .line{
  display:block;
  color:var(--grey);
  font-size:.74rem;
  line-height:1.4;
  margin-top:.15rem;
}

/* =========================================================================
   The photo viewer
   -------------------------------------------------------------------------
   Arrows both sides, a cross to close, and swipe on a phone, so a set of
   photos can be looked through instead of opened and closed one at a time.
   ========================================================================= */
.lightbox .lb-stage{ max-width:min(100%, 46rem); text-align:center; }
.lightbox img.shot{
  display:block;
  max-width:100%;
  max-height:78vh;
  margin:0 auto;
  border-radius:.5rem;
  object-fit:contain;
}
.lightbox .lb-prev,
.lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  display:grid; place-items:center;
  z-index:2;
}
.lightbox .lb-prev{ left:.6rem; }
.lightbox .lb-next{ right:.6rem; }
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover{ background:rgba(255,255,255,.18); }
.lightbox .lb-prev::after,
.lightbox .lb-next::after{
  content:"";
  width:.7rem; height:.7rem;
  border-top:2px solid var(--white);
  border-right:2px solid var(--white);
}
.lightbox .lb-prev::after{ transform:rotate(-135deg); margin-left:.2rem; }
.lightbox .lb-next::after{ transform:rotate(45deg); margin-right:.2rem; }
.lightbox .close{ z-index:3; background:rgba(255,255,255,.08); }

@media (min-width:46rem){
  .lightbox .lb-prev{ left:2rem; }
  .lightbox .lb-next{ right:2rem; }
}

/* =========================================================================
   Instagram highlight covers
   -------------------------------------------------------------------------
   The covers carry their own titles, so they are shown rather than described.
   ========================================================================= */
.chapter figure img{ max-width:10rem; border-radius:.5rem; }

.hl-pair{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; max-width:24rem; margin:1.4rem auto 0;
  text-align:center;
}
.hl-pair a{ text-decoration:none; display:block; }
.hl-pair img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:50%; border:1px solid var(--line);
}
.hl-pair span{
  display:block; margin-top:.5rem;
  color:var(--gold); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.hl-pair a:hover span{ color:var(--white); }
/* One on its own, rather than a pair. */
.hl-one{ grid-template-columns:minmax(0,1fr); max-width:11rem; }

/* =========================================================================
   The three story cards on the home page
   -------------------------------------------------------------------------
   Picture first. The highlight covers carry their own titles, so the card
   leads with the artwork and the words sit underneath it.
   ========================================================================= */
.story-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.5rem;
  overflow:hidden;
  text-decoration:none;
  transition:border-color .15s, background .15s;
}
.story-card:hover{ border-color:rgba(255,255,255,.28); background:#161616; }
.story-card img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.story-card .words{ display:block; padding:.6rem .7rem .75rem; }
.story-card .eyebrow{ display:block; margin-bottom:.2rem; }
.story-card .title{ display:block; font-size:.82rem; line-height:1.3; }

/* =========================================================================
   Photo grid thumbnails
   -------------------------------------------------------------------------
   The source photos come in three shapes: ordinary 3:4 portraits, tall 9:16
   story crops, and the occasional very wide strip. Left alone they make the
   rows ragged and a tall one can push its neighbour out of sight.
   Every thumbnail is therefore cropped to the same shape. The full picture is
   never cropped; the viewer still shows all of it.
   ========================================================================= */
.photo-grid img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:.35rem;
  background:var(--panel);
}
.photo-grid button{ border-radius:.35rem; overflow:hidden; }

/* =========================================================================
   The legal pages. Plain reading, nothing clever.
   ========================================================================= */
.legal-page{ max-width:34rem; margin:0 auto; text-align:left; }
.legal-page h3{ font-size:1.15rem; margin:1.8rem 0 .5rem; color:var(--white); }
.legal-page h3:first-of-type{ margin-top:0; }
.legal-page p{ color:var(--grey); font-size:.95rem; line-height:1.65; margin-bottom:.8rem; }
.legal-page p strong{ color:var(--white); }
.legal-page a{ color:var(--gold); }
.legal-page .updated{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-dim); margin-bottom:1.6rem;
}