/* Wheatly paper and print, 2026-10-05.
   A presentation layer over the existing printed catalogue. Source and
   delivery records: docs/WHEATLY_THEME.md. The original style.css is retained. */
@font-face {
  font-family: "Library Garamond";
  src: url("/static/wheatly/eb-garamond-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Library Garamond";
  src: url("/static/wheatly/eb-garamond-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --paper: #e6d6bf;
  --paper-deep: #deccb1;
  --paper-pale: #f1e6d4;
  --ink: #402e22;
  --ink-soft: #594232;
  --muted: #68503c;
  --rule: #9a7c60;
  --rule-fine: #baa184;
  --accent: #8d3c27;
  --accent-dk: #6d2c1d;
  --serif: "Library Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --display: "Library Garamond", Baskerville, Garamond, Georgia, serif;
}

/* Native-resolution paper travels with the document. Reflected source pairs
   meet at identical pixel rows, so long catalogues have no abrupt paper seam.
   The field scales with the page width, never with the document's length. */
body {
  background-color: var(--paper);
  background-image: url("/static/wheatly/paper-scroll-landscape-q90.webp");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-attachment: scroll;
  font-size: 20px;
  line-height: 1.55;
}
a:visited { color: #754332; }
h1, h2, h3, h4 { font-weight: 500; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
.meta, .result .meta, .works .yr { font-size: 15px; }
.small, small { font-size: 17px; }
label, .portrait-toggle { font-size: 17px; }
input, select, textarea { font-size: 19px; }
.btn { font-size: 17px; letter-spacing: .06em; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The title leaf supplies the hierarchy: an ornament, spaced roman capitals,
   red secondary type, and fine double rules. Navigation keeps its links. */
.masthead {
  padding-top: 28px;
  border-bottom: 3px double var(--rule);
  box-shadow: none;
  margin-bottom: 0;
}
.masthead .ornament { margin: 0 auto 16px; line-height: 0; letter-spacing: 0; }
.masthead .ornament img { display: block; margin: auto; width: 100px; opacity: 1; }
.masthead .brand, .masthead .brand:visited {
  font-size: 44px;
  letter-spacing: .09em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.masthead .sub { font-size: 18px; }
.masthead .sub-date {
  font-size: 17px;
  color: var(--accent);
  letter-spacing: .16em;
  margin-bottom: 22px;
}
.mainnav { font-size: 18px; }
.masthead > .mainnav:first-of-type {
  border-top: 3px double var(--rule);
  padding-top: 10px;
}
.mainnav a, .mainnav a:visited { color: var(--accent); }
.mainnav.secondary-nav { font-size: 16px; }
.mainnav .session-logout button { color: var(--accent); }
.divines-letter > h2 { color: var(--accent); font-size: 27px; }

.book-divider { margin: 28px auto; line-height: 0; text-align: center; }
.book-divider img { display: block; width: 100%; max-width: 420px; height: auto; margin: auto; }
.fleuron-cut img { opacity: 1; }

/* Native book cuts: transparent paper suppression preserves the scanned RGB.
   Their printed impression supplies the detail without a separate image mat. */
.plate.book-ornament img { filter: none; }
.login-ornament { margin: 0 auto 24px; }
.login-ornament img { width: 244px; }
.chapter-headpiece { margin: 0 auto 28px; }
.chapter-headpiece img { width: 480px; }
.chapter-tailpiece { margin: 36px auto 0; }
.chapter-tailpiece img { width: 164px; }

/* The holding page keeps its brand, date and subscription composition. */
.holding-page { padding: 56px 24px; min-height: 100svh; }
.holding-page .ornament { margin: 0 0 28px; line-height: 0; }
.holding-page .ornament img { display: block; width: 176px; opacity: 1; }
.holding-brand {
  max-width: 48rem;
  font-size: 52px;
  line-height: 1.12;
  letter-spacing: .09em;
  margin-bottom: 18px;
}
.holding-date { font-size: 22px; letter-spacing: .15em; color: var(--accent); }
.holding-page .book-divider { width: min(340px, 85%); margin: 32px auto 26px; }
.holding-note { font-size: 20px; margin: 0 0 18px; color: var(--ink-soft); }
.holding-signup { gap: 10px; margin-bottom: 26px; }
.holding-signup input[type="email"] { font-size: 18px; max-width: 100%; }
.holding-login, .holding-contact { font-size: 18px; }
.holding-contact { margin: 18px 0 0; }
.holding-page .social-links { margin-top: 16px; }

footer {
  border-top: 3px double var(--rule);
  box-shadow: none;
  font-size: 16px;
  margin-top: 0;
  padding-top: 26px;
}
footer .book-divider { margin: 0 auto 22px; max-width: 300px; }
footer .colophon { color: var(--muted); font-size: 16px; }

@media (max-width: 700px) {
  body {
    font-size: 19px;
    background-image: url("/static/wheatly/paper-scroll-portrait-q90.webp");
    background-size: max(100%, 700px) auto;
  }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .masthead { padding: 24px 16px 0; }
  .masthead .brand, .masthead .brand:visited { font-size: 30px; letter-spacing: .07em; }
  .masthead .ornament img { width: 90px; }
  .masthead .sub-date { font-size: 16px; }
  .mainnav { font-size: 17px; }
  .holding-page { padding: 40px 22px; }
  .holding-page .ornament img { width: 150px; }
  .holding-brand { font-size: 36px; letter-spacing: .075em; max-width: 20rem; }
  .holding-date { font-size: 19px; }
  .holding-note { font-size: 19px; max-width: 19rem; }
  .holding-signup { max-width: 24rem; }
  .holding-page .book-divider { margin-top: 28px; }
}

@media print {
  body, html { background: #fff; color: #000; }
}