/* ------------------------------------------------------------------
   TIME MACHINE, release switch.
   Jennifer Ewbank. Loaded on every page of all three properties.

   Nothing here touches site.css. Colours are the brand tokens the site
   already defines, with a literal fallback only where a page might be
   reached before the token sheet has parsed.
   ------------------------------------------------------------------ */

/* --------------------------------------------------------------
   1. THE MENU ITEM
   Injected by time-machine.js so no page HTML has to be edited.

   The menu was already close to full, so this earns its place
   sparingly: the badge is small, it goes at the narrower desktop
   widths where the site is already tightening its own spacing, and
   the whole item steps aside before the row can ever wrap. Nothing
   is lost when it does, because the strip across the top of the page
   is saying the same thing, and the mobile menu keeps its copy.
   -------------------------------------------------------------- */
.navlinks a.tmlink{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}

/* An eleventh item needs room. Between 1560 and 1320 the row is tightened
   to the spacing the site already uses just below that band, which buys
   back more than the item costs. Under 1320 the item steps aside
   altogether, and nothing is lost: the strip across the top of the page
   says the same thing, and the mobile menu keeps its own copy. */
@media(max-width:1560px){
  .navlinks{gap:20px}
  .navlinks a.cta{padding:11px 16px}
  .navlinks a.tmlink .tmbadge{display:none}
}
@media(max-width:1400px){
  .navlinks{gap:15px;letter-spacing:.18em}
  .navlinks a.cta{padding:10px 14px}
}
@media(max-width:1240px){ .navlinks a.tmlink{display:none} }

.tmbadge{
  display:inline-block;
  font-family:'Jost',Verdana,sans-serif;
  font-size:.5rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  padding:4px 6px 3px;
  border-radius:3px;
  background:var(--accent,#D2923E);
  color:#2A1E22;
  vertical-align:middle;
  position:relative;
  top:-1px;
}

/* Out now reads as an event, not a label, so it inverts. The dot is the
   only moving thing on the page and it is small enough to ignore. */
.tmbadge.is-live{
  background:#8E2F2A;
  color:#FBF6EF;
  padding-left:15px;
}
.tmbadge.is-live::before{
  content:"";
  position:absolute;
  left:6px;top:50%;
  width:5px;height:5px;margin-top:-2px;
  border-radius:50%;
  background:#FBF6EF;
  animation:tmpulse 2.4s ease-in-out infinite;
}
@keyframes tmpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .tmbadge.is-live::before{animation:none}
}

.mobilemenu a.tmlink{display:flex;align-items:center;gap:10px}

/* --------------------------------------------------------------
   2. PRE AND POST RELEASE STATES
   The attribute is set by an inline script in the head, before paint,
   so neither state is ever briefly visible. Until it is set, both are
   hidden rather than both shown.
   -------------------------------------------------------------- */
html:not([data-tm-state]) [data-tm-when]{display:none !important}
html[data-tm-state="pre"]  [data-tm-when="live"]{display:none !important}
html[data-tm-state="live"] [data-tm-when="pre"]{display:none !important}

/* --------------------------------------------------------------
   3. THE FILM
   Full width, sits directly under the page plate. The source file is
   chosen in JavaScript so only one of the two ever downloads.
   -------------------------------------------------------------- */
.tmfilm{
  position:relative;
  background:#2A1E22;
  overflow:hidden;
  line-height:0;
}
.tmfilm video,
.tmfilm .tmfilm-poster{
  display:block;
  width:100%;
  height:auto;
  max-height:74vh;
  object-fit:cover;
  margin:0 auto;
}
.tmfilm.is-narrow video,
.tmfilm.is-narrow .tmfilm-poster{max-height:82vh}

/* Controls. One button for sound, one for play, both only where they
   are needed. Kept off the lyric, which sits centre frame. */
.tmfilm-bar{
  position:absolute;
  right:14px;bottom:14px;
  display:flex;gap:8px;
  line-height:1;
  z-index:2;
}
.tmfilm-bar button{
  font-family:'Jost',Verdana,sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FBF6EF;
  background:rgba(42,30,34,.62);
  border:1px solid rgba(251,246,239,.34);
  border-radius:4px;
  padding:9px 13px;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.tmfilm-bar button:hover{background:rgba(42,30,34,.86)}
.tmfilm-bar button:focus-visible{outline:2px solid var(--accent,#D2923E);outline-offset:2px}

/* Reduce Motion. The film does not start on its own, but it is still
   there to be played. An opt in, never a dead end. */
.tmfilm-play{
  position:absolute;inset:0;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(42,30,34,.30);
  border:0;cursor:pointer;
  z-index:3;
}
.tmfilm.is-still .tmfilm-play{display:flex}
.tmfilm-play span{
  font-family:'Jost',Verdana,sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#FBF6EF;
  background:rgba(42,30,34,.72);
  border:1px solid rgba(251,246,239,.4);
  border-radius:4px;
  padding:14px 22px;
}

/* A quiet line under the film saying what it is, because a lyric film
   is not the official video and should not be mistaken for one. */
.tmfilm-note{
  font-family:'Jost',Verdana,sans-serif;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted,#8A7C72);
  text-align:center;
  padding:14px 18px 0;
  line-height:1.5;
}

/* --------------------------------------------------------------
   4. THE HEADER
   The film is the header now, so the page title sits on moving
   light. Two things follow from that. The header film carries no
   lyric and no lockup, because a page title and a line of song
   competing in the same rectangle is what was wrong before. And the
   type never trusts the picture: a scrim underneath guarantees the
   contrast whatever the video is doing behind it and however the
   frame happens to be cropped.
   -------------------------------------------------------------- */
.tmhead{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(540px,76vh,820px);
  overflow:hidden;
  background:#2A1E22;
  isolation:isolate;
}
.tmhead-vid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* left to right, so the type side stays dark and the light stays visible */
.tmhead::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(42,30,34,.94) 0%,
    rgba(42,30,34,.86) 34%,
    rgba(42,30,34,.46) 62%,
    rgba(42,30,34,.24) 100%);
}
/* and a little from the foot, so the title never sits on the brightest
   part of the band if the crop pushes it up */
.tmhead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
  background:linear-gradient(180deg,rgba(42,30,34,0),rgba(42,30,34,.6));
}
.tmhead-inner{
  position:relative;z-index:2;
  width:100%;max-width:1200px;
  margin:0 auto;
  padding:56px clamp(24px,5vw,48px);
  color:var(--je-off-white,#FBF6EF);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  align-items:center;
  gap:clamp(32px,6vw,80px);
}
.tmhead-copy{min-width:0}
/* the breadcrumb spans the whole width, so it stays at the top of the
   header on a phone rather than being pushed below the sleeve */
.tmhead-inner > .crumb{grid-column:1 / -1;align-self:start}

/* The sleeve belongs up here with the title, not four screens down. It
   is the one thing on the page that is unmistakably the record. */
.tmhead-art{
  margin:0;position:relative;
  border-radius:8px;overflow:hidden;
  box-shadow:0 28px 70px rgba(12,7,9,.55), 0 0 0 1px rgba(251,246,239,.10);
  justify-self:end;width:100%;
}
.tmhead-art img{display:block;width:100%;height:auto}
.tmhead-art .tmtag{
  position:absolute;left:0;bottom:0;margin:0;
  background:var(--accent,#D2923E);color:#2A1E22;
  font-family:'Jost',Verdana,sans-serif;
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;
}
.tmhead-inner .crumb{color:var(--accent,#D2923E);margin-bottom:26px}
.tmhead-inner .crumb a{color:var(--je-warm-sand,#DAC9B3)}
.tmhead-inner .script{
  display:block;
  font-family:'Caveat',cursive;
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--je-soft-blush,#E3B0A4);
  margin-bottom:2px;
}
.tmhead-inner h1{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(2.7rem,7.4vw,5.4rem);
  line-height:.98;
  letter-spacing:.005em;
  margin:.06em 0 .22em;
  color:var(--je-off-white,#FBF6EF);
  text-wrap:balance;
}
.tmhead-inner .sub{
  font-size:clamp(.95rem,1.5vw,1.1rem);
  color:var(--je-warm-sand,#DAC9B3);
  max-width:34ch;
  margin:0;
}

/* the countdown, restyled for a dark ground */
.tmhead .tmcount{margin-top:34px;max-width:560px}
.tmhead .tmcount div{
  border-color:rgba(251,246,239,.26);
  background:rgba(42,30,34,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.tmhead .tmcount b{color:var(--je-off-white,#FBF6EF)}
.tmhead .tmcount span{color:var(--je-warm-sand,#DAC9B3)}
.tmhead .links{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.tmhead .chip{border-color:rgba(251,246,239,.4);color:var(--je-off-white,#FBF6EF)}
.tmhead .chip:hover{border-color:var(--accent,#D2923E)}
.tmhead .chip.fill{background:var(--accent,#D2923E);color:#2A1E22;border-color:var(--accent,#D2923E)}

/* Below this the sleeve would squeeze the title, so they stack and the
   sleeve steps down in size rather than dominating a phone screen. */
@media(max-width:900px){
  .tmhead-inner{grid-template-columns:1fr;gap:26px}
  .tmhead-art{justify-self:start;width:min(230px,44vw)}
  .tmhead-inner > .crumb{order:-2;margin-bottom:0}
  .tmhead-art{order:-1}
  .tmhead-art .tmtag{font-size:.54rem;padding:7px 10px;letter-spacing:.12em}
}

@media(max-width:820px){
  .tmhead{align-items:flex-end;min-height:clamp(560px,86vh,820px)}
  .tmhead::before{
    background:linear-gradient(180deg,
      rgba(42,30,34,.72) 0%,
      rgba(42,30,34,.34) 34%,
      rgba(42,30,34,.72) 74%,
      rgba(42,30,34,.94) 100%);
  }
  .tmhead::after{display:none}
  .tmhead-inner{padding-bottom:44px}
  .tmhead-inner .sub{max-width:none}
  .tmhead .tmcount{grid-template-columns:repeat(4,1fr);gap:7px}
  .tmhead .tmcount div{padding:12px 4px}
  .tmhead .tmcount b{font-size:1.5rem}
}

/* --------------------------------------------------------------
   5. THE LYRIC FILM, now a section of its own
   Given room rather than made to share a rectangle with the title.
   -------------------------------------------------------------- */
.tmlyric{max-width:1100px;margin:0 auto;padding:0 clamp(24px,5vw,48px)}
.tmlyric .tmfilm{border-radius:10px;box-shadow:0 20px 60px rgba(29,29,27,.26)}
.tmlyric .tmfilm video,
.tmlyric .tmfilm .tmfilm-poster{max-height:none}


/* the song story, now that the sleeve has gone up to the header */
.tmstory{max-width:660px;margin:0 auto;text-align:center}
.tmstory .lead{margin-left:auto;margin-right:auto}
.tmstory .links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}