/* =====================================================================
   codespace — Ghost theme
   Minimal, high-contrast, monochrome. System fonts with Ghost custom-font
   override hooks (--gh-font-heading / --gh-font-body).
   Scoped with #cs- / .cs- prefixes to avoid clashes.
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root{
  /* Dark scheme (default) */
  --cs-bg:#0A0A0A;
  --cs-panel:#141414;
  --cs-border:#262626;
  --cs-border-soft:#1C1C1C;
  --cs-text:#FAFAFA;
  --cs-text-dim:#CDD2D9;
  --cs-text-2:#B4B4B4;
  --cs-muted:#6E6E6E;
  --cs-accent:#8A8A8A;          /* monochrome default; overridden when accent enabled */

  --cs-font-body: var(--gh-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif);
  --cs-font-head: var(--gh-font-heading, var(--cs-font-body));
  --cs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --cs-s1:8px; --cs-s2:16px; --cs-s3:24px; --cs-s4:32px; --cs-s5:48px; --cs-s6:64px;
  --cs-maxw:960px; --cs-measure:680px; --cs-pad:24px;
}
@media(min-width:768px){ :root{ --cs-pad:40px; } }

/* Light scheme */
body.cs-scheme-light{
  --cs-bg:#FFFFFF;
  --cs-panel:#F6F6F7;
  --cs-border:#E4E4E7;
  --cs-border-soft:#EDEDEF;
  --cs-text:#0A0A0A;
  --cs-text-dim:#27272A;
  --cs-text-2:#52525B;
  --cs-muted:#8A8A8A;
  --cs-accent:#6E6E6E;
}
/* Auto scheme follows system when set */
@media(prefers-color-scheme:light){
  body.cs-scheme-auto{
    --cs-bg:#FFFFFF;
    --cs-panel:#F6F6F7;
    --cs-border:#E4E4E7;
    --cs-border-soft:#EDEDEF;
    --cs-text:#0A0A0A;
    --cs-text-dim:#27272A;
    --cs-text-2:#52525B;
    --cs-muted:#8A8A8A;
    --cs-accent:#6E6E6E;
  }
}
/* Accent (brand color) when enabled */
body.cs-accent-on{ --cs-accent: var(--cs-brand, #8A8A8A); }

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--cs-bg); color:var(--cs-text);
  font-family:var(--cs-font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
  transition:background-color .2s ease, color .2s ease;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--cs-text); text-decoration:none;}
::selection{background:var(--cs-text); color:var(--cs-bg);}
.cs-visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.cs-skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--cs-text); color:var(--cs-bg); padding:10px 16px; border-radius:6px;}
.cs-skip-link:focus{left:8px; top:8px;}

/* --------------------------- Layout rail ---------------------------- */
.cs-container{max-width:var(--cs-maxw); margin:0 auto; padding:0 var(--cs-pad); width:100%;}
.cs-main{flex:1 0 auto; display:flex; flex-direction:column;}

/* ------------------------------ Header ------------------------------ */
.cs-header{
  border-bottom:1px solid var(--cs-border-soft);
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cs-bg) 85%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cs-header-inner{display:flex; align-items:center; gap:var(--cs-s4); height:64px;}
.cs-logo{font-family:var(--cs-font-head); font-weight:700; font-size:24px; letter-spacing:-.02em; color:var(--cs-text); white-space:nowrap; display:inline-flex; align-items:center;}
.cs-logo img{max-height:32px; width:auto;}
.cs-nav{flex:1 1 auto; display:flex; justify-content:center;}
.cs-nav ul{display:flex; gap:var(--cs-s4); list-style:none; margin:0; padding:0;}
.cs-nav li{margin:0;}
.cs-nav a{font-size:14px; font-weight:450; color:var(--cs-text-2); padding:4px 0; transition:color .15s ease;}
.cs-nav a:hover{color:var(--cs-text);}
.cs-nav li.nav-current a{color:var(--cs-text);}
.cs-account{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.cs-icon-btn{display:inline-grid; place-items:center; width:34px; height:34px; background:transparent; border:1px solid var(--cs-border); border-radius:6px; color:var(--cs-text-2); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.cs-icon-btn:hover{border-color:var(--cs-text-2); color:var(--cs-text); background:var(--cs-panel);}
.cs-icon-btn svg{width:16px; height:16px;}
.cs-btn{display:inline-flex; align-items:center; height:34px; background:var(--cs-bg); border:1px solid var(--cs-border); color:var(--cs-text-2); border-radius:6px; padding:0 14px; font:500 13px var(--cs-font-body); cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;}
.cs-btn:hover{border-color:var(--cs-accent); background:var(--cs-panel); color:var(--cs-text);}
.cs-hamburger{display:none; background:none; border:0; color:var(--cs-text); cursor:pointer; padding:6px;}
.cs-hamburger svg{width:22px; height:22px;}

/* ------------------------------ Intro ------------------------------- */
.cs-intro{padding:var(--cs-s6) 0 var(--cs-s5); border-bottom:1px solid var(--cs-border-soft);}
.cs-intro h1{font-family:var(--cs-font-head); margin:0; font-size:clamp(22px,3.5vw,32px); font-weight:600; letter-spacing:-.02em; line-height:1.12; max-width:760px; color:var(--cs-text-2);}
.cs-intro p{color:var(--cs-text-2); max-width:var(--cs-measure); margin:var(--cs-s3) 0 0; font-size:17px; line-height:1.6;}

/* --------------------------- Archive list --------------------------- */
.cs-feed{padding:var(--cs-s2) 0 var(--cs-s6);}
.cs-row{display:grid; grid-template-columns:72px 1fr auto; align-items:baseline; column-gap:var(--cs-s4); padding:var(--cs-s3) 0; border-bottom:1px solid var(--cs-border-soft); position:relative;}
.cs-row:last-child{border-bottom:0;}
.cs-row .cs-year{color:var(--cs-muted); font-size:14px; font-variant-numeric:tabular-nums;}
.cs-row .cs-ttl{display:flex; flex-direction:column; gap:5px; min-width:0;}
.cs-row .cs-tag{font-size:11px; font-weight:550; letter-spacing:.07em; text-transform:uppercase; color:var(--cs-muted);}
.cs-row .cs-name{font-family:var(--cs-font-head); font-size:19px; font-weight:500; line-height:1.3; letter-spacing:-.01em; color:var(--cs-text-dim); transition:color .15s;}
.cs-row .cs-name::after{content:" →"; color:var(--cs-muted); font-weight:400; opacity:0; transition:opacity .12s ease;}
.cs-row:hover .cs-name{color:var(--cs-text);}
.cs-row:hover .cs-name::after{opacity:1;}
.cs-row .cs-excerpt{color:var(--cs-text-2); font-size:14px; line-height:1.55; margin:2px 0 0; max-width:var(--cs-measure);}
.cs-row .cs-metric{color:var(--cs-muted); font-size:14px; font-variant-numeric:tabular-nums; justify-self:end; white-space:nowrap;}
/* full-row clickable overlay */
.cs-row a.cs-row-link{position:absolute; inset:0; z-index:1;}
.cs-row a.cs-row-link span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* --------------------------- Pagination ----------------------------- */
.cs-pager{display:flex; align-items:center; justify-content:space-between; padding:var(--cs-s4) 0; border-top:1px solid var(--cs-border-soft);}
.cs-pager .cs-page-info{color:var(--cs-muted); font-size:13px; font-variant-numeric:tabular-nums;}
.cs-pager a, .cs-pager span.cs-disabled{display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid var(--cs-border); border-radius:6px; font-size:13px; color:var(--cs-text); transition:border-color .15s ease, background .15s ease;}
.cs-pager a:hover{border-color:var(--cs-accent); background:var(--cs-panel);}
.cs-pager span.cs-disabled{color:var(--cs-muted); opacity:.5;}

/* ----------------------- Tag / Author headers ----------------------- */
.cs-page-head{padding:var(--cs-s6) 0 var(--cs-s4); border-bottom:1px solid var(--cs-border-soft); margin-bottom:var(--cs-s2);}
.cs-page-head .cs-crumb{color:var(--cs-muted); font-size:12px; font-weight:550; letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px;}
.cs-page-head h1{font-family:var(--cs-font-head); margin:0 0 6px; font-size:clamp(26px,4vw,34px); font-weight:600; letter-spacing:-.02em;}
.cs-page-head p{margin:0; color:var(--cs-text-2); font-size:15px; max-width:var(--cs-measure);}
.cs-author-head{display:flex; align-items:center; gap:var(--cs-s3); padding:var(--cs-s6) 0 var(--cs-s4); border-bottom:1px solid var(--cs-border-soft); margin-bottom:var(--cs-s2);}
.cs-author-head .cs-crumb{color:var(--cs-muted); font-size:12px; font-weight:550; letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px;}
.cs-author-head h1{font-family:var(--cs-font-head); margin:0; font-size:clamp(24px,3.5vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.1;}
.cs-author-head > div > p:not(.cs-crumb){color:var(--cs-text-2); font-size:15px; margin:8px 0 0; max-width:var(--cs-measure);}
.cs-avatar{width:88px; height:88px; flex:none; border-radius:50%; overflow:hidden; border:1px solid var(--cs-border); background:var(--cs-panel);}
.cs-avatar img{width:100%; height:100%; object-fit:cover;}

/* ------------------------------ Post -------------------------------- */
.cs-post-head{padding:var(--cs-s6) 0 var(--cs-s4); border-bottom:1px solid var(--cs-border); margin-bottom:var(--cs-s5);}
.cs-post-head .cs-crumb{color:var(--cs-muted); font-size:12px; font-weight:550; letter-spacing:.07em; text-transform:uppercase;}
.cs-post-head .cs-crumb a{color:var(--cs-muted);}
.cs-post-head .cs-crumb a:hover{color:var(--cs-text);}
.cs-post-head h1{font-family:var(--cs-font-head); margin:var(--cs-s2) 0 var(--cs-s3); font-size:clamp(28px,4.5vw,38px); font-weight:600; letter-spacing:-.025em; line-height:1.12; max-width:760px;}
.cs-post-meta{display:flex; gap:var(--cs-s3); color:var(--cs-muted); font-size:14px; flex-wrap:wrap; align-items:center;}
.cs-post-meta .cs-dot{color:var(--cs-border);}
.cs-post-meta a{color:var(--cs-muted);}
.cs-post-meta a:hover{color:var(--cs-text);}
.cs-feature-image{margin:0 0 var(--cs-s5);}
.cs-feature-image img{width:100%; border-radius:8px; border:1px solid var(--cs-border);}
.cs-feature-image figcaption{color:var(--cs-muted); font-size:13px; text-align:center; margin-top:var(--cs-s1);}

/* post content (Koenig editor output) */
.cs-content{font-size:17px; line-height:1.75; color:var(--cs-text-dim); padding-bottom:var(--cs-s6);}
.cs-content > *{margin-top:0; margin-bottom:var(--cs-s3);}
.cs-content p{color:var(--cs-text-dim);}
.cs-content h2{font-family:var(--cs-font-head); font-size:25px; font-weight:600; letter-spacing:-.015em; color:var(--cs-text); margin-top:var(--cs-s5);}
.cs-content h3{font-family:var(--cs-font-head); font-size:20px; font-weight:600; color:var(--cs-text); margin-top:var(--cs-s4);}
.cs-content h4{font-family:var(--cs-font-head); font-size:17px; font-weight:600; color:var(--cs-text); margin-top:var(--cs-s4);}
.cs-content a{color:var(--cs-text); border-bottom:1px solid var(--cs-muted);}
.cs-content a:hover{border-bottom-color:var(--cs-text);}
.cs-content strong{color:var(--cs-text);}
.cs-content ul, .cs-content ol{padding-left:var(--cs-s3);}
.cs-content li{margin-bottom:var(--cs-s1);}
.cs-content img{border-radius:8px; margin-left:auto; margin-right:auto;}
.cs-content figure{margin:var(--cs-s4) 0;}
.cs-content figcaption{color:var(--cs-muted); font-size:13px; text-align:center; margin-top:var(--cs-s1);}
.cs-content hr{border:0; border-top:1px solid var(--cs-border); margin:var(--cs-s5) 0;}
.cs-content blockquote{border-left:2px solid var(--cs-text-2); margin:var(--cs-s4) 0; padding-left:var(--cs-s3); color:var(--cs-text); font-size:18px;}
.cs-content :not(pre) > code{background:var(--cs-panel); border:1px solid var(--cs-border); color:var(--cs-text); padding:2px 6px; border-radius:4px; font:0.88em var(--cs-mono);}
.cs-content pre{background:var(--cs-panel); border:1px solid var(--cs-border); border-radius:8px; padding:18px 20px; overflow-x:auto; font:13.5px/1.65 var(--cs-mono); color:var(--cs-text-2);}
.cs-content pre code{background:none; border:0; padding:0; color:inherit;}
.cs-content table{width:100%; border-collapse:collapse; font-size:15px;}
.cs-content th, .cs-content td{border:1px solid var(--cs-border); padding:8px 12px; text-align:left;}
.cs-content th{background:var(--cs-panel);}
/* Koenig cards */
.cs-content .kg-card{margin-top:var(--cs-s4); margin-bottom:var(--cs-s4);}
.cs-content .kg-width-wide{width:min(100%, calc(var(--cs-measure) + 160px)); margin-left:50%; transform:translateX(-50%);}
.cs-content .kg-width-full{width:100vw; margin-left:50%; transform:translateX(-50%); max-width:100vw;}
.cs-content .kg-embed-card, .cs-content .kg-image-card{text-align:center;}
.cs-content .kg-bookmark-card a{border-bottom:0;}
.cs-content .kg-bookmark-container{display:flex; border:1px solid var(--cs-border); border-radius:8px; overflow:hidden; color:var(--cs-text); background:var(--cs-panel);}
.cs-content .kg-bookmark-content{padding:18px 20px; flex:1 1 auto;}
.cs-content .kg-bookmark-title{color:var(--cs-text); font-weight:600;}
.cs-content .kg-bookmark-description{color:var(--cs-text-2); font-size:14px;}
.cs-content .kg-bookmark-thumbnail{flex:0 0 30%;}
.cs-content .kg-bookmark-thumbnail img{height:100%; object-fit:cover; border-radius:0;}
.cs-content .kg-callout-card{border-radius:8px; padding:16px 20px; background:var(--cs-panel); border:1px solid var(--cs-border);}
.cs-content .kg-toggle-card{border:1px solid var(--cs-border); border-radius:8px; padding:16px 20px;}

/* members gated content */
.cs-gated{border:1px solid var(--cs-border); border-radius:10px; padding:var(--cs-s5); text-align:center; background:var(--cs-panel); margin:var(--cs-s5) 0;}
.cs-gated h2{font-family:var(--cs-font-head); margin:0 0 var(--cs-s2); font-size:22px;}
.cs-gated p{color:var(--cs-text-2); margin:0 0 var(--cs-s3);}

/* --------------------------- Post footer ---------------------------- */
.cs-post-footer{max-width:var(--cs-measure); margin:0 auto;}
.cs-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--cs-s4);}
.cs-tags a{font-size:13px; color:var(--cs-text-2); border:1px solid var(--cs-border); border-radius:100px; padding:4px 12px; transition:border-color .15s, color .15s;}
.cs-tags a:hover{color:var(--cs-text); border-color:var(--cs-text-2);}
.cs-byline{display:flex; align-items:center; gap:var(--cs-s2); padding:var(--cs-s4) 0; border-top:1px solid var(--cs-border);}
.cs-byline .cs-avatar{width:48px; height:48px;}
.cs-byline .cs-byline-name{font-weight:600; color:var(--cs-text);}
.cs-byline .cs-byline-bio{color:var(--cs-text-2); font-size:14px; margin:2px 0 0;}

/* CTA */
.cs-cta{max-width:var(--cs-measure); margin:var(--cs-s5) auto 0; border:1px solid var(--cs-border); border-radius:10px; padding:var(--cs-s5); text-align:center;}
.cs-cta h2{font-family:var(--cs-font-head); margin:0 0 var(--cs-s3); font-size:22px; font-weight:600;}
.cs-form{display:flex; gap:8px; max-width:420px; margin:0 auto;}
.cs-input{flex:1 1 auto; height:40px; padding:0 14px; background:var(--cs-bg); border:1px solid var(--cs-border); border-radius:6px; color:var(--cs-text); font:15px var(--cs-font-body);}
.cs-input::placeholder{color:var(--cs-muted);}
.cs-input:focus{outline:none; border-color:var(--cs-accent);}
.cs-submit{height:40px; padding:0 18px; background:var(--cs-text); color:var(--cs-bg); border:1px solid var(--cs-text); border-radius:6px; font:600 14px var(--cs-font-body); cursor:pointer; transition:opacity .15s;}
.cs-submit:hover{opacity:.88;}
.cs-form-msg{font-size:13px; margin-top:8px; min-height:1em;}
.cs-form-msg.cs-error{color:#f87171;}
.cs-form-msg.cs-success{color:var(--cs-text-2);}

/* related posts */
.cs-related{max-width:var(--cs-measure); margin:var(--cs-s6) auto 0; padding-top:var(--cs-s5); border-top:1px solid var(--cs-border);}
.cs-related h2{font-family:var(--cs-font-head); font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--cs-muted); margin:0 0 var(--cs-s2);}

/* prev/next */
.cs-prevnext{display:grid; grid-template-columns:1fr 1fr; gap:var(--cs-s3); max-width:var(--cs-measure); margin:var(--cs-s5) auto 0;}
.cs-prevnext a{border:1px solid var(--cs-border); border-radius:8px; padding:var(--cs-s3); transition:border-color .15s;}
.cs-prevnext a:hover{border-color:var(--cs-text-2);}
.cs-prevnext .cs-pn-label{color:var(--cs-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
.cs-prevnext .cs-pn-title{color:var(--cs-text); font-size:15px; margin-top:6px; display:block;}
.cs-prevnext .cs-next{text-align:right;}

/* ------------------------------ Page -------------------------------- */
.cs-page-content{max-width:var(--cs-measure); margin:var(--cs-s5) auto 0;}
.cs-page-title{font-family:var(--cs-font-head); font-size:clamp(28px,4.5vw,38px); font-weight:600; letter-spacing:-.025em; max-width:760px; margin:var(--cs-s6) 0 var(--cs-s4);}

/* ------------------------------ Error ------------------------------- */
.cs-error{text-align:center; padding:var(--cs-s6) 0; flex:1 0 auto; display:flex; flex-direction:column; justify-content:center;}
.cs-error h1{font-family:var(--cs-font-head); font-size:72px; margin:0; color:var(--cs-text);}
.cs-error p{color:var(--cs-text-2); margin:var(--cs-s2) 0 var(--cs-s4);}

/* ------------------------------ Footer ------------------------------ */
.cs-footer{position:relative; z-index:1; background:var(--cs-bg); margin-top:0; padding:0 0 var(--cs-s4);}
.cs-footer-inner{display:flex; justify-content:space-between; align-items:center; gap:var(--cs-s3); flex-wrap:wrap; color:var(--cs-muted); font-size:13px; border-top:1px solid var(--cs-border-soft); padding-top:var(--cs-s4);}
.cs-footer-logo{font-family:var(--cs-font-head); font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--cs-muted);}
.cs-footer-logo:hover{color:var(--cs-muted);}
.cs-footer-links{display:flex; gap:var(--cs-s3);}
.cs-footer-links a{color:var(--cs-text-2);}
.cs-footer-links a:hover{color:var(--cs-text);}

/* ----------------------------- A11y focus --------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--cs-accent); outline-offset:2px;}

/* ----------------------------- Responsive --------------------------- */
@media(max-width:720px){
  .cs-header-inner{flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:14px; gap:0; align-items:center;}
  .cs-logo{order:1; font-size:20px;}
  .cs-account{order:2; margin-left:auto; gap:8px; align-items:center;}
  .cs-icon-btn{width:32px; height:32px;}
  .cs-btn{height:32px; padding:0 13px;}
  .cs-hamburger{display:inline-grid; place-items:center; order:3; margin-left:8px; margin-right:-6px; width:32px; height:32px; padding:0;}
  .cs-nav{order:4; width:100%; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:14px; padding-top:14px; border-top:1px solid var(--cs-border-soft);}
  .cs-nav.cs-collapsed{display:none;}
  .cs-nav ul{gap:var(--cs-s4); padding-bottom:2px;}
  .cs-nav a{padding:6px 0; min-height:40px; display:inline-flex; align-items:center;}
  .cs-intro{padding:var(--cs-s5) 0 var(--cs-s4);}
  .cs-row{grid-template-columns:1fr auto; column-gap:var(--cs-s3); row-gap:4px; padding:var(--cs-s3) 0;}
  .cs-row .cs-year{grid-column:1/-1; grid-row:1; font-size:12px;}
  .cs-row .cs-ttl{grid-column:1; grid-row:2;}
  .cs-row .cs-name{font-size:17px;}
  .cs-row .cs-name::after{content:"";}
  .cs-row .cs-metric{grid-column:2; grid-row:2; align-self:center; font-size:13px;}
  .cs-prevnext{grid-template-columns:1fr;}
  .cs-footer-inner{flex-direction:row; justify-content:space-between; align-items:center; gap:var(--cs-s2);}
  .cs-content .kg-width-full{width:100%; margin-left:0; transform:none;}
}
@media(max-width:380px){
  .cs-logo{font-size:18px;}
}

/* print */
@media print{
  .cs-header, .cs-footer, .cs-cta, .cs-related, .cs-prevnext{display:none;}
  body{background:#fff; color:#000;}
}