/* The Secret Cabinet. Image first, white by default with a dark mode.
   Type: Ogg for display, Alegreya for text, DM Mono for labels. All three are served from ./fonts, nothing loads from outside. */
@font-face{font-family:"Ogg";src:url("fonts/Ogg-Roman.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url("fonts/Alegreya-italic-400-700-latin-ext.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya";src:url("fonts/Alegreya-italic-400-700-latin.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Alegreya";src:url("fonts/Alegreya-normal-400-700-latin-ext.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya";src:url("fonts/Alegreya-normal-400-700-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-normal-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-normal-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-normal-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-normal-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
 --bg:#faf7f2;--bg2:#f2ece2;--wall:#efe8dd;--tile:#e9e2d6; /* ivory ground, as on Meditations in Color */--ink:#141210;--ink2:#46413b;--mute:#8a8279;--faint:#e7e3dc;--hl:#9b2335;
 --shadow:0 24px 70px rgba(30,22,14,.14),0 2px 8px rgba(30,22,14,.06);
 --display:"Ogg","Iowan Old Style","Palatino Linotype",Georgia,serif;
 --text:"Alegreya","Iowan Old Style",Georgia,serif;
 --label:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
 --hh:68px;--bh:52px;--max:1440px;--pad:32px;
 color-scheme:light}
:root[data-theme="dark"]{
 --bg:#0e0d0c;--bg2:#171513;--wall:#121110;--tile:#1d1a18;--ink:#efe9df;--ink2:#c4bcb1;--mute:#8b8279;--faint:#2a2623;--hl:#e3868c;
 --shadow:0 24px 70px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.util,.eyebrow,.ph-flag{display:none}

/* header */
.site-h{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.site-h .wrap{display:flex;align-items:center;gap:28px;height:var(--hh);max-width:none}
.wm{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.wm .t1{font-family:var(--display);font-size:var(--wm,34px);letter-spacing:-.01em}
.wm .t2{font:10.5px/1 var(--label);letter-spacing:.06em;color:var(--mute);margin-top:6px}
.nav{display:flex;gap:30px;margin-left:auto;align-items:center;font:12.5px/1 var(--label);letter-spacing:.04em}
.nav a{color:var(--mute);padding:6px 0;transition:color .2s}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.on:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--hl);margin-right:8px;vertical-align:2px}
.nav .srch{display:none}
.theme{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);cursor:pointer;padding:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.theme:hover{transform:rotate(180deg)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.01em}
.lab{font:11.5px/1.4 var(--label);letter-spacing:.04em;color:var(--mute)}

/* links that act as buttons: text with a moving arrow, no boxes */
.btn,.lnk{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;color:var(--ink);font:12.5px/1 var(--label);letter-spacing:.04em;cursor:pointer}
.btn:after,.lnk:after{content:"\2192";transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover:after,.lnk:hover:after{transform:translateX(5px)}
.btn.ghost{color:var(--ink2)}

/* ---------- the cabinet: toolbar, wall and list ---------- */
.cab-bar{position:sticky;top:var(--hh);z-index:35;height:var(--bh);display:flex;align-items:center;gap:6px;padding:0 var(--pad);
 background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
 font:12.5px/1 var(--label);letter-spacing:.03em;overflow-x:auto;scrollbar-width:none}
.cab-bar::-webkit-scrollbar{display:none}
.cab-views{display:flex;gap:6px;margin-right:22px;flex:none}
.cab-views button{border:0;background:none;color:var(--mute);font:inherit;padding:9px 0;cursor:pointer;white-space:pre;transition:color .2s}
.cab-views button:hover{color:var(--ink2)}
.cab-views button:before{content:"\00a0\00a0"}.cab-views button:after{content:"\00a0\00a0"} /* same width either way, so nothing shifts */
.cab-views button[aria-pressed="true"]{color:var(--ink)}
.cab-views button[aria-pressed="true"]:before{content:"[ "}.cab-views button[aria-pressed="true"]:after{content:" ]"}
.cab-trig{flex:none;border:0;background:none;color:var(--ink2);font:inherit;padding:9px 12px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s;white-space:nowrap}
.cab-trig:hover,.cab-trig[aria-expanded="true"]{background:var(--bg2);color:var(--ink)}
.cab-trig .v{color:var(--ink)}
.cab-trig .k{color:var(--mute)}
.cab-trig:after{content:"";width:9px;height:9px;flex:none;opacity:.55;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;
 background:linear-gradient(currentColor,currentColor) center/9px 1.2px no-repeat,linear-gradient(currentColor,currentColor) center/1.2px 9px no-repeat}
.cab-trig:hover:after{opacity:.9}
.cab-trig[aria-expanded="true"]:after{transform:rotate(45deg);opacity:1} /* the plus turns into a close mark while its menu is open */
.cab-trig.on{color:var(--ink)}
.cab-trig .dot{min-width:17px;height:17px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cab-clear{flex:none;border:0;background:none;color:var(--hl);font:inherit;padding:9px 10px;cursor:pointer;white-space:nowrap}
.cab-q{flex:1 1 180px;min-width:150px;display:flex;align-items:center;gap:8px;margin-left:10px;color:var(--mute)}
.cab-q svg{width:15px;height:15px;flex:none}
.cab-q input{width:100%;border:0;background:none;color:var(--ink);font:inherit;padding:9px 0;outline:none}
.cab-q input::placeholder{color:var(--mute)}
.cab-pop{position:fixed;z-index:60;min-width:240px;max-width:340px;max-height:min(460px,62vh);overflow:auto;background:var(--bg);border-radius:14px;box-shadow:var(--shadow);
 padding:8px;font:13px/1.3 var(--label);letter-spacing:.02em;animation:pop .18s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cab-pop button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:none;color:var(--ink2);font:inherit;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer}
.cab-pop button:hover{background:var(--bg2);color:var(--ink)}
.cab-pop button .c{margin-left:auto;color:var(--mute);font-size:11.5px;font-variant-numeric:tabular-nums}
.cab-pop button .ck{width:15px;height:15px;border-radius:50%;border:1.2px solid var(--faint);flex:none;transition:all .15s}
.cab-pop button[aria-checked="true"]{color:var(--ink)}
.cab-pop button[aria-checked="true"] .ck{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--bg)}
.cab-pop button.zero{opacity:.38}
.cab-pop .foot{display:flex;justify-content:space-between;padding:10px 12px 6px;color:var(--mute);font-size:11.5px}
.cab-pop .foot button{width:auto;padding:0;color:var(--hl)}.cab-pop .foot button:hover{background:none}
.cab-scrim{display:none}

/* wall: an endless field you drag or scroll in any direction */
html.is-wall,html.is-wall body{overflow:hidden;height:100%;overscroll-behavior:none}
html.is-wall footer{display:none}
.field{position:fixed;left:0;right:0;bottom:0;top:calc(var(--hh) + var(--bh));overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg)}
.field.drag{cursor:grabbing}
.field-world{position:absolute;left:0;top:0;will-change:transform}
.tile{position:absolute;left:0;top:0;display:block;background:var(--tile);-webkit-user-drag:none}
.tile img{display:block;width:100%;height:100%;object-fit:cover;background:var(--tile);opacity:0;transition:opacity .6s ease,filter .35s ease;-webkit-user-drag:none;pointer-events:none}
.tile img.ok{opacity:1}
.tile .cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 9px;border-radius:7px;background:color-mix(in srgb,var(--bg) 90%,transparent);font:11.5px/1.3 var(--label);letter-spacing:.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s}
.field:not(.drag) .tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.field.moving .tile{pointer-events:none}
.field-note{position:fixed;left:var(--pad);bottom:24px;z-index:30;max-width:380px;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 border-radius:16px;padding:18px 20px 16px;box-shadow:var(--shadow);font:15px/1.5 var(--text);color:var(--ink2);transition:opacity .4s,transform .4s}
.field-note b{display:block;font:400 22px/1.1 var(--display);color:var(--ink);margin-bottom:8px}
.field-note .lab{display:block;margin-top:10px}
.field-note .x{position:absolute;right:10px;top:10px;width:26px;height:26px;border:0;border-radius:50%;background:var(--bg2);color:var(--mute);cursor:pointer;font:14px/1 var(--label)}
.field-note.min{padding:0;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0;color:var(--ink)}
.field-note.min>*{display:none}
.field-note.min:before{content:"i";font:18px/1 var(--display)}
html:not(.is-wall) .field,html:not(.is-wall) .field-note{display:none}

/* list: equal-width columns, each work at its own shape with a plain label, more load as you scroll */
.cab-list{padding:28px var(--pad) 40px}
html.is-wall .cab-list{display:none}
.mas{display:flex;gap:var(--mg,32px);align-items:flex-start}
.mcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--mg,32px) * 1.7)}
.mt{display:block}
.mt .im{display:block;overflow:hidden;background:var(--tile)}
.mt img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mt img.ok{opacity:1}
.mt:hover img{transform:scale(1.02)}
.mt .t{display:block;margin-top:14px;font:17px/1.32 var(--text);color:var(--ink)}
.mt .m{display:block;margin-top:5px;font:11.5px/1.5 var(--label);letter-spacing:.02em;color:var(--mute)}
.mt:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cab-more{height:1px}
.cab-empty{padding:12vh 0;text-align:center;font:400 34px/1.2 var(--display);color:var(--ink2)}
.cab-empty .btn{margin-top:18px;font-size:12.5px}

/* ---------- generic grid of works (collection page, more to explore) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:48px 28px;align-items:end}
.card{display:block}
.card .ph{height:240px;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.card .ph img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .ph img{transform:scale(1.02)}
.card .lb{padding-top:12px;min-height:84px}
.card .tt{font:16px/1.3 var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .tt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card .ar,.card .dt{font:11.5px/1.45 var(--label);letter-spacing:.02em;color:var(--mute);margin-top:3px}
.card .dt{margin-top:0}
.card .tag{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{padding:9px 15px;border-radius:99px;background:var(--bg2);font:12.5px/1 var(--label);color:var(--ink2)}
.chips a:hover{background:var(--ink);color:var(--bg)}

/* ---------- sections ---------- */
.sec{padding:96px 0}.sec.wash{background:var(--bg2)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(32px,3.6vw,52px)}
.rel .sec-h{margin-bottom:28px}
.rel-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.rel-tabs button{font:12px/1 var(--label);letter-spacing:.04em;color:var(--ink2);background:none;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rel-tabs button:hover{color:var(--ink);border-color:var(--ink2)}
.rel-tabs button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rel .grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end}
.rel .grid>.card{flex:0 1 calc((100% - 84px)/4);min-width:0}
.rel .grid[hidden]{display:none}
.rel-none{flex-basis:100%;font:17px/1.6 var(--text);color:var(--ink2);text-align:center;margin:8px 0 24px}
.rel-tabs{justify-content:center}
@media (max-width:900px){.rel .grid>.card{flex-basis:calc((100% - 28px)/2)}}

/* ---------- collection and books pages (shared search layout) ---------- */
.ph-head{padding:72px 0 32px}
.ph-head h1{font-size:clamp(52px,7vw,104px)}
.bk-intro{max-width:640px;color:var(--ink2);font:19px/1.6 var(--text);margin:20px 0 0}
.sbar{display:flex;align-items:center;margin-top:34px;max-width:760px;background:var(--bg2);border-radius:99px;padding:0 8px 0 24px}
.sbar input{flex:1;min-width:0;border:0;padding:17px 0;font:19px var(--text);outline:none;background:transparent;color:var(--ink)}
.sbar input::placeholder{color:var(--mute)}
.sbar button{border:0;background:var(--ink);color:var(--bg);border-radius:99px;padding:11px 20px;font:12px var(--label);letter-spacing:.04em;cursor:pointer}
.browse{display:grid;grid-template-columns:240px 1fr;gap:56px;padding-bottom:110px}
.side .fg{padding:12px 0}
.side summary{cursor:pointer;font:12px/1 var(--label);letter-spacing:.04em;color:var(--ink);list-style:none;display:flex;justify-content:space-between}
.side summary::-webkit-details-marker{display:none}
.side summary:after{content:"+";color:var(--mute)}
.side details[open] summary:after{content:"\2212"}
.side .opts{margin-top:10px;max-height:280px;overflow:auto;scrollbar-width:thin}
.side label{display:flex;gap:9px;align-items:flex-start;font-size:15px;padding:4px 0;cursor:pointer;color:var(--ink2)}
.side label input{margin-top:5px;accent-color:var(--ink)}
.side label .n{color:var(--mute);margin-left:auto;padding-left:8px;font:11.5px var(--label)}
.side .clear{background:none;border:0;padding:0;color:var(--hl);font:12px var(--label);cursor:pointer;margin-top:14px}
.rbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;font:12px var(--label);color:var(--mute)}
.rbar select{font:12px var(--label);padding:9px 14px;border:0;border-radius:99px;background:var(--bg2);color:var(--ink);margin-left:6px}
.active{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.active:empty{display:none}
.active button{border:0;background:var(--ink);color:var(--bg);border-radius:99px;padding:7px 13px;font:12px var(--label);cursor:pointer}
.active button:after{content:" \00d7"}
.ftoggle{display:none}
.empty{padding:40px 0;color:var(--mute);font:20px var(--text)}
.bk-list{list-style:none;margin:0;padding:0}
.bk{display:grid;grid-template-columns:1fr auto;gap:8px 32px;padding:22px 0}
.bk .tt{font:22px/1.25 var(--text)}
.bk .sub{font-size:15px;color:var(--ink2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk .meta{font:12px/1.5 var(--label);color:var(--mute);margin-top:10px}.bk .meta .dot{margin:0 8px}
.bk .tg{font:11px var(--label);color:var(--mute);margin-top:6px}
.bk .acts{display:flex;flex-direction:column;align-items:flex-end;gap:8px;white-space:nowrap}
.bk .acts .sm{font:11.5px var(--label);color:var(--mute)}.bk .acts .sm a{margin-left:10px}
.bk-more{text-align:center;margin:36px 0 8px}
.bk-note{margin-top:40px;max-width:680px}

/* ---------- artwork page ---------- */
.crumb{font:11.5px/1 var(--label);letter-spacing:.04em;color:var(--mute);padding:20px 0}
.crumb a{color:var(--mute)}.crumb a:hover{color:var(--ink)}
.stage{background:var(--wall);display:flex;justify-content:center;align-items:center;padding:56px 24px;min-height:60vh}
.stage a{display:block}
.stage img{display:block;max-height:82vh;width:auto;height:auto;cursor:zoom-in;box-shadow:var(--shadow)}
.tools{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:20px 0 0;font:12px/1 var(--label);letter-spacing:.03em}
.tools a{display:inline-flex;gap:8px;align-items:center;color:var(--ink2);padding:6px 0}
.tools a:hover{color:var(--ink)}.tools svg{width:15px;height:15px}
.obj{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:96px;padding-top:72px;padding-bottom:110px}
.obj h1{font-size:clamp(26px,2.2vw,34px);line-height:1.15;margin-top:0!important}
.obj .who{font:22px/1.3 var(--text);margin-top:22px}
.obj .when{font:12.5px var(--label);color:var(--mute);margin-top:8px;letter-spacing:.03em}
.oa{margin:40px 0;padding:22px 24px;background:var(--bg2);border-radius:16px;font:15px/1.6 var(--text);color:var(--ink2)}
.oa b{display:block;font:400 12px/1 var(--label);letter-spacing:.04em;color:var(--ink);margin-bottom:10px}
.oa b:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hl);margin-right:9px;vertical-align:1px}
.oa a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.story h2{font-size:34px;margin:56px 0 18px}
.story p{font:20px/1.7 var(--text);margin:0 0 14px;color:var(--ink)}
.story .src{font:11.5px/1.6 var(--label);color:var(--mute);margin-top:20px;word-break:break-word}
.story .src a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tomb h2{font:12px/1 var(--label);letter-spacing:.04em;color:var(--mute);margin-bottom:18px}
.tomb dl{margin:0;display:grid;grid-template-columns:132px 1fr;gap:14px 20px}
.tomb dt,.tomb dd{margin:0;font-size:15px;line-height:1.45}
.tomb dt{font:11.5px/1.75 var(--label);letter-spacing:.02em;color:var(--mute)}
.tomb dd{word-break:break-word;color:var(--ink)}
.tomb dd a{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cite{display:none;margin-top:44px}
.cite h3{font:12px/1 var(--label);letter-spacing:.04em;color:var(--mute);margin-bottom:12px}
.cite textarea{width:100%;min-height:118px;font:14px/1.6 var(--text);padding:16px 18px;border:0;border-radius:14px;background:var(--bg2);color:var(--ink2);resize:vertical}
.cite button{margin-top:10px}
.note{font:14px/1.6 var(--text);color:var(--ink2)}

/* ---------- text pages ---------- */
.prose{max-width:700px;padding:88px 0 120px}
.prose h1{font-size:clamp(52px,7vw,104px);margin:0 0 40px}
.prose p{font:20px/1.7 var(--text)}

/* ---------- footer ---------- */
footer{background:var(--bg2);color:var(--ink2);padding:88px 0 40px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;max-width:none}
footer .wm{--wm:clamp(40px,5vw,72px)}
.wm .mk-s{white-space:nowrap}
.mk{-webkit-user-select:none;user-select:none}
.wm .mk-s .mk{height:.72em;top:.01em;margin:0 .036em 0 .04em;vertical-align:baseline} /* takes exactly the room the S would: its height and side spacing in Ogg */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer .wm .t2{font-size:12px;margin-top:12px}
footer .pd{font:16.5px/1.6 var(--text);max-width:610px;margin:0;text-wrap:balance}
footer .pd strong{font-weight:400;color:var(--ink)}
footer .fl{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;font:12.5px/1 var(--label);letter-spacing:.03em}
footer .fl a{color:var(--ink2)}footer .fl a:hover{color:var(--ink)}
footer .fine{grid-column:1/-1;margin-top:40px;font:11.5px/1.5 var(--label);color:var(--mute);letter-spacing:.02em}
/* the footer is centered: wordmark, line and links stacked on the page's center line */
footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:28px}
footer .pd{margin:0 auto}footer .fl{justify-content:center}

/* ---------- the loop mark: an Ogg S overprinted on its mirror, cycling through twelve Matisse and Kandinsky pairs ---------- */
@property --mk-a{syntax:"<color>";inherits:true;initial-value:#1f45b5}
@property --mk-c{syntax:"<color>";inherits:true;initial-value:#e8553b}
@keyframes mk-cycle{0.00%,6.00%{--mk-a:#1f45b5;--mk-c:#e8553b}8.33%,14.33%{--mk-a:#d4512c;--mk-c:#26489b}16.67%,22.67%{--mk-a:#a9342c;--mk-c:#d9a23a}25.00%,31.00%{--mk-a:#1b2b6e;--mk-c:#f0c02f}33.33%,39.33%{--mk-a:#ef7a22;--mk-c:#c2366a}41.67%,47.67%{--mk-a:#6d4aa3;--mk-c:#e07a8e}50.00%,56.00%{--mk-a:#f0c02e;--mk-c:#2b4fa8}58.33%,64.33%{--mk-a:#d03a7a;--mk-c:#2fa3a0}66.67%,72.67%{--mk-a:#d8332a;--mk-c:#2a3f8c}75.00%,81.00%{--mk-a:#ea7a2b;--mk-c:#23827f}83.33%,89.33%{--mk-a:#2449a8;--mk-c:#d93a2f}91.67%,97.67%{--mk-a:#151515;--mk-c:#c8243d}100%{--mk-a:#1f45b5;--mk-c:#e8553b}}
.wm{flex-direction:row;align-items:baseline;gap:calc(var(--wm,34px) * .34)} /* the mark is the same size as the S in the name and sits on the same line */
.wm .wt{display:flex;flex-direction:column}
.mk{width:auto;height:calc(var(--wm,34px) * .72);position:relative;top:calc(var(--wm,34px) * .01);flex:none;overflow:visible;animation:mk-cycle 36s linear infinite;--mk-blend:multiply}
.mk text{font-family:var(--display);mix-blend-mode:var(--mk-blend)}
.mk .mk-a{fill:var(--mk-a);opacity:.94}.mk .mk-c{fill:var(--mk-c);opacity:.88}
:root[data-theme="dark"] .mk{--mk-blend:screen}
.wm:hover .mk{animation-play-state:paused}
@media (max-width:900px){.site-h .wm{--wm:26px}}
@media (max-width:600px){.site-h .wm{--wm:18px}footer .wm{--wm:34px;white-space:normal}}
@media (prefers-reduced-motion:reduce){.mk{animation:none}}

/* ---------- tablet and phone ---------- */
@media (max-width:900px){
 :root{--hh:58px;--bh:50px;--pad:18px}
 .wm .t2{font-size:9.5px;margin-top:5px}
 .nav{gap:18px;font-size:11.5px}
 .nav a.on:before{display:none}
 .cab-views{margin-right:8px;gap:2px}
 .cab-q{min-width:130px;margin-left:4px}

 .cab-pop{left:0!important;right:0;bottom:0;top:auto!important;max-width:none;width:100%;border-radius:20px 20px 0 0;max-height:70vh;padding:12px 10px calc(16px + env(safe-area-inset-bottom));animation:sheet .25s cubic-bezier(.2,.8,.2,1)}
 @keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
 .cab-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.28)}
 .cab-scrim[hidden]{display:none}
 .field-note{left:12px;right:12px;bottom:12px;max-width:none;padding:16px 18px 14px;font-size:14px}
 .field-note b{font-size:19px}
 .field-note.min{left:auto;right:12px}
 .cab-list{padding:18px var(--pad) 30px}
 .mt .t{font-size:15px;margin-top:10px}.mt .m{font-size:10.5px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
 .card .ph{height:170px}
 .sec{padding:60px 0}
 .ph-head{padding:44px 0 22px}
 .browse{grid-template-columns:1fr;gap:0}
 .ftoggle{display:inline-flex;margin-bottom:16px}
 .side{display:none;margin-bottom:24px;padding:10px 18px 18px;background:var(--bg2);border-radius:16px}.side.open{display:block}
 .stage{padding:20px 12px;min-height:0}.stage img{max-height:72vh;max-height:72svh}
 .tools{gap:10px 22px;padding:16px 18px 0;font-size:11px}
 .obj{grid-template-columns:1fr;gap:44px;padding-top:40px;padding-bottom:70px}
 .obj .who{font-size:19px}
 .story h2{font-size:28px;margin-top:44px}.story p{font-size:18px}
 .tomb dl{grid-template-columns:104px 1fr;gap:12px 14px}
 .prose{padding:52px 0 80px}.prose p{font-size:18px}
 footer{padding:60px 0 32px}footer .wrap{grid-template-columns:1fr;gap:28px}
 footer .pd{font-size:15.5px}
 .bk{grid-template-columns:1fr}.bk .tt{font-size:19px}
 .bk .acts{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:14px}
}
@media (max-width:600px){.site-h .wrap{gap:8px}.wm .t2{font-size:8.5px;margin-top:4px}.nav{gap:10px;font-size:10px;letter-spacing:-.02em}.theme{width:17px;height:17px;flex:none}}
@media (max-width:360px){.nav{gap:8px;font-size:9.5px}.site-h .wm{--wm:17px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.site-h,.cab-bar,footer,.tools,.cite button,.field-note{display:none}}

/* v2.1 patch: the loop mark stays visible in dark mode */
:root[data-theme="dark"] .mk{--mk-blend:normal}
:root[data-theme="dark"] .mk text{mix-blend-mode:normal}
:root[data-theme="dark"] .mk .mk-a{fill:#efe9df;opacity:1}
:root[data-theme="dark"] .mk .mk-c{fill:var(--mk-c);opacity:.85;filter:brightness(1.5)}
/* Artist names link to the collection filtered to that artist (object page name, Artist row, More to explore cards) */
.obj .who a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--mute)}
.obj .who a:hover{text-decoration-color:currentColor}
.rel .card .ar[data-href]:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* More to explore: the tabs over a wall of the selected tab's works you drag in any direction (related.js with wall.js); the grids show only without scripts */
.rel.rel-walled .grid[role=tabpanel]{display:none}
.rel.rel-walled .rel-tabs{margin-bottom:26px}
.rel-field[hidden]{display:none}
.rel.rel-walled .sec-h{margin-bottom:22px}
.rel-field{position:relative;height:min(78vh,820px);overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg)}
.rel-field.drag{cursor:grabbing}
.rel-field:not(.drag) .tile:hover .cap,.rel-field .tile:focus-visible .cap{opacity:1;transform:none}
.rel-field.moving .tile{pointer-events:none}
@media (max-width:700px){.rel-field{height:62vh}}

/* About: the loop drawn large in ink beside the text, centered on it. Remove this block to undo. */
.about-grid{display:grid;grid-template-columns:minmax(0,700px) minmax(0,1fr);column-gap:clamp(40px,6vw,120px);align-items:center}
.about-mark{display:flex;justify-content:center;align-items:center}
.about-mark .mk{height:clamp(320px,46vw,600px);top:0;animation:none}
:root .about-mark .mk .mk-a,:root .about-mark .mk .mk-c{fill:var(--ink);opacity:1;filter:none;mix-blend-mode:normal}
@media (max-width:900px){.about-grid{display:block}.about-mark{display:none}}
.prose p a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}