/* Shared styles for the founder-talk subpages (talks/*.html).
   Same dark terminal look as the homepage; readable long-form prose. */
:root{
  --bg:#0a0e14; --txt:#c9d1d9; --dim:#6e7681; --grn:#3fb950; --white:#e6edf3; --card:#10161f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(1000px 620px at 50% -8%,#111926 0%,#0a0e14 62%);
  color:var(--txt);
  font-family:ui-monospace,"SFMono-Regular","JetBrains Mono","Fira Code",Consolas,monospace;
  line-height:1.65; padding:30px 16px 70px;
}
.wrap{max-width:760px; margin:0 auto}

.back{display:inline-block; color:var(--dim); text-decoration:none; font-size:13px; margin-bottom:26px}
.back:hover, .back:focus-visible{color:var(--grn)}

.kicker{font-size:12px; letter-spacing:2px; color:var(--dim)}
h1{font-size:clamp(21px,3.6vw,30px); color:var(--white); line-height:1.28; margin:9px 0 6px}
.sub{color:var(--dim); font-size:14px; margin:0 0 22px}
.sub a{color:var(--grn); text-decoration:none}
.sub a:hover{text-decoration:underline}

/* Video: click-facade — the self-hosted thumbnail is the background; the YouTube
   nocookie iframe is loaded only on click (no third-party request until then).
   Without JS the element is a plain link to YouTube. */
.video{
  position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:var(--card) center/cover no-repeat;
  cursor:pointer; outline:none;
}
.video:hover, .video:focus-visible{border-color:var(--grn)}
.video::after{
  content:""; position:absolute; left:50%; top:50%; width:66px; height:66px; transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2066%2066'%3E%3Ccircle%20cx='33'%20cy='33'%20r='31'%20fill='%230a0e14'%20fill-opacity='.72'%20stroke='%23e6edf3'%20stroke-width='2'/%3E%3Cpath%20d='M27%2022v22l18-11z'%20fill='%23e6edf3'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .14s;
}
.video:hover::after, .video:focus-visible::after{transform:translate(-50%,-50%) scale(1.07)}
.video-frame{width:100%; aspect-ratio:16/9; border:0; border-radius:12px; display:block}

h2{color:var(--white); font-size:17px; letter-spacing:.5px; margin:40px 0 12px}
.lead{font-size:16px; color:var(--txt); margin:0}

ul.take{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
ul.take li{position:relative; padding-left:22px}
ul.take li::before{content:"▸"; position:absolute; left:0; color:var(--grn)}
ul.take strong{color:var(--white); font-weight:600}

blockquote{
  margin:16px 0; padding:11px 18px; border-left:2px solid var(--grn);
  background:rgba(63,185,80,.05); color:var(--white); font-style:italic;
}

details{margin-top:20px; border-top:1px solid rgba(255,255,255,.08); padding-top:16px}
summary{cursor:pointer; color:var(--dim); font-size:14px; letter-spacing:.5px}
summary:hover{color:var(--grn)}
.note{color:var(--dim); font-size:12px; margin:8px 0 0}
.transcript{margin-top:16px; font-size:14px; line-height:1.75}
.transcript p{margin:0 0 12px}

footer{
  max-width:760px; margin:56px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.06);
  color:#484f58; font-size:11px; display:flex; justify-content:space-between; gap:8px;
}
footer a{color:#6e7681; text-decoration:none}
footer a:hover{color:var(--txt)}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}