/* ==========================================================================
   Contact, Privacy Policy and Page not found — the functional surfaces
   (.ut-* shared and Contact, .pv-* Privacy, .nf-* Page not found).
   Loaded after style.css (chrome, tokens, fonts, signing field, close,
   footer) and editorial.css (grid, annotation margin, type scale, running
   head, print), neither of which is edited for these pages. Every selector
   here is scoped to the .ut-page body or to these prefixes, so nothing
   reaches a locked page.

   Functional and ledger mode (CURRENT_AUTHORITY §3.4): exact, calm,
   inspectable. No imagery beyond the shared close, no motion.
   ========================================================================== */

.ut-page {
  /* The site's amber is its "not settled" colour (record issue B's
     withheld family); here it marks an open Contact entry. It never
     carries the state alone: a sentence and aria-invalid go with it. */
  --ut-open: #e5ad49;
  --ut-open-ink: #f0bd63;
  --ut-field: rgba(255, 255, 255, 0.035);
  --ut-field-focus: rgba(255, 255, 255, 0.06);
  --ut-line: rgba(246, 245, 242, 0.42);
}

/* Links in the document read as underlined text, as on the editorial pages. */
.ut-page main a:not(.signing-field) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  transition: text-decoration-color var(--transition-fast);
}

.ut-page main a:not(.signing-field):hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   CONTACT — "a controlled request sheet"
   One clause: label in the margin; title, introduction and recipient; the
   sheet as a ruled document with its entries on lines; the outcome; the
   standing note and the direct channels on their own rules. No close.
   ========================================================================== */
/* The request sheet stands on the warm mineral ground the Services page and
   Governed Bit Intervention sections A, C and F are set on, so it reads as a
   document rather than as a dark form. Only the ground, the ink, the rules,
   the field material and the open-entry amber are re-set here: the ledger
   structure, the entry layout, the open-entry behaviour and the submit
   control are unchanged, and the page keeps its dark header and footer. */
.ut-contact {
  --edp-ink: #15171a;
  --edp-ink-2: rgba(21, 23, 26, 0.8);
  --edp-ink-3: rgba(21, 23, 26, 0.68);
  --edp-ink-4: rgba(21, 23, 26, 0.34);
  --edp-label: #625e56;
  --edp-hair: rgba(21, 23, 26, 0.14);
  --edp-rule: rgba(21, 23, 26, 0.22);
  --edp-rule-strong: rgba(21, 23, 26, 0.86);
  /* Entries read as slightly recessed lines on the sheet, not as white
     boxes dropped onto it. */
  --ut-field: rgba(21, 23, 26, 0.035);
  --ut-field-focus: rgba(21, 23, 26, 0.06);
  --ut-line: rgba(21, 23, 26, 0.4);
  /* The same amber, taken dark enough to carry on bone. It still never
     carries the state alone: the sentence and aria-invalid go with it. */
  --ut-open: #8a5d0c;
  --ut-open-ink: #7c5208;
  padding: clamp(148px, 19vh, 188px) 0 clamp(104px, 9vw, 136px);
  background: #e2dfd8;
  color: var(--edp-ink);
}

/* The header carries no ground of its own until the page has scrolled 40px;
   everywhere else a dark document head sits under it for that first screen.
   Contact opens straight onto the light sheet, so at the top of the page the
   navigation would be set light on bone. Give the header, on this surface
   only, the ground it already takes on scroll, from first paint. The values
   are the scrolled header's own, so nothing changes as the page moves. */
.ut--contact .site-header {
  background-color: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-subtle);
}

/* ---- The light ground's own values for what was set against the dark ---- */
/* The editorial title is set to white directly, not through the ink token. */
.ut-contact .edp-title {
  color: var(--edp-ink);
}

.ut-page main .ut-contact a:not(.signing-field) {
  text-decoration-color: rgba(21, 23, 26, 0.34);
}

.ut-contact .ut-control:hover {
  border-bottom-color: rgba(21, 23, 26, 0.62);
}

.ut-contact .ut-control:focus-visible,
.ut-contact .ut-control:focus {
  border-bottom-color: #15171a;
  box-shadow: inset 0 -1px 0 #15171a;
  outline-color: rgba(21, 23, 26, 0.7);
}

/* The drawn chevron follows --edp-ink-2; the menu itself is a light menu. */
.ut-contact .ut-select {
  color-scheme: light;
}

.ut-contact .ut-select option {
  color: #15171a;
  background: #eae7e0;
}

.ut-contact .ut-summary:not(:empty) {
  background: rgba(138, 93, 12, 0.08);
}

.ut-contact .ut-summary:focus,
.ut-contact .ut-outcome:focus-visible,
.ut-contact .ut-submit:focus-visible {
  outline-color: rgba(21, 23, 26, 0.7);
}

.ut-page main .ut-contact .ut-summary-list a {
  text-decoration-color: rgba(124, 82, 8, 0.5);
}

/* The submit control keeps the signing field's shape and behaviour; only its
   material is turned over for the light ground. */
.ut-contact .signing-field {
  color: var(--edp-ink);
  background: rgba(234, 231, 224, 0.62);
  border-color: rgba(21, 23, 26, 0.34);
}

.ut-contact .signing-field:hover,
.ut-contact .signing-field:focus-visible {
  color: #15171a;
  border-color: rgba(21, 23, 26, 0.6);
  background: rgba(21, 23, 26, 0.05);
}

.ut-intro {
  margin: 26px 0 0;
  max-width: 50ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.46;
  letter-spacing: -0.006em;
  color: var(--edp-ink-2);
  text-wrap: pretty;
}

.ut-recipient {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--edp-ink-3);
  text-wrap: pretty;
}

/* ---- The sheet ------------------------------------------------------------ */
.ut-sheet {
  margin-top: clamp(52px, 5vw, 72px);
  border-top: 2px solid var(--edp-rule-strong);
}

.ut-sheet[hidden] {
  display: none;
}

.ut-sheet-key {
  margin: 0;
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--edp-hair);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--edp-label);
}

/* Entries in pairs on one grid; each entry sits on its own ruled line. */
.ut-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

/* Each entry spans four shared rows (head, prompt, control, sentence), so
   paired entries keep their controls on one line whether or not either has
   a prompt or an open sentence. */
.ut-field {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--edp-hair);
  scroll-margin-top: 132px;
}

.ut-field--wide {
  grid-column: 1 / -1;
}

.ut-field-head {
  grid-row: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ut-field-label {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.004em;
  color: var(--edp-ink);
}

/* The requirement word: plain text in the label's line, never a badge. */
.ut-req {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--edp-label);
}

.ut-prompt {
  grid-row: 2;
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--edp-ink-3);
}

/* The control is a line to write on: a faint field, a firm rule beneath. */
.ut-control {
  grid-row: 3;
  align-self: start;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px 11px;
  font: inherit;
  font-size: 17px;
  line-height: 1.45;
  color: var(--edp-ink);
  background: var(--ut-field);
  border: 0;
  border-bottom: 1px solid var(--ut-line);
  border-radius: 0;
  box-shadow: inset 0 -1px 0 transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.ut-control:hover {
  border-bottom-color: rgba(246, 245, 242, 0.62);
}

.ut-control:focus-visible,
.ut-control:focus {
  background: var(--ut-field-focus);
  border-bottom-color: #ffffff;
  box-shadow: inset 0 -1px 0 #ffffff;
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

.ut-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  color-scheme: dark;
  cursor: pointer;
  /* A drawn chevron, not an icon font. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--edp-ink-2) 50%),
    linear-gradient(135deg, var(--edp-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ut-select option {
  color: #f6f5f2;
  background: #16181b;
}

.ut-textarea {
  min-height: 208px;
  resize: vertical;
  padding-top: 13px;
}

/* ---- Open entries: mark, sentence, aria-invalid -------------------------- */
.ut-open {
  grid-row: 4;
  align-self: start;
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ut-open-ink);
}

.ut-open:empty {
  display: none;
}

.ut-open:not(:empty) {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* The mark at the field: an amber rule in the gutter beside the entry and
   an amber line beneath the control. */
.ut-field.is-open::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 30px;
  left: -20px;
  width: 3px;
  background: var(--ut-open);
}

.ut-open:not(:empty)::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.52em;
  background: var(--ut-open);
}

.ut-field.is-open .ut-control {
  border-bottom-color: var(--ut-open);
  box-shadow: inset 0 -1px 0 var(--ut-open);
}

.ut-field.is-open .ut-control:focus {
  box-shadow: inset 0 -1px 0 var(--ut-open);
}

/* The summary, when more than one entry is open. Plain text, plain links. */
.ut-summary {
  scroll-margin-top: 132px;
}

.ut-summary:empty {
  display: none;
}

.ut-summary:not(:empty) {
  margin: 26px 0 4px;
  padding: 18px 22px 20px;
  border-left: 3px solid var(--ut-open);
  background: rgba(229, 173, 73, 0.06);
}

.ut-summary:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

.ut-summary-sentence {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--edp-ink);
}

.ut-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ut-page main .ut-summary-list a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ut-open-ink);
  text-decoration-color: rgba(240, 189, 99, 0.5);
}

/* ---- The submit action ---------------------------------------------------- */
.ut-submit-row {
  margin: 0;
  padding-top: 34px;
}

.ut-submit {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.ut-submit:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* ---- The outcome: one sentence, the same treatment for both -------------- */
.ut-outcome:empty {
  display: none;
}

.ut-outcome:not(:empty) {
  margin-top: clamp(40px, 4vw, 52px);
  padding-top: 24px;
  border-top: 2px solid var(--edp-rule-strong);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--edp-ink);
  scroll-margin-top: 132px;
}

.ut-outcome:focus {
  outline: none;
}

.ut-outcome:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
}

/* ---- Standing note and direct channels ----------------------------------- */
.ut-note {
  margin-top: clamp(56px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--edp-rule);
}

.ut-note p {
  margin: 0;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--edp-ink-3);
}

.ut-note p + p {
  margin-top: 10px;
}

.ut-note p[hidden] {
  display: none;
}

/* Quiet and factual: five labelled entries, no icons, no counts, no feed. */
.ut-direct {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 22px 56px;
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--edp-hair);
}

.ut-direct-item {
  min-width: 0;
}

.ut-direct dt {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--edp-label);
}

.ut-direct dd {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--edp-ink-2);
}

/* ==========================================================================
   PRIVACY POLICY — "a legal document, read at ease"
   Eight ruled clauses in the editorial grid; one field ledger; the issue
   date as ordinary body copy; the shared close.
   ========================================================================== */
.pv-clause {
  padding: clamp(64px, 6vw, 88px) 0;
  border-top: 1px solid var(--edp-hair);
}

.pv-clause--head {
  padding-top: clamp(148px, 19vh, 188px);
  border-top: 0;
}

.pv-clause--last {
  padding-bottom: clamp(104px, 9vw, 136px);
}

.pv-heading {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--edp-ink);
  text-wrap: balance;
}

.pv-lede {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--edp-ink-2);
  text-wrap: pretty;
}

.pv-clause--head .pv-lede {
  margin-top: 26px;
}

.pv-body {
  margin: 18px 0 0;
  max-width: 64ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--edp-ink-3);
  text-wrap: pretty;
}

/* The field ledger: the Contact sheet's own labels, one ruled row each. */
.pv-ledger {
  max-width: 640px;
  margin: 34px 0 0;
  border-top: 2px solid var(--edp-rule-strong);
  border-bottom: 1px solid var(--edp-rule);
}

.pv-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: baseline;
  padding: 15px 0 16px;
}

.pv-ledger-row + .pv-ledger-row {
  border-top: 1px solid var(--edp-hair);
}

.pv-ledger dt {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--edp-ink);
}

.pv-ledger dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--edp-ink-3);
}

.pv-ledger-note {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--edp-ink-3);
}

.pv-ledger-note + .pv-body {
  margin-top: 30px;
}

.pv-issued {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--edp-hair);
  font-size: 15px;
}

/* ==========================================================================
   TERMS & CONDITIONS
   The Privacy page's grammar, reused as it is: the same ruled clauses, the
   same headings, lede and body, and the same issue line. One element is new,
   because Privacy has no equivalent — the intellectual-property list, set as
   ruled lines in the field ledger's idiom rather than as bullets.
   ========================================================================== */
.tm-list {
  max-width: 640px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--edp-rule-strong);
  border-bottom: 1px solid var(--edp-rule);
}

.tm-list li {
  padding: 13px 0 14px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--edp-ink);
}

.tm-list li + li {
  border-top: 1px solid var(--edp-hair);
}

.tm-list + .pv-body {
  margin-top: 30px;
}

/* ==========================================================================
   PAGE NOT FOUND — "a quiet utility"
   Title, lede and the seven destinations as a ruled register; much space.
   ========================================================================== */
.nf-clause {
  padding: clamp(148px, 19vh, 188px) 0 clamp(120px, 11vw, 168px);
}

.nf-lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.46;
  letter-spacing: -0.006em;
  color: var(--edp-ink-2);
  text-wrap: pretty;
}

.nf-register {
  max-width: 720px;
  margin: clamp(52px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--edp-rule-strong);
  border-bottom: 1px solid var(--edp-rule);
}

.nf-register li + li {
  border-top: 1px solid var(--edp-hair);
}

.ut-page main .nf-register a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 2px 18px 0;
  font-size: clamp(17px, 1.4vw, 19.5px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--edp-ink);
  text-decoration: none;
}

.ut-page main .nf-register a span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-fast);
}

.ut-page main .nf-register a:hover span:first-child,
.ut-page main .nf-register a:focus-visible span:first-child {
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.nf-mark {
  flex: none;
  color: var(--edp-ink-4);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nf-register a:hover .nf-mark,
.nf-register a:focus-visible .nf-mark {
  color: var(--edp-ink);
  transform: translateX(3px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 899px) {
  .ut-field.is-open::before {
    left: -14px;
  }
}

@media (max-width: 640px) {
  .ut-contact,
  .pv-clause--head,
  .nf-clause {
    padding-top: 136px;
  }

  .ut-contact {
    padding-bottom: 88px;
  }

  .ut-intro,
  .nf-lede {
    margin-top: 18px;
    font-size: 17.5px;
  }

  .ut-recipient {
    font-size: 16px;
  }

  .ut-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .ut-field {
    padding: 24px 0 26px;
  }

  .ut-field.is-open::before {
    top: 24px;
    bottom: 26px;
    left: -12px;
  }

  .ut-control {
    font-size: 16px;
  }

  .ut-submit {
    width: 100%;
    justify-content: space-between;
  }

  .ut-summary:not(:empty) {
    padding: 16px 16px 18px;
  }

  .ut-direct {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 6px;
  }

  .ut-direct-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
    padding: 11px 0 12px;
  }

  .ut-direct-item + .ut-direct-item {
    border-top: 1px solid var(--edp-hair);
  }

  .ut-direct dd {
    margin: 0;
  }

  .pv-clause {
    padding: 56px 0 60px;
  }

  .pv-clause--last {
    padding-bottom: 88px;
  }

  .pv-heading {
    font-size: clamp(24px, 6.8vw, 27px);
  }

  .pv-lede {
    font-size: 17.5px;
  }

  .pv-body {
    font-size: 16px;
    line-height: 1.62;
  }

  .pv-ledger-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
    padding: 13px 0 14px;
  }

  .nf-clause {
    padding-bottom: 104px;
  }

  .ut-page main .nf-register a {
    padding: 15px 0 16px;
    font-size: 17px;
  }
}

@media (max-width: 899px) and (min-width: 641px) {
  .ut-direct {
    grid-template-columns: repeat(2, max-content);
  }
}

/* The narrowest phones: each channel's label above its value. */
@media (max-width: 400px) {
  .ut-direct-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
  }
}

/* ==========================================================================
   Print (01 §14): editorial.css supplies paper, chrome removal and link
   destinations. Here: the sheet's fields as ruled lines, and clauses kept
   whole where short.
   ========================================================================== */
@media print {
  .ut-page {
    --ut-field: transparent;
    --ut-line: #555555;
    --ut-open: #6b4300;
    --ut-open-ink: #6b4300;
  }

  .ut-contact,
  .pv-clause,
  .nf-clause {
    padding: 22px 0 18px !important;
    background: none !important;
  }

  .pv-clause {
    border-top: 1px solid #c8c8c8;
  }

  .pv-clause--head {
    border-top: 0;
  }

  .edp-title {
    font-size: 30px;
  }

  .ut-intro,
  .nf-lede,
  .pv-lede {
    font-size: 15px;
  }

  .pv-heading {
    font-size: 20px;
    break-after: avoid;
  }

  .ut-recipient,
  .ut-note p,
  .ut-direct dd,
  .pv-body,
  .pv-ledger dt,
  .pv-ledger dd,
  .pv-ledger-note,
  .tm-list li {
    font-size: 12.5px;
    line-height: 1.5;
  }

  .pv-clause,
  .pv-ledger,
  .tm-list,
  .ut-field,
  .ut-direct {
    break-inside: avoid;
  }

  .ut-select {
    background-image: none;
  }

  .ut-submit-row,
  .nf-mark {
    display: none;
  }

  .ut-page main .nf-register a {
    display: block;
    padding: 8px 0;
    font-size: 13.5px;
  }
}