/* FusionAir template.
   Everything takes its colour from the wordmark file: the ground its exports sit
   on, the white of FUSI, the steel of the inner ring, the amber of the carrier.
   Blue is the only action colour. Amber marks state (the ring, where you are,
   focus) and is never a button. */

/* ------------------------------------------------------------ type */

@font-face{
  font-family:"Archivo";
  src:url(fonts/archivo-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  src:url(fonts/archivo-latin.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens */

:root{
  color-scheme:light;
  /* Paper, not panel. The logo's colours carry the brand on a light page:
     ink for the wordmark, amber as the accent, blue for anything you click. */
  --ground:#fbf9f6;      /* warm paper */
  --ground-2:#ffffff;    /* cards, inputs, anything raised */
  --ground-3:#f3efe9;    /* quiet bands between sections */
  --rule:#e7e2da;        /* hairlines */
  --rule-2:#d4cdc2;      /* input borders, stronger rules */
  --signal:#141a21;      /* headings and the wordmark ink */
  --signal-2:#3d4956;    /* body text, 10:1 on paper */
  --muted:#667381;       /* small text, 5.2:1 on paper */
  --steel:#69737e;       /* the inner ring */
  --amber:#f0a02c;       /* the carrier: rules, marks, focus */
  --amber-deep:#b0700a;  /* amber where it has to carry text, 4.8:1 */
  --amber-wash:#fff4e2;  /* the warm light behind the hero */
  --action:#2c6fca;      /* buttons; white text at 5:1 */
  --action-hover:#1f59ab;
  --link:#1d5cb4;
  --link-hover:#123f7d;
  --fault:#c0392f;
  --ink-band:#10161d;    /* the dark foot, so the page still ends on brand */
  --onair:#d2231a;       /* the ON AIR red, darkened to hold against paper */
  --wm-ink:#171c22; --wm-amber:#cf7d0e; --wm-steel:#7f8994;
  --head-bg:rgb(251 249 246 / .94);
  --hero-bg:radial-gradient(62rem 34rem at 50% -14%, var(--amber-wash) 0%, rgb(255 244 226 / 0) 68%),
            linear-gradient(to bottom, #ffffff 0%, var(--ground) 100%);
  --haze:var(--haze);
  --card-bg:var(--ground-2);
  --shadow-sm:0 1px 2px rgb(20 26 33 / .05), 0 2px 8px rgb(20 26 33 / .05);
  --shadow-md:0 2px 8px rgb(20 26 33 / .06), 0 14px 32px rgb(20 26 33 / .09);
  --radius:10px;

  --frame:76rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --measure:44rem;
  --wide:125%;
  --hero-mark:40rem;
  --aside-w:18rem;
  --aside-gap:clamp(2.5rem,5vw,4.5rem);
}

/* ------------------------------------------------------------ base */

*{box-sizing:border-box}
html{scroll-padding-top:5rem;scrollbar-color:var(--rule-2) var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--signal);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.125rem;line-height:1.6;font-weight:400;font-stretch:100%;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
@media (max-width:40rem){body{font-size:1.0625rem}}
img,svg{max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber);color:var(--ground)}

.frame{width:min(100% - 2 * var(--gutter), var(--frame));margin-inline:auto}
.skip{position:absolute;left:-10000px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--signal);color:var(--ground);padding:.6rem 1rem}

/* ------------------------------------------------------------ header */

.site-head{
  position:sticky;top:var(--as-live-h,0px);z-index:50;
  background:var(--head-bg);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
body:has(.as-closedbar) .site-head{top:2.1rem}
/* A generous bar at the top of the page that tightens once you scroll, so the
   wordmark and the menu read well without eating the screen later on. */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:5.25rem;
  transition:min-height .2s ease}
.head-mark{display:flex;align-items:center;min-height:44px;line-height:0}
.head-mark img{height:30px;width:auto;transition:height .2s ease}
body.is-stuck .head-row{min-height:4.25rem}
body.is-stuck .head-mark img{height:24px}
body.is-stuck .site-head{box-shadow:0 1px 14px rgb(0 0 0 / .08)}
[data-theme="night"] body.is-stuck .site-head{box-shadow:0 1px 16px rgb(0 0 0 / .5)}

/* Home: the hero is the wordmark, so the header's copy waits until it scrolls away. */
.is-home.hero-live .head-mark{opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.is-home.hero-live.hero-past .head-mark{opacity:1;visibility:visible;transform:none;
  transition:opacity .25s ease,transform .25s ease}

.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav > ul{display:flex;gap:clamp(1.1rem,2.1vw,2.4rem)}
.site-nav li{position:relative}
.site-nav a{
  display:block;padding:.45rem 0;color:var(--signal-2);text-decoration:none;
  font-size:1.06rem;font-stretch:106%;font-weight:560;letter-spacing:-.004em;
  /* A menu name never breaks across two lines. "Who Are We?" wrapping mid-item
     is what a cramped header looks like, and it drags the whole bar taller. */
  white-space:nowrap;
}
.site-nav > ul > li > a{position:relative}
.site-nav a:hover{color:var(--signal)}
/* Where you are: the carrier colour, as a short line under the name. */
.site-nav .is-current > a,.site-nav .is-open > a{color:var(--signal)}
.site-nav > ul > .is-current > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:3px;border-radius:2px;background:var(--amber)
}

/* The arrow beside a page that has pages under it. Added by site.js so it only
   exists when there is something to open. */
.sub-toggle{
  display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;padding:0;margin-left:.1rem;
  border:0;border-radius:3px;background:none;color:var(--signal-2);cursor:pointer
}
.sub-toggle:hover{color:var(--signal)}
.sub-toggle span{width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.is-expanded > .sub-toggle span{transform:translateY(1px) rotate(-135deg)}

@media (min-width:52.0625rem){
  .site-nav > ul > li.has-children{display:flex;align-items:center}

  /* The dropdown. It is always in the page and fades in and out, so leaving it
     for a moment does not snap it shut: it waits a quarter of a second. */
  .site-nav .as-menu-2{
    position:absolute;top:calc(100% + .6rem);left:-1rem;min-width:13rem;z-index:5;
    background:var(--ground-2);border:1px solid var(--rule-2);border-radius:3px;padding:.4rem 0;
    visibility:hidden;opacity:0;transform:translateY(-3px);
    transition:opacity .15s ease,transform .15s ease,visibility 0s linear .25s
  }
  /* An invisible bridge over the gap under the parent, so the pointer never
     leaves the menu on its way down to it. */
  .site-nav .as-menu-2::before{content:"";position:absolute;left:0;right:0;top:calc(-.6rem - 1px);height:calc(.6rem + 1px)}
  /* Keyboard and touch open it with the arrow button, which owns its state. */
  .site-nav li.is-expanded > .as-menu-2{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .site-nav .as-menu-2 a{padding:.6rem 1.1rem;font-size:.97rem}
}
/* Hover opens it only where hovering is a real thing, so a tap on a tablet
   does not leave a menu stuck open. */
@media (min-width:52.0625rem) and (hover:hover){
  .site-nav li:hover > .as-menu-2{visibility:visible;opacity:1;transform:none;transition-delay:0s}
}

@media (min-width:52.0625rem) and (pointer:coarse){
  .site-nav a{min-height:44px;display:flex;align-items:center}
  .site-nav > ul > .is-current > a::after{bottom:.35rem}
  .sub-toggle{width:44px;height:44px;margin-left:0}
}

.menu-toggle{
  display:none;font:inherit;font-size:.95rem;font-weight:600;font-stretch:108%;
  color:var(--signal);background:transparent;border:1px solid var(--rule-2);border-radius:3px;
  min-height:44px;padding:0 1rem;cursor:pointer
}

@media (max-width:52rem){
  .head-row{flex-wrap:wrap;gap:0 1rem}
  .menu-toggle{display:block}
  .site-nav{display:none;flex-basis:100%;padding:.25rem 0 1rem}
  .site-nav.is-open{display:block;max-height:calc(100dvh - 4.25rem);overflow-y:auto;overscroll-behavior:contain}
  .site-nav > ul{flex-direction:column;gap:0}
  .site-nav > ul > li{border-top:1px solid var(--rule)}
  .site-nav li.has-children{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .site-nav a{padding:.75rem 0;min-height:48px;display:flex;align-items:center;font-size:1.05rem}
  .site-nav > ul > .is-current > a::after{left:auto;right:0;top:50%;bottom:auto;width:1.25rem;height:2px}
  .site-nav > ul > .is-current.has-children > a::after{right:.5rem}
  .sub-toggle{width:48px;height:48px;margin:0}
  .sub-toggle span{width:.55rem;height:.55rem}
  /* Sections stay closed until opened, except the one you are in. */
  .site-nav .as-menu-2{grid-column:1 / -1;display:none;padding:0 0 .5rem 1rem}
  .site-nav li.is-expanded > .as-menu-2{display:block}
  .site-nav .as-menu-2 a{font-size:1rem;min-height:44px;padding:.55rem 0}
}

/* ------------------------------------------------------------ hero */

.hero{position:relative;padding:clamp(3.5rem,10vh,6.5rem) 0 clamp(3rem,7vh,4.75rem)}
.hero .frame{text-align:center}
.hero-mark{margin:0;line-height:0;font-size:inherit}
.hero-mark .wm{display:block;width:min(100%, var(--hero-mark));height:auto;margin-inline:auto}
.wm-heavy{display:none!important}
@media (max-width:44rem){.wm-primary{display:none!important}.wm-heavy{display:block!important}}
.hero-line{
  margin:clamp(1.25rem,2.5vw,1.75rem) auto 0;max-width:34ch;
  font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.35;font-weight:450;font-stretch:112%;
  color:var(--signal-2)
}
.hero-block{margin:2rem auto 0;max-width:var(--measure)}
.hero-block .as-text p{color:var(--signal-2)}
.carrier-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber)}

/* The one moment: on the home page the O of the wordmark resolves once.
   Letters stay put from the first frame; only the carrier mark moves. The last
   frame is the supplied artwork exactly. */
.wm .wm-dot,.wm .wm-inner,.wm .wm-mid,.wm .wm-outer{transform-box:view-box;transform-origin:990.18px 144px}
@media (prefers-reduced-motion:no-preference){
  .hero .wm-dot{animation:wm-dot .55s cubic-bezier(.2,.7,.2,1) .1s both}
  .hero .wm-inner{animation:wm-inner 1.05s cubic-bezier(.2,.7,.2,1) .25s both}
  .hero .wm-mid{animation:wm-mid 1.05s cubic-bezier(.2,.7,.2,1) .4s both}
  .hero .wm-outer{stroke-dasharray:571;animation:wm-outer 1s cubic-bezier(.45,.05,.2,1) .8s both}
  .hero .carrier-line{transform-origin:left center;animation:carrier 1.2s cubic-bezier(.45,.05,.2,1) 1.55s both}
}
@keyframes wm-dot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes wm-inner{from{opacity:0;transform:rotate(-72deg)}to{opacity:1;transform:none}}
@keyframes wm-mid{from{opacity:0;transform:rotate(56deg)}to{opacity:1;transform:none}}
@keyframes wm-outer{from{stroke-dashoffset:571;transform:rotate(-90deg)}to{stroke-dashoffset:0;transform:rotate(-90deg)}}
@keyframes carrier{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ------------------------------------------------------------ page body */

.crumb{padding-top:1.5rem}
.as-breadcrumb{font-size:.88rem;color:var(--muted)}
.as-breadcrumb a{color:var(--muted);text-decoration:none;display:inline-block;padding:.4rem 0}
.as-breadcrumb a:hover{color:var(--signal)}

.body-grid{padding:clamp(2.25rem,6vw,4.5rem) 0 clamp(3.5rem,9vw,6.5rem)}
.is-inner .body-grid{padding-top:clamp(1.5rem,4vw,2.75rem)}
/* With a sidebar, text column and sidebar travel together, centred as one unit. */
.has-aside .body-grid{display:grid;grid-template-columns:minmax(0,var(--measure)) var(--aside-w);
  gap:var(--aside-gap);justify-content:center;align-items:start}
.has-aside .crumb{width:min(100% - 2 * var(--gutter), calc(var(--measure) + var(--aside-w) + var(--aside-gap)))}
@media (max-width:56rem){
  .has-aside .body-grid{grid-template-columns:minmax(0,var(--measure))}
  .has-aside .crumb{width:min(100% - 2 * var(--gutter), var(--measure))}
}

body:not(.has-aside) .content{max-width:var(--measure);margin-inline:auto}
body:not(.has-aside) .crumb{width:min(100% - 2 * var(--gutter), var(--measure))}
.content > .as-section + .as-section{margin-top:3rem}
.aside{font-size:1rem;color:var(--signal-2)}
.aside .as-section + .as-section{margin-top:2rem}

/* A visual builder section is laid out edge to edge, so it leaves the frame. */
.content > .as-mod-builder{margin-inline:calc(50% - 50vw)}
.has-aside .content > .as-mod-builder{margin-inline:0}

/* ------------------------------------------------------------ text */

.as-text{max-width:var(--measure)}
.as-text h1,.as-text h2,.as-text h3,.as-text h4{color:var(--signal);font-weight:700}
.as-text h1{font-size:clamp(2.1rem,4.2vw,3.2rem);font-stretch:var(--wide);font-weight:760;
  line-height:1.07;letter-spacing:-.012em;margin:0 0 1.35rem}
.as-text h2{font-size:clamp(1.5rem,2.7vw,2rem);font-stretch:118%;line-height:1.15;
  letter-spacing:-.006em;margin:2.75rem 0 .9rem}
.as-text h3{font-size:1.25rem;font-stretch:110%;font-weight:650;line-height:1.25;margin:2.1rem 0 .5rem}
.as-text h4{font-size:1.05rem;font-weight:650;margin:1.6rem 0 .4rem}
.as-text > :first-child{margin-top:0}
.as-text p{margin:0 0 1.15rem}
.as-text ul,.as-text ol{margin:0 0 1.25rem;padding-left:1.35rem}
.as-text li{margin:.3rem 0}
.as-text li::marker{color:var(--steel)}
.as-text strong{font-weight:650;color:var(--signal)}
.as-text blockquote{margin:2rem 0;padding:0 0 0 1.35rem;border-left:2px solid var(--steel);
  color:var(--signal-2);font-size:1.18rem;font-stretch:106%;line-height:1.45}
.as-text hr{border:0;border-top:1px solid var(--rule);margin:2.75rem 0}
.as-text img{height:auto;border-radius:2px}
.as-text figure{margin:2rem 0}
.as-text figcaption{margin-top:.6rem;font-size:.88rem;color:var(--muted)}
.as-text table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:1rem}
.as-text th{text-align:left;font-weight:600;font-size:.88rem;color:var(--muted);
  padding:.55rem .75rem .55rem 0;border-bottom:1px solid var(--rule-2)}
.as-text td{padding:.65rem .75rem .65rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.as-text code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
  background:var(--ground-2);border:1px solid var(--rule);padding:.08em .35em;border-radius:3px}
.as-text pre{background:var(--ground-2);border:1px solid var(--rule);border-radius:3px;
  padding:1rem 1.15rem;overflow-x:auto;font-size:.9rem;line-height:1.55}
.as-text pre code{background:none;border:0;padding:0}

/* Nothing a module prints may be wider than its column. On a phone a too-wide
   element does not scroll sideways, it makes the browser zoom the whole page out. */
.content iframe,.content video,.content embed,.content object,
.aside iframe,.aside video,.foot-block iframe{max-width:100%}
.content iframe[src*="youtube"],.content iframe[src*="youtu.be"],.content iframe[src*="vimeo"],
.aside iframe[src*="youtube"],.aside iframe[src*="youtu.be"],.aside iframe[src*="vimeo"]{
  width:100%;height:auto;aspect-ratio:16 / 9}
.as-text,.aside,.foot-block{overflow-wrap:break-word}
.as-text a{overflow-wrap:anywhere}
@media (max-width:40rem){
  /* A table too wide for the phone scrolls inside itself instead of widening the page. */
  .as-text table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    /* A faint haze at whichever edge has more to see, gone once you reach it. */
    background:
      linear-gradient(to right, var(--ground) 1.25rem, transparent) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left,  var(--ground) 1.25rem, transparent) right center / 2.5rem 100% no-repeat local,
      linear-gradient(to right, var(--haze), transparent) left center / 1.1rem 100% no-repeat scroll,
      linear-gradient(to left,  var(--haze), transparent) right center / 1.1rem 100% no-repeat scroll}
}

/* ------------------------------------------------------------ forms */

.as-form{max-width:38rem}
.as-form .as-form-intro{color:var(--signal-2);margin-bottom:1.5rem}
.as-form .as-field{margin:0 0 1.35rem}
.as-form .as-field > label,.as-form .as-group legend{font-weight:600;font-size:.95rem;color:var(--signal);margin-bottom:.4rem}
.as-form .as-field input[type=text],.as-form .as-field input[type=email],.as-form .as-field input[type=tel],
.as-form .as-field input[type=number],.as-form .as-field input[type=date],.as-form .as-field select,
.as-form .as-field textarea{
  width:100%;max-width:none;background:var(--ground-2);color:var(--signal);
  border:1px solid var(--rule-2);border-radius:3px;padding:.7rem .8rem;font:inherit;font-size:1rem
}
.as-form .as-field input:hover,.as-form .as-field select:hover,.as-form .as-field textarea:hover{border-color:var(--steel)}
.as-form .as-field input:focus-visible,.as-form .as-field select:focus-visible,.as-form .as-field textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:1px;border-color:transparent
}
.as-form .as-field textarea{min-height:9rem;resize:vertical}
.as-form .as-check{color:var(--signal-2)}
.as-form .as-check input{accent-color:var(--action);width:1.05rem;height:1.05rem}
.as-form .as-req{color:var(--amber)}
.as-form .as-field.has-error input,.as-form .as-field.has-error textarea,.as-form .as-field.has-error select{border-color:var(--fault)}
.as-form .as-field-error,.as-form .as-form-error{color:var(--fault)}
.as-form .as-form-heading{font-size:1.2rem;font-stretch:110%;margin:2.25rem 0 1rem}
.as-form .as-form-submit{
  background:var(--action);color:#fff;border:0;border-radius:3px;cursor:pointer;
  padding:.8rem 1.6rem;font:inherit;font-size:1rem;font-weight:650;font-stretch:110%
}
.as-form .as-form-submit:hover{background:var(--action-hover)}
.as-form-sent{max-width:38rem;background:var(--ground-2);color:var(--signal);
  border:1px solid var(--rule-2);border-left:2px solid var(--steel);padding:1.1rem 1.35rem;border-radius:3px}

/* ------------------------------------------------------------ visual builder blocks */

.as-builder .asb-wrap{max-width:var(--frame);padding-inline:var(--gutter)}
.as-builder .asb-hero{background:var(--ground-2);color:var(--signal);border-block:1px solid var(--rule)}
.as-builder .asb-hero-title{font-stretch:var(--wide);font-weight:760;letter-spacing:-.012em}
.as-builder .asb-hero-sub{color:var(--signal-2);opacity:1}
.as-builder .asb-btn{background:var(--action);color:#fff;border-radius:3px;font-weight:650;font-stretch:110%}
.as-builder .asb-btn:hover{background:var(--action-hover);color:#fff}
.as-builder .asb-card{background:var(--card-bg);border:1px solid var(--rule);border-radius:3px}
.as-builder .asb-card h3,.as-builder .asb-split h2,.as-builder .asb-band h2,
.as-builder .asb-schedule h2{font-stretch:112%;color:var(--signal)}
.as-builder .asb-card p,.as-builder .asb-split p,.as-builder .asb-band p{color:var(--signal-2)}
.as-builder .asb-band{background:var(--ground-2);border-block:1px solid var(--rule)}
.as-builder .asb-stat b{font-stretch:var(--wide);color:var(--signal)}
.as-builder .asb-stat span{color:var(--muted)}
.as-builder .asb-player{background:var(--ground-2);border-block:1px solid var(--rule)}
.as-builder .asb-sched-list li{border-bottom-color:var(--rule)}
.as-builder .asb-sched-time,.as-builder .asb-person p,.as-builder .asb-sponsors-label{color:var(--muted)}
.as-builder .asb-sponsors{background:transparent}
.as-builder .asb-sponsor{filter:grayscale(1) brightness(1.7);opacity:.65}
.as-builder .asb-rule{border-top-color:var(--rule)}
.as-builder .asb-img{border-radius:2px}

/* ------------------------------------------------------------ footer */

.site-foot{border-top:1px solid var(--rule);padding:2.75rem 0 2.25rem}
.foot-block{margin-bottom:2.25rem;color:var(--signal-2);font-size:1rem}
.foot-block .as-text{max-width:none}
.foot-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.colophon{margin:0;font-size:.9rem;color:var(--muted)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;list-style:none;margin:0;padding:0}
.foot-nav a{color:var(--muted);text-decoration:none;font-size:.9rem}
.foot-nav a:hover{color:var(--signal)}
.foot-nav .as-menu-2{display:none}
@media (max-width:52rem),(pointer:coarse){
  .foot-nav ul{gap:0 1.5rem}
  .foot-nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* ------------------------------------------------------------ system messages */

.as-module-error{background:var(--ground-2);border:1px solid var(--fault);color:var(--fault);padding:.8rem 1rem;border-radius:3px}
.as-builder-empty,.as-form-note{color:var(--muted);font-style:italic}

@media print{
  :root{--ground:#fff;--signal:#000;--signal-2:#333;--muted:#555;--rule:#ccc}
  .site-head,.site-foot .foot-nav,.carrier-line,.menu-toggle{display:none}
}


/* ------------------------------------------------------------ wordmark */
/* The inline wordmark is coloured here rather than in the file, so the same
   art works on paper or on the dark band at the foot. */
/* ON AIR: FUSI stays steel, the O N A I R go red, and the O's outer ring is the
   lamp. The amber dot and the inner arcs are left alone. */
.wm .wm-fusi{fill:var(--wm-ink)}
.wm .wm-n,.wm .wm-air{fill:var(--onair)}
.wm .wm-dot{fill:var(--wm-amber)}
.wm .wm-mid{stroke:var(--wm-ink)}
.wm .wm-inner{stroke:var(--wm-steel)}
.wm .wm-outer{stroke:var(--onair)}

/* ------------------------------------------------------------ warmth and depth */
/* A soft light behind the wordmark: the page opens warm rather than flat. */
.hero{background:var(--hero-bg)}

/* The sidebar reads as a card on paper. */
.aside{background:var(--card-bg);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.35rem 1.4rem;box-shadow:var(--shadow-sm)}
.aside > .as-section + .as-section{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--rule)}

/* Buttons that look like something you press. */
.as-btn,.as-form button,.as-builder .asb-btn{border-radius:6px;box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.as-btn:hover,.as-form button:hover,.as-builder .asb-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* Short pages still end at the bottom of the screen, not mid-way down it.
   The foot takes whatever room is left over, whatever sits above it. */
html{min-height:100%}
body{display:flex;flex-direction:column;min-height:100dvh}
.body-grid{padding-bottom:clamp(3rem,6vw,5rem)}

/* The foot: the one dark band, so the page ends on the brand. */
.site-foot{background:var(--ink-band);color:#c3ccd6;border-top:0;margin-top:auto;padding-block:2.5rem}
.site-foot a{color:#dfe5ec}
.site-foot a:hover{color:#fff}
.site-foot .head-mark .wm-fusi,.site-foot .head-mark .wm-n{fill:#e3e8ee}

/* Cards and bands the visual builder drops in, on paper. */
.as-builder .asb-hero{background:var(--ground-3);border-block:1px solid var(--rule)}
.as-builder .asb-card{background:var(--ground-2);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.as-builder .asb-stat b{color:var(--signal)}
.as-builder .asb-stats{background:var(--ground-3);border-block:1px solid var(--rule)}
.as-builder .asb-player{background:var(--ink-band);color:#dfe5ec;border-radius:var(--radius)}
.as-builder .asb-sponsors{background:var(--ground-3)}

/* Forms sit on a card too. */
.as-form{background:var(--card-bg);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm)}
.as-form input,.as-form textarea,.as-form select{background:var(--ground-2);border-color:var(--rule-2)}

/* ------------------------------------------------------------ night
   Night follows the visitor's own device setting, and the switch in the
   header overrides it. Both blocks below carry the same values: change one,
   change the other. */
/* Day is the site's face. Night is there for anyone who wants it, but it is a
   choice made with the switch, not something a phone set to dark imposes. */
:root[data-theme="night"]{
  color-scheme:dark;
  --ground:#08090b; --ground-2:#0f1216; --ground-3:#141920;
  --rule:#1d2229; --rule-2:#2a313a;
  --signal:#e3e8ee; --signal-2:#b9c1ca; --muted:#8b949e; --steel:#69737e;
  --amber:#f0a02c; --amber-deep:#f0a02c; --amber-wash:rgb(240 160 44 / .10);
  --action:#2c6fca; --action-hover:#3a80dc; --link:#7ab4f0; --link-hover:#a8ccf5; --fault:#f0736b;
  --ink-band:#0b0d10;
  --onair:#e8291d; --wm-ink:#e3e8ee; --wm-amber:#f0a02c; --wm-steel:#69737e;
  --head-bg:rgb(8 9 11 / .92);
  --hero-bg:radial-gradient(62rem 34rem at 50% -14%, rgb(240 160 44 / .09) 0%, rgb(240 160 44 / 0) 68%),
            linear-gradient(to bottom, #0b0d11 0%, var(--ground) 100%);
  --haze:rgb(227 232 238 / .16);
  --card-bg:#0f1216;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .5); --shadow-md:0 10px 30px rgb(0 0 0 / .55);
}

/* Log in, in the banner.
   Sized like the day/night switch beside it so the right-hand end of the
   header reads as one pair of controls, and carried at the nav's text size
   rather than smaller — this is a door people need to find, not a footnote. */
.head-login{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;flex:none;
  margin-left:.9rem;padding:.5rem 1rem;border:1px solid var(--rule-2);border-radius:6px;
  color:var(--signal);text-decoration:none;font-size:1.06rem;font-stretch:106%;font-weight:600;
  letter-spacing:-.004em;white-space:nowrap}
.head-login svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.head-login:hover,.head-login:focus-visible{color:#fff;background:var(--action);border-color:var(--action)}
.head-login:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* On a phone it sits beside the Menu button rather than wrapping to its own
   line, and loses the word — the door still reads as a door. */
@media (max-width:52rem){
  .head-login{margin-left:auto;margin-right:.5rem;padding:.5rem .7rem}
  .head-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:52rem){.mode-toggle{margin-left:0}}

/* The switch itself. */
.mode-toggle{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:.6rem;flex:none;padding:0;
  background:transparent;border:1px solid var(--rule-2);border-radius:6px;color:var(--signal-2);cursor:pointer}
.mode-toggle:hover{color:var(--signal);border-color:var(--muted)}
.mode-toggle svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.mode-toggle .sun{display:none}
:root[data-theme="night"] .mode-toggle .moon{display:none}
:root[data-theme="night"] .mode-toggle .sun{display:block}
@media (max-width:52rem){.mode-toggle{margin-left:auto;margin-right:.5rem}}

/* The header wordmark: ink art by day, light art by night. */
.head-mark .mark-night{display:none}
:root[data-theme="night"] .head-mark .mark-day{display:none}
:root[data-theme="night"] .head-mark .mark-night{display:block}


/* ------------------------------------------------------------ deeper pages */

/* The dropdown for a product family: each product and its pages are one group,
   and the groups sit in a grid. Grid wraps by itself, so nothing can land in a
   column past the edge of the panel the way multi-column allowed. */
@media (min-width:52.0625rem){
  .site-nav .as-menu-2:not(:has(.as-menu-3)){max-height:min(78vh,44rem);overflow-y:auto}

  .site-nav .as-menu-2:has(.as-menu-3){
    display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
    gap:.2rem 2.25rem;padding:1.4rem 1.6rem;border-radius:12px;
    width:max-content;min-width:min(54rem,calc(100vw - 3rem));max-width:min(calc(100vw - 2rem),72rem)}
  .site-nav .as-menu-2:has(.as-menu-3) > li{margin-bottom:1.1rem}

  /* The product reads as a heading, not as one more link in a list. */
  .site-nav .as-menu-2:has(.as-menu-3) > li > a{
    display:block;padding:.25rem 0 .5rem;margin-bottom:.4rem;font-size:1.04rem;line-height:1.25;
    font-weight:720;font-stretch:112%;letter-spacing:-.01em;color:var(--signal);
    border-bottom:1px solid var(--rule)}
  .site-nav .as-menu-2:has(.as-menu-3) > li > a:hover{border-bottom-color:var(--amber);color:var(--signal)}
  .site-nav .as-menu-2:has(.as-menu-3) > li.is-current > a,
  .site-nav .as-menu-2:has(.as-menu-3) > li.is-open > a{border-bottom-color:var(--amber)}

  /* Its pages: big enough to read, tall enough to hit. */
  .site-nav .as-menu-3{display:block;position:static;background:none;border:0;padding:0;min-width:0;
    opacity:1;transform:none;box-shadow:none}
  .site-nav .as-menu-3 > li > a{
    display:block;position:relative;padding:.42rem .6rem .42rem .85rem;border-radius:6px;
    font-size:.95rem;line-height:1.35;font-weight:520;color:var(--signal-2)}
  .site-nav .as-menu-3 > li > a::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:2px;
    border-radius:2px;background:var(--amber);opacity:0;transition:opacity .12s ease}
  .site-nav .as-menu-3 > li > a:hover{background:var(--ground-3);color:var(--signal)}
  .site-nav .as-menu-3 > li > a:hover::before{opacity:1}
  .site-nav .as-menu-3 .is-current > a{color:var(--signal);font-weight:650}
  .site-nav .as-menu-3 .is-current > a::before{opacity:1}

  /* A fourth level is rare: legible, just quieter and tucked in. */
  .site-nav .as-menu-4{display:block;position:static;background:none;border:0;min-width:0;
    padding:0 0 .1rem .85rem;opacity:1;transform:none;box-shadow:none}
  .site-nav .as-menu-4 > li > a{padding:.32rem .6rem .32rem .85rem;font-size:.9rem;color:var(--muted)}
  .site-nav .as-menu-4 > li > a:hover,.site-nav .as-menu-4 .is-current > a{color:var(--signal-2)}

  .site-nav .as-menu-2 .sub-toggle{display:none}   /* the deeper levels are already open */
}

/* The pages under this one, as cards, at the end of the page. */
.page-kids{margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid var(--rule)}
.page-kids-head{font-size:1.15rem;font-stretch:112%;margin:0 0 1rem}
.page-kids ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.page-kids a{display:block;height:100%;padding:1rem 1.1rem;background:var(--card-bg);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--signal);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.page-kids a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--amber)}
.pk-name{display:block;font-weight:650;font-stretch:108%}
.pk-desc{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.45;color:var(--signal-2)}
@media (max-width:52rem){
  .page-kids a{min-height:44px}
}