:root{
  --paper:#EDECE8;
  --plate:#FFFFFF;
  --plate-alt:#FBFBF9;
  --ink:#15171A;
  --ink2:#5C6268;
  --ink3:#8A8F94;
  --rule:#D7D5CE;
  --rule-strong:#B9B6AD;
  --accent:#1B3FD1;
  --mark:#F9E77E;
  --alert:#AE2A1C;
  --ok:#1F6B41;
  --sans:"IBM Plex Sans",ui-sans-serif,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(27,63,209,.32)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

code{font-family:var(--mono);font-size:.92em}

.wrap{max-width:940px;margin:0 auto;padding:0 28px 96px}
.wrap.narrow{max-width:760px}
.wrap.wide{max-width:1180px}

/* ---------- masthead ---------- */
header.mast{padding:56px 0 34px;border-bottom:2px solid var(--ink)}
header.mast.compact{padding:34px 0 20px;border-bottom-width:1px}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 20px
}
.kicker a{color:var(--ink2);border-bottom-color:var(--rule-strong)}
.kicker a:hover{color:var(--ink);border-bottom-color:var(--ink)}

h1{
  font-family:var(--mono);font-weight:500;font-size:clamp(28px,4.4vw,46px);
  line-height:1.05;letter-spacing:-.028em;margin:0 0 18px;max-width:22ch
}
header.mast.compact h1{font-size:clamp(24px,3.2vw,32px);margin-bottom:10px}

.standfirst{font-size:17px;max-width:62ch;margin:0 0 16px;color:var(--ink2)}
.standfirst:last-child{margin-bottom:0}
.standfirst strong{color:var(--ink);font-weight:600}

.mast-meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:24px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink3)
}
.mast-meta a{color:var(--ink2);border-bottom-color:var(--rule-strong)}
.mast-meta a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- sections ---------- */
main{padding-top:44px}
section{margin-bottom:60px;scroll-margin-top:26px}
section:last-child{margin-bottom:0}

.sec-eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 8px
}
h2{font-size:24px;line-height:1.2;letter-spacing:-.017em;margin:0 0 10px;max-width:32ch;font-weight:600}
h3{font-size:17px;line-height:1.3;margin:0 0 8px;font-weight:600}
.sec-head{margin-bottom:22px}
.sec-head p{margin:0;color:var(--ink2);max-width:66ch}

/* ---------- plates ---------- */
.plate{background:var(--plate);border:1px solid var(--rule);margin-bottom:18px}
.plate:last-child{margin-bottom:0}

.plate-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--plate-alt)
}
.field{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)
}
.where{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.02em}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.plate-body{padding:20px 22px 22px}
.plate-body p{margin:0 0 12px;max-width:68ch}
.plate-body p:last-child{margin-bottom:0}
.plate-body ul{margin:0 0 16px;padding-left:18px;color:var(--ink2)}
.plate-body li{margin-bottom:3px}

.plate-foot{
  padding:11px 16px;border-top:1px dashed var(--rule);background:var(--plate-alt);
  font-size:13px;color:var(--ink2)
}
.plate-foot b{font-weight:600;color:var(--ink)}

.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cols-2 .plate{margin-bottom:0}

mark{background:var(--mark);color:var(--ink);padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- field list ---------- */
.fields{border-top:1px solid var(--rule-strong);margin:0}
.fields .row{
  display:grid;grid-template-columns:190px 1fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--rule)
}
.fields dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.fields dd{margin:0;font-size:14.5px;word-break:break-word}
.fields dd em{font-style:normal;font-size:13.5px;color:var(--ink2);display:block;margin-top:3px}

/* ---------- controls ---------- */
.btn,button.btn,a.btn{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:8px 14px;cursor:pointer;transition:background .15s ease,border-color .15s ease;
  text-decoration:none;line-height:1.4
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn[data-state="done"]{background:var(--ok);border-color:var(--ok)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

input[type=text],input[type=email],input[type=number],select,textarea{
  font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:var(--plate);border:1px solid var(--rule-strong);
  padding:9px 11px;width:100%;border-radius:0;appearance:none;-webkit-appearance:none
}
input[type=number]{font-family:var(--mono)}
select{background-image:none}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}

.stack{display:flex;flex-direction:column;gap:5px}
.row-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}

.out{
  font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre;
  background:var(--plate-alt);border:1px solid var(--rule);padding:14px 16px;overflow-x:auto
}

.tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--rule-strong);padding:1px 6px;
  color:var(--ink2);white-space:nowrap
}
.tag.now{border-color:var(--accent);color:var(--accent)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- footer ---------- */
footer.end{
  margin-top:64px;padding-top:22px;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
  font-family:var(--mono);font-size:11.5px;color:var(--ink3);letter-spacing:.03em
}
footer.end a{color:var(--ink2);border-bottom-color:var(--rule-strong)}
footer.end a:hover{color:var(--ink);border-bottom-color:var(--ink)}
footer.end .spacer{margin-left:auto}

/* ---------- load ---------- */
@media (prefers-reduced-motion:no-preference){
  .stagger{opacity:0;transform:translateY(9px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}

@media(max-width:820px){
  .cols-2{grid-template-columns:1fr}
  .fields .row{grid-template-columns:1fr;gap:5px}
}
@media(max-width:560px){
  .wrap{padding:0 18px 72px}
  header.mast{padding:38px 0 26px}
  main{padding-top:32px}
  .plate-body{padding:16px 15px 18px}
  .plate-bar{padding:10px 13px}
  footer.end .spacer{margin-left:0;width:100%}
}