/* Renovatio Atelier — renovatioatelier.com */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:Inter;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/inter-normal-300_700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Tinos;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/tinos-normal-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Tinos;font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/tinos-italic-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------- tokens */
:root{
  --bone:#FDF5EB; --paper:#FEF8F1; --blush:#E0C8B4;
  --brown:#8A6D56; --umber:#2A2117;
  --ink:#241D14; --ink-72:rgba(36,29,20,.74); --ink-55:rgba(36,29,20,.58);
  --gilt:#6B5138; --rule:rgba(107,81,56,.34); --rule-soft:rgba(36,29,20,.10);

  --display:"Times New Roman",Tinos,Times,"Liberation Serif",serif;
  --text:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(22px,5.2vw,88px);
  --p:0;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--bone);}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--text);font-size:clamp(16.5px,1.02vw,18.5px);line-height:1.66;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;}
::selection{background:rgba(107,81,56,.2);}
section{position:relative;}
[id]{scroll-margin-top:clamp(70px,10vh,110px);}

.u-hide{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip{position:fixed;z-index:200;top:14px;left:14px;padding:12px 18px;background:var(--umber);color:var(--bone);
  font:500 13px/1 var(--text);letter-spacing:.06em;text-decoration:none;transform:translateY(-180%);transition:transform .24s var(--ease);}
.skip:focus{transform:none;}
:focus-visible{outline:2px solid var(--gilt);outline-offset:4px;}

.shell{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gutter);}

h1,h2,h3{margin:0;font-weight:400;font-family:var(--display);letter-spacing:-.014em;}
.h-lg{font-size:clamp(30px,3.5vw,60px);line-height:1.08;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
.dim{color:var(--ink-72);}
.eyebrow{
  font-family:var(--display);font-size:clamp(13px,.92vw,15px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-55);margin:0 0 clamp(20px,2.4vw,34px);display:flex;align-items:center;gap:16px;
}
.eyebrow::after{content:"";flex:0 0 clamp(38px,5vw,86px);height:1px;background:var(--rule);}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;z-index:80;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2vw,30px) var(--gutter);transition:background-color .5s var(--ease);}
.nav.is-lifted{background:rgba(253,245,235,.94);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--rule-soft);}
.nav.is-dark{color:#FFFBF3;}
.nav.is-dark.is-lifted{background:rgba(42,33,23,.86);border-bottom-color:rgba(253,245,235,.14);}
.nav__mark{display:block;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.nav__mark img{width:clamp(112px,10vw,148px);}
.nav.is-lifted .nav__mark{opacity:1;transform:none;pointer-events:auto;}
.nav.is-dark .nav__mark img{filter:brightness(0) invert(1) opacity(.92);}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px);}
.nav__links a{font-size:clamp(11.5px,.78vw,13px);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:6px 0;position:relative;}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%;}
@media (max-width:640px){
  .nav{justify-content:flex-end;}
  .nav__mark{display:none;}
  .nav__links{gap:16px;}
  .nav__links a{font-size:10.5px;letter-spacing:.15em;}
}

/* --------------------------------------------------------------- reveal */
.r{opacity:0;transform:translateY(20px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms);}
.r.is-in{opacity:1;transform:none;}
.r-line{opacity:0;clip-path:inset(0 0 102% 0);transition:opacity 1.2s var(--ease),clip-path 1.2s var(--ease);transition-delay:var(--d,0ms);}
.r-line.is-in{opacity:1;clip-path:inset(0 0 -14% 0);}

/* ----------------------------------------------------------------- hero */
.hero{min-height:100svh;overflow:hidden;display:flex;align-items:center;}
.hero__plate{position:absolute;inset:-4% -2%;z-index:0;}
.hero__plate picture,.gateway__plate picture{display:block;width:100%;height:100%;}
.approach__plate picture,.proportion__figure picture{display:block;width:100%;}
.hero__plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(180deg,rgba(253,245,235,.76) 0%,rgba(253,245,235,.42) 9%,rgba(253,245,235,0) 22%),
    linear-gradient(0deg,rgba(253,245,235,.86) 0%,rgba(253,245,235,.4) 8%,rgba(253,245,235,0) 20%);}
.hero__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  transform:scale(calc(1.02 + var(--p) * .09)) translate3d(0,calc(var(--p) * 2.5vh),0);
  transform-origin:50% 45%;will-change:transform;}
.hero__mark{position:absolute;z-index:3;top:clamp(70px,9vh,124px);left:var(--gutter);margin:0;}
.hero__mark img{width:clamp(262px,34vw,620px);}
.hero__body{position:relative;z-index:2;width:100%;display:flex;justify-content:center;}
.hero__body p{position:relative;max-width:31ch;font-size:clamp(19px,1.55vw,28px);line-height:1.48;
  letter-spacing:-.016em;margin:0;}
.hero__body p::before{content:"";position:absolute;inset:-64% -46%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(253,245,235,.97) 0%,rgba(253,245,235,.9) 40%,rgba(253,245,235,.55) 68%,rgba(253,245,235,0) 100%);}
.hero__foot{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(26px,4vh,50px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  font-size:clamp(12px,.85vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-72);}
.hero__rule{width:1px;height:clamp(46px,7vh,88px);background:rgba(36,29,20,.22);position:relative;overflow:hidden;}
.hero__rule::after{content:"";position:absolute;inset:0;background:var(--gilt);transform:translateY(-100%);
  animation:drop 2.8s var(--ease) 1.2s infinite;}
@keyframes drop{0%{transform:translateY(-100%);}55%{transform:translateY(0);}100%{transform:translateY(100%);}}

/* ------------------------------------------------------------- approach */
.approach{min-height:100svh;display:flex;flex-direction:column;overflow:hidden;padding-top:clamp(104px,16vh,200px);}
.approach__copy{position:relative;z-index:2;width:min(48ch,100%);margin-inline:auto;padding-bottom:clamp(34px,6vh,86px);}
.approach__plate{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;}
.approach__plate img{width:clamp(300px,38vw,600px);margin-bottom:clamp(-140px,-14vh,-60px);
  transform:translate3d(0,calc(34px - var(--p) * 96px),0);will-change:transform;}
@media (max-width:860px){.approach__plate img{width:min(78vw,420px);}}

/* ----------------------------------------------------------- proportion */
.proportion{background:var(--blush);overflow:hidden;min-height:100svh;display:flex;align-items:center;}
.proportion__figure{position:absolute;z-index:0;left:clamp(-26vw,-14vw,-8vw);top:53%;width:min(112vh,96vw);
  transform:translate3d(0,-50%,0) rotate(calc((var(--p) - .5) * 3.4deg));transform-origin:69% 61%;will-change:transform;}
.proportion__figure img{width:100%;}
.proportion__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.proportion__rings text{font-family:var(--display);font-size:47px;letter-spacing:.055em;
  fill:rgba(36,29,20,.62);text-anchor:middle;}
.ring-a{transform-box:view-box;transform-origin:1380px 908px;transform:rotate(calc(var(--p) * 20deg));}
.ring-b{transform-box:view-box;transform-origin:1380px 908px;transform:rotate(calc(var(--p) * -15deg));}
.proportion__line{position:absolute;z-index:2;left:var(--gutter);top:27%;
  font-family:var(--display);font-size:clamp(24px,2.6vw,44px);line-height:1.18;letter-spacing:-.014em;
  max-width:min(30ch,50vw);margin:0;}
.proportion__line::before{content:"";position:absolute;inset:-34% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(224,200,180,.94) 0%,rgba(224,200,180,.8) 46%,rgba(224,200,180,.42) 74%,rgba(224,200,180,0) 100%);}
.proportion__source{position:absolute;z-index:2;right:var(--gutter);text-align:right;bottom:clamp(30px,5vh,58px);
  font-family:var(--display);font-style:italic;font-size:clamp(12.5px,.88vw,14.5px);line-height:1.6;
  color:var(--ink-55);max-width:44ch;margin:0;}
@media (max-width:1000px){
  .proportion{display:block;padding-block:0 clamp(96px,14vh,150px);}
  .proportion__figure{position:relative;left:auto;top:auto;transform:none;width:150%;margin:0 0 clamp(30px,5vh,58px) -40%;}
  .proportion__line{position:relative;left:auto;top:auto;max-width:none;margin-inline:var(--gutter);}
  .proportion__line::before{display:none;}
  .proportion__source{position:relative;right:auto;text-align:left;bottom:auto;margin:clamp(24px,4vh,40px) var(--gutter) 0;}
}

/* --------------------------------------------------------------- orders */
.orders{padding-block:clamp(110px,17vh,210px) clamp(76px,11vh,140px);}
.orders__head{margin-bottom:clamp(46px,7vh,92px);}
.orders__head h2{max-width:16ch;}
.orders__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,46px);align-items:stretch;}
.order{border:1px solid var(--rule);background:var(--paper);height:100%;
  padding:clamp(28px,2.8vw,48px) clamp(22px,2.2vw,40px) clamp(32px,3.4vw,56px);
  display:flex;flex-direction:column;align-items:center;
  transition:border-color .6s var(--ease),transform .8s var(--ease);}
.order:hover{border-color:rgba(107,81,56,.62);transform:translateY(-4px);}
.order--lead{margin-top:clamp(-34px,-4.4vw,-72px);padding-block:clamp(36px,3.8vw,66px) clamp(40px,4.4vw,74px);}
.order__num{font-family:var(--display);font-size:clamp(38px,4.1vw,70px);line-height:.9;margin:0 0 clamp(20px,2.6vw,40px);}
.order--lead .order__num{font-size:clamp(46px,5.3vw,92px);}
.order__fig{min-height:clamp(86px,8.8vw,146px);display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:clamp(24px,3vw,46px);width:100%;}
.order--lead .order__fig{min-height:clamp(102px,10.6vw,174px);}
.order__fig img{height:auto;}
.fig-doric{width:46%;}
.fig-ionic{width:74%;}
.fig-corinth{width:41%;}
.order__body{font-size:clamp(15.5px,.95vw,17.5px);line-height:1.64;margin:0;align-self:stretch;
  padding-inline:clamp(0px,1vw,18px);}
.order--lead .order__body{font-size:clamp(16.5px,1.08vw,19.5px);}
@media (max-width:860px){
  .orders__grid{grid-template-columns:1fr;gap:clamp(16px,3vw,26px);}
  .order--lead{margin-top:0;}
  .order__fig,.order--lead .order__fig{min-height:auto;}
  .fig-doric{width:190px;}.fig-ionic{width:236px;}.fig-corinth{width:150px;}
}

/* ---------------------------------------------------------- foundations */
.foundations{height:290vh;}
.foundations__stage{position:sticky;top:0;height:100svh;overflow:hidden;}
.foundations__ground{position:absolute;left:0;right:0;bottom:0;background:var(--brown);
  height:calc(8vh + var(--p) * 152vh);will-change:height;}
.foundations__copy{position:relative;z-index:3;padding-top:clamp(120px,19vh,220px);
  opacity:clamp(0,calc((.34 - var(--p)) * 5),1);transform:translate3d(0,calc(var(--p) * -60px),0);}
.foundations__copy p{max-width:40ch;margin-top:clamp(26px,3.4vh,44px);
  font-size:clamp(17px,1.15vw,20px);line-height:1.6;}
.foundations__objects{position:absolute;z-index:2;left:50%;bottom:8vh;width:min(1080px,88vw);
  transform:translate3d(-50%,calc(var(--p) * -152vh),0);will-change:transform;
  opacity:clamp(0,calc((.44 - var(--p)) * 5),1);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,4vw,72px);}
.fo-1{width:clamp(104px,14vw,244px);}
.fo-2{width:clamp(128px,17.5vw,302px);}
.fo-3{width:clamp(96px,13vw,226px);}
.foundations__close{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter) clamp(20px,5vh,64px);
  opacity:clamp(0,calc((var(--p) - .5) * 5),1);pointer-events:none;}
.foundations__close img{width:clamp(172px,23vw,410px);margin-bottom:clamp(26px,4vh,54px);
  transform:translate3d(0,calc((1 - var(--p)) * 40px),0);}
.foundations__close p{max-width:29ch;font-family:var(--display);color:#FFFBF3;
  font-size:clamp(21px,2.2vw,38px);line-height:1.22;letter-spacing:-.012em;margin:0;}

/* -------------------------------------------------------------- gateway */
.gateway{height:280vh;}
.gateway__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bone);}
.gateway__plate{position:absolute;inset:0;}
.gateway__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 5%;
  transform:scale(calc(1 + var(--p) * .16));transform-origin:50% 84%;will-change:transform;}
.gateway__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,16,.6) 0%,rgba(31,24,16,.44) 18%,rgba(31,24,16,.3) 28%,rgba(31,24,16,.1) 36%,rgba(31,24,16,0) 44%);}
.gateway__head{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:clamp(148px,21vh,254px);
  color:#FFFBF3;max-width:min(34ch,90%);font-size:clamp(27px,3.2vw,54px);line-height:1.12;
  transform:translate3d(0,calc(var(--p) * -34px),0);opacity:clamp(0,calc(1.2 - var(--p) * 1.5),1);}
.gateway__void{position:absolute;z-index:3;left:50%;top:calc(63% + var(--p) * 10%);transform:translateX(-50%);
  width:min(46ch,58vw);opacity:clamp(0,calc((var(--p) - .18) * 2.8),1);}
.gateway__void::before{content:"";position:absolute;inset:-30% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(253,248,241,.96) 0%,rgba(253,248,241,.86) 46%,rgba(253,248,241,.45) 74%,rgba(253,248,241,0) 100%);}
.gateway__cta{display:inline-block;margin-top:clamp(22px,3vh,38px);font-family:var(--display);
  font-size:clamp(19px,1.6vw,29px);text-decoration:none;color:var(--gilt);
  border-bottom:1px solid rgba(107,81,56,.45);padding-bottom:4px;transition:border-color .4s var(--ease);}
.gateway__cta:hover{border-color:var(--gilt);}
@media (max-width:860px){.gateway__void{width:min(38ch,84vw);top:calc(60% + var(--p) * 12%);}}

/* --------------------------------------------------------------- footer */
.foot{background:var(--umber);color:#FFFBF3;padding-block:clamp(76px,11vh,146px) clamp(34px,5vh,58px);}
.foot__mark{margin:0 0 clamp(42px,6.5vh,88px);}
.foot__mark img{width:clamp(260px,42vw,780px);}
.foot__grid{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,90px);justify-content:space-between;align-items:flex-start;
  padding-bottom:clamp(40px,6vh,76px);border-bottom:1px solid rgba(253,245,235,.16);}
.foot__mail{font-family:var(--display);font-size:clamp(21px,2vw,34px);text-decoration:none;
  border-bottom:1px solid rgba(253,245,235,.3);padding-bottom:5px;transition:border-color .4s var(--ease);}
.foot__mail:hover{border-color:rgba(253,245,235,.85);}
.foot__nav{display:flex;flex-direction:column;gap:10px;}
.foot__nav a{font-size:clamp(12px,.82vw,13.5px);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  color:rgba(253,245,235,.74);transition:color .35s var(--ease);}
.foot__nav a:hover{color:#FFFBF3;}
.foot__base{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;padding-top:clamp(22px,3vh,34px);
  font-size:clamp(11.5px,.78vw,13px);letter-spacing:.2em;text-transform:uppercase;color:rgba(253,245,235,.56);}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .r,.r-line{opacity:1;transform:none;clip-path:none;}
  .hero__plate img,.gateway__plate img,.approach__plate img{transform:none;}
  .proportion__figure{transform:translate3d(0,-50%,0);}
  .ring-a,.ring-b{transform:none;}
  .foundations,.gateway{height:auto;}
  .gateway__stage{position:relative;height:auto;min-height:100svh;}
  .foundations__stage{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;}
  .foundations__ground{display:none;}
  .foundations__copy{order:1;opacity:1;transform:none;padding-bottom:clamp(40px,6vh,80px);}
  .foundations__objects{order:2;position:relative;left:auto;bottom:auto;transform:none;opacity:1;
    margin:0 auto clamp(56px,8vh,110px);}
  .foundations__close{order:3;position:relative;inset:auto;opacity:1;background:var(--brown);
    padding-block:clamp(72px,11vh,132px);}
  .gateway__head,.gateway__void{opacity:1;transform:none;}
}
