/* Layout: one centered reading column; serif names, mono descriptions, hairline-ruled lists. */
:root{
  --bg:#FFFFFF; --ink:#141414; --muted:#6F6F6F; --faint:#8C8C8C; --line:#E4E4E4; --hover:#F8F8F7;
  --new:#3B7D34; --error:#B3412C;
  color-scheme:light;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

.page{max-width:1090px;margin:0 auto;padding-block:30px 40px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}

/* Header */
.top{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding-inline:15px}
.avatar{width:128px;height:128px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--line);background:var(--hover);font:400 54px/1 var(--serif);color:var(--ink);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.who{flex:1 1 260px;min-width:0}
.who h1{margin:0;font:400 clamp(34px,4.4vw,46px)/1.1 var(--serif);letter-spacing:-.01em}
.who p{margin:12px 0 0;font-style:italic;font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:#555}
.links{display:flex;gap:34px;align-items:center}
.links a{color:#6A6A6A;display:inline-flex}
.links a:hover{color:var(--ink)}
.links svg{width:34px;height:34px}

/* Intro */
.intro{padding-inline:15px;padding-top:40px}
.eyebrow{margin:0;display:flex;align-items:center;gap:10px;font:400 15px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--new);box-shadow:0 0 0 4px color-mix(in srgb, var(--new) 18%, transparent)}
.intro h1{margin:22px 0 0;font:400 clamp(44px,7vw,76px)/1.02 var(--serif);letter-spacing:-.02em}
.lede{margin:22px 0 0;max-width:34em;font-size:clamp(19px,2.3vw,24px);line-height:1.5;color:#555}
.lede b{font-weight:500;color:var(--ink)}
.stats{margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:2px solid var(--line)}
.stats div{padding:22px 0 22px 24px;border-left:2px solid var(--line);display:flex;flex-direction:column-reverse;gap:10px}
.stats div:first-child{padding-left:0;border-left:0}
.stats dt{font:400 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:0;font:400 clamp(32px,4.6vw,48px)/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:640px){
  .intro{padding-top:12px}
  .stats div{padding:18px 0 18px 14px}
  .stats dt{font-size:11px;letter-spacing:.08em}
}

/* Section labels and lists */
.label{margin:84px 15px 0;padding-bottom:22px;border-bottom:2px solid var(--line);font:400 20px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.list{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:20px;align-items:center;padding:30px 15px;margin:0;border-top:2px solid var(--line);text-decoration:none;color:var(--ink);border-radius:6px;transition:background .15s ease}
a.row:hover,button.row:hover{background:var(--hover)}
.list > li:first-child > .row{border-top:0}
button.row{width:100%;font:inherit;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;color:var(--ink)}
.row .ic{width:34px;height:34px;display:grid;place-items:center;color:#2A2A2A}
.row .ic img{width:34px;height:34px;border-radius:8px;border:1px solid var(--line)}
.row .ic svg{width:30px;height:30px}
.row .name{font-size:clamp(22px,2.6vw,31px);line-height:1.2;min-width:0}
.row .badge{font:400 18px/1 var(--mono);letter-spacing:.06em;color:var(--new);margin-left:8px;vertical-align:4px}
.row .desc{font:400 clamp(14px,1.7vw,20px)/1.4 var(--mono);letter-spacing:.08em;color:var(--muted);text-align:right;display:flex;gap:10px;align-items:center;justify-content:flex-end}
.row .desc .arr{font-size:.85em;letter-spacing:0}
.row .desc i{font-style:italic}
@media (max-width:640px){
  .row{grid-template-columns:30px minmax(0,1fr);row-gap:4px}
  .row .desc{grid-column:2;display:block;text-align:left;font-size:13px;letter-spacing:.05em}
  .row{padding-block:22px;gap:14px}
  .label{margin-top:56px;font-size:16px}
  .top{padding-inline:15px}
}
.note{font:400 14px/1.5 var(--mono);color:var(--faint);padding:22px 0;border-bottom:1px solid var(--line);margin:0}
.skeleton .bar{height:14px;border-radius:4px;background:var(--hover)}

/* Contact form */
.form{display:grid;gap:18px;padding:8px 15px 30px 69px;max-width:760px}
@media (max-width:640px){.form{padding-left:15px}}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:400 17px/1.4 var(--serif);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.hp{position:absolute;left:-9999px}
.send{justify-self:start;font:500 15px/1 var(--mono);letter-spacing:.04em;padding:14px 20px;border-radius:6px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.send:hover{opacity:.88}
.send[disabled]{opacity:.5;cursor:wait}
.status{font:400 14px/1.5 var(--mono);color:var(--muted);margin:0;min-height:1.5em}
.status.ok{color:var(--new)}
.status.err{color:var(--error)}

/* Footer */
.foot{margin:90px 15px 0;padding-top:22px;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font:400 13px/1.5 var(--mono);color:var(--faint)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* Guide article */
.article{max-width:680px;margin:0 auto}
.back{font:400 14px/1 var(--mono);color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.article .kicker{margin:40px 0 0;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.article h1{margin:14px 0 0;font:500 clamp(32px,5vw,46px)/1.12 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.article .dek{margin:16px 0 0;font-style:italic;font-size:21px;color:var(--muted)}
.article .meta{margin:22px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);font:400 13px/1 var(--mono);color:var(--faint)}
.article h2{margin:40px 0 0;font:500 26px/1.25 var(--serif);text-wrap:balance}
.article p,.article li{font-size:19px;line-height:1.7}
.article p{margin:16px 0 0}
.article ul,.article ol{margin:16px 0 0;padding-left:22px}
.article li+li{margin-top:8px}
.article code{font:400 .82em var(--mono);background:var(--hover);border:1px solid var(--line);padding:1px 5px;border-radius:4px}
.article blockquote{margin:24px 0 0;padding-left:18px;border-left:2px solid var(--ink);font-style:italic;color:var(--muted)}
.next{margin-top:56px}
.article .label{margin-inline:0}