/* ==========================================================================
   SETPOINT — site styles  ·  "Field Notes" identity
   Hand-built for MGNaik.github.io. Tokens ported from the SETPOINT design
   system; components rebuilt for a plain Jekyll site (no theme).
   ========================================================================== */

/* ---- Webfonts ------------------------------------------------------------ */
@font-face { font-family:"Space Grotesk"; src:url("/assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/Inter-Variable.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Mono"; src:url("/assets/fonts/SpaceMono-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Mono"; src:url("/assets/fonts/SpaceMono-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --paper:#F7F4EC; --paper-dim:#F1EEE4; --surface:#FFFFFF; --surface-2:#FBFAF5; --ink-block:#211E18;
  --ink:#2A2620; --ink-muted:#6B655A; --ink-faint:#9A9488; --ink-on-dark:#F2F0E9; --ink-on-lime:#1C2B06;
  --line:#EFEADF; --line-strong:#E2DCCE;
  --lime:#84CC16; --lime-strong:#74B814; --lime-bright:#C8F169; --lime-soft:#E4F7BD; --lime-deep:#4A7A0A;
  --success:#4E8C2E; --warning:#C8860D; --danger:#CB4A3E; --info:#3C6E8F;
  --code-bg:#211E18; --code-text:#EDEAE0; --code-comment:#8A8472; --code-keyword:#C8F169; --code-string:#E8B864; --code-fn:#9CC4E4; --code-num:#E0936A;

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:"Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  --gutter:1.5rem; --max-width:1080px; --measure:42rem;
  --radius-xs:6px; --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(42,38,32,.06);
  --shadow-sm:0 4px 14px -8px rgba(42,38,32,.22);
  --shadow:0 6px 20px -10px rgba(42,38,32,.28);
  --shadow-lg:0 18px 44px -18px rgba(42,38,32,.34);
  --ease:cubic-bezier(.2,0,0,1);
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--lime-deep); text-decoration:none; transition:color .15s var(--ease); }
a:hover{ color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
::selection{ background:var(--lime-bright); color:var(--ink-on-lime); }

.shell{ width:100%; max-width:var(--max-width); margin:0 auto; padding:1.5rem var(--gutter) 4rem; }
.main{ min-height:60vh; }

/* ---- Masthead (island) --------------------------------------------------- */
.masthead{ padding:var(--gutter) var(--gutter) 0.5rem; }
.masthead__inner{
  max-width:var(--max-width); margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:0.7rem 1.1rem;
  display:flex; align-items:center; gap:1.25rem;
}
.wordmark-link{ display:flex; align-items:baseline; gap:0.65rem; margin-right:auto; text-decoration:none; }
.wordmark{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:-0.01em; color:var(--ink); }
.wordmark::after{ content:"."; color:var(--lime); }
.tagline{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-faint); letter-spacing:0.03em; }
.nav{ display:flex; align-items:center; gap:1.1rem; }
.nav__link{ font-size:0.9rem; font-weight:500; color:var(--ink-muted); padding-bottom:2px; border-bottom:2px solid transparent; }
.nav__link:hover{ color:var(--ink); }
.nav__link.is-active{ color:var(--ink); border-bottom-color:var(--lime); }
.nav__search{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; background:var(--paper-dim); border-radius:var(--radius-sm); color:var(--ink); font-size:0.85rem; }
.nav__search:hover{ color:var(--ink); background:var(--lime-soft); }
@media (max-width:600px){ .tagline{ display:none; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero{ padding:2.5rem 0.5rem 2.75rem; max-width:32ch; }
.hero__eyebrow{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--lime-deep); margin:0 0 1.1rem; display:flex; align-items:center; gap:0.6rem; }
.hero__dot{ width:9px; height:9px; background:var(--lime); border-radius:2px; display:inline-block; }
.hero__title{ font-size:2.5rem; line-height:1.08; letter-spacing:-0.02em; margin:0 0 1.1rem; text-wrap:pretty; }
.hero__lede{ font-size:1.0625rem; line-height:1.75; color:var(--ink-muted); margin:0; }
.mark{ background:linear-gradient(transparent 58%, var(--lime-bright) 58%); padding:0 3px; }

/* ---- Section head -------------------------------------------------------- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 0.5rem 1.25rem; }
.section-head__label{ font-family:var(--font-mono); margin:0; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.section-head__link{ font-size:0.85rem; color:var(--lime-deep); font-weight:500; }

/* ---- Page head (archives) ------------------------------------------------ */
.page-head{ padding:2.5rem 0.5rem 2rem; }
.page-head__title{ font-size:1.9375rem; line-height:1.18; margin:0 0 0.4rem; }
.page-head__sub{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin:0; }

/* ---- Cards --------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.1rem; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.5rem; display:flex; flex-direction:column; transition:box-shadow .15s var(--ease), transform .15s var(--ease); }
.card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.card__link{ color:inherit; display:flex; flex-direction:column; flex:1; }
.card__link:hover{ color:inherit; }
.card__meta{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.8rem; }
.dotsep{ color:var(--line-strong); margin:0 0.25rem; }
.card__title{ font-size:1.25rem; line-height:1.25; margin:0 0 0.6rem; }
.card:hover .card__title{ color:var(--ink); }
.card__excerpt{ margin:0 0 1.1rem; line-height:1.6; color:var(--ink-muted); font-size:0.9rem; flex:1; }

/* ---- Tags ---------------------------------------------------------------- */
.tags{ display:flex; gap:0.45rem; flex-wrap:wrap; }
.tag{ font-size:0.78rem; font-weight:500; padding:0.22rem 0.6rem; border-radius:var(--radius-pill); background:var(--paper-dim); color:var(--ink-muted); border:1px solid transparent; transition:all .12s var(--ease); }
.tag:hover{ background:var(--lime-soft); color:var(--lime-deep); }
.tag.is-active{ background:var(--lime); color:var(--ink-on-lime); }
.tag__count{ opacity:.6; margin-left:0.25rem; }

/* ---- Pagination ---------------------------------------------------------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:2.5rem 0 0; font-size:0.9rem; }
.pagination a{ font-weight:500; }
.pagination__count{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- Article ------------------------------------------------------------- */
.article-wrap{ width:100%; max-width:820px; margin:0 auto; padding:2rem var(--gutter) 4rem; }
.back-link{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-muted); margin-bottom:1.6rem; }
.article{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:2.75rem clamp(1.5rem,5vw,3.5rem); }
.post-meta{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem; }
.post-title{ font-size:2.5rem; line-height:1.08; letter-spacing:-0.02em; margin:0 0 1rem; text-wrap:pretty; }
.article .tags{ margin-bottom:2.25rem; }

/* ---- Prose --------------------------------------------------------------- */
.prose{ font-size:1.02rem; line-height:1.75; color:var(--ink); }
.prose > p{ margin:0 0 1.3rem; }
.prose h2{ font-size:1.5rem; margin:2.4rem 0 0.9rem; }
.prose h3{ font-size:1.25rem; margin:2rem 0 0.8rem; }
.prose a{ text-decoration:underline; text-decoration-color:var(--lime); text-underline-offset:2px; }
.prose ul,.prose ol{ margin:0 0 1.3rem; padding-left:1.4rem; }
.prose li{ margin:0.35rem 0; }
.prose img{ border-radius:var(--radius); box-shadow:var(--shadow-sm); margin:1.6rem 0; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:2.4rem 0; }
.prose code{ font-family:var(--font-mono); font-size:0.85em; background:var(--paper-dim); padding:0.12em 0.4em; border-radius:var(--radius-xs); color:var(--lime-deep); }
.prose blockquote{ border-left:3px solid var(--lime); margin:0 0 1.3rem; padding:0.3rem 0 0.3rem 1.2rem; color:var(--ink-muted); font-style:italic; line-height:1.7; }
.prose blockquote p{ margin:0 0 0.6rem; }
.prose blockquote p:last-child{ margin:0; }
.prose blockquote strong{ font-style:normal; }

/* code blocks (Rouge) */
.prose pre,.highlight,.prose blockquote pre{ background:var(--code-bg); border-radius:var(--radius); padding:1.1rem 1.3rem; overflow:auto; margin:0 0 1.3rem; }
.prose pre code,.highlight code{ background:none; padding:0; color:var(--code-text); font-size:0.85rem; line-height:1.65; }
.prose blockquote pre{ margin:0.6rem 0; }
.highlight .c,.highlight .c1,.highlight .cm{ color:var(--code-comment); font-style:italic; }
.highlight .k,.highlight .kn,.highlight .kd,.highlight .kc,.highlight .ow{ color:var(--code-keyword); }
.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .se{ color:var(--code-string); }
.highlight .nf,.highlight .nc,.highlight .nb{ color:var(--code-fn); }
.highlight .mi,.highlight .mf,.highlight .il{ color:var(--code-num); }
.highlight .nn,.highlight .n,.highlight .o,.highlight .p{ color:var(--code-text); }

/* ---- Callout (from Markdown blockquotes starting with a label is optional) */
.callout{ border-left:4px solid var(--lime); background:rgba(132,204,22,.10); border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:0 0 1.6rem; }
.callout__title{ font-weight:700; color:var(--lime-deep); margin:0 0 0.3rem; }

/* ---- Author profile ------------------------------------------------------ */
.author{ display:flex; gap:1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.5rem; margin-top:1.6rem; }
.author__avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line); }
.author__name{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; }
.author__bio{ margin:0.3rem 0 0.7rem; color:var(--ink-muted); font-size:0.9rem; line-height:1.6; }
.author__links{ display:flex; gap:1rem; flex-wrap:wrap; }
.author__links a{ font-size:0.85rem; font-weight:500; color:var(--ink-muted); }
.author__links a:hover{ color:var(--lime-deep); }

/* ---- Archives (tags / categories) --------------------------------------- */
.archive-group{ margin-bottom:2.5rem; }
.archive-group__head{ display:flex; align-items:baseline; gap:0.6rem; padding-bottom:0.8rem; border-bottom:1px solid var(--line); margin-bottom:1rem; scroll-margin-top:90px; }
.archive-group__name{ font-family:var(--font-display); font-size:1.25rem; margin:0; }
.archive-group__count{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.archive-list{ list-style:none; margin:0; padding:0; }
.archive-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:0.55rem 0; border-bottom:1px solid var(--line); }
.archive-list a{ color:var(--ink); font-weight:500; }
.archive-list a:hover{ color:var(--lime-deep); }
.archive-list time{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); white-space:nowrap; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:0.5rem; padding:0 0.5rem 2rem; }

/* ---- Search -------------------------------------------------------------- */
.search-field{ position:relative; margin:0 0.5rem 2rem; }
.search-field i{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
#search-input{ width:100%; font-family:var(--font-sans); font-size:1.0625rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:0.85rem 1rem 0.85rem 2.6rem; outline:none; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
#search-input:focus{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(132,204,22,.25); }
.search-status{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); padding:0 0.5rem 1rem; }

/* ---- Footer -------------------------------------------------------------- */
.footer{ border-top:1px solid var(--line); }
.footer__inner{ max-width:var(--max-width); margin:0 auto; padding:2rem var(--gutter); display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.footer__brand{ font-family:var(--font-display); font-weight:700; color:var(--ink); }
.footer__brand .dot{ color:var(--lime); }
.footer__links{ display:flex; gap:1.1rem; margin-right:auto; }
.footer__links a{ font-size:0.85rem; color:var(--ink-muted); }
.footer__links a:hover{ color:var(--lime-deep); }
.footer__copy{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- Simple page (404 etc.) --------------------------------------------- */
.simple{ max-width:var(--measure); margin:0 auto; padding:4rem var(--gutter); }
.simple h1{ font-size:2rem; margin:0 0 1rem; }