/* =========================================================================
   phone.css — phone-only adjustments, page by page.
   Everything here sits inside one media query (phones, up to 600px wide),
   and the file loads last — so desktop and iPad are never affected.
   (The only rules outside it hide the phone menu on bigger screens.)
   ========================================================================= */

/* the phone menu (js/components/mobileMenu.js) and the swipe hint exist everywhere but show only on phones */
.burger,.mmenu,.chrome.swipe{display:none}

@media (max-width:600px){

  /* ---------- top bar: PELEG on the left, hamburger on the right ---------- */
  header{grid-template-columns:1fr auto;grid-template-areas:"mark burger";padding-top:calc(18px + env(safe-area-inset-top,0px))}
  header nav{display:none}
  .mark{font-size:24px}
  body.menu-open header{z-index:31}

  .burger{grid-area:burger;justify-self:end;display:grid;align-content:center;gap:7px;width:44px;height:44px;margin-right:-10px;padding:0 10px}
  .burger span{display:block;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  body.menu-open .burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
  body.menu-open .burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

  /* ---------- the menu panel: covers the screen over a blurred sky ---------- */
  .mmenu{display:flex;flex-direction:column;justify-content:space-between;position:fixed;inset:0;z-index:30;
    padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(95,151,222,.82),rgba(140,178,226,.86));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
    opacity:0;transition:opacity .45s ease}
  .mmenu[hidden]{display:none}
  body.menu-open .mmenu{opacity:1}
  .mm-links{display:grid;gap:clamp(10px,2.4vh,22px)}
  .mm-links a{display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(18px);
    transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 70ms + 80ms)}
  body.menu-open .mm-links a{opacity:1;transform:none}
  .mm-links small{font-size:11px;letter-spacing:.16em;color:var(--ink-soft);min-width:22px}
  .mm-links span{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(46px,14vw,64px);line-height:1}
  .mm-links a[aria-current="page"] span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
  .mm-foot{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:20px}
  .mm-foot em{font-style:italic}

  /* ---------- home: swipe hint, centred under the top bar; the arrows nudge side to side ---------- */
  .chrome.swipe{display:block;left:0;right:0;bottom:auto;top:calc(78px + env(safe-area-inset-top,0px));text-align:center;
    font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;line-height:1;pointer-events:none}
  .sw-arrow{display:inline-block;animation:sw-nudge-l 1.8s ease-in-out infinite}
  .sw-arrow:last-child{animation-name:sw-nudge-r}
  @keyframes sw-nudge-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
  @keyframes sw-nudge-r{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

  /* ---------- home: bottom bar centred — "8 selected Works" above "Brand & Creative AI" ---------- */
  .chrome.what,.chrome.count{left:0;right:0;text-align:center}
  .chrome.what{font-size:24px}
  .chrome.count{bottom:calc(52px + env(safe-area-inset-bottom,0px));font-size:11.5px}

  /* ---------- project pages: first screen — name centred, the year small under it, then the film ---------- */
  .p-top{grid-template-columns:1fr;justify-items:center;row-gap:0;text-align:center}
  .p-name{grid-column:1;grid-row:1;max-width:none;font-size:36px;line-height:1.05}
  .p-year{grid-column:1;grid-row:2;justify-self:center;text-align:center;margin-top:2px;font-size:17px;line-height:1;opacity:.85}
  .p-media{grid-row:3;margin-top:22px;width:100%}
  .p-media.is-episodes{gap:8px}
  .ep figcaption{font-size:18px}

  /* project pages: the bottom teaser — no poster; previous (left) and next (right) side by side, small,
     each a small caps label with the project's name under it */
  .p-next{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"back link" "back name";column-gap:16px;row-gap:6px;align-items:start;margin-top:80px;margin-bottom:0}
  .pn-media{display:none}
  .pn-right{display:contents}
  /* the labels lead (serif italic), the project names are the small caps line under them */
  .pn-back{grid-area:back;justify-self:start;text-align:left;font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--ink)}
  .pn-back .pn-dot{display:none}
  .pn-back b{display:block;margin-top:8px;font-family:var(--ui);font-style:normal;font-weight:400;font-size:10px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  .pn-link{grid-area:link;justify-self:end;text-align:right;font-size:18px;line-height:1.1;white-space:nowrap}
  .pn-name{grid-area:name;justify-self:end;text-align:right;max-width:none;padding-top:0;font-family:var(--ui);font-style:normal;font-weight:400;font-size:10px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  .p-next{row-gap:0}
  .pn-name{margin-top:8px}

  /* project pages: the gallery becomes one item per row, each shown whole in its own shape
     (a tap still opens it centred in the viewer — js/components/project/lightbox.js) */
  .p-gallery{--gap:10px}
  .pg-row,.pg-row[data-cols]{grid-template-columns:1fr}
  .p-gallery .pg-row img,.p-gallery .pg-row video{aspect-ratio:auto;height:auto}
  .p-gallery .pg-film video{height:100%}
  .p-gallery .pg-row img.pg-strip{aspect-ratio:6/1}
  .pg-row .pg-film .ep-play,.pg-row[data-cols="3"] .pg-film .ep-play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .pg-row .pg-film .ep-play svg{width:20px;height:20px;margin-left:3px}

  /* ---------- Contact ---------- */
  /* the sentence is the headline: as wide as the screen; the hint under it is clearly smaller */
  .cd-say{max-width:none;right:var(--gutter)}
  .cd-line br.ph{display:inline}
  .cd-line{font-size:var(--cd-line-size,14vw);line-height:1;text-wrap:nowrap;white-space:nowrap}
  .cd-hint{font-size:14px;margin-top:14px}
  /* bigger stickers and pills */
  .cd-pill{font-size:19px}
  .cd-badge{width:128px}
  .cd-me{width:88px}
  .cd-w1,.cd-w2{width:96px}
  .cd-w3{width:124px}

  /* ---------- All Works ---------- */
  /* one card per row, full width, stacked; the caption scaled up to match the bigger card */
  .works{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .w .meta{gap:6px;padding:14px 16px 16px}
  .w .meta b{font-size:24px}
  .w .meta small{font-size:10.5px}
  .w .soonface{gap:22px}
  .w .soonface em{font-size:26px}

}