/* ==========================================================================
   The site: colours, type, and the parts every page shares (the header on
   its photograph, the light and dark switch, the log-in card, the author's
   note, the footer). The library's own sections are in css/pages/
   library.css; the booklet reader has its own stylesheets.

   Light and dark: js/theme.js sets data-theme on <html> before the page is
   drawn, and every colour below has its dark twin under
   html[data-theme="dark"].

     1. Colours and type
     2. The basics
     2a. The newest-release message across the top
     3. The header
     4. The light and dark switch
     5. The log-in card and the phone menu
     6. The author's note
     7. The footer
     8. Plain pages (About, Privacy and the rest)
   ========================================================================== */

/* ---- 1. colours and type ---- */
:root{
  --bg:#ffffff;--surface:#ffffff;--sunken:#f4f6f9;--raised:#ffffff;
  --text:#2c3646;--head:#1d3a5f;--muted:#5a6377;
  --accent:#31649e;--accent-strong:#234b76;
  --line:#e2ebf6;--line-strong:#cbd9ea;--focus:#31649e;
  --shadow:0 1px 2px rgba(29,58,95,.06),0 10px 30px rgba(29,58,95,.08);
  --shadow-lift:0 2px 4px rgba(29,58,95,.08),0 22px 44px rgba(29,58,95,.16);
  --cover-edge:rgba(29,58,95,.10);
  /* the five series, as text and as the colour of their panels */
  --s-library:#31649e;--s-bumper:#b04b3a;--s-strangers:#197256;--s-daughters:#7a4796;--s-sons:#52525d;
  /* the logo: the script and ROLYN, and the flower behind its petals */
  --logo:#1d3a5f;--logo-flower:#4a80c2;
  /* the brand blue of the footer */
  --brand:#2b5a92;
  --f-display:"warbler-deck","Warbler Deck","Libre Caslon Text",Georgia,serif;
  --f-body:"Figtree",system-ui,sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#121820;--surface:#1b2330;--sunken:#161d28;--raised:#242e3d;
  --text:#c9d4e2;--head:#eef3f9;--muted:#9fb0c4;
  --accent:#8ab4e8;--accent-strong:#b3cff1;
  --line:#263243;--line-strong:#33425a;--focus:#8ab4e8;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35),0 22px 44px rgba(0,0,0,.4);
  --cover-edge:rgba(255,255,255,.10);
  --s-library:#8ab4e8;--s-bumper:#e8826e;--s-strangers:#4fb38c;--s-daughters:#b98ad6;--s-sons:#a3a3ae;
  --logo:#eef3f9;--logo-flower:#8ab4e8;
  --brand:#234a78;
  color-scheme:dark;
}

/* ---- 2. the basics ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--accent-strong);color:var(--bg);padding:12px 18px;border-radius:8px;font:600 .9rem var(--f-body);transition:top .2s}
.skip:focus{top:12px}
.eyebrow{font:600 .72rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* the logo, drawn inline (src/components/Logo.astro) */
.hrn,.hrm{display:block;width:auto;overflow:visible}
.hr-s path,.hr-r path{fill:var(--logo)}
.hr-f path{fill:var(--logo-flower)}
.hr-f .p1{fill:var(--s-library)}
.hr-f .p2{fill:var(--s-bumper)}
.hr-f .p3{fill:var(--s-strangers)}
.hr-f .p4{fill:var(--s-daughters)}
.hr-f .p5{fill:var(--s-sons)}
/* on the photograph and on the blue footer: white, with the petals lifted */
.on-photo{--logo:#ffffff;--logo-flower:#ffffff;--s-library:#a9c8ee;--s-bumper:#f0a091;--s-strangers:#7fd0ad;--s-daughters:#d3b0e8;--s-sons:#cfcfd8}

.all-white{--logo:#fff;--logo-flower:#fff;--s-library:#fff;--s-bumper:#fff;--s-strangers:#fff;--s-daughters:#fff;--s-sons:#fff}

/* ---- 2a. the newest-release message across the top ---- */
.release-bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:6px 60px;background:var(--brand);color:#fff;font:500 .92rem/1.35 var(--f-body);text-align:center}
.release-bar p{margin:0}
.release-bar-label{font-weight:700;letter-spacing:.03em}
.release-bar-flower{flex:none;width:22px;height:22px;fill:currentColor}
.release-bar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.release-bar-hide{position:absolute;right:10px;top:50%;translate:0 -50%;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.release-bar-hide:hover{background:rgba(255,255,255,.14)}
.release-bar-hide svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.release-bar :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:2px}
html:not(.js) .release-bar-hide{display:none}
.bar-hidden .release-bar{display:none}
@media(max-width:640px){.release-bar{padding:8px 52px 8px 14px;font-size:.84rem;gap:8px}.release-bar-more{display:none}}

/* ---- 3. the header, over the photograph ---- */
.top{position:relative;isolation:isolate}
.top-photo{position:absolute;inset:0;z-index:-1;background:url("/images/library-card.jpg") center/cover no-repeat}
.top-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(70,96,140,.78),rgba(86,116,168,.66) 45%,rgba(160,186,224,.62) 74%,rgba(240,245,251,.9) 90%,var(--bg) 100%)}
html[data-theme="dark"] .top-photo::after{background:linear-gradient(to bottom,rgba(12,22,38,.84),rgba(20,34,56,.76) 50%,rgba(18,24,32,.9) 84%,var(--bg) 100%)}
.masthead{background:linear-gradient(rgba(16,32,64,.5),rgba(16,32,64,.18) 70%,rgba(16,32,64,0))}
.masthead-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:108px}
.masthead-left{display:flex;align-items:center;gap:28px}
.brand{display:block;border-radius:6px;filter:drop-shadow(0 1px 10px rgba(20,40,80,.3))}
.brand .hrn{height:78px}
.masthead-rule{width:1px;height:40px;background:rgba(255,255,255,.35)}
.masthead-nav{display:flex;align-items:center;gap:30px;margin-right:6px}
.masthead-nav a{padding:4px 0;font:600 1.25rem var(--f-display);color:#fff;text-shadow:0 1px 10px rgba(30,50,90,.45);background:linear-gradient(var(--u),var(--u)) left bottom/0 2px no-repeat;transition:background-size .3s}
.masthead-nav a:hover,.masthead-nav a:focus-visible,.masthead-nav a[aria-current="page"]{background-size:100% 2px}
.u-green{--u:#7fd0ad}.u-coral{--u:#f0a091}.u-blue{--u:#a9c8ee}.u-purple{--u:#d3b0e8}.u-grey{--u:#cfcfd8}
.masthead-tools{display:flex;align-items:center;gap:22px}
.masthead :focus-visible{outline:2px solid #fff;outline-offset:3px}
.round-btn{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1.6px solid rgba(255,255,255,.85);background:transparent;color:#fff;transition:background-color .2s}
.round-btn:hover{background:rgba(255,255,255,.16)}
.round-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu{display:none}
@media(max-width:860px){
  /* The rounded corners are on the photograph, not the block, so the log-in
     card and the menu can hang below it without being cut off. */
  .top{margin:10px}
  .top-photo{border-radius:24px;overflow:hidden}
  .masthead-in{min-height:76px}
  .brand .hrn{height:50px}
  .masthead-rule,.masthead-nav{display:none}
  .masthead-tools{gap:10px}
  .menu{display:block}
  .round-btn{width:44px;height:44px}
}

/* ---- 4. the light and dark switch: the sun slides across and becomes the moon ---- */
.theme-switch{position:relative;flex:none;width:76px;height:40px;padding:0;border:1.6px solid rgba(255,255,255,.85);border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;transition:background .5s ease,border-color .5s}
.theme-switch-track{position:absolute;inset:0;background:linear-gradient(#9cc2ec,#cfe0f5);opacity:.55;transition:opacity .5s}
.theme-switch-knob{position:absolute;left:4px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(20,40,80,.3);transition:transform .55s cubic-bezier(.34,1.45,.55,1),background .4s}
.theme-switch-knob svg{grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,transform .55s cubic-bezier(.34,1.45,.55,1)}
.theme-switch-knob svg:first-child{color:#e8826e}
.theme-switch-knob svg:last-child{color:#f4f7fc;opacity:0;transform:rotate(-120deg) scale(.5)}
.theme-switch:hover .theme-switch-knob{transform:translateX(3px)}
html[data-theme="dark"] .theme-switch{background:#14243d;border-color:rgba(255,255,255,.6)}
html[data-theme="dark"] .theme-switch-track{background:linear-gradient(#0f1c30,#1d3a5f);opacity:1}
html[data-theme="dark"] .theme-switch-knob{transform:translateX(36px);background:#2b5a92}
html[data-theme="dark"] .theme-switch:hover .theme-switch-knob{transform:translateX(33px)}
html[data-theme="dark"] .theme-switch-knob svg:first-child{opacity:0;transform:rotate(120deg) scale(.5)}
html[data-theme="dark"] .theme-switch-knob svg:last-child{opacity:1;transform:none}
@media(max-width:860px){
  .theme-switch{width:64px;height:36px}
  .theme-switch-knob{width:26px;height:26px;margin-top:-13px}
  html[data-theme="dark"] .theme-switch-knob{transform:translateX(28px)}
  html[data-theme="dark"] .theme-switch:hover .theme-switch-knob{transform:translateX(26px)}
}
/* Without scripts the switch could do nothing, so it is not offered. */
html:not(.js) .theme-switch,html:not(.js) .login{display:none}

/* ---- 5. the log-in card, and the menu on a phone ---- */
.login,.menu{position:relative}
.pop{position:absolute;top:calc(100% + 12px);right:0;z-index:30;width:min(340px,calc(100vw - 32px));padding:24px 24px 22px;border-radius:16px;background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-lift);color:var(--text);text-align:left}
.pop-title{margin:0 0 6px;font:600 1.5rem var(--f-display);color:var(--head)}
.pop-text{font-size:.95rem;line-height:1.6;color:var(--muted)}
.pop :focus-visible{outline-color:var(--focus)}
.menu .pop{width:240px;padding:10px}
.menu .pop a{display:block;padding:10px 12px;border-radius:10px;font:600 1.15rem var(--f-display);color:var(--head)}
.menu .pop a:hover{background:var(--sunken)}
/* On a phone the cards hang from the whole header, not from their button,
   so they never run off the side of the screen. */
@media(max-width:860px){
  .login,.menu{position:static}
  .pop{top:100%;left:0;right:0;width:auto;margin:0 4px}
  .menu .pop{left:auto;width:240px}
}

/* ---- 6. the author's note ---- */
.note{width:min(620px,calc(100% - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:44px 44px 38px;border:0;border-radius:20px;background:var(--raised);color:var(--text);box-shadow:var(--shadow-lift);overflow:auto}
.note::backdrop{background:rgba(10,18,30,.5);backdrop-filter:blur(4px)}
.note[open]{animation:rise .4s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.note-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--sunken);color:var(--head)}
.note-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.note-face{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:16px}
.note-message{margin-top:10px;font:500 1.3rem/1.6 var(--f-display);color:var(--head)}
.note-sign{display:flex;align-items:center;gap:12px;margin-top:26px}
.note-sign .hrm{height:46px}
.note-sign span{font:600 1.4rem var(--f-display);color:var(--head)}
@media(max-width:560px){.note{padding:36px 24px 30px}.note-message{font-size:1.15rem}}

/* ---- 7. the footer ---- */
.site-footer{background:var(--brand);color:#e9f0f9;--head:#fff;--muted:#d0dcec;--line-strong:rgba(255,255,255,.3);--focus:#fff;--logo-flower:#cfe0f5}
.site-footer>.wrap{padding-top:56px;padding-bottom:22px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px 56px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot-brand a{display:block;border-radius:6px}
.foot-brand .hrn{height:112px}
/* The motto, each word its own series colour, cut out of the tagline. */
.motto{display:block;height:29px;aspect-ratio:1380/150;background:linear-gradient(90deg,#cfe0f5 0 17.1%,#f0a091 17.1% 46.5%,#7fd0ad 46.5% 82%,#d3b0e8 82% 100%);-webkit-mask:url("/images/logo/tagline-clear.svg") left center/contain no-repeat;mask:url("/images/logo/tagline-clear.svg") left center/contain no-repeat}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.foot-nav{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.foot-nav a{padding:4px 0;font:600 1.85rem/1.25 var(--f-display);color:var(--head)}
.foot-nav span{background:linear-gradient(var(--u),var(--u)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .3s}
.foot-nav a:hover span,.foot-nav a:focus-visible span,.foot-nav a[aria-current="page"] span{background-size:100% 2px}
.foot-social{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line-strong)}
.social{display:flex;gap:2px;margin:0 -6px 0 0}
.social a{position:relative;display:grid;place-items:center;width:44px;height:48px;color:var(--head);transition:color .18s,transform .18s}
.social svg{width:31px;height:31px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social a:hover,.social a:focus-visible{transform:translateY(-2px)}
.social a:nth-child(1):hover{color:#d3b0e8}
.social a:nth-child(2):hover{color:#a9c8ee}
.social a:nth-child(3):hover{color:#f0a091}
.social a:nth-child(4):hover{color:#7fd0ad}
.social-name{position:absolute;left:50%;top:calc(100% - 2px);transform:translate(-50%,-4px);font:600 .64rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.social a:hover .social-name,.social a:focus-visible .social-name{opacity:1;transform:translate(-50%,0)}
.foot-rule{width:1px;height:28px;background:var(--line-strong)}
.handle{font:500 1.05rem var(--f-body);letter-spacing:.01em;color:var(--head)}
.foot-strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;margin-top:40px;padding-top:14px;border-top:1px solid var(--line-strong);font-size:.88rem;color:var(--muted)}
.legal{display:flex;align-items:center;gap:16px}
.legal span{width:1px;height:12px;background:var(--line-strong)}
.legal a{display:inline-flex;align-items:center;min-height:24px;padding:4px 0;font:600 .66rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.legal a:hover,.legal a:focus-visible{color:var(--head);text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){
  .site-footer>.wrap{padding-top:44px}
  .foot-row{flex-direction:column;align-items:flex-start;gap:34px}
  .foot-row>*{min-width:0;max-width:100%}
  .foot-brand .hrn{max-width:100%}
  .foot-brand .hrn{height:92px}
  .foot-brand .motto{height:24px}
  .foot-right,.foot-nav{align-items:flex-start}
  .foot-nav a{font-size:1.6rem}
  .social{margin:0 0 0 -8px}
}
@media(max-width:560px){
  .foot-strip{flex-direction:column;align-items:flex-start}
}

/* ---- 8. plain pages ---- */
.page-top .masthead{background:linear-gradient(rgba(16,32,64,.55),rgba(16,32,64,.25))}
.page-head{padding:44px 0 84px;text-align:center;color:#fff}
.page-head .eyebrow{color:#fff;letter-spacing:.24em;text-shadow:0 1px 10px rgba(20,40,80,.5)}
.page-head h1{margin-top:10px;font:600 clamp(2.3rem,5.4vw,3.6rem)/1.08 var(--f-display);text-shadow:0 2px 22px rgba(30,50,90,.4);text-wrap:balance}
.prose{max-width:44rem;margin:0 auto;padding:56px 0 110px}
.prose > * + *,.prose-body > * + *{margin-top:1.1em}
.prose h2{margin-top:1.8em;font:600 1.6rem/1.2 var(--f-display);color:var(--head)}
.prose h3{margin-top:1.5em;font:600 1.25rem/1.25 var(--f-display);color:var(--head)}
.prose a:not(.button){color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.prose ul{padding-left:1.3em;list-style:disc}
.prose ol{padding-left:1.3em;list-style:decimal}
.prose li + li{margin-top:.4em}
.prose .updated{font-size:.9rem;color:var(--muted)}
.prose blockquote{margin:0;padding-left:18px;border-left:3px solid var(--line-strong);color:var(--muted)}
.page-actions{margin-top:28px}
.button{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:12px;background:var(--accent-strong);color:var(--bg);font:600 .95rem var(--f-body)}
.button:hover{filter:brightness(1.08)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(forced-colors:active){
  .theme-switch,.round-btn{border:1px solid ButtonText}
}