/* Shared by every page in the preview: type, header, labels, buttons,
   accordions and footer. Page-specific layout stays in each page. */

/* Instrument Serif, SIL Open Font License — self-hosted so the page never waits on Google */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --ink:#000;
  --field:#f7f7f7;
  --rule:#e3e3e3;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad:24px;
  --head:84px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --tile-name:calc(18px + 4pt);          /* piece names under pictures: shop grid (phones) and Also Worth Keeping, always the same */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.5 var(--sans);letter-spacing:-.005em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

/* underline that appears 3px below a link on hover */
.hover-line{text-decoration:underline;text-decoration-color:rgba(0,0,0,0);text-underline-offset:6px;
  text-decoration-thickness:1px;transition:text-decoration-color .45s ease}
.hover-line:hover{text-decoration-color:currentColor}
.head .hover-line{text-underline-offset:9px}

/* ── header: no background, ever ───────────────────── */
.head{position:fixed;inset:12px 0 auto;z-index:20;height:var(--head);pointer-events:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(var(--pad) + 24px);font-size:calc(16px - 1pt)}
.head > *{pointer-events:auto}
/* each part of the nav reads what is under it: black on white or very light, white on anything darker */
.head .left,.head .logotype,.head .right{color:#000;transition:color .3s ease}
.head .on-dark{color:#fff}
/* pages with a white right-hand column (product, custom): Bag stays black over it */
@media (min-width:768px){ body.white-right .head .right.on-dark{color:#000} }          /* phones have no white column, so Bag follows the rest of the nav */
.head .left{justify-self:start;display:flex;gap:32px}
.head .right{justify-self:end;white-space:nowrap;position:relative}
/* added-to-bag toast, tucked under the Bag link */
.bag-toast{position:absolute;top:calc(100% + 16px);right:0;width:max-content;max-width:calc(100vw - 2 * var(--gutter, 16px));border-radius:10px;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 11px;
  background:#fff;color:#000;border:1px solid var(--rule);box-shadow:0 14px 40px rgba(0,0,0,.12);font-size:14px;line-height:1.35;
  white-space:nowrap;opacity:0;transform:translateX(26px);pointer-events:none;
  transition:opacity .28s ease,transform .32s cubic-bezier(.4,0,.7,.4)}          /* it slides back out the way it came */
.bag-toast.on{opacity:1;transform:none;transition:opacity .26s ease,transform .55s cubic-bezier(.2,.9,.25,1)}          /* slides in from the right */
.bag-toast img{width:46px;height:58px;object-fit:cover;border-radius:7px}
.bag-toast .price-note{color:rgba(0,0,0,.45);margin-left:7px}
.bag-toast b{display:block;font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
@media (prefers-reduced-motion:reduce){ .bag-toast,.bag-toast.on{transition:opacity .2s ease;transform:none} }
.head .right a.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:none}35%{transform:scale(1.15)}100%{transform:none}}
.head .right a{display:inline-block}
.head .desk{display:none}
.logotype{display:block;aspect-ratio:888/331;background:currentColor;
  -webkit-mask:url(img/logotype.png) center/contain no-repeat;mask:url(img/logotype.png) center/contain no-repeat}
.head .logotype{width:75px;position:relative;top:6px}

/* ── type ──────────────────────────────────────────── */
.eyebrow{font-size:15px;margin:0 0 10px}
h1{font:400 46px/1 var(--serif);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 22px}
h2{font:400 34px/1.02 var(--serif);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 28px}
.label{font-size:calc(17px - 3pt);letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.5)}
.cta{display:flex;align-items:center;justify-content:center;width:100%;height:55px;
  background:#000;color:#fff;font-size:calc(18px - 2pt);text-transform:uppercase;letter-spacing:.08em}
.todo{background:#fff4c2;padding:0 3px}

/* ── accordions: height eases open and shut ────────── */
.acc{text-align:left}
.acc-item{border-bottom:1px solid var(--rule);transition:border-color .3s ease}
.acc-item:hover{border-bottom-color:#000}
.acc-head{display:flex;width:100%;justify-content:space-between;align-items:center;
  padding:19px 0;font-size:calc(17px - 3pt);letter-spacing:.14em;text-transform:uppercase;text-align:left;color:#000}
.acc-head::after{content:"";width:10px;height:10px;flex:none;
  background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
  color:#000;opacity:.35;transition:transform .45s var(--ease),opacity .45s ease}
.acc-head:hover::after,.acc-item:hover .acc-head::after{opacity:1}
/* hovering a row lifts its text along with the rule under it */
.acc-head:hover,.acc-item:hover .acc-head{color:#000}
.acc-head:hover .n,.acc-item:hover .acc-head .n{color:rgba(0,0,0,.65)}
.acc-head{transition:padding-bottom .5s var(--ease),color .25s ease}
.acc-head .n{transition:color .25s ease}
.acc-item.open .acc-head{padding-bottom:27px}
.acc-item.open .acc-head::after{transform:rotate(90deg);
  background:linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden}
.acc-body{padding:0 0 20px;font-size:17px;line-height:1.55;opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease,transform .5s var(--ease)}
.acc-item.open .acc-body{opacity:1;transform:none;transition-delay:.08s}
.acc-body p{margin:0 0 .9em}
.acc-body p:last-child{margin:0}
.acc-body a{text-decoration:underline;text-underline-offset:3px}
.acc-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.acc-body dt{text-transform:uppercase;font-size:14px;padding-top:2px}
.acc-body dd{margin:0}
.acc-body .after-dl{margin-top:18px}

/* ── underlined fields (newsletter, contact form) ──── */
.field{display:flex;border-bottom:1.5px solid rgba(0,0,0,.25);padding:0 0 10px 18px}
.field input,.field textarea{flex:1;border:0;outline:0;font-size:18px;background:none;min-width:0;resize:none}
.field input::placeholder,.field textarea::placeholder{color:#777}

/* ── footer: brand left, links centre, newsletter right ─ */
footer{display:grid;gap:56px;align-content:end;min-height:105vh;min-height:105svh;padding:96px calc(var(--pad) + 24px) 52px;--f-size:calc(17px - 2pt)}
footer .brand{order:3}
footer .middle{order:2;display:flex;flex-direction:column;align-items:flex-start}
footer .mark{display:block;width:auto;height:38px;margin:0 0 32px}
footer .fine{margin:0;font:400 calc((32px - 5pt) * 1.2)/1.05 var(--serif);letter-spacing:.02em;text-transform:uppercase}
footer .links{display:flex;flex-wrap:wrap;gap:10px 31px;margin:0;font-size:var(--f-size)}
footer .news{order:1;max-width:460px}
footer .news p{margin:0 0 28px;font-size:var(--f-size);line-height:1.5}
footer .field{padding-left:0;border-bottom:.5px solid rgba(0,0,0,.2)}
footer .field input{opacity:.8}
footer .field input::placeholder{color:rgba(0,0,0,.35)}
footer .field input,footer .field button{font-size:var(--f-size)}
footer .field button{padding:0 0 0 18px}

@media (min-width:768px){
  :root{--pad:40px;--head:110px}
  .head .mob{display:none}
  .head .desk{display:inline}
  .head .logotype{width:125px;top:-2px}          /* 8px higher on desktop; 15% smaller than it was */
  .eyebrow{font-size:16px}
  h1{font-size:53px}
  h2{font-size:42px}
  footer{grid-template-columns:1fr auto 1fr;align-items:end;gap:40px;min-height:40vh;padding:96px calc(var(--pad) + 24px) 52px}
  footer .middle{margin-bottom:16px}
  footer .brand,footer .middle,footer .news{order:0}
  footer .middle{justify-self:center;align-items:center}
  footer .links{justify-content:center}
  footer .news{justify-self:end;width:100%;max-width:274px}
}
@media (min-width:1200px){
  h1{font-size:60px}
}

/* ── info pages ────────────────────────────────────── */
.intro{padding:calc(var(--head) + 64px) var(--pad) 0;text-align:center}
.intro p.lede{margin:0 auto;max-width:620px;font-size:17px;line-height:1.55}
.prose{margin:0 auto;max-width:620px;padding:0 var(--pad);text-align:center}
.prose p{margin:0 0 1em;font-size:17px;line-height:1.55}
.panel{margin:96px 0;background:var(--field)}
.panel img{width:100%}
.section{margin:96px 0}

/* split: imagery flush to the left edge, content pinned on the right */
.split{display:block}
.split .pics figure{margin:0;background:var(--field)}
.split .pics figure + figure{margin-top:12px}
.split .pics img{width:100%}
.split .pics figcaption{padding:14px var(--pad) 0;text-align:left;background:#fff}
.split .copy{padding:40px var(--pad) 0}
.split .copy .cta{margin:28px 0 0}
.split .copy .acc{margin-top:42px;border-top:1px solid var(--rule)}

@media (min-width:768px){
  .intro{padding-top:calc(var(--head) + 110px)}
  .panel,.section{margin:140px 0}
  .split{display:grid;grid-template-columns:minmax(0,70fr) minmax(0,30fr);gap:0 48px;margin:0 calc(var(--pad) + 24px) 0 0;align-items:start}
  .split .pics figcaption{padding-left:var(--pad)}
  .split .copy{position:sticky;top:var(--head);height:calc(100vh - var(--head));overflow-y:auto;scrollbar-width:none;
    overscroll-behavior:auto;padding:24px 0 48px;display:flex;flex-direction:column;justify-content:safe center}
  .split .copy > *{flex:none}
  .split .copy::-webkit-scrollbar{display:none}
}

/* ── emerge: blocks drift up and come into focus as they scroll in ── */
.dr-emerge{opacity:0;filter:blur(16px);transform:translateY(66px) scale(.985);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--stagger,0ms)}
.dr-emerge.is-seen{opacity:1;filter:none;transform:none}
/* accordions keep their smooth hover rule while they also scroll in */
.acc-item.dr-emerge{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),border-color .45s ease;
  transition-delay:var(--stagger,0ms),var(--stagger,0ms),var(--stagger,0ms),0ms}
@media (prefers-reduced-motion:reduce){ .dr-emerge{transition:none} }

/* ── mobile menu ───────────────────────────────────── */
/* the drawer is most of a small phone, but never wider than 360px; the page is pushed by the same amount */
:root{--drawer:min(84vw,360px)}
.menu-sheet{position:fixed;top:0;left:0;height:100vh;height:100svh;width:var(--drawer);z-index:60;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:24.8px;
  padding:0 calc(var(--pad) + 24px);transform:translateX(-100%);visibility:hidden;
  transition:transform .6s cubic-bezier(.65,0,.25,1),visibility 0s linear .6s}
.menu-sheet.open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.65,0,.25,1),visibility 0s}
.menu-sheet a{font:400 34px/1.05 var(--serif);text-transform:uppercase;color:#000}
.menu-sheet a.two-line{line-height:.98}          /* Shipping / & Returns: the two lines held close */
/* the page slides right as the menu comes in from the left edge */
body > :not(.menu-sheet):not(script):not(.dock):not(.bag-veil):not(.bag-drawer){transition:transform .6s cubic-bezier(.65,0,.25,1)}          /* the bag keeps its own timing */
html.menu-open body > :not(.menu-sheet):not(script):not(.dock){transform:translateX(var(--drawer))}
html.menu-open .dock{visibility:hidden}
html.menu-open{overflow:hidden}          /* lock the page on the root only: locking the body too made it a scrolling box of its own, which shifted the page 16px while the drawer was open */
body{overflow-x:clip}
/* opening the menu: items rise in one by one, top to bottom */
.menu-sheet.open a{animation:menu-in .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 60ms + 220ms)}
@keyframes menu-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .menu-sheet,.menu-sheet.open,body > *{transition:none} .menu-sheet.open a{animation:none} }
/* arriving from the drawer: the new page loads behind it, already pushed aside, then the drawer closes */
@media (max-width:767px){
  html.menu-arriving body > :not(.menu-sheet):not(script):not(.dock){transform:translateX(var(--drawer));transition:none}
  html.menu-arriving .menu-sheet{transform:none;visibility:visible;transition:none}
  html.menu-arriving .menu-sheet a{animation:none}
  html.menu-arriving,html.menu-arriving body{overflow:hidden}
}
.menu-sheet.instant,.menu-sheet.instant a{transition:none !important;animation:none !important}
.menu-close{position:absolute;top:28px;left:calc(var(--pad) + 24px);font-size:calc(16px - 1pt);line-height:inherit}

/* ── size picker nudge when Add to Bag is pressed without a size ── */
[data-size].need{border-color:#c8321e !important;transition:border-color .2s}

/* ── product page: the details column pushes in from the right on arrival ── */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .product .info{animation:drawer-in .55s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes drawer-in{from{transform:translateX(40%);opacity:0}to{transform:none;opacity:1}}

/* ── pages short enough for one screen: content centred, footer in view ── */
body.fit{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.fit main{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}
body.fit footer{min-height:0;padding-top:48px}

/* light grey way back to the shop, at the top of a right-hand column */
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0 0 28px;font-size:calc(16px - 1pt);color:rgba(0,0,0,.4);transition:color .2s ease}
.back:hover{color:#000}
.back{transition:color .2s ease,opacity .35s ease}
.back.gone{opacity:0;pointer-events:none}
.back-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.back:hover .back-icon{transform:translateX(-4px)}
/* desktop: it moves up into the nav row, lined up with the left edge of its column and level with Bag */
.head .back{position:absolute;top:50%;margin:0;transform:translateY(-50%)}

/* lockup trials: add ?logo=artifacts or ?logo=objects to any page address (both have their own proportions) */
.logo-artifacts .logotype,.logo-objects .logotype{aspect-ratio:294/112}
.logo-artifacts .head .logotype,.logo-objects .head .logotype{width:90px;top:6px}
@media (min-width:768px){ .logo-artifacts .head .logotype,.logo-objects .head .logotype{width:150px} }
.logo-artifacts .logotype{-webkit-mask-image:url(img/lockup-artifacts.svg);mask-image:url(img/lockup-artifacts.svg)}
.logo-objects .logotype{-webkit-mask-image:url(img/lockup-objects.svg);mask-image:url(img/lockup-objects.svg)}

/* black buttons: an arrow slides out to the right of the words on hover */
a.cta::after,button.cta::after,.next::after{content:"";width:0;height:14px;margin-left:0;opacity:0;background:currentColor;flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") left center/14px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") left center/14px 14px no-repeat;
  transition:width .35s var(--ease),margin-left .35s var(--ease),opacity .25s ease}
.cta:not([disabled]):hover::after,.next:not([disabled]):hover::after{width:14px;margin-left:10px;opacity:1}

/* phones: every title centred */
@media (max-width:767px){
  h1,h2,.eyebrow{text-align:center}
  .wall-head{justify-content:center}
}

/* phones: bigger logotype sitting a little higher; footer centred and shorter */
@media (max-width:767px){
  .head .logotype{width:92px;top:-4px}
  .head{top:-2px}          /* 8px higher, centred in the white band above the main image */
  .back{display:none}          /* no Back to Shop on phones */
  footer{min-height:95vh;min-height:95svh;text-align:center}
  footer .middle{align-items:center}
  footer .links{justify-content:center}
  footer .mark{margin-left:auto;margin-right:auto}
  footer .news{justify-self:center;margin:0 auto;width:100%}
  footer .field{text-align:left}
}

/* keyboard focus */
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.field:focus-within{border-bottom-color:#000}

/* ── phones: one gutter ────────────────────────────── */
/* text, buttons and picture grids all sit 16px from the screen edge on every page;
   pictures that run edge to edge are left alone (they are not inside these) */
@media (max-width:767px){
  :root{--gutter:16px}
  /* nothing may stick out past the screen's edge: if it does, a phone widens the whole page to fit it,
     and the centred logotype and Bag slide off to the right (it happened for a few frames as the drawer closed) */
  html,body{overflow-x:clip}
  /* Menu and Bag sit 12px inside the page gutter; the drawer's Close and its links share that same line */
  :root{--nav-inset:calc(var(--gutter) + 12px)}
  .head{padding-left:var(--nav-inset) !important;padding-right:var(--nav-inset) !important}
  /* Close sits exactly where Menu was: the header is lifted 14px on phones, so this follows it */
  /* phones: a 1px X, centred exactly where the Menu label sat. The 40px box is the tap area. */
  /* the X is a 15px stroke turned 45deg, so its shape is only 10.6px wide: the box is offset
     by half that (5.3px) so the shape's left edge lines up with the menu items, not the box's */
  .menu-close{left:calc(var(--nav-inset) - 14.7px);top:20px;width:40px;height:40px;padding:0;font-size:0;color:transparent;background:none;border:0}
  .menu-close::before,.menu-close::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1px;
    margin:-.5px 0 0 -7.5px;background:currentColor;color:#000}
  .menu-close::before{transform:rotate(45deg)}
  .menu-close::after{transform:rotate(-45deg)}
  .menu-sheet{padding-left:var(--nav-inset) !important;padding-right:var(--nav-inset) !important}
  .wall-head,.shop-wall,.inspiration-wall,.gallery,.info,.related,.opening,.prose,.steps,.history,
  .split .copy,.bag-page{padding-left:var(--gutter) !important;padding-right:var(--gutter) !important}
  /* the opening blurb sits in from the grid, on the menu and bag's own inset */
  .welcome .prose{padding-left:var(--nav-inset) !important;padding-right:var(--nav-inset) !important}
}

/* ── tablets (768–1099px): the text column keeps enough room for its titles and fields ── */
@media (min-width:768px) and (max-width:1099px){
  body .split,body .product,body .commission{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:0 32px}
}

/* ── touch screens: iPhone zooms into any field set smaller than 16px, so fields are 16px there ── */
@media (hover:none) and (pointer:coarse){
  input,textarea,select{font-size:16px !important}
}

/* ── bigger tap areas on phones, with no change to how anything looks ── */
@media (pointer:coarse){
  .head .mob,footer .field button{position:relative}
  /* .menu-close must keep position:absolute: making it relative dropped it into the sheet's
     centred column, where its top/left were ignored and it sat far below the Menu button */
  .head .mob::after,footer .field button::after{content:"";position:absolute;inset:-12px -10px}
  .menu-sheet a{padding-block:4px}
}

/* privacy, terms and refunds (Shopify hosts the policies): quiet, under the sign-up */
footer .news .legal{margin:18px 0 0;font-size:12px;letter-spacing:.02em;color:rgba(0,0,0,.5)}
footer .news .legal a{text-underline-offset:4px}

/* (no fade behind the header: the nav reads what is under it and changes colour instead; see Nav tone in site.js) */

/* ── bag lines, shared by the Bag page and the desktop bag drawer ── */
.line{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.line img{width:96px;height:132px;object-fit:cover;border-radius:6px;background:var(--field);
  box-shadow:0 18px 28px -12px rgba(0,0,0,.45),0 4px 10px -4px rgba(0,0,0,.25)}
.line .nm{font:400 26px/1 var(--serif);text-transform:uppercase;margin:0 0 6px}
.line .meta{margin:0;font-size:14px;color:rgba(0,0,0,.55)}
.qty{display:inline-flex;align-items:center;gap:14px;margin-top:14px;font-size:15px}
.qty button{width:28px;height:28px;border:1px solid var(--rule);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;padding:0 0 8px}          /* the − and + sit 4px above centre */
.qty button:hover{border-color:#000}
@media (pointer:coarse){ .qty button{position:relative} .qty button::after{content:"";position:absolute;inset:-9px} }          /* bigger tap area, same look */
.qty .remove{width:auto;height:auto;border:0;display:inline;line-height:1;border-radius:0;margin-left:18px;padding:0;font-size:13px;color:rgba(0,0,0,.5);text-decoration:underline;text-underline-offset:3px}

/* ── desktop bag drawer: slides in from the right over a soft veil ── */
.bag-veil{position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.32,.72,0,1),visibility 0s linear .7s}
.bag-veil.open{opacity:1;visibility:visible;transition:opacity .7s cubic-bezier(.32,.72,0,1),visibility 0s}
.bag-veil.closing{visibility:visible}          /* it fades out with the drawer instead of blinking off */
.bag-drawer{position:fixed;top:0;right:0;z-index:59;height:100vh;height:100svh;width:min(460px,92vw);background:#fff;
  display:flex;flex-direction:column;padding:0 calc(var(--pad) + 24px);box-shadow:-24px 0 60px -30px rgba(0,0,0,.35);
  transform:translateX(100%);visibility:hidden;transition:transform .7s cubic-bezier(.32,.72,0,1),visibility 0s linear .7s}
.bag-drawer.open{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.32,.72,0,1),visibility 0s}
.bag-drawer.closing{visibility:visible}          /* stays on screen while it slides back out */
.bag-drawer .bd-head{display:flex;justify-content:space-between;align-items:center;height:var(--head);margin-top:12px;flex:none;font-size:calc(16px - 1pt)}
.bag-drawer .bd-title{margin:0}
.bag-drawer .bd-lines{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--rule);scrollbar-width:none;padding-bottom:24px}
.bag-drawer .bd-lines::-webkit-scrollbar{display:none}
.bag-drawer .bd-foot{flex:none;padding:22px 0 calc(36px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.bag-drawer .bd-foot dl{display:grid;grid-template-columns:1fr auto;margin:0 0 10px;font-size:15px;font-weight:500}
.bag-drawer .bd-foot dd{margin:0}
.bag-drawer .bd-note{margin:0 0 20px;font-size:13px;line-height:1.5;color:rgba(0,0,0,.5)}
.bag-drawer .cta{max-width:none;width:100%}
.bag-drawer .bd-page{display:block;margin-top:14px;text-align:center;font-size:13px;color:rgba(0,0,0,.5);text-decoration:underline;text-underline-offset:3px}
.bag-drawer .bd-empty{padding-top:28px;padding-bottom:calc(36px + env(safe-area-inset-bottom))}          /* the button never sits on the very edge */
.bag-drawer .bd-empty p{margin:0 0 24px}
.bag-drawer .bd-empty .cta{max-width:none;width:100%}
html.bag-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .bag-drawer,.bag-drawer.open,.bag-veil,.bag-veil.open{transition:none} }

/* ── the nav mark: the blinking eye, drawn in the nav's own colour (a mask over currentColor, so it turns
   white over dark ground like the words beside it). It rests open, and every 5–10s, at random, blinks, or
   now and then looks around (site.js). Frames live side by side in img/eye-strip.png ── */
.head .logotype{width:auto;height:40px;aspect-ratio:135/120;-webkit-mask:url(img/eye-strip.png) no-repeat;mask:url(img/eye-strip.png) no-repeat;
  -webkit-mask-size:3400% 100%;mask-size:3400% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;top:0}
@media (max-width:767px){ .head .logotype{height:34px;top:0} }
.head .logotype.eye-blink{animation:eye-blink 350ms step-end}
.head .logotype.eye-look{animation:eye-look 4130ms step-end}
@keyframes eye-blink{0.00%{-webkit-mask-position:66.6667% 0;mask-position:66.6667% 0}20.00%{-webkit-mask-position:63.6364% 0;mask-position:63.6364% 0}51.43%{-webkit-mask-position:66.6667% 0;mask-position:66.6667% 0}74.29%{-webkit-mask-position:69.6970% 0;mask-position:69.6970% 0}100%{-webkit-mask-position:100.0000% 0;mask-position:100.0000% 0}}
@keyframes eye-look{0.00%{-webkit-mask-position:0.0000% 0;mask-position:0.0000% 0}2.91%{-webkit-mask-position:3.0303% 0;mask-position:3.0303% 0}5.81%{-webkit-mask-position:6.0606% 0;mask-position:6.0606% 0}8.47%{-webkit-mask-position:9.0909% 0;mask-position:9.0909% 0}11.38%{-webkit-mask-position:12.1212% 0;mask-position:12.1212% 0}14.29%{-webkit-mask-position:15.1515% 0;mask-position:15.1515% 0}17.19%{-webkit-mask-position:18.1818% 0;mask-position:18.1818% 0}20.10%{-webkit-mask-position:21.2121% 0;mask-position:21.2121% 0}22.76%{-webkit-mask-position:24.2424% 0;mask-position:24.2424% 0}25.67%{-webkit-mask-position:27.2727% 0;mask-position:27.2727% 0}28.57%{-webkit-mask-position:30.3030% 0;mask-position:30.3030% 0}31.48%{-webkit-mask-position:33.3333% 0;mask-position:33.3333% 0}34.38%{-webkit-mask-position:36.3636% 0;mask-position:36.3636% 0}37.05%{-webkit-mask-position:39.3939% 0;mask-position:39.3939% 0}39.95%{-webkit-mask-position:42.4242% 0;mask-position:42.4242% 0}42.86%{-webkit-mask-position:45.4545% 0;mask-position:45.4545% 0}45.76%{-webkit-mask-position:48.4848% 0;mask-position:48.4848% 0}51.33%{-webkit-mask-position:51.5152% 0;mask-position:51.5152% 0}54.24%{-webkit-mask-position:54.5455% 0;mask-position:54.5455% 0}57.14%{-webkit-mask-position:57.5758% 0;mask-position:57.5758% 0}60.05%{-webkit-mask-position:60.6061% 0;mask-position:60.6061% 0}62.71%{-webkit-mask-position:63.6364% 0;mask-position:63.6364% 0}65.62%{-webkit-mask-position:66.6667% 0;mask-position:66.6667% 0}68.52%{-webkit-mask-position:69.6970% 0;mask-position:69.6970% 0}71.43%{-webkit-mask-position:72.7273% 0;mask-position:72.7273% 0}74.33%{-webkit-mask-position:75.7576% 0;mask-position:75.7576% 0}77.00%{-webkit-mask-position:78.7879% 0;mask-position:78.7879% 0}79.90%{-webkit-mask-position:81.8182% 0;mask-position:81.8182% 0}82.81%{-webkit-mask-position:84.8485% 0;mask-position:84.8485% 0}85.71%{-webkit-mask-position:87.8788% 0;mask-position:87.8788% 0}88.62%{-webkit-mask-position:90.9091% 0;mask-position:90.9091% 0}91.28%{-webkit-mask-position:93.9394% 0;mask-position:93.9394% 0}94.19%{-webkit-mask-position:96.9697% 0;mask-position:96.9697% 0}97.09%{-webkit-mask-position:100.0000% 0;mask-position:100.0000% 0}100%{-webkit-mask-position:100.0000% 0;mask-position:100.0000% 0}}
@media (prefers-reduced-motion:reduce){ .head .logotype.eye-blink,.head .logotype.eye-look{animation:none} }

/* the drawer's contents drift in just behind it */
.bag-drawer .bd-head,.bag-drawer .bd-lines,.bag-drawer .bd-foot,.bag-drawer .bd-empty{opacity:0;transform:translateX(24px);transition:opacity .4s ease,transform .6s cubic-bezier(.32,.72,0,1)}
.bag-drawer.open .bd-head,.bag-drawer.open .bd-lines,.bag-drawer.open .bd-foot,.bag-drawer.open .bd-empty{opacity:1;transform:none;transition-delay:.12s}
@media (prefers-reduced-motion:reduce){ .bag-drawer .bd-head,.bag-drawer .bd-lines,.bag-drawer .bd-foot,.bag-drawer .bd-empty{transition:none;transform:none;opacity:1} }