/* Full-bleed scroll sections. Loaded after page.css, which still owns the
   components inside them -- this file only takes over the frame: how wide a
   section runs, how tall it stands, and what it does at the top of the page. */

/* .shell used to be the single wrapper around the whole document and subtracted
   the gutter itself. Sections now carry their own padding, so it only measures. */
.shell {
  width: min(100%, 46rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: var(--space-3);
  z-index: calc(var(--z-nav) + 1);
  transform: translateY(-200%);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip:focus-visible { transform: none; }

/* ---- masthead ---- */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding: var(--space-3) var(--gutter);
  /* Tucked in tighter than the gutter on the leading edge. The bar is a small
     persistent mark rather than a column of content, so it does not owe the
     hero wordmark below it the same measure. */
  padding-inline-start: var(--space-4);
  border-bottom: 1px solid var(--rule);
  /* The bar sits over 25 result rows on the way past, so it needs to carry its
     own background rather than trust whatever is sliding underneath it. */
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px);
}
.masthead__crest { width: 42px; height: 42px; }
/* Demoted from h1 -- the hero wordmark is the page heading now -- so it no
   longer picks up the display face from base.css and has to ask for it. */
.masthead__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
}

.hero__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__crestbox {
  position: absolute;
  top: 44%;
  /* Sat at -6vw it hung off the right edge and lost a slice of the rim. Pulled
     back inside the frame, still right of the wordmark. */
  right: 9vw;
  translate: 0 -50%;
  /* Vector now, so it can be sized for the composition rather than held near
     the old raster's 377px. The vw term keeps it shrinking on narrower desktops
     where the wordmark is closing in from the left. */
  width: min(52vw, 30rem);
  aspect-ratio: 1;
}
.hero__crest {
  width: 100%;
  height: auto;
}

/* The crest is a seal, so it turns like a disc rather than tilting like a
   picture -- and a flat badge turning in its own plane never foreshortens away
   to nothing, which is exactly what sank the 3D version. */
@keyframes crest-turn { to { rotate: 360deg; } }
.hero__crest {
  animation: crest-turn 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__crest { animation: none; }
}

.hero__inner {
  align-self: end;
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) var(--space-6);
}

.hero__wordmark {
  font-size: var(--step-5);
  line-height: 0.82;
  letter-spacing: -0.015em;
}
.hero__line { display: block; }
/* Caps then serif italic, the two faces the crest was sampled for: Oswald
   answers the arched badge lettering, Source Serif the high-contrast V. */
.hero__line--alt {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.03em;
  padding-left: 0.06em;
}
.hero__meta {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* ---- marquee ---- */
.hero__marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  padding-block: var(--space-3);
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0.5em;
}
.marquee__group i {
  font-style: normal;
  opacity: 0.45;
  padding-inline: 0.4em;
}

/* ---- manifesto ---- */
.manifesto {
  padding: clamp(var(--space-8), 20vh, 12rem) var(--gutter);
}
.manifesto__text {
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* ---- section frames ----
   page.css sized these for a 46rem column inside a single wrapper. They run
   edge to edge now, so the padding moves out here and the measure moves in. */
.next {
  margin-block: 0;
  padding: clamp(var(--space-7), 14vh, 9rem) var(--gutter);
}
.panel {
  padding: clamp(var(--space-7), 10vh, 6rem) var(--gutter);
}
.footer {
  padding: var(--space-7) var(--gutter) var(--space-8);
}

@media (min-width: 40rem) {
  .next { padding-inline: var(--gutter); }
}

/* Below this the crest and the wordmark want the same corner, so the crest
   steps back and becomes a watermark instead of an object. */
@media (max-width: 48rem) {
  .hero__crestbox {
    top: 42%;
    right: 50%;
    translate: 50% -50%;
    width: min(88vw, 22rem);
    opacity: 0.16;
  }
}

/* ---- results timeline ----
   The same contract the card deck had. Everything here hangs off .is-active,
   which scripts/motion.js adds only when motion is allowed and the library has
   loaded. Without it this section is the plain vertical list, which is what a
   reduced-motion request, a failed script and a screen reader all get. The
   markup stays an untouched <ul> of <li> either way: the stems, markers and
   line are pseudo-elements, so the timeline is a layer over a real list,
   never a replacement for one. */
.timeline__track {
  width: min(100%, 46rem);
  margin-inline: auto;
}
.timeline__intro { margin-bottom: var(--space-5); }
.timeline__title { margin-bottom: var(--space-2); }
.timeline__period {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.timeline__hint {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.timeline__photo {
  max-width: min(100%, 24rem);
  margin-bottom: var(--space-6);
}
.timeline__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Timeline-only details. The list gets the year from its dividers and has no
   column to spare for the ground. */
.result__year,
.result__meta { display: none; }

.timeline.is-active {
  height: 100svh;
  padding: 0;
  overflow: clip;
}
.timeline.is-active .timeline__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  width: max-content;
  height: 100%;
  margin: 0;
  /* Starts in line with the column the rest of the page is set to. The long
     tail lets the oldest games travel past the point where the line draws,
     instead of stalling half revealed against the edge of the screen. */
  padding-inline: max(var(--gutter), calc((100vw - 46rem) / 2)) 45vw;
  will-change: transform;
}
.timeline.is-active .timeline__intro {
  flex: none;
  width: min(76vw, 21rem);
  margin: 0;
}
/* In the list the heading is a small label like Record's. Here it opens a set
   piece, so it takes the size the original design gives it. */
.timeline.is-active .timeline__title {
  font-size: var(--step-4);
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.timeline.is-active .timeline__hint {
  margin-top: var(--space-4);
  max-width: 26ch;
  font-size: var(--step-0);
}

/* The squad, stood as tall as the results beside it. Width comes from the
   ratio rather than the loaded image, so the track measures correctly before
   the photo has arrived. */
.timeline.is-active .timeline__photo {
  flex: none;
  /* The third term caps the width at 86vw on a phone (105vw tall at this
     ratio), or a tall screen stands the poster wider than the screen and it
     can never be seen whole. */
  height: min(60svh, 32rem, 105vw);
  aspect-ratio: 851 / 1040;
  max-width: none;
  margin: 0;
}
.timeline.is-active .timeline__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.timeline.is-active .timeline__list {
  --col: clamp(14.5rem, 72vw, 22rem);
  flex: none;
  height: min(60svh, 32rem);
}
.timeline.is-active .results {
  position: relative;
  display: flex;
  height: 100%;
}
/* The line, drawn by scaling on --rail. Crest gold, the one place it appears
   outside the badge. */
.timeline.is-active .results::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--accent-line);
  transform: scaleX(var(--rail, 1));
  transform-origin: left center;
}

/* Games alternate above and below the line, each column overlapping the last
   by half, so the two rows interleave instead of queueing single file.
   "of .result" counts cards only, so a year divider between two games does
   not flip the alternation. */
.timeline.is-active .result {
  position: relative;
  flex: none;
  width: var(--col);
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "date  date"
    "score mark"
    "opp   opp"
    "meta  meta";
  align-content: start;
  justify-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding: 0 var(--space-4);
  border: 0;
  /* The reveal fades cards in on their own. Here the card holds still and the
     timeline animates what is inside it, or the two would stack. */
  opacity: 1;
  transform: none;
  transition: none;
}
/* A divider after a game steps back half a column; the game after a divider
   then takes no step of its own. A divider at the very start steps back from
   nothing, or it drags the newest result into the heading. */
.timeline.is-active .result + .result,
.timeline.is-active .result + .results__year { margin-left: calc(var(--col) / -2); }
.timeline.is-active .result:nth-child(even of .result) { align-content: end; }

/* Stem, from the card to the line, grown on --stem. */
.timeline.is-active .result::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 50%;
  width: 1px;
  background: var(--accent-line);
  transform: scaleY(var(--stem, 1));
  transform-origin: 50% 100%;
}
.timeline.is-active .result:nth-child(even of .result)::before {
  top: 50%;
  bottom: 0.4rem;
  transform-origin: 50% 0;
}

/* Marker at the far end of the stem, beside the date. A diamond rather than
   the original's dot: the crest is the only circle in this system, and the
   four-pointed star on the badge and shirt is already a diamond.
   Filled for a win, hollow for a draw, hollow and muted for a loss, so the
   outcome never rests on colour. */
.timeline.is-active .result::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: -0.35rem;
  border: 1.5px solid var(--accent-line);
  background: var(--surface);
  transform: rotate(45deg) scale(var(--dot, 1));
}
.timeline.is-active .result:nth-child(even of .result)::after { top: auto; bottom: 0; }
.timeline.is-active .result--won::after { background: var(--accent-line); }
.timeline.is-active .result--lost::after { border-color: var(--text-muted); }

.timeline.is-active .result__date {
  grid-area: date;
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.timeline.is-active .result__score {
  grid-area: score;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1;
}
.timeline.is-active .result__mark {
  grid-area: mark;
  align-self: center;
  width: 1.9rem;
}
.timeline.is-active .result__opponent {
  grid-area: opp;
  font-size: var(--step-1);
  line-height: 1.2;
}
.timeline.is-active .result__meta {
  grid-area: meta;
  display: block;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-muted);
}

/* Year dividers become labels sitting on the line. The item takes no width, so
   the next game keeps its normal spacing and the label lands on the line just
   before that game's stem. */
.timeline.is-active .results__year {
  position: relative;
  flex: none;
  width: 0;
  height: 100%;
  padding: 0;
  border: 0;
}
.timeline.is-active .results__year > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--space-3);
  translate: 0 -50%;
  padding-inline: var(--space-2);
  background: var(--surface);
}