/* ==========================================================================
   OPERATOR REQUIRED — PUBLIC PAGE
   The stylesheet for /operator-required/ only.

   Deliberately not the Freeplay Cabinet and not Analog Reliquary. This one
   is paper and ink: hard corners, no radii, no glows, no shadows, no
   gradients, and one amber signal per composition. Amber is a signal colour
   and never sets body text on paper.

   Values below are the canonical Operator Required Identity System V2:
     INK #1B1B18 · PAPER #F2EFE6 · AMBER #E0701C
     RULE GREY #8A8A82 · UTILITY GREY #696963
   Display type is Archivo (condensed, 800, uppercase); utility type is
   JetBrains Mono, uppercase and tracked.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --or-ink: #1b1b18;
  --or-paper: #f2efe6;
  --or-amber: #e0701c;
  --or-rule-grey: #8a8a82;
  --or-utility-grey: #696963;
  --or-signal-white: #ffffff;

  --or-display: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --or-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --or-utility: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --or-1: 6px;
  --or-2: 12px;
  --or-3: 20px;
  --or-4: 32px;
  --or-5: 52px;
  --or-6: 84px;

  --or-w: 980px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { overflow-x: clip; }

body.or {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--or-paper);
  color: var(--or-ink);
  font-family: var(--or-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.or img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scoped to the content blocks on purpose: a bare `.or p` rule outranks the
   single-class rules below it (.or-lockup__proposition, .or-foot__legal) and
   silently eats their spacing. */
.or-block p { margin: 0 0 var(--or-3); }
.or-block p:last-child { margin-bottom: 0; }

.or a { color: var(--or-ink); }

.or :focus-visible {
  outline: 2px solid var(--or-amber);
  outline-offset: 3px;
}

.or-wrap {
  width: 100%;
  max-width: var(--or-w);
  margin: 0 auto;
  padding: 0 var(--or-3);
}

.or-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: var(--or-2) var(--or-3);
  background: var(--or-ink);
  color: var(--or-paper);
  font-family: var(--or-utility);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.or-skip:focus { left: var(--or-3); top: var(--or-3); }

/* --------------------------------------------------------------------------
   3. STATUS LINE
   Three uppercase KEY: VALUE fields, amber pipe separators, and one
   bordered surface chip last and flush right.
   -------------------------------------------------------------------------- */
.or-status {
  border-bottom: 3px solid var(--or-ink);
  background: var(--or-signal-white);
}

.or-status__inner {
  max-width: var(--or-w);
  margin: 0 auto;
  padding: var(--or-2) var(--or-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-2) var(--or-3);
}

.or-status p { margin: 0; }

.or-status__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--or-utility);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-utility-grey);
}

.or-status__fields i {
  font-style: normal;
  color: var(--or-amber);
}

.or-status__chip {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--or-ink);
  font-family: var(--or-utility);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. THE LOCKUP
   -------------------------------------------------------------------------- */
.or-lockup {
  padding: var(--or-6) 0 var(--or-5);
}

.or-lockup__word {
  margin: 0;
  font-family: var(--or-display);
  font-size: clamp(3rem, 13vw, 7rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--or-ink);
}

/* The gate always sits below the wordmark. It is never dropped. */
.or-lockup__gate {
  width: min(430px, 84%);
  margin: var(--or-4) 0 0;
}

.or-lockup__proposition {
  margin: var(--or-5) 0 0;
  max-width: 24ch;
  font-family: var(--or-display);
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--or-ink);
}

/* --------------------------------------------------------------------------
   5. BLOCKS
   -------------------------------------------------------------------------- */
.or-block {
  padding: var(--or-5) 0;
}

.or-block--rule {
  border-top: 1px solid var(--or-rule-grey);
  border-bottom: 1px solid var(--or-rule-grey);
}

.or-h2 {
  margin: 0 0 var(--or-3);
  padding-left: 14px;
  border-left: 9px solid var(--or-amber);
  font-family: var(--or-display);
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--or-ink);
}

.or-block p,
.or-questions {
  max-width: 62ch;
}

.or-lede {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.4;
}

.or-note {
  font-family: var(--or-utility);
  font-size: 13px;
  line-height: 1.8;
  color: var(--or-utility-grey);
}

/* --------------------------------------------------------------------------
   6. THE SIX QUESTIONS
   Numbered like test cases, not styled like marketing bullets.
   -------------------------------------------------------------------------- */
.or-questions {
  list-style: none;
  margin: 0 0 var(--or-3);
  padding: 0;
  counter-reset: or-q;
}

.or-questions li {
  counter-increment: or-q;
  display: flex;
  gap: var(--or-3);
  padding: var(--or-2) 0;
  border-top: 1px solid var(--or-rule-grey);
}

.or-questions li:last-child {
  border-bottom: 1px solid var(--or-rule-grey);
}

.or-questions li::before {
  content: counter(or-q, decimal-leading-zero);
  flex: none;
  width: 2.5em;
  font-family: var(--or-utility);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--or-utility-grey);
  padding-top: 0.28em;
}

/* --------------------------------------------------------------------------
   7. THE CHECKPOINT
   -------------------------------------------------------------------------- */
.or-gate-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--or-4);
}

.or-gate-note__mark {
  flex: none;
  width: min(150px, 40%);
}

.or-gate-note__text {
  flex: 1 1 320px;
  max-width: 58ch;
}

.or-gate-note__text b {
  font-family: var(--or-utility);
  font-size: 0.88em;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   8. REGISTER
   -------------------------------------------------------------------------- */
.or-register {
  margin: 0 0 var(--or-3);
  border-top: 3px solid var(--or-ink);
}

.or-register__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-1) var(--or-3);
  padding: var(--or-2) 0;
  border-bottom: 1px solid var(--or-rule-grey);
}

.or-register dt,
.or-register dd {
  margin: 0;
  font-family: var(--or-utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.or-register dt {
  flex: none;
  min-width: 15em;
  color: var(--or-utility-grey);
}

.or-register dd {
  color: var(--or-ink);
}

/* --------------------------------------------------------------------------
   9. CONTACT
   -------------------------------------------------------------------------- */
.or-mail {
  font-family: var(--or-utility);
  font-size: 14px;
  letter-spacing: 0.06em;
  word-break: break-word;
}

.or-mail a {
  color: var(--or-ink);
  text-decoration: none;
  border-bottom: 3px solid var(--or-amber);
  padding-bottom: 2px;
}

.or-mail a:hover,
.or-mail a:focus-visible {
  background: var(--or-signal-white);
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.or-foot {
  border-top: 3px solid var(--or-ink);
  padding: var(--or-4) 0 var(--or-5);
  background: var(--or-signal-white);
}

.or-foot__nav,
.or-foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-2) var(--or-4);
  align-items: center;
}

.or-foot__nav {
  padding-bottom: var(--or-3);
  border-bottom: 1px solid var(--or-rule-grey);
}

.or-foot__social {
  padding: var(--or-3) 0;
}

.or-foot__nav a,
.or-foot__social a {
  /* min-width so a one-glyph link (X) is still a tappable target */
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding-top: 6px;
  font-family: var(--or-utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--or-ink);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.or-foot__nav a:hover,
.or-foot__nav a:focus-visible,
.or-foot__social a:hover,
.or-foot__social a:focus-visible {
  border-bottom-color: var(--or-amber);
}

.or-foot__attribution {
  margin: 0 0 var(--or-2);
  font-family: var(--or-utility);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-utility-grey);
}

.or-foot__legal {
  margin: 0;
  max-width: 72ch;
  font-family: var(--or-utility);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--or-utility-grey);
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  body.or { font-size: 16px; }

  .or-lockup { padding: var(--or-5) 0 var(--or-4); }
  .or-lockup__gate { width: 100%; }

  .or-status__chip { margin-left: 0; }

  .or-register dt { min-width: 100%; }

  .or-gate-note { gap: var(--or-3); }
  .or-gate-note__mark { width: min(120px, 38%); }
}

/* --------------------------------------------------------------------------
   12. DOCUMENT PAGES
   /operator-required/privacy/ and /operator-required/terms/.

   These are reference documents, so readability outranks theatre: no lockup
   headline, the gate alone as compact branding (its approved role), display
   type only for the document title and section heads, and one amber signal
   grammar carried over from the index — the rule on a section head.
   -------------------------------------------------------------------------- */
.or-doc {
  padding: var(--or-5) 0 var(--or-4);
  border-bottom: 1px solid var(--or-rule-grey);
}

.or-doc__mark {
  width: 108px;
  margin: 0 0 var(--or-3);
}

.or-doc__title {
  margin: 0;
  font-family: var(--or-display);
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--or-ink);
}

.or-doc__sub {
  margin: var(--or-3) 0 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.5;
}

.or-doc__updated {
  margin: var(--or-3) 0 0;
  font-family: var(--or-utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-utility-grey);
}

/* Cross-links between the two documents and back to the project. */
.or-docnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-2) var(--or-4);
  align-items: center;
  margin: var(--or-4) 0 0;
  padding-top: var(--or-3);
  border-top: 1px solid var(--or-rule-grey);
}

.or-docnav a,
.or-docnav span {
  display: inline-block;
  padding-bottom: 3px;
  font-family: var(--or-utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--or-ink);
  border-bottom: 2px solid transparent;
}

.or-docnav a:hover,
.or-docnav a:focus-visible { border-bottom-color: var(--or-amber); }

/* The page you are already on is named, not linked. */
.or-docnav span {
  color: var(--or-utility-grey);
  border-bottom-color: var(--or-rule-grey);
}

/* Prose links stay ink and are underlined; amber is a signal, never text.
   Scoped to running copy on purpose: the contact line (.or-mail) carries its
   own amber underscore, and the contents strip below is navigation. */
.or-block p:not(.or-mail) a,
.or-block .or-list a {
  color: var(--or-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.or-block p:not(.or-mail) a:hover,
.or-block p:not(.or-mail) a:focus-visible,
.or-block .or-list a:hover,
.or-block .or-list a:focus-visible { background: var(--or-signal-white); }

.or-h3 {
  margin: var(--or-4) 0 var(--or-2);
  font-family: var(--or-utility);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--or-ink);
}

.or-h3:first-child { margin-top: 0; }

.or-list {
  margin: 0 0 var(--or-3);
  padding: 0 0 0 1.15em;
  max-width: 62ch;
}

.or-list li { margin: 0 0 var(--or-1); }
.or-list li:last-child { margin-bottom: 0; }

.or-list--plain {
  list-style: none;
  padding-left: 0;
}

.or-list--plain li {
  padding: var(--or-2) 0;
  border-top: 1px solid var(--or-rule-grey);
}

.or-list--plain li:last-child { border-bottom: 1px solid var(--or-rule-grey); }

/* Inline machine words: scope names, permissions, addresses. */
.or-block code {
  font-family: var(--or-utility);
  font-size: 0.86em;
  letter-spacing: 0.02em;
  word-break: break-word;
  color: var(--or-ink);
}

/* Contents strip: a long document should be navigable without scrolling blind. */
.or-contents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-1) var(--or-3);
}

.or-contents a {
  font-family: var(--or-utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--or-utility-grey);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.or-contents a:hover,
.or-contents a:focus-visible {
  color: var(--or-ink);
  border-bottom-color: var(--or-amber);
}

@media (max-width: 620px) {
  .or-doc { padding: var(--or-4) 0 var(--or-3); }
  .or-doc__mark { width: 84px; }
}