/* Surf landing page. Hero-only: rules for the sections the approved treatment
   dropped have been removed with them. Served at /assets/landing.css. */

:root{
  --bg:#fbfaf8; --panel:#fff; --ink:#14120f; --muted:#6b6559; --line:#e6e1d8;
  --accent:#7a4a1f; --fence-bg:#14120f; --fence-ink:#f4f1ea; --fence-nb:#f0b366;
  color-scheme: light dark;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#100f0d; --panel:#1a1815; --ink:#f2efe8; --muted:#a09889; --line:#2c2924;
         --accent:#e0a56a; --fence-bg:#05050a; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.75rem;width:100%}
a{color:var(--accent)}
code{font:.85em ui-monospace,SFMono-Regular,Menlo,monospace}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

header.site{padding:1.6rem 0 0}
header.site .bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.86rem}
.mark{font-weight:700;letter-spacing:-.02em;font-size:1.1rem}
header.site .by{color:var(--muted)}
header.site .by a{color:var(--muted);text-decoration:none}
header.site .by a:hover{color:var(--accent)}

.fold{min-height:calc(100svh - 4.5rem);display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem 0 1.5rem}
.grid{display:grid;gap:2rem;grid-template-areas:"hero" "card" "beats"}
@media (min-width:56rem){
  .grid{grid-template-columns:1.15fr .85fr;column-gap:4rem;row-gap:2rem;
        grid-template-areas:"hero card" "beats card";align-items:start}
}
.hero{grid-area:hero}
.beats-wrap{grid-area:beats}
.card{grid-area:card}

.desc{font-size:.8rem;letter-spacing:.03em;color:var(--accent);font-weight:620;margin:0 0 .85rem}
h1{font-size:clamp(2rem,4.6vw,2.85rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 1rem;font-weight:640}
.standfirst{font-size:1.08rem;color:var(--muted);margin:0;max-width:31rem}

ol.beats{counter-reset:b;list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
ol.beats li{counter-increment:b;display:flex;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
ol.beats li::before{content:counter(b);flex:none;width:1.35rem;height:1.35rem;margin-top:.2rem;
  border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:.72rem;font-weight:620;color:var(--muted)}
ol.beats b{font-weight:620}
ol.beats span{color:var(--muted)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
@media (min-width:56rem){.card{position:sticky;top:1.75rem}}
.card h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .85rem;font-weight:620}
.fence{background:var(--fence-bg);color:var(--fence-ink);border-radius:10px;padding:.95rem 1rem;
  font:.88rem/1.5 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;overflow-x:auto}
.fence .nb{color:var(--fence-nb)}
.copy{margin-top:.7rem;width:100%;background:var(--ink);color:var(--bg);border:0;
  border-radius:7px;padding:.5rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}
.copy:hover{background:#000}
@media (prefers-color-scheme:dark){
  .copy{background:rgba(255,255,255,.12);color:var(--fence-ink)}
  .copy:hover{background:rgba(255,255,255,.22)}
}
.card .status{color:var(--muted);font-size:.82rem;line-height:1.45;margin:.5rem 0 0}
/* Stays in the accessibility tree when empty — hiding a live region can cost
   the announcement — but takes no vertical space until it has something to say. */
.card .status:empty{margin:0}
.card dl{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;font-size:.86rem}
.card dt{color:var(--muted);white-space:nowrap}
.card dd{margin:0}
.card .repo{display:inline-block;margin-top:1.1rem;font-size:.86rem}

footer.site{margin-top:4.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.84rem}
footer.site .row{max-width:64rem;margin:0 auto;padding:1.3rem 1.75rem 3rem;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--accent)}