/* The Muskoka Parcel · The Muskoka Calendar page (draft preview).
   The calendar itself is the cabin's wall calendar (.cal rules in livingroom.css), scaled up:
   --u is one "wall pixel" of the 108px-wide wall calendar, so every size below matches the original. */
@import url("/assets/fonts/fonts.css");
:root{
  --cream:#F7F1E6; --amber:#E9A23B; --ink:#1a120d;
  --serif:"EB Garamond", Garamond, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pill:980px; --ease:cubic-bezier(.22,.61,.36,1);
  --kraft:#c49a66; --kraft-d:#a97f4e; --twine:#e9dcbc; --red:#9b2a22;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#3a2414}
body{margin:0;min-height:100svh;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* the cabin wall: same planks as .room__wall */
  background:
   radial-gradient(ellipse 60% 60% at 50% 40%,rgba(255,170,90,.12),transparent 70%),
   repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 64px),
   repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,220,170,.035) 17px 19px,transparent 19px 41px,rgba(0,0,0,.05) 41px 44px,transparent 44px 64px),
   linear-gradient(180deg,#3a2414,#5a3820 40%,#4d301b);background-attachment:fixed}
a{color:inherit}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:var(--pill);z-index:200}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* top bar: back into the cabin + cart (same pill as the cabin's .room-cart) */
.cp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 0}
.cp-back,.room-cart{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:var(--pill);border:1px solid rgba(243,196,122,.55);background:rgba(20,12,8,.62);backdrop-filter:blur(6px);color:#f3c47a;text-decoration:none;font-size:.88rem;transition:border-color .3s,box-shadow .3s}
.cp-back:hover,.cp-back:focus-visible,.room-cart:hover,.room-cart:focus-visible{border-color:#f3c47a;box-shadow:0 0 0 4px rgba(243,196,122,.15)}
.room-cart svg{width:18px;height:18px}
.cart-n{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .35em;border-radius:980px;background:#f3c47a;color:#1a120d;font:600 .78rem/1 var(--sans)}
.cart-n[hidden]{display:none}

.cp-main{display:flex;flex-direction:column;align-items:center;padding:6px 16px 110px}
.cp-title{font:500 clamp(1.45rem,3.2vw,1.9rem)/1.1 var(--serif);letter-spacing:-.01em;margin:6px 0 calc(min(380px,84vw) * .2 + 14px);text-align:center;color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* ---------- the calendar (book of pages) ---------- */
.calbook{--cw:min(380px,84vw,calc((100svh - 300px) * .6067));position:relative;width:var(--cw);aspect-ratio:108/178;container-type:inline-size;
  transform:rotate(1.4deg);transition:transform .4s var(--ease);perspective:1700px;perspective-origin:50% 0;touch-action:pan-y;cursor:pointer;
  -webkit-user-select:none;user-select:none;min-width:260px}
.calbook:hover,.calbook:focus-within{transform:rotate(0) translateY(-2px)}
.calbook:focus-visible{outline:2px solid var(--amber);outline-offset:8px;border-radius:4px}
/* the nail, exactly as on the wall, with a twine loop down to the binding */
.calbook .cal__nail{--u:calc(100cqw / 108);position:absolute;z-index:30;top:calc(var(--u) * -20);left:50%;width:2px;height:calc(var(--u) * 22);background:linear-gradient(transparent,rgba(30,20,10,.7))}
.calbook .cal__nail::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:#8b8478}
.twine{position:absolute;z-index:29;left:0;right:0;top:0;height:0;pointer-events:none}
.twine::before,.twine::after{content:"";position:absolute;top:0;width:calc(50% - 14cqw);height:2px;background:repeating-linear-gradient(90deg,#d8c79f 0 3px,#b79e72 3px 5px);box-shadow:0 1px 1px rgba(0,0,0,.35)}
.twine::before{left:14cqw;transform-origin:100% 50%;transform:rotate(-12deg) translateY(-1px)}
.twine::after{right:14cqw;transform-origin:0 50%;transform:rotate(12deg) translateY(-1px)}

.pg{--u:calc(100cqw / 108);position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 0;visibility:hidden}
.pg.is-on{visibility:visible;z-index:5}
.pg.is-under{visibility:visible;z-index:4}
.pg.is-turning{visibility:visible;z-index:10}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px}
/* front: the wall calendar's paper (.cal) */
.face--front{padding:calc(var(--u) * 22) calc(var(--u) * 8) calc(var(--u) * 8);background:linear-gradient(#f4ecdc,#e8dcc4);color:#3b2a1a;box-shadow:0 10px 18px -6px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;overflow:hidden}
.face--front::before{content:"";position:absolute;top:calc(var(--u) * 8);left:calc(var(--u) * 12);right:calc(var(--u) * 12);height:calc(var(--u) * 6);background:repeating-linear-gradient(90deg,#5a4a3a 0 calc(var(--u) * 3),transparent calc(var(--u) * 3) calc(var(--u) * 9));opacity:.6}
/* back: kraft parcel paper, twine and a postmark */
.face--back{transform:rotateX(180deg);background:
   radial-gradient(circle at 50% 55%,transparent 0 13cqw,rgba(60,35,15,.38) 13cqw calc(13cqw + 2px),transparent calc(13cqw + 3px) 17cqw,rgba(60,35,15,.3) 17cqw calc(17cqw + 2px),transparent calc(17cqw + 3px)),
   linear-gradient(90deg,transparent calc(50% - 3px),var(--twine) calc(50% - 3px) calc(50% - 1px),#b79e72 calc(50% - 1px) calc(50% + 1px),var(--twine) calc(50% + 1px) calc(50% + 3px),transparent calc(50% + 3px)),
   repeating-linear-gradient(17deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px),
   repeating-linear-gradient(-31deg,rgba(0,0,0,.05) 0 1px,transparent 1px 5px),
   linear-gradient(160deg,var(--kraft),var(--kraft-d));box-shadow:0 10px 18px -6px rgba(0,0,0,.6)}
.face--back span{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-8deg);font:600 calc(var(--u) * 4.2)/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(60,35,15,.55);text-align:center;white-space:nowrap}

/* cover = the wall calendar as-is (same proportions as .cal__pic/.cal__m/.cal__d/.cal__s) */
.cal__pic{display:block;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 4);overflow:hidden;margin-bottom:calc(var(--u) * 6)}
.cal__pic img{width:100%;height:100%;display:block}
.cal__m{font:600 calc(var(--u) * 10)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-top:calc(var(--u) * 2)}
.cal__d{font:500 calc(var(--u) * 50)/1 var(--serif);margin:calc(var(--u) * 4) 0 calc(var(--u) * 2)}
.cal__s{font:italic calc(var(--u) * 12)/1.1 var(--serif);color:#6b5a40;text-align:center}

/* month pages */
.mo__pic{position:relative;width:100%;aspect-ratio:11/7;border-radius:calc(var(--u) * 1.5);overflow:hidden;background:#d8ccb4;box-shadow:inset 0 0 0 1px rgba(59,42,26,.15)}
.mo__pic canvas{display:block;width:100%;height:100%}
.mo__soon{position:absolute;left:calc(var(--u) * 2.5);bottom:calc(var(--u) * 2.5);padding:calc(var(--u) * 1) calc(var(--u) * 2.2);font:600 calc(var(--u) * 3.1)/1.1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#3b2a1a;background:linear-gradient(160deg,#d7b483,#c49a66);border-radius:1px;box-shadow:0 1px 3px rgba(0,0,0,.35);transform:rotate(-2deg)}
.mo__soon--solo{position:static;transform:none;margin:auto}
.mo__cap{font:italic calc(var(--u) * 3.8)/1.2 var(--serif);color:#6b5a40;margin:calc(var(--u) * 1.4) 0 0;text-align:center}
.mo__y{margin-top:calc(var(--u) * 4.5)!important;font-size:calc(var(--u) * 6)!important}
.mo__name{font:500 calc(var(--u) * 17)/1 var(--serif);margin:calc(var(--u) * 1.5) 0 calc(var(--u) * 1);letter-spacing:-.01em}
.mo .cal__s{font-size:calc(var(--u) * 6)}
.grid{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:calc(var(--u) * 3);font:500 calc(var(--u) * 4.3)/1 var(--sans);font-variant-numeric:tabular-nums;color:#3b2a1a}
.grid th{font:600 calc(var(--u) * 3)/1 var(--sans);letter-spacing:.1em;color:#8a7658;padding-bottom:calc(var(--u) * 1.6)}
.grid td{text-align:center;height:calc(var(--u) * 6.1);border-top:1px solid rgba(59,42,26,.12)}
.grid td.hol{color:var(--red);font-weight:700}
.grid td.sun{color:#7a6446}
.mo__hol{margin:auto 0 0;min-height:calc(var(--u) * 4);font:600 calc(var(--u) * 2.8)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-align:center}

/* the order page (after December) */
.end{justify-content:center;text-align:center;gap:calc(var(--u) * 2)}
.end__k{font:600 calc(var(--u) * 4)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0}
.end__h{font:500 calc(var(--u) * 13)/1.02 var(--serif);margin:0;letter-spacing:-.015em}
.end__p{font:italic calc(var(--u) * 5.6)/1.3 var(--serif);color:#6b5a40;margin:0 calc(var(--u) * 2)}
.end__price{font:500 calc(var(--u) * 10)/1 var(--serif);margin:calc(var(--u) * 2) 0 0}
.end .parcel{font-size:calc(var(--u) * 4);margin-top:calc(var(--u) * 2)}
.end__note{font:calc(var(--u) * 3.3)/1.4 var(--sans);color:#6b5a40;margin:calc(var(--u) * 2) calc(var(--u) * 3) 0}
.end__note a{color:var(--red)}

/* parcel button: kraft paper, twine tie, a stamp */
.parcel{position:relative;display:inline-flex;align-items:center;gap:.7em;min-height:46px;padding:.75em 1.15em .75em 2.1em;border:0;border-radius:3px;cursor:pointer;text-decoration:none;
  font:600 1em/1.15 var(--sans);letter-spacing:.01em;color:#2a1a0e;
  background:
   linear-gradient(90deg,transparent .85em,var(--twine) .85em 1.0em,#b79e72 1.0em 1.15em,var(--twine) 1.15em 1.3em,transparent 1.3em),
   repeating-linear-gradient(17deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),
   linear-gradient(160deg,#d7b483,var(--kraft));
  box-shadow:0 8px 18px -8px rgba(0,0,0,.65),inset 0 0 0 1px rgba(60,35,15,.25);transition:transform .3s var(--ease),box-shadow .3s}
.parcel:hover{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 12px 24px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(60,35,15,.3)}
.parcel__stamp{display:inline-grid;place-items:center;min-width:3.2em;padding:.35em .4em;font:600 .78em/1 var(--sans);color:var(--red);background:#f4ecdc;border:2px dotted var(--kraft);outline:1px solid #f4ecdc;transform:rotate(3deg)}
.parcel--float{position:fixed;z-index:50;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));font-size:.88rem;min-height:44px}

/* controls under the calendar */
.cp-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px}
.cp-arrow{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(243,196,122,.55);background:rgba(20,12,8,.62);color:#f3c47a;cursor:pointer;font-size:1.25rem;line-height:1;transition:border-color .3s,box-shadow .3s,opacity .3s}
.cp-arrow:hover:not(:disabled){border-color:#f3c47a;box-shadow:0 0 0 4px rgba(243,196,122,.15)}
.cp-arrow:disabled{opacity:.35;cursor:default}
/* page label as a little postage stamp */
.cp-stamp{min-width:9.5em;text-align:center;padding:.4em .8em;font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:#f4ecdc;border:3px dotted #4d301b;outline:1px solid #f4ecdc;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.cp-hint{margin:14px 0 0;font:italic .95rem/1.3 var(--serif);color:#e6d3b3;text-align:center}
.cp-foot{text-align:center;font-size:.78rem;color:#d9b88a;opacity:.85;margin:26px 0 0}
.cp-foot .draft-tag{color:#f3c47a}

/* turning: up and over the binding, like a wall calendar */
.pg.turn-up{animation:turnUp .72s cubic-bezier(.45,.05,.3,1) forwards}
.pg.turn-down{animation:turnDown .72s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes turnUp{from{transform:rotateX(0)}to{transform:rotateX(178deg)}}
@keyframes turnDown{from{transform:rotateX(178deg)}to{transform:rotateX(0)}}
/* opacity on the faces only: opacity on .pg would flatten the 3D turn */
.pg.turn-up .face--back{animation:kraftOut .72s ease forwards}
.pg.turn-down .face--back{animation:kraftIn .72s ease forwards}
@keyframes kraftOut{0%,75%{opacity:1}100%{opacity:0}}
@keyframes kraftIn{0%{opacity:0}25%,100%{opacity:1}}
.pg.is-under .face--front::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(40,25,10,.28),transparent 60%);animation:shade .72s ease forwards;pointer-events:none}
@keyframes shade{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .calbook,.parcel,.cp-arrow{transition:none}
  .pg.turn-up{animation:fadeOut .28s ease forwards}
  .pg.turn-down{animation:fadeIn .28s ease forwards}
  .pg.is-under .face--front::after,.pg.turn-up .face--back,.pg.turn-down .face--back{display:none}
}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width:560px){

  /* phones: size the calendar so the hint clears the floating order button (was covered on 360-430px phones) */
  .calbook{--cw:min(380px,84vw,max(200px,calc((100svh - 352px) * .6067)));min-width:200px}
  .cp-ctl{margin-top:22px}
  .cp-hint{margin-top:10px}
  .parcel--float{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;max-width:calc(100vw - 20px)}
  .parcel--float:hover{transform:translateX(-50%) translateY(-2px)}

}

/* camera hand-off with the cabin: the book morphs to/from the wall calendar */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.38s}
::view-transition-group(mp-cal){animation-duration:.38s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.calbook{view-transition-name:mp-cal}
.cp-arrive body{animation:cpArrive .45s ease both}
@keyframes cpArrive{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.calbook{view-transition-name:none}::view-transition-group(root){animation-duration:.3s}}
@media (max-width:360px){.parcel--float{font-size:.78rem;padding-left:1.9em;padding-right:.8em;gap:.5em}}

/* ---------- 2027 month pages: moon, eclipses, seasons (data in calendar.js) ---------- */
.mo--sky .face--front{align-items:stretch;padding-top:calc(var(--u) * 18);padding-bottom:calc(var(--u) * 5)}
.mo--sky .mo__pic{aspect-ratio:11/5.4;flex:none}
.mo--sky .mo__cap{font-size:calc(var(--u) * 3.2);margin-top:calc(var(--u) * 1)}
.mo__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 1.5)}
.mo__tt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mo--sky .mo__y{margin-top:0!important;font-size:calc(var(--u) * 3.6)!important}
.mo--sky .mo__name{font-size:calc(var(--u) * 12.5);margin:calc(var(--u) * .8) 0 calc(var(--u) * .4)}
.mo--sky .cal__s{font-size:calc(var(--u) * 4.4);text-align:left}
.mo__minis{display:flex;gap:calc(var(--u) * 2.2);flex:none;padding-bottom:calc(var(--u) * .4)}
.mini__t{display:block;font:600 calc(var(--u) * 1.9)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8a7658;margin-bottom:calc(var(--u) * .7)}
.mini__g{display:grid;grid-template-columns:repeat(7,calc(var(--u) * 2.75));font:500 calc(var(--u) * 1.65)/calc(var(--u) * 2.15) var(--sans);font-variant-numeric:tabular-nums;color:#6b5a40;text-align:right}
.mini__g i{font-style:normal;font-weight:600;color:#8a7658}
.mo--sky .grid{margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 3.3)}
.mo--sky .grid th{font-size:calc(var(--u) * 2.4);text-align:left;padding:0 0 calc(var(--u) * 1) calc(var(--u) * .8)}
.mo--sky .grid td{--rh:calc(var(--u) * 10);position:relative;height:var(--rh);vertical-align:top;text-align:left;padding:calc(var(--u) * .7) calc(var(--u) * .8);
  border-top:1px solid rgba(59,42,26,.3);border-left:1px solid rgba(59,42,26,.1)}
.mo--sky .grid--6 td{--rh:calc(var(--u) * 8.4)}
.mo--sky .grid td:first-child{border-left:0}
.mo--sky .grid tr:last-child td{border-bottom:1px solid rgba(59,42,26,.3)}
.mo--sky .grid td.x{background:rgba(59,42,26,.035)}
.mo--sky .grid td .d{display:block;line-height:1}
/* moon glyphs: filled = new moon, ring = full moon, red ring = eclipse */
.mn{position:absolute;top:calc(var(--u) * .8);right:calc(var(--u) * .8);width:calc(var(--u) * 2.5);height:calc(var(--u) * 2.5);border-radius:50%;box-sizing:border-box}
.mn--n{background:#3b2a1a}
.mn--f{background:#f7f0e2;border:calc(var(--u) * .42) solid #3b2a1a}
.mn--n.mn--ecl{box-shadow:0 0 0 calc(var(--u) * .35) #f4ecdc,0 0 0 calc(var(--u) * .75) var(--red)}
.mn--f.mn--ecl{border-color:var(--red);background:radial-gradient(circle at 35% 40%,#f7f0e2 40%,#d9c4b0);box-shadow:0 0 0 calc(var(--u) * .3) rgba(155,42,34,.25)}
.mt{position:absolute;top:calc(var(--u) * 3.8);right:calc(var(--u) * .5);font:500 calc(var(--u) * 2.05)/1 var(--sans);font-variant-numeric:tabular-nums;color:#6b5a40;white-space:nowrap;letter-spacing:-.01em}
.lb{position:absolute;left:calc(var(--u) * .8);right:calc(var(--u) * .4);bottom:calc(var(--u) * .6);font:italic 500 calc(var(--u) * 2.15)/1.02 var(--serif);color:#7a6446}
.lb--red{color:var(--red)}
.mo--sky .grid td.hol .lb{font-weight:500}
.mo__ft{margin-top:auto;padding-top:calc(var(--u) * 1.6)}
.mo__key{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * .6) calc(var(--u) * 2.2);margin:0;font:500 calc(var(--u) * 2)/1.25 var(--sans);color:#6b5a40}
.mo__key .k{display:inline-flex;align-items:center;gap:calc(var(--u) * .8)}
.mo__key .k--tz{font-style:italic;font-family:var(--serif);font-size:calc(var(--u) * 2.3)}
.mo__key .mn{position:static;width:calc(var(--u) * 2);height:calc(var(--u) * 2)}
.mo__key .mn--f{border-width:calc(var(--u) * .35)}
.mo__ecl{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 2.4);margin-top:calc(var(--u) * 1.3)}
.mo__ecl:has(.mo__en:only-child){grid-template-columns:1fr}
.mo__en{margin:0;padding-left:calc(var(--u) * 1.3);border-left:calc(var(--u) * .45) solid var(--red);font:calc(var(--u) * 2.5)/1.22 var(--serif);color:#3b2a1a}
.mo__en b{display:block;font:600 calc(var(--u) * 1.9)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:calc(var(--u) * .3)}
.mo--sky .mo__hol{margin-top:calc(var(--u) * 1.3);min-height:0;text-align:left;font-size:calc(var(--u) * 2.3)}
.mo--sky .mo__hol:empty{display:none}

/* the month's moon and sky in readable text, under the book */
.cp-sky{width:min(440px,92vw);margin:18px auto 0;padding:14px 18px 12px;border-radius:6px;background:rgba(20,12,8,.5);border:1px solid rgba(243,196,122,.25);color:#efe2c8}
.cp-sky[hidden]{display:none}
.cp-sky__h{margin:0 0 6px;font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#f3c47a}
.cp-sky__l{list-style:none;margin:0;padding:0;font:.98rem/1.4 var(--serif)}
.cp-sky__l li{padding:4px 0;border-top:1px solid rgba(243,196,122,.12)}
.cp-sky__l li:first-child{border-top:0}
.cp-sky__l b{font:600 .8rem/1 var(--sans);letter-spacing:.02em;color:#f3c47a;margin-right:.35em;white-space:nowrap}
.cp-sky__n{margin:6px 0 0;font:italic .85rem/1.3 var(--serif);color:#cdb894}
.mo--sky .grid{flex:1 1 auto}
.mo--sky .mo__ft{margin-top:0}
.lb{font-size:calc(var(--u) * 2.45);line-height:1;color:#5e4c34;letter-spacing:-.01em}
.mt{font-size:calc(var(--u) * 2.2)}
.lb.lb--red{color:var(--red)}
.mo__key .mn--ecl{margin:0 calc(var(--u) * .5)}
/* pre-order wording on the order buttons */
.parcel__txt{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.parcel__ship{font:500 .74em/1.2 var(--sans);letter-spacing:.04em;opacity:.85;margin-top:.25em}