@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:var(--body);line-height:var(--body-lh);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}
::selection{background:var(--sand);color:var(--ink)}
h1,h2,h3,p,figure{margin:0}

/* ---------- type roles ---------- */
.u{font-family:var(--sans);font-size:var(--utility);font-weight:500;letter-spacing:var(--utility-ls);text-transform:uppercase;line-height:1.5}
.u--mute{color:var(--fg-mute)}
.display{font-family:var(--serif);font-weight:300;text-transform:uppercase;letter-spacing:-.01em;line-height:var(--h2-lh);font-size:var(--h2)}
.lead{font-size:var(--lead);line-height:1.4;font-weight:400}
.body p+p{margin-top:1.1em}
.word{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:var(--word);max-width:100%;display:block;line-height:.78;letter-spacing:-.015em;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.section{padding-block:var(--section)}
.cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2.5vw,2.5rem);row-gap:2.5rem;align-items:start}
.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}
.start-7{grid-column:7 / -1}.start-8{grid-column:8 / -1}.start-1-6{grid-column:1 / span 6}
.note{max-width:34ch}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:1.6rem var(--gutter);pointer-events:none;mix-blend-mode:difference;color:#fff}
.hdr .u--mute,.hdr__tag{color:rgba(255,255,255,.55)}
.hdr>*{pointer-events:auto}
.hdr__tag{max-width:12rem;color:var(--fg-mute)}
.hdr__mark{justify-self:center;width:2.75rem;height:2.75rem;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:300;font-size:1.15rem;letter-spacing:.04em;padding-left:.08em;transition:background var(--t-hover),color var(--t-hover)}
.hdr__mark:hover{background:#fff;color:#000}
.hdr__nav{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.hdr__nav a{position:relative;padding:.15rem 0;transition:color var(--t-hover)}
.hdr__nav a::before{content:"+";position:absolute;left:-1.1em;opacity:0;transition:opacity var(--t-hover)}
.hdr__nav a[aria-current]::before,.hdr__nav a:hover::before{opacity:1}
.hdr__nav a:not([aria-current]){color:#fff}
.hdr__burger{display:none}
@media (max-width:820px){
  .hdr{grid-template-columns:auto 1fr auto;align-items:center;padding:1.1rem var(--gutter)}
  .hdr__tag{display:none}
  .hdr__mark{justify-self:start;grid-column:1}
  .hdr__nav{display:none}
  .hdr__burger{display:block;grid-column:3;background:none;border:0;color:inherit;font:inherit;padding:.6rem 0 .6rem .6rem;cursor:pointer}
  .menu-open .hdr{mix-blend-mode:normal;color:var(--fg)}
  .menu-open .hdr__mark,.menu-open .hdr__burger{position:relative;z-index:2}
  .menu-open .hdr__nav a:not([aria-current]){color:var(--fg)}
  .menu-open .hdr__nav{display:flex;position:fixed;inset:0;width:100vw;height:100dvh;justify-self:stretch;align-self:stretch;background:var(--bg);color:var(--fg);align-items:flex-start;justify-content:center;padding:var(--gutter) var(--gutter) var(--gutter) calc(var(--gutter) + 1.4rem);gap:1.2rem}
  .menu-open .hdr__nav a{font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.5rem);font-weight:300;text-transform:uppercase;letter-spacing:0;line-height:1}
  .menu-open .hdr__nav a::before{left:-.8em;font-size:.5em;top:.45em}
}

/* ---------- home hero: fixed word, photos pass through it ---------- */
.hero{position:relative;height:640vh;isolation:isolate;background:var(--bg)}
.hero__word{position:sticky;top:0;height:100vh;display:grid;place-items:center;align-content:center;z-index:2;pointer-events:none;mix-blend-mode:difference;color:#fff;animation:wordIn 1.8s var(--ease-out) both}
@keyframes wordIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hero__stack{display:block;line-height:.8}
.hero__stack span{display:block}
.hero__word small{display:block;text-align:right;margin-top:.9rem;font-size:var(--utility);font-weight:500;letter-spacing:.42em;padding-right:.1em;opacity:.85}
.open__word{mix-blend-mode:difference;color:#fff}
.hero__ph{position:absolute;margin:0;overflow:hidden}
.hero__ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.6s var(--ease-out)}
.hero__ph a{display:block}
.hero__ph a:hover img{transform:scale(1.04)}
.hero__ph figcaption{position:absolute;left:0;bottom:-1.8rem;opacity:0;transform:translateY(-4px);transition:opacity var(--t-hover),transform var(--t-hover)}
.hero__ph:hover figcaption{opacity:1;transform:none}
.hero__ph.back{z-index:1}.hero__ph.front{z-index:3}
.hero__ph.p1{top:19%;left:4%;width:31vw;aspect-ratio:3/2}
.hero__ph.p2{top:27%;right:19%;width:18vw;aspect-ratio:3/4}
.hero__ph.p3{top:40%;left:15%;width:30vw;aspect-ratio:3/2}
.hero__ph.p4{top:50%;right:8%;width:17vw;aspect-ratio:3/4.6}
.hero__ph.p5{top:61%;left:6%;width:28vw;aspect-ratio:3/2}
.hero__ph.p6{top:69%;right:29%;width:16vw;aspect-ratio:2/3}
.hero__ph.p7{top:79%;left:21%;width:34vw;aspect-ratio:3/2}
.hero__ph.p8{top:90%;right:6%;width:26vw;aspect-ratio:3/2}
.cue{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:40;width:3rem;height:3rem;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);background:none;cursor:pointer;transition:opacity .6s,transform .6s;padding:0}
.cue svg{width:12px;height:16px;animation:cue 2.4s var(--ease-out) infinite}
.cue.is-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
@keyframes cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (max-width:820px){
  .hero{height:500vh}
  .hero__word{font-size:25vw}
  .hero__ph.p1{top:22%;left:4%;width:64vw}
  .hero__ph.p2{top:32%;right:6%;width:44vw}
  .hero__ph.p3{top:43%;left:6%;width:66vw}
  .hero__ph.p4{top:53%;right:8%;width:42vw}
  .hero__ph.p5{top:63%;left:4%;width:62vw}
  .hero__ph.p6{top:72%;right:10%;width:40vw}
  .hero__ph.p7{top:81%;left:8%;width:70vw}
  .hero__ph.p8{top:91%;right:4%;width:60vw}
  .hero__ph figcaption{display:none}
}

/* ---------- inner-page opening: giant word over a photo ---------- */
.open{position:relative;isolation:isolate;background:var(--bg);padding-top:clamp(7rem,16vh,11rem)}
.open__word{position:relative;z-index:2;text-align:center}
.open__word.left{text-align:left}
.open__img{position:relative;margin-top:calc(var(--word) * -.28);z-index:1}
.open__img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.open__img--wide{width:min(100%,1180px)}
.open__second{position:relative;z-index:3;width:min(34vw,420px);margin:calc(var(--word) * -.6) 0 0 auto;margin-right:var(--gutter)}
.open__second img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:820px){.open__second{width:52vw;margin-top:-20vw}}

/* ---------- statement blocks ---------- */
.stmt .display{max-width:12ch}
.stmt .note{padding-top:.6rem}
.sig{width:3.5rem;height:1px;background:var(--gold);margin-top:2rem}

/* ---------- gallery tiles (home) ---------- */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2.5rem) clamp(1rem,2.5vw,2.5rem)}
.tile{position:relative;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.tile:hover img{transform:scale(1.04)}
.tile__cap{display:flex;align-items:baseline;gap:1rem;margin-top:1rem}
.tile__cap h3{font-weight:300;font-size:clamp(1.6rem,2.6vw,2.4rem);text-transform:uppercase;letter-spacing:-.005em;line-height:1}
.tile__cap span{color:var(--fg-mute)}
.tile--a{grid-column:1 / span 7;aspect-ratio:3/2}
.tile--b{grid-column:9 / span 4;aspect-ratio:3/4;margin-top:clamp(3rem,12vw,10rem)}
.tile--c{grid-column:3 / span 7;aspect-ratio:16/10;margin-top:clamp(-2rem,-4vw,-6rem)}
.tile>a{display:block;height:100%}
.tile .tile__frame{overflow:hidden;height:calc(100% - 3.2rem)}
.tile--a .tile__frame,.tile--b .tile__frame,.tile--c .tile__frame{height:auto;aspect-ratio:inherit}
@media (max-width:820px){.tile--a,.tile--b,.tile--c{grid-column:1 / -1;margin-top:0}.tile--b{grid-column:3 / -1}}

/* ---------- staggered gallery grid (inner pages) ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,3vw,3rem) clamp(1rem,2.5vw,2.5rem);align-items:start}
.gal figure{overflow:hidden;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.gal figure:hover img{transform:scale(1.03)}
.gal .g-l{grid-column-end:span 7;aspect-ratio:3/2}
.gal .g-r{grid-column-end:span 5;aspect-ratio:3/2}
.gal .g-p{grid-column-end:span 4;aspect-ratio:3/4}
.gal .g-w{grid-column:2 / span 10;aspect-ratio:16/9}
.gal .g-s{grid-column-end:span 5;aspect-ratio:4/5}
.gal .off{margin-top:clamp(2rem,8vw,7rem)}
.gal .gap1{grid-column-start:2}.gal .gap2{grid-column-start:3}.gal .gap3{grid-column-start:8}.gal .gap4{grid-column-start:9}
@media (max-width:820px){
  .gal .g-l,.gal .g-r,.gal .g-w{grid-column:1 / -1}
  .gal .g-p,.gal .g-s{grid-column-end:span 6}
  .gal .off{margin-top:0}
  .gal .gap1,.gal .gap2,.gal .gap3,.gal .gap4{grid-column-start:auto}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;background:rgba(22,22,22,.96);display:grid;place-items:center;padding:var(--gutter);opacity:0;pointer-events:none;transition:opacity .5s}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;top:1.4rem;right:var(--gutter);background:none;border:0;color:var(--paper);font:inherit;cursor:pointer;padding:.5rem}

/* ---------- dark band + footer ---------- */
.band{background:var(--ink);color:var(--paper);--fg:var(--paper);--fg-mute:rgba(244,243,241,.5);--rule:rgba(244,243,241,.16)}
.band .display{max-width:14ch}
.tel{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.5vw,4rem);letter-spacing:.01em;line-height:1;display:inline-block;border-bottom:1px solid var(--gold);padding-bottom:.15em;transition:color var(--t-hover)}
.tel:hover{color:var(--gold)}
.ftr{padding-block:3.5rem 2.5rem;border-top:1px solid var(--rule)}
.ftr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.ftr__grid .u--mute{margin-bottom:.6rem}
.ftr__grid a:hover{color:var(--gold)}
.ftr__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3.5rem;color:var(--fg-mute)}
@media (max-width:820px){.ftr__grid{grid-template-columns:1fr 1fr}}

/* ---------- next page link ---------- */
.next{display:block;text-align:center;padding-block:clamp(5rem,12vw,9rem)}
.next .display{font-size:clamp(2.4rem,7vw,6rem);margin-top:.6rem;transition:letter-spacing 1s var(--ease-out)}
.next:hover .display{letter-spacing:.04em}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(36px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero__word{animation:none}
  .cue svg{animation:none}
  *{transition-duration:0s!important}
}
@media (max-width:820px){
  .cols>*{grid-column:1 / -1!important}
  .section{padding-block:clamp(4rem,16vw,6rem)}
}