/* RAAK shared navigation, version 2 (2026-10-13).
   Served at https://raak.work/shared/v2/raak-nav.css and linked by RAAK
   project sites. A published version never changes: an improvement becomes
   /shared/v3/, and each site moves to it on purpose. Version 1 stays served
   for any page still linking it.
   Rules: raak-work-site/docs/design-system.md, "Navigation".

   What changed from version 1 (Wessel chose "B · Masthead" on 2026-10-13):
   no bars and nothing pinned to the screen. The top of a project page is a
   centred masthead that scrolls away with the page:

     .raak-mast         the masthead
       .raak-mast__from   "A RAAK.work project", the one link to RAAK
       .raak-mast__name   the project's name, back to its front page
       .raak-menu         the project's menu (at most five items)
       .raak-phone        on a phone, one Menu button instead
     .raak-foot         RAAK's own four links, at the foot of the page

   Groups of pages are <details> elements, so they open without a script and
   from the keyboard. raak-nav.js adds small comforts (one group open at a
   time, Escape and outside clicks close) but nothing depends on it.

   Sizes are the sizes shown on screen: a site that shows itself at 80% on
   wide screens (raak.work, Leviathan) would show these at 80% too.

   A site dresses the menu by setting any of these on its own :root:
   --raak-nav-paper, -panel, -ink, -soft, -faint, -rule, -rule-strong,
   -accent, -coral, -display, -text. Each is used with the RAAK look as its
   fallback, written into the var() itself, so this file never sets them and
   can load before or after the site's own stylesheet. */

.raak-mast, .raak-foot { font-family: var(--raak-nav-text, 'Source Serif 4 Variable', 'Source Serif 4', Georgia, serif); color: var(--raak-nav-ink, #20241F); }
.raak-mast *, .raak-foot * { box-sizing: border-box; }
.raak-mast a, .raak-foot a { color: inherit; text-decoration: none; border: 0; }
.raak-mast a:hover, .raak-foot a:hover { color: var(--raak-nav-accent, #401210); }
.raak-mast :focus-visible, .raak-foot :focus-visible { outline: 2px solid var(--raak-nav-accent, #401210); outline-offset: 3px; }

/* The masthead */
.raak-mast { position: relative; z-index: 100; padding: 30px 20px 0; text-align: center; }
.raak-mast__from { margin: 0 0 6px; font-size: 13px; line-height: 1.4; letter-spacing: 1.3px; text-transform: uppercase; color: var(--raak-nav-faint, #5B5E56); }
.raak-mast__from a { font-family: var(--raak-nav-display, 'Fraunces Variable', 'Fraunces', Georgia, serif); font-weight: 300; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--raak-nav-coral, #FC221C) !important; }
.raak-mast__name { display: inline-block; font-family: var(--raak-nav-display, 'Fraunces Variable', 'Fraunces', Georgia, serif); font-weight: 300; font-size: 40px; line-height: 1.1; letter-spacing: -0.6px; }
.raak-mast nav { margin-top: 8px; }

/* The menu: one centred row */
.raak-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.raak-menu > li { position: relative; display: flex; }
.raak-menu > li > a, .raak-group > summary { display: inline-flex; align-items: center; min-height: 44px; }
.raak-menu > li > a[aria-current='page'], .raak-group.raak-is-current > summary, .raak-group[open] > summary {
  color: var(--raak-nav-accent, #401210); font-weight: 600; box-shadow: inset 0 -2px 0 var(--raak-nav-accent, #401210);
}
.raak-group > summary { cursor: pointer; list-style: none; gap: 7px; }
.raak-group > summary::-webkit-details-marker { display: none; }
.raak-group > summary::after { content: ''; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.raak-group[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
/* A group's list opens under it, centred on it, as a panel over the page. */
.raak-group > ul {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 101; min-width: 260px; margin: 0; padding: 6px 0; list-style: none; text-align: left;
  background: var(--raak-nav-panel, #F8F6F1); border: 1px solid var(--raak-nav-rule-strong, #C4BCAC); border-top: 2px solid var(--raak-nav-accent, #401210);
}
.raak-group > ul a { display: block; padding: 10px 20px; font-size: 16px; border-top: 1px solid var(--raak-nav-rule, #CFC8BA) !important; }
.raak-group > ul li:first-child a { border-top: 0 !important; }
.raak-group > ul a[aria-current='page'] { color: var(--raak-nav-accent, #401210); font-weight: 600; }

/* Phone: one Menu button under the name that opens everything at once */
.raak-phone { display: none; }
.raak-phone > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--raak-nav-rule-strong, #C4BCAC); }
.raak-phone > summary::-webkit-details-marker { display: none; }
.raak-phone[open] > summary { background: var(--raak-nav-accent, #401210); color: #fff; box-shadow: none; }
.raak-phone[open] > summary .raak-open-label, .raak-phone > summary .raak-close-label { display: none; }
.raak-phone[open] > summary .raak-close-label { display: inline; }
.raak-phone__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: 70vh; overflow-y: auto; padding: 8px 16px 20px; text-align: left; background: var(--raak-nav-panel, #F8F6F1); border-top: 2px solid var(--raak-nav-accent, #401210); border-bottom: 1px solid var(--raak-nav-rule-strong, #C4BCAC); }
.raak-phone__panel ul { margin: 0; padding: 0; list-style: none; }
.raak-phone__panel a { display: flex; align-items: center; min-height: 44px; font-size: 17px; border-bottom: 1px solid var(--raak-nav-rule, #CFC8BA) !important; }
.raak-phone__panel a[aria-current='page'] { color: var(--raak-nav-accent, #401210); font-weight: 600; }
.raak-phone__group { display: block; padding: 18px 0 2px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--raak-nav-faint, #5B5E56); }
.raak-phone__group + ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.raak-phone__group + ul a { font-size: 16px; }

/* RAAK's own links, at the foot of every page */
.raak-foot { padding: 28px 20px 40px; text-align: center; font-size: 14px; color: var(--raak-nav-faint, #5B5E56); }
.raak-foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; }
.raak-foot__home { font-family: var(--raak-nav-display, 'Fraunces Variable', 'Fraunces', Georgia, serif); font-weight: 300; font-size: 17px; color: var(--raak-nav-coral, #FC221C) !important; }

@media (max-width: 700px) {
  .raak-mast { padding-top: 22px; }
  .raak-mast__name { font-size: 32px; }
  .raak-menu { display: none; }
  .raak-phone { display: block; margin-top: 4px; }
}

@media print {
  .raak-mast nav, .raak-foot { display: none; }
}