@font-face{font-family:Didona;src:url(fonts/DidonaLB-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:Roboto;font-weight:300;src:url(fonts/Roboto-Light.ttf) format('truetype');font-display:swap}
@font-face{font-family:Roboto;font-weight:400;src:url(fonts/Roboto-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:Roboto;font-weight:500;src:url(fonts/Roboto-Medium.ttf) format('truetype');font-display:swap}

:root{
  --ink:#1f1e20;--craiola:#d1d997;--sand:#d9c6a9;--white:#fff;
  --sand-l:#f3ece0;--craiola-l:#eef0d9;--line:#e6e1d6;--mute:#6f6c68;--err:#c2452d;
  --nav:232px;--gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font:300 17px/1.5 Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lg{width:100%;height:auto;color:inherit}

/* Навигация */
.nav{position:fixed;inset:0 auto 0 0;width:var(--nav);padding:28px 24px;background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;z-index:20}
.nav__logo{display:block;width:86px;margin-bottom:36px}
.nav__group{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:22px 0 8px;font-weight:400}
.nav li a{display:flex;gap:10px;padding:4px 0;font-size:14px;line-height:1.3;color:var(--mute);transition:color .2s}
.nav li a span{flex:0 0 18px;font-size:11px;padding-top:2px}
.nav li a:hover,.nav li a.on{color:var(--ink)}
.nav li a.on{font-weight:400}
.nav__hot{position:relative}
.nav__foot{margin-top:auto;padding-top:24px;font-size:11px;line-height:1.4;color:var(--mute)}
.topbar{display:none}
.main{margin-left:var(--nav);overflow-x:clip}

/* Первый экран */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:var(--gut);overflow:hidden}
.hero__field{position:absolute;inset:0;width:100%;height:100%}
.hero__text{position:relative;max-width:760px}
.eyebrow{font-weight:400;font-size:14px;margin-bottom:10px}
h1{font:400 clamp(48px,8.4vw,128px)/.98 Didona,serif;letter-spacing:-.01em;margin-bottom:22px}
.hero__lead{font-size:clamp(17px,1.5vw,21px);max-width:34em}
.hero__hint{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--mute)}
.hint-line{display:inline-block;width:34px;height:3px;background:var(--ink)}
@media (hover:none){.hero__hint{display:none}}

/* Разделитель части */
.part{background:var(--craiola);padding:clamp(40px,6vw,88px) var(--gut) clamp(32px,4vw,56px);overflow:hidden}
.part--sand{background:var(--sand)}
.part__word{font:400 clamp(72px,17.5vw,300px)/.9 Didona,serif;letter-spacing:-.02em;margin-left:-.04em;white-space:nowrap}
.part__lead{max-width:36em;margin-top:clamp(24px,3vw,44px);font-size:clamp(17px,1.4vw,20px);font-weight:400}

/* Секции */
.sec{padding:clamp(56px,7vw,112px) var(--gut);border-bottom:1px solid var(--line)}
.sec--flush{padding-bottom:clamp(20px,3vw,40px);border-bottom:0}
.sec--tint{background:var(--sand-l);border-bottom:0}
.sec__head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(28px,4vw,56px)}
.sec__num{font-size:14px;font-weight:400;color:var(--mute)}
h3{font:400 clamp(38px,5vw,72px)/1.04 Didona,serif;letter-spacing:-.005em}
.sec__head--big{margin-bottom:0}
.sec__head--big h3{font-size:clamp(52px,9.4vw,160px);line-height:.98}
.sub{font:400 clamp(26px,2.8vw,40px)/1.1 Didona,serif;margin-bottom:16px}
.sub--gap{margin-top:clamp(56px,7vw,96px)}
.big{font:400 clamp(26px,3vw,44px)/1.12 Didona,serif}
.lead-sm{max-width:38em;margin-bottom:clamp(24px,3vw,40px)}
.txt p+p{margin-top:12px}
.txt--w{max-width:44em;margin-top:24px}
.note{font-size:14px;color:var(--mute);margin-top:12px;min-height:1.5em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3vw,44px)}

[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal]:not(.in){opacity:0;transform:translateY(18px)}

/* 01 */
.markstage{display:flex;justify-content:center;padding:clamp(32px,6vw,88px) 0;background:var(--sand-l)}
.markstage__mark{height:clamp(220px,34vw,460px);width:auto;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease) .1s}
.markstage.in .markstage__mark,html:not(.js) .markstage__mark{clip-path:inset(-20% -5% -5% -5%)}

/* 02 */
.versions{display:grid;grid-template-columns:1fr 260px;gap:clamp(20px,3vw,40px)}
.versions__stage{position:relative;height:clamp(300px,36vw,500px);background:var(--sand-l);display:flex;align-items:center;justify-content:center;overflow:hidden}
.versions__stage svg{position:absolute;width:auto;max-width:72%;height:38%;transition:opacity .4s,transform .7s var(--ease)}
.versions__stage svg.tall{height:66%}
.versions__stage svg.off{opacity:0;transform:scale(.92)}
.versions__list{display:flex;flex-direction:column}
.versions__list button{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);color:var(--mute);line-height:1.25;transition:color .2s,padding .3s var(--ease)}
.versions__list button:hover{color:var(--ink)}
.versions__list button[aria-selected=true]{color:var(--ink);font-weight:400;padding-left:12px;box-shadow:inset 3px 0 0 var(--ink)}

/* Пилюли и ползунки */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button{padding:7px 14px;border-radius:40px;background:var(--ink);color:#fff;font-size:14px;font-weight:400;opacity:.28;transition:opacity .25s}
.pills button:hover{opacity:.6}
.pills button.on{opacity:1}
.pills--light button{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #cfc9bb;opacity:1}
.pills--light button:hover{box-shadow:inset 0 0 0 1px var(--ink);opacity:1}
.pills--light button.on{background:var(--ink);color:#fff;box-shadow:none}
.range{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-top:20px;font-size:14px;font-weight:400}
.range--stack{grid-template-columns:1fr;gap:6px;margin-top:18px}
.range output{min-width:12em;text-align:right;color:var(--mute);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--ink)}
input[type=range]::-moz-range-track{height:3px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:12px;margin-top:-4.5px;background:var(--ink);border:0;border-radius:0}
input[type=range]::-moz-range-thumb{width:34px;height:12px;background:var(--ink);border:0;border-radius:0}

/* 03 */
.clear{background:var(--sand-l);padding:clamp(12px,2vw,28px)}
.clear__svg{width:100%;height:clamp(300px,38vw,520px)}
.clear__ctrl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:16px}
#clearRange{transition:opacity .3s}
#clearRange.off{opacity:.3;pointer-events:none}
#clearStatus.bad{color:var(--err)}
.cz{transition:opacity .6s}
.cz.off{opacity:0}
.cz-x{font:400 9px Roboto,sans-serif}

/* 04 */
.swatches{display:flex;height:clamp(320px,34vw,460px)}
.sw{flex:1 1 0;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:18px;background:var(--c);color:var(--t);transition:flex-grow .6s var(--ease);min-width:0;overflow:hidden}
.sw:first-child{flex-grow:2}
.swatches:hover .sw{flex-grow:1}
.swatches .sw:hover{flex-grow:2.3}
.sw--white{box-shadow:inset 0 0 0 1px var(--line)}
.sw__name{font:400 clamp(24px,2.4vw,36px)/1 Didona,serif}
.sw dl{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;font-size:13px;font-weight:400;white-space:nowrap}
.sw dt{opacity:.6}
.onbg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(24px,3vw,40px)}
.onbg>div{padding:clamp(24px,4vw,56px) clamp(16px,3.4vw,48px)}
.onbg>div:first-child{box-shadow:inset 0 0 0 1px var(--line)}

/* 05 */
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.sizes__cell{position:relative;background:#fff;height:240px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.sizes__rule{width:10px;border:1px solid var(--mute);border-right:0;flex:none;transition:height .2s}
.sizes__logo svg{width:auto;display:block}
.sizes__cell.bad .sizes__logo{color:var(--err)}
.spec{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px}
.spec th,.spec td{text-align:left;padding:9px 16px 9px 0;border-bottom:1px solid var(--line);font-weight:300;vertical-align:top}
.spec thead th,.spec--kv th{font-weight:400;color:var(--mute);font-size:13px}
.spec--kv th{width:7.5em}

/* 06 */
.misuse{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px) clamp(10px,1.4vw,20px)}
.mis{outline-offset:2px;cursor:default}
.mis__box{position:relative;aspect-ratio:4/3;background:var(--sand-l);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .5s}
.mis__box::after{content:'';position:absolute;top:10px;left:10px;width:12px;height:12px;background:linear-gradient(45deg,transparent 44%,var(--err) 44%,var(--err) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--err) 44%,var(--err) 56%,transparent 56%);transition:opacity .3s}
.mis:hover .mis__box::after,.mis:focus .mis__box::after{opacity:0}
.mis__in{position:relative;width:70%;aspect-ratio:189.25/56.73}
.mis__in svg,.mis__in span{position:absolute;transition:all .7s var(--ease)}
.mis p{font-size:14px;line-height:1.35;margin-top:9px}
.m-full{inset:0;width:100%;height:100%}
.m-mark{left:0;top:0;width:24.4%;height:100%}
.m-word{left:31.7%;top:36.3%;width:68.3%;height:auto;aspect-ratio:178.57/25.88}
.m-font{left:31.7%;top:34%;font:500 clamp(10px,1.3vw,17px)/1 Roboto,sans-serif;white-space:nowrap;letter-spacing:0}
.mis--stretch .m-full{transform:scale(1.1,1.75)}
.mis--move .m-mark{left:75.6%}
.mis--move .m-word{left:0;top:36.3%}
.mis--font .m-word{opacity:0}
.mis--ratio .m-mark{transform:scale(.46);transform-origin:50% 100%}
.mis--ratio .m-word{transform:scale(.78);transform-origin:0 50%;left:15%}
.mis--fx .m-full{filter:drop-shadow(4px 5px 1px rgba(31,30,32,.55)) blur(.5px);transform:skewX(-10deg)}
.mis--color .m-full{color:var(--craiola)}
.mis--turn .m-full{transform:rotate(-17deg)}
.mis--low .mis__box{background:var(--craiola)}
.mis--low .m-full{color:#e3e7bd}
.mis--move:is(:hover,:focus) .m-mark{left:0}
.mis--move:is(:hover,:focus) .m-word{left:31.7%}
.mis--font:is(:hover,:focus) .m-font{opacity:0}
.mis--font:is(:hover,:focus) .m-word{opacity:1}
.mis--ratio:is(:hover,:focus) .m-mark,.mis--ratio:is(:hover,:focus) .m-word{transform:none}
.mis--ratio:is(:hover,:focus) .m-word{left:31.7%}
.mis--ratio:is(:hover,:focus) .m-mark{left:0}
.mis:is(:hover,:focus) .m-full{transform:none;filter:none;color:var(--ink)}
.mis--low:is(:hover,:focus) .mis__box{background:var(--sand-l)}

/* 07 */
.type{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.type__spec{background:#fff;padding:clamp(20px,3vw,40px)}
.type__spec--d{background:var(--ink);color:#fff}
.type__tag{font-size:14px;opacity:.65;font-weight:400}
.type__aa{font-size:clamp(120px,17vw,260px);line-height:1;margin:14px 0 6px}
.type__spec--d .type__aa,.type__spec--d .type__name,.type__spec--d .type__abc{font-family:Didona,serif}
.type__name{font-size:30px;line-height:1.2;margin-bottom:8px}
.type__w{display:flex;gap:16px;font-size:16px;margin-bottom:8px}
.type__abc{font-size:clamp(13px,1.12vw,16px);line-height:1.5;overflow-wrap:anywhere;margin-top:10px}
.tryline{padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.tryline__tag{font-size:14px;color:var(--mute);margin-bottom:12px;font-weight:400}
.tryline__h{font:400 clamp(44px,8vw,132px)/1 Didona,serif;outline:0;border-bottom:3px solid transparent;transition:border-color .2s;overflow-wrap:anywhere}
.tryline__h:hover,.tryline__h:focus{border-color:var(--ink)}
.tryline__b{max-width:36em;margin-top:18px}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);margin-top:28px}
.rules li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}

/* 08 сцена */
.stage{height:660vh;position:relative}
.stage__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--sand-l)}
.stage__canvas{position:absolute;inset:0;background:var(--bg,#fff);color:var(--fg,#1f1e20);transition:background .9s,color .9s;clip-path:inset(0 calc(var(--closed,1)*41%))}
.stage__svg{position:absolute;inset:0;width:100%;height:100%}
.stage__bark{position:absolute;inset:0;pointer-events:none;opacity:var(--closed,1);background:linear-gradient(90deg,transparent 41%,rgba(120,105,80,.42) 41%,rgba(120,105,80,.05) 45%,transparent 50%,rgba(120,105,80,.08) 54%,rgba(120,105,80,.5) 59%,transparent 59%)}
.stage__intro{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gut);transition:opacity .4s}
.stage__introL{font:400 clamp(26px,3.1vw,48px)/1.12 Didona,serif;max-width:31%;width:9.5em}
.stage__introL,.stage__introR{max-width:min(78%,9.5em)}
.stage__introR{justify-self:end;font-size:clamp(15px,1.2vw,18px);width:13em;max-width:66%;text-align:left}
.stage__cap{position:absolute;left:var(--gut);bottom:clamp(20px,3.4vw,48px);width:min(36%,430px);transition:opacity .4s}
.stage__count{font-size:13px;font-weight:400;margin-bottom:6px;opacity:.7}
.stage__name{font:400 clamp(44px,6vw,96px)/1 Didona,serif;margin-bottom:12px}
.stage__desc{font-size:clamp(15px,1.15vw,18px);line-height:1.4;font-weight:400}
.stage__rail{position:absolute;right:var(--gut);bottom:clamp(20px,3.4vw,48px);display:flex;gap:4px;transition:opacity .4s}
.stage__rail button{width:34px;height:24px;display:flex;align-items:center}
.stage__rail button::before{content:'';display:block;width:100%;height:2px;background:currentColor;opacity:.3;transition:height .3s,opacity .3s}
.stage__rail button.on::before{height:9px;opacity:1}

/* Галерея узоров */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.gal{background:#fff;position:relative;padding:clamp(16px,2vw,28px);display:flex;flex-direction:column}
.gal:nth-child(4){background:var(--ink);color:#fff}
.gal:nth-child(2){background:var(--sand-l)}
.gal:nth-child(6){background:var(--craiola-l)}
.gal svg{width:100%;height:clamp(300px,34vw,520px);margin-bottom:16px}
.gal__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto}
.gal__name{font:400 24px/1 Didona,serif}
.gal__dl{font-size:13px;font-weight:400;border-bottom:1px solid currentColor}

/* Запреты штриха */
.dont{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px) clamp(10px,1.4vw,20px);margin-top:clamp(32px,4vw,56px)}
.dnt__svg{width:100%;aspect-ratio:4/5;background:var(--sand-l);color:var(--ink)}
.dnt__svg rect{transition:transform 1s var(--ease),fill .4s}
.dnt__svg .tile{fill:none;stroke:var(--err);stroke-width:.6;stroke-dasharray:1.6 1.2;opacity:0;transition:opacity .5s}
.dnt.bad .dnt__svg .tile{opacity:1}
.dnt__sw{display:flex;gap:6px;margin:10px 0 8px}
.dnt__sw button{font-size:13px;font-weight:400;padding:3px 10px;border-radius:30px;box-shadow:inset 0 0 0 1px #cfc9bb}
.dnt__sw button.on{background:var(--ink);color:#fff;box-shadow:none}
.dnt__sw button.on.b{background:var(--err)}
.dnt p{font-size:14px;line-height:1.35}

/* Конструктор */
.play{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,48px);align-items:start}
.play__sheetwrap{display:flex;justify-content:center;align-items:center;min-height:clamp(380px,46vw,700px)}
.play__sheet{position:relative;background:var(--pb,#fff);color:var(--pi,#1f1e20);overflow:hidden;box-shadow:0 18px 50px -24px rgba(31,30,32,.4);transition:background .5s,color .5s;width:min(100%,calc(76vh * var(--r,.75)))}
.play__svg{position:absolute;inset:0;width:100%;height:100%}
.play__head{position:absolute;left:6%;top:5%;right:6%;font:400 clamp(26px,3.8vw,60px)/1.02 Didona,serif;outline:0}
.play__logo{position:absolute;left:6%;bottom:5%;width:32%;max-width:170px}
.ctrl__label{font-size:13px;font-weight:400;color:var(--mute);margin:18px 0 8px}
.ctrl__label:first-child{margin-top:0}
.dots{display:flex;gap:8px}
.dots button{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #cfc9bb}
.dots button.on{outline:2px solid var(--ink);outline-offset:2px}
.play__btns{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.btn{padding:12px 16px;background:var(--ink);color:#fff;font-size:14px;font-weight:400;text-align:center;transition:opacity .2s}
.btn:hover{opacity:.82}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* Картинки */
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.imgs figure.wide{grid-column:1/-1}
.imgs img{object-fit:cover}
.imgs--a figure:not(.wide) img{aspect-ratio:1/1}
figcaption{font-size:13px;color:var(--mute);margin-top:8px}
.imgs--b{margin-top:clamp(24px,3vw,44px)}
.full{margin-bottom:clamp(40px,5vw,72px)}
.full--white{margin:clamp(32px,4vw,56px) auto 0;max-width:760px}
.item{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(44px,6vw,88px)}
.item:last-child{margin-bottom:0}
.item--rev .item__img{order:2}
.item__img--pad{padding:0}
.item .spec{margin-top:16px}
.van{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.van__view img{transition:opacity .35s}
.van .pills{margin-bottom:16px}
.van .spec{margin-top:14px}

/* Подвал */
.foot{position:relative;background:var(--ink);color:#fff;min-height:70vh;display:flex;align-items:flex-end;padding:var(--gut);overflow:hidden}
.foot__field{position:absolute;inset:0;width:100%;height:100%;color:#3a393c}
.foot__txt{position:relative;display:grid;grid-template-columns:150px 1fr;gap:clamp(24px,5vw,72px);align-items:end;width:100%}
.foot__logo{width:130px}
.foot dl{display:grid;grid-template-columns:minmax(auto,300px) 1fr;gap:6px 18px;font-size:14px}
.foot dt{opacity:.6}
.foot__note{grid-column:2;font-size:13px;opacity:.6}

/* Адаптив */
@media (max-width:1180px){
  .misuse,.dont{grid-template-columns:repeat(2,1fr)}
  .play{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--nav:0px}
  body{font-size:16px}
  .topbar{display:flex;position:sticky;top:0;z-index:30;justify-content:space-between;align-items:center;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line)}
  .topbar__logo{width:112px}
  .topbar__btn{font-size:14px;font-weight:400}
  .nav{inset:53px 0 0 0;width:100%;border:0;transform:translateY(-110%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .nav.open{transform:none;visibility:visible}
  .nav__logo{display:none}
  .nav li a{font-size:18px;padding:8px 0}
  .hero{min-height:calc(100svh - 53px)}
  .cols,.rules,.type,.versions,.item,.van,.sizes{grid-template-columns:1fr}
  .item--rev .item__img{order:0}
  .versions__stage{height:280px}
  .swatches{flex-direction:column;height:auto}
  .sw{padding:14px 16px;gap:14px;min-height:120px}
  .sw:first-child{flex-grow:1}
  .onbg{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr 1fr}
  .gal svg{height:62vw}
  .range{grid-template-columns:1fr auto}
  .range span{grid-column:1/-1}
  .range input{grid-column:1/-1;grid-row:2}
  .range output{grid-column:1/-1;text-align:left;min-width:0}
  .stage__sticky{height:calc(100svh - 53px);top:53px}
  .stage__cap{left:20px;right:20px;bottom:44px;width:auto}
  .stage__name{font-size:48px;margin-bottom:6px}
  .stage__desc{font-size:14px}
  .stage__rail{left:20px;right:auto;bottom:14px}
  .stage__intro{padding:0 12px}
  .stage__introL{font-size:20px;max-width:88%;width:auto}
  .stage__introR{font-size:13px;max-width:82%;width:auto}
  .clear__svg{height:auto;aspect-ratio:4/3}
  .foot__txt{grid-template-columns:1fr}
  .foot dl{grid-template-columns:1fr;gap:0}
  .foot dd{margin:0 0 10px}
  .foot__note{grid-column:1}
}
@media (max-width:520px){
  .gallery{grid-template-columns:1fr}
  .gal svg{height:110vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}