/* ─────────────────────────────────────────────────────────────────────────────
   jeremyduffy.co.uk — mono terminal index. Shared by home, journal, posts.
   The reveal is the FIS "melt": a block melts in behind a ragged edge while its
   colour plates come back into register. Driven from assets/site.js.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#f1eee6;--ink:#131209;--soft:#48453a;--faint:#615c50;--line:#dad4c5;--accent:#1a5f4f;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
a{text-decoration:none;color:inherit}
li{list-style:none}
img{max-width:100%;display:block}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
.page{max-width:600px;margin:0;padding:clamp(46px,7vw,80px) clamp(24px,6vw,56px) 30vh}

/* ── title / top ──────────────────────────────────────────────────────────── */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.name{font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
a.name:hover{color:var(--accent)}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:.28em;transform:translateY(.16em);
  background:var(--accent);animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.back{font-size:12px;letter-spacing:.06em;color:var(--soft)}.back:hover{color:var(--accent)}

/* ── labels / sections ────────────────────────────────────────────────────── */
.sec{margin-top:clamp(38px,6vw,56px)}
.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);padding-bottom:9px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.lbl span::before{content:"// "}
.lbl a{letter-spacing:.08em;color:var(--soft)}.lbl a:hover{color:var(--accent)}
.lbl a::before{content:""}

/* ── journal list ─────────────────────────────────────────────────────────── */
.jrow{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--line);transition:padding .28s ease,opacity .28s ease}
.jrow .date{font-size:12px;color:var(--soft);white-space:nowrap}
.jrow .jt{font-size:15px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.jrow .cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);white-space:nowrap;justify-self:end;transition:color .28s}
.jrow{position:relative}
.jrow::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.jrow:hover::before{transform:scaleY(1)}
.jrow:hover .jt{color:var(--accent)}.jrow:hover .cat{color:var(--accent)}
.more{display:inline-block;margin-top:15px;font-size:12px;letter-spacing:.04em;color:var(--soft)}.more:hover{color:var(--accent)}
.yr{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:24px 0 2px}

/* ── project list ─────────────────────────────────────────────────────────── */
.prow{display:grid;grid-template-columns:26px 1fr auto;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line);
  transition:padding .28s ease,opacity .28s ease}
.prow .n{font-size:12px;color:var(--faint)}
.prow .t{font-size:15px;color:var(--ink)}
.prow .m{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);white-space:nowrap;align-self:center;transition:color .28s}
.prow .d{grid-column:2 / -1;font-size:13px;color:var(--soft);line-height:1.5}
.prow{position:relative}
.prow::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.prow:hover::before{transform:scaleY(1)}
.prow:hover .t{color:var(--accent)}.prow:hover .m{color:var(--accent)}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot{margin-top:clamp(42px,7vw,62px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;letter-spacing:.02em;color:var(--soft);padding-top:18px;border-top:1px solid var(--line)}
.foot a:hover{color:var(--accent)}

/* ── journal masthead ─────────────────────────────────────────────────────── */
.masthead{margin:clamp(30px,5vw,46px) 0 clamp(20px,3vw,30px)}
.masthead h1{font-size:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.masthead p{font-size:13px;color:var(--soft);margin-top:10px;max-width:52ch;line-height:1.6}

/* ── article (post) ───────────────────────────────────────────────────────── */
.article{max-width:600px}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:clamp(30px,6vw,50px)}
.eyebrow .cat{color:var(--accent)}
.eyebrow .dot{width:3px;height:3px;border-radius:9px;background:var(--faint)}
.article h1{font-size:clamp(22px,3.4vw,30px);line-height:1.25;letter-spacing:.01em;color:var(--ink);margin-top:14px;text-wrap:balance}
.article .dek{font-size:15px;line-height:1.6;color:var(--soft);margin-top:14px;text-wrap:pretty}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tags span{font-size:11px;letter-spacing:.06em;color:var(--soft);border:1px solid var(--line);border-radius:4px;padding:4px 9px}
.prose{margin-top:clamp(26px,5vw,40px);font-size:15px;line-height:1.85;color:var(--ink)}
.prose>*+*{margin-top:1.2em}
.prose h2{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:2em}
.prose h2::before{content:"// ";color:var(--soft)}
.prose h3{font-size:15px;font-weight:600;color:var(--ink);margin-top:1.6em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose blockquote{border-left:2px solid var(--accent);padding-left:18px;margin-left:0;color:var(--soft);font-style:italic}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{list-style:none;margin-top:.5em;position:relative}
.prose ul li::before{content:"—";position:absolute;left:-1.4em;color:var(--faint)}
.prose ol{counter-reset:c}.prose ol li{counter-increment:c}.prose ol li::before{content:counter(c) ".";position:absolute;left:-1.6em;color:var(--faint)}
.prose code{font-size:.92em;background:var(--line);padding:2px 6px;border-radius:4px}
.prose pre{background:var(--ink);color:var(--paper);padding:16px 18px;border-radius:8px;overflow:auto;font-size:13px;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0;width:40%}
.prose figure figcaption{font-size:12px;color:var(--soft);margin-top:8px}
.subcta{margin-top:clamp(36px,7vw,56px);padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--soft)}
.subcta a{color:var(--accent)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,5vw,44px);padding-top:20px;border-top:1px solid var(--line)}
.pn .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pn .tt{font-size:14px;color:var(--ink);margin-top:5px;line-height:1.3}
.pn a:hover .tt{color:var(--accent)}
.pn .next{text-align:right}

/* ── the FIS melt ─────────────────────────────────────────────────────────── */
@property --fis-melt{ syntax:'<percentage>'; inherits:false; initial-value:-34%; }
@property --fis-lock{ syntax:'<number>'; inherits:false; initial-value:1; }
.js .melt{
  --fis-melt:-34%;
  -webkit-mask-image:linear-gradient(to bottom, #000 var(--fis-melt), transparent calc(var(--fis-melt) + 26%));
  mask-image:linear-gradient(to bottom, #000 var(--fis-melt), transparent calc(var(--fis-melt) + 26%));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.js .melt.revealing{
  filter:drop-shadow(calc(var(--fis-lock) * 3.2px) 0 rgba(255,0,90,.5))
         drop-shadow(calc(var(--fis-lock) * -3.2px) 0 rgba(0,190,255,.5));
  transform:translateY(calc(var(--fis-lock) * -10px));
  will-change:filter, transform;
}
.js .melt.done{ -webkit-mask-image:none; mask-image:none; filter:none; transform:none; will-change:auto; }
@media (prefers-reduced-motion:reduce){ .js .melt{ -webkit-mask-image:none; mask-image:none; } .caret{animation:none} }

@media (max-width:520px){ .jrow{grid-template-columns:58px 1fr} .jrow .cat{display:none} .pn{grid-template-columns:1fr} .pn .next{text-align:left} }

/* ── /links (link-in-bio) ─────────────────────────────────────────────────── */
.lp{max-width:460px;margin:0 auto;padding:clamp(52px,12vw,88px) 24px 64px;text-align:center}
.lp .name{font-size:20px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.lp .kick{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);margin-top:14px}
.lp .set{margin-top:clamp(30px,8vw,46px);border-top:1px solid var(--line);text-align:left}
.lp .lrow{display:block;padding:18px 4px;border-bottom:1px solid var(--line);transition:padding .2s ease}
.lp .lt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;color:var(--ink)}
.lp .lt .go{font-size:12px;color:var(--faint);transition:color .2s}
.lp .ld{font-size:12.5px;line-height:1.55;color:var(--soft);margin-top:6px}
.lp a.lrow:hover{padding-left:10px}.lp a.lrow:hover .lt{color:var(--accent)}.lp a.lrow:hover .go{color:var(--accent)}
.lp .lrow.off{opacity:.5}
.lp a.limg{padding-top:20px}
.lp a.limg:hover{padding-left:4px}
.lp .banner{border-radius:12px;overflow:hidden;aspect-ratio:4/5;margin-bottom:12px;background:var(--line)}
.lp .banner img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;transition:transform .5s ease}
.lp a.limg:hover .banner img{transform:scale(1.03)}
.lp .divider{display:flex;align-items:center;gap:14px;margin:26px 0 6px;color:var(--soft);font-size:10px;letter-spacing:.42em;text-transform:uppercase}
.lp .divider span{height:1px;flex:1;background:var(--line)}
.lp .lfoot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.lp .lfoot a:hover{color:var(--accent)}