/* ========================================
   BRAD SHERMAN — Design Portfolio
   ======================================== */

/* --- Font Setup --- */
@font-face {
  font-family: 'Gelica';
  src: url('fonts/fonnts.com-Gelica-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/fonnts.com-Gelica-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/fonnts.com-Gelica-Semi-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/fonnts.com-Gelica-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/fonnts.com-Gelica-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Kabel';
  src: url('fonts/fonnts.com-Neue_Kabel.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Kabel';
  src: url('fonts/fonnts.com-Neue_Kabel_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Kabel';
  src: url('fonts/fonnts.com-Neue_Kabel_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Kabel';
  src: url('fonts/fonnts.com-Neue_Kabel_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --red: #D42B2B;
  --red-hover: #B71C1C;
  --red-glow: rgba(212, 43, 43, 0.08);
  --black: #111111;
  --dark-gray: #333333;
  --medium-gray: #666666;
  --light-gray: #999999;
  --border: #E8E8E8;
  --bg: #FFFFFF;
  --bg-off: #FAFAFA;
  --bg-warm: #F5F3F0;
  --font-heading: 'Gelica', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Helvetica Neue', 'Arial', sans-serif;
  --sidebar-width: 260px;
  --content-max: 960px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 96px;
  --spacing-5xl: 120px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--dark-gray);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Scroll Reveal Animations --- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: opacity, transform;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 300ms; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Sidebar Navigation --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--red);
  letter-spacing: 0.01em;
  margin-bottom: var(--spacing-xl);
  line-height: 1.15;
  padding-left: 14px;
}

.sidebar__logo a {
  color: var(--red);
  display: inline-block;
  transform-origin: left top;
  transition: color 0.3s, transform 0.3s;
}

.sidebar__logo a:hover {
  color: var(--red-hover);
  font-style: italic;
  transform: scale(1.12);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar__link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--light-gray);
  padding: 10px 14px;
  border-radius: 0;
  transition: all 0.3s var(--ease-out);
  letter-spacing: 0.01em;
  position: relative;
}

.sidebar__link:hover {
  color: var(--black);
  background: var(--bg-off);
  padding-left: 18px;
}

.sidebar__link--active {
  color: var(--red);
  font-weight: 500;
  background: var(--red-glow);
}

.sidebar__link--active:hover {
  color: var(--red);
  background: var(--red-glow);
}

.sidebar__section-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--light-gray);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 8px 14px 6px;
  margin-top: var(--spacing-sm);
}

.sidebar__section-label:first-child {
  margin-top: 0;
}

.sidebar__bottom {
  margin-top: auto;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- Mobile Nav Toggle ---
   Three red bars echoing the brand red dividers used elsewhere on the site.
   No box behind it — just the bars with a soft drop-shadow for legibility.
   Animates to an X when the sidebar is open. */
.nav-toggle {
  display: none;
  /* Sits at the top of the page and scrolls away with content — no overlap with images */
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 200;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
  transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}

.nav-toggle:active {
  transform: scale(0.92);
}

.nav-toggle:hover {
  filter: drop-shadow(0 2px 5px rgba(212, 43, 43, 0.30));
}

.nav-toggle__icon {
  position: relative;
  z-index: 1; /* sit on top of the white box */
  display: block;
  width: 22px;
  height: 2px;
  background: var(--red);
  transition: background-color 0.2s var(--ease-out);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transition: transform 0.32s var(--ease-out), top 0.32s var(--ease-out);
}

.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after  { top:  7px; }

/* Open state — bars morph to an X */
.nav-toggle--open .nav-toggle__icon {
  background-color: transparent;
}
.nav-toggle--open .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle--open .nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Main Content --- */
.main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

.main__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-4xl);
}

/* Homepage: let grid go full width */
.main__inner--home {
  max-width: none;
  padding: 0 0 var(--spacing-4xl);
}

/* --- Homepage Grid --- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.home-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-off);
  cursor: pointer;
  display: block;
  transition: opacity 0.3s;
}

.home-card:hover {
  opacity: 0.85;
}

.home-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.home-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s var(--ease-smooth);
}

.home-card:hover .home-card__image {
  transform: scale(1.02);
}

.home-card__overlay {
  display: none;
}

.home-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.home-card__subtitle {
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: 300;
}

/* Card label below image */
.home-card__label {
  padding: var(--spacing-sm) var(--spacing-md);
  padding-bottom: var(--spacing-lg);
}

.home-card__label-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
}

.home-card__label-sub {
  font-size: 0.75rem;
  color: var(--medium-gray);
  margin-top: 2px;
}

/* --- Home Mobile Header ---
   Visible only on mobile, where the sidebar (and its BRAD SHERMAN logo) is hidden
   behind the hamburger. Gives the home page an identity at the top so visitors
   landing via QR code see the name and discipline before scrolling into the work. */
.home-mobile-header {
  display: none;
}

/* --- Home Intro (float-up reveal) --- */
.home-intro {
  max-width: 640px;
  margin: var(--spacing-5xl) auto var(--spacing-xl);
  padding: 0 var(--spacing-lg);
  text-align: center;
}

.home-intro p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--dark-gray);
  line-height: 1.75;
  margin-bottom: var(--spacing-md);
}

.home-intro__link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--medium-gray);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.3s;
}

.home-intro__link:hover {
  color: var(--black);
}

/* Float-up reveal animation */
.reveal-float {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}

.reveal-float--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Page Header --- */
.page-header {
  margin-bottom: var(--spacing-4xl);
}

.page-header__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.25rem;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.page-header__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--light-gray);
  max-width: 600px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* --- Project Section --- */
.project {
  margin-bottom: var(--spacing-4xl);
}

.project:last-child {
  margin-bottom: 0;
}

.project__divider {
  width: 60px;
  height: 3px;
  background: var(--red);
  margin-bottom: var(--spacing-4xl);
}

.project__header {
  margin-bottom: var(--spacing-xl);
}

.project__title {
  font-family: 'Neue Kabel', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--black);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.01em;
}

.project__meta {
  font-size: 0.95rem;
  color: var(--medium-gray);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.02em;
}

.project__description {
  font-size: 1rem;
  color: var(--dark-gray);
  max-width: 680px;
  line-height: 1.75;
  margin-bottom: var(--spacing-xl);
}

.project__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: calc(var(--spacing-md) * -1);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--red);
  font-weight: 500;
  transition: gap 0.3s var(--ease-out), color 0.2s;
}

.project__link:hover {
  gap: 10px;
  color: var(--red-hover);
}

/* ============================================
   Project Switcher
   Sticky tabs at top of multi-project pages (branding.html, rebranding.html).
   Mirrors the active state pattern from .sidebar__link--active.
   ============================================ */
.project-switcher {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  margin: 0 calc(-1 * var(--spacing-xl)) var(--spacing-2xl);
  padding: var(--spacing-sm) var(--spacing-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.project-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  padding: 6px 18px 6px 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--medium-gray);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.project-switcher__btn:hover {
  color: var(--black);
  background: var(--bg-off);
}

.project-switcher__btn--active,
.project-switcher__btn--active:hover {
  color: var(--black);
  background: var(--border);
  font-weight: 700;
}

.project-switcher__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.project-switcher__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* The NJ Transit emblem fills its bounding box edge-to-edge; scale it
   down slightly so it visually matches the other logos (which include
   their own whitespace). */
.project-switcher__logo[src*="NJ_emblem"] {
  transform: scale(0.85);
}

.project-switcher__logo--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--medium-gray);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.project-switcher__btn--active .project-switcher__logo--text {
  color: var(--black);
}

.project-switcher__name {
  font-weight: 500;
}

/* On switcher pages, individual project dividers are redundant — the
   switcher itself replaces the visual project break. */
.main__inner--switcher .project__divider {
  display: none;
}

/* Projects hidden by the switcher use the standard hidden attribute */
.project[hidden] {
  display: none;
}

/* Switcher pages present each project as a continuous brand-book flow,
   so the gap between consecutive image blocks is tightened. */
.main__inner--switcher .img-full,
.main__inner--switcher .img-grid-2,
.main__inner--switcher .img-grid-3 {
  margin-bottom: var(--spacing-sm);
}

/* Brand-book page slices: stack flush with zero gap so the rendered PDF
   reads as one continuous document, not a sequence of separate images.
   Override the .img-full max-height/object-fit cap (which letterboxes
   tall portrait pages down to thumbnails) using !important — needed
   because .img-full's rule appears later in the cascade. */
.img-full--book {
  margin-bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: fill !important;
  cursor: default !important;       /* not clickable — no pointer hand */
  pointer-events: none;             /* swallow clicks (lightbox skip is in JS too) */
}
.img-full--book:hover {
  transform: none !important;       /* kill the lift-on-hover effect */
  box-shadow: none !important;
}
.img-full--book + .img-full--book {
  margin-top: -1px; /* hide hairline antialiasing seam between slices */
}

/* Mobile: horizontal scroll instead of wrap so a row of buttons fits cleanly */
@media (max-width: 768px) {
  .project-switcher {
    margin: 0 calc(-1 * var(--spacing-md)) var(--spacing-xl);
    padding: var(--spacing-xs) var(--spacing-md);
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .project-switcher::-webkit-scrollbar { display: none; }

  .project-switcher__btn {
    padding: 5px 14px 5px 5px;
    font-size: 0.88rem;
    gap: 10px;
  }
  .project-switcher__logo,
  .project-switcher__logo--text {
    width: 38px;
    height: 38px;
  }
  .project-switcher__logo--text {
    font-size: 0.62rem;
  }
}

/* --- Project placeholder (e.g. "Case study coming soon" slot) --- */
.project__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 320px;
  background: var(--bg-off);
  border: 1px dashed var(--border);
  margin-top: var(--spacing-lg);
}

.project__placeholder span {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--light-gray);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding-left: 22px;
}

.project__placeholder span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--red);
  transform: translateY(-50%);
}

/* --- Image Layouts --- */

.img-full,
.img-grid-2 img,
.img-grid-3 img,
.img-featured img {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.img-full:hover,
.img-grid-2 img:hover,
.img-grid-3 img:hover,
.img-featured img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* Full-width single image */
.img-full {
  width: 100%;
  border-radius: 0;
  margin-bottom: var(--spacing-xl);
  max-height: 80vh;
  object-fit: contain;
}

/* Two-column image grid */
.img-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.img-grid-2 img {
  width: 100%;
  border-radius: 0;
}

/* Three-column image grid */
.img-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.img-grid-3 img {
  width: 100%;
  border-radius: 0;
}

/* Large + small side layout */
.img-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.img-featured img {
  width: 100%;
  border-radius: 0;
}

/* Image with caption */
.img-captioned {
  margin-bottom: var(--spacing-md);
}

.img-captioned img {
  width: 100%;
  border-radius: 0;
}

.img-captioned figcaption {
  font-size: 0.8rem;
  color: var(--light-gray);
  margin-top: var(--spacing-xs);
}

/* Section label within project */
.project__section-label {
  font-family: 'Neue Kabel', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--black);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

/* When section label is the first child (no content above), reduce top margin */
.project__header + .project__section-label {
  margin-top: 0;
}

/* --- Campaign ads row — matched height, poster wider than phone --- */
.campaign-ads-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.campaign-ads-row img:first-child {
  width: 100%;
  height: 540px;
  object-fit: contain;
  object-position: left top;
}

.campaign-ads-row img:last-child {
  width: 100%;
  height: 540px;
  object-fit: contain;
  object-position: right top;
}

@media (max-width: 768px) {
  .campaign-ads-row {
    grid-template-columns: 1fr;
    height: auto;
  }
  /* Match :first-child / :last-child specificity so the mobile rule
     actually overrides the explicit 540px (otherwise C10 stays 540px tall on mobile,
     leaving big empty bars above/below from object-fit: contain). */
  .campaign-ads-row img,
  .campaign-ads-row img:first-child,
  .campaign-ads-row img:last-child {
    height: auto;
  }
}

/* --- SM matched row — SM5 + SM6 same height --- */
.sm-matched-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.sm-matched-row img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
}

@media (max-width: 768px) {
  .sm-matched-row {
    grid-template-columns: 1fr;
  }
  .sm-matched-row img {
    height: auto;
  }
}

/* --- Naples logo + text side by side --- */
.naples-logo-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
  margin-bottom: var(--spacing-2xl);
}

.naples-logo-feature .project__description:last-child {
  margin-bottom: 0;
}

.naples-logo-feature img {
  width: 100%;
}

.naples-logo-feature .project__description {
  max-width: none;
}

@media (max-width: 768px) {
  .naples-logo-feature {
    grid-template-columns: 1fr;
  }
}

/* --- Naples problem: small old logo paired with objective text ---
   Asymmetric grid intentionally giving the old mark less visual weight than
   the new mark — frames it as evidence, not as a peer. */
.naples-problem {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--spacing-2xl);
  align-items: center;
  margin-bottom: var(--spacing-2xl);
}

.naples-problem__logo {
  background: var(--bg-warm);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.naples-problem__logo img {
  width: 100%;
  max-width: 320px;
}

.naples-problem .project__description {
  max-width: none;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .naples-problem {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  .naples-problem__logo {
    padding: var(--spacing-lg);
  }
}

/* --- Naples reveal label: extra breathing room before the new mark
   Creates a visible pause/breath so the climax lands. */
.naples-reveal-label {
  margin-top: var(--spacing-4xl);
}

/* --- Naples business card: a centered, smaller frame so the card
   doesn't stretch full-bleed and look distorted at portfolio width. */
.naples-card-frame {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

.naples-card-frame img {
  width: 100%;
  max-width: 720px;
}

/* --- Poster Mosaic Gallery --- */
.poster-mosaic {
  margin-bottom: var(--spacing-2xl);
}

.poster-mosaic__row {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

/* Row 1: two tall portraits (0.65 ratio) + one wide landscape (1.78 ratio) */
/* Column widths proportional to aspect ratios so all images fill same height */
.poster-mosaic__row--top {
  grid-template-columns: 0.65fr 0.65fr 1.78fr;
  height: 260px;
}

/* Row 2 & 3: all ~0.80 ratio portraits, equal columns */
.poster-mosaic__row--mid {
  grid-template-columns: repeat(4, 1fr);
  height: 250px;
}

.poster-mosaic__row--bottom {
  grid-template-columns: repeat(4, 1fr);
  height: 270px;
}

.poster-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) {
  .poster-mosaic__row {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
  }
  .poster-mosaic img {
    height: auto;
    object-fit: contain;
    aspect-ratio: 3 / 4;
  }
}

/* --- Visual Gallery (no descriptions, just images) --- */
.visual-gallery {
  margin-top: var(--spacing-lg);
}

.visual-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.visual-gallery__grid img {
  width: 100%;
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.visual-gallery__grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

/* --- About Page --- */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.about__photo {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.about__photo:hover {
  transform: scale(1.02);
}

.about__text h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--black);
  margin-bottom: var(--spacing-sm);
}

.about__text p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: var(--spacing-sm);
  color: var(--dark-gray);
}

.about__details {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.about__detail-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 4px;
}

.about__detail-value {
  font-size: 0.95rem;
  color: var(--dark-gray);
  line-height: 1.6;
}

.about__resume-link {
  display: inline-block;
  margin-top: var(--spacing-lg);
  padding: 14px 32px;
  background: var(--red);
  color: white;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 0;
  transition: all 0.3s var(--ease-out);
  letter-spacing: 0.02em;
}

.about__resume-link:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 43, 43, 0.25);
}

/* --- Contact Page --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.contact__info h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--black);
  margin-bottom: var(--spacing-md);
}

.contact__info p {
  font-size: 1rem;
  color: var(--dark-gray);
  margin-bottom: var(--spacing-lg);
  line-height: 1.75;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact__link-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.95rem;
  color: var(--dark-gray);
}

.contact__link-item span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light-gray);
  min-width: 80px;
}

.contact__link-item a {
  color: var(--red);
  font-weight: 500;
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
}

.contact__link-item a:hover {
  color: var(--red-hover);
  border-bottom-color: var(--red-hover);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact__form label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact__form input,
.contact__form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--dark-gray);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact__form input:focus,
.contact__form textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-glow);
}

.contact__form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact__form button {
  align-self: flex-start;
  padding: 14px 36px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  letter-spacing: 0.02em;
}

.contact__form button:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 43, 43, 0.25);
}

/* --- Footer --- */
.footer {
  margin-top: var(--spacing-4xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--light-gray);
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.lightbox--open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  transition: opacity 0.2s;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  left: 32px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
  z-index: 10;
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__info {
  position: absolute;
  top: 32px;
  right: 32px;
  color: white;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.02em;
  z-index: 10;
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 16px;
  z-index: 10;
}

.lightbox__arrow:hover {
  opacity: 1;
}

.lightbox__arrow--left {
  left: 24px;
}

.lightbox__arrow--right {
  right: 24px;
}

/* --- Gallery Hover Effect --- */
.poster-mosaic img {
  transition: transform 0.4s var(--ease-out), opacity 0.3s, box-shadow 0.4s var(--ease-out);
  cursor: pointer;
}

.poster-mosaic--hovering img {
  opacity: 0.5;
}

.poster-mosaic__img--active {
  opacity: 1 !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Make all project images clickable */
.project img,
.poster-mosaic img {
  cursor: pointer;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .main__inner {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
  }

  .page-header__title {
    font-size: 2.75rem;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about__photo {
    max-width: 300px;
  }

  .img-featured {
    grid-template-columns: 1fr;
  }

  .visual-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-out);
    box-shadow: none;
  }

  .sidebar--open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.08);
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main {
    margin-left: 0;
  }

  .main__inner {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
  }

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

  .page-header__title {
    font-size: 2.25rem;
  }

  .project__title {
    font-size: 1.5rem;
  }

  .img-grid-2 {
    grid-template-columns: 1fr;
  }

  /* Inline grid-template-columns (e.g. "2fr 3fr") on these layouts must collapse on mobile.
     Inline style would otherwise win against the rule above. */
  .img-grid-2[style*="grid-template-columns"],
  .sm-matched-row[style*="grid-template-columns"],
  .naples-logo-feature[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Modifier: keep 2-col on mobile for related pairs (e.g. currency front/back) */
  .img-grid-2.img-grid-2--pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .img-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Modifier: keep 3-col on mobile for triptychs (e.g. magazine cover series) */
  .img-grid-3.img-grid-3--keep {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }

  .visual-gallery__grid {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* Home page: mobile-only header (hidden on desktop where the sidebar shows the name) */
  .home-mobile-header {
    display: block;
    /* 88px top clears the absolute-positioned nav-toggle (16 + 48 = 64) with editorial breathing room */
    padding: 88px var(--spacing-md) var(--spacing-2xl);
    position: relative;
  }
  .home-mobile-header::before {
    content: '';
    position: absolute;
    top: 72px;
    left: var(--spacing-md);
    width: 32px;
    height: 3px;
    background: var(--red);
  }
  .home-mobile-header__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.75rem;
    color: var(--red);
    letter-spacing: -0.005em;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
  }
  .home-mobile-header__subtitle {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--medium-gray);
    letter-spacing: 0.005em;
    line-height: 1.5;
    font-weight: 400;
  }

  /* Home grid: vertical breathing room between cards on mobile */
  .home-grid {
    gap: var(--spacing-lg);
  }
  .home-card__label {
    padding: var(--spacing-md) var(--spacing-md) 0;
  }
  .home-card__label-title {
    font-size: 1.0625rem;
    letter-spacing: 0.005em;
    line-height: 1.3;
  }
  .home-card__label-sub {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 4px;
  }

  /* Home intro: 120px top margin is excessive on a phone */
  .home-intro {
    margin-top: var(--spacing-3xl);
    padding: 0 var(--spacing-md);
  }
}

/* ============================================
   PHONE BREAKPOINT (≤480 px)
   Targets iPhone SE through 16 Pro Max
   ============================================ */
@media (max-width: 480px) {
  /* Tighter outer padding so content has room to breathe */
  .main__inner {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-2xl);
  }

  /* Bigger sidebar tap targets (was ~42 px, need ≥44 px) */
  .sidebar__link {
    padding: 14px 16px;
    font-size: 0.95rem;
  }

  /* Headings scale down for narrow columns */
  .page-header { margin-bottom: var(--spacing-2xl); }
  .page-header__title { font-size: 1.75rem; }
  .page-header__subtitle { font-size: 0.9rem; }
  .project { margin-bottom: var(--spacing-2xl); }
  .project__title { font-size: 1.35rem; }
  .project__divider { margin-bottom: var(--spacing-2xl); }
  .project__description { font-size: 0.95rem; line-height: 1.65; }
  .project__section-label { font-size: 1.15rem; margin-top: var(--spacing-xl); }

  /* Home card label: calmer scale on the smallest phones */
  .home-card__label-sub { font-size: 0.85rem; line-height: 1.5; }
  .home-card__label-title { font-size: 1rem; letter-spacing: 0.005em; }

  /* About-page detail labels were 0.7rem (~11.2px) — too small */
  .about__detail-label { font-size: 0.78rem; letter-spacing: 0.1em; }

  /* Contact form labels and link-item labels were 0.75rem (~12px) */
  .contact__form label,
  .contact__link-item span { font-size: 0.82rem; letter-spacing: 0.08em; }

  /* Action links ("View Full Style Guide →", "Visit Live Site →") were 22px tall.
     Bump padding so they read as buttons without changing visual weight too much. */
  .project__link {
    padding: 12px 0;
    font-size: 0.95rem;
  }
  .home-intro__link {
    padding: 12px 0;
    display: inline-block;
    font-size: 0.95rem;
  }

  /* Poster mosaic — phone preview layout
     Each row's column widths are proportional to the actual aspect ratios of the
     images in that row, so every image renders at its natural shape (no cropping)
     and all images within a row share the same height. Row heights vary by content:
     row 2 is shorter because it holds the wider landscape-oriented posters. */
  .poster-mosaic {
    margin-bottom: var(--spacing-2xl);
    padding: 0 4px;
  }
  .poster-mosaic__row {
    gap: 4px !important;
    margin-bottom: 4px !important;
    height: auto !important;
  }
  /* Row 1: P14 (0.647) + P15 (0.647) + P17 (1.778) → row height ≈ 120 px */
  .poster-mosaic__row--top {
    grid-template-columns: 0.647fr 0.647fr 1.778fr !important;
  }
  /* Row 2: P56 (1.544) + P13 (0.746) + P16 (1.000) + P7 (1.333) → ≈ 80 px
     (shorter band of landscape-leaning posters) */
  .poster-mosaic__row--mid {
    grid-template-columns: 1.544fr 0.746fr 1.000fr 1.333fr !important;
  }
  /* Row 3: P51 (0.800) + p52 (0.800) + P53 (0.800) + P55 (0.774) → ≈ 115 px */
  .poster-mosaic__row--bottom {
    grid-template-columns: 0.800fr 0.800fr 0.800fr 0.774fr !important;
  }
  /* Show full image — no cover-cropping */
  .poster-mosaic img {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* About photo: full-width inside its column instead of orphaned 300 px */
  .about__photo {
    max-width: 100%;
  }
  .about__text h2 { font-size: 1.6rem; }

  /* Contact form: kill iOS auto-zoom, full-width submit, wrapped links */
  .contact__form input,
  .contact__form textarea {
    font-size: 16px; /* iOS auto-zooms anything < 16 px on focus */
  }
  .contact__form button {
    width: 100%;
    align-self: stretch;
    padding: 16px 24px;
  }
  .contact__link-item {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .contact__link-item span {
    min-width: 0;
    flex-basis: 100%;
  }
  .contact__link-item a {
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 12px 0;
    display: inline-block;
    font-size: 1rem;
    min-height: 44px;
  }

  /* Lightbox: more room for the image, no on-image arrow icons */
  .lightbox__img {
    max-width: 94vw;
    max-height: 78vh;
  }
  .lightbox__close {
    top: 12px;
    left: 12px;
    font-size: 2.4rem;
    padding: 8px 12px;
  }
  .lightbox__info {
    top: 18px;
    right: 14px;
    font-size: 0.7rem;
    max-width: 60%;
    text-align: right;
  }
  /* Hide the prev/next arrow buttons on mobile — swipe + edge-tap take over */
  .lightbox__arrow {
    display: none !important;
  }

  /* Inline-style escape: kill inline max-width caps that look bad shrunken */
  .img-full[style*="max-width"] {
    max-width: 100% !important;
  }

  /* Tame oversized inline margin-bottom values that create giant voids */
  [style*="margin-bottom: 128px"],
  [style*="margin-bottom: 96px"] {
    margin-bottom: var(--spacing-xl) !important;
  }

  /* Inline 5xl-height spacers (e.g. between poster mosaic and first project) — 120px is huge on phone */
  div[style*="height: var(--spacing-5xl)"],
  div[style*="height: var(--spacing-4xl)"] {
    height: var(--spacing-lg) !important;
  }

  /* Footer slightly larger so it's not microscopic in bright exhibition lighting */
  .footer { font-size: 0.85rem; color: var(--medium-gray); }

  /* Home mobile header — slightly tighter on small phones */
  .home-mobile-header {
    padding: 84px var(--spacing-md) var(--spacing-xl);
  }
  .home-mobile-header::before {
    top: 68px;
    width: 28px;
  }
  .home-mobile-header__title {
    font-size: 2.375rem;
    margin-bottom: var(--spacing-xs);
  }
  .home-mobile-header__subtitle {
    font-size: 1rem;
  }

  .home-grid { gap: var(--spacing-md); }

  /* ── Uniform vertical rhythm within a project on mobile ──
     Every image block gets the same gap below it; subsection labels get the same gap above.
     Override targeted defaults so the page reads as a steady cadence instead of a mix
     of 24/32/48/64/96/128px gaps inherited from inline desktop styles. */
  .project .img-full,
  .project .img-grid-2,
  .project .img-grid-3,
  .project .img-featured,
  .project .sm-matched-row,
  .project .campaign-ads-row,
  .project .naples-logo-feature {
    margin-top: 0;
    margin-bottom: var(--spacing-lg); /* 32px */
  }
  .project .project__section-label {
    margin-top: var(--spacing-2xl);   /* 64px */
    margin-bottom: var(--spacing-md);
  }
  /* When a project__description follows a section-label, tighten the gap */
  .project .project__section-label + .project__description {
    margin-bottom: var(--spacing-md);
  }
  /* The poster mosaic at the very top of a page needs its own breathing room */
  .poster-mosaic + .project__divider,
  .poster-mosaic + section.project {
    margin-top: var(--spacing-2xl);
  }
  /* Project-to-project break */
  .project__divider {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    width: 48px;
  }

  /* Architecture in Madison illustration — supporting graphic, not the poster.
     On desktop the naples-logo-feature grid sizes it appropriately;
     on mobile (1-col) it would otherwise span full column width. */
  .naples-logo-feature .project-illus,
  .project-illus {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   Touch-device guards
   Hover-only effects don't fire on touch — kill them so phones don't
   get stuck mid-transform when the finger lifts.
   ============================================ */
@media (hover: none) {
  .home-card:hover { opacity: 1; }
  .home-card:hover .home-card__image { transform: none; }
  .img-full:hover,
  .img-grid-2 img:hover,
  .img-grid-3 img:hover,
  .img-featured img:hover,
  .visual-gallery__grid img:hover,
  .about__photo:hover,
  .poster-mosaic img:hover,
  .poster-mosaic__img--active {
    transform: none;
    box-shadow: none;
  }
  .sidebar__logo a:hover {
    transform: none;
    font-style: normal;
  }
}

/* ============================================
   iOS dynamic-viewport fix
   95vh / 80vh jump as the URL bar shows/hides.
   Use svh ("small viewport height") which matches the URL-bar-visible state.
   ============================================ */
@supports (height: 100svh) {
  .ct-cover { min-height: 95svh; }
  .bg-hero  { min-height: 80svh; }
}

/* ============================================
   Sidebar backdrop scrim — visible cue that nav is open
   and clickable area for tap-to-close (handler in script.js)
   ============================================ */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.sidebar-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}