/* いとをかし：和紙、墨、朱のしつらえ */
:root{--paper:#f7f2e8;--bg:#dad3c3;--ink:#303b39;--muted:#797d6b;--green:#344b4a;--line:#ded6c6;--blush:#ad6151}
body{background:#dcd5c5;color:#303b39}
.shell{max-width:1380px;margin:22px auto 96px;background:#f8f4eb;border-radius:3px;box-shadow:0 18px 70px #39352a1b;overflow:hidden}
.header{height:108px;background:#263d3e;border-bottom:3px solid #b16e55}
.brand{color:#f6efe3;font-size:29px;letter-spacing:.2em;gap:6px}
.brand:before{content:'一　首';display:grid;place-items:center;position:absolute;left:6%;top:33px;width:43px;height:43px;border:1px solid #bd806b;color:#dec5ad;font:10px var(--serif);letter-spacing:.1em}
.brand small{color:#d5c4ae;font-size:9px;letter-spacing:.24em}
.header-link{border-color:#78908b;color:#efe7d7;border-radius:2px;padding:9px 19px}
.hero{position:relative;min-height:670px;gap:40px;padding:76px 11% 92px;background:linear-gradient(90deg,rgba(250,246,236,.98) 0%,rgba(250,246,236,.91) 36%,rgba(250,246,236,.2) 75%),url('wafu-landscape.png') center/cover no-repeat}
.hero-copy{position:relative;z-index:1;padding-left:28px;border-left:1px solid #aa6c59}
.eyebrow{color:#a45545;letter-spacing:.19em;font-size:10px}
.hero h1{color:#273d3d;font-size:clamp(25px,2.8vw,38px);line-height:2.05;letter-spacing:.13em}
.hero h1 span{font-size:.76em}
.lead{color:#5a675f;font-size:14px;line-height:2.35}
.primary{background:#a34f40;border-radius:3px;color:#fff9ef}
.primary:hover{background:#833d32}
.hero-button{width:240px;box-shadow:5px 5px 0 #d9c6ae}
.hero-note{color:#7a8273}
.hero-art{min-height:455px}
.hero-art:before{width:350px;height:350px;max-width:85%;max-height:85%;border:1px solid #a48f76;background:transparent;filter:none;opacity:.45}
.poem-paper{width:260px;height:390px;transform:rotate(2deg);padding:25px 28px;background:#fffaf0;border:1px solid #d8cdb9;box-shadow:8px 12px 0 #9f89752b,0 25px 50px #463a2926}
.paper-label{color:#9a7865;letter-spacing:.1em}
.paper-lines{writing-mode:vertical-rl;display:block;height:220px;width:auto;align-self:center;color:#35453f;font-size:16px;letter-spacing:.13em;line-height:2.05;white-space:nowrap}
.paper-lines span{display:block}
.paper-foot{color:#9d8c79}
.paper-foot i{color:#ad5745}
.art-caption{color:#6f7869;font-style:normal;letter-spacing:.1em;font-size:11px}
.art-stamp{background:#a34f40;border:0;color:#fff5e5;width:68px;height:68px;font-size:10px}
.how{background:#e9e2d4;padding-top:80px;border-top:1px solid #d1c5b0}
.how h2,.section-heading h2{color:#2d4240}
.how-top>p,.steps article p,.how-note{color:#6c796c}
.steps article{border-top:1px solid #b9b2a0}
.steps article>span{color:#aa6653}
.view{color:#303b39}
.compose-card,.result-card,.about-card{background:#fffaf0;border-color:#e7dfd0;border-radius:3px;box-shadow:5px 7px 0 #ddd3c1}
.compose-title,.about-card h3{color:#405553}
.small-en,.result-kicker{color:#988e79}
.lines input{border-bottom-color:#d8d3c3;color:#303b39}
.lines label span{color:#a35e4d}
.form-note,.section-heading>p:last-child{color:#788474}
.check{color:#536858}
.check input{accent-color:#a34f40}
.secondary{background:#ece8dd;border-color:#d9cfbd;color:#455d54;border-radius:3px}
.text-button,.about-links button{color:#687a6b}
.album-tabs{border-color:#d9d1c1}
.album-tabs button{color:#8a9182}
.album-tabs button[aria-selected=true]{border-color:#a34f40;color:#9d5042}
.album-card{background:#fffaf0;border-color:#e7dfd0;border-radius:3px;box-shadow:3px 4px 0 #e3dacc}
.footer{background:#344b4a;color:#e0d5c1;border-top:3px solid #a96550}
.nav{background:#f5f0e6f2;border-color:#d9d1c1;border-radius:0;box-shadow:0 -5px 24px #53483814}
.nav button{color:#61786b}
.nav button span{color:#a35646}
dialog{border:1px solid #d7cbb8;background:#fbf7ef;border-radius:4px;color:#34483f}
dialog::backdrop{background:#283a39a8}
dialog input{border-color:#d7cebd;border-radius:3px;background:#fffdf8}
dialog .primary,.full{border-radius:3px}
#toast{background:#354d49}
@media(max-width:700px){.shell{margin:10px 10px 90px;border-radius:2px}.header{height:90px}.brand{font-size:23px}.brand:before{left:17px;top:29px;width:31px;height:31px;font-size:8px}.header-link{right:16px;padding:6px 9px}.hero{padding:55px 25px 68px;gap:35px;background:linear-gradient(180deg,rgba(250,246,236,.93) 0%,rgba(250,246,236,.88) 43%,rgba(250,246,236,.32) 100%),url('wafu-landscape.png') 64% center/cover no-repeat}.hero-copy{text-align:center;padding-left:0;padding-top:18px;border-left:0;border-top:1px solid #ad7762;width:100%}.hero h1{font-size:24px;line-height:1.9}.lead{font-size:13px}.hero-art{min-height:345px}.hero-art:before{width:270px;height:270px}.poem-paper{width:210px;height:310px;padding:20px 22px}.paper-lines{height:170px;font-size:13px;line-height:1.9;letter-spacing:.08em}.art-caption{top:8%;left:1%}.art-stamp{right:2%;bottom:4%;width:56px;height:56px;font-size:8px}.how{padding:60px 28px}.steps{gap:12px}.nav{width:calc(100% - 20px)}}
@media(max-width:340px){.brand:before{display:none}.header-link{font-size:9px}.hero h1{font-size:21px}}
/* 短冊のことばが右から一行ずつ現れる */
.paper-lines .poem-character{display:inline;opacity:1}
.paper-lines.poem-animate .poem-character{opacity:0;animation:ito-poem-reveal .45s ease forwards}
@keyframes ito-poem-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.paper-lines.poem-animate .poem-character{opacity:1;animation:none!important}}