/* =====================================================================
   Inner Planets Terraforming Foundation — website stylesheet
   Implements the IPT Brand Standards (BRAND.md, Vol. I).

   All arbitrary constants are exposed here as named custom properties so
   that no "magic numbers" are buried in the rule bodies below. Adjust a
   value once, here, and it propagates site-wide.
   ===================================================================== */

:root {

  /* ---- Brand color tokens (BRAND.md §2) ------------------------------
     Six tokens only. Two brand (Bone, Navy), two ceremonial (Gold,
     Earth Blue), two utility (Teal, Paper). Earth Blue is RESERVED for
     the Earth dot in the compass mark and appears nowhere else.        */
  --ipt-bone:        #EDE3CE;   /* primary ground                       */
  --ipt-navy:        #0B1628;   /* primary ink                          */
  --ipt-gold:        #C9A24A;   /* ink on navy; ceremonial only         */
  --ipt-earth-blue:  #2E6FA0;   /* compass Earth dot only — do not use  */
  --ipt-teal:        #2E7A6B;   /* signal accent: glyphs, accent rules  */
  --ipt-paper:       #F4EBD6;   /* lighter bone for long-form interiors */
  --ipt-alert:       #9A3B2E;   /* form error text only (added 2026-09-24) */

  /* ---- Typography families (BRAND.md §3) ---------------------------- */
  --ipt-display:     'Poiret One', sans-serif;      /* titles, wordmark  */
  --ipt-editorial:   'Source Serif 4', serif;       /* tagline, quotes   */
  --ipt-body:        'Archivo', sans-serif;         /* body, tables, UI  */
  --ipt-glyphs:      'Noto Sans Symbols', 'Noto Sans Symbols 2', serif;  /* planet glyphs — the astronomical glyphs live in Noto Sans Symbols; Symbols 2 supplements other ranges */

  /* ---- Layout constants (named to avoid magic numbers) -------------- */
  --measure-max:        68rem;   /* maximum content column width         */
  --measure-prose:      44rem;   /* narrower width for long-form reading  */
  --gutter:             2rem;    /* standard horizontal page gutter       */
  --section-gap:        4.5rem;  /* vertical space between major sections  */
  --card-gap:           1.5rem;  /* gap in card grids                     */
  --hairline:           0.0313rem; /* 0.5pt @96dpi ≈ 0.5px hairline rule  */
  --radius:             0.25rem; /* restrained corner radius              */

  /* ---- Type scale --------------------------------------------------- */
  --display-tracking:   0.14em;  /* display letter-spacing (Poiret One)  */
  --body-line-height:   1.65;    /* comfortable reading leading           */
}

/* ---- Reset / base ---------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ipt-bone);
  color: var(--ipt-navy);
  font-family: var(--ipt-body);
  font-weight: 400;
  line-height: var(--body-line-height);
  /* Faint astral-chart texture on the ground, kept very low-contrast so
     that Navy-on-Bone body type stays comfortably legible.             */
  background-image: linear-gradient(rgba(237,227,206,0.92), rgba(237,227,206,0.92));
}

/* Sanctioned pairing: Navy on Bone is the default (BRAND.md §2). */

/* Links use Navy ink (the sanctioned Navy-on-Bone / Navy-on-Paper pairing),
   distinguished from body text by an underline on hover/focus. Teal is held
   back for non-link signal accents (glyphs, quote and notice rules, focus
   rings) rather than being spent on ordinary links. */
a { color: var(--ipt-navy); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

/* Earth is shown as a filled Earth-Blue dot rather than an astronomical
   glyph. Sized in em so it scales with whatever glyph row it sits in, and
   this is the one sanctioned use of Earth Blue (BRAND §2: the Earth dot). */
.earth-dot {
  display: inline-block;
  width: 0.60em;
  height: 0.60em;
  border-radius: 50%;
  background: var(--ipt-earth-blue);
  vertical-align: middle;
}

/* ---- Shared page shell ---------------------------------------------- */
.page {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =====================================================================
   Masthead / site header — Bone-on-Navy inverse field (sanctioned).
   ===================================================================== */
.masthead {
  background: var(--ipt-navy);
  color: var(--ipt-bone);
  border-bottom: 0.1875rem solid var(--ipt-gold); /* ceremonial gold rule */
}
.masthead__inner {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.masthead__mark { width: 5rem; height: 5rem; flex: 0 0 auto; }
/* The masthead uses the simplified small-scale compass variant
   (IPT-Compass-Favicon-on-Navy.svg): arc text removed and Earth hub
   enlarged per BRAND §4, recolored Bone-on-Navy with the Earth dot in
   true Earth Blue — so no CSS color filter is needed. */

.masthead__titles { display: flex; flex-direction: column; line-height: 1.15; }
.masthead__name {
  font-family: var(--ipt-display);
  font-size: 1.35rem;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--ipt-bone);
}
.masthead__tagline {
  font-family: var(--ipt-editorial);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ipt-gold);
  margin-top: 0.15rem;
}

/* ---- Navigation ------------------------------------------------------ */
.nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.nav a { color: var(--ipt-bone); text-transform: uppercase; }
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--ipt-gold);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--ipt-gold);
}

/* =====================================================================
   Hero band
   ===================================================================== */
.hero {
  /* Solid Navy inverse field (sanctioned Bone-on-Navy). The former astral
     wallpaper carried baked-in text and has been removed. */
  background: var(--ipt-navy);
  color: var(--ipt-bone);
  text-align: center;
  padding: 5rem var(--gutter);
}
.hero__kicker {
  font-family: var(--ipt-glyphs);
  font-size: 1.6rem;
  color: var(--ipt-gold);
  letter-spacing: 0.4em;
  margin: 0 0 1rem;
}
.hero__title {
  font-family: var(--ipt-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  margin: 0 auto 1rem;
  max-width: 20ch;
  line-height: 1.25;
}
.hero__lede {
  font-family: var(--ipt-editorial);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  max-width: 40ch;
  margin: 0 auto;
  color: var(--ipt-paper);
}

/* =====================================================================
   Content sections
   ===================================================================== */
section.band { padding: var(--section-gap) 0; }
section.band + section.band { border-top: var(--hairline) solid rgba(11,22,40,0.18); }

.section-title {
  font-family: var(--ipt-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}
.section-rule {
  width: 3.5rem;
  border: none;
  /* Navy rule on the Bone ground (sanctioned). Gold is reserved for Navy
     fields only, per BRAND §2 which forbids the Gold-on-Bone pairing. */
  border-top: 0.125rem solid var(--ipt-navy);
  margin: 0 0 1.75rem;
}
.prose { max-width: var(--measure-prose); }
.prose p { margin: 0 0 1.1rem; }
.lead { font-size: 1.15rem; }

/* Pull quote / tagline block (Source Serif 4 italic, ceremonial copy). */
.pullquote {
  font-family: var(--ipt-editorial);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ipt-navy);
  border-left: 0.1875rem solid var(--ipt-teal);
  padding-left: 1.25rem;
  margin: 2rem 0;
  max-width: var(--measure-prose);
}

/* =====================================================================
   Card grids (directors, research thrusts)
   ===================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--card-gap);
}
.card {
  background: var(--ipt-paper);
  border: var(--hairline) solid rgba(11,22,40,0.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.card__eyebrow {
  font-family: var(--ipt-glyphs);
  font-size: 1.4rem;
  color: var(--ipt-teal);
  margin-bottom: 0.5rem;
}
.card__name {
  font-family: var(--ipt-body);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.15rem;
}
.card__role {
  font-size: 0.9rem;
  color: rgba(11,22,40,0.72);
  margin: 0 0 0.9rem;
  font-weight: 500;
}
.card__blurb { font-size: 0.95rem; margin: 0 0 1.1rem; }
.card__link { margin-top: auto; font-weight: 600; letter-spacing: 0.02em; }
.card__link::after { content: " \2192"; } /* right arrow */

/* Research thrust cards get a slightly larger heading treatment. */
.thrust .card__name { font-family: var(--ipt-display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.05rem; font-weight: 400; }

/* =====================================================================
   Director biography pages
   ===================================================================== */
/* ---------------------------------------------------------------------
   Director portraits.

   Two placements share one circular treatment:
     .card__portrait  - the roster cards on governance.html
     .bio-portrait    - the individual director biography pages

   A director without a photograph on file simply omits the <img> and keeps
   the planetary glyph, so the roster degrades gracefully rather than showing
   a broken image or a hole in the grid.
   ------------------------------------------------------------------- */
:root {
  --portrait-card-size: 5.5rem;   /* circle diameter on the roster cards   */
  --portrait-bio-size:  8rem;     /* circle diameter on the biography page */
}
.card__portrait,
.bio-portrait {
  border-radius: 50%;
  overflow: hidden;
  background: rgba(11,22,40,0.05);
  border: var(--hairline) solid rgba(11,22,40,0.2);
  flex: 0 0 auto;
}
.card__portrait { width: var(--portrait-card-size); height: var(--portrait-card-size); margin-bottom: 0.9rem; }
.bio-portrait   { width: var(--portrait-bio-size);  height: var(--portrait-bio-size);  margin-bottom: 1rem; }
.card__portrait img,
.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the circle without distorting the face */
  display: block;
}

.bio-header {
  border-bottom: var(--hairline) solid rgba(11,22,40,0.25);
  padding: var(--section-gap) 0 2rem;
}
.bio-header .eyebrow {
  font-family: var(--ipt-glyphs);
  color: var(--ipt-teal);
  font-size: 1.4rem;
}
.bio-header h1 {
  font-family: var(--ipt-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  margin: 0.4rem 0 0.4rem;
}
.bio-header .bio-role {
  font-family: var(--ipt-editorial);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(11,22,40,0.8);
}
.bio-body { padding: 2.5rem 0 var(--section-gap); max-width: var(--measure-prose); }
.bio-body h2 {
  font-family: var(--ipt-body);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ipt-navy);
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.3rem;
  /* Navy hairline on the Paper ground — Gold reserved for Navy fields. */
  border-bottom: var(--hairline) solid var(--ipt-navy);
}
.bio-body p { margin: 0 0 1rem; }
.bio-body ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.bio-body li { margin: 0 0 0.55rem; }
.backlink { display: inline-block; margin: 1.5rem 0 0; font-weight: 600; }
.backlink::before { content: "\2190  "; } /* left arrow */

/* =====================================================================
   Footer — Gold-on-Navy is ceremonial; here we use Bone/Paper on Navy.
   ===================================================================== */
.site-footer {
  background: var(--ipt-navy);
  color: var(--ipt-paper);
  border-top: 0.1875rem solid var(--ipt-gold);
  margin-top: var(--section-gap);
  font-size: 0.9rem;
}
.site-footer__inner {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}
.site-footer h3 {
  font-family: var(--ipt-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--ipt-gold);
  margin: 0 0 0.6rem;
}
.site-footer a { color: var(--ipt-paper); }
.site-footer a:hover { color: var(--ipt-gold); }
.site-footer .placeholder { color: rgba(244,235,214,0.6); font-style: italic; }
.site-footer__legal {
  border-top: var(--hairline) solid rgba(201,162,74,0.35);
  padding: 1rem var(--gutter);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(244,235,214,0.7);
}

/* =====================================================================
   Contact page — form and details
   ===================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--section-gap);
  align-items: start;
}

/* A standing notice that the form's submission endpoint is not yet wired.
   Uses Teal (the sanctioned signal accent) rather than a red error color,
   because this is an informational status, not a failure. */
.form-notice {
  background: var(--ipt-paper);
  border-left: 0.1875rem solid var(--ipt-teal);
  border-radius: 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin: 0 0 1.75rem;
}

.contact-form .field { margin: 0 0 1.15rem; display: flex; flex-direction: column; }
.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
}
.contact-form label .req { color: var(--ipt-teal); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family: var(--ipt-body);
  font-size: 1rem;
  color: var(--ipt-navy);
  background: var(--ipt-paper);
  border: var(--hairline) solid rgba(11,22,40,0.35);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--ipt-teal);
  box-shadow: 0 0 0 0.125rem rgba(46,122,107,0.25);
}

/* Honeypot field: removed from view and from the accessibility tree; bots
   that fill every input reveal themselves by filling this one. */
.contact-form .field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile spam-check widget sits between the last field and the button. */
.contact-form .cf-turnstile { margin: 0 0 1.15rem; }

/* Result line under the Send button (filled in by the page script). */
.form-status {
  min-height: 1.5em;
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--ipt-teal);
}
.form-status--error { color: var(--ipt-alert); }

/* Primary action button — Bone-on-Navy (sanctioned inverse pairing). */
.btn {
  display: inline-block;
  font-family: var(--ipt-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--ipt-bone);
  background: var(--ipt-navy);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.5rem;
  cursor: pointer;
}
.btn:hover { background: #16273f; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Contact details column. */
.contact-details h3 {
  font-family: var(--ipt-body);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.3rem;
}
.contact-details p { margin: 0 0 1.2rem; font-size: 0.95rem; }
.contact-details .placeholder { color: rgba(11,22,40,0.6); font-style: italic; }

@media (max-width: 48rem) {
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =====================================================================
   Publications & documents
   ---------------------------------------------------------------------
   .pub-card lists one publication with a date, format badges, and links
   to its files. The badge vocabulary is open-ended by design: future
   releases may carry DATASET, VIDEO, IMAGES, SLIDES, or COMPOSITE badges
   alongside REPORT/PDF/DATA. All file links are RELATIVE paths so the
   whole Website/ folder remains portable to whatever host is chosen.
   .doc-list is the compact governance documents shelf.
   ===================================================================== */
.pub-card {
  background: var(--ipt-paper);
  border: var(--hairline) solid rgba(11,22,40,0.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: var(--card-gap);
  max-width: var(--measure-prose);
}
.pub-card__date {
  font-size: 0.85rem;
  color: rgba(11,22,40,0.65);
  letter-spacing: 0.04em;
}
.pub-card__title {
  font-family: var(--ipt-body);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0.25rem 0 0.5rem;
}
.pub-card__blurb { font-size: 0.95rem; margin: 0 0 0.9rem; }
.pub-card__files { font-size: 0.9rem; }
.pub-card__files a { font-weight: 600; }
/* Badges are ACTIVE LINKS to the artifact they name (site rule: a rounded
   field that looks clickable must be clickable). Hover fills teal. */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ipt-teal);
  border: var(--hairline) solid var(--ipt-teal);
  border-radius: var(--radius);
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
a.badge { color: var(--ipt-teal); }
a.badge:hover, a.badge:focus {
  background: var(--ipt-teal);
  color: var(--ipt-paper);
  text-decoration: none;
}
.doc-list { max-width: var(--measure-prose); padding-left: 0; list-style: none; margin: 0; }
.doc-list li {
  padding: 0.55rem 0;
  border-bottom: var(--hairline) solid rgba(11,22,40,0.18);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.doc-list a { font-weight: 600; }
.doc-list .doc-meta { color: rgba(11,22,40,0.6); font-size: 0.85rem; }

/* ---- Responsive: collapse nav gaps on small screens ------------------ */
@media (max-width: 40rem) {
  .masthead__inner { flex-direction: column; align-items: flex-start; }
  .nav { margin-left: 0; flex-wrap: wrap; gap: 1rem; }
}