/* site.css — the website pages.
 *
 * Everything at 3dflypass.com that is not the game itself: the front door, the
 * sport hubs, tournaments, /stadiums and the stories. The game has its own
 * styles inline in index.html and does not load this — it is fighting for every
 * kilobyte before the first frame and has no use for a webfont.
 *
 * ---- the look ----
 *
 * Black slate and glass. Every surface is the same thing: a pane of lit glass
 * lying on a dark deck — a few per cent of white, a hairline of white at its
 * edge, a highlight along its top and a blur of whatever is behind it. Nothing
 * is a box with a border any more.
 *
 * The amber stays. It is the colour the game's own clearance figures glow and
 * the one thing on either the site or the game that is allowed to be bright;
 * on black it does more work than it ever did on cream, so there is less of it.
 *
 * ---- one theme, on purpose ----
 *
 * This used to be a two-theme design: cream ground and navy ink by day, the
 * navy and cream swapped by night. A cream page is the wrong ground for glass —
 * a pane of white laid on white is a rectangle, not a pane — and the game it is
 * a front door for renders on a dark sky whatever the phone is set to. So the
 * site commits: one ground, dark, `color-scheme: dark` so the browser's own
 * controls come with it, and every colour written out rather than swapped.
 */

/* ---- tokens ------------------------------------------------------------ */
:root{
  color-scheme: dark;

  /* The deck. Slate rather than neutral black: it is the game's navy taken
     most of the way down, so the site and the thing it opens are plainly the
     same product. */
  --ground:#070c12;
  --ground-2:#0a121b;      /* the far end of the page gradient */
  --ink:#eff4f8;
  --ink-2:#9dafbe;         /* secondary text, biased slate — never a flat grey */
  --ink-3:#6c8190;

  /* Glass. Three depths of the same material: a pane, a pane sitting on a
     pane, and the hollow a recessed thing sits in. */
  --glass:rgba(255,255,255,.048);
  --glass-2:rgba(255,255,255,.075);
  --sunk:rgba(0,0,0,.30);
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.22);
  --lip:inset 0 1px 0 rgba(255,255,255,.07);   /* the highlight along a pane's top edge */
  --cast:0 18px 40px -22px rgba(0,0,0,.9);     /* what a pane throws on the deck */
  --blur:saturate(1.35) blur(16px);

  --sun:#ffb43d;
  --sun-ink:#10161d;       /* what sits on an amber-filled block */
  --sun-wash:rgba(255,180,61,.12);
  --sun-glow:rgba(255,180,61,.30);
  --live:#7fd6c2;
  --hot:#ff6a60;

  /* Rounding, in three sizes and one rule: the bigger the pane, the softer the
     corner. A button and the card it sits in cannot share a radius or the
     button reads as a chip of the card. */
  --r:20px;                /* cards, banners, panels */
  --r-sm:13px;             /* rows, tiles, small panes */
  --r-pill:999px;          /* buttons, tags, anything the size of a word */

  --display:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --page:1180px;
  --read:66ch;
  --gap:clamp(16px,2.6vw,26px);
}

/* ---- base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--ground);}
body{
  margin:0;color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* The deck is not flat: one warm glow up where the hero is, one cool one
     low and right, over a slate that lightens down the page. Fixed, so the
     glass has something that moves behind it as you scroll. */
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(255,180,61,.10), transparent 70%),
    radial-gradient(760px 620px at 92% 18%, rgba(70,130,180,.10), transparent 72%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 52%, var(--ground) 100%);
  background-attachment:fixed;
  background-color:var(--ground);
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--sun);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(18px,4vw,34px);}
.narrow{max-width:var(--read);}

h1,h2,h3,h4,.dsp{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;margin:0;text-wrap:balance;}
h1{font-size:clamp(40px,8.2vw,86px);}
h2{font-size:clamp(27px,4.2vw,42px);letter-spacing:-.03em;line-height:1.06;}
h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.022em;line-height:1.12;}
p{margin:0 0 1em;}
strong{font-weight:600;}

/* the instrument voice: labels, clearances, dates, scores */
.tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sun);margin:0 0 14px;}
.tag.quiet{color:var(--ink-3);}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---- header ------------------------------------------------------------ */
/* A pane of glass laid across the top of the page rather than a bar with a
   line under it: the deck shows through it and the page slides underneath. */
.top{position:sticky;top:0;z-index:20;
  background:rgba(10,16,23,.62);
  border-bottom:1px solid var(--edge);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}
@supports not (backdrop-filter:blur(1px)){ .top{background:rgba(8,13,19,.94);} }
.top .bar{display:flex;align-items:center;gap:clamp(14px,3vw,30px);
  min-height:64px;padding-top:8px;padding-bottom:8px;}
.brand{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.035em;
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;}
.brand .mk{display:inline-block;width:11px;height:11px;background:var(--sun);
  transform:rotate(45deg) translateY(-1px);flex:none;border-radius:2px;
  box-shadow:0 0 14px var(--sun-glow);}
.top nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
.top nav a{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.012em;
  text-decoration:none;color:var(--ink-2);padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid transparent;transition:color .14s ease,background .14s ease,border-color .14s ease;}
.top nav a:hover,.top nav a:focus-visible{color:var(--ink);background:var(--glass);border-color:var(--edge);}
.top nav a[aria-current]{color:var(--sun);background:var(--sun-wash);border-color:rgba(255,180,61,.34);}

/* ---- hero -------------------------------------------------------------- */
/* padding-block, not the shorthand: these sections are also .wrap, and a
   shorthand here sets the horizontal padding to zero — which is why the hero
   and every band heading have been running into the left edge of a phone. */
.hero{padding-block:clamp(46px,8vw,96px) clamp(30px,5vw,52px);}
.hero .lede{font-size:clamp(19px,2.3vw,24px);line-height:1.45;color:var(--ink-2);
  max-width:52ch;margin:22px 0 0;}
.hero h1 + .lede{margin-top:24px;}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.5);}

/* ---- buttons ----------------------------------------------------------- */
/* Pills. The primary one is solid amber and throws a little of its own light;
   the ghost is a pane of the same glass as everything else, which is what makes
   a row of them read as one set rather than as a button and some links. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-weight:700;font-size:16.5px;letter-spacing:-.015em;text-decoration:none;
  padding:13px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;background:var(--sun);color:var(--sun-ink);
  box-shadow:0 10px 26px -12px var(--sun-glow), var(--lip);
  cursor:pointer;transition:transform .13s ease, box-shadow .13s ease, background .13s ease;}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);
  box-shadow:0 16px 34px -12px var(--sun-glow), var(--lip);}
.btn.ghost{background:var(--glass);color:var(--ink);border-color:var(--edge);
  box-shadow:var(--lip);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:rgba(255,180,61,.45);
  background:var(--sun-wash);color:var(--ink);box-shadow:var(--lip);}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
@media (prefers-reduced-motion:reduce){ .btn:hover,.btn:focus-visible{transform:none;} }

/* ---- the ground card --------------------------------------------------- */
/* One object, repeated: same pane, same corner, same inner padding, the fixture
   always in the same place whether or not there is one. The picture is clipped
   by the card's own radius rather than carrying one of its own. */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  margin:0;padding:0;list-style:none;}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}
.card{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;height:100%;
  box-shadow:var(--cast), var(--lip);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;}
.card:hover,.card:focus-visible{border-color:rgba(255,180,61,.42);background:var(--glass-2);
  transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,180,61,.10), var(--lip);}
@media (prefers-reduced-motion:reduce){ .card:hover,.card:focus-visible{transform:none;} }
.card .shot{aspect-ratio:1200/630;width:100%;object-fit:cover;background:var(--sunk);
  border-bottom:1px solid var(--edge);}
.card .body{padding:17px 19px 19px;display:flex;flex-direction:column;gap:7px;flex:1;}
.card .where{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}
.card h3{margin:0;}
/* The fixture block is pushed to the bottom of the card, which bottom-aligns
   it correctly but leaves its top rule at a different height on every card,
   because a two-line fixture name is taller than a one-line one — and the rule
   is exactly what the eye reads across a row. Measured at 18px out. Reserving
   three lines puts the rule in the same place on all of them. */
.card .fix{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:auto;
  padding-top:11px;border-top:1px solid var(--edge);line-height:1.5;
  min-height:calc(11px + 3 * 1.5em);}
.card .fix b{color:var(--sun);font-weight:600;}

/* ---- fixture rows ------------------------------------------------------ */
/* Panes in a stack rather than rules in a table: each row is its own piece of
   glass, and the gap between them is what separates them. */
.fixtures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.fixtures li{border-radius:var(--r-sm);overflow:hidden;}
.fixtures a{display:grid;grid-template-columns:104px 1fr auto;gap:clamp(12px,2.4vw,26px);
  align-items:baseline;padding:16px 18px;text-decoration:none;
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-sm);
  box-shadow:var(--lip);transition:background .14s ease,border-color .14s ease,transform .14s ease;}
.fixtures a:hover,.fixtures a:focus-visible{background:var(--sun-wash);
  border-color:rgba(255,180,61,.38);transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){ .fixtures a:hover,.fixtures a:focus-visible{transform:none;} }
.fixtures .d{font-family:var(--mono);font-size:13px;color:var(--sun);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;}
.fixtures .n{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.022em;}
.fixtures .c{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;}
@media (max-width:620px){
  .fixtures a{grid-template-columns:1fr auto;row-gap:4px;}
  .fixtures .d{grid-column:1/-1;}
}

/* ---- the header on a phone --------------------------------------------- */
/* One bar, still 64px, with the nav scrolling sideways inside it rather than
   wrapping onto a second line and doubling the height of a sticky header. */
@media (max-width:560px){
  .top nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    max-width:62vw;-webkit-overflow-scrolling:touch;}
  .top nav::-webkit-scrollbar{display:none;}
  .top nav a{padding:6px 11px;font-size:14px;}
}

/* ---- the hero banner --------------------------------------------------- */
/* The only image on the site allowed to be large. It is a pane like everything
   else now — held to the page width and rounded — rather than a full-bleed
   strip with a hairline above and below it. It carries its caption with it so
   the picture is never a decoration with nothing to say. */
.banner{margin:0 auto;max-width:var(--page);padding:0 clamp(18px,4vw,34px);position:relative;}
.banner img{width:100%;height:clamp(220px,42vw,480px);object-fit:cover;
  border-radius:var(--r);border:1px solid var(--edge);box-shadow:var(--cast);}
.banner figcaption{padding:11px 2px 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);}

/* ---- three abreast ----------------------------------------------------- */
.three{display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
.three > div{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--lip);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}
.three h3{margin:0 0 9px;}
.three p{color:var(--ink-2);margin:0;font-size:16.5px;}

/* ---- the featured pane ------------------------------------------------- */
/* The fixture that is on, as one piece of glass: the words on the left and the
   way in on the right. It was a heading and a button in an otherwise empty
   band, which on a wide screen is three quarters of a screen of nothing. */
.panel{display:flex;gap:clamp(20px,3vw,44px);align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  padding:clamp(22px,3.2vw,38px);box-shadow:var(--cast), var(--lip);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}
.panel .head{margin:0;flex:1 1 320px;}
.panel .head p{margin-top:10px;}
.panel .act{margin:0;flex:0 0 auto;}

/* ---- sections and prose ------------------------------------------------ */
.band{padding-block:clamp(44px,7vw,84px);}
.band + .band{border-top:1px solid rgba(255,255,255,.055);}
/* A filled band is a wider, softer pane of the same glass — the page's own
   backdrop showing through it, not a block of flat colour. */
.band.fill{background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);}
.head{margin-bottom:clamp(24px,3.5vw,40px);}
.head p{color:var(--ink-2);max-width:56ch;margin:14px 0 0;font-size:17.5px;}

.prose{max-width:var(--read);}
.prose h2{margin:1.7em 0 .5em;} .prose h3{margin:1.5em 0 .4em;}
.prose > :first-child{margin-top:0;}
.prose a{color:var(--sun);text-underline-offset:2px;}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em;}
.prose li{margin-bottom:.42em;}
.prose blockquote{margin:1.4em 0;padding:16px 20px;border-left:3px solid var(--sun);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--glass);
  font-size:20px;line-height:1.45;color:var(--ink-2);}

/* ---- data / stat strip ------------------------------------------------- */
/* Tiles with air between them, each one its own pane. The old strip was a 1px
   grid of borders, which on a dark ground reads as a wireframe. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;background:none;border:0;}
.stats > div{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-sm);
  padding:18px 20px;box-shadow:var(--lip);}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:32px;
  letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink);}
.stats span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px;line-height:1.45;}

/* ---- a wide thing that must never break the page ----------------------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---- footer ------------------------------------------------------------ */
.foot{border-top:1px solid var(--edge);padding:clamp(38px,6vw,64px) 0 clamp(30px,5vw,52px);
  margin-top:clamp(40px,6vw,80px);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);}
.foot .cols{display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.foot h4{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:8px;}
.foot a{text-decoration:none;color:var(--ink-2);font-size:16px;}
.foot a:hover,.foot a:focus-visible{color:var(--sun);}
.foot .fine{margin-top:clamp(30px,5vw,50px);padding-top:22px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:12px;color:var(--ink-3);line-height:1.7;}

/* ---- utility ----------------------------------------------------------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:99;padding:11px 18px;background:var(--sun);
  color:var(--sun-ink);font-family:var(--display);font-weight:700;text-decoration:none;
  border-radius:var(--r-pill);}