/* =========================================================== the ground */
.wash{
  position:fixed;inset:0;pointer-events:none;
  background:url(../img/atmos/bg-wash.webp) center top / cover no-repeat;
  opacity:.5;
}
.wash:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(237,232,221,.52) 0%,rgba(237,232,221,.34) 26%,rgba(237,232,221,.62) 64%,var(--paper) 92%);
}
.botany{
  position:fixed;bottom:0;width:clamp(150px,15vw,268px);
  opacity:.62;pointer-events:none;user-select:none;
  mix-blend-mode:multiply;
}
.botany.l{left:clamp(-46px,-1.4vw,0px);bottom:-1%}
.botany.r{right:clamp(-34px,-.6vw,8px);bottom:-3%;width:clamp(126px,12vw,214px)}
@media (max-width:1000px){.botany{display:none}}

/* the whole app sits above the painted ground */
.app{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column}
.main{flex:1 1 auto}
/* <main> ships empty and the hash router only fills it once the module graph
   and the catalogue have landed. Until then this column is exactly one screen
   with a zero-height middle, so the footer is laid out on the first screen and
   then jumps the height of the hero when the view paints: 0.44 CLS on desktop,
   0.89 on a phone. Reserving the screen the view is about to fill removes it. */
.main:empty{min-height:100svh}

/* ============================================================== header ==
   The nav is the only thing on the page that has to be read before anyone
   has decided to look at anything, so it is set at label size in full ink
   with a rule under it, not at caption size in grey. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding-inline:var(--gut);
  padding-top:env(safe-area-inset-top,0px);
  transition:transform var(--t-mid) var(--e-out);
}
.hdr:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(241,237,228,.97),rgba(241,237,228,.86) 58%,rgba(241,237,228,0));
  -webkit-backdrop-filter:blur(14px) saturate(.96);backdrop-filter:blur(14px) saturate(.96);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);
  mask-image:linear-gradient(180deg,#000 60%,transparent);
  opacity:.95;transition:opacity var(--t-mid) var(--e-out);
}
.hdr-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--hdr);max-width:1560px;margin-inline:auto;
  transition:height var(--t-mid) var(--e-out);
}
.hdr:after{
  content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;
  background:var(--hair);transform:scaleX(0);transform-origin:center;
  transition:transform .5s var(--e-out);
}
.hdr.is-stuck .hdr-in{height:calc(var(--hdr) - 16px)}
.hdr.is-stuck:after{transform:scaleX(1)}
.hdr.is-hidden{transform:translate3d(0,-102%,0)}

.mark{
  justify-self:center;display:grid;justify-items:center;gap:3px;line-height:1;
  transition:transform var(--t-mid) var(--e-out);transform-origin:center top;
}
.hdr.is-stuck .mark{transform:scale(.92)}
.mark-word{
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.1vw,28px);letter-spacing:.30em;text-indent:.30em;
  white-space:nowrap;
}
.mark-sub{
  font-size:9px;letter-spacing:var(--tr-wide);text-indent:var(--tr-wide);
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
@media (max-width:760px){ .mark-sub{display:none} }

.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.nav-r{justify-self:end;justify-content:flex-end}
.nav-desk{display:contents}
@media (max-width:960px){ .nav-desk{display:none} }

/* A nav item.

   These are the only words on the page anybody has to read before they have
   decided to look at anything, and they were set at 12.5px over a rule at
   28% opacity, which is fine print. Bigger, in full ink, on a rule that is
   already drawn, with a gold one that wipes across it, and the word itself
   rolls over to a second copy of itself so the press has an answer before
   the page even changes. */
.navlink{
  position:relative;display:inline-flex;align-items:center;
  min-height:42px;padding:0 3px;
  font-size:13.5px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
  transition:color var(--t-fast) var(--e-out);
}
.nl-roll{
  position:relative;display:block;overflow:hidden;
  height:1.24em;line-height:1.24em;
}
.nl-roll b{
  display:block;font-weight:inherit;
  transition:transform .46s var(--e-out);
}
.nl-roll b+b{position:absolute;left:0;top:100%;width:100%;color:var(--gold-deep)}
.navlink:focus-visible .nl-roll b{transform:translateY(-100%)}
@media (hover:hover){ .navlink:hover .nl-roll b{transform:translateY(-100%)} }
/* the rule under it: one hairline always there, one gold one that wipes */
.navlink:before,.navlink:after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
}
.navlink:before{background:var(--ink);opacity:.34}
.navlink:after{
  background:var(--gold);transform:scaleX(0);transform-origin:left center;
  transition:transform .46s var(--e-out);
}
.navlink:focus-visible:after{transform:scaleX(1)}
@media (hover:hover){ .navlink:hover:after{transform:scaleX(1)} }
/* the mark for where you are is the gold rule under the word, drawn and
   left drawn, plus a mark in the margin. The word itself stays at full ink,
   because a nav item that gets paler when you land on it is the wrong way
   round. */
.navlink[aria-current="page"]{color:var(--ink)}
.navlink[aria-current="page"]:after{transform:scaleX(1)}
.navlink[aria-current="page"]:before{opacity:0}
@media (prefers-reduced-motion:reduce){
  .nl-roll b,.navlink:after{transition:none}
}

/* the bag is a control, not a glyph: it says what it is and how much is in it */
.bagbtn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  min-height:42px;padding:0 16px 0 13px;
  border:1px solid var(--hair);border-radius:999px;
  background-color:rgba(252,249,242,.5);
  font-size:11.5px;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--ink);
  transition:border-color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.bagbtn{overflow:hidden}
@media (hover:hover){
  .bagbtn:hover{border-color:var(--ink);background-color:rgba(255,253,247,.96)}
}
.bagbtn:active{transform:scale(.96)}
.bagbtn svg{width:18px;height:18px;flex:none;
  transition:transform .4s var(--e-back)}
@media (hover:hover){ .bagbtn:hover svg{transform:translateY(-1px) rotate(-4deg)} }
/* a bar of light crosses the bag when a piece is set aside */
.bag-sheen{
  position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,252,240,.85),rgba(255,255,255,0));
  transform:translateX(-120%) skewX(-14deg);pointer-events:none;opacity:0;
}
.bagbtn.is-bumped .bag-sheen{animation:bag-sheen .62s var(--e-out)}
@keyframes bag-sheen{
  0%{opacity:0;transform:translateX(-120%) skewX(-14deg)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-14deg)}
}
.bagbtn .bag-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--gold);color:#fff;
  font-size:10px;letter-spacing:.02em;
  transform:scale(0);transform-origin:center;
  transition:transform .34s var(--e-back);
  margin-right:-4px;
}
.bagbtn.has-items .bag-n{transform:scale(1)}
.bagbtn.is-bumped{animation:bag-bump .5s var(--e-out)}
@keyframes bag-bump{
  0%{transform:none} 28%{transform:translateY(-5px) scale(1.05)}
  55%{transform:translateY(1px) scale(.98)} 100%{transform:none}
}
@media (max-width:960px){
  .bagbtn{gap:0;padding:0;width:44px;min-height:44px;justify-content:center;
    border-color:transparent;background-color:transparent}
  .bagbtn .bag-word{display:none}
  .bagbtn svg{width:21px;height:21px}
  .bagbtn .bag-n{position:absolute;top:1px;right:0;margin:0;min-width:18px;height:18px;
    font-size:9.5px;padding:0 5px}
}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;color:var(--ink-2);
  transition:color var(--t-fast) var(--e-out);
}
@media (hover:hover){ .icon-btn:hover{color:var(--ink)} }
.icon-btn svg{width:19px;height:19px}

.burger{display:none;width:44px;height:44px;margin-left:-11px;
  align-items:center;justify-content:center}
.burger span{display:block;width:23px;height:1.6px;border-radius:1px;background:var(--ink);
  position:relative;
  transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast)}
.burger span:before,.burger span:after{
  content:"";position:absolute;left:0;width:23px;height:1.6px;border-radius:1px;background:var(--ink);
  transition:transform var(--t-mid) var(--e-out),width var(--t-mid) var(--e-out)}
.burger span:before{top:-7px}
.burger span:after{top:7px;width:15px}
@media (hover:hover){ .burger:hover span:after{width:23px} }
.burger:active{transform:scale(.9)}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span:before{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){ .burger{display:inline-flex} }

/* ---------------------------------------------------------- mobile nav */
.menu{
  position:fixed;inset:0;z-index:590;
  background:var(--paper);
  padding:calc(var(--hdr) + 26px) var(--gut) 40px;
  display:flex;flex-direction:column;
  transform:translate3d(0,-100%,0);
  transition:transform .56s var(--e-soft);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;
}
.menu:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../img/atmos/bg-wash.webp) center / cover no-repeat;opacity:.5;
}
body.menu-open .menu{transform:none;visibility:visible}
.menu-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.menu-link{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--hair);
  font-family:var(--display);font-size:30px;font-weight:300;
  opacity:0;transform:translate3d(0,16px,0);
}
body.menu-open .menu-link{
  opacity:1;transform:none;
  transition:opacity .5s var(--e-out) calc(.14s + var(--i,0) * .055s),
             transform .5s var(--e-out) calc(.14s + var(--i,0) * .055s);
}
.menu-link i{font-style:normal;font-family:var(--sans);font-size:11.5px;
  letter-spacing:var(--tr-caps);color:var(--ink-3)}
.menu-link[aria-current="page"]{color:var(--gold-deep)}
.menu-link[aria-current="page"] i{color:var(--gold-deep)}
.menu-link[aria-current="page"]:before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
  margin-right:-4px;align-self:center;
}
.menu-foot{margin-top:auto;padding-top:34px}

/* =============================================================== loader ==
   The loader is not a screen in front of the carnet, it IS the carnet, shut.
   It is measured onto the right half of the spread that is already laid out
   behind it, so when the ground dissolves the closed book is sitting exactly
   where the open one will be. Then it opens on its spine: the cover sweeps
   left carrying the left page on its back, and the real book unfolds out of
   the gutter underneath it. The last fade swaps two identical pages. */
.loader{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;
  background-color:var(--paper);
  transition:background-color .38s var(--e-out),opacity .3s var(--e-out),visibility .3s;
}
.loader:before{
  content:"";position:absolute;inset:0;
  background:url(../img/atmos/bg-wash.webp) center / cover no-repeat;opacity:.72;
  transition:opacity .38s var(--e-out);
}
/* the ground goes first, so the desk it was hiding is already there */
.loader.is-clear{background-color:rgba(237,232,221,0);pointer-events:none}
.loader.is-clear:before{opacity:0}
.loader.is-gone{opacity:0;visibility:hidden;pointer-events:none}

.loader-in{
  position:relative;z-index:1;display:grid;justify-items:center;gap:30px;
  padding-inline:24px;perspective:1500px;perspective-origin:50% 46%;
}
.loader-meter{display:grid;justify-items:center;gap:11px;
  transition:opacity .3s var(--e-out)}
.loader.is-clear .loader-meter{opacity:0}

/* the closed carnet.

   Two elements, not one. The pan carries the book's own movement, with no
   transition on it at all, so it can be re-measured every frame while the
   camera slides under it on a phone. The cover carries the swing. Put both
   on one element and each new measurement re-targets a 620ms transition,
   and the cover trails the book it is supposed to be part of. */
.cover-pan{
  position:relative;transform-style:preserve-3d;
  transform:translate3d(var(--cdx,0px),var(--cdy,0px),0);
}
/* The shape it is about to become. A page of this carnet is 1.129 to 1, and
   this used to be 0.75 to 1, so the cover changed shape the moment it was
   measured onto the book. It is only ever seen unfitted where there is no
   book to measure onto. */
.cover{
  position:relative;width:min(376px,92vw);aspect-ratio:1.129;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform .62s cubic-bezier(.58,.03,.22,1);
  will-change:transform;
}
.loader.is-open .cover{transform:rotateY(-180deg)}

/* Four beats, and each one has to be legible on its own.

   Shut, the carnet sits in the middle of the desk, like anything you were
   about to pick up: that is the whole loading screen, and on a slow line it
   is what anyone is looking at. The ground then dissolves out from under it.
   Only then does it slide onto its spine, and only then does it open. Sliding
   and clearing at the same time left a book parked off to one side with a
   progress bar beside it, which reads as a layout that went wrong. */
.loader.is-fitted .cover{
  transform:translateX(var(--cshift,0px)) rotateY(0deg);
  transition:none;
}
.loader.is-fitted.is-armed .cover{transition:transform .5s cubic-bezier(.5,.02,.2,1)}
.loader.is-fitted.is-set .cover{transform:translateX(0) rotateY(0deg)}
.loader.is-fitted.is-open .cover{
  transform:translateX(0) rotateY(-180deg);
  transition:transform .62s cubic-bezier(.58,.03,.22,1);
}
.cover-face,.cover-back{
  position:absolute;inset:0;border-radius:2px 5px 5px 2px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-repeat:no-repeat;
}
.cover-face{
  background-color:#e0d7c4;
  background-image:url(../img/atmos/paper.webp);
  background-size:cover;
  box-shadow:
    inset 0 0 0 1px rgba(88,68,42,.18),
    inset 6px 0 14px -7px rgba(60,44,24,.5),
    0 2px 4px rgba(58,44,26,.2),
    0 20px 38px rgba(58,44,26,.24),
    0 48px 78px rgba(58,44,26,.15);
  display:grid;place-items:center;
}
/* the back of the cover carries the left page, so when it lands flat it is
   already showing what is underneath it */
.cover-back{
  transform:rotateY(180deg);
  background-color:#f3efe6;
  background-size:cover;
}
.loader.is-fitted .cover-back{border-radius:2px}
.cover-frame{
  position:absolute;inset:6.2%;border:1px solid rgba(166,124,69,.5);border-radius:2px;
}
.cover-frame:after{content:"";position:absolute;inset:5px;border:1px solid rgba(166,124,69,.24)}
.cover-mark{display:grid;justify-items:center;gap:9px;text-align:center;padding-inline:18px}
.cover-word{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.34em;text-indent:.34em;
  /* the highlights in this sweep used to go paler than the cover, so the
     last letter of the imprint vanished into the paper */
  background:linear-gradient(150deg,#7d5a2c 0%,#c9a463 26%,#9a7440 48%,#d0b077 68%,#77551f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cover-sub{font-size:8.5px;letter-spacing:var(--tr-wide);text-indent:var(--tr-wide);
  text-transform:uppercase;color:rgba(96,74,46,.8)}
.cover-est{margin-top:10px;font-size:8.5px;letter-spacing:.4em;text-indent:.4em;
  text-transform:uppercase;color:rgba(96,74,46,.58)}
.cover-carnet{
  position:absolute;left:0;right:0;bottom:11%;text-align:center;
  font-size:9px;letter-spacing:.36em;text-indent:.36em;
  text-transform:uppercase;color:rgba(96,74,46,.62);
}

/* Once it is measured onto the book, the cover is only as big as half that
   spread, which on a phone is about a hundred and seventy pixels. Its type has
   to be set off its own width or the imprint runs over the frame, and the two
   smallest lines simply come off. */
.loader.is-fitted .cover-word{font-size:clamp(12px,calc(var(--cw) * .082),34px);
  letter-spacing:.3em;text-indent:.3em}
.loader.is-fitted .cover-sub{font-size:clamp(5.5px,calc(var(--cw) * .0215),9px)}
.loader.is-fitted .cover-est,
.loader.is-fitted .cover-carnet{font-size:clamp(5.5px,calc(var(--cw) * .0215),9px)}
.loader.is-fitted .cover-mark{gap:calc(var(--cw) * .022);padding-inline:8%}
.loader.is-fitted .cover-est{margin-top:calc(var(--cw) * .026)}
.loader.is-fitted .cover-frame{inset:5.5%}
@media (max-width:760px){
  .loader.is-fitted .cover-est,.loader.is-fitted .cover-carnet{display:none}
  /* Half a page is eighty pixels here, not three hundred, and a short move
     that takes as long as a long one reads as a pause rather than a beat. */
  .loader.is-fitted.is-armed .cover{transition:transform .34s cubic-bezier(.5,.02,.2,1)}
}

/* measured onto the book: --cx is the gutter, which is also the spine */
.loader.is-fitted .loader-in{
  position:absolute;inset:0;display:block;padding:0;
  perspective:1900px;perspective-origin:var(--cpx,50%) var(--cpy,46%);
}
.loader.is-fitted .cover-pan{
  position:absolute;left:var(--cx);top:var(--cy);
  width:var(--cw);height:var(--ch);
}
.loader.is-fitted .cover{
  position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;
}
.loader.is-fitted .loader-meter{
  position:absolute;left:0;right:0;
  top:calc(var(--cy) + var(--ch) + clamp(22px,4vh,44px));
}

.loader-bar{position:relative;width:min(230px,54vw);height:1px;background:var(--hair);overflow:hidden}
.loader-bar i{
  position:absolute;inset:0;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .32s var(--e-out);
}
.loader-pct{font-size:10.5px;letter-spacing:var(--tr-caps);color:var(--ink-3)}
.loader-pct:after{content:"%";margin-left:2px}
@media (prefers-reduced-motion:reduce){
  .cover{transition:none}
  .loader.is-open .cover{transform:none;opacity:0}
}

/* ==================================================== route transition */
.veil{position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden}
.veil-sheet{
  position:absolute;top:-4%;bottom:-4%;left:-6%;right:-6%;
  background-color:var(--paper);
  background-image:url(../img/atmos/paper.webp);
  background-size:cover;
  box-shadow:-24px 0 46px rgba(58,44,26,.14);
  transform:translate3d(112%,0,0);
}
/* A second sheet, a breath behind the first and a shade darker at its edge.
   One sheet reads as a wipe; two read as paper being laid across the desk. */
.veil-sheet.two{
  background-image:none;background-color:rgba(216,208,192,.55);
  box-shadow:-18px 0 34px rgba(58,44,26,.1);
}
/* the back sheet leads, so its edge shows from under the front one */
.veil.is-in .veil-sheet{transform:translate3d(0,0,0);
  transition:transform .32s cubic-bezier(.5,0,.3,1) .055s}
.veil.is-in .veil-sheet.two{transition-delay:0s}
.veil.is-out .veil-sheet{transform:translate3d(-112%,0,0);
  transition:transform .4s cubic-bezier(.4,.05,.2,1)}
.veil.is-out .veil-sheet.two{transition-duration:.34s}
@media (prefers-reduced-motion:reduce){
  .veil-sheet{transition:none!important;display:none}
}
/* the view itself lifts in under the sheet */
.view{animation:view-in .62s var(--e-out) both}
.view.is-first{animation:none}
@keyframes view-in{from{opacity:0;transform:translate3d(0,14px,0)}}
@media (prefers-reduced-motion:reduce){ .view{animation:none} }

/* ============================================================== drawer */
.scrim{
  position:fixed;inset:0;z-index:700;background:rgba(40,33,24,.34);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .42s var(--e-out),visibility .42s;
}
body.drawer-open .scrim{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:800;
  width:min(432px,100vw);
  background-color:var(--paper-lift);
  display:flex;flex-direction:column;
  transform:translate3d(101%,0,0);
  transition:transform .52s var(--e-soft);
  box-shadow:-30px 0 70px rgba(58,44,26,.18);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body.drawer-open .drawer{transform:none}
.drawer:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../img/atmos/paper.webp) center / cover no-repeat;opacity:.5;
}
.drawer-hd{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:24px var(--gut) 18px;border-bottom:1px solid var(--hair);
}
.drawer-body{position:relative;z-index:1;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:6px var(--gut) 18px}
.drawer-foot{position:relative;z-index:1;border-top:1px solid var(--hair);padding:18px var(--gut) 22px}

/* free shipping meter */
.meter{margin-bottom:16px}
.meter-track{height:2px;background:var(--hair);overflow:hidden;margin-top:9px}
.meter-track i{display:block;height:100%;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .7s var(--e-out)}

/* a cart line */
.line{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;
  padding:18px 0;border-bottom:1px solid var(--hair-soft);
  animation:line-in .5s var(--e-out) both;
  animation-delay:calc(var(--i,0) * .06s);
}
@keyframes line-in{from{opacity:0;transform:translateX(14px)}}
@media (prefers-reduced-motion:reduce){ .line{animation:none} }
.line-fig img{transition:transform .6s var(--e-out)}
@media (hover:hover){ .line:hover .line-fig img{transform:scale(1.06)} }
.line>*{min-width:0}
.line-fig{
  aspect-ratio:1;background-color:var(--paper);border-radius:2px;overflow:hidden;
  display:grid;place-items:center;padding:6px;
}
.line-fig img{width:100%;height:100%;object-fit:contain;max-height:100%}
.line-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.line-name{font-family:var(--display);font-size:21px;font-weight:400;line-height:1.2}
/* The cart line's lead time is written inline in views/checkout.js as
   color:var(--gold), and --gold is a rule colour: 3.1:1 on this ground, which
   a 12px line of type cannot live at. Re-pointing the token for this element
   fixes the rendered colour from here; the honest fix is for checkout.js:94 to
   ask for --gold-deep, and this override can go when it does. */
.line-meta{font-size:12px;color:var(--ink-3);letter-spacing:.03em;margin-top:3px}
.line-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.line.is-leaving{
  overflow:hidden;
  animation:line-out .38s var(--e-out) forwards;
}
@keyframes line-out{
  to{opacity:0;transform:translateX(26px);max-height:0;padding-top:0;padding-bottom:0;border-color:transparent}
}

.qty{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:2px}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);
  transition:background-color var(--t-fast),color var(--t-fast)}
@media (hover:hover){
  .qty button:hover:not([disabled]){background-color:var(--paper-deep);color:var(--ink)}
}
.qty button[disabled]{opacity:.3;cursor:default}
.qty output{min-width:30px;text-align:center;font-size:13px}

.empty{display:grid;justify-items:center;gap:20px;text-align:center;padding:56px 0}

/* ================================================== add to bag flight */
.fly{
  position:fixed;z-index:1000;pointer-events:none;
  border-radius:50%;overflow:hidden;background-color:var(--paper-lift);
  box-shadow:0 8px 24px rgba(58,44,26,.24);
  display:grid;place-items:center;padding:7px;
}
.fly img{width:100%;height:100%;object-fit:contain}

/* =============================================================== toast */
.toasts{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:1100;
  display:grid;gap:8px;justify-items:center;width:max-content;max-width:calc(100vw - 32px);
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;border-radius:2px;
  background-color:var(--ink);color:var(--paper);
  font-size:12px;letter-spacing:.05em;
  box-shadow:0 14px 34px rgba(40,32,20,.3);
  animation:toast-in .42s var(--e-back) both;
}
.toast.is-out{animation:toast-out .3s var(--e-out) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}
.toast b{font-weight:400;color:var(--gold-lift)}

/* ============================================================== footer */
.ftr{position:relative;z-index:1;margin-top:var(--sec);
  border-top:1px solid var(--hair);padding-top:clamp(48px,7vh,80px)}
.ftr-grid{
  display:grid;gap:clamp(30px,5vw,56px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
}
.ftr-grid>*{min-width:0}
@media (max-width:900px){ .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:560px){ .ftr-grid{grid-template-columns:minmax(0,1fr)} }
.ftr h4{font-size:11.5px;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin-bottom:16px}
.ftr li+li{margin-top:9px}
/* Nine pixels between fourteen point links is a thirty six pixel row, and a
   thumb wants forty four. The rows open up rather than the type growing, so
   the footer still reads as a list and each link owns its own band. */
@media (pointer:coarse){ .ftr li+li{margin-top:18px} }
.ftr li a{font-size:14.5px;color:var(--ink-2);transition:color var(--t-fast)}
@media (hover:hover){ .ftr li a:hover{color:var(--ink)} }
.ftr-bot{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  margin-top:clamp(40px,6vh,68px);padding-block:22px;border-top:1px solid var(--hair-soft);
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
}
.news{display:flex;gap:10px;margin-top:16px;max-width:340px}
.news .input{min-height:46px}
.news .btn{min-height:46px;padding:0 18px;flex:none}
.demo-note{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.demo-note i{width:5px;height:5px;border-radius:50%;background:var(--gold);font-style:normal}