:root {
  color-scheme: light;
  --beige: #e7dfcf;
  --beige-deep: #cec3af;
  --ink: #191816;
  --paper: #f4efe5;
  --font-sans: "Instrument Sans", "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --beige: #292826;
  --beige-deep: #3a3834;
  --ink: #eee8dc;
  --paper: #1d1c1a;
}

@property --card-light-color {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--beige); }
body { margin: 0; min-height: 100%; font-family: var(--font-sans); color: var(--ink); background: var(--beige); overflow-x: hidden; }
body.is-landing { overflow: hidden; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.app { min-height: 100dvh; }
.status { min-height: 100dvh; margin: 0; display: grid; place-items: center; }

.landing { min-height: 100dvh; position: relative; isolation: isolate; overflow: hidden; background: var(--beige); transition: background-color 320ms ease, color 320ms ease; }
.background-name { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -51%); width: 100%; margin: 0; display: grid; gap: .06em; text-align: center; font-family: var(--font-serif); font-size: clamp(7rem, 18vw, 18rem); font-weight: 400; line-height: .72; letter-spacing: .015em; color: color-mix(in srgb, var(--ink) 10.5%, transparent); text-transform: uppercase; pointer-events: none; z-index: 2; }
.background-name span:last-child { margin-left: .28em; }
.landing-light { --card-light-x: 50%; --card-light-y: 106%; --card-light-width: 72%; --card-light-height: 60%; --card-light-color: transparent; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse var(--card-light-width) var(--card-light-height) at var(--card-light-x) var(--card-light-y), color-mix(in srgb, var(--card-light-color) 64%, transparent) 0%, color-mix(in srgb, var(--card-light-color) 28%, transparent) 34%, transparent 72%); transition: opacity 620ms cubic-bezier(.2,.7,.2,1), --card-light-color 420ms ease; will-change: opacity, background; }
.landing.has-card-light .landing-light { opacity: .78; }
.landing-intro { position: absolute; z-index: 60; top: clamp(1.1rem, 3vw, 2rem); left: clamp(1.1rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .11em; font-size: .69rem; font-weight: 600; }
.theme-toggle { position: absolute; z-index: 70; top: clamp(2.6rem, 5vw, 3.65rem); left: clamp(1.1rem, 3vw, 2.4rem); border: 0; border-bottom: 1px solid currentColor; padding: 0 0 .16rem; color: inherit; background: transparent; text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 600; opacity: .64; transition: opacity 180ms ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; }
.landing-name { position: absolute; z-index: 60; top: clamp(1.1rem, 3vw, 2rem); right: clamp(1.1rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .11em; font-size: .69rem; font-weight: 600; }

.keychain-stage { position: absolute; z-index: 50; inset: 0; touch-action: none; user-select: none; }
.keychain-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: none !important; }
.keychain-instruction { position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); margin: 0; width: max-content; max-width: 86vw; text-align: center; text-transform: uppercase; letter-spacing: .11em; font-size: .6rem; font-weight: 600; opacity: .58; }
.keychain-project-buttons { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.keychain-project-buttons:focus-within { clip: auto; clip-path: none; width: auto; height: auto; overflow: visible; left: 1.5rem; top: 6rem; z-index: 100; display: grid; gap: .3rem; padding: .5rem; border-radius: .75rem; background: rgba(244,239,229,.94); box-shadow: 0 10px 30px rgba(0,0,0,.14); white-space: normal; }
.keychain-project-buttons button { border: 1px solid rgba(0,0,0,.18); border-radius: .45rem; padding: .4rem .65rem; background: transparent; text-align: left; }

.social-footer,
.social-footer-hit { position: absolute; left: clamp(1rem, 3vw, 2.4rem); right: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; font-size: clamp(.68rem, 1.1vw, .82rem); text-transform: uppercase; letter-spacing: .07em; }
.social-footer { z-index: 40; pointer-events: none; }
.social-footer-hit { z-index: 70; }
.social-footer a { display: inline-block; text-decoration: none; position: relative; text-shadow: 0 1px 7px var(--beige), 0 1px 14px var(--beige); transition: transform 120ms ease, opacity 120ms ease; }
.social-footer-hit a { display: inline-block; color: transparent; text-decoration: none; }
.social-footer a:first-child,
.social-footer-hit a:first-child { justify-self: start; }
.social-footer a:nth-child(2),
.social-footer-hit a:nth-child(2) { justify-self: center; }
.social-footer a:last-child,
.social-footer-hit a:last-child { justify-self: end; }
.social-footer a::after { content: ""; position: absolute; left: 0; bottom: -.25rem; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 220ms ease; }
.landing:has(.social-footer-hit a:nth-child(1):hover) .social-footer a:nth-child(1)::after,
.landing:has(.social-footer-hit a:nth-child(2):hover) .social-footer a:nth-child(2)::after,
.landing:has(.social-footer-hit a:nth-child(3):hover) .social-footer a:nth-child(3)::after { transform: scaleX(1); transform-origin: left; }
.social-footer-hit a:active { transform: translateY(1px); }

.project-transition-cover { position: fixed; z-index: 500; pointer-events: none; box-shadow: 0 20px 45px rgba(0,0,0,.18); will-change: left, top, width, height, border-radius; }
.project-view { --project-color: #333; --project-secondary: #171717; --project-ink: #fff; min-height: 100dvh; padding: clamp(2rem, 5vw, 5rem) clamp(6.5rem, 15vw, 13rem) 3rem clamp(1.3rem, 7vw, 7rem); color: var(--project-ink); background: linear-gradient(180deg, var(--project-color) 0%, var(--project-color) 12%, color-mix(in srgb, var(--project-color) 70%, var(--project-secondary)) 48%, var(--project-secondary) 100%); position: relative; isolation: isolate; overflow: hidden; animation: project-reveal 480ms ease both; }
.project-view.is-direct { animation: direct-project 520ms cubic-bezier(.2,.8,.2,1) both; }
.project-view > :not(.project-dot-field) { position: relative; z-index: 2; }
.project-dot-field { position: absolute; z-index: 0; left: 0; right: 0; pointer-events: none; opacity: .28; color: var(--project-ink); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.project-dot-field--small { top: 18%; height: 28%; background-image: radial-gradient(circle, currentColor 0 1px, transparent 1.3px); background-size: 42px 42px; background-position: 11px 7px; opacity: .1; }
.project-dot-field--medium { top: 46%; height: 31%; background-image: radial-gradient(circle, currentColor 0 2px, transparent 2.4px); background-size: 58px 58px; background-position: 17px 23px; opacity: .115; transform: rotate(-1.5deg) scale(1.03); }
.project-dot-field--large { top: 73%; bottom: 0; background-image: radial-gradient(circle, currentColor 0 4px, transparent 4.6px); background-size: 78px 78px; background-position: 31px 19px; opacity: .13; transform: rotate(1deg) scale(1.04); }
.project-close { position: fixed !important; z-index: 80 !important; top: clamp(1rem, 2.5vw, 1.8rem); right: clamp(1rem, 2.5vw, 1.8rem); width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--project-ink) 25%, transparent); color: var(--project-ink); background: color-mix(in srgb, var(--project-color) 72%, transparent); backdrop-filter: blur(12px); box-shadow: none; }
.project-close span { position: absolute; left: 50%; top: 50%; width: 1.35rem; height: 1.5px; background: currentColor; transform: translate(-50%,-50%) rotate(45deg); transition: transform 240ms ease; }
.project-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.project-close:hover span:first-child { transform: translate(-50%,-50%) rotate(135deg); }
.project-close:hover span:last-child { transform: translate(-50%,-50%) rotate(45deg); }

.project-keychain { position: fixed !important; z-index: 60 !important; right: 0; top: 50%; width: clamp(7rem, 9vw, 9.5rem); transform: translateY(-50%); display: grid; gap: .48rem; }
.project-menu-tab { position: relative; justify-self: end; width: 100%; min-height: 3.15rem; border: 1px solid color-mix(in srgb, var(--tab-ink) 25%, transparent); border-right: 0; border-radius: .72rem 0 0 .72rem; padding: .5rem .8rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .45rem; color: var(--tab-ink); background: var(--tab-color); box-shadow: -7px 9px 18px rgba(20,16,12,.15), inset 0 1px rgba(255,255,255,.24); text-align: left; transition: width 260ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, outline-color 180ms ease; outline: 2px solid transparent; outline-offset: 2px; }
.project-menu-tab:hover,
.project-menu-tab:focus-visible,
.project-menu-tab.is-active { z-index: 5; width: calc(100% + 1.15rem); outline-color: color-mix(in srgb, var(--project-ink) 75%, transparent); box-shadow: -12px 14px 25px rgba(20,16,12,.22), inset 0 1px rgba(255,255,255,.25); }
.project-menu-index { align-self: start; font-size: .52rem; font-weight: 700; letter-spacing: .08em; opacity: .68; }
.project-menu-title { min-width: 0; padding: .12em .45rem .16em 0; font-family: var(--font-serif); font-size: clamp(.84rem, 1.05vw, 1rem); line-height: 1.12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu-tab.is-blog { background: color-mix(in srgb, var(--project-ink) 10%, transparent); backdrop-filter: blur(10px); }

.project-hero { max-width: 70rem; min-height: min(84vh, 55rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.project-document { position: relative; z-index: 2; }
.project-kicker { margin: 0 0 1.2rem; text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; font-weight: 700; }
.project-hero h1 { margin: 0; max-width: 10ch; font-family: var(--font-serif); font-size: clamp(5rem, 14vw, 13rem); font-weight: 400; line-height: .73; letter-spacing: .015em; color: var(--project-ink); overflow-wrap: anywhere; }
.project-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.project-tags:empty,
.project-description:empty { display: none; }
.project-tags span,
.project-star-pill { min-height: 2.1rem; border: 1px solid color-mix(in srgb, var(--project-ink) 35%, transparent); border-radius: 999px; padding: .45rem .85rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; text-transform: uppercase; font-size: .66rem; letter-spacing: .08em; white-space: nowrap; }
.project-star-pill { border-color: var(--project-ink); color: var(--project-color); background: var(--project-ink); text-decoration: none; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease; }
.project-star-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.project-description { margin: 2.2rem 0 0; max-width: 57ch; font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.48; }
.project-external { margin-top: 1.8rem; padding-bottom: .25rem; border-bottom: 1px solid currentColor; text-decoration: none; font-weight: 600; }
.project-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); padding: 3rem 0 8rem; }
.gallery-shot { grid-column: span 6; border: 1px solid color-mix(in srgb, var(--project-ink) 14%, transparent); padding: clamp(.7rem, 1.4vw, 1.2rem); border-radius: 1.3rem; background: color-mix(in srgb, var(--project-ink) 8%, transparent); backdrop-filter: blur(3px); min-height: 18rem; display: grid; place-items: center; overflow: hidden; box-shadow: 0 18px 50px rgba(20,16,14,.13); transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease; }
.gallery-shot:nth-child(3n) { grid-column: 3 / span 8; }
.gallery-shot:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(30,25,20,.16); }
.gallery-shot img { display: block; max-height: 72vh; object-fit: contain; border-radius: .65rem; }
.gallery-empty { grid-column: 1 / -1; padding: 5rem; text-align: center; border: 1px dashed rgba(0,0,0,.25); }
.blog-empty { min-height: 65vh; }
.project-footer { min-height: 9rem; padding: 3rem 1.5rem; display: grid; place-items: center; text-transform: uppercase; font-size: .7rem; letter-spacing: .09em; text-align: center; }
.project-footer--blog { grid-template-columns: 1fr auto 1fr; }
.project-footer--blog .project-footer-add { justify-self: start; }
.project-footer--blog .project-footer-name { grid-column: 2; }
.project-footer button { border: 0; padding: 0; color: inherit; background: none; text-transform: inherit; letter-spacing: inherit; }
.project-footer-add { position: relative; font-weight: 700; }
.project-footer-add::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 180ms ease; }
.project-footer-add:hover::after, .project-footer-add:focus-visible::after { transform: scaleX(1); }

.back-to-top { --scroll-progress: 0deg; position: fixed !important; z-index: 75 !important; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 1.8rem); width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; padding: 3px; display: grid; place-items: center; color: var(--project-ink); background: conic-gradient(var(--project-ink) var(--scroll-progress), color-mix(in srgb, var(--project-ink) 18%, transparent) 0); opacity: 0; pointer-events: none; transform: translateY(.8rem) scale(.9); transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); }
.back-to-top::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: color-mix(in srgb, var(--project-color) 78%, var(--project-secondary)); }
.back-to-top span { position: relative; z-index: 1; font-size: 1.15rem; line-height: 1; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.lightbox { position: fixed; z-index: 600; inset: 0; padding: 3.8rem 6rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; gap: 1rem; background: rgba(15,14,13,.9); backdrop-filter: blur(14px); color: white; }
.lightbox img { justify-self: center; max-height: calc(100dvh - 7.6rem); max-width: 100%; border-radius: .7rem; box-shadow: 0 25px 80px rgba(0,0,0,.45); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: white; color: #111; font-size: 1.7rem; }
.lightbox-arrow { border: 1px solid rgba(255,255,255,.35); border-radius: 50%; width: 3rem; height: 3rem; background: transparent; color: white; }
.lightbox-count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); font-size: .75rem; letter-spacing: .1em; }

.custom-cursor { position: fixed; z-index: 1000; left: -.45rem; top: -.45rem; width: .9rem; height: .9rem; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: difference; color: white; background: transparent; transition: background-color 140ms ease, opacity 120ms ease; }
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-over-action { background: currentColor; }

@keyframes project-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes direct-project { from { opacity: 0; } to { opacity: 1; } }

@media (pointer: fine) { body, button, a, canvas, [role="button"] { cursor: none !important; } }

@media (max-width: 760px) {
  .background-name { font-size: clamp(5.7rem, 28vw, 9rem); line-height: .74; }
  .landing-intro { font-size: .6rem; }
  .theme-toggle { top: 2.75rem; font-size: .53rem; }
  .keychain-stage { inset: 0; }
  .keychain-instruction { bottom: 7.1rem; width: 92%; font-size: .55rem; }
  .social-footer,
  .social-footer-hit { grid-template-columns: 1fr; justify-items: start; gap: .42rem; font-size: .62rem; }
  .social-footer a:nth-child(2), .social-footer a:last-child,
  .social-footer-hit a:nth-child(2), .social-footer-hit a:last-child { justify-self: start; }
  .project-view { padding: 5.5rem 5.2rem 2rem 1.4rem; }
  .project-close { width: 2.85rem; height: 2.85rem; }
  .back-to-top { width: 2.85rem; height: 2.85rem; }
  .project-keychain { width: 5.8rem; gap: .35rem; padding-left: .45rem; }
  .project-menu-tab { min-height: 2.7rem; padding: .4rem .48rem; gap: .25rem; }
  .project-menu-title { font-size: .72rem; }
  .project-hero { min-height: 68vh; }
  .project-hero h1 { font-size: clamp(4rem, 20vw, 7rem); line-height: .8; }
  .project-description { font-size: .96rem; }
  .project-gallery { display: block; padding-bottom: 5rem; }
  .gallery-shot { width: 100%; min-height: 10rem; margin-bottom: 1rem; padding: .55rem; }
  .gallery-shot img { max-height: 68vh; }
  .project-footer { min-height: 8rem; }
  .lightbox { padding: 4.5rem .7rem; grid-template-columns: 2.6rem minmax(0,1fr) 2.6rem; gap: .3rem; }
  .lightbox-arrow { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing, .landing-light { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}