:root{
  --ink:#0D1117; --ink-mid:#3D4451; --ink-soft:#5F677A; --ink-ghost:#B4BAC8;
  --surface:#FFFFFF; --surface-2:#F5F6FA; --surface-3:#ECEEF5; --border:#E2E5EF;
  --accent:#1246E6; --accent-light:#EBF0FF; --accent-mid:#3D6BFF;
  --estate:#0F6E56; --estate-light:#E6F5EF; --estate-dark:#0B5743; --estate-bright:#5FD3AE;
  --amber:#8A5A00; --amber-light:#FFF4DC; --error:#A32020; --surface-hover:#E9ECF5;

  /* spacing: 4px base unit */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section-gap:var(--s9);

  /* radius: controls (buttons, inputs, tags) and containers (figures, panels) */
  --r-control:4px;
  --r-card:8px;
  --radius:var(--r-control);

  /* rules: a hairline divides rows, an ink line opens each major section */
  --rule:1px solid var(--border);
  --rule-ink:1px solid var(--ink);

  /* type */
  --track-display:-.02em;
  --track-h2:-.015em;
  --track-label:.08em;
}
@media(max-width:640px){:root{--section-gap:var(--s8)}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--surface);color:var(--ink);font-family:'Albert Sans',system-ui,sans-serif;line-height:1.6}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:22px 0;border-bottom:var(--rule)}
.mark{font-size:15px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.mark span{color:var(--accent)}
.mark img{display:block;height:22px;width:auto}
.topnav{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:14px}
.topnav a{color:var(--ink-soft);text-decoration:none}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(max-width:640px){.topnav{gap:6px 14px;font-size:13px}}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(32px,5.4vw,52px);line-height:1.04;letter-spacing:var(--track-display)}
h2{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,3.4vw,38px);line-height:1.12;letter-spacing:var(--track-h2)}
h3{font-size:18px;font-weight:700;letter-spacing:-.005em}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-mid);max-width:620px;margin-top:20px}

.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;text-decoration:none;font-size:15px;font-weight:600;
  min-height:48px;padding:0 22px;border-radius:var(--r-control);border:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:#0E3AC4}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.wide{width:100%;text-align:center}

.foot{border-top:var(--rule);margin-top:var(--section-gap);padding:34px 0 52px;font-size:13px;color:var(--ink-soft)}
.foot b{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.foot a{color:var(--ink-soft)}
.foot a[href^="mailto:"]{display:inline-block;padding:5px 0}

/* plain text link, replaces arrow links */
.textlink{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.textlink:hover{border-bottom-color:currentColor}

/* stacked rows: heading left, text right, thin rule between */
.rows{border-bottom:var(--rule)}
.row-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10px 48px;padding:30px 0;border-top:var(--rule);align-items:start}
.row-item h2,.row-item h3{max-width:20ch}
.row-item p{color:var(--ink-mid);font-size:16px;max-width:60ch}
.row-item .textlink{display:inline-block;margin-top:10px;font-size:15px}
@media(max-width:760px){.row-item{grid-template-columns:1fr;padding:24px 0}}

/* keyboard focus, hover and pressed states */
a,.btn,summary{transition:color .15s,background .15s,background-color .15s,border-color .15s,opacity .15s}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero :focus-visible{outline-color:#fff}
.btn:active{filter:brightness(.92)}
.btn.ghost:active{background:var(--ink-mid);color:#fff;filter:none}
.topnav a:active,.textlink:active,.foot a:active{opacity:.7}
.foot a:hover{color:var(--ink)}
summary{cursor:pointer}
h1,h2{text-wrap:balance}

@media(max-width:640px){
  .topnav a,.mark{display:inline-flex;align-items:center;min-height:44px}
}