/* ==========================================================================
   The Homelab Files — thf-noir
   A case-file theme for Ghost. Palette, type and components mirror
   thehomelabfiles.org so the blog reads as the same publication.
   ========================================================================== */

@font-face{font-family:'DejaVu Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/dejavu-sans-400.woff2') format('woff2')}
@font-face{font-family:'DejaVu Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/dejavu-sans-700.woff2') format('woff2')}
@font-face{font-family:'DejaVu Sans Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/dejavu-sans-mono-400.woff2') format('woff2')}
@font-face{font-family:'DejaVu Sans Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/dejavu-sans-mono-700.woff2') format('woff2')}
@font-face{font-family:'Gelasio';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/gelasio-400.woff2') format('woff2')}
@font-face{font-family:'Gelasio';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/gelasio-400-italic.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --ink:#1e1f21; --coal:#232628; --panel:#262b2f; --line:#353d43;
  --tungsten:#a59365; --tungsten-warm:#d9a86c; --amber:#dda642; --lamp:#ffd166;
  --paper:#eee9dd; --paper-dim:#bdb7ab;
  --teal:#3b4d4f; --teal-deep:#212f34; --glow:#7fd6d0; --red:#e3391b;
  --display:'DejaVu Sans','Liberation Sans',system-ui,sans-serif;
  --mono:'DejaVu Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Gelasio',Georgia,'Iowan Old Style','Times New Roman',serif;
  --measure:1096px;
  /* Ghost custom-font slots: the theme ships its own faces, and these
     variables keep the admin font settings meaningful. */
  --gh-font-heading:var(--display);
  --gh-font-body:var(--serif);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--gh-font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* viewport vignette — sits behind the content, never over the type */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%,transparent 38%,rgba(0,0,0,.5) 100%)}
header,main,footer{position:relative;z-index:1}

img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:rgba(221,166,66,.25);color:var(--paper)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

h1,h2,h3,p.lede{text-wrap:balance}

.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.display{font-family:var(--gh-font-heading);font-weight:700;text-transform:uppercase;
  letter-spacing:.055em;line-height:1.02}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#86b8b2;margin:0 0 18px}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(134,184,178,.45)}
.eyebrow a:hover{color:var(--amber);border-color:var(--amber)}
.lede{margin:26px 0 0;font-size:18.5px;color:var(--paper-dim);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;
  background:var(--amber);color:#191408;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:0 0 4px 0}
.skip:focus{left:0;outline:2px solid var(--paper);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line);background:none;color:var(--paper);
  cursor:pointer;transition:border-color .2s,color .2s}
.btn.ghost:hover{border-color:var(--tungsten);color:var(--amber)}
.btn.is-dead{opacity:.35;cursor:default}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(30,31,33,.82);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.brandmark{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--paper);
  white-space:nowrap}
.brandmark .dot{width:9px;height:9px;flex:0 0 auto;background:var(--red);border-radius:50%;
  box-shadow:0 0 12px rgba(227,57,27,.7);animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

.site-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;min-width:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.site-nav ul::-webkit-scrollbar{display:none}
.site-nav a{text-decoration:none;color:var(--paper-dim);transition:color .18s}
.site-nav a:hover{color:var(--amber)}
.site-nav .nav-current a{color:var(--amber)}
.nav-cta{padding:10px 18px;font-size:11px}

/* ---------- masthead ---------- */
.masthead{position:relative;overflow:hidden;padding:96px 0 80px;
  border-bottom:1px solid var(--line)}
.masthead::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:url('../images/masthead.webp');
  background-image:image-set(url('../images/masthead.avif') type('image/avif'),
                             url('../images/masthead.webp') type('image/webp'));
  background-size:cover;background-position:50% 40%;opacity:.24;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 92%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 92%)}
.masthead::after{content:'';position:absolute;right:-14%;top:-30%;width:60vw;height:60vw;
  max-width:760px;max-height:760px;pointer-events:none;
  background:radial-gradient(circle,rgba(127,214,208,.13),rgba(33,47,52,.05) 45%,transparent 68%);
  filter:blur(10px)}
.masthead-inner{display:grid;grid-template-columns:8px 1fr;gap:46px;align-items:start;position:relative}
/* the EVIDENCE stamp — vector ink in the empty right of the masthead, tilted the way a
   hand-applied stamp always is. Hidden below 940px where the copy needs the whole width. */
/* one stamp, one angle: set it here and it is the same on every page. Anchored 30% in
   from the right so it lands in the open field beside the lede rather than on the edge. */
/* right: 30% + 90px is 25% of the gap between the WHAT'S ON FILE button and the stamp's
   left edge (358px at 1440); bottom: 12px lifts it 25% of its own height, which puts its
   top level with the baseline of the headline. */
.stamp{position:absolute;right:calc(30% + 90px);bottom:12px;width:clamp(146px,14vw,192px);height:auto;
  transform:rotate(-15deg);transform-origin:50% 50%;
  pointer-events:none;user-select:none;opacity:.92}
@media (max-width:940px){.stamp{display:none}}
.masthead .rule{width:8px;height:100%;min-height:170px;background:var(--amber);
  box-shadow:0 0 22px rgba(221,166,66,.35)}
.masthead h1{margin:0;font-size:clamp(38px,5.4vw,66px);color:#fafbfe}
.masthead.compact{padding:66px 0 54px}
.masthead.compact h1{font-size:clamp(30px,4.4vw,46px)}
.archive-meta{margin:24px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tungsten)}
.author-head{display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:start}
.author-avatar{width:96px;height:96px;object-fit:cover;border:1px solid var(--line);
  filter:grayscale(.35) contrast(1.05)}

/* ---------- section furniture ---------- */
.docket-section{padding:86px 0}
.docket-section + .docket-section{border-top:1px solid var(--line)}
.sec-head{max-width:62ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(20px,2.5vw,27px);margin:0;color:#fafbfe}
.eyebrow + h2{margin-top:0}

/* ---------- docket grid ---------- */
.docket{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:case}
.card{border:1px solid #3d4c51;border-top:2px solid #5f9395;
  background:linear-gradient(180deg,rgba(40,47,50,.95),rgba(32,35,37,.95));
  padding:30px 26px;position:relative;transition:border-color .22s,transform .22s,box-shadow .22s}
.card:hover,.card:focus-within{border-color:var(--tungsten);border-top-color:var(--amber);
  transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(127,214,208,.5)}
.card-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--amber)}
.card-num::before{counter-increment:case;content:counter(case,decimal-leading-zero)}
.card .sep{color:var(--tungsten);margin:0 6px 0 4px}
.card-title{font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 12px;color:#f2eee4;line-height:1.35}
.card-title a{text-decoration:none}
.card:hover .card-title a{color:var(--amber)}
.card-excerpt{margin:0;font-size:15px;color:var(--paper-dim);line-height:1.6}
.card-meta{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 0;padding-top:14px;
  border-top:1px solid rgba(53,61,67,.9);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#8d97a0}
.card-tag{color:var(--tungsten);text-decoration:none}
.card-tag:hover{color:var(--amber)}
.empty{grid-column:1/-1;color:var(--paper-dim);font-style:italic}

/* ---------- lead case ---------- */
.case{display:grid;grid-template-columns:1fr 300px;gap:0;margin-bottom:64px;
  border:1px solid #415358;background:linear-gradient(135deg,rgba(38,45,48,.98),rgba(32,36,38,.98));
  box-shadow:inset 0 0 90px rgba(127,214,208,.055)}
/* With a picture the card gains a third column for it, between the copy and the meta. */
.case.has-image{grid-template-columns:minmax(0,1fr) 248px 300px}
/* The picture floats inside its cell with a 10% gutter measured on the CARD HEIGHT — top,
   bottom, and both sides. Percentages cannot do this (margins resolve against width), so
   the cell becomes a size container and 10cqh = 10% of its own height. The cell spans both
   grid rows, so its height IS the card height, and size containment stops the image from
   feeding back into the layout. Flex centring keeps the gutters equal; width:auto would
   have let a replaced element fall back to its intrinsic ratio and overflow. */

/* the copy runs to the image's margin line instead of stopping at the 52ch cap */
.case.has-image .case-main{padding:38px 0 38px 34px}
.case.has-image .case-excerpt{max-width:none}
.case-figure{margin:0;overflow:hidden;background:transparent;container-type:size;
  display:flex;align-items:center;justify-content:center}
.case-figure img{display:block;width:calc(100% - 20cqh);height:calc(100% - 20cqh);
  border:1px solid var(--tungsten);object-fit:cover;object-position:50% 42%;
  filter:saturate(.82) contrast(1.03) brightness(.94)}
.case-main{padding:38px 34px}
.case-meta{display:flex;flex-direction:column;border-left:1px solid #415358;padding:32px 26px;
  background:linear-gradient(180deg,rgba(77,93,95,.3),rgba(33,47,52,.15))}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--tungsten);color:var(--tungsten);
  margin-bottom:22px}
.case-title{font-size:clamp(22px,3vw,32px);margin:0 0 14px;color:#fafbfe}
.case-title a{text-decoration:none}
.case-title a:hover{color:var(--amber)}
/* The excerpt fills the height the column actually has — 172px of copy space under the
   title, at 26.4px line-height, is six lines — and clamps there. The clamp is what draws
   the ellipsis, so it appears only when the text genuinely overflows; Ghost's own `words`
   truncation emits no ellipsis at all (verified: the string ended on "you'd"). */
.case-excerpt{color:var(--paper-dim);margin:0;max-width:52ch;font-size:16px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
/* The standfirst rule draws itself once when the file arrives.
   Compositor-only, never loops, and settled under reduced motion. */
.file-head .lede{position:relative;padding-left:18px;max-width:56ch}
.file-head .lede::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;
  background:var(--tungsten);transform:scaleY(0);transform-origin:top center;
  transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.file-head.in-view .lede::before{transform:scaleY(1)}
.meta-list{margin:0;display:flex;flex-direction:column;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.meta-list dt{color:var(--tungsten);font-size:9.5px;letter-spacing:.2em}
.meta-list dd{margin:3px 0 0;color:var(--paper);font-family:var(--serif);font-size:14px;
  letter-spacing:0;text-transform:none}
.meta-list a{text-decoration:none;border-bottom:1px solid rgba(238,233,221,.25)}
.meta-cta{flex:1;display:flex;align-items:center;justify-content:center;margin:26px 0 0}

/* ---------- post: head ---------- */
.file-head{padding:76px 0 46px}
.file-head h1{margin:0;font-size:clamp(30px,4.6vw,54px);color:#fafbfe;max-width:24ch}
.file-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin:44px 0 0;padding:0;background:var(--line);border:1px solid var(--line)}
.file-meta > div{background:var(--ink);padding:16px 18px}
.file-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tungsten)}
.file-meta dd{margin:6px 0 0;font-size:14.5px;color:var(--paper)}
.file-meta a{text-decoration:none;border-bottom:1px solid rgba(238,233,221,.25)}
.file-meta a:hover{color:var(--amber)}

/* evidence plate */
.evidence{margin:0 auto 36px;max-width:1160px;padding:0 32px}
/* Amber markdown-style rule under the hero, as in the newsletter: 36px of air
   below the image, then 36px (the figure's margin-bottom) before the copy.
   The ::after block spans the figure's content box, so the rule is exactly the
   image's width rather than the padded container's. */
.evidence::after{content:"";display:block;height:1px;background:var(--amber);margin-top:36px}
.evidence img{width:100%;border:1px solid var(--line);display:block;
  filter:saturate(.94) contrast(1.03)}
.evidence figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#8d97a0}

/* ---------- post: prose ---------- */
.prose{max-width:1160px}
.prose > *{max-width:var(--measure);margin-left:auto;margin-right:auto}
.prose > .kg-width-wide{max-width:var(--measure)}
.prose > .kg-width-full{max-width:var(--measure)}
.prose p{margin:0 auto 1.4em;font-size:17.5px;line-height:1.72;color:var(--paper)}
.prose > p:first-of-type{font-size:19px;color:var(--paper)}
/* Drop cap, matching the newsletter: Gelasio, amber, floated into two lines.
   size/padding were measured on the live page at 1400px — cap ink top lands
   level with line 1's cap top and its base sits on line 2's baseline. */
.prose > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:3.58em;line-height:.8;margin-right:.12em;padding-top:8px;margin-bottom:-8px;color:var(--amber)}
.prose strong{color:#fffdf7;font-weight:700}
.prose em{color:inherit}
.prose a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:rgba(221,166,66,.45);
  transition:color .18s,text-decoration-color .18s}
.prose a:hover{color:var(--lamp);text-decoration-color:var(--lamp)}

.prose h2,.prose h3,.prose h4{font-family:var(--gh-font-heading);font-weight:700;text-transform:uppercase;
  color:#f4f1e8;line-height:1.25;text-wrap:balance}
.prose h2{font-size:16px;letter-spacing:.1em;margin:3em auto 1em;padding-top:1.1em;
  border-top:1px solid var(--line)}
.prose h3{font-size:13.5px;letter-spacing:.14em;margin:2.4em auto .8em;color:var(--tungsten-warm)}
.prose h4{font-size:12.5px;letter-spacing:.16em;margin:2em auto .6em;color:var(--tungsten)}
.prose h2:first-child,.prose h3:first-child{margin-top:0;padding-top:0;border-top:0}

.prose blockquote{margin:2.2em auto;padding:4px 0 4px 24px;border-left:2px solid var(--tungsten);
  font-style:italic;font-size:19.5px;line-height:1.6;color:var(--paper);max-width:var(--measure)}
.prose blockquote p{font-size:inherit;margin:0 0 .6em;color:inherit}
.prose blockquote p:last-child{margin:0}
.prose blockquote em{color:var(--paper-dim)}
/* div-based quote (email-safe: clients re-style <blockquote>, not <div>) */
.prose .quote{margin:2.2em auto;padding:4px 0 4px 24px;border-left:2px solid var(--tungsten);
  font-style:italic;font-size:19.5px;line-height:1.6;color:var(--paper);max-width:var(--measure)}
.prose .quote em{color:var(--paper-dim)}

.prose hr{border:0;margin:3em auto;text-align:center;max-width:var(--measure);line-height:1}
.prose hr::before{content:'◈';font-family:var(--mono);font-size:12px;color:var(--tungsten);
  letter-spacing:.5em}

.prose ul,.prose ol{padding-left:1.3em;margin:0 auto 1.5em;max-width:var(--measure)}
.prose li{margin:.55em 0;line-height:1.7}
.prose li::marker{color:var(--tungsten)}
.prose ul ul,.prose ol ol{margin:.4em 0}

.prose code{font-family:var(--mono);font-size:13.5px;background:var(--coal);
  border:1px solid var(--line);padding:1px 6px;border-radius:3px;color:var(--tungsten-warm)}
.prose pre{background:#191b1d;border:1px solid var(--line);padding:20px 22px;
  overflow-x:auto;margin:0 auto 1.6em;max-width:var(--measure);line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:13px;color:#d9d3c6}

.prose img{border:1px solid var(--line);display:block;margin:0 auto 1.6em}
.prose figure{margin:0 auto 1.8em;max-width:var(--measure)}
.prose figcaption{margin-top:12px;text-align:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#8d97a0}
.prose .kg-image-card figcaption{margin-top:10px}

.prose table{width:100%;max-width:var(--measure);margin:0 auto 1.8em;border-collapse:collapse;
  font-size:15px}
.prose th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tungsten);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td{padding:10px 12px;border-bottom:1px solid rgba(53,61,67,.65);color:var(--paper-dim)}
.prose tr:last-child td{border-bottom:0}

.prose iframe{max-width:100%;border:1px solid var(--line)}
.prose .kg-embed-card{display:flex;flex-direction:column;align-items:center;margin:0 auto 1.8em;
  max-width:var(--measure)}
.prose .kg-embed-card iframe{width:100%}

/* Ghost editor cards */
.prose .kg-card{margin-left:auto;margin-right:auto}
.prose .kg-bookmark-card{border:1px solid var(--line);background:var(--coal)}
.prose .kg-bookmark-container{display:flex;text-decoration:none;border:0;color:inherit}
.prose .kg-bookmark-content{padding:18px 20px;flex:1}
.prose .kg-bookmark-title{font-family:var(--display);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper)}
.prose .kg-bookmark-description{font-size:13.5px;color:var(--paper-dim);margin-top:8px}
.prose .kg-bookmark-metadata{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8d97a0}
.prose .kg-bookmark-icon{width:18px;height:18px;margin:0}
.prose .kg-bookmark-thumbnail{width:160px;flex:0 0 auto}
.prose .kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover;border:0;margin:0;
  border-left:1px solid var(--line)}
.prose .kg-callout-card{display:flex;gap:16px;padding:20px 22px;background:var(--panel);
  border:1px solid var(--line);border-left:2px solid var(--amber);margin-bottom:1.6em}
.prose .kg-callout-emoji{font-size:20px;line-height:1.3}
.prose .kg-callout-text{font-size:16px;color:var(--paper)}
.prose .kg-gallery-container{display:flex;flex-direction:column;gap:6px}
.prose .kg-gallery-row{display:flex;gap:6px}
.prose .kg-gallery-image img{width:100%;height:100%;object-fit:cover;border:0;margin:0}
.prose .kg-video-card,.prose .kg-audio-card{border:1px solid var(--line)}
.prose .kg-toggle-card{background:var(--coal);border:1px solid var(--line);padding:4px 18px}
.prose .kg-toggle-heading{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-dim)}

/* Ghost members paywall */
.prose .gh-post-upgrade-cta{margin:2.4em auto;max-width:var(--measure)}
.prose .gh-post-upgrade-cta-content{background:var(--panel);border:1px solid #415358;
  padding:32px 28px;text-align:center}
.prose .gh-post-upgrade-cta h2{font-size:15px;letter-spacing:.12em;border:0;padding:0;
  margin:0 0 14px;color:#fafbfe}
.prose .gh-post-upgrade-cta p{font-size:15px;color:var(--paper-dim);margin:0 0 22px}

/* ---------- post: foot ---------- */
.file-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:56px 0 0;
  padding-top:22px;border-top:1px solid var(--line)}
.fine-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tungsten);margin-right:6px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--line);color:var(--paper-dim);text-decoration:none;
  transition:border-color .18s,color .18s}
.chip:hover{border-color:var(--tungsten);color:var(--amber)}

.file-nav{display:flex;gap:24px;justify-content:space-between;align-items:stretch;
  margin:56px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.file-nav-item{flex:1;max-width:48%;text-decoration:none;display:block}
.file-nav-item span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tungsten);margin-bottom:8px}
.file-nav-item strong{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--paper);
  line-height:1.35;display:block}
.file-nav-item:hover strong{color:var(--amber)}
.file-nav-item.next{margin-left:auto;text-align:right}

/* ---------- subscribe panel ---------- */
.subscribe{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  margin:64px 0 0;padding:36px 34px;border:1px solid #415358;
  background:linear-gradient(135deg,rgba(38,45,48,.98),rgba(32,36,38,.98));
  box-shadow:inset 0 0 90px rgba(127,214,208,.05)}
.subscribe-inner h2{font-size:clamp(20px,2.6vw,26px);margin:0 0 12px;color:#fafbfe}
.subscribe-copy{margin:0;color:var(--paper-dim);max-width:56ch;font-size:16px}
.subscribe-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.subscribe-terms{margin:14px 0 0;max-width:52ch;font-family:var(--mono);font-size:11px;
  line-height:1.75;letter-spacing:.04em;color:var(--paper-dim)}

/* fingerprint watermark — the publication's artifact */
.fingerprint{width:132px;height:auto;flex:0 0 auto;color:var(--amber);opacity:.42}

/* the detective — a portrait, so it carries a hairline frame like the site plates
   rather than trying to sit in the type as a silhouette */
.detective-figure{flex:0 0 auto;margin:0;line-height:0}
.detective{width:208px;height:208px;object-fit:cover;border:1px solid var(--line);
  filter:saturate(.92) contrast(1.02);border-radius:1px}

/* ---------- related ---------- */
.related{margin-top:80px;padding:70px 0 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(77,93,95,.1),transparent 70%)}

/* ---------- pager ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pager-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8d97a0}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;margin-top:96px;border-top:1px solid var(--line)}
/* The plate is atmosphere, not content: it sits under the brand, the note and the fine
   print, so it has to lose the fight with the text. A scrim in the same layer (first layer
   paints on top) darkens it most at the foot of the block, where the 10.5px mono sits, and
   the opacity drop takes the rest off. */
.site-footer::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(180deg, rgba(30,31,33,.08), rgba(30,31,33,.48)),
                   url('../images/footer.webp');
  background-image:linear-gradient(180deg, rgba(30,31,33,.08), rgba(30,31,33,.48)),
                   image-set(url('../images/footer.avif') type('image/avif'),
                             url('../images/footer.webp') type('image/webp'));
  background-size:cover;background-position:50% 62%;background-repeat:no-repeat;opacity:.52}
/* A text-protection layer over the plate. Measured at ten widths with the amber note and
   the brand in place, the plate's lamp-lit patches took the note down to 2.03:1 and the
   brand to 4.08:1; this gradient lifts both clear of AA without altering the plate's own
   treatment (it still fades the same way, just less far). */
.site-footer::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(22,23,25,.70), rgba(22,23,25,.52))}
.site-footer .wrap{padding:64px 32px 46px}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.foot-brand{margin:0;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:#fafbfe}
.foot-tagline{margin:14px 0 0;font-size:14px;color:var(--amber);max-width:72ch;line-height:1.6}
.foot-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
/* Fediverse handle, under the three buttons. There is no profile page on this domain to
   link to (/@thf 404s), so the action that does something is copying the handle into your
   own instance's search. user-select:all makes one click select the whole string with no
   JavaScript; app.js upgrades it to a button with a spoken confirmation. Same idiom as
   the fine print: mono, uppercase label, paper-dim, hierarchy from size rather than hue. */
.foot-fed{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:18px 0 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--paper-dim)}
.foot-fed-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.foot-fed-handle{color:var(--paper-dim);user-select:all;-webkit-user-select:all;cursor:pointer}
.foot-fed-handle:hover{color:var(--lamp)}
.foot-fed-handle:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.foot-fed-handle.copied{color:var(--amber)}
/* vertical padding on an inline element widens the tap target without moving the
   baseline — a min-height here knocks the label out of line on touch devices */
@media (pointer:coarse){.foot-fed-handle{padding-block:12px}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim)}
.diamond{font-family:var(--mono);display:inline-block;transform:translateY(-1px);color:var(--tungsten)}

/* error pages: the landing page's one-bar footer, no plate and no brand block */
.site-footer-min{margin-top:0;background:none}
.site-footer-min::before{display:none}
/* error pages carry no plate, so the text-protection layer has nothing to protect */
.site-footer-min::after{display:none}
/* the doubled class outranks the responsive `.site-footer .wrap` padding, which would
   otherwise give the one-bar footer 54/40 padding on phones */
.site-footer.site-footer-min .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px 22px;max-width:1120px;padding:18px 34px 22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7b8b91}
@media (max-width:760px){
  .site-footer.site-footer-min .wrap{padding:18px 22px 22px}
}
.site-footer-min a{text-decoration:none;color:#7b8b91}
.site-footer-min a:hover{color:var(--amber)}
.site-footer-min .foot-links{display:flex;flex-wrap:wrap;gap:22px}

/* Membership CTA breathe — the page's one attention loop. Same values as the
   landing page's memberPulse, so the two sites pulse at the same cadence. */
.btn.member{border-color:rgba(165,147,101,.38);animation:memberPulse 4.5s ease-in-out infinite}
.btn.member:hover,.btn.member:focus-visible{animation:none;border-color:var(--lamp);color:var(--lamp)}
@keyframes memberPulse{
  0%,100%{border-color:rgba(165,147,101,.38);color:var(--paper)}
  50%{border-color:var(--lamp);color:var(--lamp)}
}

/* ---------- 404 — the dossier, mirroring thehomelabfiles.org/404.html ---------- */
.cold-case{padding:56px 0 64px}
/* the landing page's container, so the dossier matches it to the pixel */
.cold-case > .wrap{max-width:1120px;padding:0 34px}
.dossier{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;
  border:1px solid #415358;background:linear-gradient(135deg,rgba(38,45,48,.98),rgba(32,36,38,.98))}
.cold-case .left{padding:44px 40px 40px;position:relative;overflow:hidden}
/* the site sets 16px/1.6 where the blog body runs 17px/1.65 — the dossier takes the
   site's metrics so the type block matches the landing page line for line */
.cold-case .left{font-size:16px;line-height:1.6}
.cold-case .tag,.cold-case .row,.cold-case .cap,.cold-case .btn{line-height:1.6}
.cold-case .btn.solid{padding:14px 22px}
.cold-case .right{position:relative;overflow:hidden;border-left:1px solid #415358;min-height:400px}
.cold-case .photo{position:absolute;inset:0;display:block}
.cold-case .photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.72;
  filter:brightness(1.16) contrast(1.07) saturate(.96)}
.cold-case .right::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,26,28,.22) 0%,rgba(24,26,28,.05) 34%,rgba(24,26,28,.92) 100%)}
.cold-case .cap{position:absolute;left:18px;bottom:16px;z-index:2;margin:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9aa7ab}
.cold-case .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--tungsten);color:var(--tungsten);margin-bottom:20px}
.cold-case h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.04;font-size:clamp(24px,3.2vw,36px);color:#fafbfe;margin:0 0 16px;text-wrap:balance}
.cold-case p{margin:0 0 14px;max-width:52ch}
.cold-case .rows{margin-top:22px}
.cold-case .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid rgba(65,83,88,.5);font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase}
.cold-case .row span:first-child{color:#7b8b91}
.cold-case .row span:last-child{color:var(--paper)}
.cold-case .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.cold-case .btn.solid{background:var(--amber);border-color:var(--amber);color:#191408;font-weight:700}
.cold-case .btn.solid:hover{background:var(--lamp);border-color:var(--lamp);color:#191408}
.cold-case .fp{width:64px;height:auto;flex:0 0 auto;opacity:.62;margin-left:auto}
.cold-case .ribbon{position:absolute;top:27px;right:-58px;width:196px;z-index:7;pointer-events:none;
  transform:rotate(45deg);text-align:center;background:var(--red);color:#1a0805;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;padding:6px 0;opacity:.9}
@media (max-width:860px){
  .dossier{grid-template-columns:1fr}
  .cold-case .right{min-height:0;height:232px;border-left:0;border-top:1px solid #415358;order:-1}
  .cold-case .left{padding:28px 22px 30px}
  /* no room for a legible corner sash at phone widths — leave it off rather than clip it */
  .cold-case .ribbon{display:none}
  .cold-case .fp{width:46px}
}

/* ---------- post reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left center;background:var(--amber);z-index:40;pointer-events:none;
  box-shadow:0 0 10px rgba(221,166,66,.5)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .docket{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr}
  .case.has-image{grid-template-columns:1fr}
  .case.has-image .case-main{padding:38px 34px}
  .case.has-image .case-figure{border-top:1px solid #415358;height:210px;container-type:normal}
  .case-figure img{width:100%;height:100%;margin-inline:0}
  .case-meta{border-left:0;border-top:1px solid #415358;padding:26px}
  .meta-cta{margin-top:0;padding-top:16px}
  .file-meta{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .wrap{padding:0 22px}
  .masthead{padding:72px 0 60px}
  .masthead-inner{grid-template-columns:6px 1fr;gap:26px}
  .docket-section{padding:64px 0}
  .prose > *{max-width:100%}
  .evidence{padding:0 22px}
  .site-footer .wrap{padding:54px 22px 40px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-nav{gap:16px}
  .nav-cta{display:none}
  /* WWW is the one nav item that points off-site; on a phone the row turns into a masked
     scroller and it was the item pushed past the edge, so it goes rather than forcing a swipe. */
  .nav-www{display:none}
  .site-nav ul{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .docket{grid-template-columns:1fr}
  .subscribe{grid-template-columns:1fr;padding:28px 24px}
  .subscribe .fingerprint,.subscribe .detective-figure{display:none}
  .file-nav{flex-direction:column;gap:22px}
  .file-nav-item,.file-nav-item.next{max-width:100%;margin-left:0;text-align:left}
  .file-head{padding:52px 0 34px}
  .author-head{grid-template-columns:1fr;gap:18px}
}
@media (max-width:520px){
  body{font-size:16.5px}
  .file-meta{grid-template-columns:1fr}
  .fine{flex-direction:column;gap:8px}
  .pager{flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .pager .btn{justify-content:center}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* transform-based reveals must show their settled state, not their hidden one */
  .file-head .lede::before{transform:scaleY(1)}
  .card:hover{transform:none}
  .progress{transition:none}
}