@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* Printed photographs, hand-drawn marks and wooden display shelves. */
:root{--hand:'Caveat','Segoe Print',cursive;--wood:#b47f48}
.hero{isolation:isolate;overflow:hidden;grid-template-columns:1fr 1.03fr;min-height:770px}
.hero-copy{position:relative;z-index:2;padding-top:46px}
.hero h1{font-size:clamp(70px,7.1vw,108px)}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em:after{content:'';position:absolute;bottom:-8px;left:0;right:-8px;height:9px;border-top:2px solid var(--lime);border-radius:50%;transform:rotate(-3deg);opacity:.8}
.hero-description{margin-top:34px}
.hero-visual{overflow:visible;align-self:stretch;min-height:700px;background:radial-gradient(ellipse at 60% 40%,#797a3a60,transparent 65%)}
.hero-visual:after{display:none}
.wood-rings{position:absolute;inset:0 -120px 0 -20px;background:url('assets/tree-rings.svg') center/740px 740px no-repeat;opacity:.17;pointer-events:none}
.hero-print{position:absolute;z-index:2;left:6%;top:110px;width:73%;height:455px;margin:0;padding:12px 12px 54px;background:#f1eedf;box-shadow:8px 16px 20px #22250f55;transform:rotate(-7deg)}
.hero-print:before{content:'';position:absolute;top:-16px;left:38%;width:98px;height:32px;background:#d0d785a8;transform:rotate(3deg);z-index:3;clip-path:polygon(2% 4%,98% 0,96% 15%,100% 28%,97% 50%,100% 69%,98% 100%,0 96%,3% 78%,0 62%,3% 44%,0 24%)}
.hero-photo{position:static;width:100%;height:100%;object-position:48% center}
.hero-print figcaption,.little-print figcaption{font:26px/1.2 var(--hand);text-align:center;color:var(--olive);padding-top:9px}
.hero-print figcaption{text-align:left;padding-left:10px}
.little-print{position:absolute;z-index:3;width:36%;height:240px;right:8%;top:328px;margin:0;padding:9px 9px 43px;background:#f7f4e9;box-shadow:3px 12px 20px #22250f66;transform:rotate(7deg)}
.little-print img{width:100%;height:100%;object-fit:cover;object-position:54% center}
.little-print figcaption{font-size:25px;padding-top:7px;white-space:nowrap}
.wood-shelf{position:relative;height:29px;background:#b7844f url('assets/wood-grain.svg') center/800px 48px;box-shadow:0 17px 17px -7px #251c1355;isolation:isolate;border-bottom:5px solid #76502e;border-radius:1px}
.wood-shelf:before{content:'';position:absolute;inset:-12px 0 auto;height:12px;background:#c69b66 url('assets/wood-grain.svg') center/800px 40px;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);filter:brightness(1.15)}
.wood-shelf:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#47230c30,transparent 30%,#f0cf9130 70%,#47230c20);pointer-events:none}
.wood-shelf i{position:absolute;top:24px;width:12px;height:40px;background:var(--brown-hover);box-shadow:4px 2px 7px #24250e30;z-index:-1}
.wood-shelf i:first-child{left:13%}.wood-shelf i:last-child{right:13%}
.hero-shelf{position:absolute;z-index:4;top:590px;left:1%;right:0;transform:rotate(-1deg)}
.photo-note{z-index:5;right:7%;top:64px;transform:rotate(13deg);width:123px;height:123px;border-radius:50%;outline:1px dashed var(--olive);outline-offset:-8px;box-shadow:3px 4px 0 #35361335}
.hand-note{position:absolute;top:656px;left:15%;font:31px/1 var(--hand);transform:rotate(-4deg);color:var(--lime)}
.hand-note svg{position:absolute;width:130px;height:65px;left:100%;top:-15px;stroke:currentColor;stroke-width:2;fill:none}
.experience{position:relative;padding-bottom:74px}
.experience h2 em{position:relative}
.experience h2 em:after{content:'';position:absolute;bottom:0;left:0;right:0;border-bottom:8px solid #d0d72170;transform:rotate(-2deg);z-index:-1}
.gallery-display{position:relative;padding-top:62px;margin-top:10px}
.shelf-note{position:absolute;right:18px;top:-12px;font:28px/1.1 var(--hand);transform:rotate(-3deg);margin:0}
.shelf-note span{display:inline-block;font-size:42px;transform:translateY(12px)}
.gallery-shelf-wrap{position:relative;width:100%}
.process-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:20px;padding:24px 8px 16px;margin:0;scroll-padding:0 8px;align-items:end;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.process-gallery::-webkit-scrollbar{display:none}
.process-image{flex:0 0 calc((100% - 76px) / 4);width:calc((100% - 76px) / 4);box-sizing:border-box;height:345px;padding:8px 8px 50px;background:#f0eddf;color:var(--olive);overflow:visible;box-shadow:2px 5px 14px #443a1e25;transform-origin:50% 100%;transition:transform .3s,box-shadow .3s;scroll-snap-align:start;cursor:pointer}
.process-image:nth-child(1){transform:rotate(-3deg);height:340px}
.process-image:nth-child(2){transform:rotate(2.5deg);height:365px}
.process-image:nth-child(3){transform:rotate(-2deg);height:345px}
.process-image:nth-child(4){transform:rotate(2.5deg);height:360px}
.process-image:nth-child(5){transform:rotate(-2.5deg);height:350px}
.process-image:nth-child(6){transform:rotate(3deg);height:368px}
.process-image:nth-child(7){transform:rotate(-2.5deg);height:352px}
.process-image:hover{transform:rotate(0) translateY(-8px);box-shadow:2px 14px 24px #443a1e35;z-index:4}
.process-image img{object-fit:cover;transition:filter .3s}
.process-image:nth-child(1) img{object-position:20% center}
.process-image:nth-child(2) img{object-position:center 38%}
.process-image:nth-child(3) img{object-position:center 45%}
.process-image:nth-child(4) img{object-position:center 45%}
.process-image:nth-child(5) img{object-position:center 40%}
.process-image:nth-child(6) img{object-position:center center}
.process-image:nth-child(7) img{object-position:center 32%}
.process-image:hover img{transform:none;filter:contrast(1.06)}
.process-image:after{display:none}
.image-number{top:20px;left:20px;background:var(--paper);width:29px;height:29px;text-align:center;line-height:29px;border-radius:50%;color:var(--olive);font-size:9px}
.expand-icon{right:19px;top:19px;color:var(--paper);text-shadow:0 1px 4px #000}
.image-label{left:5px;right:5px;bottom:12px;font:22px/1.1 var(--hand);text-align:center}
.gallery-shelf{margin:0 -10px;height:29px;z-index:3}
.gallery-arrow{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:12;width:50px;height:50px;border-radius:50%;background:var(--brown);color:var(--paper);border:2px solid #b7844f;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(36,25,14,.32);transition:transform .2s ease,background .2s ease,opacity .25s ease,box-shadow .2s ease}
.gallery-prev{left:-25px}
.gallery-next{right:-25px}
.gallery-arrow:hover:not(:disabled){background:#5d2b09;transform:translateY(-50%) scale(1.08);box-shadow:0 10px 24px rgba(36,25,14,.42);border-color:#d89e5b}
.gallery-arrow:disabled{opacity:.15;pointer-events:none;cursor:default;transform:translateY(-50%) scale(.92);box-shadow:none}
.gallery-arrow:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.gallery-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;flex-wrap:wrap}
.gallery-note{font:25px/1.2 var(--hand);color:var(--olive);transform:rotate(-1.5deg);display:inline-flex;align-items:center;gap:6px}
.gallery-controls-bottom{display:inline-flex;align-items:center;gap:12px;background:#e9e6d8;padding:6px 14px;border-radius:30px;border:1px solid #d5ceb8;box-shadow:0 2px 8px rgba(68,58,30,.08)}
.gallery-arrow-sm{width:32px;height:32px;border-radius:50%;background:var(--brown);color:var(--paper);border:1px solid #b7844f;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s,opacity .2s}
.gallery-arrow-sm:hover:not(:disabled){background:#5d2b09;transform:scale(1.08)}
.gallery-arrow-sm:disabled{opacity:.25;pointer-events:none;cursor:default;transform:scale(.92)}
.gallery-arrow-sm:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.gallery-count{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--olive);min-width:86px;text-align:center;user-select:none}
@media(max-width:1080px){.process-image{flex:0 0 calc((100% - 56px) / 3);width:calc((100% - 56px) / 3)}.gallery-prev{left:-16px}.gallery-next{right:-16px}}
@media(max-width:768px){.gallery-arrow{display:none}.process-image{flex:0 0 calc((100% - 36px) / 2);width:calc((100% - 36px) / 2)}.gallery-bottom{justify-content:center}}
.course{position:relative;background-image:linear-gradient(#d0d721f5,#d0d721f5),url('assets/tree-rings.svg');background-size:auto,750px;background-position:center;overflow:hidden}
.teacher-visual{padding:13px 13px 0;background:#b7844f url('assets/wood-grain.svg') center/800px 45px;box-shadow:7px 10px 0 #57582716;transform:rotate(-2deg);height:620px;overflow:visible}
.teacher-visual>img{height:calc(100% - 13px)}
.teacher-visual:after{left:13px;right:13px;bottom:13px}
.teacher-signature{font-family:var(--hand);font-size:49px;left:35px;bottom:33px}
.teacher-signature span{font-size:8px}
.teacher-copy blockquote{font-family:var(--hand);font-size:36px;transform:rotate(-2deg);border-left:0;padding-left:0}
.closing:before,.closing:after{content:'';position:absolute;background:url('assets/tree-rings.svg') center/contain no-repeat;width:590px;height:590px;opacity:.13;pointer-events:none;top:-80px}
.closing:before{left:-330px}.closing:after{right:-330px;transform:rotate(45deg)}
.closing-inner{position:relative;z-index:1}
@media(min-width:1600px){.hero{min-height:840px}.hero-print{top:120px;height:510px;width:69%}.little-print{top:375px;width:37%;height:285px;right:10%}.hero-shelf{top:675px;right:5%}.hand-note{top:735px}.photo-note{right:15%;top:85px}}
@media(max-width:800px){.hero{grid-template-columns:1fr 44%;min-height:670px}.hero h1{font-size:68px}.hero-visual{min-height:670px}.hero-print{height:360px;top:136px;width:90%;left:0;padding:9px 9px 45px}.hero-print figcaption{font-size:24px}.little-print{width:66%;height:205px;top:308px;right:4%;padding:7px 7px 38px}.little-print figcaption{font-size:22px}.hero-shelf{top:535px;left:-7px}.photo-note{top:65px;width:96px;height:96px;right:8%;font-size:8px}.hand-note{top:600px;font-size:24px;left:4%}.hand-note svg{width:75px}.teacher-visual{height:575px}.teacher-signature{font-size:38px;left:25px}.teacher-copy blockquote{font-size:32px}}
@media(max-width:540px){.hero{grid-template-columns:1fr}.hero-copy{padding:38px 24px 18px}.hero h1{font-size:clamp(65px,18.8vw,87px)}.hero-description{margin-top:32px}.hero-visual{height:550px;min-height:550px;max-width:100%;margin-top:0}.wood-rings{inset:-100px -60px -60px;background-size:610px}.hero-print{top:55px;left:9%;width:66%;height:355px;padding:9px 9px 46px}.hero-print figcaption{font-size:26px}.little-print{top:210px;right:7%;width:42%;height:196px;padding:7px 7px 36px}.little-print figcaption{font-size:21px}.hero-shelf{top:425px;left:4%;right:4%;height:24px}.wood-shelf i{top:19px;height:28px}.photo-note{top:22px;right:7%;width:91px;height:91px;font-size:7px}.note-arrow{font-size:24px}.hand-note{top:482px;left:17%;font-size:26px}.hand-note svg{top:-9px;left:112%;width:95px}.experience h2{font-size:57px}.gallery-display{padding-top:54px;margin-top:27px}.shelf-note{font-size:25px;max-width:240px;top:-5px;right:4px;text-align:right}.shelf-note span{font-size:32px;transform:translateY(5px)}.process-gallery{gap:16px;padding:20px 14px 18px;margin:0 -24px;scroll-padding:0 14px;align-items:end;scrollbar-width:none}.process-gallery::-webkit-scrollbar{display:none}.process-image{flex:0 0 82%;width:82%;height:337px;padding:9px 9px 53px}.process-image:nth-child(2){height:357px}.process-image:nth-child(4){height:350px}.process-image:nth-child(5){height:345px}.process-image:nth-child(6){height:352px}.process-image:nth-child(7){height:346px}.image-label{font-size:30px;bottom:16px}.gallery-shelf{margin:-14px -9px 0;height:25px}.gallery-bottom{flex-direction:column;gap:12px;align-items:center;text-align:center}.gallery-note{font-size:22px}.teacher-visual{height:460px;margin:8px 5px;padding:10px 10px 0}.teacher-visual>img{height:calc(100% - 10px)}.teacher-visual:after{left:10px;right:10px;bottom:10px}.teacher-signature{font-size:43px}.teacher-copy blockquote{font-size:36px}.closing:before{left:-410px}.closing:after{right:-410px}}
@media(prefers-reduced-motion:reduce){.process-image{transition:none}.process-image:hover{transform:none}}