/* the site navigation (js/nav.js): the pages on one painted stroke at the top right; a menu when they do not fit */
.nav { position: fixed; z-index: 60; top: 12px; right: max(8px, calc(var(--gut) - 16px)); pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .7, .1, 1), opacity .4s ease; --navbg: var(--yellow); }
.nav.away { transform: translateY(calc(-100% - 20px)); opacity: 0; }
.nav[data-tone="on-yellow"] { --navbg: var(--chalk); }
.nav-bar { position: relative; display: flex; align-items: center; padding: 13px 34px 14px 30px; pointer-events: auto;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-bar::before { content: ''; position: absolute; inset: -4px -8px -2px -10px; z-index: -1; background: var(--navbg); transition: background-color .5s ease;
  -webkit-mask: var(--stroke) 0 0 / 100% 100% no-repeat; mask: var(--stroke) 0 0 / 100% 100% no-repeat; }
.nav-links { display: flex; gap: 24px; white-space: nowrap; }
.nav a, .nav button { position: relative; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav a { opacity: .7; transition: opacity .25s ease; }
.nav a:hover, .nav a.on, .nav a:focus-visible { opacity: 1; }
.nav a:focus-visible, .nav button:focus-visible, .nav-sheet a:focus-visible, .nav-sheet button:focus-visible { outline: 2px solid #b81d0e; outline-offset: 4px; }
/* the page you are on: a short red stroke under its name */
.nav a::after, .nav-sheet-links a::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -3px; height: 5px; background: #b81d0e;
  -webkit-mask: url(../art/brush/12.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/12.webp) 0 0 / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.nav a.on::after, .nav a:hover::after, .nav-sheet-links a.on::after { transform: scaleX(1); }
.nav a:not(.on):hover::after { opacity: .5; }
.nav-open { display: none; }
/* folded: the row is measured but not shown, the menu stands in */
.nav.folded .nav-links { position: absolute; visibility: hidden; pointer-events: none; }
.nav.folded .nav-open { display: block; }
@media (max-width: 700px) { .nav-bar { padding: 12px 26px 13px 24px; font-size: 11px; } .nav-links { gap: 20px; } }

/* the menu: a full page of links on yellow, a garden at its foot */
.nav-sheet { position: fixed; inset: 0; z-index: 70; background: var(--yellow); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  padding: 90px var(--gut) 40px; opacity: 0; transform: translateY(-2%); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .1, 1); }
.nav-sheet.on { opacity: 1; transform: none; }
.nav-sheet[hidden] { display: none; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.nav-close { position: absolute; top: 24px; right: var(--gut); z-index: 2; border: 0; background: none; color: var(--ink); cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; }
.nav-sheet-links { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .12em;
  font-size: clamp(38px, 10vw, 84px); line-height: .95; letter-spacing: -.03em; }
.nav-sheet-links a { position: relative; color: var(--ink); text-decoration: none; padding: 0 .12em; margin-left: -.12em; }
.nav-sheet-links a::before { content: ''; position: absolute; inset: 8% -4% 4% -3%; z-index: -1; background: var(--chalk);
  -webkit-mask: var(--stroke) 0 0 / 100% 100% no-repeat; mask: var(--stroke) 0 0 / 100% 100% no-repeat; opacity: 0; transition: opacity .3s ease; }
.nav-sheet-links a.on::before, .nav-sheet-links a:hover::before { opacity: 1; }
.nav-sheet-links a::after { bottom: 2px; height: 9px; }
.nav-sheet.on .nav-sheet-links a { animation: sheetIn .6s cubic-bezier(.2, .7, .1, 1) both; }
.nav-sheet.on .nav-sheet-links a:nth-child(2) { animation-delay: .04s; } .nav-sheet.on .nav-sheet-links a:nth-child(3) { animation-delay: .08s; }
.nav-sheet.on .nav-sheet-links a:nth-child(4) { animation-delay: .12s; } .nav-sheet.on .nav-sheet-links a:nth-child(5) { animation-delay: .16s; }
@keyframes sheetIn { from { opacity: 0; transform: translateX(-18px); } }
.nav-sheet-garden { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; object-fit: cover; object-position: bottom; pointer-events: none; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .nav, .nav-sheet, .nav a::after { transition: none; } .nav-sheet.on .nav-sheet-links a { animation: none; } }
.nav-sheet-links a { isolation: isolate; }

/* home is the mark, *PIE, set in the display face */
.nav a.mark { font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: 18px; letter-spacing: -.02em; text-transform: none; opacity: 1; line-height: 1; padding: 2px 0 3px; }
.nav-sheet-links a.mark { text-transform: none; }