/** Shopify CDN: Minification failed

Line 451:0 Unexpected "}"

**/
/* ll-chrome.css (10 Oct 2026, option c "Index"). The chrome where money changes hands, in Grey Room restraint:
   header (3 + 3 words on desktop), SHOP sheet, phone menu, search sheet, the bag (half page at 50vw, one piece owns it),
   footer, the newsletter card, buttons. One ground (#F3F4F5), ink, mute, hairlines. Selected = a plain underline. */

/* ================= buttons: ink fill or a 1px light-grey outline, 8px corners, 48 tall, caps 500 ================= */
:root:not(#_) :where(.btn:not(.search-box *),.bag .cart__checkout,.nlp-go,.nl-row button[type=submit],.nf .cta){font-size:var(--c-ui);font-weight:500;letter-spacing:var(--c-ui-tr);border-radius:8px}
:root:not(#_) .btn.outline{background:transparent;color:var(--c-ink);border:1px solid #ABABAB;transition:border-color 150ms ease}
@media (hover:hover){:root:not(#_):not(#__) .btn.outline:hover{background:transparent;color:var(--c-ink);border-color:#111}}
:root:not(#_):not(#__) .btn.outline:is(:active,:focus-visible){background:transparent;color:var(--c-ink);border-color:#111}
/* the busy shimmer runs a few passes, never forever */
:root:not(#_) :where(.btn,.nlp-go,.nl-row button[type=submit])[aria-busy=true]{animation-iteration-count:6}

/* ================= header: the capsule (12 Oct night; Adam 11 Oct: "the header is still the same boring", then the Nothing
   "headphone (1)" reference: "so so so luxurious", MEMORY 82) =================
   One component on every template (MEMORY 65) and one look over every ground: a floating frosted capsule inset from the
   window's edges, translucent light grey with a background blur and a hairline rim, every mark on it ink. Nothing
   switches tone any more (hdr-tone.js is retired), so nothing changes on a scroll, a slide change or a picture's edge.
   .hdr stays the full-width band the pages already keep for the header (--hdr = the capsule's top inset + its height;
   sticky on inner pages, fixed over home's slides), and the capsule is the band's ::before:
     - the band takes no pointer, only the capsule and its controls do (the window's edges around it stay the page's)
     - the Shop sheet's panel (inside the row, z -2) drops from behind the capsule to 8px under it
     - the loaders' fades on the row and its groups (loaders.js headUp, logoArrive) never touch the capsule itself
       phones   [two lines]  [the wordmark, centred]  [search] [bag n]      50 tall (48 on its side), 12 in, 44px taps
       desktop  SHOP LATEST ABOUT  [the wordmark, centred]  SEARCH SAVED (n) BAG (n)      48 tall, 16 from the edges
   Contrast: ink #111214 on the fill over pure black is 8.5:1 (the worst ground: the film's night frames), 15:1 and up over
   the grey shop and white About. Nothing in the capsule takes a mute tone. */
:root{--cap-t:16px;--cap-x:16px;--cap-h:48px;--cap-r:12px;--cap-pad:8px;--cap-ink:#111214;
  --cap-fill:rgba(234,235,238,.74);
  --cap-rim:inset 0 0 0 1px rgba(255,255,255,.26),0 0 0 1px rgba(17,18,20,.07),0 12px 32px -20px rgba(17,18,20,.4);
  --cap-xl:max(var(--cap-x),env(safe-area-inset-left,0px));--cap-xr:max(var(--cap-x),env(safe-area-inset-right,0px));
  --hdr:calc(var(--cap-t) + var(--cap-h))}
/* wide screens (the page margin is 48 from 1680): the capsule 24 in, its words on the margin like the content under it */
@media (min-width:1680px){:root{--cap-x:24px;--cap-pad:16px}}
@media (max-width:900px){:root{--cap-t:calc(12px + env(safe-area-inset-top,0px));--cap-x:12px;--cap-h:50px;--cap-pad:4px}}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){:root{--cap-t:8px;--cap-h:48px}}

/* the band: the capsule's three groups on its centre line, the wordmark truly centred (two equal outer tracks) */
:root:not(#_):not(#__) .hdr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  align-items:center;column-gap:8px;box-sizing:border-box;height:var(--hdr);margin:0;border:0;
  padding:var(--cap-t) calc(var(--cap-xr) + var(--cap-pad)) 0 calc(var(--cap-xl) + var(--cap-pad));
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:var(--cap-ink)!important;--hl-c:var(--cap-ink);text-shadow:none!important;pointer-events:none;transition:none!important}
:root:not(#_):not(#__) .hdr>*{pointer-events:auto}
/* the capsule. Every property is pinned: the retired layers (layout-fixes, home-fixes, ed-home, ed-product, samples-world)
   still style this ::before as the old scroll fade and the home scrim. The blur is written out, never through a variable:
   WebKit computes -webkit-backdrop-filter: var(...) to none (Safari would show the glass unblurred) */
:root:not(#_):not(#__):not(#___) .hdr::before{content:""!important;display:block!important;position:absolute!important;
  top:var(--cap-t)!important;left:var(--cap-xl)!important;right:var(--cap-xr)!important;bottom:auto!important;width:auto!important;height:var(--cap-h)!important;
  z-index:-1!important;opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;
  border-radius:var(--cap-r)!important;background:var(--cap-fill)!important;box-shadow:var(--cap-rim)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4)!important;backdrop-filter:blur(20px) saturate(1.4)!important;
  -webkit-mask-image:none!important;mask-image:none!important;pointer-events:auto!important;transition:none!important}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root:not(#_):not(#__):not(#___) .hdr::before{background:rgba(234,235,238,.95)!important}
}
/* a visitor who asks for less transparency gets the same capsule, solid */
@media (prefers-reduced-transparency:reduce){
  :root:not(#_):not(#__):not(#___) .hdr::before{background:rgb(234,235,238)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
:root:not(#_):not(#__) .hdr::after{content:none!important}
:root:not(#_):not(#__) .hdr>.hdr-l{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:0;min-width:0;margin:0}
:root:not(#_):not(#__) .hdr>.logo{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;justify-content:center;height:44px;margin:0;padding:0;translate:none}
:root:not(#_):not(#__) .hdr>.hdr-r{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:0;min-width:0;margin:0}
:root:not(#_):not(#__) .hdr :is(.hdr-run,.hdr-rule){display:none!important}
/* ink everywhere on it: the old tone layers' white words, halos and drop shadows (home slides, About, 404, login, the
   password gate, the PDP's ink bands) never reach the capsule. The Shop sheet inside the row keeps its own colours. */
:root:not(#_):not(#__) .hdr :is(.hdr-l,.hdr-r,.logo,.nav,.nl,.nt,.menu-btn,.has-mega>a,.wmk,.i,[data-ht]):not(.mega *){color:var(--cap-ink)!important;--hl-c:var(--cap-ink);text-shadow:none!important;filter:none!important}
:root:not(#_):not(#__) .hdr .nl{font-family:var(--ed-font);font-size:var(--c-ui);font-weight:400;letter-spacing:var(--c-ui-tr);text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.hdr .bc{font-variant-numeric:tabular-nums}
.hdr .nl>span.nt{display:inline;white-space:pre}
/* the Index: two hairlines, an X while it is open (the morph keys on aria-expanded, so it answers the tap at once) */
:root:not(#_):not(#__) .hdr .menu-btn{display:none;position:relative;flex:none;width:44px;height:44px;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:root:not(#_):not(#__) .hdr .menu-btn .mb-l{position:absolute;left:12px;top:18px;display:block;width:20px;height:1px;margin:0;background:currentColor;box-shadow:none!important;transform:none;transition:transform .4s var(--c-enter)}
:root:not(#_):not(#__) .hdr .menu-btn .mb-l+.mb-l{top:25px}
:root:not(#_):not(#__) .hdr .menu-btn[aria-expanded=true] .mb-l{transform:translateY(3.5px) rotate(45deg)}
:root:not(#_):not(#__) .hdr .menu-btn[aria-expanded=true] .mb-l+.mb-l{transform:translateY(-3.5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){:root:not(#_):not(#__) .hdr .menu-btn .mb-l{transition:none}}

/* desktop: 3 + 3 words, ink to ink 32 (each carries 8px of tap air either side), the glyphs stay home */
@media (min-width:901px){
  :root:not(#_):not(#__) .hdr .nav{display:flex;align-items:center;gap:16px;margin:0}
  :root:not(#_):not(#__) .hdr .hdr-r{gap:16px}
  :root:not(#_):not(#__) .hdr :is(.nav .nl,.hdr-r>.nl){display:inline-flex;align-items:center;justify-content:center;min-width:0;height:44px;padding:0 8px}
  :root:not(#_):not(#__) .hdr .nl .i{display:none}
  .hdr .nl .nt{padding-bottom:3px;line-height:1.2}
  /* the bag open (the right half): the capsule draws in to the left half with the page (-25vw, the panel's curve), its
     words step out (the panel carries BAG / SAVED and CLOSE in its own capsule) and the wordmark re-centres there */
  :root:not(#_):not(#__) .hdr{transition:padding-right .5s var(--c-panel)!important}
  :root:not(#_):not(#__):not(#___) .hdr::before{transition:right .5s var(--c-panel)!important}
  /* 16 Oct (Adam: the bag is an overlay): the capsule no longer draws in while the bag is open; it stays whole under the scrim */
  /* and come back once the capsule has most of its width again, so a narrow window never shows them crowding the mark */
  :root:not(#_):not(#__) .hdr :is(.hdr-l,.hdr-r){transition:visibility 0s .3s,opacity .25s var(--c-enter) .3s}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  :root:not(#_):not(#__) .hdr{transition:none!important}
  :root:not(#_):not(#__):not(#___) .hdr::before{transition:none!important}
  :root:not(#_):not(#__) .hdr :is(.hdr-l,.hdr-r){transition:none!important}
}
/* phones: the glyphs (20px hairlines in 44px cells), the bag's count beside its glyph */
@media (max-width:900px){
  :root:not(#_):not(#__) .hdr .nav{display:none}
  :root:not(#_):not(#__) .hdr .menu-btn{display:block}
  :root:not(#_):not(#__) .hdr .hdr-r>.nl{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;margin:0;padding:0 12px}
  :root:not(#_):not(#__) .hdr .hdr-r>.hide-sm{display:none!important}
  :root:not(#_):not(#__) .hdr .nl .i{display:block;flex:none;width:20px;height:20px}
  :root:not(#_):not(#__) .hdr .hdr-srch .nt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :root:not(#_):not(#__) .hdr .hdr-bag{padding-right:10px}
  :root:not(#_):not(#__) .hdr .hdr-bag .hb-w{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :root:not(#_):not(#__) .hdr .hdr-bag .hb-p{display:none}
  /* the count on the bag's body, not its handle: the glyph's ink sits low in its 20px box */
  :root:not(#_):not(#__) .hdr .hdr-bag .bc{display:inline-block;min-width:1ch;font-size:12px;letter-spacing:0;line-height:1;text-align:left;translate:0 1.5px}
  .hdr .nl .nt::after{content:none}
}
/* the narrowest phones: search steps out (it opens from the Index's foot) so the bag never crowds the wordmark */
@media (max-width:359px){:root:not(#_):not(#__) .hdr .hdr-r>.hdr-srch{display:none}}

/* ================= the Index: the phone menu and the Shop sheet, frosted (12 Oct night) =================
   Adam: "I HATE the menu on mobile; it is so overcrowded and does not feel editorial whatsoever", and of the capsule and
   the home hero card: "I absolutely love it and want that style carried throughout the website". Both menus are one
   frosted panel that drops from the capsule: the capsule's glass, corner and side insets, 8px under it; inside, the hero
   card's grammar (hero-card.css): small mono caps, tiny line icons, a well for the latest piece, nothing large, no picture
   behind. Phones: the card, six entries, the email. Desktop (the Shop sheet): the card, the shop's contents, the archive as
   small cutouts with Notify me in place (MEMORY 71, 72).
   Motion is the stylesheet's: a short drop (opacity and 10px, 340ms in, 220ms out). app.js still owns the rest (open and
   close, the scroll lock, Escape, focus, the page made inert, the veil's tap) and still drops #mmenu / .mega and rides the
   header row by their height, which is nothing now: both are zero-height frames for their panels. Open = .is-open with
   aria-hidden=false (phones) / the trigger's aria-expanded=true (desktop); the close plays while .is-open is still set.
   Contrast: the glass at its darkest (over a black frame) is about #ADAEB0: ink 8.4:1, the mute lines (84% ink) 6.4:1; measured over the film 4.9:1 at worst for the mute words, ink 6.2:1 and up. */
.mmenu,.mega{--mn-ink:#111214;--mn-ink2:rgba(17,17,17,.82);--mn-mute:rgba(17,17,17,.84);--mn-line:rgba(17,17,17,.1);
  --mn-well:rgba(17,17,17,.065);--mn-well-on:rgba(17,17,17,.11);--mn-in:.34s;--mn-out:.22s}

/* ---- the panel: the capsule's glass (the blur written out: WebKit drops a var() here) ---- */
:root:not(#_) :is(.mm-panel,.mega-panel){position:absolute;top:0;left:0;right:0;box-sizing:border-box;margin:0;padding:16px;
  border-radius:var(--cap-r,12px);background:var(--cap-fill,rgba(234,235,238,.74));box-shadow:var(--cap-rim,none);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  color:var(--mn-ink);text-shadow:none;text-align:left;font-family:var(--ed-mono-font);
  opacity:0;transform:translate3d(0,-10px,0);transform-origin:50% 0;
  transition:opacity var(--mn-out) var(--ed-out),transform var(--mn-out) var(--ed-out)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root:not(#_) :is(.mm-panel,.mega-panel){background:rgba(234,235,238,.95)}
}
@media (prefers-reduced-transparency:reduce){
  :root:not(#_) :is(.mm-panel,.mega-panel){background:rgb(234,235,238);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- the latest piece: one small card in a well (its name, price and state, the cutout) ---- */
:root:not(#_) .mm-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;column-gap:12px;margin:0;padding:12px;
  border-radius:8px;background:var(--mn-well);color:var(--mn-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .2s linear}
:root:not(#_) .mm-ct{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0}
:root:not(#_) .mm-cn{display:block;font-family:var(--ed-mono-font);font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mn-ink)}
:root:not(#_) .mm-cp{display:flex;align-items:center;flex-wrap:nowrap;font-family:var(--ed-mono-font);font-weight:400;font-size:11px;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--mn-ink2);font-variant-numeric:tabular-nums}
:root:not(#_) .mm-sep{margin:0 .7em;opacity:.72}
:root:not(#_) .mm-cf{position:relative;display:block;width:64px;height:80px;margin:0}
:root:not(#_) .mm-cf img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%}
:root:not(#_) .mm-card[aria-current=page] .mm-cn{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
:root:not(#_) .mm-card:focus-visible{outline:none}
:root:not(#_) .mm-card:focus-visible .mm-cn{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}

/* ---- the entries: small mono caps, a tiny line icon each, 44px rows on hairlines ---- */
:root:not(#_) .mm-list{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none;border:0}
:root:not(#_) .mm-list>li{margin:0;padding:0;border:0;border-bottom:1px solid var(--mn-line)}
:root:not(#_) .mm-list>li:last-child{border-bottom:0}
:root:not(#_) .mm-list>li::after{content:none!important}
:root:not(#_) .mm-a{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:0 4px;color:var(--mn-ink);text-decoration:none;
  font-family:var(--ed-mono-font);font-weight:400;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
:root:not(#_) .mm-i{flex:none;display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;color:var(--mn-ink2)}
:root:not(#_) .mm-n{font-variant-numeric:tabular-nums}
:root:not(#_) .mm-a[aria-current=page]>span,:root:not(#_) .mm-a:focus-visible>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
:root:not(#_) .mm-a:focus-visible{outline:none}
/* the email: one quiet line */
:root:not(#_) .mm-mail{margin:8px 0 0;padding:0}
:root:not(#_) .mm-mail a{display:flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--ed-mono-font);font-weight:400;font-size:11px;line-height:1;
  letter-spacing:.04em;text-transform:none;white-space:nowrap;color:var(--mn-mute);text-decoration:none;-webkit-tap-highlight-color:transparent}
:root:not(#_) .mm-mail a:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
@media (hover:hover){
  :root:not(#_) .mm-card:hover{background:var(--mn-well-on)}
  :root:not(#_) .mm-a:hover>span,:root:not(#_) .mm-mail a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
}

/* ---- phones: #mmenu is a zero-height frame; the veil dims the page, the panel drops from the capsule ---- */
@media (max-width:900px){
  :root:not(#_) .mmenu{position:fixed;inset:0 0 auto 0;z-index:56;display:block;height:0;min-height:0;margin:0;padding:0;border:0;
    background:none;box-shadow:none;clip-path:none;overflow:visible;transform:none;visibility:hidden;color:var(--mn-ink)}
  :root:not(#_) .mmenu.is-open{visibility:visible}
  /* the capsule stays over the veil and the panel (its two lines are the close X while the Index is open) */
  :root:not(#_):not(#__) body.mm-run .hdr{z-index:57}
  :root:not(#_) .mm-veil{position:absolute;top:0;left:0;right:0;height:var(--app-h,100dvh);background:rgba(10,10,11,.32);opacity:0;
    transition:opacity var(--mn-out) linear;-webkit-tap-highlight-color:transparent}
  :root:not(#_) .mm-panel{top:calc(var(--hdr) + 8px);left:var(--cap-xl);right:var(--cap-xr);
    max-height:calc(var(--app-h,100dvh) - var(--hdr) - 20px - env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:none}
  :root:not(#_) .mm-panel::-webkit-scrollbar{width:0;height:0}
  :root:not(#_) .mmenu.is-open[aria-hidden=false] .mm-veil{opacity:1;transition-duration:var(--mn-in)}
  :root:not(#_) .mmenu.is-open[aria-hidden=false] .mm-panel{opacity:1;transform:none;transition-duration:var(--mn-in)}
}
/* tablets upright: the panel under the Index button, 420 wide, not across the window */
@media (max-width:900px) and (min-width:600px) and (orientation:portrait){
  :root:not(#_) .mm-panel{right:auto;width:min(420px,calc(100% - var(--cap-xl) - var(--cap-xr)))}
}
/* phones on their side: the card and the email left, the entries right, so it never runs past the window */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  :root:not(#_) .mm-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"card list" "mail list";
    grid-template-rows:auto minmax(0,1fr);column-gap:16px;padding:12px 16px}
  :root:not(#_) .mm-panel>.mm-card{grid-area:card}
  :root:not(#_) .mm-panel>.mm-list{grid-area:list;margin:0}
  :root:not(#_) .mm-panel>.mm-mail{grid-area:mail;align-self:end;margin:0}
}
@media (prefers-reduced-motion:reduce){
  :root:not(#_) :is(.mm-panel,.mega-panel,.mm-veil){transition:none!important}
}

/* ---- desktop: the Shop sheet, the same panel under the capsule: the card, the contents, the archive ---- */
@media (min-width:901px){
  :root:not(#_) .mega{position:fixed;top:calc(var(--hdr) + 8px)!important;left:var(--cap-xl);right:var(--cap-xr);z-index:-2;display:block;
    height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;text-shadow:none;color:var(--mn-ink);
    opacity:1;visibility:hidden;transform:none;transition:none!important}
  :root:not(#_) body.is-home .mega{top:calc(var(--ann) + var(--hdr) + 8px)!important}
  :root:not(#_) .has-mega.is-open .mega{visibility:visible}
  /* the 8px between the capsule and the panel still counts as the sheet, so the pointer crosses it without a close */
  :root:not(#_) .mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  :root:not(#_) .mega::after{content:none}
  :root:not(#_) .mega-panel{display:grid;grid-template-columns:minmax(240px,300px) minmax(200px,260px) minmax(0,1fr);column-gap:32px;
    align-items:start;padding:20px;box-shadow:var(--cap-rim,none),0 0 0 100vmax rgba(10,10,11,0);
    transition:opacity var(--mn-out) var(--ed-out),transform var(--mn-out) var(--ed-out),box-shadow var(--mn-out) linear}
  :root:not(#_) .has-mega.is-open>[data-mega-trigger][aria-expanded=true]~.mega .mega-panel{opacity:1;transform:none;
    box-shadow:var(--cap-rim,none),0 0 0 100vmax rgba(10,10,11,.14);transition-duration:var(--mn-in)}
  :root:not(#_) .mega-panel>.mm-card{padding:14px}
  :root:not(#_) .mega-panel .mm-cf{width:96px;height:120px}
  :root:not(#_) .mega-panel>.mg-list{margin:0}
  /* the archive: a mono label, then the pieces as small cutouts at true scale (MEMORY 71), the serial, Notify me in place */
  :root:not(#_) .mega .hix-arc{position:relative;justify-self:end;display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;color:var(--mn-ink)}
  :root:not(#_) .mega .hix-lbl{display:flex;margin:0}
  :root:not(#_) .mega .hix-lbl a{display:inline-flex;align-items:center;min-height:24px;font-family:var(--ed-mono-font);font-weight:400;font-size:11px;
    line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--mn-ink2);text-decoration:none}
  :root:not(#_) .mega .hix-lbl a:is(:hover,:focus-visible){color:var(--mn-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;outline:none}
  :root:not(#_) .mega .hix-wl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,128px));gap:0 16px;margin:0;padding:0;list-style:none;border:0}
  :root:not(#_) .mega .hix-wi{min-width:0;margin:0;padding:0;border:0}
  :root:not(#_) .mega .hix-wi::after{content:none!important}
  :root:not(#_) .mega .hix-arc .hp-w{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  :root:not(#_) .mega .hix-arc .hp{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;min-width:0;color:var(--mn-ink);text-decoration:none}
  :root:not(#_) .mega .hix-arc .hp-img{position:relative;display:block;width:100%;aspect-ratio:4 / 5;border-radius:8px;background:var(--mn-well);overflow:hidden}
  :root:not(#_) .mega .hix-arc .hp-img img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;object-position:50% 50%;transition:transform .6s var(--ed-out)}
  :root:not(#_) .mega .hix-arc .hp-n{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ed-mono-font);
    font-weight:500;font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mn-ink);text-decoration:none}
  :root:not(#_) .mega .hix-arc .hp-st{display:block;font-family:var(--ed-mono-font);font-size:10.5px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mn-mute);white-space:nowrap}
  :root:not(#_) .mega .hix-arc .hp-nf{position:relative;display:inline-flex;align-items:center;min-height:24px;margin:0;padding:0;background:none;border:0;cursor:pointer;
    font-family:var(--ed-mono-font);font-size:10.5px;font-weight:400;line-height:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
    color:var(--mn-mute);text-decoration:underline;text-decoration-color:rgba(17,17,17,.3);text-decoration-thickness:1px;text-underline-offset:.35em}
  :root:not(#_) .mega .hix-arc .hp-nf::after{content:"";position:absolute;inset:-10px -8px}
  :root:not(#_) .mega .hix-arc .hp-nf:is(:focus-visible,[aria-expanded=true]){color:var(--mn-ink);text-decoration-color:currentColor;outline:none}
  :root:not(#_) .mega .hix-arc .hp:focus-visible{outline:none}
  :root:not(#_) .mega .hix-arc .hp:focus-visible .hp-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
  @media (hover:hover){
    :root:not(#_) .mega .hix-arc .hp:hover .hp-img img{transform:scale(1.03)}
    :root:not(#_) .mega .hix-arc .hp:hover .hp-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
    :root:not(#_) .mega .hix-arc .hp-nf:hover{color:var(--mn-ink);text-decoration-color:currentColor}
  }
  /* the shared field (cards.css .nfi) over the archive, on the panel's own glass */
  :root:not(#_) .mega .hix-arc .nfi{inset:0;padding:0;--nfi-bg:rgba(234,235,238,.97);--nfi-ink:#111;--nfi-on:#fff;--nfi-mute:rgba(17,17,17,.62);--nfi-line:rgba(17,17,17,.2);
    -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:8px}
  :root:not(#_) .mega .hix-arc .nfi-x{margin:-12px -12px 0 0}
  :root:not(#_) .mega .hix-arc :is(.nfi-e,.nfi-e::placeholder){text-transform:none;letter-spacing:0}
}
/* 901-1179: three columns get tight; the archive keeps three pieces' room and the rest wrap */
@media (min-width:901px) and (max-width:1179px){
  :root:not(#_) .mega-panel{grid-template-columns:minmax(220px,260px) minmax(150px,190px) minmax(0,1fr);column-gap:24px}
  :root:not(#_) .mega .hix-arc{justify-self:stretch}
  :root:not(#_) .mega .hix-wl{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0 12px}
}

/* ================= search sheet: on the ground; one ink rule under a 20px field ================= */
.psr .psr-panel{height:100%!important;max-height:none!important;bottom:0;background:var(--c-g)!important}
.psr .psr-form{background:var(--c-g)!important;border-bottom:0!important}
.psr-scrim{background:rgba(17,18,20,.04)}
:root .psr .psr-form input[type=search]{font-size:20px;letter-spacing:0;border-bottom:1px solid var(--c-ink);border-radius:0;background:transparent;min-height:56px}
@media (max-width:900px){:root .psr .psr-form input[type=search]{font-size:16px;min-height:48px}}
:root:not(#_):not(#__) .psr .psr-form:focus-within input[type=search]{border-bottom-color:var(--c-ink)}
.psr .psr-img{background:transparent}
.psr .psr-n{font-weight:500;letter-spacing:var(--c-ui-tr)}
.psr .psr-p{text-transform:none;letter-spacing:0}
.psr .psr-s{color:var(--c-mute)}
@media (max-width:900px){.psr .psr-prods{background:transparent!important}}
/* phones (10 Oct review): the sheet keeps the page's 16 margins, and its tiles are the shop's cards (no tile, the cutout
   contained at 6%, the name on the card's edge), so the names line up with GO TO / NEWEST FIRST instead of 12px left of them */
@media (max-width:900px){
  :root .psr .psr-form{padding-left:var(--sl);padding-right:var(--sr)}
  :root .psr .psr-res{padding-left:var(--sl);padding-right:var(--sr)}
  :root .psr .psr-prods,:root .psr .psr-prods:has(> li:nth-child(4n+1):last-child:not(:first-child)){margin-left:0;margin-right:0;gap:24px 8px;padding-bottom:0}
  :root .psr .psr-item{grid-template-columns:0 minmax(0,1fr) 0}
  :root .psr .psr-img{aspect-ratio:4/5}
  :root .psr .psr-img img{top:6%;left:6%;width:88%;height:88%}
}
.psr .psr-h{color:var(--c-mute)}
/* 11 Oct (editorial system): the labels are mono sentence case (ed-system.css register rule); each piece carries its mono
   number 12px before the serial; phones are strictly two up, an odd last piece becomes one wide row (cutout left, words
   right), never an orphan centred alone */
.psr .psr-no{display:inline-block;margin-right:12px;font-family:var(--ed-mono-font);font-weight:400;font-size:var(--ed-t-mono);letter-spacing:0;color:var(--ed-mute);font-variant-numeric:tabular-nums}
.psr .psr-n{white-space:nowrap}
/* desktop: rows always full: 3 pieces three up, 5 five up, 6 three up (two rows of three), else four up */
@media (min-width:901px){
  :root .psr .psr-prods:has(>li:last-child:nth-child(3)),:root .psr .psr-prods:has(>li:last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
  :root .psr .psr-prods:has(>li:last-child:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
  :root .psr .psr-prods:has(>li:last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.psr .psr-sh{font-family:var(--ed-mono-font);font-size:var(--ed-t-mono);letter-spacing:0}
@media (max-width:900px){
  :root .psr .psr-prods>li:nth-child(2n+1):last-child:not(:first-child){grid-column:1 / -1}
  :root .psr .psr-prods>li:nth-child(2n+1):last-child:not(:first-child) .psr-item{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-items:end}
  :root .psr .psr-prods>li:nth-child(2n+1):last-child:not(:first-child) .psr-img{grid-column:1}
  :root .psr .psr-prods>li:nth-child(2n+1):last-child:not(:first-child) .psr-txt{grid-column:2;grid-row:1;align-self:end;padding:0 0 12px}
}

/* ================= the bag =================
   Desktop: the right half (left edge at exactly 50vw), on the ground, panel in .5s on the panel ease. The page (never the
   header) moves 25vw left on the same curve so it re-centres in the open half, under a 4% ink veil, no blur. One line owns
   the panel at hero scale; two or more fall back to 160px thumbs. Phones: a full-height sheet from --app-h. */
cart-drawer.cart,.bag{--paper:var(--c-g);--ink:var(--c-ink);--rule:1px solid var(--c-line)}
cart-drawer .cart__panel{background:var(--c-g);color:var(--c-ink)}
cart-drawer .cart__bar{border-bottom:0;background:var(--c-g)}
:root cart-drawer .cart__scrim{background:rgba(17,18,20,.04);-webkit-backdrop-filter:none;backdrop-filter:none}
/* tabs: Bag (1)  Saved (1), centred, ui caps; both ink, the selected one underlined */
:root cart-drawer .cart__tab{font-size:var(--c-ui);letter-spacing:var(--c-ui-tr);color:var(--c-ink);font-weight:400}
:root cart-drawer .cart__tab[aria-selected=true]{color:var(--c-ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.32em}
@media (hover:hover){:root cart-drawer .cart__tab[aria-selected=false]:hover{color:var(--c-ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.32em}}
cart-drawer .cart__tabs{column-gap:32px}
/* lines on the ground: no tile, no box behind the image */
.bag .cart-item__media{background:transparent;padding:0;border-radius:0}
.bag .cart-item{border-bottom:1px solid var(--c-line)}
.bag .cart-item__name{font-size:var(--c-ui);letter-spacing:var(--c-ui-tr)}
.bag .cart-item__price{font-size:var(--c-body);letter-spacing:0}
.bag .cart-item__meta{font-size:var(--c-ui);letter-spacing:0;color:var(--c-mute)}
:root .bag .cart-item__state{font-size:var(--c-ui);letter-spacing:0;color:var(--c-ink)}
:root:not(#_) .bag .cart-item__state:is([data-state=soldout],[data-state=unavailable]){color:var(--st-out)}
.bag .cart-item__remove{font-size:var(--c-ui);letter-spacing:var(--c-ui-tr);color:var(--c-mute);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em}
.bag .cart-item__qty{gap:0;margin-left:0}
.bag .cart-item__qty-l{font-size:var(--c-ui);letter-spacing:var(--c-ui-tr);text-transform:uppercase;color:var(--c-mute);margin-right:4px}
/* the foot: ship line, Subtotal / $900, Checkout (ink, 52), policy links */
.bag .cart__ship-line{font-size:var(--c-ui);letter-spacing:0;text-transform:none;color:var(--c-mute)}
:root:not(#_) .bag .cart__subtotal{font-size:var(--c-body);font-weight:500;margin-bottom:16px}
.bag .cart__subtotal-label{letter-spacing:0;text-transform:none;color:var(--c-ink)}
.bag .cart__subtotal strong{font-size:var(--c-body);font-weight:500;letter-spacing:0}
:root:not(#_) .bag .cart__checkout{min-height:52px;background:var(--c-ink);border-color:var(--c-ink)}
.bag .cart__links{justify-content:center;column-gap:24px}
.bag .cart__links a{color:var(--c-mute);text-transform:none;letter-spacing:0}
/* wallets: phones only (Apple Pay black straight under Checkout); Shop Pay appears inside checkout on desktop */
@media (min-width:901px){.bag .cart-wallets{display:none!important}}
/* the empty bag: the line, the SVK-417 cutout, an outline Pre-order, Shop all pieces */
cart-drawer .cart__empty-text,.cart-page.bag .cart__empty-text{font-size:var(--c-title);font-weight:500;line-height:1.25;color:var(--c-ink)}
cart-drawer .cart__empty--rel{row-gap:16px}
.cart__empty-fig{display:block;height:36vh;height:calc(var(--app-h,100vh) * .36);aspect-ratio:4/5;margin:8px 0}
.cart__empty-fig img{width:100%;height:100%;object-fit:contain}
:root:not(#_) cart-drawer .cart__empty .btn,:root:not(#_) .cart-page.bag .cart__empty .btn{min-width:296px;min-height:48px}
.cart__empty-all{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink)}
.cart-page.bag .cart__empty{align-items:center;text-align:center}

/* desktop (901 up, a split screen included): one centred column (520 max); the page shifts, the panel slides */
@media (min-width:901px){
  cart-drawer.cart{--bag-max:520px}
  cart-drawer .cart__panel{left:50%;transition:transform .5s var(--c-panel)}
  cart-drawer .cart__scrim{right:50%;transition:opacity .5s var(--c-panel)}
  cart-drawer.cart .cart__foot{border-top:0;background:var(--c-g)}
  /* one line: the piece owns the panel at hero scale, floating on the ground */
  cart-drawer.is-one .bag .cart-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0 0;border-bottom:0}
  cart-drawer.is-one .bag .cart-item__media{width:100%;height:54vh;height:calc(var(--app-h,100vh) * .54);max-height:54vh;aspect-ratio:auto}
  cart-drawer.is-one .bag .cart-item__image{object-fit:contain}
  cart-drawer.is-one .bag .cart-item__body{align-items:center;width:100%;row-gap:16px;padding-top:24px}
  cart-drawer.is-one .bag .cart-item__info{align-items:center;row-gap:4px}
  cart-drawer.is-one .bag .cart-item__head{flex-direction:column;align-items:center;row-gap:4px}
  cart-drawer.is-one .bag .cart-item__name{font-size:var(--c-title);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.25}
  cart-drawer.is-one .bag .cart-item__row{justify-content:center;column-gap:24px;margin:0}
  cart-drawer.is-one .bag .cart-item__remove{justify-content:center}
  /* two or more: 160px 4:5 thumbs on the ground */
  cart-drawer:not(.is-one) .bag .cart-item{grid-template-columns:160px minmax(0,1fr)}
  cart-drawer:not(.is-one) .bag .cart-item__media{aspect-ratio:4/5}
}
/* the page moves, the header never does; the wordmark still steps out (cart.css) */
/* inner pages move #main and the footer; home moves its slides and the counter (the stack is fixed inside #main, so a
   translate on #main would become the stack's containing block; GSAP owns the slides' own translate) */
@media (min-width:901px){
  /* 16 Oct (Adam: "make the bag an overlay"): the page no longer shifts -25vw; it stays full width under the scrim */
  /* the bar: the X on the page margin, where Bag sits in the header; the toggle centred over the column */
  cart-drawer.cart .cart__bar{padding-right:var(--c-mr)!important;padding-left:var(--c-ml)!important}
  cart-drawer.cart .cart__bar-r{grid-column:3!important;justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  body :is(#main,.shopify-section-group-footer-group,.stack,.stack-ui){transition:none!important}
}
/* phones: the full-height sheet, the same single-item layout, scaled to the window */
@media (max-width:900px){
  cart-drawer .cart__panel{min-height:var(--app-h,100%)}
  cart-drawer.is-one .bag .cart-item{display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:0;padding:16px 0 0}
  cart-drawer.is-one .bag .cart-item__media{width:100%;height:calc(var(--app-h,100vh) * .36);aspect-ratio:auto}
  cart-drawer.is-one .bag .cart-item__body{align-items:center;width:100%;row-gap:12px;padding-top:16px}
  cart-drawer.is-one .bag .cart-item__info{align-items:center;row-gap:4px}
  cart-drawer.is-one .bag .cart-item__head{flex-direction:column;align-items:center;row-gap:4px}
  cart-drawer.is-one .bag .cart-item__name{font-size:var(--c-title);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.25}
  cart-drawer.is-one .bag .cart-item__row{justify-content:center;column-gap:24px;margin:0}
  cart-drawer:not(.is-one) .bag .cart-item{grid-template-columns:120px minmax(0,1fr)}
}

/* ================= footer: the single quiet row, margins 32, ui 12 sentence case, on the ground ================= */
.ftr{background:var(--c-g);border-top:0;color:var(--c-ink)}
.ftr .frow-links a,.ftr .frow-copy,.ftr .frow-mail{font-size:var(--c-ui);letter-spacing:0;text-transform:none}
.ftr .frow-copy{color:var(--c-mute)}
/* 11 Oct (editorial system): the copyright and the email are facts, so mono 12 in the mute grey (ed-system.css register
   rule); on an ink ground (the home index slide, any .ed-band) the row takes the on-band colours */
.ftr .frow-mail{color:var(--ed-mute)}
:is(.ed-band,.on-band,.slide[data-tone=dark]) .ftr-in .frow-links a{color:var(--ed-on-band)}
:is(.ed-band,.on-band,.slide[data-tone=dark]) .ftr-in :is(.frow-copy,.frow-mail){color:var(--ed-on-band-mute)}

/* ================= newsletter card: on the ground, 8 radius, ui caps 500 title, underline field, ink Notify me ================= */
:root .nlp-in{background:var(--c-g);color:var(--c-ink);border-radius:8px;box-shadow:0 16px 48px rgba(17,18,20,.12)}
.nlp-scrim{background:rgba(17,18,20,.04)}
/* 11 Oct (editorial system): the card's title is read, not clicked: sentence-case title 20; its eyebrow is a mono label */
:root .nlp-t{font-family:var(--ed-font);font-size:var(--ed-t-title);font-weight:500;letter-spacing:-.01em;text-transform:none;line-height:1.2}
.nlp-eyebrow{color:var(--ed-mute)}
:root:not(#_):not(#__) .nlp .nlp-row input{background:transparent;border:0;border-bottom:1px solid var(--c-ink);border-radius:0;padding:0;font-size:var(--c-input)}
:root:not(#_):not(#__) .nlp .nlp-row input:focus,:root:not(#_):not(#__) .nlp .nlp-row input:focus:hover,:root:not(#_):not(#__) .nlp .nlp-row input:hover{background:transparent;border-color:transparent;border-bottom-color:var(--c-ink)}
:root:not(#_) .nlp .nlp-go{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
:root .nlp-media{background:transparent}
:root .nlp-media img{width:100%;height:100%;object-fit:contain}

/* ================= toast ================= */
.toast{border-radius:8px;font-size:var(--c-ui);letter-spacing:var(--c-ui-tr)}
.psr .psr-s[data-state=preorder]{color:var(--c-ink)}
/* search tiles speak the card grammar: $900 then the state, 8px apart, no dot; the pre-order ship window under it */
.psr .psr-p .psr-s::before{content:none}
.psr .psr-p .psr-s{margin-left:8px}
.psr .psr-p{font-weight:500}
.psr .psr-p .psr-s{font-weight:400}
.psr .psr-sh{color:var(--c-mute);text-transform:none;letter-spacing:0}

/* ================= password page (10 Oct, Adam: one header on every page) =================
   The same capsule as every template, over the photograph, with the wordmark alone (every other link in it would lead
   back to this gate; layout/password.liquid); the page copy keeps its place. */
.template-password .hdr{position:fixed;left:0;right:0;top:0}
.template-password .pw-copy{padding-top:calc(var(--hdr) + 24px)}

/* 13 Oct (Adam: "I like the lighter menu, I'm not sure on some pages why it goes dark"): the capsule is the light glass on
   every page. Over the pages that open on black (the 404) the glass is filled a little more, so it reads light, not a
   grey slab. */
:root:not(#_):not(#__):not(#___) body.template-404:not(.menu-open):not(.mega-run):not(.bag-open) .hdr::before{background:rgba(243,244,245,.9)!important}
}