/* Hallmark · shape: Poster hero over an index of books · genre: editorial · theme: Specimen (deal 1/3, seed english-language-author-professor-two-629d·a9dfb682·2026-11-15·r0) · job: buy · draw: manual (no photographs, typographic covers)
 * hero: poster headline between two metric guides · nav: wordmark left, two links right · footer: wordmark and contact line · imagery: none; covers set as type until real covers arrive · signature: the headline held between hairline guides
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E, sample content is generic until the author supplies the real text, so each sample is labelled */
@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.02; }
h1, h2 { font-variation-settings: "opsz" var(--display-optical); }
h3 { font-optical-sizing: auto; line-height: 1.15; }

.skip { position: absolute; left: var(--space-md); top: -80px; background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); z-index: var(--z-toast); }
.skip:focus { top: var(--space-md); }

.site-head { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; letter-spacing: var(--tracking-display); margin: 0; }
.bar nav { display: flex; gap: var(--space-lg); }
.bar nav a { font-size: var(--text-sm); font-weight: 500; text-decoration-color: var(--color-accent); }
.bar nav a:hover, .book h3 a:hover, .crumb a:hover { text-decoration-thickness: 2px; }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); font-weight: 500; font-size: var(--text-md); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn--primary:active { background: var(--color-ink); }
.btn--secondary:active { background: var(--color-paper-3); }
a:active { color: var(--color-accent); }
.btn--soon { border-color: var(--color-rule-2); color: var(--color-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

.hero { padding-block: var(--section-gap-s) var(--section-gap); }
.hero h1 { max-width: 14ch; font-size: clamp(3rem, 9vw, 9rem); padding-block: var(--space-lg); overflow-wrap: break-word; }
.guide { border-top: var(--rule-hair) solid var(--color-guide); }
.hero .lead { margin-top: var(--space-xl); }

.section { padding-block: var(--section-gap-s); }
.section > .container > h2 { margin-bottom: var(--space-2xl); }
.band { background: var(--color-paper-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-xl) var(--gap-columns); }
.card { display: grid; gap: var(--space-sm); align-content: start; text-decoration: none; }
.card h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.card:hover h3 { text-decoration-thickness: 2px; }
.cards .cover { max-width: none; }
.pair--head { padding-block: var(--space-xl) var(--space-sm); }
.pair--head p { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; }
.credit { max-width: 70ch; margin-top: var(--space-xl); }
.book-body { display: grid; gap: var(--space-md); justify-items: start; }
.book-body .actions { margin-top: var(--space-sm); }
.sub { font-size: var(--text-lead); color: var(--color-ink-2); }
.note { font-size: var(--text-sm); color: var(--color-muted); }

.cover { aspect-ratio: 2 / 3; width: 100%; max-width: 320px; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-ink); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-lg); }
.cover--large { max-width: 440px; }
.cover-title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 96; overflow-wrap: break-word; }
.cover-author { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.cover--image { padding: 0; border-color: var(--color-rule-2); }
.cover--image img { width: 100%; height: 100%; object-fit: cover; }
.book-cover { display: block; text-decoration: none; }

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: start; }
.about h2 { margin: 0; }
.about > div { display: grid; gap: var(--space-md); }

.book-page { padding-block: var(--section-gap-s); }
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.book-page h1 { font-size: var(--text-display-s); }
.crumb { font-size: var(--text-sm); }
.details { width: 100%; max-width: 480px; border-collapse: collapse; margin-top: var(--space-lg); }
.details th, .details td { text-align: left; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.details th { font-weight: 500; color: var(--color-muted); width: 40%; }

.sample-page > .container { display: grid; gap: var(--space-lg); }
.sample-page h1 { font-size: var(--text-display-s); }
.pairs { margin-top: var(--space-xl); border-top: 3px double var(--color-rule-2); }
.pairs-head, .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.pairs-head { padding-block: var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.pair { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.pair p { max-width: 62ch; }

.site-foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.foot { display: grid; gap: var(--space-sm); }

a:hover { text-decoration-thickness: 2px; }

@media (max-width: 60rem) {
  .book, .about, .book-grid, .pairs-head, .pair { grid-template-columns: minmax(0, 1fr); }
  .pairs-head { display: none; }
  .pair p[lang="bg"] { color: var(--color-muted); }
  .cover { max-width: 260px; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 4.5rem); }
}

.bar nav .lang { border: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-3xs) var(--space-sm); text-decoration: none; }
.bar nav .lang:hover { background: var(--color-paper-2); }
.bar nav { flex-wrap: wrap; justify-content: flex-end; }