@font-face {
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../assets/fonts/hubot-sans-latin-ext.woff2) format('woff2');
  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: 'Hubot Sans';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../assets/fonts/hubot-sans-latin.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/mona-sans-latin-ext.woff2) format('woff2');
  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: 'Mona Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/mona-sans-latin.woff2) format('woff2');
  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;
}

/* Swellset site: the shared system. The page is made of the mark's own materials, brushed silver,
   anodized blue and anodized yellow, each a Blender-rendered plate with one light crossing it. */
:root {
  --ink: #0B1B2B; --navy: #0A2A66; --blue: #004AAC; --yellow: #FFC72C; --silver: #B9BEC6;
  --display: 'Hubot Sans', 'Mona Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --body: 'Mona Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --vh: 100vh;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--silver); -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); color: var(--ink); background: var(--silver); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size: 17px; line-height: 1.42; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.on-blue :focus-visible, .head[data-g=blue] :focus-visible { outline-color: var(--yellow); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the plates: a Blender render, and a soft sheen that crosses it with no input */
.plate { position: absolute; inset: 0; background-size: cover; background-position: center; }
.plate.silver { background-color: #B9BEC6; background-image: url(../assets/plate-silver.webp); }
.plate.blue { background-color: #0D409E; background-image: url(../assets/plate-blue.webp); }
.plate.yellow { background-color: #E8B52A; background-image: url(../assets/plate-yellow.webp); }
.sheen { position: absolute; inset: -10% -60%; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(104deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 62%);
  will-change: transform; animation: sheen 9s linear infinite; }
@keyframes sheen { from { transform: translateX(-38%); } to { transform: translateX(38%); } }
.on-blue { color: #fff; }

/* header: it takes the variant of the ground under it (tokens.json): primary on silver, one blue on yellow, sand on blue */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 20px;
  display: flex; align-items: center; gap: 10px; }
.head[data-g=silver] { --hex: #004AAC; --wave: #D5992D; --swell: #004AAC; --set: #D5992D; --navc: #0A2A66; }
.head[data-g=yellow] { --hex: #004AAC; --wave: #004AAC; --swell: #004AAC; --set: #004AAC; --navc: #0A2A66; }
.head[data-g=blue] { --hex: #F4F1EA; --wave: #F4F1EA; --swell: #F4F1EA; --set: #F4F1EA; --navc: #fff; }
.lock { display: flex; align-items: flex-start; gap: 8px; height: 30px; margin-right: auto; text-decoration: none; }
.lock .m { height: 30px; width: 27.2px; }
.lock .w { height: 11.8px; width: 62px; margin-top: 7.7px; }
.lock svg * { transition: fill .35s, stroke .35s; }
.nav { display: none; gap: 4px; }
.nav a { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; font: 650 15px/1 var(--body); color: var(--navc); text-decoration: none; transition: color .35s, background .2s; }
.nav a:hover { background: rgba(255,255,255,.28); }
.nav a[aria-current=page] { box-shadow: 0 0 0 1.5px currentColor inset; }
.book { transition: background .35s, color .35s; height: 42px; padding: 0 20px; border-radius: 21px; background: var(--yellow); color: var(--ink);
  display: inline-flex; align-items: center; font: 700 15px/1 var(--body); text-decoration: none; flex: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 16px -10px rgba(11,27,43,.6); }
.head[data-g=yellow] .book { background: #0A2A66; color: #fff; }
.menu { width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(255,255,255,.34); display: grid; place-content: center; gap: 6px; cursor: pointer; flex: none;
  box-shadow: 0 0 0 1px rgba(11,27,43,.12) inset; }
.menu i { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--navc); transition: transform .25s; }
.head[data-g=blue] .menu { background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.menu[aria-expanded=true] i:first-child { transform: translateY(4px) rotate(45deg); }
.menu[aria-expanded=true] i:last-child { transform: translateY(-4px) rotate(-45deg); }
/* the bar behind the header, over long text on blue and once the page has scrolled on subpages */
.head::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: rgba(13,64,158,.97); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 10px 18px -12px rgba(0,16,60,.5); }
.head.frost::before { opacity: 1; }
.head.frost[data-g=silver]::before { background: rgba(196,201,208,.97); box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 10px 18px -12px rgba(11,27,43,.4); }
.head.frost[data-g=yellow]::before { background: rgba(236,186,44,.97); box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 10px 18px -12px rgba(60,40,0,.4); }
.drawer { position: fixed; z-index: 49; left: 0; right: 0; top: 0; padding: calc(80px + env(safe-area-inset-top, 0px)) 20px 26px; color: #fff; overflow: hidden;
  box-shadow: 0 24px 40px -20px rgba(0,16,60,.6); }
.drawer[hidden] { display: none; }
.drawer ul { position: relative; list-style: none; display: grid; gap: 2px; }
.drawer a { display: block; padding: 10px 0; font: 800 34px/1.05 var(--display); font-stretch: 96%; letter-spacing: -0.012em; text-decoration: none; }
.drawer .small a { font: 600 17px/1.3 var(--body); padding: 8px 0; }
.drawer .small { margin-top: 10px; }
@media (min-width: 820px) {
  .nav { display: flex; }
  .menu { display: none; }
  .head { padding: env(safe-area-inset-top, 0px) 20px 0 28px; }
}

/* buttons and chips */
.btn { display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 27px; background: var(--yellow); color: var(--ink);
  font: 700 16px/1 var(--body); text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 22px -12px rgba(11,27,43,.6); }
.btn.navy { background: var(--navy); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 30px; padding: 0 12px; border-radius: 15px; font: 600 13.5px/30px var(--body); white-space: nowrap; }
.on-blue .chip { background: rgba(255,255,255,.16); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset; }
.on-yellow .chip { background: rgba(11,27,43,.1); color: var(--ink); box-shadow: 0 0 0 1px rgba(11,27,43,.12) inset; }
.on-silver .chip { background: rgba(255,255,255,.5); color: var(--ink); box-shadow: 0 0 0 1px rgba(11,27,43,.1) inset; }

/* footer */
.foot { position: relative; z-index: 5; padding: 26px 20px calc(22px + env(safe-area-inset-bottom, 0px)); color: #22344a; font-size: 15px; }
.foot .fr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.foot .fr a { padding: 8px 8px; font-weight: 650; text-decoration: none; color: var(--navy); }
.foot .fr a:hover { text-decoration: underline; }
.foot .copy { margin-top: 8px; text-align: center; font-size: 14px; color: #33465c; }
.on-blue .foot, .foot.on-blue { color: rgba(255,255,255,.86); }
.on-blue .foot .fr a, .foot.on-blue .fr a { color: #fff; }
.on-blue .foot .copy, .foot.on-blue .copy { color: rgba(255,255,255,.8); }

/* the cookie notice: said once, dismissible */
.cookie { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 400px; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 16px; border-radius: 16px; background: rgba(251,251,249,.97); color: var(--ink); font-size: 14.5px; line-height: 1.35;
  box-shadow: 0 1px 0 #fff inset, 0 18px 30px -16px rgba(11,27,43,.55), 0 0 0 1px rgba(11,27,43,.08);
  transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.cookie.in { transform: none; }
.cookie[hidden] { display: none; }
.cookie p { flex: 1; }
.cookie button { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--navy); color: #fff; font: 700 14.5px/1 var(--body); cursor: pointer; }

/* reveals on subpages */
.rise { opacity: 0; transform: translateY(46px); transition: opacity .7s, transform .9s cubic-bezier(.2,.8,.2,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sheen { animation: none; display: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .cookie { transition: none; }
}