:root {
  --ivory: #f2ead9;
  --ivory-muted: #c5baa8;
  --ink: #080b09;
  --forest-black: #040a07;
  --forest: #07140e;
  --moss: #10271a;
  --moss-light: #1b3d29;
  --wine: #5e1629;
  --wine-dark: #2b0b17;
  --plum: #3c1836;
  --plum-dark: #1d0d1d;
  --card-green: #0d1e18;
  --gold: #c9a3aa;
  --gold-pale: #f0dce0;
  --line: rgba(201, 163, 170, 0.34);
  --line-soft: rgba(242, 234, 217, 0.12);
  --title-display: Garamond, Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --display: var(--title-display);
  --body: Baskerville, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --label: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% 12%, rgba(78, 25, 56, .22), transparent 34rem),
    linear-gradient(160deg, var(--forest-black), var(--forest) 45%, #050a07);
  color: var(--ivory);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.7;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .18;
  background-image:
    linear-gradient(90deg, transparent 49.8%, rgba(201,163,170,.12) 50%, transparent 50.2%),
    radial-gradient(circle at center, transparent 0 4rem, rgba(201,163,170,.07) 4.05rem 4.1rem, transparent 4.15rem);
  background-size: 180px 180px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .75rem; left: 1rem; z-index: 100; padding: .7rem 1rem; background: var(--gold-pale); color: var(--ink); font-family: var(--label); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.ambient-glow { position: fixed; z-index: -1; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(120px); opacity: .12; pointer-events: none; }
.ambient-glow--one { top: 28%; left: -16rem; background: #376e44; }
.ambient-glow--two { right: -16rem; bottom: 4%; background: #761c3c; }

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1220px, calc(100% - 3rem));
  min-height: 92px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(240, 220, 224, .2);
}

.sigil { position: relative; justify-self: start; display: grid; width: 46px; height: 54px; place-items: center; color: var(--gold-pale); text-decoration: none; }
.sigil::before { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50% 50% 7px 7px / 64% 64% 7px 7px; content: ""; }
.sigil span { font-size: 1.25rem; }
.top-nav { display: flex; gap: clamp(1.2rem, 2.8vw, 2.75rem); }
.top-nav a, .mobile-nav a { position: relative; color: rgba(242,234,217,.8); font-family: var(--label); font-size: .86rem; font-style: italic; letter-spacing: .09em; text-decoration: none; text-transform: none; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.top-nav a::after { position: absolute; right: 50%; bottom: -.7rem; left: 50%; height: 1px; background: var(--gold); content: ""; transition: right .2s, left .2s; }
.top-nav a:hover, .top-nav a[aria-current], .mobile-nav a:hover { color: var(--gold-pale); }
.top-nav a:hover::after, .top-nav a[aria-current]::after { right: 0; left: 0; }
.menu-button { display: none; justify-self: end; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 50% 50% 5px 5px; background: rgba(4,10,7,.6); color: var(--ivory); }
.menu-button span:not(.sr-only) { display: block; height: 1px; margin: 5px 0; background: currentColor; }
.mobile-nav { position: absolute; top: 78px; right: 0; left: 0; padding: 1.5rem; border: 1px solid var(--line); background: rgba(5,14,9,.97); box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(14px); }
.mobile-nav a { display: block; padding: .7rem; text-align: center; }

main {
  min-height: calc(100vh - 180px);
  background: linear-gradient(
    to bottom,
    var(--forest) 0,
    var(--forest) 100vh,
    #081a12 calc(100vh + 14rem),
    #07150f calc(100vh + 34rem),
    #050a07 100%
  );
}
.main--interior { background: var(--forest); }
.hero { position: relative; display: flex; min-height: max(820px, 100vh); flex-direction: column; align-items: center; justify-content: center; padding: 8rem 1.5rem 13rem; overflow: hidden; text-align: center; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.06) brightness(.75); animation: breathe 18s ease-in-out infinite alternate; }
.hero__veil { position: absolute; inset: 0; z-index: -2; background:
    linear-gradient(
      to bottom,
      rgba(2,7,4,.24) 0%,
      rgba(3,9,6,.14) 40%,
      rgba(4,11,7,.34) 62%,
      rgba(5,13,9,.68) 78%,
      rgba(6,16,11,.9) 91%,
      var(--forest) 100%
    ),
    radial-gradient(ellipse at center, rgba(4,10,7,.08) 0 20%, rgba(4,10,7,.74) 78%); }
.hero::before, .hero::after { display: none; }
.eyebrow { margin: 0 0 1.15rem; color: var(--gold-pale); font-family: var(--label); font-size: .86rem; font-style: italic; font-weight: 400; letter-spacing: .15em; text-transform: lowercase; }
.hero .eyebrow { text-shadow: 0 2px 14px #000; }
.title-frame { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 3vw, 2.6rem); }
.title-frame h1 { max-width: 980px; margin: 0; color: #f8edf0; font-family: var(--title-display); font-size: clamp(3.5rem, 8.5vw, 7.8rem); font-weight: 400; letter-spacing: -.045em; line-height: .92; text-shadow: 0 3px 24px rgba(0,0,0,.9), 0 0 42px rgba(95,22,50,.6); text-wrap: balance; }
.title-ornament { color: var(--gold-pale); font-size: clamp(.8rem, 1.5vw, 1.2rem); text-shadow: 0 0 16px #ffe5a3; }
.introduction { max-width: 630px; margin: 2rem auto 0; color: #e7dce0; font-size: clamp(1.05rem, 2vw, 1.24rem); font-style: italic; letter-spacing: .025em; line-height: 1.78; text-shadow: 0 2px 12px #000; }
.scroll-cue { display: flex; align-items: center; margin-top: 2.4rem; padding: .48rem .8rem; border-bottom: 1px solid var(--gold); color: var(--gold-pale); font-family: var(--label); font-size: .76rem; font-style: italic; letter-spacing: .08em; text-decoration: none; }

.category-section, .listing-page { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 7rem 0 9rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.section-heading--hero { position: absolute; right: 0; bottom: 0; left: 0; width: min(1180px, calc(100% - 3rem)); margin: 0 auto; text-align: left; }
.section-heading.section-heading--hero h2 {
  margin-left: auto;
  color: var(--ivory);
  font-size: clamp(2.55rem, 6.2vw, 5.2rem);
  text-align: right;
  text-shadow: 0 2px 18px rgba(0,0,0,.85);
}
.section-heading h2, .page-heading h1 { margin: 0 0 1.6rem; font-family: var(--display); font-size: clamp(2.8rem, 7vw, 5.9rem); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.category-card { --card-accent: var(--card-green); position: relative; display: flex; width: calc((100% - 2.4rem) / 3); aspect-ratio: 1 / 1; flex-direction: column; align-items: center; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2.2rem); overflow: hidden; border: 1px solid rgba(205,220,207,.16); border-radius: 24px; background: var(--card-accent);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  color: var(--ivory);
  text-align: center;
  text-decoration: none;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.category-card:hover { z-index: 2; border-color: rgba(240,220,224,.42); box-shadow: 0 23px 54px rgba(0,0,0,.36); transform: translateY(-7px); }
.category-icon { position: absolute; top: clamp(1.25rem, 2vw, 1.65rem); left: clamp(1.35rem, 2.4vw, 1.9rem); display: grid; width: 34px; height: 30px; place-items: start; margin: 0; color: var(--gold-pale); }
.icon-art { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: left top; opacity: .84; filter: grayscale(1) brightness(0) invert(1); }
.icon-art--poetry { width: 29px; height: 29px; filter: none; }
.icon-art--stories { width: 28px; filter: none; }
.icon-art--fragments { width: 21px; }
.icon-art--letters { width: 32px; height: 30px; opacity: .62; }
.icon-art--reflections { width: 27px; height: 27px; }
.icon-art--collections { width: 30px; filter: none; }
.category-card h3 { display: flex; width: 100%; min-height: 2em; align-items: flex-end; justify-content: center; margin: 0 0 .6rem; font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 400; line-height: 1; }
.category-card p { min-height: 3em; max-width: 24rem; margin: 0; color: #d8c9cc; font-size: .98rem; font-style: italic; line-height: 1.5; }

.listing-page { padding-top: 9.5rem; }
.back-link { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 5rem; color: var(--ivory-muted); font-family: var(--label); font-size: .86rem; font-style: italic; letter-spacing: .08em; text-decoration: none; }
.back-link:hover { color: var(--gold-pale); }
.page-heading { max-width: 840px; margin-bottom: 4rem; }
.page-heading > p:last-child { max-width: 650px; margin: 0; color: var(--ivory-muted); font-size: 1.18rem; font-style: italic; }
.page-heading--collection { max-width: 900px; }
.piece-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.piece-card { position: relative; display: flex; min-height: 315px; flex-direction: column; padding: clamp(1.5rem, 4vw, 2.3rem); overflow: hidden; border: 1px solid rgba(205,220,207,.16); border-radius: 24px; background: var(--card-green);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}
a.piece-card:hover { border-color: rgba(240,220,224,.42); box-shadow: 0 23px 54px rgba(0,0,0,.36); transform: translateY(-7px); }
.piece-card__top { display: flex; justify-content: space-between; color: var(--gold); font-family: var(--label); font-size: .8rem; font-style: italic; letter-spacing: .08em; }
.piece-card h3 { max-width: 520px; margin: 3.1rem 0 1rem; font-family: var(--display); font-size: clamp(2.35rem, 4.4vw, 3.35rem); font-weight: 400; line-height: 1.08; }
.piece-card p { max-width: 590px; margin: 0 0 2rem; color: var(--ivory-muted); font-size: 1.06rem; }
.piece-card__link { margin-top: auto; color: var(--gold-pale); font-family: var(--label); font-size: .84rem; font-style: italic; letter-spacing: .08em; }
.piece-card__link b { margin-left: .5rem; transition: margin .2s; }
.piece-card:hover .piece-card__link b { margin-left: .9rem; }

.collection-grid { display: grid; gap: 1.2rem; }
.collection-card { position: relative; display: grid; grid-template-columns: 100px 1fr auto; grid-template-rows: auto auto auto; column-gap: 2rem; align-items: center; padding: 2.3rem; overflow: hidden; border: 1px solid rgba(205,220,207,.16); border-radius: 24px; background: var(--card-green); box-shadow: 0 18px 50px rgba(0,0,0,.25); text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s; }
.collection-card:hover { border-color: rgba(240,220,224,.42); box-shadow: 0 23px 54px rgba(0,0,0,.36); transform: translateY(-7px); }
.collection-sigil { grid-row: 1 / 4; display: grid; width: 78px; height: 90px; place-items: center; border: 1px solid var(--line); border-radius: 50% 50% 5px 5px; color: var(--gold-pale); font-size: 2rem; }
.collection-count { margin: 0; color: var(--gold); font-family: var(--label); font-size: .8rem; font-style: italic; letter-spacing: .08em; }
.collection-card h2 { margin: .35rem 0; font-family: var(--display); font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 400; line-height: 1; }
.collection-card h2 + p { max-width: 650px; margin: 0; color: var(--ivory-muted); }
.collection-card > span { grid-column: 3; grid-row: 1 / 4; color: var(--gold-pale); font-family: var(--label); font-size: .82rem; font-style: italic; letter-spacing: .08em; }

.reader { position: relative; width: min(760px, calc(100% - 3rem)); margin: 0 auto; padding: 10rem 0 9rem; }
.reader::before { position: absolute; top: 6.5rem; bottom: 5rem; left: 50%; z-index: -1; width: min(980px, calc(100vw - 2rem)); border: 1px solid rgba(201,163,170,.13); border-radius: 48% 48% 0 0 / 12% 12% 0 0; background: linear-gradient(rgba(18,42,27,.2), transparent 24%); content: ""; transform: translateX(-50%); }
.reader__heading { margin: 1rem 0 3rem; text-align: center; }
.reader__heading h1 { margin: 0; font-family: var(--display); font-size: clamp(3.7rem, 8.5vw, 7.2rem); font-weight: 400; letter-spacing: -.025em; line-height: .94; text-wrap: balance; }
.reader__meta { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; color: var(--ivory-muted); font-family: var(--label); font-size: .82rem; font-style: italic; letter-spacing: .07em; }
.reader__meta span:nth-child(2) { color: var(--gold); }
.reader__ornament { margin: 3rem 0; color: var(--gold); font-size: 1.6rem; text-align: center; }
.reader__body { font-size: clamp(1.16rem, 2.2vw, 1.36rem); letter-spacing: .018em; line-height: 1.98; }
.reader__body p { margin: 0 0 1.9rem; }
.reader__body p:first-child::first-letter { float: left; margin: .12em .13em 0 0; color: var(--gold-pale); font-family: var(--display); font-size: 4.5em; line-height: .72; }
.reader__end { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--ivory-muted); text-align: center; }
.reader__end > span { color: var(--gold); }
.reader__end p { margin: .6rem 0; font-family: var(--label); font-size: .8rem; font-style: italic; letter-spacing: .08em; }
.reader__end a { color: var(--gold-pale); }

.empty-state, .not-found { grid-column: 1 / -1; padding: 5rem 2rem; border: 1px dashed var(--line); background: rgba(11,25,16,.5); text-align: center; }
.empty-state span { color: var(--gold); font-size: 1.4rem; }
.empty-state h2, .not-found h1 { margin: 1rem 0 .5rem; font-family: var(--display); font-size: 2.6rem; font-weight: 400; }
.empty-state p, .not-found p { color: var(--ivory-muted); }
.not-found { width: min(760px, calc(100% - 3rem)); margin: 10rem auto 7rem; }
.button-link { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.2rem; border: 1px solid var(--gold); color: var(--gold-pale); font-family: var(--label); text-decoration: none; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1180px, calc(100% - 3rem)); min-height: 130px; margin: 0 auto; border-top: 1px solid var(--line); color: var(--ivory-muted); font-family: var(--label); font-size: .82rem; font-style: italic; letter-spacing: .07em; }
.footer-mark { justify-self: start; color: var(--gold); }
.site-footer a { justify-self: end; color: var(--gold); text-decoration: none; }

@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr 1fr; width: min(100% - 2rem, 1180px); min-height: 82px; }
  .top-nav { display: none; }
  .menu-button { display: block; }
  .hero { min-height: 900px; padding: 8rem 1rem 13rem; }
  .hero__media img { object-position: 61% center; }
  .title-frame { gap: .6rem; }
  .title-frame h1 { font-size: clamp(3.35rem, 18vw, 5.2rem); line-height: .87; }
  .title-ornament { display: none; }
  .introduction { max-width: 34ch; }
  .category-section, .listing-page { width: min(100% - 2rem, 1180px); padding: 5rem 0 6.5rem; }
  .listing-page { padding-top: 8rem; }
  .section-heading { display: block; }
  .section-heading--hero { width: min(100% - 2rem, 1180px); }
  .section-heading--hero h2 { font-size: clamp(2.3rem, 10vw, 3.5rem); }
  .category-grid { display: grid; grid-template-columns: 1fr; }
  .piece-grid { grid-template-columns: 1fr; }
  .category-card { width: 100%; min-height: 0; border-radius: 22px; }
  .back-link { margin-bottom: 3.5rem; }
  .collection-card { grid-template-columns: 64px 1fr; padding: 1.4rem; column-gap: 1.2rem; }
  .collection-sigil { width: 58px; height: 68px; }
  .collection-card > span { grid-column: 2; grid-row: auto; margin-top: 1.2rem; }
  .reader { width: min(100% - 2rem, 760px); padding: 8rem 0 6rem; }
  .reader__meta { flex-wrap: wrap; }
  .site-footer { grid-template-columns: 1fr; gap: .8rem; justify-items: center; padding: 2rem 0; text-align: center; }
  .footer-mark { display: none; }
  .site-footer p { max-width: 34rem; margin: 0; }
  .site-footer a { justify-self: center; }
}

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