:root{
  --ink:#2b1d3a;
  --paper:#fdf6ec;
  --lav:#e7defc;
  --mint:#d5f3e3;
  --butter:#fff1bf;
  --blush:#ffdce8;
  --sky:#d8ecff;
  --coral:#ff5d73;
  --violet:#7c3aed;
  --lime:#65c518;
  --cyan:#0eb5cd;
  --sun:#ffb627;
  --radius:22px;
  --border:3px solid var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
  /* sibling of ras but violet/cyan lead the sky */
  background:
    radial-gradient(60vw 60vw at 10% -5%, var(--lav) 0%, transparent 60%),
    radial-gradient(52vw 52vw at 100% 8%, var(--sky) 0%, transparent 55%),
    radial-gradient(50vw 50vw at 0% 75%, var(--blush) 0%, transparent 55%),
    radial-gradient(45vw 45vw at 96% 96%, var(--mint) 0%, transparent 55%),
    linear-gradient(180deg, #fffaf0 0%, var(--paper) 40%, #f2e9f9 100%);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:var(--ink)}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 82% -10%, rgba(124,58,237,.16) 0%, rgba(14,181,205,.10) 45%, transparent 72%),
    radial-gradient(30vw 24vw at 4% 110%, rgba(14,181,205,.10) 0%, transparent 70%);
}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%}
header,main,footer{position:relative;z-index:1}

/* ---------- nav ---------- */
header{position:sticky;top:12px;z-index:50;display:flex;justify-content:center;padding:0 16px}
.navpill{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:rgba(253,246,236,.92);backdrop-filter:blur(8px);
  border:var(--border);border-radius:999px;
  box-shadow:5px 5px 0 var(--cyan),12px 18px 28px -10px rgba(43,29,58,.25);
  padding:8px 14px;max-width:880px;
}
.navpill .brand{
  font-family:"Fraunces",serif;font-weight:900;font-size:1.02rem;
  text-decoration:none;padding:2px 10px 2px 6px;border-radius:999px;background:var(--lav);
  border:2px solid var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
}
.brand .glyph{width:22px;height:22px;display:block}
.navpill nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.navpill nav a{
  text-decoration:none;font-weight:500;font-size:.92rem;
  padding:4px 11px;border-radius:999px;border:2px solid transparent;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.navpill nav a:hover{background:var(--sky);border-color:var(--ink)}
.navpill nav a[aria-current="page"]{background:var(--lav);border-color:var(--ink);font-weight:700}

/* ---------- hero / page heads ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.hero{padding:clamp(44px,8vw,92px) 0 clamp(20px,3vw,40px)}
.hero h1,.pagetitle{
  font-family:"Fraunces",serif;font-weight:900;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;letter-spacing:-.02em;
  text-shadow:
    2px 0 0 var(--paper),-2px 0 0 var(--paper),0 2px 0 var(--paper),0 -2px 0 var(--paper),
    2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper),
    5px 6px 0 rgba(43,29,58,.12);
}
.grad{
  background:linear-gradient(92deg,var(--violet) 0%,var(--cyan) 55%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* the paper-halo text-shadow paints through transparent clipped text, so use a glyph-alpha drop shadow */
  text-shadow:none;
  filter:drop-shadow(3px 4px 0 rgba(43,29,58,.18));
}
.kicker{
  display:inline-block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--sky);border:2px solid var(--ink);border-radius:999px;
  padding:4px 14px;margin-bottom:18px;transform:rotate(-1.5deg);
  box-shadow:3px 3px 0 var(--violet);
}
.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);margin:16px 0 8px;max-width:56ch;
  text-shadow:
    -1px -1px 0 rgba(253,246,236,.85),1px -1px 0 rgba(253,246,236,.85),
    -1px 1px 0 rgba(253,246,236,.85),1px 1px 0 rgba(253,246,236,.85),
    0 0 8px rgba(253,246,236,.9);
}
.pagehead{padding:clamp(40px,7vw,64px) 0 0}
.pagehead .pagetitle{font-size:clamp(2.2rem,6vw,3.6rem)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{
  text-decoration:none;font-weight:700;font-size:.95rem;
  border:var(--border);border-radius:14px;padding:10px 18px;background:#fff;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink),10px 14px 18px -8px rgba(43,29,58,.3)}
.btn:active{transform:translate(1px,1px) scale(.96);box-shadow:2px 2px 0 var(--ink)}
.btn.v{background:var(--lav)}
.btn.c{background:var(--sky)}
.btn.m{background:var(--mint)}
.btn.b{background:var(--blush)}
.btn.y{background:var(--butter)}

/* scroll-in reveal */
.reveal{opacity:0;translate:0 18px;transition:opacity .55s ease,translate .55s ease}
.reveal.on{opacity:1;translate:0 0}
:where(a,button,summary,input):focus-visible{
  outline:3px dashed var(--violet);outline-offset:3px;border-radius:6px;
}

/* ---------- keyword ticker ---------- */
.ticker{
  border-top:var(--border);border-bottom:var(--border);
  background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;padding:10px 0;margin:34px 0 0;
  transform:rotate(-.6deg) scale(1.02);
}
.ticker-track{display:inline-block;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{font-family:"JetBrains Mono",monospace;font-size:.85rem;margin:0 14px}
.ticker .t1{color:#d3c1ff}.ticker .t2{color:#7ee0f0}.ticker .t3{color:#ffb3c2}.ticker .t4{color:#b8f27c}.ticker .t5{color:var(--sun)}

/* ---------- sections ---------- */
section{padding:clamp(48px,7vw,84px) 0 0}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.01em;
  text-shadow:
    2px 0 0 var(--paper),-2px 0 0 var(--paper),0 2px 0 var(--paper),0 -2px 0 var(--paper),
    2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper);
}
.sec-head .squig{flex:1;min-width:60px;height:14px;background:
  radial-gradient(circle at 6px 0, transparent 5px, var(--ink) 5px, var(--ink) 7px, transparent 7px);
  background-size:16px 14px;background-repeat:repeat-x;opacity:.35}
.sec-head .tag{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lav);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;
  transform:rotate(1.5deg);
}

/* section doors (fork of ras garden beds) */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.door{
  display:block;text-decoration:none;color:inherit;cursor:pointer;
  border:var(--border);border-radius:var(--radius);padding:22px 20px 20px;position:relative;
  transition:transform .15s,box-shadow .15s;
  transform:rotate(var(--rot,0deg)) translateY(var(--lift,0px));overflow:hidden;
}
.door::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 46%, transparent 60%);
  translate:-120% 0;transition:translate .5s ease;
}
.door:hover::after{translate:120% 0}
.door:nth-child(4n+1){--rot:-.7deg;background:var(--lav);box-shadow:6px 6px 0 var(--violet),14px 20px 30px -10px rgba(43,29,58,.28)}
.door:nth-child(4n+2){--rot:.6deg;background:var(--sky);box-shadow:6px 6px 0 var(--cyan),14px 20px 30px -10px rgba(43,29,58,.28)}
.door:nth-child(4n+3){--rot:-.4deg;background:var(--blush);box-shadow:6px 6px 0 var(--coral),14px 20px 30px -10px rgba(43,29,58,.28)}
.door:nth-child(4n){--rot:.8deg;background:var(--butter);box-shadow:6px 6px 0 var(--sun),14px 20px 30px -10px rgba(43,29,58,.28)}
.door:hover{--rot:0deg;--lift:-6px}
.door:active{--lift:-2px}
.door:hover .go{transform:translateX(4px)}
.door .emo{
  font-size:1.6rem;line-height:1;margin-bottom:12px;width:52px;height:52px;
  display:grid;place-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:3px 3px 0 rgba(43,29,58,.25);transform:rotate(-3deg);transition:transform .18s;
}
.door:hover .emo{transform:rotate(3deg) scale(1.08)}
.door h3{font-family:"Fraunces",serif;font-size:1.18rem;margin-bottom:6px}
.door p{font-size:.92rem}
.door .go{display:inline-block;margin-top:12px;font-weight:700;font-size:.85rem;transition:transform .15s}
.door .count{
  position:absolute;top:14px;right:14px;font-family:"JetBrains Mono",monospace;
  font-size:.68rem;font-weight:700;background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:2px 9px;box-shadow:2px 2px 0 rgba(43,29,58,.25);
}

/* ---------- word wall ---------- */
.wallbar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 8px;position:sticky;top:76px;z-index:40;
}
.search{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:#fff;border:var(--border);border-radius:999px;padding:9px 18px;
  box-shadow:4px 4px 0 var(--violet);
}
.search input{
  border:none;outline:none;flex:1;font:inherit;font-size:.98rem;background:transparent;color:var(--ink);
}
.search input::placeholder{color:rgba(43,29,58,.58)}
.search .hits{font-family:"JetBrains Mono",monospace;font-size:.7rem;font-weight:700;opacity:.6;white-space:nowrap}
.wallcat{padding:clamp(26px,4vw,42px) 0 0}
.wallcat h2{
  font-family:"Fraunces",serif;font-weight:900;font-size:clamp(1.3rem,2.6vw,1.7rem);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:6px;
  text-shadow:2px 2px 0 var(--paper);
}
.wallcat h2 .cnt{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:700;
  background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:1px 9px;
  transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(43,29,58,.22);
}
.wallcat .note{font-size:.92rem;max-width:64ch;margin-bottom:14px;opacity:.9}
.wall{display:flex;flex-wrap:wrap;gap:9px}
.wchip{
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;user-select:none;
  border:2px solid var(--ink);border-radius:999px;padding:5px 14px;background:#fff;
  box-shadow:2.5px 2.5px 0 rgba(43,29,58,.28);
  transition:transform .1s,box-shadow .1s,background .15s;
  display:inline-flex;align-items:center;gap:6px;position:relative;
}
.wchip:nth-child(5n+1){background:var(--lav)}
.wchip:nth-child(5n+2){background:var(--sky)}
.wchip:nth-child(5n+3){background:var(--blush)}
.wchip:nth-child(5n+4){background:var(--mint)}
.wchip:nth-child(5n){background:var(--butter)}
.wchip:hover{transform:translate(-1.5px,-1.5px);box-shadow:4px 4px 0 rgba(43,29,58,.32)}
.wchip:active{transform:translate(1px,1px) scale(.97);box-shadow:1px 1px 0 rgba(43,29,58,.28)}
.wchip[aria-pressed="true"]{
  background:var(--ink);color:var(--paper);
  box-shadow:2.5px 2.5px 0 var(--cyan);
}
.wchip[aria-pressed="true"]::after{content:"✓";font-size:.75em;color:#7ee0f0}
.wchip.hide{display:none}
.wallcat.empty{display:none}

/* prompt tray */
.tray{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;
  width:min(760px,calc(100vw - 28px));
  background:var(--ink);color:var(--paper);border:var(--border);border-radius:18px;
  box-shadow:6px 6px 0 var(--violet),0 24px 44px -12px rgba(43,29,58,.5);
  translate:0 130%;transition:translate .3s ease;
}
.tray.show{translate:0 0}
.tray-top{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  border-bottom:2px solid rgba(253,246,236,.18);
  font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.1em;color:#cbb8ea;
}
.tray-top .tcount{margin-left:auto;background:var(--violet);color:#fff;border-radius:999px;padding:1px 9px}
.tray-body{
  display:flex;align-items:center;gap:12px;padding:10px 14px 12px;
}
.tray-text{
  flex:1;font-family:"JetBrains Mono",monospace;font-size:.85rem;line-height:1.5;color:#e8e0f5;
  max-height:3.2em;overflow-y:auto;word-break:break-word;
}
.tray-text .comma{color:#9b87bd}
.tray .btn{font-size:.85rem;padding:8px 14px;border-width:2px;flex-shrink:0}
.tray .btn.copy{background:var(--cyan);color:var(--ink)}
.tray .btn.clear{background:transparent;color:var(--paper);box-shadow:3px 3px 0 rgba(253,246,236,.25)}
.tray .btn.clear:hover{box-shadow:5px 5px 0 rgba(253,246,236,.3)}

/* mini wall (homepage hero demo) */
.heromock{
  margin:26px 0 4px;border:var(--border);border-radius:18px;background:#fff;
  box-shadow:7px 7px 0 var(--violet),18px 26px 34px -14px rgba(43,29,58,.35);
  overflow:hidden;max-width:640px;transform:rotate(-.5deg);
  transition:transform .18s,box-shadow .18s;
}
.heromock:hover{transform:rotate(0) translateY(-3px);box-shadow:9px 9px 0 var(--violet),22px 32px 40px -14px rgba(43,29,58,.4)}
.heromock .hm-top{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--lav) 0%,var(--sky) 60%,var(--mint) 100%);
  border-bottom:2px solid var(--ink);padding:8px 12px;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;
}
.hm-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);
  box-shadow:inset -1.5px -1.5px 0 rgba(43,29,58,.22)}
.hm-dot:nth-child(1){background:var(--coral)}
.hm-dot:nth-child(2){background:var(--sun)}
.hm-dot:nth-child(3){background:var(--lime)}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 16px 6px}
.hm-chips .wchip{font-size:.84rem;padding:4px 12px}
.hm-line{
  font-family:"JetBrains Mono",monospace;font-size:.82rem;
  margin:10px 16px 16px;padding:10px 12px;border:2px dashed rgba(43,29,58,.35);border-radius:10px;
  background:var(--paper);min-height:2.6em;color:var(--ink);
}
.hm-line .ph{opacity:.45}
.hm-line .slash{color:#fff;background:var(--violet);border-radius:6px;padding:1px 7px;
  font-weight:700;box-shadow:2px 2px 0 rgba(43,29,58,.3);margin-right:4px;display:inline-block}

/* ---------- guide pages ---------- */
.guide-grid{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;padding-top:26px}
.guide-body{max-width:70ch}
.guide-body h2{
  font-family:"Fraunces",serif;font-weight:900;font-size:clamp(1.4rem,3vw,1.9rem);
  margin:38px 0 12px;text-shadow:2px 2px 0 var(--paper);scroll-margin-top:90px;
}
.guide-body h2:first-child{margin-top:6px}
.guide-body p{margin:0 0 14px;font-size:1rem}
.guide-body ul,.guide-body ol{margin:0 0 14px 22px}
.guide-body li{margin-bottom:6px}
.guide-body .ex{
  font-family:"JetBrains Mono",monospace;font-size:.85rem;line-height:1.6;
  background:#fff;border:var(--border);border-radius:14px;padding:14px 16px;margin:16px 0 20px;
  box-shadow:5px 5px 0 var(--cyan);position:relative;
}
.guide-body .ex .exlabel{
  position:absolute;top:-12px;left:14px;font-family:"Space Grotesk",sans-serif;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;
}
.guide-body figure{margin:16px 0 20px;border:var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:5px 5px 0 var(--lav)}
.guide-body figure img{width:100%;display:block}
.guide-body figure figcaption{font-size:.78rem;padding:8px 12px;border-top:2px solid var(--ink);background:var(--paper)}
.guide-body .figrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 20px}
.guide-body .figrow figure{margin:0}
@media (max-width:600px){.guide-body .figrow{grid-template-columns:1fr}}
.guide-body .tip{
  font-size:.9rem;background:var(--mint);border:2px dashed var(--ink);border-radius:12px;
  padding:10px 14px;margin:16px 0 20px;
}
.guide-side{position:sticky;top:88px}
.toc{
  border:var(--border);border-radius:var(--radius);background:var(--lav);
  padding:20px;box-shadow:6px 6px 0 var(--violet),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(.7deg);
}
.toc h3{font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:10px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.toc a{text-decoration:none;font-size:.88rem;font-weight:500;display:block;padding:3px 8px;border-radius:8px;border:2px solid transparent}
.toc a:hover{background:#fff;border-color:var(--ink)}
.meta-badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.badge{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:#fff;
}
.badge.free{background:var(--mint)}
.badge.mj{background:var(--sky)}
.badge.sd{background:var(--blush)}
.badge.medium{background:var(--butter)}
.origin{
  font-size:.82rem;margin-top:22px;background:var(--butter);border:2px dashed var(--ink);
  border-radius:12px;padding:9px 13px;
}
.origin a{font-weight:700}

/* featured guide cards on home */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.gcard{
  background:#fff;border:var(--border);border-radius:var(--radius);
  padding:22px 20px 18px;display:flex;flex-direction:column;gap:10px;
  box-shadow:7px 7px 0 var(--lav),16px 24px 36px -12px rgba(43,29,58,.30);
  transition:transform .15s,box-shadow .15s;position:relative;cursor:pointer;
}
.gcard:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--cyan),22px 32px 44px -12px rgba(43,29,58,.35)}
.gcard h3{font-family:"Fraunces",serif;font-size:1.25rem}
.gcard h3 a{text-decoration:none}
.gcard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.gcard h3 a:hover{text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:3px}
.gcard p{font-size:.92rem;flex:1}

/* ---------- footer ---------- */
footer{margin-top:clamp(72px,9vw,110px);position:relative;padding:14px 0 26px;
  background:linear-gradient(180deg,var(--sky) 0%,#c8e2fb 55%,#cfd4f9 100%)}
.foot-wave{position:absolute;top:-42px;left:0;width:100%;height:44px;display:block}
.foot-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px;align-items:flex-start;padding-top:26px}
@media (max-width:820px){.foot-inner{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-inner{grid-template-columns:1fr}}
.foot-links{display:flex;flex-direction:column;gap:7px}
.foot-links a{
  font-weight:500;text-decoration:none;font-size:.95rem;position:relative;
  transition:padding-left .16s,color .16s;
}
.foot-links a::before{
  content:"✦";position:absolute;left:-2px;opacity:0;font-size:.7em;top:.35em;
  color:var(--violet);transition:opacity .16s;
}
.foot-links a:hover{padding-left:16px;color:var(--violet)}
.foot-links a:hover::before{opacity:1}
.foot-links h4,.foot-brand h4{font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:8px}
.foot-links h4{display:inline-flex;align-items:center;gap:8px}
.foot-links h4::after{content:"";flex:1;min-width:34px;height:2.5px;background:var(--ink);opacity:.2;border-radius:2px}
.foot-brand p{font-size:.9rem;max-width:38ch}
.foot-brand .glyph{width:56px;height:56px;margin-bottom:10px;filter:drop-shadow(3px 4px 0 rgba(43,29,58,.18))}
.colophon{
  margin-top:30px;font-size:.8rem;opacity:.75;text-align:center;position:relative;padding-top:18px;
}
.colophon::before{
  content:"✦ ✧ ✦";letter-spacing:1.2em;display:block;margin-bottom:8px;
  font-size:.7rem;opacity:.55;color:var(--violet);
}

/* keyword image peek card */
.peek{
  position:fixed;z-index:80;width:260px;pointer-events:none;
  background:#fff;border:var(--border);border-radius:14px;overflow:hidden;
  box-shadow:5px 5px 0 var(--violet),14px 20px 30px -10px rgba(43,29,58,.35);
  opacity:0;transform:translateY(4px) rotate(-.5deg);
  transition:opacity .15s,transform .15s;
}
.peek.show{opacity:1;transform:translateY(0) rotate(-.5deg)}
.peek img{width:100%;height:172px;object-fit:cover;display:block;border-bottom:2px solid var(--ink);background:var(--lav)}
.peek .pk-w{font-family:"Fraunces",serif;font-weight:900;font-size:.98rem;padding:8px 12px 0}
.peek .pk-d{font-size:.78rem;line-height:1.45;padding:2px 12px 10px}

/* copied toast */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:70;
  background:var(--lime);color:var(--ink);border:var(--border);border-radius:12px;
  font-weight:700;font-size:.9rem;padding:8px 18px;box-shadow:4px 4px 0 var(--ink);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* responsive */
@media (max-width:900px){
  .guide-grid{grid-template-columns:1fr}
  .guide-side{position:static;order:-1}
  .toc{transform:none}
}
@media (max-width:520px){
  .navpill nav a{font-size:.8rem;padding:3px 8px}
  .btnrow{gap:9px}
  .btn{padding:9px 14px;font-size:.88rem}
  .wallbar{top:66px}
  .tray-body{flex-wrap:wrap}
  .tray-text{flex-basis:100%}
}