/* Saxo cool layer — cinematic, handmade, not generic AI purple */

:root,
html[data-theme="light"]{
  --sb-ink:#0b0d10;
  --sb-fog:#e8eaed;
  --sb-page:#eceff3;
  --sb-mute:#6b7280;
  --sb-ice:#19b5fe;
  --sb-ice-soft:#8fd3ff;
  --sb-ice-dim:rgba(25,181,254,.16);
  --sb-panel:#ffffff;
  --sb-panel-border:rgba(26,31,39,.14);
  --sb-heading:#0b0d10;
  --sb-text:#1a1f27;
  --sb-line:rgba(26,31,39,.1);
  --sb-ease:cubic-bezier(.22,1,.36,1);
  --sb-display:"Syne",system-ui,sans-serif;
  --sb-body:"Manrope",system-ui,sans-serif;
  color-scheme:light;
}

html[data-theme="dark"]{
  --sb-ink:#f3f5f7;
  --sb-fog:#12151a;
  --sb-page:#0c0e12;
  --sb-mute:#9aa3b2;
  --sb-ice:#5cc8ff;
  --sb-ice-soft:#8fd3ff;
  --sb-ice-dim:rgba(92,200,255,.18);
  --sb-panel:#171b22;
  --sb-panel-border:rgba(255,255,255,.1);
  --sb-heading:#f5f7fa;
  --sb-text:#d5dae3;
  --sb-line:rgba(255,255,255,.1);
  color-scheme:dark;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---- View Transitions (MPA nav + themed toggles) ---- */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.32s;
  animation-timing-function:var(--sb-ease);
}
.site-nav{
  view-transition-name:site-nav;
}
/* Theme toggle: clip reveal driven from JS; kill default root morph */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}
html.theme-vt::view-transition-old(root){z-index:1}
html.theme-vt::view-transition-new(root){z-index:999}
@media (prefers-reduced-motion:reduce){
  @view-transition{
    navigation:none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none!important;
  }
}

body,#main,p,li,a,button,input,.button,.copyright{
  font-family:var(--sb-body);
}

h1,h2,h3,h4,#banner h1,#banner2 h1,.gallery header h1,.gamesinn header h1,.inner > header h1{
  font-family:var(--sb-display);
  letter-spacing:-.02em;
}

/* ---- Theme toggle (lives in top nav) ---- */
.theme-toggle{
  width:2.35rem;
  height:2.35rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:inherit;
  box-shadow:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--sb-ease);
}
.theme-toggle:hover{
  transform:none;
  border-color:var(--sb-panel-border);
  background:var(--sb-panel);
  color:var(--sb-heading);
}
.theme-toggle:focus-visible{outline:2px solid var(--sb-ice);outline-offset:3px}
.theme-toggle__sun,.theme-toggle__moon{display:inline-flex;line-height:0}
.theme-toggle__sun{display:none}
html[data-theme="dark"] .theme-toggle__moon{display:none}
html[data-theme="dark"] .theme-toggle__sun{display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .theme-toggle{transition:none}
}
/* Hide legacy darkmode-js widget if an old cache still injects it */
.darkmode-toggle,.darkmode-layer,.darkmode-background{display:none!important}

/* ---- Editorial top nav (no icon rail) ---- */
.page-wrap{display:block!important}
#nav.site-nav,
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:1.25rem;
  width:100%;
  box-sizing:border-box;
  padding:.85rem clamp(1rem,3vw,2.25rem);
  background:rgba(236,239,243,.82);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--sb-line);
  pointer-events:auto;
}
html[data-theme="dark"] #nav.site-nav,
html[data-theme="dark"] .site-nav{
  background:rgba(12,14,18,.78);
}
.site-nav__brand{
  flex:0 0 auto;
  font-family:var(--sb-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.03em;
  text-decoration:none!important;
  color:var(--sb-heading)!important;
  transition:color .2s ease;
}
.site-nav__brand:hover{color:var(--sb-ice)!important}
.site-nav__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.15rem .05rem;
  flex:1 1 auto;
  margin:0;
  padding:0;
  list-style:none;
  min-width:0;
}
.site-nav__links a{
  display:inline-block;
  padding:.4rem .7rem;
  font-family:var(--sb-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none!important;
  color:var(--sb-mute)!important;
  background:transparent!important;
  border-radius:0;
  box-shadow:none!important;
  transition:color .2s ease;
}
.site-nav__links a:hover{
  color:var(--sb-heading)!important;
  background:transparent!important;
}
.site-nav__links a.is-active,
.site-nav__links a[aria-current="page"]{
  color:var(--sb-heading)!important;
  box-shadow:inset 0 -2px 0 var(--sb-ice)!important;
}
.site-nav__links a:focus-visible{
  outline:2px solid var(--sb-ice);
  outline-offset:3px;
  border-radius:4px;
}
.site-nav__end{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  flex:0 0 auto;
  margin-left:.25rem;
}
.site-nav__search{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  height:2.35rem;
  margin:0;
  padding:0;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  overflow:hidden;
}
.site-nav__search.is-open{
  background:var(--sb-panel);
  border-color:var(--sb-panel-border);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.site-nav__search-panel{
  display:block;
  overflow:hidden;
  width:0;
  max-width:0;
  opacity:0;
  will-change:max-width,opacity;
}
.site-nav__search-input{
  display:block;
  box-sizing:border-box;
  width:14rem;
  max-width:56vw;
  height:2.35rem;
  margin:0;
  padding:0 .35rem 0 1rem;
  border:0;
  background:transparent;
  color:var(--sb-heading);
  font-family:var(--sb-body);
  font-size:.9rem;
  font-weight:500;
}
.site-nav__search-input:focus{outline:none}
.site-nav__search-input::placeholder{
  color:var(--sb-mute);
  opacity:.9;
}
.site-nav__search-toggle,
.site-nav__search-submit{
  position:relative;
  flex:0 0 auto;
  width:2.35rem;
  height:2.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--sb-mute);
  cursor:pointer;
}
.site-nav__search-toggle:hover,
.site-nav__search-submit:hover{
  color:var(--sb-heading);
  background:rgba(0,0,0,.04);
}
.site-nav__search-toggle:focus-visible,
.site-nav__search-submit:focus-visible{
  outline:2px solid var(--sb-ice);
  outline-offset:3px;
}
.site-nav__search.is-open:focus-within{
  border-color:var(--sb-ice);
}
.site-nav__search.is-open .site-nav__search-toggle{display:none}
.site-nav__search.is-open .site-nav__search-submit{display:inline-flex}
.site-nav__search-submit[hidden]{display:none!important}
.site-nav__search.is-open .site-nav__search-submit[hidden]{display:inline-flex!important}
#main{
  width:100%!important;
  box-sizing:border-box;
  padding-left:0!important;
}

/* Home / eco: nav dissolves into the photo — links ride the top-right */
body.page-home #nav.site-nav,
body.page-eco #nav.site-nav{
  position:fixed;
  left:0;
  right:0;
  top:0;
  justify-content:flex-end;
  gap:.35rem 1rem;
  padding:1.35rem clamp(1rem,3vw,2.5rem);
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.12) 75%,transparent)!important;
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.page-home .site-nav__brand,
body.page-eco .site-nav__brand{
  display:none;
}
body.page-home .site-nav__links,
body.page-eco .site-nav__links{
  flex:0 1 auto;
  justify-content:flex-end;
}
body.page-home .site-nav__links a,
body.page-eco .site-nav__links a,
body.page-home .site-nav__search-toggle,
body.page-eco .site-nav__search-toggle,
body.page-home .site-nav__search-submit,
body.page-eco .site-nav__search-submit,
body.page-home .theme-toggle,
body.page-eco .theme-toggle{
  color:rgba(255,255,255,.82)!important;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
body.page-home .site-nav__links a:hover,
body.page-eco .site-nav__links a:hover,
body.page-home .site-nav__search-toggle:hover,
body.page-eco .site-nav__search-toggle:hover,
body.page-home .site-nav__search-submit:hover,
body.page-eco .site-nav__search-submit:hover,
body.page-home .theme-toggle:hover,
body.page-eco .theme-toggle:hover{
  color:#fff!important;
  background:rgba(255,255,255,.1);
  border-color:transparent;
}
body.page-home .site-nav__search.is-open,
body.page-eco .site-nav__search.is-open{
  background:rgba(8,10,14,.72);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.page-home .site-nav__search-input,
body.page-eco .site-nav__search-input{
  color:#fff;
  text-shadow:none;
}
body.page-home .site-nav__search-input::placeholder,
body.page-eco .site-nav__search-input::placeholder{
  color:rgba(255,255,255,.62);
}
body.page-home .site-nav__links a.is-active,
body.page-home .site-nav__links a[aria-current="page"],
body.page-eco .site-nav__links a.is-active,
body.page-eco .site-nav__links a[aria-current="page"]{
  color:#fff!important;
  box-shadow:inset 0 -2px 0 var(--sb-ice-soft)!important;
}

/* Quiet the PWA offline toast so it doesn't steal the hero */
pwa-update{
  opacity:.72;
  transform:scale(.92);
  transform-origin:bottom right;
}

@media screen and (max-width:900px){
  .site-nav{
    flex-wrap:wrap;
    gap:.55rem .75rem;
    padding:.75rem 1rem;
  }
  .site-nav__brand{font-size:1rem}
  .site-nav__links{
    order:3;
    width:100%;
    justify-content:flex-start;
    gap:0;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:.15rem;
    -webkit-overflow-scrolling:touch;
  }
  .site-nav__links a{padding:.35rem .55rem;font-size:.72rem;white-space:nowrap}
  .site-nav__end{margin-left:auto}
  body.page-home .site-nav__brand,
  body.page-eco .site-nav__brand{display:none}
  body.page-home #nav.site-nav,
  body.page-eco #nav.site-nav{
    padding:1rem .85rem .75rem;
  }
}

@media screen and (max-width:736px){
  #main{padding-left:0!important}
}

/* ---- Page feel ---- */
html.js-ux:not(.is-ready) #main{opacity:0;transform:translateY(8px)}
html.js-ux.is-ready #main{opacity:1;transform:none;transition:opacity .45s var(--sb-ease),transform .45s var(--sb-ease)}
#main{
  background:
    radial-gradient(1200px 600px at 10% -10%,var(--sb-ice-dim),transparent 55%),
    var(--sb-page)!important;
  color:var(--sb-text);
  transition:background .25s ease,color .25s ease;
}
body{
  background:var(--sb-page)!important;
  color:var(--sb-text)!important;
}
a{color:var(--sb-ice)}
a:hover{color:var(--sb-ice-soft)}
.box{
  background:var(--sb-panel);
  border-color:var(--sb-panel-border);
  color:var(--sb-text);
}

/* ---- Home hero ---- */
#banner[data-hero]{
  perspective:1000px;
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  /* 100vh overshoots browser chrome / Windows taskbar; svh fits the visible frame */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  height:100vh;
  height:100svh;
  height:100dvh;
  max-height:100vh;
  max-height:100svh;
  max-height:100dvh;
  padding:7em 1.5em max(6em, calc(3em + env(safe-area-inset-bottom, 0px)));
  overflow:hidden;
  background-color:#0b0d10;
  /* tiny placeholder while the sharp <picture> arrives */
  background-image:url(/images/bannerlow.webp)!important;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:scroll!important;
}
#banner[data-hero] .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  pointer-events:none;
}
#banner[data-hero] .hero-bg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* keep natural color from the Immich master; light punch only */
  filter:contrast(1.04) saturate(1.05);
}
#banner[data-hero]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(105deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.14) 45%,rgba(0,0,0,.38) 100%),
    radial-gradient(ellipse at 50% 42%,transparent 28%,rgba(0,0,0,.4) 100%);
}
#banner[data-hero]::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:22%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(11,13,16,.72),transparent);
}
/* Light mode: inverted vignette — soft bright edges, slight centre shade for type */
html[data-theme="light"] #banner[data-hero]::before{
  background:
    linear-gradient(105deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.28) 100%),
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.12) 32%,transparent 70%);
}
html[data-theme="light"] #banner[data-hero]::after{
  background:linear-gradient(to top,rgba(236,239,243,.88),transparent);
}
#banner[data-hero] > .inner{position:relative;z-index:2;max-width:44rem}
#banner[data-hero] .inner{
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  will-change:transform;
}
#banner[data-hero] h1{
  font-size:clamp(2.8rem,8vw,5.2rem);
  line-height:.95;
  margin:0 0 .35em;
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.55);
}
#banner[data-hero] .hero-tagline{
  display:inline-block;
  margin:0 0 1.4em;
  padding:0 0 .4em;
  border-bottom:1px solid rgba(143,211,255,.55);
  max-width:100%;
}
#banner[data-hero] .hero-tagline__stage{
  display:block;
  overflow:hidden;
  min-height:1.55em;
  line-height:1.45;
}
#banner[data-hero] [data-tagline]{
  display:block;
  margin:0;
  padding:0;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:none;
  color:rgba(255,255,255,.92);
  border:0;
  will-change:transform,opacity;
}

html.js-ux #banner[data-hero]:not(.is-ready):not(.is-reduced) [data-hero-stagger]{
  opacity:0;
  transform:translateY(18px);
}
#banner[data-hero].is-ready [data-hero-stagger]{animation:sb-hero-in .7s var(--sb-ease) forwards}
#banner[data-hero].is-ready [data-hero-stagger]:nth-child(1){animation-delay:.06s}
#banner[data-hero].is-ready [data-hero-stagger]:nth-child(2){animation-delay:.18s}
#banner[data-hero].is-ready [data-hero-stagger]:nth-child(3){animation-delay:.3s}
#banner[data-hero].is-reduced [data-hero-stagger]{opacity:1;transform:none;animation:none}
@keyframes sb-hero-in{to{opacity:1;transform:translateY(0)}}

#banner .search-wrap{max-width:28rem;margin:0 auto}
#banner .sbx-custom2__input,
#banner .searchbox input[type="search"]{
  background:rgba(8,10,14,.7)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 16px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border-radius:999px!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#banner .sbx-custom2__input:focus,
#banner .searchbox input[type="search"]:focus{
  border-color:rgba(143,211,255,.7)!important;
  box-shadow:0 0 0 3px rgba(143,211,255,.2),0 16px 50px rgba(0,0,0,.45);
  outline:none;
}
#banner .sbx-custom2__input::placeholder{color:rgba(255,255,255,.62)}
#banner .sbx-custom2__submit,
#banner .sbx-custom2__reset{color:#fff}

/* ---- Content pages ---- */
.gallery > header,
.gallery header,
.gamesinn > header,
.inner > header{
  align-items:flex-end;
  gap:1rem;
  margin-bottom:1.25rem;
}
.gallery header h1,
.gamesinn header h1,
.inner > header h1,
#main .inner > header h1{
  color:var(--sb-heading);
  font-weight:800;
  font-size:clamp(2rem,4vw,2.75rem);
  margin:0;
}
.gallery header h3,
.column header h3{
  font-family:var(--sb-display);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--sb-heading);
}

/* Portfolio filters — quiet text chips, not a white slab */
.gallery ul.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .15rem;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  background:none;
  border:0;
  box-shadow:none;
}
.gallery ul.tabs li{
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
.gallery ul.tabs li + li::before{
  content:none;
}
.gallery .tabs .button,
.gallery ul.tabs .button,
#main .gallery .tabs .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0;
  padding:.4em .85em!important;
  background:transparent!important;
  color:var(--sb-mute)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--sb-body)!important;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.2;
  transition:color .2s ease,box-shadow .2s ease;
}
.gallery .tabs .button:hover,
#main .gallery .tabs .button:hover{
  background:transparent!important;
  color:var(--sb-heading)!important;
  transform:none;
  box-shadow:none!important;
}
.gallery .tabs .button.active,
#main .gallery .tabs .button.active{
  background:transparent!important;
  color:var(--sb-heading)!important;
  border:0!important;
  box-shadow:inset 0 -2px 0 var(--sb-ice)!important;
}

/* ---- Portfolio grid ---- */
.gallery{padding:2.5em 2.5em 3.5em}
.gallery .content{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  overflow:visible;
}
.gallery .content .media{
  width:calc(25% - 8px)!important;
  margin:0!important;
  border-radius:10px;
  overflow:hidden;
  border:0!important;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 28px rgba(15,23,42,.08);
  opacity:1!important;
  animation:none!important;
  transition:transform .28s var(--sb-ease),box-shadow .28s var(--sb-ease);
  background:#0b0d10;
}
html[data-theme="dark"] .gallery .content .media{
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.35);
}
.gallery .content .media a{display:block;cursor:zoom-in;line-height:0}
.gallery .content .media img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .45s var(--sb-ease),filter .3s ease;
  filter:saturate(1.05) contrast(1.02);
}
.gallery .content .media:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  z-index:3;
  border-color:transparent;
}
.gallery .content .media:hover img{
  transform:scale(1.06);
  filter:saturate(1.12) contrast(1.05);
}

@media screen and (max-width:980px){
  .gallery .content .media{width:calc(33.333% - 8px)!important}
}
@media screen and (max-width:736px){
  .gallery{padding:1.25em}
  .gallery .content .media{width:calc(50% - 6px)!important}
  .gallery .content{gap:8px}
}

/* ---- Games / tools ---- */
.gamesinn,.inner.gamesinn{padding-bottom:2rem}
.gamesinn .columns,
.columns.double{
  gap:1.5rem;
}
.gamesinn ol,
.column ol{
  list-style:none;
  padding-left:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  counter-reset:sb-item;
}
.gamesinn ol li,
.column ol li{
  margin:0;
  counter-increment:sb-item;
}
.gamesinn ol li::before,
.column ol li::marker{content:none}
.gamesinn br{display:none}

.gamesinn .button,
.column .button,
.tools .button,
#main .column .button,
#main .gamesinn .button{
  min-width:0;
  width:100%;
  max-width:18rem;
  text-align:left;
  border-radius:12px!important;
  border:1px solid var(--sb-panel-border)!important;
  background:var(--sb-panel)!important;
  color:var(--sb-heading)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 20px rgba(15,23,42,.05);
  font-weight:600;
  padding:.7em 1em!important;
  transition:transform .2s var(--sb-ease),box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.gamesinn .button:hover,
.column .button:hover,
#main .column .button:hover,
#main .gamesinn .button:hover{
  transform:translateY(-2px);
  border-color:var(--sb-ice)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  background:var(--sb-panel)!important;
}
.gamesinn .button.w3-gray,
.column .button.w3-gray,
#main .column .button.w3-gray{
  background:var(--sb-heading)!important;
  color:var(--sb-page)!important;
  border-color:var(--sb-heading)!important;
}

/* ---- Footer — quiet, no pill bar ---- */
#footer{
  padding:2.75rem 1.75rem 3.25rem;
  margin-top:1rem;
  background:var(--sb-page)!important;
  border-top:1px solid var(--sb-line);
}
#footer .navbar{display:none} /* legacy class unused */
#footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem .15rem;
  margin:0 0 1.35rem;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
#footer .footer-links a{
  float:none;
  display:inline-block;
  padding:.35rem .7rem;
  color:var(--sb-mute)!important;
  background:transparent!important;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:0;
  transition:color .2s ease;
}
#footer .footer-links a:hover,
#footer .footer-links a.active{
  color:var(--sb-heading)!important;
  background:transparent!important;
  box-shadow:inset 0 -2px 0 var(--sb-ice);
}
#footer .copyright{
  color:var(--sb-mute)!important;
  line-height:1.65;
  max-width:38rem;
  margin:0 auto;
  padding:0;
  font-size:.88rem;
  text-align:center;
}
#footer .copyright--year{
  margin-bottom:.65rem;
  color:var(--sb-text);
  font-weight:600;
  letter-spacing:.02em;
}
#footer .copyright--ack{
  font-size:.8rem;
  opacity:.9;
}

/* Banner stays photographic in both themes */
#banner,#banner2,#banner img,#banner2 img,
.gallery .content .media img,
.gallery .content .media picture{
  color-scheme:only light;
}

@media (prefers-reduced-motion:reduce){
  html.js-ux:not(.is-ready) #main,
  html.js-ux.is-ready #main{opacity:1;transform:none;transition:none}
  #nav ul li a,#nav ul li a:hover{transition:none;transform:none}
  #banner[data-hero] .inner{transition:none!important;transform:none!important}
  html.js-ux #banner[data-hero]:not(.is-ready):not(.is-reduced) [data-hero-stagger],
  #banner[data-hero].is-ready [data-hero-stagger]{opacity:1;transform:none;animation:none}
  #banner [data-tagline]{transition:none}
  .gallery .content .media,.gallery .content .media img,
  .gamesinn .button,.column .button{transition:none}
  .gallery .content .media:hover,.gallery .content .media:hover img,
  .gamesinn .button:hover{transform:none;box-shadow:none}
}

@media screen and (max-width:736px){
  #banner[data-hero]{
    min-height:100svh;
    min-height:100dvh;
    height:100svh;
    height:100dvh;
    max-height:100svh;
    max-height:100dvh;
    padding:5.5em 1.25em max(4em, calc(2.5em + env(safe-area-inset-bottom, 0px)));
  }
  #footer .footer-links a{padding:.4rem .55rem;font-size:.78rem}
}

/* ---- About + section ledes ---- */
.section-lede{
  margin:.35rem 0 1.25rem;
  max-width:36rem;
  color:var(--sb-mute);
  font-size:.98rem;
  line-height:1.45;
}
.section-lede a{color:var(--sb-ice);text-decoration:underline;text-underline-offset:2px}
.about-page{
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,3vw,2.25rem) 4rem;
}
.about-page__inner{max-width:40rem;margin:0 auto}
.about-page h1{
  margin:0 0 .35rem;
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--sb-heading);
}
.about-page__lede{
  margin:0 0 1.75rem;
  color:var(--sb-mute);
  font-size:1.05rem;
}
.about-page h2{
  margin:2rem 0 .75rem;
  font-size:1.15rem;
  color:var(--sb-heading);
}
.about-page__facts{
  display:grid;
  gap:1rem;
  margin:0;
}
.about-page__facts > div{
  padding-bottom:1rem;
  border-bottom:1px solid var(--sb-line);
}
.about-page__facts dt{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sb-mute);
  margin:0 0 .2rem;
}
.about-page__facts dd{
  margin:0;
  color:var(--sb-text);
  font-size:1.05rem;
  line-height:1.45;
}
.about-page__mute{color:var(--sb-mute);font-size:.92em}
.about-page__links{
  margin:0;
  padding-left:1.1rem;
  color:var(--sb-text);
  line-height:1.55;
}
.about-page__links a{color:var(--sb-ice)}
.about-page__foot{
  margin:2.25rem 0 0;
  color:var(--sb-mute);
  font-size:.92rem;
  line-height:1.45;
}