/* pamojah.com: one stylesheet for every page (home, help home, categories, articles, legal and
   contact pages, 404). Light theme: white page, navy text, a navy header, dark-teal links.

   Brand: navy #0f3054, teal #3d9970, yellow #ebcb2b, pink #f00b51. Yellow and pink appear only in
   the SVG marks and (yellow) as the focus ring on the navy header. FR blue, the For Real identity
   mark's colour, is reserved for that mark and never appears in this file; the build checks that.

   Type: Bellota (self-hosted, OFL 1.1, Regular only) for headings, the wordmark and navigation.
   Body text is the system stack: Bellota is a display face and long articles on phones must stay
   legible. Body 17 px, line-height 1.55, measure 40 em, 16 px gutters, 44 px tap targets, no
   fixed or sticky-positioned elements, nothing animated. Works at 320 px wide with no horizontal
   scroll. The page is a column at least as tall as the window, so on a short page (Terms, a small
   help category, the 404) the navy footer sits at the bottom of the window instead of halfway up;
   on a long page it simply follows the content.

   Contrast (WCAG 2.1 relative-luminance formula; AA needs 4.5:1 for text, 3:1 for large text
   and UI components). Every pair used on the site:
     #0f3054 navy text   on #ffffff ............ 13.37:1
     #0f3054 navy text   on #f3f6f8 (surface) .. 12.32:1
     #0f3054 navy text   on #e8f3ee (tint) ..... 11.77:1
     #ffffff header text on #0f3054 ............ 13.37:1  also the footer links
     #c5d0db footer text on #0f3054 ............  8.54:1
     #ffffff button text on #0a2440 (hover) .... 15.68:1
     #2b7a58 links       on #ffffff ............  5.21:1
     #2b7a58 links       on #f3f6f8 ............  4.80:1
     #2b7a58 links       on #e8f3ee ............  4.59:1
     #1f5f44 link hover  on #ffffff ............  7.56:1
     #4a5d70 muted text  on #ffffff ............  6.79:1
     #4a5d70 muted text  on #f3f6f8 ............  6.26:1
     #4a5d70 muted text  on #e8f3ee ............  5.98:1
     #3d9970 brand teal  on #ffffff ............  3.51:1  never text: borders and accents only
     #8795a3 field edge  on #ffffff ............  3.06:1  UI component
     #ebcb2b focus ring  on #0f3054 ............  8.34:1
     #ebcb2b yellow      on #ffffff ............  1.60:1  decorative only, never text or a ring on white
*/

@font-face {
  font-family: "Bellota";
  src: url("/_web/fonts/bellota.76f05c89.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Bellota is licensed under the SIL Open Font License 1.1. The licence text is served beside the
   font at /_web/fonts/OFL-Bellota.3ac4ab56.txt */

:root {
  --navy: #0f3054;
  --navy-deep: #0a2440;
  --teal: #3d9970;
  --yellow: #ebcb2b;
  --link: #2b7a58;
  --link-hover: #1f5f44;
  --muted: #4a5d70;
  --on-navy-muted: #c5d0db;
  --rule: #cfd9e2;
  --field: #8795a3;
  --surface: #f3f6f8;
  --tint: #e8f3ee;
  --display: "Bellota", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --measure: 40em;
  --wide: 64rem;
  color-scheme: light;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
}

h1 {
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--tint);
}

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

.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link sits off-screen until it has keyboard focus. */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  border: 2px solid var(--navy);
  border-radius: 8px;
  transform: translateY(-200%);
}

.skip:focus,
.skip:focus-visible {
  transform: none;
  outline-offset: 2px;
}

/* Frames */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Articles and documents read best on a measure of about 40 em of body text. */
.wrap--narrow {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

/* main grows to fill the window, which pushes the footer to the bottom on a short page. */
main {
  display: block;
  flex: 1 0 auto;
  padding-block: 24px 8px;
}

.site-header,
.site-footer {
  flex-shrink: 0;
}

/* Header: the navy bar the origin's post, invite and registry pages also wear. */

.site-header {
  background: var(--navy);
  color: #fff;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 4px;
}

.brand img {
  width: 128px;
  height: 36px;
}

.site-nav,
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  margin-inline: -10px;
}

.site-nav a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  text-decoration: none;
}

.site-nav a {
  font-family: var(--display);
  font-size: 1.0625rem;
  color: #fff;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Footer: the same navy band as the header, so every page has a finished top and bottom. Links on
   one side, the company line on the other; they stack on a phone. */

.site-footer {
  margin-top: 56px;
  background: var(--navy);
  color: var(--on-navy-muted);
  padding-block: 12px 20px;
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
}

.footer-nav a {
  font-family: var(--display);
  color: #fff;
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-footer p {
  margin: 8px 0 0;
}

@media (min-width: 40em) {
  .site-footer p {
    margin-top: 0;
  }
}

/* Page heads, breadcrumbs */

.page-head .lede {
  margin-top: 10px;
  color: var(--muted);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "\203A";
  padding-inline: 0.5em;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.crumbs + h1,
.crumbs + .page-head {
  margin-top: 4px;
}

/* Prose: article and document bodies (fragments carry no classes, so this styles by element). */

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.8em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}

.prose h2 + * {
  margin-top: 0.6em;
}

.prose h3 {
  margin-top: 1.4em;
}

.prose h3 + * {
  margin-top: 0.4em;
}

.prose ol,
.prose ul {
  padding-left: 1.4em;
}

.prose li {
  margin-top: 0.55em;
  padding-left: 0.15em;
}

.prose li > ol,
.prose li > ul {
  margin-top: 0.45em;
}

.prose ol ol {
  list-style: lower-alpha;
}

.prose ol ol ol {
  list-style: lower-roman;
}

.prose li::marker {
  color: var(--muted);
}

/* Article */

.article h1 {
  margin-top: 4px;
}

.short-answer {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--tint);
  font-size: 1.125rem;
  line-height: 1.5;
}

.article-body {
  margin-top: 28px;
}

.article-links {
  margin-top: 40px;
}

.article-links h2 {
  font-size: 1.35rem;
}

.link-list {
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.article-foot {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* Documents: terms, privacy, community guidelines, data deletion, contact. */

.doc-updated {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc-body {
  margin-top: 28px;
}

/* Help home and category pages */

.search {
  margin-top: 24px;
}

.search label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 1.125rem;
}

.search__row {
  display: flex;
  gap: 8px;
}

.search button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--display);
  font-size: 1.0625rem;
  color: #fff;
  background: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  cursor: pointer;
}

.search button:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--field);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search input:focus-visible {
  border-color: var(--navy);
}

.search-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.search-results:empty {
  margin-top: 0;
}

.search-hit {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.search-hit__title {
  font-weight: 600;
}

.search-hit__cat {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--muted);
}

.search-hit__summary {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.search-empty {
  padding: 12px 14px;
  color: var(--muted);
}

.categories {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

@media (min-width: 44em) {
  .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }
}

.category h2 {
  font-size: 1.4rem;
}

.category h2 a {
  color: var(--navy);
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
}

.category h2 a:hover {
  color: var(--link-hover);
}

.category__blurb {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.category__empty {
  margin-top: 12px;
  color: var(--muted);
}

.article-list {
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.article-list li {
  padding-block: 8px;
  border-top: 1px solid var(--rule);
}

.article-list a {
  display: inline-block;
  padding-block: 0.4em;
  font-weight: 600;
}

.article-list p {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.category--page {
  margin-top: 24px;
}

/* Home: typographic, the lockup over a faint band of the current-lines motif. */

.home-hero {
  position: relative;
  isolation: isolate;
  padding-block: 32px 8px;
  text-align: center;
}

.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 60px;
  background: url("/_web/images/current-lines.6265ddf1.svg") 50% 50% / 520px 60px repeat-x;
  opacity: 0.8;
  pointer-events: none;
  /* The currents flow in from both edges and fade out before they reach the wave mark. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

.home-wordmark {
  width: min(100%, 22rem);
  margin-inline: auto;
}

.home-wordmark img {
  width: 100%;
  height: auto;
}

.home-copy {
  max-width: var(--measure);
  margin: 28px auto 0;
  text-align: center;
}

/* The tagline, in the brand face; then the one-liner; then the short description; then the status line. */
.home-copy > p:first-child {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.25;
  text-wrap: balance;
}

.home-copy > p:nth-child(2) {
  margin-top: 14px;
  font-size: 1.25rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.home-copy > p:nth-child(3) {
  margin-top: 14px;
  text-wrap: pretty;
}

.home-copy > p:nth-child(4) {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.home-copy h2 {
  margin-top: 40px;
}

.home-copy ul {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 40em) {
  .home-copy ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-copy li {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: 10px;
}

.home-copy li a {
  font-weight: 600;
}

.home-copy > p:last-child {
  margin-top: 36px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 12px;
}

/* 404 */

.notfound {
  padding-block: 32px;
  text-align: center;
}

.notfound__mark {
  width: min(60%, 16rem);
  margin: 0 auto 24px;
}

.notfound p {
  max-width: var(--measure);
  margin: 12px auto 0;
  color: var(--muted);
}

.notfound .link-list {
  margin-top: 16px;
}

@media print {
  .skip,
  .site-nav,
  .site-footer,
  .search,
  .search-results {
    display: none;
  }

  .site-header {
    background: none;
  }

  body,
  a {
    color: #000;
  }
}