/* Home: full-height intro and individually editable project slides. */
html.slides-page {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}
.slide {
  scroll-snap-align: start;
  min-height: 100svh;
}
.home-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  color: #fff;
  transition: color 0.25s;
  isolation: isolate;
}
.home-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgb(16 16 16 / .92);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  opacity: 0;
  transition: opacity .25s ease, background-color .25s ease;
}
body.on-project .home-header::before { background: rgb(255 255 255 / .94); }
:root[data-theme="dark"] body.on-project .home-header::before { background: rgb(16 16 16 / .94); }
.home-header.is-scrolling::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-header::before { transition: none; } }
body.on-project .home-header {
  color: #181818;
  background: transparent;
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: #12051e;
  color: #fff;
}
.hero-poster,
.hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero > video { opacity: 0; transition: opacity .45s ease; }
.hero > video.has-video-frame { opacity: 1; }
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(8, 0, 18, 0.5), rgba(8, 0, 18, 0.1));
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 6vw 110px;
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(56px, 7vw, 144px);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -0.045em;
  max-width: 1400px;
}
.hero .line {
  overflow: visible;
}
.hero .line-inner {
  animation: intro-enter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero .line:nth-child(2) .line-inner {
  animation-delay: 0.12s;
}
.hero .line:nth-child(3) .line-inner {
  animation-delay: 0.24s;
}
@keyframes intro-enter {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.name-wrap {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}
.name-trigger {
  color: #ff5100;
  font:
    italic 700 1em Novy,
    Arial,
    sans-serif;
  letter-spacing: inherit;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.name-photo {
  position: absolute;
  width: clamp(150px, 16vw, 300px);
  height: clamp(190px, 20vw, 380px);
  left: 65%;
  top: -70%;
  z-index: 10;
  pointer-events: none;
  transform: rotate(7deg);
  filter: drop-shadow(0 20px 30px #0005);
}
.name-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-description {
  max-width: 720px;
  font-size: clamp(21px, 2vw, 40px);
  line-height: 1.18;
  margin: 48px 0;
  letter-spacing: -0.035em;
}
.hero-availability {
  font-size: clamp(16px, 1.35vw, 28px);
  line-height: 1.4;
  margin: 0 0 30px;
}
.hero-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: auto;
}
.hero-contact {
  font-size: 16px;
  border: 1px solid white;
  border-radius: 10px;
  padding: 13px 20px;
  background: #ffffff26;
}
/* An orange light travels around the contact button, as in the hover reference. */
@property --contact-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hero .hero-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border-color: rgb(255 255 255 / .28);
  color: #fff;
  background: rgb(20 18 18 / .7);
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .5s ease;
}
.hero .hero-contact::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--contact-glow-angle),
    #ff510025, #ff5100 65deg, #ffb17a 95deg, #ff510025 150deg,
    #ff510015 190deg, #ff5100 260deg, #ff9a5b 280deg, #ff510025 340deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  animation: contact-light-orbit 3s linear infinite paused;
}
@keyframes contact-light-orbit { to { --contact-glow-angle: 360deg; } }
.hero .hero-contact:focus-visible {
  outline: 2px solid #ff9a5b;
  outline-offset: 5px;
  border-color: #ff510080;
  box-shadow: 0 0 14px #ff510045, 0 0 30px #ff510025;
}
.hero .hero-contact:focus-visible::before { opacity: 1; animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .hero .hero-contact:hover {
    background: rgb(24 19 17 / .94);
    border-color: #ff510070;
    box-shadow: inset 0 0 12px #ff51000c, 0 0 14px #ff510050, 0 0 34px #ff510028;
  }
  .hero .hero-contact:hover::before { opacity: 1; animation-play-state: running; }
}
.hero .hero-contact:active { border-color: #ff5100; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-contact, .hero .hero-contact::before { transition: none; }
  .hero .hero-contact::before { animation: none; }
}
/* The label expands without changing the button's height. */
.social-link {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: #fff;
  color: #080808;
  text-decoration: none;
  font-size: 24px;
  line-height: 1.2;
  transition: background-color 240ms ease, color 240ms ease;
}
.social-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.social-instagram {
  width: 30px;
  height: 30px;
  transition: opacity 180ms ease, transform 240ms ease;
}
.social-dot {
  position: absolute;
  inset: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 180ms ease, transform 240ms ease;
}
.social-label {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 300ms ease, margin-left 300ms ease;
}
.social-label > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.social-link:focus-visible {
  background: #404040;
  color: #fff;
}
.social-link:focus-visible .social-label {
  grid-template-columns: 1fr;
  margin-left: 12px;
}
.social-link:focus-visible .social-instagram {
  opacity: 0;
  transform: scale(.6);
}
.social-link:focus-visible .social-dot {
  opacity: 1;
  transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
.social-link:hover {
  background: #404040;
  color: #fff;
}
.social-link:hover .social-label {
  grid-template-columns: 1fr;
  margin-left: 12px;
}
.social-link:hover .social-instagram {
  opacity: 0;
  transform: scale(.6);
}
.social-link:hover .social-dot {
  opacity: 1;
  transform: scale(1);
}
}
.reel-trigger {
  position: absolute;
  inset: 70px 0 0;
  width: 100%;
  z-index: 1;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}
.play-label {
  position: absolute;
  top: 45%;
  left: 75%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font:
    600 12px Arial,
    sans-serif;
  letter-spacing: 0.07em;
  padding: 9px 11px;
  background: #809aa6d9;
  color: white;
  border-radius: 3px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.reel-trigger .play-label {
  opacity: 0;
  border: 1px solid #ffffff48;
  border-radius: 100px;
  padding: 13px 18px;
  background: #15151555;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px #0001;
  transition: opacity .2s ease;
}
.reel-trigger .play-label::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-right: 9px;
}
@media (hover: hover) and (pointer: fine) {
  .reel-trigger.cursor-active .play-label,
  .reel-trigger:focus-visible .play-label { opacity: 1; }
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 28px;
  left: calc(50% - 16px);
  width: 32px;
  height: 50px;
  border: 2px solid #fffb;
  border-radius: 20px;
}
.scroll-cue span {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 5px;
  height: 7px;
  background: white;
  border-radius: 8px;
  animation: scroll-wheel 1.8s infinite;
}
@keyframes scroll-wheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(18px);
    opacity: 0;
  }
}
.slide-navigation {
  position: fixed;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 75svh;
  overflow-y: auto;
  color: white;
}
.slide-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  flex: 0 0 auto;
}
.slide-dot:after {
  display: none;
}
.slide-dot span {
  width: 11px;
  height: 11px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 50%;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.slide-dot[aria-current] span {
  opacity: 1;
  transform: scale(1.15);
}
body.on-project .slide-navigation {
  color: #111;
}
.project-slide {
  display: flex;
  align-items: center;
  padding: 100px max(7vw, 55px) 45px;
  background: white;
}
.slide-card {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 64px);
  border-radius: 16px;
  background: #191919;
  color: white;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: clamp(30px, 4vw, 76px);
}
.slide-media {
  min-width: 0;
  min-height: 350px;
}
.slide-media .image-trigger {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
  padding: 0;
  cursor: zoom-in;
}
.slide-media img,
.slide-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 72svh;
  object-fit: contain;
}
.slide-copy h2 {
  font-size: clamp(28px, 2.5vw, 52px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
}
.project-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.project-tags :is(span, a) {
  border-radius: 24px;
  background: #303030;
  font-size: 15px;
  padding: 6px 20px;
}
.slide-description p {
  font-size: clamp(16px, 1.05vw, 21px);
  line-height: 1.45;
  margin: 0 0 24px;
}
.project-link {
  display: inline-block;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#reel-dialog {
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: black;
  overflow: hidden;
}
#reel-dialog video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.reel-exit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.reel-exit .play-label {
  top: 40px;
  left: calc(100% - 65px);
}
.reel-tools {
  position: absolute;
  bottom: 22px;
  left: 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: white;
}
.reel-tools button {
  color: white;
  background: #333b;
  border: 1px solid #777;
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
}
#reel-dialog [role="status"] {
  position: absolute;
  left: 20px;
  top: 20px;
  color: white;
  background: black;
  padding: 12px;
}
@media (max-width: 800px) {
  html.slides-page {
    scroll-snap-type: y proximity;
  }
  .hero-copy {
    padding: 120px 24px 120px;
  }
  .hero h1 {
    font-size: clamp(42px, 7.4vw, 64px);
  }
  .hero-description {
    font-size: 23px;
    max-width: 540px;
    margin-block: 32px;
  }
  .hero-availability {
    font-size: 16px;
    max-width: 430px;
  }
  .slide-card {
    grid-template-columns: 1fr;
  }
  .project-slide {
    padding: 90px 42px 40px 20px;
  }
  .slide-media {
    min-height: 0;
    aspect-ratio: 1.3;
  }
  .slide-copy h2 {
    margin-bottom: 20px;
  }
  .slide-navigation {
    right: 3px;
  }
  .slide-dot {
    width: 28px;
    height: 32px;
  }
  
}
@media (max-width: 480px) {
  .hero h1 {
    font-size: 44px;
  }
  .hero-description {
    font-size: 21px;
  }
  .hero .line-inner {
    display: block;
  }
  .hero .line {
    display: block;
  }
  .name-photo {
    left: 10%;
    top: -100%;
    width: 170px;
    height: 200px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.slides-page {
    scroll-snap-type: none;
  }
  .hero > video {
    display: none;
  }
  .scroll-cue span,
  .hero .line-inner {
    animation: none;
  }
}

.project-slide {
  background: var(--surface);
}
.slide-card {
  background: var(--card-surface);
}
body.on-project .home-header {
  background: transparent;
  color: var(--foreground);
}
body.on-project .slide-navigation {
  color: var(--foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .project-slide .slide-card {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.7s ease,
      transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .motion-ready .project-slide.seen .slide-card {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Each outer page is exactly one viewport. Long copy scrolls inside its card. */
html.slides-page { scroll-snap-type: y mandatory; }
.slides-page .slide { height: 100svh; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; }
.slides-page .project-slide { padding: 92px clamp(48px,6vw,112px) 32px; }
.slides-page .slide-card { height: 100%; min-height: 0; padding: clamp(24px,3vw,52px); grid-template-columns: minmax(0,1.55fr) minmax(280px,1fr); gap: clamp(32px,4vw,72px); }
.slides-page .slide-media { height: 100%; min-height: 0; overflow: hidden; border-radius: 6px; }
.slides-page .slide-media img,.slides-page .slide-media video { max-height: none; }
.slides-page .slide-copy { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 10px 8px 0; align-self: stretch; }
.slides-page .slide-copy h2 { font-size: clamp(28px,2.7vw,52px); margin-bottom: 30px; }
.project-tags { gap: 12px; margin-bottom: 28px; }
.project-tags :is(span, a) { padding: 7px 20px; }
.slide-description p { line-height: 1.5; margin-bottom: 26px; max-width: 60ch; }
.project-link { margin-top: 8px; }
.slides-page .hero-copy { max-height: calc(100svh - 76px); overflow: auto; padding: 24px 6vw 80px; margin-top: 76px; }
.slides-page .hero h1 { font-size: clamp(44px,min(7vw,12vh),144px); }
.slides-page .hero-description { max-width: 760px; margin-block: clamp(24px,4vh,48px); }
body>.name-photo { position: fixed; z-index: 1000; margin: 0; pointer-events: none; transform: rotate(6deg); transition: left .09s ease-out,top .09s ease-out; }
body>.name-photo[hidden] { display: none; }
.project-carousel,.carousel-frames,.carousel-frame { position: relative; height: 100%; width: 100%; min-height: 0; }
.carousel-frame[hidden] { display: none; }
.carousel-frame:not([hidden]) { animation: carousel-in .5s ease both; }
@keyframes carousel-in { from { opacity: .2; } to { opacity: 1; } }
.carousel-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 3px 12px; border-radius: 28px; background: #1114; backdrop-filter: blur(8px); }
.carousel-dots { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.carousel-dot { display: grid; place-items: center; border: 0; background: transparent; padding: 0 4px; height: 36px; cursor: pointer; }
.carousel-dot span { display: block; height: 9px; width: 9px; border-radius: 12px; background: #ffffff65; transition: width .35s,background .35s; }
.carousel-dot[aria-current] span { width: 36px; background: white; }
@media(max-width:800px) {
 .slides-page .project-slide { padding: 82px 40px 20px 20px; }
 .slides-page .slide-card { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) minmax(0,1fr); gap: 22px; padding: 22px; }
 .slides-page .slide-media { aspect-ratio: auto; }
 .slides-page .slide-copy h2 { font-size: 28px; margin-bottom: 18px; }
 .project-tags { margin-bottom: 18px; gap: 8px; }
 .project-tags :is(span, a) { padding: 5px 12px; font-size: 14px; }
 .slides-page .hero-copy { padding-inline: 24px; }
 .carousel-controls { bottom: 10px; }
}
@media(pointer:coarse) { .carousel-dot { min-width: 36px; min-height: 44px; } }
@media(prefers-reduced-motion:reduce) {
 html.slides-page { scroll-snap-type: y mandatory; scroll-behavior: auto; }
 body>.name-photo { transition: none; }
 .carousel-frame:not([hidden]) { animation: none; }
}

/* Fixed media frame; only the content changes between carousel items. */
.slide-media { overflow: hidden; background: #151515; }
.carousel-dot span { position: relative; overflow: hidden; background: #ffffff70; }
.carousel-dot[aria-current] span { width: 38px; background: #ffffff70; }
.carousel-dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.slide-card { box-shadow: 0 5px 24px rgb(0 0 0 / .08); }
.project-link {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 13px 22px; min-height: 48px; border: 1px solid currentColor;
  border-radius: 999px; text-decoration: none; font-size: 16px;
  transition: background .2s, transform .2s;
}
.project-link::after { content: ""; }
@media (hover: hover) and (pointer: fine) { .project-link:hover { background: #8882; transform: translateY(-2px); } }
@media (min-width: 801px) and (max-width: 1100px) {
 .slides-page .project-slide { padding: 84px 44px 24px 24px; }
 .slides-page .slide-card { padding: 24px; gap: 24px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 480px) {
 .slides-page .project-slide { padding: 74px 28px 12px 12px; }
 .slides-page .slide-card { padding: 14px; gap: 16px; }
 .slides-page .slide-copy h2 { font-size: 25px; overflow-wrap: anywhere; }
 .slide-description p { font-size: 16px; }
 .hero-actions { gap: 12px; }
}

html.slides-page.is-slide-transition { scroll-snap-type: none; scroll-behavior: auto; }

.hero-description p { margin: 0; }
.hero-description p + p { margin-top: .8em; }

/* A single scroll viewport avoids Safari body/toolbar offsets between frames. */
html.slides-page, .slides-page body { height: 100%; overflow: hidden; scroll-snap-type: none; }
.slides-page main {
  position: fixed; inset: 0; width: 100%; height: 100dvh;
  overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory;
  scroll-padding: 0; scroll-behavior: auto; overscroll-behavior-y: none;
}
.slides-page .slide { height: 100dvh; min-height: 100dvh; scroll-margin: 0; }
@media (min-width: 801px) and (min-height: 601px) {
  .slides-page .project-slide--wide { padding-inline: var(--page-gutter); }
  .slides-page .project-slide--wide .slide-card { max-width: none; }
  .slides-page:has(.project-slide--wide) .slide-navigation { right: 2px; }
}
.slides-page.is-slide-transition main { scroll-snap-type: none; }
.slides-page .hero-copy { max-height: calc(100dvh - 90px); }
.slides-page .slide-copy { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.project-tags a { transition: background .2s; }
@media (hover: hover) and (pointer: fine) { .project-tags a:hover { background: #454545; } }

/* Intrinsic one-line controls, even with large touch targets or many images. */
.carousel-controls {
  width: max-content; max-width: calc(100% - 24px); min-width: 0;
  padding: 0 6px; gap: 0; bottom: 12px; z-index: 3;
  overflow: hidden; border-radius: 999px;
}
.carousel-dots {
  flex-wrap: nowrap; justify-content: flex-start; gap: 0;
  min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.carousel-dots::-webkit-scrollbar { display: none; }
.carousel-dot { flex: 0 0 auto; min-width: 32px; min-height: 44px; padding: 0 9px; }
.carousel-dot span { width: 6px; height: 6px; }
.carousel-dot[aria-current] span { width: 30px; }

@media (hover: none), (pointer: coarse) {
  .slides-page .hero-copy { pointer-events: auto; }
  .hero .reel-trigger .play-label { display: none; }
  .social-link, .social-link:is(:hover, :focus-visible) {
    background: white; color: #111; min-height: 44px; padding: 0 17px;
  }
  .social-link .social-label { display: none; }
  .social-link .social-dot { display: none; }
  .social-link .social-instagram { opacity: 1; transform: none; width: 24px; height: 24px; }
  .social-symbol { width: 24px; height: 24px; flex-basis: 24px; }
}
@media (max-width: 800px) {
  .slides-page .project-slide { padding: 68px 30px 16px 14px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .slides-page .slide-card { padding: 14px; gap: 18px; grid-template-rows: minmax(0, .95fr) minmax(0, 1.05fr); overflow: hidden; }
  .slides-page .slide-media { position: relative; border-radius: 10px; }
  .slides-page .slide-copy { padding-right: 3px; }
  .slides-page .slide-copy h2 { margin-bottom: 14px; font-size: clamp(23px, 6vw, 30px); }
  .slides-page .hero-copy { margin-top: 60px; max-height: calc(100dvh - 110px); padding: 16px 22px 40px; }
  .slides-page .hero h1 { font-size: clamp(32px, 8.9vw, 60px); }
  .slides-page .hero-description { font-size: clamp(18px, 4.7vw, 24px); margin-block: 26px; line-height: 1.25; }
  .hero-availability { font-size: 14px; margin-bottom: 22px; }
  .hero-actions { gap: 12px; }
  .hero-contact { font-size: 14px; min-height: 44px; padding: 11px 14px; }
  .project-link { padding: 10px 16px; min-height: 44px; font-size: 14px; gap: 16px; }
  .project-tags { gap: 7px; margin-bottom: 16px; }
  .project-tags :is(span, a) { padding: 6px 12px; font-size: 13px; }
  .slide-description p { font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
  .slide-navigation { right: 0; }
  .slide-dot { width: 26px; height: 32px; }
  .slide-dot span { width: 7px; height: 7px; }
  .scroll-cue { width: 24px; height: 38px; left: calc(50% - 12px); bottom: 18px; }
  .scroll-cue span { left: 8px; top: 6px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .slides-page .project-slide { padding: 60px max(36px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .slides-page .slide-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 12px; gap: 20px; }
  .slides-page .slide-copy h2 { font-size: 24px; margin-bottom: 12px; }
  .project-tags { margin-bottom: 12px; gap: 6px; }
  .project-tags :is(span, a) { padding: 5px 10px; font-size: 12px; }
  .slide-description p { font-size: 14px; line-height: 1.45; }
  .slides-page .hero-copy { margin-top: 58px; max-height: calc(100dvh - 68px); padding: 12px max(40px, env(safe-area-inset-left)) 24px; }
  .slides-page .hero h1 { font-size: clamp(28px, 7dvh, 42px); }
  .slides-page .hero-description { font-size: 17px; margin-block: 14px; max-width: 700px; }
  .hero-availability { font-size: 13px; margin-bottom: 12px; }
  .scroll-cue { display: none; }
}