/* ==========================================================================
   YOUBEI / TOUCHLINE — scene.css
   Layer 4 of 4: page views — home, fixtures, squad, league, brand,
   news, join, desk, about, contact, 404
   ========================================================================== */

@layer views {
  /* ------------------------------------------------------------------- home */
  /* the art column stacks the pitch, then a scoreboard that hangs below the
     frame — nothing decorative ever covers a player pin or a pitch label. */
  .yb-hero__art {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .yb-hero__art .yb-pitch { height: auto; flex: 0 0 auto; }
  .yb-hero__board {
    position: relative;
    left: -18px;
    width: min(330px, 78%);
    margin-top: 16px;
    z-index: 3;
  }
  .yb-stamp {
    position: absolute;
    right: 0;
    bottom: 2px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--ref);
    background: rgba(4, 23, 15, 0.82);
    color: var(--ref);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-9deg);
  }
  .yb-stamp b {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--chalk);
  }
  .yb-hero__art .yb-pin { z-index: 2; }

  .yb-home-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--ink);
  }
  .yb-home-lanes article {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 26px 24px 28px;
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    transition: background 0.18s ease;
  }
  .yb-home-lanes article:last-child { border-right: 0; }
  .yb-home-lanes article:hover { background: rgba(255, 212, 81, 0.16); }
  .yb-home-lanes h3 { font-size: 1.1rem; }
  .yb-home-lanes p { font-size: 0.86rem; }
  .yb-home-lanes em {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--flag);
  }
  .yb-home-lanes a {
    justify-self: start;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ref);
  }
  .yb-home-lanes a:hover { border-color: var(--flag); }

  .yb-matchband {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
  }
  .yb-matchband__copy { display: grid; gap: 12px; align-content: start; }
  .yb-matchband__copy h2 { font-size: var(--step-3); }

  /* --------------------------------------------------------------- fixtures */
  .yb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
  .yb-filter button {
    padding: 7px 14px;
    border: 1px solid var(--hair-strong);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  }
  .yb-filter button:hover { border-color: var(--turf-700); color: var(--turf-800); }
  .yb-filter button.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ref);
  }
  .yb-filter-note {
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--turf-700);
  }

  /* ------------------------------------------------------------------ squad */
  .yb-squad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .yb-squad .yb-person { align-content: start; }
  .yb-squad-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }

  /* ----------------------------------------------------------------- league */
  .yb-rounds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .yb-round {
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--hair);
    border-top: 3px solid var(--flag);
  }
  .yb-round h3 { font-size: 1rem; }
  .yb-round ol { display: grid; gap: 7px; }
  .yb-round li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    font-size: 0.84rem;
    color: var(--ink-2);
    padding-bottom: 7px;
    border-bottom: 1px dashed var(--hair);
  }
  .yb-round li span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--turf-700);
  }
  .yb-round--alt { border-top-color: var(--turf-700); }

  /* ------------------------------------------------------------------ brand */
  .yb-cases {
    display: grid;
    gap: 0;
    border-top: 2px solid var(--ink);
  }
  .yb-case {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 240px;
    gap: 26px;
    align-items: start;
    padding: 26px 4px;
    border-bottom: 1px solid var(--hair);
  }
  .yb-case__year {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--turf-700);
  }
  .yb-case__body { display: grid; gap: 6px; }
  .yb-case__body h3 { font-size: 1.04rem; }
  .yb-case__body p { font-size: 0.86rem; }
  .yb-case__stat {
    display: grid;
    gap: 4px;
    padding-left: 22px;
    border-left: 1px dashed var(--hair-strong);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--turf-700);
  }
  .yb-case__stat b {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    color: var(--flag);
    letter-spacing: 0;
  }

  /* ------------------------------------------------------------------- news */
  .yb-news-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    border: 2px solid var(--ink);
    margin-bottom: 34px;
  }
  .yb-news-lead__art {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 280px;
    padding: 26px;
    background:
      repeating-linear-gradient(135deg, rgba(238, 243, 228, 0.06) 0 12px, transparent 12px 24px),
      var(--turf-900);
    color: var(--chalk);
    overflow: hidden;
  }
  .yb-news-lead__art::before {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 210px;
    height: 210px;
    border: 2px solid var(--hair-chalk);
    border-radius: 50%;
  }
  .yb-news-lead__art span {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--ref);
    text-transform: uppercase;
  }
  .yb-news-lead__art strong {
    position: relative;
    margin-top: 8px;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--chalk);
  }
  .yb-news-lead__body {
    display: grid;
    gap: 10px;
    align-content: center;
    padding: 30px;
    background: var(--paper);
  }
  .yb-news-lead__body p { font-size: 0.9rem; }
  .yb-news-lead__body h2 { font-size: var(--step-2); }
  .yb-news-lead__body a {
    justify-self: start;
    margin-top: 4px;
    font-size: 0.84rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ref);
  }

  .yb-toc {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--hair);
    border-top: 3px solid var(--turf-700);
    background: var(--paper);
  }
  .yb-toc h3 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--turf-800);
  }
  .yb-toc ul { display: grid; gap: 8px; font-size: 0.84rem; }
  .yb-toc a:hover { color: var(--flag); }
  .yb-toc p { font-size: 0.78rem; }

  /* -------------------------------------------------------------------- join */
  .yb-join {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
    align-items: start;
  }
  .yb-join__aside {
    display: grid;
    gap: 18px;
  }
  .yb-join__steps {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--hair);
  }
  .yb-join__steps li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
    font-size: 0.84rem;
    color: var(--ink-2);
  }
  .yb-join__steps span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--flag);
  }

  /* -------------------------------------------------------------------- desk */
  .yb-desk {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
  }
  .yb-desk__form { display: grid; gap: 16px; }
  .yb-desk__side { display: grid; gap: 18px; }

  /* ------------------------------------------------------------------- about */
  .yb-milestones {
    display: grid;
    gap: 0;
    border-left: 2px solid var(--hair-strong);
    padding-left: 26px;
  }
  .yb-milestones li {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 0;
    font-size: 0.88rem;
    color: var(--ink-2);
  }
  .yb-milestones li::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 20px;
    width: 10px;
    height: 10px;
    background: var(--ref);
    border: 2px solid var(--ink);
    border-radius: 50%;
  }
  .yb-milestones span {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--turf-700);
  }
  .yb-milestones b { color: var(--ink); }

  /* ----------------------------------------------------------------- contact */
  .yb-contact-map {
    position: relative;
    min-height: 260px;
    border: 1px solid var(--hair);
    background:
      linear-gradient(180deg, transparent 0 49.6%, var(--hair) 49.6% 50.4%, transparent 50.4%),
      linear-gradient(90deg, transparent 0 49.6%, var(--hair) 49.6% 50.4%, transparent 50.4%),
      repeating-linear-gradient(0deg, rgba(21, 90, 65, 0.12) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(90deg, rgba(21, 90, 65, 0.12) 0 1px, transparent 1px 44px),
      var(--paper-2);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .yb-contact-map span {
    padding: 8px 14px;
    background: var(--ink);
    color: var(--ref);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* --------------------------------------------------------------------- 404 */
  .yb-404 {
    min-height: 62vh;
    display: grid;
    place-items: center;
    padding-block: 70px;
    text-align: center;
  }
  .yb-404__box { display: grid; gap: 18px; justify-items: center; max-width: 620px; }
  .yb-404__code {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 14vw, 9rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: var(--turf-800);
    position: relative;
  }
  .yb-404__code::after {
    content: "OFFSIDE";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--flag);
  }
  .yb-404 p { font-size: 0.94rem; }
  .yb-404 .yb-acts { justify-content: center; }

  /* ------------------------------------------------------------- responsive */
  @media (max-width: 1080px) {
    .yb-squad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yb-rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yb-case { grid-template-columns: 90px minmax(0, 1fr); }
    .yb-case__stat { grid-column: 2; border-left: 0; padding-left: 0; }
    .yb-matchband { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  }

  @media (max-width: 860px) {
    .yb-home-lanes { grid-template-columns: 1fr; }
    .yb-home-lanes article { border-right: 0; }
    .yb-matchband { grid-template-columns: 1fr; }
    .yb-join,
    .yb-desk { grid-template-columns: 1fr; gap: 30px; }
    .yb-news-lead { grid-template-columns: 1fr; }
    .yb-news-lead__art { min-height: 200px; }
    .yb-hero__board { left: -8px; width: min(330px, 100%); margin-top: 14px; }
    /* the round stamp is decorative only — dropped before it can crowd the
       scoreboard on narrow screens */
    .yb-stamp { display: none; }
  }

  @media (max-width: 620px) {
    .yb-squad { grid-template-columns: 1fr; }
    .yb-rounds { grid-template-columns: 1fr; }
    .yb-home-lanes article { padding: 20px 0; }
    .yb-case { grid-template-columns: 1fr; gap: 8px; }
    .yb-case__stat { grid-column: 1; }
    .yb-news-lead__body { padding: 22px; }
    .yb-404__code::after { letter-spacing: 0.24em; }
  }
}