/* Human Spaces — Uztartu design system, theme "human-spaces": navy, coral, amber; a drawing register. */
:root {
  --ground: #f3f5f7;
  --surface: #ffffff;
  --ink: #1b2030;
  --ink-muted: #55606e;
  --line: #c3ccd6;
  --grid: #e6ebf0;
  --navy: #2b3142;
  --coral: #e0603a;
  --coral-ink: #b0441f;
  --amber: #f4c430;
  --amber-tint: #fcf3d0;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); padding: 24px max(16px, 2vw); }
a { color: var(--coral-ink); }
a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.micro { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.micro.coral { color: var(--coral-ink); }
.draft { margin: -24px calc(-1 * max(16px, 2vw)) 24px; padding: 6px 16px; background: var(--amber); color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }

.sheet { max-width: 1220px; margin: 0 auto; border: 2px solid var(--navy); background: var(--surface); }

.title-block { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--navy); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.title-block > * { padding: 16px 20px; }
.tb-name { flex: 2 1 280px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.wordmark { font-family: var(--sans); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); text-decoration: none; }
.tb-nav { flex: 3 1 420px; border-right: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.tb-nav a { color: var(--ink); text-decoration: none; }
.tb-langs { flex: 1 1 200px; display: flex; gap: 10px; align-items: center; }
.flaps { display: flex; gap: 2px; text-decoration: none; }
.flaps span { background: var(--line); color: var(--ink); font-weight: 700; font-size: 14px; padding: 6px 5px; border-radius: 2px; }
.flaps.on span { background: var(--ink); color: var(--amber); }

.opener { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--navy); background-color: var(--surface); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.opener-main { flex: 3 1 520px; min-width: 0; padding: 72px 40px; display: flex; flex-direction: column; gap: 20px; }
.opener-main h1 { margin: 0; font-size: clamp(40px, 6vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.opener-note { flex: 1 1 260px; min-width: 0; padding: 72px 40px; border-left: 1px dashed var(--line); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.opener-note p:last-child { margin: 0; font-size: 17px; line-height: 27px; background: var(--surface); }

.block { padding: 40px; border-bottom: 2px solid var(--navy); display: flex; flex-direction: column; gap: 16px; }
.register { display: flex; flex-direction: column; font-family: var(--mono); font-size: 15px; }
.reg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.reg-row:first-child { border-top-color: var(--navy); }
.reg-row:last-child { border-bottom: 1px solid var(--navy); }
.reg-row:hover .reg-title { text-decoration: underline; }
.reg-code { font-family: var(--sans); font-size: 44px; font-weight: 800; color: var(--coral); width: 56px; }
.reg-title { font-family: var(--sans); font-size: 24px; font-weight: 700; flex: 1 1 280px; }
.reg-detail { flex: 2 1 320px; color: var(--ink-muted); }

.project { display: flex; flex-wrap: wrap; gap: 32px; }
.fig { flex: 3 1 420px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fig-box { height: 340px; border: 1px solid var(--navy); background-color: var(--ground); background-image: linear-gradient(#dde3ea 1px, transparent 1px), linear-gradient(90deg, #dde3ea 1px, transparent 1px); background-size: 16px 16px; }
.fig-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig figcaption { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.spec { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.spec h2 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.spec dl { margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 14px; }
.spec dl div { display: flex; gap: 8px; align-items: baseline; }
.spec dt { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.leader { flex-grow: 1; border-bottom: 1px dotted #8a93a6; }
.spec dd { margin: 0; }
.stamp { background: var(--amber-tint); border: 1px solid var(--amber); padding: 2px 8px; text-transform: uppercase; }

.closing { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--navy); }
.cta { flex: 2 1 460px; min-width: 0; padding: 40px; background: var(--navy); color: #fff; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.cta h2 { margin: 0; flex: 1 1 300px; font-size: 36px; line-height: 1.1; font-weight: 800; }
.btn { background: var(--coral); color: var(--ink); padding: 16px 24px; border-radius: 4px; font-weight: 800; text-decoration: none; }
.colophon { flex: 1 1 260px; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 13px; line-height: 20px; }
.colophon p { margin: 0; }

.foot { display: flex; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.foot > * { padding: 14px 20px; border-right: 1px solid var(--line); }
.foot > :last-child { border-right: 0; }
.grow { flex: 1 1 200px; }
.member { display: flex; align-items: center; gap: 8px; }
.member i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.quiet { color: var(--ink-muted); }