/* ============================================================
   gp_sec — Catalyst-style dark, warm gradient accent
   ============================================================ */
:root{
  --bg:#050506; --surface:#0D0E10; --surface-2:#131417; --surface-3:#1A1B1F;
  --line:#222327; --line-soft:#171819;
  --text:#F0F1F3; --text-mid:#A6A8AE; --text-dim:#6C6E75;
  --teal:#7BE0C4; --teal-mid:#3F9C86; --teal-dim:#14312a;
  --amber:#F0A05A; --amber-mid:#C67A3C; --amber-soft:#241a12;
  --coral:#EC6A4E;
  --grad:linear-gradient(100deg,#7BE0C4 0%,#E9D27A 42%,#F0A05A 72%,#EC6A4E 100%);
  --grad-soft:linear-gradient(120deg,#7BE0C4,#F0A05A 70%,#EC6A4E);
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --measure:66ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.68;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(48rem 32rem at 100% -8%,rgba(240,160,90,.05),transparent 55%),
             radial-gradient(52rem 36rem at 6% -10%,rgba(123,224,196,.04),transparent 60%)}
body>*{position:relative;z-index:1}
.wrap{max-width:74rem;margin:0 auto;padding:0 2rem}
a{color:inherit;text-decoration:none}
::selection{background:var(--teal-dim);color:var(--text)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad);z-index:20;transition:width .1s linear;box-shadow:0 0 8px rgba(240,160,90,.4)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:30;background:var(--teal);color:#04120e;padding:.5rem .85rem;font-weight:600}

/* top bar */
.topbar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line-soft);background:rgba(5,5,6,.82);backdrop-filter:saturate(140%) blur(12px)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.95rem 0;flex-wrap:wrap}
.wordmark{font-family:var(--mono);font-size:.98rem;font-weight:500;color:var(--text)}
.wordmark::before{content:"> ";color:var(--teal-mid)}
.nav{display:flex;gap:1.5rem;align-items:center}
.nav a{font-size:.9rem;color:var(--text-dim);transition:color .18s ease}
.nav a:hover,.nav a.active{color:var(--teal)}
.btn-pill{border:1px solid var(--amber-mid);color:var(--amber);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem 1.05rem;border-radius:999px;transition:all .2s ease}
.btn-pill:hover{background:var(--amber);color:#12100c;border-color:var(--amber)}

/* hero */
.hero{padding:clamp(3.4rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.0;letter-spacing:-.025em;margin:0 0 1.3rem;color:#F6F7F9}
.hero .hi{font-family:var(--mono);font-size:.92rem;color:var(--teal);margin:0 0 1.4rem;letter-spacing:.01em}
.hero .lede{font-size:1.08rem;color:var(--text-mid);max-width:42ch;margin:0 0 2rem}
.hero .lede .name{color:var(--text);font-weight:700}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{font-weight:600;font-size:.95rem;padding:.72rem 1.35rem;border-radius:9px;transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;border:1px solid transparent}
.btn-primary{background:var(--teal);color:#04120e}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--text-mid)}
.btn-ghost::after{content:" \2192";display:inline-block;transition:transform .2s ease;opacity:.65}
.btn-ghost:hover{border-color:var(--teal-mid);color:var(--teal);transform:translateY(-2px);box-shadow:0 6px 18px -10px rgba(123,224,196,.5)}
.btn-ghost:hover::after{transform:translateX(4px);opacity:1}

/* HTTP panel */
.panel{margin:0;border:1px solid var(--line);background:var(--surface);font-family:var(--mono);font-size:.8rem;line-height:1.75;box-shadow:0 20px 48px -28px rgba(0,0,0,.9);border-radius:6px;overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-bottom:1px solid var(--line-soft);background:var(--surface-2);font-size:.7rem;color:var(--text-dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(123,224,196,.5);animation:pulse 3s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,224,196,.45)}70%{box-shadow:0 0 0 7px rgba(123,224,196,0)}100%{box-shadow:0 0 0 0 rgba(123,224,196,0)}}
.panel pre{margin:0;padding:.9rem 1rem;white-space:normal;overflow-wrap:anywhere}
.panel .req{border-bottom:1px solid var(--line-soft);color:var(--text-dim)}
.panel .ln{white-space:pre-wrap}
.m{color:var(--teal)}.h{color:var(--text-mid)}.k{color:var(--text)}.v{color:var(--amber)}.ok{color:var(--teal)}.dim{color:var(--text-dim)}
.ln{display:block;opacity:0;animation:line-in .38s ease-out forwards;animation-delay:calc(var(--i) * 60ms)}
@keyframes line-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* sections */
.section{padding:clamp(3.4rem,7vw,5.5rem) 0}
.section.alt{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-top:1px solid var(--line-soft)}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 1rem}
.display{font-family:var(--serif);font-weight:700;font-size:clamp(1.95rem,4.6vw,3.2rem);line-height:1.03;letter-spacing:-.02em;color:#F6F7F9;margin:0 0 2.2rem}
.page-intro{font-size:1.05rem;color:var(--text-mid);max-width:62ch;margin:-1.4rem 0 2.6rem}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.head-row .display{margin-bottom:0}
.see-more{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;transition:all .2s ease}
.see-more:hover{border-color:var(--teal-mid);color:var(--teal)}

/* modules */
.modules{border-top:1px solid var(--line)}
.module{display:grid;grid-template-columns:5.5rem 1fr auto;gap:2rem;align-items:center;padding:2rem 1.5rem;border-bottom:1px solid var(--line);transition:background .22s ease}
.module:hover{background:var(--surface)}
.module.feature{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:1.2rem 0;position:relative}
.module.feature::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);border-radius:2px}
.mod-num{font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5;transition:opacity .22s ease}
.module:hover .mod-num,.module.feature .mod-num{opacity:1}
.mod-cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-mid);margin:0 0 .5rem}
.mod-title{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:#EDF0F3;margin:0 0 .5rem;letter-spacing:-.01em;transition:color .2s ease}
.module:hover .mod-title{color:#fff}
.mod-desc{font-size:.97rem;color:var(--text-mid);margin:0;max-width:48ch}
.mod-cta{flex:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);border:1px solid var(--line);border-radius:999px;padding:.65rem 1.25rem;white-space:nowrap;transition:all .2s ease}
.module:hover .mod-cta{border-color:var(--teal-mid);color:var(--teal)}
.module.feature .mod-cta{border-color:var(--amber-mid);color:var(--amber)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.7rem;transition:transform .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-4px);border-color:var(--teal-mid)}
.card.warm{background:linear-gradient(160deg,var(--amber-soft),var(--surface))}
.card.warm:hover{border-color:var(--amber)}
.card-vis{height:8.5rem;border-radius:11px;background:var(--bg);border:1px solid var(--line-soft);margin-bottom:1.4rem;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-vis svg{width:100%;height:100%}
.card-cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 .5rem;color:var(--teal-mid)}
.card.warm .card-cat{color:var(--amber)}
.card-title{font-family:var(--serif);font-weight:600;font-size:1.45rem;color:#EDF0F3;margin:0 0 .7rem}
.card-desc{font-size:.94rem;color:var(--text-mid);margin:0}

/* who i am */
.doc{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}
.margin-note{font-family:var(--mono);font-size:.76rem;color:var(--text-dim);padding-top:.55rem;position:relative}
.margin-note::before{content:"";position:absolute;left:0;top:0;width:2.4rem;height:2px;background:var(--grad)}
.doc-body{max-width:var(--measure)}
.doc-body h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.15;margin:0 0 1rem;letter-spacing:-.012em;color:#F0F3F3}
.doc-body p{margin:0 0 1.15rem;color:var(--text-mid)}
.doc-body p em{color:var(--text);font-style:italic}
.sub{color:var(--text-dim);font-size:.95rem}
.sub-head{margin-top:1.8rem;margin-bottom:.9rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);color:var(--text)}
.journey{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .1rem;margin:1.5rem 0 .5rem;padding:1rem 0 0;border-top:1px solid var(--line-soft)}
.journey li{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);white-space:nowrap}
.journey li:not(:last-child)::after{content:"→";color:var(--teal-mid);margin:0 .6rem;font-weight:500}
.journey li.now{color:var(--teal);font-weight:500}

/* stats grid */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:1.6rem 0 .5rem;background:var(--line-soft);border:1px solid var(--line-soft)}
.stat{background:var(--bg);padding:.9rem;display:flex;flex-direction:column;gap:.15rem}
.stat-n{font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-l{font-family:var(--mono);font-size:.68rem;color:var(--text-dim)}
.also{font-size:.95rem;color:var(--text-mid);margin-top:1.4rem}

/* accent links */
.pubs{list-style:none;margin:0 0 .5rem;padding:0}
.pubs li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--text-dim)}
.link-accent{color:var(--amber);text-decoration:none;display:inline-block;transition:color .2s ease,transform .2s ease}
.link-accent:hover{color:var(--teal);transform:translateX(3px)}
.pubs a{color:var(--amber);text-decoration:none;display:inline-block;transition:color .2s ease,transform .2s ease}
.pubs a:hover{color:var(--teal);transform:translateX(3px)}
.tools{display:flex;flex-wrap:wrap;gap:.4rem}
.tools code{font-family:var(--mono);font-size:.76rem;padding:.22rem .55rem;border:1px solid var(--line);background:var(--surface);color:var(--text-mid)}

/* tree band */
.tree-band{position:relative;overflow:hidden;background:var(--surface);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tree-bg{position:absolute;right:-2rem;bottom:-3rem;width:30rem;max-width:52%;opacity:.15;pointer-events:none;filter:saturate(.9)}
.tree-band .wrap{position:relative;z-index:1}
.stat-row{display:flex;gap:3rem;flex-wrap:wrap;margin-top:1.4rem}
.stat-big b{font-family:var(--serif);font-weight:700;font-size:2.3rem;display:block;line-height:1;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-big span{font-family:var(--mono);font-size:.74rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}

/* contact links */
.links{list-style:none;margin:1.3rem 0 0;padding:0}
.links li{padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
.links li:first-child{border-top:1px solid var(--line-soft)}
.links a{text-decoration:none;color:var(--amber);display:inline-block;transition:color .2s ease,transform .2s ease}
.links a:hover{color:var(--teal);transform:translateX(3px)}
.links a::after{content:" ↗";font-size:.8em;color:var(--text-dim)}
.links a[href^="mailto"]::after{content:""}

/* footer */
footer{padding:2.25rem 0 3.25rem;border-top:1px solid var(--line-soft)}
.foot-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;color:var(--text-dim)}
#clock{color:var(--text-mid)}#clock .sep{color:var(--amber-mid);margin:0 .45rem}

/* article pages */
.article{padding:clamp(2.75rem,6vw,4.5rem) 0}
.article-inner{max-width:70ch}
.back{display:inline-block;font-family:var(--mono);font-size:.8rem;color:var(--text-dim);text-decoration:none;margin-bottom:1.5rem;transition:color .2s ease,transform .2s ease}
.back:hover{color:var(--teal);transform:translateX(-3px)}
.article .dateline{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
.article h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;margin:.5rem 0 1.4rem;letter-spacing:-.02em;color:#F6F7F9}
.article h2{font-family:var(--serif);font-weight:600;font-size:1.42rem;margin:2.5rem 0 .7rem;color:#EFF3F3}
.article h3{font-family:var(--sans);font-weight:600;font-size:1.08rem;margin:1.8rem 0 .5rem;color:var(--text)}
.article p{margin:0 0 1.2rem;color:var(--text-mid)}
.article strong{color:var(--text)}.article em{color:var(--text)}
.article pre{font-family:var(--mono);font-size:.8rem;line-height:1.65;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1rem 1.05rem;overflow-x:auto;color:var(--text-mid)}
.article :not(pre)>code{font-family:var(--mono);font-size:.86em;background:var(--surface);border:1px solid var(--line);padding:.08em .38em;border-radius:3px;color:var(--amber)}
.article blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--amber);color:var(--text);font-style:italic}
.article .diagram{margin:1.8rem 0;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.article .diagram img{display:block;width:100%;height:auto}
.article .misread{margin:1.4rem 0;padding:.75rem .95rem;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:4px;font-size:.93rem;color:var(--text-mid)}
.article .misread strong{color:var(--text)}
.article ul.pubs{margin:1rem 0 1.5rem}

/* responsive */
@media(max-width:60rem){
  .hero-grid{grid-template-columns:1fr}
  .panel{max-width:34rem}
  .cards{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr;gap:1rem}
  .margin-note{display:inline-block}
  .nav a:not(.btn-pill){display:none}
}
@media(max-width:52rem){
  .wrap{padding:0 1.25rem}
  .module{grid-template-columns:3rem 1fr;gap:1rem;padding:1.4rem .5rem}
  .mod-cta{display:none}.mod-num{font-size:1.8rem}.mod-title{font-size:1.25rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-inner{flex-direction:column;gap:.4rem}
  .tree-bg{width:20rem;opacity:.11}
}
/* ===== post card grid (added to catalyst.css) ===== */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .22s ease,border-color .22s ease}
.pcard:hover{transform:translateY(-4px);border-color:var(--teal-mid)}
.pcard-thumb{height:8rem;background:var(--bg);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard-thumb img{width:100%;height:100%;object-fit:contain}
.pcard-body{padding:1rem 1.05rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-mid)}
.pcard-title{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.25;color:#EDF0F3;margin:0;transition:color .2s ease}
.pcard:hover .pcard-title{color:#fff}
.pcard-date{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);margin-top:auto}

.section-blurb{font-size:1rem;color:var(--text-mid);max-width:60ch;margin:-.6rem 0 1.8rem}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.section-head .eyebrow{margin-bottom:.5rem}
.section-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;margin:0;color:#F6F7F9}
.view-all{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-mid);border-radius:999px;padding:.55rem 1.15rem;white-space:nowrap;transition:all .2s ease}
.view-all:hover{background:var(--amber);color:#12100c;border-color:var(--amber)}

@media(max-width:60rem){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.card-grid{grid-template-columns:1fr}}



/* ===== view counts ===== */
.pcard-views{display:block;font-family:var(--mono);font-size:.66rem;color:var(--text-dim);margin-top:.35rem;letter-spacing:.04em}
.pcard-views span{color:var(--teal-mid)}
.dateline .views{display:inline}

/* ===== like button ===== */
.like-row{margin:2.5rem 0 1rem;display:flex;justify-content:flex-start}
.like-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);color:var(--text-mid);font-family:var(--mono);font-size:.85rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer;transition:all .2s ease}
.like-btn:hover{border-color:var(--teal-mid);color:var(--teal)}
.like-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:transform .2s ease}
.like-btn:hover svg{transform:scale(1.1)}
.like-btn.liked{border-color:var(--teal-mid);color:var(--teal)}
.like-btn.liked svg{fill:var(--teal);stroke:var(--teal);animation:like-pop .3s ease}
@keyframes like-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.like-count{font-variant-numeric:tabular-nums}