/* Shadow Partner — dark clockwork. Deliberately unlike the light, quadrant-grid layout
   used by the other titles: this one alternates a real screenshot against each rule, so the
   echoes are shown rather than described. */

:root{
  --ink:#e8e2d6;
  --dim:#9c968a;
  --gold:#e8b93a;
  --gold-deep:#9a6c1e;
  --cyan:#66e4eb;
  --violet:#a78bd0;
  --bg:#0a0d14;
  --panel:#121722;
  --line:#26303f;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
/* Not sticky: on a narrow screen the nav folds to two or three rows, and a sticky bar
   that tall eats a third of the phone. */
.top{border-bottom:1px solid var(--line);background:#080b11}
.top-in{
  max-width:1060px;margin:0 auto;padding:14px 20px;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:14px;color:var(--ink);
}
.brand i{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff2c0 0 18%,var(--gold) 42%,var(--gold-deep) 100%);
  box-shadow:0 0 10px #e8b93a66;
}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.nav a{
  color:var(--dim);font-size:14px;letter-spacing:.04em;
  padding:4px 0;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--gold);text-decoration:none}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* ---------- masthead ---------- */
.mast{padding:74px 0 54px;max-width:660px}
.mast h1{
  margin:0 0 18px;font-size:clamp(38px,7vw,64px);line-height:1.04;
  letter-spacing:-.02em;font-weight:800;
}
.mast h1 span{display:block;color:var(--gold)}
.mast p{margin:0;font-size:18px;color:#c6c0b4;max-width:56ch}
.mast b{color:var(--ink)}

/* ---------- steps: a screenshot beside each rule ---------- */
/* The echoes are the whole point of the game, so each rule is shown with a real capture
   of it rather than an abstract diagram. Alternating sides keeps a long page moving. */
.step{
  display:grid;grid-template-columns:1fr 290px;gap:48px;align-items:center;
  padding:52px 0;border-top:1px solid var(--line);
}
.step:first-of-type{border-top:0}
/* Flip the columns, not the DOM order: `order` on a grid item does not change which
   column track it lands in, which let the image escape its 290px track and render huge. */
.step.flip{grid-template-columns:290px 1fr}
.step-txt h2{margin:0 0 12px;font-size:27px;letter-spacing:-.01em}
.step-txt .kick{
  margin:0 0 8px;color:var(--gold);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
.step-txt p{margin:0 0 12px;color:#bdb7ab;max-width:56ch}
.step-txt b{color:var(--ink)}
.step-img{margin:0;max-width:290px}
.step-img img{
  width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);background:#000;
  box-shadow:0 18px 40px #0008;
}

/* ---------- spec ---------- */
.spec{border-top:1px solid var(--line);margin-top:16px;padding:26px 0 10px}
.spec dl{display:grid;grid-template-columns:170px 1fr;gap:10px 22px;margin:0}
.spec dt{color:var(--dim);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.spec dd{margin:0;color:#c6c0b4}

/* ---------- prose pages ---------- */
.doc{max-width:720px;padding:44px 0 20px}
.doc h1{font-size:34px;margin:0 0 6px}
.doc .upd{color:var(--dim);font-size:14px;margin:0 0 26px}
.doc h2{font-size:19px;margin:30px 0 8px}
.doc p,.doc li{color:#bdb7ab}
.doc ul{padding-left:20px}
.doc li{margin:5px 0}

/* Placeholders the developer must replace before publishing. */
.ph{color:#ff6b6b;font-weight:700}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:46px;background:#080b11}
.foot{
  max-width:1060px;margin:0 auto;padding:22px 20px;
  display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--dim);font-size:14px;
}
.foot a{color:var(--dim)}
.foot .sp{margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .step{grid-template-columns:1fr 250px;gap:30px}
}
@media (max-width:600px){
  .mast{padding:52px 0 36px}
  .step,.step.flip{grid-template-columns:1fr;gap:24px;padding:38px 0}
  .step-img{max-width:280px}
  .spec dl{grid-template-columns:1fr;gap:2px}
  .spec dd{margin-bottom:12px}
  .nav{margin-left:0;width:100%}
}