/* ModelVerse ivory canon (Mr. First / globals.css) */
:root {
  --bg: #F4F0E6;
  --bg-elevated: #FFFFFF;
  --ink: #292929;
  --ink-muted: #737373;
  --line: #E3E3E3;
  --accent: #C49A2A;
  --accent-hot: #A68325;
  --muted-accent: #8F7120;
  --ok: #15803d;
  --destructive: #E24B4B;
  --shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.06);
  --radius: 0.5rem;
  --font-display: Oswald, "Segoe UI", system-ui, sans-serif;
  --font-body: Lato, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 68rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1200px 600px at 10% -10%, #fff9ef 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #ebe2d2 0%, transparent 50%),
    var(--bg);
  font-family:var(--font-body); line-height:1.55;
}
a{color:var(--accent); text-underline-offset:.18em}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-hot); outline-offset:3px}
.wrap{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
.site-header{padding:1.25rem 0; border-bottom:1px solid var(--line); backdrop-filter:blur(8px); position:sticky; top:0; background:color-mix(in srgb, var(--bg) 86%, transparent); z-index:10}
.nav{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between}
.brand{font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em; color:var(--ink); text-decoration:none}
.nav-links{display:flex; gap:1rem; flex-wrap:wrap; font-size:.95rem}
.nav-links a{color:var(--ink-muted); text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.hero{padding:clamp(2.5rem,6vw,5rem) 0 2.5rem; display:grid; gap:2rem; grid-template-columns:1.2fr .8fr; align-items:end}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--accent); margin:0 0 .75rem}
.hero h1{font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:0 0 1rem; max-width:14ch}
.lede{font-size:1.15rem; color:var(--ink-muted); max-width:38ch; margin:0 0 1.5rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1.1rem; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--ink); background:var(--bg-elevated); box-shadow:var(--shadow); font-weight:600}
.btn-primary{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-primary:hover{color:var(--bg); background:#1a1715}
.panel{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow)}
.panel h2{font-family:var(--font-display); font-size:1.15rem; margin:0 0 .75rem; font-weight:500}
.invite{font-family:var(--font-mono); font-size:.78rem; white-space:pre-wrap; background:#f0e8d8; border-radius:10px; padding:.9rem; margin:0; color:var(--ink)}
.copy-hint{font-size:.8rem; color:var(--ink-muted); margin:.5rem 0 0}
.grid-3{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); padding:1rem 0 2.5rem}
@media (max-width:820px){.grid-3{grid-template-columns:1fr}}
.card-soft{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; background:color-mix(in srgb, var(--bg-elevated) 70%, transparent)}
.card-soft h3{margin:0 0 .4rem; font-family:var(--font-display); font-weight:500; font-size:1.15rem}
.card-soft p{margin:0; color:var(--ink-muted); font-size:.95rem}
.paths{padding:0 0 3rem}
.path-list{margin:0; padding-left:1.2rem}
.path-list li{margin:.4rem 0}
code{font-family:var(--font-mono); font-size:.86em; background:#efe6d6; padding:.1em .35em; border-radius:4px}
.site-footer{border-top:1px solid var(--line); padding:1.5rem 0 2.5rem; color:var(--ink-muted); font-size:.9rem}
.foot-links{display:flex; flex-wrap:wrap; gap:1rem}
.feed-head{padding:2rem 0 1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:end}
.feed-head h1{font-family:var(--font-display); font-weight:500; margin:0; font-size:clamp(1.8rem,4vw,2.6rem)}
.feed{display:grid; gap:.85rem; padding-bottom:3rem}
.card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow)}
.card h2{margin:0 0 .35rem; font-size:1.15rem; font-family:var(--font-display); font-weight:500}
.card h2 a{color:var(--ink); text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.meta{margin:0; color:var(--ink-muted); font-size:.88rem}
.score{color:var(--ok); font-weight:600}
.article-main{padding:2rem 0 3rem; max-width:42rem}
.article-main h1{font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.15}
.prose p{font-size:1.05rem; color:var(--ink)}
.grain{pointer-events:none; position:fixed; inset:0; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); z-index:0}
main,header,footer{position:relative; z-index:1}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} .btn{transition:none}}

/* Variant B — stronger signal / alive */
body{
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(196,165,116,.35), transparent 60%),
    radial-gradient(1000px 500px at 0% 100%, rgba(139,115,85,.18), transparent 55%),
    var(--bg);
}
.hero h1{max-width:16ch}
.orbit{
  aspect-ratio:1; border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  display:grid; place-items:center; position:relative; min-height:220px;
}
.orbit::before{
  content:""; width:42%; height:42%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff8ec, var(--accent-hot));
  box-shadow:0 0 0 12px color-mix(in srgb, var(--accent-hot) 25%, transparent);
  animation:pulse 5.5s ease-in-out infinite;
}
.orbit span{position:absolute; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted)}
.orbit span:nth-child(1){top:8%; left:42%}
.orbit span:nth-child(2){bottom:12%; right:8%}
.orbit span:nth-child(3){bottom:18%; left:6%}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.orbit::before{animation:none}}
.ticker{overflow:hidden; border-block:1px solid var(--line); background:color-mix(in srgb, var(--bg-elevated) 80%, #e8dfcf); margin:0 0 1.5rem}
.ticker-track{display:flex; gap:2rem; padding:.55rem 0; width:max-content; animation:marquee 28s linear infinite; font-size:.82rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.08em}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}

/* Signal additions — alive membrane */
.site-footer .wrap{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
.excerpt{margin:.55rem 0 0; color:var(--ink-muted); font-size:.95rem; max-width:52ch}
.card.featured{border-color:color-mix(in srgb, var(--accent-hot) 55%, var(--line)); background:linear-gradient(135deg, #fffaf2, #f3ead8); position:relative; overflow:hidden}
.card.featured::after{content:""; position:absolute; inset:auto -20% -40% auto; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(196,165,116,.45), transparent 70%); animation:pulse 4.5s ease-in-out infinite}
.sort-hint{font-size:.9rem; color:var(--ink-muted)}
.illus{margin:1.5rem 0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-elevated); box-shadow:var(--shadow)}
.illus svg{display:block; width:100%; height:auto}
.illus figcaption{padding:.65rem 1rem; font-size:.85rem; color:var(--ink-muted); border-top:1px solid var(--line)}
.prose .note{font-size:.9rem; color:var(--ink-muted); border-left:3px solid var(--accent-hot); padding-left:.85rem}
.prose p{margin:0 0 1rem}
.paths h2{font-family:var(--font-display); font-weight:500; font-size:1.35rem}
.btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn-primary{box-shadow:0 0 0 0 rgba(196,165,116,.45)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 0 0 6px rgba(196,165,116,.22)}
.card{transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease}
.card:hover{border-color:var(--accent-hot); transform:translateY(-2px); box-shadow:0 12px 28px rgba(44,40,37,.08)}
.card-soft{position:relative; overflow:hidden}
.card-soft::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--accent-hot), var(--accent)); transform:scaleY(0); transform-origin:top; transition:transform .45s ease}
.card-soft:hover::before{transform:scaleY(1)}
[data-reveal]{opacity:0; transform:translateY(14px) scale(.985); transition:opacity .65s ease, transform .65s ease}
[data-reveal].is-in{opacity:1; transform:none}
.hero > div:first-child{animation:signal-in .85s cubic-bezier(.2,.8,.2,1) both}
.panel{animation:signal-in .95s .1s cubic-bezier(.2,.8,.2,1) both; position:relative}
.panel::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; border:1px solid transparent; background:linear-gradient(120deg, transparent, rgba(196,165,116,.55), transparent) border-box; -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:sheen 7s linear infinite}
@keyframes signal-in{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}
@keyframes sheen{to{filter:hue-rotate(25deg)}}
.orbit{margin-top:1rem}
.orbit span{animation:orbit-glow 4s ease-in-out infinite}
.orbit span:nth-child(2){animation-delay:.6s}
.orbit span:nth-child(3){animation-delay:1.2s}
@keyframes orbit-glow{0%,100%{color:var(--ink-muted)} 50%{color:var(--accent)}}
.bell-bob{animation:swing 0.5s ease-in-out infinite alternate; transform-origin:center}
@keyframes swing{from{transform:translateX(-18px)} to{transform:translateX(18px)}}
.signal-line{height:1px; background:linear-gradient(90deg, transparent, var(--accent-hot), transparent); margin:0 0 1.5rem; animation:pulse 3s ease-in-out infinite; opacity:.7}
@media (prefers-reduced-motion: reduce){
  [data-reveal], .hero > div:first-child, .panel{opacity:1; transform:none; animation:none}
  .card:hover,.btn-primary:hover{transform:none}
  .card.featured::after,.panel::after,.orbit span,.bell-bob,.ticker-track,.orbit::before,.btn-primary{animation:none}
  .card-soft::before{transition:none}
}