/* Field pages — the shared interior-page layer of the "field map" direction (2026-10-13).
   Loaded after styles.css, and after journey-pages.css where a page uses it, on every page except
   the homepage and the admin. It restyles what those pages already have — the editorial masthead,
   the alternating bands, the paper and the hairlines — so one file carries the direction and each
   page keeps its own layout. The About page has its own stylesheet (about-field.css) built on the
   same tokens. */
.field-page {
  --fw-max: var(--max);
  --fw-pad: 1.75rem;
  --ridge-light: #9fbf9f;
  --ridge: #42674f;
  --ridge-near: #2c4435;
  --sky-warm: #f3e3b8;
  --field-ranges: var(--tz-landscape);
  background: var(--bg);
}
.field-page.journey-page { --fw-max: 1400px; --fw-pad: 56px; }
/* One header height on every page: it scales a little with the screen so the artwork keeps its
   proportions, and the title and paragraph are clamped so no page can make it taller. */
:root { --field-head-h: clamp(380px, 33vw, 520px); }

/* Warm paper in light mode: the shared paper is a cool grey-green that read cold once the green
   bands were gone. Surfaces, hairlines and muted text warm with it; the nav follows via --nav-bg. */
:root:not([data-theme="dark"]) .field-page {
  --bg: #efe6d2;
  --bg-alt: #e5dac2;
  --surface: #faf6ec;
  --nav-bg: rgba(239, 230, 210, .96);
  --line: #d2c7ab;
  --line-soft: #ddd3ba;
  --muted: #6f6a5a;
  --ink-soft: #4a5142;
  --sky-warm: #f0d79a;
}
[data-theme="dark"] .field-page {
  --sky-warm: #1c1814;
}

/* ---------- Masthead: the poster ranges replace the green gradient; ink on paper, start-aligned ---------- */
.field-page .page-header-editorial {
  color: var(--ink);
  text-align: start;
  min-height: 0;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  /* At least the shared height, and always tall enough that the text ends above the stitched land. */
  height: auto;
  min-height: var(--field-head-h);
  overflow: hidden;
  padding: 32px max(24px, calc((100% - var(--fw-max)) / 2 + var(--fw-pad))) calc(var(--tz-land-h) + var(--tz-band-h) + 24px);
  background-color: var(--bg);
  background-image: var(--field-ranges), var(--tz-band);
  background-repeat: no-repeat, repeat-x;
  background-position: left bottom var(--tz-band-h), center bottom;
  background-size: 100% var(--tz-land-h), auto var(--tz-band-h);
}
.field-page .page-header-editorial::before,
.field-page .page-header-editorial::after { display: none; }
.field-page .page-header-editorial .eyebrow { color: var(--earth-ink); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; margin: 0 0 8px; }
.field-page .page-header-editorial h1 { color: var(--ink); font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.28; margin: 0 0 12px; max-width: 18ch; margin-inline: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.field-page .page-header-editorial p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; max-width: 44ch; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.field-page .page-header-editorial .page-header-logo { margin-inline: 0; filter: none; }

/* ---------- Compact headers on the functional pages: paper and one earth rule ---------- */
.field-page .page-header-compact { background: var(--tz-band) repeat-x center bottom / auto var(--tz-band-h); border-bottom: 0; min-height: 230px; display: flex; flex-direction: column; justify-content: center; }
.field-page .page-header-compact::after { display: none; }

/* ---------- No more coloured bands: an alternate section is a rule, not a fill ---------- */
.field-page .section-alt { background: transparent; border-top: 1px solid var(--earth-rule); }

/* ---------- Small shared touches ---------- */
.field-page .eyebrow { letter-spacing: 0; text-transform: none; color: var(--earth-ink); }
.field-page .section-head p { color: var(--ink-soft); }


/* ---------- Gallery and shop set their own heading fonts; bring them onto Amiri ---------- */
body[dir="rtl"].field-page .gallery-hero h1,
body[dir="rtl"].field-page .shop-masthead h1 { font-family: 'Amiri', 'Tajawal', serif; font-weight: 700; line-height: 1.25; }
body[dir="rtl"].field-page .gallery-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); margin-block: 10px 8px; }
body[dir="rtl"].field-page .shop-masthead h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.field-page .gallery-masthead > span:first-child,
.field-page .shop-wordmark { font-family: 'Fraunces', Georgia, serif; }
.field-page .gallery-masthead i { background: var(--earth-rule); }
.field-page .gallery-summary b { color: var(--earth-ink); }

/* Gallery: the same poster ranges under its title. The shop has them too since 2026-10-19, at a
   shorter height set in shop-collection.css so the products still start high on the page. */
.field-page .gallery-hero {
  box-sizing: border-box;
  /* Grows with its title and photo counts; the stitched land always starts below them. */
  height: auto;
  min-height: calc(var(--field-head-h) + 48px);
  overflow: hidden;
  padding: 32px 0 calc(var(--tz-land-h) + var(--tz-band-h) + 24px);
  background-color: var(--bg);
  background-image: var(--field-ranges), var(--tz-band);
  background-repeat: no-repeat, repeat-x;
  background-position: left bottom var(--tz-band-h), center bottom;
  background-size: 100% var(--tz-land-h), auto var(--tz-band-h);
}
.field-page .gallery-hero p { color: var(--ink-soft); font-size: 1.04rem; max-width: 44ch; }
.field-page .shop-masthead { border-bottom: 0; height: auto; min-height: clamp(320px, 27vw, 400px); padding-bottom: calc(var(--tz-land-h) + var(--tz-band-h) + 24px); }
@media (max-width: 640px) { :root { --field-head-h: 400px; } .field-page .gallery-hero { padding-top: 28px; } }

@media (max-width: 640px) {
  .field-page .page-header-editorial { padding-top: 28px; }
  .field-page .page-header-editorial h1 { font-size: 2.3rem; }
  .field-page .page-header-editorial p { font-size: 1.02rem; }
}