/* Ortet
   Tokens match the Figma file "Ortet — Site": the Color and Layout variable
   collections and the text styles (Statement, Body, Body Strong, Nav, Team Name, Team Role). */

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

:root {
  /* Color */
  --black: #000;
  --deep-slate: #1c2536;
  --text: #39434f;
  --muted: #646e79;
  --nav-link: #7c858e;
  --paper: #fafbf8;
  --ortet-teal: #0f9386;
  --teal-600: #0b7a6f;
  --selection-bg: #c6e2dc;

  /* Space */
  --s-6: 6px;
  --s-12: 12px;
  --s-24: 24px;
  --s-36: 36px;
  --s-48: 48px;
  --s-96: 96px;
  --s-120: 120px;
  --s-240: 240px;

  /* Layout — shared */
  --column: 720px;

  /* Layout — stacked (small screens) */
  --logo-width: 76px;
  --margin-x: clamp(24px, 11vw, 48px);
  --page-top: var(--s-48);
  --header-gap: 60px;
  --footer-top: var(--s-96);
  --footer-gap: var(--s-24);

  /* Fade-in: from ortet-teal; opacity first, colour settling after */
  --fade-opacity: 450ms;
  --fade-tint: 900ms;
  --fade-ease: cubic-bezier(.25, .1, .25, 1);
}

/* Layout — desktop, from the width where the nav clears the column */
@media (min-width: 1120px) {
  :root {
    --column: 800px;
    --logo-width: 154px;
    --page-top: 140px;
    --header-gap: var(--s-120);
    --footer-top: 128px;
    --footer-gap: var(--s-48);
  }
}

/* ---------- Base ---------- */

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

body {                                   /* Body */
  background: var(--paper);
  color: var(--text);
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: .0005em;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1120px) {
  body { font-size: 18px; line-height: 30px; }
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ortet-teal); outline-offset: 5px; }
::selection { background: var(--selection-bg); color: var(--deep-slate); }

.statement {                             /* Statement */
  font-size: 23px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -.015em;
}

@media (min-width: 1120px) {
  .statement { font-size: 26px; line-height: 34px; }
}

.site-nav a, .menu-toggle, .menu-pages a, .site-footer {   /* Nav */
  font-size: 13px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .02em;
  color: var(--nav-link);
}
.site-nav a, .menu-toggle, .menu-pages a { font-size: 14px; }

@media (min-width: 1120px) {
  .site-nav a { font-size: 15px; }
}

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

/* ---------- Page ---------- */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--page-top) var(--margin-x) var(--s-48);
}

.site-header, .page > main, .site-footer {
  width: 100%;
  max-width: var(--column);
  margin-inline: auto;
}

.site-header { display: flex; justify-content: space-between; align-items: flex-start; }

.brand { display: flex; align-items: center; height: 34px; color: var(--black); }
.brand svg { display: block; width: var(--logo-width); height: auto; fill: currentColor; }

.page > main { flex: 1 0 auto; padding-top: var(--header-gap); }

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-24);
  margin-top: var(--footer-top);
}
.site-footer div { display: flex; gap: var(--footer-gap); }

.site-nav a, .menu-pages a, .site-footer a {
  display: block;
  padding: var(--s-6) 0;
  text-decoration: none;
  transition: color 120ms ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"],
.menu-toggle:hover, .menu-pages a:hover,
.site-footer a:hover { color: var(--teal-600); }

/* Nav — stacked layout: a dropdown naming the current page */
.site-nav { display: none; }

.menu { display: flex; flex-direction: column; align-items: flex-end; }
.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  /* Shift the label within its existing 34px hit area to meet the wordmark's lower edge. */
  padding: var(--s-12) 0 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color 120ms ease;
}
.menu-toggle svg {
  width: 8px;
  height: 4px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-pages {
  list-style: none;
  text-align: right;
  padding-right: calc(8px + var(--s-12));   /* labels line up with the toggle's label */
}
.menu-pages a { white-space: nowrap; }

/* ---------- Desktop ---------- */

@media (min-width: 1120px) {
  .site-header { justify-content: center; }       /* the logo scrolls with the page, centred over the column */
  .brand { height: auto; }
  .menu { display: none; }

  .site-nav {                                     /* Team and Open Roles hold the top-right corner */
    display: flex;
    gap: var(--s-48);
    position: fixed;
    top: var(--s-36);
    right: 32px;
    z-index: 1;
  }
}

/* ---------- Thesis ---------- */

.thesis > * + * { margin-top: 20px; }
.thesis > .statement:not(:first-child) { margin-top: var(--s-48); }
.thesis > .statement + p { margin-top: var(--s-48); }
.thesis > .principles-intro { margin-top: var(--s-48); }
.thesis strong { font-weight: 400; color: var(--deep-slate); }
.thesis .value + .value { margin-top: var(--s-12); }

/* ---------- Team ---------- */

.members { list-style: none; display: grid; gap: var(--s-36); }

.member {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-24);
  align-items: start;
  line-height: 22px;                              /* Team Name, Team Role */
}
.member h2 { font: inherit; font-weight: 400; color: var(--deep-slate); }
.member p { color: var(--muted); }

.member-links { display: flex; gap: var(--s-12); margin-top: -3px; }   /* 28px icons centred on the 22px name line */
.member-links a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--nav-link);
  transition: color 120ms ease;
}
.member-links a:hover { color: var(--teal-600); }
.member-links svg { width: 18px; height: 18px; }

/* ---------- Privacy ---------- */

.privacy h1 + p { margin-top: var(--s-36); }
.privacy h2 { font: inherit; font-weight: 400; color: var(--deep-slate); margin-top: var(--s-48); }   /* Body Strong */
.privacy h2 + p { margin-top: var(--s-6); }
.privacy p + p { margin-top: var(--s-24); }
.privacy strong { font-weight: 400; }
.privacy a { text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color 120ms ease; }
.privacy a:hover { color: var(--teal-600); }

/* ---------- Reading list ---------- */

.reading-list > h1 { font-size: 23px; font-weight: 400; line-height: 30px; color: var(--deep-slate); margin-bottom: var(--s-48); }
.reading-list section + section { margin-top: 64px; }
.reading-list h2 { font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--deep-slate); margin-bottom: var(--s-24); }
.reading-list ul { display: grid; gap: var(--s-12); list-style: none; }
.reading-list li { line-height: 1.55; }
.reading-list li a { color: var(--deep-slate); font-weight: 400; text-decoration-color: rgba(15, 147, 134, .5); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.reading-list li a:hover { color: var(--teal-600); text-decoration-color: currentColor; }
.reading-list .source { color: var(--muted); font-size: 15px; }

/* ---------- Fade-in ----------
   site.js adds .in (with a --d delay) when an element's turn comes, then .shown once it has settled.
   The tint runs on the element and everything inside it, so each part settles to its own colour.
   html.fx is set only when the reader hasn't asked for reduced motion. */

@keyframes fade-in { from { opacity: 0; } }
@keyframes tint { from { color: var(--ortet-teal); } }

html.fx .fade:not(.in):not(.shown) { opacity: 0; }

.in {
  animation:
    fade-in var(--fade-opacity) ease-out var(--d, 0ms) both,
    tint var(--fade-tint) var(--fade-ease) var(--d, 0ms) both;
}
.in * { animation: tint var(--fade-tint) var(--fade-ease) var(--d, 0ms) both; }

/* Motion study: one quiet reveal for the reading content. */
.quiet { animation: fade-in 380ms ease-out both; }

/* Privacy stays immediately readable and left-aligned at every width. */
.privacy p { text-align: left; }

.menu-pages a[aria-current="page"] { color: var(--teal-600); }