/* Civilization Research Institute homepage CSS. */

/* Designers LOVE dem fonts. */
@font-face {
  font-family: "freight-text-pro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/freight-text-pro-300.woff2") format("woff2");
}
@font-face {
  font-family: "freight-text-pro";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/freight-text-pro-500.woff2") format("woff2");
}
@font-face {
  font-family: "freight-text-pro";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("fonts/freight-text-pro-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "freight-text-pro";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/freight-text-pro-700.woff2") format("woff2");
}
@font-face {
  font-family: "freight-text-pro";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/freight-text-pro-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "freight-sans-pro";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/freight-sans-pro-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/roboto-mono-400.woff2") format("woff2");
}

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

:root {
  --ink: #50534A;
  --black: #000000;
  --muted: #9E978D;      /* original nav gray kept for borders */
  --nav-ink: #767066;    /* darkened from #9E978D to pass WCAG AA (4.9:1) */
  --paper: #ffffff;
  --paper-alt: #f9f7f5;
  --rule: #D6D1C4;
  --accent: #80bc00;
  --serif: "freight-text-pro", serif;
  --sans: "freight-sans-pro", -apple-system, BlinkMacSystemFont, "Roboto",
          "Helvetica", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 21px/1.3 var(--serif);
}

p {
  margin: 0;
  padding: 0 0 1em;
}

strong { font-weight: 700; }

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Accessibility helpers */

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--black);
  font: 400 12px/1.45 var(--mono);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Primary navigation */

header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

header nav {
  max-width: 1180px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header ul {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

header a,
header summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 400 11px/1.45 var(--mono);
  color: var(--nav-ink);
  text-decoration: none;
  cursor: pointer;
}
header a:hover,
header a:focus,
header summary:hover,
header summary:focus {
  color: var(--black);
}

header details { position: relative; }

header summary { list-style: none; }
header summary::-webkit-details-marker { display: none; }
header summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -4px 0 0 10px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
header details[open] summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

.drop-list {
  position: absolute;
  z-index: 10;
  top: 56px;
  right: 0;
  min-width: 240px;
  padding: 8px 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 28px rgba(31, 35, 28, 0.12);
}
.drop-list a {
  min-height: 0;
  padding: 11px 18px;
}
.drop-list a:hover,
.drop-list a:focus {
  background: var(--paper-alt);
}

.contact-button {
  display: inline-block;
  border: 1px solid var(--muted);
  padding: 6px 9px;
  text-align: center;
}
.contact-button:hover,
.contact-button:focus {
  background-color: var(--accent);
  color: var(--black);
}

.contact-footer {
  padding: 0 5vw 54px 28vw;
  background: linear-gradient(90deg, var(--paper) 18vw, var(--paper-alt) 18vw);
}

.contact-rule {
  margin: 0 0 34px;
  border: 0;
  border-top: 1px solid var(--rule);
}

.contact-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.contact-inner a {
  font: 400 11px/1.45 var(--mono);
  color: var(--nav-ink);
  text-decoration: none;
}

.contact-inner a:hover,
.contact-inner a:focus {
  color: var(--black);
}

/* The hero pins to the viewport; the content sheet scrolls up over it
   (sections are position: relative so they paint above). */
.hero {
  position: sticky;
  top: 0;
  height: 70vh;
  max-height: 720px;
  background: url("home-background-1920.jpg") center center / cover no-repeat;
}

.hero h1 { margin: 0; }

.hero img {
  position: absolute;
  top: 5vw;
  right: 5vw;
  width: 44vw;
  max-width: 820px;
  max-height: 560px;
  height: auto;
}

/* Content sections */

.intro, .risk, .questions, .essence {
  position: relative;
  display: flow-root; /* prevents gaps over the hero */
  padding-left: 28vw;
  background: var(--paper);
}

.risk, .essence {
  background: linear-gradient(90deg, var(--paper) 18vw, var(--paper-alt) 18vw);
}

.risk > *, .essence > * {
  width: 70%;
  max-width: 980px;
}

.intro {
  padding-top: 100px;
}

.intro p {
  padding: 0;
  margin-top: 1em;
  width: 63%; /* 70% measure by 90% inner width */
  max-width: 882px;
}

.intro p > span {
  display: block;
  font: 700 44px/1.15 var(--serif);
  color: var(--black);
  margin-bottom: 1.5em;
}
.intro p > span:nth-child(1) { margin-left: -7%; }
.intro p > span:nth-child(2) { padding-left: 3%; }
.intro p > span:nth-child(3) { padding-left: 14%; }

.risk {
  padding-top: 58px;
  padding-bottom: 60px;
}

.risk h2 {
  font: 700 21px/1.3 var(--sans);
  margin: 0 0 1.5em;
  padding-bottom: 12px;
}

.questions {
  padding-top: 58px;
  padding-bottom: 60px;
}

.questions ul {
  list-style: none;
  margin: 1em 0 0;
  padding: 0 9.8% 0 0; /* 14% of the 70% measure */
  max-width: 700px;
}

.questions li {
  position: relative;
  margin-bottom: calc(40px + 0.5em);
  font: 300 30px/1.2 var(--serif);
}

.questions li::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 27px;
  width: 105px;
  border-bottom: 1px solid var(--rule);
}

.essence {
  padding-top: 100px;
  padding-bottom: 60px;
}

.essence-statement {
  font: 500 36px/1.2 var(--serif);
  margin-bottom: 0.5em;
  padding-bottom: 0;
}

.essence p { color: var(--black); }

/* Breakpoints */

@media (min-width: 1920px) {
  .hero img { top: 100px; right: 100px; max-width: 840px; }
}

@media (max-width: 1024px) {
  .hero img { width: 60vw; }
  .intro p > span { font-size: 38px; }
  .intro, .essence { padding-top: 70px; }
  .risk, .questions { padding-top: 45px; padding-bottom: 45px; }
  .essence { padding-bottom: 45px; }
}

@media (max-width: 991px) {
  body {
    padding-left: 0;
    font-size: 18px;
  }

  p { padding-bottom: 15px; }

  header nav {
    padding: 0 24px;
  }
  header ul { gap: 24px; }
  .drop-list { min-width: min(240px, calc(100vw - 48px)); }

  .hero { height: 75vw; min-height: 300px; }
  .hero img { width: 80vw; left: 10vw; right: auto; top: 40px; }

  .intro, .risk, .questions, .essence { padding-left: 40px; }
  .risk, .essence { background: var(--paper-alt); } /* tint spans full width */
  .risk > *, .essence > * { width: calc(100% - 20px); }
  .intro p { width: calc(90% - 18px); } /* (100% − 20px) × 90% */
  .intro p > span:nth-child(1) { margin-left: 0; }
  .questions ul { width: calc(100% - 20px); padding-right: 13.2%; }

  .intro { padding-top: 60px; }
  .risk, .questions { padding-top: 40px; padding-bottom: 40px; }
  .essence { padding-top: 60px; padding-bottom: 40px; }

  .intro p > span { font-size: 29px; }
  .intro p > span:nth-child(2) { padding-left: 10%; }
  .intro p > span:nth-child(3) { padding-left: 20%; }
  .intro p > span:nth-child(4) { padding-left: 5%; }

  .risk h2 { font-size: 18px; }
  .questions li { font-size: 22px; }
  .essence-statement { font-size: 22px; }

  .contact-footer {
    padding: 0 20px 40px 40px;
    background: var(--paper-alt);
  }
  .contact-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .intro p > span { font-size: 25px; }
}

@media (max-width: 679px) {
  .intro { padding-top: 50px; }
  .risk, .questions { padding-top: 30px; padding-bottom: 30px; }
  .essence { padding-top: 50px; padding-bottom: 30px; }
}

/* Scroll entrance animation. The original site loaded JS to do this... but
   never actually wired it up. Womp womp. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Longhands only for Safari reasons. */
    .intro p > span {
      animation-name: fade-up;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 35% cover 55%;
    }

    @keyframes fade-up {
      from { opacity: 0; transform: translateY(200px); }
      to   { opacity: 1; transform: none; }
    }

  }
}