/* Starlasso site, Night Run. Every value here comes from Docs/SITE-DESIGN.md: change it there
   first. Tokens, then the base, then the pieces each page is built from, then the run. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-display-600.woff2) format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.48%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0%}
@font-face{font-family:"Inter Display Fallback";src:local("Arial");size-adjust:102.28%;ascent-override:94.72%;descent-override:23.58%;line-gap-override:0%}

/* Day is the field by day, night the field at night. The system setting decides unless the
   visitor picks one with the day/night switch, which sets data-theme on <html>. */
:root{
  --bg:#E6EDE2;--field:#DCE5D7;--surface:#F4F7F1;--ink:#0B120C;--text:#2D392E;--muted:#556154;
  --accent:#3B6406;--edge:#5A8C12;--territory:#D3E8AE;--trail:#4F7E0A;--trail-glow:transparent;
  --cta:#BFEF6D;--cta-ink:#15200C;--cta-edge:#5A8C12;--rule:#C3D0BE;--glow:transparent;
  --hexline:rgba(40,70,40,.13);
  --mag:#FF5FD8;--mag-dim:#F8D3EE;--sky:#55C8FF;--sky-dim:#CFEAF8;--amb:#FFB347;--amb-dim:#F9E3C0;
  --vio:#B98CFF;--vio-dim:#E8DDFC;--wht:#8FA3B2;--wht-dim:#E3EBF0;
  --arrow-rim:#76A425;--arrow-glow:none;--rv-glow:0;
  --f-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"Inter Display","Inter Display Fallback","Inter","Inter Fallback",system-ui,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:56px;--s7:72px;--s8:104px;
  --gutter:20px;
  --r-icon:8px;--r-btn:14px;--r-row:18px;--r-media:24px;--r-phone:28px;
  --shadow-device:0 28px 60px rgba(0,0,0,.35);
  --ease-snap:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(0,0,.58,1);--ease-in:cubic-bezier(.42,0,1,1);
  --t-hover-in:160ms;--t-hover-out:120ms;
  --hexmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.785' height='36' viewBox='0 0 20.785 36'%3E%3Cpath d='M0 6.000 L10.392 0 L20.785 6.000 M0 6.000 V18.000 L10.392 24.000 L20.785 18.000 M10.392 24.000 V36.000' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="day"]){
  --bg:#080C0B;--field:#050807;--surface:#111713;--ink:#EEF2DE;--text:#C9D1BC;--muted:#9CA595;
  --accent:#BFEF6D;--edge:#BFEF6D;--territory:#1D2B0F;--trail:#E0FF9A;--trail-glow:rgba(224,255,154,.5);
  --cta:#D8F78B;--cta-ink:#15200C;--cta-edge:#D8F78B;--rule:#253025;--glow:rgba(191,239,109,.45);
  --hexline:rgba(46,59,46,.62);--mag-dim:#38192F;--sky-dim:#133438;--amb-dim:#382F10;--vio-dim:#292438;--wht:#DDEBF5;--wht-dim:#313D36;
  --arrow-rim:#EDFFD1;--arrow-glow:drop-shadow(0 0 3.5px rgba(224,255,154,.6));--rv-glow:.2;
  color-scheme:dark;
}}
:root[data-theme="night"]{
  --bg:#080C0B;--field:#050807;--surface:#111713;--ink:#EEF2DE;--text:#C9D1BC;--muted:#9CA595;
  --accent:#BFEF6D;--edge:#BFEF6D;--territory:#1D2B0F;--trail:#E0FF9A;--trail-glow:rgba(224,255,154,.5);
  --cta:#D8F78B;--cta-ink:#15200C;--cta-edge:#D8F78B;--rule:#253025;--glow:rgba(191,239,109,.45);
  --hexline:rgba(46,59,46,.62);--mag-dim:#38192F;--sky-dim:#133438;--amb-dim:#382F10;--vio-dim:#292438;--wht:#DDEBF5;--wht-dim:#313D36;
  --arrow-rim:#EDFFD1;--arrow-glow:drop-shadow(0 0 3.5px rgba(224,255,154,.6));--rv-glow:.2;
  color-scheme:dark;
}
@media (min-width:720px){:root{--gutter:48px}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
:where(h1,h2,h3,p,figure,ul,ol){margin:0}
:where(h1,h2,h3){text-wrap:balance}
img,video{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--edge);outline-offset:3px;border-radius:2px}
::selection{background:var(--territory);color:var(--ink)}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.page{position:relative;isolation:isolate;overflow:clip}

/* header: brand, nav, the day/night switch */
.top{position:relative}
.field{position:absolute;inset:0;z-index:-2;background:var(--field);overflow:hidden}
.hexwrap{position:absolute;inset:0;-webkit-mask-image:radial-gradient(120% 80% at 74% 46%,#000 26%,transparent 72%);mask-image:radial-gradient(120% 80% at 74% 46%,#000 26%,transparent 72%)}
.hex{position:absolute;inset:0;background:var(--hexline);-webkit-mask-image:var(--hexmask);mask-image:var(--hexmask);-webkit-mask-size:20.785px 36px;mask-size:20.785px 36px}
header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 40px;padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:6px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);font:500 13px/1 var(--f-body);letter-spacing:.22em}
.brand img{width:30px;height:30px;border-radius:var(--r-icon)}
header nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 20px}
header nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 14px/1.2 var(--f-body);color:var(--muted);text-decoration:none}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;border-radius:1px;background:var(--edge);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-hover-out) var(--ease-in)}
header nav a[aria-current="page"]{color:var(--ink)}
header nav a[aria-current="page"]::after{transform:scaleX(1)}
header nav a.discord::after{display:none}
header nav a.discord svg{display:block}
@media (hover:hover) and (pointer:fine){
  header nav a:hover{color:var(--ink)}
  header nav a:hover::after{transform:scaleX(1);transition:transform var(--t-hover-in) var(--ease-out)}
}
@media (max-width:899px){
  header{grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
  header nav{grid-column:1/-1;grid-row:2;gap:0 20px}
}
@media (max-width:479px){header nav{justify-content:space-between;gap:0 8px}}

/* the day/night switch: a small capture; the chosen side sits on claimed ground */
.dn{display:none;position:relative;isolation:isolate;align-items:center;height:44px;padding:0 2px;border:0;background:none;cursor:pointer;color:var(--muted);font:500 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.js .dn{display:inline-flex}
.dn-opt{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 11px}
.dn-opt.on{color:var(--ink)}
.dn-layer{position:absolute;inset:0;pointer-events:none}
.dn-layer.g{z-index:-1}
.dn-layer svg{position:absolute;overflow:visible;opacity:0}
.dn:focus-visible{outline:2px solid var(--edge);outline-offset:2px;border-radius:var(--r-btn)}
.dn:active .dn-opt:not(.on){opacity:.7}
@media (hover:hover) and (pointer:fine){.dn:hover .dn-opt:not(.on){color:var(--ink)}}

/* buttons: primary (store and beta links) and secondary (Discord, downloads) */
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cta,.discord-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:12px 20px;border-radius:var(--r-btn);font:600 16px/1.2 var(--f-body);text-decoration:none;cursor:pointer}
.cta{background:var(--cta);color:var(--cta-ink);box-shadow:inset 0 0 0 1px var(--cta-edge);--shade:var(--cta-ink);--shade-a:.12}
.discord-cta{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);--shade:var(--ink);--shade-a:.08}
.discord-cta svg{display:block;flex:none}
.cta::before,.discord-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--shade);opacity:0;z-index:-1;pointer-events:none}
.cta::after,.discord-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--edge),0 0 24px var(--glow);opacity:0;z-index:-1;pointer-events:none;transition:opacity var(--t-hover-out) var(--ease-in)}
.cta:focus-visible,.discord-cta:focus-visible{outline:2px solid var(--edge);outline-offset:3px;border-radius:var(--r-btn)}
.cta:focus-visible::after,.discord-cta:focus-visible::after{opacity:1}
.cta:active::before,.discord-cta:active::before{opacity:var(--shade-a)}
.cta[aria-disabled="true"],.discord-cta[aria-disabled="true"]{opacity:.45;cursor:default}
.store-badge{display:inline-flex;align-items:center;border-radius:9px}
.store-badge img{display:block;height:48px;width:auto}
.store-badge:focus-visible{outline:2px solid var(--edge);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .cta:hover::after,.discord-cta:hover::after{opacity:1;transition:opacity var(--t-hover-in) var(--ease-snap)}
  .cta[aria-disabled="true"]:hover::after,.discord-cta[aria-disabled="true"]:hover::after{opacity:0}
}
.small{display:block;margin-top:14px;font-size:14px;line-height:1.45;color:var(--muted);max-width:40em}
.cta-row{margin-top:56px}
.cta-row .ctas{margin-top:0}

/* home: the hero on the field */
.hero{display:grid;gap:40px;padding-top:24px;padding-bottom:64px}
@media (min-width:720px){.hero{padding-top:36px;padding-bottom:var(--s8)}}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:32px}}
.h1{font:600 clamp(40px,5.9vw,84px)/.95 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.h1 span{display:block}
.h1 .own{color:var(--accent)}
.lead{margin-top:22px;font-size:19px;line-height:1.6;color:var(--text);max-width:32em}
.scene{position:relative;width:min(100%,340px);justify-self:center;aspect-ratio:400/540}
@media (min-width:900px){.scene{width:min(100%,410px);justify-self:end;margin-right:4%}}
.scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rv-sky{--c:var(--sky);--c-dim:var(--sky-dim)}
.rv-mag{--c:var(--mag);--c-dim:var(--mag-dim);--c-rim:#FFB7ED}
.rv-amb{--c:var(--amb);--c-dim:var(--amb-dim)}
.rv-t{fill:var(--c-dim)}
.rv-h{opacity:.34}
.hx path{fill:none;stroke-width:.9}
#hx-sky path{stroke:var(--sky)}#hx-mag path{stroke:var(--mag)}#hx-amb path{stroke:var(--amb)}
.rv-e{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linejoin:round}
.rv-g{fill:none;stroke:var(--c);stroke-width:12;stroke-linejoin:round;opacity:var(--rv-glow)}
.rv-tr{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rv-ah{fill:var(--c);stroke:var(--c);stroke-linejoin:round}
.rv-ah-rim{fill:var(--c-rim);stroke:var(--c-rim);stroke-linejoin:round}
.phone{position:absolute;left:23%;top:7.4%;width:54%;border-radius:var(--r-phone);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--rule),var(--shadow-device);display:block}

/* home: hooks as rows, very large */
.hooks{display:grid;gap:44px;padding-top:24px}
.hook{display:grid;gap:12px}
@media (min-width:720px){.hooks{gap:64px}.hook{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:baseline}}
.hook h3{justify-self:start;font:600 clamp(30px,3.8vw,52px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.hook p{font-size:18px;max-width:30em}

/* home: clips from real arenas, staggered so the trail can weave through */
.arenas{padding-top:80px;padding-bottom:var(--s6)}
.label,.kicker{font:500 12px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.clips{margin-top:20px;display:grid;gap:64px}
.clip{position:relative;width:min(74%,340px);justify-self:end;border-radius:var(--r-media);border:1px solid var(--rule);background:var(--surface);overflow:hidden}
.clip:nth-child(2){justify-self:start}
.clip figcaption{padding:12px 16px 16px;font-size:15px;line-height:1.45;color:var(--text)}
@media (min-width:720px){
  .clips{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6);align-items:start;margin-top:28px}
  .clip{width:auto;justify-self:stretch}
  .clip:nth-child(1){margin-top:144px}
  .clip:nth-child(2){margin-top:72px}
}

/* home: the season */
.season{padding-top:var(--s7);padding-bottom:var(--s7)}
.season-in{display:grid;gap:8px}
@media (min-width:720px){.season-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}.season-in .ctas{justify-content:flex-end;margin-top:0}}
.season h2{font:600 clamp(30px,3.8vw,52px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.season p{margin-top:14px;font-size:18px;max-width:30em}

/* articles: every page but home. The page head sits on the field: the title (the page's home
   ground, claimed on load) and its lead, and from 900 px a clip or screenshot from real arenas
   beside them (an index of the sections on the legal pages). The article is a stack of rows, the
   heading on the left and the text on the right, so the page uses its width while the text keeps
   its reading measure; lists that compare things become grids across the whole width. */
.page-head{padding-top:var(--s5);padding-bottom:var(--s6)}
.page-head h1{max-width:760px;font:600 clamp(36px,5.2vw,64px)/1.02 var(--f-display);letter-spacing:-.035em;color:var(--ink)}
.page-head .lead{margin-top:40px;max-width:34em;font-size:19px}
.page-head .eff{margin-top:40px;font-size:14px;color:var(--muted)}
.ph-media,.ph-index{display:none}
.ph-watch{margin:var(--s5) 0 0}
@media (min-width:900px){
  .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(48px,7vw,112px)}
  .ph-media{display:block;height:clamp(380px,32vw,460px);aspect-ratio:var(--ar,540/850);border-radius:var(--r-media);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--rule),var(--shadow-device)}
  .ph-media picture,.ph-media img{width:100%;height:100%;object-fit:cover}
  .ph-watch{margin:0;width:auto;height:clamp(380px,32vw,460px);aspect-ratio:720/1280}
  .ph-watch video{height:100%;width:auto}
  .ph-index{display:block;width:clamp(220px,22vw,280px);padding-left:20px;border-left:1px solid var(--rule)}
}
.ph-index .label{display:block;margin-bottom:10px}
.ph-index a{display:flex;align-items:center;min-height:32px;font-size:14px;line-height:1.3;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.ph-index a:hover{color:var(--ink);text-decoration-color:var(--edge)}}
article,.article{padding-top:var(--s3);padding-bottom:var(--s7)}
article>p,article>.small{max-width:680px}
article>p{margin-top:var(--s5)}
article>p+.cta-row{margin-top:var(--s5)}
article .small{margin-top:14px}
.sec{padding-block:44px;border-top:1px solid var(--rule)}
.sec:first-child,.sec.tail,article>p+.sec{border-top:0}
.sec.tail{padding-top:0}
.sec>h2{font:600 clamp(24px,2.5vw,32px)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--ink);scroll-margin-top:24px}
.sec>h2 .n,.card h3 .n{color:var(--accent)}
.sec-body{margin-top:14px;max-width:680px}
.sec-body>:first-child{margin-top:0}
.sec.wide>.sec-body{max-width:none;margin-top:40px}
.sec.wide>.sec-body:first-child{margin-top:0}
@media (min-width:900px){
  .sec:not(.wide){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s6);align-items:start}
  .sec:not(.wide)>.sec-body{margin-top:0}
  .sec.tail>.sec-body{grid-column:2}
  .sec>h2{max-width:14em}
}
article p{margin-top:14px}
article h3{margin-top:28px;font:600 19px/1.35 var(--f-body);color:var(--ink)}
article h3+p{margin-top:8px}
article ul,article ol{margin-top:14px;padding-left:1.25em}
article li{margin-top:8px}
article li::marker{color:var(--edge)}
article strong,article b{color:var(--ink);font-weight:600}
article a:not(.cta):not(.discord-cta){text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){article a:not(.cta):not(.discord-cta):hover{text-decoration-thickness:2px}}
.sec-body .ctas{margin-top:20px}
.callout{margin-top:28px;padding:16px 20px;border-radius:var(--r-row);border:1px solid var(--rule);background:var(--surface)}
.callout p{margin:0}
/* a claimed subject's own frame hands over to the ground's edge */
.card,.row{transition:border-color 240ms var(--ease-snap),background-color 240ms var(--ease-snap)}
.is-claimed{border-color:transparent!important;background-color:transparent!important}
/* a pilot's color: a lit hex cell, as the standings show it */
.card h3::before,.row::before{content:"";flex:none;display:block;width:12px;height:14px;background:var(--c,var(--edge));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* io games: cards, ours first and claimed, every other game in a rival's color */
.cards{display:grid;gap:24px}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}}
.card{padding:20px 22px 22px;border:1px solid var(--rule);border-radius:var(--r-row);background:var(--surface)}
.card h3{margin:0;display:flex;align-items:center;gap:10px}
.card p{margin-top:8px;font-size:16px}
/* comparison rows: side by side from 900 px */
.cmp{display:grid;gap:12px;margin-top:0}
@media (min-width:900px){.cmp{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;align-items:start}}
.row{margin-top:0;padding:18px 20px 20px;border-radius:var(--r-row);border:1px solid var(--rule);background:var(--surface);font-size:16px}
.row::before{display:inline-block;margin:0 9px 0 0;vertical-align:-1px}
.cmp .us{border-color:var(--edge)}
/* season tiers: a ladder, each step one lit cell higher */
.tiers{display:grid;gap:8px}
.tier{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:start;gap:6px 12px;padding:14px 18px;border:1px solid var(--rule);border-radius:var(--r-row);background:var(--surface)}
.tier .lvl{grid-column:1;grid-row:2}
.tier span:not(.lvl){grid-column:2;grid-row:1/3;font-size:16px}
.tier b{color:var(--ink);font-weight:600}
.lvl{display:flex;gap:3px}
.lvl i{display:block;width:10px;height:11.5px;background:var(--rule);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tier[data-k="1"] .lvl i:nth-child(-n+1),.tier[data-k="2"] .lvl i:nth-child(-n+2),.tier[data-k="3"] .lvl i:nth-child(-n+3),.tier[data-k="4"] .lvl i:nth-child(-n+4),.tier[data-k="5"] .lvl i{background:var(--edge)}
@media (min-width:900px){
  .tiers{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:end}
  .tier{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:calc(150px + var(--k) * 30px);padding:20px 20px 18px}
  .tier b{font:600 26px/1.1 var(--f-display);letter-spacing:-.02em}
  .tier span:not(.lvl){font-size:15px;line-height:1.45}
  .tier .lvl{margin-top:auto;padding-top:8px}
}
.facts{width:100%;margin-top:0;border-collapse:separate;border-spacing:0;border:1px solid var(--rule);border-radius:var(--r-row);overflow:hidden;font-size:15px;font-variant-numeric:tabular-nums}
.facts td{padding:10px 16px;vertical-align:top;border-top:1px solid var(--rule)}
.facts tr:first-child td{border-top:0}
.facts td:first-child{color:var(--muted);width:7.5em}
.facts td+td{color:var(--ink)}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
@media (min-width:720px){.shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:1080px){.shots{grid-template-columns:repeat(6,minmax(0,1fr))}}
.shots figure{border-radius:var(--r-media);border:1px solid var(--rule);background:var(--surface);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:10px 14px 12px;font-size:14px;color:var(--text)}
.downloads li{margin-top:10px}
.watch{max-width:360px;border-radius:var(--r-media);overflow:hidden;background:#000;border:1px solid var(--rule)}
.watch video{width:100%}
.fine{margin-top:40px;font-size:13px;color:var(--muted)}

/* footer: the same on every page, on the field */
.foot{margin-top:var(--s5);background:var(--field);border-top:1px solid var(--rule);color:var(--muted)}
.foot-in{display:grid;gap:24px;padding-top:40px;padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
@media (min-width:720px){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px 48px}}
.foot .brand{align-self:start}
.foot nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media (min-width:720px){.foot nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot nav a{display:flex;align-items:center;min-height:36px;font-size:14px;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.foot-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:16px;border-top:1px solid var(--rule);font-size:13px}
.foot-meta a{color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--ink);text-decoration-color:var(--edge)}}

/* the run: claimed ground under the content, the trail and its arrow over it */
.run{position:absolute;inset:0;pointer-events:none}
.run-ground{position:absolute;inset:0;z-index:-1}
.run-ground svg{position:absolute;overflow:visible;opacity:0;will-change:opacity}
.claim .t{fill:var(--territory)}
.claim .th{fill:url(#hexp)}
.claim .e{fill:none;stroke:var(--edge);stroke-width:2.5;stroke-linejoin:round}
.claim .g1{fill:none;stroke:var(--glow);stroke-width:9;opacity:.5;stroke-linejoin:round}
.claim .g2{fill:none;stroke:var(--glow);stroke-width:22;opacity:.16;stroke-linejoin:round}
.flash path{fill:var(--edge);opacity:.5}
#hexp path{fill:none;stroke:var(--edge);stroke-width:.9;opacity:.22}
.trail{position:absolute;inset:0;pointer-events:none;z-index:3}
.seg{position:absolute;left:0;top:0;height:3px;border-radius:2px;background:var(--trail);box-shadow:0 0 8px var(--trail-glow);transform-origin:0 50%;will-change:transform}
.arrow{position:absolute;left:0;top:0;line-height:0;transform-origin:0 0;will-change:transform;opacity:0}
.arrow svg{display:block;overflow:visible;filter:var(--arrow-glow)}
.ah-body{fill:var(--trail);stroke:var(--trail);stroke-linejoin:round}
.ah-rim{fill:var(--arrow-rim);stroke:var(--arrow-rim);stroke-linejoin:round}
.dn .seg{height:2px;box-shadow:none}

/* changing theme: one crossfade where the browser has view transitions */
::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:var(--ease-snap)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}