/* Self-hosted. Google Fonts was the only render-blocking resource on the
 site, and Caveat swapping in late shifted the opt-in form up by ~50px. */
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/courier-prime-400.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/courier-prime-700.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/courier-prime-400i.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/courier-prime-700i.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:block;src:url(/fonts/caveat-600.woff2) format('woff2')}

/* Shared skin for every page that is not the sales letter.
   Same ink, same paper, same typewriter. The letter keeps its own inline
   styles so nothing can ever change it by accident. */

:root{
  --desk:#E4DCC7; --paper:#FDFBF3; --raised:#FFFDF6; --ink:#14110E;
  --scarlet:#C8102E; --manila:#C9973C; --highlighter:#FFEF7A; --ballpoint:#1A3FA8;
  --body-grey:#4A4438; --muted:#6E6552; --stone:#8A8069;
  --hair-1:#CFC5AB; --hair-2:#C4B999; --hair-3:#A79C81; --hair-4:#D8CEB4;
  --cream:#FFF6E2; --inset:clamp(18px,5vw,56px);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--desk); color:var(--ink);
  font-family:'Courier Prime','Courier New',monospace; font-size:18px; line-height:1.78;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif; color:var(--ink); margin:0; line-height:1.15}
p{margin:0 0 22px}
a{color:var(--ballpoint); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--scarlet)}
a:focus-visible{outline:3px solid var(--scarlet); outline-offset:2px}
img{max-width:100%; display:block}
::selection{background:var(--highlighter); color:var(--ink)}

@keyframes fnfMarch{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

.marquee{background:var(--scarlet); color:var(--cream); overflow:hidden; white-space:nowrap; border-bottom:3px solid var(--ink)}
.marquee-track{
  display:inline-block; animation:fnfMarch 34s linear infinite; padding:7px 0;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.marquee-track span{padding:0 24px}

.paper{
  max-width:920px; margin:0 auto; background:var(--paper);
  border:1px solid var(--hair-1); border-top:none;
  box-shadow:0 3px 0 rgba(20,17,14,.10), 0 24px 64px rgba(20,17,14,.20);
  padding-bottom:10px;
}
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px var(--inset); border-bottom:1px dashed var(--hair-2);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); padding:8px 0}
.brand:hover{color:var(--ink)}
.folder-mark{
  position:relative; display:inline-block; width:28px; height:21px; flex:0 0 auto;
  background:var(--manila); border:2px solid var(--ink); border-radius:1px 3px 2px 2px;
}
.folder-mark::before{
  content:""; position:absolute; top:-8px; left:-2px; width:13px; height:7px;
  background:var(--manila); border:2px solid var(--ink); border-bottom:none; border-radius:2px 3px 0 0;
}
.wordmark{font-weight:700; font-size:16px; letter-spacing:-.02em}
.wordmark .n{color:var(--scarlet)}
.wordmark .tld{color:var(--stone)}
.est{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

.body{padding:clamp(28px,5vw,48px) var(--inset) 0}

.eyebrow-block{
  display:inline-block; background:var(--ink); color:var(--paper);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; margin-bottom:18px;
}
h1{font-size:clamp(30px,5.2vw,52px); font-weight:700; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance}
.swash{
  background-image:linear-gradient(var(--highlighter),var(--highlighter));
  background-repeat:no-repeat; background-size:100% 60%; background-position:0 72%; padding:0 4px;
}
.dateline{font-size:14px; color:var(--muted); margin:0 0 30px}
h2{
  font-size:clamp(22px,3.2vw,30px); margin:34px 0 14px;
  border-bottom:2px solid var(--ink); padding-bottom:8px; text-wrap:balance;
}
h3{font-size:20px; margin:26px 0 10px}
.lede{font-size:clamp(17px,2.1vw,21px); line-height:1.62; margin:0 0 26px; max-width:46em}

.pullquote{border-left:5px solid var(--manila); background:#FBF3DF; padding:16px 20px; margin:0 0 30px; font-size:18px}
.callout{border:3px solid var(--ink); background:var(--raised); box-shadow:8px 8px 0 var(--scarlet); padding:clamp(16px,3vw,26px); margin:0 0 32px}
.callout .head{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--scarlet); margin-bottom:10px}

.terminal{
  background:var(--ink); color:#DCE7CF; padding:clamp(16px,3vw,24px);
  font-size:14.5px; line-height:1.65; overflow-x:auto; margin:0 0 26px;
  box-shadow:7px 7px 0 rgba(20,17,14,.18);
}
.terminal .prompt{color:#7E9A6C; margin-bottom:10px}
.terminal pre{margin:0; font-family:'Courier Prime',monospace; white-space:pre}
.terminal .cmt{color:#E8B45A}

.video{
  border:2px solid var(--ink); background:#0B0B0B; box-shadow:7px 7px 0 rgba(20,17,14,.25);
  margin:0 0 12px; position:relative; aspect-ratio:16/9;
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-facade{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:#0B0B0B; cursor:pointer; display:block; overflow:hidden;
}
.video-facade img{width:100%; height:100%; object-fit:cover; opacity:.86; transition:opacity .15s ease}
.video-facade:hover img,.video-facade:focus-visible img{opacity:1}
.video-facade:focus-visible{outline:3px solid var(--scarlet); outline-offset:3px}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background:var(--scarlet);
  box-shadow:0 0 0 8px rgba(200,16,46,.20);
}
.video-play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:25px solid #FFF6E2;
  border-top:15px solid transparent; border-bottom:15px solid transparent;
}
.video-caption{font-size:14px; color:var(--muted); margin:0 0 30px}

.btn{
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  padding:15px 26px; font-family:'Courier Prime',monospace; font-size:16.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; border:2px solid var(--ink); border-radius:0;
  box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink)}
.btn.primary{background:var(--scarlet); color:var(--cream)}
.btn.primary:hover{color:var(--cream)}
.btn.secondary{background:var(--raised); color:var(--ink)}
.btn.secondary:hover{color:var(--ink)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 32px}

/* Blog index */
.posts{display:grid; gap:0; margin:0 0 30px}
.post-row{border-top:1px dotted var(--hair-3); padding:20px 0}
.post-row:last-child{border-bottom:1px dotted var(--hair-3)}
.post-row h2{
  font-size:clamp(20px,2.6vw,26px); margin:0 0 6px; border:none; padding:0;
}
/* Underlined by default, not on hover. A phone has no hover, so a hover-only
   underline means the only link to the post looks like plain text. */
.post-row h2 a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--manila); text-underline-offset:4px}
.post-row h2 a:hover{color:var(--scarlet); text-decoration-color:var(--scarlet)}
.post-meta{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.post-row p{margin:0; color:var(--body-grey); font-size:16px}

.sig-name{font-family:Caveat,cursive; font-size:48px; line-height:1; color:var(--ballpoint); transform:rotate(-2deg); margin:6px 0 8px}

/* No side padding: on these pages the footer sits INSIDE .body, which already
   applies the page inset. Padding it again indented it twice and squeezed the
   links. index.html is different, its footer is a sibling, so it keeps its own. */
footer{
  margin-top:36px; border-top:1px dashed var(--hair-2); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:13px; color:var(--muted);
}
footer a{color:var(--muted); display:inline-block; padding:14px 6px}

@media (max-width:600px){
  body{font-size:17px}
  .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  *{transition:none !important}
}
@media print{
  body{background:#fff}
  .marquee,.cta-row,.callout{display:none !important}
  .paper{max-width:none; box-shadow:none; border:none}
  .terminal{background:#fff; color:#000; border:1px solid #000}
  .terminal .cmt,.terminal .prompt{color:#000}
}