:root {
  --ground: #060606;
  --text: #F6F2EA;
  --muted: #B0AAA1;
  --faint: #7E7972;
  --rule: rgba(236,230,219,0.10);

  --accent: #C89A6A;          /* muted amber — kickers, dividers */
  --accent-2: #E3B884;        /* brighter amber — hover, active */

  --inset: 13.7%;
  --measure: 660px;           /* prose column — tune against a real screen */

  --font-body: "Inter", system-ui, sans-serif;
  --font-head: "Exo 2", "Inter", system-ui, sans-serif;
  --font-mark: "Michroma", "Exo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* The sky sits on its own fixed layer behind the page, not on the body as a
   fixed background. iOS Safari and Chrome for iOS do not pin a fixed body
   background: they size it to the whole document and show a zoomed-in piece
   of it. A fixed element carrying the image holds still on every browser.
   --sky is the one value a section (the gallery) overrides. */
:root { --sky: url("/devlog/DevLogSky01.jpg"); }   /* full path: a section's stylesheet overrides it, and the browser resolves it from here */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ground);
  background-image: var(--sky);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
main a:hover, main a:focus-visible,
.devlog-footer a:hover, .devlog-footer a:focus-visible { color: var(--accent-2); }

/* ---------- header: wordmark left, nav right, floating on the ground ---------- */

.site-header { background: none; border: none; }

.site-header-inner {
  width: 100%;
  padding: clamp(22px,3vh,44px) var(--inset) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-header a { text-decoration: none; }

.header-wordmark {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 30px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text);
}

.subnav { display: flex; gap: 2.4em; }
.subnav a {
  color: var(--muted);
  font-size: clamp(13px, 0.72vw, 20px);
  letter-spacing: 0.06em;
  transition: color 0.18s ease;
}
.subnav a:hover, .subnav a:focus-visible { color: var(--text); }

/* ---------- page ---------- */

.page {
  width: min(calc(100% - 48px), var(--measure));
  margin: 0 auto;
  padding: clamp(72px,11vh,140px) 0 clamp(72px,11vh,140px);
}

.devlog-kicker {
  color: var(--accent);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.9em;
}

h1 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.16;
  margin: 0 0 0.35em;
}

.entry-date {
  color: var(--faint);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  margin: 0 0 3.2em;
}

h2 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-size: 1.6rem;
  line-height: 1.28;
  margin: 3em 0 0.7em;
}

h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 2.4em 0 0.6em;
}

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.5em; }
strong { color: #FFF; font-weight: 600; }
em { color: var(--text); }

hr { border: none; border-top: 1px solid var(--rule); margin: 3em 0; }

/* Day divider: label flanked by rules. Structural, not decorative — it
   marks a real break in the record. */
.day-one {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin: 4em 0;
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.day-one::before, .day-one::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(200,154,106,0.32);
}

/* ---------- index list: no cards ---------- */

.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list li { margin: 0 0 3.4em; }

.entry-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.entry-card-kicker {
  color: var(--accent);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}

.entry-card-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.3em;
  transition: color 0.18s ease;
}
.entry-card:hover .entry-card-title,
.entry-card:focus-visible .entry-card-title { color: var(--accent-2); }
.entry-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 10px; }

.entry-card-summary { color: var(--muted); font-size: 1rem; }

/* Older / newer, at the foot of an entry. Older sits left, newer right, and a
   missing neighbour leaves its side empty rather than shifting the other one. */
.entry-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 4em 0 0;
  padding-top: 2em;
  border-top: 1px solid var(--rule);
}
.entry-nav a { display: block; text-decoration: none; }
.entry-nav-older { grid-column: 1; }
.entry-nav-newer { grid-column: 2; text-align: right; }

.entry-nav-dir {
  display: block;
  color: var(--faint);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.35em;
}
.entry-nav-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--accent);
  transition: color 0.18s ease;
}
.entry-nav a:hover .entry-nav-title,
.entry-nav a:focus-visible .entry-nav-title { color: var(--accent-2); }
.entry-nav a:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }

/* When the navigation is present it carries the rule, so the discuss line
   below it does not draw a second one. */
.entry-nav + .entry-discuss {
  margin-top: 2.4em;
  padding-top: 0;
  border-top: none;
}

/* A quiet line at the foot of an entry, after the reading is done. */
.entry-discuss {
  margin: 4em 0 0;
  padding-top: 2em;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.entry-discuss a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}
.entry-discuss a:hover,
.entry-discuss a:focus-visible { color: var(--accent-2); }

/* ---------- footer ---------- */

.devlog-footer {
  color: var(--faint);
  font-size: 0.82rem;
  border: none;
}
.devlog-footer-inner {
  width: min(calc(100% - 48px), var(--measure));
  margin: 0 auto;
  padding-bottom: clamp(48px,8vh,96px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.devlog-footer a { text-decoration: none; }

/* ---------- images ---------- */

.page img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.6em 0 0.6em;
  border: none;
  border-radius: 0;
  background: none;
}

/* An italic line directly under an image or a video becomes its caption. */
.page p:has(> img) + p > em:only-child,
.page p:has(> video) + p > em:only-child,
.page video + p > em:only-child {
  display: block;
  color: var(--faint);
  font-size: 0.88rem;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0 2.6em;
}

/* Match the image's spacing so a video sits the same distance from its
   caption and from the surrounding prose. */
.page video {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.6em 0 0.6em;
}

/* A paragraph holding only images: side by side on wide screens. */
.page p:has(> img + img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 2.6em 0 0.6em;
}
.page p:has(> img + img) img { margin: 0; }

/* ---------- narrow ---------- */

@media (max-width: 820px) {
  :root { --inset: 8%; }
  .site-header-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 600px) {
  .page { padding: 56px 0 72px; }
  .page p:has(> img + img) { grid-template-columns: 1fr; }
  .entry-nav { grid-template-columns: 1fr; gap: 1.8em; }
  .entry-nav-older, .entry-nav-newer { grid-column: 1; text-align: left; }
}

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