/* ============================================================
   ujwal-ds — Ghost theme
   Personal Design System: editorial × systematic.
   Tokens ported from colors_and_type.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core palette */
  --ink:        #1C1620;
  --paper:      #E8D5E6;
  --bone:       #F2E6F0;
  --terracotta: #4A3D7A;   /* muted indigo accent */
  --ember:      #E84A2A;
  --moss:       #5A6B3E;
  --ochre:      #C9A227;

  /* Gray scale (lavender-tinted) */
  --gray-50:#EFE3EC; --gray-100:#DECDD9; --gray-200:#C4B0BE; --gray-300:#A493A0;
  --gray-400:#807284; --gray-500:#635868; --gray-600:#48404E; --gray-700:#322B36;
  --gray-800:#211C26; --gray-900:#1A151E;

  /* Semantic */
  --fg:var(--ink); --fg-muted:var(--gray-600); --fg-faint:var(--gray-400); --fg-invert:var(--paper);
  --bg:var(--paper); --bg-alt:var(--bone); --bg-invert:var(--ink);
  --rule:color-mix(in oklab, var(--ink) 18%, transparent);
  --rule-strong:color-mix(in oklab, var(--ink) 40%, transparent);
  --accent:var(--terracotta); --accent-2:var(--ember);
  --link:var(--ink); --link-hover:var(--terracotta);

  /* Type families */
  --font-display:"Instrument Serif","Times New Roman",serif;
  --font-body:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Type scale */
  --t-mono-xs:0.6875rem; --t-mono-sm:0.75rem; --t-xs:0.75rem; --t-sm:0.875rem;
  --t-base:1rem; --t-lg:1.125rem; --t-xl:1.5rem; --t-2xl:2rem;
  --t-3xl:2.75rem; --t-4xl:4rem; --t-5xl:6rem; --t-6xl:9rem;

  /* Spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Radii */
  --r-0:0; --r-1:2px; --r-2:4px; --r-3:8px; --r-pill:999px;

  /* Borders */
  --b-hair:1px solid var(--rule);
  --b-line:1px solid var(--rule-strong);
  --b-ink:1px solid var(--ink);

  /* Motion */
  --ease:cubic-bezier(0.2,0.7,0.2,1); --t-fast:120ms; --t-med:200ms;

  /* Layout */
  --measure:65ch; --gutter:var(--s-5); --max-w:1200px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--t-base); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- Layout frame ---------- */
.page{ max-width:980px; margin:0 auto; padding:64px 56px 120px; }
.page--narrow{ max-width:720px; }

@media (max-width:680px){
  .page{ padding:40px 24px 80px; }
}

/* ---------- Type ---------- */
h1,.h1{ font-family:var(--font-display); font-size:var(--t-4xl); line-height:1.02; letter-spacing:-0.015em; font-weight:400; margin:0 0 var(--s-5); }
h2,.h2{ font-family:var(--font-display); font-size:var(--t-3xl); line-height:1.05; letter-spacing:-0.01em; font-weight:400; margin:0 0 var(--s-4); }
h3,.h3{ font-family:var(--font-body); font-size:var(--t-xl); line-height:1.2; letter-spacing:-0.005em; font-weight:500; margin:var(--s-6) 0 var(--s-3); }
h4,.h4{ font-family:var(--font-body); font-size:var(--t-lg); line-height:1.3; font-weight:500; margin:var(--s-5) 0 var(--s-2); }
p{ margin:0 0 var(--s-4); }
.lead{ font-size:var(--t-lg); line-height:1.5; max-width:var(--measure); }
small,.small{ font-size:var(--t-sm); line-height:1.45; }
.meta,.label{ font-family:var(--font-mono); font-size:var(--t-mono-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-muted); }
.mono{ font-family:var(--font-mono); }
.serif-italic{ font-family:var(--font-display); font-style:italic; }
em{ font-style:italic; }

a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
   transition:color var(--t-fast) var(--ease); }
a:hover{ color:var(--link-hover); }

hr{ border:0; border-top:var(--b-hair); margin:var(--s-6) 0; }

.dot{ color:var(--ember); display:inline-block; animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ opacity:0.85; text-shadow:0 0 0 var(--ember); }
  50%{ opacity:1; text-shadow:0 0 12px rgba(232,74,42,0.5); }
}

/* ---------- Header ---------- */
.top{
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:24px 56px; border-bottom:var(--b-hair);
}
.top .mark{ font-family:var(--font-display); font-style:italic; font-size:28px; line-height:1; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
.nav{ display:flex; gap:28px; }
.nav-item{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; text-decoration:none; color:var(--fg-muted); }
.nav-item:hover,.nav-item.active{ color:var(--ink); }
@media (max-width:680px){ .top{ padding:18px 24px; flex-direction:column; gap:12px; align-items:flex-start; } .nav{ gap:18px; flex-wrap:wrap; } }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 56px; }
.hero h1{ font-size:clamp(3.5rem, 9vw, var(--t-5xl)); line-height:0.92; letter-spacing:-0.02em; margin:0 0 var(--s-5); max-width:14ch; }
.intro{ font-size:21px; line-height:1.5; max-width:56ch; color:var(--ink); margin:0; }
.intro em{ font-family:var(--font-display); font-size:1.05em; }

/* ---------- Section header (§ NN  Title  ────) ---------- */
.section-head{ display:flex; align-items:center; gap:16px; margin:24px 0 28px; }
.section-head .num{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--fg-muted); }
.section-head h2{ font-family:var(--font-display); font-style:italic; font-size:36px; margin:0; line-height:1; font-weight:400; }
.section-head .rule{ flex:1; height:1px; background:var(--rule); }

/* ---------- Writing list (signature numbered) ---------- */
.writing{ list-style:none; padding:0; margin:0 0 88px; counter-reset:w; border-top:var(--b-hair); }
.writing-item{ border-bottom:var(--b-hair); counter-increment:w; }
.writing-link{
  display:grid; grid-template-columns:56px 1fr auto 24px;
  align-items:baseline; gap:24px; padding:22px 0;
  text-decoration:none; color:var(--ink);
  transition:padding-left var(--t-med) var(--ease);
}
.writing-link:hover{ padding-left:8px; color:var(--ink); }
.w-idx::before{ content:counter(w, decimal-leading-zero); font-family:var(--font-mono); font-size:var(--t-mono-sm); color:var(--fg-faint); }
.w-body{ display:flex; flex-direction:column; gap:6px; }
.w-title{ font-family:var(--font-display); font-size:24px; line-height:1.15; }
.w-excerpt{ font-size:var(--t-sm); color:var(--fg-muted); max-width:60ch; }
.w-tag{ align-self:flex-start; margin-top:2px; }
.w-date{ white-space:nowrap; }
.w-arrow{ color:var(--fg-faint); transition:color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.writing-link:hover .w-arrow{ color:var(--terracotta); transform:translateX(4px); }
@media (max-width:680px){
  .writing-link{ grid-template-columns:32px 1fr; gap:12px; }
  .w-date,.w-arrow{ display:none; }
}

/* ---------- Tag / chip ---------- */
.tag{ font-family:var(--font-mono); font-size:var(--t-mono-xs); text-transform:uppercase; letter-spacing:0.08em; padding:4px 10px; border:var(--b-hair); border-radius:var(--r-pill); color:var(--fg-muted); display:inline-block; text-decoration:none; }
a.tag:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--font-body); font-size:var(--t-sm); font-weight:500; letter-spacing:0.01em; padding:10px 18px; border:var(--b-ink); background:transparent; color:var(--ink); border-radius:var(--r-2); cursor:pointer; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); text-decoration:none; display:inline-flex; align-items:center; gap:var(--s-2); }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--terracotta); border-color:var(--terracotta); }

/* ---------- Card / callout ---------- */
.card{ border:var(--b-hair); background:var(--bg-alt); padding:var(--s-5); border-radius:var(--r-0); }

/* ---------- Rule-label motif ---------- */
.rule-label{ display:flex; align-items:center; gap:var(--s-3); margin:var(--s-7) 0 var(--s-5); }
.rule-label::after{ content:""; flex:1; height:1px; background:var(--rule); }

/* ---------- Archive heads ---------- */
.archive-head{ padding:48px 0 8px; }
.archive-title{ font-size:var(--t-4xl); margin:8px 0 16px; }
.archive-count{ display:block; margin-top:8px; }

/* ============================================================
   Post
   ============================================================ */
.post-head{ padding-top:32px; }
.post-meta{ display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.post-meta .sep{ color:var(--ember); }
.post-title{ font-size:clamp(2.5rem, 6vw, var(--t-4xl)); line-height:1.02; margin:0 0 var(--s-4); }
.post-lead{ color:var(--fg-muted); margin-bottom:0; }
.post-figure{ margin:var(--s-7) 0; }
.post-figure img{ border-radius:var(--r-3); }
.post-figure figcaption{ font-family:var(--font-display); font-style:italic; font-size:var(--t-sm); color:var(--fg-muted); margin-top:var(--s-2); text-align:center; }

/* ---------- Prose body (Koenig output) ---------- */
.post-content{ font-size:var(--t-lg); line-height:1.62; margin-top:var(--s-7); font-variant-numeric:oldstyle-nums; }
.post-content > *{ max-width:var(--measure); }
.post-content p{ margin:0 0 var(--s-5); }
.post-content h2{ font-size:var(--t-3xl); margin:var(--s-8) 0 var(--s-4); }
.post-content h3{ font-size:var(--t-2xl); font-family:var(--font-display); font-weight:400; }
.post-content h4{ font-size:var(--t-xl); }
.post-content a{ text-decoration-color:var(--terracotta); text-decoration-thickness:2px; text-underline-offset:4px; }
.post-content ul,.post-content ol{ padding-left:1.4em; margin:0 0 var(--s-5); }
.post-content li{ margin-bottom:var(--s-2); }
.post-content blockquote{
  margin:var(--s-6) 0; padding:4px 0 4px 24px;
  border-left:3px solid var(--terracotta);
  font-family:var(--font-display); font-style:italic; font-size:1.15em; color:var(--ink);
}
.post-content img{ border-radius:var(--r-3); margin:var(--s-6) auto; }

/* Inline + block code — ink surface, paper text */
.post-content :not(pre) > code{
  font-family:var(--font-mono); font-size:0.85em;
  background:var(--bone); border:var(--b-hair); border-radius:var(--r-1);
  padding:2px 6px; color:var(--ink);
}
.post-content pre{
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:var(--t-sm); line-height:1.55;
  padding:var(--s-5); border-radius:var(--r-3);
  overflow:auto; margin:var(--s-6) 0; max-width:100%;
}
.post-content pre code{ background:none; border:0; padding:0; color:inherit; font-size:inherit; }

/* Koenig cards */
.kg-card{ margin:var(--s-7) 0; max-width:100%; }
.kg-width-wide{ max-width:1040px; margin-left:50%; transform:translateX(-50%); }
.kg-width-full{ max-width:100vw; margin-left:50%; transform:translateX(-50%); }
figure.kg-image-card img,.kg-image-card img{ border-radius:var(--r-3); }
.kg-image-card figcaption,.kg-embed-card figcaption{ font-family:var(--font-display); font-style:italic; font-size:var(--t-sm); color:var(--fg-muted); text-align:center; margin-top:var(--s-2); }
.kg-bookmark-card a{ display:flex; border:var(--b-hair); border-radius:var(--r-3); text-decoration:none; color:var(--ink); overflow:hidden; }
.kg-bookmark-content{ padding:var(--s-5); }
.kg-bookmark-title{ font-family:var(--font-body); font-weight:500; }
.kg-bookmark-description{ color:var(--fg-muted); font-size:var(--t-sm); }
.kg-callout-card{ border-radius:var(--r-2); padding:20px 24px; background:var(--bone); border-left:3px solid var(--terracotta); margin:var(--s-6) 0; }
.kg-callout-card-grey{ border-left-color:var(--gray-400); color:var(--fg-muted); }
.kg-callout-card-red,.kg-callout-card-orange{ border-left-color:var(--ember); }
.kg-toggle-card{ border-bottom:var(--b-hair); padding:var(--s-4) 0; }
.kg-product-card,.kg-header-card{ border-radius:var(--r-3); }

/* ---------- Post foot ---------- */
.post-foot{ margin-top:var(--s-8); }
.post-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s-6); }
.post-author{ display:flex; gap:16px; align-items:center; padding-top:var(--s-5); border-top:var(--b-hair); }
.author-img{ width:48px; height:48px; border-radius:var(--r-pill); object-fit:cover; }
.author-text{ display:flex; flex-direction:column; gap:2px; }
.author-name{ font-weight:500; }
.author-bio{ font-size:var(--t-sm); color:var(--fg-muted); }

/* ---------- Subscribe ---------- */
.subscribe{ background:var(--ink); color:var(--paper); margin-top:var(--s-9); }
.subscribe .page{ padding-top:64px; padding-bottom:64px; }
.subscribe-card{ background:transparent; border:0; padding:0; color:var(--paper); }
.subscribe-card .meta{ color:var(--gray-300); }
.subscribe-card h3{ font-family:var(--font-display); font-size:var(--t-3xl); font-weight:400; color:var(--paper); margin:8px 0 12px; }
.subscribe-card p{ color:var(--gray-200); max-width:48ch; }
.subscribe-card .btn--primary{ background:var(--paper); color:var(--ink); border-color:var(--paper); margin-top:8px; }
.subscribe-card .btn--primary:hover{ background:var(--terracotta); color:var(--paper); border-color:var(--terracotta); }

/* ---------- Comments ---------- */
.comments .page{ padding-top:0; }

/* ---------- Error ---------- */
.error-page{ text-align:left; padding-top:120px; }
.error-code{ font-size:var(--t-5xl); margin:8px 0 16px; }

/* ---------- Footer ---------- */
.site-foot{ border-top:var(--b-hair); }
.foot-inner{ max-width:var(--max-w); margin:0 auto; padding:32px 56px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-meta{ font-family:var(--font-mono); font-size:var(--t-mono-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-muted); display:flex; gap:10px; flex-wrap:wrap; }
.foot-meta .sep{ color:var(--ember); }
.foot-nav{ display:flex; gap:20px; }
.foot-nav .nav-item{ font-size:11px; }
@media (max-width:680px){ .foot-inner{ padding:24px; } }

/* ---------- Ghost pagination ---------- */
.pagination{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:var(--t-mono-sm); text-transform:uppercase; letter-spacing:0.1em; }
.pagination a{ text-decoration:none; color:var(--ink); }
.pagination a:hover{ color:var(--terracotta); }
.pagination .page-number{ color:var(--fg-muted); }