/* ============================================================
   Mazama Games devlog — shared stylesheet
   ============================================================

   The two main pages carry their CSS inline, which was the right call
   for two files. At eleven it is not: a change to the type scale would
   mean eleven identical edits and one of them would get missed. So the
   devlog shares this instead, and writing post nine means writing only
   the post.

   Every colour here is the same value used on the main pages, lifted
   originally from pixel_office.py so the site and the product match
   exactly rather than approximately.

   The one deliberate difference from the main pages: the small greys
   are lighter here (#7A8494 rather than #5C6472). At 12px the darker
   value measures about 3.5:1 against black, which fails WCAG AA for
   small text. Post metadata is read, not decoration, so it gets a
   value that clears the bar.
   ============================================================ */

:root{
  --ink:        #000000;
  --panel:      #0E1014;
  --edge:       #22262E;
  --text:       #E1E4EB;
  --muted:      #96A0AF;
  --dim:        #7A8494;   /* AA-compliant small text, unlike #5C6472 */
  --gold:       #F5E18C;
  --gain:       #78BE8C;
  --loss:       #EB8C8C;
  --action:     #A8D8F0;
  --action-ink: #06222F;

  --display: "PixelTraderDisplay", ui-monospace, "Cascadia Mono",
             "Consolas", "DejaVu Sans Mono", monospace;
  --body: ui-monospace, "Cascadia Mono", "Consolas",
          "DejaVu Sans Mono", monospace;
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  background-image:repeating-linear-gradient(
      to bottom, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

/* Narrower than the main pages on purpose. Those hold a wide screenshot;
   this holds prose, and prose past about 70 characters a line gets hard
   to track back from the end of one line to the start of the next. */
.shell{
  max-width:74ch;
  margin:0 auto;
  padding:18px 22px 90px;
}

/* ---------- breadcrumb ---------- */
.crumb{ padding:14px 0 0; font-size:12px; color:var(--dim) }
.crumb a{ color:var(--muted); text-decoration:none }
.crumb a:hover{ color:var(--text); text-decoration:underline }

/* ---------- headings ---------- */
h1{
  font-family:var(--display);
  font-weight:400;
  color:#FFFFFF;
  font-size:clamp(26px,4.4vw,38px);
  line-height:1.18;
  margin:30px 0 0;
  letter-spacing:.01em;
}

h2{
  font-family:var(--display);
  font-weight:400;
  color:var(--gold);
  font-size:17px;
  margin:38px 0 10px;
  letter-spacing:.01em;
}

h3{ font-weight:400; color:var(--text); font-size:15px; margin:24px 0 6px }

.dateline{ color:var(--dim); font-size:12px; margin:12px 0 0; letter-spacing:.05em }

/* ---------- prose ---------- */
p{ margin:0 0 14px; color:#C3CAD6 }
ul,ol{ margin:0 0 16px; padding-left:20px; color:#C3CAD6 }
li{ margin-bottom:7px }
strong{ color:var(--text); font-weight:600 }
em{ color:var(--text); font-style:normal; opacity:.92 }
a{ color:var(--action) }

code{
  background:var(--panel); border:1px solid var(--edge);
  padding:1px 6px; font-size:13px; color:var(--text);
}

pre{
  background:var(--panel); border:1px solid var(--edge);
  border-left:3px solid var(--edge);
  padding:13px 15px; margin:16px 0;
  /* Code does not reflow, so it scrolls inside its own box rather than
     making the whole page scroll sideways on a phone. */
  overflow-x:auto;
  font-size:12.5px; line-height:1.55;
}
pre code{ background:none; border:0; padding:0; font-size:inherit }

.panel{
  background:var(--panel);
  border:1px solid var(--edge);
  border-left:3px solid var(--gold);
  padding:16px 18px;
  margin:20px 0;
}
.panel.cost{ border-left-color:var(--loss) }
.panel.safe{ border-left-color:var(--gain) }
.panel p:last-child{ margin-bottom:0 }

/* ---------- post list ---------- */
.postlist{ margin:34px 0 0; display:grid; gap:14px }

.post-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--panel);
  border:1px solid var(--edge);
  border-left:3px solid var(--action);
  padding:18px 20px;
  transition:border-color .08s linear, background .08s linear;
}
.post-card:hover{ background:#141820; border-color:#39414E }
.post-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px }

.post-card .t{
  font-family:var(--display);
  font-size:18px; color:#FFFFFF; line-height:1.3;
  display:block;
}
.post-card .d{ color:var(--dim); font-size:12px; margin:8px 0 0; letter-spacing:.04em }
.post-card .s{ color:#C3CAD6; margin:9px 0 0; font-size:14px }

/* ---------- post footer nav ---------- */
.postnav{
  border-top:1px solid var(--edge);
  margin-top:52px; padding-top:20px;
  font-size:13px;
}
.postnav p{ margin:0 0 8px }

footer{
  border-top:1px solid var(--edge);
  margin-top:52px; padding-top:20px;
  color:var(--dim); font-size:12px;
}
footer a{ color:var(--muted) }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important }
}