/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --color-bg: #FCFCFC;
    --color-text: #20202A;
    --color-purple: #7C5CE0; /* links, cursive text, italic hero text */
    --color-purple-button: #9197D9; /* primary button background */
    --color-purple-button-hover: #7F86CF;
    --color-border: #E0E0E0;
    --color-muted: #55555F;
    --color-role-grey: #919191; /* portfolio card role line */
    --color-bg-purple: #FBFAFD;

    --font-body: 'Archivo Narrow', sans-serif;
    --font-display: 'Playfair Display', serif;
    --font-script: 'Allura', cursive;
    --max-width: 1400px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 64px;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 64px;
}

/* Logo lockup: signature mark with the wordmark centered beneath it */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.logo img {
  height: 35px;
  width: auto;
}

.logo-wordmark {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
}

.logo-wordmark-accent {
  color: var(--color-purple);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav-link {
  font-size: 1.15rem;
  font-weight: 500;
  color: #A9A9B2;
  padding-bottom: 6px;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-text);
}

.nav-link.active {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-purple);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text);
  border-radius: 2px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 96px;
}

.hero-text {
  max-width: 760px;
}

.hero-text h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.25;
  color: var(--color-text);
}

.hero-text h1 em {
  font-style: italic;
  color: var(--color-purple);
}

.hero-divider {
  display: block;
  width: 140px;
  height: 2px;
  background-color: #D9D3F2;
  margin: 32px 0 36px;
}

/* "Currently open to..." availability line under the divider */
.hero-availability {
  font-size: 1.30rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 36px;
  max-width: 42ch;
}

.hero-availability-status {
  color: var(--color-purple);
}

/* Button row — wraps to a stack if the space gets tight */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Both hero CTAs share a width so the shorter label doesn't make its
   button look undersized next to the other. */
.hero-actions .btn {
  min-width: 220px;
  justify-content: center;
}

.hero-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
}

.hero-image img {
  width: 100%;
  height: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 10px;
}

.btn-primary {
  background-color: var(--color-purple-button);
  color: #fff;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-purple-button-hover);
}

/* Secondary/ghost button — no fill, purple stroke + label */
.btn-outline {
  background-color: transparent;
  color: var(--color-purple-button);
  border: 2px solid var(--color-purple-button);
  /* Offset the border so it matches .btn-primary's overall height */
  padding: 14px 30px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background-color: rgba(145, 151, 217, 0.1);
  border-color: var(--color-purple-button-hover);
  color: var(--color-purple-button-hover);
}

.btn-arrow {
  height: 16px;
  width: auto;
}

/* ==========================================================================
   About preview
   ========================================================================== */
.about-preview {
    max-width: 1200px;
    margin: 0 auto 96px;
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background-color: var(--color-bg-purple);
    box-shadow: 0 12px 30px rgba(32, 32, 42, 0.07);
    display: grid;
    grid-template-columns: 0.92fr 1px 1.08fr;
    column-gap: 40px;
    align-items: center;
}

/* Vertical divider between the intro and the traits */
.about-preview::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  background-color: var(--color-border);
}

.about-intro {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 24px;
}

.about-photo {
  flex-shrink: 0;
  width: 150px;
  height: 190px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.script-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.8rem;
  color: var(--color-purple);
  margin-bottom: 10px;
  text-align: left;
}

.about-copy {
  max-width: 100%;
  text-align: left;
}

.about-copy p {
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.about-copy .link-arrow {
  font-size: 1.05rem;
}

.traits-eyebrow {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-purple);
  margin: 0 0 16px;
  padding: 0;
  border-top: none;
}

.traits {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.trait {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    background-color: var(--color-bg);
}

.trait-body {
  min-width: 0;
}

.trait-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  margin-bottom: 0;
}

.trait h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  white-space: nowrap;
}

.trait p {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
}

.footer-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  height: 30px;
  width: auto;
}

.footer-left p {
  font-size: 0.95rem;
  color: var(--color-text);
}

.footer-left .divider {
  margin: 0 4px;
  color: var(--color-border);
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--color-purple);
}

.footer-link .link-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-link img {
  height: 22px;
  width: auto;
}

/* ==========================================================================
   About page
   ========================================================================== */
.eyebrow {
  display: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-purple);
  margin-bottom: 8px;
}

.about-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 64px 64px;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  grid-template-areas:
    "photo heading"
    "photo bio"
    "photo current"
    "photo connect"
    "photo contact";
  column-gap: 72px;
  row-gap: 0;
  align-items: start;
}

.about-hero-photo {
  grid-area: photo;
  min-width: 0;
  align-self: stretch;
}

.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
}

.about-heading {
  grid-area: heading;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-text);
  margin-bottom: 28px;
}

.about-heading em {
  font-style: normal;
  color: var(--color-purple);
}

.about-bio {
  grid-area: bio;
  min-width: 0;
}

.about-bio p {
  font-size: 1.02rem;
  color: var(--color-text);
  margin-bottom: 20px;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

/* ---- Currently pursuing ---- */
.about-current {
  grid-area: current;
  min-width: 0;
  margin-top: 24px;
}

.about-current-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-purple);
  margin-bottom: 2px;
}

.about-current-detail {
  font-size: 0.95rem;
  color: var(--case-grey-text);
}

/* ---- Let's connect ---- */
.about-connect {
  grid-area: connect;
  min-width: 0;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.about-connect-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 6px;
}

.about-connect-heading em {
  font-style: normal;
  color: var(--color-purple);
}

.about-connect-copy {
  font-size: 1.02rem;
  color: var(--case-grey-text);
}

.contact-row {
  grid-area: contact;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Cards */
.info-card {
  background-color: #F9F7FA;
  border-radius: 20px;
  padding: 40px;
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.card-icon {
  width: 26px;
  height: 26px;
}

.card-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--color-text);
}

.about-cards-row {
  max-width: var(--max-width);
  margin: 0 auto 32px;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
}

.mobile-only {
  display: none;
}

/* Selected Experience timeline */
.exp-list {
  list-style: none;
}

.exp-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 32px;
  border-left: 1px solid #D9D3F2;
  margin-left: 4px;
}

.exp-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.exp-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-purple);
}

.exp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.exp-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.exp-date {
  font-size: 0.92rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.exp-company {
  color: var(--color-purple);
  font-weight: 500;
  margin: 4px 0 8px;
}

.exp-desc {
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Education list */
.edu-list {
  list-style: none;
}

.edu-item {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.edu-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.edu-degree {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.edu-school {
  color: var(--color-purple);
  font-weight: 500;
  margin-bottom: 2px;
}

.edu-focus {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.edu-date {
  font-size: 0.92rem;
  color: var(--color-muted);
}

/* Technical skills */
.skills-section {
  max-width: var(--max-width);
  margin: 0 auto 32px;
  padding: 0 64px;
}

.skills-grid {
  display: flex;
}

.skill-col {
  flex: 1;
  padding: 0 28px;
}

.skill-col:first-child {
  padding-left: 0;
}

.skill-col:not(:first-child) {
  border-left: 1px solid var(--color-border);
}

.skill-col h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-purple);
  margin-bottom: 10px;
}

.skill-col p {
  font-size: 0.92rem;
  color: var(--color-text);
}

.resume-btn-wrap {
  max-width: var(--max-width);
  margin: 0 auto 96px;
  padding: 0 64px;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Portfolio page
   ========================================================================== */
.portfolio-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 96px;
}

.portfolio-section {
  margin-top: 56px;
}

.portfolio-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--color-text);
  margin-bottom: 30px;
}

.portfolio-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Two-column grid variant for stacks of portfolio cards (image + text),
   matching the featured grid on the home page. The tighter default flex
   stack stays intact for plain image stacks. */
.portfolio-stack--cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}


.portfolio-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Shared wrapper for every portfolio image — new images just need this
   markup pattern to automatically get the border, zoom, and hover overlay. */
.portfolio-item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-text);
  box-sizing: border-box;
}

.portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(32, 32, 42, 0);
  transition: background-color 0.4s ease;
  pointer-events: none;
}

.portfolio-item:hover img {
  transform: scale(1.06);
}

.portfolio-item:hover::after {
  background-color: rgba(32, 32, 42, 0.25);
}

.portfolio-item--thumb {
  width: 100%;
  max-width: 213px;
}

/* ---- Portfolio card (banner + role / title / blurb) ----
   Reusable card for portfolio listing entries. Any new piece just needs
   this markup pattern to get the bordered card, hover zoom/overlay on the
   banner, and the role / title / blurb text block:

   <a href="piece.html" class="portfolio-card">
     <div class="portfolio-card-media">
       <img src="..." alt="..." />
     </div>
     <div class="portfolio-card-body">
       <p class="portfolio-card-role">[Role One, Role Two]</p>
       <h3 class="portfolio-card-title">Piece Title</h3>
       <p class="portfolio-card-blurb">One-or-two sentence description.</p>
     </div>
   </a>
*/
.portfolio-card {
    display: block;
    border: 1px solid var(--color-border);
    background-color: #fff;
}

/* Media area clips the zoom so it never bleeds into the text block */
.portfolio-card-media {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

    .portfolio-card-media img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.4s ease;
    }

    .portfolio-card-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(32, 32, 42, 0);
        transition: background-color 0.4s ease;
        pointer-events: none;
    }

.portfolio-card:hover .portfolio-card-media img {
    transform: scale(1.06);
}

.portfolio-card:hover .portfolio-card-media::after {
    background-color: rgba(32, 32, 42, 0.25);
}

.portfolio-card-body {
    padding: 20px 24px 24px;
}

.portfolio-card-role {
    font-size: 0.95rem;
    color: var(--color-role-grey);
    margin-bottom: 8px;
}

.portfolio-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.portfolio-card-blurb {
    font-size: 1.0rem;
    line-height: 1.5;
    color: var(--case-grey-text);
}

/* ==========================================================================
   Design Experiments strip (portfolio page)
   Full-bleed, auto-scrolling marquee of smaller/simpler cards than
   .portfolio-card — items are authored once inside .experiments-track and
   script.js clones that set and appends it so the strip loops seamlessly.
   Hovering any item pauses the scroll and scales that item up in place;
   moving off it resumes the scroll and shrinks it back down. Markup:

   <section class="experiments-section">
     <div class="experiments-head"> ... </div>
     <div class="experiments-scroll">
       <div class="experiments-track">
         <div class="experiment-item">
           <div class="experiment-card">
             <div class="experiment-media"><img ... /></div>
             <p class="experiment-caption">Oil Painting</p>
           </div>
         </div>
         ...
       </div>
     </div>
   </section>
   ========================================================================== */
.experiments-section {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--color-border);
}

.experiments-head {
  max-width: var(--case-width);
  margin: 0 auto 36px;
  padding: 0 24px;
}

.experiments-eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-purple);
  margin-bottom: 6px;
}

.experiments-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-text);
  margin-bottom: 10px;
}

.experiments-subtext {
  font-size: 1.15rem;
  color: var(--case-grey-text);
  max-width: 560px;
}

/* Full-bleed scroller — deliberately ignores the page's centered max-width
   so the strip can run edge to edge. Edges fade out via a mask so items
   don't clip abruptly. Extra vertical padding gives hover-scaled items
   room to grow without getting clipped by the section. */
.experiments-scroll {
  width: 100%;
  overflow: hidden;
  padding: 40px 0 64px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.experiments-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: max-content;
  animation-name: experiments-scroll-x;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--experiments-duration, 70s);
}

.experiments-scroll:hover .experiments-track,
.experiments-track.is-paused {
  animation-play-state: paused;
}

@keyframes experiments-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.experiment-item {
  flex: none;
  width: 240px;
}

/* Card wrapper — this is what gets the border and the hover scale, so the
   image and caption stay visually bordered together as one unit. Border
   color matches .portfolio-card above it on the page. */
.experiment-card {
  border: 1px solid var(--color-border);
  background-color: #fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-origin: center;
}

/* Fixed height so every item lines up while scrolling; object-fit: cover
   scales wide or tall pieces to fill the box and crops the excess instead
   of stretching or leaving gaps. On hover the media switches to
   object-fit: contain so the full, uncropped piece becomes visible
   (letterboxed within the same box) while the card scales up. */
.experiment-media {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background-color: #ECECEC;
  transition: background-color 0.35s ease;
}

.experiment-media img,
.experiment-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.experiment-caption {
  display: flex;
  align-items: flex-start;
  height: 64px;
  overflow: hidden;
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--case-grey-text);
}

.experiment-item:hover .experiment-card {
  transform: scale(1.04);
  z-index: 5;
  position: relative;
  box-shadow: 0 12px 28px rgba(32, 32, 42, 0.18);
}

/* ---- Fullscreen preview ----
   On hover, the full-size, uncropped image/video shows in a dedicated
   fullscreen overlay (built by script.js) instead of expanding in place —
   this avoids cropping small pieces down to the strip's fixed aspect
   ratio. The overlay ignores pointer events so the mouseenter/mouseleave
   that drives it keeps firing on the actual card underneath. */
.experiment-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 48px;
  background-color: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.experiment-lightbox.is-open {
  opacity: 1;
}

.experiment-lightbox-media {
  display: block;
  max-width: 85vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  background-color: #0A0A0E;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.experiment-lightbox-caption {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: #F2F2F5;
  text-align: center;
}

/* ==========================================================================
   Featured / "Next projects" section
   Reusable section used at the bottom of the home page ("A look at some of
   my work") and the bottom of case study pages ("Next projects"). Only the
   eyebrow and heading text change between uses — the markup pattern is:

   <section class="featured-section">
     <div class="section-head">
       <span class="section-divider"></span>
       <p class="section-eyebrow">[FEATURED PROJECTS]</p>
       <h2 class="section-heading">A look at some of my work</h2>
     </div>

     <div class="featured-grid">
       <a href="piece.html" class="featured-project-card"> ... </a>
       ...
     </div>
   </section>
   ========================================================================== */
.featured-section {
  max-width: 1200px;
  margin: 0 auto 96px;
  padding: 0 40px;
}

/* ---- Reusable section header (divider + eyebrow + heading) ----
   Matches the width and top line of the portfolio page header. Reuse the
   three inner elements anywhere a purple eyebrow + display heading is needed. */
.section-head {
  margin-bottom: 36px;
}

.section-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: 32px;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-purple);
  margin-bottom: 6px;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-text);
}

/* ---- Featured grid: responsive 2-up, collapses to 1 column ---- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* ---- Featured project card ----
   Same component as .portfolio-card (border, media zoom + hover overlay,
   role / title / blurb) but more compact. Text is kept a touch larger than
   a pure scale-down for readability. Markup:

   <a href="piece.html" class="featured-project-card">
     <div class="featured-project-card-media">
       <img src="..." alt="..." />
     </div>
     <div class="featured-project-card-body">
       <p class="featured-project-card-role">[Role One, Role Two]</p>
       <h3 class="featured-project-card-title">Piece Title</h3>
       <p class="featured-project-card-blurb">Short description.</p>
     </div>
   </a>
*/
.featured-project-card {
  display: block;
  border: 1px solid var(--color-border);
  background-color: #fff;
}

/* Media area clips the zoom so it never bleeds into the text block */
.featured-project-card-media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.featured-project-card-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.featured-project-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(32, 32, 42, 0);
  transition: background-color 0.4s ease;
  pointer-events: none;
}

.featured-project-card:hover .featured-project-card-media img {
  transform: scale(1.06);
}

.featured-project-card:hover .featured-project-card-media::after {
  background-color: rgba(32, 32, 42, 0.25);
}

.featured-project-card-body {
  padding: 20px 24px 24px;
}

.featured-project-card-role {
  font-size: 0.95rem;
  color: var(--color-role-grey);
  margin-bottom: 8px;
}

.featured-project-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.featured-project-card-blurb {
  font-size: 1.0rem;
  line-height: 1.5;
  color: var(--case-grey-text);
}

/* ---- "View all work" link (centered under the featured grid) ----
   Reusable text-plus-arrow link. The arrow is an already-purple PNG shown
   as a background image. To reuse elsewhere, place the same markup:
     <a href="..." class="featured-view-all">
       <span class="featured-view-all-text">View all work</span>
       <span class="featured-view-all-arrow"></span>
     </a> */
.featured-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-purple);
  text-decoration: none;
}

/* Underline sits under just the words, not the arrow */
.featured-view-all-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Already-purple PNG shown as a background image (no mask needed) */
.featured-view-all-arrow {
  display: inline-block;
  width: 20px;
  height: 15px;
  flex: none;                /* stops flexbox from collapsing the arrow to 0 width */
  background: url('../images/general/icon-arrow-purple-highlight.png') no-repeat center / contain;
  transition: transform 0.2s ease;
}

.featured-view-all:hover .featured-view-all-arrow {
  transform: translateX(4px);
}

/* ---- Reusable inline text link with trailing arrow ----
   Same look, color, underline, and hover-nudge as .featured-view-all, but
   inline and left-aligned so it follows whatever alignment surrounds it
   (no centering). Use anywhere a "More about me →" style link is needed:
     <a href="..." class="link-arrow">
       <span class="link-arrow-label">More about me</span>
       <span class="link-arrow-icon"></span>
     </a>
   The arrow is an already-purple PNG shown as a background image. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-purple);
  text-decoration: none;
}

/* Underline sits under just the words, not the arrow */
.link-arrow-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-arrow-icon {
  display: inline-block;
  width: 20px;
  height: 15px;
  flex: none;
  background: url('../images/general/icon-arrow-purple-highlight.png') no-repeat center / contain;
  transition: transform 0.2s ease;
}

.link-arrow:hover .link-arrow-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   Case Study pages (portfolio pieces)
   Scoped under .case-study so this type system doesn't leak into other pages.
   Built to be reused as-is for every future portfolio piece — only the
   content inside .case-content and the .case-side-nav links need to change.
   ========================================================================== */
:root {
  --case-black: #20202A;
  --case-grey-text: #636363;
  --case-grey-line: #A7A7B0;
  --case-nav-default: #71717A;
  --case-width: 960px;
}

.case-study {
  font-family: 'Archivo', sans-serif;
  color: var(--case-black);
}

.case-study h1,
.case-study h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--case-black);
}

/* Shared "underlined H2" style — edit here to change it everywhere:
   case study pages (.case-study h2) and the portfolio listing page
   (.portfolio-section h2) both use this single rule. */
.case-study h2,
.portfolio-section h2 {
  position: relative;
  padding-bottom: 6px;
}

.case-study h2::after,
.portfolio-section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--case-black);
}

.case-study h2 {
  font-size: 36px;
}

.case-study h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--case-black);
}

.case-study h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--case-black);
}

.case-study h6 {
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: var(--case-black);
}

.case-study p {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--case-grey-text);
}

/* ---- Inline text links within body copy (e.g. linking an org name) ---- */
.case-content p a {
  color: var(--color-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.case-content p a:hover {
  color: var(--color-purple-button-hover);
}

/* ---- Header ---- */
.case-header {
  max-width: var(--case-width);
  margin: 0 auto;
  padding: 48px 24px 0;
  text-align: center;
}

/* Shared page-header style — edit here to change the H1, subtitle, and
   divider line everywhere at once: the portfolio listing page
   (.portfolio-header) and every case study page (.case-header). */
.case-header h1,
.portfolio-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 58px;
  color: var(--case-black);
  text-align: center;
  margin-bottom: 12px;
}

.case-subtitle,
.portfolio-header p {
  text-align: center;
  color: var(--case-grey-text);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.case-divider,
.portfolio-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--case-black);
  margin-top: 28px;
}

/* ---- Layout: side nav + content ---- */
.case-layout {
  position: relative;
  max-width: var(--case-width);
  margin: 0 auto;
  padding: 0 24px;
}

.case-side-nav {
  position: fixed;
  top: 160px;
  left: calc(50% - (var(--case-width) / 2) - 248px);
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-side-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--case-nav-default);
  transition: color 0.2s ease;
}

.case-side-nav a:hover,
.case-side-nav a.active {
  color: var(--case-black);
}

.case-content {
  max-width: var(--case-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ---- Bordered images (hero + draft images) ---- */
.case-bordered-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--case-black);
}

/* ---- Meta row (Duration / Role / Tools) ---- */
.case-meta {
  display: flex;
  margin-top: 28px;
}

.case-meta > div {
  flex: 0 1 auto;
  padding: 0 16px;
}

.case-meta > div:first-child {
  padding-left: 0;
}

.case-meta > div:last-child {
  padding-right: 0;
}

.case-meta > div:not(:first-child) {
  border-left: 1px solid var(--case-grey-line);
}

.case-meta h4 {
  margin-bottom: 6px;
}

.case-meta p {
  font-size: 16px;
  margin: 0;
}

/* ---- Sections ---- */
.case-section {
  margin-top: 72px;
  scroll-margin-top: 120px;
}

.case-section h2 {
  margin-bottom: 20px;
}

.case-section p {
  margin-bottom: 16px;
}

.case-subsection {
  margin-top: 40px;
}

.case-subsection h3 {
  margin-bottom: 12px;
}

/* ---- Methodology grid ---- */
.case-methodology-grid {
  display: flex;
  margin-top: 24px;
}

.case-method-item {
  flex: 1;
  padding: 0 32px;
}

.case-method-item:first-child {
  padding-left: 0;
}

.case-method-item:last-child {
  padding-right: 0;
}

.case-method-item:not(:first-child) {
  border-left: 1px solid var(--case-grey-line);
}

.case-method-item h4 {
  margin-bottom: 10px;
}

.case-method-item h6 {
  margin-bottom: 10px;
}

.case-method-item p {
  font-size: 16px;
}

/* ---- Reusable bordered card (base for compare boxes + insight cards) ---- */
.case-card {
  border: 1px solid var(--case-grey-line);
  border-radius: 8px;
  padding: 24px;
  background-color: transparent;
}

.case-card--filled {
  background-color: #F2F1EF;
}

/* ---- Insights: expected vs found compare ---- */
.case-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.case-compare-box h4 {
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.case-compare-box p {
  font-size: 16px;
  margin: 0;
}

.case-compare-arrow {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ---- Key insight cards ---- */
.case-insight-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.case-insight-card {
  padding: 24px 28px;
}

.case-insight-card h4 {
  margin-bottom: 10px;
}

.case-insight-card p {
  font-size: 16px;
  margin: 0;
}

/* ---- Draft blocks ---- */
.case-draft-block img {
  margin-top: 20px;
}

/* ---- Inline bold labels (e.g. "Art Direction: Comic book style") ---- */
.case-study strong {
  color: var(--case-black);
  font-weight: 600;
}

.case-label-line {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  color: var(--case-grey-text);
  margin-top: 16px;
}

/* ---- Color palette swatches ---- */
.case-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.case-palette-swatch {
  width: 72px;
  height: 72px;
  border: 1px solid var(--case-black);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.case-palette-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Moodboard masonry (explicit columns, driven by markup order) ---- */
.case-moodboard {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.case-moodboard-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.case-moodboard-col img {
  width: 100%;
  height: auto;
  border: 1px solid var(--case-black);
  object-fit: cover;
}

/* ---- Stack of full-size mockup images (alternative to .case-carousel
   when each variant should be shown in full rather than swiped through) ---- */
.case-mockup-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}

/* ---- Media + text row (image alongside a paragraph, vertically centered) ---- */
.case-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

.case-media-text img {
  width: 100%;
  border: 1px solid var(--case-black);
}

.case-media-text p {
  margin: 0;
}

/* ---- Equal-height row of images (mixed aspect ratios, cropped to match) ---- */
.case-image-row {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.case-image-row img {
  flex: 1;
  height: 260px;
  object-fit: cover;
  border: 1px solid var(--case-black);
}

/* ---- Alternating image + heading/text row (zigzag layout). Write the
   <img> and .case-feature-text in whichever DOM order matches the desired
   visual side for that row — no reversing modifier needed. ---- */
.case-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  margin-top: 56px;
}

.case-feature-row:first-of-type {
  margin-top: 40px;
}

.case-feature-row img {
  width: 100%;
  border: 1px solid var(--case-black);
}

/* Smaller variant of the page-header style (Playfair Display, with a
   fixed-width underline bar instead of the full-width h2 bar) for
   subsections within a row. */
.case-feature-heading {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--case-black);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.case-feature-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--case-black);
}

.case-feature-row p {
  margin: 0;
}
.case-component-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.case-component-grid img {
  height: 90px;
  width: auto;
  border: 1px solid var(--case-black);
}

/* ---- Carousel (reusable for data points + final design highlights) ---- */
.case-carousel {
  position: relative;
  margin-top: 24px;
  border-left: 1px solid var(--case-black);
  border-right: 1px solid var(--case-black);
  border-top: 14px solid var(--case-black);
  border-bottom: 14px solid var(--case-black);
}

.case-carousel-track {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.case-carousel-track img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.25s ease;
}

.case-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(32, 32, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 2;
}

.case-carousel-btn:hover {
  background-color: rgba(32, 32, 42, 0.6);
}

.case-carousel-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
}

.case-carousel-btn--prev {
  left: 16px;
}

.case-carousel-btn--next {
  right: 16px;
}

.case-carousel-dots {
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.case-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.case-carousel-dot.active {
  background-color: #fff;
}

/* ---- Fullscreen lightbox ---- */
.case-lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 15, 20, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.case-lightbox.open {
  display: flex;
}

.case-lightbox-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 90px;
  box-sizing: border-box;
}

.case-lightbox-image {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: auto;
  border: 1px solid #fff;
}

.case-lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  font-size: 36px;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
}

.case-lightbox-close-btn {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  color: #fff;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 15px;
  cursor: pointer;
  z-index: 1002;
  transition: background-color 0.2s ease;
}

.case-lightbox-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.case-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.12);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1002;
  transition: background-color 0.2s ease;
}

.case-lightbox-nav:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.case-lightbox-nav svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

.case-lightbox-nav--prev {
  left: 24px;
}

.case-lightbox-nav--next {
  right: 24px;
}

/* ---- Reusable video player (poster + play button -> inline video) ---- */
.case-video-player {
  position: relative;
  max-width: 360px;
  margin: 24px auto 0;
  border: 1px solid var(--case-black);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.case-video-poster,
.case-video-player video {
  display: block;
  width: 100%;
  height: auto;
}

.case-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
  pointer-events: none;
}

.case-video-player:hover .case-video-play-btn {
  transform: translate(-50%, -50%) scale(1.3);
}

.case-video-player.playing {
  cursor: default;
}

.case-video-player.playing .case-video-poster,
.case-video-player.playing .case-video-play-btn {
  display: none;
}

/* ---- Reusable stat row (e.g. "72% / 68% / 55.6%" survey callouts) ---- */
.case-stat-row {
  display: flex;
  margin-top: 32px;
}

.case-stat {
  flex: 1;
  padding-right: 32px;
}

.case-stat:not(:first-child) {
  padding-left: 32px;
}

.case-stat:not(:last-child) {
  border-right: 1px solid var(--case-grey-line);
}

.case-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--case-black);
  margin-bottom: 8px;
}

.case-stat p {
  font-size: 15px;
  margin: 0;
}

/* ---- Fanned-stack carousel (auto-plays; overlapping staggered images
   with manual prev/next arrows). Reusable anywhere a more visual, playful
   carousel is wanted instead of the single-image .case-carousel. ---- */
.case-fan-carousel {
  position: relative;
  height: 500px;
  max-width: 960px;
  margin: 40px auto 0;
}

.case-fan-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.case-fan-carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  border: 1px solid var(--case-black);
  cursor: pointer;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.case-fan-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 1px solid var(--case-black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  color: var(--case-black);
  transition: background-color 0.2s ease;
}

.case-fan-carousel-btn:hover {
  background-color: #fff;
}

.case-fan-carousel-btn svg {
  width: 18px;
  height: 18px;
}

.case-fan-carousel-btn--prev {
  left: -12px;
}

.case-fan-carousel-btn--next {
  right: -12px;
}

/* ---- Reusable embed (Canva, Figma, etc.) ---- */
.case-embed-wrap {
  margin-top: 24px;
}

.case-embed-wrap > div {
  border-radius: 8px;
  overflow: hidden;
}

/* Modifier for a responsive 16:9 video embed (e.g. YouTube) */
.case-embed-wrap--video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.case-embed-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--case-grey-text);
}

@media (max-width: 1400px) {
  .case-side-nav {
    display: none;
  }
}

/* ==========================================================================
   Case study — Prev/Next project navigation ("Continue Exploring")

   Lives at the bottom of every case study page, between .case-layout and
   the footer. Visually it matches the "Featured Projects" section on the
   home page (same colors/sizes), but it is a fully independent copy —
   every selector below is scoped under .portfolio-next-section (2 classes) so
   nothing here can be affected by, or leak into, the .case-study
   h1/h2/h3/p rules above, and it never reuses .featured-* or
   .portfolio-* classes.

   Markup (reuse as-is on every future case study page — only the hrefs,
   images, and text change):

   <section class="portfolio-next-section">
     <div class="portfolio-next-head">
       <span class="portfolio-next-divider"></span>
       <p class="portfolio-next-eyebrow">[MORE WORK]</p>
       <h2 class="portfolio-next-heading">Continue Exploring</h2>
     </div>
     <div class="portfolio-next-grid">
       <a href="piece.html" class="portfolio-next-item">
         <p class="portfolio-next-label">[Previous Project]</p>
         <div class="portfolio-next-card">
           <div class="portfolio-next-card-media"><img src="..." alt="..." /></div>
           <div class="portfolio-next-card-body">
             <p class="portfolio-next-card-role">[Role One, Role Two]</p>
             <h3 class="portfolio-next-card-title">Piece Title</h3>
             <p class="portfolio-next-card-blurb">Short description.</p>
           </div>
         </div>
       </a>
       <a href="piece.html" class="portfolio-next-item">
         <p class="portfolio-next-label portfolio-next-label--right">[Next Project]</p>
         <div class="portfolio-next-card"> ... same structure ... </div>
       </a>
     </div>
   </section>

   The label sits above the card, outside its border, but stays INSIDE the
   same <a>.portfolio-next-item as the card — so hovering the label triggers
   the exact same hover state (image scale + darken) as hovering the card
   itself, with no JS needed.

   Extensible spacing: placing this section right after .case-layout and
   right before <footer> keeps the two gaps identical on every page
   automatically, with no per-page values to remember —
   - gap ABOVE this section = .case-content's own bottom padding
     (96px / 64px on mobile), already shared by every case study page.
   - gap BELOW this section, before the footer = this section's own
     margin-bottom below, set to match those same 96px / 64px values.
   ========================================================================== */
.portfolio-next-section {
  max-width: var(--case-width);
  margin: 0 auto 96px;
  padding: 0 24px;
}

.portfolio-next-section .portfolio-next-head {
  margin-bottom: 36px;
}

.portfolio-next-section .portfolio-next-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: 32px;
}

.portfolio-next-section .portfolio-next-eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-purple);
  margin-bottom: 6px;
}

.portfolio-next-section .portfolio-next-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-text);
}

/* Neutralize the underline bar .case-study h2::after would otherwise draw
   under any h2 on a .case-study page — this section intentionally does
   not use it. */
.portfolio-next-section .portfolio-next-heading::after {
  content: none;
}

.portfolio-next-section .portfolio-next-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.portfolio-next-section .portfolio-next-item {
  display: block;
}

/* ---- Prev/Next label above the card ---- */
.portfolio-next-section .portfolio-next-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-role-grey);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

/* Right-hand card: label reads from the outer edge inward, like the card
   below it is "arriving from the right" */
.portfolio-next-section .portfolio-next-label--right {
  text-align: right;
}

.portfolio-next-section .portfolio-next-item:hover .portfolio-next-label {
  color: var(--color-text);
}

/* ---- Card (same component pattern as .featured-project-card) ---- */
.portfolio-next-section .portfolio-next-card {
  border: 1px solid var(--color-border);
  background-color: #fff;
}

.portfolio-next-section .portfolio-next-card-media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.portfolio-next-section .portfolio-next-card-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.portfolio-next-section .portfolio-next-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(32, 32, 42, 0);
  transition: background-color 0.4s ease;
  pointer-events: none;
}

/* Hovering anywhere in .portfolio-next-item — including the label above the
   card — scales the image and darkens the overlay, same as
   .featured-project-card */
.portfolio-next-section .portfolio-next-item:hover .portfolio-next-card-media img {
  transform: scale(1.06);
}

.portfolio-next-section .portfolio-next-item:hover .portfolio-next-card-media::after {
  background-color: rgba(32, 32, 42, 0.25);
}

.portfolio-next-section .portfolio-next-card-body {
  padding: 14px 18px 16px;
}

.portfolio-next-section .portfolio-next-card-role {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-role-grey);
  margin-bottom: 6px;
}

.portfolio-next-section .portfolio-next-card-title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.portfolio-next-section .portfolio-next-card-blurb {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--case-grey-text);
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */
/* About preview stacks earlier than the rest of the page — the two-column
   split gets cramped before the 1024px breakpoint. */
@media (max-width: 1280px) {
  .about-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .about-preview::before {
    display: none;
  }

  .about-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    flex-shrink: initial;
  }

  .about-copy {
    max-width: 460px;
    text-align: center;
  }

  .script-heading {
    text-align: center;
  }

  .about-copy .link-arrow {
    justify-content: center;
  }

  .traits-eyebrow {
    display: none;
  }

  .traits {
    grid-column: auto;
    grid-row: auto;
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .trait {
    padding: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .trait-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }

  .trait h3 {
    white-space: normal;
  }
}

@media (max-width: 1024px) {
  .nav-wrap,
  .hero,
  .about-preview,
  .footer-wrap,
  .about-hero,
  .about-cards-row,
  .skills-section,
  .resume-btn-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero-text h1 {
    font-size: 2.8rem;
  }

  .about-hero {
    grid-template-columns: 260px 1fr;
    column-gap: 40px;
  }

  .about-heading {
    font-size: 2.4rem;
  }

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

  .about-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .about-preview::before {
    display: none;
  }

  .about-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    flex-shrink: initial;
  }

  .about-copy {
    max-width: 420px;
    text-align: center;
  }

  .script-heading {
    text-align: center;
  }

  .about-copy .link-arrow {
    justify-content: center;
  }

  .traits-eyebrow {
    display: none;
  }

  .traits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    gap: 24px;
  }

  .trait {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .trait-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
  }

  .trait h3 {
    white-space: normal;
  }

  /* Case study pages */
  .case-study h1,
  .portfolio-header h1 {
    font-size: 44px;
  }

  .case-study h2 {
    font-size: 30px;
  }

  .case-methodology-grid {
    flex-direction: column;
    gap: 28px;
  }

  .case-method-item {
    padding-left: 0;
    border-left: none;
  }

  .case-compare {
    grid-template-columns: 1fr;
  }

  .case-compare-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }

  .case-moodboard {
    flex-wrap: wrap;
  }

  .case-moodboard-col {
    flex: 1 1 calc(50% - 8px);
  }

  .case-media-text {
    grid-template-columns: 1fr;
  }

  .case-feature-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .case-image-row {
    gap: 16px;
  }

  .case-image-row img {
    height: 200px;
  }

  .case-fan-carousel {
    height: 380px;
  }

  .case-fan-carousel-item {
    width: 320px;
  }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 768px) {
  /* Featured / next-projects section stacks to one column on mobile */
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-heading {
    font-size: 1.9rem;
  }

  .featured-section {
    margin-bottom: 64px;
    padding: 0 24px;
  }

  /* Prev/Next project nav stacks to one column on mobile, and its
     bottom margin matches .case-content's mobile bottom padding (64px)
     so the gap before the footer stays consistent with the gap above. */
  .portfolio-next-section {
    margin-bottom: 64px;
  }

  .portfolio-next-section .portfolio-next-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .portfolio-next-section .portfolio-next-heading {
    font-size: 1.9rem;
  }

  .portfolio-next-section .portfolio-next-label--right {
    text-align: left;
  }

  .nav-wrap {
    padding: 18px 24px;
  }

  .logo img {
    height: 29px;
  }

  .logo-wordmark {
    font-size: 0.76rem;
  }

  .main-nav {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
    z-index: 20;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav .nav-link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav .nav-link.active {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-toggle {
    display: flex;
  }

  /* Stacked hero:
     Headline and availability line run full width. Below them the buttons
     stack in a left column with the bottle illustration sitting to their
     right, so the artwork stays visible without pushing the CTAs down. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: 40px 24px 48px;
    column-gap: 24px;
    row-gap: 24px;
  }

  /* `display: contents` lifts the h1, divider, availability line and button
     group directly onto the hero grid so each can be placed independently. */
  .hero-text {
    display: contents;
  }

  .hero-text h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 2.1rem;
  }

  .hero-divider {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 260px;
    margin: 24px 0 20px;
  }

  .hero-availability {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 1.05rem;
    margin-bottom: 0;
  }

  .hero-actions {
    grid-column: 1;
    grid-row: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Stretch already equalizes the buttons here, so drop the desktop
     min-width — it would overflow the narrow column on small phones. */
  .hero-actions .btn {
    min-width: 0;
  }

  .btn {
    font-size: 1rem;
    padding: 14px 26px;
    justify-content: center;
  }

  .btn-outline {
    padding: 12px 24px;
  }

  .hero-image {
    grid-column: 2;
    grid-row: 4;
    max-width: 200px;
    justify-self: center;
    align-self: center;
  }

  .about-preview {
    margin: 0 24px 56px;
    padding: 32px 24px;
    width: auto;
  }

  .about-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .about-photo {
    width: 150px;
    height: 190px;
    align-self: center;
  }

  .script-heading {
    font-size: 2.2rem;
  }

  .about-copy p {
    max-width: 100%;
  }

  .traits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .trait {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .trait h3 {
    font-size: 1.1rem;
    white-space: normal;
  }

  .trait-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
  }

  .footer-wrap {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .footer-left {
    flex-direction: column;
    gap: 12px;
  }

  .footer-left p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .footer-left .divider {
    display: none;
  }

  .footer-right {
    flex-direction: column;
    gap: 16px;
  }

  /* About page */
  .about-hero {
    padding: 32px 24px 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "heading"
      "photo"
      "bio"
      "current"
      "connect"
      "contact";
    row-gap: 24px;
  }

  /* Crop the tall portrait photo down to a wide banner once it stacks full-
     width above the text — object-fit: cover + object-position: center
     crops evenly from the top and bottom instead of showing the full
     portrait height. */
  .about-hero-photo img {
    aspect-ratio: 2 / 1;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
  }

  .eyebrow {
    display: block;
    grid-area: eyebrow;
    margin-bottom: 0;
  }

  .about-heading {
    font-size: 2.1rem;
    margin-bottom: 0;
  }

  .about-current,
  .about-connect {
    margin-top: 0;
  }

  .about-connect {
    padding-top: 24px;
  }

  .about-connect-heading {
    font-size: 1.4rem;
  }

  .contact-row {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .about-cards-row {
    padding: 0 24px;
    gap: 24px;
    margin-bottom: 24px;
  }

  .info-card {
    padding: 28px 24px;
  }

  .card-heading h2 {
    font-size: 1.4rem;
  }

  .mobile-only {
    display: inline-flex;
    margin-top: 24px;
  }

  .skills-section {
    padding: 0 24px;
    margin-bottom: 24px;
  }

  .skills-grid {
    flex-direction: column;
    gap: 24px;
  }

  .skill-col {
    padding: 0;
  }

  .skill-col:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
  }

  .resume-btn-wrap {
    padding: 0 24px;
    justify-content: stretch;
    margin-bottom: 56px;
  }

  .resume-btn-wrap .btn {
    width: 100%;
    justify-content: center;
  }

  /* Portfolio page */
  .portfolio-wrap {
    padding: 32px 24px 64px;
  }

  .portfolio-section {
    margin-top: 40px;
  }

  .portfolio-section h2 {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }

  .portfolio-stack {
    gap: 20px;
  }

  /* Card grid collapses to a single column, matching the featured grid */
  .portfolio-stack--cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .portfolio-item--thumb {
    max-width: 160px;
  }

    .portfolio-card-body {
        padding: 16px 18px 20px;
    }

    .portfolio-card-role {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .portfolio-card-blurb {
        font-size: 0.95rem;
    }

  /* Design Experiments strip */
  .experiments-section {
    margin-top: 64px;
    padding-top: 40px;
  }

  .experiments-head {
    padding: 0 20px;
    margin-bottom: 24px;
  }

  .experiments-heading {
    font-size: 1.6rem;
  }

  .experiments-subtext {
    font-size: 1rem;
  }

  .experiments-scroll {
    padding: 28px 0 48px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }

  .experiment-item {
    width: 165px;
  }

  .experiment-media {
    height: 190px;
  }

  .experiment-caption {
    height: 58px;
    font-size: 0.85rem;
  }

  /* Case study pages */
  .case-header {
    padding: 32px 20px 0;
  }

  .case-study h1,
  .portfolio-header h1 {
    font-size: 32px;
  }

  .case-subtitle,
  .portfolio-header p {
    font-size: 16px;
  }

  .case-study h2 {
    font-size: 26px;
  }

  .case-study h3 {
    font-size: 20px;
  }

  .case-study p {
    font-size: 16px;
  }

  .case-content {
    padding: 32px 20px 64px;
  }

  .case-meta {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .case-meta > div {
    padding-left: 0;
    border-left: none;
  }

  .case-section {
    margin-top: 48px;
  }

  .case-subsection {
    margin-top: 28px;
  }

  .case-insight-card,
  .case-compare-box {
    padding: 20px;
  }

  .case-carousel {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }

  .case-carousel-btn {
    width: 34px;
    height: 34px;
  }

  .case-carousel-btn--prev {
    left: 8px;
  }

  .case-carousel-btn--next {
    right: 8px;
  }

  .case-lightbox-scroll {
    padding: 64px 20px 100px;
  }

  .case-lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .case-lightbox-nav--prev {
    left: 8px;
  }

  .case-lightbox-nav--next {
    right: 8px;
  }

  .case-lightbox-close {
    top: 14px;
    right: 16px;
    font-size: 30px;
  }

  .case-lightbox-close-btn {
    bottom: 18px;
    padding: 10px 22px;
    font-size: 14px;
  }

  .case-video-player {
    max-width: 260px;
  }

  .case-video-play-btn {
    width: 48px;
    height: 48px;
  }

  .case-stat-row {
    flex-direction: column;
    gap: 20px;
  }

  .case-stat {
    padding-right: 0;
  }

  .case-stat:not(:first-child) {
    padding-left: 0;
  }

  .case-stat:not(:last-child) {
    border-right: none;
  }

  .case-stat-number {
    font-size: 36px;
  }

  .case-palette-swatch {
    width: 56px;
    height: 56px;
  }

  .case-moodboard {
    flex-direction: column;
  }

  .case-moodboard-col {
    flex: 1 1 auto;
  }

  .case-component-grid img {
    height: 60px;
  }

  .case-image-row {
    flex-direction: column;
  }

  .case-image-row img {
    height: 220px;
  }

  .case-feature-row {
    margin-top: 32px;
  }

  .case-feature-heading {
    font-size: 22px;
  }

  .case-fan-carousel {
    height: 300px;
  }

  .case-fan-carousel-item {
    width: 230px;
  }

  .case-fan-carousel-btn {
    width: 34px;
    height: 34px;
  }

  .case-fan-carousel-btn--prev {
    left: -4px;
  }

  .case-fan-carousel-btn--next {
    right: -4px;
  }
}