/* THE CHARACTER PROFILE, REDESIGNED (James, 2026-10-16: "the character profiles coudl sue some work design wise, liek their
   pages"). Loaded after characters.css by deploy/write-character-pages.py; every rule here is `body.character-page …` so it
   wins over that sheet without touching it. The page now reads like the series' About page it is opened from: the campus
   under the band fade, the headshot as a big sticker, the name in Titan One, the nickname and the reason as the reveal
   card's own yellow / cyan labels, the reveal clip, and THE REST OF THE HOUSE as headshot stickers instead of text links.
   The back chevron returns to the series page with its About page open (/good-boy/#about). */
body.character-page .character-ground::after { background: var(--band-fade, linear-gradient(90deg, oklch(0.16 0.045 262 / 0.82) 0%, oklch(0.16 0.045 262 / 0.55) 55%, oklch(0.16 0.045 262 / 0.7) 100%)); }
body.character-page .character-ground img { filter: none; transform: none; object-position: 50% 35%; }

body.character-page .character-profile {
  max-width: none; width: auto; margin: 0; padding: 0 var(--gutter) var(--space-4xl);
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.character-page .character-head { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; margin: 0; padding-top: max(8px, env(safe-area-inset-top)); }
body.character-page .character-series-img { width: 150px; }

/* the layout: portrait, words, reveal — stacked on a phone */
body.character-page .character-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
body.character-page .character-copy { display: grid; row-gap: var(--space-lg); align-content: start; }
body.character-page .character-portrait { position: relative; width: min(100%, 440px); justify-self: start; }
body.character-page .character-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%;
  border: 5px solid var(--cream); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1.5deg);
}
body.character-page.character-page .character-portrait .pledge-mark { position: absolute; z-index: 2; top: auto; right: auto; left: -10px; bottom: 18px; width: 58%; transform: rotate(-6deg); }
/* PLEDGE in the house yellow with the ink drop (James, 10-16: "the pledge label can be in ink" → "for pledge on the character
   profiles do yellow"): the paint png as a MASK over a yellow fill, the img kept (invisible) for its size */
body.character-page .character-portrait .pledge-mark { filter: drop-shadow(3px 3px 0 var(--ink)); }
body.character-page .character-portrait .pledge-mark::before {
  content: ""; position: absolute; inset: 0; background: var(--yellow);
  -webkit-mask: url("/img/pledge-paint.png") center / contain no-repeat; mask: url("/img/pledge-paint.png") center / contain no-repeat;
}
body.character-page .character-portrait .pledge-mark img { border: 0; box-shadow: none; transform: none; aspect-ratio: auto; filter: none; visibility: hidden; }

body.character-page .character-identity { display: grid; row-gap: 6px; }
body.character-page .character-kicker { margin: 0; font-family: var(--body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); }
body.character-page .character-name {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(3.25rem, 17vw, 6rem); line-height: 0.88;
  text-transform: uppercase; color: var(--cream); text-shadow: 0.05em 0.06em 0 var(--ink);
}
body.character-page .character-role { margin: 0; font-family: var(--display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy-cream); text-shadow: 1px 1px 0 var(--ink); }
body.character-page .character-bio { margin: 0; font-size: 1.3125rem; font-weight: 500; line-height: 1.4; color: var(--cream); text-shadow: 1px 1px 0 oklch(0.08 0.02 262 / 0.6); max-width: 32ch; }

/* NICKNAME / WHY as the reveal card's labels: a yellow tag over the value, a cyan tag over the reason */
body.character-page .character-facts { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); margin: 0; padding: 0; border: 0; }
body.character-page .character-facts > div { display: grid; justify-items: start; row-gap: 6px; }
body.character-page .character-facts dt {
  margin: 0; padding: 0.3em 0.5em 0.22em; font-family: var(--display); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg);
}
body.character-page .character-facts > div + div dt { background: var(--cyan); transform: rotate(2deg); }
body.character-page .character-facts dd { margin: 0; font-family: var(--display); font-size: 1.75rem; line-height: 1; text-transform: uppercase; color: var(--cream); text-shadow: 2px 2px 0 var(--ink); }
body.character-page .character-facts > div + div dd { font-family: var(--body); font-weight: 700; font-size: 1.125rem; text-transform: none; line-height: 1.3; }

/* the reveal */
body.character-page .character-reveal { display: grid; row-gap: var(--space-md); justify-items: start; margin: 0; padding: 0; border: 0; }
body.character-page .character-reveal h2 { margin: 0; font-family: var(--body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); }
body.character-page .character-video { width: min(100%, 320px); height: auto; aspect-ratio: 9 / 16; border: 4px solid var(--cream); box-shadow: 6px 6px 0 var(--ink); transform: rotate(1.2deg); background: var(--navy); }
body.character-page .character-reveal .btn { font-size: 1.25rem; padding: 0.5em 1.1em; }
body.character-page .character-reveal .btn::before { content: ""; border-style: solid; border-width: 0.42em 0 0.42em 0.7em; border-color: transparent transparent transparent currentColor; }

/* THE REST OF THE HOUSE */
body.character-page .character-nav { display: grid; row-gap: var(--space-md); margin-top: var(--space-3xl); padding-top: 0; border: 0; }
body.character-page .character-nav-k { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.625rem; line-height: 1; text-transform: uppercase; color: var(--cream); text-shadow: 0.06em 0.06em 0 var(--ink); }
body.character-page .character-nav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) 10px; }
body.character-page .character-nav-list a { display: grid; row-gap: 3px; text-decoration: none; color: var(--cream); }
body.character-page .character-nav-list img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; margin-bottom: 4px;
  border: 3px solid var(--cream); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg); transition: transform 180ms var(--ease-out);
}
body.character-page .character-nav-list li:nth-child(even) img { transform: rotate(1.5deg); }
body.character-page .cn-name { font-family: var(--display); font-size: 0.875rem; line-height: 1; text-transform: uppercase; }
body.character-page .cn-role { font-size: 0.6875rem; font-weight: 700; line-height: 1.15; color: var(--navy-dim); }
@media (hover: hover) {
  body.character-page .character-nav-list a:hover img { transform: rotate(0deg) translateY(-3px); }
  body.character-page .character-nav-list a:hover .cn-name { color: var(--yellow); }
}

/* a phone: one column, left-aligned — characters.css pins the portrait + identity into a two-column row and centres the
   text; undo both here. The PLEDGE paint sits across the portrait's foot, not over his head. */
@media not ((min-width: 700px) and (min-aspect-ratio: 1 / 1)) {
  body.character-page .character-profile { text-align: left; }
  body.character-page .character-portrait,
  body.character-page .character-identity,
  body.character-page .character-bio,
  body.character-page .character-facts,
  body.character-page .character-reveal { grid-column: 1 / -1; grid-row: auto; width: auto; max-width: none; }
  body.character-page .character-portrait { width: min(100%, 440px); }
  body.character-page .character-identity { margin-top: var(--space-sm); }
  body.character-page .character-portrait .pledge-mark { top: auto; left: -6px; right: auto; bottom: 14px; width: 62%; }
}

/* ON A DESK (redone 10-16, James: "looks like shit on desktop"): ONE centred card-free composition, 1180 px wide — the
   portrait on the left, everything about him stacked in one column beside it (kicker, name, role, bio, the two tags side by
   side, then the reveal clip with Watch full episode next to it), the rest of the house seven across under both.
   characters.css has `:not(:has(.character-reveal))` rules (0,3,0) that capped the page at 720 px and squeezed the name
   into a 3rd column; the doubled class here (0,3,1+) outranks them for both cases. */
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  body.character-page.character-page .character-profile,
  body.character-page.character-page .character-profile:not(:has(.character-reveal)) {
    width: min(1180px, calc(100vw - 64px)); max-width: none; margin: 0 auto; padding: var(--space-xl) 0 var(--space-4xl);
    background: none; text-align: left;
  }
  body.character-page.character-page .character-head { min-height: 72px; margin-bottom: var(--space-xl); }
  body.character-page.character-page .character-series-img { width: 190px; }
  body.character-page.character-page .character-layout,
  body.character-page.character-page .character-layout:not(:has(.character-reveal)) {
    display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); grid-template-rows: auto;
    column-gap: var(--space-4xl); row-gap: 0; align-items: start;
  }
  body.character-page.character-page .character-portrait,
  body.character-page.character-page .character-layout:not(:has(.character-reveal)) .character-portrait { grid-column: 1; grid-row: 1; width: 100%; }
  body.character-page.character-page .character-copy { display: grid; grid-column: 2; grid-row: 1; row-gap: var(--space-xl); align-content: start; padding-top: var(--space-md); }
  body.character-page.character-page .character-identity,
  body.character-page.character-page .character-bio,
  body.character-page.character-page .character-facts,
  body.character-page.character-page .character-reveal,
  body.character-page.character-page .character-layout:not(:has(.character-reveal)) .character-bio { grid-column: auto; grid-row: auto; width: auto; margin: 0; }
  body.character-page.character-page .character-name { font-size: clamp(4.5rem, 6.4vw, 7.5rem); }
  body.character-page.character-page .character-role { font-size: 1.375rem; }
  body.character-page.character-page .character-bio { font-size: 1.625rem; max-width: 30ch; }
  body.character-page.character-page .character-facts { grid-template-columns: auto auto; justify-content: start; column-gap: var(--space-3xl); }
  /* the reveal as the copy's own right-hand column (the clip, its label above, Watch full episode under), so the whole
     profile sits above the fold; a profile with no reveal keeps one column */
  body.character-page.character-page .character-copy:has(.character-reveal) { grid-template-columns: minmax(0, 1fr) 250px; column-gap: var(--space-3xl); }
  body.character-page.character-page .character-copy:has(.character-reveal) > :not(.character-reveal) { grid-column: 1; }
  body.character-page.character-page .character-reveal {
    grid-column: 2; grid-row: 1 / span 4; display: grid; justify-items: start; justify-self: start; row-gap: var(--space-md); margin: 0;
  }
  body.character-page.character-page .character-video { width: 250px; }
  body.character-page.character-page .character-reveal .btn { white-space: nowrap; font-size: 1.0625rem; padding: 0.55em 1em; }
  body.character-page.character-page .character-nav { margin-top: var(--space-4xl); }
  body.character-page.character-page .character-nav-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-lg); max-width: 1000px; }
  body.character-page.character-page .cn-name { font-size: 1rem; }
  body.character-page.character-page .cn-role { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { body.character-page .character-nav-list img { transition: none; } }

/* THE PLEDGE NAMES, one style per brother (James, 10-16: "add the pledge names to each brothers character page, styled in a
   different way per character"; write-character-pages.py writes `.pn.pn-<slug>`). Each takes its look from his own reveal
   card or episode: Rocco PRINCESS = a pink satin sash with a crown; Dan TINKERBELL = fairy glitter, peach glow and sparkles;
   Cam JIGGLYPUFF = his gamer card, pixel-stepped pink letters on a stream panel; Maddo JOEY = a rugby jersey number, green
   and gold, stitched. Shared: the small kicker, the reason under it, the episode it was given in. */
body.character-page .pn { position: relative; display: grid; justify-items: start; row-gap: 8px; margin: var(--space-xs) 0 0; }
body.character-page .pn p { margin: 0; }
body.character-page .pn-k { font-family: var(--body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); }
body.character-page .pn-name { font-family: var(--display); font-size: clamp(2.5rem, 11vw, 4rem); line-height: 0.95; text-transform: uppercase; }
body.character-page .pn-why { font-family: var(--body); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--cream); text-shadow: 1px 1px 0 var(--ink); }
body.character-page .pn-ep { font-family: var(--body); font-weight: 700; font-size: 0.875rem; color: var(--navy-cream); text-decoration: none; }
body.character-page .pn-ep span { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: oklch(0.97 0.03 95 / 0.45); }
@media (hover: hover) { body.character-page .pn-ep:hover span { color: var(--yellow); text-decoration-color: currentColor; } }

/* ROCCO · PRINCESS: a pink satin sash across the name, a gold crown on the P */
body.character-page .pn-rocco .pn-name {
  position: relative; padding: 0.12em 0.45em 0.08em; color: #fff4fa;
  background: linear-gradient(180deg, oklch(0.78 0.15 350), oklch(0.62 0.2 352)); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink), inset 0 3px 0 oklch(1 0 0 / 0.35); transform: rotate(-3deg);
  text-shadow: 2px 2px 0 oklch(0.4 0.15 352);
}
body.character-page .pn-rocco .pn-name::before {
  content: "♛"; position: absolute; top: -0.62em; left: 0.18em; font-size: 0.62em; line-height: 1; color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink); transform: rotate(-14deg);
}
body.character-page .pn-rocco .pn-why { font-style: italic; }

/* DAN · DUMPTRUCK (James, 10-16: "dans pledge name is dumptruck"): construction kit — chunky ink letters on a hazard-yellow
   plate with black-and-yellow chevron ends, a little tipped like a load going out */
body.character-page .pn-dan .pn-name {
  position: relative; padding: 0.14em 1.15em 0.08em; color: var(--ink); letter-spacing: 0.03em; text-shadow: none;
  background:
    repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--yellow) 10px 20px) left / 0.8em 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--yellow) 10px 20px) right / 0.8em 100% no-repeat,
    var(--yellow);
  border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-2.5deg);
}
body.character-page .pn-dan .pn-k::before { content: "⚠ "; }
@media not ((min-width: 700px) and (min-aspect-ratio: 1 / 1)) { body.character-page .pn-dan .pn-name { font-size: clamp(1.75rem, 8.6vw, 3rem); padding-inline: 0.95em; } }

/* CAM · JIGGLYPUFF: his gamer card — a stream panel, pixel-stepped pink letters, a LIVE dot */
body.character-page .pn-cam {
  justify-self: start; width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: var(--space-md) var(--space-lg) var(--space-lg); background: oklch(0.2 0.06 300 / 0.85);
  border: 3px solid var(--ink); box-shadow: 0 0 0 3px oklch(0.72 0.2 340), 6px 6px 0 3px var(--ink); border-radius: 4px;
}
body.character-page .pn-cam .pn-k::after { content: " ● LIVE"; color: oklch(0.65 0.24 25); letter-spacing: 0.08em; }
body.character-page .pn-cam .pn-name {
  color: oklch(0.85 0.12 350); letter-spacing: 0.04em;
  text-shadow: 3px 0 0 oklch(0.5 0.2 340), 0 3px 0 oklch(0.5 0.2 340), 3px 3px 0 oklch(0.5 0.2 340), 6px 6px 0 var(--ink);
}
body.character-page .pn-cam .pn-why { font-family: ui-monospace, "Courier New", monospace; font-size: 1rem; color: oklch(0.9 0.08 150); }
body.character-page .pn-cam .pn-why::before { content: "> "; }

/* MADDO · JOEY: a rugby jersey — green and gold hoops behind a stitched number-style name */
body.character-page .pn-maddo .pn-name {
  padding: 0.18em 0.5em 0.1em; color: var(--yellow); letter-spacing: 0.06em;
  background: repeating-linear-gradient(180deg, oklch(0.42 0.1 155) 0 14px, oklch(0.36 0.09 155) 14px 28px);
  border: 3px solid var(--ink); outline: 2px dashed oklch(0.82 0.15 90 / 0.9); outline-offset: -9px;
  box-shadow: 5px 5px 0 var(--ink); text-shadow: 3px 3px 0 oklch(0.25 0.06 155); transform: rotate(2deg);
}
body.character-page .pn-maddo .pn-k::before { content: "The big Aussie · "; color: var(--cream); }

@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  body.character-page .pn-name { font-size: 4.25rem; }
  body.character-page .pn-why { font-size: 1.25rem; }
}