/* ── oskarmarcus.com — temporary ship (single page) ───────────────
   Static smoke field behind a left-anchored content column.
   Inter Tight body; Mona Sans italic for the name only. */

@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/InterTight-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/Mona-Sans-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* Brosign Brush — commercial Professional license (Alit Design).
   Ship the vendor .woff exactly as purchased: the EULA prohibits
   modifying the font software, so no subsetting or woff2 conversion. */
@font-face {
  font-family: 'Brosign Brush';
  src: url('/fonts/BrosignBrushRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: #1E3A8A;
  color: #EFEAE0;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  position: relative;
}

/* WebGL backdrop — gated by html[data-smoke="on"]. With smoke off the
   page sits on the flat html background colour. */
.smoke {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
html[data-smoke="off"] .smoke { display: none; }

/* ── content column ── */
.page {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  padding: clamp(3rem, 10vh, 6rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Hero name: brush script header. Brosign carries more visual mass
   per em than most scripts, so it sits a step smaller. */
.hero {
  font-family: 'Brosign Brush', 'Mona Sans', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.25rem, 7vw, 2.8rem);
  letter-spacing: 0;
  line-height: 1.15;
  color: #F8F4EC;
  margin-bottom: 0.25rem;
}

.voice {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 32rem;
}
.voice p { text-wrap: pretty; }

.work h2 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B9C2E0;
  margin-bottom: 0.65rem;
}
.work ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.work li, .work p {
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 32rem;
}

/* Links inherit body colour with a 1px underline; subtle hover. */
.page a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.page a:hover { opacity: 0.7; }

.page a:focus-visible {
  outline: 2px solid #EFEAE0;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Social links: small caps tracked, less prominent. */
.links {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B9C2E0;
  text-decoration: none;
}
.links a:hover { color: #F8F4EC; opacity: 1; }

::selection { background: #F8F4EC; color: #1E3A8A; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}