@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap');
:root{--bg:#F4F0E6;--ink:#292929;--muted:#5C5C5C;--border:#D8D0C0;--gold:#C49A2A;--gold-deep:#8F7120;--charcoal:#1E1C18;--card:#FFFCF6;--panel:#EFE8D8;--font-display:"Oswald",system-ui,sans-serif;--font-body:"Lato",system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.door-leaf{transition:none!important}}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.55;min-height:100vh}
a{color:var(--gold-deep)}a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--card);padding:.5rem 1rem;border:1px solid var(--ink)}
.wrap{width:min(1000px,92vw);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:700;text-decoration:none;color:var(--ink);font-size:.95rem}
.nav-links{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav-links a{font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;text-decoration:none;color:var(--muted)}
.nav-links a[aria-current="page"],.nav-links a:hover{color:var(--ink)}
.door-stage{padding:1.5rem 0 2rem;text-align:center}
.door-stage .eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--gold-deep);margin:0 0 .5rem}
.door-stage>h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 .4rem;letter-spacing:.02em}
.door-stage .hint{color:var(--muted);margin:0 0 1.25rem;font-size:.95rem}
.living-door{position:relative;width:min(640px,94vw);margin:0 auto;aspect-ratio:1/1.05;cursor:pointer;border:none;background:transparent;padding:0;display:block}
.living-door:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:8px}
.living-door svg{width:100%;height:100%;display:block;overflow:visible}
.door-leaf{transform-box:fill-box;transform-origin:left center;transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.living-door.is-open .door-leaf-l{transform:perspective(800px) rotateY(-68deg)}
.living-door.is-open .door-leaf-r{transform-origin:right center;transform:perspective(800px) rotateY(68deg)}
.creature-eye{transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.creature-breathe{transform-origin:center bottom;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015,1.03)}}
.reveal-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height 1s ease,opacity .6s ease,margin .4s ease;margin:0 auto;width:min(640px,94vw);text-align:left}
.reveal-panel.is-open{max-height:1200px;opacity:1;margin-top:1.5rem;margin-bottom:2rem}
.invite-box{background:var(--charcoal);color:#F4F0E6;padding:1.4rem 1.35rem;border:2px solid var(--gold);margin-bottom:1rem}
.invite-box h2{font-family:var(--font-display);text-transform:uppercase;font-size:.9rem;letter-spacing:.1em;color:var(--gold);margin:0 0 .7rem}
.invite{margin:0;white-space:pre-wrap;font-family:var(--font-mono);font-size:.84rem;line-height:1.45}
.btn{display:inline-flex;align-items:center;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;font-weight:600;text-decoration:none;color:var(--ink);border:2px solid var(--ink);padding:.65rem 1rem;background:var(--bg);cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn-primary{background:var(--gold);border-color:var(--gold-deep);color:var(--charcoal)}
.btn-primary:hover{background:var(--charcoal);color:var(--gold);border-color:var(--charcoal)}
.invite-box .btn{margin-top:.85rem;background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.invite-box .btn:hover{background:var(--bg);color:var(--ink)}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.way{background:var(--card);border:1.5px solid var(--ink);padding:.9rem 1rem}
.way h3{font-family:var(--font-display);text-transform:uppercase;font-size:.85rem;margin:0 0 .35rem}
.way p{margin:0;font-size:.88rem}.way code{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);word-break:break-all}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;justify-content:center}
.paths{margin:2rem auto 3rem;width:min(640px,94vw);border-top:2px solid var(--ink);padding-top:1.25rem;text-align:left}
.paths h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;margin:0 0 .7rem}
.paths ol{margin:0;padding-left:1.2rem}.paths li{margin:.35rem 0}
.paths code{font-family:var(--font-mono);font-size:.84rem;background:var(--panel);padding:.1rem .3rem}
.feed-head,.article-main{padding:2rem 0 1rem}
.feed-head h1,.article-main h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.7rem,4.5vw,2.6rem);margin:.25rem 0 .55rem;line-height:1.05}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--gold-deep);margin:0}
.sort-hint{font-family:var(--font-mono);font-size:.8rem}
.feed{display:grid;gap:.8rem;padding-bottom:3rem}
.card{background:var(--card);border:1.5px solid var(--ink);padding:1rem 1.1rem;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.card.is-in{opacity:1;transform:none}
.card h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;margin:0 0 .3rem;line-height:1.15}
.card h2 a{text-decoration:none;color:var(--ink)}.card h2 a:hover{color:var(--gold-deep)}
.meta{margin:0;font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}.score{color:var(--gold-deep);font-weight:700}.excerpt{margin:.5rem 0 0}
.featured{background:var(--charcoal);color:#F4F0E6;border-color:var(--gold)}.featured h2 a{color:#F4F0E6}.featured .meta{color:#B5AD9C}.featured .eyebrow{color:var(--gold)}
.illus{margin:1rem 0 1.5rem;border:1.5px solid var(--ink);background:var(--card);padding:.4rem}
.illus svg{display:block;width:100%;height:auto}
.illus figcaption{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);padding:.35rem .4rem}
.prose{max-width:40rem;font-size:1.05rem}.prose p{margin:0 0 1rem}.prose .note{font-size:.9rem;color:var(--muted);border-left:3px solid var(--gold);padding-left:.8rem}
.site-footer{background:var(--charcoal);color:#E8E0D0;padding:1.6rem 0 2rem;border-top:3px solid var(--gold);margin-top:auto}
.site-footer a{color:var(--gold)}.site-footer a:hover{color:#F4F0E6}
.foot-links{display:flex;flex-wrap:wrap;gap:.75rem 1.1rem;margin-top:.7rem}
.foot-links a{font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.1em;text-decoration:none}
body.feed-page,body.article-page,body.door-page{display:flex;flex-direction:column;min-height:100vh}

/* MOTION_PACK — deepen (living door) */
@media (prefers-reduced-motion: no-preference) {
  .door-stage > h1,.door-stage .eyebrow,.door-stage .hint{
    opacity:0;transform:translateY(14px);
    animation:h-rise .7s ease both;
  }
  .door-stage .eyebrow{animation-delay:.05s}
  .door-stage > h1{animation-delay:.12s}
  .door-stage .hint{animation-delay:.22s}
  @keyframes h-rise{to{opacity:1;transform:none}}

  .living-door{
    opacity:0;transform:scale(.96);
    animation:h-door-enter .9s .2s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes h-door-enter{to{opacity:1;transform:none}}

  .living-door.is-open{
    filter:drop-shadow(0 0 28px rgba(196,154,42,.45));
    transition:filter .6s ease;
  }
  .reveal-panel.is-open .invite-box{
    animation:h-pop .45s .15s ease both;
  }
  .reveal-panel.is-open .way{
    opacity:0;animation:h-pop .4s ease both;
  }
  .reveal-panel.is-open .way:nth-child(1){animation-delay:.25s}
  .reveal-panel.is-open .way:nth-child(2){animation-delay:.32s}
  .reveal-panel.is-open .way:nth-child(3){animation-delay:.39s}
  .reveal-panel.is-open .way:nth-child(4){animation-delay:.46s}
  @keyframes h-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

.living-door{
  transition:filter .35s ease, transform .35s ease;
  border-radius:8px;
}
.living-door:hover{
  filter:drop-shadow(0 14px 32px rgba(196,154,42,.3));
}
.living-door:hover .creature-breathe{
  filter:brightness(1.03);
}
.door-leaf{
  transition:transform .9s cubic-bezier(.45,.05,.2,1), filter .4s ease;
}
.living-door.is-open .door-leaf-l,
.living-door.is-open .door-leaf-r{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.25));
}
.way{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.way:hover,.way:focus-within{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(41,41,41,.08);
  border-color:var(--gold);
}
.btn{
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .2s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(196,154,42,.28);
}
.card{
  transition:opacity .4s, transform .4s, box-shadow .25s ease, border-color .25s ease;
}
.card.is-in:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  border-color:var(--gold);
}
.door-stage{
  background:radial-gradient(600px 380px at 50% 20%, rgba(196,154,42,.12), transparent 60%);
}
.invite-box{
  box-shadow:0 16px 40px rgba(0,0,0,.2), 0 0 0 1px rgba(196,154,42,.3);
}

@media (prefers-reduced-motion: reduce) {
  .door-stage > h1,.door-stage .eyebrow,.door-stage .hint,.living-door,.reveal-panel.is-open .invite-box,.reveal-panel.is-open .way{animation:none!important;opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}