:root{
  --paper:#f3efe6;
  --ink:#170f0a;
  --gold:#f2b01e;
  --bg:var(--paper);
  --fg:var(--ink);
  --gut:clamp(16px,2.2vw,32px);
  --navh:52px;
  --serif:"Fraunces",ui-serif,Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --label:12px;
  --text:18px;
  --m:clamp(30px,3.6vw,76px);
  --d:clamp(44px,9.4vw,190px);
  --xl:var(--d);
  --mk:var(--d);
  --hair:color-mix(in srgb,currentColor 22%,transparent);
  --soft:color-mix(in srgb,currentColor 72%,transparent);
  --expo:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--navh)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--text);line-height:1.45;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
em{font-style:italic}
video{display:block;width:100%;height:100%;object-fit:cover;background:#0d0906}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:var(--gut);top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 16px;font-size:var(--label);transform:translateY(-200%)}
.skip:focus{transform:none}

/* type */
.label{font-family:var(--sans);font-size:var(--label);line-height:1.35;letter-spacing:.02em;font-weight:500}
.d,.xl,.m,.mast,.h-rest,.row-n,.mw,.price-n,.price-p,.f-line,.spanish-h,.note-p,.sheet-links .sl,.how-n,.nav-wm,.sheet-wm{font-family:var(--serif);font-weight:340;font-optical-sizing:auto;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-kerning:normal}
.d{font-size:var(--d);line-height:.96;letter-spacing:-.032em}

.m{font-size:var(--m);line-height:1.04;letter-spacing:-.022em}
em{font-weight:320}

/* word masks */
.w{display:inline-block;clip-path:inset(-.25em -.4em -.22em -.4em);vertical-align:baseline}
.w>span{display:inline-block;will-change:transform}

/* marks */
.mark{display:inline-block;height:.56em;width:auto;aspect-ratio:1;vertical-align:-.02em;fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;overflow:visible}
.mark *{vector-effect:non-scaling-stroke}
.mark--box{aspect-ratio:64/48}

/* rules */
.rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);transform-origin:0 50%}
.rule-row{position:relative;display:flex;justify-content:space-between;gap:16px;padding-top:12px;margin-inline:var(--gut)}
.rule-row h2{font-weight:500}

/* button */
.btn{display:inline-flex;align-items:center;gap:.7em;min-height:48px;padding:0 22px 0 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:var(--label);font-weight:500;letter-spacing:.02em;border:1px solid var(--ink);transition:background-color .25s,color .25s}
.btn .mark{height:11px;stroke-width:1.5;transition:transform .3s var(--expo)}
.btn:hover{background:transparent;color:var(--ink)}
.btn:hover .mark{transform:translate(2px,-2px)}

/* floods */
.flood{position:fixed;inset:0;z-index:-1;display:none;pointer-events:none}
.flood--gold{background:var(--gold)}
.flood--ink{background:var(--ink)}
.flood--paper{background:var(--paper)}
.motion .flood{display:block;clip-path:inset(100% 0 0 0)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--navh);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;padding-inline:var(--gut);background:var(--bg);color:var(--fg);transition:background-color .25s linear,color .25s linear,transform 1s var(--expo)}
.nav::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:var(--hair);opacity:0;transition:opacity .4s}
.scrolled .nav::after{opacity:1}
html[data-tone="gold"]{--bg:var(--gold)}
html[data-tone="ink"]{--bg:var(--ink);--fg:var(--paper)}
.loading .nav{transform:translateY(-101%)}
.nav-wm{grid-column:1/span 3;justify-self:start;font-size:19px;letter-spacing:.01em;line-height:1;font-variation-settings:"opsz" 72;font-weight:400;text-transform:uppercase;padding:14px 12px 14px 0}
.motion .nav-wm{opacity:0}
.nav-time{grid-column:4/span 3;display:flex;gap:.7em;white-space:nowrap}
.nav-time time{font-variant-numeric:tabular-nums;color:var(--soft)}
.nav-links{grid-column:7/span 4;font-size:var(--label);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.nav-links a,.nav-cta,.foot-links a,.cap-r a{padding-block:15px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 13px)/0 1px no-repeat;transition:background-size .3s var(--expo)}
.nav-links a:hover,.foot-links a:hover,.cap-r a:hover{background-size:100% 1px}
.nav-cta{grid-column:11/span 2;justify-self:end;font-size:var(--label);font-weight:500;letter-spacing:.02em;white-space:nowrap;background-size:100% 1px}
.nav-cta:hover{background-size:0 1px;background-position:100% calc(100% - 13px)}
.nav-menu{display:none;appearance:none;border:0;background:none;color:inherit;font:500 var(--label)/1 var(--sans);letter-spacing:.02em;min-height:44px;min-width:44px;padding:0 0 0 16px;justify-self:end;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* phone sheet */
.sheet{position:fixed;inset:0;z-index:80;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:0 var(--gut) calc(20px + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .9s var(--expo),visibility 0s .9s}
.sheet.open{clip-path:inset(0);visibility:visible;transition:clip-path .9s var(--expo),visibility 0s}
.sheet-top{height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:16px}
.sheet-top .nav-menu{display:block}
.sheet-wm{font-size:19px;font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-variation-settings:"opsz" 72}
.sheet-links{flex:1;display:flex;flex-direction:column;justify-content:center}
.sheet-links a{display:grid;grid-template-columns:44px 1fr;align-items:baseline;border-top:1px solid var(--hair);padding:10px 0 14px}
.sheet-links a:last-child{border-bottom:1px solid var(--hair)}
.sheet-links .sl{font-size:var(--d);line-height:1;letter-spacing:-.04em;display:block;transform:translateY(40%);opacity:0;transition:transform 1s var(--expo),opacity .6s}
.sheet.open .sl{transform:none;opacity:1}
.sheet-links a:nth-child(2) .sl{transition-delay:.08s}.sheet-links a:nth-child(3) .sl{transition-delay:.16s}.sheet-links a:nth-child(4) .sl{transition-delay:.24s}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* loader ui */
.loader-ui{display:none}
.motion .loader-ui{display:block;position:fixed;inset:auto 0 0 0;z-index:70;pointer-events:none}
.lu{position:absolute;bottom:20px;overflow:hidden}
.lu-l{left:var(--gut)}.lu-r{right:var(--gut);font-variant-numeric:tabular-nums}
.lu>span{display:block}

/* hero */
.hero{padding-top:var(--navh)}
.hero-head{position:relative;padding-inline:var(--gut)}
.h1{display:block}
.mast-slot{display:block}
.mast{display:block;width:max-content;font-size:26vw;line-height:.76;letter-spacing:-.035em;white-space:nowrap;margin-left:-.03em;padding-top:.035em;font-weight:320;text-transform:uppercase;transform-origin:0 0}
.motion .mast{position:fixed;left:var(--gut);top:var(--navh);z-index:60;pointer-events:none;color:var(--fg);transition:color .25s linear}
.fit-i{display:inline-block;white-space:nowrap}
.h-rest{display:block;font-size:var(--d);line-height:1;letter-spacing:-.035em;white-space:nowrap;padding:.1em 0 .12em;margin-left:-.02em;width:max-content}
.hw{display:inline-block;transform-origin:0 0}
.hero-side{position:absolute;right:var(--gut);bottom:.9vw;width:calc((100vw - var(--gut)*2 - var(--gut)*11)/12*3 + var(--gut)*2);display:grid;gap:18px}
.hero-line{max-width:23em;text-wrap:pretty}
.hero-film-wrap{padding:calc(var(--gut)*.75) var(--gut) 0}
.hero-film{position:relative;aspect-ratio:2.1/1;transform-origin:0 0}
.hero-film-in{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:#0d0906}
.hf{position:absolute;inset:0}
.hf-b{clip-path:inset(0 0 0 100%)}
.hero-cap{display:flex;justify-content:space-between;gap:16px;padding-top:12px}
.cap-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.cap-mask>span{display:inline-block}
.cap-r a{background-size:100% 1px}
.motion.loading [data-hero-fade]{opacity:0}

/* note */
.nw{white-space:nowrap}
.mac{position:relative;display:inline-block;color:transparent}
.mac::before{content:attr(data-b);position:absolute;left:0;top:0;color:var(--ink)}
.mac::after{content:"";position:absolute;left:14%;right:14%;top:.2em;height:.05em;background:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note{padding-top:clamp(90px,16vh,180px)}
.note-p{font-size:var(--m);line-height:1.06;letter-spacing:-.022em;margin:clamp(28px,5vh,60px) var(--gut) 0;padding-left:calc((100% - var(--gut)*2)/12*3 + var(--gut)*.75);max-width:none;text-wrap:balance}

/* section heads */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end;padding:clamp(40px,9vh,110px) var(--gut) clamp(28px,5vh,56px)}
.sec-head h2{grid-column:1/-1;white-space:nowrap}
.sec-note{grid-column:10/span 3;max-width:20em;padding-top:1.4em;text-wrap:pretty}
.count{vertical-align:top;margin-left:1.1em;position:relative;top:1.6em;letter-spacing:.02em}

/* work */
.work{padding-top:clamp(90px,16vh,180px)}
.rows{margin-inline:var(--gut)}
.row-li,.row-end,.price{position:relative}
.row-end{height:1px}
.row{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:baseline;padding:.9vw 0 1.1vw;transition:opacity .35s}
.row-i{grid-column:1/span 1;align-self:start;padding-top:1.5vw;font-variant-numeric:tabular-nums}
.row-n{grid-column:2/span 8;font-size:var(--d);line-height:1;letter-spacing:-.035em;white-space:nowrap;transition:transform .5s var(--expo)}
.row-m{grid-column:10/span 3;display:grid;gap:4px;align-self:center}
.row-k{color:var(--soft)}
.row-l{max-width:19em;text-wrap:pretty;line-height:1.35}
.row-film{display:none}
@media (hover:hover) and (pointer:fine){
  .rows:hover .row{opacity:.32}
  .rows:hover .row:hover{opacity:1}
  .row:hover .row-n{font-style:italic;font-weight:320;transform:translateX(.12em)}
}
.float{position:fixed;left:0;top:0;z-index:40;width:clamp(280px,27vw,460px);aspect-ratio:16/10;pointer-events:none;visibility:hidden}
.float-in{position:absolute;inset:0;overflow:hidden;border-radius:6px;clip-path:inset(100% 0 0 0)}
.float video{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}

/* make */
.make{padding-top:clamp(110px,20vh,220px);padding-bottom:clamp(120px,24vh,260px)}
.make-lines{padding:clamp(36px,8vh,90px) var(--gut) 0}
.ml{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.22em;font-size:var(--mk);line-height:1.04}
.mw{font-size:1em;letter-spacing:-.045em;white-space:nowrap}
.ml1{padding-left:0}.ml2{padding-left:18vw}.ml3{padding-left:0;justify-content:flex-end}.ml4{padding-left:8vw}
.aside{align-self:flex-start;margin-top:calc(var(--mk)*.2 - 10px);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap;padding-block:16px;text-underline-offset:4px;font-variant-numeric:tabular-nums;transition:opacity .25s}
.aside:hover{opacity:.6}
.mk{height:.42em;align-self:center;margin-inline:.08em}

/* prices */
.prices{color:var(--ink);background:var(--gold);padding-top:clamp(90px,16vh,180px);padding-bottom:clamp(140px,26vh,280px)}
.about{color:var(--paper);background:var(--ink);padding-top:clamp(90px,16vh,180px);padding-bottom:clamp(140px,26vh,280px)}
.motion .prices,.motion .about{background:none}
.price-list{margin-inline:var(--gut)}
.price{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:baseline;padding:1.5vw 0 1.7vw}
.price-n{grid-column:1/span 6;font-size:var(--m);line-height:1.04;letter-spacing:-.025em}
.price-l{grid-column:7/span 3;max-width:19em;line-height:1.35;text-wrap:pretty}
.price-p{grid-column:10/span 3;justify-self:end;text-align:right;font-size:var(--m);line-height:1.04;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;white-space:nowrap}
.how{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding:clamp(80px,15vh,170px) var(--gut) 0}
.how-t{grid-column:1/span 6}
.how-list{grid-column:7/span 6;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:clamp(32px,5vh,56px)}
.how-list li{border-top:1px solid var(--hair);padding-top:10px;display:grid;gap:clamp(18px,3vh,36px);align-content:start}
.how-n{font-size:var(--m);line-height:1;font-variant-numeric:lining-nums}
.how-list p{max-width:18em;text-wrap:pretty}

/* about */
.about-name{font-family:var(--serif);font-weight:320;font-size:19vw;line-height:.86;letter-spacing:-.045em;padding:clamp(40px,9vh,110px) var(--gut) 0;white-space:nowrap}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding:clamp(40px,8vh,90px) var(--gut) 0}
.about-role{grid-column:1/span 3;max-width:22em;padding-top:.9em}
.about-paras{grid-column:7/span 6;max-width:35em;display:grid;gap:1.3em}
.about-paras p{text-wrap:pretty}
.motion .lead .fl,html:not(.motion) .lead::first-line{font-family:var(--serif);font-size:var(--m);line-height:1.15;letter-spacing:-.022em;font-weight:340}

/* spanish */
.spanish{padding:clamp(130px,26vh,300px) var(--gut) clamp(130px,26vh,300px);text-align:center;display:grid;justify-items:center;gap:clamp(20px,4vh,40px)}
.spanish-h{white-space:nowrap}
.spanish-l{max-width:27em;text-wrap:balance}

/* ending */
.ending{position:relative;padding-bottom:clamp(110px,20vh,220px)}
.ending-h{padding:clamp(40px,9vh,110px) var(--gut) 0;margin-left:-.03em}
.ending-side{display:grid;gap:22px;margin:clamp(30px,6vh,70px) var(--gut) 0;padding-left:calc((100% - var(--gut)*2)/12*6 + var(--gut)*.5)}
.ending-side p{max-width:20em}

/* footer */
.foot{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.foot .rule-row{margin-bottom:clamp(28px,6vh,70px)}
.f-line{font-size:var(--d);line-height:1.04;letter-spacing:-.035em;padding-inline:var(--gut);white-space:nowrap}
.f-in{padding-left:calc(var(--gut) + 2.5vw)}
.f-in2{text-align:right}
.f-line .mark{margin-inline:.06em}
.tuck{display:inline-block;vertical-align:top;margin:.95em 0 0 1em;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.f-mail{background:linear-gradient(currentColor,currentColor) 0 calc(100% - .08em)/100% 1px no-repeat;transition:background-size .5s var(--expo)}
.f-mail:hover{background-size:0 1px;background-position:100% calc(100% - .08em)}

/* phone */
@media (max-width:820px){
  :root{--text:17px;--d:13.2vw;--m:8.2vw}
  .nav{grid-template-columns:auto 1fr auto}
  .nav-wm{grid-column:auto}
  .nav-time{grid-column:auto;justify-self:center}
  .nav-time span{display:none}
  .nav-links,.nav-cta{display:none}
  .nav-menu{display:block}
  .h-rest{white-space:normal;width:auto;line-height:.95;padding-top:.14em}
  .h-rest .fit-i{white-space:normal;display:block}
  .hw{display:block;width:max-content}
  .hero-side{position:static;width:auto;padding-top:14px;gap:20px}
  .hero-film{aspect-ratio:16/10}
  .hero-film-wrap{padding-top:28px}
  .note-p{padding-left:0;text-wrap:pretty}
  .sec-head{display:block}
  .sec-head h2{white-space:normal}
  .sec-note{margin-top:22px}
  .count{top:.5em}
  .row{display:grid;grid-template-columns:1fr auto;row-gap:6px;padding:14px 0 26px}
  .row-i{grid-column:1;grid-row:1;padding:0}
  .row-n{grid-column:1/-1;grid-row:2;white-space:normal;line-height:.98;padding-top:6px}
  .row-m{display:contents}
  .row-k{grid-column:2;grid-row:1}
  .row-l{grid-column:1/-1;grid-row:3;max-width:22em}
  .row-film{display:block;grid-column:1/-1;grid-row:4;aspect-ratio:16/10;border-radius:6px;overflow:hidden;margin-top:12px}
  .float{display:none}
  .ml{line-height:1.02}
  .ml2{padding-left:0;justify-content:flex-end}.ml3{justify-content:flex-start}.ml4{padding-left:0;justify-content:flex-end}
  .ml{line-height:1.08}
  .aside{margin-top:calc(var(--mk)*.12 - 10px)}
  .price{display:grid;grid-template-columns:1fr;row-gap:8px;padding:16px 0 22px}
  .price-n,.price-l,.price-p{grid-column:1}
  .price-p{justify-self:start;margin-top:6px}
  .how{display:block}
  .how-list{grid-template-columns:1fr;margin-top:36px}
  .about-name{white-space:normal;font-size:27vw;line-height:.84}
  .about-name .fit-i{white-space:normal}
  .about-grid{display:block}
  .about-paras{margin-top:36px}
  .spanish-h{white-space:normal}
  .ending-side{padding-left:0}
  .f-line{font-size:var(--m);white-space:normal;line-height:1.2}
  .f-in{padding-left:var(--gut)}
  .f-in2{text-align:left}
  .tuck{display:block;margin:6px 0 10px}
}

/* reduced motion and no script: everything simply visible */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* page turns: the outgoing section leaves the screen before the color floods */
.motion .make,.motion .prices,.motion .about{padding-bottom:52vh}
.motion .prices,.motion .about{padding-top:0}
.motion .spanish{padding-top:4vh}
.motion .turn{will-change:opacity}
.side-below .hero-side{position:static;width:auto;padding-top:6px;grid-template-columns:1fr auto;align-items:end}
.side-below .hero-line{max-width:34em}
@media (min-width:821px) and (max-width:1100px){
  .hero-side{position:static;width:auto;padding-top:10px;grid-template-columns:1fr auto;align-items:end}
}