@font-face{font-family:ZadoyaDisplay;src:url('assets/display.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--cream:#fff3d8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#211708;color:var(--cream)}body{font-family:Arial,sans-serif}::selection{background:#9d672f;color:#fff7e9}
.zadoya{position:relative;isolation:isolate;min-height:600px;height:100svh;overflow:hidden;background:#7e562b url('assets/scene-1.jpg') center center/cover no-repeat;container-type:inline-size}
.field-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sound{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));display:grid;place-items:center;width:46px;height:46px;padding:11px;color:var(--cream);background:#20180d33;border:0;border-radius:50%;cursor:pointer;transition:background .2s,transform .15s}
.sound:hover{background:#20180d66}.sound:active{transform:scale(.96)}.sound svg{width:24px;height:24px;display:block;overflow:visible}
.sound-slash{stroke-dasharray:26;stroke-dashoffset:26;opacity:0;transition:stroke-dashoffset .2s,opacity .15s}.sound-waves{opacity:1;transition:opacity .15s}
.sound[data-muted=true] .sound-slash{opacity:1;stroke-dashoffset:0}.sound[data-muted=true] .sound-waves{opacity:0}
.wordmark{position:absolute;left:50%;top:37%;width:92%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;font-family:ZadoyaDisplay,Georgia,serif;font-weight:400;white-space:nowrap}
.wordmark h1{position:relative;margin:0;font:inherit;font-size:clamp(94px,18cqw,258px);line-height:1;letter-spacing:-.025em;text-shadow:0 3px 28px #2a150b30}
.wordmark h1 span{display:inline-block}
.wordmark-shadow{position:absolute;top:50%;left:50%;transform:translate(-48%,-20%);font-size:clamp(82px,15.4cqw,228px);line-height:1;letter-spacing:.06em;color:#ffe6b5;opacity:.4;filter:blur(.25px)}
.motto{position:absolute;top:61%;left:24px;right:24px;margin:0;text-align:center;font-family:ZadoyaDisplay,Georgia,serif;font-size:clamp(30px,4cqw,54px);font-weight:400;line-height:1.2;text-shadow:0 2px 14px #21120066;pointer-events:none}
.domains{position:absolute;bottom:106px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:20px;font-size:13px;white-space:nowrap}
a{color:inherit;text-decoration:none}.domains a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:border-color .2s}.domains a:hover{border-color:#fff3d877}.domains>span{opacity:.42}
.credits{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;gap:20px;color:#f2e3c6;font-size:11px;line-height:1.3}
.platform{display:inline-flex;align-items:center;min-height:44px}.studio{display:flex;flex-direction:column;align-items:center;gap:3px}.studio>span{white-space:nowrap}.studio a{display:flex;align-items:center;justify-content:center;min-width:110px;min-height:30px}.studio img{display:block;width:105px;height:auto}
.credits a,.credits a:hover,.credits a:focus{text-decoration:none}.credits a:hover{color:#fff9ee}
a:focus-visible,button:focus-visible{outline:2px solid #fff3d8;outline-offset:4px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
@media(max-width:600px){.zadoya{min-height:520px}.sound{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}.wordmark{top:36%;width:96%}.wordmark h1{font-size:21cqw;letter-spacing:-.025em}.wordmark-shadow{font-size:17cqw;letter-spacing:.04em;transform:translate(-47%,-8%);opacity:.4}.motto{top:57%;font-size:36px}.domains{bottom:111px;gap:10px;font-size:12px;left:12px;right:12px}.credits{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));font-size:10px;gap:10px;bottom:max(16px,env(safe-area-inset-bottom))}.studio img{width:92px}.studio a{min-width:104px;min-height:32px}}
@media(max-height:540px) and (min-width:601px){.zadoya{min-height:360px}.wordmark{top:34%}.wordmark h1{font-size:22svh}.wordmark-shadow{font-size:19svh}.motto{top:56%;font-size:34px}.domains{bottom:66px}.credits{bottom:8px}.sound{top:12px;right:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

.woven{background:#ece2cf url('assets/woven.jpg') center 42%/contain no-repeat;color:#582820;color-scheme:light}.woven .wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.woven .motto{top:72%;text-shadow:none}.woven .sound{color:#582820;background:#5828200c}.woven .sound:hover{background:#5828201a}.woven .credits{color:#582820}.woven .credits a:hover{color:#852719}.woven .domains a:hover{border-color:#852719}.woven a:focus-visible,.woven button:focus-visible{outline-color:#852719}
@media(max-width:600px){.woven .motto{top:65%}}
@media(max-height:540px) and (min-width:601px){.woven .motto{top:62%;font-size:24px}}

/* Separate the two names without overlapping letterforms. */
.field .wordmark{top:32%}
.field .wordmark-shadow{top:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:clamp(40px,8.2cqw,110px);line-height:1;letter-spacing:.16em;opacity:.4}
.field .motto{max-width:90%;margin-inline:auto;text-wrap:balance}
@media(max-width:600px){.field .wordmark{top:32%}.field .wordmark-shadow{font-size:10cqw;top:calc(100% + 12px);letter-spacing:.13em}.field .motto{font-size:clamp(28px,8.4cqw,36px)}}
@media(max-height:540px) and (min-width:601px){.field .wordmark{top:27%}.field .wordmark-shadow{font-size:10svh;top:calc(100% + 4px)}}

.field{touch-action:pinch-zoom}.field a,.field button{touch-action:manipulation}

.field.english .wordmark h1{font-size:clamp(84px,16cqw,232px)}
@media(max-width:600px){.field.english .wordmark h1{font-size:18cqw}}
@media(max-height:540px) and (min-width:601px){.field.english .wordmark h1{font-size:20svh}}

.sound-control{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));width:46px;height:46px;touch-action:manipulation}
.sound-control .sound{position:relative;top:auto;right:auto}
.volume-panel{position:absolute;right:46px;top:0;display:flex;align-items:center;gap:10px;width:182px;height:46px;padding:0 14px;color:#fff3d8;background:#21180ed9;border-radius:23px 0 0 23px;opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .18s,transform .18s,visibility .18s}
.sound-control:focus-within .volume-panel{opacity:1;visibility:visible;transform:none}
@media(hover:hover){.sound-control:hover .volume-panel{opacity:1;visibility:visible;transform:none}}
.volume-range{--volume:30%;width:112px;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none;flex-shrink:0}
.volume-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff3d8 var(--volume),#fff3d844 var(--volume))}
.volume-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border:0;border-radius:50%;background:#fff3d8;margin-top:-5.5px;box-shadow:0 1px 5px #0004}
.volume-range::-moz-range-track{height:3px;background:#fff3d844;border-radius:2px}.volume-range::-moz-range-progress{height:3px;background:#fff3d8}.volume-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff3d8}
.volume-range:focus-visible{outline:2px solid #fff3d8;outline-offset:1px;border-radius:5px}
.volume-value{min-width:30px;font:11px Arial,sans-serif;font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:600px){.sound-control{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}}
@media(max-height:540px) and (min-width:601px){.sound-control{top:12px;right:18px}}

.studio{gap:0;text-align:center}.studio>span{font-size:10px;line-height:1.2;font-weight:600}.studio a{display:block;min-width:0;min-height:24px;line-height:0}.studio img{margin:0}

/* Keep the name below the harvester route. */
.field .wordmark{top:44%}
@media(max-width:600px){.field .wordmark{top:43%}}
@media(max-height:540px) and (min-width:601px){.field .wordmark{top:42%}}

.studio>span{font:inherit;color:inherit}

.field .wordmark .knit-name{width:min(76cqw,88svh,940px);aspect-ratio:1816/668;margin:0 auto;font-size:0;line-height:0;text-shadow:none}
.field.english .wordmark .knit-name{width:min(82cqw,105svh,1080px);aspect-ratio:1855/523;font-size:0}
.knit-letter{position:absolute;top:0;height:100%;overflow:hidden;display:block;transform-origin:50% 85%}
.knit-letter img{position:absolute;max-width:none;height:auto;display:block;pointer-events:none}
@media(max-width:600px){.field .wordmark .knit-name,.field.english .wordmark .knit-name{width:92cqw}}
@media(max-height:540px) and (min-width:601px){.field .wordmark .knit-name{width:72svh}.field.english .wordmark .knit-name{width:92svh}}

/* Match the textile lettering to the softer, warm field photography. */
.field .knit-name{filter:sepia(.24) saturate(.68) contrast(.84) brightness(1.12) blur(.85px);opacity:.93}
@media(max-width:600px){.field .knit-name{filter:sepia(.24) saturate(.68) contrast(.84) brightness(1.12) blur(.5px)}}

.field.english .wordmark .knit-name{width:min(90cqw,125svh,1180px);aspect-ratio:1975/377}
@media(max-width:600px){.field.english .wordmark .knit-name{width:94cqw}}
@media(max-height:540px) and (min-width:601px){.field.english .wordmark .knit-name{width:114svh}}

/* A quieter signature with more of the field left visible. */
.field .wordmark{top:49%}
.field .wordmark .knit-name{width:min(58cqw,60svh,680px);opacity:.8}
.field.english .wordmark .knit-name{width:min(66cqw,88svh,820px)}
.field .motto{top:65%}
@media(max-width:600px){
 .field .wordmark{top:48%}
 .field .wordmark .knit-name{width:76cqw}
 .field.english .wordmark .knit-name{width:80cqw}
 .field .motto{top:61%;font-size:clamp(24px,7.5cqw,32px)}
}
@media(max-width:600px) and (max-height:600px){.field .motto{top:58%;font-size:24px}}
@media(max-height:540px) and (min-width:601px){
 .field .wordmark{top:46%}
 .field .wordmark .knit-name{width:54svh}
 .field.english .wordmark .knit-name{width:82svh}
 .field .motto{top:60%;font-size:24px}
}

.field.russian .wordmark .knit-name{aspect-ratio:1920/650}
.field .wordmark .knit-name{opacity:.97;filter:saturate(.92) blur(.2px)}
@media(max-width:600px){.field .wordmark .knit-name{filter:saturate(.92) blur(.1px)}}