:root{--paper:#f6efe0;--paper2:#efe4cc;--ink:#2d1d1a;--maroon:#5a1f2b;--maroon2:#7a2d3b;--gold:#b8892b;--line:#d8c8a6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.75 Lora,"Noto Serif Devanagari",Georgia,serif;
background-image:linear-gradient(rgba(246,239,224,.9),rgba(246,239,224,.9)),url(assets/roses-tile.svg);background-size:auto,260px 260px;background-attachment:fixed,scroll}
.top{background:var(--maroon);color:#f6efe0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;padding:.8rem 1.4rem;position:sticky;top:0;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.brand{font:700 1.35rem "Playfair Display",serif;color:#fff;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.95rem}
.top nav a{color:#e8d9b8;text-decoration:none;padding:.15rem 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a.on{color:#fff;border-color:var(--gold)}
.hero,.pagehead{text-align:center;padding:3rem 1rem 1.2rem;background:linear-gradient(rgba(90,31,43,.86),rgba(110,35,52,.92)),url(assets/roses-tile.svg);background-size:auto,200px 200px;color:#fff;position:relative;overflow:hidden}
.hero:before,.hero:after,.pagehead:before,.pagehead:after{content:"";position:absolute;width:170px;height:170px;background:url(assets/corner.svg) no-repeat;background-size:contain;opacity:.55;filter:saturate(.9) brightness(1.15)}
.hero:before,.pagehead:before{left:0;bottom:0;transform:scaleY(-1)}
.hero:after,.pagehead:after{right:0;bottom:0;transform:scale(-1,-1)}
.hero:before,.pagehead:before{top:0;bottom:auto;transform:none}
.hero:after,.pagehead:after{top:0;bottom:auto;transform:scaleX(-1)}
.pagehead{padding:2rem 1rem 1rem}
.frame{display:inline-block;border:3px solid #f6efe0;padding:1.4rem 2.6rem;outline:1px solid var(--gold);outline-offset:6px}
.frame.small{padding:.7rem 2rem}
h1{font:700 3.2rem/1.1 "Playfair Display",serif;margin:0}
.pagehead h1{font-size:2.2rem}
.tag{font-style:italic;color:#ecdcb8;margin:1.4rem auto 0;max-width:40rem}
.count{display:inline-block;margin-left:.5rem;font-style:normal;font-size:.8rem;background:rgba(255,255,255,.15);border-radius:1rem;padding:0 .7rem}
.wrap{max-width:46rem;margin:0 auto;padding:1.5rem 1.2rem}
.flow blockquote{margin:2.2rem 0;padding:1.2rem 1.6rem;border-left:4px solid var(--gold);background:rgba(255,255,255,.35);font-size:1.12rem}
.flow cite{display:block;margin-top:.7rem;font:italic .95rem Lora,serif;color:var(--maroon)}
.transition{text-align:center;font:italic 1.25rem "Playfair Display",serif;color:var(--maroon);margin:2.6rem 0}
h2.sec{font:700 1.8rem "Playfair Display",serif;color:var(--maroon);text-align:center;margin-top:3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin-bottom:3rem}
.card{background:var(--paper2);border:1px solid var(--line);border-top:4px solid var(--maroon);padding:1rem 1.2rem;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(90,31,43,.18)}
.card h3{margin:.1rem 0 .3rem;font:700 1.15rem "Playfair Display",serif;color:var(--maroon)}
.card p{margin:0;font-size:.9rem;line-height:1.45}
#q{width:100%;padding:.7rem 1rem;font:inherit;border:1px solid var(--line);border-radius:.4rem;background:#fffaf0;margin-bottom:1rem}
.toc{margin-bottom:2rem;border:1px solid var(--line);background:rgba(255,255,255,.4);border-radius:.4rem;padding:.4rem 1rem}
.toc summary{cursor:pointer;font:700 1rem "Playfair Display",serif;color:var(--maroon)}
.toclist{display:flex;flex-wrap:wrap;gap:.3rem .9rem;padding:.8rem 0;font-size:.9rem}
.toclist a{color:var(--maroon2)}
.entry{position:relative;background:rgba(255,252,243,.93);border:1px solid var(--line);border-radius:.3rem;padding:1.6rem 2rem 1.3rem;margin:0 0 2.2rem;box-shadow:0 2px 6px rgba(90,31,43,.08);scroll-margin-top:5rem}
.entry h2{font:700 1.65rem/1.25 "Playfair Display",serif;color:var(--maroon);margin:0;text-align:center}
.ornament{height:34px;margin:.2rem auto .8rem;background:url(assets/divider.svg) center/contain no-repeat;max-width:300px}
.text p{margin:0 0 1.1rem}
.text .note{font-style:italic;color:#7a6a5a;text-align:center}
footer{text-align:center;color:#8a7458;font-size:.85rem;padding:2rem 1rem 3rem;border-top:1px solid var(--line);margin-top:2rem}
@media(max-width:600px){body{font-size:17px}h1{font-size:2.3rem}.frame{padding:1rem 1.4rem}.entry{padding:1.2rem 1.1rem}}

.entry:before,.entry:after{content:"";position:absolute;width:84px;height:84px;background:url(assets/corner.svg) no-repeat;background-size:contain;opacity:.5;pointer-events:none}
.entry:before{top:0;left:0}
.entry:after{bottom:0;right:0;transform:rotate(180deg)}
.flow blockquote{background:rgba(255,252,243,.9)}
.hero h1,.pagehead h1,.frame,.tag,.count{position:relative;z-index:1}
.frame{background:rgba(90,31,43,.55)}
@media(max-width:700px){.top{position:static}.top nav{gap:.1rem .9rem;font-size:.9rem}.entry{scroll-margin-top:1rem}.hero:before,.hero:after,.pagehead:before,.pagehead:after{width:110px;height:110px}.entry:before,.entry:after{width:60px;height:60px}}