:root { color-scheme:light; --bg:#f5f5f5; --fg:#2b2b2b; --muted:#4a4a47; --accent:#c8000f; --cta:#c8000f; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#3a3a3c; --fg:#f0f0f0; --muted:#adadb2; --accent:#ff8a80; --cta:#ff8a80; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#3a3a3c; --fg:#f0f0f0; --muted:#adadb2; --accent:#ff8a80; --cta:#ff8a80; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--fg); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--fg); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; max-width:1920px; margin-inline:auto; padding:0 clamp(16px,2.5vw,48px); }
.row { padding-block:48px 48px; }
.label { grid-column:1 / span 3; font-size:13px; color:var(--muted); }
.body { grid-column:4 / -1; }

header.grid { padding-block:28px; font-size:14px; font-weight:500; }
header .logo { grid-column:1 / span 3; }
header nav { grid-column:4 / span 6; flex-wrap:wrap; display:flex; gap:24px; }
header .tools { grid-column:10 / -1; justify-self:end; display:flex; align-items:baseline; gap:24px; }

.hero { padding-block:12vw 96px; }
h1 { grid-column:4 / -1; font-size:clamp(40px,6.6vw,120px); font-weight:500; line-height:.95; letter-spacing:-.045em; text-wrap:balance; }
.lead { grid-column:4 / span 6; margin-top:48px; font-size:20px; }

h2 { font-size:13px; font-weight:400; color:var(--muted); }
dl { display:grid; grid-template-columns:repeat(9,1fr); column-gap:24px; row-gap:32px; }
dt { grid-column:1 / span 3; font-size:24px; font-weight:500; letter-spacing:-.02em; }
dd { grid-column:4 / span 4; color:var(--muted); }
dd.when { grid-column:8 / -1; color:var(--fg); text-align:right; }
.big { font-size:clamp(24px,3.4vw,48px); font-weight:500; letter-spacing:-.03em; line-height:1.1; display:block; }
ul { list-style:none; padding:0; }
.links li { font-size:24px; font-weight:500; letter-spacing:-.02em; }
.links span { color:var(--muted); font-size:13px; font-weight:400; margin-left:12px; }

footer.grid { padding-block:16px 32px; font-size:13px; color:var(--muted); }
footer div:first-child { grid-column:1 / span 3; } footer div:last-child { grid-column:4 / -1; }

@media (max-width:768px) {
  .grid { padding-inline:16px; column-gap:16px; }
  .label, .body, h1, header .logo, header nav, header .tools, .lead, footer div { grid-column:1 / -1; } header .tools { justify-self:start; margin-top:12px; }
  .label { margin-bottom:24px; } header nav { margin-top:8px; flex-wrap:wrap; } header .mail-top { display:none; }
  .row { padding-block:32px; } .hero { padding-block:120px 64px; } .lead { font-size:18px; margin-top:32px; }
  dl { grid-template-columns:1fr; row-gap:8px; } dt, dd, dd.when { grid-column:1; text-align:left; }
  dd.when { margin-bottom:24px; }
}

dd.wide { grid-column:4 / -1; }
.back { font-size:14px; }
@media (max-width:768px) { dd.wide { grid-column:1; margin-bottom:24px; } }
.dim { color:var(--muted); }
code { font:inherit; font-family:ui-monospace,Menlo,monospace; font-size:.9em; }

.links-row { font-size:24px; font-weight:500; letter-spacing:-.02em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.sep { color:var(--muted); }
.pdf { font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); text-transform:uppercase; }
dt.cta, a.cta { color:var(--cta); }
a.cta { font-weight:500; }
a.cta:hover { color:var(--fg); }
dt .sub { display:block; margin-top:8px; font-size:14px; font-weight:400; letter-spacing:0; line-height:1.5; color:var(--muted); }
dd.wide { max-width:70ch; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--muted); margin:0 .8em; vertical-align:middle; }
.theme { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.theme button { font:inherit; color:var(--fg); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.theme button:hover { color:var(--accent); }
.theme button[aria-pressed="true"] { text-decoration:none; font-weight:600; cursor:default; }
.theme button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
