/* Hallmark · shape: Poster · genre: editorial · theme: Hedgerow (deal 2/3, seed private-family-venture-capital-706d·47300d6b·2026-11-06·r0) · job: book · draw: manual
 * hero: poster over full-bleed photograph · nav: edge-aligned wordmark and one action · footer: mast with sign-up · imagery: photographs · signature: Pumori, Nepal, full bleed under the headline · hedgerow: hedge
 * axes: dark/high-contrast-serif/chromatic-green · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R2 V2 · weakest: proof, no invented numbers so the partners and the field-guide index carry the page */
/* Hallmark · waive 85 · footer sign-up, body ends on booking · the user asked for an email sign-up */
/* Hallmark · waive 81 · hero slot holds a library photo · the sandbox blocks the photo host, it loads live */
@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3 { font-weight: 400; line-height: 1.08; }
body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }

/* nav */
.nav { position: absolute; inset: 0 0 auto; z-index: var(--z-sticky-nav); }
.nav .container { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; }
.nav-links { display: flex; gap: var(--space-xl); align-items: center; }
.nav-links a:not(.btn) { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.nav-links a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* buttons */
.btn { display: inline-block; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--secondary { background: transparent; color: var(--color-accent); }
.btn--secondary:hover { background: color-mix(in oklab, var(--color-accent) 12%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-paper-3); border-color: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* hero */
.hero { position: relative; min-height: min(100svh, 900px); display: grid; align-items: end; }
.hero [data-slot] { position: absolute; inset: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 88%, transparent) 10%, color-mix(in oklab, var(--color-paper) 45%, transparent) 60%, color-mix(in oklab, var(--color-paper) 60%, transparent)); }
.hero .container { position: relative; z-index: 2; padding-block: var(--space-4xl) var(--space-3xl); }
.hero h1 { max-width: 16ch; margin-bottom: var(--space-md); }
.hero .lead { color: var(--color-ink); max-width: 40ch; margin-bottom: var(--space-xl); }

section { padding-block: var(--section-gap); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head p { color: var(--color-muted); }

/* field-guide index */
.index { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--color-accent); }
.index > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index .name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); line-height: 1.1; }
.index .tag { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* partners */
.partners { background: var(--color-paper-2); }
.people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.person { border-top: var(--rule-hair) solid var(--color-muted); padding-top: var(--space-lg); }
.person h3 { font-size: var(--text-display-s); margin-bottom: var(--space-2xs); }
.person .role { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); margin-bottom: var(--space-md); }

/* booking statement */
.book .container { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; }
.book { padding-block: var(--section-gap-l); }
.book h2 { font-size: var(--text-display-s); max-width: 16ch; }
.book p { margin-bottom: var(--space-lg); }

/* cream band: pitch form */
.band--cream { background: var(--color-ink); color: var(--color-paper); --color-rule: color-mix(in oklab, var(--color-paper) 22%, var(--color-ink)); }
.band--cream h2 { color: var(--color-paper); }
.band--cream .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
.band--cream .split > div p { margin-top: var(--space-md); }
.band--cream a { color: var(--color-paper); text-decoration-color: var(--color-accent-deep); }
.band--cream .btn { border-color: var(--color-paper); }
.band--cream .btn--primary { background: var(--color-paper); color: var(--color-ink); }
.band--cream .btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-ink); }
form { display: grid; gap: var(--space-md); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
input, select, textarea { width: 100%; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
.band--cream input, .band--cream select, .band--cream textarea { background: color-mix(in oklab, var(--color-paper) 6%, var(--color-ink)); color: var(--color-paper); border-color: color-mix(in oklab, var(--color-paper) 60%, var(--color-ink)); }
.band--cream :focus-visible, .band--cream .btn:focus-visible { outline-color: var(--color-paper); }
input:hover, select:hover, textarea:hover { border-color: var(--color-accent-deep); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 1px; }
input:user-invalid, textarea:user-invalid { border-color: var(--color-error); }
input:disabled, textarea:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
textarea { min-height: 130px; resize: vertical; }
.status { font-size: var(--text-sm); min-height: 1.5em; }
.status.ok { color: var(--color-accent-deep); }
.status.err { color: var(--color-error); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }

/* footer */
footer { padding-block: var(--section-gap-s) var(--space-xl); }
.mast { font-family: var(--font-display); font-size: var(--text-display-s); color: var(--color-ink); line-height: 1; margin-bottom: var(--space-2xl); }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.news { display: flex; gap: var(--space-xs); max-width: 440px; }
.news input { flex: 1; border-radius: var(--radius-pill); padding-inline: var(--space-md); }
.small { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); }
.small a { color: var(--color-muted); }

@media (max-width: 60rem) {
  .head, .people, .book .container, .band--cream .split, .foot, .row { grid-template-columns: minmax(0, 1fr); }
  .index > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .nav-links a:not(.btn) { display: none; }
  .news { flex-direction: column; }
}