/* Character profiles share the hub's campus ground, cream type and cyan doors. */
.character-page {
  --page: var(--navy);
  min-height: 100svh;
  color: var(--navy-cream);
  isolation: isolate;
}
.character-page .character-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--navy);
  pointer-events: none;
}
.character-page .character-ground img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(24px) saturate(1.15) brightness(0.6);
  transform: scale(1.15);
}
.character-page .character-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.04 262 / 0.22);
}
.character-page .character-profile {
  width: min(100%, 1000px);
  min-height: 100svh;
  margin-inline: auto;
  padding: 0 max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: oklch(0.13 0.035 262 / 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.character-page .character-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 80px;
  margin: 0 -10px 24px;
  padding-top: env(safe-area-inset-top);
}
.character-page .character-series {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.character-page .character-series-img {
  display: block;
  height: 40px;
  width: auto;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.character-page .character-layout {
  display: grid;
  grid-template-columns: clamp(84px, 25vw, 124px) minmax(0, 1fr);
  align-items: start;
  gap: 24px 20px;
}
.character-page .character-copy { display: contents; }
.character-page .character-portrait {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
}
.character-page .character-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 4px solid var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
}
.character-page .character-portrait .pledge-mark {
  top: 4px;
  left: 2px;
  width: 72%;
  max-width: none;
  transform: rotate(-8deg);
}
.character-page .character-identity {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.character-page .character-kicker {
  margin-bottom: 8px;
  color: var(--navy-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.character-page .character-name {
  color: var(--cream);
  font-size: clamp(2rem, 8.8vw, 3.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--ink);
  overflow-wrap: anywhere;
}
.character-page .character-role {
  margin-top: 10px;
  color: var(--navy-dim);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}
.character-page .character-bio {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 42ch;
  font-size: 1.125rem;
  line-height: 1.5;
}
.character-page .character-facts {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  gap: 16px;
  margin: 0;
  padding-top: 20px;
  border-top: 2px dashed oklch(0.97 0.03 95 / 0.22);
}
.character-page .character-facts dt {
  color: var(--navy-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.character-page .character-facts dd {
  margin: 4px 0 0;
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.45;
}
.character-page .character-reveal {
  grid-column: 1 / -1;
  grid-row: 4;
  min-width: 0;
  width: min(100%, 360px);
  justify-self: center;
  margin-top: 4px;
}
.character-page .character-reveal h2 {
  margin-bottom: 16px;
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1.15;
  text-align: left;
}
.character-page .character-video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: var(--lights-off);
  border: 3px solid var(--cream);
  box-shadow: 6px 6px 0 var(--ink);
}
.character-page .character-reveal .btn,
.character-page .character-copy > .btn {
  min-height: 48px;
  max-width: 100%;
  margin-top: 20px;
  padding: 0.55em 0.8em;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}
.character-page .character-copy > .btn { grid-column: 1 / -1; justify-self: start; }
.character-page .character-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 2px dashed oklch(0.97 0.03 95 / 0.22);
}
.character-page .character-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1rem;
}
.character-page a:focus-visible,
.character-page video:focus-visible,
.member-profile:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 6px;
}
.character-page .character-series:hover,
.character-page .pane-back:hover,
.character-page .character-nav a:hover { color: var(--cream); }

/* The existing lineup keeps its portrait stickers; the cyan label makes each link explicit. */
.member-profile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: start;
  align-items: start;
  gap: var(--space-xs);
  width: 100%;
  height: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.member-profile:hover { color: inherit; }
.member-profile .member-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 100%;
  margin-top: 12px;
  padding: 0.45em 0.55em;
  border: 3px solid var(--ink);
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .member-profile img,
  .member-profile .member-cta { transition: transform 200ms var(--ease-out); }
  .member-profile:hover img { transform: rotate(0deg) translateY(-2px); }
  .member-profile:hover .member-cta { transform: translate(-1px, -1px); }
}
@media (min-width: 360px) and (max-width: 899px) {
  .character-page .character-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (min-width: 600px) {
  .character-page .character-profile { padding-inline: 32px; }
  .character-page .character-head { min-height: 96px; }
  .character-page .character-layout { column-gap: 28px; }
}
@media (min-width: 900px) {
  .character-page .character-profile {
    min-height: 0;
    margin-block: 20px;
    padding-bottom: 24px;
    background: oklch(0.13 0.035 262 / 0.6);
  }
  .character-page .character-head { margin-bottom: 16px; min-height: 64px; }
  .character-page .character-layout {
    grid-template-columns: 136px minmax(0, 1fr) minmax(280px, 310px);
    grid-template-rows: auto auto auto 1fr;
    gap: 24px 32px;
  }
  .character-page .character-name { font-size: clamp(2.75rem, 4.3vw, 3.5rem); }
  .character-page .character-bio,
  .character-page .character-facts,
  .character-page .character-copy > .btn { grid-column: 1 / 3; }
  .character-page .character-reveal {
    grid-column: 3;
    grid-row: 1 / 5;
    width: 100%;
    margin-top: 0;
  }
  .character-page .character-reveal h2 { font-size: 1.375rem; }
  .character-page .character-nav { margin-top: 28px; }
  .character-page .character-profile:not(:has(.character-reveal)) { max-width: 720px; }
  .character-page .character-layout:not(:has(.character-reveal)) {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .character-page .character-layout:not(:has(.character-reveal)) .character-portrait { grid-row: 1 / 3; }
  .character-page .character-layout:not(:has(.character-reveal)) .character-bio { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .character-page *, .member-profile, .member-profile * {
    animation: none !important;
    transition: none !important;
  }
}

/* THE FEED (James, 2026-10-13: "how can we display the characters page better? like scrolling posts?" -> "do option 1"):
   on a phone the Characters pane is a feed, one man a screen. The pane body snaps a post at a time, each post is the
   headshot sticker as big as the screen allows with the name, role, line and the cyan button under it, and the next
   post's top peeks in at the foot so it reads as swipeable. The desk keeps its grid. */
@media not all and (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  #characters .pane-body {
    container-type: size;
    scroll-snap-type: y mandatory;
    padding: 0;
  }
  #characters .lineup {
    --peek: 56px;
    display: block;
    padding-bottom: var(--peek);
  }
  #characters .member {
    display: flex; justify-content: center;
    height: calc(100cqh - var(--peek));
    padding: var(--space-lg) var(--gutter) 0;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  #characters .member-profile {
    width: 100%; height: auto;
    grid-template-rows: none; align-content: start;
  }
  /* the sticker is as wide as the column, or as tall as the post leaves room for under it on a short phone */
  #characters .member-profile > img {
    width: min(100%, (100cqh - var(--peek) - 236px) * 0.8); max-width: none; height: auto;
    margin-bottom: var(--space-md);
    transform: rotate(-1.5deg);
  }
  #characters .member:nth-child(even) .member-profile > img { transform: rotate(1.5deg); }
  #characters .member .pledge-mark { max-width: 210px; top: 8px; left: 10px; }
  #characters .member-name { font-size: 2.25rem; line-height: 1; }
  #characters .member-line { max-width: none; font-size: 1.0625rem; }
  #characters .member-profile .member-cta { min-height: 48px; margin-top: var(--space-sm); padding: 0.5em 1.1em; font-size: 1rem; }
}