/* Dear Human: shared styles for the hand-built pages (/ and /socialcurrent)
   and the pieces injected into every Framer page (nav, footer link, newsletter
   slide-up). Hand-written, not mirrored: scripts/sitewide.py wires it into the
   Framer pages, and nothing in the mirror pipeline regenerates it. */

@font-face { font-family: "Satoshi"; src: url("/dh/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/dh/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/dh/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("/dh/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/dh/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/dh/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/dh/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/dh/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- page base (hand-built pages only; Framer pages keep their own) ---------- */
.dh-page { margin: 0; font-family: Satoshi, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.dh-page *, .dh-page *::before, .dh-page *::after { box-sizing: border-box; }
.dh-page.dark { background: #0a0a0a; color: #fff; }
.dh-page.light { background: #fff; color: #0a0a0a; }
.dh-page img { max-width: 100%; height: auto; }
.dh-page [hidden] { display: none !important; }
.dh-page a { color: inherit; }
.dh-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #0a0a0a; padding: 8px 14px; border-radius: 8px; }
.dh-skip:focus { left: 8px; }

/* ---------- nav (every page) ----------
   Fixed and blended with "difference", the same trick Framer's desktop nav
   used: white text reads on the black hero and turns dark over white sections. */
.dh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 26px 32px; color: #fff; mix-blend-mode: difference; pointer-events: none; font-family: Satoshi, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.dh-nav a { pointer-events: auto; color: #fff; text-decoration: none; }
.dh-nav .dh-logo { font: 400 24px/1 "Bebas Neue", sans-serif; letter-spacing: .02em; }
.dh-nav .dh-links { display: flex; gap: 22px; font-size: 14px; line-height: 1; }
.dh-nav .dh-links a { padding: 6px 0; border-bottom: 1px solid transparent; }
.dh-nav .dh-links a:hover, .dh-nav .dh-links a[aria-current="page"] { border-bottom-color: #fff; }
.dh-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
/* Framer's own nav is hidden on the mirrored pages; this one replaces it. */
nav.framer-otc3O { visibility: hidden !important; pointer-events: none !important; }

/* ---------- shared bits ---------- */
.dh-pill { appearance: none; border: 0; border-radius: 999px; font: 700 15px/1 Satoshi, Inter, sans-serif; padding: 15px 24px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: transform .15s ease, opacity .15s ease; }
.dh-pill:hover { transform: translateY(-1px); }
.dh-pill:active { transform: translateY(0); opacity: .85; }
.dh-pill:focus-visible { outline: 2px solid #C9A55C; outline-offset: 3px; }
.dh-pill.w { background: #fff; color: #0a0a0a; }
.dh-pill.k { background: #0a0a0a; color: #fff; }
.dh-pill[disabled] { opacity: .55; cursor: progress; transform: none; }
.dh-lk { font-size: 15px; color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.dh-lk:hover { color: #fff; text-decoration-color: currentColor; }
.dh-lk.dk { color: #0a0a0a; text-decoration-color: rgba(10,10,10,.35); font-family: Inter, sans-serif; font-weight: 500; }
.dh-lk.dk:hover { text-decoration-color: currentColor; }

.dh-foot { padding: 64px 20px 72px; text-align: center; font-size: 14px; color: #888; }
.dh-foot a { color: #888; text-decoration: none; }
.dh-foot a:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ----------
   Rebuilt to match the Framer original exactly (measured from tag
   pre-redesign-2026-10-03): full-height section, the video in a 16px-inset
   rounded frame at 30% opacity, the title's letters sliding in from 20px to
   the right one after another, then the subtitle, then the arrow dropping in.
   The timings below are the original's, read off its animation frame by frame. */
.dh-hero { position: relative; height: 100vh; height: 100svh; background: #080808; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.dh-hero.short { height: 100vh; height: 100svh; }
.dh-hero .bg { position: absolute; inset: 16px; border-radius: 12px; overflow: hidden; z-index: 0; }
.dh-hero .bg video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .3; border-radius: 12px; }
.dh-hero .in { position: relative; z-index: 2; width: 100%; padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dh-hero h1 { margin: 0; font: 400 152px/.9 "Bebas Neue", sans-serif; letter-spacing: normal; }
.dh-hero h1 .w { display: inline-block; white-space: nowrap; }
.dh-hero h1 .w > span { display: inline-block; opacity: 0; transform: translateX(20px); animation: dh-letter .8s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(110ms + var(--i) * 50ms); }
.dh-hero .sub { margin: 0; max-width: 540px; font: 400 18px/1.4 Satoshi, Inter, sans-serif; color: #888; opacity: 0; animation: dh-fade .18s linear 4.1s forwards; } /* original 5.1 s; Cait asked for a second sooner (2026-10-04) */
/* The original homepage subtitle ran two lines; keeping its height keeps the
   title exactly where it started. */
.dh-hero .sub.home { min-height: 2.8em; }
.dh-hero .sub.bold { font-weight: 700; animation: dh-fade .93s cubic-bezier(.2, .7, .3, 1) 1.13s forwards; }
.dh-hero .arrow { position: absolute; z-index: 2; bottom: 32px; left: 50%; width: 27px; height: 76px; margin-left: -13.5px; overflow: hidden; font: 400 54px/1.4 Satoshi, Inter, sans-serif; color: #c4c2c2; opacity: 0; transform: translateY(-20px); animation: dh-drop .47s cubic-bezier(.44, 0, .56, 1) 6.13s forwards; }
@keyframes dh-letter { to { opacity: 1; transform: none; } }
@keyframes dh-fade { to { opacity: 1; } }
@keyframes dh-drop { to { opacity: 1; transform: none; } }
@media (max-width: 1199px) {
  .dh-hero h1 { font-size: 120px; }
  .dh-hero .sub { font-size: 16px; }
  .dh-hero .sub.home { max-width: 400px; }
}

/* ---------- side-by-side experiment card ---------- */
.dh-xc { width: 1040px; max-width: calc(100% - 40px); margin: 0 auto; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 480px; text-align: left; }
.dh-xc .txt { padding: 64px 40px 64px 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.dh-xc .eye { font: 700 13px Satoshi, Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.dh-xc h3 { margin: 14px 0 18px; font-weight: 400; }
.dh-xc p { margin: 0 0 32px; max-width: 34ch; font-size: 18px; line-height: 1.55; }
.dh-xc .acts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dh-xc .vis { position: relative; display: flex; justify-content: center; align-items: center; padding: 44px 0; }
.dh-xc .vis.photo { padding: 0; }
.dh-xc .vis.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-xc .phone { width: 220px; border-radius: 34px; overflow: hidden; background: #1A1C20; padding: 7px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.dh-xc .phone img { width: 100%; display: block; border-radius: 28px; }
.dh-xc.dark { background: #141414; color: #fff; border: 1px solid rgba(255,255,255,.07); }
.dh-xc.dark .eye { color: #C9A55C; }
.dh-xc.dark h3 { font: 400 84px/.9 "Bebas Neue", sans-serif; letter-spacing: .02em; }
.dh-xc.dark p { color: rgba(255,255,255,.72); }
.dh-xc .vis.lvp { background: radial-gradient(circle at 50% 40%, #1d2a48 0%, #0C1220 70%); }
.dh-xc.light { background: #fff; color: #0a0a0a; border: 1px solid rgba(10,10,10,.08); box-shadow: 0 10px 30px rgba(0,0,0,.06); width: 1176px; }
.dh-xc.light .eye { color: #9A7428; }
.dh-xc.light h3 { font: 700 54px/1.05 Inter, sans-serif; letter-spacing: -.02em; }
.dh-xc.light p { color: #4d4d4d; font-family: Inter, sans-serif; }
.dh-xc.light .vis.lvp { background: linear-gradient(160deg, #EEF2FA 0%, #DCE4F3 100%); }

/* ---------- newsletter card (Substack's official embed inside) ---------- */
.dh-nl { width: 1040px; max-width: calc(100% - 40px); margin: 72px auto 0; background: #fff; color: #0a0a0a; border-radius: 16px; padding: 30px 30px 26px 36px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; }
.dh-nl h2 { margin: 0; font: 400 40px/1 "Bebas Neue", sans-serif; letter-spacing: .01em; }
.dh-nl p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: #4d4d4d; }
/* Substack drops its logo and title when the frame is short, leaving only the
   email field, button and terms line. 150px is under that threshold. */
.dh-sub { display: block; width: 100%; height: 150px; border: 0; background: #fff; color-scheme: light; }
.dh-nl.ln { border: 1px solid rgba(10,10,10,.1); width: 1176px; margin-top: 0; box-shadow: 0 10px 30px rgba(0,0,0,.05); }

/* ---------- newsletter slide-up (every page) ---------- */
.dh-slide { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: 380px; background: #fff; color: #0a0a0a; border-radius: 18px; padding: 24px 26px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.28); transform: translateY(calc(100% + 40px)); transition: transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s linear .5s; visibility: hidden; font-family: Satoshi, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.dh-slide.on { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.dh-slide h2 { margin: 0; padding-right: 36px; font: 400 30px/1 "Bebas Neue", sans-serif; letter-spacing: .01em; color: #0a0a0a; }
.dh-slide p { margin: 6px 0 4px; font-size: 15px; line-height: 1.45; color: #4d4d4d; }
.dh-slide .x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f1f1; color: #0a0a0a; font: 400 22px/1 Inter, sans-serif; cursor: pointer; display: grid; place-items: center; }
.dh-slide .x:hover { background: #e6e6e6; }
.dh-slide .x:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dh-slide, .dh-slide.on { transition: none; }
  .dh-hero h1 .w > span, .dh-hero .sub, .dh-hero .arrow { animation: none; opacity: 1; transform: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .dh-xc .txt { padding: 48px 28px 48px 40px; }
  .dh-xc.dark h3 { font-size: 68px; }
  .dh-xc.light h3 { font-size: 44px; }
}

/* ---------- phone ---------- */
@media (max-width: 809px) {
  /* Scrolls away with the hero on phones, as in the confirmed preview, so it
     never sits on top of body text. */
  .dh-nav { position: absolute; padding: 20px 18px; }
  .dh-nav .dh-logo { font-size: 20px; }
  .dh-nav .dh-links { gap: 14px; font-size: 13px; }
  .dh-hero.short { height: 70vh; height: 70svh; }
  .dh-hero .in { padding: 0 20px; }
  .dh-hero.short .in { padding: 0 32px; }
  .dh-hero h1 { font-size: 72px; }
  .dh-hero .sub { font-size: 14px; }
  .dh-pill { font-size: 14px; padding: 14px 20px; }
  .dh-foot { padding: 40px 16px 48px; }
  .dh-xc { grid-template-columns: minmax(0,1fr); min-height: 0; max-width: calc(100% - 32px); }
  .dh-xc .vis { order: -1; padding: 26px 0; }
  .dh-xc .vis.photo img { height: 210px; }
  .dh-xc .phone { width: 150px; border-radius: 24px; padding: 5px; }
  .dh-xc .phone img { border-radius: 20px; }
  .dh-xc .txt { padding: 22px 20px 26px; align-items: stretch; }
  .dh-xc h3 { margin: 8px 0 10px; }
  .dh-xc.dark h3 { font-size: 48px; }
  .dh-xc.light h3 { font-size: 34px; }
  .dh-xc p { font-size: 14px; margin-bottom: 20px; }
  .dh-xc .acts { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .dh-xc.light .vis { order: 1; }
  .dh-nl { grid-template-columns: 1fr; padding: 22px 18px 16px; margin-top: 44px; max-width: calc(100% - 32px); gap: 10px; }
  .dh-nl h2 { font-size: 30px; }
  .dh-nl p { font-size: 14px; }
  .dh-sub { height: 156px; }
  .dh-slide { right: 12px; bottom: 12px; width: calc(100% - 24px); padding: 20px 18px 10px; }
  .dh-slide h2 { font-size: 28px; }
  .dh-slide p { font-size: 14px; }
}