/* ShortWright — shared styles. Deployed to Cloudflare Pages. */

:root{
  --ground:#F6F6F4; --surface:#FFFFFF; --surface-2:#EFEFEC;
  --ink:#1A1B18; --ink-2:#5B5D57; --ink-3:#8A8C85;
  --rule:#DEDED8; --rule-2:#C6C6BE;
  --accent:#B4650A; --accent-bright:#D9820F; --accent-wash:#F6EBDA;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#15161A; --surface:#1C1E23; --surface-2:#23262C;
    --ink:#E8E8E4; --ink-2:#A2A49E; --ink-3:#75776F;
    --rule:#2E3138; --rule-2:#3D414A;
    --accent:#E8A33F; --accent-bright:#F0B45C; --accent-wash:#2A2318;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,nav,.ui,.eyebrow,.btn,th{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
.mono,.eyebrow{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

.wrap{max-width:44rem; margin:0 auto; padding:0 1.5rem}
.eyebrow{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}

/* nav */
nav{border-bottom:1px solid var(--rule)}
nav .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.1rem; padding-bottom:1.1rem; flex-wrap:wrap}
.mark{font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.mark span{color:var(--accent)}
nav a.lnk{font-family:Archivo,sans-serif; font-size:.875rem; color:var(--ink-2); text-decoration:none}
nav a.lnk:hover{color:var(--accent)}

/* hero */
.hero{padding:5rem 0 3.5rem; border-bottom:1px solid var(--rule)}
h1{font-size:clamp(2.15rem,6.5vw,3.35rem); font-weight:700; letter-spacing:-.03em; line-height:1.04; margin:.85rem 0 0; text-wrap:balance}
.lede{font-size:1.125rem; color:var(--ink-2); margin:1.15rem 0 0; max-width:34rem}

.btn{
  display:inline-block; margin-top:1.9rem; padding:.72rem 1.35rem;
  background:var(--accent); color:#fff; text-decoration:none;
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  border:1px solid var(--accent);
}
@media (prefers-color-scheme: dark){ .btn{color:#15161A} }
.btn:hover{background:var(--accent-bright); border-color:var(--accent-bright)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px}
.btn-note{font-size:.8125rem; color:var(--ink-3); margin:.85rem 0 0}

section{padding:3.5rem 0; border-bottom:1px solid var(--rule)}
h2{font-size:1.375rem; font-weight:700; letter-spacing:-.018em; margin:.55rem 0 1.1rem; text-wrap:balance}
h3{font-size:1rem; font-weight:600; margin:0 0 .3rem}
p{margin:0 0 1rem} p:last-child{margin-bottom:0}
a{color:var(--accent); text-underline-offset:3px}
strong{font-weight:600}

.grid{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:1.25rem}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.grid > div{background:var(--surface); padding:1.25rem 1.35rem}
.grid p{font-size:.9375rem; color:var(--ink-2); margin:0}

ol.steps{list-style:none; counter-reset:s; padding:0; margin:1.25rem 0 0}
ol.steps li{
  counter-increment:s; position:relative; padding:.95rem 0 .95rem 2.5rem;
  border-top:1px solid var(--rule); font-size:.9375rem; color:var(--ink-2);
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1rem;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--accent); font-weight:500;
}
ol.steps b{color:var(--ink); font-family:Archivo,sans-serif; font-weight:600}

.plain{padding-left:1.1rem; margin:1rem 0 0}
.plain li{font-size:.9375rem; color:var(--ink-2); margin-bottom:.4rem}
.plain li::marker{color:var(--ink-3)}

.note{background:var(--accent-wash); border-top:2px solid var(--accent); padding:1.15rem 1.3rem; margin-top:1.25rem}
.note .eyebrow{color:var(--accent)}
.note p{margin:.4rem 0 0; font-size:.9375rem; color:var(--ink)}

/* legal pages */
.legal{padding:3rem 0 5rem}
.legal h1{font-size:clamp(1.75rem,4.5vw,2.35rem); margin-bottom:.5rem}
.legal h2{font-size:1.125rem; margin-top:2.4rem}
.legal p,.legal li{font-size:.9375rem; color:var(--ink-2)}
.legal ul{padding-left:1.15rem}
.legal li{margin-bottom:.45rem}
.legal .updated{font-size:.8125rem; color:var(--ink-3); margin-bottom:2rem}
.ph{
  font-family:"IBM Plex Mono",monospace; font-size:.85em;
  background:var(--accent-wash); color:var(--accent);
  padding:.08em .35em; border:1px solid var(--rule-2);
}

footer{padding:2.25rem 0 4rem; font-size:.8125rem; color:var(--ink-3)}
footer .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--accent)}
footer .sp{flex:1 1 auto}