/* ============================================================
   POCKET WIZARD BOOKS — design system subset for the PhiNoWriMo pages
   (same tokens, nav, buttons and footer as the main pages)
   ============================================================ */
:root{
  --navy-deep:#081b2c; --navy:#0c2c47; --navy-soft:#163f61; --charcoal:#35343a; --ink:#211f24;
  --parchment:#faf5e9; --parchment-2:#f1e8d4; --parchment-3:#e8dcc0;
  --star-blue:#a3cbe6; --gold:#e8b84b; --gold-bright:#ffd85e; --white:#fffdf8;
  --font-display:"Fraunces","Iowan Old Style",ui-serif,Georgia,serif;
  --font-body:"Literata",ui-serif,Georgia,serif;
  --container:1180px; --nav-h:84px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--parchment); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; }
p{ margin:0; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pw-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
::selection{ background:var(--gold); color:var(--navy-deep); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
.section{ position:relative; scroll-margin-top:var(--nav-h); }
.eyebrow{ font-family:var(--font-body); font-style:italic; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--gold); font-weight:500; }

/* nav */
.pw-nav{ position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nav-h); display:flex; align-items:center; background:transparent;
  transition:background .45s var(--ease-out), box-shadow .45s var(--ease-out), height .35s var(--ease-out); }
.pw-nav.is-scrolled{ background:rgba(8,27,44,.86); backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 8px 30px rgba(8,20,33,.25); height:68px; }
.pw-nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pw-brand{ display:flex; align-items:center; gap:12px; }
.pw-brand-mark{ width:42px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); transition:width .35s var(--ease-out); }
.pw-nav.is-scrolled .pw-brand-mark{ width:36px; }
.pw-brand-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pw-brand-word{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--white); letter-spacing:.01em; line-height:1.05; white-space:nowrap; }
.pw-brand-tag{ font-family:var(--font-body); font-style:italic; text-transform:uppercase; letter-spacing:.13em; font-size:.575rem; font-weight:500; color:var(--gold); opacity:.9; line-height:1; white-space:nowrap; }
@media (min-width:861px) and (max-width:1080px){ .pw-brand-tag{ display:none; } .pw-brand-word{ font-size:1.1rem; white-space:normal; } }
.pw-brand-word em{ font-style:italic; color:var(--gold-bright); font-weight:500; }
.pw-nav-links{ display:flex; align-items:center; gap:36px; margin-inline:auto; }
.pw-nav-links a{ color:var(--white); opacity:.88; font-size:.94rem; letter-spacing:.02em; position:relative; padding-bottom:4px; }
.pw-nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold-bright); transition:right .3s var(--ease-out); }
.pw-nav-links a:hover{ opacity:1; } .pw-nav-links a:hover::after{ right:0; }
.pw-nav-cta{ border:1px solid rgba(255,253,248,.55); color:var(--white); padding:11.5px 23px; border-radius:999px; font-size:.99rem; letter-spacing:.02em; white-space:nowrap; transition:background .3s, border-color .3s, color .3s, transform .3s; }
.pw-nav-cta:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--navy-deep); transform:translateY(-1px); }
.pw-nav-toggle{ display:none; }
@media (max-width:860px){
  .pw-nav-links,.pw-nav-cta{ display:none; }
  .pw-nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:none; cursor:pointer; }
  .pw-nav-toggle span,.pw-nav-toggle span::before,.pw-nav-toggle span::after{ content:""; display:block; width:22px; height:2px; background:var(--white); position:relative; transition:.3s; }
  .pw-nav-toggle span::before{ position:absolute; top:-7px; } .pw-nav-toggle span::after{ position:absolute; top:7px; }
}
.pw-mobile-menu{ position:fixed; inset:0; background:var(--navy-deep); z-index:600; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); visibility:hidden; transition:transform .5s var(--ease-out), visibility 0s linear .5s; }
.pw-mobile-menu.is-open{ transform:translateY(0); visibility:visible; transition:transform .5s var(--ease-out), visibility 0s linear 0s; }
.pw-mobile-menu a{ color:var(--white); font-family:var(--font-display); font-size:1.6rem; }
.pw-mobile-close{ position:absolute; top:24px; right:24px; background:none; border:none; color:var(--white); font-size:2rem; cursor:pointer; line-height:1; }

/* buttons */
.pw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:999px; font-size:.95rem; letter-spacing:.02em; font-weight:500;
  font-family:var(--font-body); border:none; cursor:pointer; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s; }
.pw-btn-gold{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--navy-deep); box-shadow:0 10px 30px -8px rgba(232,184,75,.55); }
.pw-btn-gold:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -8px rgba(232,184,75,.7); }
.pw-btn-ghost{ background:transparent; border:1px solid rgba(255,253,248,.4); color:var(--white); }
.pw-btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-3px); }
.pw-btn-dark{ background:var(--navy); color:var(--white); }
.pw-btn-dark:hover{ background:var(--navy-deep); transform:translateY(-3px); }
.pw-btn-sm{ padding:9px 18px; font-size:.82rem; }

/* footer */
.pw-footer{ background:var(--navy-deep); color:rgba(255,253,248,.75); padding-block:64px 34px; }
.pw-footer-top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; padding-bottom:44px; border-bottom:1px solid rgba(255,253,248,.14); }
.pw-footer-brand{ display:flex; align-items:center; gap:12px; max-width:320px; }
.pw-footer-brand img{ width:44px; }
.pw-footer-brand-text{ font-family:var(--font-display); color:var(--white); font-size:1.1rem; }
.pw-footer-tag{ font-size:.85rem; margin-top:6px; color:rgba(255,253,248,.55); }
.pw-footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.pw-footer-col h4{ color:var(--white); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-body); font-weight:600; }
.pw-footer-col a{ display:block; font-size:.92rem; margin-bottom:10px; color:rgba(255,253,248,.75); transition:color .3s; }
.pw-footer-col a:hover{ color:var(--gold-bright); }
.pw-footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:.8rem; color:rgba(255,253,248,.5); }