/* ==========================================================================
   FALLEN & FREE 2027 — B-SIDE
   The five artwork files are shown exactly as supplied. Nothing is cropped,
   recoloured, overlaid or re-typeset. All this stylesheet does is:
     1. size each artwork to fit the screen,
     2. lay invisible clickable "hotspots" on top of the printed buttons,
     3. add a slim nav strip ABOVE the artwork, because none of the artwork
        has navigation printed on it.
   ========================================================================== */

:root {
  --ink: #000;
  --tan: #e6d3b3;
  --tan-dim: #a08a6c;
  --amber: #d98b3a;
  --rule: rgba(230, 211, 179, 0.16);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--ink);
}

body {
  height: 100%;
  margin: 0;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--tan);
  font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Added navigation strip
   Sits above the artwork, never on top of it, so no pixel of the client's
   design is covered.
   -------------------------------------------------------------------------- */

.sitenav {
  flex: 0 0 auto;
  /* The artwork scrolls inside .stage, so the nav sits above it and stays
     put on its own. Positioned so the mobile drawer anchors to it. */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  padding: 0 clamp(14px, 2.4vw, 34px);
  height: 54px;
  background: #050403;
  border-bottom: 1px solid var(--rule);
}

.sitenav__logo {
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tan);
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}

/* On desktop the drawer is transparent to layout, so its children sit
   directly in the header's flex row. On mobile it becomes the panel. */
.sitenav__drawer {
  display: contents;
}

.sitenav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.9vw, 30px);
}

.sitenav__links a {
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3ece0;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.sitenav__links a:hover { color: #fff; border-bottom-color: var(--amber); }
.sitenav__links a[aria-current="page"] { border-bottom-color: #f3ece0; }

.sitenav__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sitenav__social a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #f3ece0;
  opacity: 0.9;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sitenav__social a:hover { opacity: 1; transform: translateY(-1px); }
.sitenav__social svg { width: 19px; height: 19px; fill: currentColor; }

.sitenav__cta {
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #f3ece0;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--amber);
  background: #0d0906;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.sitenav__cta:hover { background: var(--amber); color: #120c06; }

/* Hamburger, mobile only */
.sitenav__toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--rule);
  background: transparent;
  color: #f3ece0;
  cursor: pointer;
}

.sitenav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 3.5px auto;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   The artwork stage
   .frame holds the exact aspect ratio of the supplied file, so every hotspot
   below stays glued to its button at any screen size.
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Only used in portrait — see the block at the end of this file. */
.mobilepage { display: none; }

/* --------------------------------------------------------------------------
   Slices
   A panel showing one rectangle of an artwork file, addressed by percentage so
   it stays exact at any width. Used by the portrait stacks and by the speaker
   cards. The image URL is set inline, per panel.
   -------------------------------------------------------------------------- */

.slice {
  width: 100%;
  aspect-ratio: var(--sw) / var(--sh);
  background-repeat: no-repeat;
  background-size: var(--bs) auto;
  background-position: var(--bx) var(--by);
}

/* --------------------------------------------------------------------------
   Speakers on the About page
   Cards cut from the full About artwork, below the B-side text.
   -------------------------------------------------------------------------- */

.speakers {
  padding: clamp(30px, 4.5vw, 62px) clamp(14px, 3vw, 40px) clamp(44px, 6vw, 84px);
  background: var(--ink);
}

.speakers h2 {
  margin: 0 0 clamp(18px, 2.4vw, 32px);
  font-size: clamp(14px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tan);
}

/* Below 900px this is a centred wrap rather than a grid, so a row that isn't
   full sits in the middle instead of hanging off the left. */
.speakergrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  max-width: 1460px;
  margin: 0 auto;
}

.speakergrid > * { flex: 0 1 min(100%, 420px); }

/* Three across on top, four below. A 12-column track divides evenly by both
   3 and 4, so each row fills the width: 3 x span-4, then 4 x span-3. */
@media (min-width: 900px) {
  .speakergrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .speakergrid > * { flex: none; }
  .speakergrid > :nth-child(-n + 3) { grid-column: span 4; }
  .speakergrid > :nth-child(n + 4) { grid-column: span 3; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The artwork always fills the screen in BOTH directions — no black frame,
   on any device. `max()` takes whichever is bigger: full window width, or
   whatever width makes the artwork as tall as the window. Whichever axis then
   runs over becomes scrollable inside .stage.

   Nothing is cropped or stretched: on a phone the artwork is simply larger
   than the screen and you pan across it, which also makes the small type on
   the schedule and Jupiter pages readable without pinching. */
.frame {
  position: relative;
  aspect-ratio: var(--ar);
  width: max(100cqw, calc(100cqh * var(--arn)));
  margin-inline: auto;      /* centres a frame narrower than the window */
  line-height: 0;
}

/* Pre-2023 browsers: fill the width and scroll vertically. */
@supports not (container-type: size) {
  .stage { container-type: normal; }
  .frame { width: 100%; }
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Hotspots — invisible until hovered, so the artwork reads exactly as drawn
   -------------------------------------------------------------------------- */

.hot {
  position: absolute;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  display: block;
  border-radius: 3px;
  text-indent: -9999px;
  overflow: hidden;
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease, background 0.15s ease;
}

.hot:hover,
.hot:focus-visible {
  outline-color: rgba(217, 139, 58, 0.9);
  background: rgba(217, 139, 58, 0.14);
}

/* --------------------------------------------------------------------------
   Small screens
   A wide landscape artwork on a portrait phone gets small, so the nav strip
   is shown on every page and pinch-zoom is left enabled.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .sitenav { height: 50px; }
  .sitenav__toggle { display: block; }

  .sitenav__drawer { display: none; }

  body.nav-open .sitenav__drawer {
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 2px 20px 18px;
    background: #050403;
    border-bottom: 1px solid var(--rule);
  }

  body.nav-open .sitenav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  body.nav-open .sitenav__links a {
    padding: 13px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--rule);
  }

  body.nav-open .sitenav__social {
    justify-content: center;
    gap: 26px;
    padding: 16px 0 4px;
  }

  body.nav-open .sitenav__cta {
    display: block;
    margin-top: 14px;
    padding: 13px 20px;
    text-align: center;
  }

  .hot:hover { outline-color: transparent; background: transparent; }
}

.zoomhint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  background: rgba(5, 4, 3, 0.92);
  border: 1px solid var(--rule);
  pointer-events: none;
  animation: hintfade 4.2s ease forwards;
}

@keyframes hintfade {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* --------------------------------------------------------------------------
   Portrait screens — the phone layout
   A 3:2 poster can't fill a 9:16 phone. Rather than shrink it into black bars
   or make it slide sideways, each page is rebuilt as a vertical stack of its
   own blocks, cut out of the same artwork file with background-position. Same
   type, same colours, same photography — re-flowed to read top to bottom at a
   legible size.

   Landscape (phones turned sideways, tablets, desktop) keeps the edge-to-edge
   artwork from above.
   -------------------------------------------------------------------------- */

@media (max-aspect-ratio: 1 / 1) {
  .stage { display: none; }

  .mobilepage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 0 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ink);
  }

  .mobilepage > .slice { flex: 0 0 auto; }

  /* Pages with their own portrait artwork (see MOBILE_FRAME) fill the screen.
     Cropping comes off the padded sky at the top, because the frame is
     anchored to the bottom. */
  body.is-home .mobilepage {
    position: relative;
    display: block;
    container-type: size;
    overflow: hidden;
    padding: 0;
  }

  /* Pinned to the bottom, so the speaker names sit on the bottom edge of the
     screen. Grid/flex alignment won't do this reliably — browsers fall back to
     the start when an item overflows — so anchor it explicitly. The artwork's
     sky is padded upward (see raise_sky), so whatever has to be cropped to
     fill a given phone comes off that sky, never off the content. */
  .mframe {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: var(--ar);
    width: max(100cqw, calc(100cqh * var(--arn)));
    line-height: 0;
  }

  /* Short, wide viewports — an iPhone SE or 8 Plus with Safari's bars, or a
     tablet held upright — are too wide relative to the artwork for filling to
     work: the crop would run past the padded sky and into the title. Above
     roughly 0.58 the artwork is fitted instead, so nothing is ever cut. */
  @media (min-aspect-ratio: 58 / 100) {
    .mframe { width: min(100cqw, calc(100cqh * var(--arn))); }
  }

  .mframe img { display: block; width: 100%; height: 100%; }

  /* The speakers section is a normal block inside the stack, not a panel. */
  .mobilepage > .speakers {
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .mobilepage .speakergrid { gap: 12px; }

  a.slice {
    display: block;
    outline-offset: -3px;
  }

  a.slice:active { opacity: 0.75; }
  a.slice:focus-visible { outline: 2px solid var(--amber); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}