/* Al-Ihsan Trust. Every value below is declared in DESIGN.md at the repo root. */

:root{
  --ink:#111111;
  --grey:#575757;
  --green:#23ab70;
  --green-dark:#006d3e;
  --lime:#8dc73e;
  --stock:#ffffff;
  --rule:#d8d8d8;
  --wash:#f4f7ed;

  --t-xs:0.78rem;
  --t-s:0.9rem;
  --t-m:1rem;
  --t-l:1.25rem;
  --t-xl:1.85rem;
  --t-2xl:clamp(2.4rem,6vw,3.6rem);

  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:Raleway,"Helvetica Neue",Arial,sans-serif;

  --margin:1.5rem;
  --measure:42rem;
  --rail:9rem;
}
@media (min-width:48rem){ :root{ --margin:4rem; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--stock);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-m);
  font-weight:400;
  line-height:1.65;
}

/* ---- head band: full bleed, lifted from the old site's page-header band ---- */

.band{background:var(--lime)}
.band nav{
  max-width:calc(var(--measure) + var(--rail) + 4rem);
  margin:0 auto;
  padding:0.5rem var(--margin);
  display:flex;
  gap:1.5rem;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:0.02em;
}
.band a{color:var(--ink);text-decoration:none;padding:0.25rem 0}
.band a:hover,.band a:focus{text-decoration:underline;text-underline-offset:3px}
.band a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}

/* ---- frame ---- */

.sheet{
  max-width:calc(var(--measure) + var(--rail) + 4rem);
  margin:0 auto;
  padding:0 var(--margin) 4rem;
}

.masthead{padding:2.5rem 0 0}
.masthead img{display:block;width:100%;max-width:26rem;height:auto}
.masthead .reg{
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--grey);
  margin:1rem 0 0;
  letter-spacing:0.02em;
}
.masthead .bar{height:3px;background:var(--green);border:0;margin:1.5rem 0 0}

/* ---- cover plate ---- */

.cover{margin:2.5rem 0 0;max-width:var(--measure)}
.cover h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--t-2xl);
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0;
}
.cover .standing{
  font-family:var(--serif);
  font-size:var(--t-l);
  line-height:1.5;
  margin:1rem 0 0;
  color:var(--grey);
}

/* ---- numbered sections, number and running head in the rail ---- */

.section{
  margin:4rem 0 0;
  padding:2.5rem 0 0;
  border-top:1px solid var(--rule);
}
.section > .rail{margin:0 0 1rem}
.section .num{
  font-family:var(--serif);
  font-size:var(--t-xl);
  font-weight:400;
  line-height:1;
  color:var(--green-dark);
  display:block;
}
.section .run{
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--grey);
  display:block;
  margin:0.5rem 0 0;
}
.section .body{max-width:var(--measure)}
.section h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--t-xl);
  line-height:1.2;
  margin:0 0 1rem;
}
.section h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--t-l);
  line-height:1.3;
  margin:2.5rem 0 0.5rem;
}
.section p{margin:0}
.section p + p{margin:1rem 0 0}
.section .lead{font-family:var(--serif);font-size:var(--t-l);line-height:1.55}

@media (min-width:62rem){
  .section{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:3rem}
  .section > .rail{margin:0;grid-column:1}
  .section .body{grid-column:2}
  .section .num{font-size:var(--t-xl)}
}

/* ---- contents ---- */

.contents{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.contents li{
  display:flex;
  gap:1rem;
  align-items:baseline;
  padding:0.5rem 0;
  border-bottom:1px solid var(--rule);
}
.contents .n{
  font-family:var(--serif);
  color:var(--green-dark);
  font-size:var(--t-s);
  min-width:1.5rem;
}
.contents a{font-weight:600}

/* ---- programme list ---- */

.programmes{list-style:none;margin:1.5rem 0 0;padding:0;max-width:var(--measure)}
.programmes li{
  padding:0.5rem 0;
  border-bottom:1px solid var(--rule);
  font-weight:600;
}
.programmes li:first-child{border-top:1px solid var(--rule)}

/* ---- principles ---- */

.principles{margin:1.5rem 0 0;max-width:var(--measure)}
.principles dt{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--t-l);
  margin:1.5rem 0 0.25rem;
}
.principles dt:first-of-type{margin-top:0}
.principles dd{margin:0}

/* ---- signed letter ---- */

.letter{background:var(--wash);padding:2.5rem;margin:1.5rem 0 0;max-width:var(--measure)}
.letter p{margin:0}
.letter p + p{margin:1rem 0 0}
.letter .salutation{font-family:var(--serif);font-size:var(--t-l)}
.signature{
  margin:2.5rem 0 0;
  padding:1.5rem 0 0;
  border-top:1px solid var(--green-dark);
}
.signature .who{font-family:var(--serif);font-weight:700;font-size:var(--t-l);margin:0}
.signature .what{font-size:var(--t-s);color:var(--grey);margin:0.5rem 0 0}

/* ---- offices ---- */

.offices{margin:1.5rem 0 0;display:grid;gap:2.5rem}
@media (min-width:40rem){
  .offices{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:2.5rem 4rem;
  }
  .office{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0}
  .office address{align-self:start}
}
.office h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--t-l);
  line-height:1.2;
  margin:0 0 1rem;
  padding:0 0 0.5rem;
  border-bottom:1px solid var(--rule);
}
.office address{font-style:normal;margin:0}
.office address p{margin:0}
.office dl{margin:1.5rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:0.5rem 1rem}
.office dt{
  font-size:var(--t-xs);
  font-weight:700;
  color:var(--grey);
  white-space:nowrap;
}
.office dd{margin:0;font-size:var(--t-s)}

/* ---- links ---- */

a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
a:hover,a:focus{color:var(--ink)}
a:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}

/* ---- colophon ---- */

.colophon{
  margin:6rem 0 0;
  padding:1.5rem 0 0;
  border-top:3px solid var(--green);
  font-size:var(--t-xs);
  line-height:1.7;
  color:var(--grey);
  max-width:var(--measure);
}
.colophon p{margin:0}
.colophon p + p{margin:0.5rem 0 0}
.colophon a{color:var(--green-dark)}

.skip{
  position:absolute;
  left:-9999px;
  background:var(--stock);
  color:var(--ink);
  padding:0.5rem 1rem;
}
.skip:focus{left:0;top:0;z-index:2}

.principles dd.pending{color:var(--grey);font-size:var(--t-s)}