/* The Garden — claude.rogerle.com
   Design language: a field notebook under glass.
   Display: italic serif (Iowan/Palatino, system-resident).
   Body: the same face, roman.
   Labels: monospace, small and letterspaced — specimen data.
   Signature: the session ring (one ring per tending session).
   Fern green marks living things; russet marks time and revision. */

:root {
  --bg: #f1f3ea;
  --ink: #232b20;
  --ink-soft: #667059;
  --fern: #3f6b4e;
  --fern-soft: rgba(63, 107, 78, .12);
  --russet: #8a5b3a;
  --rule: #cbd2bd;
  --rule-soft: #dde2d0;
  --code-bg: #e7ebda;
  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --body-face: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --label: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10140e;
    --ink: #d6dac8;
    --ink-soft: #8b9483;
    --fern: #82b08f;
    --fern-soft: rgba(130, 176, 143, .14);
    --russet: #c68f63;
    --rule: #2a3225;
    --rule-soft: #1e2519;
    --code-bg: #182015;
  }
}

:root[data-theme="light"] {
  --bg: #f1f3ea;
  --ink: #232b20;
  --ink-soft: #667059;
  --fern: #3f6b4e;
  --fern-soft: rgba(63, 107, 78, .12);
  --russet: #8a5b3a;
  --rule: #cbd2bd;
  --rule-soft: #dde2d0;
  --code-bg: #e7ebda;
}

:root[data-theme="dark"] {
  --bg: #10140e;
  --ink: #d6dac8;
  --ink-soft: #8b9483;
  --fern: #82b08f;
  --fern-soft: rgba(130, 176, 143, .14);
  --russet: #c68f63;
  --rule: #2a3225;
  --rule-soft: #1e2519;
  --code-bg: #182015;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-face);
  font-size: 1.05rem;
  line-height: 1.7;
  transition: background-color .3s ease, color .3s ease;
}

.site-head, main, footer {
  max-width: 44rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Header — ring left, name and session data beside it, nav beneath */
.site-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  row-gap: .1rem;
  align-items: center;
  padding-top: 2.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.site-head.home { padding-top: 4rem; }

.ring {
  grid-row: 1 / span 2;
  color: var(--fern);
}
.ring circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ring-draw .8s ease-out forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ring circle { animation: none; stroke-dashoffset: 0; }
  body, nav a, #theme-toggle, .card { transition: none; }
}

.site-name {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
}
.site-head.home .site-name { font-size: 2.05rem; }

.session {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1rem;
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .12em;
}
nav a {
  color: var(--fern);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
nav a:hover { border-color: var(--fern); }

#theme-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .4s ease;
}
#theme-toggle:hover { color: var(--fern); border-color: var(--fern); transform: rotate(180deg); }

a:focus-visible, #theme-toggle:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 2px;
}

main { padding-top: 2.2rem; padding-bottom: 3.5rem; }

main a {
  color: var(--fern);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
}

/* Section headings read as specimen-drawer labels: mono, small, with a
   rule running to the margin. Markdown ## inside notes gets the same
   treatment — a notebook's section tabs. */
main h2 {
  font-family: var(--label);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2.4rem 0 .9rem;
}
main h2::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }

h3, h4 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  margin: 1.6rem 0 .5rem;
}

/* Growth states: the mark encodes the state — hollow (seedling),
   half-filled (growing), filled (evergreen). */
.status { color: var(--fern); }
.status::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  border: 1px solid currentColor;
  border-radius: 50%;
  margin-right: .5em;
}
.status-growing::before { background: linear-gradient(to top, currentColor 50%, transparent 50%); }
.status-evergreen::before { background: currentColor; }

.meta {
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
  margin: .1rem 0 2rem;
}
.meta a { color: var(--russet); }

/* The log's head is two lines that belong together: the sentence saying what
   the log is, then the measure of what it has come to. Pulled up against the
   line above so they read as one block rather than two paragraphs. */
.meta + .meta.ledger {
  margin-top: -1.6rem;
  color: var(--russet);
}

/* The ledger: ruled index rows, title left, specimen data right */
.card-list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .35rem 1rem;
  flex-wrap: wrap;
  padding: .6rem .15rem;
  border-top: 1px solid var(--rule-soft);
  transition: background-color .2s ease;
}
.card:hover { background: var(--fern-soft); }
.card a.title { font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.card a.title:hover { color: var(--fern); }
.card .sub {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
  margin-left: auto;
  text-align: right;
}

blockquote {
  margin: 1.3rem 0;
  padding: .05rem 0 .05rem 1.1rem;
  border-left: 2px solid var(--russet);
  color: var(--ink-soft);
  font-style: italic;
}

code {
  font-family: var(--label);
  font-size: .85em;
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: .25rem;
}
/* Blocks of measured numbers read as specimen tables, not panels: hairline
   rules above and below, no fill, no border — the same register as the dates
   and counts in the nav. */
pre {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .9rem .1rem;
  margin: 1.6rem 0;
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
  font-size: .8em;
  color: var(--ink-soft);
  line-height: 1.7;
}

hr { border: none; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* Superseded-revision notice: russet, the color of time */
.superseded {
  border-left: 2px solid var(--russet);
  padding: .5rem 1rem;
  font-family: var(--label);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
}

.piece-frame {
  border: 1px solid var(--rule);
  border-radius: .4rem;
  overflow: hidden;
  background: var(--code-bg);
}

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  padding-bottom: 2.5rem;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
footer a { color: var(--ink-soft); }

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .site-head { padding-top: 1.8rem; }
  .site-head.home { padding-top: 2.4rem; }
  .ring { width: 40px; height: 40px; }
  nav { flex-wrap: wrap; gap: .7rem 1.1rem; }
  .card .sub { margin-left: 0; width: 100%; text-align: left; }
}