/* styles-v20.css - THE HOUSE (2026-10-27, Tylan's word): the whole site is one house.
   This page is the Grand Entrance. Black is the main color; gold trim; jewel tones
   as accents; ornate sleek mid-century modern mixed with dark academia.
   Built on v19's candlelit palette. */
:root{
  --ink:#0b0805;
  --ink-2:#141009;
  --gold:#c9a227;
  --gold-bright:#e8c766;
  --bronze:#b08d57;
  --bronze-dim:#8a6d3f;
  --cream:#f0e6d2;
  --cream-dim:#cbbd9d;
  --parchment:#e9dcbc;
  --burgundy:#7b1e2b;
  --emerald:#1d5c3f;
  --royal:#3b1d5e;
  --ember:#b3541e;
  --wood:#241708;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.55;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(201,162,39,.15), transparent 60%),
    radial-gradient(ellipse 55% 35% at 88% 28%, rgba(123,30,43,.17), transparent 65%),
    radial-gradient(ellipse 55% 35% at 8% 62%, rgba(29,92,63,.13), transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 112%, rgba(59,29,94,.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(201,162,39,.014) 0 2px, transparent 2px 90px);
  background-attachment:fixed;
}
.glow{
  position:fixed;left:50%;top:-140px;transform:translateX(-50%);
  width:560px;height:300px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,176,66,.22), rgba(255,140,40,.08) 45%, transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0;
  animation:flicker 4.5s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
  42%{opacity:1;transform:translateX(-50%) scale(1.03)}
  68%{opacity:.75;transform:translateX(-50%) scale(.99)}
}
@media (prefers-reduced-motion: reduce){ .glow{animation:none} html{scroll-behavior:auto} }
.topnav{
  position:relative;z-index:2;max-width:920px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 0;
}
.topnav .brand{
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:700;
  color:var(--cream);text-decoration:none;letter-spacing:.03em;
}
.topnav .brand span{color:var(--gold)}
.topnav .pages{display:flex;gap:6px;align-items:center}
/* Topnav buttons in little gilt frames (2026-10-24): the same gold gradient frame
   the social pills carry; padding trades 2px for the 3px frame so each button
   keeps its exact outer size */
.topnav .pages a{
  color:var(--cream-dim);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:5px 12px;border-radius:999px;border:3px solid transparent;
  background:
    linear-gradient(rgba(20,16,9,.94), rgba(20,16,9,.94)) padding-box,
    linear-gradient(155deg, #7d5f1c 0%, #e8c766 28%, #96762a 52%, #e8c766 76%, #6e5518 100%) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255,246,200,.5),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 3px 8px rgba(0,0,0,.5);
  transition:all .2s ease;
}
.topnav .pages a:hover{color:var(--gold);box-shadow:
    inset 0 1px 1px rgba(255,246,200,.6),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 0 16px rgba(201,162,39,.35),
    0 3px 8px rgba(0,0,0,.5)}
.topnav .pages a.current{color:var(--gold);box-shadow:
    inset 0 1px 1px rgba(255,246,200,.6),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 0 12px rgba(201,162,39,.28),
    0 3px 8px rgba(0,0,0,.5)}
main{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:44px 22px 40px}
main.wide{max-width:920px}
header.hero{text-align:center;margin-bottom:34px}
.monogram{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--gold);
  background:radial-gradient(circle at 35% 30%, #2c2110, var(--ink-2));
  border:1px solid var(--bronze);
  box-shadow:0 0 0 5px rgba(176,141,87,.10), 0 0 0 6px rgba(176,141,87,.35), 0 0 38px rgba(201,162,39,.20), inset 0 0 18px rgba(0,0,0,.65);
}
h1{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:700;letter-spacing:.02em;color:var(--cream)}
h1 .spark{color:var(--gold);font-size:1.7rem;vertical-align:.35em}
.est{
  margin-top:8px;font-size:.74rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);
}
.rule{
  display:flex;align-items:center;gap:12px;max-width:340px;margin:16px auto 0;color:var(--gold);
  font-size:.8rem;
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bronze-dim),transparent)}
nav.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
/* Social pills in little gilt frames (2026-10-24): the gold gradient and depth of the
   old photo frames, carried on a 3px gradient border with a dark outer edge */
nav.socials a{
  color:var(--cream-dim);text-decoration:none;font-size:.82rem;font-weight:500;
  border:3px solid transparent;border-radius:999px;padding:5px 13px;
  background:
    linear-gradient(rgba(20,16,9,.94), rgba(20,16,9,.94)) padding-box,
    linear-gradient(155deg, #7d5f1c 0%, #e8c766 28%, #96762a 52%, #e8c766 76%, #6e5518 100%) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255,246,200,.5),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 3px 8px rgba(0,0,0,.5);
  transition:all .2s ease;
}
nav.socials a:hover{color:var(--gold);box-shadow:
    inset 0 1px 1px rgba(255,246,200,.6),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 0 16px rgba(201,162,39,.35),
    0 3px 8px rgba(0,0,0,.5)}
.page-head{text-align:center;margin-bottom:12px}
.page-head h1{font-size:2.6rem}
.page-head p{color:var(--cream-dim);margin-top:4px}
section{margin-top:46px}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.section-head::before,.section-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bronze-dim),transparent)}
.section-head h2{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--gold);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.section-sub{text-align:center;color:var(--cream-dim);font-size:.9rem;margin-bottom:18px;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.05rem}
/* The bookshelf (2026-10-30): the link books stand upright, spines out,
   side by side on a shelf board. Hover pulls a book up out of the shelf. */
.links{
  position:relative;display:flex;flex-direction:row;align-items:flex-end;justify-content:center;
  gap:10px;padding:30px 16px 0;margin-bottom:26px;
}
.links::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:-15px;height:13px;border-radius:2px;
  background:linear-gradient(180deg, #5a4020, #33240f 60%, #1f1505);
  box-shadow:0 12px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,199,102,.4);
}
a.link-card{
  position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  flex:1 1 0;max-width:118px;height:330px;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.22rem;letter-spacing:.05em;
  color:var(--parchment);
  padding:20px 10px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(90deg, #6d1a28, #551322 55%, #4a101b);
  border:1px solid rgba(0,0,0,.6);
  text-shadow:0 1px 1px rgba(0,0,0,.72), 0 -1px 0 rgba(255,240,200,.15), 0 2px 3px rgba(0,0,0,.55);
  box-shadow:
    inset 0 0 0 1px rgba(232,199,102,.30), inset 0 0 0 5px rgba(0,0,0,.14),
    inset 12px 0 16px -6px rgba(0,0,0,.62), inset -14px 0 18px -6px rgba(0,0,0,.74),
    inset 0 0 26px rgba(0,0,0,.35),
    inset 0 5px 0 rgba(233,220,188,.85), inset 0 7px 0 rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
a.link-card::before,a.link-card::after{
  content:"";position:absolute;left:7px;right:7px;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--gold-bright), var(--bronze));
  box-shadow:0 4px 0 -1px rgba(232,199,102,.55), 0 -4px 0 -1px rgba(232,199,102,.30);
  opacity:.85;
}
a.link-card::before{top:16px}
a.link-card::after{bottom:16px}
a.link-card:hover{transform:translateY(-14px);color:#fff;box-shadow:
    inset 0 0 0 1px rgba(232,199,102,.45), inset 0 0 0 5px rgba(0,0,0,.14),
    inset 12px 0 16px -6px rgba(0,0,0,.62), inset -14px 0 18px -6px rgba(0,0,0,.74),
    inset 0 0 26px rgba(0,0,0,.35),
    inset 0 5px 0 rgba(233,220,188,.85), inset 0 7px 0 rgba(0,0,0,.28),
    0 0 22px rgba(201,162,39,.30), 0 22px 26px rgba(0,0,0,.55)}
a.link-card small{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.06em;color:rgba(240,230,210,.75);text-shadow:none;margin-right:5px}
a.link-card.dolly{
  background:linear-gradient(90deg, #c94f83, #a03a68 55%, #7e2a56);
  border:1px solid #e88bb0;
  color:#ffe9f3;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,238,.45), inset 0 0 0 5px rgba(255,255,255,.08),
    inset 12px 0 16px -6px rgba(90,10,50,.5), inset -14px 0 18px -6px rgba(90,10,50,.42),
    inset 0 0 26px rgba(90,10,50,.25),
    inset 0 5px 0 rgba(247,227,210,.9), inset 0 7px 0 rgba(90,10,50,.3),
    0 0 24px rgba(255,105,180,.35), 0 8px 16px rgba(0,0,0,.5);
}
a.link-card.dolly:hover{box-shadow:
    inset 0 0 0 1px rgba(255,220,238,.55), inset 0 0 0 5px rgba(255,255,255,.08),
    inset 12px 0 16px -6px rgba(90,10,50,.5), inset -14px 0 18px -6px rgba(90,10,50,.42),
    inset 0 0 26px rgba(90,10,50,.25),
    inset 0 5px 0 rgba(247,227,210,.9), inset 0 7px 0 rgba(90,10,50,.3),
    0 0 34px rgba(255,105,180,.5), 0 22px 26px rgba(0,0,0,.55)}
a.link-card.dolly small{color:#f6c9da}
a.link-card.dolly .wings{color:#ffd3e6}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){ .grid{grid-template-columns:1fr} }
.card{
  --spine:var(--bronze);
  border-radius:8px;padding:20px 18px 18px 32px;position:relative;overflow:hidden;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(232,180,80,.17), transparent 55%),
    linear-gradient(180deg, rgba(233,220,188,.055), rgba(233,220,188,.015)),
    linear-gradient(180deg, #1d1508, #120d05);
  border:1px solid rgba(176,141,87,.45);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), inset 0 0 26px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.42);
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:13px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(232,199,102,.45) 30px 32px, rgba(0,0,0,.35) 32px 34px, transparent 34px 64px),
    linear-gradient(90deg, rgba(0,0,0,.45), var(--spine) 45%, var(--spine) 70%, rgba(0,0,0,.4));
  box-shadow:inset -2px 0 0 rgba(232,199,102,.55), inset 3px 0 0 rgba(232,199,102,.35);
}
.card h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;color:var(--cream);margin-bottom:5px}
.card p{font-size:.9rem;color:var(--cream-dim)}
.card a{color:var(--gold);text-decoration:none;font-weight:600;font-size:.88rem}
.card a:hover{text-decoration:underline}
a.card{display:block;text-decoration:none;transition:all .2s ease}
a.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(240,230,210,.08), inset 0 0 26px rgba(0,0,0,.35), 0 0 24px rgba(201,162,39,.22), 0 14px 24px rgba(0,0,0,.5)}
.card-img{display:block;width:calc(100% + 50px);max-width:none;height:112px;object-fit:cover;margin:-20px -18px 14px -32px;border-bottom:2px solid rgba(201,162,39,.6);box-shadow:0 6px 14px rgba(0,0,0,.45)}
a.card .go{color:var(--gold);font-weight:600;font-size:.88rem}
.plate{
  display:inline-block;margin-bottom:12px;padding:3px 12px 4px;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1c1408;
  background:linear-gradient(180deg, var(--gold-bright), var(--bronze));
  border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.accent-burgundy{--spine:#7b1e2b}
.accent-emerald{--spine:#1d5c3f}
.accent-royal{--spine:#3b1d5e}
.accent-ember{--spine:#b3541e}
.price{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--gold);font-weight:700}
.stamp{
  display:inline-block;margin-top:10px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bronze);border:1.5px solid rgba(176,141,87,.55);border-radius:4px;padding:3px 10px;
  transform:rotate(-2deg);
}
footer{
  position:relative;z-index:1;max-width:700px;margin:54px auto 0;text-align:center;color:var(--cream-dim);font-size:.85rem;
  border-top:1px solid rgba(176,141,87,.3);padding:20px 22px 36px;
}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .finial{color:var(--gold);font-size:1rem;margin-bottom:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crest{
  display:block;width:190px;max-width:58vw;height:auto;margin:0 auto 16px;border-radius:14px;
  box-shadow:0 0 0 1px rgba(176,141,87,.35), 0 0 34px rgba(201,162,39,.18), 0 10px 26px rgba(0,0,0,.5);
}
.crest-sm{width:104px;margin-bottom:12px}
.nameplate{
  display:block;width:min(580px,100%);height:auto;margin:2px auto 0;border-radius:10px;
  box-shadow:0 0 0 1px rgba(176,141,87,.30), 0 10px 26px rgba(0,0,0,.5);
}
.brand-crest{width:30px;height:30px;object-fit:cover;border-radius:50%;border:1px solid var(--bronze);vertical-align:-9px;margin-right:7px}
figure.shelf{margin:26px 0 6px}
figure.shelf img{
  display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--bronze);
  box-shadow:0 0 0 4px rgba(176,141,87,.12), 0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4);
}
figure.shelf figcaption{
  text-align:center;margin-top:9px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.98rem;color:var(--cream-dim);letter-spacing:.04em;
}
.section-img{
  display:block;width:100%;height:auto;border-radius:10px;margin:4px 0 18px;
  border:1px solid rgba(176,141,87,.55);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* Window frame: slim gold trim (2026-10-24 — was a deep 12px gilt frame with
   mullion bars and a vignette; now 6px of gold trim with a 1px dark edge) */
.shelf.window{
  position:relative;
  padding:6px;
  border:1px solid #4a380f;
  border-radius:132px 132px 14px 14px;
  background:linear-gradient(155deg, #7d5f1c 0%, #e8c766 28%, #96762a 52%, #e8c766 76%, #6e5518 100%);
  box-shadow:
    0 0 0 1px #171006,
    0 12px 26px rgba(0,0,0,.55);
}
.shelf.window img{border-radius:126px 126px 8px 8px;box-shadow:0 0 0 1px rgba(23,16,6,.85)}

div.card{transition:border-color .2s ease, box-shadow .2s ease}
div.card:hover{border-color:rgba(201,162,39,.8);box-shadow:inset 0 1px 0 rgba(240,230,210,.08), inset 0 0 26px rgba(0,0,0,.35), 0 0 18px rgba(201,162,39,.16), 0 8px 18px rgba(0,0,0,.5)}

/* Full framed photographs keep their natural shape */
.shelf.natural img{aspect-ratio:auto;object-fit:fill}

/* Framed photographs: slim gold trim (2026-10-24 — the heavy photographed gilt
   frame baked into the old composites is retired; a double gold line trims the
   plain photographs instead. The aspect-ratio hold keeps the figure box at the
   framed composites' shape so the page layout does not move) */
.framed-figure{margin:28px 0}
.framed-figure img{
  display:block;width:100%;height:auto;aspect-ratio:1907/1258;object-fit:cover;border-radius:5px;
  border:2px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(23,16,6,.85),
    0 0 0 5px rgba(201,162,39,.30),
    0 14px 28px rgba(0,0,0,.55);
}


/* Per-book sway offsets for the Float-In (kept from the 2026-10-16 design;
   that entrance itself was retired 2026-11-01) */
.links a.link-card:nth-child(1){--fly-x:-72px;--fly-r:-8deg}
.links a.link-card:nth-child(2){--fly-x:64px;--fly-r:7deg}
.links a.link-card:nth-child(3){--fly-x:-48px;--fly-r:-6deg}
.links a.link-card:nth-child(4){--fly-x:56px;--fly-r:6deg}
.links a.link-card:nth-child(5){--fly-x:-64px;--fly-r:-7deg}

/* Nav Pip icon sizing (carried from v16; v15 predates the pip-link markup) */
.topnav .pages a.pip-link{
  padding:2px 3px;line-height:0;
  border:0;background:none;box-shadow:none;
}
.topnav .pages a.pip-link img{
  display:block;width:30px;height:30px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,162,39,.5), 0 0 10px rgba(201,162,39,.25);
  transition:all .2s ease;
}
.topnav .pages a.pip-link:hover{box-shadow:none}
.topnav .pages a.pip-link:hover img{
  transform:scale(1.12);
}

/* ---- The House: rooms, doors, mid-century ornaments (v20) ---- */
.entrance-kicker{
  margin-top:14px;font-size:.72rem;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bronze);
}
.entrance-note{
  margin:10px auto 0;max-width:520px;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.08rem;color:var(--cream-dim);
}
.sunburst{
  width:120px;height:60px;margin:6px auto 0;opacity:.55;
  background:
    conic-gradient(from -90deg at 50% 100%,
      transparent 0deg, rgba(201,162,39,.5) 2deg, transparent 4deg,
      transparent 14deg, rgba(201,162,39,.5) 16deg, transparent 18deg,
      transparent 28deg, rgba(201,162,39,.5) 30deg, transparent 32deg,
      transparent 42deg, rgba(201,162,39,.5) 44deg, transparent 46deg,
      transparent 56deg, rgba(201,162,39,.5) 58deg, transparent 60deg,
      transparent 70deg, rgba(201,162,39,.5) 72deg, transparent 74deg,
      transparent 84deg, rgba(201,162,39,.5) 86deg, transparent 88deg,
      transparent 98deg, rgba(201,162,39,.5) 100deg, transparent 102deg,
      transparent 112deg, rgba(201,162,39,.5) 114deg, transparent 116deg,
      transparent 126deg, rgba(201,162,39,.5) 128deg, transparent 130deg,
      transparent 140deg, rgba(201,162,39,.5) 142deg, transparent 144deg,
      transparent 154deg, rgba(201,162,39,.5) 156deg, transparent 158deg,
      transparent 168deg, rgba(201,162,39,.5) 170deg, transparent 172deg);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 30%, transparent 72%);
  mask-image:radial-gradient(ellipse 100% 100% at 50% 100%, #000 30%, transparent 72%);
}
.rooms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:600px){ .rooms{grid-template-columns:1fr} }
a.door-card{--spine:var(--gold)}
a.door-card .door-plate{
  display:inline-block;margin-bottom:10px;padding:3px 12px 4px;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#1c1408;
  background:linear-gradient(180deg, var(--gold-bright), var(--bronze));
  border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
a.door-card.accent-burgundy{--spine:#7b1e2b}
a.door-card.accent-emerald{--spine:#1d5c3f}
a.door-card.accent-royal{--spine:#3b1d5e}

/* Bookshelf colors and heights (2026-10-30, explicit classes so every book
   is a different color: burgundy, emerald, royal purple under Dolly pink,
   midnight navy, deep teal). Tylan's rule: they all need to be different. */
a.link-card.book-info{background:linear-gradient(90deg, #6d1a28, #551322 55%, #4a101b);height:332px}
a.link-card.book-calendar{background:linear-gradient(90deg, #20563c, #17452e 55%, #123626);height:354px}
a.link-card.dolly{height:318px}
a.link-card.book-news{background:linear-gradient(90deg, #1e3d63, #17304f 55%, #122539);height:346px}
a.link-card.book-resources{background:linear-gradient(90deg, #175263, #12414f 55%, #0d323e);height:326px}
@media (max-width:640px){
  .links{gap:7px;padding:24px 8px 0}
  a.link-card{font-size:1.02rem;padding:16px 7px}
  a.link-card.book-info{height:262px}
  a.link-card.book-calendar{height:278px}
  a.link-card.dolly{height:252px}
  a.link-card.book-news{height:270px}
  a.link-card.book-resources{height:258px}
  a.link-card small{font-size:.6rem}
}

/* ---- The Midnight Scriptorium (2026-11-01) ----
   Homepage redesign designed jointly by Vivi and the Archivist, settled under
   Vivi's final say and approved by Tylan. Order: hero, gilt rail, the bookshelf
   promoted above the fold, the
   socials in one section in the hero. One woodwork and shadow system throughout:
   every shelf board shares the .links board's gradient and shadow exactly. */
header.hero{margin-bottom:6px}
.plate-row{display:flex;align-items:center;justify-content:center;gap:12px}
.plate-row .nameplate{margin:2px 0 0;flex:1 1 auto;min-width:0;max-width:520px}
.moth{width:30px;height:30px;flex:0 0 auto;opacity:.85}
.moth.flip{transform:scaleX(-1)}
.gilt-rail{
  position:relative;width:min(560px,92%);height:12px;margin:20px auto 0;
  background:
    radial-gradient(circle at 7px 50%, #241a05 0 1.3px, transparent 1.9px),
    radial-gradient(circle at calc(100% - 7px) 50%, #241a05 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 7px 50%, #f4dc8a 0 2.8px, #96762a 4.6px, #3a2a08 6px, transparent 6.6px),
    radial-gradient(circle at calc(100% - 7px) 50%, #f4dc8a 0 2.8px, #96762a 4.6px, #3a2a08 6px, transparent 6.6px);
}
.gilt-rail::before{
  content:"";position:absolute;left:12px;right:12px;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;
  background:linear-gradient(180deg, #e8c766, #96762a 60%, #6e5518);
  box-shadow:0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,246,200,.6);
}
section.scriptorium-books{margin-top:10px}

/* Spine craft: woven headband, off-center sheen, three raised hub bands,
   a gilt foot ornament, and the Contact book's memento mori */
.spine-art{
  position:absolute;inset:0;writing-mode:horizontal-tb;pointer-events:none;overflow:hidden;
  border-radius:5px 5px 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(10,7,3,.92) 0 3px, rgba(201,162,39,.8) 3px 5px, rgba(10,7,3,.92) 5px 8px) 0 0 / 100% 4px no-repeat,
    linear-gradient(90deg, transparent 16%, rgba(255,255,255,.09) 27%, transparent 42%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, transparent 0, transparent 18.6%, rgba(0,0,0,.42) 19.4%, rgba(255,240,200,.22) 20.4%, rgba(0,0,0,.32) 21.8%, transparent 23.4%, transparent 48.6%, rgba(0,0,0,.42) 49.4%, rgba(255,240,200,.22) 50.4%, rgba(0,0,0,.32) 51.8%, transparent 53.4%, transparent 78.6%, rgba(0,0,0,.42) 79.4%, rgba(255,240,200,.22) 80.4%, rgba(0,0,0,.32) 81.8%, transparent 83.4%, transparent 100%) 0 0 / 100% 100% no-repeat;
}
.spine-art::after{
  content:"❦";position:absolute;left:0;right:0;bottom:30px;text-align:center;
  font-size:15px;color:rgba(232,199,102,.85);text-shadow:0 1px 1px rgba(0,0,0,.6);
}
a.link-card.dolly .spine-art::after{color:rgba(255,220,238,.92)}
a.link-card.book-info .spine-art::before{
  content:"";position:absolute;top:32px;left:50%;transform:translateX(-50%);width:15px;height:15px;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8c766' d='M12 2a8 8 0 0 0-8 8c0 2.9 1.6 4.9 3 6.1V19a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2.9c1.4-1.2 3-3.2 3-6.1a8 8 0 0 0-8-8Z'/%3E%3Ccircle cx='8.6' cy='10.5' r='2' fill='%236d1a28'/%3E%3Ccircle cx='15.4' cy='10.5' r='2' fill='%236d1a28'/%3E%3Crect x='10' y='16.4' width='1.4' height='3' fill='%236d1a28'/%3E%3Crect x='12.6' y='16.4' width='1.4' height='3' fill='%236d1a28'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foot{
  position:absolute;left:7%;right:7%;bottom:-8px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 68%);
  filter:blur(6px);opacity:0;pointer-events:none;writing-mode:horizontal-tb;
}

/* The Float-In (2026-11-01, rebuilt at Tylan's word): the books drift in like
   the old entrance he loved, floating with a gentle back-and-forth sway, but
   smooth: one long ease, a small overshoot, no snaps. The gold sparkle trail
   rides the whole float, bright enough to see. */
html.js .links:not(.shelf-in) a.link-card{opacity:0}
.links.shelf-in a.link-card{animation:floatIn 1.7s cubic-bezier(.25,.8,.3,1) backwards}
.links.shelf-in a.link-card:nth-child(2){animation-delay:.12s}
.links.shelf-in a.link-card:nth-child(3){animation-delay:.24s}
.links.shelf-in a.link-card:nth-child(4){animation-delay:.36s}
.links.shelf-in a.link-card:nth-child(5){animation-delay:.48s}
@keyframes floatIn{
  0%{opacity:0;transform:translate3d(calc(var(--fly-x,0px)*.8),-115px,0) rotate(calc(var(--fly-r,0deg)*1.6)) scale(.96)}
  30%{opacity:1}
  55%{transform:translate3d(calc(var(--fly-x,0px)*-.32),9px,0) rotate(calc(var(--fly-r,0deg)*-.45)) scale(1)}
  78%{transform:translate3d(calc(var(--fly-x,0px)*.13),-5px,0) rotate(calc(var(--fly-r,0deg)*.18)) scale(1)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
@media (max-width:640px){
  @keyframes floatIn{
    0%{opacity:0;transform:translate3d(calc(var(--fly-x,0px)*.5),-70px,0) rotate(calc(var(--fly-r,0deg)*1.3)) scale(.96)}
    30%{opacity:1}
    55%{transform:translate3d(calc(var(--fly-x,0px)*-.2),7px,0) rotate(calc(var(--fly-r,0deg)*-.35)) scale(1)}
    78%{transform:translate3d(calc(var(--fly-x,0px)*.08),-4px,0) rotate(calc(var(--fly-r,0deg)*.14)) scale(1)}
    100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  }
}
.links.shelf-in .foot{animation:footIn 1.7s ease-out both}
.links.shelf-in a.link-card:nth-child(2) .foot{animation-delay:.12s}
.links.shelf-in a.link-card:nth-child(3) .foot{animation-delay:.24s}
.links.shelf-in a.link-card:nth-child(4) .foot{animation-delay:.36s}
.links.shelf-in a.link-card:nth-child(5) .foot{animation-delay:.48s}
@keyframes footIn{
  0%{opacity:0;filter:blur(6px)}
  70%{opacity:.45;filter:blur(4px)}
  100%{opacity:1;filter:blur(2px)}
}

/* The Restricted Section's wax seal (kept from the Scriptorium: Tylan loves
   the little lock). The seal sits on the pill in the hero socials; its red
   pulse plays once, shortly after the page loads. */
nav.socials a.restricted{position:relative}
nav.socials a.restricted::after{
  content:"";position:absolute;top:-8px;right:-6px;width:17px;height:17px;border-radius:50%;z-index:2;
  background:
    radial-gradient(circle at 50% 38%, rgba(24,3,3,.92) 0 1.8px, transparent 2.5px),
    linear-gradient(180deg, transparent 50%, rgba(24,3,3,.92) 50% 76%, transparent 76%) center / 3px 100% no-repeat,
    radial-gradient(circle at 35% 30%, #d84040, #8f1414 55%, #5f0d0d);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.5);
}
nav.socials a.restricted{animation:sealPulse .6s ease 1.4s 1}
@keyframes sealPulse{
  0%,100%{box-shadow:inset 0 1px 1px rgba(255,246,200,.5), inset 0 -1px 2px rgba(40,26,2,.55), 0 0 0 1px #171006, 0 3px 8px rgba(0,0,0,.5)}
  50%{box-shadow:inset 0 1px 1px rgba(255,246,200,.5), inset 0 -1px 2px rgba(40,26,2,.55), 0 0 0 1px #171006, 0 0 14px rgba(180,20,20,.55), 0 3px 8px rgba(0,0,0,.5)}
}

@media (max-width:640px){
  .moth{width:21px;height:21px}
  .plate-row{gap:7px}
  a.link-card.book-info{height:276px}
  a.link-card.book-calendar{height:292px}
  a.link-card.dolly{height:266px}
  a.link-card.book-news{height:284px}
  a.link-card.book-resources{height:272px}
  a.link-card.book-threads{height:302px}
  a.link-card.book-instagram{height:314px}
  a.link-card.book-tiktok{height:292px}
  a.link-card.book-youtube{height:310px}
  a.link-card.book-snapchat{height:296px}
  a.link-card.book-cashapp{height:306px}
  a.link-card{letter-spacing:.1em}
  .spine-art::after{display:none}


}
@media (prefers-reduced-motion: reduce){
  html.js .links:not(.shelf-in) a.link-card{opacity:1;transform:none}
  .links.shelf-in a.link-card{animation:none}
  .links.shelf-in .foot{animation:none}
  nav.socials a.restricted{animation:none}
  .foot{opacity:1;filter:blur(2px)}

}

/* Sparkle trail: tiny faint gold motes that drift down behind each book as it
   settles onto the shelf, then fade. Added at Tylan's ask, kept very faint. */
.links a.link-card:nth-child(1){--spark-delay:0s}
.links a.link-card:nth-child(2){--spark-delay:.12s}
.links a.link-card:nth-child(3){--spark-delay:.24s}
.links a.link-card:nth-child(4){--spark-delay:.36s}
.links a.link-card:nth-child(5){--spark-delay:.48s}
.sparkles{position:absolute;inset:0;pointer-events:none;writing-mode:horizontal-tb}
.sparkles i{
  position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;
  background:radial-gradient(circle, #fff3c4 0%, #e8c766 55%, rgba(232,199,102,0) 100%);
  box-shadow:0 0 7px rgba(232,199,102,.8);
}
.sparkles i:nth-child(1){left:18%;top:5%;--sd:0s}
.sparkles i:nth-child(2){left:34%;top:0;width:6px;height:6px;--sd:.05s}
.sparkles i:nth-child(3){left:52%;top:7%;--sd:.1s}
.sparkles i:nth-child(4){left:67%;top:1%;width:3px;height:3px;--sd:.03s}
.sparkles i:nth-child(5){left:83%;top:6%;--sd:.14s}
.sparkles i:nth-child(6){left:44%;top:13%;width:3px;height:3px;--sd:.08s}
.links.shelf-in .sparkles i{animation:sparkleTrail 1.8s ease-out both;animation-delay:calc(var(--spark-delay,0s) + var(--sd,0s))}
@keyframes sparkleTrail{
  0%{opacity:0;transform:translate3d(0,-10px,0) scale(.6)}
  25%{opacity:.75}
  60%{opacity:.45}
  100%{opacity:0;transform:translate3d(6px,46px,0) scale(1)}
}
@media (prefers-reduced-motion: reduce){.sparkles{display:none}}

/* Homepage top nav (2026-11-01, Tylan's word): his crest on the left, the Home
   link dead center, Vivi's portrait on the right. Scoped to .home-nav so the
   other pages keep their nav. Pill styling copied from .topnav .pages a. */
.topnav.home-nav{display:grid;grid-template-columns:1fr auto 1fr}
.topnav.home-nav .brand{justify-self:start}
.topnav.home-nav .home-link{justify-self:center;
  color:var(--cream-dim);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:5px 12px;border-radius:999px;border:3px solid transparent;
  background:
    linear-gradient(rgba(20,16,9,.94), rgba(20,16,9,.94)) padding-box,
    linear-gradient(155deg, #7d5f1c 0%, #e8c766 28%, #96762a 52%, #e8c766 76%, #6e5518 100%) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255,246,200,.5),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 3px 8px rgba(0,0,0,.5);
  transition:all .2s ease;
}
.topnav.home-nav .home-link.current{color:var(--gold);box-shadow:
    inset 0 1px 1px rgba(255,246,200,.6),
    inset 0 -1px 2px rgba(40,26,2,.55),
    0 0 0 1px #171006,
    0 0 12px rgba(201,162,39,.28),
    0 3px 8px rgba(0,0,0,.5)}
main{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:44px 22px 40px}
main.wide{max-width:920px}
header.hero{text-align:center;margin-bottom:34px}
.monogram{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--gold);
  background:radial-gradient(circle at 35% 30%, #2c2110, var(--ink-2));
  border:1px solid var(--bronze);
  box-shadow:0 0 0 5px rgba(176,141,87,.10), 0 0 0 6px rgba(176,141,87,.35), 0 0 38px rgba(201,162,39,.20), inset 0 0 18px rgba(0,0,0,.65);}
.topnav.home-nav .pip-link{justify-self:end;padding:2px 3px;line-height:0;border:0;background:none;box-shadow:none}
.topnav.home-nav .pip-link img{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(201,162,39,.5), 0 0 10px rgba(201,162,39,.25);transition:all .2s ease}
.topnav.home-nav .pip-link:hover{box-shadow:none}
.topnav.home-nav .pip-link:hover img{transform:scale(1.12)}

/* The social shelves and the elf door (2026-11-01, Tylan's design: the socials
   as books too, three to a shelf with trinkets filling the rows, all unique
   colors in exactly the current book style, sparkle and float included; The
   Restricted Section becomes a tiny chained elf door below the shelves). */
.links.stacked{margin-top:34px;padding-top:36px}
.book-threads{height:288px;background:linear-gradient(135deg, #3a3644, #17141d)}
.book-instagram{height:300px;background:linear-gradient(135deg, #8a2a5c, #4a1030)}
.book-tiktok{height:278px;background:linear-gradient(135deg, #14555e, #08262b)}
.book-youtube{height:296px;background:linear-gradient(135deg, #93302a, #571b12)}
.book-snapchat{height:282px;background:linear-gradient(135deg, #9a7d24, #5c4710)}
.book-cashapp{height:292px;background:linear-gradient(135deg, #14663a, #07271a)}
a.link-card.book-threads:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(43,43,48,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(150,150,160,.25)}
a.link-card.book-instagram:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(168,28,104,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(230,80,160,.30)}
a.link-card.book-tiktok:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(27,109,122,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(60,200,210,.28)}
a.link-card.book-youtube:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(176,18,24,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(230,40,45,.30)}
a.link-card.book-snapchat:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(194,160,31,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(230,200,70,.30)}
a.link-card.book-cashapp:hover{box-shadow:inset -12px 0 18px -6px rgba(0,0,0,.55), inset -12px 0 14px -6px rgba(18,160,74,.9), inset 2px 0 2px rgba(255,255,255,.22), inset -14px 0 22px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px rgba(0,0,0,.45), 0 0 22px rgba(50,220,120,.28)}
.trinket{flex:0 0 auto;align-self:flex-end;position:relative;line-height:0;padding-bottom:2px}
.trinket::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:5px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%)}
.trinket svg{display:block}
.elfdoor{margin:52px auto 0;text-align:center}
.door-link{display:inline-block;text-decoration:none}
.door-plaque{
  display:inline-block;margin-bottom:10px;padding:4px 12px 5px;border-radius:5px;border:3px solid transparent;
  font-family:var(--serif);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  background:linear-gradient(rgba(20,16,9,.94), rgba(20,16,9,.94)) padding-box,
    linear-gradient(155deg, #7d5f1c 0%, #e8c766 28%, #96762a 52%, #e8c766 76%, #6e5518 100%) border-box;
  box-shadow:inset 0 1px 1px rgba(255,246,200,.5), inset 0 -1px 2px rgba(40,26,2,.55), 0 0 0 1px #171006, 0 3px 8px rgba(0,0,0,.5);
}
.door-frame{
  display:block;position:relative;width:94px;height:130px;margin:0 auto;border-radius:47px 47px 5px 5px;
  border:4px solid #4a3512;
  background:
    repeating-linear-gradient(90deg, #2e1f10 0 21px, #241809 21px 23px),
    linear-gradient(180deg, #33230f, #1d1206);
  box-shadow:
    inset 0 0 0 2px rgba(232,199,102,.22),
    inset 0 -14px 22px rgba(0,0,0,.55),
    inset 0 10px 16px rgba(0,0,0,.4),
    0 0 0 2px #171006,
    0 10px 22px rgba(0,0,0,.55);
  overflow:hidden;
}
.door-chain{position:absolute;inset:0;pointer-events:none}
.door-chain svg{display:block;width:100%;height:100%}
.door-lock{position:absolute;right:14px;bottom:26px;transform-origin:50% -6px;animation:lockSway 3.4s ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
@keyframes lockSway{from{transform:rotate(2.4deg)}to{transform:rotate(-2.4deg)}}
.door-knob{position:absolute;right:9px;top:56%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 32%, #ffeeb0, #c9a227 55%, #6e5518);box-shadow:0 0 0 1.6px #171006, 0 1px 3px rgba(0,0,0,.6)}
.door-hinge{position:absolute;left:0;width:17px;height:7px;background:linear-gradient(180deg, #3c4046, #22252a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), 2px 0 3px rgba(0,0,0,.4)}
.door-hinge.h1{top:34px}
.door-hinge.h2{top:88px}
.door-step{display:block;width:150px;height:9px;margin:0 auto;border-radius:2px;background:linear-gradient(180deg, #4a3520 0%, #241a0c 30%, #171006 100%);box-shadow:0 0 0 1px #171006, 0 6px 12px rgba(0,0,0,.55)}
.door-link:hover .door-frame{box-shadow:inset 0 0 0 2px rgba(232,199,102,.4), inset 0 -14px 22px rgba(0,0,0,.55), inset 0 10px 16px rgba(0,0,0,.4), 0 0 0 2px #171006, 0 0 18px rgba(232,199,102,.22), 0 10px 22px rgba(0,0,0,.55)}
@media (prefers-reduced-motion: reduce){.door-lock{animation:none}}

/* The Cash App coin bag (2026-11-01, Tylan's word: not a book, a bag of gold
   coins with Cash App in green on it, sitting in the book's place on shelf
   three). Floats in with the shelf like the books did. */





@media (prefers-reduced-motion: reduce){}
/* The Grand Archive (2026-11-01, Tylan's word: the kicker renamed from The
   Grand Entrance and set in calligraphy). Pinyon Script copperplate, gold,
   title case, no letterspacing: script letterforms do the work. */
.entrance-kicker{font-family:'Pinyon Script','Cormorant Garamond',cursive;font-size:2.15rem;font-weight:400;letter-spacing:.02em;text-transform:none;color:#e8c766;margin-top:8px;line-height:1.1}
/* Social book brand colors, BASE flow (2026-11-01 fix: the earlier rules
   carried a doubled selector that matched nothing, so every social book
   fell back to the base burgundy on every screen. These clean rules sit
   outside any media query and outrank the base card background). */
a.link-card.book-threads{background:linear-gradient(90deg,#2b2b30,#17171a 55%,#0b0b0d)}
a.link-card.book-instagram{background:linear-gradient(90deg,#a81c68,#7c1450 55%,#521036)}
a.link-card.book-tiktok{background:linear-gradient(90deg,#1b6d7a,#114650 55%,#082a31)}
a.link-card.book-youtube{background:linear-gradient(90deg,#b01218,#8c0d13 55%,#61090d)}
a.link-card.book-snapchat{background:linear-gradient(90deg,#c2a01f,#9a7d16 55%,#6b570d)}
/* The dangling bag (2026-11-01, Tylan's word: the Cash App bag hangs from
   the middle shelf's underside by its rope, swinging lightly, and does NOT
   fly in with the books). The swing pivots at the rope's top loop. */
.bag-dangle{display:flex;justify-content:center;margin-top:-4px;position:relative;z-index:2}
.coinbag{display:block;line-height:0;text-decoration:none;transform-origin:50% 0;animation:bagSwing 2.8s ease-in-out infinite alternate}
.coinbag svg{filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.coinbag:hover svg{filter:drop-shadow(0 10px 18px rgba(232,199,102,.35))}
@keyframes bagSwing{from{transform:rotate(3.2deg)}to{transform:rotate(-3.2deg)}}
@media (prefers-reduced-motion: reduce){.coinbag{animation:none}}
/* Last shelf slimming (2026-11-01, Tylan's word: its two books read too fat
   on a row of their own). They keep book proportions instead of flexing to
   fill, the row centers, and a brass key trinket stands between them. */
.shelf-last .links{justify-content:center}
.shelf-last .links a.link-card{flex:0 1 168px}
@media (max-width:640px){.shelf-last .links a.link-card{flex-basis:104px}}
/* Trinket depth + the flying moth (2026-11-01, Tylan's word: trinkets were
   flat, top shelf needed one, and a moth that flies and lands on the books). */
.trinket svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
main{position:relative}
.moth-fly{position:absolute;left:6%;top:64px;z-index:6;pointer-events:none;line-height:0;animation:mothJourney 100s ease-in-out infinite}
.moth-fly .wl{transform-box:fill-box;transform-origin:100% 50%;animation:flutterL .9s ease-in-out infinite alternate}
.moth-fly .wr{transform-box:fill-box;transform-origin:0% 50%;animation:flutterR .9s ease-in-out infinite alternate}
@keyframes flutterL{from{transform:rotate(8deg)}to{transform:rotate(-7deg)}}
@keyframes flutterR{from{transform:rotate(-8deg)}to{transform:rotate(7deg)}}
@keyframes mothJourney{
  0%{transform:translate(0,0) rotate(4deg)}
  2.5%{transform:translate(20vw,90px) rotate(62deg)}
  3.5%{transform:translate(20vw,90px) rotate(6deg)}
  10%{transform:translate(20vw,90px) rotate(6deg)}
  12.5%{transform:translate(44vw,150px) rotate(74deg)}
  13.5%{transform:translate(44vw,150px) rotate(-4deg)}
  20%{transform:translate(44vw,150px) rotate(-4deg)}
  22.5%{transform:translate(58vw,300px) rotate(48deg)}
  23.5%{transform:translate(58vw,300px) rotate(8deg)}
  30%{transform:translate(58vw,300px) rotate(8deg)}
  32.5%{transform:translate(30vw,430px) rotate(-58deg)}
  33.5%{transform:translate(30vw,430px) rotate(-6deg)}
  40%{transform:translate(30vw,430px) rotate(-6deg)}
  42.5%{transform:translate(2vw,470px) rotate(-72deg)}
  43.5%{transform:translate(2vw,470px) rotate(5deg)}
  50%{transform:translate(2vw,470px) rotate(5deg)}
  52.5%{transform:translate(18vw,640px) rotate(52deg)}
  53.5%{transform:translate(18vw,640px) rotate(-5deg)}
  60%{transform:translate(18vw,640px) rotate(-5deg)}
  62.5%{transform:translate(46vw,700px) rotate(58deg)}
  63.5%{transform:translate(46vw,700px) rotate(7deg)}
  70%{transform:translate(46vw,700px) rotate(7deg)}
  72.5%{transform:translate(52vw,800px) rotate(30deg)}
  73.5%{transform:translate(52vw,800px) rotate(-3deg)}
  80%{transform:translate(52vw,800px) rotate(-3deg)}
  82.5%{transform:translate(10vw,330px) rotate(-44deg)}
  83.5%{transform:translate(10vw,330px) rotate(4deg)}
  90%{transform:translate(10vw,330px) rotate(4deg)}
  92.5%{transform:translate(0,0) rotate(-30deg)}
  93.5%{transform:translate(0,0) rotate(4deg)}
  100%{transform:translate(0,0) rotate(4deg)}
}
@media (prefers-reduced-motion: reduce){.moth-fly{display:none}}
/* Trinkets sit ON the board (2026-11-01, Tylan's word: they floated a few
   pixels above the shelf; each drawing carries a little air at its base). */
.trinket{transform:translateY(2px)}