/* ==========================================================================
   Portal — drfigo.com
   The one job is to send the visitor onward in under ten seconds. It carries
   the three surface ratios in sequence rather than a palette of its own.
   ========================================================================== */

body { background: var(--beige); color: var(--black); }

/* --------------------------------------------------------------------------
   Hero — the wordmark at display size, one line beneath it, nothing else.
   No entrance animation on the logo, by instruction and by taste.
   -------------------------------------------------------------------------- */

.portal-hero { padding-block: var(--sp-9) var(--sp-8); }

.portal-hero__mark { margin: 0; }

.portal-hero__svg {
  display: block;
  color: var(--maroon);
  --logo-accent: var(--gold);
}

.portal-hero__svg svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 620px;
  block-size: auto;
}

.portal-hero__line {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
  max-inline-size: 30em;
}

/* --------------------------------------------------------------------------
   Directory — three full-width rows, each one a link.

   Signature moment: a row arrives on a neutral ground and settles into the
   colour ratio of the site it leads to, so scrolling the portal previews the
   three worlds. One 400ms transition per row, then it stays. Colour is the
   only thing that moves; nothing here animates height, filter or shadow.
   -------------------------------------------------------------------------- */

.directory { display: block; }

.row {
  --row-bg: var(--beige-dp);
  --row-ink: var(--black);
  --row-brand: var(--maroon);
  --row-quiet: var(--ink-quiet);

  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr;
  text-decoration: none;
  background: var(--row-bg);
  color: var(--row-ink);
  border-block-start: 1px solid rgba(15, 13, 13, .10);
  transition: background var(--dur-swap) var(--ease-out),
              color var(--dur-swap) var(--ease-out);
}

.row__band {
  background: var(--row-brand);
  transition: background var(--dur-swap) var(--ease-out);
}

.row__body {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--gutter);
}

.row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--row-brand);
  transition: color var(--dur-swap) var(--ease-out);
}

.row__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--row-quiet);
  max-inline-size: 40em;
  transition: color var(--dur-swap) var(--ease-out);
}

.row__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid currentColor;
  /* the hairline should read as a hairline, not as a full-strength rule */
  border-block-start-color: color-mix(in srgb, currentColor 22%, transparent);
}

.row__domain {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--row-quiet);
  transition: color var(--dur-swap) var(--ease-out);
}

.row__go {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--row-brand);
  transition: color var(--dur-swap) var(--ease-out);
}

/* The three worlds. Each is the site's own surface ratio, and each pairing was
   checked: beige on maroon 9.2:1, beige on black 15.8:1, maroon on white
   11.3:1, gold on black 6.2:1. */
.row--lecture.is-settled {
  --row-bg: var(--beige);
  --row-ink: var(--black);
  --row-brand: var(--maroon);
  --row-quiet: #514A46;
}

.row--performance.is-settled {
  --row-bg: var(--black);
  --row-ink: var(--beige);
  --row-brand: var(--beige);
  --row-quiet: #B9AE9E;
}

.row--performance.is-settled .row__band { background: var(--gold); }
.row--performance.is-settled .row__go { color: var(--gold); }

.row--health.is-settled {
  --row-bg: var(--white);
  --row-ink: var(--black);
  --row-brand: var(--maroon);
  --row-quiet: #514A46;
}

/* Health gets the most whitespace of the three, here as on its own site. */
.row--health .row__body { padding-block: var(--sp-8); }

.row:hover .row__go,
.row:focus-visible .row__go { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .row, .row__band, .row__name, .row__desc, .row__domain, .row__go {
    transition: none;
  }
}

@media (min-width: 700px) {
  .portal-hero { padding-block: var(--sp-10) var(--sp-9); }
  .row { grid-template-columns: 6px 1fr; }
  .row__body { padding-block: var(--sp-8); }
  .row--health .row__body { padding-block: var(--sp-9); }
}

.site-footer { border-block-start: 1px solid rgba(15, 13, 13, .12); }