/* Fold shell: the scrub theme's fixed header and overlay menu, ported onto the
   base ulric sheet. Brand tokens come from style.css.

   The menu's behaviour, its backdrop, its scroll lock and, below 920px, its
   whole slide-down presentation are core/assets/menu.{css,js}, shared with
   ulric and scrub. What is left here is this design's dressing: the bar, the
   colours, and the full-screen wipe it still uses on a wide screen. */

/* ---------- fixed header ---------- */
/* 14px of padding around a 44px control is exactly the 72px the base sheet
   already reserves at the top of the body, so no page needs a new offset */
.shd { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 3.4vw, 40px);
  color: var(--ink); pointer-events: none;
  transition: color .45s ease, background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent; }
.shd > * { pointer-events: auto; }
/* No glass, no gradient: the top of the story hero is the sky itself, so the
   bar carries no ground at all until the reader is past the hero. Light type
   over the sky, ink type over paper, and the classic hero is paper. */
body.has-story .shd { color: var(--paper); }
body.has-story .shd .shd-book { background: var(--paper); color: var(--ink); }
.shd.past-hero { background: rgba(250,249,245,.92); border-bottom-color: var(--line); }
/* the blur is the garnish, the ivory fill is the fallback underneath it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shd.past-hero { -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }
}
body.has-story .shd.past-hero { color: var(--ink); }
body.has-story .shd.past-hero .shd-book { background: var(--ink); color: var(--paper); }
.shd-brand { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 1.28rem; text-decoration: none; color: inherit; }
.shd-mark { width: 30px; height: 18px; color: var(--accent); }
.shd-side { display: flex; align-items: center; gap: 20px; }
.shd-book { display: inline-flex; align-items: center; min-height: 44px;
  font: 600 .8rem var(--body); letter-spacing: .04em; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 10px 21px;
  transition: background .2s, color .2s, transform .2s; }
.shd-book:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
@media (max-width: 520px) { .shd-book { display: none; } .shd { padding: 14px 18px; } }
.shd-menu { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0;
  color: inherit; font: 600 .8rem var(--body); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; padding: 10px 2px; min-height: 44px; }
/* flex gap is Chrome 84; menu.js measures for it and marks the document */
html.no-flexgap .shd-brand > * + *, html.no-flexgap .shd-menu > * + * { margin-left: 10px; }
html.no-flexgap .shd-side > * + * { margin-left: 20px; }
/* the three rules and their fold into an X are core/assets/menu.css */
body.menu-open .shd, body.menu-open .shd.past-hero { color: var(--paper); background: none; border-bottom-color: transparent; }
body.menu-open .shd .shd-book, body.menu-open .shd.past-hero .shd-book { background: var(--paper); color: var(--ink); }

/* ---------- the panel ---------- */
/* Below the fold point the shared sheet owns the geometry. These are only the
   colours it reads, declared on the panel itself so it inherits them. */
.smenu { --menu-top: 72px; --menu-pad: clamp(22px, 6vw, 84px);
  --menu-bg: var(--ink); --menu-ink: var(--paper); --menu-line: var(--line-dark);
  color: var(--paper); }
.smenu nav { display: flex; flex-direction: column; max-width: 860px; }
.smenu-link { display: flex; align-items: baseline; gap: 18px; text-decoration: none; color: var(--paper);
  padding: clamp(4px, .9vh, 10px) 0; border-bottom: 1px solid var(--line-dark); }
html.no-flexgap .smenu-link > * + * { margin-left: 18px; }
.smenu-word { font-family: var(--display); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 5.2vh, 3.4rem); line-height: 1.12;
  transition: color .2s, transform .3s cubic-bezier(.2,.8,.3,1); }
.smenu-note { font-family: 'Caveat', cursive; font-size: clamp(1rem, 2.2vh, 1.3rem);
  color: var(--stone-dark); opacity: .62; transform: translateX(-8px);
  transition: opacity .25s, transform .25s; }
@media (hover: hover) { .smenu-note { opacity: 0; } }
/* :focus-visible is Chrome 86, and one unknown selector in a list takes the
   whole rule down with it on anything older, so the hover half stands alone */
.smenu-link:hover .smenu-word { color: var(--accent); transform: translateX(10px); }
.smenu-link:hover .smenu-note { opacity: 1; transform: none; }
.smenu-link:focus-visible .smenu-word { color: var(--accent); transform: translateX(10px); }
.smenu-link:focus-visible .smenu-note { opacity: 1; transform: none; }
.smenu-foot { margin-top: clamp(18px, 4vh, 40px); font: 500 .78rem var(--body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone-dark); }

/* ---------- phone: the shared slide-down, in this design's ink ---------- */
@media (max-width: 920px) {
  .smenu-link { padding: 12px 0; }
  .smenu-word { font-size: clamp(1.35rem, 5.6vw, 1.9rem); }
  .smenu-note { font-size: 1rem; }
  .smenu-foot { margin-top: 20px; }
}

/* ---------- wide screens: the full-screen wipe this design was built on ---------- */
@media (min-width: 921px) {
  .smenu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 45;
    background: var(--ink);
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px clamp(22px, 6vw, 84px) 42px; }
  /* The closed state belongs to CSS and is gated on html.js, so a reader
     without JavaScript gets the navigation as an ordinary block at the foot of
     the page instead of nine unreachable pages behind an inert button. */
  html.js .smenu { clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .55s cubic-bezier(.6,0,.2,1), visibility 0s linear .55s; }
  html.js body.menu-open .smenu { clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path .6s cubic-bezier(.6,0,.2,1), visibility 0s; }
  html:not(.js) .smenu { position: static; padding: 40px clamp(22px, 6vw, 84px); }
  html.js .smenu-link { opacity: 0; transform: translateY(34px);
    transition: opacity .3s, transform .3s; }
  html.js body.menu-open .smenu-link { opacity: 1; transform: none;
    transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.3,1);
    transition-delay: calc(.16s + var(--i, 0) * .045s); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .smenu, html.js .smenu-link { transition: none; }
  html.js body.menu-open .smenu, html.js body.menu-open .smenu-link { transition: none; transition-delay: 0s; }
}