/* ================================================
   DISARM — MOBILE / TABLET-PORTRAIT LAYOUT  (≤ 960px)

   Single home for every mobile rule of BOTH pages. It loads last
   (see partials/head.php) and everything is inside
   @media (max-width: 960px), so nothing here can reach the desktop
   layout — above 960px this file is inert. Desktop-only animation
   (GSAP pins / scrub in js/main.js and js/projects.js) is switched off
   at the same 960px threshold, so on mobile every section is plain,
   static, readable content.

   Order: global → header/menu → PROJECTS page → HOME sections
   (hero, welcome, about, process, projects, experience, contact,
   footer) → small phones (≤ 480px).
   ================================================ */

@media (max-width: 960px) {

  /* ============================================
     GLOBAL
     ============================================ */
  :root {
    --container-padding: 24px;
    --header-height: 68px;
  }

  /* The side progress rail (and its back-to-top) is a desktop control */
  .page-progress {
    display: none;
  }

  /* ============================================
     HEADER + MENU
     ============================================ */
  .site-header {
    padding: 16px var(--container-padding);
  }

  .header-logo-icon {
    width: 36px;
  }

  /* Transparent over the hero, but once you scroll it needs a backing: the
     mint logo / white menu icon would vanish over the light mint blocks */
  .site-header.is-scrolled {
    background-color: rgba(13, 20, 28, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .nav-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    margin-right: -8px; /* optical alignment with the page gutter */
    align-items: center;
  }

  /* Off-canvas menu: slides in from the right, dims the page behind it */
  .header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(82vw, 320px);
    height: 100vh;
    height: 100dvh;
    margin-right: 0;
    padding: calc(var(--header-height) + 32px) 32px 32px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
    background-color: rgba(13, 20, 28, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: right var(--transition-base), box-shadow var(--transition-base);
  }

  .header-nav.is-open {
    right: 0;
    box-shadow: -100vw 0 0 100vw rgba(0, 0, 0, 0.55); /* scrim over the page */
  }

  .header-nav .nav-link {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: rgba(226, 233, 233, 0.72); /* the idle grey is too dim on the dark menu */
  }

  .header-nav .nav-link.active {
    color: var(--color-4);
  }

  .header-nav .nav-link.active {
    font-weight: 500;
  }

  .nav-separator {
    display: none;
  }

  /* ============================================
     PROJECTS PAGE (projects.php)
     Each project is a card: photo on top, mint text block below with a
     slanted top edge that overlaps the photo (echoes the desktop panel).
     No pin / sweep here — only the first photo and first copy show.
     ============================================ */
  .projects-page {
    --pj-pad: var(--container-padding);
    --pj-cut: 9vw; /* height of the slanted top edge of the text block */
  }

  .projects-page .site-header {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Intro: fills the first screen, wordmark over the one-line pitch */
  .pj-intro {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    /* Symmetric padding → the block sits at the true vertical center of the screen */
    padding: var(--header-height) var(--container-padding);
  }

  .pj-intro-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .pj-intro-title {
    font-size: clamp(38px, 12.4vw, 88px);
    line-height: 0.9;
    -webkit-text-stroke-width: 1.2px;
  }

  .pj-intro-text {
    font-size: clamp(17px, 4.8vw, 26px);
    max-width: 24ch;
  }

  /* Slide → card */
  .pj-slide {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .pj-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(300px, 90vw, 560px);
  }

  /* Only the first photo and the first copy block */
  .pj-frame:nth-child(n + 2),
  .pj-copy:nth-child(n + 2),
  [data-pj-copy] {
    display: none;
  }

  /* .pj-track--fit offsets are for the side-by-side desktop panel */
  .pj-slide--left .pj-track--fit,
  .pj-slide--right .pj-track--fit {
    left: 0;
    right: 0;
  }

  /* The mint block IS the text container here (the decorative .pj-panel is
     only needed beside the photo on desktop) */
  .pj-panel {
    display: none;
  }

  .pj-panel-inner,
  .pj-slide--left .pj-panel-inner,
  .pj-slide--right .pj-panel-inner {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    max-width: none;
    margin-top: calc(var(--pj-cut) * -1);
    padding: calc(var(--pj-cut) + 30px) var(--container-padding) 44px;
    background-color: var(--color-3);
    z-index: 3;
  }

  .pj-slide--left .pj-panel-inner {
    clip-path: polygon(0 var(--pj-cut), 100% 0, 100% 100%, 0 100%);
  }

  .pj-slide--right .pj-panel-inner {
    clip-path: polygon(0 0, 100% var(--pj-cut), 100% 100%, 0 100%);
  }

  .pj-tags {
    margin-bottom: 22px;
  }

  .pj-title {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.2;
  }

  .pj-subtitle {
    margin-bottom: 16px;
  }

  .pj-desc p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  /* Soft Goods reveal: no scroll sequence here — the CONFIDENTIAL block
     simply follows the card, button already filled */
  .pj-reveal-shade {
    display: none;
  }

  .pj-reveal {
    position: relative;
    inset: auto;
    visibility: visible;
    padding: 56px var(--container-padding) 64px;
  }

  .pj-reveal-title {
    font-size: clamp(30px, 8.6vw, 64px);
    -webkit-text-stroke-width: 1.2px;
  }

  .pj-reveal-text br {
    display: none;
  }

  .pj-reveal-btn {
    min-width: 0;
  }

  /* ============================================
     HOME (index.php) — every section as static, stacked content
     ============================================ */

  /* ---- 01 Hero ---- */
  .section--hero {
    min-height: 520px;
  }

  .hero-title {
    font-size: clamp(44px, 13.5vw, 84px);
  }

  .hero-subtitle {
    font-size: clamp(17px, 4.6vw, 24px);
  }

  /* ---- 02 Welcome: shoe on top, copy below (was side by side) ---- */
  .section--welcome {
    min-height: 0;
    display: block;
  }

  .welcome-inner {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: calc(var(--header-height) + 16px) var(--container-padding) 64px;
  }

  .welcome-visuals,
  .welcome-content {
    flex: none;
    width: 100%;
  }

  .welcome-shoe-img {
    width: min(125%, 640px); /* the PNG has transparent padding baked in; capped for landscape phones */
  }

  .welcome-content {
    padding-left: 0;
  }

  .welcome-title {
    font-size: clamp(20px, 5.6vw, 28px);
  }

  .welcome-desc {
    max-width: none;
  }

  /* ---- 03 About: Y diagram on top, mint text block below ---- */
  .section--about {
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .about-inner-new {
    position: relative;
    inset: auto;
  }

  /* The Y diagram is one geometry scaled from a single unit, so the photos and
     the lines always meet. Each photo is a wedge cut at 30° (tan 30° = .577):
       · left photo  — vertical right edge + diagonal bottom edge; the corner
                       where they meet is 66.2% down its height
       · right photo — the mirror image (corner 68% down its height)
       · jacket      — triangle, apex at the top-centre of its box
     Every wedge corner is placed exactly on the centre of the Y (--cx / --cy)
     and the diagonals are w / cos 30° = 1.1547 w long, so they run along the
     photo edges. --w is the width of one shoe photo: change it to rescale all. */
  .about-visuals {
    --u: 1vw;                       /* fallback where container units are missing */
    --w: calc(var(--u) * 38);       /* width of the left / right photos */
    --cx: calc(var(--u) * 50);      /* centre of the Y */
    --cy: calc(var(--u) * 46);
    position: relative;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 100 / 85;
    margin: 0 auto;
    container-type: inline-size;
  }

  @supports (width: 1cqw) {
    .about-visuals {
      --u: 1cqw;
    }
  }

  .y-divider,
  .y-center-logo {
    top: var(--cy);
    left: var(--cx);
  }

  .y-line-top {
    height: calc(var(--w) * 1.1);
    top: calc(var(--w) * -1.12);
  }

  .y-line-bottom-left,
  .y-line-bottom-right {
    height: calc(var(--w) * 1.1547);
  }

  .y-center-logo {
    width: calc(var(--w) * 0.14);
    height: auto;
  }

  /* desktop reveals the photos on scroll; JS (initMobileAbout) hides them until
     the Y has been drawn, and they are simply visible if it never runs */
  .about-img-wrap {
    opacity: 1;
    width: var(--w);
  }

  .img-left {
    right: auto;
    bottom: auto;
    left: calc(var(--cx) - var(--w));
    top: calc(var(--cy) - var(--w) * 1.1212);
  }

  .img-right {
    bottom: auto;
    left: var(--cx);
    top: calc(var(--cy) - var(--w) * 1.1183);
  }

  .img-bottom {
    width: calc(var(--w) * 1.6667);
    left: calc(var(--cx) - var(--w) * 0.8333);
    top: var(--cy);
  }

  .about-img-label {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .about-text-panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: block;
    margin-top: -8vw; /* the slanted top edge overlaps the diagram */
    pointer-events: auto;
  }

  .about-panel-wrap {
    padding: 0;
  }

  .about-panel-shadow {
    display: none;
  }

  .about-panel-bg {
    right: 0;
    width: 100%;
    clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
  }

  .about-panel-content {
    padding: calc(8vw + 30px) var(--container-padding) 48px;
    opacity: 1;
  }

  .about-panel-title {
    font-size: clamp(19px, 5.4vw, 26px);
    max-width: none;
  }

  .about-panel-desc,
  .about-services-wrap {
    max-width: none;
  }

  /* ---- 04 Process: vertical list instead of the 5-across timeline ---- */
  .section--process {
    min-height: 0;
    padding: 72px 0 56px;
  }

  .process-header {
    margin-bottom: 36px;
  }

  .process-title {
    font-size: clamp(19px, 5.4vw, 26px);
  }

  .process-title br {
    display: none; /* let the heading wrap naturally */
  }

  .process-timeline-wrap {
    max-width: none;
    margin: 0 0 32px;
  }

  .timeline-nodes {
    flex-direction: column;
    gap: 22px;
  }

  .timeline-node {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .node-num {
    width: 22px;
    margin-bottom: 0;
    font-size: 12px;
  }

  .node-line-wrap {
    width: 44px;
    margin-bottom: 0;
    flex: none;
  }

  .node-line {
    width: 100%;
  }

  /* the diagonal + wedge + faint guide are part of the horizontal design */
  .node-line::after,
  .node-line-wrap::before,
  .timeline-node:first-child .node-line::before {
    display: none;
  }

  .node-label {
    font-size: 11px;
  }

  .process-bottom-area {
    max-width: none;
    margin-top: 8px;
  }

  .process-action {
    padding-right: 0;
    text-align: left;
  }

  /* ---- 05 Projects: mint intro block, then a 2-column photo grid ---- */
  .section--projects {
    min-height: 0;
    display: block;
  }

  .projects-grid {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .project-card {
    opacity: 1; /* desktop reveals the cards on scroll */
    aspect-ratio: 1 / 1;
    will-change: auto; /* no scroll animation here — don't hold 6 extra layers */
  }

  /* purely decorative filler cells of the 4x2 desktop grid */
  .project-card.bg-black,
  .project-card.bg-white {
    display: none;
  }

  .projects-panel-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: 0;
    order: -1;
    grid-column: 1 / -1;
    margin-bottom: -7vw; /* slanted bottom edge overlaps the first photos */
    filter: none;
  }

  .projects-panel-bg {
    left: 0;
    width: 100%;
    will-change: auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%);
  }

  .projects-panel-content {
    padding: calc(var(--header-height) + 16px) var(--container-padding) calc(7vw + 34px);
  }

  .projects-panel-title {
    font-size: clamp(30px, 10.2vw, 64px);
    margin-bottom: 18px;
  }

  .projects-panel-desc,
  .projects-services-wrap {
    max-width: none;
  }

  .projects-services-wrap {
    text-align: left;
    margin-top: 22px;
  }

  /* ---- 06 Experience ---- */
  .section--experience {
    min-height: 0;
    padding: 72px var(--container-padding) 56px;
  }

  .experience-content {
    padding: 0;
  }

  .experience-title {
    font-size: 22px;
  }

  .experience-desc {
    max-width: none;
    margin-bottom: 2.2rem;
  }

  .br-desktop {
    display: none; /* forced desktop line breaks make ragged lines on a phone */
  }

  .brands-label {
    margin-bottom: 28px;
  }

  .brands-grid {
    max-width: none;
    gap: 14px 12px;
  }

  /* ---- 07 Contact ---- */
  .section--contact {
    /* taller than the content so CREATE and the photo have room to breathe while
       the rest is revealed on scroll (js/main.js initMobileContact) */
    min-height: clamp(400px, 62svh, 520px);
    padding: 72px 0 56px;
    margin-bottom: 0;
  }

  .contact-title-small {
    font-size: 20px;
    margin-left: 10px;
  }

  .contact-title-large {
    font-size: clamp(48px, 17.5vw, 120px);
    -webkit-text-stroke-width: 1.5px;
  }

  .contact-desc {
    font-size: clamp(13px, 3.8vw, 20px);
  }

  /* ---- 08 Footer: one column of blocks, no dark side shape ---- */
  .site-footer {
    min-height: 0;
    --fm: clamp(40px, 8vw, 120px);  /* size of the moving text (= .footer-huge-text) */
    --fm-gap: 28px;                 /* visible space above AND below that text */
  }

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

  /* The moving text sits centred in its own band: the same --fm-gap between the
     top edge and the letters as between the letters and the logo below.
     line-height 1 makes the line box hug the capitals (they start ~.10em down
     and end ~.86em down), so the gaps below are measured from the letters, not
     from the invisible line box. */
  .footer-huge-text {
    line-height: 1;
  }

  .footer-marquee-container {
    padding-top: calc(var(--fm-gap) - 0.1 * var(--fm));
  }

  .footer-inner-content {
    margin-top: calc(var(--fm-gap) + 0.9 * var(--fm)); /* = height of the band above */
    padding: calc(var(--fm-gap) - 0.1375 * var(--fm)) var(--container-padding) 36px;
  }

  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .footer-bottom > .footer-col:empty {
    display: none; /* the spacer that clears the dark shape on desktop */
  }

  .footer-col--logo {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 0; /* desktop nudges it 20px down; here it starts the gap below the text */
  }

  .footer-list li,
  .footer-list span {
    overflow-wrap: anywhere;
  }

  /* Comfortable touch targets for the text buttons / links */
  .about-services-btn,
  .process-btn,
  .footer-list a {
    padding-block: 10px;
  }

  /* The side rail's back-to-top is hidden here, so the footer carries its own */
  .footer-top-mobile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.15em;
    color: #0d141c;
    text-decoration: none;
    pointer-events: auto;
  }

  .footer-top-mobile::before {
    content: '';
    width: 22px;
    height: 8px;
    background-color: #0d141c;
    transform: skewX(-45deg);
  }

}