.work{padding:clamp(84px, 13.5vh, 190px) var(--gutter);background-color:var(--ink);color:var(--paper);overflow-x:clip}.work>div{width:100%;max-width:var(--sheet);--gap:var(--band-gap);--action-col:calc(var(--meta) * 9.5 + 56px);grid-template-columns:var(--label-col) minmax(0, 1fr) var(--action-col);column-gap:var(--gap);margin-inline:auto;display:grid;container-type:inline-size}.work-label-hold{grid-area:1/1/3}.work-label{--label-offset:clamp(20px, 4vh, 44px);top:calc(var(--bar-h) + var(--label-offset));margin:0;margin-top:calc(.16 * var(--work-title) - .125 * var(--meta));color:var(--accent);line-height:1;font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-weight:600;position:sticky}.work>div{--work-title:min(var(--count-rule), calc((100cqw - var(--label-col) - var(--action-col) - 2 * var(--gap)) / 9.33));--card-w:calc((100cqw - 3 * clamp(12px, 1.6vw, 22px)) / 4);--row-title:clamp(20px, calc(.104 * var(--card-w)), 38px)}.work h2{font-size:var(--work-title);letter-spacing:-.005em;text-transform:uppercase;grid-area:1/2;margin:0;line-height:1.06}.work h2>span:not(.draw){color:var(--accent)}.work-more{margin-bottom:calc(.08 * var(--work-title));color:inherit;font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;grid-area:1/3;place-self:end;align-items:center;gap:14px;font-weight:600;text-decoration:none;display:inline-flex}.work-more span{background-color:var(--accent);width:42px;height:42px;color:var(--on-accent);place-items:center;display:grid}.work-more svg{width:18px;height:18px}@media (hover:hover){.work-more:hover span{background-color:color-mix(in srgb, var(--accent) 88%, var(--on-accent))}}.work-lead{font-size:var(--read);color:color-mix(in srgb, var(--paper) 72%, var(--ink));grid-area:2/2;margin:clamp(18px,2.4vw,34px) 0 0;line-height:1.62}@property --wheel-cx{syntax:"<length>";inherits:true;initial-value:0}@property --wheel-cy{syntax:"<length>";inherits:true;initial-value:0}@property --wheel-r{syntax:"<length>";inherits:true;initial-value:0}@property --wheel-ry{syntax:"<length>";inherits:true;initial-value:0}@property --wheel-gap{syntax:"<length>";inherits:true;initial-value:0}.work-stage{--wheel-h:calc(100vh - var(--bar-h) - 24px);--wheel-d:min(calc(var(--wheel-h) * .6), 30cqw);--wheel-air:clamp(34px, 5vw, 92px);--wheel-card:calc(100cqw - var(--wheel-d) - var(--wheel-air));--wheel-cx:calc(var(--wheel-d) / 2);--wheel-cy:calc(var(--wheel-h) / 2);--wheel-r:calc(var(--wheel-d) / 2 + var(--wheel-air));--wheel-ry:calc(var(--wheel-h) / 2);--wheel-gap:clamp(12px, 1.6vw, 24px);height:calc(var(--wheel-h) + 6 * 52vh);grid-area:3/1/auto/-1;margin:clamp(34px,4.6vw,72px) 0 0}.work-wheel{top:calc(var(--bar-h) + 24px);height:var(--wheel-h);--bleed:calc(50% - 50cqw);margin-inline:calc(50% - 50vw);position:sticky;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 8% 92%,#0000);mask-image:linear-gradient(#0000,#000 8% 92%,#0000)}.work-figure,.work-figure-at{z-index:1;left:calc(var(--bleed) + var(--wheel-cx));top:var(--wheel-cy);width:calc(var(--wheel-d) / .995);aspect-ratio:1757/2000;filter:grayscale();pointer-events:none;background-image:url(/work-figure-dark.webp);background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;translate:-50% -58.9%}:root[data-theme=light] .work-figure{background-image:url(/work-figure-light.webp)}.work-figure-at{z-index:3;filter:none;background-image:none}.work-figure-at .ring{pointer-events:auto;position:absolute;bottom:-9%;right:-4%}.work-wheel-paper{z-index:0;pointer-events:none;--cell:var(--cell-page,clamp(64px, 7.4vw, 108px));--rule:color-mix(in srgb, var(--ruling) 13%, transparent);position:absolute;inset:0}.work-list{z-index:2;inset:0 var(--bleed);margin:0;padding:0;list-style:none;position:absolute}.work-row{--row-ink:var(--paper);--row-ground:color-mix(in srgb, var(--paper) 7%, var(--ink));--art-col:clamp(96px, 11vw, 160px);width:var(--wheel-card);transform-origin:0;will-change:transform;grid-template-columns:var(--icon) minmax(0, 1fr) max-content var(--art-col);--gap-x:clamp(16px, 2.6vw, 44px);align-items:center;column-gap:var(--gap-x);--icon:clamp(38px, 3.4vw, 56px);--pad:clamp(14px, 1.8vw, 26px);--frame-pad:clamp(14px, 1.7vw, 26px);padding:calc(var(--pad) + var(--frame-pad)) calc(var(--pad) + var(--frame-pad)) calc(var(--pad) + var(--frame-pad)) var(--pad);background-color:var(--row-ground);color:var(--row-ink);grid-template-rows:auto auto;row-gap:clamp(8px,1vw,14px);transition:background-color .34s,color .34s;display:grid;position:absolute;top:0;left:0}.work-row.is-on{--row-ink:var(--ink);--row-ground:var(--paper)}.work-row:after{content:"";z-index:0;pointer-events:none;inset:var(--pad) var(--pad) var(--pad) calc(var(--pad) + var(--icon) / 2);--dash:100000px;--dash-gap:6px;background-repeat:no-repeat;background-image:repeating-linear-gradient(to right, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to right, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap)));background-position:0 0,100% 0,0 100%,0 0;background-size:100% 1px,1px 100%,100% 1px,1px 100%;position:absolute}.work-row.is-on:after{--dash:7px}.work-num{z-index:1;width:var(--icon);aspect-ratio:1;background-color:var(--accent);color:var(--on-accent);font-family:var(--font-display), var(--font-sans), system-ui, sans-serif;font-size:calc(var(--icon) * .42);letter-spacing:.02em;font-variant-numeric:tabular-nums;grid-area:1/1/3;place-self:center start;place-items:center;font-weight:700;line-height:1;display:grid;position:relative}.work-row.is-swapping{transition:none}@media (prefers-reduced-motion:reduce){.work-row{transition:none}}.work-art{z-index:1;grid-area:1/4/3;width:100%;height:clamp(80px,8.5vw,124px);display:block;position:relative}.work-art:empty{display:none}.work-art img{object-fit:contain;width:100%;height:100%;display:block}.work-say{z-index:1;grid-area:1/2/3;align-self:center;position:relative}.work-say h3{font-size:var(--row-title);letter-spacing:-.005em;text-transform:uppercase;margin:0;font-weight:700;line-height:1.04}.work-say p{max-width:64ch;color:color-mix(in srgb, var(--row-ink) 72%, var(--row-ground));margin:clamp(6px,.7vw,11px) 0 0;font-size:clamp(12px,1vw,15px);line-height:1.55}.work-fact{z-index:1;grid-column:3;margin:0;position:relative}.work-fact:hover,.work-fact:focus-within{z-index:5}.work-fact:first-of-type{grid-row:1;align-self:end}.work-fact:last-of-type{grid-row:2;align-self:start}.work-fact dt{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--row-ink) 62%, var(--row-ground));align-items:center;gap:.7em;font-weight:500;display:flex}.work-hint{display:inline-grid;position:relative}.work-hint button{border:1px solid color-mix(in srgb, var(--row-ink) 45%, var(--row-ground));width:1.25em;height:1.25em;color:inherit;font:inherit;letter-spacing:0;cursor:help;background:0 0;border-radius:0;place-items:center;padding:0;font-size:.85em;font-weight:700;line-height:1;transition:background-color .2s,border-color .2s,color .2s;display:grid}.work-hint:hover button,.work-hint button:focus-visible{background-color:var(--accent);border-color:var(--accent);color:var(--on-accent)}.work-hint button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.work-hint-say{z-index:6;background-color:var(--row-ink);width:max-content;max-width:min(210px,60vw);color:var(--row-ground);font-family:var(--font-sans), system-ui, sans-serif;font-size:calc(var(--meta) * .92);letter-spacing:0;text-transform:none;text-align:start;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;padding:8px 10px;font-weight:500;line-height:1.4;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;bottom:calc(100% + 10px);left:0;transform:translateY(4px)}.work-hint:hover .work-hint-say,.work-hint button:focus-visible+.work-hint-say{opacity:1;visibility:visible;transform:none}@media (prefers-reduced-motion:reduce){.work-hint-say{transition:none;transform:none}}.work-fact dd{font-family:var(--font-display), var(--font-sans), system-ui, sans-serif;font-size:calc(var(--row-title) * .8);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums;margin:.18em 0 0;font-weight:700;line-height:1}.work-say .work-tags{flex-wrap:wrap;gap:clamp(6px,.6vw,10px);margin:clamp(10px,1.1vw,16px) 0 0;padding:0;list-style:none;display:flex}.work-say .work-tags li{background-color:var(--accent);font-size:calc(var(--meta) * .86);letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);padding:clamp(4px,.45vw,7px) clamp(7px,.8vw,12px);font-weight:500;line-height:1}@media (max-width:900px){.work>div{--label-col:0px;--action-col:0px;--gap:0px;--card-w:100cqw;grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3.4vh,30px)}.work-label-hold,.work h2,.work-lead,.work-more,.work-stage{grid-area:auto/1}.work-label{margin-top:0;position:static}.work-lead{margin-top:0}.work-more{display:none}.work-stage{height:auto;margin-top:clamp(6px,1.6vw,12px)}.work-wheel{height:auto;margin-inline:0;position:static;overflow:visible;-webkit-mask-image:none;mask-image:none}.work-wheel-paper,.work-figure,.work-figure-at{display:none}.work-list{gap:clamp(24px,6vw,36px);display:grid;position:static}.work-row{width:auto;padding:var(--pad) calc(var(--pad) + var(--frame-pad)) calc(var(--pad) + var(--frame-pad));grid-template-rows:none;grid-template-columns:minmax(0,1fr);align-items:start;row-gap:0;position:relative;transform:none}.work-row:after{inset:calc(var(--pad) + var(--icon) / 2) var(--pad) var(--pad)}.work-num{margin-bottom:var(--frame-pad);grid-area:1/1;place-self:start center}.work-say{text-align:center;grid-area:2/1;align-self:start}.work-say p{margin-top:clamp(10px,2.6vw,14px);margin-inline:auto}.work-say .work-tags{justify-content:center;gap:clamp(8px,2vw,10px);margin-top:clamp(14px,3.4vw,20px)}.work-say .work-tags li{padding:clamp(6px,1.6vw,8px) clamp(10px,2.6vw,14px);font-size:clamp(12px,3.2vw,14px)}.work-fact{display:none}.work-art{grid-area:3/1;justify-self:center;width:100%;height:clamp(150px,46vw,230px);margin-top:clamp(18px,4.6vw,26px)}}
