/* ============================================================
   Art.n Architects — artnouveau.in
   Quiet-luxury editorial design: warm paper, Cormorant Garamond
   statements, Archivo body, hairline rules, generous whitespace.
   One stylesheet for every page.
   ============================================================ */

/* ---------- fonts (self-hosted; faces generated from Google Fonts subsets) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/cormorant-italic-300-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:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-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}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-normal-300-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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-normal-500-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:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/archivo-normal-300-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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-normal-500-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 / base ---------- */
:root{
  --paper:#F4F1EA; --ink:#1C1A16; --mid:#6E695F; --hair:#DAD5C8; --card:#EAE6DC;
  --clay:#7A4A32;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --pad:clamp(20px,4.5vw,72px); --max:1560px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--mid)}
.serif{font-family:var(--serif)}
.u{background:linear-gradient(to right,currentColor,currentColor) no-repeat left bottom / 0 1px;padding-bottom:3px;transition:background-size .5s cubic-bezier(.2,.6,.2,1)}
a:hover .u,a:focus-visible .u{background-size:100% 1px}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:10px 18px;font-size:12px;letter-spacing:.1em}
.skip:focus{left:0}
.hairline{border:none;border-top:1px solid var(--hair)}

/* page-transition veil */
.veil-page{position:fixed;inset:0;z-index:80;background:var(--paper);pointer-events:none;
  transform:scaleY(0);transform-origin:top}
.veil-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}

/* ---------- header ---------- */
header.site{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(244,241,234,.92);border-bottom-color:var(--hair);backdrop-filter:blur(10px)}
.nav{max-width:var(--max);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between}
.wordmark{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.04em}
.wordmark span{color:var(--clay)}
.nav ul{display:flex;gap:34px;list-style:none}
.nav ul a{font-size:12.5px;letter-spacing:.06em;color:var(--mid);text-transform:lowercase}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink)}
.nav ul a[aria-current="page"]{border-bottom:1px solid var(--ink);padding-bottom:3px}
.menu-label{display:none;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);font-size:12.5px;letter-spacing:.08em;text-transform:lowercase;padding:14px 16px;margin:-14px -16px}
.menu-overlay{position:fixed;inset:0;z-index:60;background:var(--paper);display:none;flex-direction:column;justify-content:center;padding:var(--pad)}
.menu-overlay.open{display:flex}
.menu-overlay a{font-family:var(--serif);font-size:clamp(32px,9vw,46px);font-weight:400;line-height:2;border-bottom:1px solid var(--hair);text-transform:lowercase}
.menu-close{position:absolute;top:22px;right:var(--pad);background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);font-size:12.5px;letter-spacing:.08em;text-transform:lowercase;padding:14px 16px;margin:-14px -16px}

/* ---------- home: statement hero ---------- */
.hero-quiet{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding-top:110px}
.hero-quiet h1{font-family:var(--serif);font-weight:300;font-size:clamp(42px,7vw,104px);line-height:1.08;letter-spacing:.005em;max-width:14ch}
.hero-quiet h1 em{font-style:italic;font-weight:300}
.hero-quiet h1 .line{display:block;overflow:hidden}
.hero-quiet h1 .line>span{display:inline-block}
.hero-quiet .meta{margin-top:40px;display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.hero-scroll{margin-top:auto;padding-bottom:30px}

/* full-bleed image panel */
.panel-full{position:relative;height:96svh;min-height:520px;overflow:hidden;background:var(--card)}
.panel-full .photo{position:absolute;inset:-9% 0}
.panel-full img{width:100%;height:100%;object-fit:cover}
.panel-full .cap{position:absolute;left:var(--pad);bottom:26px;z-index:2;color:#fff;mix-blend-mode:difference;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* statement blocks */
.statement{padding-top:clamp(100px,14vw,220px);padding-bottom:clamp(100px,14vw,220px)}
.statement .eyebrow{display:block;margin-bottom:34px}
.statement p.big{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,52px);line-height:1.3;max-width:26ch}
.statement p.big em{font-style:italic}
.statement .sub{margin-top:36px;max-width:52ch;color:var(--mid)}
.statement .sub p{margin-bottom:14px}

/* ---------- editorial project flow (home + listings) ---------- */
.flow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3vw,56px)}
.piece{display:block;margin-bottom:clamp(90px,11vw,180px)}
.piece figure{margin:0}
.piece .ph{overflow:hidden;background:var(--card)}
.piece .ph img{width:100%;height:112%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.piece:hover .ph img{transform:scale(1.025)}
.piece figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:18px}
.piece .name{font-family:var(--serif);font-size:clamp(19px,1.9vw,26px);font-weight:400}
.piece .where{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
/* repeating 6-slot editorial cycle */
.flow .piece:nth-child(6n+1){grid-column:1/9}
.flow .piece:nth-child(6n+1) .ph{aspect-ratio:3/2}
.flow .piece:nth-child(6n+2){grid-column:9/13;padding-top:clamp(90px,12vw,220px)}
.flow .piece:nth-child(6n+2) .ph{aspect-ratio:3/4}
.flow .piece:nth-child(6n+3){grid-column:2/7;padding-top:clamp(20px,3vw,60px)}
.flow .piece:nth-child(6n+3) .ph{aspect-ratio:4/5}
.flow .piece:nth-child(6n+4){grid-column:8/13}
.flow .piece:nth-child(6n+4) .ph{aspect-ratio:4/3}
.flow .piece:nth-child(6n+5){grid-column:3/11}
.flow .piece:nth-child(6n+5) .ph{aspect-ratio:16/9}
.flow .piece:nth-child(6n+6){grid-column:1/6}
.flow .piece:nth-child(6n+6) .ph{aspect-ratio:4/5}
.view-all{padding-bottom:clamp(90px,11vw,170px)}
.view-all a{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);font-style:italic}

/* ---------- page head (interior pages) ---------- */
.page-head{padding-top:clamp(150px,20vh,240px);padding-bottom:clamp(50px,7vw,110px)}
.page-head .eyebrow{display:block;margin-bottom:26px}
.page-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,88px);line-height:1.1;max-width:16ch}
.page-head h1 em{font-style:italic}
.page-head .lede{margin-top:30px;max-width:54ch;color:var(--mid)}
.filters{display:flex;gap:26px;flex-wrap:wrap;margin-top:40px;border-top:1px solid var(--hair);padding-top:22px}
.filters a{font-size:12.5px;letter-spacing:.06em;text-transform:lowercase;color:var(--mid);padding-bottom:3px}
.filters a:hover{color:var(--ink)}
.filters a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)}

/* ---------- project detail ---------- */
.proj-hero{padding-top:clamp(130px,16vh,200px)}
.proj-hero .ph{overflow:hidden;background:var(--card);aspect-ratio:16/9;max-height:82svh}
.proj-hero .ph img{width:100%;height:100%;object-fit:cover}
.proj-title{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.proj-title h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,72px);line-height:1.12;max-width:18ch}
.proj-title .eyebrow{display:block;margin-bottom:20px}
.proj-cols{display:grid;grid-template-columns:4fr 7fr;gap:clamp(36px,6vw,110px);padding-bottom:clamp(70px,9vw,130px)}
.spec{list-style:none;border-top:1px solid var(--hair)}
.spec li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--hair);padding:15px 2px}
.spec .k{font-size:11px;letter-spacing:.2em;color:var(--mid);text-transform:uppercase;padding-top:4px}
.spec .v{font-size:14.5px;text-align:right}
.proj-blurb p{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.2vw,30px);line-height:1.5;max-width:32ch}
.gallery{columns:2;column-gap:clamp(20px,2.6vw,44px)}
.gallery a{display:block;break-inside:avoid;margin-bottom:clamp(20px,2.6vw,44px);background:var(--card)}
.gallery img{width:100%;transition:opacity .5s}
.gallery a:hover img{opacity:.94}
.proj-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--hair);padding-top:clamp(30px,4vw,48px);margin-top:clamp(60px,7vw,100px);padding-bottom:clamp(80px,9vw,130px)}
.proj-nav a{max-width:46%}
.proj-nav .eyebrow{display:block;margin-bottom:10px}
.proj-nav .name{font-family:var(--serif);font-size:clamp(18px,2vw,26px)}
.proj-nav .next{text-align:right;margin-left:auto}

/* ---------- principal / duo feature ---------- */
.people{padding-bottom:clamp(90px,12vw,180px)}
.person{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,96px);align-items:start;border-top:1px solid var(--hair);padding-top:clamp(44px,6vw,80px);margin-bottom:clamp(60px,8vw,120px)}
.person .ph{overflow:hidden;background:var(--card);aspect-ratio:4/5;max-width:420px}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);margin-bottom:6px}
.person .role{display:block;margin-bottom:26px}
.person p{color:var(--mid);margin-bottom:16px;max-width:56ch}

/* team grid */
.team{padding-bottom:clamp(90px,12vw,170px)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(18px,2.4vw,36px)}
.team-grid figure{margin:0}
.team-grid .ph{overflow:hidden;background:var(--card);aspect-ratio:1/1}
.team-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .5s}
.team-grid figure:hover img{filter:grayscale(0)}
.team-grid figcaption{margin-top:12px}
.team-grid .nm{font-size:13.5px;font-weight:400;display:block}
.team-grid .rl{font-size:10.5px;letter-spacing:.14em;color:var(--mid);text-transform:uppercase}

/* ---------- process page / steps ---------- */
.steps{counter-reset:step;padding-bottom:clamp(80px,10vw,150px)}
.step{display:grid;grid-template-columns:2fr 4fr 6fr;gap:clamp(24px,4vw,72px);border-top:1px solid var(--hair);padding:clamp(34px,5vw,60px) 0}
.step .no{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);color:var(--mid)}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,32px)}
.step p{color:var(--mid);max-width:52ch}

/* ---------- 3D section ---------- */
.threed{padding-bottom:clamp(90px,12vw,180px)}
.threed-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,96px);align-items:center}
model-viewer{width:100%;height:min(58vh,520px);background:var(--card);--poster-color:var(--card)}
.threed h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,36px);margin-bottom:18px}
.threed p{color:var(--mid);max-width:44ch;margin-bottom:16px}
.threed .note{font-size:12.5px;color:var(--mid);border-left:1px solid var(--clay);padding-left:16px}

/* ---------- studio / addresses row ---------- */
.studio-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,96px);align-items:center;padding-bottom:clamp(90px,12vw,180px)}
.studio-row .ph{overflow:hidden;background:var(--card);aspect-ratio:4/3}
.studio-row img{width:100%;height:112%;object-fit:cover}
.studio-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,36px);margin-bottom:18px}
.studio-row p{color:var(--mid);max-width:46ch;margin-bottom:16px}
.studio-row .addr{font-size:13.5px;color:var(--mid);line-height:1.9}

/* story block (studio page) */
.story{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,96px);align-items:start;padding-bottom:clamp(80px,10vw,150px)}
.story .ph{overflow:hidden;background:var(--card);aspect-ratio:4/3}
.story .ph img{width:100%;height:112%;object-fit:cover}
.story h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,38px);margin-bottom:22px;line-height:1.3}
.story p{color:var(--mid);margin-bottom:16px;max-width:56ch}
.story p b{color:var(--ink);font-weight:400}

/* ---------- contact ---------- */
.offices{padding-bottom:clamp(60px,8vw,110px)}
.office{display:grid;grid-template-columns:3fr 5fr 4fr;gap:clamp(20px,3vw,56px);border-top:1px solid var(--hair);padding:clamp(30px,4vw,50px) 0;align-items:baseline}
.office h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,32px)}
.office p{color:var(--mid);font-size:14.5px;line-height:1.9}
.office .links{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.office .links a:hover{color:var(--clay)}
.reach{display:flex;flex-direction:column;padding-bottom:clamp(90px,12vw,170px)}
.reach a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--hair);padding:clamp(24px,3.4vw,40px) 0}
.reach a:last-child{border-bottom:1px solid var(--hair)}
.reach .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
.reach .v{font-family:var(--serif);font-size:clamp(20px,3vw,40px);font-weight:300;text-align:right;word-break:break-word;transition:color .4s}
.reach a:hover .v{color:var(--clay);font-style:italic}

/* ---------- CTA band ---------- */
.cta{padding:clamp(90px,13vw,200px) 0}
.cta .inner{display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.cta h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,72px);line-height:1.15;max-width:18ch}
.cta h2 em{font-style:italic}
.btn{display:inline-block;border:1px solid var(--ink);padding:16px 34px;font-size:12px;letter-spacing:.14em;text-transform:lowercase;transition:background .4s,color .4s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.cta .actions{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hair);padding:clamp(50px,7vw,90px) 0 36px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:baseline;margin-bottom:clamp(44px,6vw,80px)}
.foot-top .wordmark{font-size:clamp(26px,3.4vw,44px)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.4vw,60px)}
.foot-cols .eyebrow{display:block;margin-bottom:14px}
.foot-cols p,.foot-cols a{font-size:13.5px;line-height:2;color:var(--mid)}
.foot-cols a{display:inline-block}
.foot-cols a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(44px,6vw,70px)}
.foot-base p{font-size:11.5px;letter-spacing:.06em;color:var(--mid)}

/* ---------- 404 ---------- */
.lost{min-height:66vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px}
.lost h1{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(70px,15vw,190px);line-height:1}
.lost p{color:var(--mid)}

/* ---------- GLightbox skin ---------- */
.glightbox-clean .gslide-media{box-shadow:none;background:var(--paper)}
.goverlay{background:rgba(28,26,22,.94)}
.glightbox-clean .gnext,.glightbox-clean .gprev,.glightbox-clean .gclose{background:none}

/* ---------- reveals get a resting state only when JS is running ---------- */
html.js .reveal{opacity:0;transform:translateY(26px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}

/* ---------- motion prefs / responsive ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .veil-page{display:none}
  html.js .reveal{opacity:1;transform:none}
}
@media (max-width:1060px){
  .proj-cols{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .person .ph{max-width:340px}
  .step{grid-template-columns:1fr;gap:10px}
  .office{grid-template-columns:1fr;gap:8px}
}
@media (max-width:860px){
  .nav ul{display:none}
  .menu-label{display:block}
  .flow{display:block}
  .flow .piece{padding-top:0!important;margin-bottom:64px}
  .threed-row,.studio-row,.story{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .gallery{columns:1}
  .proj-nav a{max-width:100%}
  .hero-quiet{min-height:86svh}
  .panel-full{height:64svh;min-height:380px}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr}
}