/* Small Space Finds — one stylesheet, four pages. */
:root{
  --bg:#faf8f4; --surface:#fffefb; --ink:#1b1a18; --body:#3d3a35; --mut:#6b665e;
  --line:#e4e0d6; --line-soft:#eeebe3; --accent:#17558f; --accent-ink:#0f3f6e;
  --ok:#3f6b45;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16161a; --surface:#1e1e22; --ink:#f2efe9; --body:#d8d4cc; --mut:#a29d94;
    --line:#32323a; --line-soft:#26262c; --accent:#8ab8ea; --accent-ink:#a9ccf3;
    --ok:#8fc09a;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:17px/1.65 var(--sans); text-rendering:optimizeLegibility;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---- masthead ---- */
.masthead{border-bottom:1px solid var(--line);background:var(--surface)}
.masthead .wrap{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  padding-top:1.15rem;padding-bottom:1.15rem}
.wordmark{font:600 1.06rem/1 var(--serif);letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark:hover{color:var(--ink)}
nav{margin-left:auto;display:flex;gap:1.35rem;font-size:.925rem}
nav a{color:var(--mut);text-decoration:none}
nav a:hover,nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}

/* ---- type ---- */
h1{font:400 2.15rem/1.18 var(--serif);color:var(--ink);letter-spacing:-.012em;margin:0 0 .6rem}
h2{font:400 1.4rem/1.3 var(--serif);color:var(--ink);margin:2.75rem 0 .75rem}
h3{font:600 1.06rem/1.35 var(--sans);color:var(--ink);margin:0 0 .35rem}
.lede{font-size:1.09rem;color:var(--body);margin:0 0 .35rem;max-width:34rem}
p{margin:0 0 1rem;max-width:36rem}
main{padding:3rem 0 1rem}
.eyebrow{font:600 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin:0 0 1rem}

/* ---- the standing disclosure ---- */
.disclosure{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:4px;padding:1rem 1.15rem;margin:1.75rem 0;font-size:.95rem;color:var(--body)}
.disclosure strong{color:var(--ink)}
.disclosure p{margin:0;max-width:none}
.disclosure p + p{margin-top:.55rem}

/* ---- product list ---- */
.items{margin:2rem 0 0;padding:0;list-style:none}
.item{border-top:1px solid var(--line);padding:1.6rem 0}
.item:last-child{border-bottom:1px solid var(--line)}
.item .why{margin:.15rem 0 .7rem;color:var(--body)}
.spec{font-size:.875rem;line-height:1.55;color:var(--mut);margin:0 0 .95rem;
  padding-left:.8rem;border-left:2px solid var(--line)}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .9rem}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.58rem 1.05rem;border-radius:5px;font:600 .93rem/1.2 var(--sans)}
.btn:hover{background:var(--accent-ink);color:#fff}
.aff{font-size:.83rem;color:var(--mut)}

/* ---- generic ---- */
.note{font-size:.9rem;color:var(--mut)}
.stamp{font-size:.85rem;color:var(--mut);margin-top:2.25rem}
.cta{display:inline-block;margin:.4rem 0 .25rem;font:600 1rem/1.4 var(--sans)}
ul.plain{padding-left:1.15rem;max-width:36rem}
ul.plain li{margin:0 0 .55rem}

footer{border-top:1px solid var(--line);margin-top:3.5rem;background:var(--surface)}
footer .wrap{padding-top:2rem;padding-bottom:2.5rem;font-size:.9rem;color:var(--mut)}
footer nav{margin:0 0 .9rem;gap:1.1rem;flex-wrap:wrap}
footer p{max-width:38rem;margin:0 0 .55rem}

@media (max-width:34rem){
  h1{font-size:1.8rem}
  .masthead nav{margin-left:0;width:100%;gap:1.1rem}
  body{font-size:16px}
}