/* Underlay nav: Komma Komma's motion, styled with this site's tokens. GSAP timeline rebuilt as CSS transitions:
   body[data-menu-status=open] is the open state; everything else is closed (with close timings). */

:root {
  --menu-width: 30em;
  /* site tokens (from the Next.js CSS): ink panel, paper text, brand gradient for the current page */
  --un-ink: var(--color-ink);
  --un-paper: var(--color-paper);
  --un-panel: var(--color-ink);
  --un-panel-text: var(--color-paper);
  --un-sweep: #2a2a2a;       /* button hover fill on the ink button */
  --un-frame: .5rem;      /* footer sheet gutter (px-2) */
  --un-radius: 1.8rem;    /* .sheet radius */
  --un-osmo: cubic-bezier(.625, .05, 0, 1);
  --un-back-out: cubic-bezier(.34, 1.4, .64, 1);
  --un-p2-out: cubic-bezier(.25, .46, .45, .94);
  --un-p2-inout: cubic-bezier(.455, .03, .515, .955);
  --un-p3-out: cubic-bezier(.215, .61, .355, 1);
  --un-p3-in: cubic-bezier(.55, .055, .675, .19);
}

/* page wrapper that slides away to reveal the menu underneath */
[data-main] {
  position: relative; z-index: 2; min-height: 100vh; background: var(--color-paper);
  display: flex; flex-direction: column; flex: 1 0 auto;
  transition: transform .6s var(--un-osmo);
}
body[data-menu-status=open] [data-main] { transform: translateX(calc(-1 * var(--menu-width))); transition: transform .7s var(--un-osmo); }
/* while the page slides, its white base layer showed as a 1px light seam at the edge (Safari, sub-pixel translate): go Ink */
body[data-menu-status=open] [data-main], body[data-menu-status=closing] [data-main] { background: linear-gradient(to left, var(--color-ink) 0 2px, var(--color-paper) 2px); }
.underlay-nav__spacer { height: 68px; flex: none; }

.underlay-nav a { color: inherit; text-decoration: none; }
.underlay-nav button { color: inherit; font: inherit; text-align: inherit; cursor: pointer; }

/* header bar */
.underlay-nav__header { z-index: 100; color: var(--un-paper); position: fixed; inset: 0 0 auto; transition: color .2s ease, background-color .25s ease; }
/* white logo/menu over a busy photo wall: a soft dark halo keeps them legible over any bright patch (e.g. a paper page) */
.underlay-nav[data-theme-nav=light] :is(.underlay-nav__logo-mark, .underlay-nav__toggle-icon) { filter: drop-shadow(0 0 6px rgb(0 0 0 / .7)) drop-shadow(0 0 2px rgb(0 0 0 / .6)); }
body[data-menu-status] .underlay-nav :is(.underlay-nav__logo-mark, .underlay-nav__toggle-icon) { filter: none; }
/* once the page scrolls, a plain solid bar in the page's own colour keeps the header legible (replaces Komma's blur strip) */
.underlay-nav[data-scrolled=true][data-theme-nav=light] .underlay-nav__header { background-color: rgb(11 11 11 / .94); }
.underlay-nav[data-scrolled=true][data-theme-nav=dark] .underlay-nav__header { background-color: rgb(255 255 255 / .94); box-shadow: 0 1px 0 var(--color-line); }
body[data-menu-status=open] .underlay-nav__header, body[data-menu-status=closing] .underlay-nav__header { background-color: transparent !important; box-shadow: none !important; }
.underlay-nav[data-theme-nav=dark] .underlay-nav__header { color: var(--un-ink); }
body[data-menu-status=open] .underlay-nav .underlay-nav__header,
body[data-menu-status=closing] .underlay-nav .underlay-nav__header { color: var(--un-panel-text); }  /* must outrank the data-theme-nav rule */
.underlay-nav__container { display: flex; justify-content: space-between; align-items: center; height: 68px; padding: 0 32px; }
.underlay-nav__actions { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
.underlay-nav__logo { display: flex; align-items: center; transition: opacity .3s ease; }
/* our wordmark is wider than Komma's mark and would straddle the card edge, so it steps aside */
body[data-menu-status=open] .underlay-nav__logo, body[data-menu-status=closing] .underlay-nav__logo { opacity: 0; pointer-events: none; }
.underlay-nav__logo-mark {
  display: block; height: 1.375rem; aspect-ratio: 539 / 144; background-color: currentColor;
  -webkit-mask: url(/images/brand/kenning-wordmark-white.png) center / contain no-repeat;
  mask: url(/images/brand/kenning-wordmark-white.png) center / contain no-repeat;
}

.underlay-nav__toggle:focus { outline: none; }  /* no Safari/macOS default ring on click */
.underlay-nav__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.underlay-nav__toggle { display: flex; justify-content: center; align-items: center; margin: -1em; padding: 1em; background: transparent; border: 0; }
.underlay-nav__toggle-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .375em; width: 1.5em; flex: none; }
.underlay-nav__toggle-bar { background-color: currentColor; width: 100%; height: .125em; transition: transform .25s var(--un-p3-in); }
body[data-menu-status=open] .underlay-nav__toggle-bar { transition: transform .35s var(--un-back-out) .05s; }
body[data-menu-status=open] .underlay-nav__toggle-bar:first-child { transform: translateY(.25em) rotate(45deg); }
body[data-menu-status=open] .underlay-nav__toggle-bar:last-child { transform: translateY(-.25em) rotate(-45deg); }


/* header CTA (Komma's button-043) */
.button-043 {
  --button-043-color: var(--un-paper); --button-043-color-background: var(--un-ink);
  --button-043-icon-color: var(--un-ink); --button-043-icon-color-background: var(--un-paper); --button-043-color-focus: var(--k-muted);
  --button-043-padding: .625rem .625rem .625rem 1.125rem; --button-043-border-radius: var(--radius-lg); --button-043-icon-border-radius: .375rem;
  --button-043-text-duplicate-distance: 1.5em; --button-043-focus-inset: -.125em;
  user-select: none; color: var(--button-043-color); -webkit-tap-highlight-color: transparent; background-color: transparent; outline-style: none;
  padding: 0; font-size: .875rem; font-weight: 600; line-height: 1; display: inline-grid; position: relative; transition: opacity .3s ease;
}
.button-043:after { content: ""; inset: var(--button-043-focus-inset); border-radius: var(--button-043-border-radius); transition: box-shadow .2s cubic-bezier(.32, .72, 0, 1); pointer-events: none; z-index: 1; display: block; position: absolute; }
.button-043:focus-visible:after { box-shadow: 0 0 0 .125em var(--button-043-color-focus); }
.button-043__bg { background-color: var(--button-043-color-background); border-radius: var(--button-043-border-radius); grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; overflow: clip; }
.button-043__bg-hover { background-color: var(--un-sweep); width: 120%; height: 100%; transition: transform .525s var(--un-osmo); position: absolute; bottom: 0; left: -10%; transform: translateY(175%) rotate(15deg); }
.button-043__inner { width: 100%; height: 100%; padding: var(--button-043-padding); grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; gap: .5em; }
.button-043__mask { clip-path: inset(-10% 0); flex: none; display: flex; justify-content: center; align-items: center; }
.button-043__text { transition: transform .525s var(--un-osmo); text-shadow: 0 var(--button-043-text-duplicate-distance) currentColor; }
.button-043__icon-wrap { width: 1.5em; height: 1.5em; color: var(--button-043-icon-color); border-radius: var(--button-043-icon-border-radius); flex: none; display: grid; position: relative; }
.button-043__icon-bg { background-color: var(--button-043-icon-color-background); border-radius: var(--button-043-icon-border-radius); width: 100%; height: 100%; transition: transform .525s var(--un-osmo); grid-area: 1 / 1; }
.button-043__icon-mask { grid-area: 1 / 1; display: flex; justify-content: flex-end; width: 100%; height: 100%; position: relative; overflow: clip; }
.button-043__icon-list { display: flex; grid-area: 1 / 1; position: absolute; }
.button-043__icon { width: 1.5em; height: 1.5em; transition: transform .525s var(--un-osmo); padding: .3em; }
@media (hover: hover) and (pointer: fine) {
  .button-043:is(:hover, :focus-visible) .button-043__bg-hover { transform: translate(0) rotate(0); }
  .button-043:is(:hover, :focus-visible) .button-043__text { transform: translateY(calc(-1 * var(--button-043-text-duplicate-distance))); }
  .button-043:is(:hover, :focus-visible) .button-043__icon-bg { transform: rotate(90deg); }
  .button-043:is(:hover, :focus-visible) .button-043__icon { transform: translate(200%); }
}
.underlay-nav .button-043 { color: var(--button-043-color); }
.underlay-nav[data-theme-nav=light] .button-043 { --button-043-color: var(--un-ink); --button-043-color-background: var(--un-paper); --button-043-icon-color: var(--un-paper); --button-043-icon-color-background: var(--un-ink); --un-sweep: var(--k-body-grey); }
.underlay-nav[data-cta-hidden=true] .underlay-nav__cta-header { opacity: 0; pointer-events: none; }
body[data-menu-status=open] .underlay-nav__cta-header,
body[data-menu-status=closing] .underlay-nav__cta-header { opacity: 0; pointer-events: none; }

/* the menu that sits underneath the page */
.underlay-nav__menu { z-index: 1; width: var(--menu-width); color: var(--un-panel-text); background: var(--un-panel); position: fixed; top: 0; bottom: 0; right: 0; }
.underlay-nav__inner { display: flex; flex-direction: column; gap: 2em; width: 100%; height: 100%; padding: 7.5em 2em 2em; overflow-x: hidden; overflow-y: auto; }
.underlay-nav__list { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.underlay-nav__list.is--small { gap: .75em; }
.underlay-nav__list:not(.is--small) { gap: .25rem; }
.underlay-nav__link-large { border-radius: var(--radius-xl); width: 100%; padding: .625em 1em; display: block; transition: background-color .2s ease; }
.underlay-nav__link-large:hover { background-color: var(--color-ink-card); }
.underlay-nav__link-large.is--current { color: var(--color-ink); background-color: var(--color-paper); }  /* tag style: Ink on a white block */
.underlay-nav__link-label { font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.9rem, 2.2vw, 3rem); line-height: 1.1; }
.underlay-nav__bottom { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: auto; padding-top: 1.5em; position: relative; }
.underlay-nav__bottom-col { display: flex; flex-direction: column; gap: 1em; flex: 1; align-items: flex-start; }
.underlay-nav__link-small { font-size: .875rem; line-height: 1.25; color: rgb(255 255 255 / .7); }
.underlay-nav__link-small:hover { color: var(--color-paper); }
.underlay-nav__link-small.is--faded { font-size: 1rem; font-weight: 700; color: var(--color-paper); }
.underlay-nav__hover-link { position: relative; display: block; height: 1.25em; overflow: hidden; }
.underlay-nav__hover-label { display: block; line-height: inherit; white-space: nowrap; transition: transform .7s var(--un-osmo); }
.underlay-nav__hover-label[data-underlay-hover-next] { position: absolute; top: 100%; left: 0; }
.underlay-nav__hover-link:is(:hover, :focus-visible) .underlay-nav__hover-label { transform: translateY(-100%); }
.underlay-nav__bottom-border { opacity: 1; color: var(--color-line-dark); transform-origin: 0%; background-color: currentColor; width: 100%; height: 1px; position: absolute; inset: 0 0 auto; transform: scaleX(0); transition: transform 0s .6s; }
body[data-menu-status=open] .underlay-nav__bottom-border { transform: scaleX(1); transition: transform .5s var(--un-osmo) .3s; }

/* staggered reveals: --i is the item index */
[data-reveal-l], [data-reveal-s] { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s, transform 0s .6s; }
[data-reveal-l] { transform: translateX(25%); }
[data-reveal-s] { transform: translateY(100%); }
body[data-menu-status=open] [data-reveal-l] { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--un-osmo) calc(var(--i) * .05s), transform .7s var(--un-osmo) calc(var(--i) * .05s), visibility 0s calc(var(--i) * .05s); }
body[data-menu-status=open] [data-reveal-s] { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--un-p3-out) calc(.3s + var(--i) * .03s), transform .5s var(--un-p3-out) calc(.3s + var(--i) * .03s), visibility 0s calc(.3s + var(--i) * .03s); }

/* overlay that travels with the page: dark tint plus the rounded top/bottom frame */
.underlay-nav__overlay { z-index: 100; position: fixed; inset: 0 -1px 0 0; overflow: clip; cursor: pointer; visibility: hidden; pointer-events: none; transition: transform .6s var(--un-osmo), visibility 0s .6s; }
body[data-menu-status=open] .underlay-nav__overlay { visibility: visible; pointer-events: auto; transform: translateX(calc(-1 * var(--menu-width))); transition: transform .7s var(--un-osmo), visibility 0s; }
.underlay-nav__dark { opacity: 0; background-color: #0000004d; position: absolute; inset: 0; transition: opacity .35s var(--un-p2-inout); }
body[data-menu-status=open] .underlay-nav__dark { opacity: 1; transition: opacity .5s var(--un-osmo); }
.underlay-nav__borders { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; position: absolute; inset: 0; }
.underlay-nav__border-row { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; transition: transform .5s var(--un-osmo); }
.underlay-nav__border-row:first-child { transform: translateY(-100%); }
.underlay-nav__border-row:last-child { transform: translateY(100%); }
body[data-menu-status=open] .underlay-nav__border-row { transform: none; }
.underlay-nav__border { background-color: var(--un-panel); width: 100%; height: var(--un-frame); }
.underlay-nav__corner { transform-origin: 100% 0; background-image: radial-gradient(circle farthest-side at 0 100%, #0000 99%, var(--un-panel)); width: var(--un-radius); height: var(--un-radius); transform: scale(0); transition: transform .5s var(--un-osmo); }
.underlay-nav__corner.is--bottom { transform-origin: 100% 100%; background-image: radial-gradient(circle farthest-side at 0 0, #0000 99%, var(--un-panel)); }
body[data-menu-status=open] .underlay-nav__corner { transform: scale(1); }

@media screen and (max-width: 767px) {
  :root { --menu-width: 80vw; }
  .underlay-nav__container { padding: 0 1.5rem; }
  .underlay-nav__cta-header { display: none; }
  .underlay-nav__logo-mark { height: 1.25rem; }
  .underlay-nav__inner { padding: 5em 1.25em 1.25em; }
  .underlay-nav__bottom { flex-direction: column; gap: 2em; padding-left: 1em; padding-right: 1em; }
}

@media (prefers-reduced-motion: reduce) {
  [data-main], .underlay-nav, .underlay-nav * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* smooth page-to-page navigation (cross-document View Transitions; browsers without support just navigate as before) */
@view-transition { navigation: auto; }
.underlay-nav__header { view-transition-name: kn-header; }  /* header stays put while the page underneath cross-fades */
::view-transition-old(root) { animation: kn-vt-out .26s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: kn-vt-in .34s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes kn-vt-out { to { opacity: 0; } }
@keyframes kn-vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }