/* 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: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 330' preserveAspectRatio='xMinYMax slice'><defs><radialGradient id='g' cx='430' cy='118' r='170' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23e9bb59' stop-opacity='.45'/><stop offset='1' stop-color='%23e9bb59' stop-opacity='0'/></radialGradient></defs><circle cx='430' cy='118' r='170' fill='url(%23g)'/><circle cx='430' cy='118' r='46' fill='%23e9bb59'/><g stroke='%23e9bb59' stroke-width='5' stroke-linecap='round'><line x1='430' y1='40' x2='430' y2='58'/><line x1='430' y1='178' x2='430' y2='196'/><line x1='352' y1='118' x2='370' y2='118'/><line x1='490' y1='118' x2='508' y2='118'/><line x1='375' y1='63' x2='388' y2='76'/><line x1='472' y1='160' x2='485' y2='173'/><line x1='485' y1='63' x2='472' y2='76'/><line x1='388' y1='160' x2='375' y2='173'/><line x1='400' y1='46' x2='407' y2='63'/><line x1='453' y1='173' x2='460' y2='190'/><line x1='460' y1='46' x2='453' y2='63'/><line x1='407' y1='173' x2='400' y2='190'/></g><path d='M585 92c6-6 12-6 18 0M597 103c6-6 12-6 18 0M612 84c5-5 10-5 15 0' fill='none' stroke='%231b3328' stroke-width='2' stroke-linecap='round'/><path fill='%23adc196' d='M0 298 L92 236 L148 262 L232 176 L287 212 L361 134 L412 160 L476 72 L531 118 L588 96 L652 150 L703 128 L790 218 L843 190 L924 246 L989 206 L1067 262 L1152 198 L1218 232 L1303 184 L1400 262 L1400 330 L0 330 Z'/><path fill='%2342674f' d='M0 330 L0 286 L110 248 L210 272 L330 214 L420 250 L540 196 L640 240 L760 206 L880 262 L990 230 L1100 274 L1230 236 L1320 268 L1400 250 L1400 330 Z'/><path fill='%232c4435' d='M0 330 L0 306 L160 290 L300 304 L460 282 L620 300 L800 280 L960 298 L1120 284 L1280 300 L1400 288 L1400 330 Z'/><path d='M-20 318 Q700 268 1420 318' fill='none' stroke='%235a3e2b' stroke-width='7' stroke-linecap='round'/></svg>");
  background: var(--bg);
}
.field-page.journey-page { --fw-max: 1400px; --fw-pad: 56px; }

/* 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: #2a3a2e;
  --field-ranges: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 330' preserveAspectRatio='xMinYMax slice'><defs><radialGradient id='g' cx='430' cy='118' r='170' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23e9bb59' stop-opacity='.35'/><stop offset='1' stop-color='%23e9bb59' stop-opacity='0'/></radialGradient></defs><circle cx='430' cy='118' r='170' fill='url(%23g)'/><circle cx='430' cy='118' r='46' fill='%23e9bb59'/><g stroke='%23e9bb59' stroke-width='5' stroke-linecap='round'><line x1='430' y1='40' x2='430' y2='58'/><line x1='430' y1='178' x2='430' y2='196'/><line x1='352' y1='118' x2='370' y2='118'/><line x1='490' y1='118' x2='508' y2='118'/><line x1='375' y1='63' x2='388' y2='76'/><line x1='472' y1='160' x2='485' y2='173'/><line x1='485' y1='63' x2='472' y2='76'/><line x1='388' y1='160' x2='375' y2='173'/><line x1='400' y1='46' x2='407' y2='63'/><line x1='453' y1='173' x2='460' y2='190'/><line x1='460' y1='46' x2='453' y2='63'/><line x1='407' y1='173' x2='400' y2='190'/></g><path d='M585 92c6-6 12-6 18 0M597 103c6-6 12-6 18 0M612 84c5-5 10-5 15 0' fill='none' stroke='%23f1f5eb' stroke-width='2' stroke-linecap='round'/><path fill='%235f7f66' d='M0 298 L92 236 L148 262 L232 176 L287 212 L361 134 L412 160 L476 72 L531 118 L588 96 L652 150 L703 128 L790 218 L843 190 L924 246 L989 206 L1067 262 L1152 198 L1218 232 L1303 184 L1400 262 L1400 330 L0 330 Z'/><path fill='%233e5c47' d='M0 330 L0 286 L110 248 L210 272 L330 214 L420 250 L540 196 L640 240 L760 206 L880 262 L990 230 L1100 274 L1230 236 L1320 268 L1400 250 L1400 330 Z'/><path fill='%2326392c' d='M0 330 L0 306 L160 290 L300 304 L460 282 L620 300 L800 280 L960 298 L1120 284 L1280 300 L1400 288 L1400 330 Z'/><path d='M-20 318 Q700 268 1420 318' fill='none' stroke='%23c4a282' stroke-width='7' stroke-linecap='round'/></svg>");
}

/* ---------- 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: block;
  padding: 56px max(24px, calc((100% - var(--fw-max)) / 2 + var(--fw-pad))) max(23.6%, 160px);
  background-color: var(--bg);
  background-image: var(--field-ranges), linear-gradient(180deg, var(--bg) 0%, var(--sky-warm) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, center;
  background-size: max(100%, 680px) auto, 100% 100%;
}
.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 14px; }
.field-page .page-header-editorial h1 { color: var(--ink); font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1.28; margin: 0 0 18px; max-width: 18ch; margin-inline: 0; }
.field-page .page-header-editorial p { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.8; max-width: 44ch; margin: 0; }
.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: transparent; border-bottom: 1px solid var(--earth-rule); }
.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.6rem, 5.6vw, 4.8rem); }
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 stays a compact trading masthead with
   an earth rule, so the products start high on the page. */
.field-page .gallery-hero {
  padding: 56px 0 max(23.6%, 160px);
  background-color: var(--bg);
  background-image: var(--field-ranges), linear-gradient(180deg, var(--bg) 0%, var(--sky-warm) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, center;
  background-size: max(100%, 680px) auto, 100% 100%;
}
.field-page .gallery-hero p { color: var(--ink-soft); font-size: 1.1rem; max-width: 44ch; }
.field-page .shop-masthead { border-bottom: 1px solid var(--earth-rule); }
@media (max-width: 640px) { .field-page .gallery-hero { padding-top: 36px; } }

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