/* ======================================================================
   September. — architecture   ·   faithful reconstruction
   Palette + type tokens derive directly from the brief.
   ====================================================================== */

:root{
  --cream:      #F7F1E6;
  --cream-2:    #FAF4E9;
  --wine:       #8A0E10;
  --wine-2:     #9B1B1E;
  --coral:      #F0654F;
  --ink:        #1A1412;
  --red-bg:     #8E0E10;
  --black:      #0C0C0C;
  --muted-wine: rgba(138,14,16,.30);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, sans-serif;

  --ease-editorial: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(1.15rem, 5vw, 4.5rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--cream);
  color:var(--wine);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
sup{ font-size:.42em; vertical-align:super; font-family:var(--sans); font-weight:600; }
.dot{ color:var(--wine); }

::selection{ background:var(--wine); color:var(--cream); }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ---------- shared type helpers ---------- */
.display{
  font-family:var(--serif);
  font-weight:340;
  line-height:.92;
  letter-spacing:-.015em;
  font-size:clamp(3rem, 11vw, 10.5rem);
}
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.02em;
  text-transform:lowercase;
  color:var(--wine);
}
.eyebrow--center{ text-align:center; }

/* ======================================================================
   PRELOADER
   ====================================================================== */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--cream);
  display:grid; place-items:center;
  gap:0;
}
.preloader__mark{
  font-family:var(--serif); font-weight:330;
  color:var(--wine);
  font-size:clamp(2.6rem, 9vw, 7rem);
  letter-spacing:-.02em;
  will-change:transform,opacity;
}
.preloader__count{
  position:absolute; bottom:8vh; left:0; right:0;
  text-align:center;
  font-weight:600; font-size:.85rem; letter-spacing:.15em;
  color:var(--wine);
}
body.is-loaded .preloader{ pointer-events:none; }

/* ======================================================================
   CUSTOM CURSOR
   ====================================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:900;
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%;
  background:var(--wine);
  display:grid; place-items:center;
  pointer-events:none;
  transform:scale(0);
  will-change:transform;
  mix-blend-mode:normal;
}
.cursor__plus{ color:var(--cream); font-size:1.4rem; font-weight:300; line-height:1; }
.cursor.is-active{ transform:scale(1); }
@media (hover:none){ .cursor{ display:none; } }

/* ======================================================================
   SCROLL PROGRESS
   ====================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:800;
  height:3px; width:100%;
  background:var(--wine);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* ======================================================================
   HEADER
   ====================================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.7rem) var(--gutter);
  color:var(--wine);
  transition:color .45s ease;
  mix-blend-mode:normal;
}
.header.is-inverted{ color:var(--cream); }
.header.is-inverted .brand .dot{ color:var(--cream); }

.brand{ line-height:1; }
.brand__mark{ display:block; font-family:var(--serif); font-weight:340; font-size:1.6rem; letter-spacing:-.02em; }
.brand__mark .dot{ color:currentColor; }
.brand__sub{ display:block; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; font-weight:600; margin-top:.25em; padding-left:.15em; }

.nav{ display:flex; align-items:center; gap:1.7rem; padding-top:.4rem; }
.nav__link{ position:relative; font-size:.92rem; font-weight:500; }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--ease-editorial);
}
.nav__link:hover::after,.nav__link.is-current::after{ transform:scaleX(1); }
.nav__lang{ display:flex; gap:.28em; font-size:.85rem; font-weight:600; margin-left:.4rem; }
.nav__lang .is-active{ text-decoration:underline; text-underline-offset:3px; }
.nav__lang-sep{ opacity:.4; }
.nav__lang span:not(.is-active):not(.nav__lang-sep){ opacity:.5; }

.burger{ display:none; flex-direction:column; gap:6px; padding:6px 0; width:30px; }
.burger span{ height:2px; width:100%; background:currentColor; transition:transform .35s ease,opacity .3s ease; }

@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:flex; }
}

/* ---------- mobile menu ---------- */
.menu{
  position:fixed; inset:0; z-index:590;
  background:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-editorial);
  pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__link{ font-family:var(--serif); font-weight:330; font-size:clamp(2.4rem,11vw,4rem); color:var(--wine); line-height:1.05; }
.menu__foot{ display:flex; gap:1rem; margin-top:2.5rem; font-weight:600; letter-spacing:.1em; }
body.menu-open .burger span:first-child{ transform:translateY(4px) rotate(45deg); }
body.menu-open .burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ======================================================================
   SECTION 1 — HERO
   ====================================================================== */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  display:grid; place-items:center;
  overflow:hidden;
}
.hero__stage{ position:relative; width:100%; display:grid; place-items:center; }

.hero__mark{
  position:relative; z-index:2;
  display:flex; align-items:baseline; justify-content:center;
  font-family:var(--serif); font-weight:330;
  font-size:clamp(3.4rem, 20vw, 18rem);
  line-height:1; letter-spacing:-.03em;
  color:var(--wine);
  white-space:nowrap;
}
.hero__seg{ display:inline-block; will-change:transform; }
.hero__center{ position:relative; display:inline-block; }

/* central letters filled with cycling photography */
.hero__seg--c{
  color:transparent;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center 38%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:opacity .9s ease;
}
/* a second layer crossfades to the next photo */
.hero__center::after{
  content:"tem";
  position:absolute; inset:0;
  color:transparent;
  background-image:var(--hero-img-next);
  background-size:cover; background-position:center 38%;
  -webkit-background-clip:text; background-clip:text;
  opacity:var(--hero-fade,0);
  transition:opacity .9s ease;
  pointer-events:none;
}

/* rides in the wordmark's baseline flex row → sits exactly on the baseline */
.hero__tag{
  align-self:baseline;
  margin-left:.4em;
  font-weight:800; font-size:clamp(.8rem,1.4vw,1.15rem);
  color:var(--coral); letter-spacing:.01em;
}
.hero__cue{
  position:absolute; left:50%; bottom:5vh; transform:translateX(-50%);
  z-index:3;
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--wine);
}

/* scatter cards */
.hero__scatter{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__card{
  position:absolute; top:50%; left:50%;
  width:clamp(120px,15vw,220px); aspect-ratio:2/3;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:2px; overflow:hidden;
  opacity:0; will-change:transform,opacity;
  box-shadow:0 30px 60px -30px rgba(26,20,18,.5);
}
.hero__card img{ width:100%; height:100%; object-fit:cover; }

/* mobile: drop the label onto its own line, centred below the wordmark */
@media (max-width:768px){
  .hero__tag{
    position:absolute; left:50%; top:100%;
    transform:translateX(-50%);
    margin:.55em 0 0;
  }
}

/* ======================================================================
   SECTION 2 — ABOUT
   ====================================================================== */
.about{
  padding:clamp(7rem,16vh,14rem) var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:2.4rem;
}
.about__lead{
  max-width:18ch;
  font-family:var(--serif); font-weight:340;
  font-size:clamp(1.9rem,4.6vw,4.1rem);
  line-height:1.16; letter-spacing:-.01em;
  text-align:center;
  color:var(--muted-wine);
}
.about__lead strong{ font-weight:560; }
.about__lead .w{ color:var(--muted-wine); transition:color .1s linear; }
.about__lead .w.on{ color:var(--wine); }

/* ======================================================================
   SECTION 3 — CONCEPTS (inverted red)
   ====================================================================== */
.concepts{ position:relative; color:var(--cream); }
.concepts__pin{
  position:relative; height:100vh; min-height:600px;
  background:var(--red-bg);
  overflow:hidden;
  clip-path:circle(150% at 50% 88%);   /* JS blooms this in from circle(0%) as you arrive */
}
.concepts__viewport{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.concepts__track{ display:flex; height:100%; width:max-content; will-change:transform; }
.chapter{
  flex:0 0 100vw; width:100vw; height:100%;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
  padding:clamp(5rem,11vh,7rem) var(--gutter) clamp(4rem,9vh,6rem);
}
.chapter__media{ height:min(64vh,560px); overflow:hidden; }
.chapter__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.chapter__body{ display:flex; flex-direction:column; gap:1.7rem; }
.chapter__kicker{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); }
.chapter__title{
  font-family:var(--serif); font-weight:320;
  font-size:clamp(2.6rem,7vw,6rem); line-height:.98; letter-spacing:-.02em;
}
.chapter__title b{ display:block; font-family:var(--sans); font-weight:800; letter-spacing:-.01em; }
.chapter__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.5rem); max-width:640px; }
.chapter__cols p{ font-size:.9rem; line-height:1.6; color:rgba(247,241,230,.82); }

.concepts__strip{
  position:absolute; right:var(--gutter); bottom:clamp(2rem,5vh,3.4rem);
  display:flex; gap:.6rem; z-index:4;
}
.concepts__thumb{
  width:54px; height:40px; overflow:hidden; border-radius:1px;
  outline:1.5px solid transparent; outline-offset:2px;
  opacity:.55; transition:opacity .35s ease,outline-color .35s ease;
  cursor:pointer;
}
.concepts__thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.concepts__thumb.is-active{ opacity:1; outline-color:var(--coral); }
.concepts__thumb.is-active img{ filter:grayscale(0) saturate(1.1); }

.concepts__index{
  position:absolute; left:var(--gutter); bottom:clamp(2rem,5vh,3.4rem); z-index:4;
  font-family:var(--serif); font-size:1rem; letter-spacing:.1em;
  color:rgba(247,241,230,.7);
}
.concepts__index b{ color:var(--cream); font-weight:500; }

@media (max-width:820px){
  .chapter{ grid-template-columns:1fr; align-content:center; gap:1.6rem; }
  .chapter__media{ height:34vh; order:-1; }
  .chapter__cols{ grid-template-columns:1fr; gap:1rem; }
  .concepts__strip{ display:none; }
}

/* ======================================================================
   SECTION 4 — PROJECTS
   ====================================================================== */
.projects{ padding:clamp(6rem,12vh,11rem) var(--gutter) clamp(4rem,8vh,7rem); position:relative; }
.projects__head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem);
  align-items:end; margin-bottom:clamp(3rem,7vh,5.5rem);
}
.projects__title .eyebrow{ margin-bottom:.6rem; }
.projects__intro{ display:flex; flex-direction:column; gap:1.6rem; padding-bottom:.6rem; }
.filters{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; }
.filters button{ font-weight:500; font-size:.95rem; color:var(--muted-wine); position:relative; transition:color .3s ease; }
.filters button.is-active,.filters button:hover{ color:var(--wine); }
.filters button.is-active{ font-weight:700; }
.projects__blurb{ font-size:.92rem; line-height:1.6; color:var(--ink); max-width:46ch; }

/* index rows */
.index{ border-top:1px solid rgba(138,14,16,.22); }
.row{
  display:grid; grid-template-columns:1fr auto; gap:1rem;
  align-items:baseline;
  padding:clamp(.85rem,1.8vh,1.35rem) 0;
  border-bottom:1px solid rgba(138,14,16,.16);
  transition:opacity .3s ease;
}
.row__main{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; }
.row__name{ font-family:var(--serif); font-weight:360; font-size:clamp(1.35rem,2.5vw,2rem); letter-spacing:-.01em; position:relative; }
.row__name::after{
  content:""; position:absolute; left:0; bottom:2px; height:1.5px; width:100%;
  background:var(--wine); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-editorial);
}
.row__year{ font-size:.85rem; color:var(--muted-wine); font-weight:500; }
.row__loc{ font-size:.9rem; color:var(--wine); text-align:right; }
.row:hover .row__name::after{ transform:scaleX(1); }
.row.is-dim{ opacity:.28; }
.row.is-hidden{ display:none; }

/* floating hover preview */
.index__preview{
  position:fixed; top:0; left:0; z-index:500;
  width:230px; height:290px;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0; pointer-events:none;
  border-radius:2px; overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(26,20,18,.55);
  will-change:transform,opacity;
}
.index__preview img{ width:100%; height:100%; object-fit:cover; }
@media (hover:none){ .index__preview{ display:none; } }

/* portfolio CTA */
.portfolio{
  margin-top:clamp(3rem,7vh,5.5rem);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem;
}
.portfolio__lead{ font-size:.95rem; color:var(--ink); max-width:34ch; }
.portfolio__cta{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--sans); font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.1rem,2.3vw,1.7rem); color:var(--wine);
}
.portfolio__cta sup{ font-weight:600; }
.portfolio__cta span:first-child{ position:relative; }
.portfolio__cta span:first-child::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--wine); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-editorial);
}
.portfolio__cta:hover span:first-child::after{ transform:scaleX(1); }
.portfolio__arrow{ display:inline-block; transition:transform .4s var(--ease-editorial); }
.portfolio__cta:hover .portfolio__arrow{ transform:translate(4px,4px); }

@media (max-width:760px){
  .projects__head{ grid-template-columns:1fr; gap:1.8rem; }
  .row{ grid-template-columns:1fr; gap:.35rem; }
  .row__loc{ text-align:left; font-size:.82rem; color:var(--muted-wine); }
}

/* ======================================================================
   SECTION 5 — TEAM
   ====================================================================== */
.team{ padding:clamp(6rem,12vh,10rem) 0 clamp(4rem,8vh,7rem); overflow:hidden; }
.team__head{
  padding:0 var(--gutter);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,5rem);
  align-items:end; margin-bottom:clamp(2.5rem,6vh,4rem);
}
.team__title{
  display:flex; align-items:baseline; gap:.12em;
  font-size:clamp(3rem,11vw,9rem); line-height:.9; letter-spacing:-.03em;
}
.team__title .sans{ font-family:var(--sans); font-weight:800; }
.team__title .serif{ font-family:var(--serif); font-weight:320; font-style:italic; }
.team__intro{ font-size:.95rem; line-height:1.6; color:var(--ink); max-width:42ch; padding-bottom:.5rem; }

.team__strip{ padding-left:var(--gutter); }
.team__track{ display:flex; gap:1rem; width:max-content; will-change:transform; }
.portrait{
  position:relative;
  width:clamp(180px,20vw,270px); aspect-ratio:3/4; flex:0 0 auto;
  overflow:hidden;
}
.portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); transition:filter .5s ease,transform .6s var(--ease-editorial); }
.portrait__badge{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .4s ease;
}
.portrait__badge span{ width:44px; height:44px; border-radius:50%; background:var(--wine); color:var(--cream); display:grid; place-items:center; font-size:1.2rem; }
.portrait:hover img{ filter:grayscale(0); transform:scale(1.04); }
.portrait:hover .portrait__badge{ opacity:1; }
.portrait__name{ position:absolute; left:0; bottom:0; right:0; padding:.7rem .8rem; color:var(--cream); font-size:.8rem; font-weight:600; background:linear-gradient(transparent,rgba(12,12,12,.6)); }

.team__labels{
  padding:clamp(2.5rem,6vh,4rem) var(--gutter) 0;
  display:flex; gap:clamp(2rem,8vw,7rem); flex-wrap:wrap;
}
.team__group p:last-child{ font-size:.9rem; color:var(--ink); margin-top:.5rem; max-width:36ch; line-height:1.6; }

@media (max-width:760px){
  .team__head{ grid-template-columns:1fr; gap:1.4rem; }
}

/* ======================================================================
   SECTION 6 — CONTACT / FOOTER
   ====================================================================== */
.contact{ padding:clamp(5rem,10vh,8rem) var(--gutter) 2rem; }
.contact__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.socials{ display:flex; gap:.7rem; margin-top:1rem; }
.social{
  width:42px; height:42px; border-radius:50%; background:var(--wine); color:var(--cream);
  display:grid; place-items:center; font-size:.8rem; font-weight:600;
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.social:hover{ background:var(--coral); transform:translateY(-3px); }
.contact__write{ text-align:right; }
.contact__email{
  display:inline-block; margin-top:.8rem;
  font-family:var(--serif); font-weight:330; font-size:clamp(1.5rem,4vw,2.8rem);
  letter-spacing:-.01em; position:relative;
}
.contact__email::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:100%;
  background:var(--wine); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-editorial);
}
.contact__email:hover::after{ transform:scaleX(1); }

.contact__addresses{
  display:flex; gap:clamp(2rem,8vw,7rem); flex-wrap:wrap;
  margin:clamp(3rem,7vh,5rem) 0 clamp(2rem,5vh,3rem);
}
.addr{ font-size:.9rem; line-height:1.65; color:var(--ink); max-width:34ch; }
.addr__city{ font-family:var(--serif); font-size:1.3rem; color:var(--wine); margin-bottom:.4rem; }
.addr__tel{ display:inline-block; margin-top:.4rem; color:var(--wine); text-decoration:underline; text-underline-offset:3px; }

.talk{
  display:flex; align-items:baseline; justify-content:center; gap:.14em;
  font-size:clamp(4rem,24vw,22rem); line-height:.85; color:var(--wine);
  letter-spacing:-.04em;
  margin:clamp(1rem,3vh,2.5rem) 0 clamp(3rem,7vh,5rem);
}
.talk__sans{ font-family:var(--sans); font-weight:800; }
.talk__serif{ font-family:var(--serif); font-weight:300; font-style:italic; }

.contact__bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.6rem; border-top:1px solid rgba(138,14,16,.2);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.contact__legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.contact__legal a:hover,.contact__legal button:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .cursor{ display:none; }
  .hero__card{ display:none; }
  .about__lead{ color:var(--wine); }
  .about__lead .w{ color:var(--wine); }
  /* concepts: no pin/slide — stack the chapters vertically inside the red panel */
  .concepts__pin{ height:auto; clip-path:none; }
  .concepts__viewport{ position:static; }
  .concepts__track{ flex-direction:column; width:100%; }
  .chapter{ flex:none; width:100%; height:auto; min-height:78vh; }
}