/* About page — "field map" direction (chosen 2026-10-12, poster masthead).
   The brand emblem's own language is the structure: filled mountain ranges under a warm sky, the
   gold sun, and the earth-brown ground line that the emblem has and the site never used. No colored
   section bands: rhythm comes from space, hairlines that mark real boundaries, one dark passage
   (the founder), and an editorial Arabic display face. Nav, footer, buttons and the shared tokens
   come from styles.css. */
.page-about {
  --earth: var(--earth-ink);
  --ridge: #42674f;
  --ridge-light: #9fbf9f;
  --ridge-near: #2c4435;
  --deep: #1b3328;
  --sun: #e9bb59;
  --sky-warm: #f3e3b8;
  --display: 'Amiri', 'Fraunces', serif;
  --text: 'Tajawal', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
}
/* Warm paper for this page in light mode: the shared paper is a cool grey-green, which read cold
   once the green bands were gone. The nav picks the same tint up through --nav-bg. */
:root:not([data-theme="dark"]) .page-about {
  --bg: #efe6d2;
  --bg-alt: #e5dac2;
  --nav-bg: rgba(239, 230, 210, .96);
  --line: #d2c7ab;
  --line-soft: #ddd3ba;
  --muted: #6f6a5a;
  --ink-soft: #4a5142;
  --sky-warm: #f0d79a;
  --ridge-light: #adc196;
}
.page-about :is(h1, h2, h3, .about-quote p, .about-closing p, .about-facts dd) { font-family: var(--display); font-weight: 700; letter-spacing: 0; text-wrap: balance; }
.page-about p { text-wrap: pretty; }
.about-wrap { max-width: 1320px; margin-inline: auto; padding-inline: 48px; }
.page-about .about-title { font-size: 2.6rem; line-height: 1.2; margin: 0 0 16px; }
.page-about :is(a, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- Masthead ---------- */
:root { --field-head-h: clamp(380px, 33vw, 520px); }
.about-mast { position: relative; box-sizing: border-box; min-height: calc(var(--field-head-h) + 48px); padding-top: 32px; padding-bottom: calc(var(--tz-land-h) + var(--tz-band-h) + 24px); overflow: hidden; background: var(--bg); }
.about-mast-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 18px 72px; align-items: start; }
.about-mast-copy { grid-column: 1; grid-row: 1; }
.about-mast h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.28; margin: 0 0 12px; }
.about-standfirst { font-size: 1.06rem; line-height: 1.75; max-width: 40ch; margin: 0; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.about-facts { grid-column: 1; grid-row: 2; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; align-self: start; }
.about-facts div { padding: 8px 0; border-top: 1px solid var(--line); }
.about-facts dt { font-size: .85rem; color: var(--muted); margin: 0 0 2px; }
.about-facts dd { margin: 0; font-size: 1.35rem; line-height: 1.2; color: var(--earth); }
.about-ridge { position: absolute; inset-inline: 0; bottom: 0; height: calc(var(--tz-land-h) + var(--tz-band-h)); pointer-events: none; background: var(--tz-landscape) no-repeat left top / 100% var(--tz-land-h), var(--tz-band) repeat-x center bottom / auto var(--tz-band-h); }

/* ---------- Page index ---------- */
.about-index { display: flex; flex-wrap: wrap; gap: 6px 32px; padding-block: 18px; border-bottom: 1px solid var(--line); margin-top: 8px; }
.about-index a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .98rem; padding-block: 6px; border-bottom: 2px solid transparent; }
.about-index a:hover { color: var(--ink); border-bottom-color: var(--sun); }

/* ---------- Story ---------- */
.about-story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-block: 64px 56px; }
.about-story-copy p { font-size: 1.22rem; line-height: 1.95; max-width: 46ch; margin: 0 0 1.4em; }
.about-story-copy p:last-child { margin-bottom: 0; }
/* The story photo runs in full colour: it is the page's one warm photograph. */
.about-duotone { margin: 0; border-radius: 4px; overflow: hidden; background: var(--bg-alt); }
.about-duotone img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- Mission and vision: two statements, one line between them ---------- */
.about-statements { display: grid; grid-template-columns: 1fr 1fr; border-block: 0; background: var(--tz-band) repeat-x center top / auto 13px, var(--tz-band) repeat-x center bottom / auto 13px; padding-block: 13px; }
.about-statement { padding: 40px 48px 44px 0; }
.about-statement + .about-statement { border-inline-start: 1px solid var(--earth); padding-inline: 48px 0; }
.about-word { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink-soft); margin-bottom: 20px; }
.about-word::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }
.about-statement h2 { font-size: 2.4rem; line-height: 1.25; margin: 0 0 16px; }
.about-statement p { font-size: 1.08rem; line-height: 1.9; color: var(--ink-soft); max-width: 42ch; margin: 0; }

/* ---------- What we do ---------- */
.about-do { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; padding-block: 64px; }
.about-do h2 { font-size: 2.6rem; line-height: 1.2; margin: 0; }
.about-do ul { list-style: none; margin: 0; padding: 0; }
.about-do li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 1.15rem; line-height: 1.7; }
.about-do li:first-child { border-top: 1px solid var(--line); }
.about-do li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); margin-top: 12px; }

/* ---------- Founder: the page's one dark passage ---------- */
/* Keep the founder passage green, with a warmer olive undertone. */
.about-founder { background: url("/assets/images/tatreez/lattice-star.svg") 0 0 / 80px 80px, var(--brand-forest-warm); color: var(--on-dark); }
.about-founder-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: stretch; padding-inline-end: 0; }
.about-founder-copy { padding-block: 64px; }
.about-founder-copy h2 { font-size: 3.4rem; line-height: 1.15; margin: 0 0 6px; color: var(--on-dark); }
.about-role { color: var(--on-dark-muted); margin: 0 0 32px; font-size: 1rem; }
.about-founder-copy > p:not(.about-role) { font-size: 1.12rem; line-height: 1.9; max-width: 52ch; margin: 0 0 1.2em; color: var(--on-dark); }
.about-quote { margin: 28px 0 0; padding: 0 24px 0 0; border-inline-start: 3px solid var(--sun); padding-inline-start: 24px; padding-inline-end: 0; }
.about-quote p { font-size: 2rem; line-height: 1.45; color: var(--sun); margin: 0; font-weight: 400; }
.about-quote cite { display: block; margin-top: 12px; font-style: normal; color: var(--on-dark-muted); font-size: .95rem; }
.about-founder-portrait { margin: 0; min-height: 480px; }
.about-founder-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- Values: a manifesto, not icon cards ---------- */
.about-values { padding-block: 64px 48px; }
.about-values ol { list-style: none; margin: 24px 0 0; padding: 0; }
.about-values li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 72px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.about-values li:last-child { border-bottom: 1px solid var(--line); }
.about-values h3 { font-size: 2.3rem; line-height: 1.2; margin: 0; }
.about-values p { margin: 0; font-size: 1.08rem; line-height: 1.9; color: var(--ink-soft); max-width: 58ch; }

/* ---------- Team: one portrait wall, department rows (markup from team.js) ---------- */
.about-team { padding-block: 16px 64px; }
.about-team-head { max-width: 640px; margin-bottom: 32px; }
.about-team-head p { font-size: 1.08rem; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.page-about .team-department-filter { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 8px; }
.page-about .team-filter-btn { background: none; border: 0; border-radius: 0; padding: 8px 0; font: inherit; font-weight: 500; font-size: .95rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.page-about .team-filter-btn:hover, .page-about .team-filter-btn.active { color: var(--ink); border-bottom-color: var(--sun); }
.page-about .team-group { padding: 24px 0 4px; border-top: 1px solid var(--line); }
.page-about .team-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.page-about .team-group-head h3 { font-size: 1.5rem; line-height: 1.3; margin: 0; }
.page-about .team-group-head span { font-size: .9rem; color: var(--muted); background: none; border: 0; padding: 0; min-width: 0; width: auto; height: auto; line-height: inherit; font-weight: 500; }
.page-about .team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
.page-about .team-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: start; }
.page-about .team-avatar { aspect-ratio: 1; width: auto; height: auto; border-radius: 4px; overflow: hidden; background: var(--bg-alt); display: grid; place-items: center; margin: 0; font-family: var(--display); font-size: 2rem; color: var(--ridge); }
.page-about .team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.page-about .team-card h3 { font-family: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 10px 0 2px; }
.page-about .team-role { font-size: .86rem; color: var(--muted); }
.page-about .team-card p { font-size: .86rem; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.6; }
.page-about .team-card p:empty { display: none; }
.page-about .team-empty { color: var(--muted); padding: 16px 0; }

/* ---------- Partners ---------- */
.about-partners { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 72px; padding-block: 77px 64px; border-top: 0; background: var(--tz-band) repeat-x center top / auto 13px; }
.about-partners-copy p { font-size: 1.08rem; line-height: 1.9; color: var(--ink-soft); max-width: 52ch; margin: 0 0 1.2em; }
.about-partners-copy .btn { margin-top: 12px; }
.about-partners-aside { align-self: end; }
.about-partner-list { list-style: none; margin: 0; padding: 0; }
.about-partner-list li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 1.05rem; line-height: 1.6; }
.about-partner-list li:last-child { border-bottom: 1px solid var(--line); }
.about-quote-small { margin: 28px 0 0; padding: 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--sun); }
.about-quote-small p { font-family: var(--display); font-size: 1.5rem; line-height: 1.45; margin: 0; }
.about-quote-small cite { display: block; margin-top: 8px; font-style: normal; color: var(--muted); font-size: .9rem; }

/* ---------- Future ---------- */
.about-future { padding-block: 77px 80px; border-top: 0; background: var(--tz-band) repeat-x center top / auto 13px; }
.about-future-head { max-width: 680px; margin-bottom: 32px; }
.about-future-head p { font-size: 1.08rem; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.about-future-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.about-future-list article { padding: 22px 0; border-top: 1px solid var(--line); }
.about-future-list h3 { font-size: 1.6rem; line-height: 1.3; margin: 0 0 10px; }
.about-future-list p { margin: 0; line-height: 1.85; color: var(--ink-soft); }
.about-closing { margin: 56px 0 0; padding: 0; max-width: 760px; }
.about-closing p { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.35; margin: 0 0 18px; font-weight: 400; }
.about-closing cite { font-style: normal; color: var(--muted); font-size: 1rem; }

/* ---------- Dark theme ---------- */
[data-theme="dark"] .page-about { --ridge-light: #5f7f66; --sky-warm: #1c1814; }
/* The founder passage stays the one green panel: a deep forest cloth with its star lattice. */
[data-theme="dark"] .about-founder { background: url("/assets/images/tatreez/lattice-star.svg") 0 0 / 80px 80px, #1d3227; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .about-wrap { padding-inline: 32px; }
  .about-mast-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-facts { display: none; } /* the same numbers are in the story text */
  .about-story { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px; }
  .about-duotone img { aspect-ratio: 3 / 2; }
  .about-do, .about-values li, .about-partners { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-about .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline-end: 32px; }
  .about-founder-portrait { order: -1; min-height: 0; margin-inline: -32px; }
  .about-founder-portrait img { aspect-ratio: 4 / 3; height: auto; }
  .about-founder-copy { padding-block: 40px 56px; }
}
@media (max-width: 640px) {
  :root { --field-head-h: 400px; }
  .about-wrap { padding-inline: 20px; }
  .about-mast { padding-top: 40px; }
  .about-mast h1 { font-size: 2.6rem; }
  .about-standfirst { font-size: 1.08rem; }
  .about-facts dd { font-size: 1.5rem; }
  .about-index { gap: 4px 20px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; }
  .page-about .about-title, .about-do h2 { font-size: 2.1rem; }
  .about-statements { grid-template-columns: minmax(0, 1fr); }
  .about-statement, .about-statement + .about-statement { padding: 36px 0; border-inline-start: 0; }
  .about-statement + .about-statement { border-top: 0; background: var(--tz-stitch-line) repeat-x left top / 8px 8px; }
  .about-statement h2 { font-size: 1.9rem; }
  .about-founder-copy h2 { font-size: 2.5rem; }
  .about-quote p { font-size: 1.5rem; }
  .about-founder-grid { padding-inline-end: 20px; }
  .about-founder-portrait { margin-inline: -20px; }
  .about-values h3 { font-size: 1.8rem; }
  .page-about .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .about-future-list { grid-template-columns: minmax(0, 1fr); }
  .about-closing { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .page-about * { transition: none !important; } }

/* ---------- Stitch map (2026-10-26): historic Palestine with each motif tied to its town ----------
   The land is a faint even-weave inside a running-stitch edge, quiet enough that the motifs lead.
   Desktop: map and motif groups in the map's 760 x 800 frame, story in a side column.
   Phones: the map with its red town stitches, then the motifs as a list. */
.stitch-map { padding-block: 88px 72px; }
.stitch-map-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 28px; }
.stitch-map-head h2 { font-size: 2.6rem; line-height: 1.2; margin: 0; }
.stitch-map-head p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; max-width: 44ch; }
.stitch-map-cloth { position: relative; display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 1fr); gap: 28px; align-items: start; padding: 30px; border-radius: 14px; background: var(--tz-aida) 0 0 / 6px 6px, var(--surface); box-shadow: 0 22px 40px -30px rgba(40, 25, 10, .6); }
.stitch-map-cloth::before { content: ""; position: absolute; inset: 8px; pointer-events: none; --hem: url("/assets/images/tatreez/stitch-line-earth.svg"); background: var(--hem) repeat-x left top / 7px 7px, var(--hem) repeat-x left bottom / 7px 7px, var(--hem) repeat-y left top / 7px 7px, var(--hem) repeat-y right top / 7px 7px; }
[data-theme="dark"] .stitch-map-cloth::before { --hem: url("/assets/images/tatreez/stitch-line.svg"); }
/* the map keeps north up and its own proportions whatever the language direction */
.stitch-map-field { position: relative; aspect-ratio: 760 / 800; direction: ltr; }
.stitch-map-land { position: absolute; inset: 0; background: var(--earth-ink); -webkit-mask: url("/assets/images/tatreez/palestine-map.svg") center / 100% 100% no-repeat; mask: url("/assets/images/tatreez/palestine-map.svg") center / 100% 100% no-repeat; opacity: .9; }
.stitch-map-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stitch-map-thread line { stroke: #8a6a48; stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .75; }
[data-theme="dark"] .stitch-map-thread line { stroke: #c4a282; }
/* the town itself: one red cross-stitch on a linen dot, exactly on the town */
.stitch-map-town { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #f4ead2; box-shadow: 0 0 0 1px rgba(90, 62, 43, .35); }
.stitch-map-town::before { content: ""; position: absolute; inset: 3px; background: var(--stitch-red); -webkit-mask: url("/assets/images/tatreez/stitch-line-red.svg") center / 100% 100%; mask: url("/assets/images/tatreez/stitch-line-red.svg") center / 100% 100%; }
.stitch-map-stop { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; direction: rtl; }
.stitch-map-stop button, .stitch-map-row button { display: grid; justify-items: center; gap: 8px; padding: 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:is(.stitch-map-stop, .stitch-map-row) button:focus-visible { outline: 2px solid var(--earth-ink); outline-offset: 4px; border-radius: 6px; }
.stitch-map-art { display: block; width: min(var(--size), calc(var(--w) * 7px)); aspect-ratio: var(--w) / var(--h); background: var(--t); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.stitch-map-main:hover > .stitch-map-art, .stitch-map-main[aria-pressed="true"] > .stitch-map-art { transform: translateY(-3px) scale(1.05); }
.stitch-map-label { --hem: url("/assets/images/tatreez/stitch-line-earth.svg"); display: grid; justify-items: center; padding: 7px 12px 9px; font-family: 'Amiri', serif; font-weight: 700; font-size: .98rem; line-height: 1.25; color: #3a2a1d; white-space: nowrap; background: var(--hem) repeat-x left 4px top 4px / 6px 6px, var(--hem) repeat-x left 4px bottom 4px / 6px 6px, var(--hem) repeat-y left 4px top 4px / 6px 6px, var(--hem) repeat-y right 4px top 4px / 6px 6px, #f4ead2; box-shadow: 0 6px 14px -9px rgba(40, 25, 10, .5); }
.stitch-map-label small { font: 600 .72rem/1.2 'Tajawal', sans-serif; color: #6b4a2c; }
.stitch-map-main[aria-pressed="true"] .stitch-map-label { --hem: url("/assets/images/tatreez/stitch-line-red.svg"); }
.stitch-map-more { display: flex; gap: 4px; align-items: end; }
.stitch-map-more button { padding: 4px; border-radius: 6px; }
.stitch-map-more button[aria-pressed="true"] { background: color-mix(in srgb, var(--earth-rule) 22%, transparent); }
.stitch-map-side { display: grid; gap: 18px; align-content: start; padding-top: 8px; }
.stitch-map-note { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.stitch-map-list { display: none; }
.stitch-map-story { padding: 18px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .45); }
.stitch-map-story h3 { margin: 0; font-family: 'Amiri', serif; font-size: 1.55rem; line-height: 1.2; }
.stitch-map-place { font-size: .88rem; font-weight: 700; color: var(--earth-ink); }
.stitch-map-story p { margin: 10px 0 12px; line-height: 1.7; }
.stitch-map-story a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) {
  .stitch-map-cloth { grid-template-columns: minmax(0, 1fr); }
  .stitch-map-field { max-width: 760px; width: 100%; margin-inline: auto; }
  .stitch-map-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .stitch-map { padding-block: 64px 48px; }
  .stitch-map-head { grid-template-columns: 1fr; }
  .stitch-map-head h2 { font-size: 2.1rem; }
  .stitch-map-cloth { padding: 22px 14px; gap: 14px; }
  /* phones: only the land and its town stitches on the map; the motifs follow as a list */
  .stitch-map-field { width: min(100%, 320px); }
  .stitch-map-stop, .stitch-map-thread { display: none; }
  .stitch-map-town { width: 12px; height: 12px; }
  .stitch-map-side { grid-template-columns: minmax(0, 1fr); }
  .stitch-map-list { display: grid; gap: 14px; }
  .stitch-map-row { display: grid; gap: 6px; }
  .stitch-map-row .stitch-map-main { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; }
  .stitch-map-row .stitch-map-main > .stitch-map-art { justify-self: center; }
  .stitch-map-row .stitch-map-more { padding-inline-start: 110px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .stitch-map-art { transition: none; } }