/* ecoweaving.org — one stylesheet, no web fonts, no scripts.
   Base: the dahui.fyi styles (paper ground, book serif, small-caps headings, one warm accent, light and dark).
   Overlay: solarpunk — sunlight and leaf-green washes, a sun-ring motif, rounded living panels, flows that
   read like growth, and pills like seeds. The overlay only adds; every dahui.fyi rule below is kept as it is. */

/* ---------- dahui.fyi base ---------- */
:root {
  --bg: #f7f3ea; --fg: #1f1d19; --muted: #6b645a; --rule: #d9d0bf; --accent: #7a4e1d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "STIX Two Text", "Noto Serif", serif;
  --math: "STIX Two Math", "Cambria Math", "Noto Sans Math", "Apple Symbols", "Segoe UI Symbol", var(--serif);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151412; --fg: #e8e1d3; --muted: #9c9385; --rule: #3a362f; --accent: #d9a86a; }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); }
body { margin: 0; font: 1.1875rem/1.7 var(--serif); text-rendering: optimizeLegibility; }
main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
main { padding-top: 4rem; }
.sigil { font-family: var(--math); letter-spacing: 0.02em; }
header.invocation { text-align: center; margin-bottom: 3rem; }
header.invocation p { margin: 0.25rem 0; font-weight: 600; }
header.invocation .therefore { color: var(--muted); font-weight: 400; }
h1 { font-size: 1rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--muted); margin: 0 0 2.5rem; }
.epigraph { text-align: center; font-style: italic; margin: 0 0 3rem; }
p { margin: 0 0 1.4rem; hyphens: auto; }
hr { border: 0; border-top: 1px solid var(--rule); width: 4rem; margin: 3rem auto; }
footer { color: var(--muted); font-size: 0.95rem; padding-bottom: 4rem; }
footer h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; margin: 0 0 0.75rem; }
footer ul { margin: 0; padding-left: 1.1rem; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.talk h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--muted); margin: 3rem 0 1rem; }
.talk h3 { font-size: 1rem; font-weight: 400; color: var(--muted); margin: 2.5rem 0 1rem; }
.talk ul { padding-left: 1.1rem; margin: 0 0 1.4rem; }
.talk p { margin-bottom: 1rem; }
.first-word { text-align: center; font-size: 1.6rem; margin: 3rem 0 1rem; }

/* ---------- solarpunk overlay ---------- */
:root {
  --leaf: #2f6b3f; --moss: #5d7d2c; --sun: #c98a16; --sky: #2f6f86;
  --panel: rgba(93, 125, 44, 0.08); --panel-edge: rgba(47, 107, 63, 0.28);
  --wash-sun: rgba(232, 176, 60, 0.20); --wash-leaf: rgba(63, 140, 82, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --leaf: #8fd19e; --moss: #b8d37a; --sun: #f0bd55; --sky: #8ccde0;
    --panel: rgba(143, 209, 158, 0.07); --panel-edge: rgba(143, 209, 158, 0.25);
    --wash-sun: rgba(240, 189, 85, 0.10); --wash-leaf: rgba(143, 209, 158, 0.08);
  }
}
body {
  background:
    radial-gradient(60rem 30rem at 85% -8rem, var(--wash-sun), transparent 70%),
    radial-gradient(50rem 30rem at -10% 105%, var(--wash-leaf), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
::selection { background: var(--wash-sun); }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--leaf); color: var(--bg); padding: 0.4rem 0.9rem; border-radius: 999px; }
.skip:focus { top: 0.75rem; }

/* site header: a quiet row, sun-ring mark, small-caps nav */
.site { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.site .mark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }
.site .mark img { width: 30px; height: 30px; }
.site nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; }
.site nav a { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.site nav a:hover, .site nav a[aria-current="page"] { color: var(--leaf); }
.site nav a[aria-current="page"] { border-bottom: 1px solid var(--sun); }

/* a sun-ring above each page title */
h1::before {
  content: ""; display: block; width: 3.2rem; height: 3.2rem; margin: 0 auto 1.2rem; border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0 28%, transparent 29% 44%, var(--moss) 45% 47%, transparent 48% 62%, var(--leaf) 63% 64%, transparent 65%);
  opacity: 0.85;
}
h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--leaf); margin: 3rem 0 1rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.4rem; }
.lede { font-size: 1.3rem; line-height: 1.6; }
.small, .meta { color: var(--muted); font-size: 0.95rem; }
.meta { margin: 0 0 1rem; }
blockquote { margin: 1.75rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 2px solid var(--sun); font-style: italic; }
blockquote p { margin-bottom: 0.5rem; }
blockquote footer { padding: 0; font-style: normal; font-size: 0.9rem; }
ol.principles { padding-left: 1.4rem; }
ol.principles li { margin-bottom: 0.4rem; }
ol.principles li::marker { color: var(--sun); }

/* seed pills */
.pill { display: inline-block; padding: 0.3rem 0.95rem; border-radius: 999px; border: 1px solid var(--panel-edge); background: var(--panel); text-decoration: none; font-size: 0.95rem; margin: 0 0.4rem 0.5rem 0; }
.pill:hover { border-color: var(--sun); }

/* living panels: the three paths on the home page */
.paths { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 0.9rem; }
.paths li { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1.25rem 0.35rem 1.25rem 0.35rem; padding: 1rem 1.15rem 0.6rem; }
.paths h2 { margin: 0 0 0.35rem; }
.paths p { margin: 0 0 0.6rem; }

/* hanzi callouts: the character, its readings (each a recording) and its meaning (Wikipedia) */
.hanzi-row { display: grid; gap: 0.9rem; margin: 1.5rem 0 1rem; }
@media (min-width: 36rem) { .hanzi-row { grid-template-columns: repeat(3, 1fr); } }
.hanzi { margin: 0; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1rem; padding: 0.9rem 1rem 0.8rem; text-align: center; }
.hanzi .char { display: block; font-size: 3.2rem; line-height: 1.15; color: var(--leaf); font-family: "Songti TC", "Songti SC", "PingFang TC", "Noto Serif CJK TC", "Noto Serif TC", serif; }
.hanzi .simp { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.35rem; }
.hanzi .readings { list-style: none; padding: 0; margin: 0 0 0.35rem; font-size: 0.95rem; }
.hanzi .readings li { margin: 0.1rem 0; }
.hanzi .lang { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hanzi .readings a::after { content: " \25B8"; font-size: 0.75em; color: var(--sun); }
.hanzi figcaption { font-size: 0.95rem; }
.credits { font-size: 0.85rem; color: var(--muted); }
.credits ul { padding-left: 1.1rem; }

/* lineage: the timeline and each convening, unfurled */
ol.timeline { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; border-left: 2px solid var(--panel-edge); }
ol.timeline li { position: relative; padding: 0 0 0.9rem 1.2rem; }
ol.timeline li::before { content: ""; position: absolute; left: -0.42rem; top: 0.55rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--bg); }
ol.timeline .when { display: block; color: var(--muted); font-size: 0.9rem; }
.convening { margin: 3.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.convening > h2 { margin-top: 0; }
.convening h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: 0.25rem; }
ol.flow { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 1rem; }
ol.flow li { position: relative; background: var(--panel); border: 1px solid var(--panel-edge); border-top: 3px solid var(--moss); border-radius: 0.35rem 1.25rem 0.35rem 1.25rem; padding: 0.7rem 1rem 0.75rem; }
ol.flow li:nth-child(2) { border-top-color: var(--leaf); }
ol.flow li:nth-child(3) { border-top-color: var(--sky); }
ol.flow li:nth-child(4) { border-top-color: var(--sun); }
ol.flow li:not(:last-child)::after { content: "\2193"; position: absolute; left: 50%; bottom: -1.05rem; transform: translateX(-50%); color: var(--moss); background: var(--bg); padding: 0 0.3rem; line-height: 1; }
ol.flow strong { display: block; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); }
ol.flow span { display: block; font-size: 1rem; line-height: 1.55; }
.layers-label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0.5rem; }
ul.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1.25rem; }
ul.tags li { border: 1px solid var(--panel-edge); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.88rem; line-height: 1.45; background: var(--panel); }
.flowed { font-style: italic; }

footer.site-foot { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 4rem; }
footer.site-foot p { margin: 0 0 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .pill, .site nav a { transition: color 0.2s, border-color 0.2s; }
}