/* Swagbound blog: EarthBound windows on the title screen's night sky.
   Fonts are the game's own files; this site's CSP allows no outside fonts. */
@font-face {
  font-family: "EarthBound Dialogue Gold";
  src: url("/fonts/earthbound-dialogue-gold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-sans.woff2") format("woff2");
  font-display: swap;
}
:root {
  --sky: #1e0544;
  --sky-deep: #12022b;
  --window: #0f0e14;
  --frame: #f3ecd6;
  --rule: #3a3448;
  --text: #f6f2e6;
  --muted: #b9b0cf;
  --gold: #ffd23f;
  --flame: #ff7a2f;
  --glow: rgba(168, 85, 247, .65);
  --eb: "EarthBound Dialogue Gold", "Pixelify Sans", ui-monospace, monospace;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --body: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 500px at 50% -120px, #3a0b74 0%, transparent 70%), linear-gradient(var(--sky), var(--sky-deep) 1400px);
  background-color: var(--sky-deep);
  color: var(--text);
  font: 500 17px/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 56px;
}
.wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 26px; }
nav.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 14px/1 var(--pixel); letter-spacing: .08em; }
nav.top a { color: var(--muted); text-decoration: none; text-transform: uppercase; }
nav.top a:hover { color: var(--gold); }
header { display: grid; justify-items: center; gap: 10px; text-align: center; }
.logo {
  width: min(420px, 100%); height: auto; image-rendering: pixelated;
  /* the logo is cut from the title screen; fade its flat backdrop into the sky gradient */
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 62%, transparent 100%);
}
.kicker { font: 700 15px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
h1 { font: 400 clamp(26px, 5.4vw, 36px)/1.15 var(--eb); color: var(--gold); text-shadow: 0 0 12px var(--glow), 2px 2px 0 var(--flame); margin: 4px 0 0; text-wrap: balance; }
.lede { font-size: 19px; max-width: 34em; text-wrap: balance; margin: 0; }

.win {
  background: var(--window);
  border: 3px solid var(--frame);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--window), inset 0 0 0 5px #4a4458, 0 6px 0 #07010f;
  padding: 22px 22px 24px;
  min-width: 0;
}
.win h2 { font: 400 clamp(21px, 4.4vw, 26px)/1.2 var(--eb); color: var(--gold); text-shadow: 0 0 10px var(--glow), 2px 2px 0 var(--flame); margin: 0 0 12px; text-wrap: balance; }
.win h2::before { content: "\25B6"; font-size: .6em; vertical-align: .22em; margin-right: .5em; color: var(--frame); text-shadow: none; }
.win p { margin: 0 0 12px; }
.win p:last-child { margin-bottom: 0; }
ul.list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
ul.list li { padding-left: 22px; position: relative; }
ul.list li::before { content: "\2022"; position: absolute; left: 4px; color: var(--gold); font-weight: 800; }

.status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 20px; }
.status-label { grid-column: 1 / -1; font: 700 13px/1 var(--pixel); letter-spacing: .16em; color: var(--gold); padding: 2px 4px 6px; }
.stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--rule); min-width: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat:nth-child(even) { margin-right: 14px; }
.stat span { font: 500 15px/1.3 var(--pixel); color: var(--muted); }
.stat b { font: 700 24px/1 var(--pixel); font-variant-numeric: tabular-nums; }

figure { margin: 16px 0 0; display: grid; gap: 8px; }
figure img { width: 100%; height: auto; border-radius: 6px; border: 2px solid var(--rule); image-rendering: pixelated; display: block; }
figure img.photo { image-rendering: auto; }
figcaption { font: 500 14px/1.45 var(--body); color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.print-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; }
.print-row figure { margin-top: 0; }
kbd { font: 700 .85em/1 var(--pixel); background: #2a2436; border: 1px solid #5a516e; border-bottom-width: 3px; border-radius: 4px; padding: 2px 6px; color: var(--text); }
.shout { font-family: var(--pixel); font-weight: 700; color: var(--gold); }
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
footer.win { text-align: center; }
footer .play { font: 400 clamp(19px, 4vw, 23px)/1.25 var(--eb); }

/* Blog index: one window per post */
.post-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; text-decoration: none; color: inherit; }
.post-card img { width: 100%; height: auto; border-radius: 6px; border: 2px solid var(--rule); }
.post-card time { font: 700 13px/1 var(--pixel); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.post-card h2 { margin: 6px 0 8px; }
.post-card p { color: var(--text); }
.post-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.post-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

@media (max-width: 560px) {
  .status { grid-template-columns: 1fr; }
  .stat:nth-child(even) { margin-right: 0; }
  .stat:nth-last-child(2) { border-bottom: 1px dashed var(--rule); }
  .pair, .print-row, .post-card { grid-template-columns: 1fr; }
  .print-row figure, .post-card img { max-width: 300px; }
  .win { padding: 18px 16px 20px; }
}