@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Literata"; src:url("fonts/literata-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Literata"; src:url("fonts/literata-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Literata"; src:url("fonts/literata-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
:root {
  --paper:#f8f5ee; --ink:#302b2b; --wine:#742e40; --muted:#655e58; --line:#d8cfc2;
  --display:"Cormorant Garamond",serif; --serif:"Literata",serif; --sans:"Literata",serif;
  --heading-size:clamp(42px,4vw,48px); --book-size:clamp(23px,2.2vw,26px); --article-size:clamp(30px,3vw,34px);
  --gutter:clamp(20px,5vw,76px); --section:clamp(40px,5vw,72px); --motion:180ms;
}
* { box-sizing:border-box }
html { color-scheme:light; scroll-padding-top:20px; background:#f8f5ee }
html:has(body.home) { background:#f8f5ef }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 var(--serif); font-synthesis:none }
a { color:var(--wine); text-underline-offset:4px }
a:hover { text-decoration:underline }
:focus-visible { outline:3px solid var(--wine); outline-offset:4px }
.wrap { width:min(calc(100% - 2 * var(--gutter)),1240px); margin-inline:auto }
.home {
  --paper:#f8f5ef; --ink:#29211f; --wine:#752b3c; --line:#dcd0c5; --rose:#c49b9a;
  --space-8:8px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-48:48px;
  --space-64:64px;
  --content-max:1200px;
  --page-gutter:clamp(24px,4vw,32px);
  --section-space:var(--space-48);
  position:relative;
  isolation:isolate;
}
/* The width cap applies to the content grid; the outer padding provides the gutter. */
.home .wrap {
  box-sizing:content-box;
  width:auto;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}
.skip { position:absolute; top:0; left:1rem; transform:translateY(-150%); background:white; padding:8px; z-index:2 }
.skip:focus { transform:none }
.mast,nav,.brand,.actions,.sectionhead,footer { display:flex; align-items:center }
.mast { min-height:82px; justify-content:space-between; border-bottom:1px solid var(--line) }
.home .mast { border:0 }
.home footer { position:relative; border:0 }
.home footer::before {
  content:"";
  position:absolute;
  inset-inline:var(--page-gutter);
  border-top:1px solid var(--line);
  pointer-events:none;
}
.home footer::before { inset-block-start:0 }
.brand { justify-content:center; width:96px; min-height:64px }
.brand,nav a,.actions a,footer a,.entry a { text-decoration:none }
nav { gap:clamp(18px,3vw,46px) }
nav a { font-size:15px; padding-block:12px; color:var(--ink) }
.menu-toggle { display:none }
nav a:hover { color:var(--wine) }
.hero {
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  align-items:center;
  gap:var(--space-32);
  padding-block:var(--space-24) var(--space-32);
  position:relative;
}
.hero-label {
  display:flex;
  align-items:center;
  gap:var(--space-8);
  margin:0 0 var(--space-16);
  color:var(--wine);
  font:600 clamp(11px,1vw,13px)/1.4 var(--serif);
  text-transform:uppercase;
}
.hero-label::before,.hero-label::after {
  content:"";
  width:clamp(12px,3vw,42px);
  height:1px;
  background:var(--rose);
}
.eyebrow { text-transform:uppercase; font:600 .71rem/1.5 var(--sans); letter-spacing:normal; color:var(--wine) }
.ruled { display:flex; align-items:center; gap:14px; margin:0 0 20px }
.ruled::before { content:""; width:36px; height:1px; background:var(--wine) }
h1,h2,h3 { font-family:var(--display); font-weight:600; margin:0; letter-spacing:normal; text-wrap:balance }
.signature { display:block; width:min(100%,540px); height:auto }
.lede { font:clamp(17px,1.5vw,21px)/1.6 var(--serif); max-width:31ch; margin:var(--space-8) 0 var(--space-24) }
.actions { gap:var(--space-16); flex-wrap:wrap }
.actions a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-8);
  font-size:15px;
  min-height:48px;
  padding:var(--space-8) var(--space-24);
  border-width:1px;
  border-style:solid;
}
.actions .primary { border-color:transparent }
.primary { background:var(--wine); color:white; padding:12px 22px; border-radius:3px }
.primary:hover { background:#582337 }
.secondary { border:1px solid var(--wine); border-radius:3px; padding:10px 20px }
.secondary:hover { background:#752b3c0b }
figure { margin:0 }
/* Fade only the outer edge of the original square image. */
.collage {
  display:block;
  width:min(100%,clamp(360px,39vw,525px));
  height:auto;
  justify-self:end;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
    linear-gradient(to bottom,transparent,#000 3%,#000 95%,transparent);
  mask-composite:intersect;
}
@media (min-width:1200px) {
  .home { --page-gutter:clamp(48px,4.45vw,var(--space-64)) }
}
.zoom-icon { position:absolute; right:.5rem; bottom:.5rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--wine); font:1.5rem/1 var(--sans) }
a.bookmat { position:relative; cursor:zoom-in; text-decoration:none }
.viewer { background:transparent; color:white; border:0; overflow:visible; padding:0; width:min(94vw,660px); text-align:center }
.viewer::backdrop { background:rgb(27 21 24 / 94%) }
.covers h3,.viewer h2 { font-family:var(--display); font-weight:500; letter-spacing:normal }
.viewer h2 { font-size:var(--book-size); line-height:1.2; margin:14px auto 0; max-width:32ch }
.enlarged { display:block; width:auto; height:auto; max-width:85%; max-height:70vh; max-height:70dvh; margin:auto; box-shadow:0 14px 50px #0007 }
.dismiss { display:block; margin:0 0 8px auto; width:44px; height:44px; border:1px solid #e7ded0; border-radius:50%; background:transparent; color:white; font:2rem/1 var(--sans); cursor:pointer }
.viewer :focus-visible { outline-color:#fff }
/* The ornament spans the full width; the quote sits in its own reading column. */
.about {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--space-32);
  padding-bottom:var(--space-32);
}
.home h2 { color:var(--wine) }
.author-quote { margin:0; border-inline-start:1px solid var(--rose); padding-inline-start:var(--space-24) }
.author-quote p { margin:0; max-width:68ch; font:italic 17px/1.65 var(--serif); text-wrap:pretty }
.section-link { font-size:15px; text-underline-offset:5px; padding-block:10px }
.about .quote-rule { grid-column:1/-1 }
.quote-rule { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--wine) }
.quote-rule::before,.quote-rule::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),var(--rose)) }
.quote-rule::after { transform:scaleX(-1) }
.quote-rule img { display:block; width:36px; height:15px }
/* The painted frontispiece spans the header, hero and author's introduction. */
@media (min-width:1024px) {
  .home {
    container-type:inline-size;
    --front-header:clamp(56px,4.3vw,82px);
    --front-width:min(79cqw,1500px);
    --intro-indent:clamp(32px,6vw,96px);
  }
  .home .mast {
    box-sizing:border-box;
    width:var(--front-width);
    max-width:none;
    min-height:var(--front-header);
    padding-inline:0;
  }
  .home .brand { min-height:var(--front-header) }
  .home .brand img { height:auto; max-height:var(--front-header); object-fit:contain }
  .frontispiece { position:relative }
  .frontispiece::before {
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    inset:calc(-1 * var(--front-header)) auto 0 50%;
    width:min(100cqw,2100px);
    translate:-50% 0;
    background:url("frontispiece-watercolor.webp") center / 100% 100% no-repeat;
    mask-image:linear-gradient(#000 88%,transparent);
    opacity:.84;
  }
  .frontispiece .hero {
    width:var(--front-width);
    margin-inline:calc((100% - var(--front-width)) / 2);
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    gap:var(--space-24);
    padding-block:var(--space-8) var(--space-16);
  }
  .frontispiece .hero-label {
    gap:var(--space-16);
    margin:0 0 var(--space-8) var(--space-32);
    letter-spacing:.18em;
  }
  .frontispiece .hero-label::after { flex:1; max-width:42px }
  .frontispiece .signature { width:min(100%,clamp(325px,32.5vw,620px)) }
  .frontispiece .lede {
    margin-inline-start:var(--intro-indent);
    margin-block-end:var(--space-16);
    max-width:38ch;
    line-height:1.4;
  }
  .frontispiece .actions { margin-inline-start:var(--intro-indent) }
  .frontispiece .actions a {
    min-inline-size:clamp(128px,13.4vw,220px);
    padding-inline:clamp(16px,1.6vw,24px);
  }
  .frontispiece .collage {
    justify-self:center;
    width:min(100%,33vw,640px);
    mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),
      linear-gradient(to bottom,transparent,#000 4%,#000 91%,transparent);
  }
  .frontispiece .about {
    grid-template-columns:minmax(0,21%) minmax(0,1fr);
    padding-bottom:var(--space-24);
  }
  .frontispiece .about h2 { white-space:nowrap }
}
@media (min-width:2101px) {
  .frontispiece::before {
    mask-image:linear-gradient(#000 88%,transparent),
      linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
    mask-composite:intersect;
  }
}
@media (prefers-reduced-motion:no-preference) {
  .actions a span { transition:translate .25s ease }
  .actions a:hover span,.actions a:focus-visible span { translate:3px 0 }
}
.section { padding:var(--section) 0; border-top:1px solid var(--line) }
.home .section { padding-block:var(--section-space) }
.sectionhead {
  gap:var(--space-8) var(--space-16);
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-24);
}
h2 { font-size:var(--heading-size); line-height:1.1; letter-spacing:normal }
.sectionhead>span { color:var(--muted); font:italic 15px/1.65 var(--serif) }
.library {
  display:grid;
  gap:var(--section-space);
  border-top:1px solid var(--line);
  padding-block:var(--section-space);
}
@media (min-width:1200px) {
  .library { grid-template-columns:minmax(0,59fr) minmax(0,41fr); gap:0 }
  .shelf { padding-inline-end:var(--space-32) }
  .blog { border-inline-start:1px solid var(--line); padding-inline-start:var(--space-32) }
}
@media (max-width:1199px) {
  .blog { border-top:1px solid var(--line); padding-top:var(--section-space) }
}
.covers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-24) var(--space-16) }
.covers > figure { display:flex; flex-direction:column; min-width:0 }
.covers figcaption { display:flex; flex-direction:column; flex:1 }
.covers figcaption > a { align-self:flex-start; margin-top:auto; padding-top:var(--space-16) }
.bookmat { display:grid; position:relative; width:100%; flex:none; place-items:center; aspect-ratio:1; background:#eee5d9 }
.covers figure:nth-child(2) .bookmat { background:#ede2e1 }
.covers figure:nth-child(3) .bookmat { background:#e8e8dc }
.covers figure:nth-child(4) .bookmat { background:#e3e8e8 }
.bookmat img { position:absolute; inset:9% 12%; height:82%; width:76%; object-fit:contain; transition:transform var(--motion) }
.bookmat:hover img { transform:translateY(-3px) }
.covers h3 { font-size:clamp(22px,1.75vw,25px); font-weight:500; line-height:1.2; text-wrap:pretty; margin:var(--space-16) 0 0; overflow-wrap:anywhere }
.covers figcaption > a { font-size:14px }
small,time { font-size:15px }
.entry { display:grid; gap:var(--space-24); align-items:start }
.entry-illustrated { grid-template-columns:minmax(0,clamp(124px,11vw,160px)) minmax(0,1fr) }
.entry + .entry { border-top:1px solid var(--line); margin-top:var(--space-24); padding-top:var(--space-24) }
.entry-image { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover }
.entry-copy { display:grid; gap:var(--space-8); align-content:start }
.entry time,.entry p,small { color:var(--muted) }
.entry h3 { font-size:var(--article-size); line-height:1.1; text-wrap:pretty }
.entry h3 a:hover { text-decoration:underline }
.entry h3 span { font:16px/1 var(--serif); white-space:nowrap }
.entry p { margin:0; max-width:50ch }
.contacts { display:grid; grid-template-columns:repeat(2,minmax(0,280px)); gap:var(--space-24) var(--space-48) }
.contacts h3 { font-size:var(--book-size); margin-bottom:var(--space-8) }
.contacts a { overflow-wrap:anywhere }
footer { border-top:1px solid var(--line); justify-content:space-between; padding:24px 0; font-size:15px }
.reading { max-width:66ch; margin:var(--section) auto; min-height:45vh; overflow-wrap:anywhere }
.reading h1 { font-size:var(--article-size); line-height:1.1 }
.reading p:not(.eyebrow) { font:17px/1.65 var(--serif) }
.reading img { max-width:100%; height:auto }.reading pre { overflow:auto }
.back { display:inline-block; margin-bottom:24px }
@media (max-width:1023px) {
  .about { grid-template-columns:auto minmax(0,1fr); gap:var(--space-16) var(--space-24) }
}
@media (max-width:900px) {
  .actions a { padding-inline:var(--space-16) }
}
@media (max-width:767px) {
  .home { --page-gutter:clamp(16px,4.8vw,20px); --section-space:var(--space-32) }
  .mast { flex-wrap:wrap; min-height:68px; gap:0 12px; padding:4px 0 }
  .home .mast { padding-block:0 }
  .brand { width:84px; min-height:59px }
  .brand img { width:100%; height:auto }
  .menu-toggle:not([hidden]) {
    display:block;
    font:15px/1.4 var(--serif);
    min-height:44px;
    padding:8px 15px;
    color:var(--wine);
    background:transparent;
    border:1px solid var(--line);
    border-radius:3px;
    cursor:pointer;
  }
  .menu-toggle:not([hidden])[aria-expanded="false"] + nav { display:none }
  .mast nav { flex:1 0 100%; flex-wrap:wrap; gap:0 18px; padding:4px 0 10px }
  .mast nav a { min-height:44px }
  .hero { grid-template-columns:1fr; gap:var(--space-24); padding-block:var(--space-24) }
  .collage { width:min(100%,470px); justify-self:center }
  .about { grid-template-columns:1fr; gap:var(--space-16) }
  .author-quote { padding-inline-start:var(--space-16) }
  .covers { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .contacts { grid-template-columns:1fr }
}
@media (max-width:500px) {
  .home { --heading-size:clamp(36px,10vw,42px); --article-size:clamp(27px,8vw,30px) }
  .entry { gap:var(--space-16) }
  .entry-illustrated { grid-template-columns:minmax(0,92px) minmax(0,1fr) }
}
@media (max-width:350px) {
  .covers { grid-template-columns:1fr }
  .entry-illustrated { grid-template-columns:1fr }
  .entry-image { max-width:160px }
}
@media (prefers-reduced-motion:reduce) {
  .bookmat img { transition:none }.bookmat:hover img { transform:none }
}

/* Excerpts use the same reading face and display headings as the blog. */
a.story-card { cursor:pointer }
.covers h3 a { color:inherit; font:inherit; text-decoration:none }
.covers h3 a:hover { text-decoration:underline }
.story { max-width:900px; margin:var(--section) auto }
.story-title { display:grid; grid-template-columns:1fr minmax(145px,32%); align-items:center; gap:6%; border-bottom:1px solid var(--line); padding-bottom:32px }
.story-title h1 { font-size:var(--heading-size); line-height:1.1 }
.story-title img { display:block; width:100%; height:auto }
.byline { font:italic 17px/1.65 var(--serif); color:var(--muted) }
.story-prose { max-width:62ch; margin:36px auto; font:17px/1.65 var(--serif) }
.story-prose .passage + .passage { margin-block-start:1.35em }
.story-prose p { margin:0; text-indent:1.35em; widows:2; orphans:2 }
.story-prose .passage > p:first-child { text-indent:0 }
.edition { display:flex; align-items:center; gap:clamp(18px,4vw,52px); padding-top:32px; border-top:1px solid var(--line); margin:var(--section) auto 0; max-width:720px }
.edition img { width:clamp(82px,18vw,140px); height:auto }
.edition h2 { font:500 var(--book-size)/1.2 var(--display) }
.store-link { display:inline-block; margin-top:18px; text-decoration:none }
@media (max-width:650px) {
  .story-title { grid-template-columns:1fr; gap:18px }
  .story-title img { width:min(60%,220px); justify-self:center }
  .store-link { padding:10px 14px }
}

.chapter-start { margin:0 0 1.6em }
.chapter-start h2,.story-notes h2 { font-size:var(--article-size); line-height:1.2 }
.chapter-start p { margin:.5em 0; text-indent:0 }
.story-prose sup { line-height:0; font-size:.7em }
.story-notes { margin-top:2.5em; padding-top:1.25em; border-top:1px solid var(--line) }
.story-notes ol { padding-inline-start:1.6em; font:17px/1.65 var(--serif) }
.story-notes li { margin:.55em 0 }

/* Align the title and verse on one reading column. */
.poem-page { max-width:780px; margin-block:clamp(28px,4vw,56px) }
.poem-page .back { margin-bottom:20px }
.poem-title { display:block; border-bottom:0; padding-bottom:0 }
.poem-title h1 { font-size:var(--heading-size) }
.poem-title .eyebrow { margin-top:0 }
.poem-title .byline { margin-bottom:0 }
.poem { margin:32px 0 0; font:17px/1.65 var(--serif); text-align:left }
.verse-line { margin:0; padding:0; text-indent:0; hyphens:none }
.verse-line + .verse-line { margin-top:.5em }
.poem-page .edition { max-width:none; margin-top:40px }
@media (max-width:650px) {
  .poem { font-size:17px; line-height:1.65; margin-top:28px }
  .verse-line + .verse-line { margin-top:.65em }
}