/* ---------------------------------------------------------------- *
 * Past sessions
 *
 * The menu's third face: same stage width, same mark, same navigation slots,
 * same paper as the about screen, so the swap between them reads as one screen
 * turning over rather than as a page load. Every offset below is a design pixel.
 *
 * Where the other two screens are drawn to a fixed 1440x900, this one only
 * starts there: the record grows with the number of rooms, so the column runs
 * in flow and the layer scrolls once it passes the bottom of the drawing.
 *
 * Scoped under .sessions-page for the same reason main-menu.css and
 * about-the-club.css are scoped: all four screens share a document, and
 * .content / .logo / .lede / .arrow mean something different in each. The
 * backdrop and chip rules deliberately repeat those files instead of being
 * lifted into a shared one -- keeping each screen's stylesheet self-contained
 * is what makes the scoping hold.
 * ---------------------------------------------------------------- */

/* One step above .about-the-club-page (310), so a swap can fade this in over
   either of the screens below it and never expose the body between the two.
   The stack order is also what tells the swap which way to run -- see the
   SCREENS table in index.html. */
.sessions-page {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-out, visibility 0s linear 600ms;
}

.sessions-page.revealed {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-out, visibility 0s;
}

/* ---------------------------------------------------------------- *
 * Backdrop
 * ---------------------------------------------------------------- */

/* Opaque base colour, as on the other two screens: it is what hides the ones
   this layer covers while it fades. Fixed, not scrolled with the stage, so a
   long record moves over a sheet that stays still. */
.sessions-page .backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #efeee7;
}

/* Same crop as the menu's paper, so the grain does not shift between the
   screens during the cross-fade. */
.sessions-page .backdrop-paper {
  position: absolute;
  left: -4.792%;    /*  -69px */
  top: -5%;         /*  -45px */
  width: 107.014%;  /* 1541px */
  height: 114.111%; /* 1027px */
  background-image: url("../img/white-crumpled-paper.9072c1d09528.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------- *
 * Stage
 *
 * The padding is what puts the column on the baseline the screen was drawn
 * on (162px in, 283px down), rather than an absolute offset as on the other
 * two screens: the list has to be able to push the stage taller than 900px.
 * The auto side margins centre the stage in a viewport bigger than it while
 * still letting it start at the top -- and stay reachable -- once it is not.
 * ---------------------------------------------------------------- */

.sessions-page #sessions {
  position: relative;
  z-index: 1;
  width: 1440px;
  min-height: 900px;
  flex: none;
  margin: auto 0;
  padding: 283px 164px 96px 162px;
  box-sizing: border-box;
}

.sessions-page #sessions .logo {
  position: absolute;
  top: 27px;
  left: 155px;
  width: 118px;
  height: 118px;
}

/* ---------------------------------------------------------------- *
 * Top navigation
 * ---------------------------------------------------------------- */

.sessions-page .top-nav {
  position: absolute;
  top: 69px;
  right: 164px;
  display: flex;
  gap: 20px;
}

.sessions-page .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(89, 89, 89, 0.4);
  border-radius: 3px;
  background: rgba(239, 238, 231, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: "Iosevka Charon Mono", monospace;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #595959;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out,
              background-color 200ms ease-out;
}

.sessions-page .chip:hover {
  border-color: rgba(89, 89, 89, 0.75);
  background: rgba(239, 238, 231, 0.45);
}

/* On this screen the forward move is ABOUT THE CLUB, so it takes the accent
   the menu gives to its own call to action. */
.sessions-page .chip-accent {
  border-color: rgba(218, 30, 55, 0.5);
}

.sessions-page .chip-accent .arrow {
  color: #da1e37;
}

.sessions-page .chip-accent:hover {
  border-color: rgba(218, 30, 55, 0.85);
  background: rgba(218, 30, 55, 0.06);
}

/* ---------------------------------------------------------------- *
 * Back to the menu
 *
 * Unboxed, as on the about screen: it is the way out of a detour rather than
 * one of the screen's destinations, so it is drawn as the arrow and the words.
 * ---------------------------------------------------------------- */

.sessions-page .back {
  position: absolute;
  top: 227px;
  left: 162px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  border: none;
  background: none;
  font-family: "Iosevka Charon Mono", monospace;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #da1e37;
  cursor: pointer;
}

.sessions-page .back .arrow {
  color: #da1e37;
  transition: transform 200ms ease-out;
}

.sessions-page .back:hover .arrow {
  transform: translateX(-3px);
}

/* ---------------------------------------------------------------- *
 * Heading
 * ---------------------------------------------------------------- */

/* The full column width the rules below run to, so the heading and the record
   share one measure. */
.sessions-page .content {
  width: 1114px;
}

.sessions-page .content h1 {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1a1c20;
}

.sessions-page .lede {
  margin: 25px 0 0;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  color: #1a1c20;
}

/* ---------------------------------------------------------------- *
 * The record
 *
 * One row per room, 116px apart, each opened by a hairline rule. The rule is
 * a border on the row rather than a separator between rows, so the record
 * reads as a ledger that starts under the paragraph and stays open at the
 * bottom instead of being closed off by a final line.
 * ---------------------------------------------------------------- */

.sessions-page .past-sessions {
  margin: 37px 0 0;
  padding: 0;
  list-style: none;
}

.sessions-page .past-session {
  position: relative;
  border-top: 1px solid rgba(26, 28, 32, 0.14);
  padding: 21px 0 31px;
}

.sessions-page .past-session-title {
  margin: 0;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: #1a1c20;
}

.sessions-page .past-session-author {
  margin: 26px 0 0;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #595959;
}

/* The row opens the session, so it is the target rather than the title alone:
   the button holds the title and its ::after is stretched over the row (which
   is the positioned ancestor). Everything else in the row is either behind
   that overlay or told to ignore the pointer, so a click anywhere on the row
   is a click on the button -- and so is a hover, which is what turns the title
   red. */
.sessions-page .past-session-open {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease-out;
}

.sessions-page .past-session-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sessions-page .past-session-open:hover {
  color: #da1e37;
}

.sessions-page .past-session-open:focus-visible {
  outline: 2px solid #da1e37;
  outline-offset: 4px;
}

/* Set against the far edge of the column, on the author's line: the eye runs
   down the titles and only crosses to the label when it has stopped on one.
   Pinned rather than floated so the title is free to wrap past it. */
.sessions-page .past-session-meta {
  position: absolute;
  right: 0;
  bottom: 25px;
  margin: 0;
  font-family: "Iosevka Charon Mono", monospace;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.15em;
  color: rgba(89, 89, 89, 0.6);
  white-space: nowrap;
  /* Positioned, so it would otherwise sit on top of the row overlay and eat
     the clicks landing on it. It is a label, never a target. */
  pointer-events: none;
}

/* Before the first room there is nothing to rule, so the line is left as
   plain as the paragraph above it. */
.sessions-page .past-sessions-empty {
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  color: #595959;
}

/* ---------------------------------------------------------------- *
 * Below the design size
 *
 * As on the other two screens: the stage is unpinned and the pieces that were
 * hung off the drawing fall back into flow. The column already scrolls inside
 * the layer, so nothing but the offsets has to change.
 * ---------------------------------------------------------------- */

@media (max-width: 1439px) {
  .sessions-page {
    display: block;
  }

  .sessions-page #sessions {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 36px clamp(24px, 5vw, 90px) 80px;
  }

  .sessions-page #sessions .logo {
    position: static;
    display: block;
    width: 96px;
    height: 96px;
  }

  .sessions-page .top-nav {
    top: 46px;
    right: clamp(24px, 5vw, 90px);
  }

  .sessions-page .back,
  .sessions-page .content {
    position: static;
    width: auto;
  }

  .sessions-page .back {
    margin-top: 56px;
  }

  .sessions-page .content {
    margin-top: 30px;
  }

  .sessions-page .content h1 {
    font-size: clamp(36px, 5vw, 48px);
  }
}

@media (max-width: 720px) {
  .sessions-page #sessions {
    padding: 32px 24px 64px;
  }

  .sessions-page #sessions .logo {
    width: 88px;
    height: 88px;
  }

  .sessions-page .top-nav {
    position: static;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
  }

  .sessions-page .chip {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }

  .sessions-page .back {
    margin-top: 40px;
    gap: 14px;
    font-size: 14px;
  }

  .sessions-page .lede {
    font-size: 17px;
    line-height: 32px;
  }

  /* Too narrow to keep the label on the far edge of the row, so it drops under
     the author and the row is measured by its contents instead. */
  .sessions-page .past-session {
    padding: 20px 0 26px;
  }

  .sessions-page .past-session-title {
    font-size: 20px;
    line-height: 1.25;
  }

  .sessions-page .past-session-author {
    margin-top: 14px;
  }

  .sessions-page .past-session-meta {
    position: static;
    margin-top: 14px;
    font-size: 13px;
    white-space: normal;
  }

  .sessions-page .past-sessions-empty {
    font-size: 17px;
    line-height: 32px;
  }
}