/* ---------- phone: stage on top at full width, rail becomes a bottom sheet ---------- */
.sheet{ display:none; }
body.mobile{ overflow:auto; background:var(--paper); }
body.mobile .viewport{ position:relative; display:block; height:auto; }
body.mobile .canvas{ position:absolute; left:0; top:0; box-shadow:none; }
body.mobile .rail, body.mobile .switcher, body.mobile .edge-tab{ display:none; }
body.mobile .stage{ left:0 !important; }
body.mobile.page-full .viewport{ display:none; }
body.mobile .sheet{ display:block; position:relative; background:var(--paper); border-radius:22px 22px 0 0; margin-top:-18px; padding:12px 22px 40px; min-height:60vh; box-shadow:0 -6px 20px rgba(0,0,0,.08); }
body.mobile.page-full .sheet{ margin-top:0; border-radius:0; box-shadow:none; }
body.mobile.page-full .sheet .handle{ display:none; }
.sheet .handle{ width:40px; height:4px; border-radius:2px; background:var(--hairline); margin:0 auto var(--s-3); }
.sheet .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s-3); }
.sheet .top .wordmark svg{ height:15px; }
.sheet .title, .sheet .sub{ position:static; width:auto; }
.sheet .title{ margin:0 0 var(--s-1); font:var(--t-title); letter-spacing:var(--ls-title); }
.sheet.wide .title{ font:var(--t-lead-strong); letter-spacing:0; }   /* option A: a label beside a wider idea */
.sheet .sub{ font:var(--t-lead); color:var(--mid); }
.sheet .m-switch{ margin:var(--s-3) 0; --sw-fg:var(--ink); --sw-bg:var(--paper); }
.sheet .m-body h3{ font:var(--t-lead-strong); margin:var(--s-4) 0 var(--s-1); }
.sheet .m-body h2, .sheet.wide .m-body h3{ font:var(--t-title); letter-spacing:var(--ls-title); margin:var(--s-4) 0 var(--s-2); }
.sheet .top + .m-body > :first-child{ margin-top:0; }
.sheet .m-body p{ font:var(--t-lead); color:var(--mid); margin:0 0 var(--s-2); }
.sheet .m-body ul{ list-style:none; padding:0; margin:var(--s-3) 0 0; }
.sheet .m-body li{ border-top:1px solid var(--hairline); padding:var(--s-2) 0; }
.sheet .m-body li h4{ margin:0 0 var(--s-1); font:var(--t-lead-strong); }
.sheet .m-nav{ display:flex; gap:8px; margin-top:var(--s-4); }

/* ---------- phone controls, to Apple's guidance ----------
   Colour swatches: one horizontally scrolling row (momentum, snap, soft edge fade), selected kept in view. */
.sheet .m-switch{ margin-left:-22px; margin-right:-22px; }
.sheet .m-switch .sw-swatches{ max-width:calc(100% - 44px); margin:0 22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;
  }
.sheet .m-switch .sw-swatches::-webkit-scrollbar{ display:none; }
.sheet .m-switch .sw-swatches button{ scroll-snap-align:start; flex:none; }
.sheet .m-switch .sw-seg{ margin:0 22px; max-width:calc(100% - 44px); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }   /* a long list (merchandise) scrolls sideways */
.sheet .m-switch .sw-seg::-webkit-scrollbar{ display:none; }
.sheet .m-switch .sw-seg button{ flex:none; }
.sheet .m-switch .sw-swatches{ display:flex; }

/* breadcrumb in the sheet (half-rail pages) */
.sheet .crumb{ position:static; width:auto; opacity:1; margin:0 0 var(--s-1); }
.sheet .crumb + .m-body > :first-child{ margin-top:0; }

/* the sheet is real screen size (outside the scaled canvas): 44pt targets on touch */
@media (pointer:coarse){
  .sheet .circle{ width:44px; height:44px; }
  .sheet .track, .sheet .sw{ height:44px; }
  .sheet .track button, .sheet .sw button{ height:38px; min-width:38px; }
}

/* full-width layouts in the sheet: the desktop layout, reflowed into one column */
.sheet .m-layout{ position:static; width:auto; margin-top:var(--s-4); }
.sheet .m-layout > *, .sheet .m-layout .lf-cols, .sheet .m-layout .lf-quote, .sheet .m-layout .grid-3x3, .sheet .m-layout .phases,
.sheet .m-layout .arch, .sheet .m-layout .notes, .sheet .m-layout .stages, .sheet .m-layout .pillars, .sheet .m-layout .contact,
.sheet .m-layout .cover-client, .sheet .m-layout .cover-title, .sheet .m-layout .cover-meta, .sheet .m-layout .inv{ position:static !important; width:auto !important; left:auto !important; top:auto !important; }
/* chapter and strategy layouts: one column, in reading order */
.sheet .m-layout .ch-body, .sheet .m-layout .ch-list, .sheet .m-layout .sg-head, .sheet .m-layout .nums, .sheet .m-layout .sg-band, .sheet .m-layout .qf, .sheet .m-layout .qg,
.sheet .m-layout .aud, .sheet .m-layout .jm, .sheet .m-layout .map-copy, .sheet .m-layout .map-plot, .sheet .m-layout .cmp, .sheet .m-layout .ft,
.sheet .m-layout .plat, .sheet .m-layout .plat-values, .sheet .m-layout .plat-pers, .sheet .m-layout .mh, .sheet .m-layout .road{ position:static !important; width:auto !important; left:auto !important; right:auto !important; top:auto !important; }
.sheet .m-layout .sg-head, .sheet .m-layout .nums, .sheet .m-layout .sg-band ol, .sheet .m-layout .qg, .sheet .m-layout .aud, .sheet .m-layout .plat, .sheet .m-layout .plat-values,
.sheet .m-layout .mh-pillars{ display:flex !important; flex-direction:column; gap:var(--s-3); margin-top:var(--s-3); }
.sheet .m-layout .qf{ flex-wrap:wrap; margin-top:var(--s-3); }
.sheet .m-layout .map-plot{ position:relative !important; height:300px; margin:var(--s-4) 0 var(--s-3); }   /* the points place themselves inside it */
.sheet .m-layout .road{ display:flex !important; flex-direction:column; gap:var(--s-3); border-top:0; border-left:1px solid var(--ink); padding-left:var(--s-2); margin-top:var(--s-3); }
.sheet .m-layout .road > li::before{ left:calc(-1 * var(--s-2) - 6px); top:4px; }
.sheet .m-layout .road-when{ position:static !important; }
.sheet .m-layout .jm{ overflow-x:auto; margin-top:var(--s-3); }
.sheet .m-layout .jm > *{ min-width:720px; }
.sheet .m-layout .cmp{ overflow-x:auto; margin-top:var(--s-3); }
.sheet .m-layout .cmp-t{ min-width:560px; }
.sheet .m-layout .cmp-key{ flex-wrap:wrap; }
.sheet .m-layout .ft li{ grid-template-columns:1fr; gap:4px; }
.sheet .m-layout .ft i, .sheet .m-layout .ft-head{ display:none; }
.sheet .m-layout .ch-title, .sheet .m-layout .map-h, .sheet .m-layout .sg-h{ font:var(--t-title); letter-spacing:var(--ls-title); }
.sheet .m-layout .statement, .sheet .m-layout .headline{ font:var(--t-title); letter-spacing:var(--ls-title); margin:0 0 var(--s-3); }
.sheet .m-layout .intro, .sheet .m-layout .lf-cols p{ margin:0 0 var(--s-2); }
.sheet .m-layout .lf-cols, .sheet .m-layout .grid-3x3, .sheet .m-layout .phases, .sheet .m-layout .stages, .sheet .m-layout .pillars,
.sheet .m-layout .notes, .sheet .m-layout .inv{ display:flex !important; flex-direction:column; gap:var(--s-3); }
.sheet .m-layout .lf-quote{ margin:var(--s-3) 0 0; }
.sheet .m-layout .arch{ display:block; margin:var(--s-3) 0; }
.sheet .m-layout .arch thead{ display:none; }
.sheet .m-layout .arch tr{ display:grid; grid-template-columns:1fr; padding:var(--s-2) 0; border-top:1px solid var(--hairline); }
.sheet .m-layout .arch th, .sheet .m-layout .arch td{ border:0; padding:2px 0; width:auto; }
.sheet .m-layout .arch tr.master{ background:var(--ink); border-radius:12px; padding:var(--s-2); }
.sheet .m-layout .arch tr.master > *{ padding:2px 0; border-radius:0; box-shadow:none; }
.sheet .m-layout .inv-list{ max-height:none; overflow:visible; }
.sheet .m-layout .inv-head{ flex-direction:column; align-items:flex-start; }
/* the bookends stay dark on the phone too */
body.mobile.page-full .sheet:has(.lay-cover), body.mobile.page-full .sheet:has(.lay-close), body.mobile.page-full .sheet:has(.lay-chapter){ background:#0a0a0a; color:#fff; }
.sheet:has(.lay-cover) .wordmark, .sheet:has(.lay-close) .wordmark{ color:#fff; }
.sheet .lay-cover .cover-client{ font:var(--t-display); letter-spacing:var(--ls-display); margin:0 0 var(--s-1); }
.sheet .lay-cover .cover-title, .sheet .lay-cover .cover-meta{ margin:0 0 var(--s-3); }
.sheet .lay-close .contact{ margin-top:var(--s-4); }
.sheet .m-layout .statement, .sheet .m-layout .headline, .sheet .m-layout .inv-h, .sheet .m-layout .cover-client{ color:var(--ink); }
.sheet .m-layout .inv-h{ font:var(--t-title); letter-spacing:var(--ls-title); margin:0; }
.sheet:has(.lay-cover) .m-layout .cover-client, .sheet:has(.lay-close) .m-layout .statement{ color:#fff; }
.sheet:has(.lay-cover) .m-layout p, .sheet:has(.lay-close) .m-layout p{ color:rgba(255,255,255,.62); }
.sheet:has(.lay-close) .m-layout .who{ color:#fff; }
.sheet .m-layout .sg-h, .sheet .m-layout .map-h, .sheet .m-layout .hs-h{ color:var(--ink); }
.sheet .m-layout .mh-roof{ color:var(--paper); font:var(--t-title); }
.sheet .m-layout .mh-pillars ul li{ padding-left:16px !important; }
.sheet .m-layout .mh-base{ grid-template-columns:1fr; gap:6px; }
.sheet:has(.lay-chapter) .title{ color:#fff; } .sheet:has(.lay-chapter) .sub{ color:rgba(255,255,255,.55); }
.sheet .m-layout .hs-copy, .sheet .m-layout .hs-s{ position:static !important; width:auto !important; margin-top:var(--s-3); }
.sheet .m-layout .hs-copy{ display:flex; flex-direction:column; gap:var(--s-2); }
.sheet .m-layout .hs-n{ position:static !important; font-size:120px; }