/* 3DLUNCHBOX Library — R16 visual system.
   Loaded after /site/base.css (tokens, fonts, header grammar) and /site/sections.css (login capsule, OX Blue nav line).
   Presentation only: /library-live.js is unchanged and owns every state. The states are read from what that script
   already toggles ([hidden] on #library-login / #library-retry / #library-loading / #library-logout / #library-collection
   and body.library-populated), so no class or text is added by script and no request changes. */

.library-page{--line:rgba(29,33,36,.2);--paper:#FFFDF6;--gut:clamp(16px,3vw,44px);font:450 16px/1.5 var(--display);font-stretch:100%}
[hidden]{display:none!important}
.library-page h1,.library-page h2,.library-page h3,.library-page h4,.library-page p{margin:0}

/* ---------- header: the R16 header, in the page flow (it scrolls away; only the month rail sticks) ---------- */
.library-page .nav{position:relative;inset:auto;z-index:30;pointer-events:auto;background:transparent;border-bottom:1.5px solid var(--ink)}
.library-page .nav::after{display:none}
.lib-account{margin-left:auto;display:flex;align-items:center;gap:12px}
.lib-account .plog{margin-left:0}
.library-page .brand{min-height:44px}
.lib-header-login{display:none}
.library-page:has(#library-login:not([hidden])) .lib-header-login{display:inline-flex}
.lib-logout{--h:44px;display:inline-flex;align-items:center;height:var(--h);padding:0 18px;border:0;border-radius:999px;background:#FFFDF7;color:var(--ink);cursor:pointer;
 box-shadow:inset 0 0 0 1.6px var(--ink),0 2px 0 rgba(29,33,36,.9);font:800 .74rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;font-stretch:88%;
 transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
@media (hover:hover){.lib-logout:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--ink),3px 4px 0 var(--blue)}}
.lib-logout:active:not(:disabled){transform:translateY(2px) scale(.975);box-shadow:inset 0 0 0 1.6px var(--ink);transition-duration:.07s}
.lib-logout:disabled{opacity:.6;cursor:progress}
.lib-logout:focus-visible{outline:2px dashed var(--ink);outline-offset:5px}
/* phone menu: a native disclosure (no script) */
.lib-menu{display:none;position:static}
.lib-menu>summary{list-style:none;cursor:pointer}
.lib-menu>summary::-webkit-details-marker{display:none}
.lib-sheet{position:absolute;left:0;right:0;top:100%;z-index:40;display:flex;flex-direction:column;padding:12px 16px 22px;background:var(--cream);border-bottom:1.5px solid var(--ink);box-shadow:0 18px 30px rgba(29,33,36,.12)}
.lib-sheet a{position:relative;display:flex;align-items:center;min-height:56px;font:900 2.3rem/1 var(--display);font-stretch:74%;text-transform:uppercase;border-bottom:1px solid var(--line)}
.lib-sheet a[aria-current]::after{content:"";position:absolute;left:0;bottom:8px;width:2.2em;border-bottom:3px solid var(--blue2)}
.lib-menu[open]>summary i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lib-menu[open]>summary i:nth-child(2){opacity:0}
.lib-menu[open]>summary i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- main frame ---------- */
.lib-main{display:block;min-height:60vh}
.eyebrow{font-size:11px;letter-spacing:.14em}

/* identity strip (populated / loading / error): compact, the collection starts above the fold */
.lib-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 40px;padding:34px var(--gut) 24px}
.library-heading h1{padding:0;margin-top:8px;font:900 clamp(44px,5.4vw,78px)/.9 var(--display);font-stretch:74%;text-transform:uppercase;letter-spacing:-.01em}
.library-heading h1 span{color:transparent;-webkit-text-stroke:max(1.5px,.02em) var(--ink)}
.intro-meta{margin-top:12px}
.intro-meta p{font-size:11px;letter-spacing:.14em;color:var(--ink2)}
.intro-meta p:empty{display:none}
.library-state{max-width:420px;justify-self:end;text-align:left}
.library-state>.eyebrow{display:none}
.library-state h2{font:800 1.05rem/1.2 var(--display);letter-spacing:.02em}
#library-feedback{margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink2)}
.state-actions{display:flex;flex-wrap:wrap;gap:16px 18px}
.state-actions:has(>:not([hidden])){margin-top:22px}
.lib-cta.lib-empty-cta{display:none}
.lib-art{display:none}

/* ---------- the R16 control-plate system (Library) ----------
   One construction for every Library control: a charcoal-outlined plate with two clipped (chamfered) corners, a hard
   charcoal offset layer underneath, and a separate dark action plate on the right carrying the arrow. All layers are
   backgrounds of the one control (no clip-path, no filter), so the whole assembly is one clickable element and the
   keyboard focus ring stays a single clean outline. --s is where the plate sits over its base: 2px = resting,
   0 = lifted (hover), --room = pressed into the base. Faces: OX Blue = primary, cream = secondary / busy,
   R16 red = retry after an error. */
.library-product .button,.lib-cta{
 --face:var(--blue);--edge:var(--ink);--plate:var(--ink);--cut:8px;--pcut:5px;--key:34px;--inset:7px;--depth:4px;--room:calc(var(--depth) + 2px);--s:2px;--pad-l:14px;--pad-r:40px;
 --w:calc(100% - var(--room));
 position:relative;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:0;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
 padding:var(--s) calc(var(--room) - var(--s) + var(--key) + var(--inset) + var(--pad-r)) calc(var(--room) - var(--s)) calc(var(--s) + var(--pad-l));
 background:
  repeating-linear-gradient(90deg,rgba(29,33,36,.5) 0 2px,transparent 2px 5px) right calc(var(--room) - var(--s) + var(--key) + var(--inset) + 10px) bottom calc(var(--room) - var(--s) + 6px)/17px 2px no-repeat,
  linear-gradient(135deg,transparent var(--pcut),var(--plate) calc(var(--pcut) + .5px),var(--plate) calc(100% - var(--pcut) - .5px),transparent calc(100% - var(--pcut))) right calc(var(--room) - var(--s) + var(--inset)) top calc(var(--s) + var(--inset))/var(--key) calc(var(--w) - 2*var(--inset)) no-repeat,
  linear-gradient(135deg,transparent calc(var(--cut) - .83px),var(--face) calc(var(--cut) - .33px),var(--face) calc(100% - var(--cut) + .33px),transparent calc(100% - var(--cut) + .83px)) calc(var(--s) + 2px) calc(var(--s) + 2px)/calc(var(--w) - 4px) calc(var(--w) - 4px) no-repeat,
  linear-gradient(135deg,transparent var(--cut),var(--edge) calc(var(--cut) + .5px),var(--edge) calc(100% - var(--cut) - .5px),transparent calc(100% - var(--cut))) var(--s) var(--s)/var(--w) var(--w) no-repeat,
  linear-gradient(135deg,transparent var(--cut),var(--ink) calc(var(--cut) + .5px),var(--ink) calc(100% - var(--cut) - .5px),transparent calc(100% - var(--cut))) var(--room) var(--room)/var(--w) var(--w) no-repeat;
 transition:padding .22s var(--out),background-position .22s var(--out)}
/* the arrow on the dark action plate */
.library-product .button::after,.lib-cta>span[aria-hidden="true"]:last-child,#library-retry::after,.lib-cta--quiet::after{
 position:absolute;top:calc(var(--s) + var(--inset));bottom:calc(var(--room) - var(--s) + var(--inset));right:calc(var(--room) - var(--s) + var(--inset));width:var(--key);
 display:grid;place-items:center;color:var(--cream);font:800 1rem/1 var(--display);font-stretch:100%;letter-spacing:0;transition:top .22s var(--out),bottom .22s var(--out),right .22s var(--out),transform .38s var(--out)}
@media (hover:hover){
 .library-product .button:hover:not(:disabled),.lib-cta:hover:not(:disabled){--s:0px}
 .library-product .button:hover:not(:disabled)::after{transform:translateY(2px)}
 .lib-cta:hover:not(:disabled)>span[aria-hidden="true"]:last-child,.lib-cta--quiet:hover::after{transform:translateX(3px)}
 #library-retry:hover:not(:disabled)::after{transform:rotate(-90deg)}
}
.library-product .button:active:not(:disabled),.lib-cta:active:not(:disabled){--s:var(--room);transition-duration:.06s}
.library-product .button:focus-visible,.lib-cta:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}

/* large action plates: Login with Patreon / See the current drop (OX Blue), Membership (cream), Try again (R16 red) */
.lib-cta{--cut:11px;--pcut:7px;--key:42px;--depth:6px;--pad-l:22px;--pad-r:34px;justify-content:flex-start;gap:14px;min-height:66px;
 font:900 1.06rem/1 var(--display);font-stretch:80%;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.lib-cta .patw{--pw:22px}
#library-retry{--face:var(--red)}
#library-retry::after{content:"↻";content:"↻"/""}
.lib-cta--quiet{--face:#FFFDF7;--plate:transparent}
.lib-cta--quiet::after{content:"→";content:"→"/"";color:var(--ink)}
.lib-cta:disabled{cursor:progress;--face:#FFFDF7;color:var(--ink2)}

/* ---------- populated: the state title becomes a small handwritten aside ---------- */
.library-populated .library-state h2{font:700 clamp(24px,2vw,30px)/1 var(--hand);transform:rotate(-3deg);transform-origin:0 50%}
.library-populated #library-state-title::after{content:"\00a0↘";content:"\00a0↘"/""}
.library-populated #library-feedback{margin-top:10px}
.library-populated .lib-intro{padding-bottom:16px}

/* ---------- loading ---------- */
.loading-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px;padding:30px var(--gut) 40px;border-top:1.5px solid var(--ink)}
.loading-grid div{aspect-ratio:1/1;margin:0 10px 12px 0;background:linear-gradient(100deg,#ecebdf 30%,#f6f5ec 50%,#ecebdf 70%) 0 0/300% 100%;box-shadow:8px 10px 0 rgba(29,33,36,.08);animation:lib-shimmer 1.4s linear infinite}
@keyframes lib-shimmer{to{background-position:-150% 0}}

/* ---------- error: a quiet note, Try again ---------- */
.library-page:has(#library-retry:not([hidden])) .lib-intro{grid-template-columns:minmax(0,1fr)}
.library-page:has(#library-retry:not([hidden])) .library-state{justify-self:stretch;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 28px;margin-top:10px;padding:24px 28px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.library-page:has(#library-retry:not([hidden])) .library-state h2{grid-column:1;font:900 clamp(24px,2.4vw,32px)/1 var(--display);font-stretch:78%;text-transform:uppercase}
.library-page:has(#library-retry:not([hidden])) #library-feedback{grid-column:1;font-size:15px}
.library-page:has(#library-retry:not([hidden])) .state-actions{grid-column:2;grid-row:1/3;margin:0}

/* ---------- signed out / session ended, and empty: the state is the page ---------- */
.library-page:has(#library-login:not([hidden])) .lib-intro,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .lib-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px;min-height:min(620px,calc(100svh - 90px));padding-top:56px;padding-bottom:64px;border-bottom:1.5px solid var(--ink)}
.library-page:has(#library-login:not([hidden])) .library-heading,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .library-heading{display:none}
.library-page:has(#library-login:not([hidden])) .library-state,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .library-state{justify-self:start;max-width:620px}
.library-page:has(#library-login:not([hidden])) .library-state>.eyebrow,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .library-state>.eyebrow{display:block}
.library-page:has(#library-login:not([hidden])) .library-state h2,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .library-state h2{margin:14px 0 20px;font:900 clamp(52px,6.6vw,104px)/.86 var(--display);font-stretch:70%;text-transform:uppercase;letter-spacing:-.01em}
.library-page:has(#library-login:not([hidden])) #library-feedback,
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) #library-feedback{max-width:470px;font-size:17px;line-height:1.5}
.library-page:has(#library-login:not([hidden])) .lib-art--collection{display:block}
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .lib-art--shelf{display:block}
.library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .lib-cta.lib-empty-cta{display:inline-flex}

/* signed-out art: three print plates, stacked */
.lib-art{position:relative;height:clamp(300px,34vw,440px)}
.lib-plate{position:absolute;display:block;width:50%;aspect-ratio:1/1;padding:8px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),9px 11px 0 var(--ink)}
.lib-plate img{width:100%;height:100%;object-fit:contain;background:#efeee2}
.lib-plate.p1{left:2%;top:12%;transform:rotate(-7deg)}
.lib-plate.p2{left:44%;top:0;transform:rotate(5deg)}
.lib-plate.p3{left:22%;top:42%;transform:rotate(-1.5deg);z-index:1}
/* empty art: the OX and three waiting slots on a shelf line */
.lib-art--shelf{border-bottom:1.5px solid var(--ink)}
.lib-shelf-ox{position:absolute;left:40.5%;bottom:5%;z-index:1;width:19%;height:auto}
.lib-slot{position:absolute;bottom:0;width:27%;aspect-ratio:1/1;display:grid;place-items:center;border:1.5px dashed rgba(29,33,36,.45);border-bottom:0;font-size:11px;letter-spacing:.14em;color:var(--ink2)}
.lib-slot.s1{left:3%}.lib-slot.s2{left:36.5%;border-style:solid;border-color:var(--ink)}.lib-slot.s3{left:70%}

/* ---------- the collection ---------- */
.collection-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#library-month-controls:empty{display:none}
.permanent-access{padding:0 var(--gut) 14px;font-size:14px;color:var(--ink2)}

/* sticky month rail — year groups; the month in view is an OX Blue pill */
#library-month-navigation{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;overflow-x:auto;max-width:100%;padding:8px var(--gut);background:var(--cream);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);scrollbar-width:thin}
.month-nav-year{display:flex;align-items:center;flex-shrink:0;flex-wrap:nowrap;gap:2px}
.month-nav-year strong{margin-right:10px;padding-right:14px;border-right:1px solid var(--line);font:900 18px/1 var(--display);font-stretch:80%}
.month-nav-year a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:0 12px;border-radius:0;font:500 12px/1 var(--mono);letter-spacing:.1em;white-space:nowrap}
@media (hover:hover){.month-nav-year a:hover:not([aria-current]){text-decoration:underline 3px var(--blue2);text-underline-offset:6px}}
/* the month in view: a small mechanical plate (same vocabulary as the controls) — chamfered OX Blue face, charcoal
   outline, hard 2px charcoal offset. Only the active month; the others stay plain text. */
.month-nav-year a[aria-current="location"]{border-radius:0;font-weight:800;color:var(--ink);
 background:
  linear-gradient(135deg,transparent 4.2px,var(--blue) 4.7px,var(--blue) calc(100% - 4.7px),transparent calc(100% - 4.2px)) 1.5px 6.5px/calc(100% - 5px) 29px no-repeat,
  linear-gradient(135deg,transparent 5px,var(--ink) 5.5px,var(--ink) calc(100% - 5.5px),transparent calc(100% - 5px)) 0 5px/calc(100% - 2px) 32px no-repeat,
  linear-gradient(135deg,transparent 5px,var(--ink) 5.5px,var(--ink) calc(100% - 5.5px),transparent calc(100% - 5px)) 2px 7px/calc(100% - 2px) 32px no-repeat}
#library-month-navigation a:focus-visible{outline:2px dashed var(--ink);outline-offset:-4px}

/* one release month */
#library-releases{counter-reset:release}
.library-release{counter-increment:release;padding:34px var(--gut) 44px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--library-nav-height,60px) + 20px)}
.library-release:focus{outline:none}
.library-release:focus-visible{outline:2px dashed var(--ink);outline-offset:-6px}
.release-heading{display:flex;align-items:flex-end;gap:12px 20px;margin-bottom:26px}
.release-heading>div{min-width:0}
.release-heading .eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink2)}
.release-heading .eyebrow::before{content:counter(release,decimal-leading-zero) " / "}
.release-heading h3{margin-top:8px;font:900 clamp(30px,3.2vw,46px)/.95 var(--display);font-stretch:74%;text-transform:uppercase;overflow-wrap:break-word}
.release-model-count{margin-left:auto;padding-bottom:4px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.library-release>p{color:var(--ink2);font-size:15px}

/* the newest month leads: big title on the left, its designs on the right */
.library-release:first-child{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,2.15fr);gap:clamp(24px,3vw,48px);padding-bottom:52px;border-bottom:1.5px solid var(--ink)}
.library-release:first-child .release-heading{align-self:start;position:sticky;top:calc(var(--library-nav-height,60px) + 24px);flex-direction:column;align-items:flex-start;gap:16px;margin:0}
.library-release:first-child .release-heading .eyebrow{display:flex;align-items:center;gap:10px;color:var(--ink)}
.library-release:first-child .release-heading .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1.5px var(--ink)}
.library-release:first-child .release-heading{max-width:100%}
.library-release:first-child .release-heading h3{max-width:100%;margin-top:14px;font-size:clamp(42px,4.6vw,76px);line-height:.88;font-stretch:72%}
.library-release:first-child .release-model-count{margin-left:0;padding:0}

/* design grid: borderless editorial print plates */
.library-products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 22px;counter-reset:design}
.library-release:first-child .library-products{grid-template-columns:repeat(3,minmax(0,1fr))}
.library-product{counter-increment:design;position:relative;display:flex;flex-direction:column;min-width:0}
.product-media{aspect-ratio:1/1;position:relative;display:grid;place-items:center;margin:0 10px 16px 0;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),8px 10px 0 var(--ink)}
.product-media::after{content:"";position:absolute;inset:8px;box-shadow:inset 0 0 0 1px rgba(29,33,36,.16);pointer-events:none}
.product-symbol{font:400 30px/1 var(--display);color:var(--ink2)}
.product-thumbnail{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;display:block;background:#efeee2}
.library-product h4{min-height:2.44em;margin:0 0 12px;font:800 17px/1.22 var(--display);font-stretch:92%;overflow-wrap:anywhere}
.library-product h4::before{content:counter(design,decimal-leading-zero);display:block;margin-bottom:5px;font:500 10px/1 var(--mono);letter-spacing:.12em}
/* the download control — same plate: small download mark + DOWNLOAD on OX Blue, dark action plate with the arrow.
   States come from the unchanged script: "Download" (ready) · "Downloading…" (disabled: cream plate, the mark turns into
   a spinning ring, the plate sits pressed into its base) · the existing feedback line below for received / failed. */
.library-product .button{--key:32px;--inset:6px;--pad-l:12px;--pad-r:30px;align-self:flex-start;height:52px;min-height:50px;min-width:204px;justify-content:flex-start;
 font:900 13.5px/1 var(--display);font-stretch:80%;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.library-product .button::before{content:"↓";content:"↓"/"";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--cream);font:800 11px/1 var(--display);font-stretch:100%}
.library-product .button::after{content:"↓";content:"↓"/""}
.library-product .button:disabled{cursor:progress;--face:#FFFDF7;--s:4px;color:var(--ink2)}
.library-product .button:disabled::before{display:none}
/* busy: the action plate is working — its arrow becomes a spinning ring */
.library-product .button:disabled::after{content:"";box-sizing:border-box;width:16px;height:16px;margin:auto;right:calc(var(--room) - var(--s) + var(--inset) + (var(--key) - 16px)/2);top:0;bottom:calc(var(--room) - var(--s));border:2px solid var(--cream);border-right-color:transparent;border-radius:50%;animation:lib-spin .8s linear infinite}
@keyframes lib-spin{to{transform:rotate(360deg)}}
.download-feedback{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.download-feedback:empty{display:none}

/* ---------- ownership note (not shown with a populated collection: the rail line says it there) ---------- */
.ownership-note{display:flex;gap:14px;align-items:flex-start;max-width:760px;padding:28px var(--gut) 34px}
.ownership-note>span{font:900 20px/1.1 var(--display);color:var(--blue2)}
.ownership-note h2{font:800 1rem/1.3 var(--display)}
.ownership-note p{margin-top:4px;font-size:14px;color:var(--ink2)}
.library-populated .ownership-note{display:none}
.library-page .lib-noscript{margin:0 var(--gut) 30px;padding:18px 22px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lib-noscript a{font-weight:800;text-decoration:underline}

/* ---------- footer: the R16 footer type (display word + mono line) ---------- */
.lib-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:26px var(--gut) 34px;border-top:1.5px solid var(--ink)}
.lib-foot-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.lib-foot-line b{font:900 1.2rem/1 var(--display);font-stretch:88%}
.lib-foot-line .mono{font-size:.62rem;color:var(--ink2)}
.lib-foot-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.62rem}
.lib-foot-link::after{content:"";position:absolute;left:0;right:0;bottom:10px;border-bottom:2px solid var(--blue2);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.lib-foot-link:hover::after,.lib-foot-link:focus-visible::after{transform:scaleX(1)}

/* ---------- widths ---------- */
@media(min-width:1600px){.library-products{grid-template-columns:repeat(5,minmax(0,1fr))}.library-release:first-child .library-products{grid-template-columns:repeat(4,minmax(0,1fr))}.loading-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1199px){.library-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:999px){
 .library-release:first-child{grid-template-columns:minmax(0,1fr);gap:26px}
 .library-release:first-child .release-heading{position:static;flex-direction:row;align-items:flex-end;flex-wrap:wrap}
 .library-release:first-child .release-heading>div{flex:1 1 auto}
 .library-release:first-child .release-model-count{margin-left:auto}
 .loading-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.loading-grid div:nth-child(n+4){display:none}
}
/* phones: the R16 phone header (burger), two designs per row */
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .lib-menu{display:block}
 .lib-logout{padding:0 14px}
 .lib-account .plog{--h:44px}
 .lib-menu>summary.burger{width:44px;height:44px}
 .lib-account{gap:8px}
}
@media(max-width:700px){
 .lib-intro{grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 16px 18px}
 .library-heading h1{font-size:clamp(44px,13vw,60px)}
 .library-state{justify-self:start;max-width:none}
 .library-populated .library-state h2{font-size:24px}
 .library-page:has(#library-login:not([hidden])) .lib-intro,
 .library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .lib-intro{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0;padding:30px 16px 40px}
 .library-page:has(#library-login:not([hidden])) .library-state h2,
 .library-page:not(.library-populated):has(#library-logout:not([hidden])):has(#library-collection[hidden]):has(#library-retry[hidden]) .library-state h2{font-size:clamp(46px,14vw,64px)}
 .library-page:has(#library-retry:not([hidden])) .library-state{grid-template-columns:minmax(0,1fr);padding:20px}
 .library-page:has(#library-retry:not([hidden])) .state-actions{grid-column:1;grid-row:auto;margin-top:14px}
 .lib-art{height:clamp(220px,62vw,300px)}
 .state-actions{flex-direction:column;align-items:stretch}
 .lib-cta{width:100%}
 #library-month-navigation{gap:14px;padding:6px 16px}
 .month-nav-year a{min-width:44px;padding:0 9px}
 .library-release{padding:26px 16px 32px}
 .release-heading{flex-wrap:wrap;margin-bottom:20px}
 .library-release:first-child .release-heading h3{font-size:clamp(44px,13vw,56px)}
 .loading-grid{padding:24px 16px}
 .ownership-note{padding:24px 16px 28px}
 .library-page .lib-noscript{margin:0 16px 24px}
 .lib-foot{flex-direction:column;align-items:flex-start;padding:22px 16px 28px}
}
@media(max-width:899px){.library-products,.library-release:first-child .library-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.loading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loading-grid div:nth-child(n+3){display:none}}
@media(max-width:600px){
 .product-media{margin:0 6px 12px 0;box-shadow:inset 0 0 0 1.5px var(--ink),5px 7px 0 var(--ink)}
 .product-media::after{inset:5px}
 .product-thumbnail{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
 .library-product h4{font-size:15px;min-height:2.44em}
 .library-product .button{align-self:stretch;min-width:0;--pad-l:9px;--pad-r:6px;--key:28px;--inset:5px;gap:7px;font-size:12px;letter-spacing:.045em}
 .library-product .button::before{width:18px;height:18px}
}
@media(max-width:380px){.library-product .button{--key:26px;--pad-l:8px;--pad-r:4px;font-size:10.5px;letter-spacing:.03em}}
@media(max-width:540px){.library-products,.library-release:first-child .library-products{gap:24px 14px}.release-model-count{margin-left:0;width:100%}.library-release:first-child .release-model-count{margin-left:0}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}#library-month-navigation{scroll-behavior:auto}
 .library-page *{transition:none!important}.loading-grid div,.library-product .button:disabled::before{animation:none}
}