/* === HOME DARK COHESION LAYER ===
   Loaded ONLY on the combined portfolio homepage ("/"), after styles.css.
   The Design / Photo / AI / Video sections keep their existing structure and
   layout from styles.css; this file only re-tones them for the dark portfolio
   by flipping the styles.css color tokens to the work.css dark palette.
   The dark Projects hero / stack / CTA (work.css) is untouched — it does not
   use these tokens. */

:root {
  --bg: #000000;
  --fg: #f2f2f0;
  --muted: #9a9a97;
  --subtle: #6f6f6c;
  --surface: #131313;
  --border: rgba(255, 255, 255, 0.12);
}

/* section-label uses an undefined --text token (inherits body color); pin it
   to the light foreground so the big Design/Photo/AI/Video headings read. */
.home-portfolio .section-label {
  color: var(--fg);
}

/* Editorial logo wall: supplied transparent black marks become white without
   modifying the source PNGs, then crossfade to their supplied colour pair. */
.home-portfolio .logo-swap-item {
  background: #0d0d0d;
}
.home-portfolio .logo-swap-item > img:not(.swap-front) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.99);
}
.home-portfolio .logo-swap-item .swap-front {
  background: transparent;
  filter: brightness(0) invert(1);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.home-portfolio .logo-swap-item:hover,
.home-portfolio .logo-swap-item:focus-visible {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.28);
}
.home-portfolio .logo-swap-item:hover > img:not(.swap-front),
.home-portfolio .logo-swap-item:focus-visible > img:not(.swap-front) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.035);
}
.home-portfolio .logo-swap-item:hover .swap-front,
.home-portfolio .logo-swap-item:focus-visible .swap-front {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.035);
}
.home-portfolio .logo-swap-item--static-color:hover > img:not(.swap-front),
.home-portfolio .logo-swap-item--static-color:focus-visible > img:not(.swap-front) {
  opacity: 0;
}
.home-portfolio .logo-swap-item--static-color:hover .swap-front,
.home-portfolio .logo-swap-item--static-color:focus-visible .swap-front {
  opacity: 1;
}
.home-portfolio .logo-swap-item:hover .logo-swap-label,
.home-portfolio .logo-swap-item:focus-visible .logo-swap-label {
  color: var(--fg);
}
.home-portfolio .logo-swap-item:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: -1px;
}

@media (hover: none), (pointer: coarse) {
  .home-portfolio .logo-swap-item > img:not(.swap-front) {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  .home-portfolio .logo-swap-item .swap-front {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .home-portfolio .logo-swap-item .logo-swap-label {
    color: var(--fg);
  }
}

/* First embedded section sits right under the dark CTA; soften the divider. */
.home-portfolio #design {
  border-top: 1px solid var(--border);
}

/* Main-nav anchor targets clear the real fixed-header height when opened by
   hash, including the Projects archive rather than the hero. */
.home-portfolio #projects-stack,
.home-portfolio .section {
  scroll-margin-top: calc(var(--app-header-h, 84px) + 16px);
}

/* =====================================================================
   REFINEMENTS
   ===================================================================== */

/* Shared layout tokens for the portfolio page. */
.home-portfolio {
  --panel-max: 1200px;                       /* max content-panel width  */
  --panel-reveal: clamp(16px, 4vw, 64px);    /* GIF gutter each side      */
  --content-pad: clamp(20px, 4vw, 72px);     /* symmetric panel padding   */
  --mobile-left-safe: 64px;                  /* clears the fixed MF logo   */
  --layer-work-content: 1;
  --layer-design-host: 2;
  --layer-design-subnav: 3;
}

/* ---- 1. Animated GIF backdrop -------------------------------------
   A fixed full-viewport layer behind everything. position:fixed (not
   background-attachment:fixed) so it also stays put on mobile Safari.
   The centred black panels below cover the middle; the GIF shows in the
   left/right reveal gutters throughout the page. */
body.home-portfolio::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #000 url('/videos/mfbg.gif?v=3') center / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 767px) {
  body.home-portfolio::before {
    display: none;
  }

  body.home-portfolio,
  .home-portfolio main,
  .home-portfolio .work-footer {
    background: #000;
  }

  .home-portfolio #photography,
  .home-portfolio #design-stage,
  .home-portfolio #photography .portfolio-block,
  .home-portfolio #design-stage .portfolio-block,
  .home-portfolio #photography .portfolio-block-header,
  .home-portfolio #design-stage .portfolio-block-header,
  .home-portfolio .photo-strip,
  .home-portfolio .strip-track {
    background-color: #000;
  }

  .home-portfolio .work-hero-v3 {
    background-color: #000;
    background-image: none;
  }
}

/* ---- 1. Centred black content panels ------------------------------
   Every section except the hero (which IS the GIF) becomes a solid-black
   panel of one consistent width, centred, with the GIF revealed beside it.
   Horizontal padding is unified so panels don't drift between sections. */
.home-portfolio main > section:not(.work-hero-v3),
.home-portfolio .design-work-group > section,
.home-portfolio .photography-work-group > section,
.home-portfolio .work-footer {
  position: relative;
  z-index: var(--layer-work-content);
  width: min(100% - var(--panel-reveal) * 2, var(--panel-max));
  margin-inline: auto;
  background: #000;
  padding-inline: var(--content-pad);
}

.home-portfolio .work-section-background {
  position: relative;
  z-index: var(--layer-work-content);
  isolation: isolate;
  background: #000;
}

/* Design is one semantic Work category even though Stage Design uses a
   full-width child section. Keep its sections in one isolated layer group;
   the first section hosts the sticky submenu above every later media layer. */
.home-portfolio .design-work-group > #design {
  z-index: var(--layer-design-host);
}

/* ---- Full-width media sections -----------------------------------
   Photography and Stage Design are genuinely full-width: their whole block
   (heading, text, slideshow, media) runs from ONE shared left-safe gutter to
   the right viewport edge, on a solid black background — not the centred panel.
   All gallery drag / scroll / mask behaviour is untouched. */

/* One shared, responsive left-safe gutter. Clears the fixed MF logo + nav
   (logo right edge ~113px @1280, ~134px on wide screens) yet stays small so
   the sections still read as full width. */
.home-portfolio {
  --safe-left: clamp(128px, 12vw, 168px);
}

/* Photography and Stage Design are direct homepage sections with the exact
   same full-width geometry and shared safe-left gutter. */
.home-portfolio #photography,
.home-portfolio #design-stage {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw + var(--safe-left));
  margin-right: calc(50% - 50vw);
  padding-inline: 0;
  background: #000;
}

/* ---- Web Design synchronized scroll slider ------------------------------
   One bounded desktop runway drives a stable sticky text/media presentation.
   The source mockups are transparent 8:5 PNGs, so the media frame stays black
   and uses contain throughout. Mobile swaps the runway for a native gallery. */
.home-portfolio .webdesign-scroll-slider {
  position: relative;
  height: 390vh;
  min-height: 2400px;
  background: #000;
}

.home-portfolio .webdesign-slider-sticky {
  --web-slider-sticky-top: calc(var(--app-header-h, 68px) + 72px);
  position: sticky;
  top: var(--web-slider-sticky-top);
  z-index: var(--layer-work-content);
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  height: calc(100vh - var(--web-slider-sticky-top) - 24px);
  min-height: 520px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  overscroll-behavior: auto;
  touch-action: pan-y;
}

.home-portfolio .webdesign-slider-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  gap: clamp(24px, 3.5vh, 36px);
  min-width: 0;
  padding-left: clamp(8px, 1.2vw, 18px);
  transform: translateY(clamp(-30px, -3vh, -18px));
}

.home-portfolio .webdesign-slider-copy {
  position: relative;
  min-height: 220px;
}

.home-portfolio .webdesign-slider-info-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  pointer-events: none;
  transition:
    opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-portfolio .webdesign-slider-info-panel.is-before {
  transform: translate3d(0, -48px, 0);
}

.home-portfolio .webdesign-slider-info-panel.is-active {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.home-portfolio .webdesign-slider-number {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.home-portfolio .webdesign-slider-info-panel h4 {
  margin: 18px 0 0;
  color: var(--fg);
  font-size: clamp(30px, 3.6vw, 58px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.home-portfolio .webdesign-slider-info-panel h4 a {
  color: inherit;
  text-decoration: none;
}

.home-portfolio .webdesign-slider-info-panel p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
}

.home-portfolio .webdesign-slider-visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.home-portfolio .webdesign-slider-visit span {
  transition: transform 0.24s ease;
}

.home-portfolio .webdesign-slider-visit:hover span,
.home-portfolio .webdesign-slider-visit:focus-visible span {
  transform: translate3d(3px, -3px, 0);
}

.home-portfolio .webdesign-slider-visit:focus-visible,
.home-portfolio .webdesign-slider-info-panel h4 a:focus-visible,
.home-portfolio .webdesign-slider-slide:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}

.home-portfolio .webdesign-slider-nav {
  display: grid;
  gap: 1px;
}

.home-portfolio .webdesign-slider-nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(242, 242, 240, 0.34);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 0.24s ease;
}

.home-portfolio .webdesign-slider-nav-item span:first-child {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.home-portfolio .webdesign-slider-nav-item:hover,
.home-portfolio .webdesign-slider-nav-item:focus-visible,
.home-portfolio .webdesign-slider-nav-item.is-active {
  color: var(--fg);
}

.home-portfolio .webdesign-slider-nav-item:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

.home-portfolio .webdesign-slider-media {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: #000;
  transform: translateY(clamp(-30px, -3vh, -18px));
  touch-action: pan-y;
}

.home-portfolio .webdesign-slider-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(72px, 0, 0);
  pointer-events: none;
  transition:
    opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-portfolio .webdesign-slider-slide.is-before {
  transform: translate3d(-72px, 0, 0);
}

.home-portfolio .webdesign-slider-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.home-portfolio .webdesign-slider-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.home-portfolio .webdesign-slider-slide img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-portfolio .webdesign-slider-slide:hover img,
.home-portfolio .webdesign-slider-slide:focus-visible img {
  transform: scale(1.012);
}

.home-portfolio .webdesign-slider-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.home-portfolio .webdesign-slider-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Keep the desktop heading and synchronized slider visually connected. The
   sticky frame still fills the viewport/runway, but its composition starts
   near the top instead of being vertically centered hundreds of pixels down. */
@media (min-width: 769px) {
  .home-portfolio .webdesign-slider-sticky {
    align-items: start;
    padding-top: clamp(46px, 5vh, 72px);
  }

  .home-portfolio .webdesign-slider-info,
  .home-portfolio .webdesign-slider-media {
    align-self: start;
  }
}

/* ---- Projects layered card deck ----------------------------------------
   Keep the main archive's existing physical deck unchanged. Web Design now
   uses the isolated synchronized slider above. */
@media (min-width: 1025px) {
  .home-portfolio .stack-section {
    --stack-top: calc(var(--app-header-h, 68px) + 18px);
    --stack-step: clamp(34px, 3.2vw, 48px);
    --stack-inset: clamp(4px, 0.55vw, 8px);
    --stack-max-width: 1200px;
    position: relative;
  }

  .home-portfolio .stack-section > .stack-card {
    --stack-depth: calc(var(--stack-count) - var(--stack-index) - 1);
    top: calc(var(--stack-top) + var(--stack-index) * var(--stack-step));
    width: calc(min(100%, var(--stack-max-width)) - var(--stack-depth) * var(--stack-inset) * 2);
    margin-inline: auto;
    margin-bottom: clamp(88px, 12vh, 132px);
  }

  .home-portfolio .stack-section > .stack-card:last-child {
    margin-bottom: 0;
  }

  .home-portfolio .stack-card-media {
    border-radius: var(--w-radius-sm, 8px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
                0 -18px 42px -24px rgba(0, 0, 0, 0.9);
  }
}

/* Compact version of the Projects deck for touch/tablet layouts. */
@media (max-width: 1024px) {
  .home-portfolio .stack-section {
    --stack-top: calc(var(--app-header-h, 104px) + 10px);
    --stack-step: clamp(24px, 7vw, 30px);
    --stack-inset: clamp(2px, 0.9vw, 4px);
    --stack-max-width: 100%;
    position: relative;
  }

  .home-portfolio .stack-section:not(.no-stack) > .stack-card {
    --stack-depth: calc(var(--stack-count) - var(--stack-index) - 1);
    position: sticky;
    top: calc(var(--stack-top) + var(--stack-index) * var(--stack-step));
    z-index: calc(var(--stack-index) + 1);
    width: calc(min(100%, var(--stack-max-width)) - var(--stack-depth) * var(--stack-inset) * 2);
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: clamp(52px, 10vh, 72px);
    opacity: 1;
    transform: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .home-portfolio .stack-section:not(.no-stack) > .stack-card:last-child {
    margin-bottom: 0;
  }

  .home-portfolio .stack-card-media {
    border-radius: var(--w-radius-sm, 8px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14),
                0 -12px 30px -20px rgba(0, 0, 0, 0.92);
  }
}

@media (max-width: 768px) {
  .home-portfolio .webdesign-scroll-slider {
    display: block;
    height: var(--web-slider-mobile-height, 305svh);
    min-height: 0;
  }

  .home-portfolio .webdesign-slider-sticky {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 132px auto auto;
    align-items: center;
    align-content: start;
    gap: 8px;
    height: max-content;
    min-height: 0;
    padding: 10px 0 6px;
  }

  .home-portfolio .webdesign-slider-info {
    display: contents;
    padding: 0;
    transform: none;
  }

  .home-portfolio .webdesign-slider-copy {
    grid-row: 1;
    min-height: 132px;
    padding-left: 2px;
  }

  .home-portfolio .webdesign-slider-info-panel {
    justify-content: flex-start;
    transform: translate3d(0, 24px, 0);
  }

  .home-portfolio .webdesign-slider-info-panel.is-before {
    transform: translate3d(0, -24px, 0);
  }

  .home-portfolio .webdesign-slider-info-panel.is-active {
    transform: translate3d(0, 0, 0);
  }

  .home-portfolio .webdesign-slider-info-panel h4 {
    margin-top: 11px;
    font-size: clamp(28px, 9vw, 36px);
  }

  .home-portfolio .webdesign-slider-info-panel p {
    margin-top: 8px;
    font-size: 12px;
  }

  .home-portfolio .webdesign-slider-visit {
    margin-top: 12px;
    font-size: 11px;
  }

  .home-portfolio .webdesign-slider-media {
    grid-row: 2;
    align-self: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 8 / 5;
    transform: none;
  }

  .home-portfolio .webdesign-slider-slide {
    transform: translate3d(34px, 0, 0);
  }

  .home-portfolio .webdesign-slider-slide.is-before {
    transform: translate3d(-34px, 0, 0);
  }

  .home-portfolio .webdesign-slider-slide.is-active {
    transform: translate3d(0, 0, 0);
  }

  .home-portfolio .webdesign-slider-nav {
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
  }

  .home-portfolio .webdesign-slider-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 28px;
    min-height: 28px;
    padding: 5px;
    text-align: center;
  }

  .home-portfolio .webdesign-slider-nav-item span:first-child {
    font-size: 10px;
  }

  .home-portfolio .webdesign-slider-nav-item span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-portfolio .webdesign-slider-info-panel,
  .home-portfolio .webdesign-slider-slide,
  .home-portfolio .webdesign-slider-slide img,
  .home-portfolio .webdesign-slider-visit span {
    transition-duration: 0.01ms;
    transform: none;
  }
}

/* ---- Shared horizontal-strip right-edge fade ---------------------------
   Every scrollable image strip (.photo-strip: all Photography strips + Stage
   Design) shares ONE fade system. On the black sections the mask (image ->
   transparent -> black section behind) is pixel-identical to a black gradient
   overlay, but only ever touches the strip — never the heading, animated line
   or title — and can't scroll, block dragging or cause overflow. Width is a
   shared responsive variable. Stage Design uses the same .strip-track img
   (object-fit: cover) as Photography — no custom sizing. */
.home-portfolio {
  --strip-fade-width: clamp(72px, 12vw, 190px);
  --media-line-width: clamp(72px, 12vw, 176px);
}
.home-portfolio .photo-strip {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--strip-fade-width)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--strip-fade-width)), transparent);
}
/* Scroll-state (toggled in main.js): drop the right fade at the end, show a
   small left fade + the right fade while scrolled through the middle. */
.home-portfolio .photo-strip.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%);
  mask-image: linear-gradient(to right, transparent, #000 5%);
}
.home-portfolio .photo-strip.scrolled:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 calc(100% - var(--strip-fade-width)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 calc(100% - var(--strip-fade-width)), transparent);
}

/* ---- Decorative animated media line (Photography + Stage Design) ---------
   A thin white line that sweeps left->right in each slideshow block's heading,
   right side, above the images — a horizontal adaptation of work-hero-scroll-line.
   One shared class (.media-line); decorative, not interactive. */
.home-portfolio #photography .portfolio-block-header,
.home-portfolio #design-stage .portfolio-block-header {
  position: relative;
}
.home-portfolio .media-line {
  position: absolute;
  top: 50%;
  right: clamp(16px, 4vw, 64px);
  transform: translateY(-50%);
  width: var(--media-line-width);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.home-portfolio .media-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  animation: media-line-sweep 2.4s ease-in-out infinite;
}
@keyframes media-line-sweep {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@media (max-width: 768px) {
  .home-portfolio {
    --media-line-width: clamp(56px, 18vw, 90px);
  }

  .home-portfolio .media-line {
    display: block;
    top: 12px;
    right: clamp(8px, 3vw, 16px);
    transform: none;
  }

  .home-portfolio #photography .portfolio-block-tag,
  .home-portfolio #design-stage .portfolio-block-tag {
    max-width: calc(100% - var(--media-line-width) - 16px);
  }
}

/* ---- 2. Centre the Design submenu (desktop) ----------------------- */
.home-portfolio .design-submenu {
  margin-inline: auto;
  flex-wrap: nowrap;
}
.home-portfolio .design-submenu.is-design-fixed {
  left: var(--design-submenu-left, 0);
  right: auto;
  margin: 0;
}
.home-portfolio .design-submenu-break {
  display: none;
}

/* ---- Mobile ------------------------------------------------------- */
@media (max-width: 768px) {
  .home-portfolio {
    --panel-reveal: 12px;
    --content-pad: 20px;
    --mobile-content-left: calc(var(--panel-reveal) + var(--mobile-left-safe));
    --mobile-logo-row-h: 12px;
    --mobile-main-nav-h: 52px;
    --mobile-header-h: calc(var(--mobile-logo-row-h) + var(--mobile-main-nav-h));
    --design-subnav-h: 42px;
  }

  /* 5. Consistent left safe-margin so the fixed MF logo never overlaps
     left-aligned content. Applied via the shared token to the
     left-aligned sections; centred CTA/footer content stays centred and
     already clears the logo. Selector matches the base panel rule's
     specificity so this padding-left wins by source order. */
  .home-portfolio main > section.section,
  .home-portfolio .design-work-group > section.section,
  .home-portfolio .photography-work-group > section.section,
  .home-portfolio main > section.stack-section {
    padding-left: var(--mobile-left-safe);
  }
  /* Shared gutter shrinks on mobile (logo right edge ~72px) but still grows
     enough to clear the desktop-sized logo near the 768px edge. Photography
     picks this up automatically via margin-left: var(--safe-left). */
  .home-portfolio {
    --safe-left: clamp(88px, 15vw, 116px);
  }

  /* Photography keeps its full-width right bleed, but its left edge uses the
     same content token as the centred mobile sections. The scrollbar term
     cancels the 50vw breakout's half-scrollbar shift. */
  .home-portfolio #photography {
    --safe-left: calc(var(--mobile-content-left) + (100vw - 100%) / 2);
  }

  /* 3. Mobile Design submenu. main.js fixes it beneath the measured header
     while the explicit Merchandise -> Web Design range is active; this keeps
     full-width Stage Design from becoming a sticky-containment boundary. */
  .home-portfolio .design-submenu {
    position: sticky;
    top: var(--design-submenu-top, var(--mobile-header-h, var(--app-header-h, 104px)));
    z-index: var(--layer-design-subnav);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    width: var(--design-submenu-width, 100vw);
    max-width: var(--design-submenu-width, 100vw);
    height: auto;
    min-height: 32px;
    box-sizing: border-box;
    left: auto;
    right: auto;
    margin-left: calc(-1 * var(--mobile-content-left));
    margin-right: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .home-portfolio .design-submenu.is-design-fixed {
    position: fixed;
    top: var(--design-submenu-top, var(--mobile-header-h, var(--app-header-h, 104px)));
    left: var(--design-submenu-left, 0);
    right: auto;
    margin: 0;
  }
  .home-portfolio .design-submenu::-webkit-scrollbar {
    display: none;
  }
  .home-portfolio .design-submenu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    min-width: 0;
    width: auto;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(7.5px, 2.15vw, 10.5px);
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    transform: none;
  }
  .home-portfolio .design-submenu-link.active {
    color: var(--fg);
    border: 0;
    background: transparent;
    font-weight: 700;
  }
  .home-portfolio .design-submenu-break {
    display: none;
  }
}

/* ---- Expanded AI showcase --------------------------------------------- */
.home-portfolio #projects {
  background: #000;
}

.home-portfolio .ai-section-intro {
  max-width: 720px;
  margin: calc(-1 * clamp(30px, 4vw, 48px)) 0 clamp(48px, 6vw, 76px);
  color: var(--muted);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.55;
}

.home-portfolio .ai-block-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.5vw, 32px);
  margin-bottom: clamp(22px, 3vw, 36px);
}

.home-portfolio .ai-block-index,
.home-portfolio .ai-block-kicker {
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-portfolio .ai-block-index {
  flex: 0 0 24px;
  padding-top: 5px;
}

.home-portfolio .ai-block-title {
  margin-top: 8px;
  color: var(--fg);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.home-portfolio #projects > .ai-block-header {
  margin-bottom: 14px;
}

.home-portfolio #projects > .projects-grid {
  margin-bottom: clamp(80px, 11vw, 144px);
}

.home-portfolio .ai-showcase-block {
  margin-bottom: clamp(88px, 12vw, 156px);
  scroll-margin-top: calc(var(--app-header-h, 84px) + 20px);
}

.home-portfolio .ai-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.65fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: end;
}

.home-portfolio .ai-featured-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #080808;
}

.home-portfolio .ai-featured-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-portfolio .ai-featured-copy {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.home-portfolio .ai-inline-tags,
.home-portfolio .ai-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.home-portfolio .ai-inline-tags li,
.home-portfolio .ai-tools-list li {
  padding: 7px 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.home-portfolio .ai-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.home-portfolio .ai-workflow-grid li {
  min-height: 150px;
  padding: 24px 26px;
  border-right: 1px solid var(--border);
}

.home-portfolio .ai-workflow-grid li:last-child {
  border-right: 0;
}

.home-portfolio .ai-workflow-grid span {
  display: block;
  margin-bottom: 30px;
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 11px;
}

.home-portfolio .ai-workflow-grid h4 {
  margin-bottom: 10px;
  color: var(--fg);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
}

.home-portfolio .ai-workflow-grid p,
.home-portfolio .ai-block-description,
.home-portfolio .ai-consent-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.home-portfolio .ai-consent-note {
  margin: -12px 0 24px 56px;
}

.home-portfolio .ai-influencer-story {
  position: relative;
  display: block;
  height: var(--ai-story-runway-height, 300vh);
  max-width: 1100px;
  margin-inline: auto;
  background: #000;
}

.home-portfolio [data-ai-influencer] {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.home-portfolio .ai-story-sticky {
  --ai-story-sticky-top: calc(var(--app-header-h, 68px) + 16px);
  position: sticky;
  top: var(--ai-story-sticky-top);
  display: grid;
  grid-template-columns: minmax(300px, 420px) 22px minmax(280px, 520px);
  justify-content: center;
  gap: 26px;
  align-items: center;
  height: calc(100svh - var(--ai-story-sticky-top) - 16px);
  min-height: 520px;
  overflow: hidden;
  background: #000;
}

.home-portfolio .ai-story-preview-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.home-portfolio .ai-story-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 420px, calc((100svh - var(--ai-story-sticky-top) - 32px) * 9 / 16));
  max-width: none;
  height: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
  isolation: isolate;
}

.home-portfolio .ai-story-preview > img,
.home-portfolio .ai-story-preview > video {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 1;
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.home-portfolio .ai-story-preview > video {
  object-fit: cover;
}

.home-portfolio .ai-story-preview.is-switching > img,
.home-portfolio .ai-story-preview.is-switching > video {
  opacity: 0;
  transform: scale(0.995);
}

.home-portfolio .ai-story-preview[data-frame="landscape"] > img,
.home-portfolio .ai-story-preview[data-frame="landscape"] > video {
  object-fit: contain;
}

.home-portfolio .ai-story-progress {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--subtle);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.06em;
}

.home-portfolio .ai-story-progress [data-ai-story-current] {
  color: var(--fg);
}

.home-portfolio .ai-story-dots {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 10px;
  height: max-content;
  transform: none;
}

.home-portfolio .ai-story-dot {
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-portfolio .ai-story-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.home-portfolio .ai-story-dot:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.home-portfolio .ai-story-audio {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.62);
  color: #fff;
  font: 400 13px/1 Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.home-portfolio .ai-story-audio:hover {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(12, 12, 14, 0.82);
}

.home-portfolio .ai-story-audio:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

.home-portfolio .ai-story-steps {
  position: relative;
  align-self: center;
  width: 100%;
  height: min(220px, 30vh);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-portfolio .ai-story-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 18px 0 18px 18px;
  border-left: 2px solid transparent;
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: border-color 0.35s ease, opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.home-portfolio .ai-story-step.is-active {
  border-color: rgba(255, 255, 255, 0.75);
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.home-portfolio .ai-story-step.is-past {
  opacity: 0;
}

.home-portfolio .ai-story-step-number {
  display: block;
  margin-bottom: 18px;
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.home-portfolio .ai-story-step h4 {
  max-width: none;
  margin-bottom: 10px;
  color: var(--fg);
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.home-portfolio .ai-story-step p {
  max-width: 32ch;
  color: var(--muted);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.55;
}

.home-portfolio .ai-block-description {
  margin: -14px 0 28px 56px;
}

.home-portfolio .ai-experiments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 10px;
}

.home-portfolio .ai-experiment {
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.home-portfolio .ai-experiment-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #080808;
}

.home-portfolio .ai-experiment-media img,
.home-portfolio .ai-experiment-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-portfolio .ai-experiment-media video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.home-portfolio .ai-experiment.is-playing .ai-experiment-media video {
  opacity: 1;
}

.home-portfolio .ai-experiment-media button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: none;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-portfolio .ai-experiment figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
}

.home-portfolio .ai-experiment figcaption strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

.home-portfolio .ai-experiment figcaption span {
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-portfolio .ai-tools-block {
  margin-bottom: 0;
}

.home-portfolio .ai-tools-list {
  margin: 0 0 0 56px;
}

@media (hover: hover) and (pointer: fine) {
  .home-portfolio .ai-experiment-media button {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-portfolio .ai-section-intro {
    margin-top: -24px;
  }

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

  .home-portfolio .ai-featured-copy {
    padding-inline: 2px;
  }

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

  .home-portfolio .ai-workflow-grid li {
    min-height: 0;
    padding: 22px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .home-portfolio .ai-workflow-grid li:last-child {
    border-bottom: 0;
  }

  .home-portfolio .ai-workflow-grid span {
    margin-bottom: 24px;
  }

  .home-portfolio .ai-consent-note,
  .home-portfolio .ai-block-description,
  .home-portfolio .ai-tools-list {
    margin-left: 0;
  }

  .home-portfolio .ai-influencer-story {
    display: block;
  }

  .home-portfolio [data-ai-influencer] {
    margin-bottom: 32px;
  }

  .home-portfolio .ai-story-sticky {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 94px auto 28px;
    align-content: start;
    gap: 10px;
    height: calc(100svh - var(--ai-story-sticky-top) - 8px);
    min-height: 0;
    padding: 10px 0 8px;
  }

  .home-portfolio .ai-story-preview-column {
    grid-row: 2;
    display: flex;
  }

  .home-portfolio .ai-story-preview {
    width: min(100%, 240px);
    max-height: 54svh;
  }

  .home-portfolio .ai-story-dots {
    grid-row: 3;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  .home-portfolio .ai-story-steps {
    grid-row: 1;
    height: 94px;
  }

  .home-portfolio .ai-story-step {
    min-height: 0;
    padding: 2px 0;
    border-left: 0;
  }

  .home-portfolio .ai-story-step-number {
    margin-bottom: 7px;
  }

  .home-portfolio .ai-story-step h4 {
    max-width: none;
    margin-bottom: 6px;
    font-size: clamp(22px, 7.5vw, 30px);
  }

  .home-portfolio .ai-story-step p {
    font-size: 12px;
    line-height: 1.4;
  }

  .home-portfolio .ai-experiments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 8px;
  }

  .home-portfolio .ai-experiment-media button {
    display: block;
  }
}

@media (max-width: 420px) {
  .home-portfolio .ai-block-header {
    gap: 12px;
  }

  .home-portfolio .ai-block-index {
    flex-basis: 20px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .home-portfolio .logo-swap-item > img,
  .home-portfolio .ai-experiment-media video,
  .home-portfolio .ai-story-preview > img,
  .home-portfolio .ai-story-preview > video,
  .home-portfolio .ai-story-dot,
  .home-portfolio .ai-story-step {
    transition: none;
  }

  .home-portfolio .ai-story-step {
    transform: none;
  }
}