/* Cores e tipografia da identidade visual do Grifo. */
:root {
  color-scheme: light;
  --paper: #faf7f2;
  --sheet: #f3ede5;
  --ink: #1c1b22;
  --graphite: #61584f;
  --line: #ded4c7;
  --terra: #a5380b;
  --light: #fffdf8;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 system-ui, sans-serif; }
main { width: min(100% - 40px, 720px); margin-inline: auto; }
.landing main { width: min(100% - 72px, 1152px); }
.site-header { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 104px; height: auto; }
.site-header nav { display: flex; gap: clamp(16px, 3vw, 36px); }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 650; }
.site-header nav a:hover, .text-link:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); margin: 0 0 .5em; }
h2 { font-size: 1.55rem; margin: 1.4em 0 .35em; }
p { margin: .65em 0; }
a { color: var(--terra); text-underline-offset: .22em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--terra); outline-offset: 5px; }
.muted { color: var(--graphite); font-size: .9rem; }
.card { background: var(--light); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-block: 16px; }
.card h2 { margin-top: 0; }
.buttons, .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 10px 18px; border: 1px solid var(--terra); border-radius: 6px; background: var(--terra); color: white; font: 650 .92rem/1.4 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.button:hover { filter: brightness(.92); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.code { font: 700 28px/1 ui-monospace, monospace; letter-spacing: 4px; }
footer { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 56px; padding: 24px 0 34px; border-top: 1px solid var(--line); font-size: .86rem; }
footer a { color: var(--graphite); }

.hero { display: grid; grid-template-columns: 1.13fr 1fr; gap: clamp(28px, 6vw, 76px); align-items: center; padding: clamp(28px, 5vw, 72px) 0 clamp(56px, 8vw, 104px); }
.eyebrow { margin: 0 0 14px; color: var(--terra); font-size: .76rem; font-weight: 750; letter-spacing: .135em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: .52rem; height: .52rem; margin-right: 6px; border-radius: 50%; background: var(--terra); vertical-align: .04em; }
.hero h1 { font-size: clamp(2.6rem, 5.35vw, 5.05rem); font-weight: 500; line-height: 1.03; letter-spacing: -.055em; margin: 0 0 22px; }
.hero h1 em { color: var(--terra); font-weight: inherit; }
.intro { max-width: 38ch; color: var(--graphite); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.text-link { color: var(--ink); font-weight: 650; text-decoration: none; padding: 10px 7px; }
.beta-label { margin-top: 22px; color: var(--graphite); font-size: .82rem; }

.shelf-preview { margin: 0; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: 0 16px 36px #49362412; }
.preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 clamp(1.8rem, 3vw, 2.45rem)/1 var(--serif); }
.preview-count { color: var(--graphite); font: 700 .68rem/1.3 system-ui, sans-serif; letter-spacing: .1em; }
.preview-tabs { display: flex; gap: clamp(10px, 3vw, 23px); padding: 17px 0 10px; margin-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--graphite); font-size: .79rem; }
.preview-tabs span:first-child { color: var(--terra); font-weight: 700; }
.preview-books { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3vw, 20px); }
.book { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 2.8; min-height: 144px; padding: clamp(12px, 2vw, 20px); border-radius: 3px 7px 7px 3px; color: #fff5e6; box-shadow: inset 5px 0 #fff2, 0 5px 8px #261b1926; }
.book small { font-size: clamp(.48rem, .9vw, .65rem); font-weight: 650; letter-spacing: .08em; }
.book strong { font: 500 clamp(1.05rem, 20cqi, 2.25rem)/1 var(--serif); letter-spacing: -.03em; overflow-wrap: anywhere; }
.book span { font-size: clamp(.64rem, 1.1vw, .82rem); }
.book-casmurro { background: #843c37; }
.book-iracema { background: #345549; }
.book-status { display: flex; align-items: center; gap: 8px; padding-top: 8px; color: var(--graphite); font-size: .78rem; }
.progress-bar { flex: 1; height: 4px; border-radius: 8px; background: linear-gradient(to right, var(--terra) 45%, var(--line) 45%); }
figcaption { margin-top: 17px; color: var(--graphite); font-size: .72rem; }

.reading-flow { border-top: 1px solid var(--line); padding-top: clamp(34px, 5vw, 62px); }
.reading-flow h2, .beta h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -.04em; }
.flow-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 4vw, 52px); }
.flow-list li { padding-top: 16px; border-top: 1px solid var(--line); }
.step { color: var(--terra); font: 600 .84rem/1 ui-monospace, monospace; }
.flow-list h3 { margin: 12px 0 6px; font-size: 1.45rem; font-weight: 500; }
.flow-list p, .beta p:not(.eyebrow) { color: var(--graphite); }
.beta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(42px, 7vw, 84px); padding: clamp(20px, 4vw, 38px); border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.beta .button { flex-shrink: 0; }

@media (max-width: 760px) {
  .landing main { width: min(100% - 36px, 540px); }
  .site-header { min-height: 68px; margin-bottom: 18px; }
  .hero, .flow-list { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.6rem, 8.7vw, 4.3rem); }
  .flow-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 12px; }
  .flow-list h3 { margin-top: 0; }
  .beta { flex-direction: column; align-items: flex-start; }
}