@import url('./handwriting.css');

/* 09 — Aino: the person and their welcome come first. */
.aino{--ink:#2d4858;--paper:#f9faf7;--line:#cbd7dc;background:var(--paper);color:#293f4c}
.aino h1,.aino h2,.aino h3{font-family:var(--serif)}
.aino .brand-name{font-style:italic;font-size:2.6rem}.aino .site-head{border-bottom:1px solid var(--line)}
.aino-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;padding-block:48px 65px}
.aino-hero h1{font-size:clamp(3.8rem,6.5vw,6.5rem);line-height:1.04}.aino-hero h1 em{color:#5a7d90}.aino-hero .lead{margin-block:26px}
.aino-portrait{margin:0;position:relative}.aino-portrait img{height:600px;object-position:50% 36%;border-radius:4px 120px 4px 4px}
.aino-portrait figcaption{font-size:.75rem;line-height:1.5;margin-top:12px;color:#556e7a}
.aino-hello{font-family:'Caveat',cursive;font-size:2rem;margin:20px 0 0}
.aino .blue-section{background:#dfebef}.aino .story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.aino .story-grid h2{max-width:420px}
.aino .story-copy{max-width:670px}.aino .story-copy .intro{font:2rem/1.35 var(--serif)}
.aino .qualities{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding-top:28px;margin-top:30px;border-top:1px solid #adc3cb}
.aino .qualities strong{font-weight:500;display:block;margin-bottom:10px}.aino .qualities p{font-size:.9rem;margin:0}
.aino .service{background:#fff;border:1px solid var(--line);padding:30px}.aino .service h3{font-size:2rem}.aino .service .num{margin-bottom:30px}
.aino .personal-note{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.aino .personal-note img{height:420px;border-radius:4px}.aino .personal-note blockquote{font:2.8rem/1.2 var(--serif);margin:25px 0}.aino .personal-note cite{font:1rem 'DM Sans',sans-serif}
.aino .contact{background:#2d4858;color:#f8faf7}.aino .contact .button{background:#dcebef;color:#203d4c}.aino .contact-info{border-color:#96acb5}

/* 10 — Pilke: an illustrated, cheerful conversation. */
.pilke{--ink:#44326b;--paper:#fffcf2;--line:#d8cee0;background:var(--paper);color:#39294f}
.pilke h1,.pilke h2,.pilke h3{font-family:'DM Sans',Arial,sans-serif;font-weight:600;letter-spacing:-.055em;line-height:1.12}
.pilke .brand-name{font:700 2.2rem 'DM Sans',sans-serif;letter-spacing:-.08em}.pilke .brand-mark{font-size:2.3rem;color:#b44532}.pilke .button{border-radius:50px;background:#44326b;color:white}
.pilke-hero{background:#ede6f5;border-radius:28px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pilke-hero h1{font-size:clamp(3.4rem,5.9vw,5.8rem);letter-spacing:-.07em;line-height:1.03}.pilke-hero h1 em{font-family:var(--serif);font-weight:400;color:#84425b;letter-spacing:-.025em}.pilke-hero .lead{font-size:1.05rem;margin-block:26px}
.pilke-hero img{height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:24px}.pilke .button:hover{filter:brightness(1.2)}
.pilke-topics{display:flex;justify-content:center;gap:20px;padding:28px 0;flex-wrap:wrap}.pilke-topics span{background:#f9dfa4;border:1px solid #c49e54;border-radius:40px;padding:12px 20px;font-size:.85rem;transform:rotate(-2deg)}.pilke-topics span:nth-child(2){background:#f3cbbb;border-color:#cd9a88;transform:rotate(2deg)}.pilke-topics span:nth-child(3){background:#dfdfef;border-color:#a8a4ca;transform:rotate(-1deg)}
.pilke .service{background:#f8e3af;border:0;border-radius:28px;padding:32px;--line:#c8a666}.pilke .service:nth-child(2){background:#f4d3c6;--line:#d0a38f}.pilke .service:nth-child(3){background:#e4dcf0;--line:#b4a3c8}.pilke .service h3{font-size:1.5rem;overflow-wrap:anywhere}.pilke .service .num{margin-bottom:40px;font-size:1.5rem}
.pilke .about-play{background:#44326b;color:#fff7e9;border-radius:28px;padding:60px;display:grid;grid-template-columns:.7fr 1.3fr;gap:75px;align-items:center}.pilke .about-play .large-hello{font:italic 6.7rem/1 var(--serif);color:#f7d994}.pilke .about-play h2{font-size:3rem;margin-bottom:25px}.pilke .about-play p:last-child{margin:0}
.pilke .step{border:0;border-left:3px solid #c9b4d7;padding:0 0 0 25px}.pilke .step span{background:#f4d3c6;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;margin-bottom:20px}.pilke .step h3{font-size:1.4rem}
.pilke .contact{background:#f9dfa4;text-align:center;border-radius:28px;margin-bottom:35px;padding:60px}.pilke .contact h2{font-size:clamp(3rem,5vw,4.7rem)}.pilke .contact .lead{margin-inline:auto;max-width:500px}.pilke .contact-lines{display:flex;justify-content:center;gap:45px;border-top:1px solid #bb965b;padding-top:28px;margin-top:30px}.pilke .contact-lines p{font-size:.9rem;margin:0}

/* 11 — Selko: immediate, practical information and clear next steps. */
.selko{--ink:#07575c;--paper:#fff;--line:#ccdcdd;background:#fff;color:#203b40}.selko h1,.selko h2,.selko h3{font-family:'DM Sans',Arial,sans-serif;letter-spacing:-.035em;line-height:1.2;font-weight:600}
.selko .brand-name{font:700 1.8rem 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}.selko .brand-mark{background:#07575c;color:white;width:38px;height:38px;font-size:1.6rem;display:grid;place-items:center;border-radius:7px}
.selko .site-head{min-height:90px;border-bottom:1px solid var(--line)}.selko .button{border-radius:5px}.selko h2{font-size:clamp(2rem,3.2vw,3rem)}
.selko-intro{background:#edf5f4;border-bottom:1px solid var(--line);padding:50px 0}.selko-intro .wrap{display:grid;grid-template-columns:1.45fr .75fr;gap:75px;align-items:start}.selko-intro h1{font-size:clamp(2.6rem,4.3vw,4.1rem);letter-spacing:-.05em;max-width:720px}.selko-intro .lead{max-width:650px;margin-top:22px;font-size:1.05rem}.selko-intro .eyebrow{margin-bottom:16px}
.selko .quick-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0 0;padding-top:25px;border-top:1px solid #b7cfce}.selko .quick-facts dt{font-size:.8rem;margin-bottom:8px}.selko .quick-facts dd{margin:0;font-size:1rem;font-weight:600}
.selko .booking-box{padding:28px;background:#fff;border:1px solid #b9d1cf;border-top:4px solid #07575c;box-shadow:0 5px 15px #154b4510}.selko .booking-box h2{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:15px}.selko .booking-box p{font-size:.9rem}.selko .booking-box .button{width:100%;padding:14px;gap:12px;font-size:.9rem}.selko .booking-box .note{margin:15px 0 0;font-size:.8rem}
.selko .section{padding:65px 0}.selko .section-intro{margin-bottom:30px}.selko .service{padding:25px;border-top:4px solid #2d7478;background:#fff}.selko .service h3{font-size:1.25rem;letter-spacing:-.03em}.selko .service .num{margin-bottom:22px}.selko .service .price{padding-top:18px}.selko .service .price strong{font-size:1.5rem}
.selko .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.selko .info-grid h2{margin-bottom:22px}.selko .credentials{margin:25px 0 0;border-top:1px solid var(--line)}.selko .credentials div{display:grid;grid-template-columns:130px 1fr;gap:25px;padding:18px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.6}.selko .credentials dt{font-weight:600}.selko .credentials dd{margin:0}.selko .info-panel{background:#edf5f4;padding:30px;border:1px solid var(--line)}.selko .info-panel h3{font-size:1.3rem;margin-bottom:20px}.selko .plain-list{padding-left:20px;line-height:1.75;margin:0}.selko .plain-list li+li{margin-top:13px}.selko .steps{gap:30px}.selko .step h3{font-size:1.2rem}.selko .contact{background:#edf5f4;border-block:1px solid var(--line);padding:60px 0}.selko .contact h2{font-size:2.6rem}.selko .contact-info{border-color:#a8c4c2}

/* 12 — Muistio: personal notes and a paper-like editorial layout. */
.muistio{--ink:#514536;--paper:#faf7ef;--line:#d9d0bd;background:var(--paper);color:#514536}.muistio h1,.muistio h2,.muistio h3{font-family:var(--serif)}
.muistio .hand{font-family:'Caveat',cursive}.muistio .brand-name{font:2.8rem 'Caveat',cursive}.muistio .brand small{font-size:.6rem}.muistio .site-head{border-bottom:1px solid var(--line)}.muistio .button{background:#675b43;color:#fffdf4;border-radius:3px}.muistio .eyebrow{color:#766545}
.muistio-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:center;padding-block:55px 70px}.muistio-hero h1{font-size:clamp(3.6rem,6.5vw,6.3rem);line-height:1.05}.muistio-hero .hand{font-size:2.4rem;color:#8d4939;margin-bottom:18px;transform:rotate(-3deg)}.muistio-hero .lead{margin-block:24px;max-width:460px}.muistio-hero .text-link{margin-top:4px}
.muistio-photo{margin:10px 12px 0 0;background:#fff;padding:15px 15px 20px;box-shadow:2px 7px 20px #56483116;transform:rotate(3deg)}.muistio-photo img{height:350px}.muistio-photo figcaption{font:1.65rem 'Caveat',cursive;text-align:center;padding-top:16px}.muistio-photo:before{content:'';position:absolute;width:100px;height:28px;background:#decfa899;top:-14px;left:calc(50% - 50px);transform:rotate(-5deg)}
.muistio .margin-note{font:1.85rem/1.25 'Caveat',cursive;color:#8d4939;margin-top:26px;max-width:320px;transform:rotate(-2deg)}
.muistio .notebook{background:#fffdf7;border:1px solid #d9d0bd;box-shadow:4px 5px 0 #e8e0ce;padding:55px;display:grid;grid-template-columns:.6fr 1.4fr;gap:60px}.muistio .notebook h2{margin-bottom:25px}.muistio .notebook .margin-column{border-right:1px solid #d7b7a9;padding-right:35px}.muistio .notebook .margin-column .hand{font-size:2.1rem;line-height:1.25}.muistio .notebook .margin-column .small{font-size:.8rem}.muistio .notebook .signature{font:2.5rem 'Caveat',cursive;color:#8d4939;margin-top:25px}
.muistio .note-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.muistio .note-service{padding:32px;background:#efe3c5;border:1px solid #d7c79f;position:relative}.muistio .note-service:nth-child(2){background:#e3e7d6;border-color:#bcc4aa}.muistio .note-service:nth-child(3){background:#f1dfd3;border-color:#d4b8a8}.muistio .note-service h3{font:2rem 'Caveat',cursive;line-height:1.15;margin-bottom:20px}.muistio .note-service .num{font-size:.8rem;display:block;border-bottom:1px solid #aa987f;padding-bottom:18px;margin-bottom:25px}.muistio .note-service p{font-size:.95rem}.muistio .note-service .price{display:flex;gap:15px;align-items:baseline;border-top:1px solid #aa987f;padding-top:18px}.muistio .note-service .price strong{font:2rem var(--serif)}
.muistio .steps .step h3{font:2rem 'Caveat',cursive;color:#8d4939}.muistio .contact{border-block:1px solid #d9d0bd;background:#ede6d5}.muistio .contact .hand{font-size:2rem;color:#8d4939;margin-bottom:15px}.muistio .contact-info{border-color:#ab9c7b}

/* Collection thumbnails, including existing directions. */
.collection .gallery-grid .design-card{grid-column:span 2}
.collection .preview-luoto .preview-title{font-size:2.1rem}
.preview-aino{background:#f5f8f8;color:#2d4858}.preview-aino .preview-head{font-style:italic;border-bottom:1px solid #cbd7dc}.preview-aino .preview-content{padding:25px 20px;width:57%}.preview-aino .preview-title{font-size:2.5rem}.preview-aino img{left:58%;top:54px;width:38%;height:184px;object-position:50% 35%;border-radius:2px 45px 2px 2px}.preview-aino .preview-button{background:#2d4858}
.preview-pilke{background:#fffcf2;color:#44326b}.preview-pilke .preview-head{font:700 1.2rem 'DM Sans',sans-serif}.preview-pilke .preview-content{background:#ede6f5;margin:8px 15px;border-radius:12px;padding:22px 15px;height:194px}.preview-pilke .preview-title{font:600 2.2rem/.98 'DM Sans',sans-serif;letter-spacing:-.065em;max-width:60%}.preview-pilke .preview-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}.preview-pilke img{left:59%;top:85px;width:36%;height:133px;border-radius:45% 45% 20% 20%}.preview-pilke .preview-button{background:#44326b;border-radius:20px}
.preview-selko{background:#fff;color:#203b40}.preview-selko .preview-head{font:700 1.1rem 'DM Sans',sans-serif;border-bottom:1px solid #ccdcdd}.preview-selko .preview-content{background:#edf5f4;padding:22px;height:147px}.preview-selko .preview-title{font:600 1.8rem/1.1 'DM Sans',sans-serif;letter-spacing:-.045em;max-width:65%}.preview-selko .preview-button{background:#07575c;border-radius:2px}.preview-selko .mini-booking{position:absolute;right:15px;top:65px;background:#fff;border-top:3px solid #07575c;width:95px;padding:12px;font-size:.65rem;line-height:1.5}.preview-selko .mini-facts{padding:18px 22px;font-size:.65rem;display:flex;justify-content:space-between;gap:15px}
.preview-muistio{background:#faf7ef;color:#514536}.preview-muistio .preview-head{font:1.8rem 'Caveat',cursive;border-bottom:1px solid #d9d0bd}.preview-muistio .preview-content{padding:20px;width:60%}.preview-muistio .preview-title{font-size:2.3rem}.preview-muistio .preview-hand{font:1.2rem 'Caveat',cursive;color:#8d4939;margin-bottom:8px}.preview-muistio img{left:64%;top:82px;width:29%;height:126px;transform:rotate(5deg);border:8px solid #fff;box-shadow:2px 3px 8px #0002}.preview-muistio .preview-button{background:#675b43}

@media(max-width:1100px){
 .aino-hero{gap:45px}.aino-portrait img{height:530px}.aino .story-grid{gap:50px}.aino .personal-note{gap:45px}
 .pilke-hero{gap:30px;padding:35px}.pilke-hero h1{font-size:4.3rem}.pilke .about-play{padding:45px;gap:45px}
 .selko-intro .wrap{gap:40px}.selko .booking-box{padding:24px}.selko .info-grid{gap:40px}
 .muistio-hero{gap:45px}.muistio-photo img{height:310px}.muistio .notebook{padding:40px;gap:40px}.muistio .note-service{padding:25px}
 .preview-aino .preview-title,.preview-muistio .preview-title{font-size:2rem}.preview-selko .preview-title{font-size:1.4rem}.preview-pilke .preview-title{font-size:1.9rem}.preview-selko .mini-booking{width:80px;font-size:.6rem;padding:9px}
}
@media(max-width:800px){
 .collection .gallery-grid .design-card{grid-column:auto}.aino-hero{gap:30px;padding-top:35px}.aino-hero h1{font-size:4rem}.aino-portrait img{height:470px}.aino .story-grid{grid-template-columns:1fr;gap:30px}.aino .qualities{gap:20px}.aino .personal-note{grid-template-columns:1fr;gap:30px}.aino .personal-note img{height:380px}.aino .personal-note blockquote{font-size:2.5rem}
 .pilke-hero{grid-template-columns:1fr;gap:35px;padding:38px}.pilke-hero img{max-height:380px;max-width:500px;margin:auto;aspect-ratio:1.5;border-radius:20px}.pilke-hero h1{font-size:4.5rem}.pilke .about-play{grid-template-columns:1fr;gap:30px}.pilke .about-play .large-hello{font-size:4rem}.pilke .contact{padding:45px}.pilke .contact-lines{gap:30px}
 .selko-intro .wrap{grid-template-columns:1fr;gap:30px}.selko .booking-box{max-width:600px}.selko .info-grid{grid-template-columns:1fr;gap:35px}.selko .quick-facts{max-width:650px}
 .muistio-hero{gap:40px}.muistio-hero h1{font-size:4rem}.muistio-photo img{height:290px}.muistio .notebook{grid-template-columns:1fr;gap:25px}.muistio .notebook .margin-column{border-right:0;border-bottom:1px solid #d7b7a9;padding:0 0 20px}.muistio .notebook .margin-column .hand{margin:0 0 12px}.muistio .note-services{grid-template-columns:1fr;gap:20px}.muistio .note-service{padding:30px}
 .preview-aino .preview-title{font-size:2.2rem}.preview-selko .preview-title{font-size:1.6rem}.preview-muistio .preview-title{font-size:2.2rem}
}
@media(max-width:540px){
 .aino-hero{grid-template-columns:1fr;gap:30px;padding-top:30px;padding-bottom:40px}.aino-hero h1{font-size:clamp(3.7rem,16vw,4.5rem)}.aino-portrait img{height:440px;border-top-right-radius:90px}.aino-hello{font-size:1.8rem}.aino .qualities{grid-template-columns:1fr;gap:20px}.aino .story-copy .intro{font-size:1.8rem}.aino .personal-note img{height:300px}.aino .personal-note blockquote{font-size:2.3rem}.aino .service{padding:26px}
 .pilke-hero{padding:28px 23px;border-radius:20px;gap:28px}.pilke-hero h1{font-size:clamp(2.9rem,13vw,3.9rem)}.pilke-hero .eyebrow{font-size:.65rem;letter-spacing:.07em}.pilke-hero .lead{font-size:.95rem}.pilke-hero .button{padding:14px 18px;gap:16px;font-size:.9rem}.pilke-topics{gap:12px;padding:24px 0}.pilke-topics span{font-size:.8rem;padding:10px 16px}.pilke .about-play{padding:30px 25px;border-radius:20px}.pilke .about-play h2{font-size:2.35rem}.pilke .service{padding:28px;border-radius:20px}.pilke .contact{padding:35px 22px;border-radius:20px}.pilke .contact h2{font-size:2.8rem}.pilke .contact .button{font-size:.85rem;gap:12px;padding:14px 16px}.pilke .contact-lines{flex-direction:column;gap:20px}
 .selko-intro{padding:32px 0}.selko-intro h1{font-size:clamp(2.2rem,10vw,3rem)}.selko-intro .eyebrow{font-size:.65rem;letter-spacing:.07em}.selko .quick-facts{gap:16px;grid-template-columns:1fr}.selko .quick-facts>div{display:flex;justify-content:space-between;gap:20px}.selko .quick-facts dt,.selko .quick-facts dd{font-size:.85rem;margin:0}.selko .booking-box{padding:24px}.selko .section{padding:50px 0}.selko .info-panel{padding:25px}.selko .credentials div{grid-template-columns:1fr;gap:8px}.selko .contact h2{font-size:2.3rem}
 .muistio-hero{grid-template-columns:1fr;gap:35px;padding-top:30px;padding-bottom:45px}.muistio-hero h1{font-size:clamp(3.5rem,15vw,4.4rem)}.muistio-hero .hand{font-size:2rem}.muistio-photo{margin:0 13px}.muistio-photo img{height:285px}.muistio .notebook{padding:28px 24px}.muistio .notebook h2{font-size:2.4rem}.muistio .margin-note{font-size:1.7rem}.muistio .contact .hand{font-size:1.8rem}
 .preview-aino .preview-title{font-size:2.5rem}.preview-pilke .preview-title{font-size:2.1rem}.preview-muistio .preview-title{font-size:2.3rem}.preview-selko .preview-title{font-size:1.7rem}.preview-selko .mini-booking{width:86px}
}
@media(max-width:360px){.preview-aino .preview-title,.preview-muistio .preview-title{font-size:2rem}.preview-pilke .preview-title{font-size:1.7rem}.preview-selko .preview-title{font-size:1.3rem}.pilke .contact h2{font-size:2.45rem}.pilke .contact .button{width:100%;font-size:.8rem}.aino-portrait img{height:390px}.selko-intro .wrap{grid-template-columns:minmax(0,1fr)}.selko-intro .wrap>div{min-width:0}.selko-intro h1{font-size:1.95rem}}