:root { --ink:#26332f; --ink-soft:#58645d; --muted:#7c8378; --paper:#f3efe4; --paper-deep:#e5dfce; --line:rgba(50,65,57,.17); --line-strong:rgba(50,65,57,.32); --reed:#7f8d75; --moss:#40574e; --moss-deep:#263b38; --rust:#9a654c; --blue:#647f87; --shadow:0 22px 55px rgba(35,48,42,.12); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:#d7d2c0; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Serif SC","Songti SC",Georgia,serif; line-height:1.75; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.18; background-image:radial-gradient(rgba(58,70,60,.17) .45px,transparent .55px); background-size:5px 5px; mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 78% 0%,rgba(222,220,185,.65),transparent 30%),linear-gradient(155deg,#ebe6d7 0%,#f5f1e8 55%,#dbe2d9 100%); }
.grain::after { content:""; position:absolute; width:32rem; height:32rem; right:-10rem; top:-15rem; border-radius:50%; background:rgba(238,235,199,.45); filter:blur(2px); }
.top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(1160px,calc(100% - 2.4rem)); margin:auto; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.55rem; color:var(--moss-deep); font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.brand-mark { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; color:var(--paper); background:var(--moss-deep); border-radius:50%; font-family:Georgia,serif; }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
nav a { padding:.38rem .65rem; color:var(--ink-soft); font-size:.8rem; }
nav a:hover, nav a.active { color:var(--rust); }
.wrap { width:min(1160px,calc(100% - 2.4rem)); margin:0 auto; }
.skip-link { position:fixed; z-index:30; left:1rem; top:-4rem; padding:.55rem .9rem; color:#fff; background:var(--moss-deep); border-radius:3px; }
.skip-link:focus { top:1rem; }
.eyebrow { color:var(--rust); font: .7rem ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }
.hero { padding:clamp(4.4rem,10vw,8.5rem) 0 4.5rem; }
.hero h1 { max-width:12ch; margin:.7rem 0 1.25rem; color:var(--moss-deep); font-size:clamp(3.2rem,9vw,7rem); letter-spacing:-.08em; line-height:1.06; }
.hero h1 span { display:block; color:var(--ink); font-size:.34em; letter-spacing:.01em; line-height:1.5; }
.lede { max-width:42rem; margin:0; color:var(--ink-soft); font-size:clamp(1.05rem,2vw,1.3rem); }
.hero-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button-primary,.button-quiet { display:inline-flex; align-items:center; gap:.65rem; padding:.7rem 1rem; border:1px solid var(--moss); font-size:.84rem; }
.button-primary { color:var(--paper); background:var(--moss-deep); }
.button-quiet { color:var(--moss-deep); background:rgba(255,255,255,.18); }
.button-primary:hover,.button-quiet:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.hero-note { display:flex; align-items:center; gap:.55rem; max-width:44rem; margin-top:3rem; padding-top:1rem; color:var(--muted); border-top:1px solid var(--line); font-size:.75rem; }
.signal { width:.48rem; height:.48rem; flex:0 0 auto; background:#6d9178; border-radius:50%; box-shadow:0 0 0 .28rem rgba(109,145,120,.12); }
.section-head { max-width:48rem; margin-bottom:1.65rem; }
.section-head h2 { margin:.4rem 0 .55rem; color:var(--moss-deep); font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.04em; line-height:1.2; }
.section-head p { margin:0; color:var(--ink-soft); }
.triad,.flow-section,.experiment,.rules,.closing { padding:3.6rem 0; border-top:1px solid var(--line-strong); }
.triad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card,.result-card { min-height:100%; padding:1.35rem; border:1px solid var(--line); background:rgba(255,255,255,.3); box-shadow:0 8px 30px rgba(40,50,44,.035); }
.card { border-top:3px solid var(--reed); }
.accent-rust { border-top-color:var(--rust); }.accent-blue { border-top-color:var(--blue); }.accent-moss { border-top-color:var(--moss); }
.card-no,.result-label { color:var(--muted); font: .67rem ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; }
.card h3,.result-card h3 { margin:.65rem 0 .4rem; color:var(--moss-deep); font-size:1.28rem; }
.card p,.result-card p { margin:0; color:var(--ink-soft); font-size:.9rem; }
.card-foot { margin-top:1.15rem; padding-top:.7rem; color:var(--rust); border-top:1px solid var(--line); font-size:.78rem; }
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:.55rem; align-items:center; }
.flow div { min-height:5.1rem; padding:.8rem .65rem; background:rgba(255,255,255,.3); border-left:2px solid var(--reed); }
.flow b,.flow small { display:block; }.flow b { color:var(--moss-deep); font-size:.88rem; }.flow small { margin-top:.2rem; color:var(--muted); font-size:.68rem; line-height:1.45; }.flow i { color:var(--rust); font-style:normal; }
.experiment { background:linear-gradient(90deg,rgba(221,230,223,.28),transparent 75%); }
.experiment-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.result-wide { grid-column:1/-1; }
.result-card { border-left:2px solid var(--reed); }
.result-wide { border-left-color:var(--rust); }
.result-card ul { margin:.65rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.86rem; }.result-card li+li { margin-top:.25rem; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:1.35rem; }.timeline span { padding:.65rem; border-top:1px solid var(--line-strong); color:var(--muted); font-size:.72rem; }.timeline b { display:block; color:var(--moss-deep); font-size:.8rem; }
.rule-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }.rule-grid div { padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.24); }.rule-grid b,.rule-grid span { display:block; }.rule-grid b { color:var(--moss-deep); font-size:.9rem; }.rule-grid span { margin-top:.35rem; color:var(--ink-soft); font-size:.78rem; line-height:1.6; }
.closing { display:flex; justify-content:space-between; gap:3rem; align-items:end; }.closing-copy { max-width:44rem; }.closing h2 { margin:.45rem 0 .7rem; color:var(--moss-deep); font-size:clamp(1.8rem,4vw,3.3rem); line-height:1.2; }.closing p { margin:0; color:var(--ink-soft); }.closing-actions { display:grid; gap:.45rem; min-width:12rem; color:var(--rust); font-size:.84rem; }.closing-actions a:hover { text-decoration:underline; }
.footer { display:flex; justify-content:space-between; gap:1rem; padding:1.25rem 0 2rem; color:var(--muted); border-top:1px solid var(--line); font-size:.72rem; }
@media (max-width:900px) { .flow { grid-template-columns:repeat(3,1fr); }.flow i { display:none; }.rule-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .top { align-items:flex-start; flex-direction:column; }.top nav { justify-content:flex-start; }.triad-grid,.experiment-grid,.rule-grid { grid-template-columns:1fr; }.result-wide { grid-column:auto; }.timeline { grid-template-columns:repeat(2,1fr); }.flow { grid-template-columns:repeat(2,1fr); }.closing,.footer { align-items:flex-start; flex-direction:column; gap:1.2rem; }.hero { padding-top:3.8rem; } }