:root{--project-paper:var(--paper);--project-ink:var(--ink)}
#work{--paper:#171919;--ink:#f5f1e8;--muted:#c1bbb0;--line:#f5f1e82b;background:var(--paper);color:var(--ink);margin-inline:-20px;padding-inline:20px}
#work .art{--paper:var(--project-paper);--ink:var(--project-ink);color:var(--ink)}
#work .filters button{color:var(--ink)}
#work .filters button.active,#work .filters button:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);border-color:var(--ink)}
#work .filters button.active:is(:hover,:focus-visible){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#work .filters button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Art keeps the original woven texture and margin grid on white. */
.art-practice{--paper:#fff;--ink:#20251f;--muted:#60665e;--line:#20251f26;display:block;position:relative;isolation:isolate;background:var(--paper);color:var(--ink);border-top:1px solid var(--line);margin-inline:-20px;padding:clamp(64px,7.5vw,120px) 20px clamp(56px,6vw,96px)}
#art .art-practice-texture{position:absolute;inset:0;z-index:0;opacity:.32;mix-blend-mode:multiply}
.art-practice .art-practice-grid{position:absolute;inset:0 20px;z-index:1;background-attachment:fixed;background-size:calc((100vw - 40px)/4) 100%,100% 180px;background-position:19px 0,0 0}
.art-practice-heading,.art-gallery-viewport,.art-practice-footer{position:relative;z-index:2}
.art-practice-heading{--art-illustration-height:clamp(205px,21vw,280px);display:grid;grid-template-columns:minmax(0,1fr) calc(var(--art-illustration-height) * .562027) minmax(0,1fr);column-gap:64px;row-gap:20px;align-items:last baseline;margin-bottom:clamp(12px,2vw,32px)}
.art-practice-heading h2{grid-column:1;grid-row:1;font-family:'Ballet',cursive;font-weight:400;font-size:clamp(64px,7vw,134px);font-style:normal;font-optical-sizing:auto;line-height:1.15;letter-spacing:0;text-transform:none;margin:0;padding:18px 0 0 18px;white-space:nowrap;justify-self:end}
.art-practice-drawing{grid-column:2;grid-row:1/3;align-self:center;position:relative;height:var(--art-illustration-height);min-width:0;pointer-events:none}
.art-practice-drawing img{position:absolute;left:50%;top:-5.522%;translate:-47.1924% 0;display:block;height:109.4554%;width:auto;max-width:none;object-fit:contain}
.art-practice-copy{display:contents}
.art-practice-copy h3{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-column:3;grid-row:1;min-width:0;max-width:440px;font-family:Helvetica,Arial,sans-serif;font-size:clamp(24px,2.6vw,42px);font-weight:700;letter-spacing:-.065em;line-height:1;margin:0}
.art-practice-copy h3 span{display:block;text-align:left}
.art-heading-lead{grid-column:1;grid-row:1}
.art-heading-anchor{grid-column:2;grid-row:1}
.art-heading-continuation{grid-column:2;grid-row:2}
.art-practice-copy>p{grid-column:3;grid-row:2;align-self:start;min-width:0;font-size:14px;line-height:1.55;letter-spacing:-.02em;max-width:38ch;margin:0}
.art-gallery-stage{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding-block:36px}
.art-fog{position:absolute;inset:30% 0 0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--cloud-shadow,#bbb3a7) 15%,transparent),transparent 75%);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);}
.art-fog::before,.art-fog::after{content:"";position:absolute;inset:-10% -12%;background:var(--cloud-shadow,#bbb3a7);mask:url('art-fog.svg?v=165') center/100% 100% no-repeat;pointer-events:none;animation:art-fog-drift 22s ease-in-out infinite alternate;-webkit-mask:url('art-fog.svg?v=165') center/100% 100% no-repeat;}
.art-fog::after{inset:-20% -20%;opacity:.8;animation:art-fog-counterdrift 31s ease-in-out -13s infinite alternate}
@keyframes art-fog-drift{from{transform:translate3d(-8%,2%,0) scale(1)}to{transform:translate3d(8%,-3%,0) scale(1.08)}}
@keyframes art-fog-counterdrift{from{transform:translate3d(9%,-4%,0) scale(1.12) rotate(180deg)}to{transform:translate3d(-8%,5%,0) scale(1) rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.art-fog::before,.art-fog::after{animation:none}}
.art-fog.has-clouds{background:linear-gradient(180deg,transparent 10%,color-mix(in srgb,var(--cloud-backdrop,#dad5cf) 24%,transparent) 48%,color-mix(in srgb,var(--cloud-shadow,#bbb3a7) 45%,transparent) 100%)}
.art-fog.has-clouds::before,.art-fog.has-clouds::after{display:none}
.art-cloud-canvas{position:absolute;inset:0;display:none;width:100%;height:100%;pointer-events:none}
.art-fog.has-clouds .art-cloud-canvas{display:block}
.art-gallery-viewport{margin-inline:0;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline-offset:-4px;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none}
.art-gallery-viewport.is-dragging{cursor:grabbing}
.art-drag-hint{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;color:var(--muted);font-size:7px;font-weight:400;line-height:1.5;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
.art-drag-hint svg{width:12px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.art-drag-hint{font-size:6px}}
.art-drag-hint.is-dragging{color:var(--ink)}
.art-drag-instructions{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.art-gallery-viewport::-webkit-scrollbar{display:none}
.art-gallery-viewport:focus-visible{outline:2px solid var(--ink)}
.art-gallery{--art-gap:20px;--art-image-height:clamp(180px,20vw,340px);display:flex;width:max-content;align-items:flex-start;gap:var(--art-gap);padding:16px 0 24px}
.art-gallery.cylinder-gallery{position:relative;display:block;box-sizing:border-box;width:100%;padding:0}
.art-gallery.cylinder-gallery .art-piece{position:absolute;left:0;top:0;margin:0;opacity:0;pointer-events:none}
.art-wall-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cylinder-gallery .art-wall-canvas{display:block}
.art-gallery-viewport.cylinder-viewport{overflow:hidden}
.art-gallery-viewport.ticker-reduced{overflow-x:auto}
.art-piece{position:relative;margin:0;flex:0 0 auto;width:max-content;height:var(--art-image-height);scroll-snap-align:center}
.art-piece:nth-child(6n+1){margin-top:60px}
.art-piece:nth-child(6n+2){margin-top:0}
.art-piece:nth-child(6n+3){margin-top:clamp(24px,3vw,46px)}
.art-piece:nth-child(6n+4){margin-top:0}
.art-piece:nth-child(6n+5){margin-top:clamp(50px,6vw,94px)}
.art-piece:nth-child(6n){margin-top:0}
.art-piece img{display:block;width:auto;max-width:none;height:100%;object-fit:contain;border-radius:4px;outline:1px solid var(--line);outline-offset:-1px}
.reference-cursor.art-zone,.reference-cursor-dot.art-zone{--ink:#20251f;--paper:#fff}
.reference-cursor .art-drag-icon{display:none;width:26px;height:20px;color:var(--ink)}
.reference-cursor.gallery-drag{width:46px;height:46px;box-sizing:border-box;background:var(--paper);border:1px solid #20251f26;mix-blend-mode:normal}
.reference-cursor.gallery-drag .fly,.reference-cursor-dot.gallery-drag{opacity:0}
.reference-cursor.gallery-drag .art-drag-icon{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.reference-cursor.gallery-drag .plus,.reference-cursor.gallery-drag .reference-cursor-ring{display:none}
.art-dragging .reference-cursor.gallery-drag{width:40px;height:40px;border-color:var(--ink)}
.art-curve-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.art-practice-footer{gap:12px;display:flex;justify-content:center;align-items:center;margin-top:clamp(24px,3vw,48px)}
.art-practice-link{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;max-width:100%;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:999px;padding:14px 22px;font-size:13px;line-height:1.2;transition:background-color .25s,color .25s,border-color .25s}
.art-practice-link-label{display:block;min-width:0}
.art-practice-link svg{display:block;width:16px;height:16px;flex-shrink:0}
.art-practice-link:is(:hover,:focus-visible){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.art-practice-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* Keep the artwork previews modest on ultrawide displays as well. */
@media(min-width:2000px){.art-gallery{--art-image-height:20vw}}
@media(max-width:1000px){.art-practice-heading{--art-illustration-height:210px;column-gap:clamp(20px,3vw,40px)}.art-practice-heading h2{font-size:7vw;padding-left:10px}.art-practice-copy h3{font-size:clamp(20px,2.5vw,25px);letter-spacing:-.055em;margin-bottom:0}.art-practice-copy>p{font-size:12px;line-height:1.6}.art-practice-drawing{height:var(--art-illustration-height)}}
@media(max-width:650px){.art-practice,#work{margin-inline:-12px;padding-inline:12px}.art-practice-heading{--art-illustration-height:180px;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;margin-bottom:26px}.art-practice-heading h2{grid-column:1;grid-row:1;justify-self:center;text-align:center;font-size:clamp(46px,13.8vw,88px);white-space:normal;padding:18px 0 18px 10px;line-height:1.08}.art-practice-drawing{grid-column:1;grid-row:2;justify-self:center;width:calc(var(--art-illustration-height) * .562027);align-self:center;height:var(--art-illustration-height)}.art-practice-copy{display:block;grid-column:1;grid-row:3;justify-self:center;min-width:0;max-width:440px}.art-practice-copy h3{font-size:clamp(26px,6.2vw,36px);margin-bottom:18px}.art-practice-copy>p{font-size:14px;max-width:42ch}.art-gallery-viewport{margin-inline:0}.art-practice .art-practice-grid{inset-inline:12px;background-size:calc((100vw - 24px)/2) 100%,100% 140px;background-position:11px 0,0 0}.art-gallery{--art-gap:12px;--art-image-height:clamp(220px,66vw,330px);padding-inline:0}.art-piece:nth-child(6n+1){margin-top:36px}.art-piece:nth-child(6n+3){margin-top:24px}.art-piece:nth-child(6n+5){margin-top:50px}.art-practice-footer{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.art-practice-link{transition:none}}

@media(max-width:650px){#work .section-head h2,.art-practice-copy h3{font-size:38px}}

@media(max-width:650px){.art-practice-copy{width:100%;max-width:none;justify-self:stretch}.art-practice-copy>p{max-width:none}}
