:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.18);
}

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

a{color:inherit}

/* Top nav */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  background:#000;
  padding:18px clamp(18px, 6vw, 96px);
}
.brand{
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
}

/* Main page frame (restores the “premium” margins) */
.wrap{
  width: min(1400px, calc(100% - 2 * clamp(18px, 6vw, 96px)));
  margin-left: auto;
  margin-right: auto;
  padding-top: 26px;
  padding-bottom: 40px;
}

/* Prevent accidental full-bleed */
.wrap > *{
  max-width: 100%;
}
img, video{
  max-width: 100%;
}

/* Title */
h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 18px 0;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.02;
}

/* Second line under title (Tarragona, Spain) */
h1 .subtitle{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-top: 10px;
}

.kicker{
  color: var(--muted2);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}

/* HERO MEDIA: video centered, images below */
.heroGrid{
  display:flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
}

.video{
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  background:#050505;
  display:block;
  object-fit: cover;
  border: none;
}

/* 3 images row below video */
.stack{
  width: 100%;
  max-width: 1200px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items:start;
}

.thumb{
  width:100%;
  border: none;
  background:#050505;
  display:block;
  aspect-ratio: 16 / 9; /* keeps your landscape images clean */
  object-fit: cover;
  border-radius: 2px;
}

/* Text styling */
.sectionTitle{
  margin: 34px 0 10px;
  font-family: ui-sans-serif, system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  color: #fff;
}

.p{
  margin: 0 0 14px 0;
  color: var(--muted);
  line-height: 1.75;
  max-width: 78ch;
}

/* Narrative grid: text + vertical figure */
.grid2{
  display:grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 28px;
  align-items:start;
  margin-top: 18px;
}

/* Align vertical image cleanly with top of text */
.grid2 > div:last-child{
  display:flex;
  align-items:flex-start;
}

.vert{
  width: 100%;
  max-height: 700px;     /* limits size without forcing crop */
  height: auto;          /* natural aspect ratio */
  object-fit: contain;   /* never crop */
  display: block;
  border: none;
}

/* Lists + links */
.list{
  margin: 0 0 14px 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.75;
}

.files{
  margin-top: 22px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.fileLink{
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

.fileLink:hover{
  border-bottom-color:#fff;
  color:#fff;
}

.footer{
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 18px;
  color: var(--muted2);
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .stack{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .vert{height: auto}
}


/* ============================= */
/* Project 2 – Corridor Overrides */
/* ============================= */

.project-corridor .thumb{
  height: 260px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background:#050505;
}

.project-corridor .stack{
  align-items: center;
}

.project-corridor .video{
  object-fit: contain !important;   /* stops cropping */
  background: #000 !important;      /* letterbox blends in */
}

.project-corridor .video{
  aspect-ratio: auto !important;
  height: clamp(420px, 60vh, 720px);
}

.project-corridor .stack{
  place-items: center;
}

/* ============================= */
/* Project 3 – Research Layout   */
/* ============================= */

.project-bikeshare .heroGrid{ display:none; } /* safety: no video/3-image hero */

.project-bikeshare .researchHero{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.project-bikeshare .researchMeta .p{
  max-width: 72ch;
}

.project-bikeshare .quickFacts{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-bikeshare .fact{
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
}

.project-bikeshare .factK{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}

.project-bikeshare .factV{
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}

.project-bikeshare figure{
  margin: 0;
}

.project-bikeshare .fig{
  width: 100%;
  height: auto;
  display: block;
  background: #050505;
  border: none;              /* removes “box” */
  object-fit: contain;       /* research figures should be fully readable */
}

.project-bikeshare .heroFigure,
.project-bikeshare .sideFigure,
.project-bikeshare .figCard{
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-bikeshare .cap{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.5;
}

.project-bikeshare .researchSection{
  margin-top: 34px;
}

.project-bikeshare .figGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Make the narrative right column image behave like a figure */
.project-bikeshare .grid2{
  grid-template-columns: 1fr 0.85fr;
}

/* Responsive */
@media (max-width: 900px){
  .project-bikeshare .researchHero{
    grid-template-columns: 1fr;
  }
  .project-bikeshare .figGrid{
    grid-template-columns: 1fr;
  }
  .project-bikeshare .quickFacts{
    grid-template-columns: 1fr;
  }
  .project-bikeshare .grid2{
    grid-template-columns: 1fr;
  }
}


/* ============================= */
/* Project 4 – Boston Regression */
/* ============================= */


.project-boston .heroGrid{ display:none; } /* ensure no video/3-image hero */

.project-boston .researchHero{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.project-boston .researchMeta .p{
  max-width: 72ch;
}

/* 4 “boxes” (same as Project 3) */
.project-boston .quickFacts{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-boston .fact{
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
}

.project-boston .factK{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}

.project-boston .factV{
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}

/* Figures (readable, no cropping, no “box border”) */
.project-boston figure{ margin: 0; }

.project-boston .fig{
  width: 100%;
  height: auto;
  display: block;
  background: #050505;
  border: none;
  object-fit: contain;
}

/* Cards around figures (same language as Project 3) */
.project-boston .heroFigure,
.project-boston .sideFigure,
.project-boston .figCard{
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-boston .cap{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.5;
}

.project-boston .researchSection{
  margin-top: 34px;
}

/* If you have a grid of figures later */
.project-boston .figGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Keep narrative proportion similar to Project 3 */
.project-boston .grid2{
  grid-template-columns: 1fr 0.85fr;
}

/* Responsive */
@media (max-width: 900px){
  .project-boston .researchHero{
    grid-template-columns: 1fr;
  }
  .project-boston .figGrid{
    grid-template-columns: 1fr;
  }
  .project-boston .quickFacts{
    grid-template-columns: 1fr;
  }
  .project-boston .grid2{
    grid-template-columns: 1fr;
  }
}

/* ============================= */
/* Project 5 – Charlotte (Research) */
/* ============================= */

.project-charlotte .heroGrid{ display:none; } /* ensure no video hero */

.project-charlotte .researchHero{
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.project-charlotte .researchMeta .p{ max-width: 72ch; }

/* 4 boxes — same style language as Project 3 */
.project-charlotte .quickFacts{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-charlotte .fact{
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
}

.project-charlotte .factK{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}

.project-charlotte .factV{
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}

/* Small figures (no oversized visuals) */
.project-charlotte figure{ margin: 0; }

.project-charlotte .miniFigure{
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-charlotte .miniImg{
  width: 100%;
  height: 300px;
  object-fit: contain;
  display: block;
  background: #050505;
  border: none;
}

.project-charlotte .cap{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.5;
}

/* Main body: text left, figures right (small stack) */
.project-charlotte .researchBody{
  margin-top: 28px;
}

.project-charlotte .sideStack{
  display: grid;
  gap: 14px;
  align-content: start;
}

.project-charlotte .sideFig{
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-charlotte .sideImg{
  width: 100%;
  height: 240px;
  object-fit: contain;
  display: block;
  background: #050505;
  border: none;
}

/* Small maps row */
.project-charlotte .miniGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  max-width: 1200px;
}

.project-charlotte .miniCard{
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .project-charlotte .researchHero{ grid-template-columns: 1fr; }
  .project-charlotte .quickFacts{ grid-template-columns: 1fr; }
  .project-charlotte .grid2{ grid-template-columns: 1fr; }
  .project-charlotte .miniGrid{ grid-template-columns: 1fr; }
  .project-charlotte .miniImg{ height: 240px; }
  .project-charlotte .sideImg{ height: 220px; }
}

/* Center the grids as containers */
.project-charlotte .miniGrid{
  margin: 14px auto 0;     /* centers the whole grid */
  width: 100%;
}

/* Make the clickable area behave like a block */
.project-charlotte .miniFigure a,
.project-charlotte .sideFig a,
.project-charlotte .miniCard a{
  display: block;
}

/* Ensure images center within their fixed-height frames */
.project-charlotte .miniImg,
.project-charlotte .sideImg{
  object-position: center center;
}

/* Optional: slightly more “optimal” responsive heights */
.project-charlotte .miniImg{ height: clamp(220px, 28vw, 340px); }
.project-charlotte .sideImg{ height: clamp(200px, 22vw, 260px); }

/* ============================= */
/* Project 6 – Landuse (Research) */
/* ============================= */

.project-landuse .heroGrid{ display:none; } /* ensure no video hero */

.project-landuse .researchHero{
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

/* 4 boxes — same style language as Project 3 */
.project-landuse .quickFacts{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-landuse .fact{
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
}

.project-landuse .factK{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}

.project-landuse .factV{
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}

/* Cover figure (kept readable, not huge) */
.project-landuse figure{ margin: 0; }

.project-landuse .miniFigure{
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-landuse .miniImg{
  width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
  background: transparent;
  border: none;
}

.project-landuse .cap{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.5;
}

/* Main body: text left, figures right */
.project-landuse .researchBody{
  margin-top: 28px;
}

.project-landuse .sideStack{
  display: grid;
  gap: 14px;
  align-content: start;
}

.project-landuse .sideFig{
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

.project-landuse .sideImg{
  width: 100%;
  height: 220px;        /* readable */
  object-fit: contain;  /* no cropping */
  display: block;
  background: transparent;
  border: none;
}

/* Maps grid */
.project-landuse .miniGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  max-width: 1200px;
}

.project-landuse .miniCard{
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .project-landuse .researchHero{ grid-template-columns: 1fr; }
  .project-landuse .quickFacts{ grid-template-columns: 1fr; }
  .project-landuse .grid2{ grid-template-columns: 1fr; }
  .project-landuse .miniGrid{ grid-template-columns: 1fr; }
  .project-landuse .miniImg{ height: 280px; }
  .project-landuse .sideImg{ height: 260px; }
}
/* ============================= */
/* Project 6 – Landuse FIXES     */
/* ============================= */

/* 1) FORCE the 4 side figures to stack vertically */
.project-landuse .sideStack{
  display: grid !important;              /* overrides any flex row from project.css */
  grid-template-columns: 1fr !important; /* one per row */
  grid-auto-flow: row !important;
  gap: 14px !important;
  align-content: start !important;
}

.project-landuse .sideFig{
  width: 100% !important;                /* prevents “tile” sizing */
}

/* 2) Center-align the bottom 8-image grid as a block (NO other changes) */
.project-landuse .miniGrid{
  margin: 14px auto 0 !important;        /* centers the entire grid */
  max-width: 1200px;                     /* keep your existing max */
  width: 100%;
}

/* Optional but safe: ensures grid items don’t stretch weirdly */
.project-landuse .miniGrid .miniCard{
  width: 100%;
}

/* ============================= */
/* Project – Witte / Lived Narratives */
/* ============================= */

.project-witte .researchHero{
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.project-witte .researchMeta .p{
  max-width: 72ch;
}

.project-witte .miniFigure{
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.project-witte .miniImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

.project-witte .cap{
  margin-top: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* ===== QUICK FACTS — make like Boston ===== */
.project-witte .quickFacts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  max-width: 820px;
}

.project-witte .fact{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 16px 15px;
  min-height: 98px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.project-witte .factK{
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  margin-bottom: 12px;
}

.project-witte .factV{
  font-size: 1.02rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.96);
}

/* Body grid */
.project-witte .researchBody{
  margin-top: 30px;
  gap: 30px;
}

.project-witte .sideStack{
  display: grid;
  gap: 14px;
  align-content: start;
}

.project-witte .sideFig{
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.project-witte .sideImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Gallery grid */
.project-witte .researchSection{
  margin-top: 30px;
}

.project-witte .miniGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.project-witte .miniCard{
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.project-witte .miniCard .miniImg{
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 980px){
  .project-witte .researchHero{
    grid-template-columns: 1fr;
  }

  .project-witte .quickFacts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-witte .miniGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .project-witte .quickFacts{
    grid-template-columns: 1fr;
  }

  .project-witte .miniGrid{
    grid-template-columns: 1fr;
  }
}


/* ============================= */
/* Project 8 – Skyway Routing    */
/* ============================= */

.project-skyway .heroGrid{ display:none; }

.project-skyway .researchBody{
  margin-top: 24px;
}

.project-skyway .videoSection{
  margin-top: 22px;
  margin-bottom: 28px;
}

.project-skyway .topVideo{
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #050505;
  border: none;
  object-fit: contain;
}

@media (max-width: 900px){
  .project-skyway .topVideo{
    aspect-ratio: auto;
  }
}