/* ===== PHONE LAYER — Paree. Desktop untouched above 760px. ===== */
@media (max-width:760px){
  /* pass 1: this brand's own phone layout — grids two-across, chip rows as one strip, 32px dot hit boxes, 100svh film stage, one signature move */
  /* type up, not down */
  .hero-copy h1{font-size:clamp(54px,16.5vw,88px)}
  .sec-head h2,.book h2,.doc h2{font-size:clamp(40px,11.5vw,56px)}
  .film-title h2{font-size:clamp(64px,22vw,110px)}
  .card h3{font-size:24px}
  .panel h3{font-size:clamp(32px,9vw,44px)}
  /* the signature move: the mirror leads, full width, before the words */
  .hero{display:flex;flex-direction:column;gap:18px;padding:18px 0 40px}
  .hero-fig{order:-1;width:min(100%,360px);margin:0 auto}
  .hero-fig .cam{position:static;display:block;text-align:center;margin-bottom:6px}
  .hero-copy .lede{font-size:17px}
  .hero-meta{gap:16px 22px}
  .scrollcue{display:none}
  /* one idea per screen: two-across grids, lead card full width */
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .grid .card:first-child{grid-column:1/-1}
  .card .body{padding:14px 12px 16px}
  .card p{font-size:13px;line-height:1.45}
  .card .foot{flex-direction:column;align-items:flex-start;gap:8px}
  .card .add{min-height:32px;width:100%;text-align:center}
  .card .chip,.card .idx{font-size:11px;padding:7px 9px}
  .grid .card:first-child .chip,.grid .card:first-child .idx{font-size:11px;padding:8px 10px}
  .grid .card:not(:first-child) .chip{top:auto;bottom:12px;right:10px}
  .grid .card:not(:first-child) .idx{left:10px;top:10px}
  /* chip and tab rows as one strip, bled to the gutters */
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:-4vw;margin-right:-4vw;padding:0 4vw;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;min-height:32px;margin-right:18px}
  .anat{grid-template-columns:minmax(0,1fr)}
  .anat>div{min-width:0}
  .panel,.panel p,.spec{max-width:100%}
  .spec li{font-size:11px;flex-wrap:wrap;row-gap:2px}
  .spec li span:last-child{text-align:right;flex:1 1 auto;min-width:0}
  .tabs{flex-wrap:wrap;overflow:visible;margin:0;padding:0;row-gap:0;column-gap:0}
  .tabs button{margin-right:18px;padding:10px 0;font-size:11px}
  .anat-fig{aspect-ratio:4/5}
  /* the film stage is the whole phone screen */
  .film-stage{height:100svh}
  .film-scroll{height:340vh}
  .film-ui{padding:16px 5vw 22px}
  .film-top{font-size:11px}
  .film-top span:last-child{display:none}
  .chapters{margin:0;padding:0 0 4px;max-width:100%;width:auto;justify-content:center;flex-wrap:wrap;gap:6px}
  .chapters button{padding:8px 10px;font-size:10px}
  .film-title{padding:12px 10px;max-width:100%}
  .film-bar{display:none}
  /* proof, room, action */
  .doc figure{aspect-ratio:1067/1100;max-width:none}
  .doc blockquote{font-size:20px}
  summary{font-size:19px;min-height:32px}
  .trust{grid-template-columns:1fr;text-align:left;gap:14px;padding:22px}
  .trust img{width:48px;height:48px}
  .room{grid-template-columns:1fr 1fr;gap:10px}
  .room figure:first-child{grid-column:1/-1}
  .askform{padding:18px}
  .askform input,.askform textarea{font-size:16px}
  .where div{flex-direction:column;gap:4px}
  .where div span:first-child{min-width:0}
  .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .drawer{width:100vw}
  .drawer li button{min-height:32px}
  .nav{padding:10px 4vw}
  .brand b{font-size:17px}
  .tools .btn.sm{padding:9px 10px;font-size:11px;white-space:nowrap}
  .brand small{display:none}
  .brand b{font-size:17px;white-space:nowrap}
  .nav{gap:10px}
  .tools{gap:6px}
}
@media (max-width:430px){
  .brand span{display:none}
}


/* ---- phone pass 2: words, notes, reveal, shelves (max-width:760px only) ---- */
@media (max-width:760px){
  h1,h2,h3{text-wrap:balance}
  p,li,dd,figcaption,blockquote{text-wrap:pretty}
  .m-note{font-size:14px!important;line-height:1.5!important;-webkit-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .m-open .m-note{-webkit-line-clamp:unset;display:block}
  .m-more{display:inline-flex;align-items:center;min-height:32px;padding:0;margin:2px 0 0;border:0;background:none;color:inherit;opacity:.72;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
  .m-more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .m-open .m-more::after{transform:translateY(2px) rotate(-135deg)}
  .m-hide{display:none!important}
  .m-showmore{grid-column:1/-1;width:100%;min-height:50px;margin-top:4px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
  .m-showmore:active{transform:scale(.98)}
  .m-reveal{opacity:0;translate:0 16px;transition:opacity .45s ease,translate .55s cubic-bezier(.2,.7,.2,1)}
  .m-reveal.m-in{opacity:1;translate:none}
  @media (prefers-reduced-motion:reduce){.m-reveal{opacity:1;translate:none;transition:none}}
}