/* ===========================================================
   sophie.tech
   A dreamy space future: watercolour washes, cosmos, and the
   readouts of a control panel that someone actually enjoys flying.
   Palette is built from the SpaceClub logo gradient.
   =========================================================== */

:root {
  /* the logo gradient, kept exactly as the SVG defines it */
  --gradient: linear-gradient(135deg, #3BC7F6 0%, #A855F7 29.8%, #CC4D9E 69.3%, #EF4444 100%);
  --g-cyan: #3BC7F6;
  --g-violet: #A855F7;
  --g-magenta: #CC4D9E;
  --g-ember: #EF4444;

  /* deep purple void, taken from the octopus landing page */
  --void: #14002a;
  --void-2: #23003E;
  --ink: #0b0018;

  --panel: rgba(38, 8, 66, 0.52);
  --panel-line: rgba(168, 85, 247, 0.28);
  --panel-line-lit: rgba(59, 199, 246, 0.55);

  --text: rgba(255, 255, 255, 0.94);
  --text-soft: rgba(226, 205, 255, 0.72);
  --text-dim: rgba(198, 173, 240, 0.48);
  --text-ghost: rgba(178, 150, 230, 0.3);

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", "Consolas", ui-monospace, monospace;

  /* bootstrap overrides so components inherit the scheme */
  --bs-primary: #A855F7;
  --bs-primary-rgb: 168, 85, 247;
  --bs-primary-text-emphasis: #d0a8ff;
  --bs-secondary: #3BC7F6;
  --bs-secondary-rgb: 59, 199, 246;
  --bs-secondary-text-emphasis: #9de3ff;
  --bs-body-bg: var(--void);
  --bs-body-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--g-cyan);
  --bs-link-hover-color: #9de3ff;
  --bs-border-color: var(--panel-line);
  --bs-emphasis-color: var(--text);
}

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

html { height: 100%; }

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

/* ---------- the sky: four fixed layers behind everything ---------- */

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* 1. the void, with a warm horizon low and left */
.sky-void {
  background:
    radial-gradient(ellipse 90% 70% at 12% 8%, rgba(59, 199, 246, 0.16), transparent 62%),
    radial-gradient(ellipse 70% 60% at 88% 22%, rgba(168, 85, 247, 0.2), transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 108%, rgba(204, 77, 158, 0.22), transparent 66%),
    linear-gradient(178deg, var(--ink) 0%, var(--void) 42%, var(--void-2) 100%);
}

/* 2. watercolour blooms: soft pigment pooling, drifting slowly */
.bloom {
  position: absolute;
  border-radius: 46% 54% 60% 40% / 52% 46% 54% 48%;
  filter: blur(78px);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: drift 34s ease-in-out infinite alternate;
}
.bloom-1 { width: 46vw; height: 40vw; top: -6vw;  left: -8vw;  background: radial-gradient(circle at 38% 42%, var(--g-cyan), transparent 68%); }
.bloom-2 { width: 52vw; height: 44vw; top: 14vh;  right: -12vw; background: radial-gradient(circle at 55% 45%, var(--g-violet), transparent 68%); animation-delay: -8s; animation-duration: 41s; }
.bloom-3 { width: 40vw; height: 38vw; bottom: 4vh; left: 12vw;  background: radial-gradient(circle at 50% 50%, var(--g-magenta), transparent 66%); animation-delay: -17s; animation-duration: 47s; }
.bloom-4 { width: 26vw; height: 24vw; bottom: -6vw; right: 6vw; background: radial-gradient(circle at 50% 50%, var(--g-ember), transparent 62%); opacity: 0.32; animation-delay: -25s; animation-duration: 53s; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 46% 54% 60% 40% / 52% 46% 54% 48%; }
  100% { transform: translate(3vw, -2vh) scale(1.09) rotate(7deg); border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; }
}

/* 3. paper grain, so the washes sit on something with tooth */
.sky-grain {
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 4. starfield, two layers on offset twinkles */
.sky-stars, .sky-stars-2 { background-repeat: repeat; }
.sky-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 62% 14%, #dcefff, transparent),
    radial-gradient(1.6px 1.6px at 84% 38%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 33% 68%, #f5e6ff, transparent),
    radial-gradient(1.3px 1.3px at 74% 82%, #fff, transparent),
    radial-gradient(1px 1px at 8% 84%, #cfe8ff, transparent);
  background-size: 620px 620px;
  opacity: 0.75;
  animation: twinkle 4.5s ease-in-out infinite;
}
.sky-stars-2 {
  background-image:
    radial-gradient(1px 1px at 44% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 12% 52%, #ffe9f6, transparent),
    radial-gradient(1px 1px at 91% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 57% 91%, #e3f4ff, transparent);
  background-size: 430px 430px;
  opacity: 0.5;
  animation: twinkle 4.5s ease-in-out infinite;
  animation-delay: 2.1s;
}
@keyframes twinkle { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.35; } }

/* 5. the same starfield, drawn on a canvas so the pointer can touch it:
   stars near the cursor brighten, swell and drift aside. The CSS layers
   above are the fallback, and are hidden once the canvas takes over. */
/* sits in DOM order between the fallback layers and the grain */
.sky-starfield { display: block; }
.starfield-live .sky-stars,
.starfield-live .sky-stars-2 { display: none; }

/* everything real sits above the sky. .below-main covers the sections that
   sit between main and the footer, whose bare headings would otherwise be
   painted over by the fixed sky layers. */
.masthead, main, .below-main, .site-footer { position: relative; z-index: 2; }
main { flex: 1 0 auto; }

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.25rem; }

main p { color: var(--text-soft); }
main a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the gradient is the signature: use it on names, never on body text */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* micro labels for readouts, never stacked above a heading */
.readout {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-ghost);
}

/* ---------- panels: glass with cut corners and brackets ---------- */

.panel {
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--panel-line);
  clip-path: polygon(14px 0%, 100% 0%, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0% 100%, 0% 14px);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.85);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--gradient);
  opacity: 0.55;
  z-index: 2;
}
.panel:hover {
  border-color: var(--panel-line-lit);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -26px rgba(59, 199, 246, 0.35);
}
.panel:hover::before { opacity: 1; }

/* ---------- masthead: a wordmark and search, no menu bar ---------- */

.masthead {
  padding: 26px 0 8px;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wordmark:hover .wordmark-dot { transform: rotate(22deg) scale(1.08); }
.wordmark-dot {
  width: 38px; height: 38px;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.wordmark-text { color: var(--text); }

.btn-search {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: rgba(59, 199, 246, 0.06);
  border: 1px solid var(--panel-line);
  padding: 9px 16px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: all 0.25s ease;
}
.btn-search:hover {
  color: #fff;
  background: rgba(59, 199, 246, 0.16);
  border-color: var(--panel-line-lit);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 40px;
  align-items: center;
  padding: 34px 0 20px;
}
.hero-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 18px;
}
.hero p { font-size: 1.1rem; max-width: 46ch; }
.hero-saturn { justify-self: center; width: 100%; max-width: 340px; }
.hero-saturn svg { width: 100%; height: auto; display: block; animation: bop 6s ease-in-out infinite; }
@keyframes bop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* saturn wakes up when you point at it: the rings swing level, the planet
   wobbles, the halo warms and the two stray stars flare */
.hero-saturn .sat-rings {
  transform-box: view-box;
  transform-origin: 160px 125px;
  transform: rotate(-18deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-saturn:hover .sat-rings,
.hero-saturn:focus-within .sat-rings { transform: rotate(-2.5deg) scale(1.07); }

.hero-saturn .sat-planet {
  transform-box: view-box;
  transform-origin: 160px 125px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-saturn:hover .sat-planet,
.hero-saturn:focus-within .sat-planet { animation: satWobble 1.9s ease-in-out infinite; }

.hero-saturn .sat-halo { transition: opacity 0.7s ease; }
.hero-saturn:hover .sat-halo,
.hero-saturn:focus-within .sat-halo { opacity: 0.92; }

.hero-saturn .sat-star {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.hero-saturn:hover .sat-star,
.hero-saturn:focus-within .sat-star { transform: scale(2.6); }
.hero-saturn .sat-star-2 { transition-delay: 0.09s; }

@keyframes satWobble {
  0%, 100% { transform: rotate(-3.2deg) scale(1.04); }
  50%      { transform: rotate(3.6deg) scale(1.09); }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-saturn { max-width: 230px; order: -1; }
}

/* ---------- post cards ---------- */

.post-card { height: 100%; display: flex; flex-direction: column; padding: 22px 22px 20px; }
.post-card .post-date {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--g-cyan);
  opacity: 0.85;
}
.post-card h3 {
  font-size: 1.16rem;
  margin: 0 0 8px;
  line-height: 1.3;
}
.post-card p { font-size: 0.92rem; color: var(--text-dim); margin: 0; }
.post-card .post-go {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.post-card:hover .post-go { color: var(--g-cyan); }
.post-card .post-thumb { margin: -22px -22px 16px; height: 168px; object-fit: cover; width: calc(100% + 44px); }

/* ---------- the orbit readout: interests as instrument rows ---------- */

.orbit-readout { padding: 6px 0 2px; }
.orbit-row {
  display: grid;
  grid-template-columns: 46px minmax(120px, 190px) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}
.orbit-row:last-child { border-bottom: 0; }
.orbit-row:hover { background: rgba(59, 199, 246, 0.05); }
.orbit-idx { font-family: var(--mono); font-size: 0.66rem; color: var(--text-ghost); letter-spacing: 0.1em; }
.orbit-name { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--text); }
.orbit-note { font-size: 0.86rem; color: var(--text-dim); }
@media (max-width: 620px) {
  .orbit-row { grid-template-columns: 34px 1fr; gap: 10px; }
  .orbit-note { grid-column: 2; }
}

/* ---------- buttons ---------- */

.btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  clip-path: polygon(9px 0%, 100% 0%, calc(100% - 9px) 100%, 0% 100%);
  padding: 11px 22px;
}
.btn-outline-primary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--panel-line);
  --bs-btn-hover-bg: rgba(168, 85, 247, 0.18);
  --bs-btn-hover-border-color: var(--g-violet);
  --bs-btn-hover-color: #fff;
}
.btn-primary {
  --bs-btn-bg: rgba(168, 85, 247, 0.22);
  --bs-btn-border-color: var(--g-violet);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(168, 85, 247, 0.38);
  --bs-btn-hover-border-color: var(--g-cyan);
}

/* ---------- article pages ---------- */

.prose { max-width: 68ch; }
.prose h1 { margin-bottom: 0.6rem; }
.prose h2 { margin-top: 2.4rem; }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  border-left: 2px solid var(--g-violet);
  padding-left: 1.1rem;
  margin-left: 0;
  color: var(--text-soft);
  font-style: italic;
}
.prose code { color: var(--g-cyan); background: rgba(59, 199, 246, 0.08); padding: 0.1em 0.4em; }
.prose pre { background: rgba(11, 0, 24, 0.7); border: 1px solid var(--panel-line); padding: 1rem 1.1rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border-color: var(--panel-line); opacity: 0.5; }

.post-meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.9rem;
}

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

.site-footer {
  margin-top: 76px;
  border-top: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(11, 0, 24, 0), rgba(11, 0, 24, 0.72));
  padding: 40px 0 32px;
}
.footer-rule { height: 2px; background: var(--gradient); opacity: 0.9; margin-bottom: 34px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-end; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--g-cyan); }
.footer-mark { display: flex; align-items: center; gap: 12px; }
.footer-mark svg { width: 40px; height: 44px; }
.egg-btn {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.egg-btn:hover, .egg-btn:focus-visible { opacity: 1; transform: translateY(-3px) rotate(-5deg); }
.egg-btn:focus-visible { outline: 1px solid var(--g-cyan); outline-offset: 5px; }
.footer-note { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; color: var(--text-dim); line-height: 1.7; }

/* ---------- search modal ---------- */

#searchModal .modal-content,
#orbitModal .modal-content {
  background: rgba(20, 0, 42, 0.94);
  backdrop-filter: blur(26px);
  border: 1px solid var(--panel-line);
  clip-path: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
}
#searchModal .modal-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); }
#orbitModal .modal-title { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.egg-found {
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 9px 0 0;
  max-width: 48ch;
}
#orbitModal .orbit-row { padding: 12px 4px; }
#orbitModal .orbit-row:hover { background: rgba(59, 199, 246, 0.05); }
#searchInput {
  background: rgba(11, 0, 24, 0.6);
  border: 1px solid var(--panel-line);
  color: var(--text);
  border-radius: 0;
  font-family: var(--body);
}
#searchInput:focus {
  background: rgba(11, 0, 24, 0.8);
  border-color: var(--g-cyan);
  box-shadow: 0 0 0 3px rgba(59, 199, 246, 0.14);
  color: #fff;
}
#searchInput::placeholder { color: var(--text-ghost); }
.search-results a { color: var(--text); }

/* ---------- gallery (kept from the template) ---------- */

.gallery-overlay, .gallery-all-overlay { background: rgba(11, 0, 24, 0.94); backdrop-filter: blur(6px); }
.gallery-nav-btn, .gallery-all-nav-btn {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid var(--panel-line);
  transition: all 0.3s ease;
}
.gallery-nav-btn:hover, .gallery-all-nav-btn:hover { background: rgba(59, 199, 246, 0.3); transform: scale(1.08); }
.gallery-nav-btn:disabled, .gallery-all-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gallery-thumbnail, .gallery-all-thumbnail { transition: transform 0.2s ease; cursor: pointer; height: 120px; object-fit: cover; }
.gallery-thumbnail:hover, .gallery-all-thumbnail:hover { transform: scale(1.05); }
.gallery-main-image { max-height: 80vh; max-width: 90vw; object-fit: contain; }
.gallery-all-main-image { max-height: 70vh; max-width: 90vw; object-fit: contain; }

/* ---------- respect the setting ---------- */

@media (prefers-reduced-motion: reduce) {
  .bloom, .sky-stars, .sky-stars-2, .hero-saturn svg, .saturn-ring,
  .hero-saturn .sat-planet { animation: none !important; }
  .sky-starfield { display: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- wiki links ---------- */

.wikilink {
  color: var(--g-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 199, 246, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.wikilink:hover { color: #9de3ff; border-bottom-color: var(--g-cyan); }
.wikilink.unresolved {
  color: var(--text-dim);
  border-bottom: 1px dashed rgba(168, 85, 247, 0.45);
  cursor: help;
}

/* ---------- post graph ---------- */

.graph-hint { max-width: 62ch; font-size: 0.95rem; margin-bottom: 1.4rem; }
.graph-hint code {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--g-cyan);
  background: rgba(59, 199, 246, 0.08);
  padding: 0.1em 0.4em;
}
.graph-panel {
  height: 400px;
  padding: 0;
  overflow: hidden;
}
.graph-panel canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .graph-panel { height: 330px; } }

/* expand control, revealed on hover, always there for keyboards */
.graph-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  background: rgba(20, 0, 42, 0.66);
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.graph-panel:hover .graph-expand,
.graph-expand:hover,
.graph-expand:focus-visible { opacity: 1; color: var(--text); border-color: var(--panel-line-lit); }

.graph-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(6, 0, 16, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.graph-panel.is-full {
  position: fixed;
  inset: 3vh 3vw;
  z-index: 1090;
  height: auto;
  width: auto;
  margin: 0;
}
body.graph-open { overflow: hidden; }

/* the hero name resolving out of noise */
.hero-name { min-height: 1em; }
.hero-name i {
  font-style: normal;
  opacity: 0.45;
}
.hero-name .hn-c { transition: opacity 0.18s ease; }
.hero-name .hn-x { opacity: 0.45; }

/* ---------- forms ---------- */

.site-form { padding: 30px 32px 32px; max-width: 620px; }
.site-form-title { font-size: 1.35rem; margin-bottom: 0.5rem; }
.site-form-desc { color: var(--text-dim); font-size: 0.94rem; margin-bottom: 1.9rem; }
.site-form .form-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.site-form .optional {
  color: var(--text-ghost);
  letter-spacing: 0.12em;
  text-transform: none;
}
.site-form .form-control {
  background: rgba(11, 0, 24, 0.55);
  border: 1px solid var(--panel-line);
  border-radius: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-form .form-control:focus {
  background: rgba(11, 0, 24, 0.78);
  border-color: var(--g-cyan);
  box-shadow: 0 0 0 3px rgba(59, 199, 246, 0.14);
  color: #fff;
}
.site-form .form-control::placeholder { color: var(--text-ghost); }
.site-form textarea.form-control { resize: vertical; min-height: 130px; }
.site-form .invalid-feedback {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #ff8f7a;
}
.site-form .was-validated .form-control:invalid,
.site-form .form-control.is-invalid { border-color: #ff8f7a; }

/* ---------- misc visuals: a honeycomb cluster ----------
   The comb is two hexagons wide and every third one opens a new indented
   row, so it steps 1, 2, 1, 2 down the page from the top left and can keep
   growing forever. Rows interlock: a row sits 3/4 of a hexagon below the
   one above it, which is where the negative margin comes from. */


.hexes {
  --w: clamp(150px, 16.5vw, 208px);
  --ratio: 1.1547;                       /* regular pointy top hexagon */
  --h: calc(var(--w) * var(--ratio));
  display: flex;
  flex-wrap: wrap;
  /* two per row, so the third wraps. The 2px is slack: at exactly 2x a
     sub-pixel rounding up would fit only one and the comb would fall
     into a single column. A third still cannot fit. */
  max-width: calc(var(--w) * 2 + 2px);
  padding-bottom: calc(var(--h) * 0.25); /* give back the last row's pull up */
}

.hex {
  position: relative;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  margin-bottom: calc(var(--h) * -0.25);
  /* deep and low, the way .panel throws its shadow. A short soft one under
     the shape is what made the comb read as bevelled plastic */
  filter: drop-shadow(0 20px 34px rgba(11, 0, 24, 0.8));
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), filter 0.45s ease;
}
/* the indent that puts each new row down and to the left of the last */
.hex:nth-child(3n + 1) { margin-left: calc(var(--w) / 2); }

.hex:hover, .hex:focus-within {
  z-index: 3;
  transform: translateY(-5px) scale(1.045);
  filter: drop-shadow(0 14px 30px rgba(59, 199, 246, 0.45));
}

/* The edge, borrowed from .panel: a violet hairline held quiet at rest and
   lit by the logo gradient. A clip-path eats any real border, so the edge is
   a gradient hexagon with the art inset inside it, and the inset is what
   opens the gap between neighbours. */
.hex-inner {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  text-decoration: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--panel-line);
}
/* the logo gradient walked around the six edges: cyan at the top point,
   violet down the shoulders, ember at the foot, mirrored either side. Half
   lit at rest, full on hover, so the whole outline catches. */
.hex-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 26% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(59, 199, 246, 0) 72%),
    conic-gradient(from 0deg at 50% 50%,
      #3BC7F6 0deg,
      #A855F7 68deg,
      #CC4D9E 128deg,
      #EF4444 180deg,
      #CC4D9E 232deg,
      #A855F7 292deg,
      #3BC7F6 360deg);
  opacity: 0.46;
  transition: opacity 0.4s ease;
}
.hex:hover .hex-inner::before, .hex:focus-within .hex-inner::before { opacity: 1; }
.hex-inner:focus-visible { outline: none; }

/* 1.6px of inset leaves the edge a hairline, the weight of .panel's border.
   It opens out at the six vertices on its own, which marks the corners */
.hex-face {
  position: absolute;
  inset: 1.6px;
  overflow: hidden;
  background: var(--void-2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* dark art keeps its punch; .hex-light knocks back the one page with a
     cream field, which no single setting could cover alongside a black void */
  filter: brightness(0.72) saturate(1.15);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease;
}
.hex:hover img { transform: scale(1.08); filter: brightness(0.95) saturate(1.25); }
.hex-light { --hex-tint: rgba(58, 12, 104, 0.6); }
.hex-light img { filter: brightness(0.42) saturate(1.45); }
.hex-light:hover img { filter: brightness(0.58) saturate(1.55); }

/* a screen, not a photo tile: fine scanlines, a cool cast off the top point
   and a pool of dark under the type. The dark is pulled into the middle
   rather than banked along the bottom, so the art still reads out at the
   edges instead of drowning in a scrim. */
.hex-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* a flat one-colour layer, off by default: .hex-light uses it to pull a
       cream page into the same violet as its two black-void neighbours */
    linear-gradient(var(--hex-tint, rgba(0, 0, 0, 0)), var(--hex-tint, rgba(0, 0, 0, 0))),
    repeating-linear-gradient(180deg,
      rgba(59, 199, 246, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(ellipse 72% 34% at 50% 50%,
      rgba(11, 0, 24, 0.93) 0%, rgba(11, 0, 24, 0.78) 42%, rgba(11, 0, 24, 0) 84%),
    radial-gradient(ellipse 88% 52% at 50% 12%, rgba(59, 199, 246, 0.2), transparent 74%),
    linear-gradient(180deg, rgba(11, 0, 24, 0.22) 0%, rgba(11, 0, 24, 0.14) 44%, rgba(11, 0, 24, 0.66) 100%);
  transition: opacity 0.35s ease;
}
.hex:hover .hex-face::after { opacity: 0.85; }

/* the readout, stacked like a post card: mono date, title, then the go line
   that .post-go keeps in its footer */
.hex-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 18px 11% 0;
  text-align: center;
}

.hex-date {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--g-cyan);
  opacity: 0.85;
  text-shadow: 0 1px 12px rgba(11, 0, 24, 0.95);
}

.hex-title {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.74rem, 0.95vw, 0.9rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(11, 0, 24, 0.95);
}

/* holds its line at rest so nothing shifts when it arrives */
.hex-go {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--g-cyan);
  text-shadow: 0 1px 12px rgba(11, 0, 24, 0.95);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.hex-go .bi { margin-left: 0.25em; }
.hex:hover .hex-go, .hex:focus-within .hex-go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hex, .hex img, .hex-inner, .hex-inner::before, .hex-go { transition: none; }
  .hex:hover, .hex:focus-within { transform: none; }
  .hex-go { transform: none; }
}