/* ==========================================================================
   facelevel.com inner pages (/face-level-sports/, /about/, 404) in the
   Redline world. Loads after redline.css, which it never overrides for the
   homepage: it only adds what long-form pages need. A solid HUD, a page head,
   a reading column, the timing tower as a contents rail, FAQ plates.
   ========================================================================== */

.hud--solid { background: rgba(10, 11, 13, 0.96); box-shadow: 0 1px 0 var(--line); }
.hud__menu a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.hud__menu a.is-shop[aria-current="page"] { background: var(--ink); color: var(--fl); box-shadow: inset 0 0 0 2px var(--fl); }

.page { padding: calc(var(--hud-h) + 40px) var(--gut) 0; }

/* breadcrumb trail */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 22px; color: var(--mute); font-size: 12px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #5d636c; }
.crumbs a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.crumbs a:hover { color: var(--fl); }

/* page head */
.phead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: end; padding-bottom: 64px; }
.phead--solo { grid-template-columns: minmax(0, 1fr); }
.phead__title {
  font-weight: 900; font-style: italic; font-stretch: 125%;
  font-size: clamp(2.6rem, 5.6vw, 6rem); line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--paper); text-wrap: balance;
}
.phead__title em { font-style: inherit; color: var(--fl); }
.phead__lead { margin-top: 24px; max-width: 40ch; font-weight: 650; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; text-wrap: pretty; }
.phead .lower-third { margin-top: 26px; }
.phead .cam { aspect-ratio: 4 / 3; }

/* the short answer: a white plate up front, for the reader in a hurry */
.answer { max-width: 980px; margin-bottom: 72px; padding: 24px clamp(20px, 2.6vw, 32px) 26px; background: var(--paper); color: var(--ink); box-shadow: inset 6px 0 0 var(--fl); }
.answer__label { display: block; font-size: 12px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); }
.answer p { margin-top: 10px; max-width: 72ch; font-weight: 650; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.answer a { color: inherit; text-decoration-color: var(--ink); text-underline-offset: 3px; }

/* the four-part test */
.test { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-bottom: 96px; counter-reset: test; }
.test li { counter-increment: test; padding: 18px 20px 22px; background: var(--ink-3); box-shadow: inset 0 3px 0 var(--fl); }
.test li::before { content: counter(test, decimal-leading-zero); display: block; color: var(--fl); font-weight: 900; font-style: italic; font-stretch: 125%; font-size: 15px; }
.test b { display: block; margin-top: 6px; font-weight: 900; font-style: italic; font-stretch: 125%; font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.test span { display: block; margin-top: 8px; color: #cfd3d9; font-size: 15px; line-height: 1.45; }

/* guide: the tower is the contents rail, the sports run down the page */
.guide { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; }
.guide__rail { position: sticky; top: calc(var(--hud-h) + 16px); align-self: start; min-width: 0; }
.guide__rail .tower { width: 100%; }
.guide__rail .trow { cursor: pointer; }
.guide__body { min-width: 0; max-width: 1040px; }

.gsport { scroll-margin-top: calc(var(--hud-h) + 16px); }
.gsport + .gsport { margin-top: 88px; }
.gsport .sport__bar h2 {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 6px 22px 4px;
  background: var(--ink-3);
  font-weight: 900; font-style: italic; font-stretch: 125%; font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
}
.gsport__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.gsport__grid > .cam { aspect-ratio: auto; min-height: 320px; }
.gsport__grid > .cam img { position: absolute; inset: 0; }
.gsport__grid > .cam.cam--archive { min-height: 0; }
.gsport__grid > .cam.cam--archive img { position: relative; }
/* a tall flyer crop takes only its own width (--w), like the homepage stage */
.gsport__grid:has(.cam--tall) { grid-template-columns: auto minmax(0, 1fr); }
.gsport .prose { margin-top: 28px; }
.gsport .tiles { align-content: start; }
.gsport .tile dd { font-size: 17px; }
.gsport .tile dd a { color: inherit; text-underline-offset: 3px; }
.gsport__go { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 24px; }

/* reading column */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { font-size: 18px; line-height: 1.6; color: #e3e6ea; text-wrap: pretty; }
.prose b, .prose strong { color: var(--paper); font-weight: 800; }
.prose a { color: var(--fl); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose h3 { margin-top: 1.8em; font-weight: 850; font-size: 17px; line-height: 1.25; letter-spacing: 0.04em; font-stretch: 112%; text-transform: uppercase; color: var(--paper); }
.prose ul { padding-left: 1.2em; list-style: square; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--fl); }

/* full-width bands under the head */
.band { padding: 96px var(--gut); }
.band--ink2 { background: var(--ink-2); }
.band--ink3 { background: var(--ink-3); }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

/* family list (relatives / not face level) */
.kin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 28px; max-width: 1240px; }
.kin li { padding: 18px 20px 20px; background: var(--ink); }
.band--ink3 .kin li { background: var(--ink-2); }
.kin b { display: block; font-weight: 900; font-style: italic; font-stretch: 125%; font-size: 20px; text-transform: uppercase; }
.kin span { display: block; margin-top: 8px; color: #cfd3d9; font-size: 16px; line-height: 1.5; }
.kin a { color: var(--fl); text-underline-offset: 3px; }
.kin--no li { box-shadow: inset 3px 0 0 #5d636c; }

/* FAQ plates */
.faq { display: grid; gap: 2px; max-width: 1040px; }
.faq__item { padding: 22px clamp(20px, 2.4vw, 28px) 24px; background: var(--ink-3); }
.band--ink3 .faq__item { background: var(--ink); }
.faq__item h3 { font-weight: 900; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; }
.faq__item p { margin-top: 10px; max-width: 72ch; color: #cfd3d9; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.faq__item a { color: var(--fl); text-underline-offset: 3px; }

/* sources */
.srcs { max-width: 1040px; margin-top: 56px; counter-reset: src; }
.srcs h2 { font-weight: 850; font-size: 13px; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.srcs ol { display: grid; gap: 6px; margin-top: 14px; }
.srcs li { counter-increment: src; display: grid; grid-template-columns: 2.4em 1fr; color: #8f96a0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.srcs li::before { content: counter(src) "."; color: #5d636c; font-weight: 800; }
.srcs a { color: #cfd3d9; text-underline-offset: 2px; }
.srcs a:hover { color: var(--fl); }

/* founder block on /about/ */
.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.founder .cam { aspect-ratio: 1; }
.founder .cam img { position: absolute; inset: 0; }
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.record .tile { --team: var(--fl); }
.record .tile dd { font-size: 16px; }

/* timeline reuse: the homepage lap marks, without the trace */
.lap__marks--page { margin-top: 0; }

/* closing call to the shop */
.pitlane { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 40px var(--gut); background: var(--ink-2); box-shadow: inset 0 6px 0 var(--fl); }
.pitlane p { max-width: 46ch; font-weight: 650; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; }
.pitlane p b { color: var(--fl); font-weight: 900; }
.pitlane .shop__actions { flex: none; }

/* 404 */
.lost { min-height: 72svh; display: grid; align-content: center; padding-bottom: 64px; }
.lost .archive__links { max-width: 560px; }

@media (max-width: 1100px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .guide__rail { position: sticky; top: var(--hud-h); z-index: 20; margin: 0 calc(-1 * var(--gut)); padding: 8px var(--gut); background: rgba(10, 11, 13, 0.96); box-shadow: 0 1px 0 var(--line); }
  .guide__rail .tower { background: transparent; box-shadow: none; }
  .guide__rail .tower__head { display: none; }
  .guide__rail .tower__rows {
    display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .guide__rail .tower__rows::-webkit-scrollbar { display: none; }
  .guide__rail .tower__rows li { flex: none; }
  .guide__rail .trow { width: auto; grid-template-columns: auto 6px auto; height: 42px; padding: 0 14px 0 10px; background: var(--ink-3); border: 0; scroll-snap-align: start; }
  .guide__rail .trow__el { display: none; }
  .guide__rail .trow.is-on { background: var(--paper); color: var(--ink); }
  .gsport { scroll-margin-top: calc(var(--hud-h) + 74px); }
  .test { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .phead, .band__grid, .founder { grid-template-columns: minmax(0, 1fr); }
  .gsport__grid, .gsport__grid:has(.cam--tall) { grid-template-columns: minmax(0, 1fr); }
  .gsport__grid > .cam { min-height: 0; aspect-ratio: 16 / 10; }
  .gsport__grid > .cam.cam--archive { aspect-ratio: auto; }
  .founder .cam { max-width: 520px; }
  .kin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page { padding-top: calc(var(--hud-h) + 28px); }
  .phead { padding-bottom: 48px; }
  .phead__title { font-size: calc((100vw - 2 * var(--gut)) / 7.4); font-stretch: 112%; }
  .answer { margin-bottom: 56px; }
  .answer p { font-size: 17px; }
  .test { grid-template-columns: minmax(0, 1fr); margin-bottom: 72px; }
  .gsport .sport__bar h2 { padding: 8px 12px 6px; font-size: clamp(20px, 6vw, 28px); font-stretch: 112%; }
  .gsport + .gsport { margin-top: 64px; }
  .prose p, .prose li { font-size: 17px; }
  .band { padding: 72px var(--gut); }
  .record, .kin { grid-template-columns: minmax(0, 1fr); }
  .pitlane .shop__actions, .pitlane .shop__actions .btn { flex: 1 1 100%; }
}