/* The top bar on every page (2026-11-08, James: "have the navigation be consistent in favor of how it is on the homepage").
   After dmcg.co, in the Cursor tones: Projects · About on the left, the name in the middle, Contact · LinkedIn on the right.
   On a case study the middle holds the project tray instead of the name (dmcg's case-study dock): every project as a small
   cut-out in a frosted pill, a round × on its left, the name in a small pill under the one you point at. tray.js builds the
   tray; on the homepage it plays the hand-off (the project art shrinks into the tray, the page dims) before the case study opens.
   Scrolling a case study tucks the tray into Projects and brings the name back.
   No hard edge under the bar: like dmcg's .home-edge, three stacked backdrop blurs (1.5 / 5 / 14px, each masked to a band) and a
   wash of the page ground fading from 72% to 0 over 128px (dmcg: 134px), so the page dissolves under the bar.
   Self-contained: it carries its own colours and type so it looks the same over landing.css and over the case-study sheets. */

/* the page ground under the bar; registered so it can fade when the homepage dims */
@property --dm-g { syntax: '<color>'; inherits: true; initial-value: #f7f7f4; }

header.dm-nav {
  --ink: #26251e; --font: 'Google Sans', system-ui, -apple-system, sans-serif; --dm-g: #f7f7f4; --dm-edge: 128px;
  position: sticky; top: 0; z-index: 300; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; margin: 0; padding: 0 clamp(20px, 2.2vw, 38px); box-sizing: border-box;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0;
  font: 500 14px/16px var(--font); letter-spacing: .04em; color: var(--ink); text-align: left;
  transition: --dm-g .32s ease-out;
}
header.dm-nav[data-tray], html.dm-dim header.dm-nav { --dm-g: #e4e3de; }   /* case studies: the dimmed ground (cursor.css) */
header.dm-nav *, header.dm-nav *::before, header.dm-nav *::after { box-sizing: border-box; }
header.dm-nav a { color: var(--ink); text-decoration: none; }

/* ---------- the soft edge ---------- */
header.dm-nav .dm-edge { position: absolute; top: 0; left: 0; right: 0; height: var(--dm-edge); z-index: -1; pointer-events: none; }
header.dm-nav .dm-edge > * { position: absolute; inset: 0; }
header.dm-nav .dm-edge > i:nth-child(1) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  -webkit-mask: linear-gradient(to top, transparent 0%, #000 25%, #000 50%, transparent 75%); mask: linear-gradient(to top, transparent 0%, #000 25%, #000 50%, transparent 75%); }
header.dm-nav .dm-edge > i:nth-child(2) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(to top, transparent 25%, #000 50%, #000 75%, transparent 100%); mask: linear-gradient(to top, transparent 25%, #000 50%, #000 75%, transparent 100%); }
header.dm-nav .dm-edge > i:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask: linear-gradient(to top, transparent 50%, #000 75%, #000 100%); mask: linear-gradient(to top, transparent 50%, #000 75%, #000 100%); }
header.dm-nav .dm-edge > b { background: linear-gradient(
  color-mix(in srgb, var(--dm-g) 72%, transparent) 0%, color-mix(in srgb, var(--dm-g) 63%, transparent) 14%,
  color-mix(in srgb, var(--dm-g) 48%, transparent) 29%, color-mix(in srgb, var(--dm-g) 32%, transparent) 44%,
  color-mix(in srgb, var(--dm-g) 18%, transparent) 59%, color-mix(in srgb, var(--dm-g) 8%, transparent) 74%,
  color-mix(in srgb, var(--dm-g) 2%, transparent) 88%, transparent 100%); }

/* ---------- links ---------- */
header.dm-nav .dm-side { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
header.dm-nav .dm-side.r { justify-self: end; }
header.dm-nav :is(.dm-it, .dm-name) { font: 500 14px/16px var(--font); letter-spacing: .04em; color: var(--ink); white-space: nowrap; text-transform: none; }
header.dm-nav .dm-it { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 8px;
  background: transparent; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background .15s; }
header.dm-nav .dm-side:not(.r) .dm-it:first-child { margin-left: -10px; }
header.dm-nav .dm-side.r .dm-it:last-child { margin-right: -10px; }
header.dm-nav .dm-it:is(:hover, :focus-visible), header.dm-nav .dm-it.dmc-host:has(.dmc.show) { box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .14); background: rgba(255, 255, 255, .55); }
header.dm-nav :is(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
header.dm-nav .dm-it:focus-visible { outline: none; }

/* the middle: the name, or the tray in the same spot */
header.dm-nav .dm-c { display: grid; place-items: center; justify-self: center; }
header.dm-nav .dm-c > * { grid-area: 1 / 1; }
header.dm-nav .dm-name { transition: opacity .35s .3s, filter .35s .3s; }
header.dm-nav.tray-open:not(.tray-tucked) .dm-name { opacity: 0; filter: blur(4px); pointer-events: none; transition-delay: 0s; }

/* ---------- the project tray ---------- */
header.dm-nav .dm-tray { position: relative; display: flex; align-items: center; gap: 8px; transform-origin: 0 50%;
  transition: opacity .4s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
header.dm-nav:not(.tray-open) .dm-tray { display: none; }   /* homepage: the closed tray takes no room */
header.dm-nav:not([data-tray]).tray-open .dm-tray { animation: dmTrayIn .2s ease-out; }
@keyframes dmTrayIn { from { opacity: 0; } }
/* scrolled: the tray squeezes into Projects (tray.js sets --tuck-x, the distance from the tray's left edge to Projects) */
header.dm-nav.tray-tucked .dm-tray { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(var(--tuck-x, 0px)) scale(.08, .5);
  transition: opacity .42s ease-in .08s, transform .55s cubic-bezier(.5, 0, .3, 1), visibility 0s .55s; }
header.dm-nav .dm-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .46); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .08); color: rgba(38, 37, 30, .55); transition: background .15s, color .15s, opacity .25s; }
header.dm-nav .dm-x:hover { background: rgba(255, 255, 255, .9); color: var(--ink); }
header.dm-nav .dm-x svg { width: 12px; height: 12px; }
header.dm-nav .dm-dock { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .46); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
header.dm-nav .dm-th { display: grid; place-items: center; width: 56px; height: 40px; border-radius: 6px; }
header.dm-nav .dm-th img { display: block; max-width: 56px; max-height: 40px; width: auto; height: auto; transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
header.dm-nav .dm-th:is(:hover, :focus-visible) img { transform: scale(1.08); }
header.dm-nav .dm-th[aria-current="page"] img { transform: none; }
/* the name under the thumbnail you point at */
header.dm-nav .dm-tip { position: absolute; top: calc(100% + 8px); left: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: rgba(247, 247, 244, .9); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 12px/1 var(--font); letter-spacing: .02em; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -3px); transition: opacity .15s, transform .15s; }
header.dm-nav .dm-tip.on { opacity: 1; transform: translate(-50%, 0); }
header.dm-nav .dm-tip i { font-style: normal; color: rgba(38, 37, 30, .45); }

/* the flying copies during the hand-off */
.dm-fly { position: fixed; z-index: 400; margin: 0; object-fit: contain; pointer-events: none; will-change: transform; }

/* the homepage dims to the case-study ground while the hand-off plays (dmcg: white → #dcdcdc in ~0.3s) */
html:has(header.dm-nav:not([data-tray])), body.lp { transition: background-color .6s ease-out; }
html.dm-dim, html.dm-dim body.lp { background-color: #e4e3de; }

/* ---------- the contact pill (dmc.js), opening to the left of Contact ---------- */
header.dm-nav .dmc-host { position: relative; overflow: visible; }
header.dm-nav .dmc { position: absolute; right: calc(100% + 8px); left: auto; top: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 35px; padding: 0 12px 0 13.5px;
  border-radius: 999px; background: rgba(235, 234, 229, .55); box-shadow: inset 0 0 0 1px rgba(38, 37, 30, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  white-space: nowrap; font: 500 14px/1 var(--font); letter-spacing: .02em; color: var(--ink);
  opacity: 0; visibility: hidden; filter: blur(8px); transform: translate(6px, -50%); transition: opacity .2s, filter .2s, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s .22s; }
header.dm-nav .dmc b { font-weight: 500; color: var(--ink); }
header.dm-nav .dmc i { font: 500 10px/1 var(--font); font-style: normal; letter-spacing: .02em; color: rgba(38, 37, 30, .45); }
header.dm-nav .dmc.show { opacity: 1; visibility: visible; filter: none; transform: translate(0, -50%); transition: opacity .2s, filter .2s, transform .22s cubic-bezier(.2, .7, .2, 1); }
header.dm-nav .dmc.away { transition: opacity .3s, filter .3s, transform .3s, visibility 0s .3s; }

/* 2026-11-08 (James: the tray sat too close to the top): the bar is 80px tall from 480px up, so the 52px tray has 14px above
   it (was 6px). The homepage pulls its content back up by the extra 16px so the intro stays where it was. */
@media (min-width: 480px) {
  header.dm-nav, header.lp-top.dm-nav { height: 80px; }
  header.lp-top.dm-nav:not([data-tray]) { margin-bottom: -16px; }
}

/* ---------- narrow screens ---------- */
/* the tray needs the middle to itself: under 900px it hangs below the links (out of flow, so tucking it never moves the page),
   the name stays in the bar, and the soft edge runs deeper to sit behind it */
@media (max-width: 899.98px) {
  header.dm-nav .dm-tray { position: absolute; top: 100%; left: 50%; translate: -50% 0; }
  header.dm-nav.tray-open:not(.tray-tucked) .dm-name { opacity: 1; filter: none; pointer-events: auto; }
  header.dm-nav.tray-open:not(.tray-tucked) { --dm-edge: 190px; }
  header.dm-nav .dm-dock { height: 46px; gap: 6px; padding: 0 10px; }
}
@media (max-width: 479.98px) {   /* five items fit down to 360px */
  header.dm-nav { padding: 0 12px; height: 56px; }
  header.dm-nav .dm-side { gap: 0; }
  header.dm-nav :is(.dm-it, .dm-name) { font-size: 13px; letter-spacing: .02em; }
  header.dm-nav .dm-it { padding: 0 6px; }
  header.dm-nav .dm-side:not(.r) .dm-it:first-child { margin-left: -6px; }
  header.dm-nav .dm-side.r .dm-it:last-child { margin-right: -6px; }
  header.dm-nav .dm-th { width: 48px; height: 34px; }
  header.dm-nav .dm-th img { max-width: 48px; max-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  header.dm-nav, header.dm-nav :is(.dm-name, .dm-tray, .dm-tip, .dm-th img, .dmc), html, body.lp { transition: none !important; }
}

/* ---------- Say hi on the case studies (2026-11-08): the homepage's inverse footer, simplified. Ink ground, light type,
   full width, Say hi with Contact (copies the email, contact.js pill centred under it) and LinkedIn centred. ---------- */
footer.hi-foot { --ink: #26251e; --bg: #f7f7f4; --font: 'Google Sans', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); margin: clamp(80px, 9vw, 140px) 0 0; padding: clamp(80px, 10vw, 140px) 20px;
  background: #26251e !important; color: #f7f7f4; text-align: center; border: 0; box-shadow: none; }
footer.hi-foot h2 { margin: 0; font: 400 clamp(2.75rem, 6vw, 5rem)/1 var(--font); letter-spacing: -.04em; color: #f7f7f4; text-transform: none; }
footer.hi-foot .hi-foot-row { display: flex; align-items: center; justify-content: center; gap: 12px 24px; flex-wrap: wrap; }
footer.hi-foot a { font: 500 1rem/1 var(--font); letter-spacing: 0; color: rgba(247, 247, 244, .75); text-decoration: none; }
footer.hi-foot a:hover { color: #f7f7f4; }
footer.hi-foot .hi-foot-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #f7f7f4; color: #26251e; }
footer.hi-foot .hi-foot-btn:hover { background: #fff; color: #26251e; }
footer.hi-foot a:focus-visible { outline: 2px solid #f7f7f4; outline-offset: 3px; }
html:has(footer.hi-foot) { background: linear-gradient(#e4e3de 50%, #26251e 50%) !important; }   /* the bounce past the bottom shows ink */

/* ---------- page to page (2026-11-08, James: the ECS hand-off "isn't smooth … I want the transition to be smooth and seamless").
   Cross-document view transitions: the browser keeps the old page on screen until the new one is ready, then cross-fades, so
   there is no blank frame between pages; the bar is its own layer and stays put. A case study reached through the homepage
   hand-off skips its hero entrance (html.dm-arrived, set by tray.js) — the cross-fade is the entrance. Browsers without view
   transitions simply navigate. ---------- */
@view-transition { navigation: auto; }
header.dm-nav { view-transition-name: dm-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
/* arriving through the hand-off (dmcg's way): the last frame of the page we left and the first frame here are the same (ground, bar,
   tray), so the swap is a cut, not a cross-fade; <main> waits hidden until tray.js starts its entrance (blur → sharp, staggered) */
html.dm-arrived::view-transition-old(root), html.dm-arrived::view-transition-new(root) { animation: none; }
html.dm-arrived:not(.dm-in) main { opacity: 0; }
html.dm-arrived :is(.mx-band, .gx-band).is-loading, html.dm-arrived :is(.mx-band, .gx-band).is-loading * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* the tray is its own layer and does not cross-fade: the old page's (already drawn) tray holds until the transition ends, then the
   new page's live tray takes over in the same spot. Cross-fading it dimmed the thumbnails while the new page's were still decoding. */
header.dm-nav .dm-tray { view-transition-name: dm-tray; }
::view-transition-old(dm-tray) { animation: none; }
::view-transition-new(dm-tray) { animation: none; opacity: 0; }