:root{
  --bg: #f4f1e6;
  --ink: rgba(10,10,10,.92);
  --muted: rgba(10,10,10,.55);

  /* 35 / 55 / 10 split */
  --col1: 33vw;
  --col2: 57vw;
  --col3: 10vw;

  /* padding + rhythm */
  --padX: 28px;
  --padY: 20px;

  /* type */
  --brandSize: 16px;
  --navSize: 12px;
  --capSize: 11px;

  /* works */
  --worksTop: 350px;  /* big empty field above first row */
  --gap: 70px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  letter-spacing: .1px;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

/* =========================
   CORE 3-COLUMN SHELL
   ========================= */
.shell{
  display:grid;
  grid-template-columns: var(--col1) var(--col2) var(--col3);
  width: 100%;
}

/* =========================
   HEADER aligned to shell
   Brand in col1, menu in col2 (start)
   ========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.headerInner{
  padding: var(--padY) var(--padX) 8px;
  align-items: baseline;
}

.brand{
  grid-column: 1;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: var(--brandSize);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(10,10,10,.86);
}

.nav{
  grid-column: 2;        /* keep nav inside the stage */
  justify-self: end;     /* align to the right edge of column 2 */
  display:flex;
  gap: 14px;
  white-space: nowrap;

  font-size: var(--navSize);
  color: rgba(10,10,10,.65);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
}

.nav a:hover{ color: rgba(10,10,10,.92); }
.nav a[aria-current="page"]{ color: rgba(10,10,10,.92); }

/* =========================
   LANDING (full screen slideshow)
   ========================= */
.landing{
  height: 100vh;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background:#000;
}

.landingBrand{
  position:absolute;
  left: var(--padX);
  top: var(--padY);
  z-index: 3;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: var(--brandSize);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  mix-blend-mode: screen;
}

.landing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 38%);
  pointer-events:none;
}

.lSlide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 900ms ease;
}
.lSlide.active{ opacity:1; }

/* =========================
   WORKS (grid lives in col2)
   ========================= */
.worksWrap{
  padding: var(--worksTop) var(--padX) 90px;
}

.worksWrap .stage{
  grid-column: 2;
}

.worksGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.tile{ display:block; }

.tileImg{
  width: 100%;
  aspect-ratio: 2 / 3; /* tall portrait */
  background: rgba(0,0,0,.06);
}

.tileMeta{
  margin-top: 10px;
  font-size: var(--capSize);
  line-height: 1.45;
  color: rgba(10,10,10,.72);
}

.tileMeta .tTitle{
  display:block;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 12px;
  color: rgba(10,10,10,.85);
}

.tileMeta .tLine{
  display:block;
  font-style: italic;
  color: rgba(10,10,10,.55);
}

/* =========================
   PROJECT
   ========================= */
.projectWrap{
  padding: 40px var(--padX) 90px;
}
.projectWrap .stage{ grid-column: 2; }

.projectTop{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: start;
}

.projectHero{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.06);
}

.projectInfo{ padding-top: 18px; }

.projectTabs{
  display:flex;
  justify-content:flex-end;
  gap: 16px;
  font-size: var(--navSize);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(10,10,10,.55);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
}
.projectTabs button{
  border:0; padding:0;
  background: transparent;
  cursor:pointer;
  font: inherit;
  color: inherit;
}
.projectTabs button.active{ color: rgba(10,10,10,.92); }

.projectMeta{ margin-top: 5px; }
.projectMeta .cat{ font-size: 11px; color: rgba(10,10,10,.55); margin-bottom: 10px; }
.projectMeta .name{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(10,10,10,.86);
  margin-bottom: 6px;
}
.projectMeta .place{
  font-size: 12px;
  font-style: italic;
  color: rgba(10,10,10,.6);
}


.projectImages{
  margin-top: 64px;
  display:flex;
  flex-direction: column;
  gap: 64px;
}
.pImg{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.06);
}
.drawing{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,.06);
}

.projectText{
  margin-top: 64px;
  font-size: 12px;
  line-height: 1.85;
  color: rgba(10,10,10,.72);
}
.projectText h3{
  margin: 0 0 14px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(10,10,10,.85);
}
.projectText .row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 8px 0;
}
.projectText .k{ color: rgba(10,10,10,.55); }

/* =========================
   ABOUT
   ========================= */
.aboutWrap{
  padding: 56px var(--padX) 90px;
}
.aboutWrap .stage{ grid-column: 2; }

.aboutStage{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 90px;
  align-items: start;
}

.aboutImage{
  width: 100%;
  aspect-ratio: 2 / 3;
  background: rgba(0,0,0,.06);
}

.aboutText{
  padding-top: 14px;
}
.aboutText .title{
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(10,10,10,.68);
  margin-bottom: 14px;
}
.aboutText p{
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(10,10,10,.68);
}

/* =========================
   CONTACT
   ========================= */
.contactWrap{
  height: calc(100vh - 86px);
  position: relative;
  padding: 0 var(--padX);
}
.contactWrap .stage{ grid-column: 2; position: relative; }

.contactBlock{
  position:absolute;
  right: 12%;
  top: 30%;
  width: min(280px, 80vw);
}

.contactBlock .title{
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(10,10,10,.7);
  margin-bottom: 14px;
}
.contactBlock .lines{
  font-size: 12px;
  line-height: 1.75;
  color: rgba(10,10,10,.68);
}
.contactBlock a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================
   RESPONSIVE (later we can perfect)
   For now: collapse to one centered column
   ========================= */
@media (max-width: 980px){
  :root{
    --col1: 1fr;
    --col2: 0fr;
    --col3: 0fr;
    --worksTop: 90px;
    --gap: 34px;
    --padX: 18px;
  }

  .shell{
    grid-template-columns: 1fr;
  }

  .brand, .nav, .worksWrap .stage, .projectWrap .stage, .aboutWrap .stage, .contactWrap .stage{
    grid-column: 1;
  }

  /* mobile header like your screenshot: centered */
  .headerInner{
    padding: 18px var(--padX) 10px;
    row-gap: 8px;
  }
  .brand{
    justify-self: center;
  }
  .nav{
    justify-self: center;
  }

  .worksGrid{ grid-template-columns: 1fr; }
  .projectTop{ grid-template-columns: 1fr; gap: 28px; }
  .aboutStage{ grid-template-columns: 1fr; gap: 26px; }

  .contactBlock{
    position: static;
    margin: 120px auto 0;
  }
}
/* NAV size + behavior */

.nav a{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 15px;              /* ⬅ larger (Danielle-like) */
  font-style: normal;
  letter-spacing: 0.2px;
  color: rgba(10,10,10,.8);
  text-decoration: none;
}

/* Only active page italic */
.nav a[aria-current="page"]{
  font-style: italic;
  color: rgba(10,10,10,.95);
}
/* =======================
   Editorial text only (Adobe serif)
   ======================= */

.textEditorial{
  font-family: "adobe-garamond-pro", "adobe-caslon-pro", serif;
  font-size: 16px;          /* slightly larger like Danielle */
  line-height: 1.9;
  color: rgba(10,10,10,.75);
}

.textEditorial p{
  margin: 0 0 1.8em;
}

.textEditorial em{
  font-style: italic;
}

/* Titles inside editorial text */
.textEditorial .title{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(10,10,10,.6);
  margin-bottom: 22px;
}
/* =========================
   Body text — Neue Haas Grotesk
   ========================= */

.textEditorial{
  font-family: "neue-haas-grotesk-text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(10,10,10,.75);
}

.textEditorial p{
  margin: 0 0 1.8em;
}

.textEditorial em{
  font-style: italic;
}

/* Small uppercase label */
.textEditorial .title{
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(10,10,10,.6);
  margin-bottom: 18px;
}
/* style body text: justified + hyphenation */
.textEditorial p{
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  /* prevents extreme word-spacing in some cases */
  text-justify: inter-word;
}
/* =========================
   ABOUT — hard align text start to image edge
   (strong overrides, because something is centering)
   ========================= */

.aboutWrap .aboutStage{
  justify-items: start !important;
  align-items: start !important;
}

/* kill any centering wrappers around the image */
.aboutWrap .aboutImageFrame{
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.aboutWrap .aboutImage{
  margin: 0 !important;
  justify-self: start !important;
}

/* make the text column start exactly on the grid line */
.aboutWrap .aboutText{
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: 460px; /* keep Danielle-like measure; change later if needed */
}
/* =========================
   PROJECT — spacing refinement
   ========================= */

/* more space from top */
.projectWrap{
  padding: 150px var(--padX) 120px;
}

/* larger vertical rhythm between images */
.projectImages{
  margin-top: 80px;
  gap: 120px; /* ⬅ this controls space BETWEEN images */
}

/* slightly more breathing room before text */
.projectText{
  margin-top: 120px;
}
/* Works tile: auto-fit cover depending on image orientation */
.tileImg img{
  object-fit: cover; /* default for portrait */
}

.tileImg.is-landscape img{
  object-fit: contain;   /* no crop for horizontal */
  background: rgba(0,0,0,.04);
}
/* Works tiles: auto adjust when cover is landscape */
.tileImg img{
  object-fit: cover; /* portrait default */
}

.tileImg.is-landscape{
  aspect-ratio: 16 / 10; /* landscape tiles feel bigger */
}

.tileImg.is-landscape img{
  object-fit: contain;      /* never crop */
  background: rgba(0,0,0,.04);
}
/* =========================
   PROJECT HERO — no crop
   ========================= */

.projectHero{
  aspect-ratio: auto;     /* remove forced ratio */
  height: auto;
}

.projectHero img{
  width: 100%;
  height: auto;           /* let image define height */
  object-fit: contain;    /* never crop */
}
/* =========================
   Project intro text
   ========================= */

.projectIntro{
  margin-top: 18px;
  max-width: 760px;          /* keeps it editorial */
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(10,10,10,.68);
}
/* Hyphenation for project intro */
.projectIntro{
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  text-justify: inter-word;
}

/* Custom cursor: white outlined circle, slightly thicker line */
.landing{
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>\
<circle cx='12' cy='12' r='6' fill='none' stroke='white' stroke-width='3'/>\
</svg>") 12 12, auto;
}/* PROJECT PAGE: push the hero-text block to the FAR RIGHT */
.projectTop > .projectMeta{
  place-self: start end !important;   /* align-self: start; justify-self: end */
  width: fit-content !important;      /* stop stretching */
  max-width: 720px !important;        /* readable width */
}