:root {
  --ink: #193e34;
  --paper: #fffaf0;
  --paper-deep: #f9ecd7;
  --forest: #247252;
  --moss: #698653;
  --rose: #d85c73;
  --lavender: #936fb0;
  --gold: #e3ac38;
  --heart-ink: #4a2644;
  --heart-paper: #fff4eb;
  --heart-accent: #f4bf83;
  --heart-glow: #dc8e9c;
  --cosmic-ink: #142c4c;
  --cosmic-paper: #fff9eb;
  --cosmic-accent: #f5c76b;
  --cosmic-wash: #0e2340;
  --line: rgba(23, 49, 38, 0.18);
  --display: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; overflow-x: hidden; transition: background-color .7s ease, color .7s ease; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 72%, white); outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(242, 167, 71, .35); }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: white; color: #10291f; padding: .75rem 1rem; border-radius: 0 0 .5rem .5rem; }
.skip-link:focus { top: 0; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .13; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.rain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .38; transition: opacity .5s ease; overflow: hidden; }
.rain.off { opacity: 0; }
.drop { position: absolute; width: 1px; height: 24px; top: -30px; background: linear-gradient(transparent, rgba(225,240,236,.7)); animation: rainfall linear infinite; }
@keyframes rainfall { to { transform: translate3d(-5vw, 105vh, 0); } }

.site-header { position: fixed; z-index: 15; left: 0; right: 0; top: 0; height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(1.25rem, 4vw, 4.5rem); color: var(--ink); border-bottom: 1px solid rgba(25,62,52,.14); backdrop-filter: blur(18px); background: rgba(255,250,240,.78); }
.brand { display: inline-flex; align-items: center; gap: .72rem; width: max-content; font-family: var(--display); font-size: 1.25rem; letter-spacing: .02em; }
.brand svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.15; }
nav { display: flex; gap: 1.15rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
nav a { position: relative; opacity: .82; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.4rem; height: 1px; background: currentColor; transition: right .25s ease; }
nav a:hover::after, nav a:focus-visible::after { right: 0; }
.sound-button { justify-self: end; display: flex; align-items: center; gap: .6rem; border: 0; background: none; color: inherit; cursor: pointer; font-size: .77rem; letter-spacing: .08em; text-transform: uppercase; }
.sound-bars { display: flex; align-items: end; height: 12px; gap: 2px; }
.sound-bars i { display: block; width: 2px; height: 9px; background: currentColor; animation: pulse 1s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height: 5px; animation-delay: -.4s; }.sound-bars i:nth-child(3) { height: 11px; animation-delay: -.7s; }
@keyframes pulse { to { height: 3px; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 8.5rem clamp(1.4rem, 8vw, 9rem) 5rem; overflow: hidden; color: var(--ink); background: var(--hero-wash, #eef7df); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.72) 47%, rgba(255,250,240,.14) 82%), linear-gradient(0deg, rgba(255,244,209,.24), transparent 55%); z-index: -1; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: #173b2c url("assets/art-garden-gate.jpeg") 62% 48%/cover no-repeat; transform: scale(1.03); animation: breathe 14s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.085); filter: saturate(1.08); } }
.hero-copy { max-width: 900px; position: relative; z-index: 2; }
.eyebrow, .section-number { margin: 0 0 1.5rem; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.eyebrow { display: flex; align-items: center; gap: .8rem; color: rgba(25,62,52,.68); }
.eyebrow::before { content: ""; width: 42px; height: 1px; background: currentColor; }
h1, h2, h3, blockquote { font-family: var(--display); font-weight: 400; margin: 0; }
h1 { font-size: clamp(3.7rem, 8.5vw, 8.6rem); line-height: .87; letter-spacing: -.035em; max-width: 1050px; }
h1 em, h2 em { font-weight: 400; color: var(--rose); }
.hero-intro { max-width: 510px; margin: 2.1rem 0 2.4rem; font-size: clamp(1rem, 1.6vw, 1.22rem); color: rgba(25,62,52,.74); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.primary-button { display: inline-flex; align-items: center; gap: 1.1rem; padding: .98rem 1.2rem .98rem 1.4rem; background: var(--rose); color: white; border-radius: 999px; font-size: .88rem; font-weight: 600; transition: transform .25s ease, background .25s ease; }
.primary-button > span:last-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--rose); background: white; }
.primary-button .copy-label { display: inline; width: auto; height: auto; color: inherit; background: transparent; }
.primary-button:hover { transform: translateY(-3px); background: #c64861; }
.text-button { border: 0; color: inherit; background: transparent; padding: .8rem 0; cursor: pointer; border-bottom: 1px solid rgba(25,62,52,.35); }
.hero-note { position: absolute; right: clamp(2rem, 6vw, 7rem); bottom: 14%; display: flex; align-items: flex-start; gap: 1rem; font-family: var(--display); color: rgba(25,62,52,.68); }
.hero-note span { font-family: var(--sans); font-size: .7rem; padding-top: .4rem; }
.hero-note p { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.scroll-cue { position: absolute; left: clamp(1.4rem, 4vw, 4.5rem); bottom: 2rem; display: flex; gap: .75rem; align-items: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; opacity: .55; }
.scroll-cue span { display: block; width: 30px; height: 1px; background: currentColor; }
.scroll-cue i { font-style: normal; }

.manifesto { padding: clamp(6rem, 11vw, 10rem) clamp(1.4rem, 7vw, 8rem); }
.section-number { color: var(--rose); }
.manifesto-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 4rem; align-items: end; margin: 0 0 6rem; }
h2 { font-size: clamp(3rem, 6.5vw, 6.8rem); line-height: .92; letter-spacing: -.025em; }
.manifesto h2 em, .garden h2 em, .about h2 em { color: var(--rose); }
.manifesto-copy > p, .garden-heading > p { max-width: 430px; margin: 0 0 .8rem; color: rgba(23,49,38,.7); font-size: 1.05rem; }
.chapter-list { border-top: 1px solid var(--line); }
.chapter { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: 1.5rem; align-items: center; padding: 2.1rem 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 0; transform: translateX(-102%); transition: transform .45s cubic-bezier(.22,.7,.16,1); background: rgba(255,255,255,.32); z-index: -1; }
.chapter:hover::before { transform: translateX(0); }
.chapter-index { font-family: var(--display); font-size: 1.6rem; color: var(--rose); }
.chapter-kicker { margin: 0 0 .25rem; color: var(--moss); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.chapter h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.chapter div > p:last-child { max-width: 590px; margin: .8rem 0 0; color: rgba(23,49,38,.65); }
.chapter-button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: all .25s ease; }
.chapter-button:hover, .chapter-button:focus-visible { background: var(--forest); color: white; transform: rotate(-8deg); }

.art-interlude { position: relative; overflow: hidden; min-height: 820px; padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 8vw, 9rem); display: grid; grid-template-columns: minmax(340px, .9fr) minmax(360px, 1.1fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); background: linear-gradient(145deg, #fff4d9, var(--paper) 48%, #e6f3df); }
.art-interlude::after { content: ""; position: absolute; width: 45vw; height: 45vw; right: -17vw; bottom: -24vw; border: 1px solid rgba(216,92,115,.2); border-radius: 50%; box-shadow: 0 0 0 5vw rgba(227,172,56,.06), 0 0 0 10vw rgba(36,114,82,.04); pointer-events: none; }
.art-frame { position: relative; z-index: 1; margin: 0; padding: clamp(.65rem, 1.4vw, 1rem); background: #fffdf7; border: 1px solid rgba(25,62,52,.16); box-shadow: 0 34px 80px rgba(42,57,39,.2); transform: rotate(-1.5deg); }
.art-frame-image { position: relative; overflow: hidden; }
.art-frame img { display: block; width: 100%; height: clamp(460px, 62vw, 680px); object-fit: cover; object-position: center; }
.art-frame figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .35rem .1rem; color: rgba(25,62,52,.62); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.art-interlude-copy { position: relative; z-index: 1; max-width: 680px; }
.art-interlude-copy h2 { font-size: clamp(3.7rem, 7vw, 7.4rem); }
.art-interlude-copy h2 em { color: var(--rose); }
.art-interlude-copy > p:last-child { max-width: 530px; margin: 2.2rem 0 0; color: rgba(25,62,52,.68); font-size: 1.08rem; }

.garden { padding: clamp(6rem, 10vw, 9rem) clamp(1.4rem, 5vw, 5rem); color: var(--poem-ink, var(--ink)); background: var(--poem-wash, var(--mood-wash, var(--nostalgia-wash, #eaf7e7))); transition: background-color .65s ease, color .55s ease; }
body[data-mood="thorns"] .garden { --mood-wash: var(--grief-wash, #f8e0e6); }
body[data-mood="stems"] .garden { --mood-wash: var(--nostalgia-wash, #e2f2df); }
body[data-mood="sunlit"] .garden { --mood-wash: var(--joy-wash, #fff0b9); }
.garden-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(150px, .34fr) minmax(280px, .62fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); min-height: clamp(390px, 38vw, 500px); max-width: 1380px; margin: auto auto 3.7rem; padding: clamp(2rem, 5vw, 5.4rem); border: 1px solid color-mix(in srgb, var(--poem-ink, var(--ink)) 28%, transparent); background: radial-gradient(circle at 62% 46%, color-mix(in srgb, var(--poem-accent, var(--rose)) 13%, transparent), transparent 27%), linear-gradient(112deg, color-mix(in srgb, var(--poem-paper, var(--paper)) 28%, transparent), color-mix(in srgb, var(--poem-deep, var(--forest)) 5%, transparent)); transition: border-color .55s ease, background .65s ease; }
.garden-heading h2 { font-size: clamp(3.2rem, 6vw, 6rem); }
.garden .garden-heading > p { color: color-mix(in srgb, var(--poem-ink, var(--ink)) 70%, transparent); transition: color .55s ease; }
.garden h2 em { color: var(--poem-accent, var(--rose)); transition: color .55s ease; }
.collection-emblem { width: clamp(140px, 15vw, 220px); aspect-ratio: 1; justify-self: center; pointer-events: none; }
.collection-emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.collection-emblem--bloom { color: var(--poem-accent, var(--rose)); filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--poem-accent, var(--rose)) 22%, transparent)); transition: color .55s ease, filter .55s ease; }
.bloom-petals { fill: color-mix(in srgb, currentColor 28%, transparent); stroke: currentColor; stroke-width: 4; }
.bloom-centre { fill: var(--poem-paper, var(--paper)); stroke: currentColor; stroke-width: 4; transition: fill .55s ease; }
.bloom-seed { fill: currentColor; }
.mood-picker { max-width: 1380px; margin: 0 auto 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid color-mix(in srgb, var(--poem-ink, var(--ink)) 22%, transparent); border-radius: 999px; padding: .35rem; transition: border-color .55s ease; }
.mood { min-height: 65px; display: flex; align-items: center; justify-content: center; gap: .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--poem-ink, var(--ink)); cursor: pointer; transition: background .4s ease, color .4s ease; }
.mood b, .mood small { display: block; text-align: left; }.mood b { font-size: .84rem; }.mood small { opacity: .65; font-size: .68rem; }
.mood-mark { font-family: Georgia, serif; font-size: 1.1rem; }
.mood.active { background: var(--poem-deep, var(--forest)); color: #fff; box-shadow: 0 8px 24px rgba(23,59,44,.12); }
.poem-stage { max-width: 1380px; min-height: 760px; margin: auto; display: grid; grid-template-columns: minmax(300px, .88fr) minmax(440px, 1.12fr); box-shadow: 0 30px 70px rgba(25,50,38,.14); outline: none; }
.poem-visual { position: relative; min-height: 100%; background: linear-gradient(160deg, rgba(20,48,35,.02), rgba(20,48,35,.7)), url("assets/art-botanical.jpeg") center 42%/cover no-repeat; overflow: hidden; }
.poem-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, color-mix(in srgb, var(--poem-deep, #173b2c) 88%, transparent)); transition: background .55s ease; }
.art-caption { position: absolute; z-index: 2; left: 2.2rem; bottom: 2.2rem; color: white; display: flex; gap: 1.2rem; align-items: flex-start; }
.art-caption span { font-size: .68rem; margin-top: .3rem; opacity: .65; }.art-caption p { margin: 0; font-family: var(--display); font-size: 1.35rem; line-height: 1.25; }
.poem-card { position: relative; color: var(--poem-ink, var(--ink)); background: var(--poem-paper, #fffdf7); padding: clamp(2rem, 5vw, 5.5rem); display: flex; min-width: 0; flex-direction: column; transition: background-color .55s ease, color .55s ease; }
.poem-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: color-mix(in srgb, var(--poem-ink, var(--ink)) 66%, transparent); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.poem-meta-actions, .reading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
.floating-reader-nav { --floating-nav-ink: var(--poem-ink, var(--ink)); --floating-nav-paper: var(--poem-paper, var(--paper)); --floating-nav-accent: var(--poem-accent, var(--rose)); position: sticky; z-index: 8; top: 84px; align-self: flex-end; display: flex; align-items: center; gap: .45rem; width: max-content; margin: 1.15rem 0 -1rem; padding: .38rem; border: 1px solid color-mix(in srgb, var(--floating-nav-ink) 20%, transparent); border-radius: 999px; color: var(--floating-nav-ink); background: color-mix(in srgb, var(--floating-nav-paper) 88%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--floating-nav-ink) 14%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: color .55s ease, background-color .55s ease, border-color .55s ease; }
.floating-reader-nav button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; font-size: 1rem; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.floating-reader-nav button:hover, .floating-reader-nav button:focus-visible { color: var(--floating-nav-paper); background: var(--floating-nav-accent); transform: scale(1.05); }
.floating-reader-nav > span { display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 4.6rem; color: color-mix(in srgb, var(--floating-nav-ink) 72%, transparent); font-size: .7rem; font-weight: 600; letter-spacing: .09em; white-space: nowrap; }
.floating-reader-nav > span i { width: 20px; height: 1px; background: color-mix(in srgb, var(--floating-nav-ink) 24%, transparent); }
.floating-reader-nav--heart { --floating-nav-ink: var(--heart-ink); --floating-nav-paper: var(--heart-paper); --floating-nav-accent: var(--heart-glow); }
.floating-reader-nav--cosmic { --floating-nav-ink: var(--cosmic-ink); --floating-nav-paper: var(--cosmic-paper); --floating-nav-accent: var(--cosmic-accent); }
.poem-share { display: inline-flex; align-items: center; gap: .35rem; border: 0; padding: .4rem; color: inherit; background: transparent; cursor: pointer; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; }
.poem-share:hover, .poem-share:focus-visible { color: var(--poem-accent, var(--rose)); }
.poem-share .share-mark { color: var(--poem-accent, var(--rose)); font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1; }
.petal-button { border: 0; background: none; color: inherit; cursor: pointer; padding: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.petal-button[aria-pressed="true"] span { color: var(--poem-accent, var(--rose)); }
.poem-kicker { color: var(--poem-accent, var(--rose)); margin: 4.2rem 0 .55rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; transition: color .55s ease; }
.poem-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.poem-card h3 { font-size: clamp(2.8rem, 5vw, 5rem); line-height: .96; max-width: 720px; }
.poem-atmosphere-motif { flex: 0 0 auto; color: var(--poem-accent, var(--rose)); font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; opacity: .72; transition: color .55s ease, opacity .35s ease, transform .45s ease; }
.living-lines-hint { display: flex; align-items: center; gap: .65rem; margin: 1.25rem 0 0; color: color-mix(in srgb, var(--poem-ink, var(--ink)) 60%, transparent); font-size: .74rem; letter-spacing: .04em; }
.living-lines-hint > span:first-child { color: var(--poem-accent, var(--rose)); font-size: 1rem; }
.poem-body { position: relative; margin-top: 2.5rem; padding-left: 1.7rem; font-family: var(--display); font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.55; color: color-mix(in srgb, var(--poem-ink, var(--ink)) 85%, transparent); }
.poem-stanza { margin: 0 0 1.3rem; }
.poem-line-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: .5rem; align-items: start; min-height: 1.7em; opacity: .38; transform: translateY(8px); transition: opacity .65s ease, transform .65s ease, color .25s ease; }
.poem-line-row.is-awake, .poem-line-row:focus-within { opacity: 1; transform: none; }
.poem-line-text { min-width: 0; }
.gather-line { width: 1.85rem; height: 1.85rem; margin-top: -.08rem; border: 0; border-radius: 50%; background: transparent; color: var(--poem-accent, var(--rose)); cursor: pointer; opacity: 0; transform: scale(.7) rotate(-15deg); transition: opacity .2s ease, transform .25s ease, background .2s ease; }
.poem-line-row:hover .gather-line, .poem-line-row:focus-within .gather-line, .gather-line[aria-pressed="true"] { opacity: 1; transform: scale(1) rotate(0); }
.gather-line:hover, .gather-line:focus-visible, .gather-line[aria-pressed="true"] { background: color-mix(in srgb, var(--poem-accent, var(--rose)) 13%, transparent); }
.living-stem { position: absolute; left: 0; top: .45rem; bottom: 1.5rem; width: 8px; border-left: 1px solid color-mix(in srgb, var(--poem-line-start, var(--forest)) 28%, transparent); pointer-events: none; }
.living-stem i { position: absolute; left: -1px; top: 0; width: 2px; height: var(--stem-progress, 0%); border-radius: 2px; background: linear-gradient(var(--poem-line-start, var(--moss)), var(--poem-line-end, var(--rose))); transition: height .7s cubic-bezier(.22,.7,.16,1), background .55s ease; }
.living-stem b { position: absolute; left: 0; top: var(--stem-progress, 0%); width: 1.4rem; color: var(--poem-accent, var(--rose)); font-family: Georgia, serif; font-size: 1rem; line-height: 1; text-align: center; transform: translate(-50%, -45%); transform-origin: center; transition: top .7s cubic-bezier(.22,.7,.16,1), transform .5s ease, color .55s ease; }
.reader-controls { margin-top: auto; padding-top: 2.5rem; display: flex; align-items: center; gap: 1.2rem; justify-content: flex-end; }
.reader-controls button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: .2s ease; }
.reader-controls button:hover, .reader-controls button:focus-visible { background: var(--poem-deep, var(--forest)); color: white; }
.reader-position { display: flex; align-items: center; gap: .5rem; color: color-mix(in srgb, var(--poem-ink, var(--ink)) 62%, transparent); font-size: .72rem; }.reader-position i { display: block; width: 48px; height: 1px; background: color-mix(in srgb, var(--poem-ink, var(--ink)) 18%, transparent); }

.heart-collection { position: relative; isolation: isolate; overflow: hidden; padding: clamp(6rem, 10vw, 9rem) clamp(1.4rem, 6vw, 6rem); color: var(--heart-paper); background: var(--heart-ink); transition: color .6s ease, background-color .6s ease; }
.heart-collection::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 93% 8%, color-mix(in srgb, var(--heart-glow) 40%, transparent), transparent 27%), radial-gradient(circle at 5% 76%, color-mix(in srgb, var(--heart-accent) 17%, transparent), transparent 30%); pointer-events: none; }
.heart-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(150px, .32fr) minmax(280px, .62fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; min-height: clamp(390px, 38vw, 500px); max-width: 1380px; margin: 0 auto clamp(3.5rem, 7vw, 6rem); padding: clamp(2rem, 5vw, 5.4rem); border: 1px solid color-mix(in srgb, var(--heart-paper) 28%, transparent); background: radial-gradient(circle at 57% 48%, color-mix(in srgb, var(--heart-glow) 24%, transparent), transparent 24%), linear-gradient(112deg, color-mix(in srgb, var(--heart-paper) 4%, transparent), color-mix(in srgb, var(--heart-accent) 8%, transparent)); transition: border-color .6s ease, background .6s ease; }
.heart-heading .section-number { color: var(--heart-accent); }
.heart-heading h2 { font-size: clamp(3.7rem, 7.4vw, 7.5rem); }
.heart-heading h2 em { color: var(--heart-accent); }
.heart-heading > p { max-width: 420px; margin: 0 0 .3rem; color: color-mix(in srgb, var(--heart-paper) 78%, transparent); font-size: 1.08rem; }
.collection-emblem--knot { color: var(--heart-accent); filter: drop-shadow(0 18px 34px color-mix(in srgb, var(--heart-glow) 32%, transparent)); transition: color .6s ease, filter .6s ease; }
.collection-emblem--knot ellipse { fill: none; stroke: currentColor; stroke-width: 13; }
.collection-emblem--knot ellipse:nth-child(2) { stroke: var(--heart-glow); }
.collection-emblem--knot ellipse:nth-child(3) { stroke: color-mix(in srgb, var(--heart-accent) 58%, var(--heart-paper)); }
.collection-emblem--knot circle { fill: var(--heart-paper); stroke: var(--heart-glow); stroke-width: 6; }
.heart-layout { display: grid; grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; max-width: 1380px; margin: 0 auto; }
.heart-contents { position: sticky; top: 110px; border-top: 1px solid color-mix(in srgb, var(--heart-paper) 34%, transparent); }
.heart-contents-label { margin: 1.2rem 0 1rem; color: var(--heart-accent); font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.heart-poem-choice { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 1.4rem; gap: .7rem; align-items: center; width: 100%; padding: 1rem .8rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--heart-paper) 23%, transparent); background: transparent; color: var(--heart-paper); text-align: left; cursor: pointer; transition: background .25s ease, padding-left .25s ease; }
.heart-poem-choice:hover, .heart-poem-choice:focus-visible, .heart-poem-choice[aria-current="true"] { background: color-mix(in srgb, var(--heart-paper) 12%, transparent); padding-left: 1.1rem; }
.heart-poem-choice span { color: var(--heart-accent); font-family: var(--display); font-size: 1.2rem; }
.heart-poem-choice strong { font-family: var(--display); font-size: clamp(1.14rem, 1.6vw, 1.42rem); font-weight: 400; line-height: 1.15; }
.heart-poem-choice i { color: var(--heart-glow); font-family: Georgia, serif; font-size: 1.05rem; font-style: normal; opacity: 0; transform: scale(.55); transition: opacity .25s ease, transform .3s ease; }
.heart-poem-choice.is-kept i { opacity: 1; transform: scale(1); }
.heart-reading { min-width: 0; display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 5.5rem); color: var(--heart-ink); background: var(--heart-paper); box-shadow: 0 28px 70px rgba(27,8,25,.23); overflow-anchor: none; transition: color .6s ease, background-color .6s ease; }
.heart-reading-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: color-mix(in srgb, var(--heart-ink) 62%, transparent); font-size: .75rem; letter-spacing: .12em; }
.heart-reading-top .poem-share:hover, .heart-reading-top .poem-share:focus-visible, .heart-reading-top .share-mark { color: var(--heart-glow); }
.heart-save { border: 0; padding: .4rem; color: inherit; background: transparent; cursor: pointer; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.heart-save span { display: inline-block; min-width: 1.15em; color: var(--heart-glow); font-family: Georgia, serif; font-size: 1.15rem; line-height: 1; transition: transform .25s ease, text-shadow .25s ease; }
.heart-save[aria-pressed="true"] span { transform: scale(1.16); text-shadow: 0 0 14px color-mix(in srgb, var(--heart-glow) 60%, transparent); }
.heart-dedication { margin: clamp(3rem, 5vw, 5rem) 0 .8rem; color: var(--heart-glow); font-size: .84rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: color .6s ease; }
.heart-reading h3 { font-size: clamp(3rem, 5.1vw, 5.3rem); line-height: 1; overflow-wrap: anywhere; }
.heart-poem-body { position: relative; max-width: 720px; margin: 3rem 0 0; padding-left: 1.7rem; font-size: clamp(1.03rem, 1.25vw, 1.14rem); line-height: 1.85; overflow-wrap: anywhere; overflow-anchor: none; }
.heart-poem-body p { margin: 0 0 2rem; }
.heart-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: auto; padding-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--heart-ink) 22%, transparent); }
.heart-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--heart-ink) 34%, transparent); border-radius: 50%; color: var(--heart-ink); background: transparent; cursor: pointer; }
.heart-controls button:hover, .heart-controls button:focus-visible { color: var(--heart-paper); background: var(--heart-ink); }
.heart-controls span { min-width: 4.4rem; color: color-mix(in srgb, var(--heart-ink) 68%, transparent); font-size: .74rem; text-align: center; letter-spacing: .1em; }

.cosmic-collection { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem); border-top: 22px solid var(--heart-paper); color: var(--cosmic-paper); background: var(--cosmic-wash); transition: color .6s ease, background-color .6s ease; }
.cosmic-collection::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cosmic-accent) 16%, transparent), transparent 25%), radial-gradient(circle at 4% 72%, color-mix(in srgb, var(--cosmic-paper) 11%, transparent), transparent 35%); }
.cosmic-heading { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; min-height: clamp(380px, 44vw, 560px); max-width: 1380px; margin: 0 auto 2.6rem; padding: clamp(2rem, 6vw, 6rem); color: var(--cosmic-paper); border: 1px solid color-mix(in srgb, var(--cosmic-paper) 24%, transparent); background: radial-gradient(circle at 80% 52%, color-mix(in srgb, var(--cosmic-accent) 18%, transparent), transparent 33%), linear-gradient(115deg, color-mix(in srgb, var(--cosmic-wash) 82%, black), var(--cosmic-ink) 70%, color-mix(in srgb, var(--cosmic-ink) 75%, white)); transition: color .6s ease, border-color .6s ease, background-color .6s ease; }
.cosmic-heading > :not(.cosmic-sky) { position: relative; z-index: 1; }
.cosmic-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.celestial-horizon-mark { position: absolute; z-index: 1; right: 4%; top: 50%; width: clamp(280px, 31vw, 455px); height: auto; transform: translateY(-50%); opacity: .92; border-radius: 50%; background: #171313; mix-blend-mode: normal; box-shadow: 0 0 64px color-mix(in srgb, var(--cosmic-accent) 18%, transparent); filter: hue-rotate(0deg) saturate(.96) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); transition: filter .65s ease, opacity .65s ease, box-shadow .65s ease; }
#cosmic-poems[data-poem-atmosphere="loneliness-of-the-lune"] .celestial-horizon-mark { filter: hue-rotate(5deg) saturate(.9) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
#cosmic-poems[data-poem-atmosphere="rains-reminiscence"] .celestial-horizon-mark { filter: hue-rotate(8deg) saturate(.92) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
#cosmic-poems[data-poem-atmosphere="tussling-with-time"] .celestial-horizon-mark { filter: hue-rotate(-4deg) saturate(.9) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
#cosmic-poems[data-poem-atmosphere="oceans-owed-ode"] .celestial-horizon-mark { filter: hue-rotate(7deg) saturate(1) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
#cosmic-poems[data-poem-atmosphere="sitting-with-silence"] .celestial-horizon-mark { filter: hue-rotate(4deg) saturate(.88) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
#cosmic-poems[data-poem-atmosphere="petrichors-peace"] .celestial-horizon-mark { filter: hue-rotate(-3deg) saturate(.92) drop-shadow(0 0 28px color-mix(in srgb, var(--cosmic-accent) 20%, transparent)); }
.cosmic-star { position: absolute; color: var(--cosmic-paper); line-height: 1; text-shadow: 0 0 16px color-mix(in srgb, var(--cosmic-paper) 70%, transparent); }
.cosmic-star-one { top: 15%; left: 58%; font-size: 1.2rem; }.cosmic-star-two { top: 23%; right: 13%; font-size: 1.6rem; }.cosmic-star-three { top: 70%; left: 49%; font-size: .8rem; }.cosmic-star-four { bottom: 16%; right: 33%; font-size: 1.1rem; }.cosmic-star-five { top: 11%; right: 42%; font-size: .65rem; }
.cosmic-heading .section-number { color: var(--cosmic-accent); }
.cosmic-heading h2 { max-width: 800px; font-size: clamp(3.6rem, 7.5vw, 7.4rem); }
.cosmic-heading > p:last-child { max-width: 540px; margin: 1.7rem 0 0; color: color-mix(in srgb, var(--cosmic-paper) 85%, transparent); font-size: 1.08rem; }
.cosmic-selector { max-width: 1380px; margin: 0 auto 2.2rem; }
.cosmic-selector > p { margin: 0 0 1rem; color: var(--cosmic-accent); font-size: .73rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#cosmic-poem-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55rem; }
.cosmic-poem-choice { position: relative; min-height: 126px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--cosmic-paper) 28%, transparent); color: var(--cosmic-paper); background: color-mix(in srgb, var(--cosmic-paper) 7%, transparent); text-align: left; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.cosmic-poem-choice:hover, .cosmic-poem-choice:focus-visible { transform: translateY(-3px); }
.cosmic-poem-choice[aria-current="true"] { color: var(--cosmic-ink); background: var(--cosmic-accent); }
.cosmic-poem-choice span { color: var(--cosmic-accent); font-size: .73rem; letter-spacing: .12em; }
.cosmic-poem-choice[aria-current="true"] span { color: var(--cosmic-ink); }
.cosmic-poem-choice strong { font-family: var(--display); font-size: clamp(1.1rem, 1.55vw, 1.5rem); font-weight: 400; line-height: 1.08; }
.cosmic-poem-choice i { position: absolute; right: .8rem; top: .7rem; color: var(--cosmic-accent); font-family: Georgia, serif; font-size: 1.2rem; font-style: normal; font-weight: 700; opacity: 0; transform: translateY(-5px) rotate(-18deg); transition: opacity .25s ease, transform .35s ease; }
.cosmic-poem-choice.is-kept i { opacity: 1; transform: translateY(0) rotate(0); }
.cosmic-poem-choice[aria-current="true"] i { color: var(--cosmic-ink); }
.cosmic-reading { max-width: 1060px; display: flex; flex-direction: column; margin: 0 auto; padding: clamp(2rem, 6vw, 6rem); color: var(--cosmic-ink); border-top: 7px solid var(--cosmic-accent); background: var(--cosmic-paper); box-shadow: 0 24px 64px rgba(0,10,26,.25); overflow-anchor: none; transition: color .6s ease, background-color .6s ease, border-color .6s ease; }
.cosmic-reading-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: color-mix(in srgb, var(--cosmic-ink) 68%, transparent); font-size: .73rem; letter-spacing: .12em; }
.cosmic-reading-top button { display: inline-flex; align-items: center; gap: .5rem; border: 0; padding: .4rem; color: inherit; background: transparent; cursor: pointer; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; }
.cosmic-reading-top #cosmic-save span { display: inline-grid; place-items: center; width: 1.35em; color: var(--cosmic-accent); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; line-height: 1; transition: transform .25s ease, text-shadow .25s ease; }
.cosmic-reading-top #cosmic-save[aria-pressed="true"] span { transform: scale(1.16) rotate(8deg); text-shadow: 0 0 14px color-mix(in srgb, var(--cosmic-accent) 72%, transparent); }
.cosmic-reading-top .poem-share:hover, .cosmic-reading-top .poem-share:focus-visible, .cosmic-reading-top .share-mark { color: var(--cosmic-accent); }
.cosmic-reading h3 { max-width: 820px; margin: clamp(2.5rem, 5vw, 4.8rem) 0 0; font-size: clamp(3rem, 5.8vw, 5.8rem); line-height: 1; overflow-wrap: anywhere; }
.cosmic-poem-body { position: relative; max-width: 760px; margin: 2.8rem 0 0; padding-left: 1.7rem; font-size: clamp(1.03rem, 1.25vw, 1.14rem); line-height: 1.85; overflow-wrap: anywhere; overflow-anchor: none; }
.cosmic-poem-body p { margin: 0 0 2rem; }
.collection-stem { top: .45rem; bottom: 2rem; }
.collection-stem--heart { border-left-color: color-mix(in srgb, var(--heart-glow) 34%, transparent); }
.collection-stem--heart i { background: linear-gradient(var(--heart-accent), var(--heart-glow)); }
.collection-stem--heart b { color: var(--heart-glow); font-size: 1.15rem; }
.collection-stem--sun { border-left-color: color-mix(in srgb, var(--cosmic-ink) 24%, transparent); }
.collection-stem--sun i { background: linear-gradient(color-mix(in srgb, var(--cosmic-accent) 45%, var(--cosmic-paper)), var(--cosmic-accent)); }
.collection-stem--sun b { display: grid; place-items: center; color: var(--cosmic-accent); font-size: 1.4rem; font-weight: 700; text-shadow: 0 0 12px color-mix(in srgb, var(--cosmic-accent) 52%, transparent); }
.cosmic-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: auto; padding-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--cosmic-ink) 22%, transparent); }
.cosmic-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--cosmic-ink) 34%, transparent); border-radius: 50%; color: var(--cosmic-ink); background: transparent; cursor: pointer; }
.cosmic-controls button:hover, .cosmic-controls button:focus-visible { color: var(--cosmic-paper); background: var(--cosmic-ink); }
.cosmic-controls span { min-width: 4.4rem; font-size: .74rem; letter-spacing: .1em; text-align: center; }

.line-garden { position: relative; min-height: 82vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.4rem; background: linear-gradient(135deg, rgba(74,35,69,.84) 0%, rgba(45,49,71,.7) 48%, rgba(15,48,38,.88) 100%), url("assets/art-moonlit.jpeg") center 55%/cover no-repeat; color: #fffdf7; }
.line-garden .section-number { color: #c9aeb7; }
.line-garden blockquote { max-width: 1000px; font-size: clamp(3rem, 6.5vw, 7rem); line-height: .98; transition: opacity .3s ease, transform .3s ease; }
.line-garden > p:not(.section-number) { color: rgba(255,255,255,.55); margin: 1.2rem 0 2.2rem; }
.outline-button { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .85rem 1.2rem; color: white; background: transparent; cursor: pointer; transition: .2s ease; }.outline-button:hover { background: white; color: var(--forest); }
.line-garden.changing blockquote { opacity: 0; transform: translateY(8px); }

.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.about-art { position: relative; background: linear-gradient(120deg, rgba(26,58,43,.14), transparent), url("assets/art-coastal-path.jpeg") center 54%/cover no-repeat; }
.about-copy { padding: clamp(4rem, 8vw, 9rem); display: flex; flex-direction: column; justify-content: center; }
.about-copy h2 { font-size: clamp(3rem, 5.5vw, 5.8rem); }
.about-copy > p:not(.section-number):not(.signature) { max-width: 620px; margin: 2.4rem 0 0; color: rgba(23,49,38,.72); font-size: 1.05rem; }
.signature { margin: 2.2rem 0 0; font-family: var(--display); font-size: 1.5rem; color: var(--rose); }

footer { min-height: 160px; padding: 2.5rem clamp(1.4rem, 5vw, 5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--forest); color: #fffdf7; }
footer > p { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; opacity: .62; }.saved-count { justify-self: end; }
.footer-tools { justify-self: end; display: flex; align-items: flex-end; flex-direction: column; gap: .45rem; }
.footer-tools p { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; opacity: .62; }
.manage-link { font-size: .72rem; letter-spacing: .08em; border-bottom: 1px solid rgba(255,255,255,.35); opacity: .82; }
.manage-link:hover, .manage-link:focus-visible { opacity: 1; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 1.5rem; transform: translate(-50%, 120%); opacity: 0; background: #f7f2e8; color: var(--ink); padding: .8rem 1.1rem; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.18); transition: .35s ease; font-size: .84rem; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

.bouquet-dock { position: fixed; z-index: 18; right: 1.35rem; bottom: 1.35rem; display: flex; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: .72rem .78rem .72rem 1rem; color: white; background: rgba(25,62,52,.9); box-shadow: 0 16px 38px rgba(20,48,35,.24); backdrop-filter: blur(12px); cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s ease, background .25s ease; }
.bouquet-dock:hover, .bouquet-dock:focus-visible { transform: translateY(-3px); background: var(--rose); }
.bouquet-dock-flower { color: #ffd96a; font-size: 1.05rem; }
.bouquet-dock strong { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; color: var(--forest); background: #fffdf7; font-size: .72rem; }

dialog { color: var(--ink); }
dialog::backdrop { background: rgba(10,28,22,.65); backdrop-filter: blur(10px); }
.dialog-close { position: absolute; z-index: 5; right: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,253,247,.86); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.dialog-close--light { color: white; border-color: rgba(255,255,255,.35); background: rgba(12,36,28,.45); }
.dialog-intro { color: rgba(25,62,52,.68); font-size: 1rem; }

.garden-choice-dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: clamp(2rem, 6vw, 4.5rem); border: 0; border-radius: 28px; background: linear-gradient(145deg, #fffdf7, #fff2cf 55%, #e5f3df); box-shadow: 0 30px 90px rgba(11,36,27,.34); overflow: auto; }
.garden-choice-dialog .eyebrow { color: var(--rose); }
.garden-choice-dialog h2 { max-width: 620px; font-size: clamp(3rem, 7vw, 5.7rem); }
.garden-choice-dialog .dialog-intro { max-width: 560px; margin: 1.4rem 0 2rem; }
.garden-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.garden-choice-grid button { display: flex; align-items: center; gap: .9rem; min-height: 80px; padding: 1rem 1.2rem; border: 1px solid rgba(25,62,52,.16); border-radius: 18px; color: var(--ink); background: rgba(255,255,255,.5); cursor: pointer; text-align: left; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.garden-choice-grid button:hover, .garden-choice-grid button:focus-visible { transform: translateY(-3px); border-color: var(--rose); background: white; }
.garden-choice-grid button span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: white; background: var(--forest); }
.garden-choice-grid .garden-choice-any { grid-column: 1 / -1; justify-content: center; background: var(--forest); color: white; }
.garden-choice-grid .garden-choice-any span { color: var(--forest); background: #fff5c6; }
.garden-choosing { display: none; margin: 1.4rem 0 0; color: var(--rose); font-family: var(--display); font-size: 1.35rem; }
.garden-choice-dialog.is-choosing .garden-choice-grid { pointer-events: none; opacity: .3; }
.garden-choice-dialog.is-choosing .garden-choosing { display: block; animation: choosingPulse .7s ease-in-out infinite alternate; }
@keyframes choosingPulse { to { opacity: .45; transform: translateX(.35rem); } }

.bouquet-dialog { width: min(700px, 100vw); height: 100svh; max-height: none; margin: 0 0 0 auto; padding: clamp(1.5rem, 5vw, 4rem); border: 0; background: linear-gradient(180deg, #fffdf7, #fff7e7); box-shadow: -26px 0 80px rgba(12,36,28,.28); overflow: auto; }
.bouquet-dialog[open] { animation: bouquetIn .42s cubic-bezier(.22,.7,.16,1); }
@keyframes bouquetIn { from { transform: translateX(100%); } }
.bouquet-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.bouquet-dialog-head .dialog-close { position: static; flex: 0 0 auto; }
.bouquet-dialog .eyebrow { color: var(--rose); }
.bouquet-dialog h2 { font-size: clamp(3rem, 7vw, 5.6rem); }
.bouquet-dialog > .dialog-intro { max-width: 520px; margin: 1.25rem 0 2.5rem; }
.bouquet-section { margin: 2rem 0; }
.bouquet-section h3 { margin: 0 0 .75rem; color: var(--rose); font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.bouquet-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.bouquet-item:last-child { border-bottom: 1px solid var(--line); }
.bouquet-item blockquote { font-size: 1.35rem; line-height: 1.25; }
.bouquet-item p { margin: .35rem 0 0; color: rgba(25,62,52,.58); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.bouquet-remove { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; }
.bouquet-empty { padding: 3rem 1.5rem; border: 1px dashed rgba(25,62,52,.24); border-radius: 22px; color: rgba(25,62,52,.58); text-align: center; }
.bouquet-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.bouquet-dialog-actions .text-button { color: var(--rose); }
.bouquet-done { border: 0; cursor: pointer; }

@media (max-width: 1100px) { .site-header nav { display: none; } }
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 70px; }.site-header nav { display: none; }
  .hero { min-height: 900px; align-items: start; padding-top: 10rem; }.hero-note { display: none; }
  .manifesto-copy { grid-template-columns: 1fr; gap: 1.8rem; margin-bottom: 4rem; }
  .chapter { grid-template-columns: 42px 1fr auto; }.chapter div > p:last-child { display: none; }.chapter-button { width: 54px; height: 54px; }
  .art-interlude { min-height: auto; grid-template-columns: 1fr; }.art-frame { width: min(600px, 92%); }.art-frame img { height: min(720px, 105vw); }.art-interlude-copy { padding: 1.5rem 0 2rem; }
  .garden-heading { grid-template-columns: minmax(0, 1fr) minmax(130px, .3fr); align-items: center; padding: clamp(2rem, 5vw, 3.5rem); }
  .garden-heading > p { grid-column: 1 / -1; }
  .mood-picker { grid-template-columns: 1fr 1fr; border-radius: 24px; }.mood { border-radius: 18px; }
  .poem-stage { grid-template-columns: 1fr; }.poem-visual { min-height: 360px; }.poem-card { min-height: 720px; }
  .heart-heading { grid-template-columns: minmax(0, 1fr) minmax(130px, .3fr); gap: 1.5rem; padding: clamp(2rem, 5vw, 3.5rem); }.heart-heading > p { grid-column: 1 / -1; }.heart-layout { grid-template-columns: 1fr; }.heart-contents { position: static; }
  #heart-poem-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.heart-poem-choice { border-right: 1px solid color-mix(in srgb, var(--heart-paper) 23%, transparent); }
  #cosmic-poem-list { display: flex; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }.cosmic-poem-choice { min-width: 180px; scroll-snap-align: start; }
  .about { grid-template-columns: 1fr; }.about-art { min-height: 480px; }
}
@media (max-width: 600px) {
  .sound-button span:last-child { display: none; }
  .hero { min-height: 820px; padding-left: 1.25rem; padding-right: 1.25rem; }.hero-intro { max-width: 90%; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .manifesto, .garden { padding-left: 1.2rem; padding-right: 1.2rem; }.garden-heading { min-height: 520px; padding: 2rem 1.4rem; }
  .chapter { grid-template-columns: 30px 1fr; }.chapter-button { display: none; }
  .art-interlude { padding-left: 1.2rem; padding-right: 1.2rem; gap: 2.2rem; }.art-frame { width: 94%; margin-left: auto; margin-right: auto; }.art-frame img { height: 115vw; max-height: 620px; }
  .mood-picker { display: flex; overflow-x: auto; border: 0; padding: 0 0 .8rem; border-radius: 0; scrollbar-width: none; }.mood { min-width: 185px; border: 1px solid var(--line); }
  .poem-stage { margin-left: -.2rem; margin-right: -.2rem; }.poem-visual { min-height: 300px; }.poem-card { padding: 1.5rem; min-height: 740px; }
  .poem-meta { align-items: flex-start; flex-wrap: wrap; }.poem-meta > span { max-width: 150px; }.poem-meta-actions { width: 100%; justify-content: flex-start; }.poem-kicker { margin-top: 3rem; }
  .poem-body { padding-left: 1.25rem; }.gather-line { opacity: .7; transform: scale(.9); }
  .heart-collection { padding-left: 1.2rem; padding-right: 1.2rem; }.heart-heading { min-height: 520px; padding: 2rem 1.4rem; }.heart-heading h2 { font-size: clamp(3.4rem, 13vw, 5.5rem); }.collection-emblem { width: clamp(90px, 30vw, 140px); opacity: .76; }.floating-reader-nav { top: 72px; margin-top: .8rem; }
  #heart-poem-list { grid-template-columns: 1fr; }.heart-reading { padding: 1.6rem; }.heart-reading-top, .cosmic-reading-top { align-items: flex-start; flex-wrap: wrap; }.heart-poem-body { font-size: 1.04rem; }
  .cosmic-collection { padding-left: 1.2rem; padding-right: 1.2rem; }.cosmic-heading { min-height: 460px; padding: 2rem; }.cosmic-heading h2 { font-size: clamp(3.3rem, 13vw, 5.4rem); }.celestial-horizon-mark { right: -12%; top: 28%; width: 270px; opacity: .58; }.cosmic-star-one { left: 80%; }.cosmic-star-three { left: 72%; }.cosmic-reading { padding: 1.6rem; }.cosmic-poem-body { font-size: 1.04rem; }
  .garden-choice-grid { grid-template-columns: 1fr; }.garden-choice-grid .garden-choice-any { grid-column: auto; }
  .bouquet-dock { right: .8rem; bottom: .8rem; }.bouquet-dock > span:nth-child(2) { display: none; }
  .bouquet-dialog { width: 100vw; }.bouquet-dialog-actions { align-items: stretch; flex-direction: column-reverse; }.bouquet-dialog-actions > * { justify-content: center; width: 100%; }
  .about-art { min-height: 360px; }.about-copy { padding: 4.5rem 1.4rem; }
  footer { grid-template-columns: 1fr 1fr; gap: 1rem; }.footer-brand { grid-column: 1 / -1; }.footer-tools { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rain { display: none; } .poem-line-row { opacity: 1; transform: none; } }