/* ============================================================
   Phaseshift Blog

   Uses the main site's theme so the blog and phaseshiftdata.com
   read as one property: the same palette, the same self-hosted
   Inter and IBM Plex Mono, the same nav and footer treatment.

   The token block below is imported verbatim from the site's
   styles.css. Keep it in step when the site's theme changes.
   ============================================================ */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Imported from the site's styles.css -- keep in step. */
:root {
  --bg: #0d1117;
  --bg-deep: #0a0e14;
  --surface: #111921;
  --surface-2: #0f151d;
  --cyan: #22d3ee;
  --blue: #0ea5e9;
  --ink: #f0f6fc;
  --emph: #e6edf3;
  --body: #a5afbc;
  --body2: #929daa;
  --muted: #484f58;
  --card-border: rgba(34, 211, 238, 0.08);
  --divider: rgba(34, 211, 238, 0.1);
  --line-soft: rgba(240, 246, 252, 0.07);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nav-h: 72px;
  --gutter: clamp(20px, 4vw, 36px);
  --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  /* --bg-deep, not --bg: this is the ground the site shows at #top, where the
     hero's .cine-stage paints var(--bg-deep) over the body. Matching it keeps
     the blog and the site's first screen the same colour. */
  background: var(--bg-deep);
  color: var(--body);
  font: 400 17px/1.75 var(--sans);
  -webkit-text-size-adjust: 100%;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: min(100% - (2 * var(--gutter)), var(--measure)); margin-inline: auto; }
.wide { width: min(100% - (2 * var(--gutter)), 68rem); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- masthead ---- */
.masthead {
  border-bottom: 1px solid var(--divider);
  /* Matches the site's scrolled nav: rgba(13, 17, 23, 0.94) over blur. */
  background: rgba(13, 17, 23, 0.94);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
/* The logo image carries the wordmark, as on the main site -- no text beside it. */
.brand img { height: 26px; width: auto; }
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.nav a {
  color: var(--body2);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--cyan); }

/* ---- headings and prose ---- */
h1, h2, h3 { color: var(--ink); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); margin: 0 0 .7rem; }
h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); margin: 2.75rem 0 .85rem; font-weight: 700; }
h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; font-weight: 600; }
p { margin: 0 0 1.25rem; }
strong { color: var(--emph); }

.post-meta {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2rem;
}
.post-hero { margin: clamp(2rem, 4vw, 3rem) 0 2.5rem; }
.post-hero img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--card-border);
}
.post-body { padding-bottom: 4rem; }
.post-body > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.7;
  color: var(--emph);
}

/* ---- masthead banner ----
   The wave still from the site's #event cinematic, under the same cyan radial
   glow team.html uses for its hero. The poster is used rather than the scrub
   video: the video is 4.8 MB, and this is a page people come to read.
   The image is decorative, so it is painted in CSS rather than marked up. */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: image-set(url("assets/posters/wave.webp") type("image/webp"),
                              url("assets/posters/wave.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  opacity: .32;
}
/* Fades the still into the page ground so headline text stays legible, and
   carries the site's cyan glow. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 80% 0, rgba(34, 211, 238, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 20, 0.55) 0%, rgba(10, 14, 20, 0.86) 62%, var(--bg-deep) 100%);
}
.banner-inner { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.25rem, 4vw, 3rem); }
.banner-inner h1 { margin: 0 0 .85rem; }
.banner-inner .post-meta { margin: 0; }

@media (max-width: 40rem) {
  .banner::before { opacity: .22; }
}

/* ---- index ---- */
.page-title { margin: 0 0 .5rem; }
.page-lede { color: var(--body2); margin: 0; font-size: 1.05rem; max-width: 38rem; }
.posts { margin-top: 3rem; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }

.post-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .2s ease, background .2s ease;
}
.post-card:hover { border-color: var(--divider); background: var(--surface-2); }
.post-card a { text-decoration: none; color: inherit; }
.post-card h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.post-card a:hover h2 { color: var(--cyan); }
.post-card img { width: 100%; border-radius: 8px; }
.post-card p { margin: 0; color: var(--body); }
.post-card .post-meta { margin: 0 0 .75rem; }

@media (min-width: 48rem) {
  .post-card { grid-template-columns: 17rem 1fr; align-items: start; gap: 1.75rem; }
}

/* ---- footer ---- */
.foot {
  border-top: 1px solid var(--divider);
  margin-top: 4rem;
  padding: 2.5rem 0 4rem;
  color: var(--muted);
  font-size: .9rem;
  display: flex;
  gap: 1rem 2rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.foot a { color: var(--body2); text-decoration: none; }
.foot a:hover { color: var(--ink); }

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