/* Sam's Thoughts: site styles on top of tokens.css + bundle.css.
   Olive (writing-accent) leads here; terracotta stays for focus rings only. */

/* ---------- Ground ---------- */
html { background: var(--writing-bg); }
.st-site { background: var(--writing-bg); min-height: 100vh; display: flex; flex-direction: column; }
.st-site main { flex: 1 0 auto; }
.st-site a { color: var(--writing-accent); }
.st-site a:hover { color: var(--ink); }
.st-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.st-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 10; padding: 10px 16px; background: var(--btn-bg); border-radius: var(--radius-pill); }
.st-site a.st-skip { color: var(--btn-ink); }
.st-skip:focus { top: var(--space-4); }

/* ---------- Nav ---------- */
.st-nav { background: var(--writing-bg); border-bottom-color: var(--writing-line); }
.st-site .sws-nav__links a:hover,
.st-site .sws-nav__links a[aria-current="page"] { color: var(--writing-accent); }

/* ---------- Hero ---------- */
.st-hero { padding-top: var(--space-16); padding-bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.st-hero .sws-label { color: var(--writing-accent); }
.st-hero__title { margin: 0; font-size: clamp(44px, 6vw, 72px); }
.st-hero__lead { margin-top: var(--space-1); }
.st-key { max-width: var(--measure); font-size: 15px; color: var(--ink-muted); margin-top: var(--space-2); }
.st-key summary { cursor: pointer; width: fit-content; color: var(--writing-accent); font-weight: 600; font-size: 14px; padding: 6px 0; }
.st-key summary:hover { color: var(--ink); }
.st-key p { margin: var(--space-2) 0; }
.st-key__types { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.st-key b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Controls ---------- */
.st-index { padding-bottom: var(--space-12); }
.st-controls { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) 0 var(--space-4); }
.st-controls__row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.st-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-subtle); }
.st-field--search { flex: 1 1 280px; max-width: 30rem; }
.st-field input, .st-field select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: var(--rule) solid var(--writing-line); border-radius: var(--radius-pill);
  min-height: 44px; box-sizing: border-box; padding: 0 16px;
}
.st-field input { width: 100%; }
.st-field select { padding-right: 36px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.st-field input:hover, .st-field select:hover { border-color: var(--ink-subtle); }
.st-field input::placeholder { color: var(--ink-subtle); }
.st-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.st-chips__label { font-size: 14px; color: var(--ink-subtle); min-width: 3.5rem; }
.st-site .st-chips .sws-tag { background: var(--surface); border: var(--rule) solid var(--writing-line); padding: 5px 13px; min-height: 32px; }
.st-site .st-chips .sws-tag:hover { border-color: var(--ink-subtle); }
.st-site .st-chips .sws-tag[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.st-count { margin: 0; font-size: 14px; color: var(--ink-subtle); display: flex; gap: var(--space-4); align-items: baseline; }
.st-linkbtn { font: inherit; font-size: 14px; font-weight: 600; color: var(--writing-accent); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.st-linkbtn:hover { color: var(--ink); }

/* ---------- Table ---------- */
.st-table { width: 100%; border-collapse: collapse; border-top: var(--rule-strong) solid var(--ink); font-variant-numeric: tabular-nums; }
.st-table th { text-align: left; padding: 10px var(--space-4) 10px 0; border-bottom: var(--rule) solid var(--writing-line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.st-table th:last-child, .st-table td:last-child { padding-right: 0; text-align: right; }
.st-table th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.st-table th button:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.st-table th button:hover { color: var(--ink); }
.st-table th button::after { content: "↕"; opacity: 0.35; letter-spacing: 0; }
.st-table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.st-table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.st-table th[aria-sort] { color: var(--ink); }
.st-table td { padding: 20px var(--space-4) 20px 0; border-bottom: var(--rule) solid var(--writing-line); vertical-align: baseline; font-size: 14px; color: var(--ink-subtle); }
.st-c-id { width: 5.5rem; white-space: nowrap; }
td.st-c-id { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.02em; }
.st-c-type { width: 7rem; }
.st-c-coll { width: 10rem; }
.st-c-date { width: 7.5rem; white-space: nowrap; }
.st-site a.st-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.st-site a.st-title:hover { color: var(--writing-accent); text-decoration: underline; text-decoration-thickness: 1px; }
.st-summary { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 40rem; }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.st-tags .sws-tag { font-size: 12px; padding: 3px 10px; background: var(--surface); }
.st-site .st-tags a.sws-tag { color: var(--ink); }
.st-site .st-tags a.sws-tag:hover { background: var(--ink); color: var(--bg); }
.st-table tr.is-current td { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.st-nomatch { padding: var(--space-6) 0; color: var(--ink-muted); }

/* Phones: each row becomes a stacked entry */
@media (max-width: 760px) {
  .st-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-table, .st-table tbody { display: block; }
  .st-table tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px var(--space-3); padding: 18px 0; border-bottom: var(--rule) solid var(--writing-line); }
  .st-table td { display: block; padding: 0; border: 0; width: auto; }
  .st-table td:last-child { text-align: right; }
  td.st-c-id { grid-column: 1; grid-row: 1; }
  td.st-c-type { grid-column: 2; grid-row: 1; }
  td.st-c-date { grid-column: 3; grid-row: 1; }
  td.st-c-main { grid-column: 1 / -1; grid-row: 2; padding-top: 4px; }
  td.st-c-coll { display: none; }
  .st-site a.st-title { font-size: 21px; }
}

/* ---------- Empty state ---------- */
.st-empty { border-top: var(--rule-strong) solid var(--ink); padding: var(--space-8) 0 var(--space-4); max-width: var(--measure); }
.st-empty__title { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 26px; line-height: 1.25; }
.st-empty__text { margin: 0; color: var(--ink-muted); font-size: 16px; }

/* ---------- Collections ---------- */
.st-collections { padding-bottom: var(--space-16); }
.st-collections .sws-group { border-top: var(--rule) solid var(--writing-line); padding-top: var(--space-12); }
.st-collections .sws-group__head .sws-label { color: var(--writing-accent); margin: 0; }
.st-collections .sws-group__note { margin: 0; }
.st-collections .sws-row { border-bottom-color: var(--writing-line); }
.st-site .st-collections a.sws-row:hover .sws-row__title { color: var(--writing-accent); }
.st-collections .sws-row__arrow { color: var(--writing-accent); }

/* ---------- Article (page and reader) ---------- */
.st-id { text-transform: none; letter-spacing: 0.04em; }
.st-site [tabindex="-1"]:focus { box-shadow: none; outline: none; }
.st-reader__body .st-article__label { display: none; }
.st-post { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.st-back { margin: 0 0 var(--space-12); font-size: 15px; }
.st-site .st-back a { text-decoration: none; font-weight: 600; }
.st-article { max-width: var(--measure); margin: 0 auto; }
.st-article__label { margin: 0 0 var(--space-3); color: var(--writing-accent); }
.st-article__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.st-article__meta { margin: var(--space-4) 0 var(--space-8); padding-bottom: var(--space-6); border-bottom: var(--rule) solid var(--writing-line); font-size: 14px; color: var(--ink-subtle); }
.st-article__foot { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--rule) solid var(--writing-line); display: flex; flex-direction: column; gap: var(--space-4); }
.st-article__foot .st-tags { margin: 0; }
.st-article__foot:not(:has(*)) { display: none; }
.st-article__substack { margin: 0; font-size: 15px; font-weight: 600; }

.st-prose { color: var(--ink); }
.st-prose > :first-child { margin-top: 0; }
.st-prose p { margin: 0 0 1.1em; }
.st-prose h2 { font-family: var(--font-serif); font-weight: 500; font-size: 27px; line-height: 1.2; margin: 1.8em 0 0.6em; }
.st-prose h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 1.6em 0 0.5em; }
.st-prose h4 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; margin: 1.6em 0 0.4em; }
.st-prose a { text-decoration-thickness: 1px; }
.st-prose blockquote { margin: 1.4em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--olive); color: var(--ink-muted); font-style: italic; }
.st-prose hr { border: 0; height: 2px; width: 56px; margin: 2.4em auto; background: var(--olive); border-radius: 2px; }
.st-prose ul, .st-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.st-prose li { margin: 0.3em 0; }
.st-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 1.6em 0 0.6em; }
.st-prose figure { margin: 1.6em 0; }
.st-prose figcaption, .st-prose img + em { display: block; font-family: var(--font-sans); font-size: 14px; font-style: normal; color: var(--ink-subtle); }
.st-prose code { font-size: 0.85em; background: var(--surface-sunk); padding: 0.1em 0.35em; border-radius: 4px; }
.st-prose pre { background: var(--surface); border: var(--rule) solid var(--writing-line); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; font-size: 15px; line-height: 1.5; }
.st-prose pre code { background: none; padding: 0; }
.st-prose table { border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; margin: 1.4em 0; }
.st-prose th, .st-prose td { border-bottom: var(--rule) solid var(--writing-line); padding: 8px 12px 8px 0; text-align: left; }
.st-prose iframe { max-width: 100%; border: 0; border-radius: var(--radius-sm); }
.st-prose--expression p { margin-bottom: 1.4em; }

/* Older / newer */
.st-pager { max-width: var(--measure); margin: var(--space-12) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.st-pager__link { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) 0; border-top: var(--rule-strong) solid var(--ink); text-decoration: none; }
.st-pager__link--prev { text-align: right; }
.st-pager__dir { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.st-pager__title { font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--ink); }
.st-pager__link:hover .st-pager__title { color: var(--writing-accent); }

/* ---------- Reader (pop-out panel) ---------- */
.st-reader {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(48rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: var(--rule) solid var(--writing-line);
  background: var(--bg); color: var(--ink); overflow: hidden;
}
.st-reader[open] { display: flex; flex-direction: column; animation: st-slide 0.22s ease-out; }
.st-reader::backdrop { background: rgb(18 27 36 / 0.42); }
@keyframes st-slide { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .st-reader[open] { animation: none; } }
html:has(.st-reader[open]) { overflow: hidden; }
.st-reader__bar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: 12px var(--space-6) 12px var(--space-8); border-bottom: var(--rule) solid var(--line); background: var(--bg); }
.st-reader__label { color: var(--writing-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-reader__actions { display: flex; align-items: center; gap: var(--space-1); }
.st-iconbtn { font: inherit; font-size: 18px; line-height: 1; color: var(--ink); background: none; border: 0; border-radius: var(--radius-pill);
  width: 44px; height: 44px; display: inline-grid; place-items: center; cursor: pointer; }
.st-iconbtn:hover { background: var(--surface-sunk); }
.st-iconbtn:disabled { opacity: 0.3; cursor: default; background: none; }
.st-iconbtn--close { font-size: 26px; }
.st-site a.st-reader__page { font-size: 14px; font-weight: 600; padding: 0 var(--space-3); white-space: nowrap; }
.st-reader__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-12) var(--space-8) var(--space-16); outline: none; }
.st-reader__body .st-article { margin: 0; }
.st-reader__loading { color: var(--ink-subtle); font-size: 15px; }

/* ---------- 404 ---------- */
.st-404 { padding-top: var(--space-16); padding-bottom: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.st-404 p { margin: 0; }
.st-site a.sws-btn--writing { color: var(--on-writing-accent); }
.st-site a.sws-btn--writing:hover { background: var(--ink); color: var(--bg); }

/* ---------- Footer ---------- */
.st-footer { margin-top: auto; }
.st-footer__inner { padding-top: var(--space-12); padding-bottom: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: baseline; }
.st-footer__brand { margin: 0; font-family: var(--font-serif); font-size: 24px; flex: 1 1 auto; }
.st-footer__brand i { font-style: italic; }
.st-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font-size: 15px; }
.st-site .st-footer a { color: var(--btn-ink); text-underline-offset: 3px; }
.st-site .st-footer a:hover { color: var(--btn-ink); opacity: 0.8; }
.st-footer__small { margin: 0; width: 100%; font-size: 13px; opacity: 0.75; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .sws-container, .sws-nav__inner { padding-left: 20px; padding-right: 20px; }
  .st-hero { padding-top: var(--space-12); }
  .st-reader__bar { padding: 8px 8px 8px 20px; }
  .st-reader__body { padding: var(--space-8) 20px var(--space-12); }
  .st-site a.st-reader__page { display: none; }
  .st-pager { grid-template-columns: 1fr; }
  .st-pager__link--prev { text-align: left; }
}