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

:root {
  color-scheme: light;
  --green: #123b32;
  --green-deep: #0b2924;
  --green-soft: #1b4b3f;
  --ivory: #f6f2e9;
  --ivory-dark: #e9e1d3;
  --gold: #bd9a62;
  --gold-light: #ddc595;
  --ink: #1b2924;
  --muted: #74756a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
  --gutter: clamp(24px, 7vw, 112px);
  --header-height: 82px;
}
* { box-sizing: border-box; }
html { background: var(--ivory); color: var(--ink); scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; overflow-x: hidden; background: var(--ivory); color: var(--ink); font: 14px/1.7 var(--sans); }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--ivory); background: var(--green); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.prelude { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--green-deep); color: var(--ivory); font: 10px var(--sans); letter-spacing: .24em; transition: opacity .7s, visibility .7s; }
.prelude i { width: 90px; height: 1px; background: var(--gold); animation: reveal-line 1s ease both; }
.prelude small { color: var(--gold-light); font-size: 8px; letter-spacing: .2em; }
.prelude.off { opacity: 0; visibility: hidden; }
@keyframes reveal-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.header { position: absolute; z-index: 30; inset: 0 0 auto; height: var(--header-height); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; color: var(--ivory); }
.monogram { color: var(--gold-light); font: 500 43px/.8 var(--serif); }
.monogram span { color: var(--ivory); }
.nav-desktop { display: flex; gap: clamp(22px, 3.5vw, 52px); }
.nav-desktop a, .menu-toggle, .hero-kicker, .hero-rule, .hero-card figcaption, .scroll-note, .hero-edition, .section-head, .eyebrow, .underlink, .depth-print figcaption, .depth-caption>span, .image-index, .about-signoff, .sheet-identity>span, .sheet-stamp, .data-row>span, .look-notes, .film-caption, .film-note, .look>span, .availability-list, .skills>span, .contact-cta, .contact-details, .footer { font: 600 9px var(--sans); letter-spacing: .16em; }
.nav-desktop a { color: #eee7d8; transition: color .2s; }
.nav-desktop a:hover { color: var(--gold-light); }
.menu-toggle { display: none; align-items: center; gap: 11px; background: none; color: var(--ivory); cursor: pointer; }
.menu-toggle b { display: grid; gap: 5px; width: 21px; }
.menu-toggle i { height: 1px; background: currentColor; transition: transform .25s; }
.menu-toggle[aria-expanded=true] i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded=true] i:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { position: fixed; z-index: 25; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 90px var(--gutter); background: var(--green-deep); color: var(--ivory); transform: translateY(-102%); transition: transform .65s cubic-bezier(.77,0,.18,1); }
.menu.open { transform: none; }
.menu>a { display: flex; align-items: baseline; gap: 22px; padding: 8px 0; border-bottom: 1px solid #ffffff27; font: 400 clamp(39px, 9vw, 64px)/1.14 var(--serif); }
.menu>a small { color: var(--gold); font: 9px var(--sans); }
.menu-meta { position: absolute; top: 28px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; color: var(--gold-light); font: 8px var(--sans); letter-spacing: .16em; }
.menu-bottom { top: auto; bottom: 25px; }

/* Cover */
.hero { position: relative; min-height: 760px; height: min(100svh, 1060px); overflow: hidden; isolation: isolate; background: var(--green); color: var(--ivory); }
.hero::before { position: absolute; z-index: -1; content: ''; inset: 0 45% 0 0; background: linear-gradient(135deg,#17473c 0%,var(--green-deep) 88%); }
.hero::after { position: absolute; z-index: -1; content: ''; top: 10%; right: -17%; width: 62%; height: 86%; border-left: 1px solid #bd9a6255; border-radius: 50%; transform: rotate(-17deg); }
.hero-noise { position: absolute; inset: 0; z-index: -1; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-kicker { position: absolute; z-index: 5; top: 120px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; color: var(--gold-light); font-size: 8px; }
.hero-scene { position: absolute; z-index: 1; top: 48%; right: 7%; width: min(53vw, 700px); height: min(77vh, 800px); min-height: 530px; perspective: 1400px; transform: translateY(-50%) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg)); transform-style: preserve-3d; transition: transform .4s ease-out; }
.hero-halo { position: absolute; top: 12%; right: 11%; width: 75%; aspect-ratio: 1; border: 1px solid #bd9a6268; border-radius: 50%; transform: translateZ(-130px); }
.hero-ghost { position: absolute; z-index: -1; top: 18%; left: -41%; color: #f6f2e916; font: 500 clamp(92px, 16vw, 225px)/.78 var(--serif); letter-spacing: -.07em; white-space: nowrap; transform: translateZ(-200px); }
.hero-card { position: absolute; margin: 0; overflow: hidden; background: var(--ivory-dark); transform-style: preserve-3d; backface-visibility: hidden; box-shadow: 0 32px 80px #061a16a8; }
.hero-card::after { position: absolute; content: ''; inset: 8px; border: 1px solid #f6f2e985; pointer-events: none; }
.hero-card-main { z-index: 3; top: 3%; right: 16%; width: 61%; height: 94%; padding: 7px; transform: translateZ(100px) rotateY(-5deg) rotateZ(.6deg); box-shadow: 0 35px 80px #061a16a8, 0 0 0 1px #bd9a626e; }
.hero-card-main img { object-position: 50% 15%; }
.hero-card-main figcaption { position: absolute; z-index: 2; left: 19px; bottom: 17px; color: white; font-size: 7px; text-shadow: 0 1px 7px #000; }
.hero-card-back { width: 38%; height: 57%; opacity: .82; padding: 5px; }
.hero-card-left { z-index: 1; top: 21%; left: 0; transform: translateZ(-100px) rotateY(18deg) rotateZ(-7deg); }
.hero-card-right { z-index: 2; top: 24%; right: 0; transform: translateZ(-25px) rotateY(-14deg) rotateZ(6deg); }
.hero-card-left img { object-position: 50% 25%; }
.hero-card-right img { object-position: 50% 24%; }
.scene-orbit { position: absolute; z-index: 4; border: 1px solid #ddc5958a; border-radius: 50%; pointer-events: none; }
.orbit-one { top: 9%; left: 0; width: 99%; height: 73%; transform: translateZ(135px) rotate(-20deg); }
.orbit-two { top: 0; left: 13%; width: 76%; height: 95%; border-color: #f6f2e922; transform: translateZ(120px) rotate(15deg); }
.hero-copy { position: absolute; z-index: 5; left: var(--gutter); bottom: 15%; max-width: 57%; pointer-events: none; }
.eyebrow { margin: 0; color: var(--gold-light); font-size: 8px; }
.hero h1 { margin: 21px 0 25px; font: 500 clamp(65px, 9vw, 132px)/.76 var(--serif); letter-spacing: -.055em; }
.hero h1 em { display: inline-block; padding-left: clamp(28px, 7vw, 105px); color: var(--gold-light); font-size: .78em; font-weight: 400; white-space: nowrap; }
.hero-rule { width: min(440px, 50vw); display: flex; justify-content: space-between; color: #e7ddcb; font-size: 8px; }
.scroll-note { position: absolute; z-index: 5; left: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 13px; color: var(--gold-light); font-size: 8px; }
.scroll-note i { width: 42px; height: 1px; background: var(--gold); animation: cue 1.6s ease-in-out infinite alternate; }
.hero-edition { position: absolute; right: var(--gutter); bottom: 30px; color: #dfd5c2; font-size: 8px; }
@keyframes cue { to { transform: scaleX(.4); transform-origin: left; } }

.section-light { background: var(--ivory); color: var(--ink); }
.story, .about, .motion, .portfolio, .availability { padding: clamp(76px, 10vw, 148px) var(--gutter); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #777767; font-size: 8px; }
.section-head-light { color: #d4c5a4; }
.story-layout { max-width: 1160px; margin: clamp(64px, 9vw, 130px) auto 0; display: grid; grid-template-columns: 1.1fr .65fr; align-items: end; gap: 9vw; }
.story-title { margin: 0; font: 500 clamp(72px, 10.5vw, 144px)/.82 var(--serif); letter-spacing: -.055em; }
.story-title em, .about-copy h2 em, .motion-heading h2 em, .portfolio-intro h2 em, .availability h2 em { color: #9a7848; font-weight: 400; }
.story-copy { max-width: 375px; padding-bottom: 8px; }
.spark { color: var(--gold); font: 30px var(--serif); }
.story-copy p { margin: 22px 0; font: 400 19px/1.55 var(--serif); }
.story-copy p+p { color: #64665d; font: 13px/1.9 var(--sans); }
.underlink { display: inline-flex; align-items: center; gap: 25px; margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid var(--gold); font-size: 8px; }
.underlink b { color: #9a7848; font-size: 14px; transition: transform .2s; }
.underlink:hover b { transform: translate(4px,3px); }

/* Three dimensional portrait gallery */
.depth-room { position: relative; min-height: 940px; overflow: hidden; padding: 48px var(--gutter) 82px; color: var(--ivory); background: var(--green-deep); }
.depth-room::before { position: absolute; content: ''; inset: 0; opacity: .12; background: radial-gradient(ellipse at 52% 52%,#c0a36c36,transparent 52%); pointer-events: none; }
.depth-stage { position: relative; height: 770px; max-width: 1270px; margin: 20px auto 0; perspective: 1300px; transform: rotateX(var(--room-x,0deg)) rotateY(var(--room-y,0deg)); transform-style: preserve-3d; transition: transform .4s ease-out; }
.depth-word { position: absolute; z-index: 0; top: 17%; left: 4%; color: #f6f2e914; font: 500 clamp(74px, 12vw, 170px)/.73 var(--serif); letter-spacing: -.07em; transform: translateZ(-200px); }
.depth-print { position: absolute; margin: 0; padding: 8px; background: var(--ivory); box-shadow: 0 34px 70px #0008; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.depth-print img { filter: saturate(.92); }
.depth-print figcaption { position: absolute; left: 12px; bottom: -25px; color: var(--gold-light); font-size: 7px; white-space: nowrap; }
.print-left { z-index: 1; top: 17%; left: 8%; width: clamp(210px,24vw,340px); height: clamp(315px,37vw,510px); transform: translateZ(-105px) rotateY(19deg) rotateZ(-7deg); }
.print-main { z-index: 3; top: 5%; left: 50%; width: clamp(270px,30vw,425px); height: clamp(400px,49vw,670px); transform: translate3d(-50%,0,105px) rotateY(-4deg) rotateZ(.8deg); }
.print-main img { object-position: 50% 22%; }
.print-right { z-index: 2; top: 24%; right: 7%; width: clamp(210px,24vw,340px); height: clamp(315px,37vw,510px); transform: translateZ(-55px) rotateY(-17deg) rotateZ(7deg); }
.depth-caption { position: absolute; z-index: 4; left: var(--gutter); bottom: 1%; transform: translateZ(160px); }
.depth-caption>span { color: var(--gold-light); font-size: 8px; }
.depth-caption p { margin: 11px 0 0; font: 500 clamp(37px,5vw,67px)/.95 var(--serif); }
.depth-caption em { color: var(--gold-light); font-weight: 400; }
.depth-floor { position: absolute; z-index: -1; bottom: 0; left: 7%; width: 86%; height: 25%; border-radius: 50%; background: radial-gradient(ellipse,#0007,transparent 68%); filter: blur(9px); transform: rotateX(75deg) translateZ(-90px); }
.depth-stage.is-active .print-left { transform: translate3d(-15px,-8px,-70px) rotateY(16deg) rotateZ(-5deg); }
.depth-stage.is-active .print-main { transform: translate3d(-50%,-13px,140px) rotateY(-2deg) rotateZ(.4deg); }
.depth-stage.is-active .print-right { transform: translate3d(16px,-8px,-20px) rotateY(-14deg) rotateZ(5deg); }

.about-layout { max-width: 1170px; margin: clamp(62px,9vw,125px) auto 0; display: grid; grid-template-columns: .82fr 1fr; align-items: center; gap: clamp(56px,10vw,145px); }
.about-portrait { position: relative; height: min(660px,61vw); min-height: 460px; padding: 9px; background: var(--ivory-dark); box-shadow: 15px 15px 0 var(--green); }
.about-portrait::after { position: absolute; z-index: -1; content: ''; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); }
.about-portrait img { object-position: 50% 38%; }
.image-index { position: absolute; left: 24px; bottom: 22px; color: white; font-size: 7px; text-shadow: 0 1px 7px #000; }
.about-copy .eyebrow { color: #927442; }
.about-copy h2 { margin: 23px 0 27px; font: 500 clamp(48px,6vw,82px)/.95 var(--serif); letter-spacing: -.045em; }
.about-copy>p:not(.eyebrow) { max-width: 500px; color: #5c6259; font-size: 13px; line-height: 2; }
.about-signoff { display: flex; flex-wrap: wrap; gap: 15px 27px; margin: 33px 0 2px; color: #74766c; font-size: 7px; }

.casting { padding: 72px var(--gutter); color: var(--ivory); background: #153f35; }
.casting-top, .casting-sheet, .look-notes, .credits-note { max-width: 1180px; margin-left: auto; margin-right: auto; }
.casting-display { margin: clamp(65px,8vw,110px) 0 48px; font: 500 clamp(76px,12vw,166px)/.68 var(--serif); letter-spacing: -.06em; }
.casting-display em { color: var(--gold-light); font-weight: 400; }
.casting-sheet { padding: 35px clamp(22px,5vw,66px); display: grid; grid-template-columns: .72fr 1fr; gap: clamp(42px,9vw,130px); color: var(--ink); background: var(--ivory); }
.sheet-identity { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; }
.sheet-identity>span { color: #7c7c70; font-size: 8px; }
.sheet-identity h2 { margin: auto 0; font: 500 clamp(40px,5vw,66px)/.9 var(--serif); }
.sheet-stamp { position: absolute; top: 0; right: 0; color: #9a7848!important; }
.sheet-data { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.data-row { min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-bottom: 1px solid #bd9a6249; }
.data-row>span { color: #77786e; font-size: 7px; }
.data-row>b { font: 500 14px var(--serif); }
.look-notes { margin-top: 39px; display: grid; grid-template-columns: 1.05fr repeat(5,1fr); gap: 18px; }
.look-heading, .look-notes small { color: var(--gold-light); font-size: 7px; }
.look-notes div { display: flex; flex-direction: column; gap: 8px; }
.look-notes b { font-size: 8px; font-weight: 500; letter-spacing: .07em; }
.credits-note { margin-top: 33px; color: #d4c7ad; font-size: 10px; }

.motion { overflow: hidden; }
.motion-heading { max-width: 1170px; margin: 72px auto 40px; display: flex; align-items: end; justify-content: space-between; }
.motion-heading h2 { margin: 0; font: 500 clamp(76px,11vw,153px)/.75 var(--serif); letter-spacing: -.06em; }
.motion-heading>p { margin: 0 0 7px; color: #72746a; font-size: 8px; letter-spacing: .15em; }
.film { position: relative; display: block; width: min(100%,1170px); height: clamp(370px,55vw,700px); margin: auto; padding: 0; overflow: hidden; border: 0; background: var(--green-deep); cursor: pointer; text-align: left; }
.film>img { filter: saturate(.78); transition: transform .8s; object-position: 50% 38%; }
.film:hover>img { transform: scale(1.03); }
.film-gradient { position: absolute; inset: 0; background: linear-gradient(0deg,#09221dc9,transparent 55%),linear-gradient(90deg,#09221d45,transparent 65%); }
.film-mark { position: absolute; top: 7%; left: 7%; color:#f6f2e97a; font: 500 clamp(62px,11vw,150px) var(--serif); }
.film-mark span { color: var(--gold-light); }
.film-play { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; display: grid; place-items: center; padding-left: 4px; border: 1px solid #f6f2e9c9; border-radius: 50%; color: white; transform: translate(-50%,-50%); transition: .25s; font-size: 13px; }
.film:hover .film-play { background: #bd9a6277; transform: translate(-50%,-50%) scale(1.08); }
.film-caption { position: absolute; right: 25px; bottom: 23px; left: 25px; display: flex; justify-content: space-between; color: white; font-size: 8px; }
.film-caption b { font-weight: 600; }
.film-caption i { border-bottom: 1px solid var(--gold-light); padding-bottom: 6px; font-style: normal; }
.film-note { max-width: 1170px; margin: 14px auto 0; color: #77786e; font-size: 8px; letter-spacing: .08em; }

.portfolio { padding-bottom: clamp(90px,13vw,180px); }
.portfolio-intro { max-width: 1170px; margin: 76px auto 58px; display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.portfolio-intro h2 { margin: 0; font: 500 clamp(49px,7.4vw,100px)/.91 var(--serif); letter-spacing: -.05em; }
.portfolio-intro p { margin: 0 0 5px; color: #73756b; font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.lookbook { max-width: 1170px; margin: auto; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; gap: 46px 24px; }
.look { position: relative; display: block; margin: 0; padding: 7px; overflow: hidden; aspect-ratio: 4/5.2; border: 0; background: var(--ivory-dark); cursor: zoom-in; text-align: left; }
.look::after { position: absolute; content: ''; inset: 7px; background: linear-gradient(0deg,#102e28bd,transparent 32%); pointer-events: none; }
.look img { filter: saturate(.94); transition: transform .75s; }
.look:hover img { transform: scale(1.04); }
.look>span { position: absolute; z-index: 1; right: 16px; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 10px; color: white; font-size: 7px; }
.look>span b { color: var(--gold-light); font-weight: 600; }
.look-a { grid-column: 1/7; width: 100%; }
.look-b { grid-column: 8/13; width: 100%; margin-top: 88px; }
.look-c { grid-column: 2/6; width: 100%; }
.look-d { grid-column: 7/12; width: 100%; margin-top: 70px; }
.look-e { grid-column: 1/6; width: 100%; margin-top: 10px; }
.look-f { grid-column: 7/12; width: 100%; margin-top: 92px; }
.look-g { grid-column: 9/13; width: 100%; margin-top: 10px; }
.look-g img { object-position: 50% 44%; }

.availability { color: var(--ink); background: var(--ivory-dark); }
.availability-layout { max-width: 1160px; margin: 82px auto 0; display: grid; grid-template-columns: .76fr 1.2fr .72fr; align-items: start; gap: 7vw; }
.availability h2 { margin: 0; font: 500 clamp(78px,10vw,136px)/.74 var(--serif); letter-spacing: -.06em; }
.availability-list>div { min-height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #918d7f77; color: #66685f; font-size: 8px; }
.availability-list b { color: var(--green); font-size: 8px; font-weight: 700; }
.skills { padding-top: 8px; }
.skills>span { color: #74766a; font-size: 8px; }
.skills p { margin: 18px 0; font: 500 clamp(24px,3vw,36px) var(--serif); }
.skills i { color: var(--gold); font-style: normal; }
.contact { position: relative; min-height: 790px; height: min(100svh,950px); display: grid; place-items: center; overflow: hidden; color: var(--ivory); background: var(--green-deep); text-align: center; }
.contact-photo, .contact-veil { position: absolute; inset: 0; }
.contact-photo { filter: saturate(.56); object-position: 50% 36%; transform: scale(1.04); }
.contact-veil { background: linear-gradient(90deg,#0b2924e8,#0b2924b8 52%,#0b2924e8),linear-gradient(0deg,#0b2924a8,transparent); }
.contact-inner { position: relative; width: 100%; padding: 70px var(--gutter); }
.contact-inner>.section-head { max-width: 1160px; margin: 0 auto 83px; color: var(--gold-light); }
.contact-inner>.eyebrow { color: #e3d7c0; font-size: 8px; }
.contact h2 { margin: 28px 0 34px; font: 500 clamp(105px,17vw,230px)/.68 var(--serif); letter-spacing: -.07em; }
.contact h2 em { color: var(--gold-light); font-weight: 400; }
.contact-cta { display: inline-flex; align-items: center; gap: 23px; padding: 14px 22px; border: 1px solid var(--gold-light); color: var(--ivory); font-size: 8px; transition: background .2s,color .2s; }
.contact-cta:hover { color: var(--green-deep); background: var(--gold-light); }
.contact-cta span { color: var(--gold-light); font-size: 15px; }
.contact-details { display: flex; justify-content: center; gap: 39px; margin-top: 78px; color: #f0e8d9; font-size: 8px; }
.contact-details a { padding-bottom: 6px; border-bottom: 1px solid #bd9a62aa; }
.footer { min-height: 78px; padding: 21px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #d2c7b2; background: var(--green-deep); font-size: 7px; }
.footer-name { color: var(--gold-light); font: 500 18px var(--serif); letter-spacing: .04em; }

.viewer, .film-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: white; background: #091d19f5; }
.viewer::backdrop, .film-viewer::backdrop { background: #091d19f5; }
.viewer>img { width: 100%; height: 100%; padding: 6vh 5vw; object-fit: contain; }
.viewer-close { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 18px); right: var(--gutter); background: none; color: white; cursor: pointer; font: 600 8px var(--sans); letter-spacing: .15em; }
.viewer-close b { margin-left: 12px; color: var(--gold-light); font: 25px var(--serif); vertical-align: -3px; }
.film-viewer { display: none; place-items: center; padding: 70px var(--gutter); }
.film-viewer[open] { display: grid; }
.film-viewer video { width: min(100%,1170px); max-height: 82svh; background: black; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (min-width:1450px) { :root { --gutter: max(100px,calc((100vw - 1280px)/2)); } }
@media (max-width:850px) {
  :root { --header-height: 67px; }
  .header { position: fixed; height: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); border-bottom: 1px solid #ffffff20; background: #0b2924e8; backdrop-filter: blur(12px); }
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .menu { height: 100vh; height: 100dvh; min-height: 100svh; overflow-y: auto; }
  .menu>a { padding: 6px 0; font-size: clamp(34px,8.5vw,49px); }
  .hero { min-height: 780px; height: 100svh; max-height: 1000px; }
  .hero::before { inset: 0; background: linear-gradient(165deg,#17473c 0%,var(--green-deep) 100%); }
  .hero::after { top: 8%; right: -50%; width: 112vw; height: 72%; }
  .hero-kicker { top: calc(env(safe-area-inset-top) + 82px); font-size: 7px; }
  .hero-scene { top: 38%; right: 2%; width: min(89vw,570px); height: 57svh; min-height: 430px; }
  .hero-card-main { top: 3%; right: 17%; width: 60%; height: 93%; }
  .hero-card-back { top: 21%; width: 38%; height: 57%; }
  .hero-card-left { left: 0; }
  .hero-card-right { right: 0; }
  .hero-ghost { left: -18%; top: 24%; font-size: 18vw; }
  .hero-copy { left: var(--gutter); bottom: max(92px,calc(env(safe-area-inset-bottom) + 78px)); max-width: 94%; }
  .hero h1 { margin: 14px 0 18px; font-size: clamp(60px,13.5vw,102px); }
  .hero h1 em { padding-left: 7vw; font-size: .69em; }
  .hero-rule { width: min(420px,91%); font-size: 7px; }
  .scroll-note, .hero-edition { bottom: max(25px,env(safe-area-inset-bottom)); }
  .story-layout { grid-template-columns: 1fr; gap: 43px; margin-top: 67px; }
  .story-title { font-size: clamp(68px,13vw,104px); }
  .story-copy { margin-left: 14vw; }
  .depth-room { min-height: 850px; padding-top: 33px; }
  .depth-stage { height: 720px; margin-top: 8px; }
  .depth-word { top: 18%; left: 0; font-size: 16vw; }
  .print-left { top: 15%; left: 0; width: 40vw; height: 61vw; }
  .print-main { top: 10%; left: 52%; width: 52vw; height: 78vw; }
  .print-right { top: 37%; right: 0; width: 39vw; height: 59vw; }
  .depth-caption { left: var(--gutter); bottom: 1%; }
  .about-layout { grid-template-columns: 1fr; gap: 62px; margin-top: 62px; }
  .about-portrait { width: 78%; height: 105vw; max-height: 620px; min-height: 0; margin-left: auto; }
  .about-copy { max-width: 610px; }
  .about-copy h2 { font-size: clamp(48px,10vw,76px); }
  .casting { padding-top: 48px; }
  .casting-display { margin-top: 75px; font-size: clamp(74px,15vw,120px); }
  .casting-sheet { grid-template-columns: 1fr; gap: 30px; padding: 28px 24px; }
  .sheet-identity { min-height: 190px; }
  .sheet-identity h2 { margin: 38px 0 0; font-size: 52px; }
  .sheet-data { gap: 0 22px; }
  .data-row { min-height: 56px; }
  .look-notes { grid-template-columns: repeat(2,1fr); gap: 22px; }
  .look-heading { grid-column: 1/-1; }
  .motion-heading { margin: 62px auto 32px; }
  .motion-heading h2 { font-size: clamp(72px,13vw,100px); }
  .motion-heading>p { max-width: 100px; text-align: right; line-height: 1.7; }
  .film { height: 118vw; min-height: 390px; }
  .film-play { width: 64px; height: 64px; }
  .portfolio-intro { margin: 62px auto 42px; align-items: start; flex-direction: column; gap: 17px; }
  .portfolio-intro h2 { font-size: clamp(47px,10vw,70px); }
  .lookbook { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 31px 13px; }
  .look-a,.look-b,.look-c,.look-d,.look-e,.look-f,.look-g { grid-column: auto; width: 100%; margin: 0; }
  .look-b,.look-d,.look-f { margin-top: 40px; }
  .look>span { left: 11px; right: 9px; bottom: 10px; flex-wrap: wrap; row-gap: 1px; font-size: 6.5px; }
  .availability-layout { grid-template-columns: 1fr; gap: 38px; margin-top: 60px; }
  .availability h2 { font-size: 89px; }
  .availability-list>div { min-height: 46px; }
  .skills p { margin: 11px 0; }
  .contact { min-height: 740px; height: 90svh; }
  .contact-inner { padding: 65px var(--gutter); }
  .contact-inner>.section-head { margin-bottom: 83px; }
  .contact h2 { font-size: clamp(108px,22vw,170px); }
  .contact-details { gap: 18px; font-size: 7px; }
  .contact-inner>.section-head span:last-child { text-align: right; }
  .footer { min-height: 106px; display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: 11px; font-size: 7px; }
  .footer>*:nth-child(even) { justify-self: end; }
}
@media (orientation:landscape) and (max-width:850px) {
  .hero { min-height: 620px; }
  .hero-scene { width: 55vw; height: 82vh; right: 2%; top: 52%; }
  .hero-card-main { width: 57%; height: 91%; }
  .hero-copy { max-width: 58%; bottom: 14%; }
  .hero h1 { font-size: clamp(55px,9vw,92px); }
  .depth-room { min-height: 720px; }
  .depth-stage { height: 620px; }
  .print-left { width: 29vw; height: 43vw; top: 10%; left: 10%; }
  .print-main { width: 33vw; height: 48vw; top: 5%; left: 50%; }
  .print-right { width: 28vw; height: 41vw; top: 18%; right: 9%; }
  .about-layout { grid-template-columns: .8fr 1fr; }
  .about-portrait { width: 100%; height: 72vw; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}