/* ===========================================================================
   MOIRAI CONSERVATION AND RESEARCH, INC.
   main.css

   No framework, no build step, no external font requests.
   Everything the site needs is in this one file.

   The logo is a DNA helix drawn as a living plant stem: a pale yellow-green
   ribbon darkening to olive, small leaves and buds, one scarlet bloom with a
   golden center, and a single ladybug. It sits on white, and the white is
   part of it. So the site is built on white and near-white, with air around
   everything and colour used sparingly.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */

:root {

  /* Grounds */
  --paper:          #ffffff;
  --surface:        #f6f8f1;  /* the white of the logo, warmed toward leaf   */
  --surface_deep:   #e9eee0;

  /* Greens, sampled from the stem */
  --ink:            #1f2a19;  /* deepest leaf shadow, body text              */
  --stem_deep:      #3f5c2e;  /* darkest stem green, headings and links      */
  --stem:           #6b8f4e;  /* mid leaf green                              */
  --stem_light:     #a8bd7a;
  --stem_pale:      #c3cf9b;  /* the pale ribbon of the helix                */
  --ink_muted:      #5a6a4c;  /* muted olive, secondary text                 */

  /* Accents, used sparingly */
  --pollen:         #d9971f;  /* golden center of the bloom                  */
  --bloom:          #c81c26;  /* the flower and the ladybug                  */

  /* Lines */
  --rule:           rgba(31, 42, 25, 0.12);
  --rule_soft:      rgba(31, 42, 25, 0.07);

  /* Type. Palatino is a humanist face cut after Renaissance letterforms,
     which suits an organization named for the Greek Fates and keeps the
     page off the Georgia default. Data is set in mono because it is data. */
  --face_display: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "Palatino LT STD", Georgia, serif;
  --face_body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face_data:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing. Generous by default: the air is the design. */
  --space_2xs: 0.375rem;
  --space_xs:  0.625rem;
  --space_sm:  1rem;
  --space_md:  1.75rem;
  --space_lg:  3.25rem;
  --space_xl:  6rem;
  --space_2xl: 9rem;

  --measure:   66ch;
  --wrap:      1140px;
  --radius:    3px;
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--face_body);
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--stem_deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--bloom); }

:focus-visible {
  outline: 2px solid var(--stem);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space_md);
}

.skip_link {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--paper);
  color: var(--ink);
  padding: var(--space_sm) var(--space_md);
  z-index: 100;
}

.skip_link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--face_display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--stem_deep);
  margin: 0;
}

h1 { color: var(--ink); }

.eyebrow {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink_muted);
  margin: 0 0 var(--space_sm) 0;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.7;
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--space_sm) 0; }
.prose p:last-child { margin-bottom: 0; }

.quiet { color: var(--ink_muted); }

.data { font-family: var(--face_data); font-variant-numeric: tabular-nums; }

/* Quoted governing language. The vertical gold rule marks text lifted
   verbatim from a legal document rather than written for the web. */
.charter {
  margin: 0;
  padding: var(--space_sm) 0 var(--space_sm) var(--space_md);
  border-left: 2px solid var(--pollen);
  max-width: var(--measure);
}

.charter p {
  font-family: var(--face_display);
  font-size: 1.4375rem;
  line-height: 1.5;
  color: var(--stem_deep);
  margin: 0;
}

.charter footer {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink_muted);
  margin-top: var(--space_sm);
}

/* ---------------------------------------------------------------------------
   4. SECTIONS
   --------------------------------------------------------------------------- */

.band { padding-block: var(--space_xl); }
.band_tight { padding-block: var(--space_lg); }
.band_wash { background-color: var(--surface); }
.band_paper { background-color: var(--paper); }

.section_head { margin-bottom: var(--space_lg); }

.section_head h1,
.section_head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ---------------------------------------------------------------------------
   5. MASTHEAD
   --------------------------------------------------------------------------- */

.masthead {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule_soft);
}

.masthead_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space_md);
  padding-block: var(--space_sm);
  flex-wrap: wrap;
}

.masthead_brand {
  display: flex;
  align-items: center;
  gap: var(--space_xs);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--face_display);
  font-size: 1.0625rem;
  line-height: 1.2;
}

.masthead_brand:hover { color: var(--stem_deep); }

.masthead_mark { width: 34px; height: auto; }

.masthead_nav {
  display: flex;
  gap: var(--space_md);
  font-size: 0.9375rem;
}

.masthead_nav a {
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--space_2xs);
  border-bottom: 1px solid transparent;
}

.masthead_nav a:hover {
  color: var(--stem_deep);
  border-bottom-color: var(--pollen);
}

/* ---------------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------------- */

.hero {
  background-color: var(--paper);
  padding-block: var(--space_xl) var(--space_lg);
}

.hero_top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space_xl);
  align-items: center;
}

.hero_emblem { width: 220px; justify-self: end; }

.hero h1 {
  font-size: clamp(2.125rem, 5.4vw, 3.75rem);
  max-width: 20ch;
  margin-bottom: var(--space_md);
}

.hero_lede {
  color: var(--ink_muted);
  max-width: 56ch;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   7. WORK CARDS
   --------------------------------------------------------------------------- */

.work_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space_md);
}

.work_card {
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--stem);
  border-radius: var(--radius);
  padding: var(--space_md);
  display: flex;
  flex-direction: column;
}

.work_card_affiliated { border-top-color: var(--pollen); }

.work_label {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink_muted);
  margin: 0 0 var(--space_xs) 0;
}

.work_card h3 { font-size: 1.625rem; margin-bottom: var(--space_sm); }

.work_card p { margin: 0 0 var(--space_sm) 0; }

.work_detail { color: var(--ink_muted); font-size: 0.9375rem; }

.work_link {
  margin-top: auto;
  padding-top: var(--space_sm);
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   8. FACT ROW
   --------------------------------------------------------------------------- */

.fact_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space_md);
  margin: 0;
}

.fact_item { margin: 0; }

.fact_item dt {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink_muted);
  margin-bottom: var(--space_2xs);
}

.fact_item dd {
  margin: 0;
  font-family: var(--face_data);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

.status_active { color: var(--stem_deep); }

/* ---------------------------------------------------------------------------
   9. DOCUMENT AND VERIFICATION LISTS
   --------------------------------------------------------------------------- */

.record_list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.record_item {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space_md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space_sm) var(--space_md);
  align-items: start;
}

.record_item h3 { font-size: 1.1875rem; margin-bottom: var(--space_2xs); }

.record_item p { margin: 0; color: var(--ink_muted); max-width: 62ch; }

.record_action {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  align-self: center;
}

/* ---------------------------------------------------------------------------
   10. CALLOUT
   --------------------------------------------------------------------------- */

.callout {
  background-color: var(--surface_deep);
  border-left: 3px solid var(--stem);
  border-radius: var(--radius);
  padding: var(--space_md);
  max-width: var(--measure);
}

.callout h2 { font-size: 1.375rem; margin-bottom: var(--space_xs); }
.callout p { margin: 0; }

/* ---------------------------------------------------------------------------
   11. ERROR PAGE
   The organization is named for the three who spin the thread of life,
   measure it, and cut it. A page that is not there gets a thread that
   stops, and a faint dashed trail where the rest of it would have been.
   --------------------------------------------------------------------------- */

/* Gradient stops for the thread on the error page. */
.thread_stop_near { stop-color: var(--stem_light); }
.thread_stop_far  { stop-color: var(--stem_deep); }

.missing_headline {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  max-width: 18ch;
}

.missing_figure {
  margin: var(--space_lg) 0 var(--space_lg) 0;
  max-width: 600px;
}

.missing_svg { width: 100%; height: auto; display: block; overflow: visible; }

.missing_thread {
  fill: none;
  stroke: url(#missing_gradient);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.missing_node { fill: var(--bloom); }

.missing_trail {
  fill: none;
  stroke: var(--stem_pale);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
  opacity: 0.7;
}

.missing_prose { margin-bottom: var(--space_lg); }

.missing_routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space_md);
  padding-top: var(--space_md);
  border-top: 1px solid var(--rule);
  max-width: 780px;
}

.missing_route_group { margin: 0; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------------- */

.site_footer {
  background-color: var(--surface);
  border-top: 1px solid var(--rule_soft);
  color: var(--ink_muted);
  padding-block: var(--space_lg);
  font-size: 0.9375rem;
}

.footer_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space_md);
}

.footer_mark { width: 46px; margin-bottom: var(--space_sm); }

.footer_legal_name {
  font-family: var(--face_display);
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 var(--space_xs) 0;
}

.footer_note { margin: 0 0 var(--space_xs) 0; max-width: 44ch; font-size: 0.875rem; }

.footer_heading {
  font-family: var(--face_data);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stem_deep);
  margin: 0 0 var(--space_xs) 0;
}

.footer_list { list-style: none; margin: 0; padding: 0; }
.footer_list li { margin-bottom: var(--space_2xs); }
.footer_list a { color: var(--ink); text-decoration: none; }
.footer_list a:hover { color: var(--stem_deep); text-decoration: underline; }

.footer_data { font-family: var(--face_data); font-size: 0.875rem; }

.footer_copyright {
  margin: var(--space_lg) 0 0 0;
  padding-top: var(--space_sm);
  border-top: 1px solid var(--rule_soft);
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   13. MOTION
   Nothing on the site animates. Smooth scrolling is the only motion, and it
   is turned off for anyone who asks for reduced motion.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .hero_emblem { width: 160px; }
  .hero_top { gap: var(--space_lg); }
}

@media (max-width: 860px) {
  .footer_grid { grid-template-columns: 1fr 1fr; }
  .hero_top { grid-template-columns: 1fr; justify-items: start; }
  .hero_emblem { width: 130px; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --space_xl: 4rem; }

  .record_item { grid-template-columns: 1fr; }
  .record_action { align-self: start; }

  .masthead_inner { justify-content: center; }
  .masthead_nav { gap: var(--space_sm); flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .footer_grid { grid-template-columns: 1fr; }
  .charter p { font-size: 1.1875rem; }
}