@layer reset, tokens, base, components, admin, motion, a11y; @font-face{font-family:var(--ff-serif);src:url('/fonts/CrimsonPro-latin.woff2') format('woff2');font-weight:200 900;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:var(--ff-serif);src:url('/fonts/CrimsonPro-Italic-latin.woff2') format('woff2');font-weight:200 900;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:var(--ff-sans);src:url('/fonts/VarelaRound-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} @layer reset{ *{margin:0;padding:0;box-sizing:border-box} @layer reset{ [popover]{position:fixed;inset:auto;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;padding:0;background:transparent;color:inherit;overflow:visible} [popover]:popover-open{position:fixed;inset:auto;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;padding:0;background:transparent;color:inherit;overflow:visible} } button,input,select,textarea,optgroup{font-family:inherit} } @layer tokens{ :root{--fs:16px;--bg:#f8f8f6;--tx:#000;--txCap:#000;--lnk:#000;--lnkH:#003bbf;--lnkA:#c0000c;--gap:clamp(.7rem,.45rem + .6vi,1.75rem);--pad:clamp(.5rem,.35rem + .5vmin,1.25rem);--inset:clamp(.75rem,.4rem + 2.6vmin,3.75rem);--tile-size:clamp(200px,11vi,440px);--aside-cols:2;--aside-fz:1.111111em;--media-pad-top:clamp(.5rem,.35rem + .5vmin,1.25rem);--media-pad-side:clamp(.5rem,.3rem + 1.2vmin,1.75rem);--icon-dim:2.5rem;--icon-dim-sm:1.25rem;--ui-inset:clamp(.5rem,.38rem + .35vi,1rem);--ui-gap:.35rem;--ic-bg:rgba(148,148,148,.28);--ic-br:0px solid rgba(var(--ink),0);--ff:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ff-sans:var(--ff);--ff-serif:var(--ff);--ff-mono:var(--ff);--surface-bg:#ffffff;--surface-bg-2:#f5f5f3;--surface-tx:#000;--surface-tx-2:#000;--surface-border:rgba(var(--ink),.10);--surface-input-bg:#ffffff;--surface-input-border:#d4d4d4;--accent:#2266cc;--focus-ring:var(--accent);--fs-info:var(--fs-ui);--ok:#2a5e38;--err:#9c2018;--warn:#8a6d1f;--fs-title:clamp(1.19rem,1.028rem + .37vi,1.9rem);--fs-lead:clamp(1rem,.891rem + .25vi,1.45rem);--fs-prose:clamp(.94rem,.887rem + .12vi,1.22rem);--fs-ui:clamp(.8rem,.734rem + .15vi,1.06rem);--fs-meta:clamp(.7rem,.656rem + .1vi,.92rem);--fs-micro:clamp(.62rem,.585rem + .08vi,.82rem);--focus-glow:0 0 0 2px rgba(34,102,204,.15);--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--dur-1:.12s;--dur-2:.15s;--dur-3:.2s;--dur-4:.25s;--dur-5:.3s;--ease:linear(0, 0.0022 6.25%, 0.0161 12.5%, 0.0488 18.75%, 0.1035 25%, 0.18 31.25%, 0.2752 37.5%, 0.384 43.75%, 0.5 50%, 0.616 56.25%, 0.7248 62.5%, 0.82 68.75%, 0.8965 75%, 0.9512 81.25%, 0.9839 87.5%, 0.9978 93.75%, 1);--r-1:2px;--r-2:3px;--r-3:4px;--r-4:6px;--r-5:8px;--r-6:10px;--r-7:20px;--r-pill:999px;--edit:#e07a1c;--err-soft:#e05252;--eye:#5f7346;--sale:#0050b4;--service:#82003c;--tx2:rgba(var(--ink),.58)} :root{ --z-behind : -1; --z-lift : 10; --z-lift-rail : 14; --z-in-overlay : 20; --z-cap : 23; --z-cluster : 24; --z-sticky : 40; --z-cart : 41; --z-corner-btn : 50; --z-pagerail : 60; --z-lightbox : 200; --z-dropdown : 220; --z-stage : 445; --z-header : 450; --z-bloom : 460; --z-stage-cap : 461; --z-snap : 497; --z-panel : 500; --z-proj-meta : 898; --z-admin-bar : 900; --z-hud : 1100; --z-bloom-raised : 1150; --z-cap-flash : 1290; --z-fly : 1295; --z-cmdk : 2000; --z-mini : 2100; --z-gear : 9000; --z-tagcloud : 9900; --z-drawer : 9991; --z-modal : 9995; --z-admin-toolbar : 9996; --z-skip : 9999; --z-toast : 9999; --z-admin-selbar : 10000; --z-admin-bar-top : 10001; --z-tip : 10020; --z-iptc : 10100; --z-shortcuts : 99999; --z-confirm : 100000; --z-upload : 100000; --z-ctx-menu : 100001; --z-session-expired : 100001; --z-admin-frame : 2147483647; } :root{ --ink : 0,0,0; --haze : 127,127,127; --scrim : rgba(var(--ink),.45); --lift-1 : 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); --lift-2 : 0 4px 14px rgba(0,0,0,.16); --lift-3 : 0 8px 28px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.08); --lift-4 : 0 14px 40px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.10); } } .af-looks{display:grid;gap:.6rem 1rem;min-width:272px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))} .af-looks-g{display:flex;flex-direction:column;gap:2px;min-width:0} .af-looks-reset{order:5;grid-column:1/-1} .af-looks-g[hidden]{display:none} .af-looks .af-sky-row[hidden]{display:none} .af-looks-slot .af-sky{display:block} .af-looks-slot .af-light{display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:13px 1rem;align-items:start} .se-sec[hidden]{display:none} .se-row[hidden]{display:none} .se-sw.is-on{border-color:color-mix(in oklab,var(--ok) 45%,transparent)} .se-row--wide .af-bm-title{display:none} .af-browser-memory{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--surface-border);font-family:var(--ff-sans)} .af-bm-title{font-size:var(--fs-lead);margin:0 0 var(--s-2)} .af-bm-note,.af-bm-session,.af-bm-empty{font-size:var(--fs-meta);opacity:.75;margin:0 0 var(--s-2)} .af-bm-list{list-style:none;margin:0 0 var(--s-3);padding:0} .af-bm-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;font-size:var(--fs-ui)} .af-bm-forget{all:unset;display:inline-flex;align-items:center;flex:0 0 auto;cursor:pointer;padding:.35em .9em;border-radius:var(--r-pill); font:var(--fs-meta)/1 var(--ff-sans);letter-spacing:.03em; background:var(--ic-bg);color:var(--txCap); backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); transition:background var(--dur-1),color var(--dur-1)} .af-bm-forget:hover{background:rgba(160,160,160,.14);color:var(--tx)} .af-bm-foot{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start} @view-transition{navigation:none} ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out} .site-header{view-transition-name:af-site-header} ::view-transition-group(af-site-header), ::view-transition-old(af-site-header), ::view-transition-new(af-site-header){animation:none} ::view-transition-group(*){animation-duration:.34s;animation-timing-function:var(--ease)} @layer base{ html{font-size:max(var(--fs-min), var(--fs));color-scheme:light dark;scroll-behavior:smooth} @media (min-width:1600px){ html{font-size:max(var(--fs-min), calc(17px + (100vi - 1600px) * .005))} } @media (max-width:420px){ :root{--aside-cols:1} .af-menu{min-width:0;max-width:96vw} .af-menu-filter,.af-ed-field-input{font-size:max(var(--fs-min), 16px)} } @media (hover:none){ .af-menu-opt{padding:.55em .8em;min-height:2.1em} } body{min-height:100dvh;background:var(--bg);color:var(--tx);font-family:var(--ff-serif);line-height:1.4} html[data-tod-dim] .af-tag-chip{background:rgba(255,255,255,.08)} html[data-tod-dim] .cf-submit{opacity:1} a{color:var(--lnk);text-decoration:none} a:hover,a.xh{color:var(--lnkH)} a:active{color:var(--lnkA)} a:focus-visible{outline:2px solid var(--focus-ring,currentColor);outline-offset:2px;box-shadow:0 0 0 2px rgba(var(--ink),.18);border-radius:var(--r-4);text-decoration:underline;text-underline-offset:.15em} h1,h2,h3,h4{padding:0 0 var(--fs)} h2,summary{font-size:var(--fs-title);padding:var(--fs) 0 0 } h3{font-size:var(--fs-title);font-weight:600} p{padding:var(--fs) 0;line-height:1.4} .site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);padding:var(--ui-inset);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"search brand buttons";align-items:start;gap:.75rem;background:transparent} .site-header:before,.site-header:after{content:none} .iconbar{display:contents} .brand{grid-area:brand;flex:0 0 auto;display:flex;align-items:flex-start;justify-self:center;gap:.4rem} .seq-nav{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;padding:0;margin:0;cursor:pointer;color:inherit;opacity:.55;align-self:center;max-width:18ch;transition:opacity var(--dur-2);text-decoration:none;font:italic max(var(--fs-min), .8rem)/1.2 var(--ff-serif,Georgia,'Times New Roman',serif)} .seq-nav[hidden]{display:none} .seq-arrow{font-style:normal;opacity:.65;font-size:var(--fs-prose);flex:0 0 auto} .seq-ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .seq-nav:hover,.seq-nav:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:2px} @media (max-width:740px){ .seq-ttl{display:none} } .brand a{display:flex;align-items:center;position:relative} .brand .sig-box{--sig-h:var(--btn-h,40px);display:block;line-height:0} .brand canvas.signature-morph{display:block;height:calc(var(--sig-h) * 1.3035);width:calc(var(--sig-h) * 3.9104); margin:calc(var(--sig-h) * -0.1100) calc(var(--sig-h) * -0.0875) calc(var(--sig-h) * -0.1935) calc(var(--sig-h) * -0.1670); color:#000;pointer-events:none} canvas.sig-ink{position:fixed;left:0;top:0;display:block;pointer-events:none;mix-blend-mode:difference} body.index-page #cc.cap-side,.af-viewer-cap.cap-side,#pageTitleCap.cap-side{ position:fixed!important;top:var(--cap-top,var(--sig-mid))!important;bottom:auto!important;left:var(--sig-r)!important;right:auto!important; transform:translateY(var(--cap-ty,-50%))!important;max-width:var(--cap-room)!important; justify-content:flex-start!important;text-align:left!important;white-space:nowrap} body.index-page #cc.cap-side .cap-txt,.af-viewer-cap.cap-side .cap-txt{text-align:left!important;white-space:nowrap} body.index-page #cc.cap-under,.af-viewer-cap.cap-under,#pageTitleCap.cap-under{ position:fixed!important;top:calc(var(--sig-bot) + 2px)!important;bottom:auto!important;left:var(--sig-cx)!important;right:auto!important; transform:translateX(-50%)!important;max-width:min(90vw,640px)!important;justify-content:center!important;text-align:center!important} body.index-page #cc.cap-under .cap-txt,.af-viewer-cap.cap-under .cap-txt{text-align:center!important} #pageTitleCap.cap-side{pointer-events:auto;padding:.3em .75em;border-radius:var(--r-pill);transition:background var(--dur-3) var(--ease)} .brand a::after{display:none} .searchwrap{grid-area:search;flex:1 1 260px;max-width:min(400px,28vw);display:flex;flex-direction:column;gap:.35rem;min-width:0;position:relative;justify-self:start} .search-row{display:flex;align-items:center;gap:.5rem;min-width:0;max-width:100%} .searchfield{ position:relative;display:flex;align-items:center; flex:0 0 auto;overflow:hidden; width:var(--icon-dim); height:var(--icon-dim); transition:width .35s var(--ease) .35s; } .searchfield:hover, .searchfield:focus-within, .searchwrap.search-active .searchfield{ width:clamp(140px,18vw,260px); transition:width .28s var(--ease) 0s; } .search-pill-icon{ position:absolute;z-index:2;pointer-events:none; display:flex;align-items:center;justify-content:center; width:20px;height:20px; left:50%;top:50%; transform:translate(-50%,-50%); transition:left .28s var(--ease),transform .28s var(--ease),opacity var(--dur-3) var(--ease); } .search-pill-icon svg{width:16px;height:16px;fill:rgba(var(--ink),.48);display:block;position:relative;z-index:1} .searchwrap .search{ position:relative;z-index:1;flex:1 1 auto;min-width:0; font:inherit;padding:.5rem 2.05rem .5rem .7rem; border-radius:1em;border:0px solid rgba(var(--haze),.25); background:transparent;color:#000;mix-blend-mode:normal;caret-color:#000;font-family:var(--ff-sans); opacity:0;transition:opacity var(--dur-2) var(--ease) .08s, padding-left .28s var(--ease); } .qclear{position:relative;right:.35rem;align-self:center;opacity:0;pointer-events:none;z-index:2} .gallery-chips{display:flex;gap:.3rem;padding:.25rem 0 .25rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;align-items:center;min-height:0} .gallery-chips[hidden]{display:none!important} .buttons{grid-area:buttons;flex:0 0 auto;display:flex;gap:.4rem;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-end;padding-top:0;padding-right:.2rem;position:relative} .homecol{display:flex;flex-direction:column;gap:.35rem;align-items:center;position:relative} @media (max-width:960px){ .site-header{padding:.65rem var(--ui-inset);gap:.55rem} .searchwrap{max-width:min(360px,38vw)} .buttons{gap:.32rem} .site-header{transition:background-color .25s var(--ease,ease),-webkit-backdrop-filter .25s,backdrop-filter .25s} .page-title-cap{transition:opacity .25s var(--ease,ease)} } @media (max-width:360px){ .searchwrap .search{padding-right:2.0rem} } @media (max-width:740px){ .site-header{grid-template-columns:auto auto;grid-template-areas:"brand buttons" "search search";row-gap:.55rem} .brand{justify-self:start} .searchwrap{max-width:none;min-width:0} .buttons{justify-content:flex-end} } .button{position:relative;display:inline-flex;place-content:center;place-items:center;inline-size:var(--icon-dim);block-size:var(--icon-dim);aspect-ratio:1;border-radius:50%;border:var(--ic-br);background:transparent;color:inherit;cursor:pointer;line-height:1;transition:transform var(--dur-3) var(--ease),color var(--dur-3) var(--ease)} .button::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--ic-bg);backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);transition:background-color var(--dur-3) var(--ease);z-index:0;pointer-events:none} @media (max-width:420px){ .button{zoom:1} .buttons{gap:.28rem} .search{min-width:120px} } .button svg{position:relative;z-index:1;display:block;inline-size:55%;block-size:55%;fill:#000;mix-blend-mode:normal} .button .glyph{position:relative;z-index:1;mix-blend-mode:normal;color:#000;font-style:normal} :where(html[data-tod-ink="light"]) .button svg{fill:var(--tx)} #themeIcon{display:flex;align-items:center;justify-content:center;font-size:max(var(--fs-min), calc(var(--icon-dim)*.48));line-height:1} .button:hover{transform:none;color:var(--ico-d,currentColor)} .button:hover svg{mix-blend-mode:normal;fill:var(--ico-glyph,white)} .button.active{transform:none;color:var(--ico-d,currentColor)} .button.artsy {--ico:rgba(147,51,234,.92);--ico-glyph:hsl(271,80%,91%)} .button.foundation {--ico:rgba(255,255,255,.95);--ico-glyph:hsl(0,0%,9%)} .button.instagram {--ico:rgba(225,29,143,.92);--ico-glyph:hsl(325,85%,90%)} .button.themetoggle{--ico:#000;--ico-glyph:#00dd00} .button.info {--ico:rgba(14,165,233,.92);--ico-glyph:hsl(199,80%,90%)} .button.gallery {--ico:rgba(16,185,129,.92);--ico-glyph:hsl(160,65%,88%)} .button.home {--ico:rgba(99,102,241,.92);--ico-glyph:hsl(239,75%,91%)} .button.scrolltop {--ico:rgba(139,92,246,.92);--ico-glyph:hsl(265,75%,92%)} .button.capture {--ico:rgba(12,242,0,.92);--ico-glyph:rgb(4,38,0)} #playBtn{--ico:rgba(34,197,94,.92);--ico-glyph:hsl(143,70%,88%)} .idx-side-next{--ico:rgba(148,163,184,.65);--ico-glyph:hsl(215,25%,18%)} .btn-close svg{fill:none;stroke:#000;stroke-width:2.5;stroke-linecap:round} button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .button.button--sm{ inline-size:var(--icon-dim-sm) !important;block-size:var(--icon-dim-sm) !important; aspect-ratio:1; font-size:max(var(--fs-min), calc(var(--icon-dim-sm) * .55));line-height:1; } @media(pointer:coarse){ .button.button--sm{min-width:28px;min-height:28px} } .info-toggle-wrap{ position:fixed; bottom:calc(var(--ui-inset) + var(--icon-dim-sm) / 2 + 0.125rem); left:var(--ui-inset); z-index:var(--z-cap); display:flex;align-items:center;gap:.35rem; pointer-events:none; transition:left var(--dur-4) var(--ease); } .info-toggle-wrap .button{pointer-events:auto} .button.scrolltop{display:none} .wrap{display:grid;gap:var(--gap);padding-inline:var(--inset);padding-block:calc(84px + 1.6em) var(--pad);grid-auto-flow:row dense;grid-template-columns:repeat(auto-fill,min(var(--tile-size,240px),100%));justify-content:center;align-items:start} .content,.gr{display:contents} .it{grid-column:span 1;min-width:0;background:transparent;border:none} .it:hover{cursor:zoom-in} .it:hover a,.it:hover img{cursor:pointer} .it figure{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;min-width:0} .gr .it{padding:clamp(18px,15%,48px) clamp(18px,15%,48px) 0;container-type:inline-size;position:relative} .gr .it figure{width:100%;height:auto} .gr .it .g{position:relative;flex:none;aspect-ratio:1/1;width:100%;padding:0;background:transparent} .gr .it .frame{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center} .gr .it .frame img{display:block;max-width:94%;max-height:94%;width:auto;height:auto;object-position:center;border:0;opacity:1} .gr .it .cap{flex-shrink:0} .it .frame img{view-transition-name:var(--vt-media,none)} .it .cap{view-transition-name:var(--vt-cap,none)} .work-hero img,.work-hero video{view-transition-name:var(--vt-media,none)} .g{position:relative;inline-size:100%;flex:1;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;min-height:0} .frame{position:relative;inline-size:100%;block-size:100%;display:grid;place-items:center} .frame img{display:block;max-inline-size:100%;max-block-size:100%;object-fit:contain;object-position:center;border:0} .tile-status.is-on{background:var(--ok,var(--ok))} .tile-status.is-hidden{background:var(--err,var(--err))} @keyframes af-part-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .tile-role-item.is-current{font-weight:600;color:var(--accent,var(--accent))} .tile-proj-thumb img{width:100%;height:100%;object-fit:contain;display:block} .tile-badge-ic svg{display:block} .af-menu-pics{display:flex;gap:.6rem;flex-wrap:wrap;padding:.4rem .6rem .2rem} .af-menu-pics--one{padding-top:.5rem} .af-menu-pic{display:flex;flex-direction:column;gap:.25rem;width:132px} .af-menu-pic img{width:132px;height:132px;object-fit:contain;background:rgba(var(--haze),.12);border-radius:var(--r-3);display:block} .af-menu-pic-none{display:flex;align-items:center;justify-content:center;width:132px;height:132px;background:rgba(var(--haze),.12);border-radius:var(--r-3);font:var(--fs-micro)/1 var(--ff-sans);opacity:.5} .af-menu-pic-lab{font:var(--fs-micro)/1.3 var(--ff-sans);opacity:.75;overflow-wrap:anywhere} .af-menu-who{color:inherit;text-decoration:none;width:152px;border-radius:var(--r-3);padding:2px} .af-menu-who img,.af-menu-who .af-menu-pic-none{width:148px;height:148px} .af-menu-who:hover{background:rgba(var(--haze),.14)} .af-menu-who-meta{font:var(--fs-micro)/1.3 var(--ff-sans);opacity:.55;overflow-wrap:anywhere} .af-menu-acts{display:flex;gap:.4rem;padding:.2rem .6rem .5rem} .filecard{width:100%;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(var(--haze),.35);border-radius:var(--r-6);font-size:var(--fs-ui);color:var(--txCap);text-align:center;padding:.75rem} .cap,.lbcap-shared{line-height:1.4;text-align:left;font-size:max(var(--fs-min), clamp(.75rem,.64rem + .25vi,1rem));color:var(--tx);font-family:var(--ff-sans);padding:.55rem var(--ui-inset) var(--pad)} .gr .it .cap{ position:static; opacity:1; margin:0; padding:.5rem var(--ui-inset) var(--pad); pointer-events:auto; text-align:left; overflow-wrap:anywhere; max-width:100%; line-height:1.45; padding-bottom:calc(var(--pad) + .18em); overflow-wrap:break-word; hyphens:none; } .cap a,.lbcap-shared a{text-decoration:underline;text-underline-offset:.15em} .gr .it:not([data-kind="project"]) .cap em{cursor:pointer;border-bottom:1px dotted transparent;transition:border-color var(--dur-2)} #grid{visibility:visible} .center-msg{display:none;text-align:center;padding:3rem 1rem;color:var(--txCap)} .center-msg button{margin-top:1rem;padding:.5rem .9rem;border-radius:var(--r-5);border:1px solid rgba(var(--haze),.4);background:transparent;color:inherit;cursor:pointer} ::selection{background:yellow;color:#000} ::marker{font-size: 1em;color: darkblue;} .site-footer{grid-column:1/-1;text-align:center;padding:2rem 1rem 3rem;font-family:var(--ff-sans);color:var(--tx);font-weight:300} .site-footer a{color:inherit;text-decoration:underline;text-underline-offset:.15em} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px} .hp-hidden{position:absolute;left:-9999px;height:0;width:0;overflow:hidden} html.index-page{height:auto} body.index-page{margin:0;overflow:auto;overscroll-behavior:none;background:var(--bg)} .hero-wrap{position:relative;height:100vh;height:100dvh;overflow:hidden} body.index-page #stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;touch-action:pan-y;overflow:hidden} body.index-page #canvas{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0;will-change:transform} body.index-page .layer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 1.3s var(--ease)} body.index-page .layer.show{opacity:1} body.index-page .slide{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;height:auto} body.index-page figure{margin:0} body.index-page .idx-side-next{position:fixed;top:50%;transform:translateY(-50%);z-index:var(--z-cluster)} body.index-page .idx-side-next{right:var(--ui-inset);transition:right .28s var(--ease)} @media (prefers-reduced-motion:reduce){ body.index-page .layer{transition:none} } body.index-page:not(.gallery-mode) .button.home, body.gallery-mode .button.gallery, body.gallery-page .button.gallery, body.info-page .button.info, body:not(.project-page) #backBtn{display:none !important} body:not(.index-page) #nextBtn{display:none !important} body:not(.info-page) .button.instagram, body:not(.info-page) .button.artsy{display:none !important} .button.text-btn{ inline-size:auto;block-size:auto;aspect-ratio:auto;border-radius:var(--r-pill); padding:.22em .7em;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase; text-decoration:none;white-space:nowrap; color:var(--txCap,rgba(255,255,255,.45));font-family:inherit } .button.text-btn .glyph{display:none} @media(max-width:600px){ .button.text-btn{display:none} } body.project-page #backBtn{--ico:rgba(99,102,241,.92);--ico-glyph:hsl(239,75%,91%)} .site-back{display:none; --ico:rgba(99,102,241,.92);--ico-glyph:hsl(239,75%,91%)} body.work-page .site-back{display:inline-flex;align-items:center} body.has-trail:not(.admin-mode):not(.project-page) .site-back{display:inline-flex;align-items:center} body.has-back:not(.project-page) .site-back{display:inline-flex;align-items:center} .page-min{display:none} body.gallery-index-page .page-min, body.writing-index-page .page-min, body.article-page .page-min, body.info-page .page-min, body.work-page .page-min, body.edition-page .page-min, body.project-page .page-min, body.index-page.gallery-mode .page-min{display:inline-flex;align-items:center} @keyframes af-trail-fadein{ from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} } .article{ max-width:min(78ch, calc(100vw - 3rem)); margin:2.25rem auto 2.75rem auto; padding:0 1.5rem; font-size: var(--fs-lead); color:var(--tx); line-height:1.65; text-align:justify; } .article h1{margin:0 0 .8em 0} .article h2,.article h3{margin:1.6em 0 .6em 0} .article p{margin:0 0 1.05em 0;line-height:1.65} body.info-page main{padding-block:calc(84px + 1.2rem) var(--pad,2rem)} @media(max-width:740px){ body.info-page main{padding-top:calc(118px + .5rem)} } @media(max-width:375px){ body.info-page main{padding-top:calc(96px + .5rem)} } .info-pill-nav{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 auto 2.5rem;padding-top:.5rem;max-width:1140px;justify-content:center} body.info-page .info-pill-nav{display:none} @media(max-width:700px){ .info-pill{padding:.28em .85em} } .info-layout{display:grid;grid-template-columns:1fr clamp(300px,28vw,440px);gap:0 clamp(2rem,4vw,5rem);align-items:start;max-width:1340px;margin-left:auto;margin-right:max(0px,calc((100% - 1140px) / 2))} .info-main-col{max-width:min(88ch,100%)} .info-aside{align-self:start;font-size:var(--fs-prose);line-height:1.65} @media(max-width:900px){ .info-layout{grid-template-columns:1fr clamp(260px,36vw,380px);gap:0 2rem} } @media(max-width:700px){ .info-layout{grid-template-columns:1fr} .info-main-col{max-width:100%} .info-aside{position:static;margin-top:3.5rem;border-top:1px solid rgba(var(--haze),.13);padding-top:2.5rem;padding-inline:1.5rem} .info-pill-nav{margin-bottom:2rem} } .info-portrait{margin:3rem 0 3.5rem;padding:0 clamp(1rem,5%,3rem)} .info-portrait img{width:100%;height:auto;display:block} .info-portrait figcaption{margin-top:.85rem;padding:0;font-size:var(--fs-meta);font-weight:300;line-height:1.5;font-family:var(--ff-sans)} @media(max-width:700px){ .info-portrait img{max-height:65vh;object-fit:contain} } .info-aside .info-portrait{margin:0 0 2rem;padding:0} body.index-page #cc{ position:fixed; left:calc(var(--ui-inset) + var(--icon-dim-sm) + .35rem); bottom:var(--ui-inset); z-index:var(--z-cap); max-width:calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 1.2em - (var(--icon-dim) * 3 + 1.2rem)); min-height:var(--icon-dim); display:flex;align-items:center; padding:.3em .75em; border-radius:var(--r-pill); background:transparent; pointer-events:auto; cursor:pointer; transition:left var(--dur-4) var(--ease),max-width var(--dur-4) var(--ease); } body.index-page #cc::before{ content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit; background:var(--ic-bg); backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); transition:background var(--dur-3) var(--ease),backdrop-filter var(--dur-3) var(--ease),-webkit-backdrop-filter var(--dur-3) var(--ease); z-index:0; } body.index-page #cc .cap-txt{ position:relative;z-index:1; color:#000;mix-blend-mode:normal; font-size:max(var(--fs-min), clamp(12px,1vw,14px));line-height:1.4;text-align:left; white-space:normal;word-break:break-word;overflow-wrap:break-word; transition:color var(--dur-3) var(--ease); } body.index-page #cc{cursor:pointer} body.no-scroll{overflow:hidden} @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important} } .skip-link{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;top:auto;left:auto} .skip-link:focus{position:fixed!important;top:calc(env(safe-area-inset-top) + .5rem)!important;left:.75rem!important;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;margin:0;padding:.5rem 1rem;background:var(--bg);color:var(--tx);border-radius:var(--r-5);border:1px solid rgba(var(--haze),.35);font-family:var(--ff-sans);font-size:var(--fs-ui);white-space:nowrap;text-decoration:none;z-index:var(--z-skip)} #tileSlider,#projTileSlider{ -webkit-appearance:none;appearance:none; height:2px;width:clamp(52px,6.5vw,100px); border-radius:var(--r-pill); background:rgba(var(--haze),.18); cursor:pointer;flex-shrink:0;align-self:center; transform:scaleX(-1); outline:none } #tileSlider::-webkit-slider-thumb,#projTileSlider::-webkit-slider-thumb{ -webkit-appearance:none; width:12px;height:12px;border-radius:50%; background:var(--tx,#000);opacity:.55; border:none;box-shadow:none; cursor:pointer; transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease) } @media (max-width:820px){ #tileSlider{display:none} } .button{inline-size:var(--icon-dim);block-size:var(--icon-dim);font-size:max(var(--fs-min), calc(var(--icon-dim) * .44));line-height:1} .button svg{width:60%;height:60%;display:block} .navcount{min-width:2.1em;padding:.22em .55em;border-radius:var(--r-pill);border:var(--ic-br);background:var(--ic-bg);backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);font-family:var(--ff-sans);font-size:var(--fs-meta);line-height:1;color:inherit;display:flex;align-items:center;justify-content:center;pointer-events:none} .button.is-hidden,.navcount.is-hidden{visibility:hidden} body.index-page:not(.gallery-mode) .button.scrolltop{display:none!important} body.index-page{overflow:hidden} .gallery-mount{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;background:var(--bg);z-index:1;padding-top:calc(env(safe-area-inset-top) + 3.2rem)} .gallery-mount[hidden]{content-visibility:hidden;contain:strict} @container (min-width: 28em){ .gr .it{aspect-ratio:unset} .gr .it figure{height:auto} .gr .it .g{flex:none;width:100%;aspect-ratio:auto;position:static} .gr .it .frame{position:static;display:block} .gr .it .frame img{width:100%;height:auto;max-height:none} } .info-article{max-width:min(78ch, calc(100vw - 3rem));font-size:var(--fs-lead);line-height:1.55;text-align:left} .info-pill{display:inline-flex;align-items:center;padding:.35em 1em;border-radius:var(--r-pill);border:var(--ic-br);background:var(--ic-bg);color:var(--txCap);font-family:var(--ff-sans);font-size:var(--fs-meta);letter-spacing:.02em;backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-1)} .info-pill:hover{background:rgba(160,160,160,.14);color:var(--tx)} .info-pill.active,[aria-current="location"].info-pill{background:var(--tx);color:var(--bg)} .info-section{margin-bottom:3.5rem} .info-section h2{font-size:var(--fs-title);font-weight:600;letter-spacing:normal;text-transform:none;opacity:1;margin:0 0 1.2rem;padding:2.5rem 0 0;border:none} .info-practice{border-top:1px solid rgba(var(--haze),.12);padding-top:2rem} .info-practice p,.info-section p,.info-section li{font-size:inherit;line-height:inherit} .info-article p{padding:.45em 0} .cv-items p{margin:0 0 .3rem;line-height:1.55} .cv-items a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--haze),.38)} .cv-items a:hover{border-bottom-color:currentColor} .contact-section p,.contact-artsy{font-size:inherit;line-height:inherit} .contact-email-link{color:inherit;font-weight:400;text-decoration:none;border-bottom:1px solid rgba(var(--ink),.30)} .contact-email-link:hover{opacity:1;border-bottom-color:currentColor} .cf-input{font:inherit;font-size:var(--fs-ui);background:rgba(var(--haze),.06);border:1px solid rgba(var(--ink),.22);border-radius:var(--r-3);padding:.5em .65em;color:var(--tx);outline:none;transition:border-color var(--dur-2),background var(--dur-2);-webkit-appearance:none} .cf-input:focus{border-color:rgba(var(--ink),.5);background:rgba(var(--haze),.08);outline:none} .cf-submit{all:unset;cursor:pointer;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;padding:.65em 1.4em;border:1px solid rgba(var(--haze),.4);border-radius:var(--r-2);width:fit-content;transition:border-color .18s,opacity .18s,background .18s;opacity:.75} .cf-submit:hover{opacity:1;border-color:currentColor;background:rgba(var(--haze),.08)} .info-aside h2{font-size:var(--fs-lead);font-weight:600;padding:0;margin:0 0 .8rem} .info-aside .subscribe-section{border-top:1px solid rgba(var(--haze),.12);padding-top:2rem;margin-top:2.5rem} .subscribe-section p{font-size:inherit;line-height:inherit} @media(max-width:900px){ .sub-field-row{flex-direction:column;gap:.6rem;align-items:stretch} } .subscribe-form{margin:.5rem 0 0} .sub-input-row{display:flex;flex-direction:column;gap:.35rem} .sub-label{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--tx)} .sub-field-row{display:flex;align-items:flex-end;gap:1.2rem} .sub-email-input{flex:1;min-width:0} .sub-status{margin:.8rem 0 0;font-size:var(--fs-meta);padding:.5rem .8rem;border-radius:var(--r-2)} .sub-status,.sub-field-row{transition:opacity var(--dur-5) var(--ease)} .info-aside .music-section{border-top:1px solid rgba(var(--haze),.12);padding-top:2rem;margin-top:2.5rem;scroll-margin-top:calc(84px + 1.5rem)} .af-music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:0;padding:0;list-style:none} .af-music-grid>li{display:contents} .af-music-cover{all:unset;display:block;cursor:pointer;position:relative;aspect-ratio:1 / 1;overflow:hidden;border-radius:var(--r-1);background:rgba(var(--ink),.04);transition:outline-color .18s var(--ease);outline:1px solid transparent} .af-music-cover img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .18s var(--ease),transform var(--dur-4) var(--ease)} .af-music-cover:focus-visible{outline-color:currentColor;outline-offset:2px} .af-music-panels{margin-top:8px} .af-music-panel{ background:rgba(var(--haze),.06); border-top:0 solid rgba(var(--haze),.18); border-bottom:0 solid rgba(var(--haze),.18); padding:0 1rem; scroll-margin-top:calc(84px + 1.5rem); overflow:hidden; box-sizing:border-box; height:0; margin:0; opacity:0; visibility:hidden; transition:height .28s var(--ease), padding-block .28s var(--ease), border-width .28s var(--ease), opacity .22s var(--ease), visibility 0s linear .28s; will-change:height; } .af-music-panel[data-open="true"]{ opacity:1; visibility:visible; height:auto; padding-top:.85rem; padding-bottom:1rem; border-top-width:1px; border-bottom-width:1px; transition:height .28s var(--ease), padding-block .28s var(--ease), border-width .28s var(--ease), opacity .22s var(--ease), visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce){ .af-music-panel{transition:none} } .af-music-panel-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .65rem} .af-music-panel-date{font-size:var(--fs-prose);font-weight:500;letter-spacing:.02em;font-family:var(--ff-sans)} .af-music-chips{display:inline-flex;flex-wrap:wrap;gap:.35rem;flex:1;margin:0} .af-music-chip{display:inline-flex;align-items:center;gap:.28em;font-family:var(--ff-sans);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;padding:.35em .7em;border:1px solid rgba(var(--haze),.35);border-radius:var(--r-2);text-decoration:none;color:inherit;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)} .af-music-chip:hover,.af-music-chip:focus-visible{border-color:currentColor;background:rgba(var(--haze),.1)} .af-music-panel-close{all:unset;cursor:pointer;width:1.8em;height:1.8em;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:var(--fs-lead);line-height:1;opacity:.55;transition:opacity var(--dur-2) var(--ease),background var(--dur-2) var(--ease);margin-left:auto;font-family:var(--ff-sans)} .af-music-panel-close:hover,.af-music-panel-close:focus-visible{opacity:1;background:rgba(var(--haze),.15)} .af-music-tracks{ list-style:none; margin:0; padding:0; counter-reset:af-track; font-size:var(--fs-meta); line-height:1.4; font-family:var(--ff-serif); } .af-music-tracks li{ position:relative; padding:.35em 0 .35em 2.4em; border-top:1px solid rgba(var(--haze),.09); counter-increment:af-track; } .af-music-tracks li:first-child{border-top:none} .af-music-tracks li::before{ content:counter(af-track) "."; position:absolute; left:0; top:.35em; width:2em; text-align:right; font-variant-numeric:tabular-nums; font-family:var(--ff-sans); font-size:var(--fs-ui); opacity:.55; } .af-music-tracks li b{font-weight:600;margin-right:.2em} .af-music-tracks li em{font-style:italic;font-weight:300;opacity:.85} .info-hr{border:none;border-top:1px solid rgba(var(--haze),.13);margin:3rem 0} .thanks-section{font-weight:300;border-top:1px solid rgba(var(--ink),.12);padding-top:2.5rem;margin-top:3.5rem} .info-layout{padding-bottom:5rem} @keyframes vp-in{from{opacity:0;transform:scaleY(.95);transform-origin:top}to{opacity:1;transform:none}} .vp-btn svg{width:1.1em;height:1.1em;fill:currentColor;display:block;pointer-events:none} @media(max-width:380px){ .vp-popout svg,.vp-fs svg{width:.95em;height:.95em} } .tile-video-wrap video{flex:1;width:100%;height:calc(100% - 2rem);object-fit:contain;display:block} .work-hero-video-wrap{position:relative;width:100%;background:#000;line-height:0} .work-hero-video{width:100%;max-height:70vh;object-fit:contain;display:block;cursor:pointer} .work-video-controls{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;padding:.3rem .4rem;background:rgba(var(--ink),.55)} .work-vc-btn{display:grid;place-items:center;width:1.8rem;height:1.8rem;border:none;border-radius:var(--r-2);background:transparent;color:#fff;cursor:pointer;font-size:var(--fs-prose);padding:0;transition:background var(--dur-1)} .work-vc-btn:hover,.work-vc-btn:focus-visible{background:rgba(255,255,255,.18)} .af-move-due.is-late{color:var(--err,var(--err));opacity:1;font-weight:600} .af-move-row input[type=text]{flex:1 1 9rem;min-width:7rem} .af-move-row input,.af-move-row select{font-size:var(--fs-info);padding:.2rem .35rem; border:1px solid rgba(var(--ink),.18);border-radius:var(--r-1);background:var(--bg);color:inherit} body.index-page .site-header, body.index-page .idx-controls, body.index-page .info-toggle-wrap, body.index-page .idx-side-next{transition:opacity .8s var(--ease),visibility .8s var(--ease)} body.index-page #cc{transition:opacity .8s var(--ease)} body.index-page.ui-hidden .site-header, body.index-page.ui-hidden .idx-controls, body.index-page.ui-hidden .info-toggle-wrap, body.index-page.ui-hidden .idx-side-next{opacity:0;visibility:hidden;pointer-events:none} body.gallery-mode.ui-hidden .site-header{opacity:1;visibility:visible;pointer-events:auto} body.project-page main{padding-block:calc(72px + 1.5rem) var(--pad)} body.project-page .proj-back{display:none} body.project-page.has-back .proj-back{display:flex} body.project-page .proj-header{max-width:min(72ch,calc(100vw - 3rem));margin:0 auto 1.2rem;padding:0 var(--inset)} body.project-page .proj-title{font-size:max(var(--fs-min), clamp(1.4em,3vw,2em));font-weight:400;letter-spacing:.02em;margin-bottom:6px;line-height:1.2} body.project-page .proj-meta{font-size:var(--fs-ui);color:var(--txCap);line-height:1.6;font-family:var(--ff-sans)} body.project-page .proj-meta span{display:inline} body.project-page .proj-meta .sep{margin:0 6px;opacity:.5} body.project-page .proj-lede{max-width:min(62ch,calc(100vw - 3rem));margin:0 auto 2rem;padding:0 var(--inset);font-size:var(--fs-ui);line-height:1.65;color:var(--txCap)} body.project-page .proj-lede p{margin-bottom:.8em} body.project-page .proj-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);padding:0 var(--inset);max-width:1600px;margin:0 auto 2rem;align-items:start} body.project-page .proj-hero-img{position:sticky;top:calc(72px + 1.5rem)} body.project-page .proj-hero:not(.proj-hero--publication) .proj-hero-text{order:1} body.project-page .proj-hero-lead{order:2;position:sticky;top:calc(72px + 1.5rem)} body.project-page .proj-hero-lead.gr{display:block;padding:0;margin:0} body.project-page .proj-hero-text{padding-top:.5rem} body.project-page .proj-article{margin-top:1.5rem} body.project-page .proj-article-label{font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.08em;color:var(--txCap);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(var(--haze),.15);font-family:var(--ff-sans)} body.project-page .proj-article-body{font-size:var(--fs-ui);line-height:1.65;text-align:justify} body.project-page .proj-article-body p{margin-bottom:.8em} body.project-page .proj-article-source{font-size:var(--fs-meta);color:var(--tx);font-weight:300;margin-top:.5rem;font-style:italic} @media(max-width:800px){ body.project-page .proj-hero{grid-template-columns:1fr;gap:1.5rem} body.project-page .proj-hero-img{position:static} } body.project-page .proj-gallery{padding:0 var(--inset);max-width:1800px;margin:0 auto;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,min(var(--tile-size,240px),100%));justify-content:center;align-items:start} body.project-page .proj-events{font-size:var(--fs-ui);color:var(--txCap);padding:0 var(--inset);margin:0 auto 1rem;max-width:min(72ch,calc(100vw - 3rem));font-family:var(--ff-sans)} body.project-page .proj-sections{max-width:min(72ch,calc(100vw - 3rem));margin:2rem auto 0;padding:0 var(--inset)} body.project-page .proj-hero-text .proj-sections{max-width:none;margin:1.6rem 0 0;padding:0} body.project-page .proj-section{margin-bottom:28px} body.project-page .proj-section-header{font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.08em;color:var(--txCap);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(var(--haze),.15);display:flex;align-items:center;gap:8px;font-family:var(--ff-sans)} body.project-page .proj-section-source{font-size:var(--fs-ui);color:var(--txCap);font-style:italic;text-transform:none;letter-spacing:0;opacity:.7} body.project-page .proj-section-body{font-size:var(--fs-ui);line-height:1.65;text-align:justify} body.project-page .proj-section-body p{margin-bottom:.8em} @media(max-width:600px){ .article, body.project-page .proj-article-body, body.project-page .proj-section-body{text-align:left} } body.sidebar-open #cc{left:calc(var(--sidebar-w) + var(--ui-inset) + var(--icon-dim-sm) + .35rem);transition:left var(--dur-4) var(--ease)} body.sidebar-open #cc{max-width:calc(100vw - var(--sidebar-w) - var(--ui-inset) * 2 - var(--icon-dim-sm) - .35rem - (var(--icon-dim) * 5 + 2rem))} .af-sec{border-bottom:1px solid var(--surface-border,#eee)} .af-sec:last-child{border-bottom:none} .af-sec-hdr{display:flex;align-items:center;gap:4px;width:100%;padding:7px var(--ui-inset);margin:0;border:none;background:none;cursor:pointer;font:600 max(var(--fs-min), .65rem)/1 var(--ff-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--surface-tx,#000);transition:background .1s} .af-sec-hdr:hover{background:rgba(var(--ink),.03)} .af-sec-arrow{display:inline-block;font-size:var(--fs-micro);transition:transform var(--dur-2);color:var(--surface-tx,#000);font-weight:300} .af-sec-body{display:none;padding:0 var(--ui-inset) 10px} .af-sec-hdrow{display:flex;align-items:center;gap:2px} .af-sec-hdrow .af-sec-hdr{flex:1 1 auto;min-width:0} .af-sec-eye{flex:0 0 auto;margin-right:var(--ui-inset)} .af-sec-eye:hover{opacity:1} .af-sec-eye.is-private{opacity:.9} .af-sec.open .af-sec-body{display:block} .af-sec--flat > .af-sec-hdr{cursor:default} .af-sec--flat > .af-sec-body{display:block} .af-meta-table{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font:var(--fs-micro)/1.5 var(--ff-sans)} .af-meta-label{color:var(--surface-tx-2,#555);font-weight:300;white-space:nowrap} .af-meta-val{color:var(--surface-tx,#000);word-break:break-word} .af-tag-chips{display:flex;flex-wrap:wrap;gap:4px;padding-top:2px} .af-tag-chip{padding:3px 8px;border-radius:var(--r-7);border:1px solid rgba(var(--ink),.18);background:rgba(var(--ink),.06);color:var(--tx,#000);font:var(--fs-micro)/1.3 var(--ff-sans);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);white-space:nowrap} .af-tag-chip:hover{background:var(--accent);border-color:var(--accent);color:#fff} .work-versions{--af-ver-gcol-min:clamp(90px,18%,160px);display:grid;grid-template-columns:repeat(auto-fill,min(var(--af-ver-gcol-min),100%));justify-content:start;gap:var(--gap,.75rem);padding:.25rem 0 0} .work-versions .it{padding:clamp(8px,8%,20px);container-type:inline-size;position:relative;min-width:0} .work-versions .it .g{position:relative;flex:none;aspect-ratio:1/1;width:100%;padding:0;background:transparent;display:flex;align-items:center;justify-content:center} .work-versions .it .frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .work-versions .it .cap{flex-shrink:0;padding:.25rem 0 .35rem;margin:0;font:max(var(--fs-min), clamp(11px,.85vw,13px))/1.35 var(--ff-sans);color:var(--tx);text-align:center;opacity:0;transition:opacity var(--dur-3) var(--ease);background:transparent} .work-versions .it:hover .cap,.work-versions .it:focus-within .cap{opacity:1} .work-versions .it.af-ver-primary .cap{opacity:1} .af-drawer .work-versions{--af-ver-gcol-min:clamp(70px,28%,120px);grid-template-columns:repeat(auto-fill,min(var(--af-ver-gcol-min),100%));justify-content:start;gap:.4rem} .work-versions-controls{display:flex;justify-content:flex-end;align-items:center;padding:.1rem 0 .3rem;margin:0} .work-versions-slider{-webkit-appearance:none;appearance:none;height:3px;width:clamp(56px,6vw,90px);border-radius:var(--r-pill);background:rgba(var(--haze),.3);cursor:pointer;accent-color:var(--lnk);flex-shrink:0;align-self:center;transform:scaleX(-1)} .af-drawer .work-versions-controls{padding:.1rem 0 .2rem} .af-ver-strip .af-ver-btn img{width:100%;height:100%;object-fit:contain;display:block} .af-proj-mini-thumb img{width:100%;height:100%;object-fit:contain;display:block} .proj-info-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--txCap,#888);font-size:var(--fs-micro);cursor:pointer;padding:0 4px;margin-left:6px;vertical-align:middle;opacity:.5;transition:opacity var(--dur-2)} .proj-info-btn:hover,.proj-info-btn:focus-visible{opacity:1} @keyframes af-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (prefers-reduced-motion:no-preference){ @keyframes af-tile-in{from{opacity:0}to{opacity:1}} .gr .it{animation:af-tile-in .45s var(--ease) both} } @keyframes af-spin{to{transform:rotate(360deg)}} @media(max-width:767px){ body.sidebar-open #cc{left:calc(var(--ui-inset) + var(--icon-dim-sm) + .35rem);max-width:calc(100vw - var(--ui-inset) * 2 - var(--icon-dim-sm) - .35rem - (var(--icon-dim)*5 + 2rem))} } .work-print-order{background:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.15);border-radius:var(--r-2);color:var(--tx);padding:.3rem .7rem;font:var(--fs-meta)/1 inherit;cursor:pointer;transition:background var(--dur-2),color var(--dur-2)} .work-print-order:hover{background:rgba(var(--ink),.12);color:var(--tx)} .af-sec-config-panel{padding:4px 0 8px} .af-sec-config-intro{font:var(--fs-micro)/1.5 var(--ff-sans);color:var(--surface-tx,#000);font-weight:300;margin:0 0 12px;padding:0 2px} .af-sec-config-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px} .af-sec-config-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-3);background:rgba(var(--ink),.03);border:1px solid rgba(var(--ink),.08);cursor:default;transition:background .1s} .af-sec-config-item.drag-over{background:rgba(0,102,204,.08);border-color:rgba(0,102,204,.3)} .af-sec-config-handle{font:var(--fs-prose)/1 var(--ff-sans);color:var(--surface-tx-2,#555);font-weight:300;cursor:grab;flex-shrink:0;user-select:none;letter-spacing:-.1em;padding:0 2px} .af-sec-config-label{flex:1;font:var(--fs-micro)/1.3 var(--ff-sans);color:var(--surface-tx,#000)} .af-sec-config-hidden .af-sec-config-label{color:var(--surface-tx,#000);font-weight:300;text-decoration:line-through} .af-sec-config-eye{background:none;border:none;padding:2px 4px;border-radius:var(--r-2);color:var(--surface-tx-2,#555);font-weight:300;font:var(--fs-meta)/1 var(--ff-sans);cursor:pointer;flex-shrink:0;transition:font-weight .1s} .af-sec-config-eye:hover{font-weight:500} .af-sec-config-hidden .af-sec-config-eye{color:var(--surface-tx-2,#555);font-weight:300} @media(max-width:375px){ :root{--inset:clamp(8px,3vw,14px);--gap:4px} .site-header{padding:.55rem .65rem;gap:.4rem} .searchwrap{max-width:calc(100vw - 12rem)} } body.gallery-mode .idx-side-next, body.gallery-mode .idx-controls, body.gallery-mode .idx-info-toggle{display:none!important} .idx-controls{ position:fixed; bottom:var(--ui-inset); right:var(--ui-inset); z-index:var(--z-cluster); display:flex; flex-direction:column; align-items:flex-end; gap:var(--ui-gap); transition:opacity .8s var(--ease),visibility .8s var(--ease),right .28s var(--ease); } @media(max-width:420px){ .idx-controls{gap:.28rem} } .idx-cluster-top{ display:flex;flex-direction:row;align-items:center;gap:var(--ui-gap); } .idx-cluster-bot{ display:flex;flex-direction:row;align-items:flex-end;gap:var(--ui-gap); } .idx-dzi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.25rem; align-items:center; } .idx-dzi-grid .button{pointer-events:auto} body.index-page .idx-side-next.idx-inrow{ position:relative;transform:none;inset:auto;left:auto;right:auto;top:auto;z-index:auto; } .next-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .next-wrap .navcount{ position:absolute;bottom:-3px;left:50%;pointer-events:auto;z-index:1; display:inline-flex;align-items:center;gap:.34em; min-width:unset;padding:.12em .55em;border:1px solid var(--surface-border); border-radius:var(--r-pill);overflow:hidden;isolation:isolate; background:var(--ic-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:max(var(--fs-min), .56em);line-height:1.6;letter-spacing:.02em;white-space:nowrap; cursor:pointer;opacity:1; transform:translateX(-50%) scale(1);transform-origin:50% 100%; transition:transform var(--dur-4) var(--ease),border-color var(--dur-4) var(--ease), padding var(--dur-4) var(--ease),opacity var(--dur-3) var(--ease); } .next-wrap .navcount::before{ content:'';position:absolute;inset:0;z-index:var(--z-behind);border-radius:inherit; background:var(--edit);transform:scaleX(var(--lockfill,0));transform-origin:0 50%; transition:transform var(--dur-5) var(--ease); } .next-wrap .navfill{ position:absolute;inset:0;border-radius:inherit;background:var(--edit); transform:scaleX(0);transform-origin:0 50%;pointer-events:none; transition:transform var(--dur-5) var(--ease); } .next-wrap .navcount .glyph,.next-wrap .navlock{position:relative} .next-wrap .navcount .glyph{ display:inline-block; transition:color var(--dur-3) var(--ease),transform var(--dur-4) var(--ease); } .next-wrap .navlock{ width:1.05em;height:1.05em;flex:0 0 auto;display:block;overflow:visible; fill:none;stroke:currentColor;stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round; } .next-wrap .navlock-shackle{ transform-origin:12px 12px;transform:translateY(-1.6px) rotate(-14deg); transition:transform var(--dur-5) var(--ease),opacity var(--dur-3) var(--ease); opacity:.75; } .next-wrap .navlock-body{transition:opacity var(--dur-3) var(--ease);opacity:.75} .next-wrap .navcount:hover .navlock-shackle, .next-wrap .navcount:hover .navlock-body{opacity:1} .next-wrap .navcount:hover{transform:translateX(-50%) scale(1.06)} .next-wrap .navcount.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) scale(.86)} .next-wrap .navcount--locked{--lockfill:1;border-color:var(--edit);padding-left:.7em;padding-right:.7em} .next-wrap .button{transition:box-shadow var(--dur-4) var(--ease)} .play-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .play-wrap[hidden]{display:none} .play-wrap .navcount{ position:absolute;bottom:-6px;right:-8px; min-width:unset;padding:.15em .45em;border:0;border-radius:.4em; background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none; font-size:max(var(--fs-min), .6em);opacity:1; } @media (max-width: 639px){ .gr .it { padding: clamp(4px, 3%, 10px); } } .work-hero{ position:relative;display:flex;align-items:center;justify-content:center; width:100%;padding:1.5rem 1rem 0;background:transparent;z-index:auto; } .work-hero img,.work-hero video{ max-width:100%;max-height:75vh;width:auto;height:auto; object-fit:contain;display:block; } .work-nav{ position:relative;left:auto;bottom:auto;transform:none; z-index:auto;display:flex;gap:.5rem;align-items:center;justify-content:center; flex-wrap:wrap;margin:.75rem auto .25rem; } .work-nav a,.work-nav button,.af-work-admin-bar button{all:unset;cursor:pointer;padding:.3em .9em;border-radius:var(--r-pill);border:var(--ic-br);background:var(--ic-bg);color:var(--tx);font-size:var(--fs-meta);letter-spacing:.04em;backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);white-space:nowrap} .work-nav a:hover,.work-nav button:hover,.af-work-admin-bar button:hover{background:rgba(160,160,160,.14)} .af-work-admin-bar button{ font-size:var(--fs-micro); padding:.18em .6em; letter-spacing:.03em; } .work-cap{ position:relative;left:auto;bottom:auto;transform:none; z-index:auto;max-width:min(90vw,640px);margin:.5rem auto 0; padding:.4em .85em;background:transparent;color:var(--tx); font-size:var(--fs-meta);text-align:center; white-space:normal;overflow:visible;text-overflow:clip; border-radius:var(--r-3);pointer-events:auto; display:flex;gap:.5em;align-items:center;justify-content:center;flex-wrap:wrap; } .af-module--work .work-cap, .af-module--edition .work-cap{ font-size:var(--fs-prose); gap:.45em; line-height:1.45; text-align:center; justify-content:center; } .af-module--work .work-cap--above, .af-module--edition .work-cap--above{ margin:.2rem auto 1rem; } .af-module--work .af-sec-hdr, .af-module--edition .af-sec-hdr{ font-size:var(--fs-meta); letter-spacing:.07em; } .af-module--work .af-meta-table, .af-module--edition .af-meta-table{ font-size:var(--fs-ui); line-height:1.6; gap:5px 14px; } .af-module--work .af-meta-label, .af-module--edition .af-meta-label{ font-weight:400; } .work-dzi-tag{ display:inline-flex;align-items:center; padding:0 .55em;border-radius:var(--r-pill); font-size:var(--fs-micro);letter-spacing:.06em; background:rgba(255,255,255,.08);color:var(--tx,#ccc); border:1px solid rgba(255,255,255,.14); pointer-events:auto;cursor:default; white-space:nowrap; } .work-page .site-header{z-index:var(--z-header)} body.work-page main{padding-block:calc(72px + 1rem) var(--pad,1.5rem)} @media (max-width:740px){ body.work-page main{padding-top:calc(150px + 1rem)} body.project-page main{padding-top:calc(150px + 1.5rem)} } .work-below{ position:relative;z-index:5; margin-top:1rem; background:var(--bg); container-type:inline-size; } .work-layout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(24rem,1fr)); column-gap:3rem; row-gap:0; max-width:110rem; margin:0 auto; padding:1.5rem var(--inset) 3rem; } .work-col--info, .work-col--editions{ display:contents; } .work-col--info > *, .work-col--editions > *{ order:50; min-width:0; } .work-layout .af-record-lines{ order:1; } .work-layout [data-sec-id="work-share"]{ order:41; } @media (min-width:1100px){ .has-pagerail .work-below{ padding-left:236px; } .has-pagerail .work-layout{ padding-left:0; } } @container (min-width:64rem){ .work-family-col{ position:sticky; top:5rem; align-self:start; max-height:calc(100vh - 6rem); overflow:auto; } } .work-layout--flow{ display:block; columns:24rem 3; column-gap:3rem; } .work-layout--flow > *{ break-inside:avoid; margin:0 0 1.4rem; display:block; min-width:0; } .work-layout--flow > .af-record-lines{ break-inside:auto; } @container(max-width:1023px){ .work-layout--flow{ columns:1; } } .work-toolbelt{ margin:.6rem auto 0; } .work-toolbelt .work-nav{ margin:.4rem auto 0; } .work-layout .af-record-lines{ max-width:44rem; } .af-module--work .af-meta-table input, .af-module--work .af-meta-table select, .af-module--work .af-meta-table textarea, .af-module--work .af-meta-row{ max-width:30rem; } .work-col--info, .work-col--editions{ min-width:0; } @container(max-width:1023px){ .work-layout{ grid-template-columns:1fr; padding-left:5%; padding-right:5%; } } @container(max-width:599px){ .work-layout{ padding-left:1rem; padding-right:1rem; } } .work-col--info .af-sec, .work-col--editions .af-sec{border-bottom:1px solid rgba(var(--ink),.09)} .work-col--info .af-sec:last-child, .work-col--editions .af-sec:last-child{border-bottom:none} .work-col--info .af-sec-hdr, .work-col--editions .af-sec-hdr{color:var(--tx);padding:.6rem 0;gap:.4rem} .work-col--info .af-sec-body, .work-col--editions .af-sec-body{padding:0 0 .75rem} .work-col--info .af-meta-table, .work-col--editions .af-meta-table{grid-template-columns:max-content 1fr;gap:3px 12px} .af-pagerail{display:none} [id^="afsec-"],[data-rail-item]{scroll-margin-top:calc(var(--header-h,56px) + 1rem)} .af-pagerail-inner{position:sticky;top:calc(var(--header-h,56px) + 1.5rem)} .af-pagerail-title{margin:0 0 .4rem;padding-left:.9rem;font:600 var(--fs-micro)/1 var(--ff);letter-spacing:.06em;text-transform:uppercase;color:#000;opacity:.55} .af-pagerail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .af-pagerail-link{display:block;padding:.18rem .9rem;font:var(--fs-meta)/1.35 var(--ff);color:#000;text-decoration:none;opacity:.6;border-left:2px solid transparent;transition:opacity var(--dur-2),border-color var(--dur-2)} .af-pagerail-link:hover{opacity:1} .af-pagerail-link.is-active{opacity:1;font-weight:600;border-left-color:currentColor} @container (min-width:1120px){ .work-below > .af-pagerail{ display:block;position:absolute;top:0;bottom:0;left:0; width:calc((100% - 680px) / 2 - 1rem);max-width:220px; } } .af-module--project{container-type:inline-size} body.project-page .proj-sections{position:relative} .af-module--project .proj-hero-text:has(> .af-pagerail){position:relative} @container (min-width:1100px){ .af-module--project .proj-sections > .af-pagerail{ display:block;position:absolute;top:0;bottom:0;right:100%; margin-right:1.5rem;width:190px; } .af-module--project .proj-hero-text > .af-pagerail{ display:block;position:absolute;top:0;bottom:0;right:100%; margin-right:1.5rem;width:190px; } .article-wrap > .af-pagerail{ display:block;position:absolute;top:0;bottom:0;right:100%; margin-right:1.5rem;width:190px; } } .work-tab-bar{display:flex;gap:0;border-bottom:1px solid rgba(var(--ink),.12);padding:0 1.5rem} .work-tab-btn{all:unset;cursor:pointer;padding:.55rem 1rem;font:var(--fs-meta)/1 var(--ff-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--txCap);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-2),border-color var(--dur-2)} .work-tab-btn:hover{color:var(--tx)} .work-tab-btn.active{color:var(--tx);border-bottom-color:var(--tx)} .work-tab-btn--draft{opacity:.35} .work-tab-btn--draft:hover{opacity:.55} .work-tab-btn--draft.active{opacity:.7;border-bottom-color:currentColor} @keyframes tabFadeIn{from{opacity:0}to{opacity:1}} .work-tab-empty{padding:1.2rem 0;font:var(--fs-meta)/1.5 inherit;color:var(--txCap);margin:0} .work-tab-print{padding:1.2rem 0} .work-xref{ padding:1rem 1.5rem .5rem; max-width:640px;margin:0 auto; font-size:var(--fs-meta);color:var(--txCap,rgba(255,255,255,.45)); } .work-xref-label{margin-right:.4em} .work-xref-link{color:var(--tx,#ccc);text-decoration:none} .work-xref-link:hover{text-decoration:underline} .work-xref-sep{opacity:.4} .work-xref--variant{ padding-top:.4rem;padding-bottom:.2rem; font-size:var(--fs-meta); } .work-xref--variant .work-xref-label{ text-transform:uppercase;letter-spacing:.08em; font-size:var(--fs-micro);opacity:.7; } .work-xref--variant .work-xref-link{ color:var(--tx,#ccc);border-bottom:1px dotted currentColor; } .work-text{ padding:2.5rem 1.5rem 4rem; max-width:640px; margin-left:auto;margin-right:auto; } .work-text-label{ font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase; color:var(--txCap); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid rgba(var(--ink),.10); } .work-text-body{ font-size:var(--fs-ui);line-height:1.65; color:var(--tx); } .work-text-attr{ margin-top:1.2rem; font-size:var(--fs-meta);font-style:italic; color:var(--txCap); } @media(max-width:600px){ .work-text{padding:1.5rem 1rem 3rem} } .work-inquire{font-size:var(--fs-meta);color:var(--tx);font-weight:300;cursor:pointer;text-decoration:none} .work-like{font-size:var(--fs-meta);color:var(--tx);font-weight:300;cursor:pointer;text-decoration:none;opacity:.8} .work-inquire:hover{text-decoration:underline;font-weight:400} .button.admin-link{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;opacity:.5;z-index:var(--z-corner-btn);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} :root{--sidebar-w:340px} .proj-grants-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px} .proj-grant-x{border:none;background:none;cursor:pointer;font-size:max(var(--fs-min), 13px);line-height:1;padding:0 2px;color:inherit;opacity:.6} .proj-grants-add{display:flex;gap:6px;max-width:380px} .proj-grants-add .proj-grants-input{flex:1;min-width:0} .page-title-cap{ position:fixed;top:calc(var(--icon-dim) + 3rem);left:50%;transform:translateX(-50%); max-width:min(70vw,640px);text-align:center;pointer-events:none;z-index:var(--z-sticky); font:italic var(--fs-meta)/1.45 var(--ff-serif);color:var(--tx); } .page-title-cap[hidden]{display:none} body.index-page:not(.gallery-mode) .page-title-cap{display:none} .checkout-items-list.gr{ --tile-size:150px; display:grid;gap:var(--gap);align-items:start; grid-template-columns:repeat(auto-fill,min(var(--tile-size,240px),100%)); justify-content:center; } .checkout-empty[hidden],.checkout-confirm[hidden],.checkout-cols[hidden],.checkout-head[hidden]{display:none} button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .button:focus-visible{outline:2px solid var(--focus-ring,currentColor);outline-offset:2px;border-radius:var(--r-3)} .button:disabled,.button[aria-disabled="true"]{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(.3)} #af-tip{ position:fixed; padding:.3em .65em; background:rgba(20,20,20,.88); color:#fff; font:var(--fs-micro)/1 var(--ff-sans); letter-spacing:.02em; border-radius:var(--r-3); white-space:normal; max-width:min(260px,calc(100vw - 16px)); text-align:center; pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:var(--z-tip); opacity:0; transition:opacity .1s; } @media(prefers-reduced-motion:reduce){ #af-tip{transition:none} } @media (pointer:coarse){ .button{min-width:44px;min-height:44px} } @supports (padding-top: env(safe-area-inset-top)){ .site-header{padding-top:max(.8rem, env(safe-area-inset-top))} } @media (min-width:600px) and (max-width:900px){ :root{--inset:clamp(10px,2vmin,28px)} .searchwrap{max-width:min(320px,48vw)} } .cap em{color:inherit} .gr .it:focus-visible, .gr .it a:focus-visible{ outline:3px solid #4ea1ff; outline-offset:3px; border-radius:var(--r-3); position:relative; z-index:2; } .searchwrap .search::placeholder, .cf-input::placeholder{color:rgba(20,20,20,.62);font-weight:300;opacity:1} @media (max-width:480px){ .cap,.lbcap-shared{font-size:var(--fs-meta);line-height:1.45} body.index-page #cc{ bottom:calc(var(--ui-inset) + var(--icon-dim) * 2 + var(--ui-gap) * 3); max-width:calc(100vw - var(--ui-inset) * 2 - var(--icon-dim-sm) - .35rem); left:calc(var(--ui-inset) + var(--icon-dim-sm) + .35rem); } } button:disabled,.button[aria-disabled="true"]{ opacity:.45;cursor:not-allowed;filter:saturate(.4); } @keyframes af-pulse{0%,100%{opacity:.5}50%{opacity:1}} .af-drawer .af-module--work{display:block} .af-drawer .af-module--work .work-hero{ position:relative;inset:auto; display:flex;align-items:center;justify-content:center; width:100%;height:auto;min-height:0; max-height:50vh; padding:.5rem 0; background:transparent;z-index:auto; } .af-drawer .af-module--work .work-cap{ position:relative;inset:auto;left:auto;bottom:auto;transform:none; max-width:100%;white-space:normal;overflow:visible;text-overflow:clip; margin:.35rem auto .25rem;font-size:var(--fs-ui);z-index:auto; } .af-drawer .af-module--work .work-nav{ position:relative;inset:auto;left:auto;bottom:auto;transform:none; justify-content:center;flex-wrap:wrap;gap:.35em; margin:.25rem auto .75rem;font-size:var(--fs-ui);z-index:auto; } .af-drawer .af-module--work .work-below{margin-top:.25em} .af-drawer .af-module--project{display:block;padding:0 .9rem 1rem} .af-drawer .af-module--project .proj-hero{ display:block;grid-template-columns:none; gap:0;padding:0;max-width:none;margin:0 0 1rem; } .af-drawer .af-module--project .proj-hero-img{ position:static;top:auto;margin-bottom:.85rem; } .af-drawer .af-module--project .proj-hero-cap, .af-drawer .af-module--project .proj-hero-text .cap{ font-size:var(--fs-meta);margin-top:.25em; } .af-drawer .af-module--project .proj-title{ font-size:var(--fs-title);line-height:1.2;margin:.25rem 0 .35rem; display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap; } .af-drawer .af-module--project .proj-info-btn{font-size:var(--fs-meta)} .af-drawer .af-module--project .proj-meta{ font-size:var(--fs-meta);margin:0 0 .75rem;opacity:.8; display:flex;flex-wrap:wrap;gap:.25em .5em; } .af-drawer .af-module--project .proj-meta .sep{opacity:.5} .af-drawer .af-module--project .proj-events{ font-size:var(--fs-meta);margin:.25rem 0 .75rem;padding-left:1.1em; } .af-drawer .af-module--project .proj-article{ font-size:var(--fs-ui);line-height:1.55;margin:0 0 .75rem; } .af-drawer .af-module--project .proj-article-label{ font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase; opacity:.6;margin-bottom:.35rem; } .af-drawer .af-module--project .proj-gallery{ --af-drawer-gcol-min:clamp(72px,22%,110px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(var(--af-drawer-gcol-min),100%),1fr)); gap:.4rem; padding:0;margin:.5rem 0 0;max-width:none; } .af-drawer .af-module--project .proj-gallery{ grid-template-columns:repeat(auto-fit,minmax(min(var(--af-drawer-gcol-min),100%),1fr)) !important; justify-content:stretch; } .af-drawer .af-module--project .proj-gallery .it figure{ width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;margin:0; } body.viewer-page .site-back{display:inline-flex;align-items:center} body.viewer-page .site-footer{display:none} body.index-page .site-footer{display:none} .af-module--viewer{display:block;margin:0;padding:0} .af-viewer-stage{ position:relative; background:var(--bg,#000); overflow:hidden; } .af-viewer-stage--fixed{ position:fixed;top:0;right:0;bottom:0;left:0; z-index:0; transition:left var(--dur-4) var(--ease); } .af-fmod-body .af-viewer-stage--fixed{ position:relative;top:auto;right:auto;bottom:auto;left:auto; width:100%;height:100%;min-height:240px;aspect-ratio:auto; } .af-fmod-body:has(.af-viewer-video){background:#000;overflow:hidden} .af-fmod-body > main:has(.af-viewer-video), .af-fmod-body .af-module--viewer, .af-fmod-body .af-module--viewer .af-viewer-stage{height:100%} .af-viewer-stage:has(> .af-viewer-video){background:#000} .af-viewer-stage .af-viewer-video.af-viewer-img, .af-fmod-body .af-viewer-video{ position:absolute;top:0;left:0;right:0;bottom:0; width:100%;height:100%; max-width:none;max-height:none; transform:none; object-fit:contain;display:block;background:#000; } body.sidebar-open .af-viewer-stage--fixed{left:var(--sidebar-w)} @media (max-width:720px){ body.sidebar-open .af-viewer-stage--fixed{left:0} } .af-viewer-osd{position:absolute;top:0;right:0;bottom:0;left:0} .af-viewer-osd[hidden]{display:none} .af-viewer-img{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); max-width:calc(100% - clamp(3rem,7vw,7rem)); max-height:calc(100% - clamp(5rem,10vh,8rem)); width:auto;height:auto; object-fit:contain;display:block; } .af-viewer-img[hidden]{display:none} .af-viewer-cap{ position:fixed; top:auto; left:calc(var(--ui-inset) + var(--icon-dim-sm) + .35rem); bottom:var(--ui-inset); z-index:var(--z-cap); max-width:calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 1.2em - (var(--icon-dim) * 3 + 1.2rem)); min-height:var(--icon-dim); display:flex;align-items:center;gap:.5em; padding:.3em .75em; border-radius:var(--r-pill); background:transparent; color:#000; font:max(var(--fs-min), clamp(12px,1vw,14px))/1.4 var(--ff-sans); pointer-events:auto;cursor:pointer; transition:left var(--dur-4) var(--ease),max-width var(--dur-4) var(--ease); } .af-viewer-cap::before{ content:'';position:absolute;inset:0;border-radius:inherit; background:var(--ic-bg); backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); z-index:0; } .af-viewer-cap > *{position:relative;z-index:1} body.sidebar-open .af-viewer-cap{left:calc(var(--sidebar-w) + var(--ui-inset) + var(--icon-dim-sm) + .35rem);max-width:calc(100vw - var(--sidebar-w) - var(--ui-inset) * 2 - var(--icon-dim-sm) - .35rem - (var(--icon-dim) * 5 + 2rem))} @media (max-width:767px){ body.sidebar-open .af-viewer-cap{left:calc(var(--ui-inset) + var(--icon-dim-sm) + .35rem)} } body.index-page #cc, .af-viewer-cap{ top:clamp(74px,10vh,104px); bottom:auto; left:50%; right:auto; transform:translateX(-50%); max-width:min(90vw,640px); z-index:var(--z-bloom); justify-content:center; text-align:center; } body.sidebar-open #cc, body.sidebar-open .af-viewer-cap{ left:50%; transform:translateX(-50%); max-width:min(90vw,640px); } body.index-page #cc::before, .af-viewer-cap::before{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; } body.index-page #cc .cap-txt, .af-viewer-cap .cap-txt{ font-size:max(var(--fs-min), clamp(15px,1.4vw,18px)); font-style:italic; text-align:center; } @media (max-width:740px){ body.index-page #cc, .af-viewer-cap{ top:152px; } } @media (max-width:640px){ body.index-page #cc, .af-viewer-cap{ left:var(--ui-inset); right:auto; transform:none; text-align:left; justify-content:flex-start; } body.index-page #cc .cap-txt, .af-viewer-cap .cap-txt{ text-align:left; } } .af-viewer-dzi-tag{ display:inline-flex;align-items:center; padding:0 .55em;border-radius:var(--r-pill); font-size:var(--fs-micro);letter-spacing:.06em; background:rgba(255,255,255,.08);color:var(--tx,#ccc); border:1px solid rgba(255,255,255,.14); pointer-events:auto;cursor:default; white-space:nowrap; } .af-viewer-controls{ position:absolute; top:calc(env(safe-area-inset-top)+1rem); right:1rem; z-index:var(--z-lift); display:flex;gap:.4rem; } .af-viewer-controls button{ all:unset;cursor:pointer; padding:.3em .9em;border-radius:var(--r-pill); border:var(--ic-br,1px solid rgba(255,255,255,.18)); background:var(--ic-bg,rgba(var(--ink),.55)); color:var(--tx,#eee); font-size:var(--fs-meta);letter-spacing:.04em; backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); white-space:nowrap; } .af-viewer-controls button:hover{background:rgba(160,160,160,.2)} .af-viewer-close{font-size:var(--fs-prose)!important;line-height:1;padding:.2em .65em!important} .pub-loading[hidden],.pub-error[hidden],.pub-canvases[hidden]{display:none} @keyframes spin{to{transform:rotate(360deg)}} .tag-cloud-overlay{position:fixed;inset:0;z-index:var(--z-tagcloud)} .tag-cloud-overlay[hidden]{display:none} .tag-cloud-backdrop{ position:absolute;inset:0; backdrop-filter:blur(22px) brightness(.78) saturate(1.1); -webkit-backdrop-filter:blur(22px) brightness(.78) saturate(1.1); mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, black 0%, black 28%, rgba(var(--ink),.8) 50%, rgba(var(--ink),.35) 68%, transparent 82%); -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, black 0%, black 28%, rgba(var(--ink),.8) 50%, rgba(var(--ink),.35) 68%, transparent 82%); } .tag-cloud-header{ position:absolute;top:0;left:0;right:0;z-index:2; display:flex;align-items:center;justify-content:space-between; padding:1rem 1.4rem;pointer-events:none; } .tag-cloud-header > *{pointer-events:auto} .tag-cloud-title{ font-family:var(--ff-sans);font-size:var(--fs-meta);letter-spacing:.18em; text-transform:uppercase;color:var(--tx);opacity:.4; } .tag-cloud-save{ font-size:var(--fs-meta);padding:.3em .9em;border-radius:var(--r-pill); background:rgba(255,255,255,.9);color:#000; border:1px solid rgba(var(--ink),.1); cursor:pointer;letter-spacing:.04em;font-family:var(--ff-sans); transition:background var(--dur-2); } .tag-cloud-save:hover{background:#fff} .tag-cloud-save:disabled{opacity:.35;cursor:default} .tag-pill:hover{background:rgba(var(--haze),.22);border-color:rgba(var(--haze),.55)} .tag-pill.active{background:var(--tx);color:var(--bg);border-color:transparent} .work-artist-text{font:var(--fs-ui)/1.7 var(--ff-serif);color:var(--tx);max-width:680px;margin:0 auto;padding:1.5rem 0} .work-ver-label{display:inline-block;font:var(--fs-micro)/1 var(--ff-sans);letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:var(--r-1);background:rgba(var(--ink),.08);color:var(--txCap);margin-top:3px} .af-tag-chips--filter-only .af-tag-chip{cursor:default;pointer-events:none} .af-project-chip button{all:unset;cursor:pointer;font-size:var(--fs-micro);opacity:.5;line-height:1;padding:0 1px} .af-project-chip button:hover{opacity:1;color:var(--err-soft)} .button.pub-fs,.button.pub-dl{display:none} .proj-hero--publication{background:var(--bg)} .proj-hero--publication .proj-hero-img{max-height:60vh;object-fit:contain} .proj-documents{padding:var(--pad) 0} .proj-document-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .proj-document-item{display:flex;align-items:center;gap:.5rem} .proj-pub-viewer{height:70vh;margin:0 calc(-1 * var(--inset))} .proj-book{width:100%;aspect-ratio:3/2;max-height:min(82vh,82dvh);min-height:320px;background:transparent} .proj-book-frame{display:block;width:100%;height:100%;border:0} @media (max-width:700px){ .proj-book{aspect-ratio:693/1000;max-height:min(80vh,80dvh)} } @media (min-width:701px){ .proj-section--blocks .proj-book{aspect-ratio:auto;height:min(82vh,82dvh);min-height:480px} } .af-module--pub > .proj-book{margin-top:72px} .af-fmod-body .af-module--pub > .proj-book{margin-top:0} .af-fmod-body:has(> .af-module--book){padding:0 !important;overflow:hidden} .af-module--book{margin:0 !important;padding:0 !important;max-width:none !important;width:100%;height:100%} .af-module--book > .proj-book{aspect-ratio:auto;width:100%;height:calc(100vh - 72px);height:calc(100dvh - 72px);max-height:none;min-height:0;margin:72px 0 0} .af-fmod-body .af-module--book > .proj-book{height:100%;margin:0;aspect-ratio:3/2} .af-module--book{position:relative} .site-footer-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;justify-content:center;list-style:none;margin:0 0 .75rem;padding:0} .site-footer-nav a{color:inherit;font-size:var(--fs-meta);text-decoration:none;opacity:.65} .site-footer-copy{font-size:var(--fs-meta);opacity:.45;margin:.4rem 0 0} .site-footer-admin{display:none;opacity:.3;font-size:var(--fs-micro);color:inherit;text-decoration:none;transition:opacity var(--dur-2)} .site-footer-admin:hover{opacity:.7} body.info-page .site-footer-admin{display:inline} .info-nav-row{ position:absolute; top:calc(var(--icon-dim) + .4rem); right:0; display:none; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; pointer-events:none; } body.info-page:not(.feat-page) .info-nav-row{ display:flex; pointer-events:auto; } .info-nav-btn{all:unset;cursor:pointer;padding:.28em .8em;border-radius:var(--r-pill);font:var(--fs-meta)/1 var(--ff-sans);letter-spacing:.03em;background:var(--ic-bg);color:var(--txCap);backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);transition:background var(--dur-1),color var(--dur-1)} .info-nav-btn:hover{background:rgba(160,160,160,.14);color:var(--tx)} .info-nav-btn.active{background:var(--tx);color:var(--bg)} .info-nav-sep{width:1px;height:1em;background:rgba(var(--haze),.25);flex-shrink:0} .af-rec-fields{text-align:left} .af-rec-eye:hover{opacity:1} .af-rec-eye.is-private{opacity:.85;color:var(--err,var(--err))} .af-rec-eye svg{display:block} .proj-body-editor .writing-blocks-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .proj-body-editor .writing-blocks{display:flex;flex-direction:column;gap:14px} .af-share-bar{display:flex;flex-wrap:wrap;gap:.5rem;padding:.25rem 0} .af-share-btn{ display:inline-flex;align-items:center;gap:.4rem; padding:.4rem .75rem; border:1px solid rgba(var(--ink),.15); border-radius:var(--r-2); background:transparent; color:var(--tx); font:var(--fs-meta)/1 var(--ff-sans); cursor:pointer; text-decoration:none; transition:background var(--dur-1),border-color var(--dur-1); white-space:nowrap; } .af-share-btn:hover{background:rgba(var(--ink),.06);border-color:rgba(var(--ink),.25)} html[data-tod-ink="light"] .af-share-btn{border-color:rgba(255,255,255,.15)} .af-save-indicator[hidden]{display:none} .af-module{display:block} .af-sec-hdr-label{flex:1;text-align:left} @keyframes af-skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .capture-dzi-ctrls{ display:flex; align-items:flex-end; justify-content:flex-start; padding:0 var(--ui-inset) var(--ui-inset); flex:0 0 auto; } .capture-dzi-ctrls[hidden]{display:none} .capture-dzi-ctrls .idx-dzi-grid{ display:grid !important; grid-template-columns:var(--icon-dim) var(--icon-dim); grid-template-rows:var(--icon-dim) var(--icon-dim); row-gap:var(--ui-gap); column-gap:var(--ui-gap); place-items:center; } body.viewer-dzi-mode #idxClusterTop, body.dzi-active #idxClusterTop{position:relative} .idx-controls{flex-direction:row;align-items:flex-end} .idx-controls .idx-cluster-top{order:1} .idx-controls .idx-cluster-bot{order:2} body.index-page #idxClusterTop .idx-side-next{ position:relative;top:auto;left:auto;right:auto;transform:none; } #idxClusterTop .idx-side-next{order:-1} .af-viewer-hub,.af-viewer-hub .button{pointer-events:auto} .af-viewer-hub{ position:fixed;right:var(--ui-inset); bottom:calc(var(--ui-inset) + var(--icon-dim) + .55rem); width:min(284px,calc(100vw - 2 * var(--ui-inset))); max-height:calc(100vh - var(--icon-dim) * 3 - 3rem);overflow-y:auto; background:var(--surface-bg); border:1px solid var(--surface-border); box-shadow:var(--lift-3); border-radius:var(--r-6);padding:10px;color:var(--surface-tx); display:flex;flex-direction:column;gap:7px;z-index:var(--z-hud); } .af-viewer-hub[hidden]{display:none} body:not(.viewer-dzi-mode):not(.dzi-active) .af-viewer-hub{display:none} .af-hub-primaries{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap} .af-viewer-hub .idx-dzi-grid{ display:flex;gap:.3rem;flex-wrap:wrap;justify-content:inherit; } .af-hub-dome{ width:92px;height:92px;border-radius:50%;position:relative;cursor:grab;padding:0; touch-action:none; appearance:none;-webkit-appearance:none;flex-shrink:0; border:1px solid rgba(255,255,255,.20); background:radial-gradient(circle at 36% 30%,#5f5f6d,#16161c 74%); box-shadow:inset 0 0 20px rgba(var(--ink),.68),var(--lift-2); } .af-hub-dome-c{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block;pointer-events:none} .af-hub-dome[hidden]{display:none} .af-hub-dome:active{cursor:grabbing} .af-hub-dome:focus-visible{outline:2px solid var(--edit);outline-offset:2px} .af-hub-dome--on{box-shadow:inset 0 0 20px rgba(var(--ink),.68),var(--lift-2),0 0 0 2px rgba(var(--ink),.55)} .af-hub-fly{ width:46px;height:46px;border-radius:50%;position:relative;cursor:grab;padding:0; touch-action:none; appearance:none;-webkit-appearance:none;flex-shrink:0;display:inline-flex; align-items:center;justify-content:center;color:#bcd2e6; border:1px solid rgba(120,160,200,.30); background:radial-gradient(circle at 38% 32%,#3a4a5e,#161c24 72%); box-shadow:inset 0 0 12px rgba(var(--ink),.6); transition:opacity var(--dur-3) var(--ease); } .af-hub-fly svg{width:22px;height:22px;pointer-events:none} body:not(.dzi3d-mode) .af-hub-fly{opacity:.9} .af-hub-fly[hidden]{display:none} .af-hub-fly:focus-visible{outline:2px solid #4a90d9;outline-offset:2px} .af-hub-fly--on{box-shadow:inset 0 0 12px rgba(var(--ink),.6),0 0 0 2px rgba(74,144,217,.85);color:#e6f1fb} .af-hub-ctl{display:flex;align-items:center;gap:6px} .af-hub-ctl-lab{font-size:var(--fs-info);color:var(--surface-tx);opacity:.6;white-space:nowrap;min-width:3.6em} .af-hub-mini{ width:34px;height:34px;border-radius:50%;flex-shrink:0;padding:0;cursor:pointer; appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center; color:var(--surface-tx);border:1px solid var(--surface-border);background:var(--surface-bg-2); transition:opacity var(--dur-3) var(--ease),background var(--dur-3) var(--ease); } .af-hub-mini svg{width:16px;height:16px;pointer-events:none} .af-hub-mini:hover{background:rgba(var(--ink),.08)} .af-hub-mini:focus-visible{outline:2px solid var(--edit);outline-offset:2px} body:not(.dzi3d-mode) .af-hub-mini{opacity:1} .af-hub-mini[hidden]{display:none} .af-hub-take-btn[hidden]{display:none} .af-hub-take-btn svg{width:13px;height:13px;flex-shrink:0;opacity:.85} .af-hub-caps[hidden]{display:none;opacity:0;transform:translateY(8px)} @starting-style{.af-hub-caps:not([hidden]){opacity:0;transform:translateY(8px)}} .af-hub-print-panel[hidden]{display:none;opacity:0;transform:translateY(10px)} @starting-style{.af-hub-print-panel:not([hidden]){opacity:0;transform:translateY(10px)}} body.info-page .button.info { visibility: hidden } .cart-btn svg{width:1.15em;height:1.15em;fill:currentColor} :root{--cart-panel-w:380px} @media(max-width:600px){ :root{--cart-panel-w:100vw} } .af-cart-item-remove svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.5;fill:none} .work-family-col [data-sec-id="family"], .work-family-col .af-sec--family, .work-family-col .work-merged{width:auto !important;max-width:none !important;margin-left:0 !important} .work-family-col .work-merged{ padding:0 !important; margin:1.1rem 0 0 !important; } .af-menu{position:absolute;z-index:var(--z-bloom);min-width:170px;max-width:min(340px,92vw);max-height:min(48vh,420px);overflow-y:auto;background:var(--surface-bg);border:1px solid var(--surface-border);border-radius:var(--r-6);box-shadow:var(--lift-3);padding:.4rem} .af-menu-opt:hover,.af-menu-opt:focus-visible{background:rgba(var(--ink),.07)} .af-menu-opt.is-on{font-weight:600;background:rgba(var(--ink),.10)} .af-sw i{font-style:normal;padding:.2em .7em;cursor:pointer;color:var(--surface-tx)} .work-merged{padding:0 var(--inset);max-width:900px;margin:1.2rem auto 0} .gallery-toolbar{ display:flex;align-items:center;gap:.5rem;row-gap:.3rem; flex-wrap:wrap; padding:.45rem var(--pad) .3rem; justify-content:flex-start; flex-shrink:0 } .gallery-toolbar .gallery-searchwrap{grid-area:auto;justify-self:auto;max-width:none;flex:0 1 auto;margin-left:0;margin-right:0} @supports (field-sizing: content){ .gallery-toolbar .gallery-searchwrap{interpolate-size:allow-keywords} } .gallery-searchwrap .af-bloom{width:max-content;min-width:0;max-width:min(560px,calc(100vw - 24px));left:auto;right:0;padding:.5rem;gap:0} .gallery-view-toggle{flex:0 0 auto} .gallery-lens{display:inline-flex;align-items:center;gap:.15rem;flex:0 0 auto} .gallery-lens-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:var(--r-pill);opacity:.45;transition:opacity var(--dur-2) var(--ease),background var(--dur-2) var(--ease)} .gallery-lens-btn svg{width:15px;height:15px;fill:#000;display:block} .gallery-lens-btn:hover,.gallery-lens-btn:focus-visible{opacity:.8;background:rgba(var(--ink),.08)} .gallery-lens-btn[aria-pressed="true"]{opacity:1;background:var(--ic-bg)} .gallery-lens-btn[hidden]{display:none} .gallery-lens-timeline{display:none} body.col-timeline-on .gallery-lens-timeline{display:inline-flex} body.gallery-mode .site-header, body.gallery-mode.ui-hidden .site-header{pointer-events:none} body.af-module-open .site-header, body.af-module-open.ui-hidden .site-header{pointer-events:none} body.af-module-open .site-header a, body.af-module-open .site-header button, body.af-module-open .site-header input, body.af-module-open .site-header select, body.af-module-open .site-header textarea, body.af-module-open .site-header label, body.af-module-open .site-header .qt{pointer-events:auto} .af-fmod-body .cap { font-size: var(--fs-info); } .catalog-table{display:block;padding:var(--pad) 0 4rem; grid-column:1/-1} .catalog-table[hidden]{display:none} @keyframes cat-err-flash { 0%,100% { background: transparent; } 50% { background: rgba(192,0,0,.12); } } .cat-assign-contact-btn:hover,.cat-assign-contact-btn:focus-visible { background:rgba(var(--haze),.12); outline:2px solid var(--focus-ring); outline-offset:1px; } .cat-assign-result:hover { background:rgba(var(--haze),.12); } .catalog-action-bar[hidden] { display: none; } .cat-act-btn:hover { border-color: var(--tx); } body{ --adm-card: var(--surface-input-bg); --adm-bd: var(--surface-border); --adm-tx2: var(--txCap); --adm-acc: var(--lnkH); --adm-ok: var(--ok); --adm-warn: var(--warn); --adm-err: var(--err); --adm-rad: 4px; } @keyframes admin-border-flash { 0% { border-color: #00aaff; } 60% { border-color: #00aaff; } 100% { border-color: blue; } } .admin-mode .capture-dzi-ctrls { padding-bottom: max(0px, calc(var(--ui-inset) - 10px)); } .af-admin-bar-btn:hover { background: rgba(var(--ink),.1); border-color: #000; color: #000; } .af-admin-bar-btn.active, .af-admin-bar-btn.af-bar-btn-active { background: rgba(60,130,255,.35); border-color: rgba(100,160,255,.5); color: #000; box-shadow: 0 0 0 1px rgba(100,160,255,.3) inset; } @keyframes af-save-spin { to { transform: rotate(360deg); } } @keyframes af-save-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } body.admin-mode:not(.admin-edit) :is( .it.admin-hidden-tile, .proj-tile-hidden, .proj-section.hidden-public ) { display: none !important; } .af-triage-tab.active { color: #0055bb; border-bottom-color: var(--accent); } .af-triage-tab-count.is-zero { background: rgba(var(--haze),.06); color: var(--tx); } @keyframes af-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,170,0,.4); } 50% { opacity: .7; box-shadow: 0 0 6px 2px rgba(255,170,0,.3); } } .pg-bulk h1, .pg-project-edit h1, .pg-create-project h1, .pg-add-to-project h1 { font-size: var(--fs-prose); font-weight: 600; margin: 0 0 6px; padding: 16px 16px 0; } .pg-bulk .af-module-subtitle, .pg-project-edit .af-module-subtitle, .pg-create-project .af-module-subtitle, .pg-add-to-project .af-module-subtitle { padding: 0 16px 12px; border-bottom: 1px solid rgba(var(--ink),.07); margin-bottom: 12px; } @keyframes af-spin { to { transform: rotate(360deg); } } .af-drawer *:focus-visible { outline: 2px solid rgba(0,60,180,.7); outline-offset: 2px; } .info-page .admin-bar { position: fixed; bottom: 0; top: auto; left: 0; right: 0; z-index:var(--z-admin-bar); display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg, #fff); border-top: 2px solid var(--accent); font: var(--fs-meta)/1.4 -apple-system, BlinkMacSystemFont, var(--ff-sans); color: var(--tx, #000); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #af-health-banner + * { margin-top: 0; } @keyframes af-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .col-index .col-index-action { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); font: var(--fs-micro)/1 var(--ff-sans); background: transparent; border: 1px solid transparent; color: var(--gr-accent, var(--accent)); border-radius: var(--r-1); padding: 2px 4px; cursor: pointer; opacity: 0; transition: opacity var(--dur-1); } .admin-scope-pill:hover { color: var(--tx, currentColor); border-color: var(--tx-muted, #888); } .admin-scope-pill.is-active { color: var(--tx, currentColor); border-color: var(--tx, currentColor); background: var(--ic-bg, transparent); font-weight: 600; } .writing-main { padding: var(--inset, 1.5rem); } .writing-wrap { max-width: 52rem; margin: 3rem auto 6rem; } .writing-header { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .75rem auto 2.5rem; padding: 0; border: none; } .writing-header h1 { all: unset; padding: .3em .9em; border-radius: var(--r-pill); background: var(--ic-bg); backdrop-filter: blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost,12px)) saturate(1.2); color: var(--tx); font-size: var(--fs-meta); font-weight: 500; letter-spacing: .04em; cursor: default; } .writing-admin-link { margin-left: auto; font-size: var(--fs-meta); color: var(--txCap); text-decoration: none; opacity: .7; } .writing-admin-link:hover { opacity: 1; } .writing-new-btn { all: unset; cursor: pointer; padding: .3em .9em; border-radius: var(--r-pill); border: var(--ic-br); background: var(--ic-bg); color: var(--tx); font-size: var(--fs-meta); letter-spacing: .04em; backdrop-filter: blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost,12px)) saturate(1.2); white-space: nowrap; } .writing-new-btn:hover { background: rgba(160,160,160,.14); } .writing-empty { color: var(--txCap); font-size: var(--fs-prose); } .writing-source-label { font: 600 max(var(--fs-min), .68rem)/1 var(--ff-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--txCap); opacity: .63; } .writing-entry--project-text > .writing-entry-summary { border-left: 2px solid rgba(var(--haze),.18); padding-left: .75rem; } .writing-entry--new { background: rgba(var(--haze),.04); border-radius: var(--r-3); padding: 0 1rem; margin-bottom: .25rem; } .writing-edit-form { padding: 1.25rem 0 1rem; } .writing-edit-context { font-size: var(--fs-ui); color: var(--txCap); margin-bottom: .9rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(var(--haze),.12); } .writing-edit-proj-link { color: var(--txCap); margin-left: .4em; text-decoration: none; opacity: .7; } .writing-edit-proj-link:hover { opacity: 1; } .writing-edit-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .5rem; } .writing-edit-quill { margin-bottom: .9rem; } .writing-edit-actions { display: flex; align-items: center; gap: .75rem; padding-top: .65rem; border-top: 1px solid rgba(var(--haze),.1); } .writing-edit-save { all: unset; cursor: pointer; font: 600 max(var(--fs-min), .8rem)/1 var(--ff-sans); background: var(--tx); color: var(--bg); border-radius: var(--r-2); padding: .38em .85em; transition: opacity var(--dur-2); } .writing-edit-save:hover { opacity: .8; } .writing-edit-save:disabled { opacity: .45; cursor: default; } .writing-edit-cancel { all: unset; cursor: pointer; font: var(--fs-meta)/1 var(--ff-sans); color: var(--txCap); opacity: .6; transition: opacity var(--dur-2); } .writing-edit-cancel:hover { opacity: 1; } .writing-edit-delete { all: unset; cursor: pointer; font: var(--fs-meta)/1 var(--ff-sans); letter-spacing: .04em; color: #b03030; opacity: .55; margin-left: auto; transition: opacity var(--dur-2); } .writing-edit-delete:hover { opacity: 1; } .writing-edit-permalink { font: var(--fs-meta)/1 var(--ff-sans); color: var(--txCap); opacity: .6; text-decoration: none; transition: opacity var(--dur-2); } .writing-edit-permalink:hover { opacity: 1; } .writing-edit-section-label { font: 600 max(var(--fs-min), .68rem)/1 var(--ff-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--txCap); opacity: .7; margin: .8rem 0 .35rem; } .writing-edit-assoc { margin-bottom: .6rem; } .writing-edit-assoc-list { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .35rem; min-height: 0; } .writing-edit-assoc-item { display: flex; align-items: center; gap: .4rem; padding: .25rem .45rem; background: rgba(var(--haze),.08); border-radius: var(--r-2); font-size: var(--fs-meta); } .writing-edit-assoc-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); } .writing-edit-assoc-remove { all: unset; cursor: pointer; color: var(--txCap); opacity: .5; font-size: var(--fs-ui); line-height: 1; padding: 0 .15rem; flex-shrink: 0; } .writing-edit-assoc-remove:hover { opacity: 1; color: #b03030; } .writing-edit-assoc-add { display: flex; gap: .35rem; } .writing-edit-assoc-input { flex: 1; } .writing-edit-assoc-btn { all: unset; cursor: pointer; font: var(--fs-meta)/1 var(--ff-sans); padding: .3em .7em; border: 1px solid rgba(var(--haze),.3); border-radius: var(--r-2); color: var(--txCap); white-space: nowrap; transition: border-color var(--dur-2), color var(--dur-2); } .writing-edit-assoc-btn:hover { border-color: rgba(var(--haze),.6); color: var(--tx); } .writing-feed { display: flex; flex-direction: column; } .writing-year-group { margin-bottom: 0; } .writing-year-label { font: 600 max(var(--fs-min), .7rem)/1 var(--ff-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--txCap); opacity: .63; padding: 3.5rem 0 .6rem; margin-bottom: 0; } .writing-entry { padding-bottom: .5rem; } .writing-entry-header { margin: 0 0 .85rem; } .writing-entry-thumb-link { display: inline-block; line-height: 0; } .writing-entry-thumb { display: block; width: auto; max-width: 220px; max-height: 140px; object-fit: contain; border-radius: var(--r-2); border: 1px solid rgba(var(--haze),.18); transition: opacity var(--dur-2); } .writing-entry--draft { opacity: .88; } .writing-entry--unlisted { opacity: .94; } .writing-entry-summary { padding: 2.25rem 0 1.25rem; border-top: 1px solid rgba(var(--haze),.08); cursor: default; } .writing-entry-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .55rem; } .writing-type-badge { font: 600 max(var(--fs-min), .64rem)/1 var(--ff-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--txCap); opacity: .63; } .writing-entry-date { font-size: var(--fs-meta); color: var(--txCap); opacity: .63; } .writing-status-btn { all: unset; cursor: pointer; font: 600 max(var(--fs-min), .65rem)/1 var(--ff-sans); letter-spacing: .05em; padding: .22em .55em; border-radius: var(--r-2); border: 1px solid transparent; transition: opacity var(--dur-2), border-color var(--dur-2); } .writing-status-btn--published { color: #2d9c5e; border-color: rgba(45,156,94,.25); } .writing-status-btn--draft { color: #888; border-color: rgba(var(--haze),.2); } .writing-status-btn--unlisted { color: var(--warn); border-color: rgba(176,125,42,.25); } .writing-entry-title { font-size: max(var(--fs-min), clamp(1.1rem, 2.5vw, 1.45rem)); font-weight: 700; margin: 0 0 .4rem; line-height: 1.22; letter-spacing: -.02em; } .writing-entry-subtitle { font-size: var(--fs-ui); color: var(--txCap); margin: 0 0 .55rem; font-style: italic; } .writing-entry-excerpt { font-size: var(--fs-ui); line-height: 1.72; opacity: .75; margin: 0 0 .85rem; } .writing-entry-fulltext { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s var(--ease), opacity .28s var(--ease); } .writing-entry-fulltext-inner > :first-child { margin-top: 0; } .writing-entry--expanded .writing-entry-excerpt { display: none; } .writing-entry-title-link { color: inherit; text-decoration: none; } .writing-entry-title-link:hover, .writing-entry-title-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .writing-entry-fulltext { transition: none; } } .writing-entry-footer { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .writing-expand-btn { all: unset; cursor: pointer; font-size: var(--fs-meta); font-family: var(--ff-sans); font-weight: 600; color: var(--tx); opacity: .63; transition: opacity var(--dur-2); letter-spacing: .02em; } .writing-expand-btn--link { text-decoration: none; } .writing-expand-arrow { display: inline-block; transition: transform var(--dur-3) var(--ease); } .writing-project-links { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .writing-project-link { font-size: var(--fs-meta); color: var(--txCap); text-decoration: none; border: 1px solid rgba(var(--haze),.22); border-radius: var(--r-1); padding: .1em .45em; transition: border-color var(--dur-2), color var(--dur-2); } .writing-project-link:hover { color: var(--tx); border-color: rgba(var(--haze),.5); } .writing-entry-body { border-top: 1px solid rgba(var(--haze),.1); padding: 1.5rem 0 1rem; } .writing-article-body { view-transition-name: var(--vt-prose, none); font-size: var(--fs-prose); line-height: 1.75; } .writing-project-links--body { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(var(--haze),.1); } .writing-entry-body-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid rgba(var(--haze),.08); } .writing-permalink { font-size: var(--fs-meta); color: var(--txCap); text-decoration: none; opacity: .7; } .writing-collapse-btn { all: unset; cursor: pointer; font-size: var(--fs-meta); color: var(--txCap); opacity: .55; font-family: var(--ff-sans); transition: opacity var(--dur-2); } body.article-page .site-back{display:inline-flex;align-items:center} .af-fmod[hidden] { display: none; } .af-fmod--reflow { transition: left .24s var(--ease), top .24s var(--ease), width .24s var(--ease), height .24s var(--ease); } .af-fmod { position: fixed; display: flex; flex-direction: column; border: 1px solid var(--surface-border); border-radius: var(--r-6); box-shadow: var(--lift-3); font-family: var(--ff-sans); font-size: var(--fs-info); color: var(--tx); } .af-fmod--page{ left:0 !important; right:0 !important; top:var(--af-page-top, 56px) !important; bottom:0 !important; width:auto !important; height:auto !important; max-width:none; max-height:none; border-radius:0; border-left:0; border-right:0; box-shadow:none; } .af-fmod--page > .af-fmod-body{ flex:1 1 auto; } .af-fmod--page .af-fmod-resize{ display:none; } .af-fmod--page .af-fmod-header{ cursor:default; } .af-fmod--page .af-fmod-maximize{ opacity:.9; } @media (prefers-reduced-motion:no-preference){ .af-fmod--page{ transition:border-radius var(--dur-2,.16s) var(--ease,ease); } } body.af-window-page #cc, body.af-window-page .af-viewer-cap, body.af-window-page .af-viewer-hub, body.af-window-page #mini, body.af-window-page .idx-side-next{ opacity:0; visibility:hidden; pointer-events:none; } @keyframes af-fmod-in { from { opacity:0; transform:scale(.965) } to { opacity:1; transform:scale(1) } } @keyframes af-fmod-out { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(.965) } } .af-fmod--opening { animation: af-fmod-in .18s var(--ease) both } .af-fmod--closing { animation: af-fmod-out var(--dur-2) var(--ease) both; pointer-events:none } @media (prefers-reduced-motion: reduce){ .af-fmod--opening, .af-fmod--closing { animation:none } } .site-header .buttons, .site-header .homecol { transform: translateZ(0); } .af-fmod-header { flex: 0 0 auto; position: relative; display: flex; align-items: center; padding: .45rem .55rem .45rem .45rem; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--surface-border); cursor: grab; user-select: none; min-height: 44px; overflow: hidden; border-radius: var(--r-6) var(--r-6) 0 0; transition: border-radius .22s var(--ease); } .af-fmod-header--dragging, .af-fmod-header--dragging * { cursor: grabbing !important; } .af-fmod-wm { flex: 0 0 auto; display: flex; align-items: center; gap: .28rem; --icon-dim: 28px; } .af-fmod-wm .button svg { fill: currentColor; } .af-fmod-title-group { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .3rem; min-width: 0; max-width: calc(100% - 140px); pointer-events: none; } .af-fmod-title-group .button { pointer-events: auto; --icon-dim: 28px; flex: 0 0 auto; } .af-fmod-title { font-size: var(--fs-info); font-family: var(--ff-sans); font-weight: 600; letter-spacing: .02em; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .af-fmod--studio .af-fmod-title { font-family: var(--ff-sans); font-weight: 400; font-style: italic; font-size: var(--fs-prose); letter-spacing: 0; } .af-module--work .work-cap{ color:var(--tx); } .af-fmod-body .af-module--work{ padding:0; } .af-fmod-body .af-module--work .work-cap--above, .af-fmod-body .af-module--edition .work-cap--above{ display:flex; margin:.1rem auto .7rem; } .af-module--work{ container-type:inline-size; padding-inline:clamp(1rem,3.5vw,3rem); } .work-stage{ display:block; max-width:none; margin-inline:auto; padding-block:.4rem 0; } .work-stage-media{ min-width:0; } .work-stage .work-hero{ margin:0; } .work-stage .work-hero img, .work-stage .work-hero video{ width:auto; max-width:100%; max-height:min(78vh,78cqh); height:auto; display:block; cursor:zoom-in; margin-inline:auto; } .work-caption-head{ text-align:center; padding:.2rem var(--inset) .6rem; } .work-caption-head .work-cap-title{ margin:0; padding:0; font-family:var(--ff-serif); font-style:italic; font-weight:400; font-size:var(--fs-title); line-height:1.25; color:var(--tx); } .work-caption-head .work-cap-line{ margin:.2rem auto 0; padding:0; max-width:70ch; font-size:var(--fs-prose); line-height:1.5; color:var(--tx); } .af-fmod .work-caption-head .work-cap-title{ display:none; } .work-caption-head .ws-giga-badge{ border:0; background:transparent; cursor:pointer; padding:0 0 0 .3em; font:inherit; font-style:normal; color:var(--tx); opacity:.4; vertical-align:.05em; transition:opacity var(--dur-2); } .work-caption-head .ws-giga-badge:hover{ opacity:.9; } .work-hero-band{ display:block; } .work-family-col{ min-width:0; } .work-family-col [data-sec-id="family"], .work-family-col .work-merged{ width:auto; max-width:none; margin-left:0; } .work-toolbelt{ max-width:44rem; margin:1rem auto 0; padding:0 var(--inset); } .work-toolbelt .work-nav{ flex-direction:row; justify-content:center; border-top:0; padding-top:0; } .work-toolbelt{ min-width:0; } .work-summary .ws-title .ws-giga-badge{ border:0; background:transparent; cursor:pointer; padding:0 0 0 .3em; font:inherit; font-style:normal; color:var(--tx); opacity:.4; vertical-align:.05em; transition:opacity .15s; } .work-summary .ws-title .ws-giga-badge:hover, .work-summary .ws-title .ws-giga-badge:focus-visible{ opacity:.9; } .work-stage .work-nav > *{ border:1px solid var(--surface-border); border-radius:var(--r-1); background:transparent; padding:.5rem .7rem; text-align:center; font-size:var(--fs-ui); color:var(--tx); text-decoration:none; cursor:pointer; } .work-stage .work-nav > *:hover{ border-color:var(--tx); } .af-edchip button{ border:0; background:none; color:inherit; cursor:pointer; opacity:.5; padding:0; } .ws-editblock .af-meta-label{ font-size:var(--fs-meta); opacity:.6; white-space:nowrap; } .ws-editblock .af-meta-val{ font-size:var(--fs-ui); min-width:0; } .af-stool:hover{ border-color:rgba(var(--ink),.34); color:var(--tx); } .af-stool.is-on{ border-color:var(--tx); color:var(--tx); } .work-versions-strip .af-vtile .g{ position:relative; display:flex; flex-direction:column; aspect-ratio:auto; width:100%; padding:0; flex:none; } .work-versions-strip .af-vtile .frame{ position:relative; top:auto; right:auto; bottom:auto; left:auto; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; overflow:hidden; } .work-versions-strip .af-vtile img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; transition:opacity var(--dur-3) var(--ease); } body.work-page .af-module--work .af-pagerail{ display:block; position:fixed; top:calc(var(--header-h,56px) + .8rem); left:1rem; right:auto; bottom:auto; width:max-content; max-width:220px; z-index:var(--z-pagerail); } .af-pagerail--fmod .af-pagerail-inner, body.work-page .af-module--work .af-pagerail .af-pagerail-inner{ position:static; top:auto; background:var(--bg,#fff); border:1px solid var(--surface-border,rgba(var(--ink),.14)); border-radius:var(--r-5); box-shadow:var(--lift-2); padding:.1rem 0 .12rem; } .af-pagerail--fmod .af-pagerail-title, body.work-page .af-module--work .af-pagerail .af-pagerail-title{ margin:0; padding:.34rem .7rem .3rem; cursor:default; } .af-pagerail--fmod .af-pagerail-list, body.work-page .af-module--work .af-pagerail .af-pagerail-list{ display:none; padding:0 0 .2rem; } .af-pagerail--fmod:hover .af-pagerail-list, .af-pagerail--fmod:focus-within .af-pagerail-list, body.work-page .af-module--work .af-pagerail:hover .af-pagerail-list, body.work-page .af-module--work .af-pagerail:focus-within .af-pagerail-list{ display:flex; } .work-versions-strip .cap{ display:flex; flex-wrap:wrap; gap:.35em; align-items:baseline; justify-content:center; font-size:var(--fs-meta); color:var(--tx); margin-top:.35rem; } .work-stage .work-hero img{ transition:opacity .18s var(--ease); } .af-vers-drop.is-over{ background:color-mix(in srgb, var(--tx) 7%, transparent); } .af-edx-chip button{ all:unset; cursor:pointer; opacity:.55; padding:0 .1rem; } .af-fmod-body .af-pagerail, .af-fmod-body .work-below > .af-pagerail, .af-fmod-body .proj-sections > .af-pagerail, .af-fmod-body .af-module--project .af-pagerail{ display:block; position:static; width:auto; max-width:none; margin:0 0 .6rem; } .af-fmod-body .af-pagerail-inner{ position:static; } .af-module--work{ container-type:inline-size; position:relative; } .af-module--work .af-pagerail{ display:block; position:static; width:auto; max-width:none; margin:0 0 1rem; break-inside:avoid; } .af-module--work .af-pagerail .af-pagerail-inner{ position:static; } .af-module--work .af-pagerail-list{ columns:10rem; column-gap:1.4rem; } .af-module--work .af-pagerail-link{ break-inside:avoid; padding:.12rem .9rem .12rem .6rem; font-size:var(--fs-micro); } .af-module--work .af-pagerail-title{ margin-bottom:.25rem; } @container (max-width:36rem){ .af-module--work .af-pagerail{ position:absolute; left:0; top:2.6rem; z-index:6; max-width:240px; background:var(--bg); border:1px solid var(--surface-border); border-left:none; border-radius:0 var(--r-5) var(--r-5) 0; padding:.55rem .9rem .65rem .7rem; transform:translateX(calc(-100% + 20px)); transition:transform var(--dur-3) var(--ease); } .af-module--work .af-pagerail::after{ content:'â‹®'; position:absolute; right:3px; top:50%; transform:translateY(-50%); font-size:max(var(--fs-min), 14px); opacity:.55; pointer-events:none; } } @keyframes af-sec-raise{ 0%{background:color-mix(in srgb, var(--accent) 14%, transparent)} 100%{background:transparent} } .af-fmod-body .af-module--project{ padding:0; } .af-fmod-body .af-module--project .proj-gallery{ display:grid; gap:var(--gap); align-items:start; margin:0; padding:0; max-width:none; grid-template-columns:repeat(auto-fill,min(var(--tile-size,240px),100%)); justify-content:center; } .af-fmod-body .af-module--project .proj-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3cqi,2.5rem); align-items:start; padding:0; margin:0 0 1.1rem; max-width:none; } @container (max-width:720px){ .af-fmod-body .af-module--project .proj-hero{ display:block; } } .af-fmod-body { flex: 1 1 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); border-radius: 0 0 var(--r-6) var(--r-6); --af-win-pad: clamp(14px, calc(1.5vw / var(--ui-z,1)), 22px); padding: var(--af-win-pad) var(--af-win-pad) calc(var(--af-win-pad) * 1.6); } html.af-win-pending, html.af-win-pending *{cursor:progress !important} @keyframes af-pend-in{to{opacity:1}} .proj-run > .it .cap, .proj-run > .it .cap :is(a, em, span, i, b, strong, .cap-tag){ color:var(--tx) !important; opacity:1 !important; } @keyframes af-pend-spin{to{transform:rotate(360deg)}} .af-fmod--gallery .af-fmod-body, .af-fmod--fullscreen .af-fmod-body, .af-fmod--admin .af-fmod-body, .af-fmod-body:has(.af-viewer-video), .af-fmod-body:has(.af-module--viewer){ padding: 0; } .af-fmod-body .af-module--work, .af-fmod-body .af-module--project, .af-fmod-body .writing-main, .af-fmod-body .checkout-wrap, .af-fmod-body .pub-sections, .af-fmod-body .info-layout{ padding-left: 0; padding-right: 0; } .af-fmod-body .info-layout{ margin-right: auto; } .af-fmod-resize { position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; cursor: se-resize; z-index: 2; background: linear-gradient(135deg, transparent 40%, var(--surface-border) 40%, var(--surface-border) 46%, transparent 46%, transparent 54%, var(--surface-border) 54%, var(--surface-border) 60%, transparent 60% ); border-radius: 0 0 var(--r-6) 0; } .af-fmod-skeleton { background: linear-gradient(90deg, var(--surface-bg-2) 25%, rgba(255,255,255,.08) 50%, var(--surface-bg-2) 75%); background-size: 200% 100%; animation: af-fmod-shimmer 1.4s infinite; border-radius: var(--r-3); margin: 12px 14px 0; } @keyframes af-fmod-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .af-fmod-error { padding: 16px 14px; font-size: var(--fs-info); color: var(--surface-tx-2); } .af-fmod-retry-btn { background: none; border: none; color: var(--surface-tx); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; } @media (max-width: 767px){ .af-fmod { border-radius: var(--r-6) var(--r-6) 0 0; border-left: none; border-right: none; border-bottom: none; box-shadow: var(--lift-2); } .af-fmod-header { border-radius: var(--r-6) var(--r-6) 0 0; } .af-fmod-body { border-radius: 0; } .af-fmod-resize { display: none; } } .af-fmod--sheet { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; } .af-fmod--sheet .af-fmod-body { border-radius: 0; } .af-fmod--sheet .af-fmod-header { padding-top: max(8px, env(safe-area-inset-top)); } .af-fmod--sheet .af-fmod-btn { width: 44px; height: 44px; } .af-fmod--sheet .af-fmod-body { padding-bottom: max(8px, env(safe-area-inset-bottom)); } .af-fmod--sheet .af-fmod-resize { display: none; } .af-fmod--gallery .af-fmod-body .hero-wrap { display: none !important; } .af-fmod--gallery .af-fmod-body #galleryMount { display: block !important; position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; overflow: visible !important; content-visibility: visible !important; contain: none !important; padding-top: 0 !important; } body:not(.gallery-table-mode) .af-fmod--gallery .af-fmod-body #galleryMount > .wrap { display: grid !important; padding-top: 0.5rem !important; padding-bottom: 1rem !important; padding-inline: 8px !important; grid-template-columns: repeat(auto-fill, min(var(--tile-size, 240px), 100%)) !important; justify-content: center !important; } .af-fmod--writing .af-fmod-body, .af-fmod--info .af-fmod-body, .af-fmod--cart .af-fmod-body { background: #8e8070; color: var(--tx); } .af-fmod--gallery { border-left: 3px solid rgba(100,140,255,.45); } .af-fmod--sheet.af-fmod--gallery { border-left: none; border-top: 3px solid rgba(100,140,255,.45); } .af-fmod--sheet.af-fmod--studio { border-left: none; border-top: 3px solid rgba(255,160,80,.40); } .af-fmod--sheet.af-fmod--cart { border-right: none; border-top: 3px solid rgba(80,200,120,.40); } .af-fmod-wm .af-fmod-minimize-icon { display: block; } .af-fmod-wm .af-fmod-restore-icon { display: none; } .af-fmod--minimized .af-fmod-wm .af-fmod-minimize-icon { display: none; } .af-fmod--minimized .af-fmod-wm .af-fmod-restore-icon { display: block; } .af-fmod--minimized .af-fmod-body, .af-fmod--minimized .af-fmod-resize { display: none; } .af-fmod--minimized .af-fmod-header { border-radius: var(--r-6); } .af-fmod--minimized .af-fmod-title-group { position: static; transform: none; max-width: none; pointer-events: auto; margin-left: .4rem; } .cat-chip:hover { background: rgba(var(--haze),.18); border-color: rgba(var(--haze),.5); } :root { --ct-sidebar-w: 280px; } @media(max-width:700px){ :root { --ct-sidebar-w: 100%; } } .pg-jobs button { cursor:pointer } button.revert-btn { background:var(--ic-bg); color:var(--tx); border:1px solid var(--surface-border); padding:3px 10px; border-radius:var(--r-2); font:inherit; cursor:pointer } button.revert-btn:hover { border-color:var(--focus-ring) } .car-work-chip button { background:none; border:none; cursor:pointer; font-size:var(--fs-meta); padding:0; line-height:1 } .car-work-chip button:hover { color:var(--adm-err) } :root { --ed-bg: #f0ede8; --ed-chrome: #e9e5df; --ed-chrome-2: #dedad3; --ed-surface: #ffffff; --ed-border: rgba(var(--ink),.10); --ed-border-2: rgba(var(--ink),.18); --ed-tx: #1a1a18; --ed-accent: #7a4f1e; --ed-ok: var(--ok); --ed-err: var(--err); --ed-warn: #7a4800; --ed-radius: 3px; } .af-hud-modebtn:hover,.af-hud-modebtn:focus-visible{ background:rgba(160,160,160,.18); outline:none } .af-hud-modebtn.is-on{ background:var(--surface-bg,#fff); box-shadow:inset 0 0 0 1px rgba(0,102,204,.55); font-weight:600 } .af-hud-pill:hover,.af-hud-pill:focus-visible{ background:rgba(160,160,160,.22); outline:none } .af-hud-pill--danger:hover{ background:rgba(180,40,0,.14) } .af-hud-pill--active:hover{ background:rgba(160,160,160,.32) } .gal-side.is-folded > :not(.gal-side-fold){ display:none } .gal-side-fold:hover,.gal-side-fold:focus-visible{ background:rgba(var(--haze),.15); color:var(--tx) } .gal-side-item:hover,.gal-side-item:focus-visible{ background:rgba(var(--haze),.14) } .gal-side-item.is-on{ background:var(--surface-bg,#fff); box-shadow:inset 0 0 0 1px rgba(0,102,204,.55); font-weight:600 } .af-hud-pile.is-on{ background:var(--surface-bg,#fff); box-shadow:inset 0 0 0 1px rgba(0,102,204,.55) } .af-dock{ display:inline-flex; align-items:center; gap:.35rem; margin-right:.15rem } .af-dock:empty{ display:none } .cat-gh-toggle:hover{background:var(--ic-bg,rgba(var(--ink),.06));color:var(--ic-fg,#333);} .cat-gh-toggle.is-hidden{color:#b23b2e;font-weight:500;} .col-gal-facet.is-on { border-color:var(--tx); font-weight:600; } .af-bloom-head.is-preview{opacity:1;font-weight:600} .af-door:hover,.af-door:focus-visible{background:rgba(var(--ink),.08)} .af-door.is-on{background:rgba(var(--ink),.14);border-color:#000;font-weight:600} .af-door.is-open{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.5)} .af-bloom-tag:hover,.af-bloom-tag:focus-visible{text-decoration:underline;text-underline-offset:.14em} .af-bloom-tag.is-on{font-weight:600;text-decoration:underline;text-underline-offset:.14em} .af-bloom-grp + .af-bloom-grp{border-top:1px solid var(--surface-border);padding-top:.55rem} .af-bloom-opt:hover,.af-bloom-opt:focus-visible{background:rgba(var(--ink),.08)} .af-bloom-opt.is-on{background:rgba(var(--ink),.14);border-color:#000;font-weight:600} @media (pointer:coarse){ :root{--icon-dim-sm:24px} } .search-btn{display:inline-flex;align-items:center;justify-content:center} @media (pointer:coarse),(max-width:740px){ .search-btn{display:inline-flex;align-items:center;justify-content:center} } .af-module--work .writing-appearance{display:inline-block;color:#000;text-decoration:none;font-size:var(--fs-info)} .writing-trash-btn:hover{border-color:rgba(var(--haze),.65)} .writing-facet-chip:hover{border-color:rgba(var(--haze),.6)} .writing-facet-chip.is-active{border-color:#000;background:rgba(var(--haze),.12)} .writing-status-btn--scheduled { color: #3a6ea5; border-color: rgba(58,110,165,.25); } .site-header{pointer-events:none} .site-header a, .site-header button:not(:disabled), .site-header input, .site-header select, .site-header textarea, .site-header label, .site-header .button, .site-header .searchfield, .site-header .qt{pointer-events:auto} .writing-trash-btn{all:unset;cursor:pointer;padding:.3em .9em;border-radius:var(--r-pill);border:var(--ic-br);background:var(--ic-bg);color:var(--tx);font-size:var(--fs-meta);letter-spacing:.04em;backdrop-filter:blur(var(--frost,12px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);white-space:nowrap} .writing-trash-btn:hover{background:rgba(160,160,160,.14)} .wb-add, .writing-edit-history, .wer-load, .wtp-item button, .writing-draft-banner button{all:unset;cursor:pointer;font:var(--fs-meta)/1 var(--ff-sans);padding:.3em .7em;border:1px solid rgba(var(--haze),.3);border-radius:var(--r-2);color:var(--txCap);white-space:nowrap;transition:border-color var(--dur-2),color var(--dur-2)} .wb-add:hover, .writing-edit-history:hover, .wer-load:hover, .wtp-item button:hover, .writing-draft-banner button:hover{border-color:rgba(var(--haze),.6);color:var(--tx)} .wb-tools button{all:unset;cursor:pointer;width:1.6em;height:1.6em;display:grid;place-items:center;border:1px solid rgba(var(--haze),.25);border-radius:var(--r-2);color:var(--txCap);font-size:var(--fs-meta);line-height:1;transition:border-color var(--dur-2),color var(--dur-2)} .wb-tools button:hover{border-color:rgba(var(--haze),.6);color:var(--tx)} .writing-facet-chip:hover{background:rgba(160,160,160,.14)} .wb-add:hover,.writing-edit-history:hover,.wer-load:hover,.wtp-item button:hover, .writing-draft-banner button:hover,.writing-edit-assoc-btn:hover,.wb-tools button:hover{ background:rgba(160,160,160,.22);color:var(--tx); } } @layer components{ @keyframes af-btn-bump{0%{transform:scale(1)}32%{transform:scale(1.28)}62%{transform:scale(.9)}100%{transform:scale(1)}} @container (max-width: 168px){ .gr .it .cap{ position:absolute;left:4px;right:4px;bottom:4px;z-index:4; width:auto;min-width:0;max-width:none;transform:none; margin:0;padding:.35em .45em;border-radius:var(--r-3); background:rgba(20,20,20,.88);color:#fff; font-size:var(--fs-micro);line-height:1.3; overflow:hidden; opacity:0;pointer-events:none; transition:opacity var(--dur-3) var(--ease); } .gr .it .cap a,.gr .it .cap em,.gr .it .cap span{color:#fff} } .af-fmod-header .gallery-toolbar{ flex:0 0 auto;margin-left:auto;padding:0;gap:.5rem;flex-wrap:nowrap; cursor:default;pointer-events:auto; --icon-dim:28px; } .af-fmod-header .gallery-toolbar #tileSlider{width:88px} .af-fmod-header .gallery-toolbar .gallery-lens-btn{width:26px;height:26px} .af-fmod-header:has(.gallery-toolbar) .af-fmod-title-group{ position:static;transform:none;flex:1 1 auto;min-width:0;max-width:none; justify-content:center;padding:0 .5rem;transition:opacity .2s var(--ease); } .gr .it .g{max-height:72vh} .af-fmod--gallery .af-fmod-body{container:studio / size} .af-fmod--gallery .af-fmod-body .gr .it .g{max-height:80cqh} .cap-tag{font:600 var(--fs-micro)/1 var(--ff-sans);letter-spacing:.08em;text-transform:uppercase;opacity:.45;margin-left:.55em;white-space:nowrap} :root{--af-ledger-mark:44px} .info-samples a{display:block;text-decoration:none;color:var(--tx)} .af-viewer-hub{ background:none;border:0;box-shadow:none;padding:0;overflow:visible; width:auto;max-height:none;align-items:flex-end;gap:.3rem; } #afViewerHub{ flex-direction:row;align-items:flex-end;gap:.5rem;flex-wrap:nowrap; bottom:calc(var(--ui-inset) + var(--icon-dim) + .55rem + var(--af-cluster-extra,0px)); } #afViewerHub .af-hub-keys, #afKbDock .af-hub-keys{ height:calc(var(--afk) * 8);box-sizing:border-box;flex:0 0 auto; margin:0 0 4px;justify-content:center; } .af-hub-rail{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;width:auto} .af-hub-rail[hidden]{display:none} .af-rail-item{ position:relative;display:flex;align-items:center;justify-content:flex-end; width:var(--icon-dim);height:var(--icon-dim); border-radius:calc(var(--icon-dim) / 2); overflow:hidden;pointer-events:auto;color:var(--surface-tx); transition:width var(--dur-4) var(--ease); } .af-rail-item--open{width:min(268px,calc(100vw - 2 * var(--ui-inset)))} .af-rail-ico{ position:relative;z-index:2;flex:0 0 var(--icon-dim); width:var(--icon-dim);height:var(--icon-dim);border-radius:50%; display:inline-flex;align-items:center;justify-content:center; appearance:none;-webkit-appearance:none;border:0;background:none;padding:0; cursor:pointer;color:inherit; } .af-rail-ico svg{width:46%;height:46%;display:block;pointer-events:none} .af-rail-body{ position:relative;z-index:1;display:flex;align-items:center;gap:7px; flex:1 1 auto;min-width:0;padding-left:13px;white-space:nowrap; opacity:0;transition:opacity var(--dur-2) var(--ease); } .af-rail-lab{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase; opacity:.55;flex:0 0 auto} .af-rail-val{font-size:var(--fs-micro);opacity:.6;flex:0 0 auto;min-width:3.2em; text-align:right;font-variant-numeric:tabular-nums} .af-rail-spacer{flex:1 1 auto} .af-rail-tod{position:relative;flex:1 1 auto;min-width:0;height:18px;border-radius:var(--r-5); overflow:hidden;border:1px solid var(--surface-input-border);cursor:pointer;display:block} .af-rail-tod-grad{position:absolute;inset:0} .af-rail-tod-thumb{position:absolute;top:-2px;width:3px;height:22px;background:#fff; border-radius:var(--r-1);box-shadow:0 0 0 1px rgba(var(--ink),.55)} .af-hub-primaries{justify-content:flex-end} @media (max-width:560px){ .af-rail-item--open{width:calc(100vw - 2 * var(--ui-inset))} } .af-rail-stack{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0} .af-rail-desc{font-size:var(--fs-micro);line-height:1.3;opacity:.55;white-space:normal; max-width:190px;padding-right:2px} body.dzi-active #idxClusterTop .button svg, body.viewer-dzi-mode #idxClusterTop .button svg, body.dzi-active .idx-cluster-bot .button svg, body.viewer-dzi-mode .idx-cluster-bot .button svg{ inline-size:46%;block-size:46%; } body.dzi-active .idx-controls, body.viewer-dzi-mode .idx-controls{gap:.3rem} .af-hub-primaries{flex-wrap:nowrap;justify-content:flex-end;gap:.3rem} .af-hub-mini{order:2} .af-viewer-hub{gap:.3rem} .af-rail-item{flex:0 0 auto;min-height:var(--icon-dim)} .af-rail-desc{max-width:206px} .af-rail-val{min-width:3.4em} .work-hero-band--stack{ display:flex;flex-direction:column;gap:1.6rem; } .work-hero-band--stack > .work-stage{order:1;width:100%;max-width:none} .af-vers-lede b{font-weight:600;opacity:1} .work-layout--flow{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start; gap:1.4rem 3rem; columns:auto !important; } .work-layout--flow > *{ break-inside:auto; grid-column:2; margin:0; display:block; min-width:0; } .work-layout--flow > .af-record-lines, .work-layout--flow > .work-artist-text, .work-layout--flow > .work-xref, .work-layout--flow > [data-sec-id="ed-details"], .work-layout--flow > [data-sec-id="ed-editions"]{ grid-column:1 } @media (max-width:1023px){ .work-layout--flow{ grid-template-columns:minmax(0,1fr) } .work-layout--flow > *{ grid-column:1 !important } } .work-below .af-meta-table{ grid-template-columns:var(--af-label-w, 13.5ch) minmax(0, 1fr) !important; } .work-below .af-meta-table > dt, .work-below .af-meta-table .af-meta-label{ overflow-wrap:anywhere; } @media (min-width:1100px){ .work-below{ padding-left:236px } } .work-below{ container-type:inline-size; container-name:workbelow; } .work-below .af-record-lines, .work-below .af-sec{ container-type:inline-size; } .work-below .af-meta-table{ grid-template-columns:clamp(6.5ch, 34%, 13.5ch) minmax(0, 1fr) !important; } @container (max-width:26rem){ .work-below .af-meta-table{ grid-template-columns:minmax(0,1fr) !important; } .work-below .af-meta-table > dt, .work-below .af-meta-table .af-meta-label{ font-size:var(--fs-micro);opacity:.55;padding:0;margin:.5rem 0 .1rem; letter-spacing:.03em; } } @container workbelow (max-width:66rem){ .work-layout--flow{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } @container workbelow (max-width:44rem){ .work-layout--flow{ grid-template-columns:minmax(0,1fr) !important; } .work-layout--flow > *{ grid-column:1 !important; } } @media (min-width:1100px){ .work-below{ padding-left:0 } } @container workbelow (min-width:64rem){ .work-below{ padding-left:236px } } .work-hero-band--stack{ container-type:inline-size; container-name:workband; } .work-layout, .work-layout--flow{ display:block !important; columns:auto !important; column-count:auto !important; grid-template-columns:none !important; max-width:52rem; margin-inline:auto; } .work-layout > *, .work-layout--flow > *{ grid-column:auto !important; float:none !important; width:auto !important; min-width:0; margin:0 0 1.4rem; display:block; break-inside:auto; } .work-layout .af-record-lines{ max-width:none; } .af-module--work, .af-module--edition{ container-type:inline-size; container-name:workmod; } .work-below{ padding-left:0; } @container workmod (min-width:64rem){ .work-below{ padding-left:236px; } } .work-below .af-meta-table{ grid-template-columns:clamp(7ch, 26%, 15ch) minmax(0, 1fr) !important; } .work-below{ position:relative; } @container workmod (min-width:64rem){ .work-below{ padding-left:236px; padding-right:236px; } } @container (max-width:26rem){ .work-below .af-meta-table{ grid-template-columns:minmax(0,1fr) !important; } } .af-cite-chron{ list-style:none; margin:0; padding:0; } .af-cite-entry{ margin:0 0 .62em; padding-left:1.35em; text-indent:-1.35em; font:var(--fs-ui)/1.55 var(--ff); overflow-wrap:anywhere; } .af-cite-entry:last-child{ margin-bottom:0; } .af-cite-kind{ font:inherit; color:inherit; opacity:1; white-space:nowrap; } .af-cite-entry a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; } :root{ --afk:clamp(24px, min(2rem, 1.55vw + 12px, 5.2vh), 56px); --afg:clamp(2px, calc(var(--afk) * 0.095), 5px); } .af-hub-keys{ width:max-content;box-sizing:border-box; display:flex;align-items:stretch;gap:.5rem;flex-direction:column; padding:.6rem .7rem .5rem;border-radius:var(--r-6); background:var(--ic-bg);backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); border:1px solid rgba(255,255,255,.10); } .af-board{position:relative;display:flex;flex-direction:column;gap:var(--afg);width:max-content} .af-hub-keys .af-hub-rail{width:0;min-width:100%} .af-brow{display:flex;gap:var(--afg);align-items:center} .af-key[hidden]{display:none} .af-key-fill{flex:1 1 auto} .af-arrows{ position:absolute;right:0;bottom:0; display:flex;flex-direction:column;gap:var(--afg);align-items:center; } .af-key{ appearance:none;-webkit-appearance:none;position:relative; width:var(--afk,30px);height:var(--afk,30px);padding:0;border-radius:var(--r-4);cursor:pointer; display:grid;place-items:center;flex:0 0 auto; font:600 max(var(--fs-min), calc(var(--afk) * 0.518))/1 var(--ff-sans); color:var(--surface-tx,#111); background:var(--surface-bg-2,var(--surface-bg-2)); border:1px solid var(--surface-border,rgba(var(--ink),.10)); border-bottom-width:2px; transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease); } .af-key--wide{width:calc(5 * var(--afk) + 4 * var(--afg));letter-spacing:.10em;font-size:max(var(--fs-min), calc(var(--afk) * 0.4709)); display:flex;align-items:center;justify-content:center;gap:6px} .af-key--wide .af-key-l{position:static;font-size:max(var(--fs-min), calc(var(--afk) * 0.4709));opacity:.8} .af-key-g{display:block;width:calc(var(--afk) * 0.56);height:calc(var(--afk) * 0.56);pointer-events:none; transform:translate(calc(var(--afk) * -0.05),calc(var(--afk) * -0.05))} .af-key--num .af-key-l{position:static;font-size:max(var(--fs-min), calc(var(--afk) * 0.46));opacity:.96} .af-key-g svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .af-key-l{position:absolute;right:calc(var(--afk) * 0.11);bottom:calc(var(--afk) * 0.05);font-size:max(var(--fs-min), calc(var(--afk) * 0.33));letter-spacing:0; opacity:.5;pointer-events:none} .af-key--wide .af-key-g{width:calc(var(--afk) * 0.55);height:calc(var(--afk) * 0.55)} .af-key--gap{opacity:0;pointer-events:none;border:0;background:none} :root, :root[data-afpal="deepsea"]{ --afc-shots:#24466B; --afc-fly:#2E5F7F; --afc-aim:#1F7A7A; --afc-looks:#2E6B55; --afc-world:#4C5258; --afc-menu:#4D4A72; --afc-hot:#8C3A4A; } :root[data-afpal="aurora"]{ --afc-shots:#5A3FA0; --afc-fly:#1B6CA8; --afc-aim:#1A7F92; --afc-looks:#0F7A6A; --afc-world:#4B4F58; --afc-menu:#4A4577; --afc-hot:#A32A55; } :root{ --afk-fly:132,104,156; } .af-key--shots{ --afc:var(--afc-shots) } .af-key--looks{ --afc:var(--afc-looks) } .af-key--fly { --afc:var(--afc-fly) } .af-key--aim { --afc:var(--afc-aim) } .af-key--menu { --afc:var(--afc-menu) } .af-key--world{ --afc:var(--afc-world) } .af-key--hot { --afc:var(--afc-hot) } .af-key--shots,.af-key--looks,.af-key--fly,.af-key--aim,.af-key--menu,.af-key--world,.af-key--hot{ background:var(--afc); color:#fff; border-color:rgba(0,0,0,.30); border-bottom-color:rgba(0,0,0,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); } .af-key--shots .af-key-g,.af-key--looks .af-key-g,.af-key--fly .af-key-g,.af-key--aim .af-key-g, .af-key--menu .af-key-g,.af-key--world .af-key-g,.af-key--hot .af-key-g{ opacity:.96;color:#fff } .af-key--shots .af-key-l,.af-key--looks .af-key-l,.af-key--fly .af-key-l,.af-key--aim .af-key-l, .af-key--menu .af-key-l,.af-key--world .af-key-l,.af-key--hot .af-key-l{ opacity:.62;color:#fff } .af-keytip{position:absolute;z-index:40;pointer-events:none;max-width:calc(var(--afk) * 7.2); padding:calc(var(--afk) * .22) calc(var(--afk) * .3) calc(var(--afk) * .26);border-radius:var(--r-5); background:rgba(16,18,20,.92);color:#fff;border:1px solid rgba(255,255,255,.14); box-shadow:var(--lift-2); font:500 max(var(--fs-min), calc(var(--afk) * .33))/1.4 var(--ff-sans); opacity:0;transform:translateY(4px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)} .af-keytip--show{opacity:1;transform:none} .af-keytip-k{margin-bottom:.5em} .af-keytip-k b{font:600 max(var(--fs-min), 1em)/1 var(--ff-sans);margin-right:.5em;opacity:.9} .af-keytip-g{display:flex;align-items:center;gap:.5em;font:600 max(var(--fs-min), calc(var(--afk) * .25))/1 var(--ff-sans); letter-spacing:.16em;text-transform:uppercase;opacity:.7; margin:0 0 .3em;padding-top:.5em;border-top:1px solid rgba(255,255,255,.12)} .af-keytip-g i{width:.75em;height:.75em;border-radius:2px;background:var(--afc,#888);flex:0 0 auto} .af-keytip-gn{opacity:.5;font-size:max(var(--fs-min), calc(var(--afk) * .29));line-height:1.35;margin-bottom:0} @media (prefers-reduced-motion:reduce){ .af-keytip{transition:none} } .af-keys-legend{ display:flex;gap:.7rem;align-self:stretch;justify-content:flex-end;flex-wrap:wrap; font-size:max(var(--fs-min), 9.5px);letter-spacing:.04em;color:var(--surface-tx,#111);opacity:.5; } .af-keys-legend i{font-style:normal;display:inline-flex;align-items:center;gap:4px} .af-hub-keys--full{align-items:stretch} .af-hub-keys .af-hub-rail{ width:100%;align-items:stretch;gap:3px;margin-top:.15rem;padding-top:.45rem; border-top:1px solid var(--surface-border,rgba(var(--ink),.10)); } .af-shots[hidden]{display:flex;visibility:hidden;opacity:0;pointer-events:none; transition:opacity var(--dur-5) var(--ease),visibility 0s var(--dur-5)} body.af-nokb .af-viewer-hub{transition:opacity var(--dur-5,.36s) var(--ease,ease)} @media (max-width:700px){ .af-viewer-hub{ left:var(--ui-inset);right:var(--ui-inset);width:auto;align-items:flex-end } } .af-hub-keys{transition:opacity var(--dur-5) var(--ease),transform var(--dur-5) var(--ease)} .af-hub-keys[hidden]{display:flex;opacity:0;transform:translateX(.6rem) scaleX(.98); transform-origin:center right;pointer-events:none;visibility:hidden; transition:opacity var(--dur-5) var(--ease),transform var(--dur-5) var(--ease), visibility 0s var(--dur-5)} .af-light{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:13px 1rem;align-items:start;min-width:272px} .af-light-foot{display:flex;gap:6px;margin-top:9px} .af-light-hold{ appearance:none;-webkit-appearance:none;padding:5px 8px;cursor:pointer;flex:0 0 auto; border:1px solid var(--surface-border,rgba(var(--ink),.16));border-radius:var(--r-4); background:transparent;color:inherit;touch-action:none;user-select:none;-webkit-user-select:none; font-size:max(var(--fs-min), 9.5px);letter-spacing:.06em;text-transform:uppercase;opacity:.72; } .af-light-hold--on{opacity:1;background:var(--edit);color:var(--surface-bg,#fff);border-color:var(--edit)} .af-light-hold--idle{opacity:.32;cursor:default} .af-light-reset{ appearance:none;-webkit-appearance:none;margin-top:7px;padding:5px 8px;cursor:pointer; border:1px solid var(--surface-border,rgba(var(--ink),.16));border-radius:var(--r-4); background:transparent;color:inherit; font-size:max(var(--fs-min), 9.5px);letter-spacing:.06em;text-transform:uppercase;opacity:.72; } .af-sky[hidden]{display:none} .af-chip{ appearance:none;-webkit-appearance:none;cursor:pointer; padding:4px 9px;border-radius:var(--r-pill);border:1px solid transparent; font-size:var(--fs-micro);line-height:1;letter-spacing:.02em; color:var(--surface-tx,#111);background:rgba(var(--ink),.05);opacity:.72; transition:opacity var(--dur-2) var(--ease),background var(--dur-2) var(--ease); } .af-hub-keys #afHubPrimaries{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); padding:0;margin:-1px;border:0; } #afViewerHub .af-menu{ position:absolute;right:calc(100% + .5rem);bottom:0;z-index:2; width:286px;box-sizing:border-box;border-radius:var(--r-6); background:var(--ic-bg);backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); border:1px solid rgba(255,255,255,.10); box-shadow:var(--lift-3); color:var(--surface-tx,#111); } .af-menu[hidden]{display:none} #afViewerHub .af-hub-keys, #afViewerHub .af-menu, #afViewerHub .af-shots, #afViewerHub .af-hub-menu, #afViewerHub .af-hub-print-panel, #afViewerHub .af-shot-kbwrap, #afKbDock .af-hub-keys{ --af-frost-hud:calc(var(--frost,12px) * 2.4); backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); -webkit-backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); } @media (max-width:900px){ .af-menu{right:0;bottom:calc(100% + .5rem);width:300px} } .af-rail--retired{display:none !important} #captureBtn .af-eye{fill:none;stroke:none;overflow:visible} #captureBtn svg{inline-size:62%;block-size:62%} .gsel-marquee{ position:fixed; z-index:var(--z-cluster); pointer-events:none; border:1px solid var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); border-radius:var(--r-1); } .gsel-bar{ position:sticky; bottom:var(--s-3); z-index:var(--z-cluster); grid-column:1/-1; justify-self:center; display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; width:max-content; max-width:calc(100% - var(--s-4)); margin:var(--s-4) auto 0; padding:var(--s-2) var(--s-3); font:var(--fs-meta)/1 var(--ff-sans); color:var(--surface-tx); background:var(--surface-bg); border:1px solid var(--surface-border); border-radius:var(--r-pill); box-shadow:var(--lift-2); backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); } @media (pointer: coarse){ .info-nav-btn, .af-bm-forget, .af-music-chip, .af-music-panel-close, .gsel-act, .se-act, .se-rst, .se-sw { position: relative; } .info-nav-btn::after, .af-bm-forget::after, .af-music-chip::after, .af-music-panel-close::after, .gsel-act::after, .se-act::after, .se-rst::after, .se-sw::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; width: 100%; height: 100%; } } } body .ql-snow a, body .ql-editor a { color: var(--lnk) } body .ql-snow a:hover, body .ql-editor a:hover { color: var(--lnkH) } .af-fly-touch{ position:fixed;inset:0;z-index:1; pointer-events:none;touch-action:none;display:block; } body.af-nokb.dzi-active .af-fly-touch{pointer-events:auto} #idx-controls > :not(.af-fly-touch):not(#afViewerHub){position:relative;z-index:2} .af-fly-stick{ position:fixed;width:0;height:0;pointer-events:none; color:var(--surface-tx,#111);opacity:0;transform:scale(.8); transition:opacity .22s var(--ease,ease),transform .22s var(--ease,ease); } .af-fly-stick[hidden]{display:block} .af-fly-stick--on{opacity:1;transform:none} .af-fly-stick-ring,.af-fly-stick-knob{position:absolute;border-radius:50%;left:0;top:0;transform-origin:50% 50%} .af-fly-stick-ring{ width:128px;height:128px;margin:-64px 0 0 -64px; background:rgba(var(--ink),.06);box-shadow:inset 0 0 0 1px rgba(var(--ink),.22); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .af-fly-stick-knob{ width:52px;height:52px;margin:-26px 0 0 -26px; background:rgba(var(--ink),.16);box-shadow:inset 0 0 0 1px rgba(var(--ink),.42); } #afViewerHub .af-looks-dock{ position:relative; display:flex;align-items:flex-end;justify-content:flex-end; align-self:flex-end;min-width:0; font-size:max(var(--fs-min), calc(var(--afk) * 0.518)); } #afViewerHub .af-looks-dock[hidden]{display:none} #afViewerHub .af-looks-rail{ display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem; flex:0 0 auto; width:max-content;max-width:9.5rem; } #afViewerHub .af-lrail-list{display:flex;flex-direction:column;gap:2px} #afViewerHub .af-lrail-b{ appearance:none;-webkit-appearance:none;cursor:pointer; display:flex;align-items:center;gap:.45em; padding:.42em .7em .42em .55em;min-height:calc(var(--afk) * 0.9); border:1px solid rgba(255,255,255,.10);border-radius:var(--r-6); background:var(--ic-bg);color:var(--surface-tx,#111); --af-frost-hud:calc(var(--frost,12px) * 2.4); backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); -webkit-backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); font:inherit;letter-spacing:.06em;text-transform:uppercase;text-align:left; white-space:nowrap;line-height:1; } #afViewerHub .af-lrail-b:hover, #afViewerHub .af-lrail-b--open{background:rgba(255,255,255,.22)} #afViewerHub .af-lrail-b--pinned{border-color:var(--accent,#5F4B8B)} #afViewerHub .af-lrail-b[hidden]{display:none} #afViewerHub .af-lrail-pin{ width:.55em;height:.55em;border-radius:50%;flex:0 0 auto; border:1.5px solid currentColor;opacity:.35; } #afViewerHub .af-lrail-b--pinned .af-lrail-pin{background:var(--accent,#5F4B8B);border-color:var(--accent,#5F4B8B);opacity:1} #afViewerHub .af-lrail-foot{display:flex;flex-direction:column;gap:2px;margin-top:.2rem} #afViewerHub .af-lrail-foot > button{ font:inherit;font-size:max(var(--fs-min), .92em);letter-spacing:.04em;text-transform:none; padding:.4em .6em;border-radius:var(--r-6); border:1px solid rgba(255,255,255,.10);background:var(--ic-bg);color:inherit;cursor:pointer; --af-frost-hud:calc(var(--frost,12px) * 2.4); backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); -webkit-backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); text-align:left;white-space:normal;line-height:1.2; } #afViewerHub .af-lrail-foot > button:hover{background:rgba(255,255,255,.22)} #afViewerHub .af-looks-stack{ position:absolute;bottom:0;top:0; pointer-events:none; } #afViewerHub .af-lpanel{position:absolute;left:0;right:0;pointer-events:auto} #afViewerHub .af-lpanel{ box-sizing:border-box;border-radius:var(--r-6); background:var(--ic-bg);border:1px solid rgba(255,255,255,.10); box-shadow:var(--lift-3);color:var(--surface-tx,#111); --af-frost-hud:calc(var(--frost,12px) * 2.4); backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); -webkit-backdrop-filter:blur(var(--af-frost-hud)) saturate(1.45); overflow:hidden; } #afViewerHub .af-lpanel[hidden]{display:none} #afViewerHub .af-lpanel-h{ display:flex;align-items:center;justify-content:space-between; padding:.45rem .7rem .3rem;cursor:default; } #afViewerHub .af-lpanel-t{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;opacity:.55} #afViewerHub .af-lpanel-tools{display:flex;gap:.2rem} #afViewerHub .af-lpanel-tools button{ appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer; font-size:max(var(--fs-min), 15px);line-height:1;opacity:.45;padding:0 4px;color:inherit; } #afViewerHub .af-lpanel-tools button:hover{opacity:.9} #afViewerHub .af-lpanel-b{padding:0 .7rem .6rem} #afViewerHub .af-lpanel--folded .af-lpanel-b{display:none} #afViewerHub .af-lpanel--empty{display:none} #afViewerHub .af-lpanel .af-band-h[hidden], #afViewerHub .af-lpanel .af-looks-h[hidden]{display:none} #afViewerHub .af-lpanel .af-dense{ display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.4rem .9rem; } @media (max-width:700px), (pointer:coarse){ #afViewerHub .af-looks-dock{flex-direction:column;align-items:stretch} #afViewerHub .af-lrail-list{flex-direction:row;flex-wrap:wrap;justify-content:flex-end} #afViewerHub .af-looks-stack{order:-1} } #afViewerHub .af-hub-keys, #afViewerHub .af-menu, #afViewerHub .af-shots, #afViewerHub .af-hub-menu, #afViewerHub .af-hub-print-panel, #afViewerHub .af-shot-kbwrap, #afViewerHub .af-lpanel, #afViewerHub .af-lrail-b, .af-hub-keys,.af-shots,.af-menu, #afKbDock .af-hub-keys{ backdrop-filter:none;-webkit-backdrop-filter:none; background:var(--surface-bg,var(--bg)); } #afViewerHub, .af-hour-hud, #idx-controls .af-looks-bay{ --surface-bg:var(--hud-bg,#F7F3ED); --surface-bg-2:var(--hud-bg-2,rgba(23,24,26,.055)); --surface-tx:var(--hud-ink,#17181A); --surface-tx-2:var(--hud-ink,#17181A); --ink:var(--hud-ink-rgb,23,24,26); --tx2:rgba(var(--ink),.62); --surface-border:rgba(var(--ink),.16); --surface-input-bg:rgba(var(--ink),.055); --surface-input-border:rgba(var(--ink),.22); color:var(--surface-tx); } #afViewerHub .af-lpanel{ left:auto; max-height:calc(calc(100vh / var(--ui-z,1)) - 16px); display:flex; flex-direction:column; } #afViewerHub .af-lpanel-b{ overflow-y:auto; overscroll-behavior:contain; min-height:0; } #afViewerHub .af-lpanel-h{ flex:0 0 auto; } .af-sub-h{font:600 var(--fs-micro)/1.2 var(--ff-sans); letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink),.42); margin:0 0 4px;display:flex;align-items:center;gap:6px} #afViewerHub .af-lpanel, #afViewerHub .af-lrail-b, #afViewerHub .af-lrail-foot > button{ background:var(--surface-bg); border-color:rgba(var(--ink),.18); color:var(--surface-tx,#111); } #afViewerHub .af-lrail-b:hover, #afViewerHub .af-lrail-b--open, #afViewerHub .af-lrail-foot > button:hover{ background:var(--surface-bg-2,var(--surface-bg)); } #afViewerHub .af-lpanel{display:flex;flex-direction:column} #afViewerHub .af-lpanel-h{flex:0 0 auto} #afViewerHub .af-lpanel-b{ flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:rgba(var(--ink),.34) transparent; } #afViewerHub .af-light input[type=range]::-moz-range-track{ height:10px;border-radius:99px;border:1px solid rgba(var(--ink),.26); background: linear-gradient(90deg,transparent calc(var(--dp,50) * 1% - 1px),rgba(var(--ink),.72) calc(var(--dp,50) * 1% - 1px), rgba(var(--ink),.72) calc(var(--dp,50) * 1% + 1px),transparent calc(var(--dp,50) * 1% + 1px)), var(--tk,linear-gradient(90deg,rgba(var(--ink),.20),rgba(var(--ink),.46))); } #afViewerHub .af-light input[type=range]::-webkit-slider-thumb{ width:19px;height:19px;margin-top:-5.5px; background:var(--surface-bg,#fff);border:2px solid rgba(var(--ink),.85); box-shadow:var(--lift-1); } #afViewerHub .af-light input[type=range]::-moz-range-thumb{ width:19px;height:19px; background:var(--surface-bg,#fff);border:2px solid rgba(var(--ink),.85); box-shadow:var(--lift-1); } #afViewerHub .af-band-h{font-size:var(--fs-meta);opacity:.9} #afViewerHub .af-sub-h{ font-size:var(--fs-micro);letter-spacing:.16em;color:rgba(var(--ink),.55); margin:0 0 5px; } #afViewerHub .af-looks-rail{max-width:9.5rem;gap:.45rem} #afViewerHub .af-lrail-b{ gap:.55em;padding:.5em .7em .5em .6em;min-height:2.15em; border-left:3px solid var(--bc,rgba(var(--ink),.22)); font-size:var(--fs-meta);letter-spacing:.1em; } #afViewerHub .af-lrail-pin{width:.62em;height:.62em;opacity:.45} #afViewerHub .af-lrail-b--pinned .af-lrail-pin{ background:var(--bc);border-color:var(--bc);opacity:1; } #afViewerHub .af-lrail-foot{gap:3px;margin-top:.35rem} @media (max-width:640px), (max-height:700px){ #afViewerHub .af-lpanel{max-height:min(calc(56svh / var(--ui-z,1)),420px)} #afViewerHub .af-looks-rail{max-width:none} } #afViewerHub .af-lpanel-b.af-light{display:block;min-width:0} #afViewerHub .af-sky-row input[type=range]::-moz-range-track{ height:10px;border-radius:99px;border:1px solid rgba(var(--ink),.26); background:var(--tk,linear-gradient(90deg,rgba(var(--ink),.20),rgba(var(--ink),.46))); } #afViewerHub .af-sky-row input[type=range]::-webkit-slider-thumb{ appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-5.5px;border-radius:50%; background:var(--surface-bg,#fff);border:2px solid rgba(var(--ink),.85); box-shadow:var(--lift-1); } #afViewerHub .af-sky-row input[type=range]::-moz-range-thumb{ width:19px;height:19px;border-radius:50%; background:var(--surface-bg,#fff);border:2px solid rgba(var(--ink),.85); box-shadow:var(--lift-1); } #afViewerHub .af-sky-row{display:flex;align-items:center;gap:8px;min-height:2em} #afViewerHub .af-lrail-b{ gap:.5em;padding:.34em .55em .34em .5em;min-height:1.95em; font-size:var(--fs-micro);letter-spacing:.06em;text-transform:none; } #afViewerHub .af-lrail-i{ width:1.15em;height:1.15em;flex:0 0 auto;display:grid;place-items:center;color:var(--bc); } #afViewerHub .af-lrail-i svg{width:100%;height:100%;display:block} #afViewerHub .af-lrail-t{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #afViewerHub .af-lrail-pin{order:3;margin-left:auto} #afViewerHub .af-looks-rail{max-width:9.5rem;gap:2px} #afViewerHub .af-lrail-list{gap:2px} #afViewerHub .af-lrail-foot{margin-top:.4rem} @media (max-width:700px){ #afViewerHub .af-looks-dock{ flex-direction:column-reverse;align-items:stretch;width:100%; } #afViewerHub .af-looks-rail{ max-width:none;width:auto;flex-direction:row;overflow-x:auto; gap:3px;padding-bottom:2px;scrollbar-width:none; } #afViewerHub .af-lrail-list{flex-direction:row;gap:3px;flex:0 0 auto} #afViewerHub .af-lrail-b{padding:.4em .5em;min-height:2.2em} #afViewerHub .af-lrail-t{display:none} #afViewerHub .af-lrail-i{width:1.35em;height:1.35em} #afViewerHub .af-lrail-foot{flex-direction:row;margin:0 0 0 .35rem;flex:0 0 auto} } .af-hub-dome{ border:1px solid var(--surface-border); background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--surface-bg) 92%, #fff) 0%, var(--surface-bg) 46%, color-mix(in srgb, var(--surface-bg) 80%, rgb(var(--ink))) 100%); box-shadow:inset 0 -6px 14px rgba(var(--ink),.13),inset 0 4px 10px color-mix(in srgb, transparent 78%, #fff),var(--lift-2); } #afViewerHub .af-lrail-b{ min-height:calc(var(--afk) * 1.06); padding:.52em .72em .52em .58em; } .af-hour-hud{ position:fixed;z-index:100050; width:min(360px, calc(calc(100vw / var(--ui-z,1)) - 16px)); max-height:calc(calc(100vh / var(--ui-z,1)) - 90px); display:flex;flex-direction:column; background:var(--surface-bg);color:var(--surface-tx); border:1px solid rgba(var(--ink),.20);border-radius:var(--r-6); box-shadow:var(--lift-4); font:var(--fs-meta)/1.45 var(--ff-sans); } .af-hour-hud[hidden]{display:none} .af-hour-h{ display:flex;align-items:center;gap:.5rem;flex:0 0 auto; padding:.5rem .55rem;border-bottom:1px solid rgba(var(--ink),.14); } .af-hour-h strong{ flex:1 1 auto;font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase; font-weight:600;color:var(--surface-tx-2,var(--surface-tx)); } .af-hour-theme{ display:inline-flex;align-items:center;gap:.4em;font:inherit;cursor:pointer; padding:.3em .6em;border-radius:var(--r-pill); border:1px solid rgba(var(--ink),.20);background:var(--surface-bg-2,var(--surface-bg)); color:inherit; } .af-hour-theme-t{font-size:var(--fs-micro);letter-spacing:.05em} .af-hour-x{ font:inherit;font-size:max(var(--fs-min), 1.05rem);line-height:1;cursor:pointer; width:1.7rem;height:1.7rem;flex:0 0 auto;border-radius:var(--r-4); border:1px solid transparent;background:transparent;color:var(--surface-tx);opacity:.6; } .af-hour-hud--full .af-hour-b > .af-sky{display:block;margin-bottom:.5rem} .af-hour-hud--full .af-hour-b > .af-band{display:block} .af-hour-row{display:block;margin:0 0 .55rem} .af-hour-row b{float:right;font-family:var(--ff-sans);font-size:var(--fs-micro)} .af-hour-note{margin:.6rem 0 0;font-size:var(--fs-micro);opacity:.66} #idx-controls .af-looks-bay[hidden], #idx-controls .af-looks-bay .af-bay-rows[hidden], #idx-controls .af-looks-bay .af-bay-r[hidden], #idx-controls .af-looks-bay .af-chip[hidden], #afViewerHub .af-looks-dock[hidden], #afViewerHub #afHubKeys .af-looks-foot--board[hidden], #afViewerHub .af-shotkeys[hidden], #afKbDock #afHubKeys .af-looks-foot--board[hidden]{ display:none !important } #idx-controls .af-looks-bay{ display:flex; flex-direction:row; align-items:center; gap:4px; background:none; border:0; padding:0; margin:0 8px 0 0; width:auto; min-width:0; flex:0 1 auto; } #idx-controls .af-looks-bay .af-bay-rows{ display:flex; flex-direction:row; align-items:center; gap:4px; flex-wrap:nowrap; overflow:visible; max-height:none; padding:0; min-width:0; } #idx-controls .af-looks-bay .af-bay-r{ display:flex; gap:4px; flex-wrap:nowrap } #idx-controls .af-looks-bay--tight .af-lrail-t{ display:none } #idx-controls .af-looks-bay--tight .af-chip{ padding:0 7px; gap:0 } #idx-controls .af-looks-bay--tighter .af-chip-k{ display:none } #idx-controls .idx-cluster-bot{ flex-wrap:wrap; row-gap:6px } #idx-controls .af-looks-bay--stacked{ flex:0 0 100%; order:-1; justify-content:flex-end; margin:0 } @media (max-width:700px){ #idx-controls .idx-cluster-bot{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px } #idx-controls .af-looks-bay{ flex:0 0 100%; margin:0; align-items:flex-end } #idx-controls .af-looks-bay .af-lrail-t, #idx-controls .af-looks-bay .af-chip-k{ display:none } #idx-controls .af-looks-bay .af-chip{ padding:0 7px; gap:0 } } #idx-controls .af-looks-bay .af-lrail-foot{ display:none } #afViewerHub #afHubKeys .af-looks-foot--board, #afKbDock #afHubKeys .af-looks-foot--board{ position:static; display:flex; flex-direction:row; gap:2px; flex-wrap:nowrap; align-items:center; justify-content:flex-start; margin:4px 0 0; padding:0; pointer-events:auto; } #afViewerHub #afHubKeys .af-looks-foot--board + .af-keys-legend, #afKbDock #afHubKeys .af-looks-foot--board + .af-keys-legend{ margin:-16px 0 0; text-align:right; pointer-events:none; } #afViewerHub #afHubKeys .af-looks-foot--board > button, #afKbDock #afHubKeys .af-looks-foot--board > button{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; flex:0 0 auto; margin:0; white-space:nowrap; padding:0 6px; height:16px; min-height:0; font:500 max(var(--fs-min), .64rem)/1 var(--ff-sans); letter-spacing:.02em; text-transform:lowercase; color:rgba(var(--ink),.5); background:none; border:1px solid transparent; border-radius:var(--r-2); box-shadow:none; backdrop-filter:none; } #afViewerHub #afHubKeys .af-looks-foot--board > button.af-light-hold--idle, #afKbDock #afHubKeys .af-looks-foot--board > button.af-light-hold--idle{ opacity:.4; pointer-events:none; } #idx-controls .af-looks-bay .af-chip{ display:flex; align-items:center; gap:5px; height:26px; padding:0 10px 0 5px; width:auto; min-width:0; border-radius:999px; white-space:nowrap; cursor:pointer; font:600 max(var(--fs-min), .72rem)/1 var(--ff-sans,ui-sans-serif,system-ui,sans-serif); color:#fff; background:color-mix(in srgb, var(--bc) 66%, #16160f); border:1px solid color-mix(in srgb, var(--bc) 92%, #fff); transition:background .12s ease, border-color .12s ease, transform .12s ease; } #idx-controls .af-looks-bay .af-chip-k{ font:600 max(var(--fs-min), .58rem)/1 var(--ff-sans); background:rgba(255,255,255,.22); border-radius:3px; padding:3px 4px; } #idx-controls .af-looks-bay .af-chip .af-lrail-pin{ display:none } #afViewerHub .af-looks-dock{ pointer-events:none; position:fixed; top:0; left:0; width:calc(100vw / var(--ui-z,1)); height:calc(100vh / var(--ui-z,1)); display:block; align-items:initial; justify-content:initial; align-self:initial; margin:0; padding:0; background:none; border:0; z-index:calc(var(--z-hud, 1100) + 2); } @media (prefers-reduced-motion:no-preference){ @keyframes af-chip-grow{ from{ opacity:0; transform:scale(.86) translateY(10px) } to { opacity:1; transform:none } } @keyframes af-chip-shrink{ from{ opacity:1; transform:none } to { opacity:0; transform:scale(.86) translateY(10px) } } } body.af-show-paused #nextBtn::before{ background:none; border-color:transparent; box-shadow:none; backdrop-filter:none; } #afViewerHub #afHubKeys .af-looks-foot--board > .af-looks-sw[hidden], #afKbDock #afHubKeys .af-looks-foot--board > .af-looks-sw[hidden]{ display:none !important } :root{ --ff-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --ff-serif:'Crimson Pro',Georgia,'Times New Roman',serif; --ff-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --fs-prose:clamp(1rem,.94rem + .13vi,1.3rem); --fs-lead:clamp(1.06rem,.95rem + .27vi,1.55rem); } h1,h2,h3,h4,summary,.brand,.site-header,nav, button,input,select,textarea,label,.button{font-family:var(--ff-sans)} textarea{font-family:var(--ff-serif)} .cap .t,.lbcap-shared .t,.cap .t em,.lbcap-shared .t em{font-family:var(--ff-serif);line-height:1.25} #afViewerHub .af-key,.af-key,.af-shotkey-n,.af-key-l, #afKbDock .af-key{font-family:var(--ff-sans)} #afViewerHub,.af-hour-hud,#idx-controls .af-looks-bay{ --ff-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --ff-serif:var(--ff-sans); --ff-mono:var(--ff-sans); font-family:var(--ff-sans); } #afViewerHub .af-key,#afViewerHub .af-shotkey-n,#afViewerHub .af-key-l, #afViewerHub .af-key,.af-hour-hud .af-key, #afKbDock .af-key,#afKbDock .af-shotkey-n,#afKbDock .af-key-l, #afKbDock .af-key{font-family:var(--ff-sans)} .cap,.lbcap-shared, .work-versions .it .cap, .af-viewer-cap,.af-viewer-cap .cap-txt, figcaption,.info-portrait figcaption, .byline,.writing-cite, .info-article,.info-section,.info-main-col, .info-section p,.info-section li,.info-section blockquote, .info-aside p,.info-aside li, body.project-page .proj-meta,body.project-page .proj-events{ font-family:var(--ff-serif); } .cap-tag,.cap .link-note, .info-pill,.info-nav-btn,.cv-download-link, .info-section h1,.info-section h2,.info-section h3,.info-section h4, .info-aside label,.info-aside button,.info-aside input, body.project-page .proj-article-label,body.project-page .proj-section-header{ font-family:var(--ff-sans); } .cap,.lbcap-shared,figcaption,.byline{font-variant-numeric:lining-nums tabular-nums} #afViewerHub .af-lpanel, body.af-nokb #afViewerHub .af-lpanel--drag, .af-hour-hud, .af-menu, .af-map-2d, .af-light input[type=range]::-webkit-slider-thumb, .af-light input[type=range]::-moz-range-thumb, #afViewerHub .af-light input[type=range]::-webkit-slider-thumb, #afViewerHub .af-light input[type=range]::-moz-range-thumb, #afViewerHub .af-sky-row input[type=range]::-webkit-slider-thumb, #afViewerHub .af-sky-row input[type=range]::-moz-range-thumb{box-shadow:none} #afViewerHub .af-lpanel,.af-menu,.af-hour-hud{border:1px solid rgba(var(--ink),.18)} #afViewerHub .af-lpanel{container-type:inline-size;font-size:max(var(--fs-min), clamp(11px, 5.4cqw, 16.6px))} #afViewerHub .af-lpanel .af-seg button{font-size:max(var(--fs-min), clamp(10px, .72em, 13px));padding:.45em .3em} #afViewerHub .af-lpanel-t{font-size:max(var(--fs-min), clamp(10px, .7em, 13px))} .af-fly-rest,.af-fly-hint{display:none} body.af-nokb.af-fly-live .af-fly-rest{ display:block;position:fixed;left:calc(18vw + 12px);bottom:calc(22vh + 12px);width:0;height:0; pointer-events:none;color:var(--surface-tx,#111);opacity:.55; } body.af-nokb.af-fly-live .af-fly-touch--thumb .af-fly-rest{opacity:.18} body.af-nokb.af-fly-live .af-fly-hint{ display:block;position:fixed;left:50%;bottom:calc(22vh + 96px);transform:translateX(-50%); padding:.45em .9em;border-radius:999px;pointer-events:none; font:500 max(var(--fs-min), 12px)/1.3 var(--ff-sans);letter-spacing:.04em;text-transform:uppercase; color:var(--surface-tx,#111);background:var(--surface-bg,rgba(255,255,255,.7)); border:1px solid rgba(var(--ink),.16);opacity:.9; transition:opacity .5s var(--ease,ease); } body.af-nokb.af-fly-live .af-fly-touch--used .af-fly-hint{opacity:0} .af-fly-stick-ring,.af-fly-stick-knob{box-shadow:none} .af-fly-stick-ring{border:1px solid rgba(var(--ink),.22)} .af-fly-stick-knob{border:1px solid rgba(var(--ink),.42)} .af-fly-touch{z-index:30;pointer-events:none} body.af-nokb.dzi-active .af-fly-touch{pointer-events:none} body.af-nokb.af-fly-live .af-fly-rest{pointer-events:auto} body.af-nokb.af-fly-live .af-fly-rest::before{ content:'';position:absolute;left:-72px;top:-72px;width:144px;height:144px;border-radius:50%; } .af-fly-stick{z-index:31} #afViewerHub.af-hub--mini > :not(.af-hub-keys){display:none !important} #afViewerHub.af-hub--mini .af-hub-keys{display:block !important;padding:0 !important;margin:0 !important;background:transparent !important;border:0 !important;width:100% !important;min-width:0 !important} #afViewerHub.af-hub--mini .af-hub-keys > :not(.af-shots){display:none !important} #afViewerHub.af-hub--mini .af-shots{display:block !important;padding:0 !important;margin:0 !important;background:transparent !important;border:0 !important;width:100% !important;min-width:0 !important} #afViewerHub.af-hub--mini .af-shots-body--map > :not(.af-map){display:none !important} #afViewerHub.af-hub--mini .af-map{ pointer-events:auto;width:100% !important;aspect-ratio:4/3;border-radius:var(--r-4,8px);overflow:hidden; border:1px solid rgba(var(--ink),.18);background:var(--surface-bg,#111); } body.af-nokb.af-fly-live .af-fly-rest{opacity:.85;left:calc(20vw + 8px);bottom:calc(20vh + 8px)} body.af-nokb.af-fly-live .af-fly-rest .af-fly-stick-ring{background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.85);box-shadow:none} body.af-nokb.af-fly-live .af-fly-rest .af-fly-stick-knob{background:rgba(255,255,255,.72);border:1.5px solid rgba(0,0,0,.45);box-shadow:none} body.af-nokb.af-fly-live .af-fly-stick .af-fly-stick-ring{background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.85)} body.af-nokb.af-fly-live .af-fly-stick .af-fly-stick-knob{background:rgba(255,255,255,.85);border:1.5px solid rgba(0,0,0,.45)} body.af-nokb.af-fly-live .af-fly-hint{background:rgba(255,255,255,.82);border:1.5px solid rgba(0,0,0,.35);color:#111} body.af-hud-light #afViewerHub, body.af-hud-light .af-hour-hud{ color:var(--surface-tx) } body.af-hud-light #idx-controls .af-looks-bay .af-chip--ghost{ border-color:rgba(23,24,26,.40); color:rgba(23,24,26,.52); } body.af-hud-light #afViewerHub .af-key:not([data-g]), body.af-hud-light #afKbDock .af-key:not([data-g]){ color:var(--surface-tx) } body.af-hud-light #afViewerHub .af-key:hover, body.af-hud-light #afKbDock .af-key:hover{ background:rgba(var(--ink),.10) } body.af-hud-light #afViewerHub #afHubKeys .af-looks-foot--board > button, body.af-hud-light #afKbDock #afHubKeys .af-looks-foot--board > button{ color:var(--surface-tx); border-color:rgba(var(--ink),.20); } body.af-hud-dark #idx-controls .af-looks-bay .af-chip--ghost{ border-color:rgba(236,233,227,.38); color:rgba(236,233,227,.55); } body.af-hud-dark #afViewerHub .af-key:hover, body.af-hud-dark #afKbDock .af-key:hover{ background:rgba(var(--ink),.14) } #afViewerHub .af-dcell--clock{ display:grid; gap:.42rem; justify-items:center } #afViewerHub .af-clk{ position:relative; width:5.4rem; height:5.4rem; margin:.1rem 0 .05rem; cursor:grab; touch-action:none } #afViewerHub .af-clk svg{ width:100%; height:100%; display:block; overflow:visible } #afViewerHub .af-clk-r{ fill:none; stroke:rgba(var(--ink),.16); stroke-width:1 } #afViewerHub .af-clk-t{ stroke:rgba(var(--ink),.26); stroke-width:1; stroke-linecap:round } #afViewerHub .af-clk-t--q{ stroke:rgba(var(--ink),.5); stroke-width:1.5 } #afViewerHub .af-clk-sun{ fill:rgb(var(--ink)); stroke:none } #afViewerHub .af-clk-p{ fill:rgb(var(--ink)); stroke:none; opacity:.8 } #afViewerHub .af-clk-v{ position:absolute; left:0; right:0; bottom:-.1rem; text-align:center; font-size:var(--fs-micro); letter-spacing:.08em; opacity:.6; font-variant-numeric:tabular-nums } #afViewerHub .af-seg--even{ display:grid; grid-template-columns:repeat(4,1fr); gap:.22rem; width:100% } .feat{ container-type:inline-size; container-name:feat; max-width:104rem; margin-inline:auto; padding-inline:clamp(1rem, 4cqi, 3.5rem); color:var(--tx); font-size:var(--fs-prose); line-height:1.55; } .feat-lead{ padding:0 0 clamp(1.25rem,3cqi,2.5rem); } .feat-stand{ margin:0; max-width:46ch; font-size:var(--fs-lead); line-height:1.4; } .feat-lead-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:var(--s-5) 0 0; } .feat-lead-actions .af-btn{ margin-top:0; width:auto; display:inline-flex; } .feat-ask-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin:var(--s-4) 0 0; } .feat-ask-actions .af-btn{ margin-top:0; width:auto; display:inline-flex; } .feat-band, .feat-ask{ border-top:1px solid var(--surface-border); padding-block:clamp(1.5rem,4cqi,3rem); } .feat-h{ margin:0 0 var(--s-4); font-size:var(--fs-title); font-weight:600; line-height:1.15; letter-spacing:normal; text-transform:none; text-wrap:balance; } .feat-prose{ max-width:62ch; } .feat-prose p{ margin:0 0 .9em; } .feat-prose p:last-child{ margin-bottom:0; } .feat-note{ margin:var(--s-5) 0 0; max-width:62ch; color:var(--tx2); font-size:var(--fs-meta); line-height:1.5; } @container feat (min-width:48rem){ .feat-band, .feat-ask{ display:grid; grid-template-columns:13rem minmax(0,1fr); column-gap:clamp(1.5rem,4cqi,4rem); align-items:start; } .feat-h{ grid-column:1; margin:0; font-size:var(--fs-ui); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tx2); position:sticky; top:6rem; align-self:start; } .feat-band > :not(.feat-h), .feat-ask > :not(.feat-h){ grid-column:2; } .feat-band > .feat-h ~ *{ grid-column:2; } } .feat-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:clamp(1rem,2.5cqi,2rem); } .feat-card{ min-width:0; } .feat-card-h{ margin:0 0 .4em; font-size:var(--fs-ui); font-weight:600; line-height:1.2; } .feat-card p{ margin:0; color:var(--tx2); font-size:var(--fs-meta); line-height:1.5; } .feat-steps{ list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:var(--s-5); counter-reset:feat-step; } .feat-step{ display:grid; grid-template-columns:2rem minmax(0,1fr); column-gap:var(--s-4); align-items:start; } .feat-step-n{ display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--surface-border); border-radius:var(--r-pill); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; color:var(--tx2); background:var(--surface-bg); } .feat-step-body{ min-width:0; padding-top:.15rem; } .feat-step-h{ margin:0 0 .3em; font-size:var(--fs-ui); font-weight:600; line-height:1.2; } .feat-step-body p{ margin:0; max-width:56ch; color:var(--tx2); font-size:var(--fs-meta); line-height:1.55; } .feat-specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:clamp(1rem,2.5cqi,2rem); } .feat-spec{ min-width:0; padding:var(--s-4); border:1px solid var(--surface-border); border-radius:var(--r-4); background:var(--surface-bg); } .feat-spec-h{ margin:0; font-size:var(--fs-ui); font-weight:600; line-height:1.2; } .feat-spec-sub{ margin:.15rem 0 var(--s-3); font-size:var(--fs-micro); color:var(--tx2); } .feat-spec-dl{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-3); row-gap:.25rem; margin:0 0 var(--s-3); padding:var(--s-3) 0 0; border-top:1px solid var(--surface-border); font-size:var(--fs-micro); } .feat-spec-note{ margin:0; font-size:var(--fs-meta); line-height:1.5; color:var(--tx2); } .feat-table{ width:100%; border-collapse:collapse; font-size:var(--fs-meta); font-variant-numeric:tabular-nums; } .feat-samples{ margin-top:var(--s-5); grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); } .feat-ask{ margin-top:0; border-top:1px solid var(--surface-border); background:var(--surface-bg-2); border-radius:var(--r-4); padding:clamp(1.25rem,3cqi,2rem) clamp(1rem,3cqi,2rem); margin-bottom:clamp(1.5rem,4cqi,3rem); } .feat-ask > p{ max-width:62ch; margin:0; color:var(--tx2); } @container feat (min-width:48rem){ .feat-ask{ padding-inline:clamp(1.25rem,3cqi,2.25rem); } } .feat--legal{ max-width:84rem; } .feat-lead--legal{ padding-bottom:clamp(1rem,2.5cqi,1.75rem); } .feat-updated{ margin:0; color:var(--tx2); font-size:var(--fs-meta); font-variant-numeric:tabular-nums; } .feat-legal{ max-width:72ch; } .feat-legal h2{ margin:2.25em 0 .5em; font-size:var(--fs-ui); font-weight:600; line-height:1.25; letter-spacing:normal; text-transform:none; border:0; padding:0; } .feat-legal p{ margin:0 0 .9em; line-height:1.6; } .feat-legal-list{ margin:0 0 1em; padding-left:1.4em; line-height:1.6; } .feat-address{ font-style:normal; line-height:1.7; } .af-copy-block > p:last-child{ margin-bottom:0; } body.admin-mode .af-copy-block.ql-container, body.admin-mode .af-copy-block .ql-container{ border:0; font:inherit; min-height:0; height:auto; overflow:visible; } body.admin-mode .af-copy-block, body.admin-mode .af-copy-block .ql-container, body.admin-mode .af-copy-block .ql-editor{ font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit; line-height:inherit; letter-spacing:inherit; word-spacing:inherit; font-variant:inherit; font-feature-settings:inherit; text-rendering:inherit; color:inherit; text-align:inherit; text-wrap:inherit; white-space:normal; word-break:normal; } .af-copy-savebar .af-btn{ margin-top:0; width:auto; display:inline-flex; } .af-module--project, .project-page .proj-hero, .af-fmod-body .af-module--project{ container-type:inline-size; } :root{ --proj-measure:min(66ch, 92cqi); --proj-over:min(104ch, 100cqi); } .proj-hero{ padding-block:clamp(1.6rem,5cqi,4rem) 0; } .proj-hero-text{ width:var(--proj-measure); margin-inline:auto; } .proj-title{ font-size:max(var(--fs-min), clamp(1.9rem, 5.2cqi, 3.2rem)); line-height:1.04; letter-spacing:-.021em; margin:0 0 .28em; text-wrap:balance; } .proj-meta{ font-family:var(--ff-sans); font-size:var(--fs-ui); color:var(--tx); opacity:.74; display:flex; flex-wrap:wrap; gap:.45em; align-items:baseline; margin-bottom:1.7em; } .proj-events{ list-style:none; margin:0 0 1.4em; padding:0; font-size:var(--fs-prose); opacity:.8; } .proj-sections{ width:100%; } .proj-section{ width:var(--proj-measure); margin-inline:auto; } .proj-section-body, .proj-section-body p, .proj-section-body li, .proj-article-body, .proj-article-body p{ font-size:var(--fs-prose); line-height:1.62; } .proj-section-body > p{ max-width:none; margin:0 0 1.05em; } .proj-section-body > p:last-child{ margin-bottom:0; } .proj-section-header{ font-size:var(--fs-ui); } #pageTitleCap.page-title-cap{ font-size:var(--fs-ui); line-height:1.4; } .proj-run{ display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 28cqi, 380px), 1fr)); gap: clamp(1rem, 3cqi, 2.4rem); align-items: start; width: 100%; margin: clamp(2rem,6cqi,3.5rem) 0 0; padding: 0; list-style: none; } .proj-run > .it{ display: block; width: 100%; margin: 0; aspect-ratio: auto; min-width: 0; } .proj-run > .it figure{ margin:0; height:auto; } .proj-run > .it .g, .proj-run > .it .frame{ position:static; aspect-ratio:auto; width:100%; height:auto; } .proj-run > .it .frame img, .proj-run > .it figure > img{ width:100%; height:auto; max-height:none; object-fit:contain; } .proj-run > .it .cap{ position:static; opacity:1; background:none; padding:.7rem 0 0; font-size:var(--fs-prose); line-height:1.5; text-align:left; color:var(--tx); } .proj-run > .it .cap em{ font-style:normal; } body.project-page .proj-hero:not(.proj-hero--publication), .af-fmod-body .proj-hero:not(.proj-hero--publication){ display:block; } body.project-page .proj-hero .proj-hero-text, .af-fmod-body .proj-hero .proj-hero-text{ width:var(--proj-measure); max-width:100%; margin-inline:auto; order:0; } .work-caption-head--quiet{ display:flex; align-items:center; gap:.5rem; margin:0; padding:0; min-height:0; border:0; background:none; } .work-caption-head--quiet:not(:has(.ws-giga-badge)){ display:none; } .work-caption-head--quiet .ws-giga-badge{ margin:0; } body.project-page .proj-meta, .af-fmod-body .proj-meta{ font-size:var(--fs-prose); line-height:1.55; opacity:.74; color:var(--tx); } #pageTitleCap.page-title-cap{ font-size:var(--fs-prose); line-height:1.45; } .work-hero-band{ container-type:inline-size; container-name:wkband; display:block; } .work-family-col{ position:static; max-height:none; overflow:visible; max-width:min(74rem, 100%); margin:1.2rem auto 0; padding:0 var(--inset); container-type:inline-size; container-name:wkrail; } .work-hero[data-wk-box]{ position:relative; block-size:min(72vh, 72cqh); aspect-ratio:var(--wk-aspect, 4 / 3); inline-size:auto; max-inline-size:100%; margin-inline:auto; display:grid; place-items:center; background: linear-gradient(rgba(var(--ink),.018), rgba(var(--ink),.018)); border-radius:var(--r-2); } .work-hero[data-wk-box] img#workImg, .work-hero[data-wk-box] video{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; margin:0; transition:opacity var(--dur-3) var(--ease); } .work-hero[data-wk-box] img#workImg.is-swapping{ opacity:.25; } .af-fmod .work-hero[data-wk-box]{ block-size:min(46vh, 26rem); } .wk-bar{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.5rem .8rem; margin:.55rem auto 0; padding:0 var(--inset); font-size:var(--fs-meta); color:var(--tx2); min-height:1.4em; } .wk-bar-role{ color:var(--tx); letter-spacing:.01em; } .wk-bar-meta{ font-variant-numeric:tabular-nums; } .wk-bar-act{ border:0; background:transparent; padding:0; margin:0; font:inherit; color:var(--lnk); cursor:pointer; text-decoration:underline; text-underline-offset:.22em; text-decoration-color:rgba(var(--ink),.25); } .wk-filters{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.9rem 0 .6rem; } .wk-chip{ display:inline-flex; align-items:baseline; gap:.35em; border:1px solid rgba(var(--ink),.14); background:transparent; border-radius:var(--r-pill); padding:.18em .7em; font:inherit; font-size:var(--fs-micro); letter-spacing:.02em; color:var(--tx2); cursor:pointer; transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .wk-chip:hover{ border-color:rgba(var(--ink),.34); color:var(--tx); } .wk-chip.is-on{ border-color:var(--tx); color:var(--tx); } .wk-chip-n{ font-variant-numeric:tabular-nums; opacity:.55; } .wk-rail{ display:block; } .wk-group{ margin:0 0 1.35rem; } .wk-group[hidden]{ display:none; } .wk-group-hd{ display:flex; align-items:baseline; gap:.5rem; padding:0 0 .35rem; margin:0 0 .5rem; border-bottom:1px solid rgba(var(--ink),.10); } .wk-group-name{ margin:0; font:inherit; font-size:var(--fs-ui); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--tx); } .wk-group-n{ font-size:var(--fs-micro); font-variant-numeric:tabular-nums; color:var(--tx2); } .wk-group-hint{ font-size:var(--fs-micro); color:var(--tx2); opacity:.7; margin-inline-start:auto; text-align:end; } @container wkrail (max-width:30rem){ .wk-group-hint{ display:none; } } .wk-run{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill, minmax(clamp(58px, 11cqi, 104px), 1fr)); } .wk-cell{ min-width:0; display:flex; flex-direction:column; gap:.2rem; } .wk-thumb{ position:relative; display:block; width:100%; padding:0; border:1px solid rgba(var(--ink),.12); background:rgba(var(--ink),.02); border-radius:var(--r-2); cursor:pointer; overflow:hidden; aspect-ratio:1 / 1; transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .wk-thumb:hover{ border-color:rgba(var(--ink),.38); } .wk-cell[aria-current] .wk-thumb{ border-color:var(--tx); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--tx); } .wk-thumb-img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:2px; } .wk-thumb-blank{ display:grid; place-items:center; width:100%; height:100%; font-size:max(var(--fs-min), 1.4em); color:var(--tx2); opacity:.5; } .wk-mark{ position:absolute; inset-block-start:3px; inset-inline-start:3px; min-width:1.15em; height:1.15em; padding:0 .18em; display:grid; place-items:center; font-size:var(--fs-micro); line-height:1; border-radius:var(--r-1); background:rgba(var(--paper-rgb, 255,255,255),.86); color:var(--tx); opacity:.82; box-shadow:0 0 0 1px rgba(var(--ink),.10); } .wk-mark--edition{ font-variant-numeric:tabular-nums; } .wk-mark--experience, .wk-mark--moving{ background:var(--tx); color:var(--bg); opacity:.92; } .wk-giga{ position:absolute; inset-block-start:3px; inset-inline-end:3px; font-size:var(--fs-micro); line-height:1; padding:.1em .22em; border-radius:var(--r-1); background:rgba(var(--ink),.72); color:#fff; } .wk-real{ position:absolute; inset-inline:0; inset-block-end:0; padding:.12em .3em; font-size:var(--fs-micro); line-height:1.3; text-align:center; letter-spacing:.03em; } .wk-real--yes{ background:rgba(42,94,56,.88); color:#fff; } .wk-real--no{ background:rgba(var(--ink),.55); color:#fff; } .wk-pending{ position:absolute; inset-inline:0; inset-block-end:0; padding:.12em .3em; font-size:var(--fs-micro); line-height:1.3; text-align:center; background:var(--edit); color:#fff; } .wk-cap{ display:block; width:100%; text-align:start; border:0; background:transparent; padding:0; margin:0; font:inherit; font-size:var(--fs-micro); line-height:1.25; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } button.wk-cap:hover{ color:var(--tx); text-decoration-color:currentColor; } .wk-cell[aria-current] .wk-cap{ color:var(--tx); } .wk-tool{ border:1px solid rgba(var(--ink),.18); background:transparent; border-radius:var(--r-pill); padding:.14em .6em; margin-inline-start:.4rem; font:inherit; font-size:var(--fs-micro); color:var(--tx2); cursor:pointer; } .wk-tool:hover{ border-color:var(--tx); color:var(--tx); } .wk-empty{ font-size:var(--fs-meta); color:var(--tx2); } .wk-appearances{ margin:1.6rem 0 0; } .wk-aps{ list-style:none; margin:0; padding:0; display:grid; gap:0; } .wk-ap{ display:grid; grid-template-columns:4.2ch minmax(0,1fr); gap:.8rem; align-items:baseline; padding:.45rem 0; border-top:1px solid rgba(var(--ink),.08); } .wk-ap:first-child{ border-top:0; } .wk-ap-when{ font-size:var(--fs-micro); font-variant-numeric:tabular-nums; color:var(--tx2); } .wk-ap-what{ display:grid; gap:.1rem; text-align:start; min-width:0; border:0; background:transparent; padding:0; font:inherit; } .wk-ap-title{ font-size:var(--fs-meta); color:var(--tx); } .wk-ap-where{ font-size:var(--fs-micro); color:var(--tx2); } .af-menu.wk-hud{ min-width:min(290px, 92vw); max-width:min(380px, 94vw); padding:.3rem; } .wk-hud-hd{ display:grid; gap:.1rem; padding:.35rem .5rem .45rem; border-bottom:1px solid rgba(var(--ink),.1); margin-bottom:.25rem; } .wk-hud-kind{ font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--tx2); } .wk-hud-name{ font-size:var(--fs-micro); color:var(--tx); overflow-wrap:anywhere; } .wk-hud-note{ margin:.1rem .5rem .35rem; font-size:var(--fs-micro); color:var(--tx2); } .wk-hud-row{ display:flex; align-items:baseline; gap:.5rem; width:100%; border:0; background:transparent; padding:.34em .5em; margin:0; font:inherit; font-size:var(--fs-meta); color:var(--tx); text-align:start; cursor:pointer; border-radius:var(--r-2); } .wk-hud-row:hover{ background:rgba(var(--ink),.06); } .wk-hud-label{ flex:0 0 auto; color:var(--tx2); font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; } .wk-hud-value{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wk-hud-chev{ flex:0 0 auto; color:var(--tx2); } .wk-hud-act{ display:block; width:100%; border:0; background:transparent; padding:.34em .5em; margin:0; font:inherit; font-size:var(--fs-meta); color:var(--tx); text-align:start; cursor:pointer; border-radius:var(--r-2); } .wk-hud-act:hover{ background:rgba(var(--ink),.06); } .wk-hud-act.is-on{ background:rgba(var(--ink),.08); font-weight:500; } .wk-hud-danger{ color:var(--err); } .wk-hud-danger:hover{ background:rgba(156,32,24,.08); } .wk-hud-apply{ text-align:center; border:1px solid var(--tx); margin-top:.4rem; } .wk-hud-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.4em .5em; margin:.2rem 0 0; background:rgba(156,32,24,.06); border-radius:var(--r-2); font-size:var(--fs-micro); } .wk-hud-q{ flex:1 1 100%; color:var(--tx); } .wk-hud-yes, .wk-hud-no{ border:1px solid rgba(var(--ink),.2); background:transparent; border-radius:var(--r-2); padding:.14em .7em; font:inherit; cursor:pointer; } .wk-hud-yes{ border-color:var(--err); color:var(--err); } .wk-hud-input{ width:calc(100% - 1em); margin:.2rem .5em .35rem; border:1px solid var(--surface-input-border); border-radius:var(--r-2); background:var(--surface-input-bg); color:var(--tx); padding:.3em .5em; font:inherit; font-size:var(--fs-meta); } .wk-hud-list{ max-height:14rem; overflow:auto; } .wk-pics{ display:grid; gap:.3rem; padding:.2rem .4rem .4rem; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); max-height:16rem; overflow:auto; } .wk-pic{ border:1px solid rgba(var(--ink),.14); background:transparent; padding:0; border-radius:var(--r-2); overflow:hidden; cursor:pointer; aspect-ratio:1/1; } .wk-pic img{ width:100%; height:100%; object-fit:contain; display:block; } .wk-pic.is-on{ border-color:var(--ok); box-shadow:0 0 0 2px rgba(42,94,56,.3); } .af-menu.wk-hud--cull{ max-width:min(520px, 95vw); } .wk-bins{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.2rem .4rem; } .wk-bin{ border:1px dashed rgba(var(--ink),.2); border-radius:var(--r-3); padding:.3rem; min-height:6rem; } .wk-bin.is-over{ border-color:var(--tx); background:rgba(var(--ink),.04); } .wk-bin--keep{ border-color:rgba(42,94,56,.4); } .wk-bin--discard{ border-color:rgba(156,32,24,.35); } .wk-bin-hd{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.3rem; } .wk-bin-name{ font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--tx); } .wk-bin-sub{ font-size:var(--fs-micro); color:var(--tx2); } .wk-bin-list{ display:flex; flex-wrap:wrap; gap:.25rem; min-height:3.6rem; align-content:flex-start; } .wk-echip{ display:grid; gap:1px; width:42px; cursor:grab; border:1px solid rgba(var(--ink),.14); border-radius:var(--r-2); padding:2px; background:var(--surface-bg); } .wk-echip:active{ cursor:grabbing; } .wk-echip img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; border-radius:1px; } .wk-echip-blank{ display:grid; place-items:center; aspect-ratio:1/1; background:rgba(var(--ink),.05); color:var(--tx2); font-size:var(--fs-micro); } .wk-echip-n{ font-size:var(--fs-micro); text-align:center; color:var(--tx2); font-variant-numeric:tabular-nums; } .wk-echip[data-real="1"]{ border-color:rgba(42,94,56,.5); } @media (prefers-reduced-motion:reduce){ .work-hero[data-wk-box] img#workImg, .wk-thumb{ transition:none; } } .wk-gridwrap{ margin:.2rem 0 0; } .wk-grid{ display:grid; grid-template-columns:repeat(var(--wk-gcols, 10), minmax(0, 1fr)); gap:1px; background:rgba(var(--ink),.14); border:1px solid rgba(var(--ink),.14); max-width:min(48rem, 100%); } .wk-gcell{ position:relative; padding:0; border:0; margin:0; cursor:pointer; aspect-ratio:var(--wk-gaspect, 1); background:var(--surface-bg); overflow:hidden; transition:outline-color var(--dur-2) var(--ease); outline:0 solid transparent; } .wk-gcell img{ width:100%; height:100%; object-fit:contain; display:block; } .wk-gcell.is-empty{ background:rgba(var(--ink),.05); cursor:default; } .wk-gcell-ref{ position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-micro); color:var(--tx2); opacity:.5; } .wk-grid-foot{ display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin:.35rem 0 0; font-size:var(--fs-micro); color:var(--tx2); } .wk-grid-shape{ font-variant-numeric:tabular-nums; } .wk-grid-hint{ opacity:.7; } .wk-triage{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; margin:.2rem 0 1rem; padding:.55rem .75rem; border:1px solid var(--edit); border-radius:var(--r-3); background:color-mix(in srgb, var(--edit) 7%, transparent); } .wk-triage-say{ margin:0; flex:1 1 22rem; font-size:var(--fs-meta); color:var(--tx); } .wk-triage-btn{ display:inline-flex; align-items:baseline; gap:.35em; border:1px solid var(--edit); background:transparent; color:var(--tx); border-radius:var(--r-pill); padding:.18em .7em; font:inherit; font-size:var(--fs-micro); letter-spacing:.02em; cursor:pointer; white-space:nowrap; } .wk-triage-btn:hover{ background:color-mix(in srgb, var(--edit) 14%, transparent); } .wk-triage.is-scoped{ border-style:dashed; } .wk-flag{ position:absolute; inset-block-end:3px; inset-inline-end:3px; width:1.15em; height:1.15em; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--edit); color:#fff; font-size:var(--fs-micro); line-height:1; font-weight:600; } .wk-cell.is-flagged .wk-thumb{ border-color:var(--edit); } .wk-hud-act.is-near{ font-weight:500; } .af-menu.wk-hud--decisions{ max-width:min(420px, 94vw); max-height:70vh; overflow:auto; } .wk-dec{ padding:.45rem .5rem; border-top:1px solid rgba(var(--ink),.08); } .wk-dec:first-of-type{ border-top:0; } .wk-dec-q{ margin:0 0 .35rem; font-size:var(--fs-micro); color:var(--tx); } .wk-dec-acts{ display:flex; gap:.35rem; flex-wrap:wrap; } .wk-dec-yes, .wk-dec-no{ border:1px solid rgba(var(--ink),.2); background:transparent; color:var(--tx); border-radius:var(--r-2); padding:.14em .7em; font:inherit; font-size:var(--fs-micro); cursor:pointer; } .wk-dec-yes{ border-color:var(--tx); } .wk-dec-yes[disabled], .wk-dec-no[disabled]{ opacity:.45; cursor:default; } .af-menu.wk-hud--fields{ max-width:min(460px, 95vw); max-height:72vh; overflow:auto; } .wk-fields{ display:grid; gap:0; padding:.2rem 0; } .wk-field{ display:grid; grid-template-columns:minmax(7.5rem, 38%) minmax(0, 1fr); gap:.6rem; align-items:baseline; padding:.24rem .5rem; border-top:1px solid rgba(var(--ink),.06); } .wk-field:first-child{ border-top:0; } .wk-field-k{ font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wk-field-v{ font-size:var(--fs-micro); color:var(--tx); min-height:1.45em; line-height:1.45; cursor:text; border-radius:var(--r-1); padding:0 .2em; margin:0 -.2em; overflow-wrap:anywhere; } .wk-field-v:hover{ background:rgba(var(--ink),.055); } .wk-field-v select.af-inline-edit-input{ height:1.45em; padding:0 .2em; } .af-module--work .af-meta-table, .af-module--edition .af-meta-table{ grid-template-columns:minmax(0, 13rem) minmax(0, 1fr); } .af-module--work .af-meta-label, .af-module--edition .af-meta-label{ white-space:normal; overflow-wrap:anywhere; hyphens:auto; align-self:start; } .wk-backhouse{ margin:0 0 1.4rem; } .wk-bh-hd{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding:0 0 .3rem; border-bottom:1px solid rgba(var(--ink),.10); margin-bottom:.5rem; } .wk-bh-name{ margin:0; font:inherit; font-size:var(--fs-ui); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--tx); } .wk-bh-hint{ font-size:var(--fs-micro); color:var(--tx2); opacity:.7; } .wk-bh-row{ display:flex; flex-wrap:wrap; gap:.3rem; } .wk-bh-chip{ display:inline-flex; align-items:baseline; gap:.35em; border:1px solid rgba(var(--ink),.14); background:transparent; border-radius:var(--r-pill); padding:.18em .7em; font:inherit; font-size:var(--fs-micro); color:var(--tx2); cursor:pointer; transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .wk-bh-chip:hover{ border-color:rgba(var(--ink),.34); color:var(--tx); } .wk-bh-chip.is-on{ border-color:var(--tx); color:var(--tx); } .wk-bh-chip-n{ font-variant-numeric:tabular-nums; opacity:.55; } .wk-bh-open{ margin-top:.6rem; } .wk-bh-open .wk-bh-section[hidden]{ display:none; } .wk-bh-open .wk-bh-section{ margin:0; } .af-work-admin-bar.wk-verbs-moved{ display:flex; justify-content:center; flex-wrap:wrap; gap:.15rem .5rem; margin:.35rem auto 0; padding:0 var(--inset); max-width:min(74rem, 100%); font-size:var(--fs-micro); } .af-work-admin-bar.wk-verbs-moved button{ font-size:var(--fs-micro); } .wk-acts-wrap{ margin:1.4rem 0 0; padding:.9rem 0 0; border-top:1px solid rgba(var(--ink),.10); display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; } .wk-acts-wrap > .wk-acts-inq{ margin:0; flex:0 0 auto; } .wk-acts-wrap > .wk-acts-share{ margin:0; flex:1 1 20rem; min-width:0; } .wk-acts-wrap .af-sec{ border:0; padding:0; } .wk-acts-wrap .af-sec-body{ padding:0; } .wk-acts-wrap .af-sec-hdrow[hidden], .wk-acts-wrap .af-sec-hdr[hidden]{ display:none; } .wk-acts{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:center; flex:0 0 auto; margin-inline-start:auto; } .wk-act{ font-size:var(--fs-meta); color:var(--lnk); text-decoration:underline; text-underline-offset:.22em; text-decoration-color:rgba(var(--ink),.25); border:0; background:transparent; padding:0; font-family:inherit; cursor:pointer; white-space:nowrap; } .wk-group-where{ font-size:var(--fs-micro); color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .wk-group-hd .wk-group-hint{ margin-inline-start:auto; } .wk-bar-where{ color:var(--tx2); } .wk-bar-role{ color:var(--tx); } .wk-merged{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; margin:1rem 0 0; padding:.55rem .75rem; border:1px solid rgba(var(--ink),.16); border-radius:var(--r-3); background:rgba(var(--ink),.02); } .wk-merged-say{ margin:0; flex:1 1 20rem; font-size:var(--fs-meta); color:var(--tx); } .wk-merged-btn{ border:1px solid rgba(var(--ink),.22); background:transparent; color:var(--tx); border-radius:var(--r-pill); padding:.16em .8em; font:inherit; font-size:var(--fs-micro); cursor:pointer; white-space:nowrap; } .wk-merged-btn:hover{ border-color:var(--tx); } .wk-merged-list[hidden]{ display:none; } .wk-merged-list{ max-height:60vh; overflow:auto; margin-top:.5rem; } .wk-unused{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; font-size:var(--fs-micro); color:var(--tx2); } .wk-unused-btn{ border:0; background:transparent; padding:0; font:inherit; color:var(--lnk); cursor:pointer; text-decoration:underline; text-underline-offset:.2em; text-decoration-color:rgba(var(--ink),.25); } :root{ --fs: 16px; --fs-min: .8125rem; --fs-body: clamp(.8125rem, .76rem + .25vw, .9375rem); --fs-read: clamp(.9375rem, .86rem + .32vw, 1.125rem); --fs-h3: clamp(1.0625rem, .96rem + .45vw, 1.375rem); --fs-h2: clamp(1.25rem, 1.04rem + .8vw, 1.75rem); --fs-h1: clamp(1.5rem, 1.18rem + 1.4vw, 2.5rem); --fs-micro: var(--fs-body); --fs-meta: var(--fs-body); --fs-ui: var(--fs-body); --fs-info: var(--fs-body); --fs-prose: var(--fs-read); --fs-lead: var(--fs-h3); --fs-title: var(--fs-h2); --ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-head: 'Crimson Pro', Georgia, 'Times New Roman', serif; --ff-read: 'Crimson Pro', Georgia, 'Times New Roman', serif; --ff-serif: var(--ff-sans); --ff-mono: var(--ff-sans); --ff: var(--ff-sans); --tx2: rgba(var(--ink), .74); } #afViewerHub,.af-hour-hud,#idx-controls .af-looks-bay{ --ff-serif: var(--ff-sans); --ff-mono: var(--ff-sans); } html{ font-size: 16px; } body{ font-family: var(--ff-sans); font-size: var(--fs-body); } .af-hud-pile-n,.gal-side-n,.tk-px,.af-readout,td,.cat-num{ font-variant-numeric: tabular-nums; } button,input,select,textarea,.button,label, .af-hud-pill,.af-hud-modebtn,.af-hud-zlabel,.tile-badge,.af-stool,.gsel-act,.gal-side-item,.gal-side-h, .af-menu,.af-menu-opt,.af-menu-note,.af-menu-segb,.af-menu-filter,.af-menu-select, .wk-hud,.wk-hud-act,.wk-triage-btn,.af-key,.af-key-l,.af-shotkey-n, .tile-badges,.cap-tag,.cap-src,.qt,.quickterms a{ font-family: var(--ff-sans); font-size: var(--fs-body); } .tile-badge,.af-stool,.af-hud-pill,.gsel-act,.wk-triage-btn,.af-menu-segb{ padding: .28em .8em; border-radius: var(--r-pill); line-height: 1.25; } .af-menu-seg{ display:inline-flex; gap:2px; padding:2px; margin:.3rem 0; border-radius:var(--r-pill); background:rgba(160,160,160,.14) } .af-menu-segb{ all:unset; cursor:pointer; padding:.28em .8em; border-radius:var(--r-pill); font-family:var(--ff-sans); font-size:var(--fs-body) } .af-menu-opt--record{ margin-top:.3em; border-top:1px solid var(--surface-border) } .af-work-admin-bar button,.af-work-admin-bar a{ opacity: 1; color: var(--tx2); } h1,h2,h3, .af-fmod-title,#pageTitleCap,.page-title-cap,.proj-title,.article-title,.article-subtitle, .cap em,.cap .t,.lbcap-shared .t,.work-cap em{ font-family: var(--ff-head); } h1{ font-size: max(var(--fs-min), var(--fs-h1)); } .article-body,.writing-article-body,.proj-article-body,.feat-prose,.article-lead,.info-article, blockquote,.article-block--quote, .writing-cite,.af-cite-entry,.ed-cite-list,.it[data-kind="citation"] .cap{ font-family: var(--ff-read); font-size: var(--fs-read); } .ql-snow .ql-picker,.ql-snow .ql-tooltip,.ql-snow .ql-tooltip input[type=text]{ font-family: var(--ff-sans); font-size: var(--fs-body); } .tile-badge{ height:auto; min-height:1.55em; padding:.18em .7em; font-weight:600; } .tile-badge-ic svg{ width:.8em; height:.8em; } :root{ --afk: clamp(40px, min(2.75rem, 1.8vw + 14px, 6vh), 56px); } @media (max-width: 1160px){ #afViewerHub{ flex-wrap: wrap-reverse; justify-content: flex-end; left: auto !important; max-width: calc(calc(100vw / var(--ui-z,1)) - 16px); } } .ql-container.ql-container,.ql-container.ql-container .ql-editor{ font-family: inherit; font-size: inherit; } .ql-container.ql-container .ql-editor h3{ font-family: var(--ff-head); font-size: var(--fs-h3); } small{ font-size: max(var(--fs-min), .85em); } .info-section,.info-main-col,.info-section p,.info-section li,.info-section blockquote, .writing-block--text .ql-editor{ font-family: var(--ff-read); } .writing-block--text .ql-editor{ font-size: var(--fs-read); } .info-section h1,.info-section h2,.info-section h3,.info-section h4{ font-family: var(--ff-head); } .tile-badge,.tile-badge-proj,.tile-badge-also{ background:transparent !important; color:var(--tx,#1a1a1a) !important; border:1px solid rgba(var(--ink),.22); font-weight:400; letter-spacing:0; min-height:0; padding:.12em .6em; line-height:1.3; max-width:100%; min-width:0; justify-content:flex-start; text-align:left; white-space:normal; box-shadow:none; } .tile-badge-sale,.tile-badge-lic,.tile-badge-ok{ --chip-dot:var(--ok); } .tile-badge-sold{ --chip-dot:var(--err); } .tile-badge-warn,.tile-badge-src.src-tile{ --chip-dot:var(--warn); } .tile-badge-type{ --chip-dot:var(--accent); } .tile-badge-loc{ --chip-dot:#b89d6a; } .tile-badge-brain{ border-color:var(--accent) !important; color:var(--accent) !important; --chip-dot:var(--accent); } .tile-badge-dot{ border:0; padding:0; } .tile-badge .tile-badge-ic{ display:inline-flex; vertical-align:-.1em; margin-right:.25em; } body.admin-mode .it .tile-badges{ width:100%; justify-content:center; } @media (max-width:540px){ .site-header{ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"brand brand" "search buttons"; } .site-header .buttons{ flex-wrap:wrap; overflow:visible; row-gap:.35rem; justify-content:flex-end; } .site-header .searchwrap{ max-width:none; } .site-header .buttons{ gap:4px; } .site-header .buttons > .button, .site-header .buttons > .af-hud-puck{ width:40px; height:40px; min-width:40px; padding:0; } } body :is(.cap-tag,.wcard-date,.wcard-kind,.article-kicker,.article-related-head,.article-related-date,.af-cart-empty p,.af-stub-note,.af-doc-empty, .wk-group-hint,.wk-bh-hint,.af-move-date,.af-move-notes,.proj-section-source,.site-footer small, .site-footer-copy,.ord-muted,.ord-chip--zero){ color:var(--tx2); opacity:1; } body :is(.ce-add-btn,.ed-set-here){ color:#1a4d99; } .next-wrap .navcount{ bottom:-.95em; } .af-fmod--sheet .af-fmod-title-group{ position:static; transform:none; left:auto; flex:1 1 auto; min-width:0; margin-left:.4rem; justify-content:flex-start; } .af-fmod--sheet .af-fmod-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:540px){ body.info-page:not(.feat-page) .site-header .info-nav-row{ position:static; flex-basis:100%; order:99; justify-content:flex-end; } } @media (max-width:740px){ body:is(.info-page,.project-page,.work-page,.edition-page,.gallery-index-page,.article-page,.writing-index-page) main{ padding-top:calc(var(--header-h, 150px) + .75rem); } } .af-fmod--sheet .af-fmod-header:has(.gallery-toolbar){ flex-wrap:wrap; height:auto; row-gap:.35rem; } .af-fmod--sheet .af-fmod-header .gallery-toolbar{ flex:1 1 100%; min-width:0; margin-left:0; justify-content:flex-end; } .af-fmod--sheet .af-fmod-header .gallery-toolbar .gallery-searchwrap{ flex:1 1 auto; min-width:0; max-width:none; } .info-nav-btn{ padding:.5em .85em; } .site-footer a{ display:inline-block; padding-block:.3em; } body :is(.proj-section-header,.wk-chip-n,.article-readtime,.wk-grid-hint,.proj-db-edit-btn,.article-meta){ opacity:1; } body :is(.proj-section-header,.wk-chip-n,.article-readtime,.wk-grid-hint,.article-meta){ color:var(--tx2); } .proj-run-head{ grid-column:1/-1; width:100%; margin:1.6rem 0 .4rem; text-align:center; } .proj-run-head h3{ margin:0; font-family:var(--ff-head); font-size:var(--fs-h3); font-weight:600; } .wk-cap[type="button"]{ min-height:24px; } html[data-tod-dim] :is(.af-meta-label,.af-pagerail-title){ opacity:.85; } html[data-tod-dim] :is(.ce-add-btn,.ed-set-here){ color:var(--accent); } html[data-tod-dim] :is(.cap-src,.seq-ttl,.wcard-mark,.proj-body-editor-note,.proj-doc-title,.af-pagerail a,.proj-documents-head){ opacity:1; color:var(--tx2); } html[data-tod-dim] :is(.ce-add-btn,.ed-set-here){ color:#000; } .wkm-host{ display:block; } .wkm-host > .wkm{ position:relative; width:100%; height:min(78vh, calc(100vh - var(--header-h, 120px) - 2rem)); min-height:320px; } .af-fmod .af-fmod-header .af-fmod-title-group{ min-width:0; flex:1 1 auto; overflow:hidden; } .af-fmod .af-fmod-header .af-fmod-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .wkm-host .af-pagerail{ display:none; } .af-fmod .wkm-host{ height:100%; } .wkm-stage{ position:absolute; inset:var(--wkm-pad, 28px) calc(var(--wkm-pad, 28px) + var(--wkm-rail-w, 0px)) var(--wkm-pad, 28px) var(--wkm-pad, 28px); display:flex; align-items:center; justify-content:center; } .wkm-stage > .work-hero{ position:relative; width:100%; height:100%; max-width:100%; max-height:100%; aspect-ratio:auto !important; display:flex; align-items:center; justify-content:center; background:none; border:0; overflow:visible; } .wkm-stage .work-hero > img, .wkm-stage .work-hero > video, .wkm-stage .work-hero > picture > img{ position:static !important; inset:auto !important; transform:none !important; max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; } .wkm-stage .work-hero > canvas, .wkm-stage .work-hero > .af-viewer-stage, .wkm-stage .work-hero > div{ max-width:100%; max-height:100%; } .wkm-stage .work-hero > img, .wkm-stage .work-hero > video, .wkm-stage .work-hero-video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .af-fmod .wkm-stage > .work-hero{ width:100% !important; height:100% !important; max-height:100% !important; } .af-fmod .wkm-stage .work-hero > img, .af-fmod .wkm-stage .work-hero > picture > img, .af-fmod .wkm-stage .work-hero > video, .af-fmod .wkm-stage .work-hero-video{ width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; } .wkm-emptied{ display:none !important; } .wkm-panes{ position:absolute; inset:0; pointer-events:none; } .wkm-rail{ position:absolute; top:0; right:0; z-index:calc(var(--z-hud, 1200) + 1); display:flex; flex-direction:column; align-items:stretch; gap:2px; width:max-content; max-width:11rem; pointer-events:auto; } .wkm-chip{ display:flex; align-items:center; gap:.5em; padding:.42em .7em .42em .6em; min-height:2.1em; font-size:var(--fs-micro); letter-spacing:.06em; text-transform:none; text-align:left; background:var(--ic-bg); opacity:.85; border:0; border-radius:var(--r-pill) 0 0 var(--r-pill); backdrop-filter:blur(var(--frost,12px)) saturate(1.2); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2); } .wkm-chip:hover{ opacity:1; background:rgba(148,148,148,.4); } .wkm-chip[aria-pressed="true"]{ opacity:1; background:var(--surface-bg); color:var(--surface-tx); font-weight:400; border-color:transparent; } .wkm-chip[hidden]{ display:none !important; } .wkm-chip-i{ width:1.15em; height:1.15em; flex:0 0 auto; display:grid; place-items:center; } .wkm-chip-i svg{ width:100%; height:100%; display:block; } .wkm-chip-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wkm-chip-n{ margin-left:auto; font-variant-numeric:tabular-nums; opacity:.6; padding-left:.6em; } .wkm-chip-n:empty{ display:none; } .wkm-chip.wkm-chip--where{ align-self:flex-start; justify-content:center; padding:.42em .6em; } .wkm-hud[hidden]{ display:none !important; } .wkm-hud{ position:absolute; top:0; right:11rem; width:clamp(260px, 38%, 560px); height:auto; max-height:100%; display:flex; flex-direction:column; pointer-events:auto; box-sizing:border-box; border-radius:var(--r-6) 0 0 var(--r-6); background:var(--surface-bg); color:var(--surface-tx); border:0; box-shadow:none; padding:0; font-family:var(--ff-sans); z-index:var(--z-hud, 1200); overflow:hidden; } .wkm-hud-hd{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); flex:none; padding:.5rem .7rem .3rem .9rem; } .wkm-hud-grip{ position:absolute; left:0; top:0; bottom:0; width:8px; cursor:ew-resize; touch-action:none; z-index:2; } .wkm-hud-name{ margin:0; font:var(--fs-micro)/1.2 var(--ff-sans); font-weight:400; letter-spacing:.1em; text-transform:uppercase; opacity:.55; } .wkm-hud-sub{ display:none; } .wkm-hud-tools{ display:flex; gap:.2rem; } .wkm-hud-x{ appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer; font-size:max(var(--fs-min, 13px), 15px); line-height:1; opacity:.45; padding:0 4px; color:inherit; } .wkm-hud-body{ flex:1; min-height:0; overflow:auto; padding:0 .7rem .6rem; overscroll-behavior:contain; } .wkm-hud-body > *{ max-width:100%; } .wkm-hud .wk-rail{ max-height:none; } .wkm-hud .wk-rail{ max-height:none; } @media (max-width:700px){ .wkm-host > .wkm{ height:calc(100vh - var(--header-h, 96px) - 1rem); } .wkm-rail{ top:auto; bottom:0; left:0; right:0; max-width:none; flex-direction:row; justify-content:flex-end; gap:2px; overflow-x:auto; scrollbar-width:none; } .wkm-chip{ padding:.45em .6em; min-height:2.2em; border-radius:var(--r-5) var(--r-5) 0 0; } .wkm-chip-t, .wkm-chip-n{ display:none; } .wkm-chip-i{ width:1.35em; height:1.35em; } .wkm-rail{ justify-content:space-between; } .wkm-chip{ flex:1 1 auto; justify-content:center; } .wkm .wkm-hud{ top:auto !important; left:0 !important; right:0 !important; bottom:2.2em; width:auto !important; height:66% !important; border-radius:var(--r-6) var(--r-6) 0 0; } } .wkm-jump{ margin:0 0 var(--s-3); } .wkm-caps{ display:flex; flex-direction:column; gap:var(--s-2); } .wkm-caps-none{ margin:0 0 var(--s-2); font-size:var(--fs-meta); color:var(--tx2); } .wkm-cap{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); padding:var(--s-2); border:1px solid var(--surface-border); border-radius:var(--r-5); } .wkm-cap-n{ font-size:var(--fs-ui); font-weight:600; } .wkm-cap-by{ font-size:var(--fs-meta); color:var(--tx2); flex:1 1 auto; } .wkm-cap-acts{ display:flex; gap:4px; flex-wrap:wrap; } .wkm-cap-btn{ text-decoration:none; } .wkm-cap-del{ color:var(--err); border-color:currentColor; } .site-header .brand{ position:relative; z-index:1; } .wkm-none{ margin:var(--s-3) 0 0; font-size:var(--fs-meta); color:var(--tx2); } .wkm-edit-row{ margin:0 0 var(--s-3); } @media (max-width:700px){ .wkm-stage{ inset:var(--wkm-pad, 16px) var(--wkm-pad, 16px) calc(var(--wkm-pad, 16px) + var(--wkm-rail-h, 2.6em)) var(--wkm-pad, 16px); } .page-title-cap{ top:calc(var(--header-h, 96px) + .2rem); max-width:90vw; } } .wkm-chip-n{ margin-left:6px; font-size:var(--fs-micro); opacity:.6; } .af-fact-fold li{display:flex;gap:10px;flex-wrap:wrap;padding:1px 0} .wkm-hud .af-meta-label{ max-width:9em; overflow-wrap:anywhere; } .wkm-hud .af-meta-val{ min-width:0; overflow-wrap:anywhere; } .af-fmod-body:has(.wkm-host){ padding:0; overflow:hidden; } .af-fmod-body:has(.wkm-host) > *{ height:100%; } .af-module--work.wkm-host{ padding:0 !important; } .wk-triage-btn{ border-color:var(--edit); color:var(--tx); } .wk-triage-btn:hover{ border-color:var(--edit); background:color-mix(in srgb, var(--edit) 14%, transparent); } .af-move-form--edit .af-move-add{border-color:var(--edit)} .wk-aps-acts{ margin:0 0 var(--s-2); } .wk-ap-unlink{ margin-left:.4rem; } .wk-writing-acts{ margin:0 0 var(--s-3); } .wk-aps-none{ margin:0 0 var(--s-2); font-size:var(--fs-meta); color:var(--tx2); } .wkm-hud{ font-size:var(--fs-meta); } .wkm-hud .af-btn, .wkm-hud .af-share-btn, .wkm-hud .af-move-add, .wkm-hud .ce-btn, .wkm-hud .ce-add, .wkm-hud .wk-tool, .wkm-hud .af-doc-upload-btn, .wkm-hud .af-hier-set-btn, .wkm-hier-clear-btn, .wkm-hud .af-hier-clear-btn, .wkm-hud .af-admin-nav-btn--reviewed, .wkm-hud .af-work-admin-bar button, .wkm-hud .af-inq-btn, .wkm-hud .work-inquire{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:.35em; border:1px solid rgba(var(--ink),.14); background:transparent; border-radius:var(--r-pill); padding:.18em .7em; font:inherit; font-size:var(--fs-micro); letter-spacing:.02em; line-height:1.5; color:var(--tx2); cursor:pointer; white-space:nowrap; } .wkm-hud .af-btn:hover, .wkm-hud .af-share-btn:hover, .wkm-hud .af-move-add:hover, .wkm-hud .wk-tool:hover, .wkm-hud .af-work-admin-bar button:hover, .wkm-hud .work-inquire:hover{ border-color:rgba(var(--ink),.34); color:var(--tx); } .wkm-hud .af-share-bar, .wkm-hud .wk-acts, .wkm-hud .af-work-admin-bar, .wkm-hud .af-stage-tools{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 var(--s-2); } .wkm-hud .af-sec-hdr[hidden], .wkm-hud .af-sec-hdrow[hidden]{ display:none; } .wkm-hud .wkm-same-name{ display:none !important; } .wkm-hud .af-move-row input, .wkm-hud .af-move-row select{ font-size:var(--fs-micro); min-width:0; flex:1 1 7rem; } .wkm-move-open{ margin:.2rem 0 .4rem; } .wkm-hud .wk-group-hint, .wkm-hud .wk-group-where{ display:none; } .wkm-acts{ display:flex; flex-wrap:wrap; gap:4px; } .wkm-row{ display:block; margin:0 0 .6rem; } .wkm-row-l{ display:block; font:var(--fs-micro)/1.6 var(--ff-sans); letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin:0 0 .2rem; } .wkm-row-c{ display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start; } .wkm-row-c--wide{ display:block; } .wkm-hud .wk-bar > *{ display:inline; } .wk-about{ display:block; } .wkm-host .wk-about:not(.wkm-moved){ display:none; } .wkm-edit-pill{ all:unset; cursor:pointer; font:var(--fs-micro)/1 var(--ff-sans); letter-spacing:.02em; padding:.28em .6em; border-radius:var(--r-pill); border:1px solid rgba(var(--ink),.16); color:var(--tx2); white-space:nowrap; } .af-hud-zone--global .af-hud-pills{ display:flex; flex-wrap:wrap; gap:4px; } .af-admin-bar-btn--worded svg{ width:13px; height:13px; position:relative; z-index:1; } .wkm-stage--scroll{ display:block; overflow:auto; overscroll-behavior:contain; } .wkm-stage--scroll > *{ max-width:100%; } @layer base{ .wkm-rail-sep{ display:block; flex:0 0 8px; height:8px; } .wkm-rail .wkm-chip{ font-size:14px !important; font-weight:400 !important; letter-spacing:0 !important; line-height:1.2; color:var(--tx) !important; border:1px solid var(--surface-border) !important; box-shadow:none !important; opacity:1 !important; } .wkm-rail .wkm-chip:hover{ border-color:rgba(var(--ink),.3) !important; } .wkm-rail .wkm-chip .wkm-chip-i{ width:15px; height:15px; opacity:.75; } .wkm-rail .wkm-chip--empty{ color:var(--tx2) !important; } .wkm-rail .wkm-chip--empty .wkm-chip-i{ opacity:.45; } .wkm-rail .wkm-chip--giga .wkm-chip-i{ opacity:.9; } @media (min-width:701px){ .wkm-rail{ top:14px !important; transform:none !important; left:0 !important; width:128px !important; max-width:128px !important; gap:4px !important; } .wkm-rail .wkm-chip{ box-sizing:border-box; height:32px !important; min-height:32px !important; padding:0 10px 0 9px !important; gap:7px !important; border-left:0 !important; border-radius:0 var(--r-pill) var(--r-pill) 0 !important; background:color-mix(in srgb, var(--surface-bg) 82%, transparent) !important; } .wkm-rail .wkm-chip{ width:128px; } .wkm-rail .wkm-chip.wkm-chip--where{ align-self:stretch !important; justify-content:flex-start !important; } .wkm-rail .wkm-chip[aria-pressed="true"]{ background:var(--surface-bg) !important; border-right-color:transparent !important; border-radius:0 !important; } } .wkm .wkm-hud{ border:1px solid var(--surface-border) !important; border-left:0 !important; background:var(--surface-bg) !important; color:var(--tx); box-shadow:0 18px 40px -18px rgba(0,0,0,.28) !important; font-size:14px !important; line-height:1.55; } .wkm .wkm-hud-hd{ padding:12px 14px 6px 18px !important; } .wkm .wkm-hud-name{ font-size:13px !important; letter-spacing:.06em !important; text-transform:none !important; font-weight:400 !important; color:var(--tx2); opacity:1 !important; } .wkm .wkm-hud-body{ padding:2px 18px 18px !important; } .wkm-hud :is(.wk-chip, .af-share-btn, .wk-bh-chip, .wkm-cap-btn, .af-btn, .work-inquire, .af-move-add, .wk-tool, .af-inq-btn, .af-doc-upload-btn, .af-stool, .wkm-more, .wkm-move-open), .wkm-hud .af-work-admin-bar button{ display:inline-flex !important; align-items:center !important; gap:6px; box-sizing:border-box; height:28px !important; min-height:28px !important; padding:0 11px !important; border:1px solid var(--surface-border) !important; background:transparent !important; border-radius:var(--r-pill) !important; box-shadow:none !important; font:400 14px/1 var(--ff-sans) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--tx) !important; text-decoration:none !important; white-space:nowrap; } .wkm-hud :is(.wk-chip, .af-share-btn, .wk-bh-chip, .wkm-cap-btn, .af-btn, .work-inquire, .wkm-more):hover{ border-color:rgba(var(--ink),.32) !important; } .wkm-hud .wkm-cap-del{ color:var(--tx2) !important; border-color:transparent !important; padding:0 6px !important; } .wkm-hud :is(.wkm-acts, .wk-bh-row, .af-stage-tools, .af-work-admin-bar, .af-share-bar, .wk-acts){ gap:6px !important; margin:0 0 14px !important; } .wkm-hud :is(.af-sec-hdr-label, .wkm-sub-hd, .wk-group-name, h3, h4){ font-size:13px !important; font-weight:400 !important; letter-spacing:.04em !important; text-transform:none !important; color:var(--tx2) !important; opacity:1 !important; } .wkm-hud .af-meta-label{ font-size:13px !important; font-weight:400 !important; color:var(--tx2) !important; opacity:1 !important; text-transform:none !important; letter-spacing:0 !important; } .wk-label{ margin:2px 0 6px; } .wk-label-line{ all:unset; display:block; cursor:copy; font:400 15px/1.5 var(--ff-sans); color:var(--tx); border-radius:var(--r-3); } .wk-label-ok{ display:block; min-height:1.2em; font-size:13px; color:var(--tx2); } .wkm-hud .wkm-grp{ margin:0 0 6px !important; padding:0 !important; border:0 !important; } .af-sec-hdrow > .wkm-grp-hd{ width:auto; flex:1 1 auto; } .wkm-grp-hd:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-3); } .wkm-hud :is(.af-sec, .wk-group-hd, .wk-run, .af-wed-item, .wk-ap, .af-move-item, .wkm-cap){ border-top:0 !important; border-bottom:0 !important; } .wkm-hud :is(.af-move-edit, .af-move-del){ background:none !important; border:0 !important; color:var(--tx2) !important; } .wkm-view:hover{ box-shadow:0 0 0 1px rgba(var(--ink),.3); } .wkm-view[aria-current]{ box-shadow:0 0 0 2px var(--accent); } .wkm-hud .wkm-this{ box-shadow:inset 3px 0 0 var(--accent) !important; padding-left:10px !important; } .af-fmod-title-group > .wkm-vcap{ flex:1 0 100%; order:9; } @media (max-width:700px){ .wkm .wkm-rail{ top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; transform:none !important; width:auto !important; max-width:none !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:6px !important; padding:6px 10px 8px !important; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; background:var(--surface-bg); box-sizing:border-box; } .wkm .wkm-rail .wkm-chip{ flex:0 0 auto !important; width:auto !important; height:40px !important; min-height:40px !important; min-width:0 !important; padding:0 12px 0 10px !important; border:1px solid var(--surface-border) !important; border-radius:var(--r-pill) !important; background:transparent !important; justify-content:flex-start !important; gap:6px !important; } .wkm .wkm-rail .wkm-chip-t{ display:block !important; font-size:14px !important; overflow:visible; } .wkm .wkm-rail .wkm-rail-sep{ display:none !important; } .wkm .wkm-hud{ top:auto !important; left:0 !important; right:0 !important; width:auto !important; height:auto !important; max-height:calc(100% - var(--wkm-rail-h, 90px) - 8px) !important; bottom:calc(var(--wkm-rail-h, 90px) + 2px) !important; border-left:1px solid var(--surface-border) !important; border-radius:14px 14px 0 0 !important; } } } .gr .it .cap .cap-tag{ white-space:normal; display:inline-block; max-width:100%; overflow-wrap:anywhere; line-height:1.25; vertical-align:baseline; } @container (max-width: 168px){ .gr .it .cap .cap-tag{ color:#fff !important; opacity:.7; } } .af-menu, .tile-proj-menu, .tile-role-menu, .af-bloom, .af-trail-panel, .gsel-bar{ --surface-bg:var(--hud-bg,#F7F3ED); --surface-bg-2:var(--hud-bg-2,rgba(23,24,26,.055)); --surface-tx:var(--hud-ink,#17181A); --surface-tx-2:var(--hud-ink,#17181A); --ink:var(--hud-ink-rgb,23,24,26); --tx2:rgba(var(--ink),.62); --surface-border:rgba(var(--ink),.16); --surface-input-bg:rgba(var(--ink),.055); --surface-input-border:rgba(var(--ink),.22); background:var(--surface-bg); color:var(--surface-tx); border:1px solid var(--surface-border); border-radius:var(--r-6); box-shadow:none; } .tile-proj-thumb.is-pickable img{ object-fit:cover; } .tile-proj-thumb.is-faint img{ opacity:.35; } .af-pick img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-2); background:var(--surface-bg-2); outline:2px solid transparent; } .af-file-row > .tile-proj-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .af-fate-opt b{ font:600 var(--fs-small, 13px)/1.3 var(--ff-sans); color:var(--surface-tx); } .af-fate-hit img{ width:28px; height:28px; object-fit:cover; border-radius:var(--r-2); background:rgba(var(--ink),.06); flex:none; } .af-hud-this-pic img{ width:100%; height:100%; object-fit:cover; display:block; } .af-hud-more[hidden]{ display:none !important; } .af-dupe-pic img{ width:64px; height:64px; object-fit:cover; border-radius:var(--r-2); background:var(--surface-bg-2); } .af-fix-thumbs img{width:72px;height:60px;object-fit:contain;background:rgba(127,127,127,.12);border-radius:4px;display:block} .af-fix-thumbs--pair img{width:132px;height:100px} .feat-cal-lab{font-size:var(--fs-meta);line-height:1.3;min-width:0} .feat-cal-lab a{color:var(--tx);text-decoration:none} .feat-cal-track{position:relative;height:1.1rem;border-bottom:1px solid var(--surface-border)} .feat-cal-year{position:absolute;top:0;font-size:var(--fs-micro);opacity:.55;transform:translateX(-2px);border-left:1px solid var(--surface-border);padding-left:3px;line-height:1.2rem} .ppl-list li,.ppl-shows li{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;padding:.42rem 0;border-bottom:1px solid var(--surface-border);font-size:var(--fs-info)} .ppl-list a,.ppl-shows a{color:var(--tx);text-decoration:none} .ppl-cloud a{color:var(--tx);text-decoration:none} .proj-with{margin:.35rem 0 0;font-size:var(--fs-meta);opacity:.8;line-height:1.45} .proj-with a{color:inherit} .idea-list>li{display:grid;grid-template-columns:minmax(10rem,16rem) minmax(0,1fr);gap:.2rem 1rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--surface-border);font-size:var(--fs-info);transition:opacity var(--dur-3)} @keyframes idea-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .idea-hud-pic img{display:block;width:100%;height:auto;max-height:22rem;object-fit:contain;object-position:left top;border-radius:var(--r-3);background:var(--surface-bg-2)} .idea-hud-credit a{color:inherit} .idea-hud-points li{counter-increment:ip;display:inline-flex;align-items:baseline;gap:.4em;padding:.28rem .7rem;border-radius:var(--r-pill);font-size:var(--fs-meta);background:color-mix(in oklab,var(--if,var(--tx)) 11%,var(--surface-bg));border:1px solid color-mix(in oklab,var(--if,var(--tx)) 26%,transparent)} .idea-hud-sources a{color:var(--tx)} .idea-hud-works a{flex:0 0 auto;width:clamp(6.5rem,12cqi,9rem);color:var(--tx);text-decoration:none;font-size:var(--fs-micro);line-height:1.3} .idea-hud-works img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-2);background:var(--surface-bg-2);margin-bottom:.25rem} .af-fmod-body:has(.af-viewer-video), .af-viewer-stage:has(> .af-viewer-video){background:var(--bg)} .af-fullview{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0; padding:clamp(.75rem,2.5vmin,2rem);box-sizing:border-box;background:var(--bg);color:var(--tx);z-index:9990; display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-3) var(--ease);overflow:hidden} .af-fullview-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0} .af-fullview-media{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:transparent} .af-fullview-x{position:absolute;top:var(--ui-inset,.75rem);right:var(--ui-inset,.75rem);width:var(--icon-dim,2.5rem);height:var(--icon-dim,2.5rem); display:grid;place-items:center;border:0;border-radius:50%;background:var(--ic-bg);color:var(--tx);cursor:pointer;z-index:2; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} @container not (min-width: 28em){ .gr .it .frame img{width:94%;height:94%;max-width:94%;max-height:94%;object-fit:contain} } .it--rec a{color:inherit;text-decoration:none} .searchfield::after{content:'';position:absolute;inset:0;border-radius:1em;pointer-events:none;z-index:3; box-shadow:inset 0 0 0 2px transparent;transition:box-shadow var(--dur-2) var(--ease)} .gr .it .cap.cap--label{text-align:left;padding-inline:3%} .gr .it .cap--label .cap-l1{display:block} .gr .it .cap--label .cap-l2{display:block;margin:.12rem 0 0;font:400 max(var(--fs-min,.8125rem),.86em)/1.35 var(--ff-sans);letter-spacing:0;text-transform:none;opacity:.6;white-space:normal} .gr .it figure > .cap.cap--label,.gr .it figure > .tile-badges{align-self:stretch;width:100%;box-sizing:border-box} body.af-nokb.af-fly-live .af-fly-rest{ display:block;position:fixed;width:0;height:0;opacity:.85; color:var(--surface-tx,#111); bottom:max(calc(20vh + 8px), calc(env(safe-area-inset-bottom, 0px) + 96px)); } body.af-nokb.af-fly-live .af-fly-rest--fly{ left:clamp(86px, calc(20vw + 8px), 170px); right:auto; pointer-events:auto; touch-action:none; } body.af-nokb.af-fly-live .af-fly-rest--alt{ right:clamp(86px, calc(20vw + 8px), 170px); left:auto; pointer-events:auto; touch-action:none; } body.af-nokb.af-fly-live .af-fly-touch--thumb .af-fly-rest--alt{opacity:.42} body.af-nokb.af-fly-live .af-fly-touch--thumb .af-fly-rest--fly{opacity:.25} body.af-nokb.af-fly-live .af-fly-rest--live{opacity:1} body.af-nokb.af-fly-live .af-fly-rest--alt .af-fly-stick-ring{ background:rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.85); } body.af-nokb.af-fly-live .af-fly-rest--alt .af-fly-stick-knob{ width:40px;height:40px;margin:-20px 0 0 -20px; transition:transform .12s var(--ease,ease); } body.af-nokb.af-fly-live .af-fly-rest--live .af-fly-stick-knob{transition:none} .af-fly-alt-mark{ position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px; color:#fff;opacity:.9;pointer-events:none; } .af-fly-alt-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.55))} .af-fly-alt-mark--up{transform:translateY(-42px)} .af-fly-alt-mark--dn{transform:translateY(42px)} body.af-nokb.af-fly-live .af-fly-hint{ display:block;position:fixed;left:50%; bottom:max(calc(20vh + 96px), calc(env(safe-area-inset-bottom, 0px) + 184px)); transform:translateX(-50%); padding:.5rem .95rem .45rem;border-radius:14px;pointer-events:none; text-align:center;max-width:min(92vw, 26rem); font:500 max(var(--fs-min), 12px)/1.35 var(--ff-sans);letter-spacing:.04em;text-transform:uppercase; color:#111;background:rgba(255,255,255,.86);border:1.5px solid rgba(0,0,0,.35); opacity:.94;transition:opacity .5s var(--ease,ease); } body.af-nokb.af-fly-live .af-fly-touch--used .af-fly-hint{opacity:0} .sc[hidden]{display:none} .sc-row > b{font-weight:400;text-align:right} .sc-saved-row b{font-weight:400} .fx[hidden]{display:none} .fx-bar b{font-weight:400} body.af-nokb .af-fly-hint, body.af-mobile .af-fly-hint{display:none !important} @media (max-width:760px){ body.af-mobile header.site-header, body.af-nokb header.site-header{ max-height:min(34vh, 320px); overflow-y:auto;-webkit-overflow-scrolling:touch; padding-top:calc(env(safe-area-inset-top, 0px) + .35rem); } body.af-mobile #idx-controls, body.af-nokb #idx-controls{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + .25rem); } html,body{max-width:100%;overflow-x:hidden} } @media (max-width:760px) and (max-height:900px){ body.af-nokb.af-fly-live .af-fly-rest{ bottom:max(calc(14vh + 8px), calc(env(safe-area-inset-bottom, 0px) + 84px)); } body.af-nokb.af-fly-live .af-fly-rest--fly{left:clamp(78px, calc(18vw + 8px), 150px)} body.af-nokb.af-fly-live .af-fly-rest--alt{right:clamp(78px, calc(18vw + 8px), 150px)} } body.dzi-active .af-fmod-header{ background: color-mix(in srgb, var(--bg) 96%, transparent); } body.dzi-active .af-fmod, body.dzi-active .af-fmod *, body.dzi-active .af-fmod *::before, body.dzi-active .af-fmod *::after{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .af-clk{ position:relative; width:5.4rem; height:5.4rem; margin:.1rem 0 .05rem } .af-clk svg{ width:100%; height:100%; display:block; overflow:visible } .af-clk-r{ fill:none; stroke:rgba(var(--ink,20,20,24),.16); stroke-width:1 } .af-clk-t{ stroke:rgba(var(--ink,20,20,24),.26); stroke-width:1; stroke-linecap:round } .af-clk-t--q{ stroke:rgba(var(--ink,20,20,24),.5); stroke-width:1.5 } .af-clk-h line{ stroke:rgb(var(--ink,20,20,24)); stroke-width:1.8; stroke-linecap:round } .af-clk-sun{ fill:rgb(var(--ink,20,20,24)); stroke:none } .af-clk-p{ fill:rgb(var(--ink,20,20,24)); stroke:none; opacity:.8 } .af-clk-v{ position:absolute; left:0; right:0; bottom:-1.15rem; text-align:center; font-size:var(--fs-micro,.68rem); letter-spacing:.08em; opacity:.6; font-variant-numeric:tabular-nums } .afr[hidden]{display:none} .afr-top b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px} .afr.is-busy .afr-shape,.afr.is-busy .afr-chip,.afr.is-busy input{opacity:.45;pointer-events:none} #afViewerHub .af-subshots-now{display:flex;flex-direction:column;gap:2px;margin:0 0 .5rem;min-height:2.6em} #afViewerHub .af-subshots-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px} #afViewerHub .af-shotcard,#afViewerHub .af-worldtile{min-width:0} #afViewerHub .af-shotcard,#afViewerHub .af-worldtile{ appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;align-items:stretch;gap:3px; padding:5px 5px 6px;border-radius:var(--r-3,8px);cursor:pointer;color:inherit; background:rgba(var(--ink),.035);border:1px solid rgba(var(--ink),.12); transition:background .15s,border-color .15s,box-shadow .15s} #afViewerHub .af-shotcard:hover,#afViewerHub .af-worldtile:hover{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.24)} #afViewerHub .af-shotcard.is-on,#afViewerHub .af-worldtile.is-on{border-color:var(--bc,#24466B);box-shadow:inset 0 0 0 1px var(--bc,#24466B);background:rgba(var(--ink),.06)} #afViewerHub .af-shotcard-c{display:block;width:100%;height:32px} #afViewerHub .af-worldtile-c{display:block;width:100%;height:56px} #afViewerHub .af-shotcard-l,#afViewerHub .af-worldtile-l{font:500 var(--fs-micro)/1.15 var(--ff-sans);letter-spacing:.03em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #afViewerHub .af-subworld-g{display:grid;grid-template-columns:1fr 1fr;gap:6px} #afViewerHub .af-subworld-say{margin:.55rem 0 .1rem;font:400 var(--fs-micro)/1.35 var(--ff-sans);color:var(--tx2)} #afViewerHub .af-wx-seg button.is-on,#afViewerHub .af-wx-chk button.is-on{border-color:var(--bc,#4C5258);box-shadow:inset 0 0 0 1px var(--bc,#4C5258)} .hdr-more{display:none} .hdr-menu[hidden]{display:none} .hdr-dock{position:relative} .hdr-dock .hdr-dock-n{position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--tx);color:var(--bg); font:600 10px/15px -apple-system,BlinkMacSystemFont,var(--ff-sans);text-align:center;box-sizing:border-box;pointer-events:none} .hdr-dock svg{width:20px;height:20px;fill:currentColor} #hdrDockMenu{inset:auto;margin:0;border:0;height:auto;position:fixed;z-index:calc(var(--z-header,1000) + 6);display:grid;grid-template-columns:1fr;gap:6px;padding:10px;width:min(320px,calc(calc(100vw / var(--ui-z,1)) - 20px)); background:var(--surface-bg,var(--bg));color:var(--tx);border-radius:16px;box-shadow:var(--lift-4),0 0 0 1px rgba(0,0,0,.06);max-height:calc(calc(100dvh / var(--ui-z,1)) - 90px);overflow:auto;box-sizing:border-box} #hdrDockMenu[hidden]{display:none} @layer base{ #hdrMenu{bottom:auto;margin:0;border:0;height:auto;width:auto;max-width:none} #hdrMenu[hidden]{display:none} } #hdrDockMenu .hdr-menu-item{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border:0;border-radius:12px; background:rgba(127,127,127,.12);color:inherit;font:500 14px/1.2 var(--ff-sans);text-align:left;cursor:pointer;min-width:0} #hdrDockMenu .hdr-menu-i{flex:0 0 22px;display:grid;place-items:center;width:22px;height:22px} #hdrDockMenu .hdr-menu-i svg{width:20px;height:20px;fill:currentColor} #hdrDockMenu .hdr-menu-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:600px), (max-height:500px) and (max-width:1000px){ body .site-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;grid-template-areas:"search brand buttons" "nav nav nav"!important;align-items:center;gap:.4rem; padding:calc(env(safe-area-inset-top,0px) + 6px) max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px))} body .site-header .brand{justify-self:center;min-width:0} body .site-header .searchwrap{max-width:none;min-width:0;justify-self:start} body .site-header .searchwrap .button:not(.site-back):not(.back):not(.themetoggle){display:none} body .site-header .button{min-width:40px;min-height:40px} body .site-header .buttons{display:flex;flex-wrap:nowrap;gap:.3rem;justify-self:end;align-items:center} body:not(.hdr-probe) .site-header .buttons > :not(.search-btn):not(.hdr-more):not(.info-nav-row){display:none!important} body .site-header .hdr-dock{display:none!important} body .site-header .brand{grid-area:brand!important} body .site-header .searchwrap{grid-area:search!important} body .site-header .buttons{grid-area:buttons!important} .hdr-more{display:inline-flex;align-items:center;justify-content:center} .hdr-more svg{width:20px;height:20px;fill:currentColor} .hdr-menu{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));z-index:calc(var(--z-header,1000) + 6); display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;background:var(--surface-bg,var(--bg));color:var(--tx);border-radius:16px; box-shadow:var(--lift-4),0 0 0 1px rgba(0,0,0,.06);max-height:calc(calc(100dvh / var(--ui-z,1)) - 90px);overflow:auto; animation:hdrMenuIn .18s var(--ease,ease)} .hdr-menu[hidden]{display:none} @keyframes hdrMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .hdr-menu-i svg{width:20px;height:20px;fill:currentColor} body.info-page:not(.feat-page) .site-header > .info-nav-row{grid-area:nav;display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 18px),transparent);padding:0 6px} body .site-header .info-nav-row > *{flex:0 0 auto;min-height:36px} } body.af-nokb.af-fly-live .af-fly-rest{bottom:max(calc(20vh + 34px), calc(env(safe-area-inset-bottom, 0px) + 140px));transition:opacity .45s var(--ease,ease)} .site-header,.site-header *,.idx-controls,.idx-controls *,#afViewerHub,#afViewerHub *,.af-fly-touch,.af-fly-touch *,.hdr-menu,.hdr-menu *{ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} .visually-hidden{-webkit-user-select:none;user-select:none} body.index-page{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} body.index-page input,body.index-page textarea,body.index-page [contenteditable],body.index-page .af-fmod-body{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} body.hdr-menu-open .page-title-cap{opacity:0!important;transition:opacity .15s} html[data-tod-ink="light"] .hdr-menu{background:rgba(24,24,26,.97);color:#f2f2f2;box-shadow:var(--lift-4),0 0 0 1px rgba(255,255,255,.08)} body.hdr-menu-open .site-header{opacity:1!important;visibility:visible!important} body.af-mobile #idx-controls .af-looks-bay{ flex:0 0 100%; justify-content:flex-end; margin:0 } body.af-mobile #idx-controls .af-looks-bay .af-bay-rows{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%; max-width:372px; margin-left:auto; } body.af-mobile #idx-controls .af-looks-bay .af-bay-r{ display:contents } body.af-mobile #idx-controls .af-looks-bay .af-chip{ height:44px; min-height:44px; padding:0 10px; gap:8px; justify-content:flex-start; border-radius:12px; font-size:max(var(--fs-min), 14px); letter-spacing:.01em; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } body.af-mobile #idx-controls .af-looks-bay .af-chip-k{ display:none !important } body.af-mobile #idx-controls .af-looks-bay .af-chip--ghost, body.af-mobile #idx-controls .af-looks-bay .af-lrail-b--open{ background:#fff !important; color:#16160f !important; border:1px solid #fff !important; border-style:solid !important; } body.af-mobile #idx-controls .af-looks-bay .af-chip{ -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); background:color-mix(in srgb, var(--bc) 78%, #16160f); } @media (orientation:landscape) and (max-height:500px) and (max-width:1000px){ body.af-mobile #idx-controls{ left:auto !important; right:max(8px, env(safe-area-inset-right, 0px)) !important; width:min(372px, 46vw) !important; max-width:none !important; bottom:max(6px, env(safe-area-inset-bottom, 0px)) !important; } } :is(#afViewerHub .af-lpanel-x, .af-hub-pp-close, .af-hour-x, .af-menu-x, .af-cap-flash-x, .pco-close, .cat-ed-drawer-x, .sc-b--x, .wkm-hud-x, .af-kb-x, .af-map-x){ --afx:28px; inline-size:var(--afx) !important; block-size:var(--afx) !important; min-width:var(--afx) !important; min-height:var(--afx) !important; width:var(--afx) !important; height:var(--afx) !important; flex:0 0 var(--afx) !important; padding:0 !important; border-radius:50% !important; border:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:0 !important; line-height:0 !important; color:inherit; opacity:1 !important; background:var(--ic-bg, rgba(148,148,148,.28)) !important; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background var(--dur-3, .2s) var(--ease, ease), transform var(--dur-3, .2s) var(--ease, ease); -webkit-tap-highlight-color:transparent; touch-action:manipulation; } :is(#afViewerHub .af-lpanel-x, .af-hub-pp-close, .af-hour-x, .af-menu-x, .af-cap-flash-x, .pco-close, .cat-ed-drawer-x, .sc-b--x, .wkm-hud-x, .af-kb-x, .af-map-x)::before{ content:""; flex:0 0 auto; width:calc(var(--afx) * .56); height:calc(var(--afx) * .56); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat; } :is(#afViewerHub .af-lpanel-x, .af-hub-pp-close, .af-hour-x, .af-menu-x, .af-cap-flash-x, .pco-close, .cat-ed-drawer-x, .sc-b--x, .wkm-hud-x, .af-kb-x, .af-map-x):hover{ background:rgba(148,148,148,.46) !important; } :is(#afViewerHub .af-lpanel-x, .af-hub-pp-close, .af-hour-x, .af-menu-x, .af-cap-flash-x, .pco-close, .cat-ed-drawer-x, .sc-b--x, .wkm-hud-x, .af-kb-x, .af-map-x):active{ transform:scale(.94) } :is(#afViewerHub .af-lpanel-x, .af-hub-pp-close, .af-hour-x, .af-menu-x, .cat-ed-drawer-x, .sc-b--x, .wkm-hud-x, .af-kb-x, .af-map-x){ position:relative } :is(.af-cap-flash-x, .pco-close){ color:#fff !important; background:rgba(20,20,22,.55) !important } :is(.af-cap-flash-x, .pco-close):hover{ background:rgba(20,20,22,.78) !important } @media (max-width:600px), (max-height:500px) and (max-width:1000px){ body.index-page #cc, .af-viewer-cap{ top:calc(var(--header-h, 56px) - 4px) !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; max-width:min(86vw, 520px) !important; min-height:0 !important; padding:.15em .7em !important; justify-content:center !important; text-align:center !important; } body.index-page #cc .cap-txt, .af-viewer-cap .cap-txt{ text-align:center !important; font-size:max(var(--fs-min), 14px) !important; } } @media (pointer:coarse){ .site-footer-nav{ gap:0 .35rem } .site-footer-nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .55rem } .site-footer a.site-footer-admin, .site-footer a.cv{ display:inline-flex; align-items:center; min-height:44px; padding:0 .5rem } .gallery-lens-btn{ min-width:40px !important; min-height:40px !important } .wkm-chip{ min-width:44px !important; min-height:40px !important } :is(.af-title-giga, .seq-nav, .proj-info-btn){ position:relative } :is(.af-title-giga, .seq-nav, .proj-info-btn)::after{ content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%); } .cap-tag{ font-size:max(12px, var(--fs-micro)) } } @media (max-width:700px) and (pointer:coarse){ .wkm-rail{ justify-content:flex-start !important; gap:6px !important; padding:0 8px 4px !important; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent); mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent); } .wkm-chip{ flex:0 0 auto !important; justify-content:flex-start !important; gap:.45em !important; min-height:40px !important; padding:0 .95em 0 .75em !important; border-radius:999px !important; } .wkm-chip-t{ display:block !important; overflow:visible; font-size:max(var(--fs-min), 14px); } } @media (max-width:600px), (max-height:500px) and (max-width:1000px){ .site-header .buttons > .search-btn{display:inline-flex !important;align-items:center;justify-content:center} } .af-fly-btn, .af-skip-drop{ display:none } .af-fly-btn, .af-skip-drop{ position:fixed; z-index:calc(var(--z-cap, 400) + 2); left:max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); align-items:center; gap:.5em; height:44px; padding:0 1.05em 0 .8em; border-radius:999px; border:0; cursor:pointer; font:600 max(var(--fs-min), 14px)/1 var(--ff-sans); letter-spacing:.02em; color:var(--tx, #111); background:var(--ic-bg, rgba(148,148,148,.28)); -webkit-backdrop-filter:blur(var(--frost, 12px)) saturate(1.2); backdrop-filter:blur(var(--frost, 12px)) saturate(1.2); -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:opacity .35s var(--ease, ease), background .2s var(--ease, ease), transform .15s var(--ease, ease); } .af-fly-btn svg, .af-skip-drop svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none } body.af-nokb.af-fly-live .af-fly-btn{ display:inline-flex; bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px)) } body.af-fly-armed .af-fly-btn{ background:#fff; color:#16160f } body.af-looks-out .af-fly-btn, body.af-module-open .af-fly-btn, body.hdr-menu-open .af-fly-btn{ opacity:0; pointer-events:none } body.index-page.ui-hidden:not(.af-fly-armed) .af-fly-btn{ opacity:.5 } body.af-nokb.af-fly-live:not(.af-fly-armed) .af-fly-rest{ opacity:0 !important; pointer-events:none !important; transition:opacity .35s } body.af-nokb.af-fly-live:not(.af-fly-armed) .af-fly-rest::before{ pointer-events:none !important } .af-skip-drop:not([hidden]){ display:inline-flex; bottom:max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)) } body.af-nokb.af-fly-live .af-skip-drop:not([hidden]){ bottom:max(66px, calc(env(safe-area-inset-bottom, 0px) + 60px)) } body.af-module-open .af-skip-drop{ display:none !important } body.af-ffwd .af-fly-btn{ opacity:.6 } .af-fly-btn, .af-skip-drop{ color:#fff; background:rgba(20,20,22,.52) } body.af-fly-armed .af-fly-btn{ background:#fff; color:#16160f } @media (min-width:701px){ .wkm-rail{ top:50% !important; transform:translateY(-50%); left:0 !important; right:auto !important; } .wkm-chip{ justify-content:flex-start; border-radius:0 var(--r-pill) var(--r-pill) 0 !important; } .wkm-hud{ border-radius:0 var(--r-6) var(--r-6) 0 !important; } .wkm-hud-grip{ left:auto !important; right:0 !important; } .wkm-stage{ inset:var(--wkm-pad, 28px) calc(var(--wkm-pad, 28px) + var(--wkm-rail-w, 0px)) !important; } } .wkm-hud .wk-cell > :not(.wk-thumb){ font-size:var(--fs-micro); line-height:1.3; } @media (max-width:700px){ .wkm .wkm-hud{ bottom:calc(var(--wkm-rail-h, 48px) + 2px) !important; } } body.af-nokb #idx-controls .af-looks-bay .af-chip-k{ display:none !important } @media (pointer:coarse){ body.af-nokb:not(.af-mobile) #idx-controls .af-looks-bay:is(.af-looks-bay--tight, .af-looks-bay--tighter, .af-looks-bay--stacked){ flex:0 0 100% !important; order:-1; margin:0 !important; justify-content:flex-end } body.af-nokb:not(.af-mobile) #idx-controls .idx-cluster-bot{ justify-content:flex-end !important } } @media (max-width: 767px){ .af-fmod--sheet { top: var(--af-page-top, 56px) !important; height: auto !important; } .af-fmod--sheet .af-fmod-header { padding-top: 8px; } .af-fmod--page .af-fmod-maximize, .af-fmod--page .af-fmod-minimize, .af-fmod--sheet .af-fmod-maximize, .af-fmod--sheet .af-fmod-minimize { display: none !important; } } .af-fmod--page > .af-fmod-header { background: transparent; border-bottom-color: transparent; box-shadow: none; } #afHubKeys{position:relative} #afHubKeys > .af-kb-x{position:absolute !important;top:8px;right:8px;z-index:3} #afViewerHub .af-snd-on svg{width:16px;height:16px;fill:currentColor} #afViewerHub .af-lpanel-tools .af-lpanel-pro button{ width:26px;height:26px;padding:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;opacity:.5; } #afViewerHub .af-lpanel-pro svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #afViewerHub .af-lpanel-tools .af-lpanel-pro button:hover{opacity:.95;background:rgba(var(--ink),.08)} .af-snaps[hidden]{display:none} .af-snaps button:hover{background:rgba(var(--hud-ink-rgb,23,24,26),.16)} #afViewerHub .af-wb-pick svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .af-shot-xp svg{width:18px;height:18px} @layer base{ @media (max-width:600px), (max-height:500px) and (max-width:1000px){ html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #galleryMount > .wrap, html body:not(.gallery-table-mode):not(.gallery-timeline-mode) .af-fmod--gallery .af-fmod-body #galleryMount > .wrap{ grid-template-columns:repeat(var(--ph-cols,3),minmax(0,1fr))!important;gap:3px!important;padding:3px 3px 1.5rem!important;justify-content:stretch!important} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it{grid-column:auto!important;padding:0!important;margin:0!important;width:auto!important;height:auto!important} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it figure{padding:0!important;margin:0!important;height:auto!important} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it figure > .g{display:block!important;position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1!important;padding:0!important;overflow:hidden} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it .frame{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it .frame img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important} html body:not(.gallery-table-mode):not(.gallery-timeline-mode) #grid > .it figcaption{display:none!important} html body{--ph-gut:max(16px,env(safe-area-inset-left,0px))} html body.info-page .info-main-col{margin:0!important;padding-inline:var(--ph-gut)!important;width:auto!important;max-width:none!important} html body.info-page .info-section{padding-top:.75rem!important} html body .site-header .info-nav-row > .info-nav-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:36px;padding:0 .9em!important;box-sizing:border-box;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} html input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=color]), html select,html textarea,html [contenteditable=""],html [contenteditable="true"]{font-size:max(16px,1em)!important} html .af-sec-hdr{min-height:40px!important} html body{--admin-frame:2px} } @keyframes afFindIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}} @media (max-width:600px), (max-height:500px) and (max-width:1000px){ @keyframes afFindUp{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}} } } .legal-col h2,.feat-legal h2{font-size:1.15em} .feat-legal p,.feat-legal li,.feat-legal-list,.feat-address,.feat-stand, body.project-page .proj-section-body,body.project-page .proj-section-body .ql-editor{font-family:var(--ff-read)} .feat-legal p,.feat-legal li,body.project-page .proj-section-body{font-size:var(--fs-prose)} .gallery-toolbar .gallery-searchwrap{display:none!important} #afLooksBtn .glyph svg{width:20px;height:20px;display:block;fill:none!important;stroke:var(--ico-glyph,currentColor)} #afLooksBtn{--afc-lkbg:#A3ADF5;--afc-lkhub:#7BE23A;--afc-lkink:#1E2550} #afLooksBtn:hover svg,#afLooksBtn.af-lk-peek svg,#afLooksBtn.af-key--on svg{stroke:var(--afc-lkink)!important} #afLooksBtn .af-cog-hub{fill:none;transition:fill .15s ease} @keyframes af-cog-spin{from{transform:rotate(0)}to{transform:rotate(90deg)}} body.af-nokb #afLooksBtn{display:none!important} body:not(.dzi-active):not(.viewer-dzi-mode) #afLooksBtn{display:none!important} .af-looks-bay{transform-origin:right center;transition:opacity .28s var(--ease,ease),transform .28s var(--ease,ease),display .28s allow-discrete} .af-looks-bay[hidden]{opacity:0;transform:translateX(28px)} @starting-style{.af-looks-bay:not([hidden]){opacity:0;transform:translateX(28px)}} .af-looks-bay > *{transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease)} @starting-style{.af-looks-bay:not([hidden]) > *{opacity:0;transform:translateX(16px)}} @media (prefers-reduced-motion:reduce){ .af-looks-bay,.af-looks-bay > *{transition:none} } .af-kb-corner{position:fixed;left:var(--ui-inset);bottom:var(--ui-inset);z-index:var(--z-cluster);display:flex;align-items:flex-end;gap:var(--ui-gap); transition:opacity .8s var(--ease),visibility .8s var(--ease)} #afKbBtn .glyph{position:relative;z-index:1;display:grid;place-items:center;pointer-events:none} #afKbBtn .glyph svg{width:20px;height:20px;display:block;fill:none;stroke:var(--ico-glyph,currentColor);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #afKbBtn.af-key--on svg{stroke:#fff!important} .af-kb-dock{position:fixed;left:var(--ui-inset);bottom:calc(var(--ui-inset) + var(--icon-dim) + .55rem);z-index:var(--z-hud); display:flex;align-items:flex-end;pointer-events:none;transition:opacity .8s var(--ease),visibility .8s var(--ease)} .af-kb-dock > *{pointer-events:auto} .af-kb-dock > .af-hub-keys[hidden]{pointer-events:none} #afKbDock .af-hub-keys[hidden]{transform:translateX(-.6rem) scaleX(.98);transform-origin:center left} body:not(.dzi-active):not(.viewer-dzi-mode) .af-kb-corner,body:not(.dzi-active):not(.viewer-dzi-mode) .af-kb-dock{display:none} body.af-nokb .af-kb-corner,body.af-nokb .af-kb-dock{display:none!important} @media (max-width:700px){ .af-kb-corner,.af-kb-dock{display:none!important} } body.af-module-open .af-kb-corner{opacity:0;pointer-events:none} body:not(.af-nokb) .af-skip-drop{left:calc(var(--ui-inset) + var(--icon-dim) + .55rem)} .play-wrap .af-auto-chip{ position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none; padding:.12em .55em;border:1px solid var(--surface-border);border-radius:var(--r-pill); background:var(--ic-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:max(var(--fs-min), .56em);line-height:1.6;letter-spacing:.02em;white-space:nowrap;color:var(--surface-tx); } .play-wrap .af-auto-chip[hidden]{display:none} .af-walk-chip{ position:fixed;left:50%;bottom:calc(var(--ui-inset) + var(--icon-dim) + .9rem);transform:translateX(-50%);z-index:30; display:flex;align-items:center;gap:.45rem;padding:.28rem .55rem .28rem .28rem; border:1px solid var(--surface-border);border-radius:var(--r-pill); background:var(--ic-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:max(var(--fs-min), .8rem);line-height:1.2;letter-spacing:.02em;white-space:nowrap;color:var(--surface-tx); } .af-walk-chip[hidden]{display:none} .af-walk-go{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:.45rem;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer} .af-walk-no{appearance:none;-webkit-appearance:none;padding:.15em .6em;border:1px solid var(--surface-border);border-radius:var(--r-pill); background:none;color:inherit;font:inherit;font-size:.9em;opacity:.75;cursor:pointer} .af-walk-no[hidden]{display:none} .af-walk-st{width:1.3rem;height:1.3rem;transform:rotate(-90deg);flex:0 0 auto} .af-walk-st circle{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.18} .af-dcell--wide .af-seg button{flex:1 0 auto;min-width:auto;white-space:nowrap;padding-inline:8px} .af-kb-corner[popover],.af-kb-dock[popover]{margin:0;inset:auto;padding:0;border:0;background:transparent;overflow:visible;color:inherit;width:auto;height:auto} .af-kb-corner[popover]{left:var(--ui-inset);bottom:var(--ui-inset)} .af-kb-dock[popover]{left:var(--ui-inset);bottom:calc(var(--ui-inset) + var(--icon-dim) + .55rem)} :root{ --glass:blur(var(--frost,12px)) saturate(1.2) contrast(.35) brightness(1.3); --glass-edge:inset 0 0 0 1px rgba(255,255,255,.10),0 0 0 1px rgba(0,0,0,.08); --hb:var(--icon-dim); } @media (pointer:coarse){ :root{--hb:max(var(--icon-dim),44px)} } .button::before,.searchfield::before,.navcount,.info-pill,.info-nav-btn,.work-nav a,.work-nav button,.af-work-admin-bar button, .af-viewer-controls button,.af-admin-toolbar-btn,.writing-new-btn,.writing-trash-btn,.writing-facet-chip,.we-act,.ed-btn, .af-hud-puck,.af-dock-pill,.af-rail-item::before,.wkm-chip,.af-fullview-x,.af-bm-forget,.af-fly-btn,.af-skip-drop,.af-walk-chip{ -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)} .button::before,.af-rail-item::before,.af-fly-btn,.af-skip-drop,.af-walk-chip{box-shadow:var(--glass-edge)} body.dzi-active .idx-cluster-bot,body.viewer-dzi-mode .idx-cluster-bot{gap:var(--s-2);align-items:center} body.dzi-active .idx-cluster-bot .button svg,body.viewer-dzi-mode .idx-cluster-bot .button svg{inline-size:20px;block-size:20px} body.dzi-active #captureBtn svg,body.viewer-dzi-mode #captureBtn svg{inline-size:22px;block-size:22px} #nextBtn .glyph svg{display:block;inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #idx-controls .play-wrap.play-wrap--said{height:var(--hb);border-radius:var(--r-pill)} #idx-controls .play-wrap--said #playBtn{position:static} #idx-controls .play-wrap--said #playBtn::before{border-radius:var(--r-pill);pointer-events:auto} #idx-controls .play-wrap .af-auto-chip{position:relative;left:auto;bottom:auto;transform:none;z-index:1;pointer-events:none; margin-left:calc((20px - var(--hb)) / 2 + .5em);padding:0 1.05em 0 0;border:0;border-radius:0;background:none; -webkit-backdrop-filter:none;backdrop-filter:none;font:500 var(--fs-ui)/1 var(--ff-sans);letter-spacing:.01em;color:var(--txCap)} #idx-controls .play-wrap .af-auto-chip:not([hidden]){display:inline-flex;flex-direction:column} #idx-controls .next-wrap{overflow:hidden} #idx-controls .next-wrap{height:var(--hb);border-radius:var(--r-pill);background:var(--ic-bg); -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--glass-edge);padding-right:4px; transition:padding var(--dur-4) var(--ease)} #idx-controls .next-wrap:has(.navcount.is-hidden){padding-right:0} #idx-controls .next-wrap #nextBtn::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} #idx-controls .next-wrap .navcount{position:relative;left:auto;bottom:auto;transform:none;opacity:1; height:calc(var(--hb) - 8px);max-width:7em;margin-left:-4px;padding:0 .75em 0 .6em;gap:.4em;border:0; background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none; font:500 var(--fs-ui)/1 var(--ff-sans);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--txCap); transition:max-width var(--dur-4) var(--ease),padding var(--dur-4) var(--ease),opacity var(--dur-3) var(--ease),background var(--dur-2) var(--ease)} #idx-controls .next-wrap .navcount:hover{transform:none;background:var(--surface-bg)} #idx-controls .next-wrap .navcount.is-hidden{max-width:0;padding:0;margin:0;opacity:0;pointer-events:none;transform:none} #idx-controls .next-wrap .navlock{width:15px;height:15px} .af-walk-chip{height:var(--hb);padding:0 1.05em 0 calc((var(--hb) - 1.9rem) / 2);gap:.6em;border:0; background:var(--ic-bg);font:500 var(--fs-ui)/1 var(--ff-sans);letter-spacing:.01em;color:var(--txCap)} .af-fly-btn,.af-skip-drop{height:var(--hb);gap:.55em;padding:0 1.05em 0 calc((var(--hb) - 20px) / 2); color:var(--txCap);background:var(--ic-bg);font:500 var(--fs-ui)/1 var(--ff-sans);letter-spacing:.01em; left:max(var(--ui-inset),env(safe-area-inset-left,0px))} body.af-fly-armed .af-fly-btn{background:#fff;color:#16160f} .af-skip-drop{padding:0 calc((var(--hb) - 20px) / 2) 0 1.05em} .af-skip-drop:not([hidden]){bottom:max(var(--ui-inset),env(safe-area-inset-bottom,0px))} body:not(.af-nokb) .af-skip-drop{left:calc(var(--ui-inset) + var(--hb) + var(--s-2))} .button.info .glyph{font-weight:600} @supports selector(:active-view-transition){ .site-header{view-transition-name:none} html:active-view-transition .site-header{view-transition-name:af-site-header} } body.af-mobile{ --dk-l:max(var(--ui-inset),env(safe-area-inset-left,0px)); --dk-r:max(var(--ui-inset),env(safe-area-inset-right,0px)); --dk-b:calc(var(--ui-inset) + env(safe-area-inset-bottom,0px)); --dk-h:60px;--dk-p:8px; --lglass:blur(20px) saturate(1.8) contrast(.4) brightness(1.25); --lglass-bg:rgba(255,255,255,.20); --lglass-edge:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.05),var(--lift-2); } .idx-cluster-bot .af-dock{display:none} body.af-mobile .site-header .button::before,body.af-mobile .site-header .af-hud-puck, body.af-mobile .af-fly-btn,body.af-mobile .af-walk-chip,body.af-mobile #idx-controls .play-wrap.play-wrap--said, body.af-mobile #idx-controls .next-wrap,body.af-mobile #idx-controls .idx-cluster-bot .button::before{ background:var(--lglass-bg);-webkit-backdrop-filter:var(--lglass);backdrop-filter:var(--lglass);box-shadow:var(--lglass-edge)} body.af-mobile .af-fly-btn,body.af-mobile .af-walk-chip,body.af-mobile .af-skip-drop{font-weight:600} body.af-mobile .af-skip-drop{background:var(--lglass-bg);-webkit-backdrop-filter:var(--lglass);backdrop-filter:var(--lglass);box-shadow:var(--lglass-edge);color:var(--txCap)} @media (orientation:portrait){ body.af-mobile.dzi-active .idx-cluster-bot .af-dock,body.af-mobile.viewer-dzi-mode .idx-cluster-bot .af-dock{display:block;position:fixed;z-index:0;pointer-events:none; left:var(--dk-l);right:var(--dk-r);bottom:var(--dk-b);height:var(--dk-h);border-radius:var(--r-pill); background:var(--lglass-bg);-webkit-backdrop-filter:var(--lglass);backdrop-filter:var(--lglass);box-shadow:var(--lglass-edge)} body.af-mobile #idx-controls{right:calc(var(--dk-r) + var(--dk-p));bottom:calc(var(--dk-b) + var(--dk-p));padding-bottom:0} body.af-mobile #idx-controls .idx-cluster-bot{column-gap:0;row-gap:calc(var(--dk-p) * 2 + 4px)} body.af-mobile #idx-controls .idx-cluster-bot .button::before, body.af-mobile #idx-controls .play-wrap.play-wrap--said,body.af-mobile #idx-controls .next-wrap{ background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} body.af-mobile #idx-controls .play-wrap.play-wrap--said,body.af-mobile #idx-controls .next-wrap{height:auto;padding:0;border-radius:0;overflow:visible} body.af-mobile #idx-controls .play-wrap--said #playBtn{position:relative} body.af-mobile #idx-controls .play-wrap--said #playBtn::before{border-radius:50%;pointer-events:none} body.af-mobile #idx-controls .play-wrap .af-auto-chip,body.af-mobile #idx-controls .next-wrap .navcount{ position:fixed;left:calc(var(--dk-l) + var(--dk-p) + var(--af-fly-w,0px) + 12px);right:auto;top:auto;transform:none;margin:0; max-width:calc(100vw - var(--dk-l) - var(--dk-r) - 2 * var(--dk-p) - var(--af-fly-w,0px) - 12px - 3 * var(--hb) - 6px); white-space:nowrap;overflow:hidden;color:var(--txCap);text-align:left} body.af-mobile #idx-controls .play-wrap .af-auto-chip{bottom:calc(var(--dk-b) + 31px);font:600 15px/1.15 var(--ff-sans);letter-spacing:-.005em} body.af-mobile #idx-controls .next-wrap .navcount{bottom:calc(var(--dk-b) + 11px);height:auto;padding:.1em 0;gap:.3em;border-radius:var(--r-pill); font:500 12.5px/1.2 var(--ff-sans);letter-spacing:0;opacity:.72;background:none} body.af-mobile #idx-controls .next-wrap .navcount:hover{background:none} body.af-mobile #idx-controls .next-wrap .navcount.is-hidden{opacity:0;visibility:hidden;pointer-events:none} body.af-mobile #idx-controls .next-wrap .navcount--locked{opacity:1;padding:.18em .6em;color:#fff} body.af-mobile #idx-controls .next-wrap .navlock{width:13px;height:13px} body.af-mobile #idx-controls:has(.af-auto-chip[hidden]) .next-wrap .navcount, body.af-mobile #idx-controls:has(.play-wrap:not(.play-wrap--said)) .next-wrap .navcount{bottom:calc(var(--dk-b) + 20px);font-size:14px} body.af-mobile .af-fly-btn,body.af-mobile.af-nokb.af-fly-live .af-fly-btn{left:calc(var(--dk-l) + var(--dk-p));bottom:calc(var(--dk-b) + var(--dk-p));height:var(--hb);padding:0 12px 0 10px; background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} body.af-mobile .af-fly-btn::after{content:'';position:absolute;right:-6px;top:10px;bottom:10px;width:1px;background:rgba(var(--ink),.16)} body.af-mobile .af-walk-chip{bottom:calc(var(--dk-b) + var(--dk-h) + 12px);height:auto;padding:5px;gap:4px;border:0} body.af-mobile .af-walk-go{height:38px;padding:0 16px 0 10px;gap:7px;border-radius:var(--r-pill);background:#fff;color:#16160f;box-shadow:var(--lift-1)} body.af-mobile .af-walk-chip:not(.af-walk-chip--offer){padding:5px 12px 5px 5px} body.af-mobile .af-skip-drop:not([hidden]),body.af-nokb.af-mobile.af-fly-live .af-skip-drop:not([hidden]){ left:0;right:0;margin-inline:auto;width:max-content;bottom:calc(var(--dk-b) + var(--dk-h) + 12px);height:var(--hb); color:var(--txCap);font-weight:600; background:var(--lglass-bg);-webkit-backdrop-filter:var(--lglass);backdrop-filter:var(--lglass);box-shadow:var(--lglass-edge)} } img.af-th{background-size:contain;background-repeat:no-repeat;background-position:center} @media (max-width:540px){ body .site-header .button, body .site-header .af-hud-puck{min-width:44px;min-height:44px} body .site-header .buttons > .button, body .site-header .buttons > .af-hud-puck, body .site-header .searchwrap > .button{width:44px;height:44px} } .af-pad-card svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4} @font-face{font-family:'Criterion URW';src:url('/fonts/Criterion-URW-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Criterion URW';src:url('/fonts/Criterion-URW-Light-Italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:'Criterion URW';src:url('/fonts/Criterion-URW.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap} @font-face{font-family:'Criterion URW';src:url('/fonts/Criterion-URW-Regular-Italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap} @font-face{font-family:'DIN Mittelschrift';src:url('/fonts/DINMittelschriftStd.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Instrument Sans';src:url('/fonts/InstrumentSans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:'Instrument Sans';src:url('/fonts/InstrumentSans-Italic-latin.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap} @font-face{font-family:'Varela Round';src:url('/fonts/VarelaRound-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} :root{ --ff-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ff:var(--ff-sans); --ff-head:'Criterion URW',Georgia,'Times New Roman',serif; --ff-read:'Criterion URW',Georgia,'Times New Roman',serif; --ff-h2:'DIN Mittelschrift','Instrument Sans',ui-sans-serif,system-ui,sans-serif; --ff-keys:'Varela Round','Instrument Sans',ui-sans-serif,system-ui,sans-serif; --fs-min:.8125rem; --fs-h1:clamp(1.75rem,1.05rem + 2.6vw,3.5rem); --fs-h2:clamp(1.25rem,1.12rem + .45vw,1.5rem); --fs-read:clamp(1rem,.92rem + .3vw,1.125rem); } #afViewerHub,.af-hour-hud,#idx-controls .af-looks-bay{--ff-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ff-serif:var(--ff-sans);--ff-mono:var(--ff-sans)} body{font-family:var(--ff-sans)} h1,.af-fmod-title,#pageTitleCap,.page-title-cap,.proj-title,.article-title{font-family:var(--ff-head);font-weight:300;letter-spacing:-.01em} h2,h3,.article-subtitle,.info-section h2,.info-section h3,.ql-container.ql-container .ql-editor h3{font-family:var(--ff-h2);font-weight:400;letter-spacing:0} .article-body,.writing-article-body,.proj-article-body,.feat-prose,.article-lead,.info-article, blockquote,.article-block--quote,.writing-block--text .ql-editor{font-family:var(--ff-read);font-weight:300} .article-body b,.article-body strong,.proj-article-body b,.proj-article-body strong,.feat-prose strong,.info-article strong{font-weight:500} .cap em,.cap .t,.lbcap-shared .t,.work-cap em{font-family:var(--ff-read);font-weight:400} body .proj-meta,body.project-page .proj-meta{font-family:var(--ff-head);font-weight:400;letter-spacing:.02em;column-gap:.32em} .proj-meta > .sep{font-size:0;margin:0} .proj-meta > span:not(.sep):has(+ .sep)::after{content:","} .af-key-l,#afKbDock .af-key-l,#afViewerHub .af-key-l{font-family:var(--ff-keys);text-transform:uppercase} svg.afg-line,svg.afg-line *{fill:none!important;stroke:currentColor!important;stroke-width:1.25!important;stroke-linecap:round!important;stroke-linejoin:round!important} svg.afg-line [fill="currentColor"]{fill:currentColor!important} svg.afg-fill,svg.afg-fill *{fill:currentColor!important;stroke:none!important} .button.themetoggle #themeIcon.tod-live{display:block;inline-size:100%;block-size:100%;border-radius:50%;overflow:hidden;position:relative;z-index:1;pointer-events:none} :is(.af-pagerail-title,.cap-src,.seq-nav,.seq-ttl,.wcard-mark,.proj-body-editor-note,.proj-doc-title,.af-pagerail a,.proj-documents-head,.rec-text,.af-fmod-title,.proj-meta,.proj-meta span:not(.sep)){opacity:1;color:var(--tx2)} .af-fmod-header .af-fmod-title{color:var(--tx2)} .site-footer-nav a{opacity:1;color:var(--tx2)} .af-gl-menu[hidden]{display:none} .filecard--show{aspect-ratio:1/1;width:100%;box-sizing:border-box;border:1px solid rgba(var(--haze),.28);background:rgba(var(--haze),.05); flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;gap:.3em; padding:clamp(.55rem,6%,1.3rem);container-type:inline-size;overflow:hidden} .filecard--show .scard-pic{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin-bottom:.35em} .filecard--show .card-glyph{width:clamp(14px,9cqi,24px);height:auto;opacity:.5;margin-bottom:auto;flex:none} .filecard--show .scard-title{font:400 max(var(--fs-min),clamp(.95rem,10.5cqi,2.1rem))/1.1 var(--ff-head);color:var(--tx);text-wrap:balance; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;flex:none} .filecard--show.filecard--haspic .scard-title{font-size:max(var(--fs-min),clamp(.85rem,7.5cqi,1.45rem));-webkit-line-clamp:2} .filecard--show .scard-where{font:400 max(var(--fs-min),clamp(.7rem,4.6cqi,.95rem))/1.3 var(--ff-sans);opacity:.6;flex:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .filecard--show .scard-foot{display:flex;justify-content:space-between;gap:.6em;margin-top:.2em;flex:none; font:400 max(var(--fs-min),clamp(.66rem,4cqi,.85rem))/1.2 var(--ff-sans);opacity:.55} .filecard--show:not(.filecard--haspic) .scard-title{margin-top:auto} body:not(.gallery-timeline-mode) #grid .it:has(.filecard--show) .cap{display:none} body.gallery-timeline-mode #grid .filecard--show :is(.scard-title,.scard-where,.scard-foot){display:none} .gal-side.is-folded > :not(.gal-side-fold){display:none !important} @keyframes inspIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .tile-tip[hidden]{display:none} @layer base{ .site-header,#hdrMenu,#hdrDockMenu, #idx-controls,.af-kb-dock,.af-kb-corner, .af-hour-hud,.af-todclock, .cart-panel, .af-fmod > .af-fmod-header,.af-fmod > .af-fmod-chrome,.af-fmod > .af-fmod-body,.af-fmod > .af-fmod-resize{ zoom:var(--ui-z,1) } #pageTitleCap.cap-side{ top:calc(var(--sig-mid) / var(--ui-z,1))!important; left:calc(var(--sig-r) / var(--ui-z,1))!important; max-width:calc(var(--cap-room) / var(--ui-z,1))!important } #pageTitleCap.cap-under{ top:calc(var(--sig-bot) / var(--ui-z,1) + 2px)!important; left:calc(var(--sig-cx) / var(--ui-z,1))!important; max-width:min(calc(90vw / var(--ui-z,1)),640px)!important } #pageTitleCap.cap-below{ position:absolute!important; top:var(--capb-top)!important; left:var(--capb-x)!important; right:auto!important; bottom:auto!important; transform:translateX(-50%)!important; max-width:var(--capb-w)!important; width:max-content; text-align:center!important; justify-content:center!important; white-space:normal; opacity:1!important; pointer-events:auto; z-index:5; margin:0 } } #idx-controls:has(.play-wrap--said) .play-wrap--said{width:120px;flex:none;justify-content:flex-start} #idx-controls:has(.play-wrap--said) .next-wrap{width:96px;flex:none;justify-content:flex-start;gap:4px} #idx-controls:has(.play-wrap--said) .next-wrap .navcount{min-width:50px;box-sizing:border-box;justify-content:center;font-variant-numeric:tabular-nums} @font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/VT323-latin.woff2') format('woff2')} html body .af-info[popover]{position:fixed !important;inset:max(calc(var(--ui-inset) + 3.6rem), var(--af-sr-bot, 0px)) auto auto 50% !important;margin:0 !important;transform:translateX(-50%) !important;overflow:visible;max-height:none !important; width:min(1060px,calc(100vw - 2*var(--ui-inset))) !important;max-width:none !important;padding:.55rem 1rem .7rem;box-sizing:border-box; background:var(--surface-bg);color:var(--surface-tx);border:1px solid var(--surface-border);border-radius:var(--r-6); -webkit-backdrop-filter:blur(var(--frost,12px)) saturate(1.2);backdrop-filter:blur(var(--frost,12px)) saturate(1.2);box-shadow:var(--lift-1)} .af-info[hidden]{display:none} .af-kb-info{position:absolute;top:.45rem;right:2.4rem;appearance:none;cursor:pointer;color:inherit;background:transparent;border:1px solid rgba(var(--ink),.25); border-radius:var(--r-pill);font:inherit;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;padding:.1rem .6rem} html body .af-info .af-eng>*{width:auto !important;margin:0 !important} .button.af-retro3d .glyph{font-weight:600;font-size:15px;letter-spacing:.02em;line-height:1} .af-kn-flipped>:not(.af-kn-back):not(.af-kn-flipbar){display:none!important} @media (min-width:601px) and (min-height:501px), (min-width:1001px){ body:not(.hdr-probe) .site-header .buttons > :not(.search-btn):not(.hdr-more):not(.info-nav-row):not(.af-hud-puck):not(.af-dock){display:none!important} .site-header #hdrMoreBtn{display:inline-flex;align-items:center;justify-content:center} .site-header #hdrMoreBtn svg{width:20px;height:20px;fill:currentColor} .site-header .search-row .af-dock{display:inline-flex;margin:0 0 0 .35rem;order:9} .site-header .search-row #hdrDockBtn{order:10} #hdrMenu.hdr-menu{position:fixed;inset:auto;margin:0;border:0;height:auto;z-index:calc(var(--z-header,1000) + 6);display:flex;flex-direction:column;gap:2px; padding:6px;width:min(260px,calc(100vw - 20px));background:var(--surface-bg,var(--bg));color:var(--tx);border-radius:14px; box-shadow:var(--lift-4),0 0 0 1px rgba(127,127,127,.18);max-height:calc(100dvh - 90px);overflow:auto;animation:hdrMenuDrop .12s var(--ease,ease)} #hdrMenu[hidden]{display:none} @keyframes hdrMenuDrop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}} } @media (min-width:701px){ body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot{position:relative;isolation:isolate;flex-wrap:nowrap;gap:4px;row-gap:0;align-items:center;justify-content:flex-end;margin-right:4px} body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot::before{content:'';position:absolute;inset:-4px;z-index:-1;pointer-events:none; border-radius:var(--r-pill);background:var(--ic-bg);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--glass-edge)} :where(body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot) .button::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot > .button, body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot > .play-wrap, body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot > .next-wrap{flex:none;margin:0} body.index-page:not(.af-mobile) #idx-controls .idx-cluster-bot{gap:6px} body.index-page:not(.af-mobile) #idx-controls .play-wrap, body.index-page:not(.af-mobile) #idx-controls .play-wrap.play-wrap--said{width:var(--hb);height:var(--hb);flex:none;justify-content:center;overflow:visible; border-radius:50%;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} body.index-page:not(.af-mobile) #idx-controls .next-wrap{width:auto;height:var(--hb);flex:none;gap:6px;padding:0 !important;overflow:visible;justify-content:flex-start; background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:none} body.index-page:not(.dzi-active):not(.af-nokb) #idx-controls #afLooksBtn{display:flex !important;opacity:.4;pointer-events:none} body.index-page:not(.af-mobile):not(.af-nokb) #idx-controls .af-looks-bay, body.index-page:not(.af-mobile):not(.af-nokb) #idx-controls .af-looks-bay--stacked{position:absolute;right:calc(100% + 12px);top:0;bottom:auto;margin:0 !important; flex:none !important;order:0;width:max-content;justify-content:flex-end} } @property --af-ring{syntax:'';inherits:true;initial-value:0} :is(body.index-page,body) #idx-controls .play-wrap .af-auto-chip{display:none !important} :is(body.index-page,body) #idx-controls .next-wrap .navcount, :is(body.index-page,body) #idx-controls .next-wrap .navcount.is-hidden, :is(body.index-page,body) #idx-controls .next-wrap .navcount--locked{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important; transform:none;flex:none;box-sizing:border-box;width:var(--hb);height:var(--hb);min-width:0;max-width:none;margin:0;padding:0;gap:0;border:0; border-radius:50%;display:inline-grid;place-items:center;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none; visibility:visible;opacity:1;pointer-events:auto;cursor:pointer;font-size:0 !important;color:var(--txCap);transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)} :is(body.index-page,body) #idx-controls .next-wrap .navcount .glyph,:is(body.index-page,body) #idx-controls .next-wrap .navcount .navfill,:is(body.index-page,body) #idx-controls .next-wrap .navcount::before{display:none} :is(body.index-page,body) #idx-controls .next-wrap .navcount .navlock{width:20px;height:20px;stroke:currentColor;stroke-width:1.8} :is(body.index-page,body) #idx-controls #nextBtn{transition:--af-ring .25s linear,box-shadow var(--dur-4) var(--ease)} :is(body.index-page,body) #idx-controls #nextBtn::after{content:'';position:absolute;inset:3px;border-radius:50%;pointer-events:none;z-index:1; background:conic-gradient(currentColor calc(var(--af-ring,0) * 1turn),rgba(var(--ink),.13) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); transition:opacity var(--dur-3) var(--ease)} :is(body.index-page,body) #idx-controls:has(#idxCount.is-hidden) #nextBtn::after, :is(body.index-page,body) #idx-controls:has(#idxCount.navcount--locked) #nextBtn::after{opacity:0} @media (prefers-reduced-motion:reduce){ :is(body.index-page,body) #idx-controls #nextBtn{transition:none} } :is(body.index-page,body) #idx-controls .next-wrap:not(:has(#nextBtn))::before{content:'';flex:none;width:var(--hb);height:var(--hb)} body.index-page #nextBtn:not(.idx-inrow){visibility:hidden} :is(body.index-page,body) #idx-controls .next-wrap #idxCount:not(:has(.navlock)){display:inline-flex;align-items:center;justify-content:center;line-height:0} :is(body.index-page,body) #idx-controls .next-wrap #idxCount:not(:has(.navlock))::after{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10' width='14' height='10' rx='2.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10' width='14' height='10' rx='2.5'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.75} body:not(.af-nokb) #captureBtn{display:none !important} @media (orientation:portrait){ body.af-mobile #idx-controls .play-wrap,body.af-mobile #idx-controls .play-wrap.play-wrap--said{width:var(--hb);flex:none} body.af-mobile #idx-controls .next-wrap{width:auto;flex:none;gap:0} } :root{--sr-h:calc(var(--hb,40px) / 2 * var(--ui-z,1));--sr-gap:calc(6px * var(--ui-z,1))} body.af-sr-page .af-sr-cap:is(#cc,.af-sr-cap).cap-side{--cap-top:calc(var(--sig-mid) - var(--sr-h) - 2px);--cap-ty:0px} body.af-sr-page .af-sr-cap:is(#cc,.af-sr-cap):is(.cap-side,.cap-under){min-height:0;height:var(--sr-h);box-sizing:border-box;padding:0 calc(.6em * var(--ui-z,1));mix-blend-mode:difference} body.af-sr-page .af-sr-cap:is(#cc,.af-sr-cap):is(.cap-side,.cap-under)::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} body.af-sr-page .af-sr-cap:is(#cc,.af-sr-cap):is(.cap-side,.cap-under) .cap-txt{color:#fff !important;mix-blend-mode:normal;font-size:calc(13px * var(--ui-z,1)) !important;line-height:1 !important;white-space:nowrap} .af-sr-b{display:none} #afSrInfo{--sr-i:0} #afSrWhat{--sr-i:1} #afSrRetro{--sr-i:2} #afSkipDrop.af-sr-b{--sr-i:3} @keyframes af-sr-wait{0%,100%{opacity:calc(.6 * var(--af-hdr-op,1))}50%{opacity:calc(.25 * var(--af-hdr-op,1))}} body.af-sr-page .af-sr-b:not([hidden]),body.af-sr-page #afSkipDrop.af-sr-b:not([hidden]){position:fixed !important;z-index:450;display:inline-grid !important;place-items:center;box-sizing:border-box; top:calc(var(--sig-mid) + 2px) !important;bottom:auto !important;right:auto !important;left:calc(var(--sig-r) + 4px + var(--sr-i) * (var(--sr-h) + var(--sr-gap))) !important; width:var(--sr-h) !important;height:var(--sr-h) !important;min-width:0;margin:0 !important;padding:0 !important;gap:0;border:0;border-radius:50%; background:transparent !important;color:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important; mix-blend-mode:difference;opacity:calc(.6 * var(--af-hdr-op,1));cursor:pointer;font:inherit;transform:none !important; transition:opacity var(--dur-3) var(--ease),background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)} body.af-sr-page:has(.af-sr-cap.cap-under) .af-sr-b:not([hidden]),body.af-sr-page:has(.af-sr-cap.cap-under) #afSkipDrop.af-sr-b:not([hidden]){ top:calc(var(--sig-bot) + 2px + var(--sr-h) + 4px) !important;left:calc(var(--sig-cx) - 1.5 * var(--sr-h) - var(--sr-gap) + var(--sr-i) * (var(--sr-h) + var(--sr-gap))) !important} body.af-sr-page .af-sr-b svg{width:calc(13px * var(--ui-z,1)) !important;height:calc(13px * var(--ui-z,1)) !important;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} body.af-sr-page #afSkipDrop.af-sr-b > span{display:none} body.af-sr-page:not(.af-sr-on) .af-sr-b,body.gallery-mode .af-sr-b{visibility:hidden;pointer-events:none} @keyframes af-sr-nudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(1.5px)}} body.af-sr-page #afSkipDrop.af-sr-b svg{animation:af-sr-nudge 1.8s var(--ease,ease) infinite} @media (prefers-reduced-motion:reduce){ body.af-sr-page #afSkipDrop.af-sr-b svg{animation:none} } @media (max-width:700px){ html body .af-info[popover]{width:calc(100vw - 16px) !important;padding:.45rem .65rem .55rem;max-height:calc(100dvh - var(--af-sr-bot,64px) - 10px) !important;overflow:auto} } @layer base{ @keyframes wkmFlash{ 0%,60%{ background:color-mix(in srgb, var(--edit,#c60) 22%, transparent); } 100%{ background:transparent; } } @keyframes wkm-where-breathe{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.18); } } @keyframes wkm-where-ping{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent, #2266cc) 55%, transparent); } 100%{ box-shadow:0 0 0 9px transparent; } } @keyframes wkm-where-in{ from{ opacity:0; transform:translate(-50%, calc(-50% + 8px)); } to{ opacity:1; transform:translate(-50%, -50%); } } } .it .filecard,.it .filecard--writing,.it .filecard--show{border:0!important;background:none!important;border-radius:0} .it .filecard--writing,.it .filecard--show{overflow:visible;height:auto;padding-inline:0} .it .filecard--writing :is(.wcard-title,.wcard-sub),.it .filecard--show :is(.scard-title,.scard-where){display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible;overflow-wrap:break-word;hyphens:auto}