:root {
    --midnight: #071a20;
    --midnight-deep: #031014;
    --blue: #0d3440;
    --gold: #b77b16;
    --gold-light: #e0b64b;
    --gold-dark: #573308;
    --vermillion: #8e2e19;
    --ivory: #efe5ca;
    --ivory-muted: #b9ae93;
    --ink: #17120b;
    --display: "Cormorant Garamond", Georgia, serif;
    --mono: "DM Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ivory);
    background:
        radial-gradient(circle at 50% 38%, rgba(29, 79, 85, .5), transparent 34rem),
        linear-gradient(180deg, #0a252d 0%, var(--midnight) 52%, var(--midnight-deep) 100%);
    font-family: var(--display);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .28;
    background-image:
        repeating-radial-gradient(ellipse at 34% 18%, transparent 0 4px, rgba(219, 165, 46, .08) 5px, transparent 6px 13px),
        linear-gradient(100deg, transparent 49.7%, rgba(255,255,255,.018) 50%, transparent 50.3%);
    background-size: 370px 210px, 7px 100%;
    mix-blend-mode: screen;
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.atmosphere::before,
.atmosphere::after {
    content: "";
    position: absolute;
    width: min(65vw, 850px);
    aspect-ratio: 1;
    border: 1px solid rgba(224, 182, 75, .08);
    border-radius: 46% 54% 48% 52%;
    transform: rotate(18deg);
}
.atmosphere::before { top: -42%; left: -20%; box-shadow: 0 0 0 40px rgba(224,182,75,.012), 0 0 0 110px rgba(224,182,75,.01); }
.atmosphere::after { right: -26%; bottom: -48%; transform: rotate(-26deg); box-shadow: 0 0 0 54px rgba(224,182,75,.012), 0 0 0 130px rgba(224,182,75,.009); }

a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 5px; }

.site-header {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 78px;
    padding: 18px clamp(18px, 4vw, 58px);
    border-bottom: 1px solid rgba(224, 182, 75, .14);
}
.wordmark { justify-self: start; color: var(--ivory); font-family: var(--mono); font-size: .73rem; letter-spacing: .16em; text-decoration: none; }
.wordmark span { color: var(--gold-light); }
.cabinet-mark { margin: 0; color: #94a69f; font-family: var(--display); font-size: clamp(.82rem, 1.4vw, 1rem); font-style: italic; letter-spacing: .035em; }
.language-toggle { justify-self: end; padding: 8px 0; border: 0; color: var(--ivory-muted); background: transparent; font-family: var(--mono); font-size: .66rem; cursor: pointer; }
.language-toggle:hover { color: var(--gold-light); }

.portrait-room {
    display: grid;
    justify-items: center;
    min-height: calc(100svh - 126px);
    padding: clamp(38px, 7vh, 82px) 20px 58px;
    text-align: center;
}
.collection-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 30px;
    color: #92a69f;
    font-family: var(--mono);
    font-size: clamp(.55rem, 1vw, .66rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.collection-label::before,
.collection-label::after { content: ""; width: 30px; height: 1px; background: rgba(224,182,75,.4); }

.artwork-stage { position: relative; width: min(74vw, 408px); }
.frame-shadow { position: absolute; inset: 7% -7% -5%; background: rgba(0,0,0,.62); filter: blur(25px); transform: translateY(18px); }
.ornate-frame {
    position: relative;
    padding: clamp(16px, 3.2vw, 26px);
    background:
        linear-gradient(135deg, transparent 0 9%, rgba(255,229,141,.5) 10%, transparent 11% 89%, rgba(76,39,3,.7) 90% 91%, transparent 92%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
        linear-gradient(135deg, #5b3507, #d3a332 18%, #69400b 36%, #dfb64b 57%, #64400d 78%, #ba811e);
    border: 1px solid #f0ce72;
    box-shadow: inset 0 0 0 4px #533006, inset 0 0 0 7px rgba(246,209,107,.54), 0 18px 45px rgba(0,0,0,.52);
}
.ornate-frame::before,
.ornate-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    width: 34%;
    height: 18px;
    border: 1px solid #d8ac43;
    background: linear-gradient(90deg, #593507, #d9ad3f 50%, #593507);
    transform: translateX(-50%);
    clip-path: polygon(0 50%, 18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%);
}
.ornate-frame::before { top: -12px; }
.ornate-frame::after { bottom: -12px; }
.frame-lip { padding: 7px; background: #211305; border: 2px ridge #d4a83d; box-shadow: inset 0 0 16px #000; }
.frame-corner { position: absolute; z-index: 3; width: 34px; height: 34px; border: 2px solid var(--gold-light); transform: rotate(45deg); background: #76500f; box-shadow: inset 0 0 0 3px #2e1a03; }
.corner-tl { top: -9px; left: -9px; }
.corner-tr { top: -9px; right: -9px; }
.corner-bl { bottom: -9px; left: -9px; }
.corner-br { right: -9px; bottom: -9px; }

.portrait { position: relative; aspect-ratio: 1055 / 1280; margin: 0; overflow: hidden; background: #0b2730; }
.portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(0,0,0,.72); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tracking-eye {
    position: absolute;
    z-index: 2;
    top: 55.35%;
    width: 6.2%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 46% 38%, #d19b27 0 18%, #a76d10 58%, #76501a 100%);
    box-shadow: inset 1px 2px 4px rgba(45,24,2,.7), 0 0 0 1px rgba(61,34,4,.42);
    transform: translate(-50%, -50%);
}
.eye-left { left: 34.05%; }
.eye-right { left: 55.85%; }
.tracking-eye i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #58616a 0 5%, #11191c 17%, #020303 72%);
    box-shadow: 0 1px 3px rgba(0,0,0,.7);
    transform: translate(-50%, -50%);
    will-change: transform;
}
.artwork-number { margin: 23px 0 0; color: #8ca096; font-family: var(--mono); font-size: .55rem; letter-spacing: .15em; }

.profile-copy { width: min(100%, 680px); margin-top: clamp(38px, 6vh, 64px); }
.discipline { margin: 0 0 11px; color: var(--gold-light); font-family: var(--mono); font-size: clamp(.55rem, 1.2vw, .67rem); letter-spacing: .12em; line-height: 1.7; }
.profile-copy h1 { margin: 0; font-size: clamp(3.4rem, 9vw, 6.6rem); font-weight: 500; letter-spacing: -.035em; line-height: .86; text-shadow: 0 5px 30px rgba(0,0,0,.35); }
.bio { max-width: 580px; margin: 26px auto 29px; color: #d1c7ad; font-size: clamp(1.16rem, 2.2vw, 1.45rem); line-height: 1.46; }
.projects { width: min(100%, 500px); margin: 38px auto 0; text-align: left; }
.projects h2 { margin: 0 0 7px; color: #8fa39b; font-family: var(--mono); font-size: .58rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.project-browser { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid rgba(224,182,75,.56); }
.project-viewport { min-width: 0; overflow: hidden; }
.project-track { display: flex; width: 100%; transition: transform 360ms cubic-bezier(.22,.72,.2,1); }
.project-slide { display: flex; align-items: center; flex: 0 0 100%; min-width: 0; min-height: 46px; }
.project-link, .coming-soon { margin: 0; color: var(--ivory); font-family: var(--mono); font-size: .68rem; letter-spacing: .045em; line-height: 1.35; }
.project-link { display: flex; align-items: center; width: 100%; min-height: 46px; text-decoration: none; }
.project-link:hover { color: var(--gold-light); }
.coming-soon { color: #899c95; font-style: italic; }
.project-controls { display: flex; align-items: stretch; width: 86px; }
.project-arrow { display: flex; align-items: center; justify-content: center; gap: 8px; width: 86px; min-height: 46px; padding: 0 10px; border: 0; border-left: 1px solid rgba(224,182,75,.32); color: var(--gold-light); background: rgba(224,182,75,.025); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease; }
.project-arrow span { font-family: var(--mono); font-size: .49rem; letter-spacing: .14em; text-transform: uppercase; }
.project-arrow i { font-family: var(--display); font-size: 1.45rem; font-style: normal; line-height: 1; transition: transform 160ms ease; }
.project-arrow--next:hover:not(:disabled) i { transform: translateX(3px); }
.project-arrow--previous:hover:not(:disabled) i { transform: translateX(-3px); }
.project-arrow:hover:not(:disabled) { color: var(--ink); background: var(--gold-light); }
.project-arrow:disabled { display: none; }
.project-count { display: block; margin-top: 5px; color: #657c75; font-family: var(--mono); font-size: .48rem; letter-spacing: .12em; text-align: right; }
.contact-cta {
    position: fixed;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 11px 16px 10px;
    border: 1px solid rgba(224,182,75,.78);
    border-radius: 3px 3px 0 3px;
    color: var(--gold-light);
    background: rgba(3,16,20,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.42), inset 0 0 0 1px rgba(239,229,202,.05);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.contact-cta::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: rgba(3,16,20,.94);
    transform: skew(-18deg) rotate(45deg);
    transition: background-color 180ms ease;
}
.contact-cta i { font-family: var(--display); font-size: 1rem; font-style: normal; transition: transform 180ms ease; }
.contact-cta:hover { color: var(--ink); background: var(--gold-light); box-shadow: 0 13px 34px rgba(0,0,0,.52); transform: translateY(-2px); }
.contact-cta:hover::after { background: var(--gold-light); }
.contact-cta:hover i { transform: translate(2px,-2px); }

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding: 17px clamp(18px, 4vw, 58px) calc(17px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(224,182,75,.14);
    color: #718780;
    font-family: var(--mono);
    font-size: .53rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.site-footer span:nth-child(2) { text-align: center; }
.site-footer span:last-child { text-align: right; }

@media (max-width: 600px) {
    .site-header { grid-template-columns: 1fr auto; min-height: 82px; padding: 13px 17px 12px; }
    .cabinet-mark { display: block; grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 8px; font-size: .76rem; }
    .portrait-room { min-height: auto; padding: 38px 16px 50px; }
    .collection-label { margin-bottom: 25px; }
    .artwork-stage { width: min(78vw, 360px); }
    .ornate-frame { padding: 17px; }
    .frame-corner { width: 27px; height: 27px; }
    .profile-copy { margin-top: 43px; }
    .bio { max-width: 34ch; }
    .projects { margin-top: 34px; }
    .project-slide, .project-link { min-height: 44px; }
    .project-link, .coming-soon { font-size: .63rem; }
    .project-controls, .project-arrow { width: 78px; }
    .project-arrow { min-height: 44px; padding-inline: 8px; gap: 7px; }
    .contact-cta { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); min-height: 46px; padding: 10px 13px 9px; }
    .site-footer { grid-template-columns: 1fr auto; }
    .site-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}