@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --header: 78px;
  --body-size: 18px;
  --ink: #322d3d;
  --muted: #766f80;
  --paper: #f8f5f6;
  --paper-deep: #eee8ef;
  --violet: #665878;
  --violet-dark: #403650;
  --lilac: #a994b3;
  --champagne: #e7d9c6;
  --line: #d8cedb;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body, button, input { font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
main:focus { outline: none; }
.skip-link { position: fixed; left: 18px; top: -100px; z-index: 100; background: #fff; padding: 12px 18px; border-radius: 4px; box-shadow: 0 8px 30px #20182d40; }
.skip-link:focus { top: 14px; }
.eyebrow { margin: 0; font: 600 10px/1.4 var(--sans); letter-spacing: .19em; color: var(--violet); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  border-bottom: 1px solid rgba(94, 75, 112, .16);
  background: rgba(249, 246, 249, .9);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 15px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #8d799d; border-radius: 50%; color: #645570; font: 500 16px var(--serif); letter-spacing: .04em; }
.brand-copy { display: flex; flex-direction: column; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.brand-copy small { margin-top: 4px; color: #8b8190; font: 400 9px var(--sans); letter-spacing: .08em; text-transform: none; }
.site-header nav { display: flex; gap: clamp(22px, 3vw, 42px); }
.site-header nav a { position: relative; padding: 10px 0; color: #645b6b; font-size: 11px; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: #796887; transition: right .25s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }

.hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 80px 28px 100px;
  color: #f7f1f5;
  background:
    radial-gradient(circle at 73% 24%, rgba(235, 217, 230, .25), transparent 19%),
    radial-gradient(circle at 19% 76%, rgba(196, 174, 211, .22), transparent 23%),
    linear-gradient(135deg, #332a47 0%, #5f5074 48%, #9b83a6 100%);
}
.hero::before { content: ''; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.hero-copy { position: relative; z-index: 2; width: min(760px, 100%); text-align: center; }
.hero .eyebrow { color: #eadfeb; }
.hero h1 { margin: 22px 0 0; font: 500 clamp(58px, 8vw, 105px)/.95 var(--serif); letter-spacing: -.045em; }
.hero-kicker { margin: 16px 0 30px; color: var(--champagne); font: italic clamp(21px, 2.5vw, 30px) var(--serif); }
.hero-intro { width: min(570px, 100%); margin: 0 auto; color: #eee7ef; font: 400 clamp(17px, 1.7vw, 20px)/1.65 var(--serif); }
.primary-action { display: inline-flex; align-items: center; gap: 32px; margin-top: 38px; padding: 15px 20px; border: 1px solid rgba(241, 229, 232, .52); background: rgba(54, 41, 68, .18); color: #fffaf6; font-size: 11px; letter-spacing: .04em; backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.primary-action:hover { background: rgba(249, 239, 242, .15); transform: translateY(-2px); }
.hero-detail { position: absolute; z-index: 2; bottom: 34px; display: flex; align-items: center; gap: 17px; color: rgba(249, 240, 244, .7); }
.hero-detail span { width: 56px; height: 1px; background: currentColor; }
.hero-detail i { font: italic 13px var(--serif); letter-spacing: .05em; }
.hero-orbit { position: absolute; border: 1px solid rgba(241, 229, 236, .16); border-radius: 50%; animation: orbit-float 12s ease-in-out infinite alternate; }
.orbit-one { width: 370px; height: 370px; top: -170px; right: -90px; }
.orbit-two { width: 250px; height: 250px; left: -100px; bottom: -95px; animation-delay: -5s; }

.writing-section { max-width: 1320px; margin: 0 auto; padding: 88px clamp(26px, 6vw, 84px) 94px; scroll-margin-top: var(--header); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-heading h2 { margin: 10px 0 0; font: 500 clamp(40px, 4vw, 58px)/1.05 var(--serif); letter-spacing: -.025em; }
.section-heading > p { width: min(330px, 100%); margin: 0; color: var(--muted); font: 16px/1.55 var(--serif); text-align: right; }
.collection-tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 35px 0 34px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters { display: flex; gap: 6px; }
.filters button { min-height: 38px; padding: 9px 17px; border-radius: 2px; background: transparent; color: #756a7c; font-size: 11px; }
.filters button[aria-pressed='true'] { background: rgba(101, 86, 119, .12); color: #4b3e58; box-shadow: inset 0 0 0 1px rgba(99, 81, 115, .2); }
.filters button:hover { background: rgba(101, 86, 119, .08); }
.search-box { display: flex; align-items: center; gap: 10px; width: min(260px, 100%); color: #756b7f; }
.search-box > span { font-size: 23px; }
.search-box input { width: 100%; border: 0; border-bottom: 1px solid transparent; outline: 0; padding: 8px 2px; background: transparent; color: var(--ink); font-size: 11px; }
.search-box input:focus { border-bottom-color: #9887a4; }
.search-status { min-height: 20px; margin-bottom: 8px; color: #7e7383; font-size: 11px; }

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 28px; }
.work-card { display: flex; flex-direction: column; min-width: 0; }
.work-cover { position: relative; height: 245px; overflow: hidden; background: #30283d; box-shadow: 0 15px 32px rgba(62, 46, 76, .12); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }
.work-cover-image { position: absolute; z-index: 0; inset: -8px; background: var(--cover-art, linear-gradient(145deg, #332a47, #9b83a6)); transform: scale(1.02); transition: transform .55s ease, filter .55s ease; }
.cover-music-to-my-ears .work-cover-image, .cover-the-unmarked-box .work-cover-image, .cover-later-baby .work-cover-image, .cover-the-clearing .work-cover-image, .cover-the-painted-door .work-cover-image, .cover-laura-one-richan-zero .work-cover-image { filter: brightness(.58) saturate(.62) contrast(.88); opacity: .88; transform: scale(1.115); }
.work-cover::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(135deg, rgba(28, 20, 39, .08), rgba(23, 17, 32, .42)); }
.cover-music-to-my-ears::after, .cover-the-unmarked-box::after, .cover-later-baby::after, .cover-the-clearing::after, .cover-the-painted-door::after, .cover-laura-one-richan-zero::after { background: radial-gradient(circle at 50% 45%, rgba(57, 43, 67, .08) 0 10%, rgba(31, 23, 41, .3) 50%, rgba(18, 13, 27, .74) 100%), linear-gradient(115deg, rgba(84, 67, 92, .2), rgba(25, 18, 34, .46)); }
.work-card:hover .work-cover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(62, 46, 76, .2); filter: saturate(1.08) brightness(1.05); }
.work-card:hover .work-cover-image { transform: scale(1.135); }
.cover-type { position: absolute; z-index: 2; top: 16px; left: 16px; color: #f3eaf1; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 1px 8px #21142e; }
.cover-mark { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: rgba(250, 238, 242, .72); font: 52px var(--serif); text-shadow: 0 3px 16px #160c21a8; }
.work-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; color: #887c8d; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.work-card h3 { margin: 10px 0 0; font: 500 29px/1.08 var(--serif); letter-spacing: -.015em; }
.work-description { margin: 13px 0 0; color: #716777; font: 15px/1.55 var(--serif); }
.card-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 17px; color: #66576f; font-size: 10px; letter-spacing: .04em; }
.card-link > span { font-size: 17px; }

.about-section { padding: 92px clamp(26px, 9vw, 140px); color: #f4edf3; background: linear-gradient(115deg, #3d324c, #6c5b79 75%, #8e7897); scroll-margin-top: var(--header); }
.about-section .eyebrow { color: #ddd0df; }
.about-section h2 { max-width: 720px; margin: 16px 0 24px; font: 500 clamp(40px, 5vw, 66px)/1.03 var(--serif); letter-spacing: -.03em; }
.about-section > p:last-child { max-width: 660px; margin: 0; color: #ebe2eb; font: 18px/1.7 var(--serif); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 35px clamp(26px, 6vw, 84px); border-top: 1px solid #ded5df; color: #776c7d; font-size: 10px; letter-spacing: .05em; }
footer a { color: #5f5069; }

.reading-view { background: #161321; }
.reading-view .site-header { background: rgba(247, 243, 247, .95); }
.reader-shell { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 26px 75px; }
.reader-tools { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #f0e8f0; font-size: 11px; }
.reader-tools > div { display: flex; gap: 8px; align-items: center; }
.reader-tools > a { padding: 12px 0; text-shadow: 0 1px 5px #000; }
.reader-tools button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(213, 202, 221, .4); border-radius: 3px; background: rgba(31, 25, 42, .58); color: #f5eef4; font-size: 10px; backdrop-filter: blur(8px); }
.reader-tools button[aria-pressed='true'] { background: #f1ebf0; color: #493d52; }
.larger-a { padding-left: 2px; font-size: 16px; }
.reading-page { position: relative; width: min(720px, 100%); margin: 28px auto 0; padding: 64px 64px 45px; border: 1px solid rgba(255, 250, 255, .6); background: rgba(248, 244, 246, .955); box-shadow: 0 28px 75px rgba(4, 3, 12, .36); color: #38323f; }
.reading-heading { margin-bottom: 30px; text-align: center; }
.reading-heading .eyebrow { color: #776a80; font-size: 9px; }
.reading-heading .eyebrow span { padding: 0 4px; }
.reading-heading h1 { margin: 20px -20px; font: 500 clamp(40px, 4vw, 60px)/1.05 var(--serif); letter-spacing: -.035em; }
.byline { margin: 20px 0; color: #79717a; font: italic 14px var(--serif); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 32px auto 10px; color: #8f8099; }
.ornament::before, .ornament::after { content: ''; width: 65px; height: 1px; background: #cfc3d1; }
.reading-body { color: #3d3742; font: var(--body-size)/1.82 var(--serif); overflow-wrap: break-word; }
.reading-body > p, .prose { margin: 0 0 1.25em; }
.section-break { margin: 2.4em 0; color: #8f8099; font-size: .78em; letter-spacing: .35em; text-align: center; }
.stanza { margin: 0 0 1.95em; }
.stanza span, .shape span, .prose-lines span { display: block; }
.prose-lines { margin: 0 0 1.25em; }
.reading-body .shape { margin: 2.5em 0; text-align: center; line-height: 1.95; }
.shape span:last-child { letter-spacing: .1em; }
.impact { font: inherit; }
.acrostic { width: 100%; margin: 42px auto 70px; font-size: var(--body-size); line-height: 2.6; }
.acrostic > div { display: grid; grid-template-columns: 27% 1.25em minmax(0, 1fr); white-space: pre; }
.acrostic > div > span:first-child { text-align: right; }
.acrostic > div > span:last-child { white-space: normal; overflow-wrap: break-word; }
.acrostic b { color: #715a7e; font-weight: 400; text-align: center; }
.chapter { margin: 65px 0 35px; padding-top: 40px; border-top: 1px solid #cec4cf; font: 500 30px/1.3 var(--serif); text-align: center; scroll-margin-top: 110px; }
.chapter:first-child { margin-top: 35px; padding-top: 10px; border-top: 0; }
.chapter-nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 0 20px; border-bottom: 1px solid #d3cbd3; }
.chapter-nav button { min-height: 35px; padding: 5px; border-bottom: 1px solid #b8abbc; background: transparent; color: #66586d; font-size: 10px; }
.next-reading { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 65px; padding-top: 25px; border-top: 1px solid #cec4cf; }
.next-reading a:last-child { text-align: right; }
.next-reading small { display: block; margin-bottom: 10px; color: #877a8c; font-size: 8px; letter-spacing: .15em; }
.next-reading span { font: 19px/1.2 var(--serif); }
.next-reading a:hover span { color: #725c7e; }
.large-type { --body-size: 22px; }

.atmosphere { position: fixed; z-index: 0; inset: var(--header) 0 0; overflow: hidden; pointer-events: none; isolation: isolate; background: #191526; }
.story-photo { position: absolute; inset: 0; background-position: center; background-size: cover; filter: brightness(.72) saturate(.9); transform: scale(1.02); }
.atmosphere::after { content: ''; position: absolute; z-index: 4; inset: 0; background: linear-gradient(0deg, rgba(18, 13, 31, .18), transparent 48%, rgba(17, 13, 28, .08)); }
.atmosphere-music-to-my-ears .story-photo,
.atmosphere-the-unmarked-box .story-photo,
.atmosphere-later-baby .story-photo,
.atmosphere-the-clearing .story-photo,
.atmosphere-the-painted-door .story-photo,
.atmosphere-laura-one-richan-zero .story-photo { filter: brightness(.49) saturate(.72) contrast(.95); transform: scale(1.075); animation: image-breathe 26s ease-in-out infinite alternate; }
.atmosphere-music-to-my-ears::after,
.atmosphere-the-unmarked-box::after,
.atmosphere-later-baby::after,
.atmosphere-the-clearing::after,
.atmosphere-the-painted-door::after,
.atmosphere-laura-one-richan-zero::after { background: radial-gradient(ellipse at center, rgba(16, 12, 25, .08) 0 23%, rgba(18, 13, 28, .44) 75%, rgba(12, 9, 20, .66) 100%), linear-gradient(0deg, rgba(21, 14, 30, .28), transparent 45%, rgba(18, 13, 27, .18)); }
.atmosphere-music-to-my-ears .story-photo { background-position: center 52%; }
.atmosphere-the-unmarked-box .story-photo { background-position: 62% center; }
.atmosphere-later-baby .story-photo { background-position: 55% center; }
.atmosphere-the-clearing .story-photo { background-position: center 64%; }
.atmosphere-the-painted-door .story-photo { background-position: 62% center; }
.atmosphere-laura-one-richan-zero .story-photo { background-position: center 70%; }
.ambient-motes { position: absolute; z-index: 3; inset: 0; }
.ambient-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #eee5ef; box-shadow: 0 0 11px #f0dbef; opacity: .6; animation: mote-drift var(--speed) ease-in-out infinite; animation-delay: var(--delay); }
.atmosphere-holly .ambient-motes i { background: #f0e4e8; box-shadow: 0 0 12px #e4d5ef, 0 0 2px #fff; }
.atmosphere-why-do-i-smile .ambient-motes i { background: #fff1bf; box-shadow: 0 0 14px #f8e6af; }
.atmosphere-passion .ambient-motes i { background: #e7c9fa; box-shadow: 0 0 10px #ddb8fb; opacity: .55; animation-duration: 16s; }
.mist { position: absolute; z-index: 2; left: -15%; width: 125%; height: 24%; background: radial-gradient(ellipse, rgba(219, 198, 233, .32), rgba(168, 181, 212, .13) 42%, transparent 70%); filter: blur(24px); animation: mist-drift 12s ease-in-out infinite alternate; }
.mist-one { top: 50%; }
.mist-two { top: 17%; left: -40%; animation-duration: 16s; animation-delay: -6s; animation-direction: alternate-reverse; }
.ink-glow { position: absolute; z-index: 2; width: 55vw; height: 90%; border-radius: 45%; background: radial-gradient(ellipse, rgba(172, 137, 219, .3), rgba(112, 100, 203, .13) 45%, transparent 68%); filter: blur(45px); mix-blend-mode: screen; animation: ink-drift 15s ease-in-out infinite alternate; }
.ink-one { top: -15%; left: -25%; }
.ink-two { right: -25%; bottom: -25%; animation-delay: -9s; animation-direction: alternate-reverse; }

.feather-field { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.feather-field i { position: absolute; top: -14%; width: 46px; height: 19px; opacity: .5; transform: scale(var(--scale)); animation: feather-fall var(--speed) ease-in-out infinite; animation-delay: var(--delay); }
.feather-field i::before { content: ''; position: absolute; inset: 0; border-radius: 82% 16% 78% 22%; clip-path: polygon(0 52%, 13% 29%, 32% 9%, 52% 0, 70% 12%, 100% 48%, 77% 54%, 62% 67%, 48% 92%, 31% 76%, 13% 66%); background: linear-gradient(145deg, rgba(231, 218, 234, .72), rgba(110, 91, 125, .52)); filter: drop-shadow(0 2px 4px rgba(27, 19, 35, .32)); }
.feather-field i::after { content: ''; position: absolute; left: 47%; top: 43%; width: 58%; height: 1px; transform: rotate(-7deg); transform-origin: left; background: rgba(231, 218, 235, .52); box-shadow: 11px -3px 0 -0.2px rgba(219, 203, 226, .24), 18px 3px 0 -0.2px rgba(219, 203, 226, .2); }

.music-halo { position: absolute; z-index: 2; right: -6%; top: 12%; width: 52%; height: 76%; background: radial-gradient(ellipse, rgba(255, 190, 103, .26), rgba(191, 146, 210, .09) 43%, transparent 70%); filter: blur(24px); mix-blend-mode: screen; animation: music-glow 8s ease-in-out infinite alternate; }
.sound-rings { position: absolute; z-index: 3; right: 6%; top: 28%; width: 330px; height: 330px; }
.sound-rings i { position: absolute; inset: calc(var(--ring) * 30px); border: 1px solid rgba(251, 222, 177, .2); border-radius: 50%; opacity: 0; animation: sound-ring 5.5s ease-out infinite; animation-delay: var(--delay); }
.porch-light { position: absolute; z-index: 3; right: 4%; top: 2%; width: 43%; height: 75%; background: radial-gradient(circle at 63% 42%, rgba(255, 185, 94, .26), rgba(126, 107, 76, .07) 25%, transparent 56%); mix-blend-mode: screen; animation: porch-flicker 9s steps(1, end) infinite; }
.forest-fog, .alley-haze { position: absolute; z-index: 2; left: -20%; width: 140%; height: 24%; background: radial-gradient(ellipse, rgba(190, 209, 209, .2), rgba(123, 148, 150, .08) 48%, transparent 72%); filter: blur(24px); animation: story-fog 18s ease-in-out infinite alternate; }
.fog-low { bottom: 2%; }
.fog-high { top: 17%; opacity: .42; animation-duration: 24s; animation-direction: alternate-reverse; }
.motel-sunbeam { position: absolute; z-index: 2; right: 4%; top: -35%; width: 38%; height: 150%; background: linear-gradient(106deg, transparent 20%, rgba(255, 205, 137, .2) 48%, rgba(255, 224, 178, .06) 62%, transparent 78%); transform: rotate(6deg); mix-blend-mode: screen; animation: sunbeam-breathe 12s ease-in-out infinite alternate; }
.dust-field, .falling-leaves, .paper-fragments, .paint-flakes { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.dust-field i { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: rgba(255, 225, 181, .74); box-shadow: 0 0 7px rgba(255, 214, 160, .44); animation: dust-drift var(--speed) ease-in-out infinite; animation-delay: var(--delay); }
.paper-fragments i { position: absolute; top: -15%; width: var(--size); height: calc(var(--size) + 8px); clip-path: polygon(5% 0, 92% 4%, 100% 80%, 78% 100%, 2% 93%); background: repeating-linear-gradient(0deg, rgba(101, 76, 67, .28) 0 1px, transparent 1px 5px), linear-gradient(145deg, rgba(234, 214, 181, .7), rgba(163, 129, 105, .38)); box-shadow: 0 4px 10px rgba(35, 23, 22, .24); opacity: .4; animation: paper-drift var(--speed) ease-in-out infinite; animation-delay: var(--delay); }
.lantern-pulse { position: absolute; z-index: 3; left: -2%; bottom: 6%; width: 35%; height: 56%; background: radial-gradient(circle at 36% 61%, rgba(255, 171, 66, .42), rgba(255, 126, 24, .12) 26%, transparent 62%); mix-blend-mode: screen; animation: lantern-breathe 4.8s ease-in-out infinite; }
.falling-leaves i { position: absolute; top: -12%; width: var(--size); height: calc(var(--size) * .62); border-radius: 78% 12% 78% 12%; background: rgba(183, 93, 43, .58); box-shadow: 0 0 2px rgba(243, 177, 89, .38); animation: leaf-fall var(--speed) linear infinite; animation-delay: var(--delay); }
.door-light { position: absolute; z-index: 3; right: -3%; top: 5%; width: 36%; height: 90%; background: radial-gradient(ellipse at 72% 48%, rgba(255, 177, 71, .38), rgba(255, 123, 34, .1) 25%, transparent 65%); filter: blur(8px); mix-blend-mode: screen; animation: door-breathe 7s ease-in-out infinite alternate; }
.paint-flakes i { position: absolute; top: -10%; width: var(--size); height: calc(var(--size) - 2px); clip-path: polygon(5% 22%, 57% 0, 100% 30%, 72% 100%, 16% 83%); background: rgba(190, 131, 64, .58); box-shadow: 0 0 2px rgba(236, 176, 95, .2); animation: paint-fall var(--speed) ease-in infinite; animation-delay: var(--delay); }
.haze-one { bottom: 0; opacity: .48; }
.haze-two { top: 18%; opacity: .28; animation-duration: 25s; animation-direction: alternate-reverse; }
.television-flicker { position: absolute; z-index: 2; inset: 0; background: linear-gradient(96deg, rgba(128, 137, 255, .15), transparent 36%); mix-blend-mode: screen; animation: television-flicker 6.4s steps(1, end) infinite; }
.headlight-sweep { position: absolute; z-index: 3; right: -16%; bottom: -30%; width: 72%; height: 95%; background: radial-gradient(ellipse at 75% 65%, rgba(255, 234, 186, .38), rgba(218, 187, 245, .11) 35%, transparent 67%); transform: rotate(-10deg); mix-blend-mode: screen; animation: headlights-arrive 9s ease-in-out infinite; }

.rain-scene { background: #17212f; }
.bookshop-image { position: absolute; left: 50%; top: 50%; width: max(100vw, calc((100dvh - var(--header)) * 1.77683)); height: max(calc(100dvh - var(--header)), 56.28vw); transform: translate(-50%, -50%); background: url('./images/rainy-bookshop-background.jpg') center/100% 100%; }
.window-mask { position: absolute; inset: 0; overflow: hidden; isolation: isolate; clip-path: polygon(28.3% 0, 91.5% 0, 91.5% 54.5%, 84% 54.5%, 81.4% 58.5%, 81.4% 71%, 77% 78.5%, 70% 78.5%, 70% 82%, 28.3% 77%); }
.outside-rain { position: absolute; inset: -20% -8% -15%; overflow: hidden; transform: skewX(-4deg); }
.outside-rain i { position: absolute; top: -18%; width: var(--width); height: var(--length); opacity: var(--opacity); background: linear-gradient(transparent, rgba(218, 230, 255, .7) 26%, rgba(170, 198, 224, .4) 76%, transparent); animation: realistic-rain var(--speed) linear infinite; animation-delay: var(--delay); }
.rain-far { z-index: 0; opacity: .48; filter: blur(1.3px); }
.rain-middle { z-index: 1; opacity: .68; filter: blur(.55px); }
.rain-near { z-index: 2; opacity: .84; filter: blur(.15px); }
.glass-reflection { position: absolute; z-index: 3; inset: 0; background: linear-gradient(110deg, rgba(218, 230, 255, .015) 20%, rgba(211, 220, 250, .09) 43%, transparent 58%), linear-gradient(0deg, rgba(21, 35, 59, .13), transparent 70%); backdrop-filter: blur(.15px); }
.glass-rivulets { position: absolute; z-index: 4; inset: 0; overflow: hidden; }
.glass-rivulets i { position: absolute; width: 1px; height: var(--height); border-radius: 60%; opacity: .2; background: linear-gradient(transparent, rgba(220, 232, 255, .5) 16%, rgba(104, 134, 172, .18) 76%, transparent); box-shadow: 1px 0 1px rgba(231, 239, 255, .15); animation: rivulet-run var(--speed) ease-in infinite; animation-delay: var(--delay); }
.glass-beads { position: absolute; z-index: 5; inset: 0; }
.glass-beads i { position: absolute; width: var(--size); height: calc(var(--size) * 1.35); border: 1px solid rgba(218, 228, 255, .26); border-radius: 48% 48% 58% 58%; background: radial-gradient(circle at 30% 18%, rgba(244, 248, 255, .72) 0 8%, rgba(172, 194, 230, .13) 25%, rgba(24, 39, 74, .17) 65%, rgba(216, 227, 255, .3)); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .2), inset -1px -1px 1px rgba(16, 24, 53, .42), 0 1px 2px rgba(18, 33, 59, .45); animation: bead-slide var(--speed) cubic-bezier(.55, .04, .68, .53) infinite; animation-delay: var(--delay); }
.rain-splashes { position: absolute; z-index: 6; inset: 0; overflow: hidden; }
.rain-splashes i { position: absolute; width: var(--size); height: calc(var(--size) * .45); border-radius: 50%; border: 1px solid rgba(206, 225, 252, .42); opacity: 0; animation: splash-bloom var(--speed) ease-out infinite; animation-delay: var(--delay); }

@keyframes orbit-float { from { transform: translate3d(-10px, -6px, 0) scale(.95); } to { transform: translate3d(18px, 14px, 0) scale(1.08); } }
@keyframes image-breathe { from { transform: scale(1.075) translate3d(-.45%, -.2%, 0); } to { transform: scale(1.105) translate3d(.45%, .3%, 0); } }
@keyframes feather-fall { 0% { transform: translate3d(0, -10vh, 0) rotate(-18deg) scale(var(--scale)); opacity: 0; } 12% { opacity: .52; } 45% { transform: translate3d(var(--sway), 48vh, 0) rotate(170deg) scale(var(--scale)); } 78% { transform: translate3d(0, 91vh, 0) rotate(330deg) scale(var(--scale)); opacity: .44; } 100% { transform: translate3d(var(--sway), 122vh, 0) rotate(var(--turn)) scale(var(--scale)); opacity: 0; } }
@keyframes mote-drift { 0%, 100% { transform: translate(0, 14px); opacity: .18; } 45% { transform: translate(17px, -24px); opacity: .85; } 75% { transform: translate(-8px, -40px); opacity: .4; } }
@keyframes mist-drift { from { transform: translateX(-10%) scaleY(.8); opacity: .4; } to { transform: translateX(13%) scaleY(1.2); opacity: .85; } }
@keyframes ink-drift { from { transform: translate(-5%, -3%) scale(.85); opacity: .4; } to { transform: translate(8%, 8%) scale(1.15); opacity: .85; } }
@keyframes music-glow { from { transform: scale(.92); opacity: .42; } to { transform: scale(1.08); opacity: .78; } }
@keyframes sound-ring { 0% { transform: scale(.55); opacity: 0; } 18% { opacity: .34; } 78%, 100% { transform: scale(1.22); opacity: 0; } }
@keyframes porch-flicker { 0%, 18%, 22%, 63%, 67%, 100% { opacity: .72; } 20%, 65% { opacity: .44; } 21%, 66% { opacity: .85; } }
@keyframes story-fog { from { transform: translateX(-9%) scaleY(.8); opacity: .2; } to { transform: translateX(11%) scaleY(1.17); opacity: .58; } }
@keyframes sunbeam-breathe { from { opacity: .42; transform: rotate(6deg) translateX(-2%); } to { opacity: .74; transform: rotate(6deg) translateX(3%); } }
@keyframes dust-drift { 0%, 100% { transform: translate3d(-5px, 18px, 0); opacity: .1; } 45% { transform: translate3d(13px, -20px, 0); opacity: .68; } 75% { transform: translate3d(-9px, -32px, 0); opacity: .28; } }
@keyframes paper-drift { 0% { transform: translate3d(0, -12vh, 0) rotate(-14deg); opacity: 0; } 15% { opacity: .36; } 48% { transform: translate3d(var(--sway), 48vh, 0) rotate(48deg); } 100% { transform: translate3d(0, 118vh, 0) rotate(132deg); opacity: 0; } }
@keyframes lantern-breathe { 0%, 100% { opacity: .58; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes leaf-fall { from { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 12% { opacity: .6; } to { transform: translate3d(var(--sway), 125vh, 0) rotate(560deg); opacity: .05; } }
@keyframes door-breathe { from { opacity: .48; transform: scale(.96); } to { opacity: .9; transform: scale(1.07); } }
@keyframes paint-fall { 0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; } 14% { opacity: .48; } 100% { transform: translate3d(var(--sway), 116vh, 0) rotate(420deg); opacity: 0; } }
@keyframes television-flicker { 0%, 12%, 15%, 39%, 42%, 71%, 75%, 100% { opacity: .45; } 13%, 40%, 73% { opacity: .17; } 14%, 41%, 74% { opacity: .62; } }
@keyframes headlights-arrive { 0%, 22% { opacity: .18; transform: translateX(14%) rotate(-10deg) scale(.88); } 52%, 72% { opacity: .82; transform: translateX(0) rotate(-10deg) scale(1.04); } 100% { opacity: .24; transform: translateX(-4%) rotate(-10deg) scale(1.1); } }
@keyframes realistic-rain { from { transform: translate3d(0, -22vh, 0); } to { transform: translate3d(var(--drift), 142vh, 0); } }
@keyframes rivulet-run { 0%, 18% { transform: translate3d(0, -12px, 0) scaleY(.22); opacity: 0; } 28% { opacity: .34; } 82% { opacity: .17; } 100% { transform: translate3d(var(--bend), 116vh, 0) scaleY(1.16); opacity: 0; } }
@keyframes bead-slide { 0%, 30% { transform: translate(0, 0) scale(.87); opacity: .48; } 34% { transform: translate(0, 1px) scale(1); opacity: .9; } 44% { transform: translate(.5px, 4px) scale(.92, 1.1); opacity: .82; } 86%, 100% { transform: translate(1px, var(--travel)) scale(.82, 1.28); opacity: .08; } }
@keyframes splash-bloom { 0%, 68% { transform: scale(.25); opacity: 0; } 72% { transform: scale(.6); opacity: .42; } 100% { transform: translateY(-6px) scale(2.4, 1.1); opacity: 0; } }
.motion-paused .hero-orbit, .motion-paused .atmosphere * { animation-play-state: paused !important; }
.empty { padding: 60px 30px; text-align: center; }

@media (max-width: 960px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading > p { width: 260px; }
}

@media (max-width: 700px) {
  :root { --header: 70px; --body-size: 18px; }
  .site-header { padding: 0 20px; }
  .brand-copy { display: none; }
  .site-header nav { gap: 20px; }
  .hero { min-height: 570px; padding-top: 70px; }
  .hero h1 { font-size: 62px; }
  .hero-intro { font-size: 17px; }
  .writing-section { padding: 62px 24px 68px; }
  .section-heading { align-items: start; }
  .section-heading > p { display: none; }
  .collection-tools { flex-wrap: wrap; }
  .search-box { width: 100%; padding-top: 7px; border-top: 1px solid #dfd6e1; }
  .work-grid { gap: 38px 18px; }
  .work-cover { height: 190px; }
  .work-card h3 { font-size: 24px; }
  .work-meta { flex-wrap: wrap; font-size: 8px; }
  .work-description { font-size: 14px; }
  .about-section { padding: 70px 25px; }
  .about-section h2 { font-size: 44px; }
  footer { flex-wrap: wrap; padding: 30px 25px; }
  .reader-shell { padding: 0 14px 40px; }
  .reader-tools { min-height: 66px; font-size: 10px; }
  .reader-tools button { padding: 0 9px; font-size: 9px; }
  .reading-page { margin-top: 70px; padding: 46px 24px 32px; }
  .reading-heading h1 { margin-inline: -3px; font-size: 42px; }
  .reading-body { line-height: 1.86; }
  .next-reading { gap: 18px; }
  .next-reading span { font-size: 17px; }
  .large-type { --body-size: 21px; }
  .ambient-motes i:nth-child(even) { --x: 96% !important; }
  .ambient-motes i:nth-child(odd) { --x: 1% !important; }
  .atmosphere-holly .ambient-motes i { --size: 4px !important; }
  .mist { filter: blur(14px); }
  .ink-glow { width: 95vw; }
  .ink-one { left: -45%; }
  .ink-two { right: -45%; }
}

@media (max-width: 430px) {
  .site-header nav { gap: 14px; }
  .site-header nav a { font-size: 10px; }
  .hero h1 { font-size: 51px; }
  .hero-kicker { font-size: 23px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-cover { height: 235px; }
  .reading-page { padding-inline: 20px; }
  .reading-heading h1 { font-size: 37px; }
  .reader-tools { gap: 7px; }
  .reader-tools > div { gap: 5px; }
  .reader-tools button { font-size: 8px; }
  .acrostic { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}