:root {
  --bone: #f3f0e8;
  --paper: #fbfaf6;
  --ink: #25251f;
  --olive: #4d5340;
  --moss: #676c57;
  --clay: #a98e79;
  --line: rgba(37, 37, 31, 0.22);
  --serif: "Italiana", "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 20; padding: .8rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 1rem; }
.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 5vw; border-bottom: 1px solid rgba(255,255,255,.18); color: var(--paper); }
.wordmark { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .06em; }
.wordmark span { font-style: italic; }
nav { display: flex; gap: 2.3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
nav a, .header-join { transition: opacity .25s ease; }
nav a:hover, .header-join:hover { opacity: .6; }
.header-join { justify-self: end; font-size: .78rem; }
.header-join span { margin-left: .65rem; }

.hero { position: relative; min-height: 100vh; padding: 180px 10vw 90px; background: var(--olive); color: var(--paper); display: grid; grid-template-columns: 13% 1fr 25%; align-items: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-index { align-self: start; padding-top: 8rem; font-size: .64rem; letter-spacing: .16em; writing-mode: vertical-rl; }
.eyebrow { margin: 0 0 1.4rem; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(4.2rem, 8.4vw, 9.2rem); line-height: .88; letter-spacing: -.025em; }
h1 em, h2 em, h3 em { font-weight: 400; color: #c9b6a4; }
.hero-note { align-self: end; padding-bottom: 2rem; max-width: 20rem; }
.botanical { display: block; width: 7.35rem; height: 7.35rem; margin: 0 0 1.25rem -2.227rem; transform: translateY(.6125rem); background-color: #c9b6a4; -webkit-mask: url("alma-livre-tree-emblem.png") center / contain no-repeat; mask: url("alma-livre-tree-emblem.png") center / contain no-repeat; }
.hero-note p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; }
.hero-note a { display: inline-block; margin-top: 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.5); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.hero-note a span { margin-left: 1rem; }
.vertical-mark { position: absolute; right: 2.5vw; bottom: 12%; margin: 0; font-size: .58rem; letter-spacing: .22em; writing-mode: vertical-rl; opacity: .65; }

.philosophy { padding: 10rem 8vw 9rem; display: grid; grid-template-columns: 22% 36% 1fr; column-gap: 4vw; }
.section-label { font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.section-label span { display: inline-block; margin-right: 1.2rem; color: var(--clay); }
.philosophy-heading { padding-top: 8rem; }
.philosophy-heading p { margin: 0; font-family: var(--serif); font-size: 1.6rem; }
.philosophy-heading h2, .author h2 { font-size: clamp(4rem, 7vw, 7rem); line-height: 1; }
.philosophy-copy { padding-top: 8rem; }
.lead { margin: 0 0 3.5rem; font-family: var(--serif); font-size: clamp(1.7rem, 2.3vw, 2.5rem); line-height: 1.35; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; font-size: .94rem; line-height: 1.8; }
.columns p { margin: 0; }
@media (min-width: 901px) { .columns { width: calc(100% + 11.5vw); margin-left: -5.5vw; } }
.principles { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 7rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles div { min-height: 180px; display: flex; align-items: flex-start; gap: 2rem; padding: 2.2rem; border-right: 1px solid var(--line); }
.principles div:last-child { border: 0; }
.principles span { color: var(--clay); font-family: var(--serif); }
.principles p { margin: 2.2rem 0 0; font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; }

.manifest { padding: 9rem 8vw; background: var(--ink); color: var(--bone); display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; }
.book-stage { position: relative; min-height: 700px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(243,240,232,.18); border-right: 0; perspective: 1200px; }
.book-shadow { position: absolute; width: min(43%, 260px); aspect-ratio: .667; margin: 2.8rem 0 0 2.8rem; background: #11110e; transform: rotate(2deg); filter: blur(10px); opacity: .7; }
.physical-book { position: relative; width: 285px; max-width: 68%; transform: rotateY(-8deg) rotateZ(-.8deg); transform-origin: left center; box-shadow: -18px 28px 50px rgba(0,0,0,.48), 7px 3px 0 #b9aa91, 10px 5px 0 #776c5d; }
.physical-book::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 9px; background: rgba(44,42,35,.22); box-shadow: inset -2px 0 rgba(255,255,255,.2); pointer-events: none; }
.book-cover { display: block; width: 100%; height: auto; object-fit: contain; }
.manifest-copy { max-width: none; min-height: 700px; padding: 4.5rem clamp(2.5rem, 4vw, 5rem); border: 1px solid rgba(243,240,232,.18); display: flex; flex-direction: column; justify-content: center; }
.section-label.light { color: rgba(243,240,232,.72); margin-bottom: 5rem; }
.manifest-copy h2 { font-size: clamp(4rem, 6.5vw, 7rem); line-height: .95; }
.manifest-copy > p:not(.eyebrow):not(.edition-note) { margin: 1.8rem 0; max-width: 30rem; color: rgba(243,240,232,.72); font-size: 1rem; line-height: 1.85; }
.manifest-copy blockquote { margin: 2rem 0 1.65rem; padding: 0 0 0 2rem; border-left: 1px solid var(--clay); font-family: var(--serif); font-size: 1.6rem; font-style: italic; line-height: 1.5; }
.edition-note { margin: .35rem 0 0; font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; color: var(--clay); }
.amazon-button { display: inline-flex; align-self: flex-start; align-items: center; width: 58%; min-width: max-content; gap: 1.2rem; margin-top: 1rem; padding: 1rem 1.35rem; border: 1px solid rgba(243,240,232,.55); color: var(--bone); font-size: .7rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; transition: background-color .25s ease, color .25s ease; }
.amazon-button:hover, .amazon-button:focus-visible { background: var(--bone); color: var(--ink); }

.author { position: relative; padding: 10rem 8vw; display: grid; grid-template-columns: 22% 36% 1fr; gap: 4vw; overflow: hidden; }
.author-portrait { position: absolute; left: 3vw; top: 13rem; width: 27%; aspect-ratio: 2 / 3; overflow: hidden; }
.author-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.author-intro, .author-copy { position: relative; z-index: 1; padding-top: 8rem; }
.author h2 em { color: var(--clay); }
.author-copy > p:not(.lead) { max-width: 30rem; font-size: .96rem; line-height: 1.85; }
.signature { display: block; margin-top: 3rem; color: var(--olive); font-family: var(--serif); font-size: 2.8rem; font-style: italic; }

.join { padding: 10rem 8vw; background: var(--bone); text-align: center; }
.join-symbol { margin-bottom: 2rem; color: var(--olive); font-size: 3rem; }
.join-symbol img { display: block; width: 9rem; height: 9rem; margin: 0 auto; object-fit: contain; }
.join h2 { font-size: clamp(4rem, 7vw, 7.5rem); line-height: .93; }
.join h2 em { color: var(--clay); }
.join-copy { max-width: 33rem; margin: 2rem auto 4rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; }
form { max-width: 650px; margin: auto; text-align: left; }
form label { display: block; margin-bottom: .7rem; font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; }
.input-row { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--ink); }
input { min-width: 0; border: 0; padding: 1.3rem 0; background: transparent; color: var(--ink); font: 1.05rem var(--sans); outline: none; }
input::placeholder { color: rgba(37,37,31,.45); }
button { border: 0; padding: 0 0 0 2rem; background: transparent; color: var(--ink); font: 500 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
button span { margin-left: 1rem; }
.form-status { min-height: 1.4rem; margin-top: 1rem; font-size: .78rem; }

footer { min-height: 190px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 3rem 5vw; background: var(--olive); color: var(--bone); }
.footer-mark { width: 5rem; justify-self: start; margin-left: 2rem; transform: translateX(24px); }
.footer-emblem { display: block; width: 5rem; height: 5rem; transform: translateY(1.363rem) scale(2.3); transform-origin: center; background-color: currentColor; -webkit-mask: url("alma-livre-tree-emblem.png") center / contain no-repeat; mask: url("alma-livre-tree-emblem.png") center / contain no-repeat; }
footer p { margin: 0; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
footer p:last-of-type { justify-self: end; }
footer { position: relative; }
.footer-email { position: absolute; bottom: calc(1rem + 18px); left: 50%; transform: translateX(-50%); font-size: .66rem; letter-spacing: .12em; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 90px; }
  nav { display: none; }
  .hero { padding: 160px 7vw 70px; grid-template-columns: 1fr; align-content: center; }
  .hero-index, .vertical-mark { display: none; }
  .hero-note { margin-top: 5rem; padding: 0; }
  .philosophy, .author { grid-template-columns: 1fr; padding: 7rem 7vw; }
  .philosophy-heading, .philosophy-copy, .author-intro, .author-copy { padding-top: 4rem; }
  .principles { grid-column: 1; margin-top: 4rem; }
  .manifest { grid-template-columns: 1fr; padding: 7rem 7vw; }
  .book-stage { min-height: 560px; border-right: 1px solid rgba(243,240,232,.18); border-bottom: 0; }
  .manifest-copy { min-height: auto; padding: 4rem; }
  .section-label.light { margin-bottom: 4rem; }
  .author-portrait { position: relative; left: auto; top: auto; width: min(86vw, 443px); aspect-ratio: 2 / 3; margin-top: 4rem; }
}

@media (max-width: 580px) {
  .header-join { font-size: 0; }
  .header-join span { font-size: 1.2rem; }
  h1 { font-size: 3.7rem; }
  .hero { min-height: 900px; }
  .columns, .principles { grid-template-columns: 1fr; }
  .principles div { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .principles div:last-child { border-bottom: 0; }
  .book-stage { min-height: 480px; }
  .physical-book { width: 250px; max-width: 68%; }
  .manifest-copy { padding: 3rem 2rem; }
  .book-shadow { width: min(58%, 230px); }
  .join { padding: 7rem 7vw; }
  .input-row { grid-template-columns: 1fr; }
  button { padding: 1.2rem 0; text-align: left; }
  footer { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
  .footer-mark { justify-self: center; margin-left: 0; }
  footer p:last-of-type { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }