/* HumaiPsy website — mockup.
   Visual world: a printed study protocol for a lab instrument. One ink, line
   work only, no fill that is not data, every field a thing a reviewer could
   check. The type stays quiet at the margins; the design figure carries the
   argument in the middle. */

@font-face {
  font-family: "Public Sans";
  src: url("fonts/publicsans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courierprime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courierprime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light;

  --ground: #ffffff;
  --ink: #15191b;
  --ink-2: #4c5559;
  --ink-3: #666f74;
  --rule: #dfe3e4;
  --rule-2: #c2c9cb;
  --accent: #1c4b63;
  --accent-soft: #edf2f4;

  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", ui-monospace, "Cascadia Mono", "SFMono-Regular",
    Consolas, monospace;

  --shell: 1120px;
  --pad: clamp(20px, 4.5vw, 56px);
  --label-w: 188px;
  --gap: clamp(20px, 3.6vw, 52px);
  --field-y: clamp(28px, 3.2vw, 42px);
}

/* One sheet, one light. The page is read on a screen beside a bench, and it is
   printed; a dark twin would be a second impression of a document that only has
   one. A dark theme is a real option later, as an explicit choice, not as an
   inheritance from the operating system. */

/* ------------------------------------------------------------- mechanism -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--rule-2) transparent;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16.5px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}

.mono {
  font-family: var(--mono);
  font-size: 1em;
  letter-spacing: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ground);
  z-index: 10;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* -------------------------------------------------------------- masthead -- */

.masthead {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.masthead__bar {
  padding-block: clamp(20px, 2.6vw, 30px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.wordmark:hover {
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font: 500 14px/1.2 var(--sans);
  color: var(--ink);
  background: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}
.btn:hover {
  text-decoration: none;
  border-color: var(--ink);
}
/* Two classes so this outranks `.foot a`, which is more specific than `.btn`
   alone and would otherwise repaint the label in muted ink. */
.btn.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}
.btn.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
}
.btn:focus-visible {
  outline-offset: 2px;
}

/* ----------------------------------------------------------- title block -- */

.title-block {
  padding-block: clamp(40px, 6vw, 76px) clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--rule-2);
}

.title-block h1 {
  max-width: 24ch;
  font-size: clamp(30px, 1.4rem + 2.8vw, 50px);
  line-height: 1.07;
  letter-spacing: -0.027em;
}

.lede {
  max-width: 56ch;
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.actions .btn {
  padding: 12px 22px;
  font-size: 14.5px;
}

.hosts {
  width: fit-content;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- fields -- */

.field {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  gap: 0 var(--gap);
  padding-block: var(--field-y);
  border-bottom: 1px solid var(--rule);
}

.field__label {
  align-self: start;
  padding-right: 20px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-wrap: balance;
}
.field__body {
  min-width: 0;
}

/* --------------------------------------------------------------- figure -- */

.fig {
  margin: 0;
}

/* Two plates of the same figure. The drawing is one composition, so the only
   honest way to keep its labels legible on a phone is a second layout at a
   tighter aspect, not a 0.45× scale of the wide one. */
.fig__plate {
  width: 100%;
  height: auto;
  overflow: visible;
}
.fig__plate--wide {
  display: block;
  max-width: 780px;
}
.fig__plate--compact {
  display: none;
  max-width: 420px;
}

.fig__rule {
  stroke: var(--rule-2);
  stroke-width: 1;
  fill: none;
}
.fig__axis {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: var(--ink-2);
}
.fig__tick {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--ink-3);
  text-anchor: middle;
}
.fig__mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  fill: var(--accent);
  text-anchor: middle;
}
.fig__box {
  stroke: var(--ink);
  stroke-width: 1;
  transition: stroke 0.15s ease;
}
.fig__box--x {
  fill: var(--ink);
}
.fig__box--y {
  fill: url(#hatch);
}
.fig__box--yc {
  fill: url(#hatch-c);
}

.fig__hatch-line {
  stroke: var(--ink);
  stroke-width: 1;
}

.fig__bracket {
  stroke: var(--accent);
  stroke-width: 1;
  fill: none;
}

/* The one authored moment: pointing at a trial names its agent and condition
   in the annotation line, so the strip is readable cell by cell and not only
   by the caption. Nothing is hidden that the caption does not also say. */
.fig__hint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  fill: var(--accent);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fig__bar:hover .fig__hint {
  opacity: 1;
}
.fig__bar:hover .fig__box {
  stroke: var(--accent);
}

figcaption {
  max-width: 62ch;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
figcaption strong {
  font-weight: 600;
  color: var(--ink);
}
figcaption .fig__no {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  margin-right: 6px;
}

/* ------------------------------------------------------- spec / listings -- */

.spec,
.ledger {
  margin: 0;
}

.spec > div,
.ledger > div {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 6px 24px;
  padding-block: 12px;
  border-top: 1px solid var(--rule);
}
.spec > div:first-child,
.ledger > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.spec dt,
.ledger dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.spec dd,
.ledger dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}

.ledger > div {
  grid-template-columns: 204px minmax(0, 1fr);
}
.ledger dt {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding-top: 1px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- steps -- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 16px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.steps li:first-child {
  border-top: 0;
  padding-top: 0;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-3);
}

.steps h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.steps p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ----------------------------------------------------------- audiences -- */

.audiences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px clamp(24px, 4vw, 52px);
}

.audience h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.006em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
}
.audience p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- footer -- */

.foot {
  padding-block: clamp(28px, 3.4vw, 44px) clamp(40px, 5vw, 64px);
}
.foot__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 40px;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.foot p {
  max-width: 46ch;
}
.foot nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ink-2);
}
.foot a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 760px) {
  .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .fig__plate--wide {
    display: none;
  }
  .fig__plate--compact {
    display: block;
  }
  .field__label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 0;
    border-right: 0;
  }
  .field__label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule);
  }
  .spec > div,
  .ledger > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .lede {
    font-size: 16.5px;
  }
}

/* ----------------------------------------------------------------- print -- */

@media print {
  :root {
    --ground: #fff;
    --ink: #000;
    --ink-2: #222;
    --ink-3: #444;
    --rule: #bbb;
    --rule-2: #888;
    --accent: #000;
    --accent-soft: #eee;
  }
  .skip-link,
  .actions .btn--ghost,
  .fig__hint {
    display: none;
  }
  .field,
  .steps li,
  .spec > div {
    break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}