:root{
  --plaster:#ece6dc; --plaster-2:#e2dacd; --micro:#c9c5bd; --micro-d:#8f8b84;
  --olive:#3e4f3a; --olive-d:#2f3c2c; --walnut:#5a3d2b; --gold:#e8c88a;
  --ink:#1d1c1a; --ink-2:#4b4944; --cream:#f3eee5;
  --m:clamp(20px,4vw,64px);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-slow:cubic-bezier(.16,1,.3,1);
  --sans:"Jost",Futura,"Century Gothic",system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --arch:999px 999px 0 0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--plaster);color:var(--ink);font:400 18px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--olive);outline-offset:4px}
::selection{background:var(--olive);color:var(--cream)}
section{padding:clamp(96px,13vw,200px) var(--m)}

.caps,.caps-xl{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.32em;line-height:1.05}
.caps{font-size:clamp(26px,3.4vw,52px);margin-bottom:28px}
.caps-sm{text-transform:uppercase;letter-spacing:.24em;font-size:14px}
.serif-lede{font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);line-height:1.3;max-width:30ch;color:var(--ink-2)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}

/* arch motif */
.arch{border-radius:var(--arch);overflow:hidden;position:relative;background:var(--plaster-2)}
.arch img,.frame img{width:100%;height:100%;object-fit:cover}
.frame{overflow:hidden;position:relative}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--plaster-2);outline:1px solid rgba(29,28,26,.35);outline-offset:-10px}
.ph span{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);max-width:22ch;line-height:1.7}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font:500 14px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:transform 160ms var(--ease-out),background-color 240ms ease,color 240ms ease}
.btn:active{transform:scale(.97)}
.btn-olive{background:var(--olive);color:var(--cream)}
.btn-line{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn-olive:hover{background:var(--olive-d)}.btn-line:hover{background:var(--ink);color:var(--cream)}}
.link-line{text-decoration:none;font-size:15px;letter-spacing:.12em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:4px;transition:background-size 300ms var(--ease-out)}
@media (hover:hover){.link-line:hover{background-size:40% 1px}}

/* nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:16px var(--m);background:rgba(236,230,220,.92);border-bottom:1px solid rgba(29,28,26,.12)}
.nav-logo{color:var(--olive);display:block;width:150px;height:40px}
.nav-logo svg{width:100%;height:100%}
.nav nav{display:flex;gap:34px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.nav nav a:hover{color:var(--olive)}
.nav-cta{min-height:42px;padding:0 22px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,96px);align-items:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(64px,8vw,120px);min-height:calc(100svh - 74px)}
.caps-xl{display:block;font-size:clamp(44px,5.6vw,92px);letter-spacing:.2em;font-weight:400;color:var(--olive);line-height:1.08}
.hero-role{display:block;margin-top:22px;font:400 14px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hero .serif-lede{margin:36px 0 40px}
.hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hero-arch{position:relative}
.arch-hero{aspect-ratio:4/4.6;max-height:78svh;width:100%}
.arch-hero img{transform:scale(1.12);object-position:50% 60%}
.halo{position:absolute;inset:-6% -4% 10%;border-radius:999px 999px 0 0;background:radial-gradient(60% 45% at 50% 22%,rgba(232,200,138,.55),rgba(232,200,138,0) 70%);filter:blur(30px);animation:breathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes breathe{from{opacity:.55;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
.hero-arch figcaption,.g figcaption{margin-top:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}

/* materials strip */
.materials{padding:36px var(--m);background:var(--olive);color:var(--cream)}
.materials ul{list-style:none;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.materials li{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.26em;text-transform:uppercase}
.sw{width:34px;height:44px;border-radius:999px 999px 0 0;display:inline-block}
.sw-concreto{background:#a9a59d}.sw-nogal{background:#6b4a33}.sw-luz{background:var(--gold);box-shadow:0 0 22px rgba(232,200,138,.8)}.sw-olivo{background:var(--cream)}

/* espacio gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px);align-items:end}
.g-wide{grid-column:1/9}.g-wide .frame{aspect-ratio:16/9}
.g-arch{grid-column:9/13}.g-arch .arch{aspect-ratio:3/4.2}
.g-tall{grid-column:1/5}.g-tall .frame{aspect-ratio:4/5}
.g-sq{grid-column:5/8}.g-sq .frame{aspect-ratio:1}
.g-mid{grid-column:8/13}.g-mid .frame{aspect-ratio:16/10}
.g-arch2{grid-column:1/5}.g-arch2 .arch{aspect-ratio:3/4}
.g-ph{grid-column:span 8/span 8}
.gallery .g-ph:nth-of-type(7){grid-column:5/9}.gallery .g-ph:nth-of-type(8){grid-column:9/13}.gallery .g-ph:nth-of-type(9){grid-column:5/9}
.g-ph .arch{aspect-ratio:3/4}
.gallery .g-ph:nth-of-type(9){display:none}

/* color */
.color{background:var(--cream)}
.color-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,112px);align-items:center}
.color-side>p{max-width:34ch;margin-bottom:40px}
.tone-list{display:flex;flex-direction:column;border-top:1px solid rgba(29,28,26,.25)}
.tone-list button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 4px;border-bottom:1px solid rgba(29,28,26,.25);font:400 15px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);transition:color 200ms ease,padding 300ms var(--ease-out)}
.tone-list button::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background-color 200ms ease}
.tone-list button[aria-selected=true]{color:var(--olive);padding-left:14px}
.tone-list button[aria-selected=true]::after{background:var(--olive)}
.tone-list button:focus-visible{outline:1.5px solid var(--olive)}
.tone-stage{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.tone-arch{aspect-ratio:3/4.3}
.tone-arch img{transition:opacity 320ms ease,transform 900ms var(--ease-slow),filter 320ms ease}
.tone-arch img.swap{opacity:0;transform:scale(1.05);filter:blur(4px)}
.tone-swatch{position:absolute;left:50%;bottom:24px;width:54px;height:54px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 6px var(--cream);transition:background-color 400ms ease}
.tone-stage h3{font:400 clamp(34px,3.4vw,54px)/1 var(--serif);margin-bottom:16px}
.tone-stage p{margin-bottom:28px;max-width:32ch}
.also{margin-top:72px;font-family:var(--serif);font-size:24px;color:var(--ink-2)}

/* reels */
.reels{background:var(--micro);}
.reel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.reel{border-radius:220px 220px 0 0;overflow:hidden;background:var(--plaster-2);padding-top:60px}
.reel:nth-child(2){transform:translateY(56px)}
.reel iframe{display:block;width:100%;height:600px;border:0;background:var(--plaster-2)}
.nod{margin-top:96px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;letter-spacing:.12em}
.nod span{text-transform:uppercase;font-weight:500;background:linear-gradient(transparent 62%,#f5d547 62%)}

/* educa */
.educa{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,112px);align-items:center}
.yt{aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.yt iframe{width:100%;height:100%;border:0}
.yt-play{all:unset;cursor:pointer;position:relative;display:block;width:100%;height:100%}
.yt-play img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-slow)}
@media (hover:hover){.yt-play:hover img{transform:scale(1.03)}}
.yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(243,238,229,.92);font-size:12px;letter-spacing:.24em;text-transform:uppercase;transition:transform 160ms var(--ease-out)}
.yt-play:active .yt-btn{transform:translate(-50%,-50%) scale(.96)}

/* award */
.award{position:relative;overflow:hidden;background:var(--olive-d);color:var(--cream);display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center}
.award-gl{position:absolute;inset:0;width:100%;height:100%}
.award>*:not(canvas){position:relative}
.kicker-line{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.award-h{font-size:clamp(28px,3.6vw,56px);color:var(--cream)}
.award .serif-lede{color:#d9d4c8}
.award-ph{aspect-ratio:3/4;max-width:380px;justify-self:end;width:100%;background:rgba(243,238,229,.08);outline-color:rgba(243,238,229,.45)}
.award-ph span{color:#d9d4c8}

/* club */
.club{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--plaster-2)}
.club .serif-lede{margin:0 auto 24px}

/* agenda */
.agenda{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,112px);align-items:center}
.agenda-media .arch{aspect-ratio:3/4}
.ways{list-style:none;border-top:1px solid var(--ink);margin:8px 0 48px}
.ways li{border-bottom:1px solid var(--ink)}
.ways a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:26px 4px;text-decoration:none;transition:padding 320ms var(--ease-out),color 200ms ease}
.w-name{font:400 clamp(30px,3vw,46px)/1 var(--serif)}
.w-det{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
@media (hover:hover){.ways a:hover{padding-left:18px;color:var(--olive)}}
.ways a:active{transform:scale(.99)}
.lugar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* footer */
.foot{background:var(--olive);color:var(--cream);padding:clamp(72px,9vw,140px) var(--m) 32px;display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.foot-logo{width:min(760px,86vw);height:auto;aspect-ratio:490/130;color:var(--cream)}
.foot nav{display:flex;gap:14px 30px;flex-wrap:wrap;justify-content:center}
.foot nav a{text-decoration:none;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.credits{font-size:13px;max-width:80ch;color:#cfd3c6}
.demo{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#aab39f}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1100ms var(--ease-slow),transform 1100ms var(--ease-slow)}
.rv.in{opacity:1;transform:none}
.arch.rv-mask,.frame.rv-mask{clip-path:inset(100% 0 0 0);transition:clip-path 1400ms var(--ease-slow)}
.rv-mask.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:opacity 400ms ease}
  .rv-mask{clip-path:none!important}
  .halo{animation:none}
  [data-parallax]{transform:scale(1.05)!important}
}

/* mobile */
@media (max-width:860px){
  body{font-size:17px}
  .nav{gap:16px}.nav nav{display:none}.nav-logo{width:120px;height:32px}.nav-cta{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .hero-arch{order:-1}
  .arch-hero{aspect-ratio:4/4.4;max-height:58svh}
  .caps-xl{font-size:clamp(34px,10vw,48px);letter-spacing:.16em}
  .hero .serif-lede{margin:24px 0 28px}
  .sec-head,.color-grid,.tone-stage,.educa,.award,.agenda{grid-template-columns:1fr}
  .materials ul{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery>.g{grid-column:auto!important}
  .g-wide,.g-mid{grid-column:1/3!important}
  .gallery .g-ph:nth-of-type(9){display:block}
  .tone-stage{gap:24px}.tone-arch{max-width:360px}
  .reel-row{grid-template-columns:1fr}.reel:nth-child(2){transform:none}.reel iframe{height:560px}
  .award-ph{justify-self:start;max-width:280px}
  .agenda-media{max-width:300px}
  .ways a{flex-direction:column;gap:8px}
}
.award-h{font-size:clamp(26px,2.9vw,46px);letter-spacing:.24em}
.reel{border-radius:160px 160px 0 0;padding-top:40px}
@media (max-width:860px){.gallery .g-wide .frame,.gallery .g-mid .frame{aspect-ratio:4/3}.award-h{font-size:24px;letter-spacing:.18em}}