/* Infinity Foundry, design system v3 (2026-10-20): dark and premium, Sirnik composition (a strict grid, large display type with deliberate line breaks, an index that runs
   through the activities, generous rest) with Dopetrope influences (a solid header with a strong wordmark, a banner-scale opening, clearly framed activity blocks, a column footer).
   One accent, "ember": the glow of a foundry. See DESIGN.md. */

@font-face {
  font-family: "Foundry Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
}

@font-face {
  font-family: "Foundry Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Foundry Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

:root {
  --bg: #0b0d11;
  --surface: #11151c;
  --raise: #161b24;
  --line: #222935;
  --line-strong: #323b4a;
  --text: #edf0f5;
  --muted: #a9b2c1;
  --ember: #f2704a;
  --ember-text: #ff8a63;
  --ember-wash: rgba(242, 112, 74, 0.1);
  --serif: "Foundry Serif", Georgia, "Times New Roman", serif;
  --sans: "Foundry Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 66ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
  accent-color: var(--ember);
  caret-color: var(--ember);
  scrollbar-color: var(--line-strong) var(--bg);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  counter-reset: area;
}

::selection { background: var(--ember); color: var(--bg); }

a {
  color: var(--ember-text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
em { font-style: italic; }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---- the mark: two interlocking rings, the infinity of the name, drawn in CSS ---- */
.mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 2.15rem;
  height: 1.25rem;
}
.mark::before, .mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ember);
  border-radius: 50%;
}
.mark::before { left: 0; }
.mark::after { right: 0; border-color: var(--text); }

/* ---- header: a solid bar with the wordmark, the sections and the language ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 13, 17, 0.94);
  border-bottom: 1px solid var(--line);
}
/* two rows, as in Dopetrope: the wordmark and the language on top, the sections below; the Dutch labels are longer and never collide with the wordmark */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2rem;
  padding-top: 0.75rem;
}
.site-header .brand { order: 1; }
.site-header .lang { order: 2; margin-left: auto; }
.site-header .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin-top: 0.5rem; border-top: 1px solid var(--line); }
.site-header .site-nav::-webkit-scrollbar { display: none; }
.brand { margin: 0; flex: none; }
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.wordmark { font: 400 1.5rem/1 var(--serif); letter-spacing: -0.01em; }
.brand a:hover .mark::after { border-color: var(--ember); }

.site-nav { flex: 1; min-width: 0; }
.site-nav ul { display: flex; gap: 0.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font: 500 0.875rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ember); }

.lang {
  display: inline-flex;
  flex: none;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 600 0.8125rem/1 var(--sans);
  letter-spacing: 0.04em;
}
.lang a, .lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 44px;
  padding-inline: 0.875rem;
  border-radius: 999px;
}
.lang a { color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--text); }
.lang span[aria-current="true"] { background: var(--ember-wash); color: var(--ember-text); }

main { flex: 1; padding-bottom: 7rem; }

/* ---- the opening (home): banner-scale statement, the introduction offset in the reading column ---- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: clamp(2rem, 4vw, 3rem);
  padding-block: 9.5rem 7rem;
}
.hero h1 {
  grid-column: 1 / -1;
  max-width: 15ch;
  font-size: clamp(2.875rem, 7.6vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  animation: rise 1100ms var(--ease) both;
}
.hero h1 em { font-style: normal; color: var(--ember-text); }
/* the banner mark: the two rings of the logo at architectural scale, drawn as hairlines in the empty half of the opening (wide screens only) */
.hero { position: relative; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  top: 7.5rem;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before { right: 13.5rem; border: 1px solid var(--ember); opacity: 0.55; }
.hero::after { right: 0; border: 1px solid var(--line-strong); }
.hero .intro {
  grid-column: 6 / -1;
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
}

@keyframes rise {
  from { opacity: 0.35; transform: translateY(0.18em); }
  to { opacity: 1; transform: none; }
}

/* ---- blocks: what we do today (one full, solid frame) and where we are heading (open, dashed frames) ---- */
.block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2rem;
  padding-block: 6rem;
  border-top: 1px solid var(--line);
}
.block h2 {
  grid-column: 1 / 5;
  align-self: start;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  line-height: 1.12;
}
.areas {
  grid-column: 5 / -1;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.areas-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.area {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  padding: 2.75rem;
  border-radius: 1rem;
  counter-increment: area;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.area::before {
  content: counter(area, decimal-leading-zero);
  flex-basis: 100%;
  margin-bottom: 1.75rem;
  color: var(--ember-text);
  font: 600 0.875rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.area-now {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--ember);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
.area-next { border: 1px dashed var(--line-strong); }
.area:hover { border-color: var(--ember); }
.area-now:hover { background: var(--raise); }

.area-name {
  color: var(--text);
  font: 400 clamp(1.75rem, 3vw, 2.375rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.area-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.area-name:focus-visible { outline: none; }
.area:has(.area-name:focus-visible) { outline: 2px solid var(--ember); outline-offset: 3px; }
.area-text { flex-basis: 100%; max-width: 38rem; margin-top: 0.5rem; color: var(--muted); }

.ambition {
  color: var(--ember-text);
  font: italic 400 1.25rem/1 var(--serif);
}

.closing {
  padding-top: 6rem;
  border-top: 1px solid var(--line);
}
.closing a {
  font: 400 clamp(1.875rem, 4.4vw, 3.5rem)/1.1 var(--serif);
  letter-spacing: -0.015em;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ember);
  color: var(--text);
}
.closing a:hover { color: var(--ember-text); }

/* ---- inner pages: the same opening, smaller; the content in the reading column ---- */
.page-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.75rem;
  padding-top: 8rem;
  padding-bottom: 6rem;
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  grid-column: 1 / -1;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  animation: rise 1100ms var(--ease) both;
}
.page-head .lede, .page-head .status { grid-column: 6 / -1; }
.lede { color: var(--muted); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }

.status {
  justify-self: start;
  padding: 0.875rem 1.25rem;
  border: 1px dashed var(--ember);
  border-radius: 0.75rem;
  background: var(--ember-wash);
  color: var(--text);
  font: italic 400 clamp(1.25rem, 2vw, 1.5rem)/1.35 var(--serif);
}

.offer { margin: 0; padding: 0; list-style: none; counter-reset: offer; }
.offer li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: baseline;
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
  border-bottom: 1px solid var(--line);
  counter-increment: offer;
}
.offer h2 { grid-column: 6 / -1; grid-row: 1; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; }
.offer p { grid-column: 6 / -1; grid-row: 2; max-width: 40rem; margin-top: 1rem; color: var(--muted); }
.offer + .closing { border-top: 0; }
.offer li::before {
  content: counter(offer, decimal-leading-zero);
  grid-column: 1 / 6;
  grid-row: 1;
  color: var(--ember-text);
  font: 600 0.875rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.body-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  padding-top: 4.5rem;
}
.body-copy > p, .body-copy > h2 { grid-column: 6 / -1; max-width: var(--measure); }
.body-copy > p + p { margin-top: 1.25rem; color: var(--muted); }
.body-copy > h2 { margin-top: 3rem; font-size: 1.625rem; line-height: 1.2; }
.body-copy > h2 + p { margin-top: 0.75rem; color: var(--muted); }
.statement { font: 400 clamp(1.625rem, 2.8vw, 2.25rem)/1.25 var(--serif); letter-spacing: -0.01em; }
.body-copy > .statement + p { margin-top: 2rem; }

.legal { margin: 0; padding-top: 2rem; }
.legal > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: baseline;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.legal dt { grid-column: 1 / 6; color: var(--muted); font-size: 0.9375rem; }
.legal dd { grid-column: 6 / -1; margin: 0; font: 400 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--serif); overflow-wrap: anywhere; }
.legal .num { font: 500 clamp(1.125rem, 1.8vw, 1.3125rem)/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---- footer: columns, like the header a solid surface ---- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.footer-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2.5rem;
  padding-block: 4.5rem 2rem;
}
.brand-foot { grid-column: 1 / 5; }
.foot-nav { grid-column: 5 / 9; }
.foot-nav ul { columns: 2; column-gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.9375rem; text-decoration: none; }
.foot-nav a:hover { color: var(--text); }
.foot-contact { grid-column: 9 / -1; padding-top: 0.6rem; }
.foot-contact a { font: 400 1.375rem/1.25 var(--serif); color: var(--text); text-decoration-color: var(--ember); }
.foot-legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }

/* ---- smaller screens ---- */
@media (max-width: 64rem) {
  .hero::before, .hero::after { display: none; }
  .site-header .site-nav { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .site-nav ul { gap: 0.25rem 1.5rem; }
  .hero .intro, .page-head .lede, .page-head .status, .body-copy > p, .body-copy > h2 { grid-column: 1 / -1; }
  .block h2, .areas { grid-column: 1 / -1; }
  .brand-foot, .foot-nav, .foot-contact { grid-column: 1 / -1; }
  main { padding-bottom: 5rem; }
  .hero { padding-block: 6rem 5rem; }
  .page-head { padding-block: 5.5rem 3.5rem; }
  .block, .closing { padding-top: 4.5rem; }
  .block { padding-bottom: 4.5rem; }
  .body-copy { padding-top: 3.5rem; }
}

@media (max-width: 40rem) {
  .areas-next { grid-template-columns: minmax(0, 1fr); }
  .offer li::before { grid-column: 1 / 2; }
  .offer h2, .offer p { grid-column: 2 / 3; }
  .offer li { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem; }
  .legal > div { grid-template-columns: minmax(0, 1fr); row-gap: 0.375rem; }
  .legal dt, .legal dd { grid-column: 1 / -1; }
  .wordmark { font-size: 1.3125rem; }
  main { padding-bottom: 4rem; }
  .hero { padding-block: 4rem 3.5rem; }
  .page-head { padding-block: 3.5rem 2.75rem; }
  .block, .closing { padding-top: 3.5rem; }
  .block { padding-bottom: 3.5rem; }
  .area { padding: 1.75rem; }
  .offer li { padding-block: 1.75rem; }
  .body-copy { padding-top: 2.75rem; }
  .footer-inner { padding-top: 3rem; }
}

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