/* ------------------------------------------------------------------
   Phone and tablet. The desktop pages are drawn on a 1440 canvas that
   cannot reflow, so below 980 they step aside and this layout takes
   over. It is the same work, not a flattened copy of it: the laptop
   still turns, the globe still spins, the room is still the model.
   ------------------------------------------------------------------ */

#mnav, #mmenu, .mob { display:none }

@media (max-width:979px){

  html { overflow-x:clip }
  #page, #topbar, #pagebar { display:none !important }
  .mob { display:block }

  :root{ --pad:20px }

  /* ---------------- the bar and the menu ---------------- */
  #mnav{ display:flex; position:fixed; left:0; top:0; width:100%; height:62px; z-index:160;
         align-items:center; justify-content:space-between; padding:0 var(--pad);
         background:transparent; transition:background .3s var(--ease), box-shadow .3s var(--ease) }
  #mnav.solid{ background:var(--bone) }
  #mnav .mlogo{ font-size:20px; line-height:24px; font-weight:700; font-style:italic;
                letter-spacing:.01em; text-transform:uppercase; color:var(--ink) }
  #mnav[data-top="light"] .mlogo{ color:var(--cream) }
  #mnav[data-top="light"].solid .mlogo{ color:var(--ink) }
  #mburger{ position:relative; width:34px; height:34px; display:grid; place-content:center; gap:6px }
  #mburger i{ display:block; width:24px; height:2px; background:var(--ink);
              transition:transform .3s var(--ease), opacity .2s var(--ease) }
  #mnav[data-top="light"] #mburger i{ background:var(--cream) }
  #mnav[data-top="light"].solid #mburger i{ background:var(--ink) }
  body.menu #mburger i:first-child{ transform:translateY(4px) rotate(45deg); background:var(--cream) }
  body.menu #mburger i:last-child{ transform:translateY(-4px) rotate(-45deg); background:var(--cream) }
  body.menu #mnav{ background:transparent }
  body.menu #mnav .mlogo{ color:var(--cream) !important }
  body.menu #mburger i{ background:var(--cream) !important }

  #mmenu{ position:fixed; inset:0; z-index:150; background:var(--wine); padding:96px var(--pad) 40px;
          display:flex; flex-direction:column; justify-content:space-between;
          opacity:0; visibility:hidden; transform:translateY(-12px);
          transition:opacity .34s var(--ease), transform .4s var(--ease), visibility .34s }
  body.menu #mmenu{ opacity:1; visibility:visible; transform:none }
  body.menu{ overflow:hidden }
  #mmenu nav{ display:flex; flex-direction:column; gap:4px }
  #mmenu nav a{ font-size:44px; line-height:56px; letter-spacing:-.03em; font-weight:500;
                text-transform:uppercase; color:var(--cream) }
  #mmenu nav a .n{ display:inline-block; width:46px; font-size:12px; line-height:56px;
                   letter-spacing:.18em; vertical-align:top; opacity:.45 }
  #mmenu .mm-foot{ display:flex; flex-direction:column; gap:14px }
  #mmenu .mm-foot a{ font-size:17px; line-height:26px; color:var(--cream) }
  #mmenu .mm-foot .lab{ color:var(--cream); opacity:.5 }
  #mmenu .mm-soc{ display:flex; gap:22px; font-size:14px; text-transform:uppercase; color:var(--cream) }

  /* ---------------- the shell ---------------- */
  /* the sections overlap by a pixel: at a fractional scroll offset two
     abutting backgrounds otherwise leave a hairline of the page behind */
  .msec{ position:relative; padding:46px var(--pad) 55px; margin-bottom:-1px; overflow:hidden }
  .mfoot{ position:relative }
  .msec.wine{ background:var(--wine); color:var(--cream) }
  .msec.green{ background:var(--green); color:var(--cream) }
  .msec.ink{ background:var(--ink); color:var(--cream) }
  .msec.bone{ background:var(--bone); color:var(--ink) }
  .msec.mhero{ padding-top:92px }
  /* the word that changes is on a line of its own and the four lines are
     fixed, so nothing under the headline moves while it types */
  .mhero .md1{ font-size:clamp(34px, 12.6vw, 52px); line-height:1; min-height:2em }
  /* the hero takes the whole window, its words in the middle of it */
  .msec.mhero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:80px; padding-bottom:40px }
  #skip{ display:none }                 /* no skip control on a phone */
  .msec > *{ position:relative; z-index:1 }

  .mchip{ display:inline-flex; align-items:center; height:18px; padding:2px 5px;
          background:var(--ink); color:var(--casetx);
          font-size:11px; line-height:14px; letter-spacing:.18em }
  .mchip.cream{ background:var(--cream); color:var(--ink) }
  .md1{ font-size:44px; line-height:44px; letter-spacing:-.03em; font-weight:500; text-transform:uppercase }
  .md2{ font-size:38px; line-height:38px; letter-spacing:-.03em; font-weight:500; text-transform:uppercase }
  .md3{ font-size:26px; line-height:32px; letter-spacing:-.025em; font-weight:500 }
  .mh{ font-size:19px; line-height:24px; letter-spacing:-.01em; font-weight:500; text-transform:uppercase }
  .mbody{ font-size:14px; line-height:22px; letter-spacing:-.01em }
  .mlab{ font-size:11px; line-height:16px; letter-spacing:.18em; font-weight:500; text-transform:uppercase }
  .mmute{ opacity:.62 }
  .mrule{ height:1px; background:currentColor; opacity:.16; margin:22px 0 }

  .mcta{ display:inline-flex; align-items:center; height:40px; padding:2px 16px; margin-top:26px;
         background:var(--wine); color:var(--cream);
         font-size:22px; line-height:28px; letter-spacing:-.01em; text-transform:uppercase }
  .mcta.ink{ background:var(--ink) }
  .mcta.cream{ background:var(--cream); color:var(--ink) }
  .mcta:active{ background:var(--ink); color:var(--cream) }

  .mnotes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px }
  .mnote .n{ display:inline-flex; height:21px; padding:2px 10px; background:var(--green);
             color:var(--chiptx); font-size:13px; line-height:17px; letter-spacing:.06em;
             font-style:italic; font-weight:500 }
  .mnote strong{ display:block; margin-top:8px; font-size:14px; line-height:20px; font-weight:500;
                 text-transform:uppercase }
  .mnote span{ display:block; margin-top:2px; font-size:14px; line-height:19px; opacity:.6 }

  .mshot{ width:100%; overflow:hidden; background:var(--maroon,#240E0A) }
  .mshot img{ width:100%; height:100%; object-fit:cover; display:block }
  .mcap{ margin-top:10px; font-size:11px; line-height:16px; letter-spacing:.18em;
         text-transform:uppercase; opacity:.55 }

  /* ---------------- the laptop, still the Blender turn ---------------- */
  .mlap{ position:relative; width:100%; aspect-ratio:1100 / 1180; overflow:hidden;
         background:var(--panel); touch-action:pan-y }
  .mlap.drag{ cursor:grabbing }
  .mlapin{ position:absolute; left:0; top:0; width:1100px; height:1180px;
           transform-origin:0 0; will-change:transform }
  .mlapin > .mframe{ position:absolute; inset:0; width:1100px; height:1180px; display:block }
  /* no will-change here: on its own compositor layer the glass moves a
     frame before the drawing under it, which is what tears on a fast flick */
  .mscreen{ position:absolute; left:0; top:0; width:791.8px; height:494.4px;
            transform-origin:0 0; overflow:hidden; background:#17110F }
  .mscreen img{ width:100%; height:100%; object-fit:cover }
  /* the project name, printed on the back of the lid */
  .mlid{ position:absolute; left:0; top:0; width:815px; height:568px; transform-origin:0 0;
         display:grid; place-items:center; opacity:0; pointer-events:none }
  /* the landing: the first photograph instead of a name, cut to what the
     window shows when it opens */
  .mlid.mlidph{ display:block; border-radius:14px; overflow:hidden;
                background:#2D120D url(ph-conference.webp) no-repeat 0 0 / auto 100% }
  .mlid span{ font-size:72px; line-height:1; font-weight:700; font-style:italic;
              letter-spacing:.01em; text-transform:uppercase; color:var(--ink); opacity:.88;
              white-space:nowrap }
  .mturn{ position:absolute; right:10px; bottom:10px; z-index:2; display:flex; gap:8px }
  .mturn b{ display:grid; place-items:center; width:34px; height:34px;
            border:1px solid rgba(45,18,13,.45); background:rgba(255,250,216,.7) }
  .mhint{ margin-top:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.45 }

  /* ---------------- the globe ---------------- */
  /* the flag labels stand off the limb, so the box does not clip and the
     sphere is scaled to leave them room */
  .mglobe{ position:relative; width:100%; aspect-ratio:1 / 1.05; overflow:hidden; margin:16px 0 4px }
  .mglobe #gl{ position:absolute; left:0; top:0; opacity:0; transform-origin:0 0 }
  .mglobe .flag b{ font-size:13px; line-height:15px; letter-spacing:.12em; padding:3px 5px 2px }
  .mglobe + .glnav{ position:static; display:flex; gap:12px; justify-content:center; margin-bottom:8px }
  .glnav .glbtn{ width:40px; height:40px; border:1px solid var(--ink); display:grid; place-items:center }
  .glnav .glbtn svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.4 }

  /* ---------------- the quote, filling as it arrives ---------------- */
  .mquote{ position:relative; margin-top:22px }
  .mquote .q, .mquote .over{ text-transform:uppercase }
  .mquote .q{ position:relative; display:block; padding:10px 12px; color:var(--ink) }
  .mquote .fill{ position:absolute; inset:0; background:#2D120D;
                 clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease) }
  .mquote .over{ position:absolute; left:0; top:0; width:100%; padding:10px 12px; color:#CDE3E8;
                 clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease) }
  .mquote.in .fill, .mquote.in .over{ clip-path:inset(0 0 0 0) }
  .mquote.wine .fill{ background:var(--wine) }
  .mqlink{ display:inline-flex; margin-top:10px; padding:2px 8px; background:var(--wine); color:var(--cream);
           font-size:13px; line-height:17px; letter-spacing:-.01em; text-transform:uppercase }

  /* the photographs, one frame wide, the strip is a desktop thing */
  .mphoto{ position:relative; background:var(--ink); margin-bottom:-1px }
  .mphotoin{ aspect-ratio:2277 / 900; overflow:hidden }
  .mphotoin img{ width:100%; height:100%; object-fit:cover; display:block }
  .mphoto .mlab{ position:absolute; left:var(--pad); bottom:10px; right:var(--pad); color:var(--cream);
                font-size:9px; line-height:12px }

  /* ---------------- the room and the band on a phone ---------------- */
  /* the room holds the window; the printed piece you are on comes up
     over it the way the panels do on the desktop */
  .mroomseq .mpin-safe{ display:flex; flex-direction:column; padding:30px 0 18px }
  .mrhead{ padding:0 var(--pad); flex:0 0 auto }
  .mrstage{ position:relative; flex:1 1 auto; min-height:0; margin-top:10px }
  .mroom{ position:absolute; inset:0; overflow:hidden }
  .mroom canvas{ display:block; width:100%; height:100% }
  .mroom #room{ transition:opacity .5s var(--ease) }
  .mroom.dim #room{ opacity:.42 !important }
  .mpanels{ position:absolute; inset:0; pointer-events:none }
  .mpanel{ position:absolute; left:50%; top:50%; background:var(--cream); padding:9px;
           opacity:0; transform:translate(-50%,calc(-50% + 14px));
           transition:opacity .45s var(--ease), transform .6s var(--ease) }
  .mpanel.on{ opacity:1; transform:translate(-50%,-50%) }
  .mpanel .lab{ position:absolute; left:0; top:-26px; display:inline-flex; height:18px; padding:2px 5px;
                background:var(--wine); color:var(--navtx); white-space:nowrap;
                font-size:11px; line-height:14px; letter-spacing:.18em }
  .mpanel .ims{ display:flex; gap:8px; width:100%; height:100% }
  .mpanel .ims img{ flex:1 1 0; min-width:0; width:100%; height:100%;
                    display:block; object-fit:cover; background:var(--paper) }
  .mpanel .ims img.fit{ object-fit:contain }
  .mrfoot{ flex:0 0 auto; padding:0 var(--pad) }
  .mrfoot .mcap{ margin-top:12px }
  .mrbar{ display:flex; align-items:center; gap:14px; margin-top:12px }
  .mrtrack{ position:relative; flex:1 1 auto; height:2px; background:rgba(45,18,13,.18) }
  .mrtrack i{ position:absolute; left:0; top:0; height:2px; width:0; background:var(--wine);
              transition:width .5s var(--ease) }
  .mband{ position:relative; width:100%; aspect-ratio:481 / 313; touch-action:pan-y }
  .mband canvas{ display:block; width:100%; height:100% }

  /* ---------------- the photo bands ---------------- */
  .mcar{ position:relative; width:calc(100% + var(--pad) * 2); margin-left:calc(var(--pad) * -1);
         aspect-ratio:3 / 2; overflow:hidden; background:var(--dark,#3A1A14) }
  .mcar .cartrack{ position:absolute; left:0; top:0; height:100%; display:flex }
  .mcar .carslide{ position:relative; height:100%; flex:0 0 auto; overflow:hidden }
  .mcar .carslide img{ width:100%; height:100%; object-fit:cover }
  .mcar .carno{ position:absolute; left:var(--pad); bottom:14px; height:18px; padding:2px 5px;
                background:var(--ink); color:var(--casetx);
                font-size:11px; line-height:14px; letter-spacing:.18em }
  .mcar .carbar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:rgba(255,250,216,.18) }
  .mcar .carbar i{ position:absolute; left:0; top:0; height:2px; background:var(--wine);
                   transition:width .5s var(--ease) }

  /* ---------------- the six steps ---------------- */
  /* the strip pans sideways only: overflow-x:auto would otherwise make
     the vertical axis scrollable too and the cards slide out of place */
  .msteps{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
           margin:24px calc(var(--pad) * -1) 0;
           padding:0 var(--pad) 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
           overscroll-behavior-x:contain; touch-action:pan-x pan-y pinch-zoom }
  .msteps::-webkit-scrollbar{ display:none }
  /* the first card snaps to the margin, not to the glass, and the last
     one keeps the margin after it (a scroller drops its own right padding) */
  .msteps{ scroll-padding-left:var(--pad) }
  .msteps::after{ content:""; flex:0 0 calc(var(--pad) - 12px); width:calc(var(--pad) - 12px) }
  .mstep{ flex:0 0 auto; width:180px; background:#F3EBC6; color:var(--ink); scroll-snap-align:start }
  .mstep .no{ display:block; padding:10px 12px 0; font-size:11px; letter-spacing:.18em; color:var(--mute) }
  /* the slot is a span: without display:block the ratio is ignored and the
     picture runs out of the strip */
  .mstep .slot{ display:block; margin:8px 12px 0; aspect-ratio:1;
                background:var(--paper); overflow:hidden }
  .mstep .slot img{ width:100%; height:100%; object-fit:cover }
  .mstep .nm{ display:block; padding:12px; font-size:13px; line-height:18px; font-weight:500;
              text-transform:uppercase; opacity:.72 }

  /* ---------------- badges ---------------- */
  .mbadges{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px }
  .mbadges .flip{ position:relative; aspect-ratio:233 / 381; perspective:900px }
  .mbadges .in3d{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
                  transition:transform 1s var(--ease) }
  .mbadges .flip.in .in3d{ transform:rotateY(360deg) }
  .mbadges .flip.in:nth-of-type(2) .in3d{ transition-delay:.16s }
  .mbadges .flip.in:nth-of-type(3) .in3d{ transition-delay:.32s }
  .mbadges .fc{ position:absolute; inset:0; backface-visibility:hidden }
  .mbadges .fc img{ width:100%; height:100%; object-fit:contain }
  .mbadges .bk{ transform:rotateY(180deg) }

  /* ---------------- the work list ---------------- */
  .mrow{ display:block; padding:22px 0; border-top:1px solid rgba(45,18,13,.14) }
  .mrow:last-child{ border-bottom:1px solid rgba(45,18,13,.14) }
  .mrow .n{ display:inline-flex; height:21px; padding:2px 10px; background:var(--green);
            color:var(--chiptx); font-size:13px; line-height:17px; letter-spacing:.06em;
            font-style:italic; font-weight:500 }
  .mrow h3{ margin-top:12px; font-size:30px; line-height:34px; letter-spacing:-.025em;
            font-weight:500; text-transform:uppercase }
  .mrow p{ margin-top:8px; font-size:11px; line-height:17px; letter-spacing:.18em;
           text-transform:uppercase; opacity:.6 }
  .mrow .mthumb{ display:block; margin-top:16px; aspect-ratio:960 / 600; overflow:hidden;
                 background:#703839 }
  .mrow .mthumb img{ width:100%; height:100%; object-fit:cover }
  .mrow .mgo{ display:inline-flex; align-items:center; height:21px; padding:2px 8px; margin-top:14px;
              background:var(--wine); color:var(--navtx);
              font-size:12px; line-height:17px; letter-spacing:.06em; text-transform:uppercase }
  .mrow .msoon{ display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.18em;
                text-transform:uppercase; opacity:.38 }

  /* ---------------- about, contact, footer ---------------- */
  .mport{ width:calc(100% + var(--pad) * 2); margin:0 calc(var(--pad) * -1) 26px;
          aspect-ratio:4 / 5; overflow:hidden }
  .mport{ position:relative }
  .mport img{ width:100%; height:100%; object-fit:cover; object-position:50% 6% }
  .mpcap{ position:absolute; left:var(--pad); bottom:14px; color:var(--cream); opacity:.5 }
  .mkeys{ margin-top:30px }
  .mkey{ padding:13px 0; border-bottom:1px solid rgba(205,227,232,.16) }
  .mkey .k{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.5 }
  .mkey .v{ display:block; margin-top:4px; font-size:14px; line-height:22px }
  .mfoot{ padding:34px var(--pad) 40px; background:var(--bone); color:var(--ink) }
  .mfoot .soc{ display:flex; gap:20px; margin-top:18px; font-size:14px; text-transform:uppercase }
  .mfoot .cp{ margin-top:22px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.5 }

  /* ---------------- parts carried over from the desktop page ---------------- */
  .mroom #room{ position:absolute !important; left:0 !important; top:0 !important;
                width:100% !important; height:100% !important }
  #panels{ display:none !important }
  .mband #band{ position:absolute !important; left:0 !important; top:0 !important;
                width:100% !important; height:100% !important; overflow:visible !important }
  .mbandnav{ display:flex; gap:12px; justify-content:center; margin-top:16px }
  .mbandnav .bandnav{ position:static !important; width:40px; height:40px }
  .mcar .car{ position:absolute !important; left:0 !important; top:0 !important;
              width:100% !important; height:100% !important; background:var(--dark,#3A1A14) }
  .mcar .car .c{ left:0 !important; width:100% !important; margin-left:0 !important }
  .mcar .carno{ left:var(--pad) !important; bottom:14px !important }
  .mcar .carar{ opacity:1 !important; width:38px; height:38px; margin-top:-19px }
  .mcar .carar.l{ left:10px } .mcar .carar.r{ right:10px }

  /* ---------------- held sections ---------------- */
  /* the section is the window tall plus its run; the inner box sticks.
     Nothing that holds can sit inside an overflow:hidden parent, so these
     are siblings of the .msec blocks, never children. */
  .mpin{ position:relative; margin-bottom:-1px; color:var(--ink) }
  .mpin-in{ position:sticky; top:0; height:100vh; overflow:hidden }
  /* the part of the window that is never under the browser bars */
  .mpin-safe{ position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh }
  #mnav{ transition:background .3s var(--ease), transform .45s var(--ease) }
  body.mpinned #mnav{ transform:translateY(-100%) }
  /* the intro has the name; the bar waits until it is gone */
  #mnav{ transition:background .3s var(--ease), transform .45s var(--ease), opacity .4s var(--ease) }
  .js body.pre #mnav{ opacity:0; pointer-events:none }
  body.mrhero-on #mnav.solid{ background:transparent }
  body.mrhero-on #mnav[data-top="light"].solid .mlogo{ color:var(--cream) }
  body.mrhero-on #mnav[data-top="light"].solid #mburger i{ background:var(--cream) }
  body.menu #mnav{ transform:none }

  /* a page of a site, the whole window, running top to bottom */
  .mpage .mpin-in{ background:var(--pfbg,#fff) }
  /* a page no taller than the window is shown at its own height, not held */
  .mpage.short .mpin-in{ position:relative; height:auto }
  .mpage.short .mpg{ position:relative; height:auto }
  .mpage.short .mpbar{ display:none }
  .mpg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden }
  .mpg img{ display:block; width:100%; height:auto; will-change:transform }
  .mpbar{ position:absolute; left:0; top:0; width:100%; height:3px; background:rgba(45,18,13,.14); z-index:2 }
  .mpbar i{ display:block; width:100%; height:100%; background:var(--wine); transform-origin:0 0; transform:scaleX(0) }
  .mptag{ position:absolute; left:var(--pad); bottom:16px; z-index:2 }

  /* a band that runs sideways while its section holds */
  .mside .mpin-safe{ display:flex; flex-direction:column; justify-content:center }
  .mshead{ padding:0 var(--pad); margin-bottom:22px }
  .mstrack{ display:flex; align-items:flex-start; gap:10px; width:max-content; padding-left:var(--pad); will-change:transform }
  /* where the words are in the window with the pictures, they sit at the
     top and the pictures take the height under them */
  .mside .mpin-safe.mtop{ justify-content:flex-start; padding-top:24px }
  .mtop .mshead{ margin-bottom:30px }
  .mstrack > .msend{ flex:0 0 calc(var(--pad) - 10px); width:calc(var(--pad) - 10px) }
  .mstrack > *{ flex:0 0 auto }
  .msfoot{ display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); margin-top:16px }
  .mscount{ font-size:11px; line-height:14px; letter-spacing:.18em; text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.6 }

  /* the calculator holds while its five screens change */
  .mcalc .mpin-safe{ display:flex; flex-direction:column; justify-content:center; padding:24px var(--pad) }
  .mchead{ text-align:center }
  .mcframe{ position:relative; width:100%; aspect-ratio:1906 / 1064; margin-top:22px;
            border-radius:10px; overflow:hidden; background:#fff }
  .mcframe img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                opacity:0; transition:opacity .45s var(--ease) }
  .mcframe img.on{ opacity:1 }
  .mcrails{ margin-top:18px }
  .mcrail{ display:grid; grid-template-columns:34px 1fr 72px; align-items:center; height:30px;
           border-top:1px solid rgba(45,18,13,.14); font-size:11px; line-height:14px;
           letter-spacing:.18em; text-transform:uppercase }
  .mcrail:last-child{ border-bottom:1px solid rgba(45,18,13,.14) }
  .mcrail .k{ color:var(--mute) }
  .mcrail .t2{ font-weight:500; opacity:.4; transition:opacity .3s var(--ease) }
  .mcrail.on .t2{ opacity:1 }
  .mcrail i{ position:relative; height:2px; background:rgba(45,18,13,.14) }
  .mcrail i b{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--wine);
               transition:width .45s var(--ease) }
  .mcrail.on i b{ width:100% }

  /* the photographs, the full height of the window, running sideways */
  .mphotos .mstrack{ position:absolute; left:0; top:0; height:100%; gap:6px; padding-left:0 }
  .mfull{ height:100%; margin:0 }
  .mfull img{ display:block; height:100%; width:auto; max-width:none }
  .mphotos .mpin-safe{ pointer-events:none }
  .mphotos .msfoot{ position:absolute; left:0; right:0; bottom:20px; margin:0 }

  /* the feed, the output and the films, one large tile at a time */
  .mpost{ width:300px; height:300px; overflow:hidden; background:#D9D5C6 }
  .mpost.tall{ width:260px; height:325px }
  .mpost img{ display:block; width:100%; height:100%; object-fit:cover }
  .mftile{ width:240px }
  .mftile .mfilm2{ width:100%; height:300px; aspect-ratio:auto }
  .mftile .mlab{ margin-top:10px; opacity:.7 }
  .mftile .mfilm2[data-vh="1280"]{ aspect-ratio:4 / 5 }

  /* the stand, the whole window, turning with the scroll */
  .mfair{ position:relative; padding:6px 0 30px; overflow:hidden }
  .mfstage{ position:relative; width:100%; aspect-ratio:1 / .68 }
  .mfstage .standwrap{ position:absolute !important; left:0 !important; top:0 !important;
                       width:100% !important; height:100% !important; margin:0 !important }
  .mfstage #fstage{ height:100% !important }
  .mfstage #fcalls{ display:block !important }
  .mfstage .call span{ font-size:9px; letter-spacing:.12em; height:15px; line-height:12px; padding:1px 4px 0 }

  /* ---- the landing: the lid closes on [milos], the photographs open out
     of it, close again and split into the two cards ---- */
  .mreel .mpin-in{ background:var(--wine) }
  .mrf{ position:absolute; inset:0; display:block; opacity:0 }
  .mrf.bone{ background:var(--bone) }
  .mrf.green{ background:var(--green) }
  .mrrect{ position:absolute; left:0; top:0; display:block; background:var(--bone); transform-origin:0 0 }
  .mrlap{ position:absolute; left:0; top:0; width:0; height:0 }
  .mrlap .mlapin{ position:absolute; left:0; top:0; width:1100px; height:1180px; transform-origin:0 0 }
  .mrlap .mframe{ position:absolute; left:0; top:0; width:1100px; height:1180px; display:block }
  .mrpanel{ position:absolute; left:0; top:0; width:815px; height:568px; transform-origin:0 0;
            background:var(--bone); border-radius:14px; opacity:0; display:block }
  .mrlap .mlid span{ color:var(--ink) }
  .mrlap .mscreen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0 }
  .mrlap .mscreen img.on{ opacity:1 }
  /* the hero, laid over the first part of the run */
  .mrhero{ display:flex; flex-direction:column; align-items:center; text-align:center;
           padding:74px var(--pad) 18px; color:var(--cream); z-index:6 }
  .mrhero .md1{ font-size:min(10vw, 5.4vh, 39px); font-size:min(10vw, 5.4svh, 39px); line-height:1; min-height:4em }
  .mrslot{ flex:1 1 auto; align-self:stretch; min-height:140px; margin-top:10px }
  .mrhero .mcta{ align-self:center; margin-top:10px }
  /* the three cases: the laptop on top, the words under it */
  .mrcases{ display:flex; flex-direction:column; padding:22px var(--pad) 16px; z-index:5; visibility:hidden }
  .manchor{ position:absolute; left:0; top:0; width:1px; height:1px }
  .mrpslot{ flex:1 1 auto; min-height:150px }
  .mrctext{ display:grid; margin-top:14px; flex:0 0 auto }
  .mrcase{ grid-area:1 / 1; opacity:0; transform:translateY(10px); pointer-events:none;
           transition:opacity .3s var(--ease), transform .5s var(--ease) }
  .mrcase.on{ opacity:1; transform:none; transition:opacity .45s var(--ease) .08s, transform .6s var(--ease) .06s }
  .mrcase .md2{ margin-top:12px; font-size:34px; line-height:34px }
  .mrcase .mbody{ margin-top:10px; font-size:14px; line-height:21px }
  .mrcase .mnotes{ margin-top:14px; gap:12px }
  .mrrail{ display:flex; align-items:center; gap:14px; margin-top:14px; flex:0 0 auto }
  .mrtrk{ position:relative; flex:1 1 auto; height:2px; background:rgba(45,18,13,.18) }
  .mrtrk i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--wine) }
  .mrmeta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
           font-size:10px; line-height:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
  .mrmeta b{ font-weight:500 }
  .mrband{ position:absolute; inset:0; background:var(--ink); visibility:hidden; z-index:3 }
  .mrstrip{ position:absolute; left:0; top:0; height:100%; display:flex; gap:6px; will-change:transform }
  .mrstrip img{ display:block; height:100%; width:auto; max-width:none }
  .mrblab{ position:absolute; left:var(--pad); right:var(--pad); bottom:calc(100vh - 100svh + 18px);
           color:var(--cream); opacity:0 }
  .mrhalf{ position:absolute; left:0; top:0; display:block; background:var(--bone); visibility:hidden; z-index:2 }
  .mrthree{ z-index:5; padding:26px var(--pad) 18px; pointer-events:none }
  .mrfit{ transform-origin:50% 0 }
  .mrlhead{ opacity:0; transform:translateY(16px) }
  .mrcard{ margin-top:12px; background:var(--bone); padding:12px; opacity:0 }
  .mrcin{ opacity:0 }
  .mrcin .mshot{ aspect-ratio:3 / 1; background:none }
  .mrcin .mh{ margin-top:12px; color:var(--ink) }
  .mrcin p{ margin-top:6px; font-size:14px; line-height:19px; letter-spacing:-.01em; color:var(--ink); opacity:.8 }

  /* the four projects: one under the other, each one the whole width */
  .mhero .mcta{ margin-top:26px }
  .mwcards{ display:grid; gap:16px; margin-top:26px }
  .mwc{ display:block; position:relative; background:#FFFDEE; padding:12px 12px 16px; color:var(--ink) }
  .mwc .wthumb{ position:relative; left:0; top:0; display:block; width:100%; height:auto; aspect-ratio:960 / 600 }
  .mwrow{ display:block; margin-top:14px }
  .mwrow .chip--num{ margin-top:0 }
  .mwname{ display:block; margin-top:10px; font-size:26px; line-height:30px; letter-spacing:-.02em; font-weight:500;
           text-transform:uppercase }
  .mwmeta{ display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:11px; line-height:15px;
           letter-spacing:.18em; font-weight:500; text-transform:uppercase }
  .mwmeta span:first-child{ opacity:.85 } .mwmeta span:last-child{ opacity:.5 }
  .mwc .mwgo{ display:inline-flex; height:auto; margin-top:16px; padding:4px 10px; font-size:16px; line-height:22px }
  .mrhchip{ align-self:flex-start; margin-bottom:6px }
  /* the laptop sits a little lower, clear of the chip */
  .mrcases .mrpslot{ margin-top:30px }
  .mrlap .mscreen .msh{ position:absolute; inset:0; opacity:0 }
  .mrlap .mscreen .msh.on{ opacity:1 }
  .mrlap .mscreen{ background:#FFFCE6 }
  .mrlap .mscreen svg{ display:block; width:100%; height:100% }
  .mrcase .chip--num{ margin-top:0 }

  /* the globe holds while the scroll turns it once around */
  .mglobeseq .mpin-safe{ display:flex; flex-direction:column; padding:28px var(--pad) 18px }
  .mghead{ flex:0 0 auto }
  .mglobeseq .mglobe{ flex:1 1 auto; aspect-ratio:auto; min-height:0; margin:8px 0 0 }
  .mglobeseq .glnav{ flex:0 0 auto; margin:6px 0 0 }
  .mgfoot{ flex:0 0 auto; margin-top:12px; opacity:.8 }

  /* the hint under a strip the thumb moves by hand */
  .mswipe{ display:inline-flex; align-items:center; gap:10px; margin-top:16px;
           font-size:11px; line-height:14px; letter-spacing:.18em; text-transform:uppercase; opacity:.7 }
  .mswipe svg{ display:block; animation:mswipe 1.8s var(--ease) infinite }
  @keyframes mswipe{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(7px) } }

  /* "It's live" sits in the middle of the picture of the site, a size up */
  .mob .livecta{ left:50% !important; top:50% !important; right:auto !important; bottom:auto !important;
                 transform:translate(-50%,-50%); font-size:15px !important; line-height:19px !important;
                 padding:6px 12px 5px !important; white-space:nowrap }

  /* ---------------- reveals ---------------- */
  .mr{ opacity:0; transform:translateY(20px);
       transition:opacity .6s var(--ease), transform .7s var(--ease) }
  .mr.in{ opacity:1; transform:none }
  .mw{ clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease) }
  .mw.in{ clip-path:inset(0 0 0 0) }
}

/* ---------------- tablet, the same layout with more room ---------------- */
@media (min-width:601px) and (max-width:979px){
  :root{ --pad:44px }
  .msec{ padding:60px var(--pad) 73px }
  .md1{ font-size:68px; line-height:68px }
  .mhero .md1{ font-size:clamp(44px, 8.9vw, 68px) }
  .md2{ font-size:58px; line-height:58px }
  .md3{ font-size:34px; line-height:42px }
  .mbody{ font-size:15px; line-height:23px }
  .mcta{ height:44px; font-size:24px }
  .mlap, .mglobe{ max-width:620px; margin-left:auto; margin-right:auto }
  .mband{ max-width:560px; margin-left:auto; margin-right:auto }
  /* a line of text on a tablet still wants a readable measure */
  .msec .mbody, .msec .mlab, .msec .mcap{ max-width:660px }
  .mport{ aspect-ratio:4 / 3 }
  .mport img{ object-position:50% 22% }
  .mstep{ width:230px }
  .mcards{ grid-template-columns:1fr 1fr }
  .mrow h3{ font-size:38px; line-height:44px }
  #mmenu nav a{ font-size:60px; line-height:74px }
}

@media (prefers-reduced-motion:reduce){
  .mr,.mw,.mquote .fill,.mquote .over,.mbadges .in3d{ transition:none !important }
  .mr{ opacity:1; transform:none } .mw{ clip-path:none }
}

/* the key visual on the stage, the whole screen, the words over it */
@media (max-width:979px){
  .msec.mkv{ height:100svh; min-height:560px; padding:0; background:#05060C }
  .mkvimg{ position:absolute; inset:0 }
  .mkvimg img{ width:100%; height:100%; object-fit:cover; object-position:50% 46% }
  .mkvimg::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,rgba(5,6,12,.62) 0%,rgba(5,6,12,0) 30%,rgba(5,6,12,0) 60%,rgba(5,6,12,.78) 100%) }
  .mkvin{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
    padding:86px var(--pad) 42px }
}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}

/* the longer address on phones: keep it on one line inside the margins */
@media (max-width:899px){
  #mcontact .mcta{ font-size:min(19px, 4.6vw); white-space:nowrap }
  .mmail{ font-size:min(26px, 6.6vw) !important; white-space:nowrap }
}