/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: inherited CattleFenceWire
 * audience: farm owners, buyers and field coordinators · use: document execution and closeout · tone: technical
 * enrichment: E8 page-specific operational photography · nav: existing · footer: existing
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · slop: pass (42–49)
 * mobile: pass (34, 49, 50–57) · icons: pass (30) · honest: pass (46) · tokens: pass (48)
 */
@import url("/tokens.css");

.field-hero { position: relative; isolation: isolate; display: grid; min-height: clamp(31rem, 58vw, 40rem); overflow: clip; color: var(--color-text-inverse); }
.field-hero__media, .field-hero__veil { position: absolute; inset: 0; }
.field-hero__media { z-index: -2; margin: 0; }
.field-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.field-hero--daily .field-hero__media img { object-position: 52% center; }
.field-hero--punch .field-hero__media img { object-position: center 52%; }
.field-hero__veil { z-index: -1; background: linear-gradient(90deg, color-mix(in oklch, var(--color-primary) 96%, transparent), color-mix(in oklch, var(--color-primary) 77%, transparent) 52%, color-mix(in oklch, var(--color-primary) 20%, transparent)); }
.field-hero__grid { align-self: end; display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }
.field-hero h1 { margin: 0; max-width: 12ch; min-width: 0; overflow-wrap: anywhere; color: var(--color-text-inverse); font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; line-height: 1.02; letter-spacing: -0.025em; text-shadow: 0 2px 1.5rem var(--color-shadow); }
.field-hero p { margin: var(--space-md) 0 0; max-width: 57ch; color: var(--color-text-inverse); font-size: var(--text-md); text-shadow: 0 1px 0.75rem var(--color-shadow); }
.field-hero__note { align-self: end; padding: var(--space-lg); border: var(--rule-thin) solid color-mix(in oklch, var(--color-text-inverse) 28%, transparent); border-inline-start: var(--rule-strong) solid var(--color-accent); border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-primary) 86%, transparent); color: var(--color-text-inverse); backdrop-filter: blur(0.35rem); }
.field-sequence { counter-reset: field-stage; max-width: var(--content-reading); padding-block: var(--space-xl) var(--space-3xl); }
.field-stage { counter-increment: field-stage; position: relative; margin-block-start: var(--space-2xl); padding-block-start: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-primary); }
.field-stage::before { content: "0" counter(field-stage); display: block; margin-block-end: var(--space-sm); color: var(--color-accent-hover); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.field-stage h2 { margin: 0 0 var(--space-md); max-width: 22ch; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; line-height: 1.05; }
.field-stage h3 { margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; }
.field-stage p, .field-stage li { color: var(--color-text-muted); }
.field-stage > p { max-width: 65ch; }
.field-figure { display: grid; gap: 0; margin: var(--space-2xl) 0; overflow: clip; border: var(--rule-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.field-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.field-figure figcaption { display: grid; align-content: end; padding: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-sm); border-block-start: var(--rule-thin) solid var(--color-divider); }
.stage-return { margin-block: var(--space-xl); padding: var(--space-lg); border-inline-start: var(--rule-strong) solid var(--color-accent); background: var(--color-primary-highlight); color: var(--color-text); }
.stage-return strong { display: block; margin-block-end: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); }
.field-questions { padding-block: var(--space-2xl); border-block-start: var(--rule-thin) solid var(--color-divider); }
.field-questions h2, .field-evidence h2 { margin: 0 0 var(--space-lg); font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; }
.field-questions h3 { margin: var(--space-xl) 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; }
.field-questions p { max-width: 66ch; color: var(--color-text-muted); }
.field-evidence { padding-block: var(--space-2xl) var(--space-3xl); border-block-start: var(--rule-thin) solid var(--color-divider); }
.field-evidence > p { max-width: 70ch; color: var(--color-text-muted); }

@media (min-width: 48rem) {
  .field-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); }
  .field-figure { grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.6fr); }
  .field-figure figcaption { border-block-start: 0; border-inline-start: var(--rule-thin) solid var(--color-divider); }
}
@media (max-width: 47.99rem) {
  .field-hero { min-height: 38rem; }
  .field-hero__veil { background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 20%, transparent), color-mix(in oklch, var(--color-primary) 88%, transparent) 55%, var(--color-primary)); }
  .field-hero__grid { padding-block: var(--space-xl) var(--space-3xl); }
  .field-hero--daily .field-hero__media img { object-position: center; }
  .field-hero--punch .field-hero__media img { object-position: center; }
}
@media print {
  .field-hero { min-height: 0; color: var(--color-text); }
  .field-hero__media, .field-hero__veil, .field-figure, .field-questions, .field-evidence { display: none; }
  .field-hero__grid { padding-block: var(--space-md); }
  .field-hero h1, .field-hero p, .field-hero__note { color: var(--color-text); text-shadow: none; }
  .field-hero__note { padding: var(--space-md); background: transparent; border-color: var(--color-border); }
  .field-stage { break-inside: avoid; margin-block-start: var(--space-lg); padding-block-start: var(--space-sm); }
  .stage-return { background: transparent; border: var(--rule-thin) solid var(--color-border); }
}