:root{
  --cream:oklch(0.982 0.009 92); --card:oklch(0.997 0.004 95);
  --ink:oklch(0.285 0.028 232); --ink-soft:oklch(0.480 0.028 232);
  --brand:oklch(0.470 0.098 196); --brand-deep:oklch(0.402 0.090 198); --brand-wash:oklch(0.948 0.030 194);
  --pop:oklch(0.700 0.168 46); --pop-wash:oklch(0.952 0.038 58); --pop-deep:oklch(0.520 0.150 44);
  --line:oklch(0.910 0.010 220); --line-mid:oklch(0.852 0.014 220);
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--cream); color:var(--ink);
      font-family:"Instrument Sans",system-ui,sans-serif; font-size:1.02rem; line-height:1.7; }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }
.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 0; }
.brand{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:-.02em;
        color:var(--ink); text-decoration:none; }
.brand span{ color:var(--brand); }
.back{ font-size:.9rem; color:var(--ink-soft); text-decoration:none; }
.back:hover{ color:var(--brand); }
main{ padding:8px 0 80px; }
h1{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:2.1rem; letter-spacing:-.02em; margin:0 0 6px; }
h2{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:-.01em; margin:38px 0 10px; }
p,li{ color:var(--ink-soft); }
a{ color:var(--brand); }
.updated{ font-size:.9rem; color:var(--ink-soft); margin:0 0 24px; }
.draft{ background:var(--pop-wash); border:1.5px solid color-mix(in oklch,var(--pop) 26%, var(--line));
        border-radius:14px; padding:16px 18px; margin:0 0 28px; font-size:.94rem; color:var(--ink); }
.draft strong{ color:var(--pop-deep); }
.ph{ background:var(--brand-wash); color:var(--brand-deep); border-radius:5px; padding:1px 6px; font-weight:600; }
footer{ border-top:1px solid var(--line); padding:28px 0 60px; color:var(--ink-soft); font-size:.86rem; text-align:center; }