/* in vivo. Built by tools/build.py from src/style.css. */
html,body{margin:0;background:#fff}
@keyframes iv-fade{from{opacity:0}to{opacity:1}}
.nos{font:14px/1.5 Helvetica,Arial,sans-serif;padding:16px;max-width:720px}
html,body{transition:background-color .4s ease}
html.lb-open,html.lb-open body{overflow:hidden;background:#f2f2f2}
#iv-root{
/* layout: one fluid page, sticky two-row header, 4-col grid of 2:3 tiles, split detail pages; one 720px breakpoint */
&{--sel:rgba(255,255,255,.92);
  --bg:#ffffff; --ink:#000000; --mark:#231f20; --body:#535353; --muted:#737373;
  --solid:#f2f2f2; --frost:rgba(242,242,242,.78); --frost-solid:rgba(240,240,240,.97);
  --sans:'neue-haas-grotesk-display','Neue Haas Grotesk Display','Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mark-face:'Neuzeit S LT Std',Neuzeit,'Helvetica Neue',Helvetica,sans-serif;
  --date-face:Helvetica,'Helvetica Neue',Arial,sans-serif;
  --h:36px; --r:18px; --g:8px; --pad:10px;
  --ease:cubic-bezier(.32,.72,0,1); --ease-in:cubic-bezier(.5,0,.75,0);
  color-scheme:light;
}
@media (max-width:720px){&{--h:44px;--r:22px;--g:6px;--pad:8px}}
&{font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--body);-webkit-font-smoothing:antialiased;background:var(--bg);min-height:100vh;text-align:left;letter-spacing:normal}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #000;outline-offset:2px}
.iv{padding:var(--pad);padding-block:var(--pad)}
.wm-inline{display:inline-block;margin:0 .1em 0 .04em;white-space:nowrap}
.wm-inline svg{display:inline-block;height:.767em;width:auto;vertical-align:baseline;fill:currentColor;overflow:visible}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* surfaces */
.frost{background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.solid{background:var(--solid)}
.bar{height:var(--h);border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border:0;cursor:pointer;white-space:nowrap;transition:background-color .22s ease,color .22s ease,transform .22s ease}
.bar:active{transform:scale(.985)}

/* header */
.head{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--pad));z-index:40;display:flex;flex-direction:column;gap:var(--g)}
.bar1{position:relative;cursor:default}
.bar1-bg{position:absolute;inset:0;border-radius:999px;pointer-events:none}
.bar1 .home{display:block;height:100%;width:72px;position:relative;z-index:2}
.morph{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.date{font-family:var(--date-face);font-weight:400;color:var(--body);font-variant-numeric:tabular-nums;position:relative;z-index:2;display:inline-flex;line-height:1.25em;height:1.25em}
.date .dg{display:inline-block;height:1.25em;overflow:hidden}
.date .col{display:flex;flex-direction:column}
.date .col span{display:block;height:1.25em;line-height:1.25em;text-align:center}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.row2 .bar[aria-expanded="true"]{background:var(--sel);color:#000}
.meta{cursor:default}
.meta:active{transform:none}
/* the cypher bar, grown over the index bar */
.row2{position:relative}
.on-page .meta{cursor:pointer}
.cybar{position:absolute;inset:0;z-index:3;cursor:pointer;justify-content:space-between;background:var(--frost-solid)}
/* the bars beneath stay hidden while it is open, so nothing reads through */
.row2:has(.cybar:not([hidden])) > #indexBtn > *,.row2:has(.cybar:not([hidden])) > #meta > *{opacity:0;transition:opacity .2s ease}
.cybar[hidden]{display:none}
.cybar:active{transform:none}
.cyg{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.cyl{color:var(--body);font-weight:600}
.cyn{font-family:var(--date-face);font-variant-numeric:tabular-nums;color:var(--ink)}
.cybar .cyi{--ib:20px;width:20px;height:20px;align-self:center;margin:-5px 0 -5px -2px}
.cybar .cyi svg{height:9px}
.cyref{position:absolute;left:0;right:0;top:calc(100% + var(--g));z-index:4;display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:var(--r);cursor:pointer;background:var(--frost-solid);color:var(--ink)}
.cyref[hidden]{display:none}
.cyk{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:baseline;min-height:22px;line-height:1.35}
.cyw{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyref:active{transform:none}
.cat{display:inline-block;color:var(--body)}
.cartpill{position:absolute;z-index:2;top:0;bottom:0;left:calc(50% + var(--g) / 2);right:0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border:0;background:none;color:#000;cursor:pointer;font:inherit;border-radius:999px;transition:background-color .22s ease}
.cartpill #cartCount{display:inline-block;font-variant-numeric:tabular-nums}
.cartpill[hidden]{display:none}
.cartpill[aria-expanded="true"]{background:var(--sel)}
.panel.cpanel{top:0;margin-top:0;left:calc(50% + var(--g) / 2);right:0}
.cpanel .panel-body{padding-top:calc(var(--h) + var(--g))}
.chead{color:var(--muted);min-height:24px}
.crow{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;align-items:center;min-height:40px;padding:0 10px;border-radius:999px;color:#000}
.crow .sub{color:var(--muted);margin-left:8px}
.crow > :last-child{text-align:right;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;gap:4px}
.q{width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:transparent;color:var(--body);cursor:pointer;font:inherit;line-height:1;transition:background-color .2s ease}
.qty .n{min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.ctot{display:flex;justify-content:space-between;padding:12px 10px 2px;margin-top:6px;border-top:1px solid rgba(0,0,0,.08);color:#000}
.cnote{padding:0 10px 10px;color:var(--muted)}
.checkout{width:100%;height:var(--h)}
@media (max-width:720px){.panel.cpanel{top:calc(var(--h) + var(--g));left:0}.cpanel .panel-body{padding-top:8px}}

.glyph{display:inline-block;transition:transform .5s var(--ease)}
[aria-expanded="true"] .glyph{transform:rotate(180deg)}

/* index panel */
.panel{position:absolute;left:0;right:0;top:100%;margin-top:var(--g);visibility:hidden;pointer-events:none}
.panel.on{visibility:visible;pointer-events:auto}
.panel-shape{position:absolute;inset:0;border-radius:var(--r);background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);will-change:clip-path}
.panel-line{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(0,0,0,.42);transform:scaleX(0);opacity:0;pointer-events:none}
.panel-body{position:relative;padding:8px;max-height:calc(100vh - 3*var(--h) - 60px);overflow:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 10px}
.chip{height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:transparent;color:var(--body);padding:0 12px;cursor:pointer;transition:background-color .22s ease,border-color .22s ease,color .22s ease}
.chip[aria-pressed="true"]{background:var(--sel);border-color:transparent;color:#000}
.row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;align-items:center;min-height:34px;padding:0 10px;border-radius:999px;color:#000;transition:background-color .2s ease}
.row.head-row{color:var(--muted);min-height:24px}
.row .meta{color:var(--body)}
.row .sub{color:var(--muted);margin-left:8px}
.row.dim{color:var(--body);cursor:default}
.row.about{margin-top:6px}

/* grid */
.gap{height:var(--g)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.tile{position:relative;display:block;aspect-ratio:3/4;max-width:100%;overflow:hidden;border-radius:var(--r);background:var(--solid);cursor:pointer}
.tile[hidden]{display:none!important}
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.contain{object-fit:contain;padding:8%}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--muted)}
.tile .media{transition:transform .7s var(--ease)}
.cap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);height:30px;padding:0 14px;display:flex;align-items:center;gap:8px;border-radius:999px;color:#000;white-space:nowrap;opacity:0;transition:opacity .25s ease}
.cap .sub{color:var(--body)}
.tile:focus-visible .cap{opacity:1}
.tile.ghost{visibility:hidden}

/* detail */
.split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"title title title title" "first imgs imgs imgs" "info imgs imgs imgs" "buy imgs imgs imgs" ". imgs imgs imgs";grid-template-rows:auto auto auto auto 1fr;gap:var(--g);align-items:start}
.split > .first{grid-area:first}
.ptitle{grid-area:title;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--pad) + 2*var(--h) + 2*var(--g));z-index:30;padding:0 4px 0 16px;cursor:default}
.ptitle .name{color:#000;font-size:14px}
.ptitle .name.it{font-style:italic}
.ptitle .sub{font-style:normal;color:var(--muted);margin-left:8px}
.x{width:calc(var(--h) - 8px);height:calc(var(--h) - 8px);border-radius:999px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--body);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.info{grid-area:info;border-radius:var(--r);padding:18px 16px;display:flex;flex-direction:column;gap:18px}
.grp{display:flex;flex-direction:column;gap:6px}
.label{color:var(--muted)}
.kv{display:grid;grid-template-columns:7.5em minmax(0,1fr);row-gap:9px;column-gap:12px;color:#000;line-height:1.4;letter-spacing:.01em}
.kv > span:nth-child(odd){font-weight:600}
.p{margin:0;color:#000;line-height:1.45;max-width:46ch}
.link{color:#000;text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.essay{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.essay.open{grid-template-rows:1fr}
.essay > div{min-height:0}
.buy{grid-area:buy;border-radius:var(--r);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.size{height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:transparent;color:var(--body);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.size[aria-checked="true"]{background:var(--sel);border-color:transparent;color:#000}
.size:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.add{height:44px;border:0;border-radius:999px;background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;cursor:pointer;transition:transform .2s ease}
.add:active{transform:scale(.985)}
.buy-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px}
.buy-head .val{color:#000}
.price-m{display:none}
.cta{padding:0;background:none}
.cta .add{height:var(--h);padding:0 18px}
.cta .r{opacity:.7;font-variant-numeric:tabular-nums}
.inq{display:inline-flex;align-items:flex-start}
.inq b{font-weight:600}
.inq .ast{margin:.12em 0 0 .1em}
.priced .r:has(.inq){opacity:1}
.ast{width:.62em;height:.62em;color:#e4002b;flex:none}
.priced .pr{display:inline-flex;align-items:flex-start;gap:3px;font-variant-numeric:tabular-nums}
.priced .pr .ast{margin-top:.1em}
.priced .r{opacity:1}
.notes{margin-top:14px;display:grid;gap:6px}
.note{display:flex;gap:6px;align-items:flex-start;font-size:11px;line-height:1.35;color:#535353}
.note .ast{margin-top:.25em}
.imgs{grid-area:imgs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
a.img{display:block;color:inherit}
.img{position:relative;aspect-ratio:2/3;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--solid)}
.img.hero{grid-column:1 / -1}
.img.pano{grid-column:1 / -1;aspect-ratio:2500/989}
.img.land{grid-column:1 / -1;aspect-ratio:3/2}
.img.sq{aspect-ratio:1/1}
.img.t34{aspect-ratio:3/4}
.img.w2{aspect-ratio:2/1}
.img .media.fill{object-fit:cover}
.img.embed{aspect-ratio:auto;height:min(82vh,820px)}
/* a turntable frame (media spin): dragged sideways, never selected or long-pressed; vertical swipes scroll */
.img.spin{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.img.spin.drag{cursor:grabbing}
.img.spin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.img.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wide > .img.embed{grid-column:1 / -1;height:min(82vh,820px)}
@media (max-width:720px){.img.embed{height:min(66vh,560px)}}
/* the image section is a masonry of mixed frames (2:1, 1:1, 2:3), read top to bottom per column */
.imgs{display:flex;align-items:flex-start;gap:var(--g)}
.imgs > .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--g)}
/* a row of wide frames under the columns: each spans columns but is one tile (3:4 of a column) tall */
.imgs{flex-wrap:wrap}
.imgs > .wide{flex:1 0 100%;container-type:inline-size;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g)}
.wide > .img.span{grid-column:span 2;aspect-ratio:auto;height:calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n) * 4 / 3)}
/* concentric with the photo's corner: inset = photo radius - circle radius, so the gap is even all the way round */
.iinfo{--ib:28px;position:absolute;right:calc(var(--r) - var(--ib) / 2);bottom:calc(var(--r) - var(--ib) / 2);z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;width:var(--ib);height:var(--ib);border-radius:calc(var(--ib) / 2);overflow:hidden;background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 0 0 .5px rgba(0,0,0,.06)}
.iinfo.open{width:auto;height:auto;max-width:calc(100% - 2 * (var(--r) - var(--ib) / 2))}
.itext{display:none;flex:1 1 auto;min-width:0;padding:7px 4px 7px 14px;color:#000;line-height:1.35;align-self:center}
.iinfo.open .itext{display:block}
.ibtn{flex:0 0 auto;width:var(--ib);height:var(--ib);border:0;border-radius:999px;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .22s ease}
.ibtn svg{height:11px;width:auto;fill:#231f20;display:block}
.iinfo.open .ibtn{background:var(--sel)}
@media (max-width:720px){.iinfo{--ib:32px}.ibtn svg{height:12px}}

.split > .img.land.first{grid-column:auto}
.fadein{animation:iv-fade .5s ease .12s both}
/* arrival: tiles and photos below the fold rise into place (app.js armReveal); the site's own settle curve, a little longer */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s cubic-bezier(.4,0,.2,1) var(--rv-delay,0s),transform 1.1s var(--ease) var(--rv-delay,0s)}
.rv.in{opacity:1;transform:none}

/* flight clone */
.fly{position:fixed;z-index:60;overflow:hidden;pointer-events:none;transform-origin:0 0;will-change:transform}

/* footer */
.spacer{height:200px}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.foot .wide{grid-column:span 2}
.foot .full{grid-column:1 / -1}
.field{border:1px solid #000;background:#fff;cursor:text}
.field input{border:0;outline:none;background:transparent;font:inherit;color:#000;width:100%}
.dark{background:#000;color:#fff;justify-content:center}
.copy{justify-content:center;cursor:default}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;height:36px;padding:0 16px;border-radius:999px;display:flex;align-items:center;color:#000;z-index:70;transition:opacity .3s ease,transform .45s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1080px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.split{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"title title title" "first imgs imgs" "info imgs imgs" "buy imgs imgs" ". imgs imgs"}.imgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap{opacity:1;height:26px;padding:0 10px;bottom:8px;font-size:11px}
  .row{grid-template-columns:minmax(0,1fr) auto;min-height:44px}
  .reg{display:none}
  .split{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "first" "info" "buy" "imgs";grid-template-rows:auto}
  .imgs{grid-template-columns:minmax(0,1fr)}
  .ptitle{padding:0 0 0 16px}
  .x{width:var(--h);height:var(--h)}
  .buy{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:35;border-radius:28px;padding:6px;background:var(--frost-solid);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
  .buy-head{display:none}
  .price-m{display:inline;opacity:.85}
  .add .arrow{display:none}
  .buy.cta{position:relative;bottom:auto;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:999px}
  .cta .add{height:48px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
  .spacer{height:96px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* project frames open in the viewer */
.split .img[data-n]{cursor:zoom-in}
video.media{background:transparent}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* viewer: full screen, click or tap to zoom, drag or move to look around */
.lb{position:fixed;inset:0;z-index:100;background:transparent;overscroll-behavior:contain}
.lb[hidden]{display:none}
.lb.rp{background:rgba(242,242,242,.002)}
/* Safari paints its own status bar and toolbar in the page's ground colour (#f2f2f2 while a photo is enlarged); the frost fades into that colour at the top and bottom so there is no hard edge against them */
.lb::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#f2f2f2 0,rgba(242,242,242,0) 110px,rgba(242,242,242,0) calc(100% - 110px),#f2f2f2 100%);animation:iv-fade .35s ease}
/* on iPhone and iPad the photo gets its own layer, so its clip and scale redraw it alone and leave nothing behind */
@supports (-webkit-touch-callout:none){.lb-el{will-change:transform}}
/* while a photo is enlarged the page itself is frosted (blurred and thinned over a grey ground, set on html in build.py), so it holds under the phone browser's own bars too and reads as one even tone whatever lies beneath */
& > .iv{transition:filter .35s ease}
/* frozen: reaches 80px past every screen edge (its padding keeps the page where it was), so the blur's soft edge falls off screen and the tone is even; nothing inside keeps its own backdrop blur, which phones could leave as faint lines after a zoom */
& > .iv.frozen{position:fixed;inset:-80px;padding:calc(var(--pad) + 80px);overflow:hidden;will-change:filter}
& > .iv.frozen *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
& > .iv.frozen .head{top:env(safe-area-inset-top,0px)}
&.lb-on > .iv{filter:blur(16px) opacity(.62)}
@media (prefers-reduced-motion:reduce){& > .iv{transition:none}}
.lb-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-out;-webkit-user-select:none;user-select:none}
.lb-el{cursor:zoom-in}
.lb.zoomed .lb-el,.lb.zoomed .lb-stage{cursor:zoom-out}
.split .img.lifted{visibility:hidden}
.lb-el{position:absolute;display:block;max-width:none;transform-origin:0 0;object-fit:contain;border-radius:var(--r);overflow:hidden;-webkit-user-drag:none}
.lb-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--pad));left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:var(--g);pointer-events:none}
.lb-top > *{pointer-events:auto}
/* the labels are the i dot's height and sit concentric in the photo's top corners, resting or zoomed */
.lb .lb-top{--ib:28px;padding:0 calc(var(--r) - var(--ib) / 2);margin-top:calc(var(--r) - var(--ib) / 2)}
.lb .lb-top .bar{height:var(--ib);padding:0 12px;gap:8px;font-size:12px;background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
@media (max-width:720px){.lb .lb-top{--ib:32px}}
.lb-count{cursor:default;color:var(--body);font-variant-numeric:tabular-nums}
.lb-count:active{transform:none}
.lb-x{color:#000}
.lb-nav{position:absolute;top:50%;margin-top:calc(var(--h) / -2);width:var(--h);height:var(--h);border-radius:999px;border:0;padding:0;color:#000;cursor:pointer;font:inherit;transition:opacity .2s ease}
.lb-nav[hidden]{display:none}
.lb-prev{left:var(--pad)}
.lb-next{right:var(--pad)}
.lb-cap{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 2 * var(--pad));padding:9px 16px;border-radius:calc(var(--h) / 2);color:#000;text-align:center;transition:opacity .2s ease}
.lb-cap[hidden]{display:none}
.lb.zoomed .lb-nav,.lb.zoomed .lb-cap{opacity:0;pointer-events:none}
@media (max-width:720px){.lb-nav{display:none}}

/* email, updates and contact live on the main page only; the copyright line stays everywhere */
&.on-page .foot > :not(.copy){display:none}

/* size picker: one bar that opens into the list */
.pick{height:var(--h);border:0;border-radius:999px;background:rgba(255,255,255,.7);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 16px;cursor:pointer;color:#000;text-align:left;transition:background-color .2s ease}
.pick[aria-expanded="true"]{background:var(--sel)}
.pick .label{color:var(--muted)}
.pick .pv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .sub,.opt .sub{color:var(--muted);margin-left:8px}
.pick .glyph{font-size:10px;transition:transform .3s var(--ease)}
.pick[aria-expanded="true"] .glyph{transform:rotate(180deg)}
/* the size list grows up out of the size bar, a frosted panel like the index; the bar stays at its foot */
/* a positioning frame for the size list on wide screens; on phones the bar is sticky, which already is one */
@media (min-width:721px){.buy{position:relative}}
.pick{position:relative;z-index:6}
.picklist{position:absolute;z-index:5;visibility:hidden;overflow:hidden;border-radius:var(--r);background:var(--frost-solid);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10)}
.picklist.on{visibility:visible}
/* the turntable of a size with one, popped up beside the size list (src/app.js spinPopup) */
.spinpop{position:fixed;z-index:34;overflow:hidden;border-radius:var(--r);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.spinpop[hidden]{display:none}
.spinpop.drag{cursor:grabbing}
.spinpop canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.spinpop .shot{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;display:none;pointer-events:none;-webkit-user-drag:none}
.spinpop.is-shot{cursor:default;touch-action:auto}
/* the x sits concentric in the tile's top right corner, the size and frost of a photo's i */
.spx{--ib:28px;position:absolute;z-index:2;top:calc(var(--r) - var(--ib) / 2);right:calc(var(--r) - var(--ib) / 2);width:var(--ib);height:var(--ib);border:0;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);color:#000;font-size:16px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.spx:hover{background:var(--sel)}
@media (max-width:720px){.spx{--ib:32px;font-size:18px}}
.spinpop.is-shot .shot{display:block}
.spinpop.is-shot canvas{display:none}
.pick,.opt{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pl-in{display:flex;flex-direction:column;gap:2px;padding:6px 6px calc(var(--h) + 8px)}
.opt{min-height:36px;border:0;border-radius:999px;background:transparent;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 16px;cursor:pointer;color:#000;text-align:left;font:inherit;transition:background-color .2s ease}
.opt .sub{margin-left:10px}
.opt .st{color:var(--muted)}
.opt[aria-selected="true"]{background:var(--sel)}
.opt:disabled{color:var(--muted);cursor:not-allowed}
.opt:disabled > span:first-child{text-decoration:line-through}

/* home tiles are 3:4 and the photo fills them edge to edge; works set to contain keep their inset */
.tile .media:not(.contain){object-fit:cover}
/* hover looks only where there is a real pointer; on phones a tap leaves :hover stuck, which turned the index bar white after the panel closed */
@media (hover:hover) and (pointer:fine){
.row2 button.bar:hover{background:rgba(255,255,255,.6);color:#000}
.q:hover{background:var(--sel);border-color:transparent;color:#000}
.chips .chip:hover{background:rgba(255,255,255,.6)}
a.row:hover{background:rgba(255,255,255,.75)}
.tile:hover .media{transform:scale(1.02)}
.x:hover{background:rgba(255,255,255,.88);color:#000}
.tile:hover .cap{opacity:1}
.ibtn:hover{background:var(--sel)}
.pick:hover{background:var(--sel)}
.opt:hover:not(:disabled){background:var(--sel)}
}

}