:root {
  color-scheme: light;
  --paper: #f5f2eb;
  --ink: #211e1b;
  --secondary: #4a453f;
  --muted: #6b655e;
  --rule: #ddd7cc;
  --accent: #2f5d50;
  --serif: 'Newsreader', 'Times New Roman', serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
main:focus { outline: none; }
.skip-link { position: absolute; top: 12px; left: 24px; padding: 10px; background: var(--paper); transform: translateY(-200%); z-index: 1; }
.skip-link:focus { transform: none; }
.page { min-height: 100svh; max-width: 1240px; padding-inline: 48px; margin-inline: auto; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand span { font-family: var(--serif); font-size: 24px; letter-spacing: -.01em; }
.header nav { display: flex; gap: 32px; color: var(--muted); }
.header nav, .section-label { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 4.8vw, 68px); font-weight: 300; letter-spacing: -.025em; line-height: 1.02; }
.section-label { margin: 0; }
.project-list { margin: 0; padding: 0; list-style: none; }
.project-row { display: grid; transition: color .2s; }
.project-name { font-family: var(--serif); letter-spacing: -.015em; }
.project-arrow { font-family: var(--mono); font-size: 15px; text-align: right; }
.contact p { margin: 0; color: var(--secondary); font-size: 15px; line-height: 1.55; }
.email { font-family: var(--serif); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; padding-bottom: 5px; border-bottom: 1px solid var(--ink); }
footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px 28px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }

.page { max-width: 1400px; padding-inline: 56px; }
main { flex: 1; display: flex; flex-direction: column; }
.composition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; padding-block: 48px 24px; }
.content-column { min-width: 0; }
.intro { padding-top: 40px; }
h1 { font-size: clamp(44px, 4.4vw, 64px); line-height: 1.04; }
.intro p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--secondary); text-wrap: pretty; }
.projects { margin-top: 0; border: 0; }
.project-row { grid-template-columns: 48px minmax(0, 1fr) 16px; gap: 20px; padding-block: 24px; border: 0; align-items: start; }
.project-list li:last-child .project-row { border: 0; }
.project-marker { display: block; width: 28px; height: 28px; margin-top: 2px; color: var(--muted); }
.marker-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.marker-dot { fill: currentColor; transition: fill .2s; }
.project-row.is-active .project-marker, .project-row:hover .project-marker { color: var(--project-accent); }
.project-name { display: block; font-size: 26px; line-height: 1.2; }
.project-copy p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--secondary); text-wrap: pretty; }
.project-arrow { padding-top: 7px; }
[data-project="utrechterPost"] { --project-accent: #cc102f; }
[data-project="mamanfari"] { --project-accent: #c9a127; --project-text: #80630f; }
[data-project="atelierTar"] { --project-accent: #8fa884; --project-text: #496343; }
[data-project="blfm"] { --project-accent: #163b5c; }
.project-row.is-active, .project-row:hover { color: var(--project-text, var(--project-accent)); }
.circle-panel { align-self: center; min-width: 0; width: min(100%, 600px); justify-self: center; }
.radian-circle { display: block; width: 100%; height: auto; overflow: visible; }
.circumference { fill: none; stroke: var(--ink); stroke-width: 1; }
.diagram-baseline { stroke: #c6bfb3; stroke-width: .75; }
.inner-semicircle { fill: none; stroke: var(--rule); stroke-width: .75; }
.baseline-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.circle-tick { stroke-width: .75; vector-effect: non-scaling-stroke; }
.circle-tick.major { stroke: var(--muted); }
.circle-tick.minor { stroke: #cfc8bc; }
.origin, .point { fill: var(--ink); }
.resting-radius { stroke: #c6bfb3; stroke-width: .75; opacity: .65; transition: opacity .15s; pointer-events: none; }
.has-active .resting-radius { opacity: .25; }
.has-active .resting-radius.is-active { opacity: 0; }
.measured-geometry { opacity: 0; transition: opacity .15s; pointer-events: none; }
.measured-arc { fill: none; stroke: var(--project-accent); stroke-width: 2; }
.radius { stroke: var(--project-accent); stroke-width: 1; }
.measured-geometry.is-active { opacity: 1; }
.circle-point .point { transition: fill .2s, r .2s; }
.circle-point.is-active .point { fill: var(--project-accent); r: 5.5px; }
.point-hit { fill: transparent; }
.circle-point:focus { outline: none; }
.circle-point:focus-visible .point-hit { stroke: var(--project-text, var(--project-accent)); stroke-width: 1; }
.circle-point:hover { cursor: pointer; }
.contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-block: 0 24px; }
footer { margin-top: 0; }
.email { font-size: 26px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1000px) and (max-height: 950px) {
  .header { padding-block: 20px; }
  .intro { padding-top: 16px; }
  h1 { font-size: clamp(44px, 4.4vw, 56px); }
  .composition { padding-block: 32px 0; }
  .circle-panel { max-width: 540px; }
  .project-row { padding-block: 20px; }
  .contact { padding-bottom: 20px; }
  footer { padding-block: 16px 20px; }
}
@media (720px <= width < 1000px) {
  .page { padding-inline: 32px; }
  .composition { gap: 32px; }
  h1 { font-size: 42px; }
  .project-row { gap: 12px; grid-template-columns: 40px minmax(0, 1fr) 16px; }
  .circle-panel { align-self: center; }
}
@media (width < 720px) {
  .page { padding-inline: 24px; }
  .header { padding-block: 22px; }
  .header nav { gap: 24px; }
  footer { flex-wrap: wrap; }
  .intro { padding-top: 40px; }
  .composition { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  h1 { font-size: clamp(40px, 7.4vw, 52px); }
  .intro p { margin-top: 12px; }
  .projects { margin-top: 0; }
  .project-row { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 14px; padding-block: 16px; }
  .project-name { font-size: 26px; }
  .project-arrow { grid-column: 3; }
  .circle-panel { width: min(100%, 360px); justify-self: center; }
  .circle-tick.fine { display: none; }
  .contact { padding-block: 0 32px; }
}

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