:root {
  --ink: #0c111a;
  --ink-soft: #17202b;
  --paper: #eef1f4;
  --paper-deep: #d5dce3;
  --muted: #abb8c6;
  --accent: #b9cad8;
  --accent-dark: #8ca3b5;
  --line: rgba(188, 205, 220, .22);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; z-index: 100; top: -5rem; left: 1rem; padding: .8rem 1rem; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.section-shell { width: min(100% - 5rem, 1260px); margin-inline: auto; }
.eyebrow { margin: 0; color: var(--accent); font: 700 .68rem/1.5 var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; color: var(--paper); font: 700 .72rem/1.3 var(--sans); letter-spacing: .17em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--accent); padding-bottom: .65rem; transition: color .2s, gap .2s; }
.text-link:hover { color: var(--accent); gap: 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 2rem; min-height: 3.6rem; padding: .95rem 1.5rem; text-decoration: none; text-transform: uppercase; font: 700 .71rem/1.3 var(--sans); letter-spacing: .16em; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--accent); color: #101722; border: 1px solid var(--accent); }
.button-primary:hover { background: #d8e5ee; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(238,241,244,.2); background: rgba(9,15,24,.56); backdrop-filter: blur(10px); }
.header-inner { width: min(100% - 5rem, 1430px); min-height: 6.1rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; font: 500 1.7rem/1 var(--serif); letter-spacing: .17em; text-decoration: none; }
.brand-mark { width: 34px; height: 50px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(1.5rem,3vw,3.2rem); }
.site-nav a { color: #e6ebf0; font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.site-nav a:hover { color: var(--accent); }
.site-nav .nav-link-accent { color: #d5e1e9; border: 1px solid rgba(185,202,216,.75); background: rgba(9,15,24,.58); padding: .95rem 1.05rem; }
.site-nav .nav-link-accent:hover { color: var(--ink); background: var(--accent); }
.menu-toggle { display: none; }

.hero { position: relative; display: flex; min-height: min(850px, 91svh); overflow: hidden; isolation: isolate; align-items: center; }
.hero-image, .hero-shade { position: absolute; z-index: -1; inset: 0; }
.hero-image { background: url('assets/cathedral-hero.jpg') center center / cover no-repeat; filter: grayscale(.52) saturate(.6) hue-rotate(165deg); }
.hero-shade { background: linear-gradient(90deg, rgba(7,13,22,.9) 0%, rgba(7,13,22,.72) 34%, rgba(7,13,22,.1) 75%), linear-gradient(0deg, rgba(8,14,23,.86) 0%, transparent 23%, rgba(9,15,24,.16) 75%); }
.hero-inner { width: min(100% - 5rem, 1260px); margin: 5.7rem auto 5rem; padding-top: 4rem; }
.hero-eyebrow { display: flex; align-items: center; gap: .9rem; color: #bbcedd; }
.ornament { width: 20px; height: 30px; object-fit: contain; }
.hero h1 { max-width: 880px; margin: 1.7rem 0 1.3rem; font: 500 clamp(4.9rem, 9vw, 9rem)/.88 var(--serif); letter-spacing: -.055em; }
.hero h1 em { color: #e4eaf0; font-weight: 400; }
.hero-copy { max-width: 540px; margin: 0; color: #d2dce5; font: 400 clamp(1rem,1.5vw,1.13rem)/1.8 var(--sans); }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.2rem; }
.hero-secondary { font-size: .7rem; }
.hero-bottom { position: absolute; bottom: 2.2rem; left: max(2.5rem, calc((100vw - 1260px)/2)); right: max(2.5rem, calc((100vw - 1260px)/2)); display: flex; align-items: center; gap: 1.1rem; color: #b4c4d0; font: 600 .58rem/1 var(--sans); letter-spacing: .24em; }
.hero-bottom-line { width: 3.3rem; height: 1px; background: var(--accent); }
.intro-band { display: flex; justify-content: center; align-items: center; gap: 3rem; min-height: 6.7rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #131b27; text-align: center; }
.intro-band img { width: 22px; height: 33px; object-fit: contain; }
.intro-band p { margin: 0; color: #cdd8e2; font: italic 400 clamp(1.2rem, 2vw, 1.7rem)/1.2 var(--serif); letter-spacing: .02em; }

.books { padding-block: 8.2rem 9rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3.5rem; }
.section-heading h2, .about h2, .dispatch h2 { margin: .8rem 0 0; font: 500 clamp(3.5rem,5.8vw,6.2rem)/.95 var(--serif); letter-spacing: -.045em; }
.section-heading h2 em, .about h2 em, .dispatch h2 em { color: var(--accent); font-weight: 400; }
.section-heading > p { max-width: 300px; margin: 0 0 .3rem; color: var(--muted); font: 400 .88rem/1.8 var(--sans); }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.book-card { position: relative; display: grid; grid-template-columns: 43% 57%; min-height: 410px; overflow: hidden; border: 1px solid var(--line); background: #17202b; }
.book-card::after { content: ''; position: absolute; pointer-events: none; inset: 0; border: 1px solid transparent; transition: border-color .25s; }
.book-card:hover::after { border-color: rgba(185,202,216,.65); }
.book-art { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 2.2rem; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a4156, #17202b 72%); }
.book-art img { width: min(100%, 230px); max-height: 360px; object-fit: contain; box-shadow: 8px 16px 30px rgba(0,0,0,.45); transform: rotate(-3deg); transition: transform .3s; }
.book-card:hover .book-art img { transform: rotate(-1deg) translateY(-5px); }
.bone-card .book-art { background: radial-gradient(circle at 50% 40%, #364957, #151e2b 72%); }
.crows-card .book-art { background: radial-gradient(circle at 50% 40%, #3b3854, #151b2b 72%); }
.crows-card .book-art img { width: min(100%, 270px); max-height: 280px; transform: rotate(-2deg); }
.crows-card:hover .book-art img { transform: rotate(0deg) translateY(-5px); }
.veil-card .book-art { background: radial-gradient(circle at 50% 40%, #3b4b59, #151d29 72%); }
.veil-card .book-art img { transform: rotate(3deg); }
.veil-card:hover .book-art img { transform: rotate(1deg) translateY(-5px); }
.book-content { display: flex; flex-direction: column; align-items: start; padding: 2rem 2rem 2.1rem .9rem; }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: .7rem; width: 100%; color: var(--accent); font: 700 .55rem/1.5 var(--sans); letter-spacing: .14em; }
.card-topline span:last-child { max-width: 130px; color: #92a3b1; text-align: right; }
.book-content h3 { margin: auto 0 .25rem; font: 500 clamp(2.45rem,3.8vw,4.25rem)/.88 var(--serif); letter-spacing: -.045em; }
.book-subtitle { margin: .8rem 0 .5rem !important; color: var(--accent) !important; font: italic 500 1.3rem/1.15 var(--serif) !important; }
.book-subtitle cite { font-style: italic; }
.book-content > p:not(.book-subtitle) { max-width: 290px; margin: .5rem 0 1.4rem; color: #b8c5d0; font: 400 .77rem/1.7 var(--sans); }
.card-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 1rem; min-width: 180px; margin-top: auto; padding: .75rem 0 .45rem; color: var(--paper); border-bottom: 1px solid var(--accent-dark); font: 700 .65rem/1.2 var(--sans); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; transition: color .2s, min-width .2s; }
.card-link:hover { min-width: 200px; color: var(--accent); }

.about { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 20% 65%, #2a3045, transparent 34%), linear-gradient(115deg, #18212e, #0e1520 68%); }
.about::after { content: ''; position: absolute; top: -12rem; left: 4%; width: 34rem; height: 34rem; border: 1px solid rgba(185,202,216,.1); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(185,202,216,.025), 0 0 0 11rem rgba(185,202,216,.018); pointer-events: none; }
.about-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 45% 55%; align-items: center; min-height: 550px; gap: 2rem; padding-block: 6rem; }
.about-motif { position: relative; display: grid; place-items: center; width: min(300px,75%); margin-inline: auto; }
.about-motif img { width: 100%; height: auto; filter: drop-shadow(0 20px 35px rgba(0,0,0,.35)); }
.about-copy { max-width: 560px; }
.about-copy h2 { margin-bottom: 2rem; }
.about-copy > p:not(.eyebrow) { max-width: 520px; margin: 0 0 1rem; color: #bdcad4; font: 400 .94rem/1.9 var(--sans); }
.about-copy .text-link { margin-top: 1.1rem; }

.dispatch { padding-block: 8.5rem; }
.dispatch-frame { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 410px; padding: 4.7rem 2rem; border: 1px solid rgba(185,202,216,.48); background: radial-gradient(circle at 50% 100%, #293449 0, #172230 52%, #111b28 100%); text-align: center; }
.dispatch-frame::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(185,202,216,.15); pointer-events: none; }
.dispatch-symbol { position: absolute; top: -2rem; width: 2.8rem; height: 4.2rem; object-fit: contain; }
.dispatch h2 { font-size: clamp(3.4rem,6vw,6.1rem); }
.dispatch-frame > p:not(.eyebrow) { max-width: 510px; margin: 1.25rem 0 2.1rem; color: #bac6d1; font: 400 .9rem/1.8 var(--sans); }
.dispatch-library-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem; margin-top: 1.8rem; }
.dispatch-library-links a { color: var(--accent); font: 700 .68rem/1.5 var(--sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--accent-dark); padding-bottom: .35rem; }
.dispatch-library-links a:hover { color: #fff; }
.site-footer { border-top: 1px solid var(--line); background: #090f18; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; padding-block: 3.5rem 2.8rem; }
.footer-brand { display: inline-flex; align-items: center; gap: .6rem; font: 500 2.4rem/1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.footer-brand img { width: 32px; height: 48px; object-fit: contain; }
.footer-inner > div p { margin: .45rem 0 0; color: #9aaaba; font: italic 1rem/1.3 var(--serif); }
.footer-inner nav { display: flex; gap: 1.6rem; padding-top: .55rem; }
.footer-inner nav a { color: #b8c5d0; font: 600 .65rem/1.2 var(--sans); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.footer-inner nav a:hover { color: var(--accent); }
.copyright { grid-column: 1 / -1; margin: 1.6rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); color: #8293a2; font: 500 .65rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1080px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-card { min-height: 365px; grid-template-columns: 37% 63%; }
  .book-content { padding-left: 1.3rem; }
  .book-content > p:not(.book-subtitle) { max-width: 520px; }
  .book-art img { max-height: 310px; }
}
@media (max-width: 760px) {
  .section-shell, .header-inner, .hero-inner { width: min(100% - 2.5rem, 1260px); }
  .header-inner { min-height: 4.8rem; }
  .brand { font-size: 1.45rem; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.6rem; height: 2.6rem; padding: .5rem; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 100%; height: 1px; background: var(--paper); }
  .site-nav { display: none; position: absolute; top: 4.8rem; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .8rem 1.25rem 1.2rem; border-bottom: 1px solid var(--line); background: #0d1520; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 1rem .3rem; }
  .site-nav .nav-link-accent { margin-top: .6rem; padding: 1rem; text-align: center; }
  .hero { min-height: 750px; min-height: 88svh; }
  .hero-image { background-position: 62% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(7,13,22,.86), rgba(7,13,22,.48)), linear-gradient(0deg, rgba(8,14,23,.9), transparent 40%); }
  .hero-inner { margin-top: 4.5rem; padding-top: 2rem; }
  .hero h1 { font-size: clamp(4.1rem, 13vw, 6.6rem); }
  .hero-copy { max-width: 470px; }
  .hero-bottom { left: 1.25rem; right: 1.25rem; bottom: 1.5rem; }
  .intro-band { gap: 1.25rem; padding: 1rem 1.25rem; }
  .books { padding-block: 5.5rem 6rem; }
  .section-heading { display: block; margin-bottom: 2.5rem; }
  .section-heading > p { max-width: 520px; margin-top: 1.4rem; }
  .about-inner { grid-template-columns: 1fr; gap: 3.5rem; padding-block: 5rem; }
  .about-motif { width: min(220px, 60%); }
  .dispatch { padding-block: 6rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-inner nav { flex-wrap: wrap; }
}
@media (max-width: 540px) {
  .hero { min-height: 700px; min-height: 91svh; }
  .hero h1 { margin-top: 1.4rem; font-size: clamp(3.8rem, 14vw, 5.2rem); }
  .hero-actions { flex-wrap: wrap; gap: 1.3rem; }
  .hero-bottom { font-size: .46rem; letter-spacing: .13em; }
  .hero-bottom-line { width: 1.2rem; }
  .intro-band p { font-size: 1.2rem; }
  .intro-band img { display: none; }
  .section-heading h2, .about h2 { font-size: 3.65rem; }
  .book-card { display: flex; flex-direction: column; }
  .book-art { min-height: 285px; height: 285px; padding: 1.5rem; }
  .book-art img { max-height: 235px; }
  .crows-card .book-art img { max-height: 235px; }
  .book-content { min-height: 355px; padding: 1.5rem 1.6rem 1.8rem; }
  .book-content h3 { margin-top: 2rem; font-size: 3.25rem; }
  .book-content > p:not(.book-subtitle) { margin-bottom: 1.4rem; }
  .card-topline { font-size: .5rem; }
  .dispatch-frame { padding: 4rem 1.4rem; }
  .dispatch h2 { font-size: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}