@font-face { font-family:"Inter";font-weight:800;font-display:swap;src:url("fonts/inter-extrabold.woff2"); }
:root{ --copper:#d97b3f; --ink:#ece2d6; --muted:#a89684; --bg:#0a0704;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; }
*{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.mock{position:fixed;top:10px;right:10px;z-index:60;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#0a0704;background:var(--copper);padding:6px 9px;border-radius:999px;opacity:.9}
.controls{position:fixed;top:10px;left:10px;z-index:60;display:flex;gap:8px}
.pill{display:flex;gap:2px;background:rgba(20,14,8,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(217,123,63,.28);border-radius:999px;padding:3px}
.pill button{font:600 12px/1 var(--sans);letter-spacing:.05em;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px 10px;border-radius:999px}
.pill button.on{color:#201812;background:var(--copper)}
#theme button{font-size:13px;padding:6px 9px}

/* ---- light theme ---- */
:root[data-theme="light"]{ --ink:#2a1f16; --muted:#8a7768; --copper:#b4632a; --bg:#f3ede3; }
[data-theme="light"] .hero{background:radial-gradient(ellipse 95% 75% at 50% 40%, #fcf8f1 0%, #f3ebde 58%, #ece0cf 100%)}
[data-theme="light"] .hero .bloom{background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(217,123,63,.16),transparent 70%)}
[data-theme="light"] .wordmark{background:linear-gradient(174deg,#e6944e 0%,#d97b3f 20%,#c06a2e 44%,#9a4e1e 66%,#7a3512 84%,#b4632a 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
[data-theme="light"] .bar{background:rgba(248,243,235,.8);border-bottom:1px solid rgba(180,99,42,.22)}
[data-theme="light"] .post h2{color:#2a1f16}
[data-theme="light"] .post p{color:#3d3125}
[data-theme="light"] .post{border-bottom-color:rgba(180,99,42,.2)}
[data-theme="light"] .tnote{color:#8a6a44;background:rgba(180,99,42,.1);border-color:rgba(180,99,42,.3)}
[data-theme="light"] .promo{box-shadow:0 20px 50px rgba(120,80,40,.22)}
[data-theme="light"] .pill{background:rgba(250,246,239,.82);border-color:rgba(180,99,42,.32)}
[data-theme="light"] footer{color:#9a8877;border-top-color:rgba(180,99,42,.16)}

/* ---- amber theme (opentechresources.com) ---- */
body.theme-amber{ --copper:#f5b820; --bg:#0a0703; }
body.theme-amber .hero{background:radial-gradient(ellipse 95% 75% at 50% 40%, #1a1305 0%, #0a0703 55%, #000 90%)}
body.theme-amber .hero .bloom{background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(245,184,32,.22),rgba(217,149,18,.11) 36%,transparent 70%)}
body.theme-amber .wordmark{background:linear-gradient(174deg,#fff0c4 0%,#ffdb7a 18%,#f5b820 42%,#d99512 60%,#8a5c0a 80%,#ffca52 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.theme-amber .bar{border-bottom-color:rgba(245,184,32,.18)}
body.theme-amber .bar .mini{background:linear-gradient(174deg,#fff0c4,#f5b820 55%,#8a5c0a);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-amber .pill{border-color:rgba(245,184,32,.28)}
body.theme-amber .post{border-bottom-color:rgba(245,184,32,.16)}
body.theme-amber .tnote{background:rgba(245,184,32,.09);border-color:rgba(245,184,32,.2)}
body.theme-amber .tnote a{border-bottom-color:rgba(245,184,32,.5)}
body.theme-amber .attach a{border-bottom-color:rgba(245,184,32,.5)}
body.theme-amber footer{border-top-color:rgba(245,184,32,.12)}

.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:center;align-items:center;height:56px;background:rgba(10,7,4,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(217,123,63,.18);transform:translateY(-100%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.bar.show{transform:none}
.bar .mini{font-weight:800;letter-spacing:-.03em;font-size:1.05rem;background:linear-gradient(174deg,#ffe0c9,#d97b3f 55%,#7a3512);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{min-height:33svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse 95% 75% at 50% 40%, #1a1109 0%, #0a0704 55%, #000 90%);padding:6vmin 5vw}
.hero .bloom{position:absolute;inset:-30% -10% auto -10%;height:80%;z-index:0;background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(217,123,63,.22),transparent 70%);filter:blur(20px)}
.mast{position:relative;z-index:1}
.wordmark{position:relative;display:inline-block;font-weight:800;letter-spacing:-.045em;line-height:1.05;white-space:nowrap;font-size:clamp(2.3rem,10.5vw,7.5rem);background:linear-gradient(174deg,#ffe0c9 0%,#f0a878 18%,#d97b3f 42%,#b85a24 60%,#7a3512 80%,#e89358 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sheen 7.5s ease-in-out infinite}
.wordmark::before{content:attr(data-text);position:absolute;inset:0;text-align:center;pointer-events:none;background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.368) 42.8%,rgba(255,255,255,.92) 50%,rgba(255,255,255,.368) 57.2%,transparent 68%);background-repeat:no-repeat;background-size:300% 100%;background-position:220% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transform:scale(1.02);filter:blur(2px);animation:glint 6s linear 1.2s infinite}
.stream{max-width:1180px;margin:0 auto;padding:clamp(.6rem,1.6vw,1.2rem) 22px 6rem}
.post{padding:0 0 clamp(2.8rem,6vw,4.5rem);margin-bottom:clamp(2.8rem,6vw,4.5rem);border-bottom:1px solid rgba(217,123,63,.16)}
.promo{aspect-ratio:21/9;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);display:grid;place-items:center;position:relative}
.promo img{width:100%;height:100%;object-fit:cover;display:block}
.promo .ph{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.35);padding:5px 10px;border-radius:999px}
.body{max-width:100%;margin:0;text-align:left}
.post time{display:block;margin:1.7rem 0 .5rem;color:var(--copper);font-weight:600;font-size:.82rem;letter-spacing:.06em}
.post h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,4.2vw,2.15rem);line-height:1.18;letter-spacing:-.01em;color:#f5ece1}
.byline{font-family:var(--sans);color:var(--muted);font-size:.82rem;letter-spacing:.02em;margin-top:.55rem}
.tnote{margin-top:.7rem;font-size:.78rem;color:#8f7f70;background:rgba(217,123,63,.09);border:1px solid rgba(217,123,63,.2);border-radius:8px;padding:7px 11px;display:inline-block}
.tnote a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(217,123,63,.5)}
.post p{font-family:var(--serif);margin-top:1rem;font-size:clamp(1.02rem,2.5vw,1.18rem);line-height:1.6;color:#d9ccbe}
.more{text-align:center;color:var(--muted);font-size:.85rem;padding:1rem 0 3rem;letter-spacing:.06em}
footer{text-align:center;color:#6e5f50;font-size:.78rem;padding:3rem 20px 4rem;border-top:1px solid rgba(217,123,63,.12)}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes glint{from{background-position:220% 0}to{background-position:-120% 0}}
@media (max-width:720px){ .promo{aspect-ratio:16/9} .stream{padding-top:.8rem} }
@media (prefers-reduced-motion:reduce){.wordmark::before{animation:none}}
.dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:1}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.4);cursor:pointer}
.dots button.on{background:var(--copper)}
.attach{margin-top:1rem}
.attach a{font-family:var(--sans);color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(217,123,63,.5);font-size:.9rem}