/* assets/css/base.css */

/* Project font stack (local files) */
@font-face{
  font-family: "Neuezeit";
  src: url("../../fonts/Neuzeit Grotesk W01 Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Neuezeit";
  src: url("../../fonts/NeuzeitSBook.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Neuezeit";
  src: url("../../fonts/DIN 30640 Std Neuzeit Grotesk Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Neuezeit";
  src: url("../../fonts/Neuzeit Grotesk Cond W01 Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --app-vh: 100dvh;
  --pad: 28px;

  --h1: 56px;
  --h2: 28px;
  --p: 16px;

  --fg: #fff;
  --bg: #000;
  --scr-footer-height: clamp(220px, 24vh, 280px);

  --font-sans: "Neuezeit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.005em;
  margin: 0;
}

p{ margin: 0; }

a{
  color: inherit;
  text-decoration: none;
}

img, video{
  max-width: 100%;
  display: block;
}

/* Container for content */
.container{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1280px){
  .container{ max-width: 90%; }
}

@media (max-width: 1024px){
  .container{ max-width: 88%; }
}

@media (max-width: 768px){
  .container{ max-width: 92%; }
}

@media (max-width: 640px){
  .container{ max-width: calc(100% - 36px); }
}

/* Focus visible for keyboard navigation */
:focus-visible{
  outline: 2px solid #e17bff;
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}