/* The Cygnus Rift — shared stylesheet.
   Everything the devlog and the gallery have in common lives here: colours,
   type, header, footer, the text column and its panel, images, video, and
   captions. Each section loads this file first, then its own small file,
   which sets that section's sky and adds anything particular to it.
   A change meant for the whole site is made here and nowhere else. */

: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 set by each section's own stylesheet (devlog.css, gallery.css),
   as a full path from the site root. With none set, the ground colour shows. */
:root { --sky: none; }
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 ---------- */

/* The text column sits on a quiet panel so the sky can stay unaltered behind
   it. --panel-pad is the panel's side margin around the prose; the column keeps
   its measure and the panel grows to hold it. --panel is the tint; raise or
   lower its last number (opacity) to taste. The blur softens the sky under the
   panel on browsers that support it and is simply absent on those that don't. */
:root {
  --panel: rgba(6, 6, 6, 0.60);
  --panel-pad: clamp(20px, 4vw, 56px);
}
.page {
  width: min(calc(100% - 24px), calc(var(--measure) + 2 * var(--panel-pad)));
  margin: 0 auto;
  padding: clamp(72px,11vh,140px) var(--panel-pad) clamp(72px,11vh,140px);
  background: var(--panel);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.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 ---------- */

/* ---------- the model viewer (gallery and devlog entries) ---------- */

/* Same spacing as an image or a video, so a caption under it lines up. */
.page model-viewer {
  display: block;
  width: 100%;
  height: clamp(320px, 56vw, 560px);
  margin: 2.6em 0 0.6em;
  background: transparent;
  --poster-color: transparent;
}
.page model-viewer + 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;
}

/* Viewers inside a .model-pair: side by side on wide screens, stacked on narrow
   ones, the same way two images in one paragraph sit. */
.page .model-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 2.6em 0 0.6em;
}
.page .model-pair model-viewer {
  margin: 0;
  height: clamp(240px, 40vw, 400px);
}
.page .model-pair + 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;
}

/* ---------- image pop-out (devlog and gallery entries) ---------- */

/* An image in an entry opens larger when clicked; /lightbox.js does the work. */
.page img.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vmin;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
}
body.lightbox-open { overflow: hidden; }

@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; }
}