/* LYMPH coming soon. Palette and type follow the approved brand mapping (2 Nov 2026). */
@font-face{font-family:"Cormorant Garamond";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/bodoni-moda-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/lexend-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/lexend-latin-400-normal.woff2) format("woff2")}

:root{--brown:#8B664B;--white:#FFF;--ease:cubic-bezier(.76,0,.24,1);--gx:clamp(24px,4vw,64px);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--brown);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--brown);color:var(--white);font:300 14px/1.65 "Lexend","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);grid-template-rows:1fr auto;min-height:100vh;min-height:100svh}
.intro{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vh,96px);padding:clamp(32px,6vh,64px) var(--gx) clamp(40px,7vh,72px);padding-left:max(var(--gx),env(safe-area-inset-left))}
.photo{grid-column:2;grid-row:1/3;position:relative;overflow:hidden;background:#6E5543;min-height:100%}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;animation:settle 2.4s var(--ease) both}
.details{grid-column:1;grid-row:2;padding:0 var(--gx) clamp(24px,4vh,40px);padding-left:max(var(--gx),env(safe-area-inset-left))}

.mark{color:var(--white);width:clamp(200px,30vw,440px)}
.logo{display:block;width:100%;height:auto;overflow:hidden}
.logo g{animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}

h1{margin:0;font:300 clamp(34px,4.3vw,68px)/1.08 "Cormorant Garamond",Georgia,serif;letter-spacing:.08em;text-transform:uppercase}
.statement{margin:clamp(16px,3vh,28px) 0 0;font:italic 400 clamp(19px,1.9vw,27px)/1.3 "Bodoni Moda",Georgia,serif}
.message{animation:fade 1.2s .55s ease both}

.studios{list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(20px,3vw,40px);border-top:1px solid rgba(255,255,255,.35);font-size:13px}
.studios strong{display:block;font-weight:400;margin-bottom:4px}
.contact{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px;font-weight:400;font-size:14px}
.contact a{border-bottom:1px solid rgba(255,255,255,.5);padding:4px 0 2px;transition:border-color .3s}
.contact a:hover{border-color:var(--white)}
a:focus-visible{outline:1px solid var(--white);outline-offset:4px}
.legal{margin:20px 0 0;font-size:12px}
.details{animation:fade 1.2s .8s ease both}

@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}

@media (max-width:860px){
	.page{display:flex;flex-direction:column;min-height:0}
	.intro{gap:48px;padding-top:max(36px,env(safe-area-inset-top));padding-bottom:40px}
	.mark{width:min(62vw,300px)}
	h1{font-size:min(8.4vw,52px)}
	.photo{height:min(110vw,560px);min-height:0}
	.photo img{object-position:50% 72%}
	.details{padding-top:32px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
	.studios{grid-template-columns:1fr;border-top:0;padding-top:0}
}
@media (min-width:861px) and (max-height:760px){
	.intro{gap:36px;padding-top:28px;padding-bottom:28px}
	h1{font-size:clamp(30px,3.6vw,48px)}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
}