/* ===================================================================
   PBD Software — pbdsoftware.com
   A dark, quiet software-studio one-pager. The "pale blue dot" theme
   carries through the accent colour, the wordmark dot, and the period
   of the hero. Deep-space backdrop: layered nebula wash, soft sunbeam,
   three drifting starfields, hand-placed bright stars, and a vignette.
   =================================================================== */

:root {
  /* Palette */
  --bg:           #08090d;
  --bg-deep:      #050609;
  --surface:      #0e1118;
  --surface-hi:   #141823;
  --text:         #eaecf1;
  --text-dim:     #a0a6b3;
  --text-faint:   #6a7080;
  --text-mute:    #4a5060;
  --accent:       #a3c7e8;  /* the pale blue of Earth-as-a-dot */
  --accent-hi:    #d7e6f7;
  --accent-warm:  #f0d8a8;  /* the sunbeam */
  --border:       #1c2029;
  --border-hi:    #2c3242;
  --hairline:     rgba(234, 236, 241, 0.08);

  /* Spacing scale (8px-based, with two intermediate steps for fine rhythm) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Type scale */
  --fs-mono:   0.75rem;
  --fs-xs:     0.825rem;
  --fs-sm:     0.95rem;
  --fs-base:   1.0625rem;
  --fs-md:     1.15rem;
  --fs-lg:     1.35rem;
  --fs-xl:     1.7rem;
  --fs-2xl:    clamp(2.4rem, 5.6vw, 4.25rem);

  /* Layout */
  --maxw:   1120px;
  --pad:    clamp(1.5rem, 5vw, 2.75rem);

  /* Typography stacks (system only, no network fonts) */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
                "Inter", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Charter", "Source Serif Pro",
                "Apple Garamond", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
                Menlo, Consolas, "Liberation Mono", monospace;

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset / base ------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}

ol, ul { list-style: none; }

a { color: var(--accent); text-decoration: none; transition: color 200ms var(--ease-out); }
a:hover { color: var(--accent-hi); }

em { font-style: italic; color: var(--text); }

::selection { background: rgba(163, 199, 232, 0.28); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* --- Skip link --------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--surface-hi);
  color: var(--text);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ===================================================================
   COSMIC BACKDROP
   Fixed layers behind all content; everything has z-index 0 here, and
   real content sits at z-index 1.
   =================================================================== */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Nebula: stacked radial colour washes — cooler accent blues with two
   warmer plum/amber hints, plus a depth gradient that darkens the edges. */
.nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(78rem 56rem at 76% -6%,  rgba(123, 162, 222, 0.20), transparent 60%),
    radial-gradient(60rem 50rem at 8%  10%,  rgba(116, 99, 184, 0.16),  transparent 64%),
    radial-gradient(70rem 60rem at 50% 118%, rgba(74, 116, 176, 0.18),  transparent 62%),
    radial-gradient(48rem 36rem at 92% 70%,  rgba(208, 156, 122, 0.07), transparent 64%),
    linear-gradient(180deg, #0a0c12 0%, #08090d 38%, #06070b 100%);
}

/* A faint diagonal sunbeam — Sagan's "sunbeam". A pair of thin gradients
   crossing the upper-right; very low opacity. */
.sunbeam {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg,
      transparent 36%,
      rgba(240, 216, 168, 0.045) 47%,
      rgba(240, 216, 168, 0.085) 50%,
      rgba(240, 216, 168, 0.045) 53%,
      transparent 64%
    );
  mix-blend-mode: screen;
}

/* Starfields: three tiled layers at different scales drifting at different
   speeds. Each layer is a stack of radial gradients tiled across the page.
   The bigger the tile, the slower the drift — gives a parallax sensation. */
.stars {
  position: absolute;
  inset: -400px;
  background-repeat: repeat;
  will-change: transform;
}

.stars-a {
  background-size: 320px 320px;
  opacity: 0.85;
  background-image:
    radial-gradient(1.6px 1.6px at 18px  34px,  rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.1px 1.1px at 70px  12px,  rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(2.1px 2.1px at 122px 52px,  rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.3px 1.3px at 165px 22px,  rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 210px 70px,  rgba(203,224,244,0.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 256px 16px,  rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.8px 1.8px at 290px 52px,  rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 38px  120px, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(2.3px 2.3px at 96px  138px, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.1px 1.1px at 152px 116px, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 196px 148px, rgba(255,255,255,0.75),transparent 60%),
    radial-gradient(1.6px 1.6px at 244px 112px, rgba(203,224,244,0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 24px  208px, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.7px 1.7px at 78px  240px, rgba(255,255,255,0.85),transparent 60%),
    radial-gradient(2.0px 2.0px at 180px 258px, rgba(203,224,244,0.95),transparent 60%),
    radial-gradient(1.3px 1.3px at 240px 220px, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 280px 270px, rgba(255,255,255,0.75),transparent 60%),
    radial-gradient(1.2px 1.2px at 60px  300px, rgba(255,255,255,0.55),transparent 60%),
    radial-gradient(2.2px 2.2px at 144px 290px, rgba(255,255,255,1),   transparent 60%);
  animation: drift-down 260s linear infinite;
}

.stars-b {
  background-size: 540px 540px;
  opacity: 0.5;
  background-image:
    radial-gradient(0.9px 0.9px at 44px  56px,  rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.0px 1.0px at 158px 28px,  rgba(255,255,255,0.6),  transparent 60%),
    radial-gradient(0.8px 0.8px at 270px 110px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 380px 70px,  rgba(255,255,255,0.7),  transparent 60%),
    radial-gradient(0.9px 0.9px at 490px 160px, rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(1.1px 1.1px at 92px  230px, rgba(255,255,255,0.6),  transparent 60%),
    radial-gradient(0.8px 0.8px at 210px 320px, rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(1.0px 1.0px at 360px 400px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 470px 470px, rgba(203,224,244,0.6),  transparent 60%),
    radial-gradient(0.9px 0.9px at 30px  440px, rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(0.8px 0.8px at 140px 480px, rgba(255,255,255,0.45), transparent 60%);
  animation: drift-down 420s linear infinite;
}

.stars-c {
  background-size: 820px 820px;
  opacity: 0.32;
  background-image:
    radial-gradient(0.6px 0.6px at 110px 90px,  rgba(255,255,255,0.7), transparent 70%),
    radial-gradient(0.7px 0.7px at 320px 50px,  rgba(255,255,255,0.55),transparent 70%),
    radial-gradient(0.6px 0.6px at 550px 180px, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(0.6px 0.6px at 750px 100px, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(0.7px 0.7px at 220px 380px, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(0.6px 0.6px at 440px 520px, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(0.6px 0.6px at 680px 620px, rgba(255,255,255,0.55),transparent 70%),
    radial-gradient(0.7px 0.7px at 60px  700px, rgba(255,255,255,0.55),transparent 70%);
  animation: drift-down 620s linear infinite;
}

@keyframes drift-down {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -400px, 0); }
}

/* Bright stars — a small set of hand-placed twinkles with subtle scale/glow. */
.bright-stars {
  position: absolute;
  inset: 0;
}
.bright-stars > span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s, 1) * 2.2px);
  height: calc(var(--s, 1) * 2.2px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 6px 1px rgba(255, 255, 255, 0.75),
    0 0 14px 2px rgba(203, 224, 244, 0.35);
  animation: twinkle var(--d, 6s) ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 1;    transform: scale(1.15); }
}

/* Vignette: subtle dark feathering at the edges so content holds together. */
.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 30%, transparent 56%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(8,9,13,0.6) 0%, transparent 8%, transparent 92%, rgba(5,6,9,0.85) 100%);
}

/* ===================================================================
   LAYOUT PRIMITIVES
   =================================================================== */

.site-header,
main,
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  border-top: 1px solid var(--hairline);
  position: relative;
}

/* The notch decoration is now carried by .section-num::before to live with the heading. */

/* ===================================================================
   ETHOS SECTION (Section 01)
   The Sagan quote standing alone as the studio's statement of intent.
   =================================================================== */

.section-head-ethos {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ethos-section {
  /* Tighter than other sections so the cite sits close to the next section's
     hairline instead of floating in dead space. */
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

.ethos-quote {
  /* No grid/border overrides needed any more — the base .quote rule is now bare. */
  max-width: none;
}
.ethos-quote::before { display: none; }

.ethos-quote .quote-lead {
  /* The studio's voice — set LARGER than the Sagan quote it introduces, so
     "Building software on" reads as the headline and the quote as the source. */
  font-family: var(--font-serif);
  font-style: normal !important;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  color: var(--text) !important;
  max-width: 22ch !important;
  margin-bottom: 0.4em;
}
.ethos-quote .quote-main {
  /* 20% smaller than before (was clamp(2rem, 5vw, 3.5rem)). */
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.18;
  max-width: 24ch;
  color: var(--text-dim);
}
.ethos-quote cite {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Section heading block: small numeric tag stacked above a large editorial title.
   No bottom border here — the section-top hairline already carries the break. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-num {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.section-num::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 4.2vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
  max-width: 22ch;
}

/* ===================================================================
   WORDMARK
   =================================================================== */

.wordmark,
.footer-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  color: var(--text);
  transition: color 200ms var(--ease-out);
}
.wordmark { font-size: var(--fs-lg); }
.wordmark-text {
  font-weight: 600;
  letter-spacing: -0.025em;
  font-family: var(--font-sans);
}
.wordmark:hover { color: var(--text); }

.dot {
  display: inline-block;
  width: 0.40em;
  height: 0.40em;
  margin-left: 0.10em;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.18),
    0 0 8px 0px rgba(163, 199, 232, 0.55),
    0 0 22px 2px rgba(163, 199, 232, 0.25);
  transform: translateY(-0.02em);
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.wordmark:hover .dot,
.wordmark:focus-visible .dot {
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.28),
    0 0 14px 1px rgba(163, 199, 232, 0.70),
    0 0 32px 4px rgba(163, 199, 232, 0.35);
}
.dot-sm {
  width: 0.34em;
  height: 0.34em;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.16),
    0 0 6px 0px rgba(163, 199, 232, 0.5),
    0 0 16px 2px rgba(163, 199, 232, 0.22);
}

/* ===================================================================
   HEADER
   =================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.header-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.meta-key { color: var(--text-mute); }
.meta-val { color: var(--text-dim); }

/* ===================================================================
   HERO
   =================================================================== */

.hero {
  padding-block: clamp(4rem, 12vw, 9rem) clamp(4rem, 10vw, 7rem);
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.eyebrow-text {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--text);
}
.hero-title em {
  font-style: italic;
  color: var(--text);
}
/* Glowing pale-blue dot used as the letter "o" in the hero (s·ftware / studi·). */
.word {
  /* Keeps "s·ftware" and "studi·" together — the dot must never wrap to a new line
     away from the letters it belongs to. */
  white-space: nowrap;
}
.o-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin: 0 0.045em;
  border-radius: 50%;
  background: var(--accent-hi);
  /* The dot replaces a lowercase "o" — so its bottom should sit on the baseline
     and its top should reach the x-height. baseline-aligned (vertical-align: baseline)
     with diameter ≈ x-height does this naturally for the serif stack we use. */
  vertical-align: baseline;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 0 14px 1px rgba(163, 199, 232, 0.62),
    0 0 38px 6px rgba(163, 199, 232, 0.28);
  animation: o-dot-breathe 5.5s ease-in-out infinite alternate;
}
.o-dot:nth-of-type(2) { animation-delay: 1.2s; }

@keyframes o-dot-breathe {
  0%   { box-shadow: 0 0 0 0.5px rgba(255,255,255,0.18), 0 0 10px 1px rgba(163,199,232,0.45), 0 0 26px 3px rgba(163,199,232,0.20); }
  100% { box-shadow: 0 0 0 0.5px rgba(255,255,255,0.30), 0 0 18px 2px rgba(163,199,232,0.74), 0 0 46px 7px rgba(163,199,232,0.36); }
}

/* Screen-reader-only text. Keeps the words "software"/"studio" intact for assistive tech
   while the visual dot replaces the "o" letterform. */
.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;
}

.hero-sub {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 46ch;
  text-wrap: pretty;
}

.hero-coords {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  max-width: 44rem;
}
.coord {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
}
.coord-k {
  color: var(--text-mute);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}
.coord-v {
  color: var(--text-dim);
}

/* The Voyager coord pairs a live, ticking figure with a unit toggle. */
.coord--voyager .coord-v {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}
.coord-figure {
  color: var(--text);
  font-variant-numeric: tabular-nums;  /* fixed-width digits — no jitter as it ticks */
}

/* km / mi toggle — injected by JS; a small, quiet pill control. */
.unit-toggle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              background-color 200ms var(--ease-out);
}
.unit-toggle:hover {
  color: var(--accent-hi);
  border-color: var(--accent);
  background: rgba(163, 199, 232, 0.08);
}

/* ===================================================================
   APPROACH GRID
   =================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.point {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  transition: border-color 320ms var(--ease-out);
}

/* a hairline accent above each point that fills in on hover */
.point::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
  transition: width 380ms var(--ease-out), opacity 320ms var(--ease-out);
}
.point:hover::before,
.point:focus-within::before {
  width: 100%;
  opacity: 0.85;
}

.point-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--text-mute);
  margin-bottom: var(--s-4);
}

.point h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--s-3);
}
.point p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.65;
  text-wrap: pretty;
  max-width: 36ch;
}

/* ===================================================================
   WORK — PROJECT / TRANSMISSION CARD
   =================================================================== */

.project {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background:
    linear-gradient(180deg, rgba(22, 26, 35, 0.55), rgba(14, 17, 24, 0.55)),
    radial-gradient(120% 80% at 0% 0%, rgba(163, 199, 232, 0.06), transparent 60%);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    border-color 320ms var(--ease-out),
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}

/* faint scan-lines, transmission feel */
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.018) 3px,
      rgba(255, 255, 255, 0.018) 4px
    );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* corner ticks */
.project::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--border-hi), var(--border-hi)) top left / 12px 1px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) top left / 1px 12px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) top right / 12px 1px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) top right / 1px 12px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--border-hi), var(--border-hi)) bottom right / 1px 12px no-repeat;
}

.project:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.project-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.project-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.project-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  background: rgba(163, 199, 232, 0.04);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(163, 199, 232, 0.7);
  animation: status-pulse 2.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.project-desc {
  position: relative;
  z-index: 1;
  color: var(--text-dim);
  max-width: 60ch;
  font-size: var(--fs-md);
  line-height: 1.65;
  text-wrap: pretty;
}

.project-foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.project-foot-key { color: var(--text-faint); }
.project-foot-val { color: var(--text-dim); }
.project-foot-dots {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.rd {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-hi);
  flex: 0 0 auto;
}

/* ===================================================================
   NAME / PALE BLUE DOT
   =================================================================== */

.name-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.name-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.name-prose {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 38ch;
  text-wrap: pretty;
  font-weight: 400;
}
.name-prose em {
  font-style: italic;
  color: var(--accent-hi);
}
.name-prose + .name-prose {
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

/* The Pale Blue Dot photograph — Voyager 1, 14.02.1990. */
.pbd-figure {
  position: relative;
  width: 100%;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pbd-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #06070a;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.pbd-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.02) saturate(0.95);
}
/* Corner ticks on the photo to keep the editorial / observational tone. */
.pbd-photo::before,
.pbd-photo::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.pbd-photo::before {
  top: 8px; left: 8px;
  border-top: 1px solid rgba(234,236,241,0.35);
  border-left: 1px solid rgba(234,236,241,0.35);
}
.pbd-photo::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid rgba(234,236,241,0.35);
  border-right: 1px solid rgba(234,236,241,0.35);
}

/* Marker classes removed — the raw photograph speaks for itself. */

.pbd-caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 0.25rem;
}
.pbd-cap-k { color: var(--text-faint); }
.pbd-cap-v { color: var(--text-dim); }
.pbd-cap-sep { color: var(--text-mute); }
.pbd-cap-credit {
  flex-basis: 100%;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  font-size: 0.66rem;
}

.quote {
  position: relative;
}
.quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 22ch;
  text-wrap: balance;
}
.quote-lead {
  font-family: var(--font-serif);
  font-style: normal !important;
  font-weight: 400;
  /* sized smaller than the main quote so the pair reads as one sentence
     with a typographic gear-shift on the second line */
  font-size: clamp(1.1rem, 1.9vw, 1.4rem) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--text-dim) !important;
  max-width: 32ch !important;
  margin-bottom: 0.35em;
}
.quote cite {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.cite-name { color: var(--text-dim); }
.cite-work { color: var(--text-mute); font-style: italic; text-transform: none; letter-spacing: 0.04em; }
.cite-sep { color: var(--text-mute); }
.cite-year { color: var(--text-mute); }

/* ===================================================================
   FOOTER
   =================================================================== */

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--s-5);
}
.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      var(--hairline) 20%,
      var(--hairline) 80%,
      transparent 100%
    );
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: var(--text-faint);
}
.footer-mark {
  font-size: var(--fs-base);
  color: var(--text-dim);
}
.copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ===================================================================
   SCROLL-DRIVEN ENTRANCES (progressive enhancement)
   No JS, no fallback layout shift — these only fire where supported.
   =================================================================== */

@supports (animation-timeline: view()) {
  .section-head,
  .point,
  .project,
  .name-prose,
  .pbd-figure,
  .quote {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .point:nth-child(2) { animation-delay: 0.05s; }
  .point:nth-child(3) { animation-delay: 0.10s; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 880px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .name-body { grid-template-columns: 1fr; }
  .pbd-figure { max-width: 460px; }
  .hero-coords { grid-template-columns: 1fr; gap: var(--s-4); }
  .coord { flex-direction: row; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
  .header-meta { display: none; }
  .project-head { gap: var(--s-3); }
  .section::before { left: var(--pad); }
}

@media (max-width: 460px) {
  .project-foot { flex-wrap: wrap; }
  .project-foot-dots { order: 3; flex-basis: 100%; }
}

/* ===================================================================
   MOTION PREFERENCES
   =================================================================== */

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