/* Tworks — base reset & typography ------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* [UI] Reserves a scrollbar-width gutter on BOTH sides, not just the one
   the scrollbar actually renders on — without this, `margin:0 auto`
   centering (.container, .nd-hero, .reader-channel, etc.) is computed
   against clientWidth (viewport minus the scrollbar's real width on the
   right only), so content lands mathematically centered but visually
   shifted left by half the scrollbar's width relative to the outer
   window edges. Reserving the same gutter on the left balances that out. */
html { scrollbar-gutter: stable both-edges; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
/* [UI/UX] Standardized text box behavior — manual drag-resize disabled
   everywhere; every textarea auto-expands with its content instead (see
   app.js's wireAutoExpandTextarea). This is just the default; any
   page-specific rule setting `resize: vertical/both` has higher
   specificity and needs its own override to actually take effect. */
textarea { resize: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

::selection { background: var(--brand-soft); color: var(--brand-darker); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

/* Extra top breathing room below the sticky header — #view-root is the
   main-body .container (index.html), scoped by id rather than adding this
   to the bare .container class since .site-header's own row also uses
   .container and must stay flush with no top padding of its own. */
#view-root { padding-top: var(--space-6); }

.visually-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}