/* Shared styling for Symbric content pages (blog + about). Self-contained and
   linked as /content.css so a static page needs no build step to look right.
   Mirrors the site theme tokens in src/styles.css; keep the two in sync via
   brand/symbric-theme.md. */

/* Self-hosted Jost (variable, 300-500). Same file the app bundle uses; kept
   here too so a static content page needs no build step and makes no
   third-party font request. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/jost.woff2") format("woff2");
}

:root {
  /* Two containers, the way every publication does it. The chrome (header,
     footer) spans the same full-width container as the homepage so the site
     reads as one site. The article sits in a narrow reading measure inside it,
     because a 1400px line of body text is unreadable. These three values are
     copied from src/styles.css; keep them in sync. */
  --page-max: 94rem;
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 4.5rem;
  --measure: 68rem;
  /* The index list carries a date column beside the title, so it needs more
     room than a plain prose column. */
  --measure-list: 76rem;
  --canvas: #fbfbf9;
  --surface: #ffffff;
  --ink: #172321;
  --muted: #5a6763;
  --green: #18574f;
  --green-deep: #103c37;
  --mineral: #a45a36;
  --line: #dee3e0;
  --line-strong: #c9d1cd;
  --display: "Jost", "Century Gothic", "Futura", sans-serif;
  --body: "Avenir Next", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sticky footer. Short pages (the blog index with one post, the privacy page)
   would otherwise leave the footer floating in the middle of the viewport with
   dead space under it. The column stretches to the full height and the footer
   is pushed to the bottom by margin-top: auto. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


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

a:hover {
  color: var(--green-deep);
}

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

/* Header ------------------------------------------------------------------ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100%, var(--page-max));
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.page-logo {
  display: inline-flex;
  align-items: center;
}

.page-logo img {
  height: 2rem;
  width: auto;
  display: block;
}

.page-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  font-size: 0.95rem;
}

.page-nav a {
  color: var(--ink);
  text-decoration: none;
}

.page-nav a:hover {
  color: var(--green);
}

.page-nav-cta {
  padding: 0.55rem 1.1rem;
  background: var(--green-deep);
  color: #fafcf8 !important;
  border-radius: 2px;
}

.page-nav-cta:hover {
  background: var(--green);
}

/* Shared layout ----------------------------------------------------------- */

/* The reading column, centred. The chrome spans the full page; the prose sits
   in a centred measure so wide screens do not leave half the page empty. */
.wrap {
  width: min(100%, var(--measure));
  margin: 0 auto;
  padding: 3rem var(--page-gutter) 4rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--green);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Article ----------------------------------------------------------------- */

.article-head {
  margin-bottom: 2.5rem;
}

.article-head h1 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.article-lede {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.prose > * + * {
  margin-top: 1.35rem;
}

.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.prose p,
.prose li {
  font-size: 1.06rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose a {
  color: var(--green);
}

.prose blockquote {
  margin: 1.75rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 2px solid var(--green);
  color: var(--muted);
  font-style: normal;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: #f0f2ee;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.prose pre {
  overflow-x: auto;
  background: var(--green-deep);
  color: #eef3ee;
  padding: 1.1rem 1.25rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
}

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

.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Blog index -------------------------------------------------------------- */

.index-head {
  width: min(100%, var(--measure-list));
  margin: 2rem auto 3.5rem;
  padding: 0 var(--page-gutter);
}

.index-head h1 {
  margin: 0.4rem 0 0.75rem;
  font-size: clamp(1.75rem, 2.8vw, 2.15rem);
  line-height: 1.15;
}

.index-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 34rem;
}

.post-list {
  list-style: none;
  width: min(100%, var(--measure-list));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.post-list li {
  border-top: 1px solid var(--line);
}

.post-card {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 2.5rem;
  align-items: baseline;
  padding: 2.25rem 0;
  text-decoration: none;
  color: inherit;
}



.post-card:hover h2 {
  color: var(--green);
}

.post-card time {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-card h2 {
  margin: 0.5rem 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.25;
  transition: color 160ms ease;
}

.post-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.empty-note {
  width: min(100%, var(--measure-list));
  margin: 0 auto;
  padding: 1rem var(--page-gutter);
  color: var(--muted);
}

/* Manifesto (about) ------------------------------------------------------- */

.manifesto {
  width: min(100%, var(--measure));
  margin: 0 auto;
  padding: 3rem var(--page-gutter) 4rem;
}

.manifesto-hero h1 {
  margin: 0.5rem 0 1.75rem;
  font-size: clamp(1.95rem, 3.2vw, 2.6rem);
  line-height: 1.14;
}

.manifesto section {
  margin-top: 4.5rem;
}

.manifesto section h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;
}

.manifesto p {
  font-size: 1.12rem;
  margin: 0 0 1.25rem;
}

.manifesto p.lead {
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.6;
}

.manifesto strong {
  font-weight: 600;
}

.manifesto .stamp {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fafcf8;
  background: var(--green);
  border-radius: 2px;
}

.manifesto-cta {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.manifesto-cta a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--green-deep);
  color: #fafcf8;
  text-decoration: none;
  border-radius: 2px;
  font-size: 1.05rem;
}

.manifesto-cta a:hover {
  background: var(--green);
}

/* Footer ------------------------------------------------------------------ */

.page-footer {
  border-top: 1px solid var(--line);
  width: min(100%, var(--page-max));
  /* auto top margin pins the footer to the bottom of the flex column, so a
     short page does not leave it stranded mid-viewport. */
  margin: auto auto 0;
  padding: 2.5rem var(--page-gutter) 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.page-footer nav {
  display: flex;
  gap: 1.25rem;
}

.page-footer nav a {
  color: var(--muted);
  text-decoration: none;
}

.page-footer nav a:hover {
  color: var(--green);
}

.back-link {
  display: inline-block;
  margin-top: 3.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

@media (max-width: 759px) {
  /* The two-column post row collapses to a stack: the date sits above the
     title rather than in its own column. */
  .post-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .page-nav {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .page-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}