/* pitch-partners.css: the partners page on the homepage's mowed pitch.

   The owner liked the homepage sectioning (pitch.css) and asked for it on
   every page, each a little different. The recipe is the same everywhere:
   one striped night pitch painted once behind the whole page, the light
   bands as rounded panels standing on it with grass between them, and the
   night bands, the head and the close standing straight on the grass.

   This page's own touch is the corner flag. A chalk quarter circle sits
   in the grass under each lower corner of a light panel, as it does at the
   corner of a pitch, and a short chalk touchline runs down from the foot
   of each panel to the next section, with a small orange flag where it
   leaves the panel.

   Each panel is painted by the section's ::before, set back from the
   section's own box, so nothing inside a section moves and the orange route
   that partners.js measures down the page keeps its place. The pitch is
   painted on html and body stays clear, so the panels can sit behind the
   words with a negative z-index and the route still runs over them.
   Loaded after partners.css, and it only overrides. */

:root {
  --mow-a: var(--page-ground);
  --mow-b: #112818;
  --mow-h: 128px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(10px, 2.8vw, 48px);
  --gap: clamp(36px, 4.8vw, 76px);
  /* The corner arc's radius, kept under the gap so it never meets the
     panel below. */
  --arc: calc(var(--gap) * 0.8);
  /* How far in from the panel's right edge the touchline runs. */
  --line-x: clamp(44px, 7vw, 120px);
}

html {
  background-color: var(--mow-a);
  /* The mown stripes were taken off on 2026-09-16 at the owner's word:
     the ground is one plain night green. */
  background-image: none;
  scrollbar-color: var(--pale) var(--mow-a);
}
body { background: transparent; color: var(--cream); }

/* On a narrow screen the words keep their distance from the panel's side
   as well as from the screen's. */
main { --inset: max(calc(var(--gutter) + var(--fg)), calc(50vw - var(--maxw) / 2 + var(--gutter))); }

/* ---- The head, the night bands and the close stand on the grass ---- */

.desk,
.sec--deep { background: transparent; }
.desk .tab--hero { background: transparent; }

/* ---- The light bands turn into panels ---- */

.sec:not(.sec--deep) { background: transparent; }
.sec:not(.sec--deep)::before,
.sec:not(.sec--deep)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.sec:not(.sec--deep)::before {
  inset: calc(var(--gap) / 2) var(--fg);
  background: var(--band);
  border-radius: var(--panel-r);
}

/* The chalk in the grass under a panel, in one box as wide as the panel
   that reaches down to the next section:
     two corner arcs, quarter circles centred on the panel's lower corners
     the touchline, from the panel's foot to the next section
     the flag, an orange dot where the touchline leaves the panel */
.sec:not(.sec--deep)::after {
  inset: auto var(--fg) calc(-1 * var(--gap) / 2);
  /* 6px taller than the gap, so the whole flag shows over the panel's edge. */
  height: calc(var(--gap) + 6px);
  --ring: transparent calc(var(--arc) - 2px), var(--chalk-line) calc(var(--arc) - 2px) var(--arc), transparent calc(var(--arc) + 0.5px);
  background:
    radial-gradient(circle 5px at calc(100% - var(--line-x)) 6px, var(--orange) 0 4.5px, transparent 5px),
    radial-gradient(circle var(--arc) at 0 0, var(--ring)) left 0 top 6px / var(--arc) var(--arc) no-repeat,
    radial-gradient(circle var(--arc) at 100% 0, var(--ring)) right 0 top 6px / var(--arc) var(--arc) no-repeat,
    linear-gradient(var(--chalk-line), var(--chalk-line)) right calc(var(--line-x) - 1px) top 6px / 2px var(--gap) no-repeat;
}

/* Plates and pictures inside a panel get corners too, so nothing hard
   edged sits inside a rounded panel. */
.plate--deep { border-radius: clamp(12px, 1.3vw, 20px); }
.well { border-radius: 12px; overflow: clip; }
/* A station's tab keeps a square left side where the arm meets it. */
.stn .tab { border-radius: 0 10px 10px 0; }

/* ---- The close and the foot ---- */

.closing { padding-bottom: calc(var(--sec-pad) * 0.7); }
.foot {
  position: relative;
  background: transparent;
  border-top: 0;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}

@media (max-width: 600px) {
  :root { --mow-h: 96px; --panel-r: 16px; --line-x: 56px; }
}