/* ===========================================================
   EDITION8 — mobile overrides
   Phone-first ≤480, tablet ~768.
   =========================================================== */

/* base: hide mobile-only chrome on desktop */
.m-dot, .m-sheet { display: none; }

@media (max-width: 768px) {

  /* -------- root pad / system -------- */
  :root {
    --pad: 18px;
  }
  html, body { overflow-x: hidden; }

  /* -------- header -------- */
  .hd {
    grid-template-columns: 1fr auto !important;
    padding: 14px 18px !important;
    gap: 10px;
  }
  .hd__nav { display: none !important; }
  .hd__right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
  }
  .hd__lang { gap: 6px; }
  .hd__lang-btn { font-size: 11px; padding: 4px 6px; }
  .hd__theme { padding: 4px 6px; gap: 4px; }
  .hd__theme svg { width: 14px; height: 14px; }

  /* -------- mobile nav dot (scroll-revealed) -------- */
  .m-dot {
    position: fixed;
    right: 18px;
    top: 14px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: grid; place-items: center;
    z-index: 90;
    /* always available on mobile so the menu is reachable from the top */
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .35s ease, transform .35s ease, background .25s, color .25s;
    pointer-events: auto;
    border: 1px solid var(--ink);
    cursor: pointer;
  }
  .m-dot.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  /* sheet sits above the dot's stacking context when open */
  body.m-nav-open .m-dot { z-index: 95; color: var(--paper); }
  .m-dot__bars {
    display: grid; gap: 4px;
  }
  .m-dot__bars span {
    display: block; width: 16px; height: 1.5px; background: currentColor;
    transition: transform .3s ease, opacity .3s ease;
  }
  /* x state when sheet open */
  body.m-nav-open .m-dot__bars span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  body.m-nav-open .m-dot__bars span:nth-child(2) { opacity: 0; }
  body.m-nav-open .m-dot__bars span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  /* -------- mobile nav sheet -------- */
  .m-sheet {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: var(--paper);
    z-index: 80;
    transform: translateY(100%);
    transition: transform .55s var(--ease-cinema);
    display: flex;
    flex-direction: column;
    padding: 100px 28px 100px;
  }
  body.m-nav-open .m-sheet { transform: translateY(0); }
  .m-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .m-sheet__nav a {
    color: var(--paper);
    font-size: clamp(40px, 12vw, 64px);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.03em;
    text-decoration: none;
  }
  .m-sheet__nav em {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
  }
  .m-sheet__foot {
    display: flex;
    justify-content: space-between;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    opacity: .5;
    letter-spacing: 0.08em;
  }

  /* -------- intro: skipped via JS, but hard-fallback -------- */
  #intro { display: none !important; }

  /* -------- progress bar lower for safety -------- */
  .progress { top: 0; }

  /* -------- hero -------- */
  .hero {
    min-height: 100svh;
    padding: 0 18px;
  }
  .hero__title {
    font-size: clamp(56px, 18vw, 120px) !important;
    line-height: .92;
    letter-spacing: -0.04em;
  }
  .hero__line { display: block; }
  .hero__amp { font-size: .9em; opacity: .8; }
  .hero__bottom {
    padding: 0 0 26px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero__year { font-size: 11px; }

  /* -------- works -------- */
  .works { padding: 60px 18px; }
  .works__title {
    font-size: clamp(48px, 14vw, 80px) !important;
    line-height: .9;
  }
  .works__grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .work {
    width: 100%;
  }
  .work__media {
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .work__media img { object-fit: cover; }
  .work__meta {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 2px 0;
    font-size: 11px;
  }
  .work__num { letter-spacing: 0.06em; opacity: .6; }
  .work__client { font-size: 14px; opacity: 1; }
  .work__type { font-size: 11px; opacity: .55; }
  .works__cta { padding-top: 32px; }
  .cta {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  /* -------- logodrop (vertical canvas) -------- */
  .logodrop { padding: 80px 0; }
  .logodrop__track { height: 320vh; }
  .logodrop__canvas {
    width: 88vw;
    max-width: 360px;
    aspect-ratio: 9 / 16;
  }
  .logodrop__head { font-size: clamp(22px, 6vw, 32px) !important; }
  .logodrop__kicker { font-size: 10px !important; }
  .logodrop__foot { font-size: 10px; }

  /* -------- index (services accordion) -------- */
  .index { padding: 60px 18px; }
  .index__head {
    grid-template-columns: 1fr !important;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  .index__heading {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }
  .index__heading-link {
    display: inline-block;
    margin-top: 12px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  .index__head-btn {
    grid-template-columns: 32px 1fr 28px !important;
    gap: 10px !important;
    padding: 18px 0 16px !important;
    align-items: baseline;
  }
  .index__row:hover .index__head-btn {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .index__num { font-size: 11px !important; }
  .index__name {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1;
  }
  .index__desc { display: none; }
  .index__arrow { font-size: 20px; }
  .index__panel { padding-bottom: 18px; }
  .index__copy {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .index__chips {
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 11px;
  }
  .index__chips li { padding: 4px 9px; }
  .index__more { font-size: 12px; }

  /* -------- numbers -------- */
  .numbers {
    padding: 60px 18px !important;
  }
  .numbers__title {
    font-size: clamp(44px, 13vw, 72px) !important;
    line-height: .9;
  }
  .numbers__kicker { font-size: 10px !important; }
  .numbers__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .num { padding: 24px 0; }
  .num__client { font-size: 11px; }
  .num__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .num__big {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1;
  }
  .num__lbl {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .num__period { font-size: 10px; opacity: .5; }

  /* -------- contact -------- */
  .contact {
    padding: 60px 18px 28px !important;
  }
  .contact__big {
    padding-bottom: 32px;
  }
  .contact__kicker { font-size: 10px; }
  .contact__mark img {
    max-width: 240px !important;
    width: 70vw;
    height: auto;
    touch-action: none;
  }
  .contact__sub {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 1;
  }
  .contact__cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
    padding-top: 24px;
  }
  .contact__col { gap: 6px; }
  .contact__label { font-size: 10px; }
  .contact__line { font-size: 13px; line-height: 1.35; }

  /* -------- footer -------- */
  .ft {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px 0 !important;
    font-size: 10px !important;
  }
  .ft__left { flex-wrap: wrap; gap: 6px; }
  .ft__right { width: 100%; justify-content: space-between; }

  /* -------- logo (compact, top-left corner on mobile) --------
     The per-page selectors below match the specificity of the works/services
     42px rule in styles.css; mobile.css loads last, so this wins. */
  .logo,
  body[data-page="home-editorial"] .logo,
  body[data-page="works-v2"] .logo,
  body[data-page="services-v2"] .logo {
    top: 14px !important;
    bottom: auto !important;
    left: 16px !important;
    width: 26px !important;          /* compact corner mark — clears text better */
    transform-origin: top left;      /* was bottom left: pivot from the new corner */
  }
  .logo img { width: 100%; }

  /* -------- home hero tagline: lower-left, pulled toward the edge. Sits a touch
     lower than before so it clears the film's burned-in title text. -------- */
  .ed-hero__overlay { padding-bottom: clamp(120px, 19svh, 210px); }
  .ed-hero__tagline { padding-left: 2px; max-width: 22ch; }

  /* -------- the hero / featured-film "viewfinder" ring is a DESKTOP cursor
     effect; on touch it just sits as a stuck decorative circle over the video,
     so hide it on mobile. -------- */
  .ed-hero__lens, .ed-feature__lens { display: none !important; }

  /* -------- home works tiles: show the WORK NAME. In the cramped
     year | client | type row the name truncated to a single letter ("L"); on
     mobile stack it so the title leads, full and wrapping. -------- */
  .ed-work__meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
  .ed-work__client {
    order: 1; white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 10.5px; line-height: 1.3; letter-spacing: 0.03em;
  }
  .ed-work__year { order: 2; font-size: 9px; }
  .ed-work__type { display: none; }

  /* leave room at the very bottom of the home page so the scroll-travel logo
     parks at the bottom-left WITHOUT covering the contact section's content */
  body[data-page="home-editorial"] .ed-contact { padding-bottom: clamp(96px, 15vh, 140px); }

  /* -------- cursor -------- */
  .cursor { display: none !important; }

  /* -------- WORKS: top band clears the fixed logo (top-left) + hamburger
     (top-right); the Reel/Grid toggle and first title ride below it. -------- */
  body[data-page="works-v2"] { --works-chrome: 108px; }

  /* ============= SERVICES PAGE ============= */
  .srv-hero {
    padding: 100px 18px 60px !important;
    min-height: auto;
  }
  .srv-hero__kicker { font-size: 10px; }
  .srv-hero__title {
    font-size: clamp(56px, 16vw, 96px) !important;
    line-height: .9 !important;
  }
  .srv-hero__lede {
    font-size: 16px !important;
    line-height: 1.45;
    max-width: 100%;
  }
  .srv-hero__foot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    padding-top: 24px !important;
  }
  .srv-hero__manifesto { font-size: 14px !important; max-width: 100%; }
  .srv-hero__scroll { font-size: 10px; }

  .srv-stack {
    grid-template-columns: 1fr !important;
    padding: 0 18px;
  }
  .srv-side { display: none; }
  .srv-ch {
    padding: 50px 0 !important;
    border-top: 1px solid var(--rule);
  }
  .srv-ch__head, .srv-ch__body {
    padding: 0 !important;
  }
  .srv-ch__kicker { font-size: 10px; }
  .srv-ch__title {
    font-size: clamp(40px, 11vw, 68px) !important;
    line-height: .95 !important;
  }
  .srv-ch__lede {
    font-size: 16px !important;
    line-height: 1.45;
  }
  .srv-ch__sub {
    font-size: 14px !important;
    line-height: 1.5;
    opacity: .65;
  }
  .srv-ch {
    scroll-margin-top: 80px !important;
  }
  .srv-ch__caps {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px;
    font-size: 12px !important;
  }

  .srv-eco {
    padding: 60px 18px !important;
  }
  .srv-eco__kicker { font-size: 10px; }
  .srv-eco__head {
    font-size: clamp(40px, 12vw, 72px) !important;
    line-height: .95 !important;
  }
  .srv-eco__lede { font-size: 14px !important; }
  .srv-eco__flow {
    flex-wrap: wrap;
    gap: 8px 14px !important;
    font-size: 13px !important;
  }
  .srv-eco__arr { opacity: .4; }

  .srv-proc {
    padding: 60px 18px !important;
  }
  .srv-proc__kicker { font-size: 10px; }
  .srv-proc__title {
    font-size: clamp(40px, 12vw, 72px) !important;
    line-height: .95 !important;
  }
  .srv-proc__list {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .srv-proc__step h4 { font-size: 22px !important; }
  .srv-proc__step p { font-size: 14px !important; line-height: 1.45; }

  .srv-cta {
    padding: 80px 18px !important;
  }
  .srv-cta__kicker { font-size: 10px; }
  .srv-cta__head {
    font-size: clamp(48px, 14vw, 84px) !important;
    line-height: .95 !important;
  }
  .srv-cta__lede { font-size: 14px !important; line-height: 1.45; }
  .srv-cta__btn {
    font-size: 13px !important;
    width: 100%;
    justify-content: center;
    padding: 18px 22px !important;
  }
  .srv-ch__caps li {
    padding: 10px 12px !important;
    min-height: 40px;
    display: flex; align-items: center;
  }

  .srv-ft { padding: 18px !important; }

  /* ============= ARCHIVE PAGE — disable horizontal pin on mobile ============= */
  .h-stage {
    height: auto !important;
    padding: 80px 18px 40px !important;
  }
  .h-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .h-track {
    transform: none !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
    will-change: auto !important;
  }
  .h-row {
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
  }
  .h-card {
    width: 100% !important;
    flex: 0 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .h-card__img { height: 56vh !important; }
  .h-detail { display: none !important; }
  .tl, .tl__head, .h-hint, .h-arrow { display: none !important; }
  .h-card__img { aspect-ratio: 4/5 !important; height: auto !important; }
  .h-card figcaption { font-size: 10px !important; white-space: normal !important; line-height: 1.4 !important; }
  /* lightbox tightening for mobile */
  .lb__inner { padding: 70px 18px 80px !important; }
  .lb__close { top: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; }
  .lb__head { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; margin-bottom: 22px !important; }
  .lb__title { font-size: 32px !important; }
  .ax__head, .ax-h, .ax__filter {
    padding: 0 18px !important;
  }
  .ax__title {
    font-size: clamp(44px, 13vw, 72px) !important;
    line-height: .9 !important;
  }
  .ax__filter {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
  }
  .ax__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 18px !important;
  }
  .ax__item__media { aspect-ratio: 4/5; }
}

/* ----- extra-small (≤380): tighten further ----- */
@media (max-width: 380px) {
  .hero__title { font-size: 64px !important; }
  .works__title, .numbers__title, .srv-hero__title { font-size: 48px !important; }
  .index__name { font-size: 22px !important; }
  .contact__cols { grid-template-columns: 1fr !important; }
}

/* ----- tablet (481-900): hybrid ----- */
@media (min-width: 481px) and (max-width: 900px) {
  .works__grid { grid-template-columns: 1fr 1fr !important; }
  .ax__grid { grid-template-columns: 1fr 1fr !important; }
  .contact__cols { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
}