/* Hallmark · shape: Catalogue · genre: editorial · theme: Solstice (deal 1/3) · job: buy · hero: split · nav: masthead · footer: colophon · imagery: real PDF covers · signature: four real guides as a bookshelf · solstice: long-light · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R5 V4 · weakest: P, this is a catalogue; removed generic persuasion and kept the real materials */
/* Hallmark · waive 79 · four real products with existing sales pages · Portal dos Guias is a compact catálogo of materiais em PDF, without repeated sales pitches */
@import url('./tokens.css');
@import url('./base.css');
@import url('./fonts.css');
:root { --book-shadow: 8px 12px 0 var(--color-paper-3); }
.skip { position:absolute; z-index:var(--z-tooltip); padding:var(--space-md); background:var(--color-paper-2); transform:translateY(-150%); }
.skip:focus { transform:translateY(0); }
.mast { display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-lg); border-bottom:var(--rule-hair) solid var(--color-rule); gap:var(--space-lg); }
.wordmark { font-family:var(--font-display); font-size:var(--text-xl); line-height:1.25; text-decoration:none; }
.wordmark span { display:block; font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-muted); padding-top:var(--space-2xs); }
.mast nav { display:flex; gap:var(--space-lg); font-size:var(--text-sm); }
.mast nav a { text-decoration:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-xl); align-items:center; padding-block:var(--space-2xl); }
h1 { font-size:clamp(2.75rem,4.7vw,4.5rem); max-width:11ch; }
.hero .lead { margin-block:var(--space-lg); max-width:30ch; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:var(--space-sm) var(--space-lg); border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-accent-ink); font:500 var(--text-md)/1.4 var(--font-body); text-align:center; text-decoration:none; transition:transform var(--dur-micro) var(--ease-out); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
a:not(.button):hover { color:var(--color-accent); }
.hero-shelf { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-lg); align-items:center; padding-block:var(--space-lg); }
.hero-book { width:100%; max-height:360px; object-fit:contain; box-shadow:var(--book-shadow); }
.hero-book.first { transform:rotate(-5deg) translateY(-8px); }
.hero-book.second { transform:rotate(5deg) translateY(24px); }
.catalog { padding-top:var(--space-xl); padding-bottom:var(--space-3xl); }
.catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.catalog-heading h2 { font-size:var(--text-section); }
.catalog-heading p { color:var(--color-muted); }
.topics { display:flex; flex-wrap:wrap; gap:var(--space-lg); padding-block:var(--space-lg); border-top:var(--rule-hair) solid var(--color-rule); }
.topics a { font-size:var(--text-sm); }
.product { display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,1fr); gap:var(--space-2xl); border-top:var(--rule-hair) solid var(--color-rule); padding-block:var(--space-xl); align-items:center; scroll-margin-top:var(--space-lg); }
.cover-link { display:flex; justify-content:center; align-items:center; padding:var(--space-lg); background:var(--color-paper-2); min-height:300px; }
.cover-link img { width:auto; max-width:100%; max-height:320px; object-fit:contain; }
.product-copy h3 { font-size:clamp(1.7rem,2.7vw,2.7rem); max-width:24ch; margin-block:var(--space-xs) var(--space-lg); }
.product-copy h3 a { text-decoration:none; }
.product-copy>p { max-width:54ch; }
.category,.format { color:var(--color-muted); font-size:var(--text-sm); }
.category { margin-bottom:var(--space-sm); }
.format { margin-top:var(--space-md); }
.product-action { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-lg); padding-top:var(--space-lg); }
.price { font-size:var(--text-lg); font-weight:500; }
.delivery { background:var(--color-paper-2); padding-block:var(--space-2xl); border-block:var(--rule-hair) solid var(--color-rule); }
.delivery-inner { display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:var(--space-2xl); }
.delivery h2 { font-size:var(--text-section); max-width:12ch; }
.delivery ol { display:grid; gap:var(--space-lg); padding-left:var(--space-lg); margin:0; }
.delivery h3 { font-size:var(--text-xl); margin-bottom:var(--space-xs); }
.delivery p { color:var(--color-ink-2); }
.footer { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:var(--space-lg); padding-block:var(--space-xl); }
.footer p { max-width:34ch; font-size:var(--text-sm); color:var(--color-muted); }
.footer>a:last-child { font-size:var(--text-sm); }
@media(max-width:60rem) { .hero { gap:var(--space-lg); } .hero-book { max-height:280px; } .product { gap:var(--space-xl); } .catalog-heading { display:block; } .catalog-heading p { margin-top:var(--space-sm); } }
@media(max-width:40rem) { .mast { align-items:start; } .mast nav { flex-direction:column; gap:var(--space-xs); } .wordmark { font-size:var(--text-lg); } .hero { grid-template-columns:minmax(0,1fr); padding-block:var(--space-xl); gap:var(--space-lg); } h1 { font-size:2.85rem; max-width:13ch; } .hero-shelf { max-width:340px; margin-inline:auto; padding-block:var(--space-lg); gap:var(--space-lg); } .hero-book { max-height:220px; } .catalog { padding-top:var(--space-lg); } .product { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); } .cover-link { min-height:240px; } .cover-link img { max-height:280px; } .product-copy h3 { max-width:23ch; } .delivery-inner { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); } .delivery h2 { max-width:18ch; } .topics { gap:var(--space-md); } }