@charset "utf-8";
html{ font-family:sans-serif; font-kerning: normal; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img,svg{border:none;display:block;}
img{height:auto;width:100%;box-sizing:border-box;}
a:link,a:visited{text-decoration:none;}
a:active,a:hover {outline:0;}
a[href^="tel:"] { text-decoration: none !important; white-space: nowrap; }
a[x-apple-data-detectors]{color:inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;padding:0;margin:0;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input, textarea, button, select, label, a { -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: transparent; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
button, input[type=submit], input[type=password] { -webkit-appearance: none;-moz-appearance: none; appearance: none; border-radius: 0; }
textarea, input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
input:focus, input:hover { outline-style: none; box-shadow: none; }
button:focus, button:hover { outline-style: none; box-shadow: none; }
summary { user-select: none; }
video::-internal-media-controls-overlay-cast-button { display: none; }

::-moz-selection { background-color: var(--blue-dark); color: var(--blue-light); }
::selection { background-color: var(--blue-dark); color: var(--blue-light); }

@font-face{ font-family:"mono"; src:url("mono.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.loading { animation:fadeOut ease-in 1; animation-fill-mode: forwards; animation-duration: 0.5s; pointer-events: none; }
.fadein { opacity: 0; animation: fadeIn ease-in 1; animation-fill-mode: forwards; animation-duration: 0.5s; }
.hidden { opacity: 0; }
.inview { opacity: 1; transition: opacity 1s; }
.hide { display: none; opacity: 0; }

:root {
  --mono: "mono", sans-serif;
  --dark: #0A0A0A;
  --light: #FAF5F0;
  --blue-dark: #0e0062;
  --blue-light: #c2dbff;
  --orange: #ff5500;
  --burgandy: #64220b; 

  --background: var(--light);
  --colour: var(--dark);
  --font-size: 16px;
  --font-margin: 1em;
  --line-height: 1.15;
  --padding: 10px;
}

@media (max-width:800px) {
  :root {
    --font-size: 15px;
    --line-height: 1.2;
  }
}

@media (max-width:420px) {
  :root {
    --font-size: 14px;
    --line-height: 1.25;
  }
}

html { height: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { background-color: var(--background); color: var(--colour); font-family: var(--mono);font-size: var(--font-size); line-height: 1; height: 100%; }

a { color: var(--colour); transition: all .1s ease-out; }

p { font-size: var(--font-size); line-height: var(--line-height); margin: 0 0 var(--font-margin); }
p:last-child, p:only-child { margin-bottom: 0; }
strong { font-family: var(--mono); }
em { font-family: var(--mono); font-style: normal; }
h1 { font-size: var(--font-size); font-weight: normal; max-width: 70%; text-align: center; padding: var(--padding); position: fixed; top: 0; left: 50%; transform: translateX(-50%); }

/* The logo wrapper: fixed, centred, tilts in 3D */
#logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(800px) rotateX(0deg) rotateY(0deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-out; /* this easing gives the "lag" feel */
  will-change: transform;
  z-index: 8;
  margin: 0;
  pointer-events: none; /* tilt never fights with clicks */
}
#logo a { display: block; pointer-events: auto; color: inherit; text-decoration: none; }
#logo svg { fill: var(--colour); display: block; width: 50vw; max-width: 700px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  #logo { transition: none; }
}

footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 20px; height: 80px; }

body.home { --background: var(--blue-dark); --colour: var(--blue-light); }