/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 1100px) {
  .hero-content {
    left: 6vw;
    width: 86vw;
  }

  #heroTitle {
    font-size: clamp(72px, 13.4vw, 150px);
  }

  .hero-copy {
    width: min(500px, 62vw);
  }

  .project-panel {
    grid-template-columns: 1.15fr .85fr;
  }
}

/* =========================================================
   RESPONSIVE — TABLET PORTRAIT + MOBILE
   Horizontal portfolio becomes native swipe.
   ========================================================= */
@media (max-width: 900px), (hover: none) and (max-width: 1180px) {
  body {
    overflow-x: hidden;
  }

  .section-transition {
    min-height: 1050px;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: rgba(7,7,8,.96);
    backdrop-filter: blur(18px);
    transform: translateY(-105%);
    transition: transform .35s ease;
  }

  .nav-links.is-open {
    transform: translateY(0);
  }

  .nav-link {
    font-size: clamp(25px, 7vw, 48px);
    font-family: Blacker, Georgia, serif;
    letter-spacing: -.02em;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 60;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .hero {
    height: 100svh;
    min-height: 720px;
  }

  .hero-content {
    left: var(--page-pad);
    top: 46%;
    width: calc(100% - var(--page-pad) * 2);
  }

  #heroTitle {
    font-size: clamp(62px, 16vw, 118px);
  }

  .hero-copy {
    width: min(520px, 82vw);
  }

  .hero-bottom {
    display: none;
  }

  .hover-hint {
    display: none;
  }

  .services-lineup {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80vw;
  }

  /* Native horizontal swipe */
  .portfolio-section {
    height: auto !important;
    min-height: 100svh;
    overflow: hidden;
  }

  .portfolio-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .portfolio-track {
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    transform: none !important;
    padding-bottom: 10px;
  }

  .portfolio-track::-webkit-scrollbar {
    display: none;
  }

  .portfolio-panel {
    scroll-snap-align: start;
    width: 88vw;
    min-width: 88vw;
    height: auto;
    min-height: 82svh;
    padding: 54px 22px;
  }

  .portfolio-intro {
    width: 92vw;
    min-width: 92vw;
    grid-template-columns: 1fr;
    align-content: center;
  }

  .portfolio-intro h2 {
    font-size: clamp(74px, 22vw, 150px);
  }

  .portfolio-intro-copy {
    align-self: start;
    padding: 0;
  }

  .portfolio-direction .brand-button__label {
    font-size: 0;
  }

  .portfolio-direction .brand-button__label::after {
    content: "SWIPE";
    font-size: 9px;
  }

  .project-panel {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 30px;
  }

  .project-media {
    height: clamp(340px, 52svh, 620px);
  }

  .project-media--portrait {
    width: 100%;
  }

  .project-content {
    max-width: 100%;
  }

  .project-content h3 {
    font-size: clamp(46px, 11vw, 82px);
  }

  .portfolio-outro {
    width: 88vw;
    min-width: 88vw;
  }

  .portfolio-outro h3 {
    font-size: clamp(58px, 14vw, 100px);
  }

  .portfolio-section::after {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — PHONE
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --page-pad: 18px;
  }

  .brand img {
    width: 136px;
  }

  .hero {
    min-height: 680px;
    padding-top: 20px;
  }

  .hero-content {
    top: 45%;
  }

  #heroTitle {
    font-size: clamp(58px, 18.5vw, 92px);
    line-height: .78;
  }

  .eyebrow {
    gap: 9px;
    font-size: 8px;
  }

  .eyebrow i {
    width: 22px;
  }

  .hero-copy {
    width: 92%;
    margin-top: 25px;
    font-size: 12px;
  }

  .course-cta {
    right: 18px;
    bottom: 26px;
  }

  .course-cta a {
    padding: 13px 15px;
    gap: 18px;
    font-size: 9px;
  }

  .scroll-label {
    display: none;
  }

  .services-intro h2 {
    font-size: clamp(50px, 16vw, 84px);
  }

  .services-logo {
    width: 168px;
    margin-bottom: 28px;
  }

  .services-lineup {
    max-width: 90vw;
    font-size: 7px;
    gap: 7px;
  }

  .contact-section {
    min-height: 80svh;
  }

  .contact-inner h2 {
    font-size: clamp(60px, 17vw, 94px);
  }

  .contact-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   V24 — WORKS SAFE SPACING ON TOUCH DEVICES
   Keep a real gutter between swipe panels and keep all content
   inside each card. No element may visually invade the next project.
   ========================================================= */
@media (max-width: 900px), (hover: none) and (max-width: 1180px) {
  .portfolio-track {
    gap: 20px;
    padding-inline: 4vw;
  }

  .portfolio-panel {
    box-sizing: border-box;
    width: 88vw;
    min-width: 88vw;
    margin: 0;
  }

  .project-panel,
  #project-restaurants {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-inline: 22px;
  }

  .project-panel > *,
  .project-content,
  .project-media {
    min-width: 0;
    max-width: 100%;
  }

  .project-media--portrait,
  #project-restaurants .project-media {
    width: 100%;
    max-width: 100%;
    height: clamp(330px, 50svh, 580px);
  }

  .project-content {
    width: 100%;
    max-width: 100%;
  }

  .project-content h3,
  #project-restaurants .project-content h3 {
    max-width: 100%;
    font-size: clamp(44px, 10.5vw, 74px);
    line-height: .86;
  }

  .portfolio-outro {
    width: 88vw;
    min-width: 88vw;
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) and (hover: hover) {
  .project-panel,
  #project-miceli,
  #project-restaurants {
    grid-template-columns: minmax(0, .92fr) minmax(350px, .88fr);
    gap: 42px;
    padding-inline: 48px;
  }

  #project-miceli .project-media--portrait {
    width: min(100%, 470px);
  }

  .project-content h3,
  #project-miceli .project-content h3,
  #project-restaurants .project-content h3 {
    font-size: clamp(44px, 4.6vw, 58px);
  }
}

/* V25 — explicit mobile override for ID-specific STREAMING grid. */
@media (max-width: 900px), (hover: none) and (max-width: 1180px) {
  #project-streaming {
    grid-template-columns: 1fr;
  }

  #project-streaming .project-media--portrait {
    width: 100%;
    max-width: 100%;
    height: clamp(340px, 52svh, 620px);
  }

  #project-streaming .project-content {
    max-width: 100%;
  }
}

/* =========================================================
   V27 — PHONE VERTICAL PORTFOLIO
   Phones use the document's vertical flow: every project owns a
   full-width row, so adjacent cards and touch targets cannot collide.
   ========================================================= */
@media (max-width: 600px) {
  .portfolio-section {
    min-height: 0;
    overflow-x: clip;
  }

  .portfolio-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .portfolio-track {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: auto;
    padding: 0;
    transform: none !important;
    touch-action: pan-y;
    will-change: auto;
  }

  .portfolio-panel,
  .portfolio-intro,
  .portfolio-outro {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    scroll-snap-align: none;
  }

  .portfolio-intro {
    min-height: clamp(560px, 85svh, 760px);
    padding: clamp(52px, 14vw, 72px) var(--page-pad);
    gap: 32px;
    align-content: center;
  }

  .portfolio-intro h2 {
    max-width: 100%;
    font-size: clamp(46px, 16vw, 72px);
    line-height: .8;
    overflow-wrap: break-word;
  }

  .portfolio-intro-copy p {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
  }

  .portfolio-direction .brand-button__label {
    font-size: 9px;
  }

  .portfolio-direction .brand-button__label::after {
    display: none;
  }

  #work .project-panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    gap: 26px;
    padding: clamp(48px, 14vw, 72px) var(--page-pad);
  }

  #work .project-panel > *,
  #work .project-content,
  #work .project-media {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  #work .project-media {
    height: auto;
    aspect-ratio: 4 / 5;
    justify-self: stretch;
    border-radius: 18px;
  }

  #work .project-media--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
  }

  #work .project-panel .project-content h3 {
    max-width: 100%;
    font-size: clamp(2.25rem, 11vw, 3.5rem);
    line-height: .9;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  #work .project-type {
    max-width: 100%;
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  #work .project-description {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  #work .project-tags {
    max-width: 100%;
    margin-top: 20px;
  }

  #work .project-tags li {
    max-width: 100%;
    padding: 8px 10px;
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  #work .project-link {
    touch-action: manipulation;
  }

  #work .project-link-cta {
    max-width: calc(100% - 24px);
    font-size: .6875rem;
    line-height: 1.35;
    white-space: normal;
  }

  .portfolio-outro {
    min-height: 0;
    padding: clamp(56px, 16vw, 84px) var(--page-pad);
  }

  .portfolio-outro h3 {
    max-width: 100%;
    font-size: clamp(2.75rem, 13vw, 4.5rem);
    line-height: .84;
    overflow-wrap: break-word;
  }

  .archive-grid {
    max-width: 100%;
    margin-top: 34px;
  }

  .archive-grid span {
    max-width: 100%;
    font-size: .6875rem;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
}