@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
    --bg: #F7FAEF;
    --text: #1F3A2C;
    --muted: #5A6B5F;
    --accent: #6BB033;
    --accent-strong: #5C9A2A;
    --highlight: #F5E664;
    --surface: #FFFFFF;
    --border: #E2E8D0;
    --code-bg: #ECF0DF;
    --maxw: 720px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(15px, 0.5vw + 14px, 18px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 32px) clamp(56px, 8vw, 96px);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: clamp(28px, 5vw, 48px);
}
.brand .mark {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11pt;
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}
.brand .name {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
}

.lead {
    font-size: clamp(17px, 1.2vw + 13px, 22px);
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 clamp(28px, 4vw, 48px);
    max-width: 32em;
    text-wrap: pretty;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18pt 0;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.stats .stat {
    flex: 1 1 140px;
    padding: 4pt 0;
}
.stats .num {
    font-size: clamp(20px, 2vw + 8px, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stats .label {
    font-size: 9.5pt;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 4pt;
    font-weight: 500;
}
.stats .updated {
    flex: 1 1 100%;
    margin-top: 12pt;
    color: var(--muted);
    font-size: 10pt;
    font-variant-numeric: tabular-nums;
}

h2 {
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin: clamp(28px, 4vw, 40px) 0 14pt;
    padding-bottom: 5pt;
    border-bottom: 1px solid var(--border);
}

ol.phases {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: phase;
    font-variant-numeric: tabular-nums;
}
ol.phases li {
    counter-increment: phase;
    padding: 7pt 0;
    border-bottom: 1px dashed var(--border);
    display: flex;
    gap: 14pt;
    align-items: baseline;
}
ol.phases li:last-child { border-bottom: 0; }
ol.phases li::before {
    content: counter(phase);
    color: var(--muted);
    font-size: 9.5pt;
    width: 14pt;
    flex-shrink: 0;
}
ol.phases .name { flex: 1; font-weight: 500; }
ol.phases .status {
    font-size: 10pt;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
ol.phases .done .status { color: var(--accent-strong); font-weight: 500; }
ol.phases .now .status { color: var(--text); font-weight: 600; }

ul.findings {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.findings li {
    padding: 7pt 0;
    border-bottom: 1px dashed var(--border);
    padding-left: 18pt;
    position: relative;
}
ul.findings li:last-child { border-bottom: 0; }
ul.findings li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

p { margin: 10pt 0; }

a {
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 0.5pt solid var(--border);
}
a:hover { border-bottom-color: var(--accent); color: var(--accent); }

footer {
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: 14pt;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 10pt;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--code-bg);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    border: 0.5pt solid var(--border);
}