/* Portfolio — rebuilt type + layout (visual reference) */
/* Primary UI font: Montserrat (loaded in HTML). fonts/ Nexa kits kept in repo but not linked. */

:root {
  --paradiso: #528385;
  /* Keep in sync with --paradiso (work SVG + CSS); avoids visible seams next to torn strips */
  --logo-fill: var(--paradiso);
  --nero: #292929;
  --lusta: #eee8d5;
  --ming: #386c77;
  --madison: #304355;

  --text-primary-dark: var(--lusta);
  --text-muted-dark: rgba(238, 232, 213, 0.72);
  --text-primary-light: var(--madison);

  /* Montserrat (Google Fonts in HTML) — geometric sans, full Latin */
  --font-sans: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-ui: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  /* Footer email chip + social SVG tiles — same height */
  --footer-control-height: 2.4rem;
  --footer-logo-size: 48px;

  /* Type scale — comp hierarchy */
  --fs-caption: 0.75rem; /* 12px — micro */
  --fs-label: 0.8125rem; /* 13px — nav pills, skill tags */
  --fs-body: 1rem; /* 16px — body on dark */
  --fs-body-lg: 1.125rem; /* 18px — about lead */
  --fs-subtitle: 0.875rem; /* 14px — small secondary lines */
  --fs-print-vol: clamp(1.875rem, 5vw, 2.5rem); /* large white vol */
  --fs-print-sub: clamp(0.9375rem, 2.1vw, 1.0625rem);
  /* Footer CTA — base clamp + 23pt; weight 900 */
  --fs-footer-cta: calc(clamp(1.15rem, 2.4vw, 1.5rem) + 23pt);
  --fs-contact: 0.9375rem; /* 15px */
  --fs-project-title: clamp(1.0625rem, 2.2vw, 1.3125rem);
  --fs-project-kicker: 0.8125rem;

  --fw-regular: 400;
  --fw-bold: 700;
  --fw-heavy: 900;

  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-snug: 1.45;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 9vw, 6rem);
  /* Vertical rhythm: bands (hero / footer) vs content sections */
  --space-band-y: clamp(4.25rem, 9.5vw, 6.5rem);
  --space-section-y: clamp(3.25rem, 7vw, 5.25rem);
  /* Horizontal inset — one value sitewide */
  --section-inline: clamp(1.25rem, 5vw, 3rem);
  --section-inline-wide: clamp(1.5rem, 6vw, 3.5rem);
  /* Prose stack */
  --prose-gap: 1.125rem;
  --prose-gap-lead: 1.35rem;

  --radius-paper: 2px;
  --shadow-paper: 0 14px 36px rgba(0, 0, 0, 0.42);
  --shadow-paper-lift: 0 16px 40px rgba(0, 0, 0, 0.45);
  --border-subtle: 1px solid rgba(238, 232, 213, 0.38);
  /* Buttons, chevrons, text links styled as controls — on dark / transparent surfaces */
  --button-stroke: var(--border-subtle);
  /* Filled light surfaces (lusta pills, madison chips) */
  --button-stroke-on-fill: 1px solid rgba(48, 67, 85, 0.28);
  --mat-cream: #f7f4eb;
  --grain-opacity: 0.085;
  /* Buttons / pill links: slightly transparent at rest → full opacity on hover → contrast on press */
  --interactive-opacity-rest: 0.88;
  --interactive-opacity-hover: 1;
  --interactive-transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  /* Linked web cards + print spreads: soft lusta “pearl” rim + lift (half-strong highlight top) */
  --card-link-hover-scale: 1.045;
  --card-hover-lusta-halo:
    0 -4px 18px rgba(255, 252, 248, 0.35),
    0 6px 22px rgba(238, 232, 213, 0.28),
    0 16px 44px rgba(238, 232, 213, 0.14),
    inset 0 1px 0 rgba(255, 252, 248, 0.4);
  --content-max: 1120px;
  /* Footer CTA line length — “Let’s build…” */
  --footer-cta-max: min(40rem, 100%);
  --measure-text: 38rem;
  /* About portrait column — .photo-stack is 92% of this (front card = same width) */
  --portrait-column-max: 600px;
  --portrait-column-max-sm: 420px;
  --hero-stack-max: 380px;
  --hero-stack-max-sm: 360px;
  --hero-stack-aspect: 3 / 4.15;
  /* Print works: .magazine-card (+ larger holder in print / work row) */
  --works-visual-max: 460px;
  /* Native width of spread JPG export — display never scales above 1:1 */
  --print-spread-max-w: 768px;
  /* Tight top — avoids empty band above the spread (see print column align) */
  --print-holder-pad-inline: 1.35rem;
  --print-holder-padding: 0.45rem var(--print-holder-pad-inline) 1.25rem;
  /* Matches .print-spread__chevrons padding-inline — vol/sub align to ‹ › on narrow layouts */
  --print-issue-chevron-inline: clamp(0.15rem, 2vw, 0.75rem);
  --print-holder-gap: clamp(0.9rem, 2.2vw, 1.35rem);
  --works-inner-aspect: 3 / 4;
  /* #projects: mobile / single-column cap; desktop width comes mostly from grid span */
  --web-project-stack-max: 1420px;
  /* Web stack shape: landscape vs print works (3/4); shorter + reads wider */
  --web-project-stack-aspect: 4 / 3;
  /* Uniform shrink (not narrower-only): scales width + height together */
  --web-project-stack-scale: 1;
  --web-project-stack-shift-x: 0; /* grid-centered stack */
  --web-project-stack-width-trim: 4px; /* narrower than grid cell; not the same as scale */
  --web-project-tag-shift-x: -20px; /* pull role tag toward thumbnail */
  /* #projects role box — narrower than global .tag-box */
  --web-project-tag-max: 220px;
  --tag-box-max: 272px;
  /* All .tag-box frames share this stroke; only type scales differ by context */
  --tag-box-border: var(--button-stroke);
  /* One torn asset: flip vertically for footer / lower transitions */
  --torn-edge-svg: url("../assets/torn%20edge.svg");
  /* Hero → about: running tear, face up */
  --torn-hero-about-svg: url("../assets/torn_running%20left_face_up.svg");
  /* Print `.work-area`: paradiso band below web (#projects); torn SVG may still embed teal in the asset */
  --torn-work-svg: url("../assets/torn_running%20left_work_section.svg");
  /* Work / dark sections → footer: lusta tear */
  --torn-footer-svg: url("../assets/torn_running_right_footer.svg");
  /* Project case study (comp): gold UI accents on dark */
  --project-accent-gold: #e8c45c;
  --project-accent-gold-dim: rgba(232, 196, 92, 0.38);
  --fs-project-hed: clamp(1.65rem, 3.8vw, 2.65rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--nero);
  font-family: var(--font-sans);
  overflow-x: clip;
  /* Thumb tint only — transparent track avoids a full-height “stripe” over lusta / paradiso */
  scrollbar-color: rgba(238, 232, 213, 0.35) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(238, 232, 213, 0.32);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(238, 232, 213, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-primary-dark);
  background-color: var(--nero);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.page-loading {
  overflow: hidden;
}

/* ——— Initial load overlay ——— */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  /* Nero behind stroke draw; --logo-fill matches --paradiso site-wide */
  background: var(--nero);
  color: var(--lusta);
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.page-loader--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.page-loader__brand {
  width: min(160px, 42vw);
  aspect-ratio: 291.8 / 404.3;
}

.page-loader__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-loader__mark {
  stroke: var(--nero);
}

.page-loader--draw .page-loader__mark {
  animation:
    page-loader-draw-stroke 1.75s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    logo-mark-stroke-dark-to-logo 1.75s ease forwards;
}

@keyframes page-loader-draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-mark-stroke-dark-to-logo {
  from {
    stroke: var(--nero);
  }

  to {
    stroke: var(--logo-fill);
  }
}

@keyframes logo-mark-stroke-ming-to-logo {
  from {
    stroke: var(--ming);
  }

  to {
    stroke: var(--logo-fill);
  }
}

.page-loader--draw .page-loader__filled {
  animation: page-loader-fill-reveal 0.42s ease 1.65s forwards;
}

.page-loader--draw .page-loader__strokes {
  animation: page-loader-stroke-fade 0.38s ease 1.65s forwards;
}

@keyframes page-loader-fill-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes page-loader-stroke-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.page-loader--instant .page-loader__filled {
  opacity: 1;
}

.page-loader--instant .page-loader__strokes {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition: opacity 0.12s ease, visibility 0.12s ease;
  }

  .page-loader--draw .page-loader__mark,
  .page-loader--draw .page-loader__filled,
  .page-loader--draw .page-loader__strokes {
    animation: none;
  }

  :root {
    --interactive-transition: opacity 0.01s ease, background-color 0.01s ease, color 0.01s ease,
      border-color 0.01s ease;
  }
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Sit above decorative .torn-edge strips (z-index 0) that sit between/siblings. */
main {
  position: relative;
  z-index: 1;
}

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

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: none;
  border: 2px solid var(--lusta);
  color: var(--lusta);
  font-size: var(--fs-label);
}

.skip-link:focus {
  left: 0.5rem;
  z-index: 100001;
}

.paper-surface {
  position: relative;
  isolation: isolate;
}

.paper-surface::after {
  content: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Torn dividers ——— */

.hero-about-gap {
  height: 2px;
  width: 100%;
  flex-shrink: 0;
  background: var(--nero);
}

/* Base divider — modifiers below must follow so they override (same specificity). */
.torn-edge {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--torn-edge-svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  height: clamp(72px, 15vw, 180px);
  filter: none;
}

/*
 * Hero → about: running tear, face up. Must come after .torn-edge so background + height win.
 */
.torn-edge--under-hero {
  --tear-under-h: clamp(100px, 22vw, 260px);
  height: var(--tear-under-h);
  margin-top: calc(-1 * (var(--tear-under-h) - 2px));
  background-image: var(--torn-hero-about-svg);
  background-position: center top;
  background-size: cover;
}

/* About → more projects: pull up so the tear peeks over Nero as you scroll */
.torn-edge--peek-more {
  margin-top: calc(-1 * clamp(40px, 8vw, 88px));
  height: clamp(96px, 18vw, 220px);
  background-position: center bottom;
}

/*
 * Web projects (nero) → print band: work SVG on its own strip with transparent bg only.
 * If this image sat on top of background-color: nero, transparent pixels pick up that fill → flat seam.
 */
.torn-edge--into-print {
  height: clamp(72px, 16vw, 180px);
  margin-top: calc(-1 * clamp(28px, 6vw, 64px));
  background-color: transparent;
  background-image: var(--torn-work-svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  filter: none;
}

/* Solid print block below the torn bridge — keep top tight so the band doesn’t read as empty space */
.work-area {
  position: relative;
  z-index: 0;
  background-color: var(--paradiso);
}

.work-area > .section.project-showcase {
  padding-top: clamp(0.35rem, 1.5vw, 1rem);
  padding-bottom: calc(var(--space-section-y) + clamp(3rem, 11vw, 8rem));
}

/*
 * Landing: paradiso print band → lusta footer (torn SVG; transparent areas use background-color).
 * Case studies: dark bands → footer — .torn-edge--bottom keeps nero so the tear matches the page.
 */
.torn-edge--footer,
.torn-edge--bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  height: clamp(64px, 14vw, 170px);
  margin-top: calc(-1 * clamp(32px, 7vw, 72px));
  transform: none;
  transform-origin: center;
  background-image: var(--torn-footer-svg);
  background-repeat: no-repeat;
  background-position: center top;
  /* Slight overscan avoids 1px seams at the right edge on some DPRs */
  background-size: calc(100% + 2px) auto;
  filter: none;
  overflow: visible;
}

.torn-edge--footer {
  background-color: var(--paradiso);
}

.torn-edge--bottom {
  background-color: var(--nero);
}

/* ——— Sections ——— */

.section {
  position: relative;
  z-index: 1;
  padding: var(--space-section-y) var(--section-inline);
}

.section--nero {
  background: none;
  color: var(--text-primary-dark);
}

.section--madison {
  background-color: var(--madison);
  color: var(--text-primary-dark);
}

/* Solid Madison — tear lives only on .torn-edge--under-hero (avoids double / misaligned art). */
#about.section--madison {
  position: relative;
  margin-top: -1px;
  padding-top: clamp(3.5rem, 11vw, 7rem);
  padding-bottom: calc(var(--space-section-y) + clamp(4rem, 11vw, 7rem));
}

.section--paradiso {
  background-color: var(--paradiso);
  color: var(--lusta);
}

.section--lusta {
  background: none;
  color: var(--text-primary-light);
}

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

/* ——— 12-column grid (comp reference: inner content cols 2–11) ——— */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.65rem, 1.8vw, 1.25rem);
  row-gap: var(--space-md);
  width: 100%;
}

/* ——— Hero ——— */

.hero {
  position: relative;
  z-index: 1;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem) var(--section-inline);
  font-weight: var(--fw-bold);
}

.hero__fireworks-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero .section__inner {
  position: relative;
  z-index: 1;
}

/* Single full-bleed canvas — no separate side “boxes”; gutters are computed in JS */
.hero__fireworks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero .hero__grid {
  width: 100%;
  align-items: center;
  align-content: center;
  justify-items: center;
}

.hero__stack {
  position: relative;
  width: 100%;
  max-width: min(100%, var(--hero-stack-max));
  aspect-ratio: var(--hero-stack-aspect);
  grid-column: 4 / span 6;
  justify-self: center;
}

@media (max-width: 820px) {
  .hero__stack {
    grid-column: 1 / -1;
    max-width: min(100%, var(--hero-stack-max-sm));
  }
}

.hero__sheet {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-paper);
}

.hero__sheet--back {
  background: var(--logo-fill);
  transform: rotate(-4deg) translate(-12px, 10px);
  z-index: 0;
}

.hero__sheet--front {
  box-shadow: var(--shadow-paper);
  background-color: var(--lusta);
  transform: rotate(1.5deg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  row-gap: clamp(0.75rem, 2.5vw, 1.25rem);
  padding: clamp(1.75rem, 4.5vw, 2.5rem) clamp(1.1rem, 3.5vw, 1.65rem)
    clamp(0.65rem, 2vw, 1rem);
  /* Same stroke language as buttons on lusta — keeps nav copy inside a clear frame */
  border: var(--button-stroke-on-fill);
  box-sizing: border-box;
}

.hero__sheet--front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("../assets/textured%20paper.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.hero__sheet--front > * {
  position: relative;
  z-index: 1;
}

.hero__logo {
  display: grid;
  grid-template: 1fr / 1fr;
  width: min(55%, 220px);
  flex: 0 0 auto;
  margin-top: calc(clamp(0.35rem, 1.5vw, 0.85rem) + 2px);
}

.hero__logo > * {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

.hero__logo-bare {
  display: block;
}

.hero__logo-overlay {
  pointer-events: none;
  overflow: visible;
}

.hero__logo-strokes {
  opacity: 0;
}

.hero__logo-mark {
  stroke: var(--nero);
}

.hero__logo:hover .hero__logo-mark {
  animation:
    page-loader-draw-stroke 1.75s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    logo-mark-stroke-ming-to-logo 1.75s ease forwards;
}

.hero__logo:hover .hero__logo-strokes {
  opacity: 1;
  animation: page-loader-stroke-fade 0.38s ease 1.65s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo:hover .hero__logo-mark,
  .hero__logo:hover .hero__logo-strokes {
    animation: none;
  }

  .hero__logo:hover .hero__logo-strokes {
    opacity: 0;
  }
}

.hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  justify-content: center;
  margin-top: auto;
  margin-bottom: clamp(0.35rem, 1.5vw, 0.65rem);
  padding-top: clamp(0.5rem, 2vw, 1rem);
}

.hero__nav a {
  padding: 0.42rem 0.85rem;
  border: var(--button-stroke-on-fill);
  box-sizing: border-box;
  border-radius: 2px;
  color: var(--madison);
  text-decoration: none;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  line-height: 1.35;
  background: transparent;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.hero__nav a:hover {
  opacity: var(--interactive-opacity-hover);
  background-color: rgba(56, 108, 119, 0.14); /* --ming tint */
  border-color: rgba(48, 67, 85, 0.45);
}

.hero__nav a:focus-visible {
  opacity: var(--interactive-opacity-hover);
  outline: none;
  background-color: rgba(56, 108, 119, 0.14);
  border-color: rgba(48, 67, 85, 0.5);
}

.hero__nav a:active {
  opacity: var(--interactive-opacity-hover);
  background-color: var(--paradiso);
  color: var(--lusta);
  border-color: var(--paradiso);
}

.hero__scroll {
  color: var(--paradiso);
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-bottom: var(--space-xs);
  line-height: 0;
}

.hero__scroll svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.25;
}

/* ——— About ——— */

.about-grid {
  align-items: center;
  row-gap: clamp(2.75rem, 7vw, 4.5rem);
}

.about__text {
  grid-column: 2 / span 4;
  max-width: var(--measure-text);
  justify-self: start;
  text-align: left;
  font-family: var(--font-sans);
}

/* Lined frame — same stroke as .tag-box / print holder */
.about__text--boxed {
  border: var(--tag-box-border);
  padding: 1.15rem 1.25rem 1.25rem;
  box-sizing: border-box;
}

.about__text p {
  margin: 0 0 var(--prose-gap);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(238, 232, 213, 0.93);
  letter-spacing: 0.015em;
  max-width: none;
}

.about__text p:last-of-type {
  margin-bottom: 0;
}

.about__text p:first-of-type {
  margin-bottom: var(--prose-gap-lead);
}

.about__photos {
  position: relative;
  grid-column: 6 / span 6;
  min-height: clamp(380px, 50vw, 540px);
  justify-self: end;
  width: 100%;
  max-width: min(100%, var(--portrait-column-max));
}

@media (max-width: 820px) {
  .about__text,
  .about__photos {
    grid-column: 1 / -1;
  }

  .about-grid {
    align-items: start;
  }

  .about__photos {
    justify-self: center;
    max-width: min(100%, var(--portrait-column-max-sm));
  }

  .photo-stack {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Absolute children don’t expand the box — give the stack a real height from width. */
.photo-stack {
  position: relative;
  width: 92%;
  max-width: 100%;
  margin-left: auto;
  aspect-ratio: 1;
  min-height: 200px;
}

.photo-stack__item {
  position: absolute;
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  background: rgba(238, 232, 213, 0.08);
}

.photo-stack__item:nth-child(1) {
  width: 100%;
  aspect-ratio: 1;
  top: 0;
  right: 0;
  z-index: 4;
  transform: rotate(-2deg);
}

.photo-stack__item:nth-child(2) {
  width: 92%;
  aspect-ratio: 1;
  top: 18px;
  right: 24px;
  z-index: 3;
  transform: rotate(5deg);
  opacity: 0.85;
}

.photo-stack__item:nth-child(3) {
  width: 88%;
  aspect-ratio: 1;
  top: 36px;
  right: 8px;
  z-index: 2;
  transform: rotate(-6deg);
  opacity: 0.65;
}

.photo-stack__item:not(:first-child) {
  background: none;
}

.photo-stack__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ——— Project showcases (12-col grid — layout reference) ——— */

.project-showcase {
  position: relative;
  z-index: 1;
  padding-block: var(--space-section-y);
  padding-inline: var(--section-inline-wide);
}

#projects.project-showcase {
  /* Tight band under peek-more — avoid tall empty nero above carousel */
  padding-top: clamp(0.35rem, 1.5vw, 1rem);
}

.project-showcase__row {
  align-items: center;
  row-gap: var(--space-md);
}

/* Stack + role tag bottom-aligned; chevrons vertically centered in the row */
.project-showcase__row--web {
  align-items: end;
}

/* Web: ‹ col 1 · stack cols 2–9 (span 8) · tag 10–11 · › col 12 */
.project-showcase__row--web .project-showcase__chev--start {
  grid-column: 1;
  justify-self: end;
  align-self: center;
}

/* Outer shell — span 8/12 for a wider tile */
.project-showcase__row--web .project-showcase__shuffle {
  grid-column: 2 / span 8;
  min-width: 0;
  position: relative;
  width: calc(100% - var(--web-project-stack-width-trim));
  max-width: none;
  margin-left: var(--web-project-stack-shift-x);
  margin-right: 0;
  padding: 0.625rem;
  box-sizing: border-box;
  box-shadow: none;
  filter: none;
  transform-origin: left bottom;
  transform: scale(var(--web-project-stack-scale));
  justify-self: start;
}

/* Viewport: web-only aspect (shorter / wider than print 3:4) */
.project-showcase__shuffle-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--web-project-stack-aspect);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
}

.project-showcase__shuffle-viewport--empty {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}

.project-showcase__shuffle-viewport .project-showcase__empty {
  margin: 0;
  max-width: 28rem;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: rgba(238, 232, 213, 0.88);
}

.project-showcase__shuffle-viewport .project-showcase__empty code {
  font-size: 0.92em;
  color: rgba(238, 232, 213, 0.95);
}

.project-showcase__shuffle-viewport .project-showcase__empty strong {
  font-weight: var(--fw-bold);
}

.project-showcase__shuffle-viewport .project-showcase__slide {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
  aspect-ratio: var(--tile-aspect, var(--web-project-stack-aspect));
  border-radius: 0;
  overflow: visible;
  background: transparent;
  width: min(88%, 100%);
  max-width: 100%;
  height: auto;
  transform-origin: bottom center;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    width 0.35s ease;
}

.project-showcase__shuffle-viewport .project-showcase__slide--depth-0 {
  width: min(92%, 100%);
  z-index: 4;
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.project-showcase__shuffle-viewport .project-showcase__slide--depth-1 {
  width: min(84%, 100%);
  z-index: 3;
  transform: translate(-48%, 0) rotate(6deg);
  opacity: 0.92;
  pointer-events: none;
}

.project-showcase__shuffle-viewport .project-showcase__slide--depth-2 {
  width: min(76%, 100%);
  z-index: 2;
  transform: translate(-52%, 0) rotate(-7deg);
  opacity: 0.68;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase__shuffle-viewport .project-showcase__slide {
    transition: none;
  }
}

/* Print spread — stacked pages (shuffle + wheel), portrait 3:4, up to 4 deep */
.project-showcase__shuffle--print {
  width: 100%;
  max-width: min(100%, var(--print-spread-max-w));
  margin-inline: auto;
  min-width: 0;
}

.project-showcase__shuffle-viewport--print {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--print {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  aspect-ratio: var(--tile-aspect, 768 / 1024);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  width: min(88%, 100%);
  max-width: 100%;
  height: auto;
  transform-origin: center center;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    width 0.35s ease;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--print .magazine-card__pdf-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.35rem;
  box-sizing: border-box;
}

.project-showcase__shuffle-viewport--print .magazine-card__spread-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--depth-0 {
  width: min(92%, 100%);
  z-index: 5;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--depth-1 {
  width: min(84%, 100%);
  z-index: 4;
  transform: translate(-48%, -50%) rotate(5deg);
  opacity: 1;
  pointer-events: none;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--depth-2 {
  width: min(76%, 100%);
  z-index: 3;
  transform: translate(-52%, -50%) rotate(-6deg);
  opacity: 1;
  pointer-events: none;
}

.project-showcase__shuffle-viewport--print .project-showcase__slide--depth-3 {
  width: min(68%, 100%);
  z-index: 2;
  transform: translate(-50%, -50%) rotate(7deg);
  opacity: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase__shuffle-viewport--print .project-showcase__slide--print {
    transition: none;
  }
}

.project-showcase__card {
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional wrap when manifest entry includes "href" — front card only is interactive (see inert in main.js) */
a.project-showcase__card-link {
  display: block;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
  position: relative;
  z-index: 0;
  transform-origin: center center;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

a.project-showcase__card-link:hover {
  z-index: 2;
  transform: scale(var(--card-link-hover-scale));
  box-shadow: var(--card-hover-lusta-halo);
}

a.project-showcase__card-link:focus-visible {
  outline: none;
  z-index: 2;
  transform: scale(var(--card-link-hover-scale));
  box-shadow:
    var(--card-hover-lusta-halo),
    0 0 0 2px rgba(238, 232, 213, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  a.project-showcase__card-link {
    transition: box-shadow 0.2s ease;
  }

  a.project-showcase__card-link:hover,
  a.project-showcase__card-link:focus-visible {
    transform: none;
  }

  .project-showcase__shuffle-viewport--print .magazine-card__pdf-card {
    transition:
      background-color 0.2s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.2s ease;
  }

  .project-showcase__shuffle-viewport--print .magazine-card__pdf-card:hover,
  .project-showcase__shuffle-viewport--print .magazine-card__pdf-card:focus-visible {
    transform: none;
  }
}

img.project-showcase__card {
  object-fit: contain;
}

/* Layout-only stand-ins (swap for img or inline SVG later) */
.project-showcase__card--placeholder {
  border: 1px solid rgba(238, 232, 213, 0.22);
  background: linear-gradient(160deg, #e6e2d6 0%, #d4cec0 100%);
}

.project-showcase__shuffle-viewport > .project-showcase__slide:nth-child(2) .project-showcase__card--placeholder {
  background: linear-gradient(155deg, #dcd6c8 0%, #c9c2b2 100%);
}

.project-showcase__shuffle-viewport > .project-showcase__slide:nth-child(3) .project-showcase__card--placeholder {
  background: linear-gradient(150deg, #d0cabe 0%, #bdb5a4 100%);
}

/* Fixed footprint so role copy swaps don’t resize the frame (was shrink-to-fit on .tag-box) */
.project-showcase__row--web .project-showcase__tag {
  grid-column: 10 / span 2;
  justify-self: end;
  align-self: end; /* overrides .tag-box { align-self: center } — line up with stack bottom */
  transform: translateX(var(--web-project-tag-shift-x));
  font-size: calc(var(--fs-label) - 1px);
  width: min(100%, var(--web-project-tag-max));
  max-width: min(100%, var(--web-project-tag-max));
  min-height: calc(1.15rem + 3 * 1.75em + 1.2rem);
  box-sizing: border-box;
}

.project-showcase__row--web .project-showcase__tag .project-showcase__role-sep {
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: 0;
}

.project-showcase__row--web .project-showcase__chev--end {
  grid-column: 12;
  justify-self: start;
  align-self: center;
}

/* Print: ‹ › in wrapper (display:contents on desktop) · copy cols 2–5 · holder cols 6–11 */
.project-showcase__row--print .print-spread__chevrons {
  display: contents;
}

.project-showcase__row--print .print-spread__chevrons .project-showcase__chev--start {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

.project-showcase__row--print .print-spread__chevrons .project-showcase__chev--end {
  grid-column: 12;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

.project-showcase__row--print .project-showcase__copy {
  grid-column: 2 / span 4;
  grid-row: 1;
}

.project-showcase__row--print .project-showcase__print-visual {
  grid-column: 6 / span 6;
  grid-row: 1;
  margin-inline-start: clamp(0.75rem, 2.8vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  min-width: 0;
  border: var(--tag-box-border);
  padding: var(--print-holder-padding);
  box-sizing: border-box;
  gap: var(--print-holder-gap);
}

.project-showcase__row--print .magazine-card {
  max-width: 100%;
  width: 100%;
  margin: 0;
  transform: none;
  box-shadow: none;
  padding: 0;
}

/* Within-issue page nav — mobile only (wheel is awkward on touch; issue ‹ › stay below) */
.project-showcase__row--print .print-spread__page-nav {
  display: none;
}

@media (max-width: 900px) {
  .project-showcase__row--print .print-spread__page-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 8vw, 3rem);
    width: 100%;
    padding-block: 0.35rem 0.15rem;
    box-sizing: border-box;
  }

  .project-showcase__row--print .print-spread__page-nav[hidden] {
    display: none !important;
  }

  .project-showcase__row--print .print-spread__page-nav .print-spread__page-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.project-showcase__chev {
  appearance: none;
  margin: 0;
  background: transparent;
  border: var(--button-stroke);
  box-sizing: border-box;
  cursor: pointer;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--lusta);
  opacity: var(--interactive-opacity-rest);
  user-select: none;
  padding: 0.25rem 0.35rem;
  font-family: var(--font-sans);
  border-radius: 0.2rem;
  transition: var(--interactive-transition);
}

.project-showcase__chev:hover,
.project-showcase__chev:focus-visible {
  opacity: var(--interactive-opacity-hover);
  outline: none;
  border-color: rgba(238, 232, 213, 0.55);
}

.project-showcase__chev:active {
  opacity: var(--interactive-opacity-hover);
  color: var(--paradiso);
  border-color: var(--paradiso);
}

.project-showcase__chev:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.project-showcase--alt .project-showcase__chev {
  color: var(--lusta);
}

.project-showcase--alt .project-showcase__chev:active {
  color: var(--madison);
  border-color: rgba(238, 232, 213, 0.45);
}

@media (max-width: 900px) {
  .project-showcase__row.grid-12 {
    grid-template-columns: 1fr;
  }

  .project-showcase__row--print .print-spread__chevrons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    width: 100%;
    padding-inline: var(--print-issue-chevron-inline);
    box-sizing: border-box;
    order: 3;
  }

  .project-showcase__row--print .project-showcase__copy {
    order: 1;
  }

  .project-showcase__row--print .project-showcase__print-visual {
    order: 2;
  }

  .project-showcase__row--web.grid-12 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(0.25rem, 2vw, 0.65rem);
  }

  .project-showcase__row--web .project-showcase__chev--start {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .project-showcase__row--web .project-showcase__shuffle {
    grid-column: 2;
    grid-row: 1;
    width: calc(min(100%, var(--web-project-stack-max)) - var(--web-project-stack-width-trim));
    max-width: none;
    margin-left: var(--web-project-stack-shift-x);
    margin-right: 0;
    justify-self: start;
  }

  .project-showcase__row--web .project-showcase__chev--end {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }

  .project-showcase__row--web .project-showcase__tag {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    transform: none;
    width: min(100%, 300px);
    max-width: 300px;
  }

  .project-showcase__row--print .project-showcase__copy,
  .project-showcase__row--print .project-showcase__print-visual {
    grid-column: 1 / -1;
    /* Desktop pins both to row 1; without this they share one cell and overlap */
    grid-row: auto;
  }

  .project-showcase__row--print .project-showcase__print-visual {
    align-items: stretch;
    margin-inline-start: 0;
  }

  /* Pull vol/sub left to match issue ‹ inset (holder had extra horizontal padding) */
  .project-showcase__row--print .project-title-block {
    text-align: left;
    margin-left: calc(var(--print-issue-chevron-inline) - var(--print-holder-pad-inline));
    margin-right: 0;
    max-width: none;
    width: auto;
    align-self: flex-start;
  }
}

.tag-box {
  border: var(--tag-box-border);
  padding: 1.15rem 1.2rem 1.2rem;
  max-width: min(100%, var(--tag-box-max));
  justify-self: end;
  align-self: center;
  background: none;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: rgba(238, 232, 213, 0.96);
  text-align: left;
}

/* Print band: typography + column width — match .about__text (body copy) */
.section--paradiso .tag-box {
  max-width: min(100%, 26rem);
  justify-self: start;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.015em;
  line-height: 1.55;
  font-weight: 300;
  text-align: left;
  color: rgba(238, 232, 213, 0.93);
  text-transform: none;
}

.section--paradiso .tag-box p {
  margin: 0 0 var(--prose-gap);
}

.section--paradiso .tag-box p:last-of-type {
  margin-bottom: 0;
}

.section--paradiso .tag-box p:first-of-type {
  margin-bottom: var(--prose-gap-lead);
}

.tag-box p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.magazine-card {
  background: none;
  color: var(--lusta);
  padding: 0.625rem;
  box-shadow: var(--shadow-paper-lift);
  transform: rotate(1deg);
  max-width: min(100%, var(--works-visual-max));
  margin-left: auto;
}

.magazine-card__inner {
  aspect-ratio: var(--works-inner-aspect);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--space-sm);
  line-height: var(--lh-snug);
}

/* Print work: raster spread — assets/print/print-spread.jpg */
.magazine-card__inner--image {
  aspect-ratio: auto;
  padding: 0;
  background: rgba(238, 232, 213, 0.06);
  min-height: clamp(160px, 28vw, 260px);
}

/* Print work — per-spread folder under assets/print/ (see README.txt) */
.magazine-card__inner--pdf {
  aspect-ratio: auto;
  padding: 0;
  background: rgba(238, 232, 213, 0.06);
  min-height: 0;
  display: block;
}

.magazine-card__pdf-card {
  display: block;
  padding: var(--space-sm);
  box-sizing: border-box;
  text-decoration: none;
  color: var(--lusta);
  border: 1px solid rgba(238, 232, 213, 0.2);
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.magazine-card__pdf-card:hover,
.magazine-card__pdf-card:focus-visible {
  opacity: var(--interactive-opacity-hover);
  background-color: rgba(238, 232, 213, 0.05);
  border-color: rgba(238, 232, 213, 0.35);
  outline: none;
}

.magazine-card__pdf-card:active {
  opacity: var(--interactive-opacity-hover);
  background-color: rgba(82, 131, 132, 0.45);
  border-color: var(--paradiso);
  color: var(--lusta);
}

/* Print spreads: open-full-image links — scale + lusta halo (same language as linked web cards) */
.project-showcase__shuffle-viewport--print .magazine-card__pdf-card {
  position: relative;
  z-index: 0;
  transform-origin: center center;
  opacity: 1;
  transition:
    background-color 0.2s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.project-showcase__shuffle-viewport--print .magazine-card__pdf-card:hover,
.project-showcase__shuffle-viewport--print .magazine-card__pdf-card:focus-visible {
  z-index: 2;
  opacity: 1;
  transform: scale(var(--card-link-hover-scale));
  box-shadow: var(--card-hover-lusta-halo);
}

.project-showcase__shuffle-viewport--print .magazine-card__pdf-card:active {
  opacity: 1;
}

.project-showcase__shuffle-viewport--print .magazine-card__pdf-card:focus-visible {
  box-shadow:
    var(--card-hover-lusta-halo),
    0 0 0 2px rgba(238, 232, 213, 0.85);
}

/* Full width inside spread stack; intrinsic dimensions from each file (update width/height on <img> if exports differ) */
.magazine-card__spread-preview {
  width: 100%;
  height: auto;
  display: block;
}

.magazine-card__img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.project-title-block {
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  text-align: right;
  max-width: min(100%, 24rem);
  margin-left: auto;
}

.project-showcase__row--print .project-title-block {
  margin-top: 0;
  text-align: left;
  max-width: none;
  margin-left: 0;
  font-family: var(--font-sans);
}

.project-title-block .vol {
  font-size: var(--fs-print-vol);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--lusta);
}

.project-title-block .sub {
  margin-top: 0.35rem;
  font-size: var(--fs-print-sub);
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(238, 232, 213, 0.82);
}


/* ——— Footer (comp: left hed · boxed email/phone · .socials 3-up row · round logo) ——— */

.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  /* Tight under the tear — avoids a tall empty cream band (see comp “remove” gap) */
  padding: clamp(0.2rem, 0.85vw, 0.45rem) var(--section-inline) clamp(0.85rem, 2vw, 1.25rem);
  background-color: var(--lusta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-footer__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-bottom: clamp(0.25rem, 0.8vw, 0.5rem);
  text-align: left;
  display: grid;
  gap: clamp(1rem, 2.25vw, 1.4rem);
  align-items: start;
}

.site-footer__back {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-sm);
  text-align: left;
}

.footer__heading {
  grid-column: 1 / -1;
  margin: 0 0 0.15rem;
  max-width: var(--footer-cta-max);
  font-family: var(--font-sans);
  font-size: var(--fs-footer-cta);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--madison);
  text-align: left;
  text-wrap: balance;
  text-rendering: optimizeLegibility;
}

.site-footer h2:not(.footer__heading) {
  margin: 0 0 var(--space-sm);
  max-width: 22rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--madison);
  text-align: left;
}

/* Row: email (wide chip) · socials tucked beside it · logo flush right */
.footer__mid {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(0.5rem, 1.35vw, 0.85rem);
  row-gap: 0.65rem;
  width: 100%;
  margin-top: -15px;
}

.footer__mid .contact-line {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

/* Don’t inherit .contact-line { width: 100% } — keeps email chip hugging text */
.site-footer .contact-line {
  width: auto;
}

.footer__mid .socials {
  flex: 0 0 auto;
}

.footer__mid .footer-brand {
  margin-left: auto;
}

.contact-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.65rem;
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: left;
  font-size: var(--fs-contact);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

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

.contact-line--boxed a {
  border: 1px solid rgba(48, 67, 85, 0.4);
  padding: 0.3rem 0.5rem;
  text-align: left;
  color: var(--madison);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

/* Footer email pill: shrink to label width; height matches .site-footer .socials a */
.site-footer .contact-line--boxed a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--footer-control-height);
  min-height: var(--footer-control-height);
  padding: 0 0.65rem;
  border: var(--button-stroke-on-fill);
  border-radius: 2px;
  background-color: var(--madison);
  color: var(--lusta);
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 1.35vw, 0.8125rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.site-footer .contact-line--boxed a:hover,
.site-footer .contact-line--boxed a:focus-visible {
  text-decoration: none;
  border-color: rgba(238, 232, 213, 0.55);
  background-color: var(--madison);
  opacity: var(--interactive-opacity-hover);
  outline: none;
}

.site-footer .contact-line--boxed a:active {
  opacity: var(--interactive-opacity-hover);
  background-color: var(--paradiso);
  color: var(--lusta);
  border-color: var(--paradiso);
  outline: none;
}

.contact-line--boxed a:hover {
  text-decoration: none;
  border-color: var(--madison);
  background-color: rgba(48, 67, 85, 0.05);
  opacity: var(--interactive-opacity-hover);
}

.contact-line--boxed a:focus-visible {
  text-decoration: none;
  border-color: var(--madison);
  background-color: rgba(48, 67, 85, 0.05);
  opacity: var(--interactive-opacity-hover);
  outline: none;
}

.contact-line--boxed a:active {
  opacity: var(--interactive-opacity-hover);
  background-color: var(--paradiso);
  color: var(--lusta);
  border-color: var(--paradiso);
}

.contact-line:not(.contact-line--boxed) a {
  color: var(--madison);
  text-decoration: none;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.contact-line:not(.contact-line--boxed) a:hover {
  opacity: var(--interactive-opacity-hover);
  text-decoration: none;
}

.contact-line:not(.contact-line--boxed) a:focus-visible {
  opacity: var(--interactive-opacity-hover);
  text-decoration: none;
  outline: none;
}

.contact-line:not(.contact-line--boxed) a:active {
  opacity: var(--interactive-opacity-hover);
  color: var(--paradiso);
}

/* Footer: exactly three icons in one row */
.site-footer .socials {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.site-footer .socials a {
  /* Flex + default stretch (not grid + place-items:center) — keeps img % height from collapsing */
  display: flex;
  flex: 0 0 auto;
  width: var(--footer-control-height);
  height: var(--footer-control-height);
  background: transparent;
  border: var(--button-stroke-on-fill);
  box-sizing: border-box;
  border-radius: 2px;
  text-decoration: none;
  overflow: hidden;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.site-footer .socials a:hover,
.site-footer .socials a:focus-visible {
  opacity: var(--interactive-opacity-hover);
  outline: none;
  border-color: rgba(48, 67, 85, 0.5);
}

.site-footer .socials a:active {
  opacity: var(--interactive-opacity-hover);
  background-color: var(--paradiso);
  border-color: var(--paradiso);
  outline: none;
}

/* Project case pages — stroked footer chips on madison (matches landing footer) */
body.project-case .contact-line--boxed a {
  border: var(--button-stroke-on-fill);
  box-sizing: border-box;
}

body.project-case .site-footer .contact-line--boxed a {
  border: var(--button-stroke-on-fill);
}

body.project-case .site-footer .contact-line--boxed a:hover,
body.project-case .site-footer .contact-line--boxed a:focus-visible {
  border-color: rgba(48, 67, 85, 0.5);
}

body.project-case .site-footer .contact-line--boxed a:active {
  border-color: var(--paradiso);
}

/* Art from assets/social-*.svg (matches socials.svg) — full tile, not generic inline paths */
.site-footer .socials a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

.footer-brand {
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
}

.footer-brand__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 50%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease;
  transform-origin: center center;
}

.footer-brand__link:hover,
.footer-brand__link:focus-visible {
  transform: scale(2);
  z-index: 2;
  position: relative;
  outline: none;
}

.footer-brand__link:focus-visible {
  box-shadow: 0 0 0 2px var(--paradiso);
}

.footer-brand .footer-logo-img {
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
  object-fit: contain;
  border-radius: 50%;
  opacity: 0.98;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand__link {
    transition: none;
  }

  .footer-brand__link:hover,
  .footer-brand__link:focus-visible {
    transform: none;
  }
}

.footer__copyright {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: rgba(48, 67, 85, 0.62);
  text-align: center;
}

@media (max-width: 768px) {
  .footer__mid {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__mid .footer-brand {
    margin-left: 0;
  }

  .contact-line:not(.contact-line--boxed) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .site-footer__inner {
    padding-bottom: 0;
  }

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

  .site-footer .contact-line--boxed a {
    white-space: normal;
    height: auto;
    min-height: var(--footer-control-height);
    padding-block: 0.35rem;
    line-height: 1.25;
  }
}

body.project-case .nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--ming);
  text-decoration: none;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
  border: var(--button-stroke);
  border-radius: 2px;
  padding: 0.45rem 0.9rem;
  min-height: 2.35rem;
  box-sizing: border-box;
}

body.project-case .nav-back:hover {
  opacity: var(--interactive-opacity-hover);
  text-decoration: none;
  border-color: rgba(82, 131, 133, 0.65);
}

body.project-case .nav-back:focus-visible {
  opacity: var(--interactive-opacity-hover);
  text-decoration: none;
  outline: none;
  border-color: rgba(82, 131, 133, 0.75);
}

body.project-case .nav-back:active {
  opacity: var(--interactive-opacity-hover);
  color: var(--paradiso);
  border-color: var(--paradiso);
}

/* ——— Project detail ——— */

.project-hero {
  padding: var(--space-band-y) var(--section-inline) var(--space-lg);
}

.project-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 3.25rem);
  align-items: start;
}

.project-hero__grid > div:first-child {
  text-align: left;
}

@media (max-width: 880px) {
  .project-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Case-study layout aligned to project page comp (12-col hero, teal type, hero image) */
.project-hero__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.65rem, 1.8vw, 1.25rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  width: 100%;
}

/* Project case: hero image column matches text column height; image frame ≥ former 4:3 box */
.project-case .project-hero__layout {
  align-items: stretch;
}

/* Column 1 aligns with .detail-band__prose (same section__inner / grid-12 origin) */
.project-hero__intro {
  grid-column: 1 / span 5;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Match .project-overview horizontal padding so hed/sub align with body copy, not the box edge */
.project-case .project-hero__intro {
  --hero-text-inset-x: 1.25rem;
}

/* Title + sub as one band above the overview card (comp-style stack) */
.project-case .project-hero__titlestack {
  padding-inline: var(--hero-text-inset-x);
  box-sizing: border-box;
  margin-bottom: clamp(0.85rem, 2.2vw, 1.25rem);
}

.project-case .project-hero__titlestack .project-hero__sub {
  margin-bottom: 0;
}

.project-hero__mock {
  grid-column: 6 / span 7;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  container-type: inline-size;
  container-name: project-hero-mock;
}

.project-case .project-hero__intro .final-outcome-link {
  align-self: flex-start;
  margin-top: clamp(0.85rem, 2.2vw, 1.25rem);
}

.project-hero__mock .project-hero__media {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 880px) {
  .project-hero__intro,
  .project-hero__mock {
    grid-column: 1 / -1;
  }
}

.project-hero__hedline {
  margin: 0 0 0.4rem;
  font-size: var(--fs-project-hed);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--paradiso);
}

.project-hero__sub {
  margin: 0 0 var(--space-md);
  max-width: var(--measure-text);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--paradiso);
  opacity: 0.92;
}

/* Lined frame — same stroke as .about__text--boxed / .tag-box */
.project-case .project-overview {
  border: var(--tag-box-border);
  padding: 1.15rem var(--hero-text-inset-x) 1.25rem;
  box-sizing: border-box;
}

.project-case .project-overview h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--paradiso);
  opacity: 0.95;
}

.final-outcome-link {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 0.55rem 1.15rem;
  background: var(--lusta);
  border: var(--button-stroke-on-fill);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--madison);
  opacity: 1;
  transition: var(--interactive-transition);
}

.final-outcome-link:hover {
  opacity: var(--interactive-opacity-hover);
  background: #f5f2e8;
  border-color: rgba(48, 67, 85, 0.4);
}

.final-outcome-link:focus-visible {
  outline: 2px solid var(--paradiso);
  outline-offset: 3px;
}

/* Flat hero art — no device chrome; swap .asset-placeholder for .project-hero__img */
.project-hero__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(238, 232, 213, 0.22);
  box-shadow: var(--shadow-paper);
  background: rgba(0, 0, 0, 0.2);
}

/* Case-study hero: min height = former 4:3 frame (¾ of column width via cqi); grows when text column is taller */
.project-case .project-hero__media {
  aspect-ratio: unset;
  height: auto;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: calc(100cqi * 3 / 4);
  box-shadow: none;
}

.project-hero__media .asset-placeholder {
  min-height: 100%;
}

.project-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-case .project-hero__img {
  min-height: 100%;
}

.detail-band--comp {
  padding-top: clamp(4.75rem, 12vw, 9rem);
  padding-bottom: clamp(4.75rem, 12vw, 9rem);
}

.detail-band--comp .detail-band__grid {
  gap: clamp(2.75rem, 5.5vw, 4.5rem);
}

/* B_S Kit process row: give the book viewer more room */
.detail-band--comp .detail-band__grid--book {
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1.44fr);
}

.detail-band--process-phases .process-phases {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.detail-band--process-phases .process-phases__heading {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-muted-dark);
}

.detail-band--process-phases .process-phases__intro {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Space between consecutive phase rows only */
.detail-band--process-phases .process-phase + .process-phase {
  margin-top: clamp(0.15rem, 0.55vw, 0.4rem);
}

.detail-band--process-phases.detail-band--comp .process-phases__intro {
  width: fit-content;
  max-width: min(100%, 42rem);
}

.detail-band--process-phases .process-phases__reflection {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
}

.detail-band--process-phases.detail-band--comp .process-phases__reflection {
  width: fit-content;
  max-width: min(100%, 42rem);
}

.detail-band--process-phases .process-phases__reflection-title {
  margin: 0 0 0.75rem;
  font-size: var(--fs-project-title);
  font-weight: var(--fw-bold);
  line-height: 1.28;
  color: rgba(238, 232, 213, 0.98);
  text-transform: lowercase;
}

.detail-band--process-phases .process-phases__reflection-text {
  margin: 0;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgba(238, 232, 213, 0.9);
}

/*
 * Case-study process phases (fan artifacts): 12-col row; left column is a flex stack (copy + arrows);
 * right column is images only. Keeps ‹ › under the text box without fragile grid placement on each child.
 */
.project-case .detail-band--process-phases .process-sketch-stack.process-sketch-stack--phase-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.65rem, 1.8vw, 1.25rem);
  /* Vertically center image stack with the text + arrows column */
  align-items: center;
  width: 100%;
  min-width: 0;
  overscroll-behavior: contain;
}

.project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-phase__textGroup {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  min-width: 0;
}

.project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-phase__copy {
  width: fit-content;
  max-width: min(100%, 42rem);
  min-width: 0;
  align-self: start;
}

.project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-sketch-stack__controls {
  align-self: center;
}

.project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-phase__stackGroup {
  grid-column: 6 / span 7;
  min-width: 0;
}

.detail-band--process-phases .process-phase__copy {
  max-width: 42rem;
  min-width: 0;
}

/* Same lined frame as .detail-band__prose — phase label + title + blurb stay inside stroke */
.detail-band--process-phases.detail-band--comp .process-phase__copy {
  border: var(--tag-box-border);
  padding: 1.15rem 1.25rem 1.25rem;
  box-sizing: border-box;
  align-self: start;
}

.detail-band--process-phases .process-phase__label {
  margin: 0 0 0.35rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(238, 232, 213, 0.72);
}

.detail-band--process-phases .process-phase__title {
  margin: 0 0 0.65rem;
  font-size: var(--fs-project-title);
  font-weight: var(--fw-bold);
  line-height: 1.28;
  color: rgba(238, 232, 213, 0.98);
  text-transform: lowercase;
}

.detail-band--process-phases .process-phase__text {
  margin: 0;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgba(238, 232, 213, 0.9);
}

.detail-band__prose {
  max-width: 38rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: rgba(238, 232, 213, 0.94);
  text-align: left;
  justify-self: start;
}

/* Case study: paragraphs smaller than section subheads */
.project-case .detail-band__prose {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-snug);
}

.detail-band--comp .detail-band__prose {
  width: fit-content;
  max-width: min(100%, 42rem);
  border: var(--tag-box-border);
  padding: 1.15rem 1.25rem 1.25rem;
  box-sizing: border-box;
}

/* B_S Kit: single-sentence process note */
.detail-band__prose--brief {
  width: fit-content;
  max-width: min(24rem, 100%);
}

.detail-band--comp .detail-band__prose.detail-band__prose--brief {
  width: fit-content;
  max-width: min(20rem, 100%);
}

.detail-band__prose p {
  margin: 0 0 1.15em;
}

.detail-band__prose p:last-child {
  margin-bottom: 0;
}

/* Process band: letter-paper image stack — behavior in js/process-stack-shuffle.js ([data-process-stack]) */
.process-sketch-stack:not(.process-sketch-stack--phase-split) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 0;
  overscroll-behavior: contain;
}

.process-sketch-stack__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  outline: none;
  /* Wheel advances carousel only while pointer is over this viewport (see process-stack-shuffle.js) */
  cursor: default;
}

.process-sketch-stack__viewport:focus-visible {
  outline: 2px solid var(--paradiso);
  outline-offset: 4px;
}

.process-sketch-stack__slide {
  position: absolute;
  top: 0;
  left: 50%;
  aspect-ratio: 8.5 / 11;
  width: min(92%, 100%);
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border: none;
  transform-origin: top center;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    width 0.35s ease;
}

.process-sketch-stack__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.process-sketch-stack__slide > .asset-placeholder {
  min-height: 100%;
  box-sizing: border-box;
}

.process-sketch-stack__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.process-sketch-stack__btn {
  appearance: none;
  margin: 0;
  background: transparent;
  border: var(--button-stroke);
  box-sizing: border-box;
  cursor: pointer;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--lusta);
  opacity: var(--interactive-opacity-rest);
  user-select: none;
  padding: 0.25rem 0.4rem;
  font-family: var(--font-sans);
  border-radius: 0.2rem;
  transition: var(--interactive-transition);
}

.process-sketch-stack__btn:hover,
.process-sketch-stack__btn:focus-visible {
  opacity: var(--interactive-opacity-hover);
  outline: none;
  border-color: rgba(238, 232, 213, 0.55);
}

.process-sketch-stack__btn:active {
  opacity: var(--interactive-opacity-hover);
  color: var(--paradiso);
  border-color: var(--paradiso);
}

.process-sketch-stack__btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  border-color: rgba(238, 232, 213, 0.22);
}

@media (max-width: 480px) {
  .process-sketch-stack__btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.project-case .project-hero {
    padding-inline: clamp(0.85rem, 4vw, 1.5rem);
  }

  body.project-case .detail-band {
    padding-inline: clamp(0.85rem, 4vw, 1.5rem);
  }

  .project-case .project-hero__intro {
    --hero-text-inset-x: 1rem;
  }
}

/* B_S Kit: process PDF viewer */
.process-pdf {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: min(100%, clamp(360px, 52vw, 720px));
  justify-self: end;
}

.process-pdf__frame {
  position: relative;
  aspect-ratio: 8.5 / 11;
  min-height: clamp(520px, 74vh, 980px);
  border-radius: var(--radius-paper);
  overflow: hidden;
  background-color: #111;
}

.process-pdf__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.process-book {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.6rem;
  padding: 0.75rem;
}

.process-book__spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  min-height: 0;
  align-items: stretch;
}

.process-book__page {
  width: 100%;
  height: 100%;
  background: #181818;
  border: 1px solid rgba(238, 232, 213, 0.16);
  border-radius: 2px;
}

.process-book__page.is-hidden {
  visibility: hidden;
}

.process-book__page.is-cover {
  grid-column: 1 / span 2;
}

.process-book__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.process-book__status {
  margin: 0;
  text-align: center;
  font-size: var(--fs-subtitle);
  color: var(--text-muted-dark);
}

.process-pdf__link,
.process-pdf__hint {
  font-size: var(--fs-subtitle);
  color: var(--text-muted-dark);
}

.process-pdf__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border: var(--button-stroke);
  color: var(--text-primary-dark);
  text-decoration: none;
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

.process-pdf__cta:hover,
.process-pdf__cta:focus-visible {
  opacity: var(--interactive-opacity-hover);
  color: var(--text-primary-dark);
}

@media (max-width: 980px) {
  .process-pdf {
    max-width: min(100%, clamp(320px, 70vw, 620px));
    justify-self: stretch;
  }

  .process-pdf__frame {
    min-height: clamp(420px, 68vh, 820px);
  }
}

.process-pdf__link a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .process-sketch-stack__slide {
    transition: none;
  }
}

.project-case .asset-grid--comp .asset-grid__cell {
  border-color: var(--project-accent-gold-dim);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(232, 196, 92, 0.08);
}

/* Template default: no gold rim on outcome cells (subtle lusta border + drop shadow only) */
.project-case .asset-grid--comp.asset-grid--outcome-plain .asset-grid__cell {
  border-color: rgba(238, 232, 213, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Case-study gallery: wider track + taller frames (7+5 felt cramped / “narrow”) */
.project-case .asset-grid--comp {
  max-width: min(100%, 1380px);
  gap: clamp(1rem, 2.6vw, 1.75rem);
}

.project-case .asset-grid--comp .asset-grid__cell {
  min-height: clamp(260px, 32vw, 480px);
}

.project-case .asset-grid--comp .asset-grid__cell--half {
  min-height: clamp(300px, 38vw, 580px);
}

.project-case .asset-grid--comp .asset-grid__cell--span-12 {
  min-height: clamp(380px, 46vw, 720px);
}

.project-case .asset-grid--comp .asset-grid__cell:has(> img),
.project-case .asset-grid--comp .asset-grid__cell:has(> .asset-grid__media--video) {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.project-case .asset-grid--comp .asset-grid__cell--video-hero:has(> .asset-grid__media--video) {
  aspect-ratio: 16 / 9;
}

@media (max-width: 720px) {
  .project-case .asset-grid--comp .asset-grid__cell--half {
    min-height: clamp(240px, 52vw, 420px);
  }

  .project-case .asset-grid--comp .asset-grid__cell--span-12 {
    min-height: clamp(280px, 56vw, 520px);
  }
}

.asset-grid__cell--span-7 {
  grid-column: span 7;
  min-height: clamp(220px, 28vw, 400px);
}

.asset-grid__cell--span-5 {
  grid-column: span 5;
  min-height: clamp(200px, 26vw, 380px);
}

.asset-grid__cell--span-12 {
  grid-column: span 12;
  min-height: clamp(240px, 32vw, 420px);
}

@media (max-width: 720px) {
  .asset-grid--comp .asset-grid__cell--span-7,
  .asset-grid--comp .asset-grid__cell--span-5,
  .asset-grid--comp .asset-grid__cell--span-12 {
    grid-column: span 2;
  }
}

.project-kicker {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-project-kicker);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--paradiso);
}

.project-kicker strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-project-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--lusta);
}

/* Preferred case-study header (projects/_template): real <h1> + lede */
.project-hero__title {
  margin: 0 0 0.35rem;
  font-size: var(--fs-project-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--lusta);
}

.project-lede {
  margin: 0 0 var(--space-sm);
  max-width: var(--measure-text);
  font-size: var(--fs-project-kicker);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--paradiso);
}

/* Solid band — avoids transparent stacking that can read as a mismatched strip at the viewport edge */
.project-outcome {
  background-color: var(--nero);
}

/* Centered “back to home” between gallery and footer tear (projects/_template)
   Stack above .torn-edge--bottom: its negative margin-top + z-index would paint over this strip and hide the links */
.project-case-back {
  position: relative;
  z-index: 2;
  padding-top: clamp(1.25rem, 3.5vw, 2rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: 80px;
}

/* .nav-back defaults to --ming (body.project-case); on dark band use lusta + same stroke */
body.project-case .project-case-back .nav-back {
  color: var(--text-primary-dark);
}

body.project-case .project-case-back .nav-back:hover,
body.project-case .project-case-back .nav-back:focus-visible {
  border-color: rgba(238, 232, 213, 0.55);
}

.project-case-back__inner {
  display: block;
}

.project-case-back__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  gap: clamp(0.65rem, 2vw, 1.25rem);
}

.project-case-back__link {
  gap: 0.45em;
  white-space: nowrap;
}

.project-case-back__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 0;
  color: inherit;
}

.project-case-back__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.project-case-back__label {
  line-height: 1.2;
}

.project-case-back__link--prev {
  justify-self: start;
  justify-content: flex-start;
  text-align: left;
}

.project-case-back__link--next {
  justify-self: end;
  justify-content: flex-end;
  text-align: right;
}

/* When only one nav link is present, keep intended edge alignment */
.project-case-back__nav > .project-case-back__link--prev:only-child {
  grid-column: 1;
  justify-self: start;
}

.project-case-back__nav > .project-case-back__link--next:only-child {
  grid-column: 2;
  justify-self: end;
}

@media (max-width: 560px) {
  .project-case-back__nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.65rem;
  }

  .project-case-back__link--prev,
  .project-case-back__link--next {
    justify-self: center;
    text-align: center;
    white-space: normal;
  }
}

.project-outcome__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-muted-dark);
}

.asset-grid__cell:has(> img),
.asset-grid__cell:has(> .asset-grid__media--video) {
  display: grid;
}

.asset-grid__cell > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

/* B_S Kit outcome: keep native image ratios (no hard crop) */
.project-case .asset-grid--native-ratio .asset-grid__cell:has(> img) {
  aspect-ratio: auto;
  min-height: 0;
}

.project-case .asset-grid--native-ratio .asset-grid__cell > img {
  height: auto;
  object-fit: contain;
}

.project-case .asset-grid--native-ratio .asset-grid__cell--half,
.project-case .asset-grid--native-ratio .asset-grid__cell--span-12 {
  min-height: 0;
}

/* Native-ratio galleries: masonry flow avoids empty row gaps from CSS grid track sizing */
.project-case .asset-grid--native-ratio {
  display: block;
  columns: 2 320px;
  column-gap: clamp(1rem, 2.6vw, 1.75rem);
}

.project-case .asset-grid--native-ratio .asset-grid__cell {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(1rem, 2.6vw, 1.75rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 720px) {
  .project-case .asset-grid--native-ratio {
    columns: 1 100%;
  }
}

/* Case-study outcome: video + filename-based hover label */
.asset-grid__media--video {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: inherit;
}

.asset-grid__media--video .asset-grid__video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  background: rgba(0, 0, 0, 0.35);
}

.asset-grid__video-hover-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.85rem 0.65rem;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--lusta);
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.22s ease;
}

@media (hover: hover) {
  .asset-grid__media--video .asset-grid__video-hover-label {
    opacity: 0;
  }

  .asset-grid__media--video:hover .asset-grid__video-hover-label,
  .asset-grid__media--video:focus-within .asset-grid__video-hover-label {
    opacity: 1;
  }
}

@media (hover: none) {
  .asset-grid__video-hover-label {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asset-grid__video-hover-label {
    transition: none;
  }
}

.project-overview h2 {
  margin: var(--space-md) 0 0.5rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-muted-dark);
}

.project-overview p {
  margin: 0;
  max-width: var(--measure-text);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgba(238, 232, 213, 0.94);
}

.meta-list {
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  text-align: left;
}

.meta-list li {
  margin-bottom: 0.4rem;
}

.meta-list__label {
  display: inline-block;
  min-width: 5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--text-muted-dark);
}

/* time / tools / roles: subheads (h3) + body copy or icon row */
.project-case .project-overview .project-overview__meta {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2.2vw, 1.2rem);
}

.project-case .project-overview .project-overview__meta-heading {
  margin: 0 0 0.4rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: var(--lh-tight);
  text-transform: lowercase;
  color: var(--paradiso);
  opacity: 0.95;
}

.project-case .project-overview .project-overview__meta-body {
  margin: 0;
  max-width: var(--measure-text);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgba(238, 232, 213, 0.94);
}

.project-case .project-overview .project-overview__tools {
  margin: 0;
}

.meta-list__tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.meta-list__tool {
  display: inline-flex;
  color: rgba(238, 232, 213, 0.88);
  line-height: 0;
  cursor: default;
  transition: var(--interactive-transition);
}

.meta-list__tool svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.meta-list__tool img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  object-fit: contain;
}

.project-case .project-overview__tools .meta-list__tool:hover {
  color: var(--paradiso);
  opacity: 1;
}

.project-case .project-overview__tools .meta-list__tool:hover img {
  filter: brightness(1.15) saturate(1.1);
  opacity: 1;
}

body.project-case .hash-link {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.35rem 0.75rem;
  border: var(--button-stroke);
  box-sizing: border-box;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--lusta);
  opacity: var(--interactive-opacity-rest);
  transition: var(--interactive-transition);
}

body.project-case .hash-link:hover {
  opacity: var(--interactive-opacity-hover);
}

body.project-case .hash-link:focus-visible {
  opacity: var(--interactive-opacity-hover);
  outline: none;
}

body.project-case .hash-link:active {
  opacity: var(--interactive-opacity-hover);
  background-color: var(--paradiso);
  color: var(--lusta);
  border-color: var(--paradiso);
}

.project-hero__external {
  margin: var(--space-sm) 0 0;
}

.detail-band {
  padding: var(--space-section-y) var(--section-inline);
}

.detail-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4.5vw, 3.25rem);
  align-items: center;
  justify-items: stretch;
}

/* Case-study process row: top-align + pull stack to the inner edge (avoids a dead zone + chevrons “between” columns) */
.detail-band--comp .detail-band__grid:not(.detail-band__grid--book) {
  align-items: start;
}

.detail-band__grid .card-stack {
  justify-self: end;
  width: 100%;
  max-width: 320px;
}

.detail-band__grid .process-sketch-stack {
  justify-self: start;
  width: 100%;
  max-width: min(100%, 580px);
}

/* Hamilton interactive process stack: styles live in projects/hamliton_interactive_web/hamilton-process-stack.css */

@media (max-width: 880px) {
  .detail-band__grid {
    grid-template-columns: 1fr;
  }

  /* B_S Kit: book grid had its own 2-col template — stack prose, then PDF */
  .detail-band--comp .detail-band__grid--book {
    grid-template-columns: 1fr;
  }

  .detail-band--comp .detail-band__grid--book > .detail-band__prose,
  .detail-band--comp .detail-band__grid--book > .process-pdf {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .detail-band--comp .detail-band__grid--book .process-pdf {
    max-width: 100%;
    justify-self: stretch;
  }

  .detail-band__grid .card-stack,
  .detail-band__grid .process-sketch-stack {
    justify-self: center;
    max-width: min(100%, 480px);
  }

  /* Process phase decks: stack text+nav, then images (match hero / detail-band column break) */
  .project-case .detail-band--process-phases .process-sketch-stack.process-sketch-stack--phase-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    grid-template-columns: unset;
    max-width: min(100%, 480px);
    margin-inline: auto;
  }

  .project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-phase__textGroup,
  .project-case .detail-band--process-phases .process-sketch-stack--phase-split .process-phase__stackGroup {
    grid-column: auto;
    width: 100%;
  }
}

.bordered-copy {
  border: var(--border-subtle);
  padding: var(--space-md);
  max-width: 36rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: rgba(238, 232, 213, 0.92);
  text-align: left;
  justify-self: start;
}

.bordered-copy p {
  margin: 0 0 1em;
}

.bordered-copy p:last-child {
  margin-bottom: 0;
}

.card-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  min-height: 220px;
}

.card-stack__card {
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
}

.card-stack__card:nth-child(1) {
  background: none;
  border: 1px solid rgba(238, 232, 213, 0.2);
  transform: rotate(-3deg);
}
.card-stack__card:nth-child(2) {
  background: none;
  border: 1px solid rgba(238, 232, 213, 0.2);
  transform: translateY(12px) rotate(4deg);
}
.card-stack__card:nth-child(3) {
  background: none;
  border: 1px solid rgba(238, 232, 213, 0.2);
  grid-column: 1 / -1;
  min-height: 80px;
  transform: rotate(-1deg);
}
.card-stack__card:nth-child(4) {
  background: none;
  border: 1px solid rgba(238, 232, 213, 0.2);
  transform: translateY(-8px) rotate(2deg);
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: var(--content-max);
  margin-inline: auto;
}

.asset-grid__cell {
  background: none;
  border: 1px solid rgba(238, 232, 213, 0.15);
  border-radius: 2px;
  overflow: hidden;
  min-height: 120px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.asset-grid__cell--wide {
  grid-column: span 8;
  min-height: 220px;
}

.asset-grid__cell--half {
  grid-column: span 6;
  min-height: 180px;
}

.asset-grid__cell--quad {
  grid-column: span 3;
  min-height: 140px;
}

@media (max-width: 720px) {
  .asset-grid {
    grid-template-columns: 1fr 1fr;
  }
  .asset-grid__cell,
  .asset-grid__cell--wide,
  .asset-grid__cell--half,
  .asset-grid__cell--quad {
    grid-column: span 2;
    min-height: 140px;
  }
}

@media (max-width: 520px) {
  .project-case .asset-grid--comp {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 3vw, 1.25rem);
  }

  .project-case .asset-grid--comp .asset-grid__cell,
  .project-case .asset-grid--comp .asset-grid__cell--wide,
  .project-case .asset-grid--comp .asset-grid__cell--half,
  .project-case .asset-grid--comp .asset-grid__cell--quad,
  .project-case .asset-grid--comp .asset-grid__cell--span-7,
  .project-case .asset-grid--comp .asset-grid__cell--span-5,
  .project-case .asset-grid--comp .asset-grid__cell--span-12 {
    grid-column: 1 / -1;
  }
}

.asset-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: rgba(238, 232, 213, 0.5);
  text-transform: lowercase;
  background: none;
}

.asset-placeholder--square {
  min-height: 100%;
  aspect-ratio: 1;
}

.serif-display {
  font-family: ui-serif, Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
}