/* ==========================================================================
 Homepage: library index
 Media-protection rules live in css/base/media-protection.css.
 ========================================================================== */
:root{
  --blue-ink:#234b76;--blue-deep:#31649e;--blue:#4a80c2;--blue-mid:#759ccb;--periwinkle:#96b0d2;
  --blue-soft:#b3c9e2;--blue-soft2:#cbd9ea;--blue-pale:#dfe8f3;--blue-pale2:#ebf1f9;--sky:#f3f7fc;
  --white:#fff;--gray:#f3f6fb;--gray-2:#e7eef7;--ink:#5a6377;--line:#e2ebf6;
  --shadow:rgba(110,135,180,.16);--shadow-soft:rgba(110,135,180,.09);
  --head:'Poppins',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --btn-1:#3d75ba;--btn-2:#5b8ec9;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#fff;overflow-x:hidden;}
/* custom scrollbar (desktop + Firefox; mobile keeps system default) */
html{scrollbar-width:thin;scrollbar-color:var(--blue-mid) var(--sky);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--sky);}
::-webkit-scrollbar-thumb{background:var(--blue-mid);border-radius:20px;border:3px solid var(--sky);}
::-webkit-scrollbar-thumb:hover{background:var(--blue);}
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.16;color:var(--blue-deep);letter-spacing:-.2px;}
img{max-width:100%;display:block;}a{color:inherit;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:.66rem;font-weight:600;color:var(--blue-mid);font-family:var(--head);}

/* ===== HEADER (matches site) ===== */
header{position:absolute;top:0;left:0;width:100%;z-index:50;}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0 18px;padding-top:calc(20px + env(safe-area-inset-top,0px));gap:20px;position:relative;}
.nav .links{display:flex;gap:14px;list-style:none;align-items:center;}
.nav .links-right{margin-left:auto;display:flex;align-items:center;}
.nav .links a{text-decoration:none;color:rgba(255,255,255,.82);font-size:.86rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--head);position:relative;white-space:nowrap;text-shadow:0 1px 8px rgba(60,80,120,.3);
  padding:8px 16px;border-radius:30px;background:rgba(255,255,255,0);transition:background .25s ease,color .25s ease;}
/* hover: a soft wash, and the text brightens to full white */
@media(hover:hover){.nav .links a:hover{background:rgba(255,255,255,.16);color:#fff;}}
/* current page: full-strength white, heavier, with a lit underline marker beneath */
.nav .links a.active{color:#fff;font-weight:700;background:rgba(255,255,255,.1);}
.nav .links a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:1px;height:2.5px;border-radius:3px;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9);}
/* the caret on an active dropdown parent matches */
.nav .links a.active .dd-caret{opacity:1;}
.nav .brand{display:flex;flex-direction:row;align-items:center;gap:13px;text-decoration:none;}
.nav .brand .brand-logo{height:68px;width:auto;display:block;flex:0 0 auto;}
.nav .brand .brand-logo-pic{display:block;flex:0 0 auto;line-height:0;}
.foot-brand .foot-logo-pic{display:block;line-height:0;margin-bottom:6px;}
.brand-logo-pic{display:block;flex:0 0 auto;line-height:0;}
.nav .brand .brand-name{display:flex;flex-direction:column;line-height:1.15;}
.nav .brand .brand-name .bn-ana{font-family:var(--head);font-weight:600;color:#fff;font-size:1rem;letter-spacing:2.5px;text-transform:uppercase;}
.nav .brand .brand-name .bn-tag{font-family:var(--head);font-style:italic;font-weight:400;color:rgba(255,255,255,.82);font-size:.72rem;letter-spacing:.2px;text-transform:none;margin-top:2px;}
.nav-cta{flex:0 0 auto;font-family:var(--head);font-weight:600;font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;color:var(--blue-deep);background:#fff;padding:11px 22px;border-radius:30px;transition:.25s;box-shadow:0 6px 18px rgba(40,60,100,.18);margin-left:18px;white-space:nowrap;}
@media(hover:hover){.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(40,60,100,.28);background:var(--sky);}}
.nav .brand .name{font-family:var(--head);font-weight:600;color:#fff;font-size:.78rem;letter-spacing:5px;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(60,80,120,.35);transition:color .3s;}
.menu-btn{display:none;background:#fff;border:none;cursor:pointer;padding:8px;z-index:120;position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 6px 18px rgba(40,60,100,.22);transition:transform .2s,box-shadow .2s;}
.menu-btn:active{transform:translateY(-50%) scale(.94);}
.menu-btn .bar{display:block;width:20px;height:2px;border-radius:2px;background:var(--blue-ink);transition:.3s;}
@media(hover:hover){.menu-btn:hover .bar{background:#f3f7fc;}}
@media(hover:hover){.menu-btn:hover .bar:nth-child(1){transform:translateY(-1px);}}
@media(hover:hover){.menu-btn:hover .bar:nth-child(3){transform:translateY(1px);}}

/* ===== PAGE HERO ===== */
.phero{position:relative;text-align:center;padding:110px 0 84px;padding-top:calc(110px + env(safe-area-inset-top,0px));color:#fff;overflow:hidden;
  background:linear-gradient(to bottom,#4a80c2 0%,#759ccb 42%,#cbd9ea 72%,#ebf1f9 88%,var(--white) 100%);}
.phero .phero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.phero .phero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(70,96,140,.74), rgba(94,124,176,.6) 42%, rgba(170,194,228,.62) 72%, rgba(233,240,250,.85) 88%, var(--white) 100%);}
.phero .wrap{position:relative;z-index:1;}
/* HERO CARD: mobile only, desktop keeps original full-width phero */
.hero-card{position:relative;}
@media(max-width:860px){
  .nav .brand .brand-logo{height:54px;}
  .nav .brand .wm-min{font-size:.64rem;letter-spacing:4px;gap:7px;}
  .nav .brand .wm-ana{font-size:1.5rem;letter-spacing:6px;text-indent:6px;}

  .hero-card{margin:12px;border-radius:26px;overflow:hidden;isolation:isolate;}
  .phero{margin:0;border-radius:0;padding:130px 0 56px;padding-top:calc(130px + env(safe-area-inset-top,0px));
    background:linear-gradient(to bottom,#4a80c2 0%,#86a0c9 55%,#a9c0e0 100%);}
  .phero .phero-photo::after{background:linear-gradient(to bottom, rgba(70,96,140,.7), rgba(94,124,176,.62) 55%, rgba(140,168,208,.6) 100%);}
  .phero .phero-photo{background-attachment:scroll;}
}
.phero h1{color:#fff;font-size:clamp(2.1rem,5.5vw,3.3rem);text-transform:lowercase;margin-bottom:14px;text-shadow:0 2px 18px rgba(50,68,108,.45);}
.phero p{max-width:560px;margin:0 auto;color:rgba(255,255,255,.96);font-weight:300;font-size:1.08rem;text-shadow:0 1px 10px rgba(50,68,108,.4);}

/* ===== TICKER ===== */
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none;}}

/* ===== soft fade + rise on cards as they enter view (once) ===== */
.lcard.tf-hidden{opacity:0;transform:translateY(16px);}
.lcard.tf-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion:reduce){
  .lcard.tf-hidden{opacity:1 !important;transform:none !important;}
}

/* ===== LIBRARY HELPERS ===== */

/* ===== GROUPS ===== */
/* --- from the author band --- */
.author-note{background:linear-gradient(180deg,var(--white),var(--blue-pale2));border-bottom:1px solid var(--line);}
.author-note .wrap{max-width:900px;padding:44px 24px;}
.author-card{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px 34px;
  box-shadow:0 18px 44px var(--shadow-soft);position:relative;overflow:hidden;}
.author-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);}
.author-photo{width:118px;height:158px;border-radius:16px;object-fit:cover;background:var(--blue-soft) center/cover no-repeat;flex:0 0 auto;}
.author-body{min-width:0;}
.author-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:600;
  font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:11px;}
.author-eyebrow::after{content:"";flex:1;height:1px;background:var(--line);}
.author-quote{font-family:var(--display);font-size:1.08rem;line-height:1.6;color:var(--blue-ink);font-weight:400;font-style:italic;margin:0;}
.author-sign{margin-top:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.pen-lead{font-family:var(--display);font-style:italic;font-weight:500;font-size:.82rem;letter-spacing:.3px;text-transform:none;color:var(--blue-mid);}
.pen-name{font-family:var(--head);font-weight:600;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-deep);}
@media(max-width:600px){
  .author-note .wrap{padding:32px 18px;}
  .author-card{grid-template-columns:1fr;gap:16px;text-align:center;padding:28px 24px;justify-items:center;}
.author-photo{width:104px;height:140px;}
  .author-card::before{width:100%;height:4px;bottom:auto;}
  .author-eyebrow{justify-content:center;}
  .author-sign{justify-content:center;}
  .author-eyebrow::after{display:none;}
  .author-quote{font-size:1.08rem;}
}
.groups{padding:50px 0 84px;}
.group{margin-bottom:68px;}
.group:last-child{margin-bottom:0;}
.group-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.group-head h2{font-size:clamp(1.5rem,4vw,2.1rem);text-transform:lowercase;white-space:nowrap;}
.group-head .ln{height:1px;background:var(--line);flex:1;}
.group-head .count{font-family:var(--head);font-size:.72rem;font-weight:500;letter-spacing:1px;color:var(--blue-mid);
  background:var(--blue-pale2);padding:5px 12px;border-radius:20px;white-space:nowrap;}
.group-sub{color:var(--blue-mid);font-weight:300;font-size:.96rem;margin-bottom:30px;max-width:640px;}

/* ===== LIBRARY: toolbar ===== */
.groups{padding:8px 0 96px;}
.lib-bar{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;
  padding:0 0 20px;border-bottom:1px solid var(--line);}
.lib-tabs{display:flex;gap:4px;background:var(--gray);border-radius:32px;padding:4px;}
.lib-tab{position:relative;font-family:var(--head);font-size:.79rem;font-weight:500;letter-spacing:.5px;
  text-transform:lowercase;color:var(--blue-deep);background:none;border:none;padding:9px 20px;border-radius:28px;
  cursor:pointer;white-space:nowrap;transition:color .22s,background .22s,box-shadow .22s;}
.lib-tab.active{background:var(--white);color:var(--blue-ink);font-weight:600;
  box-shadow:0 2px 8px rgba(63,90,135,.14);}
/* visually hidden, still read by screen readers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* compact sort: sizes to its own text and never stretches */
.lib-sort{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 0 auto;}
.sel-wrap{position:relative;display:inline-flex;align-items:center;}
.sel-wrap select{appearance:none;-webkit-appearance:none;font-family:var(--head);font-size:.72rem;font-weight:500;
  color:var(--blue-deep);background:none;border:none;border-radius:20px;
  padding:5px 22px 5px 9px;cursor:pointer;transition:background .2s,color .2s;}
.sel-wrap select:hover{background:var(--gray);color:var(--blue-ink);}
.sel-wrap select:focus-visible{outline:none;background:var(--accent-pale);box-shadow:0 0 0 2px var(--accent-soft);}
.sel-caret{position:absolute;right:7px;width:12px;height:12px;color:var(--blue-mid);pointer-events:none;}
.lib-count{font-family:var(--head);font-size:.72rem;font-weight:500;letter-spacing:1px;text-transform:lowercase;
  color:var(--blue-mid);margin:20px 0 30px;}

/* ===== LIBRARY: cards ===== */
/* generous gutters: the covers need air or the shelf reads as clutter */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:46px 34px;align-items:start;}
.lcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:none;border:none;padding:0;text-align:left;font-family:inherit;}
.lcard-ser>.ser-card{display:flex;flex-direction:column;width:100%;
  background:none;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;}

/* the art well: every cover keeps the same footprint, fanned series included */
.lc-art{display:block;position:relative;aspect-ratio:5.5/8.5;margin-bottom:20px;}
.lc-cover,.lcard .sc-stack{position:absolute;inset:0;}
.lc-cover{border-radius:12px;background:var(--blue-pale2);background-size:cover;background-position:center;
  box-shadow:0 4px 14px var(--shadow-soft);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;}

/* two lines are reserved for the title so every row keeps its rhythm */
.lc-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;}
.lc-title{font-family:var(--head);font-weight:600;font-size:.86rem;line-height:1.36;color:var(--blue-ink);
  text-transform:lowercase;letter-spacing:.1px;transition:color .22s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
/* the label is a filled pill carrying the family colour, so a booklet reads
   as its series at a glance. it may run to two lines and the row stays level. */
.lc-kind{align-self:start;display:inline-block;font-family:var(--head);font-size:.56rem;
  font-weight:600;letter-spacing:.7px;text-transform:uppercase;line-height:1.5;
  color:var(--blue-deep);background:var(--blue-pale2);
  padding:4px 10px;border-radius:12px;max-width:100%;}

/* explicit shadows rather than color-mix, which older iPadOS Safari does not support */
.lcard[data-fam="strangers"]{--fam:#21906b;--fam-sh:rgba(33,144,107,.34);}
.lcard[data-fam="daughters"]{--fam:#8a4bb0;--fam-sh:rgba(138,75,176,.34);}
.lcard[data-fam="sons"]{--fam:#3e3e48;--fam-sh:rgba(62,62,72,.32);}
.lcard[data-fam="bumper"]{--fam:#d85649;--fam-sh:rgba(216,86,73,.34);}
.lcard[data-fam] .lc-kind{background:var(--fam);color:#fff;box-shadow:0 2px 7px var(--fam-sh);}
/* standalone booklets (no series): white pill, blue border, blue text */
.lcard[data-kind="booklet"]:not([data-fam]) .lc-kind{background:#357ac6;color:#fff;box-shadow:0 2px 7px rgba(53,122,198,.34);}

@media(hover:hover){
  .lcard:hover .lc-cover{transform:translateY(-7px);box-shadow:0 20px 38px var(--shadow);}
  .lcard:hover .lc-title{color:var(--accent-deep);}
  .lcard[data-fam="daughters"]:hover .lc-title{color:#5d2f79;}
  .lcard[data-fam="sons"]:hover .lc-title{color:#26262e;}
  .lcard[data-fam="strangers"]:hover .lc-title{color:#15654b;}
  .lcard[data-fam="bumper"]:hover .lc-title{color:#a84637;}
}
.lcard[hidden]{display:none;}
.lib-none{text-align:center;color:var(--blue-mid);font-style:italic;font-weight:300;padding:60px 0;}

@media(max-width:900px){
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:44px 34px;}
  .lc-title{font-size:.82rem;}
}
@media(max-width:620px){
  .lib-bar{gap:16px;}
  /* keep tabs and sort on one row: the tabs shrink, the sort stays compact */
  .lib-bar{flex-wrap:nowrap;gap:8px;}
  .lib-tabs{flex:1;min-width:0;justify-content:center;}
  .lib-tab{flex:1;min-width:0;padding:9px 6px;font-size:.7rem;text-align:center;letter-spacing:.2px;}
  .lib-sort{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 0 auto;}
  .sel-wrap select{font-size:.68rem;padding:5px 18px 5px 7px;}
  .sel-caret{right:5px;width:11px;height:11px;}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:38px 32px;}
  .lc-art{margin-bottom:17px;}
  .lc-title{font-size:.78rem;}
  .lc-kind{font-size:.52rem;letter-spacing:.5px;padding:4px 9px;}
}
/* small phones still hold three across */
@media(max-width:400px){
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:34px 30px;}
}

/* ===== EXPANDABLE SERIES ===== */
/* series cards ride the same grid, but their rotated page-fan overhangs the card
   box (about 20px right, 17px below), so they get their own roomier gaps */
.series-grid{gap:46px 36px;}
/* series shown as a book-cover card with a caption below (signals a collection) */
.ser-card{width:100%;border:none;background:none;padding:0;cursor:pointer;font-family:inherit;text-align:left;display:block;}
/* stacked-pages effect: three real cover layers so it reads as a stack of booklets */
.ser-card{position:relative;}
.ser-card .sc-stack{display:block;position:relative;aspect-ratio:5.5/8.5;}
.ser-card .sc-page,.ser-card .sc-cover{position:absolute;inset:0;border-radius:14px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),box-shadow .5s cubic-bezier(.34,1.4,.5,1);
  transform-origin:bottom left;will-change:transform;}
/* back pages fanned slightly behind the front */
.ser-card .sc-page{box-shadow:0 6px 16px var(--shadow-soft);background-color:var(--blue-pale);}
.ser-card .sc-page2{transform:translate(3px,-4px) rotate(1.4deg);z-index:1;}
.ser-card .sc-page3{transform:translate(6px,-8px) rotate(2.8deg);z-index:0;}
/* front cover on top */
.ser-card .sc-cover{display:block;z-index:2;background-color:var(--blue-pale2);box-shadow:0 8px 22px var(--shadow-soft);}
/* hover: front lifts, pages fan out further (hover only, so it resets after click) */
/* the fan opens on hover, but only far enough to read as a stack; a wider spread
   used to swing the back page into the neighbouring card. Gated to real pointers
   so a tap on a touch screen never leaves it stuck open and overlapping. */
@media (hover:hover){
  .ser-card:hover .sc-cover{transform:translateY(-6px);box-shadow:0 18px 40px var(--shadow);}
  .ser-card:hover .sc-page2{transform:translate(5px,-6px) rotate(2.2deg);}
  .ser-card:hover .sc-page3{transform:translate(10px,-11px) rotate(3.8deg);}
}
.ser-card .sc-cover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:.62rem;letter-spacing:.5px;color:var(--blue-mid);text-align:center;padding:10px;line-height:1.3;}
.ser-card .sc-cover.has-img .ph{display:none;}
/* pressed + keyboard-focus states */
.ser-card:active .sc-cover{transform:translateY(-2px);transition:transform .1s ease;}
.ser-card:focus-visible{outline:none;}
.ser-card:focus-visible .sc-cover{box-shadow:0 0 0 3px var(--blue-soft),0 8px 22px var(--shadow-soft);}
@media (prefers-reduced-motion:reduce){
  .ser-card .sc-page,.ser-card .sc-cover{transition:none !important;}
}

/* ===== SERIES MODAL (popup) ===== */
.ser-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  visibility:hidden;transition:visibility 0s linear .34s;}
.ser-modal.open{visibility:visible;transition:visibility 0s;}
.ser-modal-backdrop{position:absolute;inset:0;background:rgba(24,34,58,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .34s ease;}
.ser-modal.open .ser-modal-backdrop{opacity:1;}
.ser-modal-box{position:relative;z-index:1;width:100%;max-width:720px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(20,34,66,.5);
  opacity:0;transform:translateY(24px) scale(.98);transform-origin:center bottom;
  transition:opacity .3s ease,transform .42s cubic-bezier(.22,1,.36,1);}
.ser-modal.open .ser-modal-box{opacity:1;transform:none;}
.ser-modal-head{position:relative;padding:28px 30px 22px;background:linear-gradient(135deg,#3666a4,#357ac6 72%,#4d8ed3);color:#fff;flex:0 0 auto;}
.ser-modal-head .sm-eyebrow{font-family:var(--head);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;opacity:.85;margin-bottom:5px;}
.ser-modal-head h3{color:#fff;font-size:1.6rem;text-transform:lowercase;margin:0 0 4px;}
.ser-modal-head p{font-size:.88rem;font-weight:300;opacity:.92;margin:0;max-width:52ch;}
.ser-modal-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
@media(hover:hover){.ser-modal-close:hover{background:rgba(255,255,255,.34);transform:rotate(90deg);}}
.ser-modal-close:active{transform:rotate(90deg) scale(.92);}
.ser-modal-close svg{width:18px;height:18px;}
.ser-modal-body{padding:26px 30px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.ser-modal-label{font-family:var(--head);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-mid);margin-bottom:18px;}
/* dark variant: applied only while a charcoal-palette series is open */
.ser-modal.dark .ser-modal-head{background:linear-gradient(135deg,#26262e,#3a3a44 72%,#52525d);}
.ser-modal.dark .ser-modal-label{color:#8a8a94;}
.ser-modal.dark .num-badge{background:rgba(28,28,35,.92);}
.ser-modal.dark .scover{background-color:#e8e8ed;}
.ser-modal.dark .ser-modal-close{background:rgba(255,255,255,.16);}
@media(hover:hover){.ser-modal.dark .ser-modal-close:hover{background:rgba(255,255,255,.28);}}
/* rose variant: applied only while a pink-palette series is open */
.ser-modal.rose .ser-modal-head{background:linear-gradient(135deg,#5d2f79,#7a4796 70%,#8a53a8);}
.ser-modal.rose .ser-modal-label{color:#b06b88;}
.ser-modal.rose .num-badge{background:rgba(94,36,64,.92);}
.ser-modal.rose .scover{background-color:#efedef;}
.ser-modal.rose .ser-modal-close{background:rgba(255,255,255,.18);}
@media(hover:hover){.ser-modal.rose .ser-modal-close:hover{background:rgba(255,255,255,.3);}}
.ser-modal.green .ser-modal-head{background:linear-gradient(135deg,#197256,#21906b 72%,#41a685);}
.ser-modal.green .ser-modal-label{color:#41a685;}
.ser-modal.green .num-badge{background:rgba(18,59,47,.92);}
.ser-modal.green .scover{background-color:#edefee;}
.ser-modal.green .ser-modal-close{background:rgba(255,255,255,.18);}
@media(hover:hover){.ser-modal.green .ser-modal-close:hover{background:rgba(255,255,255,.3);}}
.ser-modal.coral .ser-modal-head{background:linear-gradient(135deg,#b04b3a,#d85649 72%,#df7265);}
.ser-modal.coral .ser-modal-label{color:#df7265;}
.ser-modal.coral .num-badge{background:rgba(102,43,33,.92);}
.ser-modal.coral .scover{background-color:#efedec;}
.ser-modal.coral .ser-modal-close{background:rgba(255,255,255,.18);}
@media(hover:hover){.ser-modal.coral .ser-modal-close:hover{background:rgba(255,255,255,.3);}}
.ser-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 14px;}
/* stagger the cards in as the modal opens */
/* ===== SERIES MODAL CARDS =====
   these are built by JS at open time, so they need their own styling;
   the library grid outside uses .lcard and does not cover them */
.ser-modal-grid .scard{display:block;text-decoration:none;color:inherit;}
.ser-modal-grid .scover{position:relative;display:block;aspect-ratio:5.5/8.5;border-radius:10px;
  background:var(--blue-pale2);background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 4px 14px var(--shadow-soft);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s;}
@media(hover:hover){
  .ser-modal-grid .scard:hover .scover{transform:translateY(-5px);box-shadow:0 14px 30px var(--shadow);}
}
.ser-modal-grid .num-badge{position:absolute;bottom:7px;left:7px;z-index:2;
  width:22px;height:22px;border-radius:50%;background:rgba(63,90,135,.92);color:#fff;
  font-family:var(--head);font-weight:600;font-size:.66rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(40,56,86,.35);}
.ser-modal-grid .scover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:8px;text-align:center;font-family:var(--head);font-size:.56rem;line-height:1.3;
  color:var(--blue-mid);text-transform:lowercase;}
.ser-modal-grid .scover.has-img .ph{display:none;}
.ser-modal.dark .ser-modal-grid .num-badge{background:rgba(28,28,35,.92);}
.ser-modal.rose .ser-modal-grid .num-badge{background:rgba(94,36,64,.92);}
.ser-modal.green .ser-modal-grid .num-badge{background:rgba(18,59,47,.92);}
.ser-modal.coral .ser-modal-grid .num-badge{background:rgba(102,43,33,.92);}

.ser-modal-grid .scard{opacity:0;transform:translateY(12px);}
.ser-modal.open .ser-modal-grid .scard{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1);}
.ser-modal.open .ser-modal-grid .scard:nth-child(1){transition-delay:.08s;}
.ser-modal.open .ser-modal-grid .scard:nth-child(2){transition-delay:.14s;}
.ser-modal.open .ser-modal-grid .scard:nth-child(3){transition-delay:.20s;}
.ser-modal.open .ser-modal-grid .scard:nth-child(4){transition-delay:.26s;}
.ser-modal.open .ser-modal-grid .scard:nth-child(n+5){transition-delay:.30s;}

/* mobile: modal becomes a bottom sheet that slides up */
@media(max-width:560px){
  .ser-modal{padding:0;align-items:flex-end;}
  .ser-modal-box{max-width:100%;max-height:90vh;border-radius:24px 24px 0 0;transform:translateY(100%);
    transform-origin:center bottom;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .01s;}
  .ser-modal.open .ser-modal-box{transform:none;}
  .ser-modal-head{padding:24px 22px 20px;}
  .ser-modal-head h3{font-size:1.4rem;}
  /* little grab handle at the top of the sheet */
  .ser-modal-box::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:3;
    width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.55);}
  .ser-modal-body{padding:22px 20px 28px;}
  .ser-modal-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:13px 10px;}
  .ser-modal-grid .num-badge{width:20px;height:20px;font-size:.62rem;bottom:5px;left:5px;}
}
@media (prefers-reduced-motion:reduce){
  .ser-modal-box,.ser-modal-backdrop,.ser-modal-grid .scard{transition:opacity .15s ease !important;transform:none !important;}
}
body.modal-open{overflow:hidden;}
/* iOS needs html locked too, or it will still rubber-band the page */
html:has(body.modal-open){overflow:hidden;}
/* the box is focused for accessibility, but should never show a focus ring */
.ser-modal-box:focus,.ser-modal-box:focus-visible{outline:none;}
/* while a finger is dragging the sheet, follow it exactly (no easing) */
.ser-modal-box.dragging{transition:none;}
/* backdrop fades out as the sheet is flung/slid down */
.ser-modal.sliding-out .ser-modal-backdrop{opacity:0;transition:opacity .26s ease;}
/* wider invisible grab strip at the top of the sheet */
.ser-grab{position:absolute;top:0;left:0;right:0;height:34px;z-index:4;touch-action:none;display:none;}
@media(max-width:560px){ .ser-grab{display:block;} }

/* card grid */

/* series subgroup (nested under booklets) */
.book{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px var(--shadow-soft);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
@media(hover:hover){.book:hover{transform:translateY(-6px);box-shadow:0 20px 44px var(--shadow);}}
.book .cover{position:relative;aspect-ratio:5.5/8.5;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:var(--blue-pale2);
  background-color:var(--blue-pale);display:flex;align-items:center;justify-content:center;}
/* gradient + filename label shown until a real cover is added */
.book .cover::before{content:attr(data-cover);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue-soft),var(--blue-mid) 60%,var(--blue-deep));color:rgba(255,255,255,.92);
  font-family:var(--head);font-size:.66rem;letter-spacing:1.4px;text-transform:lowercase;text-align:center;padding:0 14px;}
.book .cover.has-img::before{display:none;}
.book .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.book .tag{font-family:var(--head);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue-mid);margin-bottom:8px;}
.book h3{font-size:1.2rem;text-transform:lowercase;color:var(--blue-deep);margin-bottom:8px;line-height:1.2;}
.book p{font-size:.92rem;color:var(--ink);font-weight:300;margin-bottom:18px;flex:1;}
.book .btn{flex:1 1 auto;text-align:center;text-decoration:none;font-family:var(--head);font-weight:500;letter-spacing:.4px;
  text-transform:lowercase;font-size:.8rem;padding:11px 16px;border-radius:30px;transition:.25s;white-space:nowrap;}
@media(hover:hover){.book .btn-read:hover{background:var(--blue-mid);transform:translateY(-2px);box-shadow:0 10px 22px var(--shadow);}}
@media(hover:hover){.book .btn-dl:hover{background:var(--blue-pale);transform:translateY(-2px);}}
@media(hover:hover){.book .btn-order:hover{border-color:var(--blue);background:var(--gray);transform:translateY(-2px);}}
a.cover{cursor:pointer;}
@media(hover:hover){.series-card:hover .series-link{color:var(--blue);transform:translateX(3px);}}

/* reveal */
.book{opacity:0;transform:translateY(24px);}
.book.in{opacity:1;transform:translateY(0);transition:opacity .6s ease, transform .6s cubic-bezier(.16,.84,.24,1);}
.group-head,.group-sub{opacity:0;transform:translateY(16px);}
.group-head.in,.group-sub.in{opacity:1;transform:translateY(0);transition:opacity .6s ease, transform .6s cubic-bezier(.16,.84,.24,1);}
@media (prefers-reduced-motion:reduce){.book,.group-head,.group-sub{opacity:1!important;transform:none!important;}}

/* ===== FOOTER ===== */
footer{background:var(--gray);color:var(--blue-mid);padding:56px 0 32px;text-align:center;border-top:1px solid var(--line);}
footer .fmark img{height:70px;margin:0 auto 8px;}
footer .fmark .name{font-family:var(--head);font-weight:600;color:var(--blue-deep);font-size:.8rem;letter-spacing:5px;text-transform:uppercase;margin-bottom:6px;}
footer .tag{font-family:var(--head);font-style:italic;color:var(--blue-mid);margin-bottom:24px;}
footer ul{list-style:none;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;padding:0;}
footer ul a{color:var(--blue-mid);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--head);transition:.2s;}
@media(hover:hover){footer ul a:hover{color:var(--blue-deep);}}
footer .fine{font-size:.72rem;color:var(--blue-soft);letter-spacing:.4px;font-weight:300;}
footer .socials{display:flex;gap:14px;justify-content:center;margin-top:22px;}
footer .socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--blue-pale2);color:var(--blue-deep);transition:.25s;}
@media(hover:hover){footer .socials a:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}}
footer .socials svg{width:18px;height:18px;}
/* panel footer (socials + tag + copyright) */
.panel-foot{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);}
.panel-foot .panel-tag{font-family:var(--head);font-style:italic;color:rgba(255,255,255,.9);font-size:.78rem;margin-top:14px;text-shadow:0 1px 6px rgba(46,62,94,.35);}
.panel-foot .panel-fine{font-size:.66rem;color:rgba(255,255,255,.78);letter-spacing:.3px;font-weight:300;margin-top:5px;text-shadow:0 1px 6px rgba(46,62,94,.35);}
.panel-foot a{padding:0!important;border-bottom:none!important;}
@media(hover:hover){.panel-foot a:hover{padding-left:0!important;}}
.panel-socials{display:flex;gap:18px;margin-top:16px;padding-top:6px;justify-content:flex-start;}
.mobile-panel .panel-socials a{display:inline-flex;align-items:center;justify-content:center;padding:6px;border:none;border-bottom:none;border-radius:0;background:none;color:#fff;transition:.2s;}
@media(hover:hover){.mobile-panel .panel-socials a:hover{opacity:.7;transform:translateY(-1px);}}
.panel-socials svg{width:22px;height:22px;}

/* MOBILE MENU (full screen) */
.fs-menu{position:fixed;inset:0;z-index:115;
  background:linear-gradient(165deg,#4a80c2 0%,#31649e 55%,#234b76 100%);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease;
  display:flex;flex-direction:column;overflow:hidden;}
/* soft texture for depth */
.fs-menu::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 20% 15%,rgba(255,255,255,.16),transparent 42%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 50% 50%,rgba(46,62,94,.18),transparent 60%);}
.fs-menu::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
.fs-menu.open{opacity:1;visibility:visible;}
/* close X owned by the menu (sits exactly where the hamburger is) */
.fs-close{position:absolute;z-index:6;background:none;border:none;cursor:pointer;padding:8px;width:42px;height:42px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  top:calc(35px + env(safe-area-inset-top,0px));right:24px;-webkit-tap-highlight-color:transparent;}
.fs-close .bar{display:block;width:24px;height:2px;border-radius:2px;background:#fff;box-shadow:0 1px 4px rgba(46,62,94,.3);transition:.3s;}
.fs-close .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.fs-close .bar:nth-child(2){opacity:0;}
.fs-close .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* header row inside menu mirrors the page header so the logo looks unchanged */
.fs-menu-header{position:absolute;top:0;left:0;width:100%;z-index:3;pointer-events:none;padding-top:env(safe-area-inset-top,0px);}
.fs-menu-header .wrap.nav{display:flex;align-items:center;justify-content:flex-start;margin:12px;padding:14px 24px 12px;padding-top:calc(14px + env(safe-area-inset-top,0px));}
.fs-brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:#fff;}
.fs-brand .brand-logo{height:62px;width:auto;color:#fff;flex:0 0 auto;}
.fs-brand .brand-logo-pic{display:block;flex:0 0 auto;line-height:0;}
.fs-brand .wm{display:flex;flex-direction:column;align-items:flex-start;line-height:1;color:#fff;}
.fs-brand .wm-ana{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2rem;letter-spacing:8px;text-transform:uppercase;text-indent:8px;}
.fs-brand .wm-min{display:flex;align-items:center;gap:9px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:.8rem;letter-spacing:5px;text-transform:uppercase;margin-top:3px;opacity:.95;}
.fs-brand .wm-min i{display:block;width:14px;height:1px;background:currentColor;opacity:.55;}
.fs-menu-scroll{position:relative;z-index:2;flex:1;overflow-y:auto;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:center;padding:118px 24px calc(24px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;}
.fs-menu-scroll .fs-nav{margin:0;}
.fs-nav{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:420px;gap:2px;}
.fs-link,.fs-accordion{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--head);font-weight:500;font-size:1.62rem;letter-spacing:.5px;text-transform:lowercase;
  color:#fff;text-decoration:none;padding:11px 4px;text-shadow:0 2px 10px rgba(46,62,94,.35);transition:.2s;-webkit-tap-highlight-color:transparent;}
.fs-link:active,.fs-accordion:active{transform:scale(.97);}
/* current page in the mobile menu: brighter, heavier, with a lit marker underneath */
.fs-link.active,.fs-accordion.active{font-weight:700;color:#fff;position:relative;}
.fs-link.active::after,.fs-accordion.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:6px;width:38px;height:2.5px;border-radius:3px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9);}
.fs-daily{display:inline-flex;align-items:center;gap:9px;margin-top:26px;align-self:flex-start;font-family:var(--head);font-weight:600;
  font-size:.9rem;letter-spacing:.5px;text-transform:lowercase;color:var(--blue-ink);background:#fff;
  text-decoration:none;padding:10px 20px;border-radius:30px;box-shadow:0 8px 22px rgba(40,60,100,.28);transition:.2s;-webkit-tap-highlight-color:transparent;}
.fs-daily svg{width:18px;height:18px;}
.fs-daily:active{transform:scale(.97);}
.fs-accordion{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;}
.fs-accordion .m-acc-caret{width:22px;height:22px;transition:transform .3s ease;opacity:.9;}
.fs-accordion[aria-expanded="true"] .m-acc-caret{transform:rotate(180deg);}
/* GOOD opens into a 2-column grid */
.fs-accordion-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .38s ease,opacity .3s ease;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:0;}
.fs-accordion-body.open{max-height:260px;opacity:1;margin-top:10px;margin-bottom:8px;}
.fs-sub{font-family:var(--head);font-weight:400;font-size:1.02rem;letter-spacing:.3px;color:rgba(255,255,255,.92);
  text-decoration:none;text-align:center;padding:11px 6px;border-radius:14px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);text-shadow:0 1px 6px rgba(46,62,94,.3);transition:.2s;}
.fs-sub:active{background:rgba(255,255,255,.18);}
.fs-sub.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
/* About submenu: smaller, simpler stacked links (just 2 items, no big cards) */
#mAboutBody{grid-template-columns:1fr;gap:0;max-width:240px;margin-left:auto;margin-right:auto;}
#mAboutBody.open{max-height:160px;}
#mAboutBody .fs-sub{font-size:.96rem;font-weight:300;letter-spacing:.4px;padding:9px 6px;background:none;border:none;border-radius:0;
  color:rgba(255,255,255,.82);}
#mAboutBody .fs-sub + .fs-sub{border-top:1px solid rgba(255,255,255,.14);}
#mAboutBody .fs-sub:active{background:none;color:#fff;}
#mAboutBody .fs-sub.active{background:none;border-top:1px solid rgba(255,255,255,.14);color:#fff;font-weight:400;}
#mAboutBody .fs-sub:first-child.active{border-top:none;}
#mOutreachBody{grid-template-columns:1fr;gap:0;max-width:240px;margin-left:auto;margin-right:auto;}
#mOutreachBody.open{max-height:240px;}
#mOutreachBody .fs-sub{font-size:.96rem;font-weight:300;letter-spacing:.4px;padding:9px 6px;background:none;border:none;border-radius:0;color:rgba(255,255,255,.82);}
#mOutreachBody .fs-sub + .fs-sub{border-top:1px solid rgba(255,255,255,.14);}
#mOutreachBody .fs-sub:active{background:none;color:#fff;}
#mOutreachBody .fs-sub.active{background:none;border-top:1px solid rgba(255,255,255,.14);color:#fff;font-weight:400;}
#mOutreachBody .fs-sub:first-child.active{border-top:none;}
/* GOOD submenu: smaller, simpler stacked links (matching About) */
#mGoodBody{grid-template-columns:1fr;gap:0;max-width:240px;margin-left:auto;margin-right:auto;}
#mGoodBody.open{max-height:320px;}
#mGoodBody .fs-sub{font-size:.96rem;font-weight:300;letter-spacing:.4px;padding:9px 6px;background:none;border:none;border-radius:0;
  color:rgba(255,255,255,.82);}
#mGoodBody .fs-sub + .fs-sub{border-top:1px solid rgba(255,255,255,.14);}
#mGoodBody .fs-sub:active{background:none;color:#fff;}
#mGoodBody .fs-sub.active{background:none;border-top:1px solid rgba(255,255,255,.14);color:#fff;font-weight:400;}
#mGoodBody .fs-sub:first-child.active{border-top:none;}
.fs-foot{margin-top:30px;text-align:center;}
.fs-socials{display:flex;gap:22px;justify-content:center;margin-bottom:14px;}
.fs-socials a{color:#fff;display:inline-flex;opacity:.92;transition:.2s;}
.fs-socials a:active{opacity:.6;}
.fs-socials svg{width:24px;height:24px;}
.fs-tag{font-family:var(--head);font-style:italic;color:rgba(255,255,255,.92);font-size:.92rem;margin:0 0 5px;text-shadow:0 1px 6px rgba(46,62,94,.35);}
.fs-fine{font-size:.68rem;color:rgba(255,255,255,.75);letter-spacing:.3px;font-weight:300;margin:0;}
/* hamburger morphs into X when menu open */
body.menu-open{overflow:hidden;}
body.menu-open header{z-index:130;}
/* ===== SLIM BRAND STRIP ===== */
.brandbar{border-bottom:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.06);}
.brandbar-inner{display:flex;align-items:flex-end;gap:6px;padding:5px 24px 0;}
.brand-tab{position:relative;background:none;border:none;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:.64rem;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.6);padding:9px 20px;transition:color .22s,background .22s;-webkit-tap-highlight-color:transparent;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;}
@media(hover:hover){.brand-tab:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);}}
.brand-tab.is-on{color:var(--blue-deep);background:#fff;}
@media(hover:hover){.brand-tab.is-on:hover{color:var(--blue-deep);background:#fff;}}
header .wrap.nav{justify-content:space-between;}
@media(max-width:860px){
  .brandbar-inner{padding:5px 12px 0;justify-content:center;gap:5px;}
  .brand-tab{font-size:.55rem;letter-spacing:1.4px;padding:8px 16px;}
}
.menu-btn.is-open .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.is-open .bar:nth-child(2){opacity:0;}
.menu-btn.is-open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){.nav .links{gap:20px;}.nav .links a{font-size:.78rem;letter-spacing:1px;}}
@media(max-width:860px){
  .nav .links-left,.nav .links-right{display:none;}
  .nav-cta{display:none;}
  .wrap.nav{justify-content:space-between;padding:14px 24px 12px;padding-top:calc(14px + env(safe-area-inset-top,0px));}
  header .wrap.nav{min-height:60px;padding-top:0;padding-bottom:0;}
  .nav .brand{justify-self:start;position:static;}
  .menu-btn{display:flex;right:14px;top:50%;transform:translateY(-50%);}
  .menu-btn:active{transform:translateY(-50%) scale(.94);}
  /* logo stays left, wordmark centered in the bar */
  .nav .brand .brand-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;}
  .nav .brand .brand-name .wm-min{justify-content:center;}
  .fs-menu-header .wrap.nav .brand .brand-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;}
  .fs-menu-header .wrap.nav .brand .brand-name .wm-min{justify-content:center;}
  .phero{padding-top:calc(150px + env(safe-area-inset-top,0px));}
}
@media(max-width:560px){.book-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto;}}

/* ===== FLOATING DAILY STUDY WIDGET ===== */
.daily-fab{position:fixed;right:22px;bottom:22px;z-index:200;
  right:calc(22px + env(safe-area-inset-right,0));bottom:calc(22px + env(safe-area-inset-bottom,0));}
/* when the mobile menu is open, the fab pops away; when it closes, it pops back */
.daily-fab.menu-open{animation:fabOut .28s ease forwards;pointer-events:none;}
.daily-fab.menu-closing{animation:fabIn .42s ease both;}
@keyframes fabOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.6) translateY(10px)}}
.fab-btn{position:relative;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(70,90,130,.38);transition:transform .25s,box-shadow .25s;
  animation:fabIn .5s ease 1s both;}
@media(hover:hover){.fab-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 36px rgba(70,90,130,.46);}}
.fab-btn svg{width:28px;height:28px;}
@keyframes fabIn{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.fab-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);opacity:.4;animation:pulse 5s ease-out infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.4}55%,100%{transform:scale(1.45);opacity:0}}
.fab-card{position:absolute;right:0;bottom:78px;width:308px;max-width:82vw;background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 22px 60px rgba(70,90,130,.34);opacity:0;visibility:hidden;transform:translateY(18px) scale(.92);
  transform-origin:bottom right;transition:.34s cubic-bezier(.18,.84,.24,1);border:1px solid var(--line);}
.fab-card.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.fab-card .fc-top{position:relative;background:linear-gradient(135deg,var(--blue-deep),var(--blue) 60%,var(--blue-mid));padding:20px 22px 18px;color:#fff;}
.fab-card .fc-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.18);border-radius:30px;padding:5px 13px 5px 9px;font-family:var(--head);font-weight:600;font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;}
.fab-card .fc-badge svg{width:15px;height:15px;}
.fab-card .fc-q{font-family:var(--head);font-weight:600;font-size:1.02rem;line-height:1.3;color:#fff;}
.fab-card .fc-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.16);border:none;cursor:pointer;color:#fff;width:26px;height:26px;border-radius:50%;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:.2s;}
@media(hover:hover){.fab-card .fc-close:hover{background:rgba(255,255,255,.3);}}
.fab-card .fc-body{padding:16px 20px 20px;}
.fab-card .fc-lead{font-family:var(--head);font-weight:500;color:var(--blue-deep);font-size:.95rem;margin-bottom:10px;}
.fab-card .fc-text{font-size:.83rem;color:var(--ink);font-weight:300;line-height:1.58;margin-bottom:12px;}
.fab-card .fc-text b{font-weight:600;color:var(--blue-deep);}
.fab-card .fc-link{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff;text-decoration:none;font-family:var(--head);font-weight:600;font-size:.84rem;letter-spacing:.4px;padding:13px 22px;border-radius:30px;transition:.25s;box-shadow:0 8px 20px rgba(70,90,130,.28);}
@media(hover:hover){.fab-card .fc-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(70,90,130,.4);}}
.fab-card .fc-link .arrow{transition:transform .25s;}
@media(hover:hover){.fab-card .fc-link:hover .arrow{transform:translateX(5px);}}
@media (prefers-reduced-motion:reduce){.fab-btn::before{animation:none;}.fab-btn{animation:none;}}

/* ===== PAGE TRANSITIONS ===== */
.fade-ready{opacity:0;}
.fade-in{opacity:1;transition:opacity .18s ease;}
@media (prefers-reduced-motion:reduce){.fade-ready,.fade-in{opacity:1!important;transition:none;}}
/* ===== PROFESSIONAL FOOTER (hub) ===== */
.site-footer{background:var(--white);border-top:1px solid var(--line);color:var(--blue-mid);margin-top:0;padding:0;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:36px;padding:40px 24px 32px;align-items:start;}
.foot-contact-col .foot-addr{display:block;color:var(--blue-mid);font-size:.92rem;font-weight:300;padding:6px 0;line-height:1.5;text-align:left;text-decoration:none;transition:.2s;}
@media(hover:hover){a.foot-addr:hover{color:var(--blue);padding-left:4px;}}
.foot-contact-col a{word-break:break-word;overflow-wrap:anywhere;hyphens:none;}
.foot-contact-col{min-width:0;}
.foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center;}
.foot-brand .foot-logo-pic{display:block;line-height:0;margin-bottom:6px;}
.foot-brand .foot-logo{height:86px;width:auto;margin-bottom:6px;display:block;}
.foot-brand .name{font-family:var(--head);font-weight:600;color:var(--blue-deep);font-size:.82rem;letter-spacing:4px;text-transform:uppercase;margin-bottom:6px;}
.foot-brand .tag{font-family:'Dancing Script',cursive;font-style:normal;font-weight:700;color:var(--blue);margin-bottom:20px;font-size:1.65rem;line-height:1;letter-spacing:.5px;}
.foot-brand .socials{display:flex;gap:12px;}
.foot-brand .socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--blue-pale2);color:var(--blue-deep);transition:.25s;}
@media(hover:hover){.foot-brand .socials a:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}}
.foot-brand .socials svg{width:18px;height:18px;}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;}
.foot-col h4{font-family:var(--head);font-weight:600;color:var(--blue-deep);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;align-self:flex-start;text-align:left;}
.foot-col a{display:block;color:var(--blue-mid);text-decoration:none;font-size:.92rem;font-weight:300;padding:6px 0;transition:.2s;text-align:left;}
@media(hover:hover){.foot-col a:hover{color:var(--blue);padding-left:4px;}}
.foot-bottom{border-top:1px solid var(--line);}
.foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 24px;}
.foot-bottom .fine{font-size:.72rem;color:var(--blue-soft);letter-spacing:.4px;font-weight:300;}
@media(max-width:760px){
  .site-footer{padding:0;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 24px;text-align:left;padding:22px 20px 20px;}
  .foot-brand{grid-column:1 / -1;text-align:center;margin-bottom:2px;}
  .foot-brand .foot-logo{height:52px;margin-bottom:2px;}
  .foot-brand .name{font-size:.68rem;letter-spacing:3px;margin-bottom:4px;}
  .foot-brand .tag{font-size:1.2rem;margin-bottom:10px;}
  .site-footer .foot-brand .tag-img-pic{width:130px;margin:2px 0 10px;}.site-footer .foot-brand .tag-img-pic .tag-img{width:100%;margin:0;}
  .site-footer .foot-brand .wm-foot{margin-bottom:6px;}
  .site-footer .foot-brand .wm-foot .wm-ana{font-size:1.7rem;letter-spacing:6px;text-indent:6px;}
  .site-footer .foot-brand .wm-foot .wm-min{font-size:.66rem;letter-spacing:4px;margin-top:4px;}
  .foot-brand .socials a{width:32px;height:32px;}
  .foot-brand .socials svg{width:15px;height:15px;}
  .foot-brand .socials{justify-content:center;}
  .foot-col h4{font-size:.64rem;margin-bottom:8px;}
  .foot-col a,.foot-contact-col a,.foot-contact-col .foot-addr{font-size:.82rem;padding:3px 0;}
  .foot-bottom .wrap{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:14px 18px;gap:8px;text-align:left;}
  .foot-bottom .fine{font-size:.62rem;letter-spacing:.2px;white-space:nowrap;}
  .fine-rights{display:none;}
  .site-footer .foot-legal{gap:11px;flex-wrap:nowrap;}
  .site-footer .foot-legal a{font-size:.62rem;letter-spacing:.1px;white-space:nowrap;}
}
@media(max-width:430px){
  .foot-bottom .wrap{padding:12px 12px;gap:6px;}
  .foot-bottom .fine{font-size:.56rem;}
  .site-footer .foot-legal{gap:8px;}
  .site-footer .foot-legal a{font-size:.56rem;}
  .foot-contact-col a{font-size:.78rem;}
}

/* logo wordmark lockup: Hannah big, ministries small with side lines */
.nav .brand .name, .foot-brand .name{display:flex;flex-direction:column;align-items:center;gap:1px;letter-spacing:normal;line-height:1;}
.nav .brand .name .n-ana, .foot-brand .name .n-ana{font-size:.92rem;letter-spacing:2.5px;line-height:1;}
.nav .brand .name .n-min, .foot-brand .name .n-min{display:flex;align-items:center;gap:7px;font-family:var(--head);font-weight:500;
  font-size:.56rem;letter-spacing:4px;text-transform:uppercase;}
.nav .brand .name .n-min i, .foot-brand .name .n-min i{display:block;width:16px;height:1px;background:currentColor;opacity:.6;}

/* Bible Bus card refinements */
.fab-card .fc-top{position:relative;overflow:hidden;}
.fab-card .fc-photo{position:absolute;inset:0;background-size:cover;background-position:center 22%;opacity:.30;}
.fab-card .fc-top > *{position:relative;z-index:1;}
.fab-card .fc-ana{font-family:'Dancing Script',cursive;font-weight:700;color:var(--blue);font-size:1.7rem;line-height:1;text-align:left;margin:2px 0 16px;}
.fab-card .fc-heart{font-family:var(--body);color:var(--blue-mid);font-size:.9rem;vertical-align:middle;margin-left:2px;}

/* hand-written Hannah signature draw */
.sign-wrap{display:flex;align-items:baseline;gap:8px;}
.sign-name{font-family:'Dancing Script',cursive;font-weight:700;color:var(--blue);font-size:2rem;line-height:1;
  background:linear-gradient(90deg,var(--blue) 50%, rgba(111,143,192,0) 50%);background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sign-wrap.draw .sign-name{animation:signWrite 1.6s ease forwards;}
@keyframes signWrite{from{background-position:100% 0;}to{background-position:0 0;}}
.sign-smile{font-family:'Dancing Script',cursive;font-weight:600;color:var(--blue);font-size:1.4rem;opacity:0;transform:translateY(4px);}
.sign-wrap.draw .sign-smile{animation:smilePop .5s ease 1.5s forwards;}
@keyframes smilePop{from{opacity:0;transform:translateY(4px) scale(.7);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion:reduce){
  .sign-name{-webkit-text-fill-color:var(--blue);background:none;animation:none!important;}
  .sign-smile{opacity:1!important;transform:none!important;animation:none!important;}
}

.nav .has-dd{position:relative;}
.nav .dd-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-indent:1.5px;}
.nav .dd-caret{width:12px;height:12px;transition:transform .25s;opacity:.8;}
@media(hover:hover){.nav .has-dd:hover .dd-caret{transform:rotate(180deg);}}
.nav .dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px) scale(.98);transform-origin:top center;
  background:rgba(63,90,135,.97);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;box-shadow:0 18px 44px rgba(40,56,88,.42);
  list-style:none;padding:7px;min-width:188px;opacity:0;visibility:hidden;transition:.24s cubic-bezier(.2,.85,.2,1);z-index:80;}
.nav .dropdown::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(63,90,135,.97);border-left:1px solid rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.18);}
@media(hover:hover){.nav .has-dd:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}}
.nav .dropdown li{display:block;}
.nav .dropdown a{display:block;padding:10px 16px;border-radius:9px;text-transform:none;letter-spacing:.2px;
  font-family:var(--head);font-weight:500;font-size:.86rem;color:rgba(255,255,255,.9);transition:background .16s,color .16s;white-space:nowrap;}
.nav .dropdown a::after{display:none;}
@media(hover:hover){.nav .dropdown a:hover{background:rgba(255,255,255,.14);color:#fff;}}
.nav .dropdown a.active{background:rgba(255,255,255,.2);color:#fff;}
.mobile-panel .m-sub{padding-left:14px!important;font-size:.95rem!important;}

/* ===== logo-style wordmark (rolled out) ===== */
.nav .brand .wm{display:flex;flex-direction:column;align-items:center;line-height:1;color:#fff;}
.nav .brand .wm-ana{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2rem;letter-spacing:8px;text-transform:uppercase;text-indent:8px;}
.nav .brand .wm-min{display:flex;align-items:center;gap:9px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:.8rem;letter-spacing:5px;text-transform:uppercase;margin-top:3px;opacity:.95;}
.nav .brand .wm-min i{display:block;width:14px;height:1px;background:currentColor;opacity:.55;}
.foot-brand .wm-foot{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--blue-deep);margin-bottom:10px;}
.foot-brand .wm-foot .wm-ana{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2.3rem;letter-spacing:9px;text-transform:uppercase;text-indent:9px;color:var(--blue-deep);}
.foot-brand .wm-foot .wm-min{display:flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:.82rem;letter-spacing:6px;text-transform:uppercase;margin-top:6px;color:var(--blue);}
.foot-brand .wm-foot .wm-min i{display:block;width:26px;height:1px;background:currentColor;opacity:.5;}
.foot-brand .tag-img-pic{display:block;width:190px;max-width:70%;margin:4px 0 20px;}.foot-brand .tag-img-pic .tag-img{display:block;width:100%;max-width:100%;height:auto;margin:0;}
.foot-legal{display:flex;align-items:center;gap:18px;}
.foot-legal a{font-size:.72rem;color:var(--blue-soft);letter-spacing:.4px;font-weight:300;text-decoration:none;transition:.2s;}
@media(hover:hover){.foot-legal a:hover{color:var(--blue);}}
a.xlink{cursor:pointer;}

/* a pointer or Apple Pencil click should not leave a focus ring sitting there;
   keyboard users still get one via :focus-visible */
:focus:not(:focus-visible){outline:none;}
.ser-card:focus:not(:focus-visible) .sc-cover{box-shadow:0 8px 22px var(--shadow-soft);}
/* the desktop nav has to survive from the mobile breakpoint (861px) up to ~1120px;
   iPad portrait sits right in that band and was spilling past the viewport */
@media(min-width:861px) and (max-width:1120px){
  .nav .links{gap:8px;}
  .nav .links a{font-size:.78rem;letter-spacing:1px;padding:8px 11px;}
  .nav-cta{margin-left:10px;padding:10px 16px;font-size:.73rem;letter-spacing:1px;}
}
/* grid items default to min-width:auto, so a long email or address can force
   its track wider than its 1fr share and push the page sideways */
.foot-grid>*{min-width:0;}
.foot-grid a,.foot-grid p,.foot-col a{overflow-wrap:anywhere;}
/* iOS / iPadOS: kill the grey-blue flash that lingers over a tapped control */
html,a,button,[role="button"],.scard,.ser-card,.book,.sz-toggle,.wn,summary{
  -webkit-tap-highlight-color:rgba(0,0,0,0);}
button,.ser-card,.sz-toggle,.back-float{-webkit-touch-callout:none;}

/* library card blurbs (expand in place) */
.lcard-wrap{display:flex;flex-direction:column;}
.lcard-wrap[hidden],.lcard-ser[hidden]{display:none !important;}

.lc-blurb-box{margin-top:8px;}
.lc-blurb{font-family:var(--display,'Cormorant Garamond',Georgia,serif);font-style:italic;font-size:1rem;line-height:1.45;color:var(--blue-mid);margin:0;max-height:4.35em;overflow:hidden;transition:max-height .4s ease;}
.lc-blurb.open{max-height:24em;}
.lc-more{margin-top:5px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--head);font-weight:600;font-size:.62rem;letter-spacing:.8px;text-transform:uppercase;color:var(--blue);transition:color .2s;}
.lc-more:hover{color:var(--blue-deep);}
body.dark .lc-blurb{color:#b8b8be;}
body.dark .lc-more{color:var(--blue-mid);}

.lib-sort .sort-label{font-family:var(--head);font-weight:600;font-size:.62rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--blue-mid);white-space:nowrap;padding-left:9px;}

/* seg toggle */

/* mobile menu: Library <-> Commentary as icon+label switch */
.fs-switch{display:flex;gap:12px;width:100%;margin-bottom:6px;}
.fs-switch-opt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;padding:22px 12px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);transition:background .22s,border-color .22s,color .22s,transform .15s;}
.fs-switch-opt .fs-switch-ic svg{width:30px;height:30px;display:block;}
.fs-switch-opt .fs-switch-lbl{font-family:var(--head);font-weight:600;font-size:.8rem;letter-spacing:1.4px;text-transform:uppercase;}
.fs-switch-opt.is-active{background:var(--blue-mid);border-color:var(--blue-mid);color:#fff;box-shadow:0 6px 18px rgba(20,40,70,.3);}
.fs-switch-opt:active{transform:scale(.97);}

/* ===== Library <-> Commentary sliding toggle (boutique-style) ===== */
.nav .lc-toggle{position:relative;display:inline-flex;border:2px solid rgba(255,255,255,.7);border-radius:999px;
  overflow:hidden;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.nav .lc-toggle .lc-slider{position:absolute;top:0;bottom:0;left:0;width:50%;background:#fff;border-radius:999px;
  transition:transform .45s cubic-bezier(.4,1.3,.5,1);z-index:0;}
.nav .lc-toggle.pos-1 .lc-slider{transform:translateX(100%);}
.nav .lc-toggle a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;box-sizing:border-box;
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:1.3px;font-size:.74rem;color:rgba(255,255,255,.85);text-decoration:none;
  padding:9px 22px;line-height:1;white-space:nowrap;transition:color .35s ease;text-align:center;}
.nav .lc-toggle a.active{color:var(--blue-deep);}
@media(hover:hover){.nav .lc-toggle a:not(.active):hover{color:#fff;}}

/* ===== MOBILE SWITCH: orb styled exactly like the old hamburger ===== */
.mswitch{display:none;}
@media(max-width:860px){ .mswitch{display:block;} }
.switch-orb{display:none;background:#fff;border:none;cursor:pointer;padding:0;
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(40,60,100,.22);transition:transform .2s,box-shadow .2s;z-index:600;color:var(--blue-ink);}
.switch-orb:active{transform:translateY(-50%) scale(.94);}
.switch-orb svg{width:22px;height:22px;display:block;}
.switch-orb.open{box-shadow:0 6px 20px rgba(40,60,100,.3);}
.switch-menu{position:absolute;top:calc(50% + 30px);right:14px;z-index:600;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -16px rgba(30,60,110,.5);
  overflow:hidden;min-width:190px;transform-origin:top right;opacity:0;transform:scale(.92) translateY(-6px);
  pointer-events:none;transition:opacity .22s,transform .22s;display:none;}
.switch-menu.open{opacity:1;transform:none;pointer-events:auto;display:block;}
.switch-menu a{display:flex;align-items:center;gap:12px;padding:14px 18px;text-decoration:none;
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:.82rem;
  color:var(--blue-mid);border-bottom:1px solid var(--line);transition:background .2s,color .2s;}
.switch-menu a:last-child{border-bottom:none;}
.switch-menu a svg{width:20px;height:20px;flex:0 0 auto;}
.switch-menu a.active{background:var(--blue-mid);color:#fff;}

@media(max-width:860px){ .switch-orb{display:flex;} }
@media(min-width:861px){ .switch-orb,.switch-menu{display:none !important;} }

/* toggle: indent from the right edge, vertically centered in the bar */
.nav .links-right{margin-right:6px;}
.nav .lc-toggle{align-self:center;}

/* match ministry mobile brand sizing exactly (placed last so it wins over the base rule) */
@media(max-width:860px){
  .nav .brand{gap:16px;}
  .nav .brand .wm-ana{font-size:1.5rem;letter-spacing:6px;text-indent:6px;}
  .nav .brand .wm-min{font-size:.64rem;letter-spacing:4px;gap:7px;}
  .nav .brand .wm-min i{width:14px;}
  .nav .brand .brand-logo{height:54px;}
}
@media(max-width:420px){
  .nav .brand .wm-ana{font-size:1.3rem;letter-spacing:5px;text-indent:5px;}
  .nav .brand .wm-min{font-size:.58rem;letter-spacing:3px;gap:6px;}
  .nav .brand .wm-min i{width:12px;}
  .nav .brand .brand-logo{height:48px;}
}

/* desktop toggle: place badge under the word so the pill height stays clean */
.lc-toggle a.soon .soon-badge{position:absolute;top:-7px;right:2px;margin:0;font-size:.42rem;padding:1px 4px;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.switch-menu a.soon .soon-badge{margin-left:auto;}
.fs-switch-opt.soon .soon-badge{position:absolute;top:6px;right:10px;margin:0;}

.lc-toggle a.soon .soon-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px;}
.lc-toggle a.soon .soon-word{display:block;}
.lc-toggle a.soon .soon-dev{display:block;font-style:italic;font-size:.46rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;opacity:.9;margin-top:2px;}
/* keep both halves vertically centered so Library lines up with the Commentary stack */
.lc-toggle a{align-items:center;}

/* mobile menu: "in development" as small italic under Commentary */
.switch-menu a.soon .sm-com-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.switch-menu a.soon .sm-dev{font-style:italic;font-size:.6rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--blue-mid);opacity:.85;margin-top:2px;}
/* tablet fs menu: "in development" as small italic under Commentary */
.fs-switch-opt.soon .fs-dev{display:block;font-style:italic;font-size:.62rem;font-weight:400;
  letter-spacing:.02em;text-transform:none;opacity:.82;margin-top:3px;}
/* ===== Commentary "in development" treatment ===== */
.lc-toggle a.soon,.switch-menu a.soon,.fs-switch-opt.soon{opacity:.68;cursor:default;}
/* desktop caption sits BELOW the toggle so overflow:hidden can't clip it */
/* mobile + fs menu: inline badge is fine (no overflow clip there) */
.soon-badge{display:inline-block;font-family:var(--head,inherit);font-size:.5rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:2px 6px;border-radius:999px;
  background:var(--blue-deep,#3666a4);color:#fff;margin-left:8px;vertical-align:middle;white-space:nowrap;}
.switch-menu a.soon{display:flex;align-items:center;}
.switch-menu a.soon .soon-badge{margin-left:auto;}

/* ===== account / login (from commentary) ===== */
.auth-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;margin-left:18px;flex:0 0 auto;}
.auth-link .auth-text{display:none;}
.auth-link .auth-orb{width:36px;height:36px;border-radius:50%;border:1.6px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s;flex:0 0 auto;}
.auth-link .auth-orb svg{width:19px;height:19px;display:block;}
@media(hover:hover){.auth-link:hover .auth-orb{background:rgba(255,255,255,.16);border-color:#fff;}}
.auth-link:active .auth-orb{transform:scale(.94);}
@media(max-width:860px){ .auth-link{display:none;} }
.switch-menu a.sm-auth{border-top:none;border-bottom:1px solid var(--gray-2);color:var(--blue-mid);
  text-transform:none;letter-spacing:.2px;font-weight:500;font-size:.74rem;padding:11px 18px;}
.switch-menu a.sm-auth svg{width:16px;height:16px;}
@media(hover:hover){.switch-menu a.sm-auth:hover{background:var(--blue-pale2);color:var(--blue-deep);}}

/* ===== author intro: blur-behind takeover + button under title ===== */
.intro-veil{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(35,48,78,.34);
  backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05);
  opacity:0;transition:opacity .4s ease;}
.intro-veil.show{opacity:1;}
.intro-veil[hidden]{display:none;}
.intro-veil.show

.intro-panel{position:relative;overflow:hidden;width:560px;max-width:100%;flex:0 0 auto;box-sizing:border-box;transform-origin:center center;
  height:520px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:42px 40px 38px;border-radius:22px;border:1px solid rgba(255,255,255,.15);
  background-size:cover;background-position:center 28%;background-repeat:no-repeat;
  box-shadow:0 40px 90px rgba(20,30,55,.5);
  opacity:1;}

/* colored overlay: darker at the bottom where the text sits, lighter up top so face shows */
.intro-tint{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(35,75,118,.12) 0%,
    rgba(35,75,118,.28) 42%,
    rgba(28,58,94,.72) 78%,
    rgba(22,46,76,.88) 100%);}
.intro-copy{position:relative;z-index:1;width:100%;}
.intro-eyebrow{font-family:var(--head);font-weight:600;font-size:.6rem;letter-spacing:2.5px;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 13px;}
.intro-msg{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.02rem;
  line-height:1.6;color:#fff;margin:0;text-shadow:0 1px 12px rgba(15,28,50,.5);}
.intro-sign{margin-top:18px;font-family:var(--head);font-weight:600;font-size:.78rem;
  letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(15,28,50,.5);}
.intro-sign small{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.72rem;letter-spacing:.3px;text-transform:none;color:rgba(255,255,255,.72);margin-bottom:2px;}

.intro-count{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(255,255,255,.9);color:var(--blue-ink);
  font-family:var(--head);font-weight:700;font-size:.9rem;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.intro-count.done{opacity:0;transform:scale(.7);pointer-events:none;}
.intro-count .cd-num{display:inline-block;line-height:1;}
.intro-count .cd-num.tick{animation:cdTick .45s cubic-bezier(.22,.61,.36,1);}
@keyframes cdTick{
  0%{opacity:0;transform:translateY(12px);}
  100%{opacity:1;transform:translateY(0);}
}
.intro-x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.9);border:none;color:var(--blue-ink);
  opacity:0;pointer-events:none;transform:scale(.8);
  transition:opacity .5s ease,transform .5s ease,background .2s;}
.intro-x.ready{opacity:1;pointer-events:auto;transform:scale(1);}
.intro-x:hover{background:var(--blue-pale);}
.intro-x svg{width:18px;height:18px;}
.intro-veil.leaving{opacity:0;transition:opacity .35s ease;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.intro-veil.leaving .intro-panel{width:560px;max-width:100%;height:520px;display:flex;flex:0 0 auto;opacity:1;transform:none;}

.author-btn{display:none;margin:20px auto 0;cursor:pointer;align-items:center;gap:10px;
  font-family:var(--head);font-weight:600;font-size:.62rem;letter-spacing:2px;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.13);border:1.4px solid rgba(255,255,255,.55);
  padding:7px 8px 7px 16px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .4s ease,background .25s,border-color .25s;}
.author-btn.landed{display:inline-flex;}
.author-btn.pop{transform:scale(1);opacity:1;}
.author-btn:hover{background:rgba(255,255,255,.22);border-color:#fff;}
.author-btn .ab-face{width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.85);background:var(--blue-soft) center/cover;flex:0 0 auto;}

@media(max-width:640px){
}
@media(prefers-reduced-motion:reduce){
  .intro-veil,.intro-panel,.intro-veil.leaving .intro-panel,.author-btn{transition:opacity .25s ease;transform:none;}
}

/* ----- library search, view toggle and list view ----- */
@media(max-width:420px){
  .nav .brand .brand-logo{height:48px;}
  .nav .brand .wm-min{font-size:.58rem;letter-spacing:3px;gap:6px;}
  .nav .brand .wm-ana{font-size:1.3rem;letter-spacing:5px;text-indent:5px;}
}

/* ===== library search + view toggle + list view ===== */
.lib-bar{flex-wrap:wrap;gap:12px;}
.lib-search{position:relative;flex:1 1 240px;min-width:190px;order:-1;}
.lib-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--blue-mid);pointer-events:none;display:block;}
.lib-search input{width:100%;font-family:var(--body);font-size:.9rem;color:var(--blue-ink);
  padding:10px 34px 10px 38px;border:1.5px solid var(--line);border-radius:11px;background:#fff;transition:border-color .2s,box-shadow .2s;}
.lib-search input::placeholder{color:var(--blue-mid);}
.lib-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-pale2);}
.lib-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;
  background:var(--gray-2);color:var(--blue-deep);border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;}
.lib-search-clear:hover{background:var(--blue-pale);}
.lib-view{display:inline-flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;}
.lib-view-btn{border:none;background:none;padding:9px 11px;cursor:pointer;color:var(--blue-mid);display:flex;align-items:center;transition:background .15s,color .15s;}
.lib-view-btn.active{background:var(--blue-pale);color:var(--blue-deep);}
.lib-view-btn svg{width:16px;height:16px;}

/* LIST VIEW: title+pill on one line, blurb tight underneath */
.lib-grid.is-list{display:flex;flex-direction:column;gap:0;}
.lib-grid.is-list .lcard-wrap,.lib-grid.is-list .lcard-ser{width:100%;max-width:none;
  display:grid;grid-template-columns:40px minmax(0,1fr);grid-auto-rows:auto;
  column-gap:14px;row-gap:3px;padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s;}
.lib-grid.is-list .lcard-wrap:last-child,.lib-grid.is-list .lcard-ser:last-child{border-bottom:none;}
.lib-grid.is-list .lcard-wrap:hover,.lib-grid.is-list .lcard-ser:hover{background:#fff;}
.lib-grid.is-list .lcard,.lib-grid.is-list .ser-card{display:contents;}
/* thumbnail: col1, spans both rows, top-aligned, fixed cover shape */
.lib-grid.is-list .lc-art{grid-column:1;grid-row:1 / span 2;align-self:start;width:40px;height:52px;margin:0;position:relative;}
.lib-grid.is-list .lc-cover{position:absolute;inset:0;border-radius:6px;background-size:cover;background-position:center;}
.lib-grid.is-list .sc-stack{position:absolute;inset:0;}
.lib-grid.is-list .sc-page2,.lib-grid.is-list .sc-page3{display:none !important;}
.lib-grid.is-list .sc-cover{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;background-size:cover;background-position:center;transform:none !important;}
/* title + pill inline: col2 row1 */
.lib-grid.is-list .lc-info,.lib-grid.is-list .ser-info{grid-column:2;grid-row:1;min-width:0;padding:0;
  display:flex;flex-flow:row wrap;align-items:center;gap:4px 9px;}
.lib-grid.is-list .lc-listtitle{order:1;display:inline-block;font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.15;color:var(--blue-ink);margin:0;}
.lib-grid.is-list .lc-kind{order:2;align-self:center;white-space:nowrap;max-width:none;margin:0;}
/* blurb: col2 row2, sits right under title, wraps fully */
.lib-grid.is-list .lc-blurb-box{grid-column:2;grid-row:2;margin:0;padding:0;max-width:100%;min-width:0;}
.lib-grid.is-list .lc-blurb{font-family:var(--display,'Cormorant Garamond',Georgia,serif);font-style:italic;font-size:.88rem;line-height:1.35;color:var(--blue-mid);margin:0;display:block;overflow:visible;max-height:none;transition:none;}
.lib-grid.is-list .lc-more{display:none;}
.lib-grid.is-list .lcard-ser .lc-blurb-box{display:none;}
.lib-grid.is-list .lc-more{display:none;} /* no read-more button in compact rows */
@media(max-width:640px){
  .lib-bar{gap:12px;align-items:stretch;}
  .lib-search{flex:1 1 100%;order:-2;min-width:0;}
  .lib-tabs{order:-1;flex:1 1 100%;justify-content:center;}
  .lib-sort{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 0 auto;}
  .lib-view{flex:0 0 auto;margin-left:auto;}
}

.lc-listtitle{display:none;}

/* series cards in list view: show one cover thumbnail, hide the fanned pages */
.lib-grid.is-list .lcard-ser{width:100%;}
.lib-grid.is-list .ser-card{display:grid !important;grid-template-columns:46px 1fr;align-items:center;column-gap:16px;padding:10px 14px;border-radius:12px;transition:background .15s;width:100%;}
.lib-grid.is-list .ser-card:hover{background:#fff;}
.lib-grid.is-list .ser-card .lc-art{grid-column:1;grid-row:1;width:46px;height:auto;aspect-ratio:5.5/8.5;margin:0;position:relative;}
.lib-grid.is-list .ser-card .sc-stack{position:absolute;inset:0;}
.lib-grid.is-list .ser-card .sc-page2,.lib-grid.is-list .ser-card .sc-page3{display:none !important;}
.lib-grid.is-list .ser-card .sc-cover{position:absolute;inset:0;width:100%;height:100%;border-radius:7px;background-size:cover;background-position:center;transform:none !important;}
.lib-grid.is-list .ser-card .lc-info{grid-column:2;grid-row:1;min-width:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;}

/* list view: ensure info column expands and pills/titles render full */

@media(max-width:900px){
  .lib-sort{flex-direction:row;align-items:center;gap:8px;}
  .lib-sort .sort-label{padding-left:0;}
}