@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/inter-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --ground:#000;
  --ink:#fff;
  --mute:#9a9a9a;
  --faint:#3a3a3a;
  --line:#262626;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--ink);color:var(--ground)}

.wrap{max-width:820px;margin:0 auto;padding:40px 24px 56px}

/* header */
header{display:flex;align-items:center;gap:12px;margin-bottom:72px}
.mark{font-weight:900;font-size:64px;line-height:.62;height:36px;overflow:hidden;letter-spacing:-3px}
.name{font-weight:900;font-size:22px;letter-spacing:-.4px;color:var(--ink);text-decoration:none}

/* type */
.kicker{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 20px}
h1{font-weight:900;font-size:clamp(44px,9vw,84px);line-height:1;letter-spacing:-.045em;margin:0 0 40px}
h1 .hl,.hl{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--ink);color:var(--ground);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h2{font-weight:900;font-size:24px;letter-spacing:-.02em;margin:48px 0 8px}
p,li{font-size:17px;color:#e8e8e8}
.lead{font-size:20px;color:var(--mute);max-width:600px}
.updated{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--mute)}

/* the transcript: faded conversation with one clip lifted out */
.transcript{margin:0 0 44px;padding:4px 0;font-size:15px;line-height:2.1;color:var(--faint)}
.transcript p{margin:0;font-size:inherit;color:inherit;white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 65%,transparent);mask-image:linear-gradient(90deg,#000 65%,transparent)}
.transcript time{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;margin-right:16px;color:#4a4a4a}
.transcript p.clip{-webkit-mask-image:none;mask-image:none;color:var(--ink);margin:8px -14px;padding:6px 14px;
  --c:var(--ink);
  background:
    linear-gradient(var(--c),var(--c)) top left/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/2px 16px no-repeat}
.transcript p.clip time{color:var(--mute)}
.transcript p.clip span{display:inline-block;vertical-align:bottom;max-width:calc(100% - 72px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}

/* links */
.links{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 8px}
.links a{display:inline-flex;align-items:center;min-height:48px;border:1.5px solid var(--ink);border-radius:999px;padding:0 22px;text-decoration:none;font-weight:600;letter-spacing:-.01em}
.links a:hover{background:var(--ink);color:var(--ground)}
.links a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.panel{border-top:1px solid var(--line);margin-top:56px;padding-top:8px}

/* footer */
.rule{height:1px;background:var(--line);margin:64px 0 24px}
footer{color:var(--mute);font-size:14px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer a{color:var(--mute)}
footer a:hover{color:var(--ink)}

@media (max-width:560px){
  header{margin-bottom:48px}
  .transcript{font-size:14px}
}