.folio{position:relative;background:#f1efe6;color:#0c2929;padding-block:clamp(68px,9vw,138px);isolation:isolate}
.folio-frame{box-sizing:border-box;max-width:1290px;margin:auto;padding-inline:clamp(22px,5vw,84px)}
.folio-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-block-end:clamp(26px,4vw,56px)}
.folio-heading h2{margin:0;color:#0c2929;font-size:clamp(45px,6vw,86px);font-weight:600;line-height:1.28}
.folio-heading h2 span,.folio-art-word span{color:#926b30}
.folio-heading p{margin:0;color:#53635d;font-size:15px}
.folio-layout{display:grid;grid-template-columns:minmax(210px,.67fr) minmax(0,1.45fr);gap:clamp(30px,6vw,94px);align-items:start}
.folio-index{display:flex;flex-direction:column;border-block-start:1px solid #84958c}
.folio-index a{color:#334c46;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(12px,1.55vw,24px) 2px;border-block-end:1px solid #c7cbc1;text-decoration:none;transition:color .2s}
.folio-index a strong,.folio-index a small{display:block}
.folio-index a strong{font-size:clamp(19px,2.2vw,31px);font-weight:500;line-height:1.4}
.folio-index a small{margin-top:3px;color:#54635b;font-size:13px}
.folio-index i{display:grid;flex-shrink:0;place-items:center;border:1px solid #bbc2b8;width:34px;height:34px;border-radius:50%;font:20px/1 Arial;color:#344f47}
.folio-index a[aria-selected=true]{color:#0c2929}
.folio-index a[aria-selected=true] i{background:#d9b572;color:#0c2929;border-color:#d9b572}
.folio-index a:hover strong{text-decoration:underline;text-decoration-color:#9c7439;text-underline-offset:6px}
.folio-panel{scroll-margin-top:70px}
.folio-panel:not([hidden])+.folio-panel:not([hidden]){margin-top:35px}
.folio-panel[hidden]{display:none!important}
.folio-panel:focus-visible,.folio-index a:focus-visible,.folio-action:focus-visible{outline:3px solid #956c31;outline-offset:4px}
.folio-poster{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.94;background:#d9b572;color:#122f2a;container-type:inline-size}
.folio-printframe{position:absolute;inset:7%;border:1px solid currentColor;opacity:.3}
.folio-printframe::before,.folio-printframe::after{content:"+";position:absolute;left:-5px;font:14px/1 monospace}
.folio-printframe::before{top:-7px}.folio-printframe::after{bottom:-7px;left:auto;right:-5px}
.folio-maeen{background:#d9b572}
.folio-letters{position:absolute;direction:ltr;left:3%;top:10%;font:italic 19cqw/1.15 Georgia,serif;letter-spacing:-.12em;color:#65481e;opacity:.8;transform:rotate(-6deg)}
.folio-sheet{position:absolute;right:19%;top:12%;width:32%;height:82%;box-shadow:2px 6px 12px #50251c36}
.folio-sheet-back{background:#d7b29b;transform:rotate(14deg) translate(11%,3%)}
.folio-sheet-front{padding:3.1%;background:#f6f0d7;transform:rotate(-9deg);box-sizing:border-box}
.folio-sheet-cap{border-bottom:1px solid #8d9381;display:flex;justify-content:space-between;align-items:center;padding-bottom:2%;font-size:clamp(7px,1.55cqw,14px);font-weight:600;color:#33483b}
.folio-sheet-cap span:last-child{font-family:Georgia,serif}
.folio-sheet-front strong{display:block;margin-block:8% 5%;font-size:7.4cqw;font-weight:600;line-height:1.05;color:#173d36}
.folio-sheet-front strong span{color:#87612c}
.folio-sheet-rule{width:51%;height:2px;background:#a78245;margin-top:7%}
.folio-sheet-lines{width:90%;height:15%;margin-top:5%;background:repeating-linear-gradient(to bottom,#809180 0 1px,transparent 1px 34%)}
.folio-paper-sign{position:absolute;left:4%;bottom:2%;border:1.5px solid #a78245;color:#89622c;border-radius:50%;line-height:1.05;font:italic 4.9cqw/1 Georgia,serif;padding:.6cqw}
.folio-poster-mark{position:absolute;left:5%;bottom:3%;font:600 clamp(7px,1.45cqw,13px)/1.2 monospace;letter-spacing:.1em}
.folio-caption{padding-block-start:20px}
.folio-caption h3{font-size:clamp(23px,2.6vw,38px);line-height:1.4;font-weight:600;color:#0c2929;margin:0 0 6px}
.folio-caption p{font-size:clamp(15px,1.25vw,18px);line-height:1.85;max-width:65ch;margin:0;color:#455b53}
.folio-action{display:inline-flex;align-items:center;gap:12px;margin-top:12px;padding-bottom:4px;border-bottom:1px solid #87958b;color:#193b31;font-weight:600;text-decoration:none}
.folio-action:hover{border-color:#8f682c;color:#77551e}
.folio-art-word{position:absolute;right:12%;top:47%;transform:translateY(-50%);font-size:19cqw;line-height:1.35;font-weight:600}
.folio-holoul{background:#c8d4b3}.folio-plus{position:absolute;width:34%;aspect-ratio:1;left:15%;top:15%;background:#caa359;clip-path:polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%);transform:rotate(-12deg)}
.folio-volunteer{background:#173f36 url('moments/IMG_3395.webp') center 44%/cover;color:#fff4da}
.folio-volunteer::before{position:absolute;inset:0;content:"";background:linear-gradient(270deg,#082e29ec,#0a2a2260)}
.folio-volunteer .folio-art-word span{color:#e0bd7c}
.folio-partners{background:#e1cbac}.folio-rings,.folio-rings::after{position:absolute;width:34%;height:65%;left:12%;top:9%;border:1.5cqw solid #31695e;border-radius:50%;transform:rotate(-20deg)}
.folio-rings::after{content:"";width:100%;height:100%;left:35%;top:20%;border-color:#bf994f;transform:rotate(18deg)}
@media(max-width:700px){
.folio-heading{display:block}.folio-heading p{margin-top:4px}
.folio-layout{display:flex;flex-direction:column;gap:20px}.folio-index,.folio-panels{width:100%}
.folio-index a{padding:8px 2px}.folio-index a span{display:flex;align-items:baseline;gap:10px}
.folio-index i{width:27px;height:27px;font-size:15px}
.folio-caption{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){.folio-index a{transition:none}}
