/*
 * Phones: every section is a full-screen page, so the next one never peeks in.
 * Plain native scrolling — no snapping.
 */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 0;
  }

  /* A smaller, airier scale for phones */
  :root {
    --gutter: 1.25rem;
    --nav-height: 3.25rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
  }

  body {
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .brand {
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .kicker {
    font-size: 0.625rem;
    margin-bottom: var(--space-3);
  }

  .kicker::before {
    width: 1.1rem;
  }

  .btn,
  .hero-actions .btn {
    min-height: 40px;
    padding: 0.5rem 0.95rem;
    font-size: 0.6875rem !important;
    flex: 0 0 auto;
  }

  .ticker {
    padding: 0.65rem 0;
    font-size: 0.625rem;
  }

  .site-footer {
    font-size: 0.625rem;
    padding: var(--space-5) var(--gutter);
  }

  main > section {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-height) + var(--space-5)) var(--gutter) var(--space-6);
  }

  main > section > .section-inner {
    width: 100%;
  }

  .section-title {
    font-size: clamp(1.85rem, 8.4vw, 2.25rem);
  }

  .hero-title {
    font-size: clamp(2.6rem, 12.5vw, 3.1rem);
    margin-bottom: var(--space-4);
  }

  .hero-lede {
    font-size: var(--text-sm);
    max-width: 19rem;
  }

  .section-head {
    margin-bottom: var(--space-5);
  }

  /* Hero fills the first screen with the ticker pinned to its foot */
  .hero {
    min-height: calc(100svh - 2.2rem);
    justify-content: space-between;
    padding-bottom: var(--space-5);
  }

  /* copy and strip sit together, centred in the first screen */
  .hero-inner {
    flex: 1;
    align-content: center;
    gap: var(--space-8);
  }

  .hero-marks .mark[data-zone="free"] {
    width: 2.2rem;
    height: 2.2rem;
  }

  .hero-wall {
    --tile: 9rem;
  }

  .hero-marks {
    display: block;
  }


  /* Selected work: one piece per slide */
  .work .section-head {
    margin-bottom: var(--space-4);
  }

  .work-grid,
  .work-grid.is-clipped {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 66vw;
    gap: var(--space-3);
    /* sideways only: vertical swipes always go to the page */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .work-grid::-webkit-scrollbar {
    display: none;
  }

  .work-grid.is-clipped .work-item:nth-child(n + 9) {
    display: block;
  }

  /* fade only inside the slider — a slide-up would make it taller than its frame */
  .work-item,
  .work-item.is-visible {
    scroll-snap-align: start;
    transform: none;
  }

  .work-item[hidden] {
    display: none !important;
  }

  .work-meta {
    flex-direction: row;
    padding-top: var(--space-3);
  }

  .work-title {
    font-size: var(--text-sm);
  }

  .filter {
    min-height: 32px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
  }

  .work-grid.is-clipped + .work-more,
  .work-more {
    display: none;
  }

  .work-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .work-progress-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
  }

  .work-progress-bar {
    flex: 1;
    height: 2px;
    background: var(--color-stone);
    overflow: hidden;
  }

  .work-progress-bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--color-ink);
    transform-origin: left;
    transform: scaleX(var(--progress, 0.05));
    transition: transform 300ms var(--ease-out);
  }

  /* Statement */
  .statement-quote {
    font-size: clamp(1.55rem, 7vw, 1.9rem);
    line-height: 1.12;
    margin-bottom: var(--space-5);
  }

  .statement-body {
    font-size: var(--text-sm);
    gap: var(--space-3);
  }

  /* Studio page: compact header, square player, thumbnail strip */
  .studio .section-lede {
    display: none;
  }

  .studio .section-head {
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .ig-follow {
    padding: 0.4rem 0.65rem;
    gap: var(--space-2);
  }

  .ig-follow .ig-glyph {
    width: 1.15rem;
    height: 1.15rem;
  }

  .ig-follow-text strong {
    font-size: var(--text-sm);
  }

  .ig-follow-text span {
    font-size: 0.625rem;
  }

  .ig-follow-arrow {
    margin-left: 0;
  }

  .reel-feature {
    aspect-ratio: auto;
    height: min(66vw, 100svh - 27rem);
  }

  .kiln-page {
    background: var(--color-paper);
  }

  .reel-feature-caption {
    font-size: var(--text-md);
  }

  .reel-play {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }

  .reel-item {
    width: 3.6rem !important;
  }

  .kiln-mosaic {
    gap: 6px;
  }

  .kiln-ig {
    padding: var(--space-4);
  }

  .kiln-ig .ig-glyph {
    width: 1.6rem;
    height: 1.6rem;
  }

  .kiln-ig strong {
    font-size: var(--text-md);
  }

  .kiln-ig-arrow {
    top: var(--space-4);
    right: var(--space-4);
    width: 1rem;
    height: 1rem;
  }

  /* About page: portrait crop + bio; CV gets its own page */
  .about-grid {
    gap: var(--space-5);
  }

  .about-media {
    max-width: none;
    padding-bottom: 0;
  }

  .about-portrait img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 22%;
  }

  .about-inset,
  .about-mark {
    display: none;
  }

  .about .section-title {
    margin-bottom: var(--space-4);
  }

  .about-bio {
    font-size: 0.8125rem;
    gap: var(--space-3);
  }

  .highlights {
    padding-top: calc(var(--nav-height) + var(--space-5));
  }

  .highlights .section-title {
    margin-bottom: var(--space-4);
  }

  .highlights .cv li {
    padding: 0.45rem 0;
    font-size: 0.75rem;
    line-height: 1.35;
    grid-template-columns: 3rem 1fr;
  }

  .cv-year {
    font-size: 0.625rem;
  }

  /* Contact shares the last screen with the footer */
  .contact {
    min-height: calc(100svh - 4.5rem);
  }

  .contact-title {
    font-size: clamp(2.8rem, 14vw, 3.4rem);
  }

  .contact-copy {
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
  }

  .contact-email {
    font-size: clamp(1.15rem, 5.6vw, 1.4rem);
  }

  .contact-links {
    gap: var(--space-5);
    font-size: 0.6875rem;
    margin-top: var(--space-6);
  }
}

/* Short phones (SE-class): tighten so each page still fits one screen */
@media (max-width: 767px) and (max-height: 700px) {
  main > section {
    padding-top: calc(var(--nav-height) + var(--space-3));
    padding-bottom: var(--space-4);
  }

  .section-title {
    font-size: 2.1rem;
  }

  .kiln-note {
    display: none;
  }

  .kiln-cell:first-child {
    aspect-ratio: 2 / 1;
  }

  .highlights .cv li {
    padding: 0.35rem 0;
    font-size: 0.75rem;
  }

  /* degrees are already in the bio on the previous page */
  .highlights .cv li:nth-last-child(-n + 2) {
    display: none;
  }

  .hero-title {
    font-size: 3.2rem;
  }

  .hero-lede {
    margin-bottom: var(--space-4);
  }

  .about-bio p:last-child {
    display: none;
  }
}