/* Weathered Bell Press — shared stylesheet.
   Tokens and component classes mirror DESIGN.md (the normative record).
   Values are extracted 1:1 from the previous inline styles. */

/* EB Garamond, self-hosted (OFL). Variable font: one file covers weights 400–600.
   Latin subset — same coverage as the Google-hosted build it replaces. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colors — bindery names per DESIGN.md */
  --paper: #F3EFE5;          /* Unbleached Paper */
  --endpaper: #E8E2D2;       /* Endpaper — cover loading board */
  --deckle: #D5CEBB;         /* Deckle — hairline rules */
  --ink: #2B2925;            /* Binder's Ink */
  --ink-statement: #33312B;  /* Statement Ink */
  --ink-reading: #44423A;    /* Reading Ink */
  --ink-soft: #55503F;       /* Soft Ink */
  --worn: #6E685C;           /* Worn Type */
  --faded: #716C59;          /* Faded Impression (darkened 2026-07 for WCAG AA, 4.58:1 on paper) */
  --olive: #6E6F44;          /* Dry Olive — the working color */
  --olive-cured: #585936;    /* Cured Olive — hover state */

  /* Shadows */
  --shadow-lift: 1px 2px 2px rgba(96,86,66,.32), 0 0 1px rgba(96,86,66,.22);
  --shadow-lift-close: 1px 2px 3px rgba(93,84,66,.30), 0 0 1px rgba(93,84,66,.25);

  /* Type */
  --font: 'EB Garamond', Georgia, serif;
}

/* Base */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
}

a {
  color: var(--olive);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--olive-cured); }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 10;
  background: var(--olive);
  color: var(--paper);
  padding: 10px 18px;
  font: 500 15px var(--font);
  letter-spacing: .05em;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* Page shells */
.page {
  min-height: 100vh;
  padding:
    max(clamp(16px,2.5vw,28px), env(safe-area-inset-top))
    max(clamp(24px,6vw,64px), env(safe-area-inset-right))
    max(clamp(36px,5vw,56px), env(safe-area-inset-bottom))
    max(clamp(24px,6vw,64px), env(safe-area-inset-left));
  box-sizing: border-box;
}
.page-home, .page-books {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-book, .page-about, .page-contact {
  max-width: 1080px;
  margin: 0 auto;
}
.page-lost {
  padding: clamp(24px,6vw,64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Masthead */
.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: center;
}
.masthead-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
}
.masthead-home:hover .wordmark { color: var(--olive); }
.masthead-home:hover .bell { background: var(--olive); }
.bell {
  display: block;
  width: 68px;
  height: 68px;
  background: var(--ink);
  -webkit-mask: url('/assets/weathered-bell-reduced.svg') center/contain no-repeat;
  mask: url('/assets/weathered-bell-reduced.svg') center/contain no-repeat;
}
.wordmark {
  max-width: 100%;
  font: 600 clamp(12px,3.6vw,21px) var(--font);
  letter-spacing: clamp(.22em,.9vw,.34em);
  text-indent: clamp(.22em,.9vw,.34em);
  text-transform: uppercase;
  white-space: nowrap;
}
.page-lost .masthead-home { gap: 9px; }
.page-lost .bell { width: 72px; height: 72px; }

/* Navigation */
.nav {
  display: flex;
  gap: clamp(24px,5vw,34px);
  font: 500 15px var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .24em;
  color: var(--worn);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--worn);
  text-decoration: none;
  padding: 0;
}
.nav a:hover { color: var(--olive); }
.nav a[aria-current] {
  color: var(--ink);
  border-bottom: 1px solid var(--olive);
}
.nav a[aria-current]:hover { color: var(--ink); }
.page-lost .nav {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
}

/* Links */
.link-quiet {
  color: var(--worn);
  text-decoration: underline;
}
.link-quiet:hover { color: var(--olive); }

.link-ink {
  color: var(--ink);
  text-decoration: underline;
}
.link-ink:hover { color: var(--olive); }

.link-accent {
  font: 500 17px var(--font);
  color: var(--olive);
  text-decoration: underline;
  padding: 4px 0;
}
.link-accent:hover { color: var(--olive-cured); }

.arrow { display: inline; margin-left: .18em; }

/* Button — the one square block of the second ink */
.btn {
  display: inline-block;
  background: var(--olive);
  color: var(--paper);
  padding: 12px 26px;
  font: 500 17px var(--font);
  letter-spacing: .05em;
  text-decoration: none;
}
.btn:hover { background: var(--olive-cured); color: var(--paper); }
.btn:focus-visible { outline-offset: 3px; }
.btn .arrow { margin-left: .3em; }

/* Cover object — fixed 385/616 plate */
.cover {
  display: block;
  aspect-ratio: 385/616;
  background: var(--endpaper);
  box-shadow: var(--shadow-lift);
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover--hero { width: min(430px,76vw,38vh); }
.cover--detail {
  flex: 0 1 280px;
  width: min(280px,80vw);
  box-shadow: var(--shadow-lift-close);
}
.cover--thumb {
  position: relative;
  display: block;
  flex: none;
  width: min(190px,42vw);
  overflow: hidden;
}
/* Letter-format books (8.5 × 11 coloring books) — wider than the trade frame. */
.cover--wide { aspect-ratio: 385/498; }
/* 8 × 10 books (illustrated nonfiction) — between the trade and letter frames. */
.cover--octavo { aspect-ratio: 385/481; }
.cover--thumb::before {
  content: "Cover forthcoming";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  text-align: center;
  font: 500 15px/1.35 var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .16em;
  color: var(--faded);
}
.cover--thumb .cover-fallback { display: none; }
.cover--thumb img {
  position: relative;
  z-index: 1;
}

/* Labels */
.eyebrow, .section-label {
  font: 500 16px var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .2em;
  color: var(--olive);
}
.eyebrow { margin: 0; }
.eyebrow--sm { font-size: 15px; letter-spacing: .18em; }
.section-label { margin: 0 0 12px; }

/* Page title (Books, Contact) */
.page-title {
  margin: 0;
  font: 500 clamp(24px,4vw,30px)/1.2 var(--font);
}

/* Footer — the colophon line */
.footer {
  border-top: 1px solid var(--deckle);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: baseline;
  font: 400 14px var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .16em;
  color: var(--faded);
}
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--faded);
  text-decoration: underline;
}
.footer a:hover { color: var(--olive); }
.page-home .footer   { margin-top: clamp(56px,10vh,88px); width: 100%; max-width: 952px; }
.page-lost .footer   { margin-top: clamp(40px,7vh,64px); width: 100%; max-width: 952px; }
.page-books .footer  { margin-top: clamp(40px,7vh,64px);  width: 100%; max-width: 952px; }
.page-book .footer   { margin-top: clamp(48px,9vh,72px); }
.page-about .footer  { margin-top: clamp(72px,16vh,128px); }
.page-contact .footer{ margin-top: clamp(40px,7vh,64px); }

/* Home */
.page-home main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  padding: clamp(12px,2vh,20px) 0 0;
  width: 100%;
}
.home-house-line {
  margin: 0;
  font: 400 clamp(16px,2.5vw,17.5px)/1.4 var(--font);
  color: var(--ink-soft);
  text-wrap: balance;
}
.home-feature {
  margin-top: clamp(16px,2.5vh,24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.home-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 520px;
}
.page-home .cover--hero {
  width: auto;
  height: clamp(220px,38vh,340px);
  max-width: 72vw;
}
.home-title {
  margin: clamp(16px,2.5vh,24px) 0 0;
  font: 500 clamp(26px,6vw,33px)/1.2 var(--font);
  letter-spacing: .01em;
  text-wrap: balance;
}
.home-title-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.home-title-link:hover { color: var(--olive-cured); }
.byline {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 .55em;
  font: 400 clamp(15px,4vw,17px) var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  color: var(--worn);
}
.byline .link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.byline-series::before {
  content: "·";
  margin-right: .55em;
}
.page-home .fact-line { margin: 0; }
.home-positioning {
  margin: 14px 0 0;
  max-width: 460px;
  font: italic 400 17px/1.5 var(--font);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.home-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.page-home .link-accent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 6px;
}
.page-home .cta-note {
  margin: 0;
  max-width: 350px;
  text-wrap: pretty;
}
.home-closing {
  margin: clamp(48px,9vh,88px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.home-closing .statement {
  margin: 0;
  max-width: 560px;
}
.home-record {
  margin: 14px 0 0;
  max-width: 520px;
  font: 400 15px/1.5 var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  color: var(--worn);
  text-wrap: balance;
}
.home-closing .link-accent { margin-top: 18px; }

@media (min-width: 760px) {
  .page-home main {
    padding-top: clamp(18px,3vh,28px);
  }
  .home-feature {
    margin-top: clamp(22px,4vh,38px);
    display: grid;
    grid-template-columns: minmax(220px,300px) minmax(320px,440px);
    justify-content: center;
    align-items: center;
    gap: clamp(44px,7vw,84px);
    max-width: 900px;
    text-align: left;
  }
  .home-copy {
    align-items: flex-start;
    max-width: 440px;
  }
  .page-home .cover--hero {
    justify-self: end;
    height: clamp(320px,52vh,440px);
    max-width: 100%;
  }
  .home-title { margin-top: 0; }
  .byline { justify-content: flex-start; }
  .home-actions { align-items: flex-start; }
}

@media (max-width: 900px) {
  .page-home .byline {
    flex-direction: column;
    gap: 0;
  }
  .page-home .byline-series::before {
    content: none;
  }
}

@media (max-width: 520px) {
  .page-home main {
    padding-top: 8px;
  }
  .home-feature {
    margin-top: 12px;
  }
  .page-home .cover--hero {
    height: clamp(210px,34vh,300px);
    max-width: 68vw;
  }
  .home-title {
    margin-top: 14px;
  }
  .home-positioning {
    margin-top: 10px;
  }
  .home-actions {
    margin-top: 18px;
  }
  .home-closing {
    margin-top: clamp(40px,7vh,64px);
  }
  .footer {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
}

/* Books */
.page-books main {
  width: 100%;
  max-width: 700px;
  padding: clamp(40px,7vh,64px) 0 0;
}
.catalog {
  margin-top: clamp(20px,3vh,28px);
  border-top: 1px solid var(--deckle);
  padding-top: clamp(28px,4vh,36px);
}
.catalog-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 26px clamp(28px,4vw,40px);
  align-items: flex-start;
  min-width: 0;
}
.catalog-entry + .catalog-entry {
  margin-top: clamp(32px,5vh,48px);
  border-top: 1px solid var(--deckle);
  padding-top: clamp(28px,4vh,36px);
}
.catalog-info {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: 8px;
}
.catalog-title { margin: 0; }
.catalog-subtitle {
  margin: 2px 0 6px;
  max-width: 42ch;
  font: 400 17px/1.45 var(--font);
  color: var(--ink-soft);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.title-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  font: 500 26px/1.2 var(--font);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.title-link:hover { color: var(--olive-cured); }
.fact-line {
  margin: 2px 0 0;
  font: 400 15px var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .16em;
  line-height: 1.35;
  color: var(--worn);
  overflow-wrap: anywhere;
}
.catalog-positioning {
  margin: 14px 0 0;
  max-width: 40ch;
  font: italic 400 16.5px/1.55 var(--font);
  color: var(--ink-soft);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.catalog-note {
  margin: clamp(28px,4vh,36px) 0 0;
  font: 400 16px var(--font);
  color: var(--worn);
}
.catalog-info .link-quiet,
.catalog-info .link-accent,
.catalog-info .catalog-byline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: start;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.catalog-info .eyebrow {
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.catalog-info .link-quiet,
.catalog-info .catalog-byline { font: 400 17px var(--font); }
.catalog-info .catalog-byline { color: var(--worn); }
.catalog-info .link-accent {
  margin-top: 10px;
  padding: 0;
}

/* Book detail */
.page-book main { padding: clamp(36px,6vh,56px) 0 0; }
.book-hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px,6vw,64px);
  align-items: flex-start;
}
.book-info { flex: 1 1 340px; min-width: 0; }
.book-title {
  margin: 10px 0 0;
  font: 500 clamp(30px,5vw,40px)/1.15 var(--font);
}
.book-subtitle {
  margin: 12px 0 0;
  max-width: 30ch;
  font: 400 clamp(18px,2.6vw,21px)/1.35 var(--font);
  color: var(--ink-soft);
  text-wrap: balance;
}
.book-byline {
  margin: 10px 0 0;
  font: 400 19px var(--font);
  color: var(--worn);
}
.jacket { margin: 34px 0 0; max-width: 520px; }
.jacket p {
  margin: 0;
  font: 400 17px/1.7 var(--font);
  color: var(--ink-reading);
  text-wrap: pretty;
}
.jacket p + p { margin-top: 16px; }
.jacket .positioning { color: var(--ink-soft); font-style: italic; }
.cta { margin: 34px 0 0; }
.cta-note {
  margin: 12px 0 0;
  font: 400 15px var(--font);
  color: var(--faded);
}
.section {
  border-top: 1px solid var(--deckle);
  margin-top: clamp(36px,6vh,56px);
  padding-top: clamp(26px,4vh,34px);
}
.edition {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(110px,140px) 1fr;
  row-gap: 12px;
  column-gap: 24px;
  font: 400 16px var(--font);
  max-width: 520px;
}
.edition dt {
  font-variant-caps: all-small-caps;
  letter-spacing: .16em;
  color: var(--olive);
}
.edition dd { margin: 0; }
.buy { margin: 56px 0 0; }
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  align-items: baseline;
}
.buy-link {
  font: 500 17px var(--font);
  color: var(--olive);
  text-decoration: underline;
  padding: 4px 0;
}
.buy-link:hover { color: var(--olive-cured); }
.buy-pending {
  font: 400 17px var(--font);
  color: var(--ink-soft);
}
.prose {
  margin: 0;
  max-width: 520px;
  font: 400 17px/1.7 var(--font);
  color: var(--ink-reading);
  text-wrap: pretty;
}

/* About */
.main-narrow {
  padding: clamp(48px,9vh,84px) 0 0;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.statement {
  margin: 0;
  font: 400 clamp(21px,3.6vw,26px)/1.55 var(--font);
  color: var(--ink-statement);
  text-wrap: pretty;
}
.about-body {
  margin: 32px 0 0;
  font: 400 17.5px/1.75 var(--font);
  color: var(--ink-soft);
  text-align: left;
  text-wrap: pretty;
}
.about-belief {
  margin: 20px 0 0;
  font: 400 17.5px/1.75 var(--font);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.quote-block {
  margin: 52px auto 0;
  max-width: 460px;
  border-top: 1px solid var(--deckle);
  padding-top: 36px;
}
.quote {
  margin: 0;
  font: 400 18.5px/1.7 var(--font);
  font-style: italic;
  color: var(--ink-reading);
  text-wrap: pretty;
}
.quote-attr {
  margin: 16px 0 0;
  font: 500 15px var(--font);
  font-variant-caps: all-small-caps;
  letter-spacing: .18em;
  color: var(--worn);
}
.about-routing {
  margin: 44px auto 0;
  max-width: 460px;
  text-align: left;
}
.about-routing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  align-items: center;
}
.about-routing-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.about-routing-links .link-accent { padding: 0; }
.about-routing-links .link-quiet { font: 400 17px var(--font); }

/* Contact */
.contact-lede {
  margin: 28px 0 0;
  font: 400 17.5px/1.75 var(--font);
  color: var(--ink-soft);
}
.contact-email {
  margin: 14px 0 0;
  font: 500 clamp(18px,3.5vw,21px) var(--font);
}
.contact-email a { text-underline-offset: 5px; }
.contact-note {
  margin: 48px 0 0;
  font: 400 17.5px/1.75 var(--font);
  color: var(--ink-soft);
}

/* 404 */
.lost-lede {
  margin: clamp(40px,7vh,64px) 0 0;
  font: 400 clamp(21px,3.6vw,26px)/1.5 var(--font);
  color: var(--ink-statement);
}
.lost-note {
  margin: 14px 0 0;
  font: 400 17.5px/1.75 var(--font);
  color: var(--ink-soft);
}