/* Manny Vara, v3: the house at night */
@font-face{font-family:'Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/LibreCaslonDisplay-normal-400.woff2) format('woff2')}
@font-face{font-family:'Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/LibreCaslonText-normal-400.woff2) format('woff2')}
@font-face{font-family:'Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/LibreCaslonText-italic-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/HankenGrotesk-normal-300-700.woff2) format('woff2')}

:root{
  --night:#0F1A16;--panel:#17241F;--panel-2:#1D2C26;--line:#2E3F37;
  --parchment:#ECE5D5;--parchment-2:#CFCABC;--mist:#9AA59E;
  --brass:#C29B5E;--brass-hi:#D9B67E;--oxblood:#7A3530;
  --display:'Caslon Display',Georgia,'Times New Roman',serif;
  --serif:'Caslon Text',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.7,.18,1);
  --gutter:clamp(20px,4vw,48px);
  --header:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--night);color:var(--parchment);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:var(--brass-hi);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--parchment)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
h1{font-family:var(--display);font-size:clamp(46px,7.2vw,108px);line-height:.98;letter-spacing:-.012em}
h2{font-family:var(--display);font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.008em}
h3{font-family:var(--serif);font-size:clamp(22px,2vw,26px);line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--parchment-2);max-width:36em}
.quiet{color:var(--mist)}
.smallcaps{font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--brass);font-size:17px}
.section{padding:clamp(88px,11vw,160px) 0}
.section-head{max-width:46rem;margin-bottom:clamp(40px,5vw,72px)}
.section-head h2{margin-bottom:20px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brass);color:var(--night);padding:12px 18px;border-radius:6px}
.skip:focus{left:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:500 16px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-brass{background:var(--brass);color:var(--night)}
.btn-brass:hover{background:var(--brass-hi);color:var(--night)}
.btn-line{border-color:rgba(236,229,213,.42);color:var(--parchment)}
.btn-line:hover{border-color:var(--parchment);color:var(--parchment)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--header);transition:background-color .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.top.solid,.top.open{background:rgba(15,26,22,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--line)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--parchment);text-decoration:none;min-height:44px}
.brand .name{font-family:var(--display);font-size:26px;line-height:1}
.brand .role{display:block;font:500 13px/1.2 var(--sans);color:var(--mist);margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--parchment-2);text-decoration:none;font-size:16px}
.nav a:not(.btn):hover{color:var(--parchment)}
.nav .btn{min-height:44px;margin-left:8px;padding:0 20px}
.menu-btn{display:none;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--parchment);font:500 15px/1 var(--sans);padding:0 16px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{position:fixed;inset:var(--header) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--night);border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;display:none}
  .top.open .nav{display:flex}
  .nav a:not(.btn){min-height:52px;border-bottom:1px solid var(--line);font-size:18px}
  .nav .btn{margin:16px 0 0}
}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-media,.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-still{z-index:-3}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,26,22,.92) 0%,rgba(15,26,22,.62) 42%,rgba(15,26,22,.08) 72%),linear-gradient(0deg,var(--night) 0%,rgba(15,26,22,0) 34%)}
.hero .wrap{width:100%;padding-bottom:clamp(64px,10vh,120px);padding-top:calc(var(--header) + 40px)}
.hero h1{max-width:9.5em;margin-bottom:28px}
.hero .lede{margin-bottom:36px;max-width:31em}
.hero .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero .line>span{display:block}
.media-toggle{position:absolute;right:var(--gutter);bottom:clamp(64px,10vh,120px);min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(236,229,213,.35);background:rgba(15,26,22,.55);color:var(--parchment);font:500 14px/1 var(--sans);padding:0 16px;cursor:pointer}
@media (max-width:860px){
  .hero::after{background:linear-gradient(0deg,var(--night) 8%,rgba(15,26,22,.86) 46%,rgba(15,26,22,.15) 80%)}
  .media-toggle{top:calc(var(--header) + 12px);bottom:auto}
}
.js .hero .line>span{transform:translateY(105%);animation:rise 1s var(--ease) forwards}
.js .hero .line:nth-child(2)>span{animation-delay:.12s}
.js .hero .after{opacity:0;animation:fade .9s var(--ease) .55s forwards}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}

/* intro: me and the role */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.portrait{position:relative;border-radius:4px;overflow:hidden;background:var(--panel);aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover}
.intro h2{margin-bottom:24px}
.creds{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.creds li{padding-left:22px;position:relative;color:var(--parchment-2)}
.creds li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--brass)}
.placement{margin-top:clamp(56px,7vw,96px);border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.placement header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:24px 28px;border-bottom:1px solid var(--line)}
.placement header h3{font-size:24px}
.placement dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.placement dl>div{padding:20px 28px;border-bottom:1px solid var(--line)}
.placement dl>div:nth-child(3n+2),.placement dl>div:nth-child(3n+3){border-left:1px solid var(--line)}
.placement dl>div:nth-last-child(-n+3){border-bottom:0}
.placement dt{font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.05em;color:var(--brass);font-size:16px;margin-bottom:4px}
.placement dd{margin:0;color:var(--parchment-2);font-size:16px;line-height:1.5}
@media (max-width:960px){
  .intro{grid-template-columns:1fr}
  .portrait{max-width:440px;aspect-ratio:4/3}
  .placement dl{grid-template-columns:1fr 1fr}
  .placement dl>div{border-left:0!important}
  .placement dl>div:nth-child(even){border-left:1px solid var(--line)!important}
  .placement dl>div:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .placement dl>div:last-child{border-bottom:0}
}
@media (max-width:560px){
  .placement dl{grid-template-columns:1fr}
  .placement dl>div:nth-child(even){border-left:0!important}
  .placement header,.placement dl>div{padding-left:20px;padding-right:20px}
}

/* the house plan */
.house{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.plan-wrap{position:sticky;top:calc(var(--header) + 24px);display:flex;flex-direction:column;gap:16px;height:calc(100svh - var(--header) - 48px);max-height:900px}
.plan{flex:1.25 1 0;min-height:0;width:100%;height:auto}
.plan .walls{fill:none;stroke:var(--brass);stroke-width:2.4;stroke-linejoin:round}
.plan .inner{fill:none;stroke:rgba(194,155,94,.55);stroke-width:1.4}
.plan .site{fill:none;stroke:rgba(154,165,158,.35);stroke-width:1.2;stroke-dasharray:4 6}
.plan .room{fill:rgba(194,155,94,0);transition:fill .45s var(--ease);cursor:pointer}
.plan .room:hover{fill:rgba(194,155,94,.10)}
.plan .room.on{fill:rgba(194,155,94,.26)}
.plan .label{font:400 26px var(--serif);fill:var(--mist);transition:fill .45s var(--ease);pointer-events:none}
.plan .label.on{fill:var(--parchment)}
.plan .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.plan.drawn .draw{transition:stroke-dashoffset 2.2s var(--ease);stroke-dashoffset:0}
.room-photo{position:relative;flex:1 1 0;min-height:0;border-radius:4px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.room-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.room-photo img.on{opacity:1}
.rooms{list-style:none;margin:0;padding:0}
.rooms li{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding:32px 0;border-top:1px solid var(--line)}
.rooms li:first-child{border-top:0}
.rooms h3{margin-bottom:12px;color:var(--parchment-2);transition:color .4s var(--ease)}
.rooms li.on h3{color:var(--parchment)}
.rooms p{color:var(--parchment-2);margin:0;max-width:30em}
.rooms .inline-photo{display:none}
@media (max-width:960px){
  .house{grid-template-columns:1fr}
  .plan-wrap{top:calc(var(--header) + 8px);z-index:2;background:var(--night);padding:8px 0 12px;border-bottom:1px solid var(--line);display:block;height:auto;max-height:none}
  .plan{max-height:30vh;margin:0 auto}
  .room-photo{display:none}
  .rooms li{min-height:auto;padding:36px 0}
  .rooms .inline-photo{display:block;aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:4px;margin-bottom:20px;border:1px solid var(--line)}
}

/* the team */
.team{display:grid;gap:18px;justify-items:center;text-align:center}
.tier{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:14px 20px;min-width:180px}
.chip strong{display:block;font:400 19px/1.25 var(--serif);color:var(--parchment)}
.chip span{font-size:15px;color:var(--mist)}
.chip.me{border-color:var(--brass);background:var(--panel-2)}
.chip.me strong{color:var(--brass-hi)}
.tie{width:1px;height:28px;background:var(--brass);opacity:.7}
.others{margin:clamp(48px,6vw,72px) auto 0;max-width:52rem;display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;list-style:none;padding:0}
.others li{padding:14px 0;border-top:1px solid var(--line);color:var(--parchment-2);font-size:16px}
.others strong{color:var(--parchment);font-weight:600}
@media (max-width:700px){.others{grid-template-columns:1fr}.chip{min-width:0;flex:1 1 140px}}

/* the year */
.year{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--brass)}
.year>div{padding:28px 24px 8px 0;position:relative}
.year>div::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--brass)}
.year h3{margin-bottom:10px}
.year p{color:var(--parchment-2);font-size:16px}
@media (max-width:900px){.year{grid-template-columns:1fr 1fr;row-gap:12px}}
@media (max-width:560px){.year{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--brass);padding-left:24px}.year>div{padding:0 0 28px}.year>div::before{left:-29px;top:8px}}

/* joining */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:20px}
.steps li::before{content:counter(s);display:block;font:400 44px/1 var(--display);color:var(--brass);margin-bottom:16px}
.steps h3{margin-bottom:10px}
.steps p{color:var(--parchment-2);font-size:16px}
.areas{margin-top:clamp(40px,5vw,64px);padding:24px 28px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--parchment-2);font-size:16px}
.areas strong{color:var(--parchment);font-weight:600}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* discretion and terms */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:16px 0;border-top:1px solid var(--line);color:var(--parchment-2);font-size:16px}
.ticks strong{color:var(--parchment);font-weight:600}
.keys-img{margin-bottom:32px;border-radius:4px;aspect-ratio:16/9;object-fit:cover;width:100%;border:1px solid var(--line)}
.terms{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.term{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:24px 28px;border-top:1px solid var(--line);background:var(--panel)}
.term:first-child{border-top:0;background:var(--panel-2)}
.term h3{font-size:22px}
.term .price{font:400 30px/1 var(--display);color:var(--brass-hi);white-space:nowrap}
.term .price small{font:400 15px var(--sans);color:var(--mist)}
.term p{grid-column:1/-1;margin:0;color:var(--parchment-2);font-size:16px}
.terms-note{margin-top:20px;color:var(--mist);font-size:15px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
@media (max-width:480px){.term{grid-template-columns:1fr;padding:22px 20px}}

/* questions */
.faq{max-width:52rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 52px 22px 0;position:relative;font:400 21px/1.35 var(--serif);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--brass),var(--brass)) center/14px 1.5px no-repeat,linear-gradient(var(--brass),var(--brass)) center/1.5px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 52px 24px 0;color:var(--parchment-2)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}

/* contact */
.contact{position:relative;overflow:hidden;isolation:isolate;padding:clamp(110px,14vw,200px) 0 clamp(64px,8vw,96px)}
.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:-2}
.contact::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 20%,rgba(15,26,22,.6) 70%,rgba(15,26,22,.4)),linear-gradient(180deg,var(--night),rgba(15,26,22,0) 40%)}
.contact h2{font-size:clamp(52px,8vw,112px);margin-bottom:24px}
.contact .btn-row{margin:36px 0 56px}
.card{display:flex;flex-wrap:wrap;gap:20px 64px;padding-top:28px;border-top:1px solid rgba(236,229,213,.18)}
.card .who{font:400 28px/1.1 var(--display);margin:0}
.card .sub{margin:6px 0 0;color:var(--mist);font-size:15px}
.card .lines{display:flex;flex-direction:column}
.card .lines a,.card .lines span{display:inline-flex;align-items:center;min-height:44px;color:var(--parchment);text-decoration:none}
.card .lines a:hover{color:var(--brass-hi)}
.card .lines span{color:var(--mist)}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--mist);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

/* sticky call to action on phones */
.sticky-cta{display:none}
@media (max-width:860px){
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;transform:translateY(160%);transition:transform .35s var(--ease)}
  .sticky-cta.show{transform:none}
  .sticky-cta .btn{flex:1;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  footer{padding-bottom:100px}
}

/* agency page */
.page-top{padding:calc(var(--header) + clamp(56px,8vw,112px)) 0 clamp(40px,5vw,64px)}
.table-box{border:1px solid var(--line);border-radius:6px;overflow-x:auto;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;vertical-align:top;padding:16px 22px;border-top:1px solid var(--line)}
thead th{border-top:0;font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.05em;color:var(--brass);font-weight:400;font-size:17px}
td{color:var(--parchment-2)}
td:first-child{color:var(--parchment);width:38%}
blockquote.say{margin:0;padding:26px 30px;border-left:2px solid var(--brass);background:var(--panel);border-radius:0 6px 6px 0;font:400 21px/1.5 var(--serif);color:var(--parchment);max-width:46rem}
ol.plain{padding-left:22px;max-width:46rem;color:var(--parchment-2)}
ol.plain li{padding:6px 0}
.block{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.block h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:24px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .hero .line>span{transform:none}
  .js .hero .after{opacity:1}
  .plan .draw{stroke-dashoffset:0}
}