/* Frostwake site, shared design system (2026-10 rework, built on the Dreadmark site's structure).
   Loaded by every page: home, how-its-made, privacy and the generated devlog.
   Colours come from the look test: blue night and snow, warm firelight. Fraunces headings,
   Archivo text, IBM Plex Mono for the weather readouts. Page-specific styles live with each page. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-var-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); }

:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-sm: 1rem; --fs-base: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); --fs-3xl: clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem);
  /* night and snow, from the look test's blue hour */
  --bg: #0b1119; --bg-2: #101823; --surface: #152030; --line: #34465c; --line-soft: #1f2c3c;
  --text: #e9eef4; --text-2: #b9c5d3; --muted: #93a2b5; --snow: #dfe7f1;
  /* firelight: links and kickers in amber, the one action in ember */
  --fire: #f2b36b; --ember-1: #ad5520; --ember-2: #7f3614; --btn-border: #e48b4a; --btn-text: #fff6ee;
  --frost: #8fb3d6; --edge: #5a7393; /* control borders, 3:1 on the night ground */
  --r: 2px; --r-img: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--fire); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--fire); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--s-5); }
.narrow { max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--ember-2); color: var(--btn-text); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ornament: a six-armed snow crystal between two hairlines */
.orn { display: block; width: 200px; height: 18px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18'%3E%3Cpath d='M0 9h84M116 9h84' stroke='%238fb3d6' stroke-opacity='.7'/%3E%3Cg stroke='%238fb3d6' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M100 1v16M93.1 5l13.8 8M93.1 13l13.8-8'/%3E%3Cpath d='M97.5 2.5l2.5 2 2.5-2M97.5 15.5l2.5-2 2.5 2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.section-head { text-align: center; margin-bottom: var(--s-7); }
.section-head .orn { margin-bottom: var(--s-4); }
.section-head p { color: var(--text-2); margin: var(--s-4) auto 0; max-width: 60ch; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px;
  font-family: var(--font-text); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border-radius: var(--r); border: 1px solid var(--edge); color: var(--text); background: rgb(11 17 25 / .7); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--snow); }
.btn-primary { color: var(--btn-text); border-color: var(--btn-border); background: linear-gradient(180deg, var(--ember-1), var(--ember-2)); box-shadow: inset 0 1px 0 rgb(255 220 190 / .25), 0 0 28px rgb(228 139 74 / .28); }
.btn-primary:hover { border-color: #ffc08a; box-shadow: inset 0 1px 0 rgb(255 220 190 / .3), 0 0 38px rgb(228 139 74 / .45); }

/* frames: frost-rimmed corners drawn with eight gradient strokes */
.frame { position: relative; padding: 6px; border-radius: var(--r-img); background:
  linear-gradient(var(--frost), var(--frost)) top left / 16px 1px no-repeat,
  linear-gradient(var(--frost), var(--frost)) top left / 1px 16px no-repeat,
  linear-gradient(var(--frost), var(--frost)) top right / 16px 1px no-repeat,
  linear-gradient(var(--frost), var(--frost)) top right / 1px 16px no-repeat,
  linear-gradient(var(--frost), var(--frost)) bottom left / 16px 1px no-repeat,
  linear-gradient(var(--frost), var(--frost)) bottom left / 1px 16px no-repeat,
  linear-gradient(var(--frost), var(--frost)) bottom right / 16px 1px no-repeat,
  linear-gradient(var(--frost), var(--frost)) bottom right / 1px 16px no-repeat,
  var(--bg-2);
  outline: 1px solid var(--line-soft); outline-offset: -3px; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-img) - 2px); }

/* the weather readout under a picture: time, weather, wind, how far you see */
.readout { margin-top: var(--s-3); font-family: var(--font-mono); font-size: .9rem; letter-spacing: .02em; color: var(--muted); }
.readout span + span::before { content: "·"; margin: 0 .6em; color: var(--line); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgb(6 10 15 / .96), rgb(6 10 15 / .9)); border-bottom: 1px solid var(--line-soft); }
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; gap: var(--s-5); }
.hdr nav ul { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.hdr nav a { display: block; padding: 10px 12px; color: var(--text-2); text-decoration: none; font-size: 1rem; }
.hdr nav a:hover, .hdr nav a[aria-current="page"] { color: var(--text); }
.hdr nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--btn-border); text-underline-offset: 8px; }
.hdr .right { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .01em; }
.brand .mark { width: 22px; height: 22px; flex: none; border-radius: 50%; background: radial-gradient(circle, #ffd59a 0 26%, var(--btn-border) 27% 42%, transparent 43%), radial-gradient(circle, transparent 55%, rgb(228 139 74 / .45) 56% 64%, transparent 65%); }
.hdr .btn { min-height: 44px; padding: 8px 18px; font-size: .95rem; }
.menu-btn { display: none; }
.mobile-nav { display: none; }
@media (max-width: 1020px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .hdr .left, .hdr .right nav { display: none; }
  .brand { order: -1; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: none; border: 1px solid var(--edge); color: var(--text); font: 500 .95rem var(--font-text); cursor: pointer; border-radius: var(--r); }
  .mobile-nav.open { display: block; border-top: 1px solid var(--line-soft); padding: var(--s-3) 0 var(--s-5); }
  .mobile-nav a { display: block; padding: 12px var(--s-5); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 560px) { .hdr .btn .long { display: none; } .brand { font-size: 1.35rem; } }

/* ---------- sections ---------- */
.section { padding-block: var(--s-10); position: relative; }
.section.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 0%, rgb(242 179 107 / .07), transparent 70%); }
.section.dark { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
@media (max-width: 700px) { .section { padding-block: var(--s-8); } }

/* page hero for inner pages (devlog, how it's made, privacy) */
.page-hero { padding-block: var(--s-9) var(--s-7); text-align: center; border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(60% 100% at 50% 0%, rgb(143 179 214 / .1), transparent 70%), var(--bg-2); }
.page-hero .orn { margin-bottom: var(--s-4); }
.page-hero h1 { font-size: var(--fs-3xl); }
.page-hero .kicker { font-family: var(--font-mono); color: var(--fire); letter-spacing: .08em; font-size: .95rem; margin-bottom: var(--s-3); }
.page-hero .kicker a { color: inherit; text-decoration: none; }
.page-hero p.lead { margin: var(--s-4) auto 0; max-width: 60ch; color: var(--text-2); }
.page-hero p.meta { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.page-hero + .section { padding-top: var(--s-8); }

/* long-form text (devlog entries, how it's made) */
.prose { font-size: 1.125rem; line-height: 1.7; color: var(--text-2); }
.prose > * + * { margin-top: var(--s-5); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--fs-xl); color: var(--text); margin-top: var(--s-8); }
.prose h3 { font-size: var(--fs-lg); color: var(--text); margin-top: var(--s-6); }
.prose strong { color: var(--text); font-weight: 650; }
.prose em { color: var(--snow); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose li::marker { color: var(--frost); }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface); border: 1px solid var(--line-soft); padding: .08em .4em; color: var(--fire); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: var(--s-3); color: var(--muted); font-style: italic; font-size: 1rem; text-align: center; }

/* devlog cards (homepage teaser + devlog index) */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.post { text-decoration: none; color: inherit; display: block; }
.post .frame { aspect-ratio: 16 / 9; padding: 5px; }
.post .meta { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.post h3 { margin-top: 4px; font-size: 1.3rem; color: var(--text); }
.post:hover h3 { color: var(--fire); }
.post p { margin-top: var(--s-2); color: var(--text-2); font-size: 1.05rem; }
.center-link { text-align: center; margin-top: var(--s-7); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }

/* a clip that plays while it is on screen, with its own pause button */
.clip { position: relative; }
.clip-btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid rgb(233 238 244 / .35); background: rgb(6 10 15 / .65); color: var(--text); font: 500 .9rem var(--font-text); cursor: pointer; }
.clip-btn:hover { border-color: var(--snow); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #070b10; padding-block: var(--s-8) var(--s-6); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); }
.foot-brand .brand { font-size: 2rem; }
.foot-brand p { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-sm); max-width: 34ch; }
.site-footer h2 { font-family: var(--font-mono); font-weight: 400; font-size: .9rem; letter-spacing: .08em; color: var(--snow); }
.site-footer ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 6px; }
.site-footer ul a { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
.site-footer ul a:hover { color: var(--text); text-decoration: underline; }
.legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 4vmin; background: rgb(4 7 11 / .94); }
.lb.open { display: grid; }
.lb img { max-height: 84vh; width: auto; border: 1px solid var(--line); }
.lb-close { position: absolute; top: 16px; right: 16px; min-width: 48px; min-height: 48px; background: var(--bg); color: var(--text); border: 1px solid var(--line); font: 600 1rem var(--font-text); cursor: pointer; }
.lb p { margin-top: 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }

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