/* ─────────────────────────────────────────────────────────────────────────
   sandigarimella.com

   The type, scale, rules and surfaces here come from the Sandi OS
   architecture page (SandiOS `docs/architecture.html`). Editorial rather
   than terminal: serif prose, sans headings, mono reserved for labels and
   data. Light is the base theme and dark is the override, because the
   palette was drawn on paper first.

   Written down in `docs/design-system.md`. Read that before changing a
   token — several values here are load-bearing for the generated OG cards
   and favicon.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Palette ──────────────────────────────────────────────────────────────
   Both accents are defined, always. `--accent` selects one.

   REVERTING TO AMBER: change the two `--accent` / `--accent-soft` lines in
   each of the three theme blocks below to the `--amber*` variables, then
   run `python3 scripts/og.py` and `python3 scripts/favicon.py` with
   ACCENT switched in og.py. Nothing else refers to a colour directly.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Accent options — not applied, selected below. */
  --green:        #1f4d3f;
  --green-soft:   #e2ebe5;
  --amber:        oklch(62% 0.14 62);
  --amber-soft:   oklch(62% 0.14 62 / 0.13);

  /* ↓ the switch */
  --accent:       var(--green);
  --accent-soft:  var(--green-soft);

  --bg:           #f4f5f2;
  --surface:      #fcfcfa;
  --surface-2:    #eaece5;
  --text:         #1a1f1c;
  --muted:        #5e665f;
  --faint:        #697169;
  --rule:         #d6d9d1;
  --rule-strong:  #b9bfb5;
  --warn:         #9a3b22;
  --warn-soft:    #f2e4de;
  --info:         #35566b;
  --info-soft:    #e0e8ec;

  /* Scale. Root stays at the browser default 16px; every size is derived. */
  --measure:  66ch;
  --step--1:  .8125rem;
  --step-0:   1.0625rem;
  --step-1:   1.25rem;
  --step-2:   1.5rem;
  --step-3:   2rem;
  --step-4:   2.75rem;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* System dark, unless the reader has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green:       #6fbf9d;
    --green-soft:  #1c2a24;
    --amber:       oklch(75% 0.18 60);
    --amber-soft:  oklch(75% 0.18 60 / 0.15);

    --accent:      var(--green);
    --accent-soft: var(--green-soft);

    --bg:          #141614;
    --surface:     #1b1e1b;
    --surface-2:   #232722;
    --text:        #e8eae4;
    --muted:       #98a096;
    --faint:       #7f877e;
    --rule:        #2e332d;
    --rule-strong: #414739;
    --warn:        #e08260;
    --warn-soft:   #2b1f1a;
    --info:        #7fb0c9;
    --info-soft:   #1a2429;
  }
}

/* Explicit dark, stated last so the toggle wins in both directions. */
:root[data-theme="dark"] {
  --green:       #6fbf9d;
  --green-soft:  #1c2a24;
  --amber:       oklch(75% 0.18 60);
  --amber-soft:  oklch(75% 0.18 60 / 0.15);

  --accent:      var(--green);
  --accent-soft: var(--green-soft);

  --bg:          #141614;
  --surface:     #1b1e1b;
  --surface-2:   #232722;
  --text:        #e8eae4;
  --muted:       #98a096;
  --faint:       #7f877e;
  --rule:        #2e332d;
  --rule-strong: #414739;
  --warn:        #e08260;
  --warn-soft:   #2b1f1a;
  --info:        #7fb0c9;
  --info-soft:   #1a2429;
}

/* ── Base ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.62;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  text-wrap: balance;
}

code, kbd, pre, .mono { font-family: var(--mono); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Nav ── */

.site-header { border-bottom: 1px solid var(--rule); }

nav.site-nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.75rem 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.site-name {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--text);
  text-decoration: none;
  letter-spacing: .02em;
}

.site-name:hover { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  align-items: baseline;
  flex-wrap: wrap;
}

.nav-links a {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text); }

/* Theme toggle. Shaped like the fact chips on the architecture page so it
   reads as part of the furniture rather than a control bolted on. */
.theme-toggle {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .3rem .55rem;
  cursor: pointer;
  line-height: 1;
  transition: color 120ms, border-color 120ms;
}

.theme-toggle:hover { color: var(--text); border-color: var(--rule-strong); }

/* No flash: theme.js sets this before paint, so the label is never wrong.
   Both labels ship; CSS picks. */
.theme-toggle .lbl-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .lbl-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .lbl-light { display: none; }
}
:root[data-theme="dark"] .theme-toggle .lbl-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .lbl-light { display: none; }
:root[data-theme="light"] .theme-toggle .lbl-dark { display: none; }
:root[data-theme="light"] .theme-toggle .lbl-light { display: inline; }

/* ── Page layouts ── */

.page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.page-wrap-narrow {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 6rem;
}

/* ── Masthead (home) ──
   The architecture page's opening: mono eyebrow, large serif-scale headline
   in the sans face, lede in muted, then a rule. It replaced a canvas of
   falling glyphs, which never survived contact with a paper background. */

.intro {
  padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.intro-name {
  font-size: clamp(2rem, 5.5vw, var(--step-4));
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}

.intro-desc {
  font-size: clamp(1.0625rem, 2.4vw, var(--step-1));
  line-height: 1.5;
  color: var(--muted);
  max-width: 54ch;
}

/* ── Section labels ── */

.page-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

/* ── Post list ── */

.post-list { list-style: none; }

.post-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.post-item:first-child { border-top: 1px solid var(--rule); }

/* A heading that already closes with a rule, followed by a list that opens
   with one, renders as an empty row rather than a separator. Whichever
   comes second gives way. */
:is(.intro, .page-label) + :is(.post-list, .projects-list) > li:first-child {
  border-top: none;
}

.post-meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--faint);
  margin-bottom: .5rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.tag {
  font-size: .6875rem;
  letter-spacing: .04em;
  padding: .12rem .4rem;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

/* One hue per stream, all quiet enough to sit inside a paragraph of prose. */
.tag.tech   { background: var(--accent-soft); color: var(--accent); }
.tag.travel { background: var(--info-soft);   color: var(--info); }
.tag.dad    { background: var(--warn-soft);   color: var(--warn); }

.post-title {
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.01em;
  margin-bottom: .4rem;
  max-width: 34ch;
}

.post-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 120ms;
}

.post-title a:hover { color: var(--accent); }

.post-desc {
  color: var(--muted);
  line-height: 1.55;
  max-width: 62ch;
}

/* ── Sidebar ── */

.sidebar {
  position: sticky;
  top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--sans);
  min-width: 0;
}

.sidebar-block {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.sidebar-label {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--faint);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

.sidebar-about p {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.55;
}

.sidebar-about a {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  margin-top: .6rem;
}

.sidebar-about a:hover { text-decoration: underline; }

/* Series list — the architecture page's contents rail: a hairline on the
   left that darkens on hover, not a bullet. */
.series-list { list-style: none; display: flex; flex-direction: column; gap: .1rem; }

.series-list li {
  font-size: var(--step--1);
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .3rem 0 .3rem .75rem;
  border-left: 2px solid var(--rule);
  line-height: 1.35;
}

.series-list li:has(.current) { border-left-color: var(--accent); }

.series-list .part-num {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--faint);
  flex-shrink: 0;
}

.series-list a { color: var(--muted); text-decoration: none; }
.series-list a:hover { color: var(--text); }
.series-list .current { color: var(--text); font-weight: 500; }

/* Recent list */
.recent-list { list-style: none; display: flex; flex-direction: column; gap: .95rem; }

.recent-item-date {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--faint);
  display: block;
  margin-bottom: .15rem;
  font-variant-numeric: tabular-nums;
}

.recent-item-title {
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
  transition: color 120ms;
}

.recent-item-title:hover { color: var(--text); }

/* Listening list */
.listening-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }

.listening-item { display: flex; flex-direction: column; gap: .2rem; }

.listening-title {
  font-size: var(--step--1);
  color: var(--text);
  line-height: 1.35;
  text-decoration: none;
  font-weight: 500;
}

a.listening-title:hover { color: var(--accent); }

.listening-type {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--faint);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.listening-desc { font-size: var(--step--1); color: var(--muted); line-height: 1.45; }

/* ── Article ── */

article { min-width: 0; }

.article-series {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .75rem;
}

.article-meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--faint);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
  font-variant-numeric: tabular-nums;
}

/* ── Prose ── */

.prose p, .prose ul, .prose ol { max-width: var(--measure); }
.prose p { margin-bottom: 1.1rem; }

.prose h1 {
  font-size: clamp(2rem, 5vw, var(--step-4));
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}

.prose h2 {
  font-size: clamp(1.5rem, 3.4vw, var(--step-3));
  line-height: 1.15;
  letter-spacing: -.018em;
  margin: 3.25rem 0 1rem;
  max-width: 22ch;
}

.prose h3 {
  font-size: var(--step-1);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .75rem;
  max-width: 34ch;
}

.prose h4 {
  font-size: var(--step-0);
  margin: 1.75rem 0 .5rem;
  letter-spacing: -.005em;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.75rem 0;
  max-width: var(--measure);
}

.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.prose a:hover { text-decoration: none; }
.prose strong { font-weight: 500; color: var(--text); }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: 1.1rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--faint); }

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: .15rem 0 .15rem 1.25rem;
  margin: 2rem 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
  font-style: normal;
}

.prose blockquote p { margin-bottom: 0; max-width: none; }

.prose code {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--surface-2);
  color: var(--text);
  padding: .1em .35em;
  border-radius: 2px;
}

.prose pre {
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  color: var(--text);
}

.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* ── Series nav (article footer) ── */

.series-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  gap: 2rem;
  font-family: var(--sans);
}

.series-nav-item { max-width: 46%; }
.series-nav-item.next { text-align: right; margin-left: auto; }

.series-nav-label {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--faint);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .35rem;
}

.series-nav-title {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  line-height: 1.35;
}

.series-nav-title:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ── About page ── */

.about-prose { max-width: var(--measure); }
.about-prose p { margin-bottom: 1.1rem; }
.about-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.about-prose a:hover { text-decoration: none; }

.links-row {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.links-row a {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .3rem .6rem;
  background: var(--surface);
  transition: color 120ms, border-color 120ms;
}

.links-row a:hover { color: var(--text); border-color: var(--rule-strong); }

/* ── Projects page ── */

.projects-list { list-style: none; }

.project-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 2rem;
  align-items: start;
}

.project-item:first-child { border-top: 1px solid var(--rule); }

.project-name {
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .25rem;
}

.project-desc { color: var(--muted); line-height: 1.55; max-width: 62ch; }

.project-links {
  display: flex;
  gap: 1.1rem;
  margin-top: .6rem;
}
.project-links a {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--accent);
  text-decoration: none;
}
.project-links a:hover { text-decoration: underline; }

.project-stack {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--faint);
  text-align: right;
  white-space: nowrap;
}

.project-status {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}

/* ── Standalone prose page (privacy, 404) ── */

.prose-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 6rem;
}

.prose-page h1 {
  font-size: clamp(1.75rem, 4.5vw, var(--step-3));
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
  max-width: 22ch;
}

.prose-page .page-meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--faint);
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.prose-page h2 {
  font-size: var(--step-1);
  margin: 2.5rem 0 .75rem;
  letter-spacing: -.01em;
  max-width: 34ch;
}

.prose-page p {
  margin-bottom: 1.1rem;
  color: var(--muted);
  line-height: 1.62;
  max-width: var(--measure);
}

.prose-page a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }

/* ── Footer ── */

footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--muted);
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ── Photos stub ── */

.coming-soon {
  text-align: center;
  padding: 6rem 0;
  color: var(--muted);
}

.coming-soon-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

.coming-soon p { line-height: 1.6; max-width: 42ch; margin: 0 auto; }

.photo-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--step--1);
}

.photo-links a { color: var(--accent); text-decoration: none; }
.photo-links a:hover { text-decoration: underline; }

/* ── Prose media ──
   No post had an image until agent-org, so nothing constrained one: a wide
   screenshot escaped the column and overlapped the sidebar. ── */

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.25rem auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.prose img + em {
  display: block;
  margin: -1.25rem 0 2.25rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

/* ── Prose tables ──
   Markdown tables rendered as bare rows with no cell padding or rules.
   Wide ones scroll inside their own box rather than pushing the page. ── */

.prose table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  padding: .55rem .8rem .55rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  border-bottom: 1px solid var(--rule);
}

.prose th {
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule-strong);
  white-space: nowrap;
}

.prose tbody tr:last-child td { border-bottom: none; }

/* ── Mobile ── */

@media (max-width: 900px) {
  .page-wrap { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .sidebar { position: static; }
  .series-nav { flex-direction: column; gap: 1.5rem; }
  .series-nav-item { max-width: none; }
  .series-nav-item.next { text-align: left; margin-left: 0; }
  .project-item { grid-template-columns: minmax(0, 1fr); }
  .project-stack, .project-status { text-align: left; }
  .prose img { margin: 1.75rem auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}