@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --color-gallery: #FFFFFF;
  --color-gold: #B59A62;
  --color-gold-deep: #80683F;
  --color-ink: #242629;
  --color-slate: #55575A;
  --color-silver: #B9B6B0;
  --color-paper: #F6F5F2;
  --font-display: 'Instrument Serif', 'Iowan Old Style', Baskerville, Georgia, serif;
  --font-sans: 'Manrope', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --max-width: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 4.75rem);
  --section-space: clamp(6rem, 12vw, 12.5rem);
  --border: 1px solid color-mix(in srgb, var(--color-silver) 75%, transparent);
  color: var(--color-ink);
  background: var(--color-gallery);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-gallery); }
body { margin: 0; overflow-x: hidden; background: var(--color-gallery); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--color-gallery); background: var(--color-gold-deep); }

.skip-link { position: fixed; z-index: 30; top: 1rem; left: 1rem; transform: translateY(-150%); padding: .8rem 1rem; background: var(--color-ink); color: white; font-size: .75rem; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.section-shell { width: min(100%, var(--max-width)); margin-inline: auto; padding-inline: var(--page-gutter); }

.site-header { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 5.75rem; padding: 0 var(--page-gutter); border-bottom: var(--border); position: relative; z-index: 10; background: color-mix(in srgb, var(--color-gallery) 92%, transparent); }
.wordmark { display: inline-flex; gap: .37em; font: 600 .82rem/1 var(--font-sans); letter-spacing: .05em; white-space: nowrap; }
.wordmark span { color: var(--color-gold-deep); }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.5rem); font-size: .69rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.primary-nav > a:not(.nav-contact) { color: var(--color-slate); transition: color .2s ease; }
.primary-nav > a:not(.nav-contact):hover { color: var(--color-gold-deep); }
.nav-contact { padding: .82rem 1rem; border: 1px solid var(--color-gold); color: var(--color-gold-deep); transition: background .2s ease, color .2s ease; }
.nav-contact:hover { background: var(--color-gold-deep); color: white; }
.menu-toggle { display: none; border: 0; padding: .6rem 0; background: none; color: var(--color-ink); font: 600 .68rem var(--font-mono); letter-spacing: .1em; cursor: pointer; }

.hero { display: grid; grid-template-columns: minmax(0, .97fr) minmax(360px, 1.03fr); grid-template-rows: minmax(570px, calc(100vh - 5.75rem)) auto; min-height: 680px; position: relative; }
.hero-copy { align-self: center; padding-block: 7rem 5rem; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1.4rem; color: var(--color-gold-deep); font: 500 .62rem/1.4 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.045em; font-weight: 400; }
h1 { max-width: 750px; margin-bottom: 1.6rem; font: clamp(4.2rem, 8.1vw, 8.7rem)/.82 var(--font-display); }
h1 em, h2 em { color: var(--color-gold-deep); font-weight: 400; }
.hero-intro { max-width: 28rem; color: var(--color-slate); font-size: clamp(.93rem, 1.3vw, 1.1rem); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 1.9rem; margin-top: 2.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.15rem; gap: 1.35rem; padding: .85rem 1.2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease, background .25s ease, transform .25s ease; }
.button-primary { background: var(--color-ink); color: var(--color-gallery); }
.button-primary:hover { background: var(--color-gold-deep); transform: translateY(-2px); }
.text-link { display: inline-flex; gap: .75rem; align-items: center; color: var(--color-gold-deep); font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.text-link span { font-size: 1rem; transition: transform .2s ease; }.text-link:hover span { transform: translate(3px, -3px); }
.hero-art { position: relative; overflow: hidden; margin-left: clamp(1rem, 5vw, 5rem); border-left: var(--border); background: radial-gradient(circle at 48% 51%, #e8e3da 0, #f8f6f2 22%, transparent 57%), linear-gradient(145deg, #fbfaf8 0%, #efede7 100%); }
.hero-art::before, .hero-art::after { position:absolute; content:""; inset: 1.3rem; border: 1px solid color-mix(in srgb, var(--color-gold) 28%, transparent); pointer-events:none; }.hero-art::after { inset: 2.8rem; border-color: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.aether-object { position: absolute; inset: 50% auto auto 50%; width: clamp(18rem, 33vw, 33rem); aspect-ratio: 1; transform: translate(-48%, -48%) rotate(-15deg); border: 1px solid color-mix(in srgb, var(--color-gold) 75%, transparent); border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%; box-shadow: 1.4rem 1.4rem 0 color-mix(in srgb, var(--color-ink) 7%, transparent), inset 2.7rem -3rem 6rem color-mix(in srgb, var(--color-gold) 18%, transparent); background: radial-gradient(ellipse at 36% 30%, #fff 0 5%, #e0d6bf 20%, #998563 48%, #3d3c37 100%); animation: object-drift 12s ease-in-out infinite alternate; }
.aether-object::before { content:""; position:absolute; inset: 10%; border: 1px solid color-mix(in srgb, white 60%, transparent); border-radius: inherit; }.aether-object i { position:absolute; width: 29%; height: 86%; top: 7%; left: 37%; border-radius: 50%; background: linear-gradient(90deg, transparent, #f4ead7 50%, transparent); filter: blur(2px); opacity:.8; }.aether-object b { position:absolute; top: 45%; left: -20%; width: 140%; height: 1px; background: color-mix(in srgb, var(--color-gallery) 76%, transparent); transform: rotate(18deg); }.aether-object span { position:absolute; width: 28%; aspect-ratio: 1; border: 1px solid var(--color-gold); border-radius:50%; top: 34%; left: 34%; }
.art-label { position:absolute; z-index:1; color: var(--color-gold-deep); font: .55rem/1.4 var(--font-mono); letter-spacing: .09em; }.art-label--top { top: 2.2rem; left: 2.2rem; }.art-label--bottom { bottom: 2.2rem; right: 2.2rem; writing-mode:vertical-rl; }
.hero-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-block: 1rem; border-top: var(--border); color: var(--color-slate); font: .56rem var(--font-mono); letter-spacing: .09em; }

.work-section, .disciplines-section, .studio-section, .finale { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.section-head { display:grid; grid-template-columns: 1.15fr .85fr; align-items:end; gap: 3rem; margin-bottom: clamp(3rem, 7vw, 6rem); }.section-head .eyebrow { grid-column:1 / -1; margin-bottom:0; }.section-head h2 { margin:0; font: clamp(3.25rem, 6.3vw, 6.8rem)/.87 var(--font-display); }.section-head > p:last-child { max-width: 26rem; margin-bottom:.35rem; color:var(--color-slate); font-size:.93rem; line-height:1.65; }
.project-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); }.project-card { grid-column: span 7; }.project-card:nth-child(2) { grid-column: span 5; margin-top: clamp(5rem, 12vw, 11rem); }.project-card:nth-child(3) { grid-column: 4 / span 7; margin-top: clamp(1rem, 3vw, 3rem); }.project-card a { display:block; }.project-art { height: clamp(19rem, 42vw, 40rem); position:relative; overflow:hidden; background:#ebe8e1; transition: transform .5s cubic-bezier(.2,.75,.2,1); }.project-card:hover .project-art { transform: translateY(-.35rem); }.project-card--object .project-art { background: linear-gradient(145deg, #e9e7e1, #c8c0b1); }.project-card--field .project-art { background: #2d302c; }.project-index { position:absolute; z-index:2; top:1.2rem; left:1.25rem; color:var(--color-gallery); font:.6rem var(--font-mono); }.project-axis { position:absolute; z-index:2; inset:auto 1.25rem 1.2rem auto; width:4rem; height:4rem; border-radius:50%; border:1px solid color-mix(in srgb, var(--color-gallery) 70%, transparent); }.project-axis::before, .project-axis::after { content:""; position:absolute; background:color-mix(in srgb, var(--color-gallery) 80%, transparent); }.project-axis::before { width:1px; height:100%; left:50%; }.project-axis::after { width:100%; height:1px; top:50%; }.project-form { position:absolute; inset:0; }.project-card--archive .project-form { background: radial-gradient(ellipse at 55% 49%, #e4d8bd 0 7%, transparent 7.5%), radial-gradient(ellipse at 55% 49%, #cbb17a 0 20%, transparent 20.5%), linear-gradient(115deg, transparent 40%, #96856c 40.3% 58%, transparent 58.3%), linear-gradient(25deg, transparent 25%, #fafafa 25.5% 74%, transparent 74.5%); transform:scale(1.15); }.project-card--object .project-form { width:52%; aspect-ratio:1; top:24%; left:25%; border-radius:49% 51% 39% 61% / 43% 43% 57% 57%; background: radial-gradient(circle at 37% 32%, #f6efe0 0 5%, #b89d6a 27%, #574d40 71%); box-shadow: 3.6rem 3rem 0 color-mix(in srgb, var(--color-ink) 16%, transparent); transform:rotate(29deg); }.project-card--field .project-form { inset:-30%; background: repeating-radial-gradient(ellipse at 45% 50%, transparent 0 1.3rem, color-mix(in srgb, var(--color-gold) 69%, transparent) 1.36rem 1.44rem); transform:rotate(-28deg); }.project-card__caption { display:flex; align-items:end; justify-content:space-between; gap:1rem; padding:1.4rem 0 .8rem; border-bottom:var(--border); }.project-category { margin:0 0 .55rem; color:var(--color-gold-deep); font:.55rem var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }.project-card h3 { margin:0; font:clamp(1.6rem,2.5vw,2.65rem)/.95 var(--font-display); font-weight:400; }.project-arrow { color:var(--color-gold-deep); font-size:1.35rem; }.project-description { max-width:32rem; margin: .8rem 0 0; color:var(--color-slate); font-size:.8rem; line-height:1.6; }.section-cta { margin-top: 3.5rem; }

.split-head { grid-template-columns: 1fr .6fr; }.split-head .eyebrow { grid-column:auto; }.discipline-list { padding:0; margin:0; list-style:none; border-top:var(--border); }.discipline-row { display:grid; grid-template-columns: .5fr 1.4fr 1.3fr 1fr auto; align-items:center; gap:1.5rem; padding:1.65rem .25rem; border-bottom:var(--border); transition:padding .35s ease, background .35s ease; }.discipline-row:hover { padding-inline:1.1rem; background:var(--color-paper); }.discipline-number, .discipline-deliverables { color:var(--color-gold-deep); font:.56rem var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }.discipline-row h3 { margin:0; font:clamp(1.45rem,2.3vw,2.4rem)/.95 var(--font-display); font-weight:400; }.discipline-row p { margin:0; color:var(--color-slate); font-size:.76rem; line-height:1.55; }.discipline-arrow { color:var(--color-gold-deep); font-size:1.15rem; }

.lab-section { background:var(--color-ink); color:var(--color-gallery); }.lab-grid { display:grid; grid-template-columns:.8fr 1.2fr; min-height:clamp(33rem,57vw,49rem); }.lab-copy { align-self:center; max-width:33rem; padding-block:var(--section-space); }.lab-copy .eyebrow { color:#ceb37c; }.lab-copy h2 { margin-bottom:1.5rem; font:clamp(3.2rem,5.8vw,6.3rem)/.85 var(--font-display); }.lab-copy h2 em { color:#d7bd8a; }.lab-copy p:not(.eyebrow) { max-width:27rem; color:#c2c3c1; font-size:.92rem; line-height:1.7; }.lab-copy .text-link { margin-top:2rem; color:#d7bd8a; }.lab-visual { position:relative; overflow:hidden; margin:clamp(2rem,5vw,4.5rem) 0 clamp(2rem,5vw,4.5rem) clamp(1rem,5vw,5rem); border:1px solid color-mix(in srgb, #d7bd8a 43%, transparent); background:radial-gradient(circle at 50% 52%, #313630, #20221f 57%); }.lab-gridlines { position:absolute; inset:-15%; background:linear-gradient(color-mix(in srgb, #d7bd8a 16%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, #d7bd8a 16%, transparent) 1px,transparent 1px); background-size:2.7rem 2.7rem; transform:perspective(30rem) rotateX(63deg) scale(1.7) translateY(22%); }.orb { position:absolute; border-radius:50%; mix-blend-mode:screen; }.orb-one { width:48%; aspect-ratio:1; left:28%; top:22%; background:radial-gradient(circle at 37% 35%, #fff 0, #e9cf98 6%, #a87f36 34%, #171712 72%); box-shadow:0 0 7rem #9d762f; animation:object-drift 9s ease-in-out infinite alternate; }.orb-two { width:21%; aspect-ratio:1; left:14%; bottom:17%; border:1px solid #e2c995; }.lab-coordinate { position:absolute; bottom:1rem; right:1rem; color:#d7bd8a; font:.54rem var(--font-mono); letter-spacing:.09em; }

.studio-section { display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(3rem,8vw,10rem); }.studio-statement h2 { margin:0; font:clamp(3rem,5.4vw,6rem)/.91 var(--font-display); }.studio-details { align-self:end; display:grid; gap:1.3rem; color:var(--color-slate); font-size:.87rem; line-height:1.7; }.studio-details p { margin:0; }.finale { padding-top:0; }.finale-frame { height:clamp(26rem,51vw,45rem); overflow:hidden; position:relative; display:grid; place-items:center; background:linear-gradient(90deg,#ece9e3,#f9f8f5 48%,#e8e5df); color:var(--color-gold-deep); }.finale-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--color-gold) 32%,transparent) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,color-mix(in srgb,var(--color-gold) 22%,transparent) 50%,transparent 50.3%); background-size:25% 100%,100% 33%; }.finale-frame > span { position:absolute; left:1.3rem; top:1.3rem; z-index:1; font:.55rem var(--font-mono); letter-spacing:.08em; }.finale-arch { width:38%; height:75%; position:relative; border:1px solid var(--color-gold); border-bottom:0; border-radius:20rem 20rem 0 0; box-shadow: 0 0 0 3rem color-mix(in srgb,var(--color-gallery) 34%,transparent), 0 0 0 3.06rem color-mix(in srgb,var(--color-gold) 55%,transparent); }.finale-arch::after { content:""; position:absolute; width:5rem; aspect-ratio:1; left:50%; bottom:0; transform:translate(-50%,50%); border:1px solid var(--color-gold-deep); border-radius:50%; background:var(--color-gallery); }.finale-copy { padding-top:clamp(2rem,4vw,4rem); }.finale-copy h2 { margin:0; font:clamp(3rem,5.4vw,6rem)/.88 var(--font-display); }

.contact-section { background:var(--color-paper); }.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; padding-top:var(--section-space); padding-bottom:var(--section-space); }.contact-grid h2 { margin:0; font:clamp(4rem,7.5vw,8.4rem)/.81 var(--font-display); }.contact-copy { align-self:end; max-width:30rem; }.contact-copy > p:first-child { color:var(--color-slate); font-size:1rem; line-height:1.7; }.contact-copy .button { margin-top:1.25rem; }.contact-note { margin-top:1rem; color:var(--color-slate); font:.58rem var(--font-mono); letter-spacing:.04em; }.site-footer { display:flex; justify-content:space-between; gap:2rem; align-items:center; min-height:7rem; color:var(--color-slate); font:.57rem var(--font-mono); letter-spacing:.055em; }.site-footer p { margin:0; }

.reveal { opacity:0; transform:translateY(1.2rem); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.65,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.hero .reveal { opacity:1; transform:none; }
@keyframes object-drift { from { transform:translate(-48%,-48%) rotate(-15deg) scale(1); } to { transform:translate(-44%,-52%) rotate(-8deg) scale(1.04); } }

:focus-visible { outline:2px solid var(--color-gold-deep); outline-offset:4px; }
@media (max-width: 780px) { .site-header { height:4.5rem; }.menu-toggle { display:block; }.primary-nav { display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; min-height:calc(100vh - 4.5rem); padding:2rem var(--page-gutter); align-items:flex-start; flex-direction:column; gap:1.8rem; background:var(--color-gallery); font-size:1rem; }.primary-nav.is-open { display:flex; }.primary-nav > a:not(.nav-contact) { color:var(--color-ink); }.nav-contact { margin-top:.5rem; }.hero { grid-template-columns:1fr; grid-template-rows:auto minmax(25rem,74vw) auto; min-height:auto; }.hero-copy { padding-block:6rem 4rem; }.hero-art { margin-left:0; border-left:0; border-top:var(--border); }.hero-meta { gap:.5rem; font-size:.47rem; }.hero-meta span:nth-child(2) { display:none; } .section-head, .split-head, .studio-section, .contact-grid, .lab-grid { grid-template-columns:1fr; }.section-head { gap:1.4rem; }.split-head .eyebrow { grid-column:auto; }.project-card, .project-card:nth-child(2), .project-card:nth-child(3) { grid-column:1 / -1; margin-top:0; }.project-art { height:72vw; min-height:18rem; }.discipline-row { grid-template-columns:auto 1fr auto; gap:.75rem 1rem; padding-block:1.4rem; }.discipline-row h3 { grid-column:2; }.discipline-row p { grid-column:2 / -1; }.discipline-deliverables { display:none; }.discipline-arrow { grid-column:3; grid-row:1; }.lab-visual { min-height:23rem; margin:0 0 2rem; }.lab-copy { padding-bottom:3.3rem; }.studio-details { max-width:30rem; }.site-footer { flex-wrap:wrap; padding-block:2rem; }.finale-arch { width:55%; }.contact-copy { align-self:start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.aether-object, .orb-one { animation:none; }.button, .project-art, .text-link span { transition:none; } }
