/* ============================================================
   LACHY BLAKE — red light-streak
   Black void · flowing red light trails (scroll-animated canvas) ·
   single red accent · Azonix wordmark.
   Philosophy: restraint, pacing, a few high-impact moments.
   LAW (2026-06-13): copy is left-aligned inside a CENTRED column.
   Page heroes use .page-hero.narrow (760px column matching
   .about-prose) so wide screens gain equal side margins — the
   block is centred, the text ragged-left. New pages follow this.
   ============================================================ */

@font-face {
  font-family: "Azonix";
  src: url("../assets/fonts/Azonix.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg:        #050506;
  --bg-2:      #0a0a0c;
  --surface:   #101012;
  --surface-2: #16161a;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.16);
  --text:      #f6f6f8;
  --muted:     #a2a2ac;
  --dim:       #62626c;

  --accent:      #ff3645;
  --accent-2:    #c81322;
  --accent-soft: rgba(255,54,69,0.14);
  --accent-line: rgba(255,54,69,0.40);
  --accent-glow: rgba(255,45,70,0.55);

  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:  "Sora", var(--font-body);
  --font-wordmark: "Azonix", var(--font-display);

  --maxw: 1240px;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #050506; }
body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  opacity: 0;                                   /* page transition — opacity only */
  transition: opacity 0.85s var(--ease);
  /* FAILSAFE: if main.js never runs (failed download, parse error), the page
     would otherwise stay invisible forever. This backstop forces it visible
     after 3s no matter what. In the normal case JS reveals it in <800ms, so
     this never shows. .leaving uses !important to still override it on nav. */
  animation: failsafe-reveal 0.5s var(--ease) 3s forwards;
}
@keyframes failsafe-reveal { to { opacity: 1; } }
body.loaded { opacity: 1; }
/* animation:none so the page-transition fade still animates even after the
   failsafe animation's forwards-fill would otherwise lock opacity (>3s on page) */
body.leaving { opacity: 0 !important; animation: none; transition: opacity 0.55s var(--ease); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent-soft); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* fixed animated background canvas + scrim */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-scrim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,0) 58%, rgba(5,5,6,0.4) 100%);
}

/* keep all content above the canvas */
.nav, .hero, .section, .footer, .page-hero, .page-body { position: relative; z-index: 1; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.92rem 1.6rem; border-radius: 100px; font-size: 0.96rem; font-weight: 500;
  letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 34px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 16px 44px -8px var(--accent-glow); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: rgba(5,5,6,0.3); }
.btn-ghost:hover { background: var(--surface); border-color: var(--text); transform: translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* extend up through the iOS status-bar / notch safe area; the bar content
     stays var(--nav-h) tall and is padded clear of the status bar. On desktop
     and non-notch devices env() resolves to 0 — the nav is unchanged. */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* opaque shield over just the status-bar strip, so page content can never
   ghost through behind the system clock in app / viewport-fit:cover mode.
   Solid colour only — no backdrop-filter (avoids the Safari white-sheet bug). */
.nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px); background: var(--bg);
}
.nav.scrolled {
  background: rgba(5,5,6,0.7);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; position: relative; }
/* links dead-centre regardless of brand/actions widths (Cinova pattern) */
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-actions { display: flex; align-items: center; gap: 0.7rem; }
.brand {
  font-family: var(--font-wordmark); font-weight: 400; font-size: 0.96rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent-glow); }
.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-links a { font-size: 0.9rem; color: var(--muted); position: relative; transition: color 0.25s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--accent); transition: width 0.3s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* Cinova-style nav CTAs, Lachy Blake accent: ghost Log in + solid Subscribe */
.nav-login {
  padding: 0.46rem 1.15rem; border: 1px solid var(--line-2); border-radius: 100px;
  color: var(--text) !important; font-size: 0.85rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-login::after { display: none !important; }
.nav-login:hover { background: var(--surface); border-color: var(--text); }
.nav-sub {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.46rem 1.15rem; border-radius: 100px; font-size: 0.85rem;
  background: var(--accent); border: 1px solid var(--accent); color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 26px -10px var(--accent-glow);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-sub svg { width: 13px; height: 13px; }
.nav-sub::after { display: none !important; }
.nav-sub:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 12px 32px -10px var(--accent-glow); }

/* Content dropdown */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.9rem; color: var(--muted); transition: color 0.25s var(--ease);
}
.nav-drop-btn svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease); }
.nav-drop-btn:hover, .nav-drop-btn.active { color: var(--text); }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 184px; padding: 0.45rem;
  background: #0c0c0f; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav-drop:hover .nav-drop-btn { color: var(--text); }
}
.nav-links .nav-drop-menu a { display: block; padding: 0.58rem 0.95rem; border-radius: 9px; font-size: 0.9rem; }
.nav-links .nav-drop-menu a::after { display: none; }
.nav-links .nav-drop-menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-links .nav-drop-menu a.active { color: var(--text); }

.burger { display: none; width: 28px; height: 18px; position: relative; z-index: 101; }
.burger span { position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
.burger span:nth-child(1){ top: 0; } .burger span:nth-child(2){ top: 50%; transform: translateY(-50%); } .burger span:nth-child(3){ bottom: 0; }
body.menu-open .burger span:nth-child(1){ top:50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ bottom:auto; top:50%; transform: translateY(-50%) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 95; background: rgba(5,5,6,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
/* backdrop-filter ONLY while open — Safari/WebKit can glitch an always-mounted
   hidden backdrop-filter layer into an opaque white sheet over the whole page */
body.menu-open .mobile-menu { opacity: 1; visibility: visible; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media not all and (max-width: 820px) { .mobile-menu { display: none; } }   /* exact complement of the burger breakpoint — no fractional-px gap */
.mobile-menu a { font-family: var(--font-wordmark); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* dynamic viewport — tracks visible height in iOS / in-app browsers */
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--nav-h) 28px 0;
}
.eclipse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--font-wordmark); font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 8rem); line-height: 1.04;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 0 50px rgba(255,255,255,0.16), 0 0 130px rgba(255,45,70,0.22);
}
.hero h1 .ln { display: block; overflow: hidden; padding: 0.04em 0; }
.hero h1 .ln > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); }
.hero.ready h1 .ln:nth-child(1) > span { transition-delay: 0.05s; transform: none; }
.hero.ready h1 .ln:nth-child(2) > span { transition-delay: 0.18s; transform: none; }

.hero .descriptor {
  margin: 3.1rem auto 0; max-width: 520px;   /* room for the ember beam between name and text */
  font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text); opacity: 0.86; letter-spacing: -0.01em;
  text-shadow: 0 1px 20px rgba(5,5,6,0.8);
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.55s, transform 0.9s var(--ease-out) 0.55s;
}
.hero .descriptor { opacity: 0; }
.hero.ready .descriptor { opacity: 0.86; transform: none; }
.hero-cta {
  margin-top: 2.4rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.72s, transform 0.9s var(--ease-out) 0.72s;
}
.hero.ready .hero-cta { opacity: 1; transform: none; }

.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity 0.8s var(--ease) 1.1s;
}
.hero.ready .scroll-cue { opacity: 1; }
.scroll-cue .line { width: 1px; height: 38px; background: linear-gradient(var(--muted), transparent); position: relative; overflow: hidden; }
.scroll-cue .line::after { content:""; position:absolute; top:0; left:0; width:100%; height:40%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: scrolldown 2.2s var(--ease) infinite; }
@keyframes scrolldown { 0%{ transform: translateY(-100%);} 60%,100%{ transform: translateY(250%);} }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- sections (frosted over the streaks) ---------- */
.section { padding: clamp(5rem, 11vw, 9rem) 0; background: rgba(5,5,6,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 3.2rem; }
.eyebrow {
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim);
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem;
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: var(--accent-line); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.02;
}
.section-head .section-sub { color: var(--muted); margin-top: 1.1rem; max-width: 54ch; font-size: 1.04rem; }

/* scroll progress line */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- LATEST: masonry wall ----------
   Real flex columns (built by latest.js), NOT CSS multi-column:
   WebKit drops column-fragmented items that gain a compositing layer
   (hover transform) — cards literally vanished on hover in Safari. */
.latest .masonry { display: flex; gap: 1.4rem; align-items: flex-start; margin-top: 0.6rem; }
.latest .m-col { flex: 1; min-width: 0; }
.m-card {
  display: block; margin-bottom: 1.4rem;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.45s var(--ease), background 0.4s var(--ease), box-shadow 0.45s var(--ease);
  transform: translateZ(0); backface-visibility: hidden;
}
.m-card:hover { border-color: var(--accent-line); transform: translateZ(0) translateY(-5px); background: var(--surface-2); box-shadow: 0 24px 50px -26px var(--accent-glow); }
/* cards are also .reveal elements — keep the slide-in + a real opacity fade
   (the base .m-card transition list used to override .reveal's, so opacity
   snapped); one merged list covers reveal and hover */
.m-card.reveal { transform: translateZ(0) translateY(28px); }
.m-card.reveal, .m-card.reveal.in {
  transition: opacity 0.7s var(--ease-out), transform 0.55s var(--ease-out), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.45s var(--ease);
}
.m-card.reveal.in { transform: translateZ(0); }
.m-card.reveal.in:hover { transform: translateZ(0) translateY(-5px); }

.m-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.m-thumb-post { aspect-ratio: auto; }                 /* social post images keep their own ratio */
.m-thumb-post img { position: static; height: auto; }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease); }
.m-thumb img.loaded { opacity: 1; }
.m-card:hover .m-thumb img { transform: scale(1.05); }
.m-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.4s var(--ease); background: linear-gradient(rgba(5,5,6,0.05), rgba(5,5,6,0.45)); }
.m-card:hover .m-play { opacity: 1; }
.m-play span { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 28px -4px var(--accent-glow); }
.m-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.m-dur { position: absolute; bottom: 9px; right: 9px; font-size: 0.72rem; padding: 0.18rem 0.46rem; border-radius: 5px; background: rgba(5,5,6,0.82); color: #fff; }

.m-body { padding: 1.05rem 1.2rem 1.25rem; }
.m-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.7rem; }
.m-tag svg { width: 14px; height: 14px; color: var(--accent); }
.m-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.32; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-date { display: block; margin-top: 0.75rem; font-size: 0.8rem; color: var(--dim); }
.m-post-text { color: var(--text); opacity: 0.92; font-size: 0.96rem; line-height: 1.5; }

/* compact social deep-link card — adds the Tetris height variation */
.m-social { display: flex; align-items: center; gap: 0.95rem; padding: 1.25rem 1.3rem; }
.m-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); transition: border-color 0.4s var(--ease), color 0.4s var(--ease); }
.m-ico svg { width: 19px; height: 19px; }
.m-card:hover .m-ico { border-color: var(--accent-line); color: var(--accent); }
.m-social-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.m-social-lead { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.m-social-handle { color: var(--dim); font-size: 0.84rem; }
.m-arrow { width: 16px; height: 16px; color: var(--dim); flex-shrink: 0; transition: color 0.35s var(--ease), transform 0.35s var(--ease); }
.m-arrow svg { width: 100%; height: 100%; }
.m-card:hover .m-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* work index */
.index-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.index-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0.5rem; border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease), background 0.5s var(--ease); overflow: hidden;
}
.index-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.index-row:hover { padding-left: 1.6rem; background: linear-gradient(90deg, rgba(255,54,69,0.06), transparent 40%); }
.index-row:hover::before { transform: scaleY(1); }
.index-num { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--dim); }
.index-main h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4.2vw, 3rem);
  letter-spacing: -0.02em; line-height: 1; transition: transform 0.5s var(--ease);
}
.index-row:hover .index-main h3 { transform: translateX(6px); }
.index-main p { color: var(--muted); font-size: 0.96rem; margin-top: 0.5rem; max-width: 52ch; }
.index-meta { display: flex; align-items: center; gap: 1.4rem; }
.index-count { font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.index-count.soon { color: var(--dim); }
.index-arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.index-arrow svg { width: 17px; height: 17px; transition: transform 0.4s var(--ease); }
.index-row:hover .index-arrow { background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); box-shadow: 0 0 24px -4px var(--accent-glow); }
.index-row:hover .index-arrow svg { stroke: #fff; }

/* social funnel */
.funnel { text-align: center; }
.funnel h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,2.8rem); letter-spacing:-0.02em; }
.funnel p { color: var(--muted); margin: 1rem auto 0; max-width: 40ch; }
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2.6rem; }
.social-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.92rem; color: var(--muted); background: rgba(5,5,6,0.4);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover { color: var(--text); border-color: var(--accent-line); background: var(--surface); transform: translateY(-3px); box-shadow: 0 0 26px -10px var(--accent-glow); }
.social-link.soon { opacity: 0.42; cursor: default; }
.social-link.soon:hover { color: var(--muted); border-color: var(--line); background: rgba(5,5,6,0.4); transform: none; box-shadow: none; }
.channel-card.soon { opacity: 0.72; }
.channel-card.soon:hover { transform: none; border-color: var(--line); background: var(--surface); box-shadow: none; }
.ch-btn.ch-soon { border-style: dashed; border-color: var(--line-2); color: var(--dim); }

/* pre-footer follow strip */
.follow-strip {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(5rem,10vw,8.5rem) 0;
  background: rgba(5,5,6,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid var(--line);
}
.follow-strip .eyebrow { justify-content: center; }
.follow-strip h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem,4vw,2.9rem); letter-spacing: -0.02em; }
.follow-strip > .wrap > p { color: var(--muted); margin: 1rem auto 0; max-width: 44ch; }
.follow-strip .social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 3rem auto 0; max-width: 860px; }
.follow-strip .btn { margin-top: 2.8rem; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: clamp(4rem,7vw,6.5rem) 0 calc(2.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(5,5,6,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.footer .brand { font-size: 0.86rem; }

/* newsletter strip */
.footer-news {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem;
  padding-bottom: 3.4rem;
}
/* full-bleed divider — the line runs edge to edge, not just the content column */
.footer-news::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 1px; background: var(--line); pointer-events: none;
}
.footer-news h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.7rem); letter-spacing: -0.02em; }
.footer-news p { color: var(--muted); margin-top: 0.5rem; max-width: 44ch; font-size: 0.95rem; }
.news-form { display: flex; align-items: center; gap: 0.5rem; position: relative; flex: 0 1 360px; }
.news-form .field {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line-2); border-radius: 100px; padding: 0.55rem 0.55rem 0.55rem 1.1rem; background: var(--surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-form .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.news-form input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 0.95rem; min-width: 0; }
.news-form input::placeholder { color: var(--dim); }
.news-form button { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 20px -6px var(--accent-glow); transition: transform 0.3s var(--ease); }
.news-form button:hover { transform: translateX(2px); }
.news-form button svg { width: 16px; height: 16px; stroke: #fff; }
.news-msg { position: absolute; left: 1.1rem; top: calc(100% + 0.6rem); font-size: 0.82rem; color: var(--accent); opacity: 0; transition: opacity 0.3s var(--ease); }
.news-msg.show { opacity: 1; }

/* big wordmark statement */
.footer-big {
  font-family: var(--font-wordmark); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 11vw, 8rem); letter-spacing: 0.04em; line-height: 1;
  padding: clamp(3.5rem,8vw,6rem) 0; color: var(--text);
  text-shadow: 0 0 60px rgba(255,45,70,0.18);
}

/* columns */
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; padding-bottom: 3.6rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.footer-col .col-label { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.6rem; }
.footer-col a { color: var(--muted); font-size: 0.96rem; position: relative; transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-col a[href^="mailto"], .footer-col a[href^="tel"] { color: var(--text); }
.footer-col .col-sub { color: var(--dim); font-size: 0.9rem; }
.footer-cta { display: inline-flex !important; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.65rem 1.2rem; border: 1px solid var(--accent-line); border-radius: 100px; color: var(--text) !important; font-size: 0.88rem; transition: background 0.35s var(--ease), color 0.35s var(--ease) !important; }
.footer-cta:hover { background: var(--accent); color: #fff !important; }
.footer-cta svg { width: 14px; height: 14px; }

/* bottom bar */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.footer-bottom .brand { justify-self: start; }
.footer-bottom .copy { justify-self: end; text-align: right; }
.footer-bottom-cross { justify-self: center; width: 15px; height: 20px; }
@media (max-width: 540px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.1rem; }
  .footer-bottom .brand, .footer-bottom .copy { justify-self: center; text-align: center; }
}
.footer-bottom .copy { font-size: 0.82rem; color: var(--dim); }

/* illuminated cross — quiet faith mark, every page (footer is shared) */
.footer-faith { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: clamp(2.4rem,5vw,3.4rem) 0 clamp(1.2rem,3vw,2rem); text-align: center; }
.faith-cross { position: relative; display: inline-block; width: 22px; height: 30px; }
.faith-cross::before, .faith-cross::after { content: ""; position: absolute; background: #fff; border-radius: 1px; box-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 26px rgba(255,255,255,0.55), 0 0 50px rgba(255,90,60,0.4); }
.faith-cross::before { left: 50%; top: 0; width: 3px; height: 100%; transform: translateX(-50%); }      /* vertical */
.faith-cross::after  { top: 30%; left: 50%; width: 100%; height: 3px; transform: translate(-50%,-50%); } /* horizontal */
.faith-cross { animation: faith-breathe 5.5s var(--ease) infinite; }
@keyframes faith-breathe { 0%,100% { opacity: 0.82; } 50% { opacity: 1; } }
.faith-verse { margin-top: 0.4rem; font-family: var(--font-display); font-size: 0.98rem; font-style: italic; color: var(--muted); max-width: 34ch; line-height: 1.6; }
.faith-ref { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .faith-cross { animation: none; } }

.news-eyebrow { display: block; font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.7rem; }

/* footer follow buttons */
.footer-follow { padding: clamp(2.2rem,4vw,3.2rem) 0; border-bottom: 1px solid var(--line); }
.footer-follow-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.footer-seeall { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.5rem; color: var(--text); font-size: 0.9rem; position: relative; }
.footer-seeall svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.footer-seeall:hover svg { transform: translateX(4px); }
.footer-cols-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .news-form { flex-basis: 100%; }
}
@media (max-width: 460px) { .footer-cols { grid-template-columns: 1fr; } }

/* ============================================================
   FOLLOW PAGE
   ============================================================ */
.follow-section { padding: clamp(2.6rem,6vw,5rem) 0; }
.follow-section + .follow-section { border-top: 1px solid var(--line); }
.follow-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.follow-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem,3.4vw,2.4rem); letter-spacing: -0.02em; }
.follow-head .count { color: var(--dim); font-size: 0.84rem; }
.follow-lead { color: var(--muted); max-width: 56ch; margin: -0.6rem 0 2rem; }

.channel-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.channel-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; background: var(--surface); display: flex; flex-direction: column; gap: 0.85rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.channel-card:hover { border-color: var(--accent-line); transform: translateY(-4px); background: var(--surface-2); box-shadow: 0 24px 50px -28px var(--accent-glow); }
.ch-top { display: flex; align-items: center; gap: 0.9rem; }
.ch-ico { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); flex-shrink: 0; }
.ch-ico svg { width: 20px; height: 20px; }
.ch-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; display: block; line-height: 1.2; }
.ch-handle { color: var(--dim); font-size: 0.84rem; }
.ch-desc { color: var(--muted); font-size: 0.9rem; flex: 1; }
.ch-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border: 1px solid var(--accent-line); border-radius: 100px; font-size: 0.85rem; color: var(--text); transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.channel-card:hover .ch-btn { background: var(--accent); color: #fff; }
.ch-btn svg { width: 13px; height: 13px; }

.embed-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: start; margin-top: 1.8rem; }
.embed-label { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.9rem; display: block; }
.embed-yt { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.embed-yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed-x { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); min-height: 360px; }
.embed-x iframe, .embed-x .twitter-timeline { width: 100% !important; }
@media (max-width: 860px) { .embed-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SIGNAL (newsletter) PAGE
   ============================================================ */
.signal-form { margin-top: 2.2rem; max-width: 440px; }
.signal-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.signal-point { border: 1px solid var(--line); border-radius: 16px; padding: 1.7rem; background: var(--surface); }
.signal-point .sp-num { font-family: var(--font-display); color: var(--accent); font-size: 0.8rem; letter-spacing: 0.12em; }
.signal-point h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; margin: 0.8rem 0 0.5rem; letter-spacing: -0.01em; }
.signal-point p { color: var(--muted); font-size: 0.92rem; }

.issue-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.issue-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.4rem 0.5rem; border-bottom: 1px solid var(--line); transition: padding-left 0.4s var(--ease), background 0.4s var(--ease); }
.issue-row:hover { padding-left: 1.1rem; background: linear-gradient(90deg, rgba(255,54,69,0.05), transparent 40%); }
.issue-no { font-family: var(--font-display); color: var(--dim); font-size: 0.9rem; }
.issue-main h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.issue-main p { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }
.issue-date { color: var(--dim); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 720px) { .signal-points { grid-template-columns: 1fr; } }

/* ============================================================
   COLLECTION PAGES
   ============================================================ */
.page-hero { padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(3rem,8vw,6rem)) 0 clamp(2rem,4vw,3rem); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; left: -10%; top: -60%; width: 60%; height: 160%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%); filter: blur(30px); pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { margin-bottom: 1.2rem; }
/* content pages (no full-width grid below) centre their hero + column */
.page-hero.centered { text-align: center; }
.page-hero.centered .eyebrow { justify-content: center; }
.page-hero.centered p { margin-inline: auto; max-width: 600px; }
/* narrow hero: left-aligned text in a centred column that lines up with .about-prose (760px) */
.page-hero.narrow .wrap { max-width: calc(760px + 56px); }
.page-hero h1 { font-family: var(--font-wordmark); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5.4rem); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.page-hero p { color: var(--muted); margin-top: 1.4rem; max-width: 56ch; font-size: 1.05rem; }

.controls {
  position: sticky; top: var(--nav-h); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.1rem 0; margin-bottom: 2.4rem;
  background: rgba(5,5,6,0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.search {
  flex: 1 1 240px; max-width: 380px; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 100px; background: var(--surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { width: 16px; height: 16px; color: var(--dim); flex-shrink: 0; }
.search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 0.95rem; }
.search input::placeholder { color: var(--dim); }

.sort-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sort-btn {
  padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.86rem; color: var(--muted); white-space: nowrap;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.sort-btn:hover { color: var(--text); border-color: var(--line-2); }
.sort-btn.active { color: #fff; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 18px -8px var(--accent-glow); }
.result-count { margin-left: auto; font-size: 0.86rem; color: var(--dim); white-space: nowrap; }

.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); padding-bottom: 6rem; }
.card {
  display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { border-color: var(--accent-line); transform: translateY(-5px); background: var(--surface-2); box-shadow: 0 24px 50px -24px var(--accent-glow); }
.card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease); opacity: 0; }
.card-thumb img.loaded { opacity: 1; }
.card:hover .card-thumb img { transform: scale(1.05); }
.card-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.4s var(--ease); background: linear-gradient(rgba(5,5,6,0.1), rgba(5,5,6,0.5)); }
.card:hover .card-thumb .play { opacity: 1; }
.card-thumb .play span { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 30px -4px var(--accent-glow); }
.card-thumb .play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.card-dur { position: absolute; bottom: 10px; right: 10px; font-size: 0.74rem; padding: 0.2rem 0.5rem; border-radius: 5px; background: rgba(5,5,6,0.82); color: #fff; letter-spacing: 0.02em; }
.card-body { padding: 1.2rem 1.3rem 1.4rem; }
.card-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: 0.85rem; display: flex; gap: 1rem; font-size: 0.82rem; color: var(--dim); }
.card-meta .sep { color: var(--line-2); }

.empty { text-align: center; padding: clamp(4rem,10vw,7rem) 1rem 8rem; max-width: 480px; margin: 0 auto; }
.empty .ico { width: 60px; height: 60px; border-radius: 16px; border: 1px solid var(--accent-line); display: grid; place-items: center; margin: 0 auto 1.6rem; box-shadow: 0 0 40px -14px var(--accent-glow); }
.empty .ico svg { width: 26px; height: 26px; color: var(--accent); }
.empty h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
.empty p { color: var(--muted); margin-top: 0.8rem; }
.empty a.cta { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 100px; font-size: 0.92rem; background: var(--accent); color: #fff; box-shadow: 0 10px 34px -10px var(--accent-glow); transition: transform 0.35s var(--ease); }
.empty a.cta:hover { transform: translateY(-2px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .nav-links { gap: 1.3rem; } }
@media (max-width: 820px) {
  .nav-links { display: none; }
  /* Log in stays in the bar next to the burger (Cinova pattern); Newsletter lives in the menu */
  .nav-actions { margin-left: auto; margin-right: 0.95rem; }
  .nav-sub { display: none; }
  .nav-login { padding: 0.42rem 1.05rem; font-size: 0.83rem; }
  .burger { display: block; }
  .index-main p { display: none; }
  .index-count { display: none; }
  .result-count { width: 100%; margin-left: 0; order: 3; }
}
@media (max-width: 640px) {
  /* hero sits lower on phones — top-weighted padding pushes the block down */
  .hero {
    padding: calc(var(--nav-h) + 6vh) 22px 2vh;    /* fallback */
    padding: calc(var(--nav-h) + 6dvh) 22px 2dvh;  /* visible-viewport units */
  }
  .hero h1 { font-size: clamp(2.9rem, 13vw, 4.4rem); }  /* bigger presence on phones */
  .hero .descriptor { margin-top: 2.5rem; }  /* beam lives in this gap on phones too */
  .hero-cta { margin-top: 1.8rem; }
}
@media (max-width: 540px) {
  .wrap { padding: 0 20px; }
  .grid { grid-template-columns: 1fr; }
  .index-arrow { width: 40px; height: 40px; }
  .hero h1 { letter-spacing: 0.04em; }
  .hero-cta { flex-direction: column; width: 100%; max-width: 280px; margin-inline: auto; gap: 0.7rem; }
  .hero-cta .btn { justify-content: center; width: 100%; padding: 0.74rem 1.3rem; font-size: 0.9rem; }
}

/* small phones (SE-class) — give the hero breathing room */
@media (max-width: 640px) and (max-height: 640px) {
  .hero { padding-bottom: 4vh; padding-bottom: 4dvh; }
}

/* short viewports (landscape phones) — compact hero so nothing collides */
@media (max-height: 500px) {
  .hero {
    padding: calc(var(--nav-h) + 0.5vh) 22px 3vh;
    padding: calc(var(--nav-h) + 0.5dvh) 22px 3dvh;
  }
  .hero h1 { font-size: clamp(1.9rem, 13vh, 3.2rem); font-size: clamp(1.9rem, 13dvh, 3.2rem); }
  .hero .descriptor { margin-top: 0.9rem; font-size: 0.95rem; }
  .hero-cta { margin-top: 1.1rem; }
}

/* the scroll cue steps aside whenever vertical space is tight — one rule, both cases */
@media (max-width: 640px) and (max-height: 640px), (max-height: 500px) {
  .scroll-cue { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  body { opacity: 1 !important; }
  .reveal, .hero h1 .ln > span, .hero .descriptor, .hero-cta { opacity: 1 !important; transform: none !important; }
  .hero .descriptor { opacity: 0.86 !important; }
}

/* ---------- about page prose ---------- */
.about-prose { max-width: 760px; margin-inline: auto; }
.about-prose p { color: var(--muted); margin-bottom: 1.05rem; line-height: 1.75; }
.about-prose p strong { color: var(--text); font-weight: 500; }
.about-prose p a { color: var(--text); border-bottom: 1px solid var(--accent-line); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.about-prose p a:hover { color: #fff; border-color: var(--accent); }

/* ---------- contact page ---------- */
/* form lives in the same centred 760px column as .about-prose; copy stays left-aligned */
.contact-body { max-width: calc(760px + 56px); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form .cf-field { margin-bottom: 1.4rem; }
.contact-form label {
  display: block; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.55rem 0.2rem;
}
.contact-form .input {
  width: 100%; padding: 1.05rem 1.2rem;
  background: rgba(255,255,255,0.022); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px;
  font: inherit; font-size: 1rem; letter-spacing: -0.01em;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.contact-form .input::placeholder { color: var(--dim); }
.contact-form .input:focus { outline: none; border-color: var(--accent-line); background: rgba(255,255,255,0.035); }
.contact-form select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 16px;
}
.contact-form select.input option { background: #0c0c0f; color: var(--text); }
.contact-form textarea.input { resize: vertical; min-height: 140px; }
.contact-form .btn { margin-top: 0.4rem; }
.contact-msg { margin-top: 1.1rem; font-size: 0.92rem; color: var(--accent); min-height: 1.3em; }
.contact-msg.ok { color: #7ee2a8; }
.contact-alt { margin-top: 2.2rem; color: var(--dim); font-size: 0.95rem; }
.contact-alt a { color: var(--muted); border-bottom: 1px solid var(--accent-line); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.contact-alt a:hover { color: #fff; border-color: var(--accent); }
@media (max-width: 600px) {
  .contact-form .cf-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- about hero photo backdrop ---------- */
/* the photo fades in, then melts into the void on every edge — seamless into "The story" */
.about-hero {
  min-height: clamp(560px, 92vh, 950px);   /* more of the photo — heading sits at chest level */
  display: flex; align-items: flex-end;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.about-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../assets/about-hero.jpg");
  background-size: cover; background-position: 50% 24%;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.8s var(--ease), transform 2.6s var(--ease-out);
}
.about-hero.bg-ready .about-hero-bg { opacity: 1; transform: scale(1); }
.about-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,6,0.62) 0%, rgba(5,5,6,0.18) 26%, rgba(5,5,6,0.30) 58%, rgba(5,5,6,0.88) 86%, #050506 100%),
    radial-gradient(ellipse 120% 90% at 50% 38%, transparent 46%, rgba(5,5,6,0.55) 100%);
}
.about-hero .wrap { position: relative; z-index: 1; }
.about-hero p { color: #c9c9d2; }  /* a touch brighter over the photo */
@media (max-width: 640px) {
  .about-hero { min-height: clamp(440px, 68vh, 640px); }
  .about-hero-bg { background-position: 52% 20%; }  /* keep the face in frame on portrait crops */
}
.contact-form .cf-opt { text-transform: none; letter-spacing: 0; color: var(--dim); }

/* ---------- content hub page ---------- */
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.content-card {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); min-height: 230px; display: flex; align-items: flex-end;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.content-card:hover { border-color: var(--accent-line); transform: translateY(-4px); box-shadow: 0 24px 50px -28px var(--accent-glow); }
.content-card .cc-thumb {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.8s var(--ease), transform 0.7s var(--ease-out);
}
.content-card.has-thumb .cc-thumb { opacity: 0.32; }
.content-card:hover .cc-thumb { transform: scale(1.05); }
.content-card .cc-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.85) 100%);
}
.content-card .cc-body { position: relative; z-index: 1; padding: 1.6rem; width: 100%; }
.content-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; }
.content-card .cc-body p { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; max-width: 44ch; }
.content-card .cc-meta {
  display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem;
}
.content-card .cc-count { font-size: 0.82rem; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.content-card .cc-meta svg { width: 18px; height: 18px; color: var(--dim); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.content-card:hover .cc-meta svg { color: var(--accent); transform: translateX(4px); }
@media (max-width: 700px) { .content-grid { grid-template-columns: 1fr; } .content-card { min-height: 190px; } }

/* hover bridge — covers the 16px gap so the dropdown survives the cursor crossing */
.nav-drop-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.contact-alt { line-height: 2.1; }

/* ---------- home about-teaser ---------- */
/* photo emerges from the void: black at the top edge, image, black again at the bottom */
.about-teaser {
  position: relative; z-index: 1; overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  /* tall enough that cap-to-elbow (~half the photo) always fits in frame */
  min-height: 40vw;
  display: flex; align-items: center;
}
.about-teaser .at-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/about-gym.jpg");
  /* zoomed so Lachy sits right of centre, full arm in frame: cap at ~5% to below the elbow */
  background-size: 126%; background-position: 0% 11%;
}
.about-teaser .at-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #050506 0%, rgba(5,5,6,0.38) 26%, rgba(5,5,6,0.42) 72%, rgba(5,5,6,0.58) 90%, #050506 100%),
    radial-gradient(ellipse 130% 100% at 50% 45%, transparent 48%, rgba(5,5,6,0.5) 100%);
}
.about-teaser .wrap { position: relative; z-index: 1; max-width: calc(760px + 56px); }
.about-teaser h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -0.02em; margin-top: 1.1rem; }
.about-teaser p { color: #c9c9d2; margin-top: 1.2rem; max-width: 56ch; font-size: 1.05rem; line-height: 1.7; }
.about-teaser .btn { margin-top: 2rem; }
@media (max-width: 640px) {
  .about-teaser { padding: clamp(5rem, 18vw, 8rem) 0; }
  .about-teaser .at-bg { background-size: auto 182%; background-position: 36% 11%; }
}

/* ---------- about: "where this is going" — full image up top, heading over it, prose below ---------- */
.about-future { position: relative; z-index: 1; margin-top: clamp(2rem, 5vw, 4rem); }
/* height tracks the photo's 16:9 ratio so the WHOLE frame shows — him looking out at the view */
.af-hero {
  position: relative; overflow: hidden;
  height: clamp(340px, 56.25vw, 850px);
  display: flex; align-items: flex-end;
  margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
}
.af-hero .af-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/about-future.jpg");
  background-size: cover; background-position: center;
}
.af-hero .af-bg.reveal { transform: none; transition: opacity 1.6s var(--ease); }
.af-hero .af-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #050506 0%, rgba(5,5,6,0.08) 24%, rgba(5,5,6,0.22) 62%, rgba(5,5,6,0.84) 90%, #050506 100%);
}
.af-headwrap { position: relative; z-index: 1; max-width: calc(760px + 56px); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.af-headwrap .follow-head { margin-bottom: 0; }
/* tower concept floats right inside the prose — the words wrap around the vision */
.af-body .tower-fig { float: right; width: min(230px, 44%); margin: 0.35rem 0 1.2rem 1.7rem; }
.af-body::after { content: ""; display: block; clear: both; }
.tower-fig img { height: auto; border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 26px 60px -30px rgba(0,0,0,0.9); }
.tower-fig figcaption { margin-top: 0.75rem; font-size: 0.8rem; color: var(--dim); letter-spacing: 0.04em; }

/* "Where this is going" hits like the wordmark — Azonix, big, over the full image */
.af-headwrap h2 {
  font-family: var(--font-wordmark); font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

/* ---------- vision strip: cards drift right-to-left, fades at both edges ---------- */
/* lead aligns with the body text column (760px); the strip runs a touch wider */
.vision-head { max-width: calc(760px + 56px); margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0 28px; }
.vision-lead { color: var(--muted); max-width: 56ch; margin-bottom: clamp(1.4rem, 3vw, 2rem); font-size: 1.02rem; line-height: 1.7; }
.vision-strip { max-width: 1000px; margin: 0 auto; padding: 0 28px clamp(2rem, 4vw, 3rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vision-track { display: flex; gap: 1.2rem; width: max-content; animation: vision-drift 42s linear infinite; }
@keyframes vision-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vision-card {
  position: relative; flex: 0 0 auto; width: 240px; aspect-ratio: 2/3;   /* locked dimension */
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface);
}
.vision-card img { width: 100%; height: 100%; object-fit: cover; }
.vision-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,6,0.78) 100%); }
.vision-card span {
  position: absolute; left: 1rem; bottom: 0.85rem; z-index: 1;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #d7d7de;
}
@media (prefers-reduced-motion: reduce) { .vision-track { animation: none; } }

/* standalone cross Easter eggs — quiet glowing crosses at section breaks, every page */
.cross-egg { display: flex; justify-content: center; padding: clamp(2.4rem,6vw,4.5rem) 0; position: relative; z-index: 1; }
.cross-egg .faith-cross { width: 20px; height: 27px; }
.cross-egg.sm .faith-cross { width: 15px; height: 20px; }
.cross-egg.with-verse { flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }