/* ==========================================================================
   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
     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}
/* The side space grows a little with the screen, and the page widens to
   1600px, so a big screen is filled rather than framed by empty margins. */
.wrap{max-width:1600px;margin:0 auto;padding-left:max(clamp(32px,3.2vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(32px,3.2vw,72px),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}
/* the h mark as a small icon beside words: the h in the words' colour */
.hrm.mark-i{display:inline-block;flex:none}
.mark-i .hr-s path{fill:currentColor}

/* ---- 3. the header, over the photograph ---- */
.top{position:relative;isolation:isolate}
/* The library's spotlight card rises into this area and sits above it; while
   the menu or the sign-in card is open, this area comes forward instead, or
   the card opens underneath the spotlight. */
.top:has(.pop:not([hidden])){z-index:3}
.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)}
/* 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}
}

/* The menu card, on a phone or a tablet held upright: it opens over the
   header, with the newest release, the links, the light and dark switch and
   the social marks. The switch and the release strip leave the header for
   it, which keeps the header to the logo, sign in and this button. */
.menu-btn{position:relative}
.menu-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#e8826e;box-shadow:0 0 0 2px rgba(29,58,95,.6)}
.bar-hidden .menu-dot,.menu-btn[aria-expanded="true"] .menu-dot{display:none}
.menu .menu-card{--logo:var(--head);--logo-flower:var(--accent);position:fixed;top:10px;left:10px;right:10px;margin:0;width:auto;max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;padding:16px 22px 24px;border-radius:24px}
.menu .menu-card[hidden]{display:none}
.top:has(.menu-card:not([hidden]))::before{content:"";position:fixed;inset:0;z-index:29;background:rgba(10,20,40,.3)}
.menu-head{display:flex;align-items:center;justify-content:space-between}
.menu-logo .hrn{height:46px}
.menu-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:none;color:var(--head)}
.menu-close svg,.menu-links svg,.menu-read svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.menu-close svg{width:18px;height:18px}
.menu-new{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,var(--raised));color:var(--head)}
.menu-new img{width:52px;height:auto;border-radius:6px;box-shadow:var(--shadow)}
.menu-new>span{display:grid;gap:2px}
.menu-eyebrow{font:600 .68rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong)}
.menu-new b{font:600 1.25rem/1.2 var(--f-display)}
.menu-read{display:flex;align-items:center;gap:6px;font:600 .9rem var(--f-body);color:var(--accent-strong)}
.menu-read svg{width:16px;height:16px}
.menu-links{display:grid}
.menu-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);font:600 1.45rem/1.2 var(--f-display);color:var(--head)}
.menu-links span{background:linear-gradient(var(--u),var(--u)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .3s}
.menu-links a:hover span,.menu-links a:focus-visible span,.menu-links a[aria-current="page"] span{background-size:100% 2px}
.menu-links svg{width:20px;height:20px;color:var(--accent)}
.menu-theme{display:flex;align-items:center;justify-content:space-between;padding:4px 2px;font:600 1rem var(--f-body);color:var(--head)}
.menu-theme .theme-switch{border-color:var(--line-strong)}
.menu-card .social{flex-wrap:wrap;gap:12px;margin:0}
/* On the menu's white card the petals take the deeper colours, the marks white. */
.menu-card .social a{--pet:var(--pet-d);--pet-ink:#fff}
html[data-theme="dark"] .menu-card .social a{--pet:var(--pet-l);--pet-ink:#1d3a5f}
.menu-card .social-name{display:none}
.menu-card :focus-visible{outline-color:var(--focus)}
@media(max-width:860px){
  .masthead-tools>.theme-switch{display:none}
}
/* A tablet's card hangs from the right corner rather than across it. */
@media(min-width:600px) and (max-width:860px){
  .menu .menu-card{left:auto;width:420px}
}

/* ---- 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:16px;padding-top:20px;border-top:1px solid var(--line-strong)}
.social{display:flex;gap:12px;margin:0}
.social a{position:relative;display:grid;place-items:center;width:44px;height:44px;--pet:var(--pet-l);--pet-ink:#1d3a5f;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.social a[data-network="instagram"]{--pet-l:#a9c8ee;--pet-d:#31649e}
.social a[data-network="facebook"]{--pet-l:#f0a091;--pet-d:#b04b3a}
.social a[data-network="tiktok"]{--pet-l:#7fd0ad;--pet-d:#197256}
.social a[data-network="youtube"]{--pet-l:#d3b0e8;--pet-d:#7a4796}
.social svg{width:40px;height:40px;overflow:visible}
.social-petal{fill:var(--pet)}
.social-glyph{fill:var(--pet-ink)}
.social a:hover,.social a:focus-visible{transform:translateY(-3px)}
.social-name{position:absolute;left:50%;top:calc(100% + 2px);transform:translate(-50%,-4px);font:600 1.05rem/1 "Dancing Script",cursive;text-transform:lowercase;color:var(--pet);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)}
@media(prefers-reduced-motion:reduce){.social a,.social-name{transition:none}.social a:hover,.social a:focus-visible{transform:none}}
.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}
  /* About and Our Beliefs side by side, not one above the other. */
  .foot-nav{flex-direction:row;flex-wrap:wrap;gap:4px 28px}
  .foot-nav a{font-size:1.6rem}
}
/* A tablet held upright keeps the computer's footer: the logo on the left,
   the links and the social marks on the right. */
@media(min-width:600px) and (max-width:860px){
  .foot-row{flex-direction:row;align-items:center}
  .foot-right{align-items:flex-end}
  .foot-nav{justify-content:flex-end}
  .foot-brand .hrn{height:84px}
}
@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)}
/* Tables in the words, like the Privacy Policy's: a narrow screen scrolls the table, not the page. */
.prose .table-scroll{overflow-x:auto;border:1px solid var(--line-strong);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--line)}
.prose thead th{border-top:0;background:var(--sunken);font:600 .72rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prose code{font-size:.88em;padding:1px 5px;border-radius:5px;background:var(--sunken)}
.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}
}

/* Wide screens: the header and footer run to the page's side space, not a
   centred column, and the wordmark and links grow with the screen. */
@media(min-width:1024px){
  .masthead .wrap,.site-footer .wrap{max-width:none}
  .masthead-in{min-height:clamp(108px,7.6vw,140px)}
  .brand .hrn{height:clamp(78px,5.8vw,112px)}
  .masthead-left{gap:clamp(28px,2.4vw,44px)}
  .masthead-rule{height:clamp(40px,3vw,54px)}
  .masthead-nav{gap:clamp(30px,2.6vw,48px)}
  .masthead-nav a{font-size:calc(.9rem + .45vw)}
  .masthead-tools{gap:clamp(22px,1.8vw,32px)}
  .round-btn{width:clamp(46px,3.4vw,56px);height:clamp(46px,3.4vw,56px)}
  .foot-brand .hrn{height:clamp(112px,8vw,150px)}
  .foot-brand .motto{height:clamp(29px,2vw,38px)}
  .foot-nav a{font-size:calc(1.3rem + .5vw)}
}