@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Newsreader:opsz,wght@6..72,300;6..72,400&display=swap');

:root { --paper:#f1f0ec; --ink:#121212; --muted:#77746d; --line:rgba(18,18,18,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; font-weight:300; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; z-index:20; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:22px 3vw; color:white; mix-blend-mode:difference; }
.wordmark { font-size:15px; font-weight:500; letter-spacing:.13em; }
nav { display:flex; gap:28px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
nav a { position:relative; }
nav a:after { content:""; position:absolute; left:0; bottom:-4px; width:100%; border-bottom:1px solid; transform:scaleX(0); transform-origin:right; transition:transform .35s; }
nav a:hover:after { transform:scaleX(1); transform-origin:left; }
.booking-link { font-weight:500; }
.menu-toggle { display:none; border:0; background:none; color:inherit; text-transform:uppercase; letter-spacing:.1em; }
.hero { height:100svh; min-height:640px; position:relative; color:white; background:#111; overflow:hidden; }
.hero:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 58%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 40%); }
.hero img { object-position:center 42%; transform:scale(1.015); animation:reveal 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes reveal { from { opacity:0; transform:scale(1.07); } }
.hero-title { position:absolute; z-index:2; left:6vw; bottom:12vh; }
.hero-title p,.eyebrow { margin:0 0 22px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Newsreader",serif; font-weight:300; }
h1 { margin:0; font-size:clamp(58px,9vw,140px); line-height:.82; letter-spacing:-.045em; }
.scroll-cue { position:absolute; z-index:2; right:3vw; bottom:32px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.intro { padding:17vh 8vw 20vh; display:grid; grid-template-columns:1fr 3fr; gap:5vw; }
.intro h2 { margin:0; font-size:clamp(44px,6.3vw,94px); line-height:.98; letter-spacing:-.035em; }
.intro-copy { grid-column:2; width:min(620px,75%); margin:55px 0 0 auto; font-family:"Newsreader",serif; font-size:clamp(20px,2vw,29px); line-height:1.35; color:#3d3b37; }
.series { padding:0 3vw 18vh; }
.series-heading { display:grid; grid-template-columns:80px 1fr auto; align-items:baseline; border-top:1px solid var(--line); padding:17px 0 42px; }
.series-heading span,.series-heading p { margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.series-heading h3 { margin:0; font-size:clamp(34px,4vw,58px); }
figure { margin:0; overflow:hidden; background:#ddd; }
figure img { transition:transform 1s cubic-bezier(.2,.7,.2,1); }
figure:hover img { transform:scale(1.018); }
.wide { height:min(76vw,880px); }
.krystal-gallery { display:grid; gap:7vw; }
.krystal-frame { width:100%; aspect-ratio:3/2; }
.krystal-frame img { object-fit:cover; }
.krystal-feature img { object-fit:contain; background:var(--paper); }
.dark { background:#111; color:#eee; padding:12vh 5vw 18vh; }
.dark .series-heading { border-color:rgba(255,255,255,.25); }
.editorial-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:7vw; align-items:start; }
.editorial-grid .tall { height:78vw; max-height:1100px; }
.editorial-grid .small { height:28vw; margin-top:12vw; }
blockquote { grid-column:2; margin:3vw 0 10vw; font-family:"Newsreader",serif; font-size:clamp(31px,4vw,62px); line-height:1.05; }
.breath { width:62%; margin-left:auto; height:60vw; max-height:850px; }
.portraits { padding-top:15vh; }
.portrait-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:2vw; align-items:start; }
.portrait-grid figure { grid-column:span 6; height:68vw; max-height:900px; }
.portrait-grid .landscape { grid-column:span 12; height:56vw; max-height:790px; margin:8vw 7vw; }
.project-door { margin-top:12vh; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; display:grid; grid-template-columns:1fr 2fr auto; gap:30px; align-items:center; }
.project-door span,.project-door em { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-style:normal; }
.project-door strong { font-family:"Newsreader",serif; font-size:clamp(30px,4vw,58px); font-weight:300; }
.project-door em span { display:inline-block; transition:transform .25s ease; }
.project-door:hover em span { transform:translate(3px,-3px); }
.project-page { background:#111; color:#eee; }
.project-page .site-header { color:white; }
.project-intro { min-height:100svh; padding:18vh 7vw 10vh; display:grid; grid-template-columns:1fr 2.4fr; gap:5vw; align-content:end; }
.project-kicker { font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.project-title h1 { font-size:clamp(72px,12vw,180px); line-height:.78; }
.project-title h1 span { display:block; margin-left:15%; font-size:.52em; line-height:1.1; letter-spacing:-.02em; }
.project-lede { width:min(670px,88%); margin:60px 0 0 auto; font-family:"Newsreader",serif; font-size:clamp(22px,2.4vw,35px); line-height:1.35; color:#d7d5cf; }
.roles-gallery { padding:5vh 3vw 18vh; display:grid; grid-template-columns:repeat(12,1fr); gap:10vw 2vw; align-items:start; }
.roles-gallery figure { background:#222; }
.roles-wide { grid-column:1 / -1; aspect-ratio:3/2; }
.roles-detail { grid-column:1 / span 7; aspect-ratio:3/2; }
.roles-portrait { grid-column:6 / span 7; aspect-ratio:2/3; }
.roles-provocation { grid-column:1 / span 7; aspect-ratio:2/3; }
.roles-final { grid-column:5 / span 8; aspect-ratio:2/3; }
.roles-caption { grid-column:1 / span 4; align-self:center; font-family:"Newsreader",serif; font-size:clamp(28px,4vw,60px); line-height:1.05; }
.roles-index-intro { min-height:72vh; padding:20vh 7vw 10vh; display:grid; grid-template-columns:1fr 2.4fr; gap:5vw; align-content:end; }
.roles-index-intro h1 { font-size:clamp(92px,16vw,230px); line-height:.7; }
.roles-index-intro>p:last-child { grid-column:2; width:min(520px,70%); margin:55px 0 0 auto; font-family:"Newsreader",serif; font-size:clamp(22px,2.5vw,36px); line-height:1.25; color:#d7d5cf; }
.roles-choices { width:min(1520px,86vw); margin:0 auto; padding:7vh 0 13vh; display:grid; grid-template-columns:1.08fr .82fr; gap:6vw; align-items:start; }
.role-choice { position:relative; display:block; overflow:hidden; aspect-ratio:4/5; background:#222; }
.role-choice-offset { aspect-ratio:3/4; margin-top:13vw; }
.role-choice:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%); }
.role-choice img { transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s; }
.role-choice:hover img { transform:scale(1.025); filter:saturate(1.08); }
.role-choice-number { position:absolute; z-index:2; top:24px; left:25px; font-size:11px; letter-spacing:.16em; }
.role-choice-copy { position:absolute; z-index:2; inset:auto 28px 30px; display:grid; grid-template-columns:1fr auto; align-items:end; }
.role-choice-copy small { grid-column:1/-1; margin-bottom:12px; font-size:10px; letter-spacing:.17em; text-transform:uppercase; }
.role-choice-copy strong { font-family:"Newsreader",serif; font-size:clamp(42px,6vw,88px); font-weight:300; line-height:.78; letter-spacing:-.035em; }
.role-choice-copy em { font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-style:normal; }
.roles-future { width:min(670px,72vw); margin:3vh 7vw 16vh auto; font-family:"Newsreader",serif; font-size:clamp(25px,3.4vw,50px); line-height:1.12; color:#d7d5cf; }
.series-navigation { margin:0 3vw 14vh; padding-top:25px; border-top:1px solid rgba(255,255,255,.22); display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.lolitta-page { background:#ece7dc; color:#181715; }
.lolitta-page .project-footer,.lolitta-page .series-navigation { border-color:rgba(18,18,18,.2); }
.lolitta-intro { min-height:100svh; padding:18vh 7vw 10vh; display:grid; grid-template-columns:1fr 2.6fr; gap:4vw; align-content:end; }
.lolitta-intro h1 { font-size:clamp(68px,10.8vw,164px); line-height:.75; color:#ad151c; }
.lolitta-intro h1 span { margin-left:12%; color:#181715; }
.lolitta-intro div>p { margin:45px 0 0 12%; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.lolitta-story { padding:4vh 3vw 16vh; display:grid; grid-template-columns:repeat(12,1fr); gap:9vw 2vw; align-items:start; }
.lolitta-wait { grid-column:1/span 4; margin:0; font-family:"Newsreader",serif; font-size:clamp(48px,7vw,105px); line-height:.8; color:#ad151c; }
.lolitta-lede { grid-column:6/span 6; margin:0; font-family:"Newsreader",serif; font-size:clamp(23px,2.6vw,38px); line-height:1.3; }
.lolitta-story figure { background:#d7d0c4; }
.lolitta-landscape-one { grid-column:1/span 8; aspect-ratio:3/2; }
.lolitta-companion { grid-column:10/span 3; aspect-ratio:2/3; align-self:center; }
.lolitta-landscape-two { grid-column:4/span 9; aspect-ratio:3/2; }
.lolitta-interlude { grid-column:2/span 4; align-self:center; margin:0; font-family:"Newsreader",serif; font-size:clamp(34px,4.5vw,68px); line-height:.98; }
.lolitta-flower { grid-column:7/span 6; aspect-ratio:2/3; }
.lolitta-close { grid-column:5/span 6; margin:0; font-family:"Newsreader",serif; font-size:clamp(26px,3.5vw,52px); line-height:1.1; }
.project-footer { border-top:1px solid rgba(255,255,255,.2); }
.back-link { display:inline-block; margin:0 3vw 14vh; font-size:12px; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid; }
.about { border-top:1px solid var(--line); margin:0 3vw; padding:14vh 5vw 18vh; display:grid; grid-template-columns:1fr 3fr; gap:4vw; }
.about h2 { max-width:1000px; margin:0; font-size:clamp(38px,5.2vw,78px); line-height:1.03; }
.about div p { max-width:630px; margin:50px 0 0 auto; font-family:"Newsreader",serif; font-size:24px; line-height:1.45; }
.contact { background:#d8ff35; padding:16vh 8vw 8vh; }
.contact p { font-size:11px; letter-spacing:.17em; text-transform:uppercase; }
.contact h2 { margin:12vh 0 5vh; font-size:clamp(50px,8.5vw,130px); line-height:.9; letter-spacing:-.05em; }
.contact a { font-size:clamp(19px,2vw,30px); border-bottom:1px solid; }
.contact-actions { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.booking-cta { display:inline-flex; gap:.5em; align-items:center; text-align:right; }
.booking-cta span { font-family:"DM Sans",sans-serif; font-size:.75em; transition:transform .25s ease; }
.booking-cta:hover span { transform:translate(3px,-3px); }
footer { padding:28px 3vw; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
@media (max-width:700px) {
  .site-header { padding:18px 20px; }
  .menu-toggle { display:block; }
  nav { display:none; position:absolute; top:55px; right:20px; flex-direction:column; align-items:flex-end; gap:15px; }
  nav.open { display:flex; }
  .hero-title { left:22px; bottom:15vh; }
  h1 { font-size:19vw; }
  .intro { padding:14vh 22px; display:block; }
  .intro h2 { font-size:14vw; }
  .intro-copy { width:100%; margin-top:40px; }
  .series { padding-left:20px; padding-right:20px; }
  .series-heading { grid-template-columns:40px 1fr; }
  .series-heading p { grid-column:2; margin-top:5px; }
  .krystal-gallery { gap:40px; }
  .dark { padding-left:20px; padding-right:20px; }
  .editorial-grid { display:block; }
  .editorial-grid .tall { height:140vw; }
  .editorial-grid .small { height:70vw; margin:20px 0; }
  blockquote { margin:60px 0; }
  .breath { width:100%; height:120vw; }
  .portrait-grid { display:block; }
  .portrait-grid figure,.portrait-grid .landscape { width:100%; height:130vw; margin:0 0 20px; }
  .portrait-grid .landscape { height:70vw; }
  .project-door { grid-template-columns:1fr auto; gap:12px; }
  .project-door span { grid-column:1 / -1; }
  .project-door em { text-align:right; }
  .project-intro { display:block; min-height:auto; padding:20vh 22px 12vh; }
  .project-title h1 { margin-top:12vh; font-size:23vw; }
  .project-title h1 span { margin-left:0; }
  .project-lede { width:100%; margin-top:48px; }
  .roles-gallery { display:block; padding:0 20px 12vh; }
  .roles-gallery figure { width:100%; margin-bottom:40px; }
  .roles-wide,.roles-detail { aspect-ratio:3/2; }
  .roles-portrait,.roles-provocation,.roles-final { aspect-ratio:2/3; }
  .roles-caption { margin:70px 0; }
  .roles-index-intro { display:block; min-height:auto; padding:22vh 22px 11vh; }
  .roles-index-intro>p:last-child { width:100%; margin-top:50px; }
  .roles-choices { display:block; width:auto; margin:0; padding:0 22px 9vh; }
  .role-choice,.role-choice-offset { width:100%; margin:0 0 24px; aspect-ratio:3/4; }
  .role-choice-copy { inset:auto 18px 22px; }
  .roles-future { width:auto; margin:0 22px 12vh; }
  .series-navigation { margin:0 20px 12vh; gap:25px; }
  .lolitta-intro { display:block; min-height:auto; padding:22vh 22px 14vh; }
  .lolitta-intro h1 { margin-top:12vh; font-size:18vw; }
  .lolitta-intro h1 span,.lolitta-intro div>p { margin-left:0; }
  .lolitta-story { display:block; padding:0 20px 12vh; }
  .lolitta-wait,.lolitta-lede,.lolitta-interlude,.lolitta-close { margin:0 0 70px; }
  .lolitta-story figure { width:100%; margin:0 0 60px; }
  .lolitta-landscape-one,.lolitta-landscape-two { aspect-ratio:3/2; }
  .lolitta-companion { aspect-ratio:2/3; }
  .lolitta-flower { aspect-ratio:2/3; }
  .about { display:block; padding-left:0; padding-right:0; }
  .about div p { font-size:21px; }
  .contact { padding:12vh 22px 6vh; }
  .contact-actions { align-items:flex-start; flex-direction:column; gap:32px; }
  .booking-cta { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }