/* ============================================================
   DAMASCENE — Small screens are designed, not squeezed.
   Different compositions, different choreography, less motion.
   ============================================================ */

/* ---------- Tablet ----------------------------------------- */
@media (max-width:1024px){
  /* Nothing is hidden: the index simply moves to its own line. */
  .mast{flex-wrap:wrap;row-gap:.7rem;align-items:center;}
  .mast__logo{order:1;}
  .mast__nav{order:2;margin-left:auto;}
  .mast__index{order:3;flex-basis:100%;display:flex;gap:1.4rem;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.15rem;
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 84%,transparent 100%);}
  .mast__index::-webkit-scrollbar{display:none;}
  .mast__index .navlink{white-space:nowrap;opacity:.78;}
  .entry{width:min(90vw,660px);}
  .entry--qishta,.entry--shamiyat{width:min(92vw,700px);}
  /* the case loses its smallest piece before it starts to crowd */
  .hero__note{max-width:26ch;}
  .piece--1{--w:24vw;} .piece--2{--w:21vw;} .piece--3{--w:25vw;} .piece--4{--w:13vw;}
  /* the masthead wraps to two rows here, so the composition starts lower.
     Same structure as desktop: the slack collects above the meta row. */
  .hero__pin{padding-top:calc(var(--edge) * 6.4);justify-content:flex-end;}
  .hero__meta{margin-top:auto;margin-bottom:clamp(2rem,5.5vh,4rem);}
  .hero__upper{margin-top:0;margin-bottom:clamp(1rem,4.6vh,3.4rem);}
  .hero__foot{margin-top:0;}
}

/* ---------- Phone ------------------------------------------ */
@media (max-width:719px){
  :root{
    --t-mega: clamp(2.9rem,17vw,5.4rem);
    --t-xxl:  clamp(2.3rem,12.5vw,4rem);
    --t-xl:   clamp(1.85rem,8.6vw,2.8rem);
    --scene-y: clamp(4rem,10vh,6rem);
  }

  /* CHROME — a truncated, side-scrolling section strip reads as broken on
     a phone. The header keeps the two things a thumb actually wants; the
     section list is carried in full by the colophon instead. */
  .mast{flex-wrap:nowrap;row-gap:0;}
  .mast__index{display:none;}
  .mast__logo{width:clamp(118px,32vw,150px);}

  /* 01 ARRIVAL — the case becomes a short shelf of three, and the
     statement takes the room it needs above it. */
  .hero{height:168svh;}
  /* the whole composition sits low, with the air above it reading as
     breathing room under the masthead rather than a hole in the middle */
  .hero__pin{padding:5.2rem var(--edge) 0;justify-content:flex-end;}
  .hero__meta{flex-direction:column;align-items:flex-start;gap:.55rem;
    margin-top:auto;margin-bottom:clamp(1.6rem,4.2vh,2.6rem);}
  .hero__note{text-align:left;max-width:32ch;padding-bottom:0;}
  .hero__upper{margin:0 0 clamp(.9rem,3.4vh,2.2rem);}
  /* the statement is set to the measure of the screen, not to a number:
     "WRITTEN IN SWEETS." has to hold one line inside 390px */
  .hero__type{font-size:clamp(1.7rem,8vw,2.35rem);line-height:1;}
  /* the phone shelf is already set to the measure of the screen and spaced
     apart rather than centred, so it is not scaled down with the desktop */
  .hero__case{gap:.5rem;justify-content:space-between;--case:1;}
  .piece--1{--w:34vw;} .piece--2{--w:29vw;} .piece--3{--w:36vw;}
  .piece--4{display:none;}
  .piece figcaption{top:calc(100% + .65rem);font-size:.6rem;letter-spacing:.14em;}
  .hero__foot{padding:2.2rem 0 1rem;align-items:center;justify-content:flex-end;}
  .hero__foot .label{display:none;}

  /* 02 LEXICON — no horizontal pin on touch. Vertical, snapped,
     each entry a full screen of its own. */
  .lex{height:auto !important;}
  .lex__pin{position:static;height:auto;overflow:visible;
    scroll-snap-type:y proximity;}
  .lex__rail{display:block;transform:none !important;}
  .lex__intro,.lex__end{width:auto;height:auto;min-height:72svh;
    padding-block:var(--scene-y);scroll-snap-align:start;}
  .lex__endObj{position:relative;inset:auto;width:min(70%,300px);margin:1.4rem auto 0;}
  .dest__offer{width:100%;}
  .entry{
    width:auto;height:auto;min-height:100svh;border-left:0;
    border-top:1px solid var(--rule);scroll-snap-align:start;
    padding:calc(var(--edge)*3.2) var(--edge) calc(var(--edge)*1.6);
    justify-content:flex-end;
  }
  .entry__obj{position:relative;inset:auto !important;width:min(84%,340px) !important;
    translate:0 !important;margin:0 auto auto;order:-1;}
  .entry--shamiyat .entry__body,.entry--shamiyat .entry__def{margin-left:0;text-align:left;}
  .entry--shamiyat .entry__head{justify-content:flex-start;}
  .entry__def{max-width:none;}

  /* 03 MATERIAL — the annotation moves off the image and becomes a list;
     overlaid leader lines drawn for 16:9 do not survive a 4:5 crop. */
  .material__rule{display:none;}
  .material__list{display:grid;gap:.5rem;border-top:1px solid var(--rule);
    padding-top:.9rem;margin-top:.4rem;}
  .material__list div{display:flex;justify-content:space-between;gap:1rem;
    font-size:var(--t-sm);}
  .material__list dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
    opacity:.66;align-self:center;}
  .material{height:200svh;}
  .material__plate{width:100%;aspect-ratio:4/5;scale:1 !important;}
  .material__cap{position:static;margin-top:1.4rem;opacity:1 !important;translate:0 !important;
    padding-inline:var(--edge);}
  .material__pin{align-content:center;gap:1rem;padding-block:var(--scene-y);}
  .material__side{display:none;}

  /* 04 HAND */
  .hand__arch{width:min(100%,420px);aspect-ratio:3/4;}

  /* 05 ORIGIN */
  .origin__win{width:100%;max-width:420px;aspect-ratio:3/4;justify-self:center;}
  .origin__thread{display:none;}

  /* 06 GIFT — stacked: the object first, then what it is */
  .gift{height:190svh;}
  .gift__pin{grid-template-columns:1fr;align-content:center;gap:var(--stack-m);}
  .gift__obj{width:calc(100% + var(--edge));justify-self:stretch;margin-right:calc(var(--edge) * -1);
    aspect-ratio:4/3;order:-1;}
  .gift__copy{max-width:none;}

  /* 07 DESTINATION — stacked, both fully visible, no hover logic */
  .dest__split,.store__body{grid-template-columns:1fr;}
  .market{border-left:0;border-top:1px solid color-mix(in oklab,var(--sand) 18%,transparent);
    min-height:46svh;padding-block:calc(var(--edge)*1.3);}
  .market .market__media{opacity:.38;scale:1;}
  /* head · ask · markets — the foot is dropped here, so three rows, and the
     markets keep the 1fr so they are the part that scrolls. The question is in
     flow on a phone, so nothing is laid over the panels and the veil goes. */
  .store{grid-template-rows:auto auto 1fr;}
  .store__body{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .store__body::before{display:none;}
  .store .market__num{color:inherit;}   /* no veil here, so back to the panel's own */
  .store__ask{position:static;translate:0;width:auto;padding:0 var(--edge) 1.2rem;}
  .store__foot{display:none;}

  .progress{display:none;}
}

/* ---------- Short landscape phones -------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero__foot{padding-block:1.6rem .8rem;}
  .hero__note{display:none;}
  .piece--4{display:none;}
}

/* ---------- Fine pointer only ------------------------------- */
@media (hover:none){
  .navlink::after{display:none;}
  .shopbtn::before{display:none;}
}

/* ---------- Motion off --------------------------------------
   Not a degraded page: a composed, still one. Every scene keeps
   its composition; only the choreography is removed.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  /* 01 ARRIVAL — already a still composition; only the settling stops */
  .hero{height:auto;}
  .hero__pin{position:static;height:auto;min-height:100svh;}
  .cue{display:none;}

  /* 02 LEXICON — a vertical register of six full-width entries */
  .lex{height:auto !important;}
  .lex__pin{position:static;height:auto;overflow:visible;}
  .lex__rail{display:block;transform:none !important;}
  .entry,.lex__intro,.lex__end{width:auto;height:auto;min-height:auto;
    padding-block:var(--scene-y);border-left:0;border-top:1px solid var(--rule);}
  .entry__obj{position:relative;inset:auto !important;width:min(56%,380px) !important;
    translate:0 !important;margin:0 0 2rem auto;}
  .entry--shamiyat .entry__obj{margin:0 auto 2rem 0;}
  .entry--knafeh .entry__obj{margin-inline:auto;}

  /* 03 MATERIAL — the plate at rest, annotation as a list */
  .material{height:auto;}
  .material__pin{position:static;height:auto;min-height:auto;padding-block:var(--scene-y);
    gap:1.6rem;}
  .material__plate{scale:1 !important;}
  .material__rule{display:none;}
  .material__list{display:grid;gap:.5rem;border-top:1px solid var(--rule);
    padding-top:.9rem;margin-top:.4rem;}
  .material__list div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);}
  .material__list dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;opacity:.66;}
  .material__cap{position:static;opacity:1 !important;translate:0 !important;
    max-width:min(92vw,1180px);}
  .material__side{display:none;}

  /* 05 ORIGIN */
  .origin__win img{clip-path:none;}
  .origin__thread,.petals{display:none;}

  /* 06 GIFT */
  .gift{height:auto;}
  .gift__pin{position:static;height:auto;min-height:100svh;}

  .rv{opacity:1;transform:none;}
}

/* ---------- Print (a lexicon should be printable) ----------- */
@media print{
  .mast,.progress,.seal,.store,.cursor,.grain{display:none !important;}
  .scene,.entry{background:#fff !important;color:#000 !important;}
  .lex__pin{position:static;height:auto;} .lex__rail{display:block;transform:none !important;}
  .entry{page-break-inside:avoid;min-height:auto;height:auto;width:auto;}
}