:root{--chrome-surface:linear-gradient(112deg,transparent 32%,#ffffffbc 46%,transparent 58%),linear-gradient(168deg,#f4f7fa 0%,#b9c1c9 20%,#eef2f5 35%,#8d969f 49%,#d3dae0 53%,#fafcfd 67%,#9aa4ae 86%,#e6ebef 100%);--chrome-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px #39424c65,0 7px 24px #0006}
[data-side-reveal-navigation] {
  --surface-1: rgb(12, 10, 9);
  --text-1: rgb(245, 245, 244);
  --text-2: rgb(166, 160, 155);
  --border-1: rgb(41, 38, 36);
  --border-2: rgb(54, 51, 48);
  --accent: rgb(242, 85, 0);
  --on-accent: rgb(255, 255, 255);
  color-scheme: dark;
}

[data-side-reveal-navigation],
[data-side-reveal-navigation] *,
[data-side-reveal-navigation] *::before,
[data-side-reveal-navigation] *::after {
  box-sizing: border-box;
}

[data-side-reveal-navigation] .drawer p,
[data-side-reveal-navigation] .drawer ul {
  margin: 0;
  padding: 0;
}

[data-side-reveal-navigation] .drawer li {
  list-style: none;
}

[data-side-reveal-navigation] .drawer a {
  color: inherit;
  text-decoration: none;
}

[data-side-reveal-navigation] .toggle,
[data-side-reveal-navigation] .cover {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

[data-side-reveal-navigation] .toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-side-reveal-navigation] .toggle svg {
  display: block;
}

[data-side-reveal-navigation] {
  --drawer-width: 450px;
  --drawer-gap: 16px;
  position: relative;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-1);
  color: var(--text-1);
}

@media (max-width: 900px) {
  [data-side-reveal-navigation] {
    --drawer-width: 360px;
  }
}

@media (max-width: 600px) {
  [data-side-reveal-navigation] {
    --drawer-width: 100%;
    --drawer-gap: 0px;
  }
}

[data-side-reveal-navigation] .toggle {
  --toggle-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  z-index: 5;
  top: 24px;
  right: 24px;
  width: 100px;
  height: 44px;
  overflow: hidden;
  border-radius: 9999px;
  corner-shape: superellipse(1.2);
  background: var(--on-accent);
  color: var(--surface-1);
  transition: width 0.6s var(--toggle-ease), background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

[data-side-reveal-navigation] .toggle .toggle-label {
  position: absolute;
  top: 50%;
  left: 16px;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  transition: opacity 0.35s ease-in-out;
}

[data-side-reveal-navigation] .toggle .toggle-label .label-wrap {
  display: block;
  overflow: hidden;
  height: 1em;
}

[data-side-reveal-navigation] .toggle .toggle-label .label {
  display: block;
  transition: transform 0.6s var(--toggle-ease);
}

[data-side-reveal-navigation] .toggle .toggle-label .label span {
  display: block;
}

[data-side-reveal-navigation] .toggle .toggle-mark {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.6s var(--toggle-ease);
}

[data-side-reveal-navigation] .toggle .toggle-mark svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  [data-side-reveal-navigation] .toggle:hover .toggle-label .label {
    transform: translateY(-1em);
  }
}

@media (hover: hover) {
  [data-side-reveal-navigation] .toggle:hover .toggle-mark {
    transform: translateY(-50%) rotate(135deg);
  }
}

[data-side-reveal-navigation] .toggle[aria-expanded="true"] {
  width: 44px;
  background: var(--on-accent);
  color: var(--surface-1);
}

[data-side-reveal-navigation] .toggle[aria-expanded="true"] .toggle-label {
  opacity: 0;
  transition: opacity 0.2s var(--toggle-ease);
}

[data-side-reveal-navigation] .toggle[aria-expanded="true"] .toggle-mark {
  transform: translateY(-50%) rotate(0deg);
}

@media (hover: hover) {
  [data-side-reveal-navigation] .toggle[aria-expanded="true"]:hover .toggle-mark {
    transform: translateY(-50%) rotate(90deg);
  }
}

@media (max-width: 600px) {
  [data-side-reveal-navigation] .toggle {
    top: 16px;
    right: 16px;
  }
}

[data-side-reveal-navigation] .drawer {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: var(--drawer-width);
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--surface-1);
}

[data-side-reveal-navigation] .drawer .drawer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 96px 40px 312px 24px;
}

@media (max-width: 600px) {
  [data-side-reveal-navigation] .drawer .drawer-content {
    padding: 88px 32px 232px 20px;
  }
}

[data-side-reveal-navigation] .drawer .drawer-content .eyebrow {
  margin-bottom: 24px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

[data-side-reveal-navigation] .drawer .drawer-content .divider {
  height: 1px;
  flex-shrink: 0;
  margin-top: 28px;
  background: var(--border-1);
  transform-origin: right center;
}

[data-side-reveal-navigation] .drawer .drawer-content .socials {
  --hover-line-width: 0.8em;
  --hover-line-height: 1px;
  --hover-link-shift: 1.05em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 24px;
  color: var(--text-1);
  font-size: 17px;
  line-height: 1.5;
}

[data-side-reveal-navigation] .drawer .drawer-content .links a,
[data-side-reveal-navigation] .drawer .drawer-content .socials a {
  position: relative;
  display: inline-block;
  transition: color 200ms ease;
}

[data-side-reveal-navigation] .drawer .drawer-content .links a::before,
[data-side-reveal-navigation] .drawer .drawer-content .socials a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--hover-line-width, 0.45em);
  height: var(--hover-line-height, 2px);
  background: currentColor;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-side-reveal-navigation] .drawer .drawer-content .links a span,
[data-side-reveal-navigation] .drawer .drawer-content .socials a span {
  display: block;
  border-radius: 2px;
  transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-side-reveal-navigation] .drawer .drawer-content .links a:focus-visible,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:focus-visible {
  outline: none;
}

[data-side-reveal-navigation] .drawer .drawer-content .links a:focus-visible span,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:focus-visible span {
  outline: 1px solid currentColor;
  outline-offset: -2px;
}

[data-side-reveal-navigation] .drawer .drawer-content .links a:hover,
[data-side-reveal-navigation] .drawer .drawer-content .links a:focus-visible,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:hover,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:focus-visible {
  color: var(--accent);
}

[data-side-reveal-navigation] .drawer .drawer-content .links a:hover::before,
[data-side-reveal-navigation] .drawer .drawer-content .links a:focus-visible::before,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:hover::before,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:focus-visible::before {
  transform: translateY(-50%) scaleX(1);
}

[data-side-reveal-navigation] .drawer .drawer-content .links a:hover span,
[data-side-reveal-navigation] .drawer .drawer-content .links a:focus-visible span,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:hover span,
[data-side-reveal-navigation] .drawer .drawer-content .socials a:focus-visible span {
  transform: translateX(var(--hover-link-shift, 0.7em));
}

[data-side-reveal-navigation] .drawer .drawer-content .links li {
  overflow: hidden;
}

[data-side-reveal-navigation] .drawer .drawer-content .links li a {
  border-radius: 2px;
  font-size: 48px;
  line-height: 1.15;
}

@media (max-width: 900px) {
  [data-side-reveal-navigation] .drawer .drawer-content .links li a {
    font-size: 42px;
  }
}

@media (max-width: 480px) {
  [data-side-reveal-navigation] .drawer .drawer-content .links li a {
    font-size: 38px;
  }
}

[data-side-reveal-navigation] .drawer .drawer-content .links li a span {
  padding: 6px 0;
}

[data-side-reveal-navigation] .page {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  transform-origin: 50% 50%;
  background: var(--surface-1);
}

[data-side-reveal-navigation] .page .page-content {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) var(--surface-1);
}

[data-side-reveal-navigation] .page .cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

[data-side-reveal-navigation] .page .cover:disabled {
  pointer-events: none;
}

[data-side-reveal-navigation][data-active] .drawer {
  visibility: visible;
}

[data-side-reveal-navigation][data-active] .page-content {
  overflow-y: hidden;
}

/* Bottom reveal: the supplied page/cover/focus lifecycle is retained. */
[data-side-reveal-navigation]{--surface-1:#141618;--text-1:#f1f0ed;--text-2:#a9aeb3;--accent:#d6e3ed;--drawer-height:min(610px,78dvh)}
[data-side-reveal-navigation] .toggle{position:absolute;top:32px;right:max(24px,calc((100vw - 1312px)/2));font-family:var(--display)}
[data-side-reveal-navigation] .drawer{inset:auto 0 0;width:100%;height:var(--drawer-height);border-top:1px solid #ffffff22;background:radial-gradient(ellipse at 80% 100%,#30383e,#141618 65%)}
[data-side-reveal-navigation] .drawer .drawer-content{padding:40px max(32px,calc((100vw - 1312px)/2));display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;min-height:100%}
[data-side-reveal-navigation] .drawer .drawer-content .links li a{font-family:var(--display);font-size:clamp(40px,5vw,70px);letter-spacing:-.05em}
[data-side-reveal-navigation] .drawer .drawer-content .eyebrow{font-size:10px;letter-spacing:2px}
[data-side-reveal-navigation] .drawer .drawer-content .socials{font-size:18px}
[data-side-reveal-navigation] .drawer .drawer-content .divider{transform-origin:left center;background:#ffffff30}
[data-side-reveal-navigation] .page{background:#171819}
[data-side-reveal-navigation] .page .page-content{scroll-behavior:smooth;scroll-padding-top:20px}
[data-side-reveal-navigation] .header{padding-right:190px}
@media(max-width:600px){[data-side-reveal-navigation]{--drawer-height:84dvh}[data-side-reveal-navigation] .toggle{top:23px;right:20px}[data-side-reveal-navigation] .drawer .drawer-content{grid-template-columns:1fr;gap:18px;padding:30px 24px;align-content:center}[data-side-reveal-navigation] .drawer .drawer-content .links li a{font-size:46px}[data-side-reveal-navigation] .drawer .drawer-content .socials{font-size:15px;gap:8px;padding-top:16px}[data-side-reveal-navigation] .drawer .drawer-content .divider{margin-top:0}[data-side-reveal-navigation] .header{padding-right:130px}}
@media(prefers-reduced-motion:reduce){[data-side-reveal-navigation] .page .page-content{scroll-behavior:auto}}

/* One fixed visual anchor on home and work: Menu stays at bottom centre. */
[data-side-reveal-navigation] .toggle{top:auto;right:auto;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);box-shadow:0 8px 32px #0005}

/* One silver material across every action control. */
.hero-work-link,
[data-side-reveal-navigation] .metal-control,
[data-side-reveal-navigation] [data-button-06] .surface,
[data-side-reveal-navigation] .toggle,
[data-side-reveal-navigation] .toggle[aria-expanded="true"]{
  color:#202329;
  border:1px solid #edf1f4b8;
  background-color:#b9c0c6;
  background-image:var(--chrome-surface);
  background-size:240% 100%,100% 100%;
  background-position:100% 0,0 0;
  box-shadow:var(--chrome-shadow);
  text-shadow:0 1px 0 #ffffff65;
  animation:chrome-control-light 6s ease-in-out infinite alternate;
}
[data-side-reveal-navigation] .toggle[aria-expanded="true"]{color:#202329;background-color:#b9c0c6}
@keyframes chrome-control-light{to{background-position:0 0,0 0}}
@media(prefers-reduced-motion:reduce){.hero-work-link,[data-side-reveal-navigation] .toggle,[data-side-reveal-navigation] .metal-control,[data-side-reveal-navigation] [data-button-06] .surface{animation:none}.hero-work-link{transition:none}}
[data-side-reveal-navigation] .drawer .drawer-content{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
@media(max-width:600px){
  [data-side-reveal-navigation] .drawer .drawer-content{padding:30px 24px calc(100px + env(safe-area-inset-bottom));align-content:center}
}
@media(max-height:600px){
  [data-side-reveal-navigation]{--drawer-height:92dvh}
  [data-side-reveal-navigation] .drawer .drawer-content{padding-top:20px;align-content:start;gap:16px}
  [data-side-reveal-navigation] .drawer .drawer-content .links li a{font-size:clamp(26px,7dvh,42px)}
}

.metal-control{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:999px;font:inherit;font-size:15px;white-space:nowrap}
