/* Shared styles for the public site: home, player entry, rules. The private
   deck under /d/ and the 404 page carry their own styles. */
:root{
  --ink:#070709;--ink-2:#0f0f14;
  --paper:#f4f0ea;--dim:#cfc8bc;--muted:#8f8981;
  --ember:#f25c12;--gold:#f0c75e;
  --line:rgba(244,240,234,.14);--line-2:rgba(244,240,234,.08);
  --d:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --s:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c:"Oswald","Arial Narrow",sans-serif;
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
/* scroll-padding-top keeps a focused control clear of the sticky header when the
   browser scrolls to it, which Shift+Tab does on the way back up. main carries
   tabindex=-1 for the skip link and is not a control, so it takes no ring. */
main:focus{outline:none}
/* One source for the header clearance: scroll-padding-top above. Per-element
   scroll-margin-top used to do this job and would now add to it, landing an
   anchor 168px down instead of 84. */
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.6 var(--s);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:12px 16px;border-radius:8px;background:var(--ember);color:#111;font:600 14px/1 var(--c);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}
/* A link inside a sentence: vertical padding gives a 44px tap area without
   stretching the line it sits on, which an inline-flex min-height would. */
.tap{padding:13px 2px;text-underline-offset:3px;overflow-wrap:anywhere}
.crisis{font-weight:600;color:#ff8a4c;white-space:nowrap}

/* type */
.kicker{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--ember);color:#111;font:600 12px/1 var(--c);letter-spacing:.16em;text-transform:uppercase;width:max-content}
h1,h2,h3{font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.92;margin:0}
h1{font-size:clamp(58px,9vw,124px);margin-top:18px}
h2{font-size:clamp(42px,5.4vw,72px);margin-top:14px}
h3{font-size:clamp(28px,3vw,38px)}
.lede{margin:18px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--dim)}
/* Text runs the full width of its container everywhere (owner, 19 September
   2026), with one exception: a lede laid over a hero photo. The shading only
   darkens the left side, so a full-width line would cross the bright part of
   the picture and drop below the contrast /accessibility/ promises. */
.hero .lede{max-width:34rem}
.sub{margin:12px 0 0;color:var(--dim)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--ember);background:var(--ember);color:#111;font:600 14px/1 var(--c);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background-color .2s ease}
.btn:hover{background:#ff6a22}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(244,240,234,.42)}
.btn-ghost:hover{background:rgba(244,240,234,.08)}
.btn-sm{min-height:44px;padding:0 16px;font-size:13px}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(7,7,9,.94);border-bottom:1px solid var(--line-2)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
/* The header wordmark is set in the hero's typeface (owner, 20 September
   2026), with the 2 in the logo's orange. The painted mark still appears
   whole further down the home page and on the share card. */
.brand{display:inline-flex;align-items:center;min-height:44px;font:400 36px/1 var(--d);letter-spacing:.03em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.brand span{color:var(--ember)}
.nav{display:flex;align-items:center;gap:4px}
.nav .link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:500 13px/1 var(--c);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--dim)}
.nav .link:hover,.nav .link[aria-current]{color:var(--paper)}
@media (max-width:480px){.nav .link{display:none}}
/* The phone menu. Under 481px the text links hide, so everything else in the
   header is reached from here. It is a <details>, so it opens and closes with no
   script; site.js only adds closing on Escape, an outside tap or a followed link.
   The header button says "Register" there, so brand, button and menu fit at 320px. */
.menu{display:none}
.menu summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(244,240,234,.28);border-radius:8px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:18px;height:2px;border-radius:1px;background:var(--paper)}
.menu-icon{position:relative}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;transition:transform .15s ease}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}
.menu[open] .menu-icon{background:transparent}
.menu[open] .menu-icon::before{top:0;transform:rotate(45deg)}
.menu[open] .menu-icon::after{top:0;transform:rotate(-45deg)}
/* Newer Chromium only stops painting a closed <details>'s contents; it still
   lays them out, so they count as present to measurements and could catch taps.
   Hiding them outright makes closed mean gone in every browser. */
.menu:not([open]) .menu-panel,.toc-fold:not([open]) ol{display:none}
.menu-panel{position:absolute;left:0;right:0;top:100%;display:grid;padding:4px 20px 12px;background:rgba(7,7,9,.98);border-bottom:1px solid var(--line)}
.menu-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line-2);color:var(--dim);text-decoration:none;font:500 14px/1 var(--c);letter-spacing:.14em;text-transform:uppercase}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a[aria-current]{color:var(--paper)}
.nav .btn .short{display:none}
@media (max-width:480px){
  .menu{display:block}
  .nav{gap:8px}
  .nav .btn .long{display:none}
  .nav .btn .short{display:inline}
}
@media (max-width:380px){.brand{font-size:31px}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:min(86vh,780px);padding:120px 0 56px}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,7,9,.96) 0%,rgba(7,7,9,.84) 36%,rgba(7,7,9,.38) 68%,rgba(7,7,9,.22) 100%),linear-gradient(180deg,rgba(7,7,9,.25) 0%,rgba(7,7,9,0) 38%,var(--ink) 100%)}
/* Home hero video (Pexels 10341430), mirrored so the brighter player sits right
   of the headline. It dips to dark at the loop point; see the script in
   index.html. */
.hero-video{background:var(--ink);transform:scaleX(-1);transition:opacity .45s ease}
.hero-video.fade{opacity:0}
/* WCAG 2.2.2 asks for a way to stop motion that plays for more than five seconds.
   The script reveals this only once the clip is actually playing, so it never
   appears for a visitor who asked for reduced motion, has no script, or whose
   browser refused autoplay, where there is nothing to pause. */
.vid-btn{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(244,240,234,.45);border-radius:999px;background:rgba(7,7,9,.78);color:var(--paper);cursor:pointer}
.vid-btn[hidden]{display:none}
.vid-btn:hover{background:rgba(7,7,9,.94)}
.vid-ico{position:relative;display:block;width:14px;height:14px}
.vid-ico::before,.vid-ico::after{content:"";position:absolute;top:0;width:4px;height:14px;background:currentColor}
.vid-ico::before{left:1px}
.vid-ico::after{right:1px}
.vid-btn.is-paused .vid-ico::before{left:3px;width:0;height:0;background:transparent;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vid-btn.is-paused .vid-ico::after{display:none}
/* The home title: STR82IT large, and "1V1 Basketball" as its second line,
   the way the logo stacks them. */
.h1-sub{display:block;margin-top:.14em;font-size:.46em;letter-spacing:.06em}
.hero-sub{min-height:min(66vh,620px)}
.hero-sub .hero-img{object-position:60% 20%}
/* The season in three numbers, so the lede can say who it is for instead of
   carrying the whole shape of the tour. Each figure is stated somewhere else
   on the page too; change both. */
.hero-stats{display:flex;flex-wrap:wrap;margin:26px 0 0;padding:0;width:min(660px,100%)}
.hero-stats > div{display:flex;flex-direction:column-reverse;gap:5px;padding:0 20px;border-left:1px solid var(--line)}
.hero-stats > div:first-child{padding-left:0;border-left:0}
.hero-stats dt{font:600 11px/1 var(--c);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-stats dd{margin:0;font:400 34px/1 var(--d);letter-spacing:.03em;color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.next{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;width:min(660px,100%);padding:14px 16px 14px 18px;border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:10px;background:rgba(7,7,9,.76)}
.next-label{font:600 12px/1 var(--c);letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.next-body{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;flex:1 1 240px;min-width:0}
.next .chip-live{margin-left:auto}
.next-when{font:400 24px/1 var(--d);letter-spacing:.03em}
.next-where{color:var(--dim);font-size:15px}
@media (max-width:720px){
  .hero{min-height:auto;padding:96px 0 40px}
  .hero-img{object-position:80% 45%}
  /* The video is mirrored, so the left of the source ends up on the right. */
  .hero .hero-video{object-position:28% 45%}
  .hero::before{background:linear-gradient(180deg,rgba(7,7,9,.55) 0%,rgba(7,7,9,.86) 42%,var(--ink) 100%)}
  .actions .btn{flex:1 1 auto}
  /* On a phone the next-stop card runs the full width, so the hero keeps a strip
     clear at the bottom for the video button rather than letting it sit on top
     of the card. Measured at 320, 360, 375 and 390. */
  .hero{padding-bottom:76px}
  .next{flex-direction:column;align-items:flex-start;gap:8px}
  .next-body{flex:0 0 auto;width:100%}
  .next .chip-live{margin-left:0}
  .hero-stats{margin-top:20px}
  .hero-stats > div{padding:0 16px}
  .hero-stats dd{font-size:28px}
}
/* A short phone held upright (iPhone SE and similar): less space above the
   kicker, so both buttons fit on the first screen. */
@media (max-width:720px) and (max-height:620px) and (orientation:portrait){
  .hero{padding-top:52px}
}
/* A phone held sideways: keep the headline and buttons on the first screen. */
@media (orientation:landscape) and (max-height:500px){
  .hero,.hero-sub{min-height:auto;padding:36px 0 32px}
  .hero::before{background:linear-gradient(90deg,rgba(7,7,9,.96) 0%,rgba(7,7,9,.9) 50%,rgba(7,7,9,.55) 80%,rgba(7,7,9,.3) 100%),linear-gradient(180deg,rgba(7,7,9,.25) 0%,rgba(7,7,9,0) 38%,var(--ink) 100%)}
  h1{font-size:clamp(40px,12vh,64px);max-width:none}
  .lede{font-size:16px;margin-top:10px}
  .actions{margin-top:16px}
  .next{margin-top:18px}
  .hero-stats{display:none}
}

/* sections */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec-flush{padding-top:0}
.sec-head{margin-bottom:28px}
.notify{margin:18px 0 0;color:var(--dim)}

/* stop rows */
.stops{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stop{display:grid;grid-template-columns:56px 150px minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.stop-no{font:400 40px/1 var(--d);color:var(--ember)}
.stop-date{display:grid;gap:3px;font:500 13px/1.2 var(--c);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.stop-date .md{font:400 22px/1.1 var(--d);letter-spacing:.04em;color:var(--paper)}
.stop-where{min-width:0}
.stop-where b{display:block;font-weight:600;font-size:17px;line-height:1.35}
.stop-where .city{display:block;color:var(--dim);font-size:15px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font:600 11px/1.1 var(--c);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--dim)}
.chip.warn{border-color:rgba(240,199,94,.5);color:var(--gold)}
.chip-live{border-color:rgba(242,92,18,.5);color:var(--ember)}
.chip-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember)}
.stop-act{display:flex;gap:8px;justify-content:flex-end}
.stop-wait{color:var(--muted);font-size:14px;white-space:nowrap}
@media (max-width:860px){
  .stop{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no date state" "where where where" "act act act";gap:10px 14px;padding:16px}
  .stop-no{grid-area:no;font-size:34px}
  .stop-date{grid-area:date}
  .stop-state{grid-area:state;justify-self:end;align-self:start}
  .stop-where{grid-area:where}
  .stop-act{grid-area:act;justify-content:flex-start}
}

.route{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.route h3{font-size:clamp(24px,2.6vw,30px)}
.route p{margin:10px 0 0;color:var(--dim)}
.route-states{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.route-states li{padding:8px 13px;border:1px solid var(--line);border-radius:999px;font:600 12px/1 var(--c);letter-spacing:.14em;color:var(--dim)}

/* watch / play tiles */
.split-in{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:440px;padding:28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,9,.08) 15%,rgba(7,7,9,.86) 70%,var(--ink) 100%)}
.tile:hover img{transform:scale(1.03)}
/* The words sit on their own shade: a panel behind the text block that fades in
   just above it, so the text keeps its contrast at any tile height while the
   photo stays in view above. */
.tile > div{position:relative}
.tile > div::before{content:"";position:absolute;inset:-70px -28px -28px;z-index:-1;background:linear-gradient(180deg,rgba(7,7,9,0) 0,rgba(7,7,9,.88) 70px,rgba(7,7,9,.96) 100%)}
.tile h3{margin-top:14px}
.tile p{margin:10px 0 0;color:var(--dim)}
.tile-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font:600 13px/1 var(--c);letter-spacing:.14em;text-transform:uppercase;color:#ff8a4c}
@media (max-width:720px){.split-in{grid-template-columns:1fr}.tile{min-height:340px;padding:22px}}

/* foundation band */

/* player entry */
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.facts-grid div{padding:18px 18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.facts-grid dt{font:600 12px/1 var(--c);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts-grid dd{margin:12px 0 0;font:400 34px/1 var(--d);letter-spacing:.02em}
.who{display:block;margin-top:8px;font:400 14px/1.4 var(--s);color:var(--dim);letter-spacing:0;text-transform:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2)}
.card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.card li{position:relative;padding-left:22px;color:var(--dim)}
.card li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;background:var(--ember);transform:rotate(45deg)}
/* Links that may wrap onto two rows: each gets its own 44px box, so the tap
   areas of one row never reach into the next. */
.linkrow{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:20px 0 0;color:var(--muted);font-size:14px}
.linkrow span{display:inline;align-items:center;gap:6px}
/* An email address is one token to a reader: let the row wrap around it rather
   than breaking it mid-address, which reads as a typo on a phone. */
.linkrow a[href^="mailto:"]{white-space:nowrap;overflow-wrap:normal}
.linkrow a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-underline-offset:3px;overflow-wrap:anywhere}
/* How registration works, in order. */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:step}
.steps li{counter-increment:step;padding:20px 20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2);color:var(--dim);line-height:1.55}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;font:400 34px/1 var(--d);color:var(--ember)}
.steps li > b:first-child{display:block;margin-bottom:6px;font-weight:600;color:var(--paper)}
/* Scoped to the step's own title. An inline <b> inside the step text, such as the
   Cash App handle, stays in its sentence. */
.steps b{font-weight:600;color:var(--paper)}
@media (max-width:1040px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
/* A sponsor's offer to pay an entry. It sits below the stops, never beside the
   Register button, because paying the fee is the ordinary way in. */
.offer + .offer{margin-top:16px}
.offer .chip{margin-bottom:14px}
.offer p{margin:12px 0 0;color:var(--dim);line-height:1.62}
.offer b{color:var(--paper);font-weight:600}
@media (max-width:760px){.facts-grid{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.card{padding:22px}}
@media (max-width:380px){.facts-grid{grid-template-columns:1fr}}

/* rules */
.rules-head{padding-bottom:0}
.rules-head h1{font-size:clamp(44px,6.4vw,86px)}
.rules-body{padding-top:40px}
.rules-contact-sec{padding-top:0}
.rules-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:84px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.toc-h{margin:0 0 10px;font:600 12px/1 var(--c);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0;color:var(--dim);text-decoration:none;font-size:14px;line-height:1.35}
.toc a:hover{color:var(--paper)}
.part+.part{margin-top:46px}
.part h2{font-size:clamp(30px,3.4vw,44px);margin-top:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rule-list{margin:0;padding-top:22px;display:grid;gap:20px}
.rule dt{font-weight:600;line-height:1.45}
.rule dd{margin:4px 0 0;color:var(--dim);line-height:1.62}
.rule-n{display:inline-block;min-width:40px;font:600 13px/1.45 var(--c);letter-spacing:.06em;color:var(--ember)}
.rules-contact p{margin:0;color:var(--dim)}
@media (max-width:860px){.rules-wrap{grid-template-columns:1fr;gap:22px}.toc{position:static}}
/* The long legal pages: the sidebar list on wide screens, and on narrow ones the
   same list folded into "Jump to a section", so it does not push the text a
   full screen down. */
.toc-fold{display:none;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.toc-fold summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 18px;font:600 12px/1 var(--c);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);cursor:pointer;list-style:none}
.toc-fold summary::-webkit-details-marker{display:none}
.toc-fold summary::marker{content:""}
.toc-fold summary::after{content:"+";font:400 22px/1 var(--s);color:var(--ember)}
.toc-fold[open] summary::after{content:"\2212"}
.toc-fold ol{margin:0;padding:0 18px 10px;list-style:none}
.toc-fold a{display:flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none;font-size:15px;line-height:1.35;border-top:1px solid var(--line-2)}
@media (max-width:860px){.has-fold .toc{display:none}.has-fold .toc-fold{display:block}}

/* the tour mark. Its own corners are black, so it sits on the page background
   with no visible edge and needs no frame. Never drawn wider than the file is,
   or the brush strokes go soft. */
.tourmark{padding:clamp(26px,5vw,60px) 0 0}
.tourmark img{display:block;width:min(100%,1052px);height:auto;margin-inline:auto;
  /* The smoke runs to the crop edge, so without this the art reads as a
     rectangle pasted onto the page. The fades stop short of the wordmark, which
     starts around 10%, and of the line under it, which sits at about 95%. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 99%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 99%,transparent);
  mask-composite:intersect}

/* footer */
.foot{padding:56px 0 36px;background:#050506;border-top:1px solid var(--line-2)}
.foot-in{display:grid;gap:34px}
.foot-brand{display:inline-flex;width:max-content}
.foot-brand img{height:52px;width:auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:1040px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot .foot-h{margin:0 0 10px;font:600 12px/1 var(--c);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot p{margin:0 0 8px;color:var(--dim);font-size:15px}
/* One address per row. Each link is its own 44px row, so a thumb on one address
   cannot land on the next; .tap's padding made stacked links overlap. */
.foot .foot-role{margin:0;display:flex;flex-direction:column}
.foot .foot-role + p:not(.foot-role){margin-top:8px}
.foot-mail,.mail-link{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;text-underline-offset:3px;overflow-wrap:anywhere}

/* privacy and terms pages */
.meta-line{margin:14px 0 0;color:var(--muted);font-size:14px}
.legal h2{margin:38px 0 0;font-size:clamp(20px,2.2vw,26px);line-height:1.25}
.legal h2:first-child{margin-top:0}
.legal p{margin:12px 0 0;color:var(--dim);line-height:1.62}
.legal h2.legal-part{margin-top:56px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:clamp(28px,3.2vw,38px)}
.legal h2.legal-part:first-child{margin-top:0}
.legal h3{margin:26px 0 0;font-size:clamp(19px,1.9vw,22px);line-height:1.25}
.legal b{color:var(--paper);font-weight:600}
/* The gap keeps a .tap link's padding in one item from reaching the next. */
.legal-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:12px;color:var(--dim);line-height:1.62}
.legal-list li{position:relative;padding-left:22px}
.legal-list li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;background:var(--ember);transform:rotate(45deg)}
.mail-list{margin:8px 0 0;padding:0;list-style:none;color:var(--dim)}
.foot ul{margin:0;padding:0;list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none}
.foot li a:hover{color:var(--paper)}
.foot .fine{margin:0;padding-top:20px;border-top:1px solid var(--line-2);color:var(--muted);font-size:13px}
/* Who built the site. .foot p sets margin, colour and size, so the credit
   needs .foot in front of it to win. */
.foot .credit{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--muted);font-size:13px}
.foot .credit img{width:32px;height:32px;flex:0 0 auto}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.tile:hover img{transform:none}}