:root { color-scheme: light dark; --page: #faf8f5; --ink: #27202a; --muted: #665c68; --line: #ded6de; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #8750bd; outline-offset: 5px; }
.skip-link { position: absolute; z-index: 5; left: 1rem; top: .5rem; transform: translateY(-160%); padding: .75rem 1rem; background: var(--page); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header, .site-footer { max-width: 100rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem clamp(1.5rem, 4vw, 4rem); }
.brand { display: inline-flex; min-height: 44px; align-items: center; font-size: 1.65rem; letter-spacing: -.07em; font-weight: 750; text-decoration: none; }
.brand span { color: #8750bd; }
.site-header p { margin: 0; color: var(--muted); font-size: .85rem; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100rem; margin: auto; }
.project { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.75rem, 4.2vw, 4.5rem); text-decoration: none; min-height: min(50rem, calc(100svh - 11rem)); }
.project:focus-visible { outline-offset: -7px; outline-color: #cfb6ed; }
.project-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.project-name { font-size: 1.9rem; font-weight: 650; letter-spacing: -.04em; }
.project-number { font-size: .65rem; letter-spacing: .1em; }
.project-copy { position: relative; z-index: 1; margin-top: auto; padding-top: 12.5rem; }
.eyebrow { font-size: .8rem; letter-spacing: .03em; margin: 0 0 1rem; }
h2 { font-size: clamp(2rem, 3.8vw, 4rem); letter-spacing: -.045em; line-height: 1.12; font-weight: 550; margin: 0 0 1.5rem; }
.description { max-width: 27rem; font-size: 1rem; line-height: 1.8; margin: 0 0 2rem; }
.project-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid; padding: .65rem 0; min-height: 48px; font-size: .9rem; font-weight: 600; }
.project-link span { font-size: 1.4rem; transition: transform .2s ease; }
.project:hover .project-link span { transform: translate(3px, -3px); }
.koikpe { background: #191022; color: #f8f3ff; }
.koikpe .eyebrow, .koikpe .project-number { color: #c1a2e3; }
.koikpe .description { color: #d0c1df; }
.koikpe .project-link { border-color: #aa7bdd; }
.orbit { position: absolute; top: 6rem; right: 6%; width: 14rem; height: 14rem; display: grid; place-items: center; transform: rotate(-15deg); }
.orbit i { position: absolute; inset: 0; border: 1px solid #8c2bee; border-radius: 50%; }
.orbit i:nth-child(2) { inset: 1.4rem; border-color: #8156a5; transform: translateX(-1.75rem); }
.orbit i:nth-child(3) { inset: 2.8rem; border-color: #c59ae8; transform: translateX(1.5rem); }
.orbit span { font-family: Georgia, serif; font-size: 4.5rem; color: #d9bafa; transform: rotate(15deg); }
.sanduk { background: #f1e9dd; color: #3d1f3d; }
.sanduk .project-name, .sanduk h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.sanduk .project-name { font-style: italic; }
.sanduk .eyebrow, .sanduk .project-number, .sanduk .description { color: #635261; }
.sanduk .project-link { border-color: #a27e4a; }
.sanduk h2 { letter-spacing: -.04em; }
.sanduk h2 em { font-weight: 400; }
.keepsake { position: absolute; top: 8rem; right: 10%; width: 12rem; height: 9rem; transform: rotate(-7deg); }
.keepsake-lid { position: absolute; width: 12rem; height: 5rem; border: 1px solid #a27e4a; border-radius: 5rem 5rem 0 0; }
.keepsake-base { position: absolute; top: 5rem; width: 12rem; height: 4rem; border: 1px solid #a27e4a; border-top: 0; border-radius: 0 0 .5rem .5rem; }
.keepsake-key { position: absolute; top: 4.5rem; left: 5.5rem; width: 1rem; height: 1.5rem; border-radius: .5rem; background: #a27e4a; }
.keepsake i { position: absolute; top: -1rem; right: -1.5rem; width: 4rem; height: 4rem; border-top: 1px solid #a27e4a; border-right: 1px solid #a27e4a; border-radius: 0 4rem 0 0; }
.site-footer { color: var(--muted); font-size: .75rem; padding-block: 1.1rem; }
.site-footer p { margin: 0; }
.error-main { max-width: 48rem; min-height: 70svh; padding: 5rem 1.5rem; margin: auto; }
.error-main h1 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1.15; }
.error-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.error-links a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: .3em; }
@media (prefers-color-scheme: dark) { :root { --page: #17131a; --ink: #f8f2f8; --muted: #cbbfce; --line: #65546a; } .sanduk { background: #2a202b; color: #f2e6d6; } .sanduk .eyebrow, .sanduk .project-number, .sanduk .description { color: #d0bfcf; } }
@media (max-width: 680px) { .site-header { padding-block: 1rem; } .site-header p { max-width: 10rem; text-align: right; font-size: .75rem; } .projects { grid-template-columns: 1fr; } .project { min-height: 37rem; padding: 1.75rem; } h2 { font-size: clamp(2.2rem, 8.5vw, 3.2rem); } .project-copy { padding-top: 10rem; } .orbit { width: 11rem; height: 11rem; top: 5.5rem; right: 9%; } .keepsake { top: 6.5rem; transform: rotate(-7deg) scale(.85); transform-origin: right top; } .description { max-width: 30rem; } }
@media (prefers-reduced-motion: reduce) { .project-link span { transition: none; } .project:hover .project-link span { transform: none; } }