/* Sit for Gaza 2026 — shared stylesheet
   Type: Newsreader (display) + Archivo (body/UI), both Google Fonts.
   Colour logic: green = the practice, red = the ask, black = ink. */

:root {
  --paper:  #F6F2E9;
  --ink:    #15130F;
  --red:    #B3372B;
  --red-dk: #8C2A20;
  --green:  #1C6B45;
  --green-dk: #145234;
  --muted:  #57524A;
  --hair:   rgba(21, 19, 15, 0.18);
  --gutter: 96px;
  --accent: var(--red);
  --accent-dk: var(--red-dk);
}
body.accent-green { --accent: var(--green); --accent-dk: var(--green-dk); }
body.accent-red   { --accent: var(--red);   --accent-dk: var(--red-dk); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1280px; margin: 0 auto; }

/* ---------- nav (every page except the home page) ---------- */

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); height: 76px; border-bottom: 1px solid var(--hair);
}
.bar a { color: var(--ink); text-decoration: none; }
.wordmark { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ---------- hero ---------- */

.hero { padding: 64px var(--gutter) 0; }
.hero.inner { padding-top: 76px; }
.eyebrow {
  font-size: 17px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
h1 {
  margin: 20px 0 0; font-family: Newsreader, Georgia, serif; font-weight: 500;
  font-size: clamp(46px, 8.75vw, 112px); line-height: 0.9; letter-spacing: -0.035em;
}
h1.inner { font-size: clamp(52px, 8.1vw, 104px); line-height: 0.94; }
.sub {
  margin: 26px 0 0; max-width: 940px; font-family: Newsreader, Georgia, serif;
  font-size: clamp(21px, 2.5vw, 32px); line-height: 1.25;
  letter-spacing: -0.012em; text-wrap: pretty;
}

.rule { height: 1px; background: var(--hair); margin: 48px var(--gutter) 0; }

/* ---------- home: lede + record + split ---------- */

.cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px; padding: 36px var(--gutter) 0; align-items: start;
}
.lede { margin: 0; font-size: 21px; line-height: 1.6; text-wrap: pretty; }
.record { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 24px; line-height: 1.5; text-wrap: pretty; }
.record .fig { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--green); }

.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; padding: 44px var(--gutter) 0;
}
.block {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 208px; padding: 32px 36px 30px; color: var(--paper); text-decoration: none;
}
.block.sit    { background: var(--ink); }
.block.pledge { background: var(--red); }
.block .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.block.pledge .kicker { color: rgba(246, 242, 233, 0.72); }
.block .line { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 28px; }
.block .label {
  font-family: Newsreader, Georgia, serif; font-size: clamp(31px, 3.8vw, 48px);
  line-height: 1.02; letter-spacing: -0.02em;
}
.block svg { flex-shrink: 0; margin-bottom: 6px; }

/* ---------- photos ---------- */

.photo-band { margin: 0; padding: 0; }
.photo-band img { display: block; width: 100vw; height: 348px; object-fit: cover; object-position: center top; }
.photo-inset {
  margin: 56px 0 0; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start;
}
.photo-inset img { display: block; width: 860px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%; }
figcaption, .caption {
  padding: 14px var(--gutter) 0; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.photo-inset figcaption { padding: 14px 0 0; }

/* ---------- Q&A / step rows ---------- */

.qa { padding: 56px var(--gutter) 0; }
.row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px; padding: 42px 0; border-top: 1px solid var(--hair);
}
.row:last-child { border-bottom: 1px solid var(--hair); }
.row > h2, .row > .rowhead {
  grid-column: span 4; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.row h2, .rowhead h2 {
  margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500;
  font-size: 34px; line-height: 1.12; letter-spacing: -0.02em;
}
.row > .body { grid-column: span 8; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.row p { margin: 0; font-size: 20px; line-height: 1.62; text-wrap: pretty; }
.steplabel { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.voice {
  font-family: Newsreader, Georgia, serif; font-style: italic;
  font-size: 32px; line-height: 1.26; letter-spacing: -0.015em; color: var(--accent);
}
.plain-lg { font-family: Newsreader, Georgia, serif; font-size: 30px; line-height: 1.3; letter-spacing: -0.015em; }
.callout {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 24px;
  font-family: Newsreader, Georgia, serif; font-size: 27px; line-height: 1.42; letter-spacing: -0.015em;
}
.row a, .after a, .sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- forms ---------- */

.formwrap { padding: 64px var(--gutter) 0; }
form.sheet {
  border: 2px solid var(--ink); padding: 52px 56px 56px;
  display: flex; flex-direction: column; gap: 36px; background: var(--paper);
}
.formhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.formhead h2 {
  margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 500;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.025em;
}
.formhead .note { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field > label, legend { font-size: 19px; line-height: 1.5; padding: 0; }
.field > label.tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.help { font-size: 15px; line-height: 1.5; color: var(--muted); }
input[type="text"], input[type="email"] {
  height: 48px; border: 0; border-bottom: 2px solid var(--ink); background: transparent;
  font-family: Archivo, sans-serif; font-size: 20px; color: var(--ink); padding: 0; border-radius: 0;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.money { margin-top: 6px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); height: 48px; }
.money span { font-family: Newsreader, Georgia, serif; font-size: 28px; color: var(--muted); }
.money .unit { font-family: Archivo, sans-serif; font-size: 17px; }
.money input { flex-grow: 1; border-bottom: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.choices { display: flex; gap: 14px; }
.choices label {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  border: 1.5px solid rgba(21, 19, 15, 0.4); font-size: 17px; cursor: pointer;
}
.choices input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.or { display: flex; align-items: center; gap: 20px; }
.or span:first-child, .or span:last-child { flex-grow: 1; height: 1px; background: rgba(21, 19, 15, 0.2); }
.or .word { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
button[type="submit"], .btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 14px;
  height: 62px; padding: 0 44px; border: 0; background: var(--accent); color: var(--paper);
  font-family: Archivo, sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
button[type="submit"]:hover, .btn:hover { background: var(--accent-dk); }
button[type="submit"][disabled] { opacity: 0.55; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formerror { margin: 0; font-size: 17px; line-height: 1.5; color: var(--red); }
.after { margin-top: 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
.after .tag { grid-column: span 4; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.after p { grid-column: span 8; margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---------- cross-link + footer ---------- */

.crosswrap { margin-top: auto; padding: 0 var(--gutter); }
.cross {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 34px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink);
}
.cross span { font-family: Newsreader, Georgia, serif; font-size: 32px; letter-spacing: -0.02em; }
.cross svg { flex-shrink: 0; }

footer { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; padding: 40px var(--gutter) 60px; }
footer span { font-size: 15px; color: var(--muted); }
footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.page { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- phone ---------- */

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  .bar { height: 58px; }
  .wordmark { font-size: 13px; letter-spacing: 0.12em; line-height: 1; padding: 15px 0; }
  .nav { gap: 16px; }
  .nav a { font-size: 13px; letter-spacing: 0.1em; line-height: 1; padding: 15px 0; }
  .nav a[aria-current="page"] { padding: 15px 0 13px; }

  .hero { padding-top: 36px; }
  .eyebrow { font-size: 13px; letter-spacing: 0.14em; line-height: 1.5; }
  h1 { margin-top: 14px; line-height: 0.93; }
  h1.inner { line-height: 0.94; }
  .sub { margin-top: 16px; line-height: 1.26; }
  .rule { margin-top: 20px; }

  .cols { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 18px; }
  .lede { font-size: 17px; }
  .record { font-size: 19px; line-height: 1.7; }
  .record .fig { font-size: 28px; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 22px; }
  .block { min-height: 104px; padding: 22px; flex-direction: row; align-items: center; justify-content: space-between; }
  .block .kicker { display: none; }
  .block .line { margin-top: 0; width: 100%; align-items: center; }
  .block .label { font-size: 31px; }

  .photo-band img { height: 280px; }
  .photo-inset { margin-top: 32px; }
  .photo-inset img { width: 100%; }
  figcaption, .caption { font-size: 12px; padding-top: 10px; }

  .qa { padding-top: 34px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0; }
  .row > h2, .row > .rowhead, .row > .body { grid-column: auto; }
  .row h2, .rowhead h2 { font-size: 27px; line-height: 1.14; }
  .row p { font-size: 17px; line-height: 1.6; }
  .steplabel { font-size: 13px; letter-spacing: 0.16em; }
  .voice { font-size: 25px; line-height: 1.3; }
  .plain-lg { font-size: 24px; }
  .callout { font-size: 22px; padding-left: 18px; }

  .formwrap { padding-top: 32px; }
  form.sheet { padding: 28px 22px 32px; gap: 24px; }
  .formhead { flex-direction: column; gap: 8px; }
  .formhead h2 { font-size: 34px; }
  .formhead .note { display: none; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .field > label.tag { font-size: 14px; letter-spacing: 0.14em; }
  .field > label, legend { font-size: 17px; }
  .help { font-size: 14px; }
  input[type="text"], input[type="email"] { height: 46px; font-size: 18px; }
  .money { height: 46px; }
  .money span { font-size: 24px; }
  .money .unit { font-size: 15px; }
  .choices { gap: 12px; }
  .choices label { flex-grow: 1; justify-content: center; height: 48px; padding: 0; font-size: 16px; }
  .or { gap: 16px; }
  .or .word { font-size: 13px; letter-spacing: 0.16em; }
  button[type="submit"], .btn {
    align-self: stretch; justify-content: center; height: 58px; padding: 0 20px;
    font-size: 15px; letter-spacing: 0.12em;
  }
  .after { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
  .after .tag, .after p { grid-column: auto; font-size: 14px; }
  .after .tag { font-size: 13px; letter-spacing: 0.16em; }
  .after p { font-size: 15px; }

  .cross { padding: 24px 0; gap: 16px; min-height: 48px; }
  .cross span { font-size: 25px; line-height: 1.15; }

  footer { flex-direction: column; gap: 10px; padding-bottom: 40px; }
  footer span { font-size: 14px; line-height: 1.5; }
}