/* Vesper's editorial pages. Shared company styling remains in styles.css. */
.vesper-page { --corner-mint: #a7c8ba; --corner-gold: #d9c49c; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10; padding: .7rem 1rem; background: #f3eee4; color: #1e2624; }
.skip-link:focus { top: 1rem; }
.corner-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); align-items: center; gap: 5rem; padding: clamp(4rem, 9vw, 7.5rem) 0 5rem; }
.corner-intro h1 { font-size: clamp(4.5rem, 9vw, 8rem); line-height: .98; margin: 1.6rem 0 2rem; }
.corner-intro h1 span { background-image: linear-gradient(100deg, #d9e7de, #94bcae); }
.corner-welcome { max-width: 35rem; font-size: 1.14rem; line-height: 1.85; color: #dedbe4; }
.corner-note { max-width: 34rem; color: var(--muted); }
.corner-link { display: inline-flex; align-items: center; gap: 1.4rem; margin-top: 1.4rem; color: var(--corner-mint); text-underline-offset: .4rem; text-decoration-thickness: 1px; }
.corner-link:hover { color: #e9f5ed; }
.margin-note { max-width: 17rem; padding: 2rem 0 2rem 2.2rem; border-left: 1px solid #668a7c70; color: #c6d6cc; }
.margin-star { font-size: 1.8rem; color: var(--corner-gold); }
.margin-note p { font-family: Georgia, serif; font-size: 1.65rem; line-height: 1.55; font-style: italic; }
.signature { font-family: var(--serif); color: var(--corner-mint); font-size: 2rem; }
.shelf { padding: 3.4rem 0 6rem; border-top: 1px solid var(--line); }
.shelf-label { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 3.2rem; }
.shelf-label > span { color: var(--corner-mint); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; }
.shelf-label h2 { max-width: 28rem; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.13; }
.featured-story { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.25fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.featured-story + .featured-story { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--line); }
.book-cover.gnome-cover { background: linear-gradient(110deg, #493326 0%, #35251e 4%, #463226 7%, #2c211b 100%); border-color: #b4966d70; }
.book-cover.waltz-cover { background: linear-gradient(110deg, #2b4253 0%, #1b2f40 4%, #2a4152 7%, #172a3b 100%); border-color: #86a0ac70; }
.cover-link { display: block; max-width: 360px; width: 100%; text-decoration: none; margin-inline: auto; }
.book-cover { position: relative; min-height: 460px; padding: 25px 30px 24px; border: 1px solid #75988770; background: linear-gradient(110deg, #20362f 0%, #182b25 4%, #20372e 7%, #12261f 100%); box-shadow: 10px 18px 40px #0007, inset 7px 0 0 #ffffff07; color: #e4d2ab; text-align: center; transition: transform 180ms ease; }
.cover-link:hover .book-cover { transform: translateY(-4px); }
.cover-rule { height: 1px; background: #bba77d80; }
.cover-top { margin: 20px 0 24px; text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; }
.cover-title { margin: 0; font-family: Georgia, serif; font-size: clamp(1.6rem, 2.7vw, 2.1rem); line-height: 1.28; }
.cover-title em { font-size: .8em; font-weight: normal; }
.cover-window { display: block; width: min(90%, 205px); height: auto; margin: 18px auto 0; }
.cover-bottom { font-family: Georgia, serif; font-size: .75rem; margin: 10px 0 20px; font-style: italic; }
.featured-copy h3 { font-family: var(--serif); font-size: clamp(2.7rem, 4.7vw, 4rem); font-weight: 400; line-height: 1.08; margin: 1rem 0 1.4rem; }
.featured-copy h3 a { text-decoration: none; }
.featured-copy h3 a:hover { color: var(--corner-mint); }
.featured-copy > p:not(.eyebrow):not(.authorship-note):not(.story-meta) { max-width: 35rem; font-size: 1.1rem; color: #c7c3d0; }
.story-meta { display: flex; flex-wrap: wrap; gap: .5rem .8rem; color: #aaa6b8; font-size: .82rem; margin: 1.7rem 0; }
.authorship-note { color: #aaa6b8; font-size: .75rem; margin-top: 1.3rem; }
.reader-main { width: min(980px, calc(100% - 48px)); }
.story-heading { max-width: 780px; margin: 0 auto; padding: 3rem 0 2.5rem; }
.back-link { display: inline-block; margin-bottom: 3.2rem; font-size: .84rem; color: var(--corner-mint); text-decoration: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: .3rem; }
.story-heading h1 { font-size: clamp(3rem, 6.5vw, 5.1rem); line-height: 1.05; margin: 1.4rem 0; max-width: 760px; }
.story-deck { font-family: Georgia, serif; font-style: italic; color: #c4d3ca; font-size: 1.2rem; }
.story-heading .story-meta { margin: 1.6rem 0 .5rem; }
.story-heading .authorship-note { margin-top: .4rem; }
.reading-paper { background: #f2ede3; color: #282e2b; border-top: 4px solid #a7c8ba; padding: clamp(2rem, 6vw, 5rem) clamp(1.4rem, 7vw, 6rem); box-shadow: 0 20px 80px #0003; }
.story-prose { max-width: 66ch; margin-inline: auto; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.08rem, 1.7vw, 1.2rem); line-height: 1.85; }
.story-prose p { margin: 0 0 1.25em; }
.story-prose > p:first-child::first-letter { float: left; font-family: Georgia, serif; font-size: 4.4em; line-height: .84; padding: .1em .12em 0 0; color: #4b6c5e; }
.scene-break { text-align: center; color: #6b7b69; margin: 2.7rem 0; font-size: 1.1rem; }
.story-prose .story-notice { max-width: 25rem; margin: 1.8rem auto; padding: 1.25rem; border-top: 1px solid #b1b6a5; border-bottom: 1px solid #b1b6a5; text-align: center; font-size: .9em; letter-spacing: .12em; line-height: 1.8; }
.story-end { text-align: center; margin-top: 2.6rem; color: #637a69; }
.story-end p { margin: .4rem 0 0; text-transform: uppercase; letter-spacing: .2em; font-size: .65rem; }
.reader-afterword { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding: 2rem 0 4rem; color: #c7c3d0; }
.reader-afterword .corner-link { margin: 0; }
.vesper-page a:focus-visible { outline: 2px solid var(--corner-mint); outline-offset: 6px; }
.vesper-page footer a { text-underline-offset: .3rem; }
@media (max-width: 820px) {
  .corner-intro { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 3.5rem; }
  .margin-note { max-width: none; display: flex; align-items: center; gap: 1.3rem; padding: 1rem 0; border-left: 0; border-top: 1px solid #668a7c50; }
  .margin-note p { font-size: 1.2rem; max-width: 22rem; }
  .signature { margin-left: auto; font-size: 1.6rem; }
  .shelf-label { flex-direction: column; gap: 1rem; }
  .featured-story { grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr); gap: 2rem; }
  .book-cover { min-height: 0; padding: 20px; }
  .cover-title { font-size: 1.6rem; }
  .featured-copy h3 { font-size: 2.65rem; }
}
@media (max-width: 580px) {
  .corner-intro h1 { font-size: clamp(4rem, 17vw, 6rem); }
  .corner-intro .eyebrow { font-size: .65rem; }
  .corner-welcome { font-size: 1.03rem; }
  .margin-note { gap: .8rem; }
  .margin-note p { font-size: 1.1rem; }
  .signature { font-size: 1.35rem; }
  .featured-story { grid-template-columns: 1fr; gap: 2rem; }
  .cover-link { max-width: 310px; }
  .book-cover { padding: 25px; }
  .cover-title { font-size: 2rem; }
  .featured-copy h3 { font-size: 2.7rem; }
  .reader-main { width: calc(100% - 24px); }
  .story-heading { padding-top: 2rem; padding-inline: 3px; }
  .story-heading h1 { font-size: 3.1rem; }
  .back-link { margin-bottom: 2.2rem; }
  .reading-paper { padding-inline: 1.2rem; }
  .reader-afterword { padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) { .book-cover { transition: none; } }
@media print {
  html, body.vesper-page { background: white; color: black; }
  .site-header, footer, .skip-link, .back-link, .reader-afterword { display: none; }
  .reader-main { width: 100%; }
  .story-heading { padding-top: 0; }
  .story-heading h1, .story-meta, .story-deck, .authorship-note { color: black; }
  .reading-paper { background: white; border: 0; box-shadow: none; padding: 0; }
  .story-prose { max-width: none; font-size: 11pt; line-height: 1.6; }
  .story-prose p { orphans: 3; widows: 3; }
}