/* ---------------------------------------------------------------
   rtpsciences.com

   Two palettes, alternating band by band. The dark half is carried
   verbatim from the LinkedIn banner set (jobs-2026:
   assets/linkedin-banners.html) so the site and the banners read as
   one brand. It was validated there for contrast and for
   colour-vision deficiency: dE 25.1 protan and 26.6 tritan between
   --noise and --signal, both above 3:1 on the ground. Meaning rides
   on lightness, position and labels, never on hue alone.

   Every band sets four local tokens and everything inside it reads
   those, so one class flips a whole section between dark and cream:

     --l-ink     primary text
     --l-ink-2   secondary text
     --l-accent  the amber that is legible on THIS ground
     --l-rule    hairlines

   --signal (bright amber) carries text on the dark ground only.
   --signal-ink is the cream-safe amber. They are never swapped.
   --------------------------------------------------------------- */
:root{
  /* dark ground */
  --ground:#0f1620;
  --ink:#f4f6f8;
  --ink-2:#aebac6;
  --noise:#6b7d8f;
  --signal:#f2b134;

  /* cream ground */
  --cream:#f4efe4;
  --cream-ink:#1a1c1f;
  --cream-ink-2:#4a5159;
  --signal-ink:#8a5c05;
  --cream-rule:#ddd5c4;
  --card:#fffdf8;

  --measure:34rem;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --mono:ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* the two themes */
.t-dark{
  background:var(--ground); color:var(--ink);
  --l-ink:var(--ink); --l-ink-2:var(--ink-2);
  --l-accent:var(--signal); --l-rule:rgba(174,186,198,.22);
}
.t-cream{
  background:var(--cream); color:var(--cream-ink);
  --l-ink:var(--cream-ink); --l-ink-2:var(--cream-ink-2);
  --l-accent:var(--signal-ink); --l-rule:var(--cream-rule);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ground)}
body{
  margin:0;
  background:var(--cream);
  color:var(--cream-ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  width:100%; max-width:68rem; margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--l-accent); outline-offset:3px; border-radius:2px}

/* ---------------- nav ---------------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.25rem;
  border-bottom:1px solid var(--l-rule);
}
.wordmark{
  display:flex; align-items:center; gap:.7rem; margin:0;
  font-size:.8125rem; font-weight:700; line-height:1.2;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
}
.wordmark::before{
  content:""; width:.6875rem; height:.6875rem;
  background:var(--l-accent); flex:none;
}
.nav-links{display:flex; gap:1.5rem; margin:0; padding:0; list-style:none}
.nav-links a{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--l-ink-2); text-decoration:none;
}
.nav-links a:hover{color:var(--l-ink)}

/* ---------------- the hero ---------------- */
/* The gap under the nav rule is deliberately tight. The headline is
   full-width so it stays on one line; it wraps only on phones. */
.hero-body{padding-top:clamp(1.5rem, 3.5vw, 2.5rem); padding-bottom:clamp(2.5rem, 5vw, 3.5rem)}

.eyebrow{
  margin:0 0 1rem;
  font-size:.75rem; font-weight:700; line-height:1.3;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--l-accent);
}

.headline{
  margin:0 0 1.5rem;
  font-size:clamp(1.75rem, 5.2vw, 3.875rem);
  font-weight:800; line-height:1.04; letter-spacing:-.03em;
}
.headline em{font-style:normal; color:var(--l-accent)}

.positioning{
  margin:0; max-width:36em;
  font-size:clamp(1.125rem, 1.8vw, 1.375rem); line-height:1.5;
  color:var(--l-ink-2);
}
.positioning strong{color:var(--l-ink); font-weight:600}

.hero-links{margin:1.5rem 0 0; font-size:.9375rem}
.hero-links a{
  color:var(--l-ink); text-decoration:none; font-weight:600;
  border-bottom:2px solid var(--l-accent); padding-bottom:1px;
}
.hero-links a:hover{background:rgba(242,177,52,.18)}

/* The unit field: 91 cells, 90 false alarms and 1 real hit. Same
   device as banner B1. Decorative markup; the arithmetic it shows is
   stated in words in .key and .caption, so the grid is aria-hidden. */
.ratio{
  display:grid; grid-template-columns:1fr; gap:clamp(1.25rem, 3vw, 3rem);
  align-items:end;
  margin-top:clamp(2rem, 4.5vw, 3.25rem);
  padding-top:clamp(1.25rem, 3vw, 1.75rem);
  border-top:1px solid var(--l-rule);
}
@media (min-width:48rem){
  .ratio{grid-template-columns:minmax(0, 27rem) minmax(0, 1fr)}
}
.dots{display:grid; grid-template-columns:repeat(13, 1fr); gap:clamp(.25rem, .9vw, .4375rem)}
.dot{display:block; aspect-ratio:1; border-radius:50%; background:var(--noise)}
.dot.hit{background:var(--signal)}
.key{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin:0; font-size:.9375rem; color:var(--l-ink-2);
}
.key span{display:flex; align-items:center; gap:.5rem}
.key i{width:.75rem; height:.75rem; border-radius:50%; flex:none}
.key i.noise{background:var(--noise)}
.key i.signal{background:var(--signal)}
.key b{color:var(--l-ink); font-size:1.25rem}
.caption{margin:.75rem 0 0; font-size:.8125rem; line-height:1.55; color:var(--l-ink-2); max-width:30em}

/* the compact header used on inner pages */
.page-head{padding-top:clamp(1.5rem, 3.5vw, 2.5rem); padding-bottom:clamp(2rem, 4vw, 3rem)}
.page-title{
  margin:0 0 .35rem;
  font-size:clamp(2rem, 5vw, 3.25rem);
  font-weight:800; line-height:1.05; letter-spacing:-.028em;
}
.page-sub{margin:0; font-size:1.0625rem; color:var(--l-ink-2)}

/* ---------------- bands ---------------- */
.band{padding-block:clamp(2.75rem, 6vw, 4.25rem)}
.section-title{
  margin:0 0 1rem; max-width:24em;
  font-size:clamp(1.5rem, 3vw, 2.125rem);
  font-weight:800; line-height:1.15; letter-spacing:-.02em;
  text-wrap:balance;
}
.section-intro{
  margin:0 0 clamp(1.75rem, 3.5vw, 2.5rem); max-width:var(--measure);
  font-size:clamp(1.0625rem, 1.5vw, 1.1875rem); color:var(--l-ink-2);
}
.section-close{
  margin:clamp(1.75rem, 3.5vw, 2.5rem) 0 0; max-width:44em;
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem); font-weight:600;
}
.section-close a{text-decoration:none; border-bottom:2px solid var(--l-accent); padding-bottom:1px}
.section-close a:hover{background:rgba(242,177,52,.2)}

/* three-up cards */
.cards{display:grid; gap:1.25rem; grid-template-columns:1fr; margin:0; padding:0; list-style:none}
@media (min-width:48rem){.cards{grid-template-columns:repeat(3, minmax(0,1fr))}}
.card{
  background:var(--card); border:1px solid var(--cream-rule); border-radius:6px;
  padding:1.5rem 1.5rem 1.625rem;
}
.card.live{border-top:3px solid var(--signal-ink)}
.card h3{margin:0 0 .6rem; font-size:1.0625rem; font-weight:700; letter-spacing:-.005em}
.card h3.mono{font-family:var(--mono); letter-spacing:0}
.card p{margin:0; font-size:.9875rem; line-height:1.6; color:var(--cream-ink-2)}
.card p + p{margin-top:.75rem}
.tag{
  display:inline-block; margin:0 0 .9rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:3px;
}
.tag.is-live{background:var(--signal); color:var(--ground)}
.tag.is-pipeline{background:var(--cream); color:var(--cream-ink-2); border:1px solid var(--cream-rule)}

/* the three disciplines */
.pillars{display:grid; gap:2rem 2.5rem; grid-template-columns:1fr; margin:0; padding:0; list-style:none}
@media (min-width:48rem){.pillars{grid-template-columns:repeat(3, minmax(0,1fr))}}
.pillar .num{
  display:block; margin:0 0 .75rem;
  font-family:var(--mono); font-size:.8125rem; font-weight:700;
  letter-spacing:.1em; color:var(--l-accent);
}
.pillar h3{margin:0 0 .6rem; font-size:1.125rem; font-weight:700; letter-spacing:-.01em}
.pillar p{margin:0; font-size:.9875rem; line-height:1.62; color:var(--l-ink-2)}

/* the principles, two columns of numbered rows */
.principles{
  display:grid; grid-template-columns:1fr; gap:1.75rem 3rem;
  margin:0; padding:0; list-style:none;
}
@media (min-width:52rem){.principles{grid-template-columns:repeat(2, minmax(0,1fr))}}
.principles li{
  display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:0 1rem;
  padding-top:1.125rem; border-top:1px solid var(--l-rule);
}
.principles .n{
  font-family:var(--mono); font-size:.8125rem; font-weight:700;
  letter-spacing:.06em; color:var(--l-accent); padding-top:.28rem;
}
.principles .t{grid-column:2}
.principles strong{display:block; margin-bottom:.35rem; font-weight:700}
.principles p{margin:0; font-size:.9875rem; line-height:1.6; color:var(--l-ink-2)}

/* contact, which opens the footer rather than sitting in its own band */
.contact-line{margin:0; max-width:none}
/* Sized deliberately below .section-title (max 2.125rem). At 2.25rem it
   outweighed the page's own headings, which is what made it feel loud. */
.contact-line a{
  color:var(--l-ink); text-decoration:none; font-weight:700;
  font-size:clamp(1.1875rem, 2.2vw, 1.75rem); letter-spacing:-.015em;
  border-bottom:2px solid var(--l-accent); padding-bottom:2px;
}
.contact-line a:hover{background:rgba(242,177,52,.2)}
.contact-note{margin:.9rem 0 0; color:var(--l-ink-2)}

/* long-form prose */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.15em; font-size:clamp(1.0625rem, 1.5vw, 1.1875rem); color:var(--l-ink-2)}
.prose p:first-child{
  font-size:clamp(1.25rem, 2.4vw, 1.625rem); line-height:1.36;
  letter-spacing:-.015em; color:var(--l-ink); font-weight:600;
}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--l-ink); text-decoration:none; border-bottom:2px solid var(--l-accent)}
.prose em{font-style:italic}

/* ---------------- footer ---------------- */
/* The closing region. Contact is the first thing in it, not a band of
   its own: three short lines could not fill a band, so between two dark
   sections it read as a stripe rather than a room, and the address
   appeared twice within 250px. One region, one address. */
.site-footer{padding-bottom:2.25rem; font-size:.9375rem}
.footer-contact{
  padding-block:clamp(1.75rem, 4vw, 2.5rem);
  border-top:1px solid var(--l-rule);
}
.footer-grid{
  display:grid; gap:2rem; grid-template-columns:1fr;
  padding-top:clamp(1.75rem, 4vw, 2.5rem);
  border-top:1px solid var(--l-rule);
}
@media (min-width:48rem){.footer-grid{grid-template-columns:2fr 1fr}}
.site-footer .wordmark{margin-bottom:.9rem}
.footer-grid p{margin:0; max-width:26em; color:var(--l-ink-2)}
.site-footer h4{
  margin:0 0 .75rem; font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--l-accent);
}
.site-footer ul{margin:0; padding:0; list-style:none}
.site-footer li{margin:0 0 .45rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{border-bottom:1px solid var(--l-accent)}
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  margin-top:clamp(1.75rem, 4vw, 2.5rem); padding-top:1.125rem;
  border-top:1px solid var(--l-rule);
  font-size:.8125rem; color:var(--noise);
}