/* Wireframe design system — deliberately low-fidelity.
   Greyscale only. One accent (annotation orange) reserved for spec notes. */

:root{
  --ink:#16181d;
  --ink-2:#5b6068;
  --ink-3:#8b9098;
  --line:#c9ccd1;
  --line-soft:#e3e5e8;
  --fill:#eceef0;
  --fill-2:#f5f6f7;
  --page:#fbfbfc;
  --note:#b4530a;
  --note-bg:#fdf4ec;
  --max:1120px;
  --gap:24px;
  --radius:3px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e9eaec; --ink-2:#a2a7ae; --ink-3:#71767d;
    --line:#4a4e55; --line-soft:#2e3238; --fill:#22262b; --fill-2:#1b1e23;
    --page:#131619; --note:#e8a05e; --note-bg:#2a2119;
  }
}
:root[data-theme="dark"]{
  --ink:#e9eaec; --ink-2:#a2a7ae; --ink-3:#71767d;
  --line:#4a4e55; --line-soft:#2e3238; --fill:#22262b; --fill-2:#1b1e23;
  --page:#131619; --note:#e8a05e; --note-bg:#2a2119;
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- deliverable chrome (not part of the design) ---------- */
.chrome{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:9px 18px;background:var(--fill-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-2)}
.chrome b{color:var(--ink);font-weight:600}
.chrome a{text-decoration:none;padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius)}
.chrome a:hover{background:var(--fill)}
.chrome .spacer{margin-left:auto}
.chrome button{font:inherit;color:inherit;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:3px 8px;cursor:pointer}
.chrome button:hover{background:var(--fill)}

/* ---------- wireframe primitives ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sec{position:relative;padding:52px 0;border-bottom:1px dashed var(--line-soft)}
.sec:last-of-type{border-bottom:0}

/* section spec tag, rides the left gutter on wide screens */
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--note);background:var(--note-bg);border:1px solid currentColor;border-radius:var(--radius);
  padding:2px 7px;margin-bottom:16px}
.note{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--note);
  border-left:2px solid var(--note);padding:2px 0 2px 10px;margin:14px 0 0;max-width:62ch}

.box{border:1px solid var(--line);border-radius:var(--radius);background:var(--fill-2)}
.img{border:1px solid var(--line);border-radius:var(--radius);background:var(--fill);
  background-image:linear-gradient(135deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),
                   linear-gradient(45deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center;padding:8px}
.img span{background:var(--page);padding:3px 8px;border-radius:var(--radius)}

/* text placeholders */
.h{background:var(--ink);opacity:.82;border-radius:2px;height:26px}
.h.lg{height:38px}.h.sm{height:18px}
.t{background:var(--ink-3);opacity:.5;border-radius:2px;height:9px;margin:9px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;
  border:1.5px solid var(--ink);border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--page)}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.field{height:42px;border:1px solid var(--line);border-radius:var(--radius);background:var(--fill-2);
  display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

.row{display:flex;gap:var(--gap)}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.pad{padding:20px}
.center{text-align:center}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
h2.sh{font-size:13px;font-weight:600;letter-spacing:.02em;margin:0 0 4px}

@media (max-width:820px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .row{flex-wrap:wrap}
  .wrap{padding:0 18px}
}
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}

/* ---------- index / overview pages ---------- */
.card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--fill-2);overflow:hidden}
.card:hover{border-color:var(--ink-2)}
.card .thumb{height:150px;border-bottom:1px solid var(--line);background:var(--fill);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:26px;color:var(--ink-3)}
.card.next{border-style:dashed;background:none}
.card.next .thumb{background:none;border-bottom-style:dashed}
.card h2{font-size:16px;margin:6px 0 8px;font-weight:600}
.card p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.page-head{padding-top:44px}
.page-head h1{font-size:30px;margin:8px 0 10px;font-weight:600}
.page-head p.intro{max-width:62ch;color:var(--ink-2);margin:0 0 10px}