/* The Pen's Workshop — shared styles for the index and every piece page.
   One source of truth, extracted from the former single-page inline <style> so the
   workshop can grow to many pages without the CSS drifting between them. Mirrors
   hekswerk-site's "aura" design tokens (reconciled against the site CSS at publish). */
:root{
  --inky-void:#09090E; --midnight-indigo:#293656; --mist-lavender:#8C7699; --aura-cyan:#7095B7;
  --halo-gold:#C0A990; --soft-cream:#F5F5F2; --ember:#c98f6b;
  --text:rgba(245,245,242,.95); --muted:rgba(245,245,242,.74); --quiet:rgba(245,245,242,.56);
  --hairline:rgba(140,118,153,.2); --panel:rgba(41,54,86,.22); --max:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--inky-void); color:var(--text); font-family:Outfit,system-ui,sans-serif; font-weight:300; line-height:1.68;
  background-image:radial-gradient(900px 560px at 80% -8%, rgba(74,75,120,.24), transparent 58%);}
h1,h2,h3,.serif{font-family:Fraunces,serif; font-weight:500; letter-spacing:-.01em; line-height:1.18}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(18px,4vw,30px)}
.sitebar{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:rgba(9,9,14,.72); border-bottom:1px solid var(--hairline)}
.sitebar .row{max-width:var(--max); margin:0 auto; padding:.7rem clamp(18px,4vw,30px); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.sitebar .brand{font-family:Fraunces,serif; font-weight:600; color:var(--soft-cream)}
.sitebar .crumb{font-size:.74rem; color:var(--quiet)} .sitebar .crumb a{color:var(--muted); text-decoration:none}
.tag{display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); border:1px solid var(--hairline); border-radius:999px; padding:.35em .9em; margin-bottom:1.1rem}
a{color:var(--aura-cyan); text-decoration:none}
section{padding:clamp(40px,6vh,72px) 0}
.rise{opacity:0; transform:translateY(20px); filter:blur(5px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease}
.rise.seen{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;filter:none;transition:none}}

#hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem); margin:.2em 0 .3em}
#hero .sub{font-size:clamp(1.05rem,1.9vw,1.3rem); color:var(--muted); max-width:60ch}
.what{border:1px solid var(--hairline); border-radius:14px; background:var(--panel); padding:1.3rem 1.5rem; margin-top:1.6rem; font-size:.92rem; color:var(--muted); max-width:70ch}
.what b{color:var(--halo-gold); font-weight:500}

.shelf{margin-top:2.2rem; display:grid; gap:1rem}
.card{border:1px solid var(--hairline); border-radius:14px; background:rgba(9,9,14,.4); padding:1.3rem 1.5rem; transition:border-color .3s ease, transform .3s ease}
.card a:hover{color:var(--halo-gold)}
.card.empty{border-style:dashed; opacity:.62}
.card .kw{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember)}
.card h3{margin:.3rem 0 .2rem; font-size:1.3rem}
.card .dt{font-size:.78rem; color:var(--quiet)}
.card .ex{margin:.6rem 0 0; color:var(--muted); font-size:.92rem}

.piece{margin-top:1rem; padding-top:.4rem}
.piece .kw{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember)}
.piece h1,.piece h2{font-size:clamp(1.7rem,4vw,2.5rem); margin:.3rem 0 .2rem}
.piece .dt{font-size:.82rem; color:var(--quiet); margin-bottom:1.6rem}
.piece p{margin:0 0 1.15rem; font-size:1.06rem; color:rgba(245,245,242,.9); max-width:64ch}
.piece p.em{font-family:Fraunces,serif; font-style:italic; color:var(--soft-cream); border-left:2px solid var(--halo-gold); padding-left:1.2rem}
.piece .sign{font-family:Fraunces,serif; font-style:italic; color:var(--mist-lavender); margin-top:1.8rem}
.voice{border:1px dashed rgba(192,169,144,.5); border-radius:12px; background:rgba(192,169,144,.05); padding:1rem 1.15rem; margin:1.6rem 0; position:relative}
.voice::before{content:"✍ your voice — keep · cut · calibrate"; position:absolute; top:-.72em; left:14px; background:var(--inky-void); padding:0 .55em; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--halo-gold)}
.voice .draft{color:rgba(245,245,242,.84); font-style:italic} .voice .draft b{font-style:normal; color:var(--soft-cream); font-weight:500}
.srcs{font-size:.72rem; color:var(--quiet); margin-top:1.2rem}
.keeper{border-left:2px solid var(--halo-gold); padding:.1rem 0 .1rem 1.2rem; margin:1.6rem 0}
.keeper p{font-family:Fraunces,serif; font-style:italic; color:var(--soft-cream); margin:0 0 .6rem; max-width:64ch}
.keeper .by{font-style:normal; font-family:Outfit,sans-serif; font-size:.78rem; color:var(--quiet); letter-spacing:.04em}
.piece-foot{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--hairline); font-size:.9rem}
.piece-foot a{color:var(--muted)}

footer{border-top:1px solid var(--hairline); padding:2.4rem 0 3rem; color:var(--quiet); font-size:.8rem; margin-top:3rem}
.prov{border:1px solid var(--hairline); border-radius:12px; padding:1rem 1.2rem; background:rgba(9,9,14,.5); max-width:72ch}
.prov b{color:var(--halo-gold); font-weight:500}