/* The site's two plain-prose utility routes: /about/ and /contact/.
   ONE stylesheet for both, the same call the /events/ + /updates/ split makes —
   they are the same shape (a hero, then a stack of prose cards) rather than two
   designs, and giving each its own near-copy is how two sheets drift apart.

   The rhythm is deliberately the privacy policy's: these three pages are what a
   reader (or an ad network reviewer) lands on when they want to know who runs
   the site, so reading like one another is the point. Anything scoped here is
   under body.site-info-page, which both routes carry; where a rule is genuinely
   one route's, it is scoped further (.about-page / .contact-page).

   Both routes are on the site's shared dark palette (the --tcb-* tokens in
   shared-shell.css, V-45b) — the same retone /support/ and /kingdom-codes/
   had. They were still wearing the original feature-page look: a maroon page
   glow, glass panels edged cyan, gold and pink per section, cyan links and a
   70px CookieRun title. Colours below read tokens, so the light theme
   re-points them on its own; the dark-only overrides of feature-page.css's
   literals are in the SITE THEME block, guarded so light never sees them. */

body.site-info-page .site-info-main {
  gap: 1rem;
}

/* The hero shares the prose cards' measure, so the page reads as one column
   rather than a full-width banner over a narrower stack. */
body.site-info-page .site-info-hero {
  gap: 0.65rem;
  max-width: 68rem;
}

/* ...and that column is centred in the page, not left-aligned under the
   1600px header. Full width up to the measure, then auto margins. */
body.site-info-page .site-info-hero,
body.site-info-page .site-info-section {
  width: 100%;
  margin-inline: auto;
}

/* Stops short of the head cookie, which takes the right third of the hero.
   Below 530px the shared hero puts a scrim under the copy instead. */
body.site-info-page .site-info-hero .hero-copy {
  max-width: min(40rem, 62%);
  line-height: 1.55;
}

@media (max-width: 530px) {
  body.site-info-page .site-info-hero .hero-copy {
    max-width: none;
  }
}

body.site-info-page .site-info-section {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  max-width: 68rem;
}

/* The section label is a pill, not a bar. `.alpha-page-status` holds itself
   in with `align-self`, which a GRID item ignores on the inline axis, so in
   these grid sections it stretched to the full width of the card. */
body.site-info-page .site-info-section > .alpha-page-status {
  justify-self: start;
}

/* feature-page.css sizes every h2 at up to 2.8rem, sized for a feature
   heading, not the head of a prose card. This is /support/'s section scale. */
body.site-info-page .site-info-section h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.55rem);
}

body.site-info-page .site-info-section p {
  margin: 0;
  max-width: 62rem;
  color: var(--text-soft);
  line-height: 1.68;
}

body.site-info-page .site-info-section h3 {
  margin: 0.5rem 0 0;
  font-size: 1.02rem;
  color: var(--text);
}

body.site-info-page .site-info-list {
  display: grid;
  gap: 0.46rem;
  margin: 0;
  padding-left: 1.15rem;
  max-width: 62rem;
  color: var(--text-soft);
  line-height: 1.62;
}

body.site-info-page .site-info-list li::marker {
  color: var(--tcb-accent);
}

body.site-info-page .site-info-note {
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--tcb-brand);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgba(154, 114, 255, 0.09);
  font-size: 0.92rem;
}

body.site-info-page .site-info-section a {
  color: var(--tcb-brand-strong);
  text-decoration-color: rgba(195, 154, 255, 0.45);
  text-underline-offset: 0.16em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

body.site-info-page .site-info-section a:hover,
body.site-info-page .site-info-section a:focus-visible {
  color: var(--tcb-ink);
  text-decoration-color: var(--tcb-brand-strong);
}

/* ---- the tool directory on /about/ -------------------------------------
   Stated column counts rather than auto-fit, the call the dex metrics panel
   and the tier-list chip grid both make: auto-fit picks the count from a
   minimum track width, so the card width at each breakpoint is whatever falls
   out. Here every card holds a heading and one line, so a count that lands
   them at a readable width is the thing worth fixing. */
body.site-info-page .site-info-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.site-info-page .site-info-links > li {
  display: grid;
}

body.site-info-page .site-info-link {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  height: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--tcb-line);
  border-radius: 0.65rem;
  background: var(--tcb-surface-strong);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

body.site-info-page .site-info-link:hover,
body.site-info-page .site-info-link:focus-visible {
  border-color: var(--tcb-brand);
  background: rgba(154, 114, 255, 0.1);
}

body.site-info-page .site-info-link-name {
  color: var(--tcb-brand-strong);
  font-weight: 600;
  font-size: 0.97rem;
}

body.site-info-page .site-info-link-copy {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  body.site-info-page .site-info-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.site-info-page .site-info-links {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the contact methods on /contact/ ----------------------------------
   A definition list, because that is what it is: a way of reaching me, and
   what it is the right channel for. <dt>/<dd> pairs keep that relationship in
   the markup rather than only in the styling. */
body.site-info-page .site-info-methods {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  max-width: 62rem;
}

body.site-info-page .site-info-methods > div {
  display: grid;
  gap: 0.18rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--tcb-line);
  border-radius: 0.65rem;
  background: var(--tcb-surface-strong);
}

body.site-info-page .site-info-methods dt {
  color: var(--text);
  font-weight: 600;
  font-size: 0.97rem;
}

body.site-info-page .site-info-methods dd {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* The email address is long enough to push a phone into horizontal scroll if it
   is allowed to stay one unbroken token. */
body.site-info-page .site-info-email {
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

/* ---- the bio on /about/ ------------------------------------------------
   FLEX, not grid, and that is the whole trick — the same one `.tb-detail-row`
   plays in team-build-card.css. The portrait is optional markup: with it the
   row is portrait + copy, without it the copy is the only item and fills the
   row on its own. A two-column grid cannot do that; it would hold a 9.5rem
   column of nothing open whenever the image was absent.

   It needs no stacking breakpoint for the same reason. `flex: 1 1 18rem` on the
   copy means the row wraps itself once there is no longer 18rem beside the
   portrait, so the phone layout is the desktop one running out of room rather
   than a second layout to keep in step. */
body.site-info-page .site-info-bio {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: flex-start;
}

body.site-info-page .site-info-bio-copy {
  display: grid;
  gap: 0.8rem;
  flex: 1 1 18rem;
}

/* A fixed square rather than a share of the row: it is a head-and-shoulders
   crop, so a width that tracked the container would render the face postage-
   stamp sized on a wide screen. aspect-ratio + object-fit means a source image
   that is not perfectly square still fills the box instead of letterboxing. */
body.site-info-page .site-info-bio-portrait {
  flex: 0 0 auto;
  width: 9.5rem;
  /* `height: auto` is LOAD-BEARING, not tidiness. The <img> carries width and
     height attributes (512/512) so the browser can reserve the box before the
     file lands, and those attributes apply as presentational hints. The CSS
     width above overrides the width hint, but nothing was overriding the HEIGHT
     hint — and an explicit height beats aspect-ratio, so the portrait rendered
     152px wide by 512px tall until this line existed. Removing the attributes
     would also "fix" it, at the cost of the layout shift they prevent. */
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--tcb-line-strong);
  border-radius: 0.8rem;
  background: var(--tcb-bg);
  object-fit: cover;
}

@media (max-width: 860px) {
  body.site-info-page .site-info-section {
    gap: 0.7rem;
  }

  body.site-info-page .site-info-section p,
  body.site-info-page .site-info-list {
    font-size: 0.94rem;
  }
}

/* =============================================================================
   SITE THEME (dark) — /about/ and /contact/
   -----------------------------------------------------------------------------
   feature-page.css paints every page it styles with literals from before the
   shared palette existed. /support/ and /kingdom-codes/ override them in their
   own sheets; these are the same overrides for this pair.

   Guarded with `:root:not([data-theme="light"])` rather than left to lose to
   the light rules on specificity: several of these would outrank the light
   theme's `:root[data-theme="light"] .premium-glass` if they were not, and
   the guard means the light theme is exactly what it was.
   ========================================================================== */
:root:not([data-theme="light"]) body.site-info-page {
  --text: var(--tcb-ink);
  --text-soft: var(--tcb-ink-soft);
  --line: var(--tcb-line);
  color: var(--tcb-ink);
  /* Replaces feature-page.css's maroon-and-magenta glow. */
  background: var(--tcb-page-backdrop);
  background-attachment: fixed;
}

/* Panels: the raised dark surface, one hairline edge. The per-section accent
   borders (cyan, gold, pink, violet) and the glass blur go. */
:root:not([data-theme="light"]) body.site-info-page .premium-glass {
  border: 1px solid var(--tcb-line);
  background: linear-gradient(150deg, var(--tcb-surface), var(--tcb-surface-strong));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--tcb-shadow);
}

/* The hero, with the head cookie on its right: /support/'s frame, with a
   brand-tinted falloff where the art sits. */
:root:not([data-theme="light"]) body.site-info-page .site-info-hero {
  background:
    radial-gradient(circle at 88% -10%, rgba(154, 114, 255, 0.26) 0, transparent 52%),
    linear-gradient(135deg, var(--tcb-surface), var(--tcb-surface-strong) 56%, #130f22);
}

:root:not([data-theme="light"]) body.site-info-page .site-info-section h2 {
  color: var(--tcb-ink);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: none;
}

/* alpha-release.css's amber pill, in the brand's violet. */
:root:not([data-theme="light"]) body.site-info-page .alpha-page-status {
  border-color: var(--tcb-line-strong);
  background: var(--tcb-surface-strong);
  color: var(--tcb-brand-strong);
}

:root:not([data-theme="light"]) body.site-info-page .site-info-methods dt {
  color: var(--tcb-ink);
}

/* The head cookie's placement. The column is 68rem at most, so the art is
   sized against that rather than the 1600px header the shared default
   assumes; on a phone it sits smaller and higher, behind the scrim the
   shared hero puts under the copy. */
body.site-info-page .site-info-hero {
  --tcb-hero-art-width: min(17rem, 34%);
  --tcb-hero-art-right: -0.8rem;
  --tcb-hero-art-shift-y: -50%;
  --tcb-hero-art-width-mobile: min(10.5rem, 42%);
  --tcb-hero-art-top-mobile: 0.4rem;
  --tcb-hero-art-shift-y-mobile: -28%;
  --tcb-hero-art-right-mobile: -0.4rem;
}

/* =============================================================================
   LIGHT THEME — /about/ and /contact/
   Only on pages that opted in (see the LIGHT THEME block in shared-shell.css).
   The headings, copy and panels already follow the tokens; these are the
   literals: the cyan links and markers, and the translucent dark tiles.
   ========================================================================== */
:root[data-theme="light"] body.site-info-page .site-info-list li::marker {
  color: rgba(106, 63, 220, 0.6);
}

:root[data-theme="light"] body.site-info-page .site-info-note {
  border-left-color: var(--tcb-brand);
  background: var(--tcb-surface-strong);
}

:root[data-theme="light"] body.site-info-page .site-info-section a {
  color: var(--tcb-brand);
  text-decoration-color: rgba(106, 63, 220, 0.45);
}

:root[data-theme="light"] body.site-info-page .site-info-section a:hover,
:root[data-theme="light"] body.site-info-page .site-info-section a:focus-visible {
  color: var(--tcb-jam);
  text-decoration-color: rgba(201, 45, 100, 0.6);
}

:root[data-theme="light"] body.site-info-page .site-info-link,
:root[data-theme="light"] body.site-info-page .site-info-methods > div {
  border: 2px solid var(--tcb-line);
  background: var(--tcb-surface-strong);
}

:root[data-theme="light"] body.site-info-page .site-info-link:hover,
:root[data-theme="light"] body.site-info-page .site-info-link:focus-visible {
  border-color: var(--tcb-brand);
  background: var(--tcb-surface);
  box-shadow: 0 3px 0 var(--tcb-ledge);
}

:root[data-theme="light"] body.site-info-page .site-info-link-name {
  color: var(--tcb-brand);
}

:root[data-theme="light"] body.site-info-page .site-info-bio-portrait {
  border-color: var(--tcb-line-strong);
  background: var(--tcb-surface-strong);
}