/* ============================================================
   Art direction: minimal boilerplate
   Palette: white (#ffffff) bg · #ff5200 accent · #b3e8c2 complement
   Typography: JetBrains Mono (local woff2) — monospace only
   ============================================================ */

/* ------------------------------------------------------------------
   @font-face — JetBrains Mono (all weights, normal + italic)
   Place the .woff2 files in the same folder as this CSS file
   (or adjust the url() paths to match your directory structure).
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}


:root {
  /* Palette */
  --color-bg:          #ffffff;
  --color-accent:      #ff5200;
  --color-complement:  #b3e8c2;
  --color-text:        #000000;
  --color-text-inverse:#ffffff;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  /* Spacing (4px base unit) */
  --space-2:  0.5rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Content width */
  --content-narrow: 640px;
}

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

main {
  max-width: 20cm;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.15;
}

p, li {
  text-wrap: pretty;
  max-width: 72ch;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.hero, footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10vh;
  background-color: var(--color-accent);
}

footer {
  background-color: var(--color-complement);
}

h1, h2 {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;         /* Regular */
  color: var(--color-text-inverse);
  text-align: center;
  letter-spacing: 0.01em;
}

h1 {
  font-size: var(--text-lg);
}

h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1cm;
  min-height: 5vh;
  background-color: var(--color-accent);

  margin-bottom: 0.5cm;
  margin-top: 0.5cm;
}

.content {
  background-color: var(--color-bg);
  padding: var(--space-12) var(--space-8);
}

a {
  text-decoration: underline;
  color: var(--color-accent);
}

figure {
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
  border: 2mm solid var(--color-complement);
}

img {
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
}

figure > img {
    margin-top: 0;
    margin-bottom: 0;
}

figcaption {
  background-color: var(--color-complement);
  text-align: center;
}

::marker {
  color: var(--color-accent);
}

.content p {
  max-width: var(--content-narrow);
  /* left-aligned + justified */
  text-align: justify;
  text-align-last: left;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  margin-top: 0.5cm;
}