/* RaawArt v3, the viewing room. A dark room, each work under its own light, captions like gallery plaques. */
:root{
  --room:#0e0d0b; --wall:#151310; --wall2:#1c1915; --ink:#ece6da; --mute:#a39b8c; --faint:#6b645a; --line:rgba(236,230,218,.16);
  --blue:#9bb7cc; /* RaawArt's steel blue, lifted for a dark wall */
  --vit:#eeeae2;
  --serif:"Noto Serif Display",Didot,"Bodoni 72",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  --gut:clamp(16px,4vw,64px); --hd:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --cast:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hd);background:var(--room)}
body{margin:0;background:var(--room);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.015em}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
::selection{background:var(--ink);color:var(--room)}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--gut);top:12px;z-index:50;background:var(--ink);color:var(--room);padding:8px 12px}
.label{margin:0;font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
[hidden]{display:none!important}

/* Header */
.hd{position:fixed;inset:0 0 auto;z-index:20;height:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background .5s,box-shadow .5s}
.hd.solid{background:rgba(14,13,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand img{width:140px;height:auto}
.hd-nav{display:flex;gap:clamp(20px,3vw,44px);align-items:center;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hd-nav>*{padding:10px 0;position:relative;color:var(--mute);transition:color .3s}
.hd-nav>*:hover{color:var(--ink)}
.hd-nav>*::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.hd-nav>*:hover::after{transform:scaleX(1)}
.hd-nav .hd-book{color:var(--ink);padding:12px 20px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s,color .3s}
.hd-nav .hd-book::after{display:none}
.hd-nav .hd-book:hover{background:var(--ink);color:var(--room)}
body.prices-on .pl-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:1px}

/* Shared */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;background:var(--ink);color:var(--room);font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s}
.btn:hover{background:#fff}
.btn.line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{background:var(--ink);color:var(--room)}
.link-arrow{display:inline-flex;gap:10px;align-items:center;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:8px 0;color:var(--ink);background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link-arrow:hover{background-size:40% 1px}
.link-arrow span{transition:transform .4s var(--ease)}.link-arrow:hover span{transform:translateX(4px)}
.fade{opacity:0;transition:opacity 1.2s ease}.fade.on{opacity:1}

/* A work on the wall. Works photographed on white sit in a lit vitrine instead. */
.hang{display:flex;align-items:center;justify-content:center;min-height:0;max-height:100%;max-width:100%}
.hang img{max-height:100%;width:auto;height:auto;object-fit:contain;filter:var(--cast)}
.hang.vit{background:var(--vit);padding:6%;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.06)}
.hang.vit img{filter:none;mix-blend-mode:multiply}

/* Home: the hero, lit from above */
.hero{--lx:0;--ly:0;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gut);align-items:center;min-height:100svh;padding:calc(var(--hd) + clamp(16px,4vh,48px)) var(--gut) clamp(40px,8vh,96px);overflow:hidden;isolation:isolate}
.beam{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 2.4s ease .2s;
  background:
    radial-gradient(ellipse 34% 58% at calc(72% + var(--lx) * 3%) calc(46% + var(--ly) * 3%),rgba(255,236,205,.16),rgba(255,236,205,.05) 55%,transparent 75%),
    conic-gradient(from 180deg at calc(72% + var(--lx) * 2%) -20%,transparent 172deg,rgba(255,240,215,.05) 178deg,rgba(255,240,215,.07) 180deg,rgba(255,240,215,.05) 182deg,transparent 188deg)}
body.lit .beam{opacity:1}
.hero-txt{position:relative;z-index:1}
.kick{margin:0 0 28px;font:600 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--blue)}
.hero h1{font-size:clamp(56px,8.4vw,140px);line-height:.9;font-weight:300}
.hero h1 i{font-weight:300}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.4s var(--ease)}
.ln+.ln>span{transition-delay:.12s}
body.lit .ln>span{transform:none}
.hero-sub{max-width:34ch;margin:34px 0 40px;font-size:17px;line-height:1.65;color:var(--mute);opacity:0;transition:opacity 1.2s ease .6s}
.hero-cta{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;opacity:0;transition:opacity 1.2s ease .8s}
body.lit .hero-sub,body.lit .hero-cta{opacity:1}
.hero-art{margin:0;height:min(78svh,860px);display:flex;align-items:center;justify-content:center}
.hero-art a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;min-height:0}
.hero-art .hang{height:calc(100% - 72px)}
.hero-art .hang img{transition:transform 1.6s var(--ease)}
.hero-art a:hover .hang img{transform:scale(1.015)}
figcaption{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
figcaption span{font:600 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase}
figcaption i{font:italic 300 19px/1.2 var(--serif);color:var(--mute)}
figcaption em{font:400 12px/1 var(--sans);font-style:normal;letter-spacing:.1em;color:var(--faint)}

/* Artists along the wall */
.roll{overflow:hidden;padding:30px 0;box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.roll-in{display:flex;width:max-content;animation:roll 140s linear infinite}
.roll-in>div{display:flex;align-items:center;flex:none}
.roll span{font:italic 300 clamp(24px,2.6vw,36px)/1 var(--serif);white-space:nowrap;color:var(--mute);transition:color .3s}
.roll span:hover{color:var(--ink)}
.roll b{display:inline-block;width:5px;height:5px;margin:0 clamp(22px,2.6vw,40px);background:var(--faint);transform:rotate(45deg)}
.roll:hover .roll-in{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}

/* Collections as rooms */
.rooms{padding:clamp(80px,14vh,160px) 0 0}
.rooms-label{padding:0 var(--gut);margin-bottom:clamp(40px,7vh,80px)}
.rooms-list{list-style:none;margin:0;padding:0}
.room{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:var(--gut);padding:0 var(--gut);margin-bottom:clamp(96px,16vh,180px)}
.room.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.room.flip .room-art{order:2}
.room-art{position:relative;height:min(82svh,860px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 60% at 50% 42%,#26221c,var(--wall) 60%,var(--room));padding:clamp(40px,7vh,88px) clamp(32px,6vw,96px) clamp(64px,9vh,104px);overflow:hidden}
.room-art::before{content:"";position:absolute;left:50%;top:-30%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(255,236,205,.12),transparent 70%);pointer-events:none}
.room-art .hang{height:100%;transition:transform 1.4s var(--ease)}
.room-art:hover .hang{transform:scale(1.02)}
.room-cred{position:absolute;left:0;right:0;bottom:clamp(22px,3.4vh,36px);text-align:center;font-size:12px;letter-spacing:.06em;color:var(--faint)}
.room-cred i{font-family:var(--serif)}
.room-no{margin:0 0 22px;font:300 15px/1 var(--serif);letter-spacing:.2em;color:var(--blue)}
.room h2{font-size:clamp(48px,5.6vw,96px);line-height:.95}
.room h2 a{background:linear-gradient(currentColor,currentColor) left 96%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.room h2 a:hover{background-size:100% 1px}
.room-meta{margin:24px 0 0;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.room-meta span{margin:0 8px;color:var(--faint)}
.room-blurb{max-width:42ch;margin:22px 0 34px;color:var(--mute)}

/* Figures */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 var(--gut);box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.figures p{margin:0;padding:clamp(28px,5vh,52px) 0;display:flex;flex-direction:column;gap:12px;font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.figures p+p{padding-left:clamp(16px,2.4vw,36px);box-shadow:-1px 0 0 var(--line)}
.figures span{font:300 clamp(44px,5vw,80px)/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink)}

/* Appointment */
.appt{position:relative;display:grid;align-items:center;min-height:min(86svh,820px);margin-top:clamp(80px,14vh,160px);overflow:hidden;isolation:isolate}
.appt-art{position:absolute;inset:0;z-index:-1}
.appt-art img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.3) brightness(.8)}
.appt-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--room) 8%,rgba(14,13,11,.7) 55%,rgba(14,13,11,.4)),linear-gradient(0deg,var(--room),transparent 30%,transparent 70%,var(--room))}
.appt-txt{padding:clamp(64px,10vh,120px) var(--gut);display:grid;justify-items:start;gap:30px;max-width:900px}
.appt-line{margin:0;font:300 clamp(34px,4.2vw,64px)/1.08 var(--serif)}

/* Reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.2s ease,transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Collection */
.coll-head{padding:calc(var(--hd) + clamp(40px,8vh,96px)) var(--gut) clamp(48px,8vh,88px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gut);align-items:end;background:radial-gradient(ellipse 60% 100% at 30% 0,rgba(255,236,205,.07),transparent 70%)}
.back{grid-column:1/-1;justify-self:start;margin-bottom:48px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.back:hover{color:var(--ink)}
.coll-no{grid-column:1;margin:0 0 18px;font:300 15px/1 var(--serif);letter-spacing:.2em;color:var(--blue)}
.coll-head h1{grid-column:1;font-size:clamp(56px,8vw,132px);line-height:.92}
.coll-meta{grid-column:1;margin:26px 0 0;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.coll-blurb{grid-column:1;max-width:60ch;margin:18px 0 0;color:var(--mute)}
.filter{grid-column:2;grid-row:3/7;align-self:end;display:grid;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.filter select{height:46px;min-width:240px;padding:0 36px 0 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ece6da' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center;font:400 16px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);-webkit-appearance:none;appearance:none}
.filter select option{background:var(--wall);color:var(--ink)}
.filter select:focus{outline:0;border-color:var(--ink)}
.grid{list-style:none;margin:0;padding:0 var(--gut) clamp(80px,12vh,140px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,7vw,96px) clamp(24px,3vw,48px)}
.grid a{display:block}
.niche{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:14%;background:radial-gradient(ellipse 70% 62% at 50% 40%,#25211b,var(--wall) 62%,#110f0d);overflow:hidden}
.niche::before{content:"";position:absolute;left:50%;top:-40%;width:80%;height:90%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(255,236,205,.10),transparent 70%);opacity:.6;transition:opacity .6s;pointer-events:none}
.grid a:hover .niche::before{opacity:1}
.niche .hang{height:100%;transition:transform .9s var(--ease)}
.grid a:hover .niche .hang{transform:scale(1.035)}
.g-reg{display:block;margin-top:22px;font:400 11px/1 var(--sans);letter-spacing:.2em;color:var(--faint)}
.g-who{display:block;margin-top:12px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.g-tt{display:block;margin-top:8px;font:italic 300 22px/1.2 var(--serif)}
.g-pr{display:block;margin-top:10px;font-size:13px;color:var(--mute)}

/* One work */
.work{display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:100svh}
.w-art{position:sticky;top:0;height:100svh;margin:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--hd) + clamp(20px,4vh,48px)) clamp(32px,6vw,112px) clamp(72px,11vh,112px);background:radial-gradient(ellipse 55% 62% at 50% 44%,#28241d,var(--wall) 58%,var(--room));overflow:hidden;isolation:isolate}
.w-light{position:absolute;left:50%;top:-25%;width:64%;height:85%;transform:translateX(-50%);z-index:-1;background:radial-gradient(ellipse at 50% 0,rgba(255,236,205,.14),transparent 70%);pointer-events:none}
.w-art .hang{height:100%}
.w-step{position:absolute;left:50%;bottom:clamp(20px,3.4vh,36px);transform:translateX(-50%);display:flex;gap:8px}
.w-step button{width:46px;height:46px;font-size:16px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s,color .3s}
.w-step button:hover{background:var(--ink);color:var(--room)}
.w-side{padding:calc(var(--hd) + clamp(24px,5vh,56px)) var(--gut) 56px clamp(32px,3vw,52px);display:flex;flex-direction:column;background:var(--room)}
.w-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:clamp(40px,9vh,96px)}
.w-nav a:hover{color:var(--ink)}
.w-nav span:last-child{flex:none;color:var(--faint)}
.w-reg{margin:0 0 18px;font:300 15px/1 var(--serif);letter-spacing:.2em;color:var(--blue)}
.w-who{margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.w-who .life{color:var(--mute);letter-spacing:.1em;font-weight:500}
.w-title{margin:14px 0 0;font:italic 300 clamp(36px,3.2vw,52px)/1.04 var(--serif)}
.w-title .y{font-style:normal;color:var(--mute)}
.w-cap{list-style:none;margin:30px 0 0;padding:0;font-size:15px;line-height:1.65;color:var(--mute)}
.scale{display:flex;align-items:flex-end;gap:16px;margin:32px 0 0;font-size:12px;letter-spacing:.04em;color:var(--mute)}
.scale svg{flex:none;overflow:visible;color:var(--ink)}
.w-price{margin:34px 0 0;padding-top:24px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;box-shadow:0 -1px 0 var(--line)}
.w-price .k{font:600 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.w-price .v{font:300 30px/1 var(--serif)}
.w-price .q{font-size:15px;color:var(--ink)}
.w-status{margin:10px 0 0;font-size:14px;color:var(--mute);text-align:right}
.w-side .btn{margin-top:30px;width:100%}
.w-pl{margin-top:18px;align-self:center;font-size:13px;color:var(--mute);background:linear-gradient(var(--faint),var(--faint)) left bottom/100% 1px no-repeat;padding-bottom:3px}
.w-pl:hover{color:var(--ink)}
.w-views{display:flex;gap:10px;margin-top:30px}
.w-views button{width:60px;height:60px;background:var(--wall2);padding:6px;opacity:.5;transition:opacity .3s}
.w-views button[aria-pressed=true]{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.w-views img{width:100%;height:100%;object-fit:contain}
.w-more{margin-top:30px}
.w-more+.w-more{margin-top:14px}
.w-more summary{cursor:pointer;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;padding:6px 0}
.w-more summary::-webkit-details-marker{display:none}
.w-more summary::after{content:"+";font-weight:400;font-size:14px}
.w-more[open] summary::after{content:"\2212"}
.w-more .txt{margin-top:14px;font-size:15px;color:var(--mute)}
.w-more .txt p{margin:0 0 12px}

/* Footer */
.ft{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px 40px;padding:56px var(--gut) 56px;font-size:13px;color:var(--mute);box-shadow:0 -1px 0 var(--line)}
.ft img{width:112px;height:auto;opacity:.75}
.ft p{margin:0}.ft-links a+a{margin-left:28px}
.ft a:hover{color:var(--ink)}
body[data-page=work] .ft{display:none}

/* Dialogs */
html.has-dialog{overflow:hidden}
.dlg{position:fixed;inset:0;z-index:40;background:rgba(8,7,6,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.panel{position:relative;width:min(460px,100%);background:var(--wall);padding:52px 44px 40px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),inset 0 0 0 1px var(--line)}
.panel.wide{width:min(700px,100%)}
.panel h2{font-size:42px;line-height:1.05;margin:14px 0 16px}
.panel>p{margin:0 0 24px;color:var(--mute)}
.x{position:absolute;top:20px;right:22px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:6px}
.x:hover{color:var(--ink)}
.tf{display:grid;gap:8px;margin:0 0 20px;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.tf input,.tf select,.tf textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:10px 0;font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);-webkit-appearance:none;appearance:none}
.tf select option{background:var(--wall)}
.tf textarea{resize:vertical}
.tf input:focus,.tf select:focus,.tf textarea:focus{outline:0;border-color:var(--ink)}
.tf ::placeholder{color:var(--faint)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.fgrid .full{grid-column:1/-1}
.panel .btn{width:100%;margin-top:8px}
.msg{min-height:1em;margin:14px 0 0;font-size:14px;color:#e39a8a}
.msg.note{color:var(--mute)}
.sent{margin:18px 0 0;font:300 24px/1.3 var(--serif)}
.is-wrong{animation:nudge .32s}
@keyframes nudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Tablet */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work{grid-template-columns:minmax(0,1fr) 360px}
  .room,.room.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Phone */
@media (max-width:760px){
  :root{--hd:64px}
  .brand img{width:112px}
  .hd-nav{gap:16px;font-size:11px;letter-spacing:.1em}
  .hd-nav [data-to-index]{display:none}
  .hd-nav .hd-book{padding:10px 12px}
  .hero{grid-template-columns:1fr;min-height:0;gap:44px;padding-top:calc(var(--hd) + 40px)}
  .hero-art{height:auto}
  .hero-art .hang{height:auto;max-height:60svh}
  .hero-art .hang img{max-height:60svh}
  .hero h1{font-size:clamp(52px,16vw,76px)}
  .hero-sub{margin:24px 0 30px;font-size:16px}
  .beam{background:radial-gradient(ellipse 80% 40% at 50% 74%,rgba(255,236,205,.14),transparent 75%)}
  .roll{padding:22px 0}
  .room,.room.flip{grid-template-columns:1fr;gap:28px;padding:0;margin-bottom:88px}
  .room.flip .room-art{order:0}
  .room-art{height:auto;aspect-ratio:4/5;padding:40px 32px 64px}
  .room-txt{padding:0 var(--gut)}
  .room h2{font-size:clamp(44px,13vw,60px)}
  .figures{grid-template-columns:1fr 1fr}
  .figures p:nth-child(3){padding-left:0;box-shadow:0 -1px 0 var(--line)}
  .figures p:nth-child(4){box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
  .figures span{font-size:44px}
  .appt{min-height:0}
  .appt-art::after{background:linear-gradient(0deg,var(--room) 10%,rgba(14,13,11,.72) 60%,var(--room))}
  .coll-head{grid-template-columns:1fr;padding-bottom:40px}
  .filter{grid-column:1;grid-row:auto;margin-top:30px}
  .filter select{width:100%;min-width:0}
  .grid{grid-template-columns:1fr 1fr;gap:44px 16px}
  .niche{padding:12%}
  .g-who{letter-spacing:.16em}
  .g-tt{font-size:18px}
  .work{grid-template-columns:1fr}
  .w-art{position:relative;height:auto;min-height:0;aspect-ratio:auto;padding:calc(var(--hd) + 28px) 20px 88px}
  .w-art .hang{height:auto;max-height:62svh}
  .w-art .hang img{max-height:62svh}
  .w-side{padding:32px var(--gut) 48px}
  .w-nav{margin-bottom:32px}
  .ft{grid-template-columns:1fr;gap:18px;padding:44px var(--gut)}
  .panel{padding:48px 22px 30px}
  .fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .fade,.rv,.hero-sub,.hero-cta{opacity:1}
  .rv,.ln>span{transform:none}
  .roll-in{flex-wrap:wrap;width:auto}
  .roll-in>div[aria-hidden]{display:none}
}