/*
  Global Action — public site.

  Same visual language as the application: register ink, diploma ribbon, seal.
  Serif for the headings (the document's voice), sans for everything else.
  The pigments are the ones the app uses, so the two feel like one organisation.
*/

:root {
  color-scheme: light dark;

  --page: light-dark(#f7f9fb, #131110);
  --paper: light-dark(#ffffff, #1c1917);
  --rule: light-dark(#dde3ea, rgb(240 232 218 / 0.12));
  --rule-strong: light-dark(#16202e, rgb(240 232 218 / 0.38));

  --heading: light-dark(#0d1520, #f6f2ea);
  --text: light-dark(#16202e, #e9e4da);
  --text-2: light-dark(#33445a, #bdb6ab);
  --text-3: light-dark(#5d7086, #9a938a);

  --nav: light-dark(#16202e, #0f0d0c);
  --nav-text: light-dark(#b3c0cd, #9a938a);
  --nav-text-strong: light-dark(#ffffff, #f0ece4);

  --accent: light-dark(#8a2b34, #b8434f);
  --accent-hover: light-dark(#6f2129, #c8525e);
  --accent-soft: light-dark(#f6e8e9, rgb(184 67 79 / 0.18));
  --seal: light-dark(#9a6b1c, #d2a04a);

  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 5px;
  --measure: 66ch;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--heading);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  width: min(100% - 3rem, 68rem);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ header */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 19px;
}

.wordmark img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.wordmark:hover {
  text-decoration: none;
  color: var(--heading);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 14px;
}

/* `:not(.button)` keeps this from outranking `.button-primary`, which is a
   single class and would otherwise lose its white text to `--text-2`. */
.site-nav a:not(.button) {
  color: var(--text-2);
}

/* On a phone the wordmark and the sign-in button are what fit; the secondary
   link is repeated in the hero and the footer anyway. */
@media (max-width: 36rem) {
  .site-nav a:not(.button) {
    display: none;
  }
}

/* ----------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.button:hover {
  text-decoration: none;
}

.button-primary {
  background: var(--accent);
  color: #ffffff;
}

.button-primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.button-quiet {
  color: var(--nav-text-strong);
  border: 1px solid rgb(255 255 255 / 0.28);
}

.button-quiet:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--nav-text-strong);
}

/* -------------------------------------------------------------------- hero */

.hero {
  background: var(--nav);
  color: var(--nav-text);
}

.hero .wrap {
  display: grid;
  gap: 3rem;
  padding-block: 5rem 4.5rem;
}

@media (min-width: 60rem) {
  .hero .wrap {
    grid-template-columns: 1.15fr 1fr;
    align-items: end;
    padding-block: 7rem 6rem;
  }
}

.hero h1 {
  color: var(--nav-text-strong);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1.12;
  max-width: 18ch;
}

.hero .ribbon {
  width: 6rem;
  height: 4px;
  background: var(--accent);
  margin-bottom: 2rem;
}

.hero-aside {
  max-width: 34rem;
}

.hero-aside p {
  font-size: 17px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-note {
  margin-top: 1.25rem;
  font-size: 14px;
  color: var(--nav-text);
}

/* ---------------------------------------------------------------- sections */

.section {
  padding-block: 5rem;
}

.section + .section {
  border-top: 1px solid var(--rule);
}

.section h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.2;
}

.section-lead {
  margin-top: 1rem;
  max-width: var(--measure);
  color: var(--text-2);
  font-size: 17px;
}

/* The register: one ruled row per thing the application keeps. A ledger and
   not a grid of cards, because that is what the application is. */
.register {
  margin: 3rem 0 0;
  border-top: 1px solid var(--rule-strong);
}

.register > div {
  display: grid;
  gap: 0.5rem 3rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .register > div {
    grid-template-columns: 14rem 1fr;
  }
}

.register dt {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--heading);
}

.register dd {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-2);
}

/* Title verification: the one thing the public can do here. */
.verify {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .verify {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.verify-help {
  margin-top: 0.75rem;
  font-size: 14px;
  color: var(--text-3);
}

/* The diploma corner: paper, a gold seal, a code. Decorative, and honest about
   what it depicts — this is what the code on a printed title looks like. */
.diploma {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem;
  font-family: var(--font-display);
  color: var(--text-2);
  position: relative;
}

.diploma::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.diploma .seal {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--seal);
  color: var(--seal);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
}

.diploma .name {
  margin-top: 1.5rem;
  font-size: 24px;
  color: var(--heading);
}

.diploma .meta {
  margin-top: 0.5rem;
  font-size: 15px;
}

.diploma .code {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-block: 2.5rem;
  font-size: 14px;
  color: var(--text-3);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 3rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.site-footer a {
  color: var(--text-2);
}

/* ---------------------------------------------------------------- documents */

.document {
  padding-block: 4rem 6rem;
}

.document .wrap {
  width: min(100% - 3rem, 44rem);
}

.document h1 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  line-height: 1.15;
}

.document-meta {
  margin-top: 1rem;
  color: var(--text-3);
  font-size: 14px;
}

.document h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 3rem;
}

.document h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
}

.document p,
.document li {
  margin-top: 1rem;
  color: var(--text-2);
}

.document li {
  margin-top: 0.5rem;
}

.document ul {
  padding-left: 1.25rem;
  margin: 0;
}

.document .summary {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.document .summary p {
  margin-top: 0;
  color: inherit;
}

.document address {
  font-style: normal;
  margin-top: 1rem;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}