@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Syne:wght@400;500;600;700&display=swap');

:root{
  --ink:#0a0a0a;
  --paper:#f1efe9;
  --paper-2:#e7e2d8;
  --warm:#b3a590;
  --line:rgba(10,10,10,.18);
  --white:#fff;
  --serif-fallback:Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button,input{font:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* concept rail */
.concept-rail{position:fixed;z-index:90;left:0;top:0;width:56px;height:100vh;border-right:1px solid var(--line);background:rgba(241,239,233,.88);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 0}
.concept-rail__label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.concept-rail__dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.concept-rail__cta{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:12px 0;font-weight:500}

.site{margin-left:56px}
.shell{width:min(1480px,calc(100% - 72px));margin:0 auto}

header{position:fixed;z-index:70;left:56px;right:0;top:0;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 36px;border-bottom:1px solid transparent;transition:.35s;background:linear-gradient(to bottom,rgba(241,239,233,.8),rgba(241,239,233,0));backdrop-filter:blur(0)}
header.scrolled{background:rgba(241,239,233,.92);border-bottom-color:var(--line);backdrop-filter:blur(16px)}
.brand{font-family:'Syne',sans-serif;font-weight:600;letter-spacing:-.04em;font-size:20px;display:flex;gap:9px;align-items:baseline}
.brand small{font-family:'DM Sans';font-weight:400;letter-spacing:.12em;font-size:8px;text-transform:uppercase}
.nav-left,.nav-right{display:flex;gap:26px;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav-right{justify-content:flex-end}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--ink);transition:.25s}
.nav a:hover:after{width:100%}
.menu-btn{display:none;background:none;border:0;padding:0;text-transform:uppercase;letter-spacing:.12em;font-size:10px}

.hero{min-height:100vh;position:relative;padding-top:76px;display:grid;grid-template-columns:1.12fr .88fr;border-bottom:1px solid var(--line)}
.hero__left{padding:11vh 4vw 5vh 4.4vw;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 76px)}
.hero__kicker{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.hero__title{font-family:'Syne';font-size:clamp(58px,8.8vw,150px);line-height:.82;letter-spacing:-.075em;font-weight:500;margin:0;text-transform:uppercase}
.hero__title span{display:block}
.hero__title .indent{padding-left:11vw}
.hero__title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink)}
.hero__footer{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.hero__footer p{max-width:420px;font-size:14px;line-height:1.7;margin:0}
.hero__meta{display:flex;justify-content:flex-end;gap:34px;text-align:right;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.hero__right{position:relative;overflow:hidden;background:#d9d3c6}
.hero__right img{transition:transform 1.3s cubic-bezier(.2,.75,.2,1)}
.hero__right:hover img{transform:scale(1.025)}
.hero__index{position:absolute;right:22px;bottom:20px;background:var(--paper);padding:8px 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

.marquee{overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink);color:var(--paper)}
.marquee__track{display:flex;width:max-content;animation:marquee 26s linear infinite;padding:14px 0;font-family:'Syne';font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.marquee__track span{padding-right:60px}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:130px 0;border-bottom:1px solid var(--line)}
.eyebrow{font-size:9px;letter-spacing:.17em;text-transform:uppercase;font-weight:500}
.section-title{font-family:'Syne';font-size:clamp(44px,6.2vw,102px);line-height:.92;letter-spacing:-.06em;font-weight:500;margin:18px 0 0;text-transform:uppercase}
.section-title.outline span{color:transparent;-webkit-text-stroke:1px var(--ink)}

.statement-grid{display:grid;grid-template-columns:1.1fr 1.5fr .7fr;gap:40px}
.statement-copy{font-family:'Syne';font-size:clamp(34px,4.2vw,70px);line-height:1.03;letter-spacing:-.045em;margin:0}
.statement-side{align-self:end;font-size:14px;line-height:1.75;max-width:360px}
.statement-number{font-family:'Syne';font-size:clamp(72px,8vw,150px);letter-spacing:-.08em;line-height:.7;text-align:right;align-self:start}

.projects-section{padding:0;border-bottom:1px solid var(--line)}
.projects-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:100px 0 42px}
.projects-head .section-title{margin:0}
.text-link{font-size:10px;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:6px;white-space:nowrap}
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.project-card{background:var(--paper);position:relative;overflow:hidden;min-height:640px}
.project-card:nth-child(1){grid-column:span 7}
.project-card:nth-child(2){grid-column:span 5}
.project-card:nth-child(3){grid-column:span 5}
.project-card:nth-child(4){grid-column:span 7}
.project-card__media{height:82%;overflow:hidden;position:relative}
.project-card__media img{transition:transform .9s cubic-bezier(.2,.75,.2,1);filter:saturate(.82)}
.project-card:hover .project-card__media img{transform:scale(1.03)}
.project-card__meta{height:18%;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 0}
.project-card__meta h3{font-family:'Syne';font-weight:500;letter-spacing:-.03em;font-size:24px;margin:0}
.project-card__meta p{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 0}
.project-card__num{font-size:10px;letter-spacing:.1em}
.project-card__arrow{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:14px;transition:.3s}
.project-card:hover .project-card__arrow{transform:rotate(45deg)}

.method{background:var(--ink);color:var(--paper);padding:140px 0}
.method-grid{display:grid;grid-template-columns:.75fr 1.4fr .85fr;gap:50px;align-items:start}
.method-title{font-family:'Syne';font-size:clamp(48px,6.8vw,110px);line-height:.86;letter-spacing:-.07em;margin:0;text-transform:uppercase}
.method-title span{color:transparent;-webkit-text-stroke:1px rgba(241,239,233,.75)}
.method-copy{font-size:15px;line-height:1.8;max-width:520px}
.method-list{border-top:1px solid rgba(241,239,233,.25)}
.method-row{display:grid;grid-template-columns:46px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid rgba(241,239,233,.25);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.method-row b{font-weight:500}

.feature-project{display:grid;grid-template-columns:.7fr 1.3fr;min-height:92vh;border-bottom:1px solid var(--line)}
.feature-project__copy{padding:80px 4vw;display:flex;flex-direction:column;justify-content:space-between}
.feature-project__copy h2{font-family:'Syne';font-size:clamp(54px,7vw,118px);line-height:.84;letter-spacing:-.065em;margin:20px 0 0;text-transform:uppercase}
.feature-project__copy h2 span{display:block;padding-left:5vw;color:transparent;-webkit-text-stroke:1px var(--ink)}
.feature-project__copy p{max-width:430px;font-size:14px;line-height:1.75}
.feature-project__media{position:relative;overflow:hidden}
.feature-project__media img{position:absolute;inset:0}
.feature-project__tag{position:absolute;top:28px;right:26px;background:var(--paper);padding:10px 12px;font-size:9px;letter-spacing:.14em;text-transform:uppercase}

.recognition{padding:120px 0}
.recognition-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px}
.recognition-list{border-top:1px solid var(--line)}
.recognition-row{display:grid;grid-template-columns:1.4fr .9fr .2fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
.recognition-row strong{font-family:'Syne';font-size:20px;font-weight:500}
.recognition-row span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}

.studio-band{display:grid;grid-template-columns:1fr 1fr;min-height:78vh;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.studio-band__image{overflow:hidden}
.studio-band__content{padding:90px 5vw;display:flex;flex-direction:column;justify-content:space-between}
.studio-band__content h2{font-family:'Syne';font-size:clamp(48px,5.8vw,92px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:0}
.studio-band__content p{font-size:15px;line-height:1.8;max-width:520px}

.concept-note{padding:110px 0;background:#d8d0c2}
.concept-note__grid{display:grid;grid-template-columns:.7fr 1.3fr .8fr;gap:40px}
.concept-note h2{font-family:'Syne';font-size:clamp(42px,5vw,82px);line-height:.92;letter-spacing:-.055em;margin:0;text-transform:uppercase}
.concept-note p{font-size:14px;line-height:1.75;margin-top:0}
.cta-dark{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:var(--paper);padding:16px 18px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-top:18px}

footer{padding:56px 0 24px;background:var(--paper);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.footer-top{display:grid;grid-template-columns:1fr auto;align-items:end;padding-bottom:50px}
.footer-word{font-family:'Syne';font-size:clamp(66px,12vw,180px);letter-spacing:-.08em;line-height:.75}
.footer-links{display:flex;gap:22px}
.footer-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:20px}

.atelion-project-cta{position:fixed;right:22px;bottom:22px;z-index:95;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:18px;padding:14px 16px 14px 18px;border-radius:999px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.atelion-project-cta i{font-style:normal;width:24px;height:24px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.reveal.in{opacity:1;transform:none}

/* internal pages */
.page-hero{padding:150px 0 70px;border-bottom:1px solid var(--line)}
.page-hero__grid{display:grid;grid-template-columns:.65fr 1.6fr .55fr;gap:40px;align-items:end}
.page-hero h1{font-family:'Syne';font-size:clamp(64px,10vw,170px);letter-spacing:-.08em;line-height:.78;text-transform:uppercase;margin:0}
.page-hero p{font-size:13px;line-height:1.7;max-width:280px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;padding:24px 0 50px}
.filter-row button{border:1px solid var(--line);background:transparent;padding:10px 14px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.filter-row button.active{background:var(--ink);color:var(--paper)}
.projects-listing{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}
.project-tile{background:var(--paper);min-height:650px;padding:18px;display:flex;flex-direction:column;gap:16px}
.project-tile:nth-child(3n){grid-column:span 2;display:grid;grid-template-columns:1.45fr .55fr}
.project-tile__img{flex:1;min-height:520px;overflow:hidden}
.project-tile__body{display:flex;justify-content:space-between;gap:20px}
.project-tile__body h3{font-family:'Syne';font-size:30px;letter-spacing:-.04em;margin:0;text-transform:uppercase}
.project-tile__body p{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin:5px 0 0}

.project-hero{min-height:100vh;display:grid;grid-template-columns:.62fr 1.38fr;padding-top:76px;border-bottom:1px solid var(--line)}
.project-hero__copy{padding:11vh 4vw 6vh;display:flex;flex-direction:column;justify-content:space-between}
.project-hero__copy h1{font-family:'Syne';font-size:clamp(68px,8vw,132px);line-height:.8;letter-spacing:-.07em;text-transform:uppercase;margin:0}
.project-hero__copy p{max-width:420px;font-size:14px;line-height:1.75}
.project-hero__image{position:relative;overflow:hidden}
.project-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.fact{background:var(--paper);padding:28px}
.fact span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.fact strong{font-family:'Syne';font-size:20px;font-weight:500}
.project-story{padding:130px 0}
.project-story__grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px}
.project-story blockquote{font-family:'Syne';font-size:clamp(40px,5vw,78px);line-height:.95;letter-spacing:-.05em;margin:0}
.project-story p{font-size:15px;line-height:1.85;max-width:620px}
.gallery-stack{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gallery-stack figure{margin:0;background:var(--paper);height:78vh;overflow:hidden}
.gallery-stack figure:nth-child(3){grid-column:span 2;height:92vh}

.studio-hero{min-height:100vh;padding-top:76px;display:grid;grid-template-columns:1.25fr .75fr;border-bottom:1px solid var(--line)}
.studio-hero__copy{padding:12vh 4vw 6vh}
.studio-hero h1{font-family:'Syne';font-size:clamp(62px,8.5vw,138px);line-height:.81;letter-spacing:-.075em;text-transform:uppercase;margin:0}
.studio-hero__copy p{font-size:15px;line-height:1.8;max-width:540px;margin-top:50px}
.studio-hero__img{overflow:hidden}
.people{padding:110px 0}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.person{background:var(--paper)}
.person img{height:540px;filter:grayscale(100%)}
.person div{padding:18px}
.person h3{font-family:'Syne';font-size:22px;margin:0}
.person p{font-size:9px;letter-spacing:.12em;text-transform:uppercase}

@media(max-width:1000px){
  .concept-rail{display:none}.site{margin-left:0}header{left:0;padding:0 20px}.shell{width:min(100% - 36px,1480px)}
  .nav-left a,.nav-right a{display:none}.menu-btn{display:block}.brand small{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}.hero__left{min-height:76vh;padding:120px 20px 36px}.hero__right{height:62vh}.hero__footer{grid-template-columns:1fr}.hero__meta{justify-content:flex-start;text-align:left}.hero__title .indent{padding-left:10vw}
  .statement-grid,.method-grid,.concept-note__grid,.page-hero__grid,.project-story__grid,.recognition-grid{grid-template-columns:1fr}.statement-number{text-align:left}
  .project-card:nth-child(n){grid-column:span 12;min-height:560px}.feature-project,.studio-band,.project-hero,.studio-hero{grid-template-columns:1fr}.feature-project__media,.project-hero__image,.studio-hero__img{height:65vh}.project-facts{grid-template-columns:1fr 1fr}.projects-listing{grid-template-columns:1fr}.project-tile:nth-child(3n){grid-column:span 1;display:flex}.gallery-stack{grid-template-columns:1fr}.gallery-stack figure:nth-child(3){grid-column:span 1}.people-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr;gap:30px}.footer-links{flex-wrap:wrap}.footer-bottom{flex-direction:column}.atelion-project-cta{right:12px;bottom:12px}
}
@media(max-width:640px){
  header{height:66px}.hero{padding-top:66px}.hero__left{padding-top:100px}.hero__title{font-size:16.5vw}.hero__kicker{flex-direction:column}.hero__right{height:52vh}.section{padding:90px 0}.projects-head{grid-template-columns:1fr;align-items:start}.project-card{min-height:480px}.project-card__media{height:78%}.method{padding:100px 0}.feature-project__copy{padding:70px 18px}.recognition-row{grid-template-columns:1fr}.recognition-row span:last-child{display:none}.project-facts{grid-template-columns:1fr}.project-hero__copy{padding:100px 18px 48px}.project-tile__img{min-height:420px}.gallery-stack figure{height:60vh}.gallery-stack figure:nth-child(3){height:70vh}.people .shell{width:calc(100% - 24px)}.person img{height:460px}
}