/* Ballante: build spec 2026-10-04, direction "Acido".
   Two colours only. No external requests. No animation. */

@font-face {
  font-family: "Libre Caslon Text";
  src: url("fonts/LibreCaslonText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --field: #D4DE3A; /* chartreuse */
  --ink: #000000;   /* 14.31:1 on --field */
}

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

html {
  background: var(--field);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

/* Links: underlined, black, hover thickens the underline */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Skip link: off-screen until focused */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 8px 12px;
  background: var(--field);
  z-index: 10;
}
.skip-link:focus { top: 16px; }

/* First screen: exactly one screen tall */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 96px; /* bottom room keeps the lockup clear of the links */
  padding-top: 96px;
}

.wordmark {
  margin: 0;
  text-align: center;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 66px);
  line-height: 1.04;
  letter-spacing: 0.06em;
}
.wordmark__tagline {
  display: block;
  margin-top: 0.7em;
  font-size: max(12px, 0.26em);
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.hero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
}
.hero-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.hero-nav a {
  display: inline-block;
  padding: 10px 0;
  text-underline-offset: 6px;
}

/* Content below the first screen */
.content {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 40px;
  max-width: 1440px;
  padding: 48px 48px 120px;
}
.block { min-width: 0; }
.block--about { flex: 2 1 640px; }
.block--clients { flex: 1 1 280px; }
.block--contact { flex: 1 1 240px; text-align: right; }

.label {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
}

.columns {
  columns: 2 280px;
  column-gap: 32px;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* No hyphenation anywhere, ever */
.prose {
  hyphens: none;
  -webkit-hyphens: none;
  text-align: left;
}
.nobreak { white-space: nowrap; }

/* Justify only where columns are wide enough to carry it */
@media (min-width: 1024px) {
  .prose { text-align: justify; }
}

/* Phones */
@media (max-width: 640px) {
  .content { padding: 40px 16px 80px; }
  .block--contact { text-align: left; }
}

/* Nothing moves, for anyone */
html { scroll-behavior: auto; }