/* Contact (06 §11.5, §13.8): sheet, scope and tape live here; no other page has them. */
.page-contact { --pad: clamp(18px, 3vw, 40px); }
.page-contact :is(.scope, .quote) [hidden] { display: none; }

/* hero */
.page-contact .standfirst .hero-clock { font-size: var(--fs-meta); line-height: var(--lh-meta); margin-bottom: var(--s-3); }
.page-contact .standfirst .intent-line { margin-top: var(--s-4); font: italic 400 1.125rem/1.45 var(--serif); color: var(--pen); }
.page-contact .intent-line a { color: var(--pen); text-decoration-color: var(--pen-stroke); }
.page-contact .standfirst .irb-line { margin-top: var(--s-3); font-size: .9375rem; }
.page-contact .quote-msg { margin-top: var(--s-6); }
.page-contact .quote-msg .alert { margin-bottom: 0; }
.page-contact .quote-msg .alert p + p { margin-top: var(--s-2); font-weight: 400; }
.page-contact .quote-msg + .quote { margin-top: var(--s-5); }

/* One form, in source order: the fields, Send (with what happens next under it), then the scope column.
   Phones: all three on the form's paper. From md the scope stands beside the fields (round 2: Send follows the
   message box on every screen, and Tab goes fields → Send → scope). The paper is flat with a 1px edge: only
   transcripts and the committee sheet are lifted off the page. */
.page-contact .quote { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
.page-contact .quote::before, .page-contact .done-sheet {
  box-shadow: 0 0 0 1px var(--rule-strong);
  background: linear-gradient(90deg, transparent 14px, color-mix(in srgb, var(--margin-line) 55%, transparent) 14px 15.5px, transparent 15.5px), var(--sheet);
}
.page-contact .quote::before { content: ""; grid-area: 1 / 1 / span 3; margin-inline: calc(var(--gut) * -1); }
.page-contact .quote > * { padding-left: 14px; }
.page-contact .quote-fields { grid-area: 1 / 1; padding-top: var(--pad); }
.page-contact .quote-act { grid-area: 2 / 1; padding-top: var(--s-6); }
.page-contact .quote-act .scope-next { margin-top: var(--s-5); max-width: 36rem; }
.page-contact .quote-act .privacy-link { margin-top: var(--s-2); font-size: .9375rem; }
.page-contact .privacy-link a { display: inline-block; padding-block: 10px; }
.page-contact .scope { display: flex; flex-direction: column; }
.page-contact .quote .scope { grid-area: 3 / 1; margin-top: var(--s-6); padding-block: var(--s-5) var(--pad); border-top: 1px solid var(--rule); }

.page-contact .field { max-width: 36rem; }
.page-contact .field--service { margin-top: 0; }
.page-contact .field--service select { font: 500 1.125rem/1.3 var(--serif); color: var(--navy); }
.page-contact .group { margin-top: var(--s-7); }
.page-contact .group > legend { font: 500 1.375rem/1.3 var(--serif); color: var(--navy); margin-bottom: var(--s-2); }
.page-contact .rec-hint { font: 400 .875rem/1 var(--sans); color: var(--ink-soft); }
.page-contact .opts { margin-top: var(--s-5); }
.page-contact .opts > legend { font: 600 var(--fs-ui)/1.3 var(--sans); margin-bottom: var(--s-2); }
.page-contact .group > .field:first-of-type, .page-contact .duo .field { margin-top: var(--s-3); }
.page-contact .privacy { margin-top: var(--s-3); font-size: .9375rem; }

/* the two numbers, as a sum */
.page-contact .nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--s-3); max-width: 30rem; margin-top: var(--s-2); }
.page-contact .field--num { margin-top: 0; grid-template-rows: auto 1fr auto; }
.page-contact .field--num input { align-self: end; font: italic 500 2rem/1.15 var(--serif); color: var(--pen); padding: 2px 4px 4px; -moz-appearance: textfield; appearance: textfield; }
.page-contact .field--num ::-webkit-inner-spin-button { -webkit-appearance: none; }
.page-contact .times { align-self: end; font: 400 1.75rem/1 var(--serif); color: var(--ink-soft); padding-bottom: 12px; }

/* chips as on the sample; the pen ticks checkboxes (§10.17) */
.page-contact .chip span { min-height: 44px; font-size: .875rem; padding: 0 14px; }
.page-contact .opts-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.page-contact .opts-link { font-size: .875rem; padding-block: 10px; }
@media (max-width: 37.49em) { .page-contact .opts-row .chips { flex-basis: 100%; } }
.page-contact .box { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 9px 0; cursor: pointer; font-size: var(--fs-ui); line-height: 1.45; }
.page-contact .box input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.page-contact .box .ink { display: none; left: -3px; top: -1px; width: 30px; height: 30px; --dur: .4s; }
.page-contact .box input:checked ~ .ink { display: block; }

/* scope: next steps, tape, summary, questions */
.page-contact .scope-h { font: 500 1.25rem/1.3 var(--serif); }
.page-contact .scope-next p { margin-top: var(--s-2); font-size: .9375rem; }
.page-contact .scope-mail { margin-top: var(--s-6); }
.page-contact .scope-mail p { margin-top: var(--s-2); font-size: .9375rem; }
.page-contact .scope-live { max-width: 36rem; }
.page-contact .scope-svg line { stroke: var(--pencil); stroke-width: var(--stroke-pencil); stroke-linecap: round; }
.page-contact .scope-svg .u { stroke-dasharray: 2 4; }
.page-contact .scope-svg .ex { opacity: .45; stroke-dasharray: 3 5; }
.page-contact .scope-cap.is-empty { font: italic 400 1rem/1.3 var(--serif); color: var(--pen); }
.page-contact .scope-svg .thin { stroke-width: .9px; }
.page-contact .scope-svg text { font: 400 11px var(--mono); fill: var(--ink); }
.page-contact .scope-sum { display: block; margin-top: var(--s-5); max-width: 24em; font: italic 400 1.1875rem/1.45 var(--serif); color: var(--pen); transform: rotate(-.6deg); }
.page-contact .scope-sum.is-empty { color: var(--ink-soft); font-size: 1.0625rem; transform: none; }
.page-contact :is(.scope-cap, .scope-use) { margin-top: var(--s-3); }
.page-contact .scope-asks { margin-top: var(--s-6); }
.page-contact .scope-asks ul { list-style: none; margin-top: var(--s-2); }
.page-contact .scope-asks li { position: relative; padding: 5px 0 5px 20px; font-size: .9375rem; line-height: 1.5; }
.page-contact .scope-asks li::before { content: ""; position: absolute; left: 1px; top: calc(5px + .5em); width: 7px; height: 7px; border: 1.4px solid var(--pencil); border-radius: 50%; }

/* sent */
.page-contact .done { margin-top: var(--s-6); row-gap: var(--s-7); }
.page-contact .done-sheet { margin-inline: calc(var(--gut) * -1); padding: var(--s-7) var(--pad) var(--s-7) calc(var(--gut) + 30px); }
.page-contact .done-thanks { position: relative; font: 400 var(--fs-voice)/1.45 var(--serif); color: var(--navy); max-width: 26em; overflow-wrap: anywhere; }
.page-contact .done-thanks .ink { left: -34px; top: .05em; width: 28px; height: 28px; }
.page-contact .done-more { margin-top: var(--s-4); }

@media (min-width: 37.5em) {
  .page-contact .quote::before, .page-contact .done-sheet { margin-inline: var(--sheet-bleed); }
  .page-contact .quote > * { padding-inline: var(--pad); }
  .page-contact .done-sheet { padding-left: calc(var(--pad) + 44px); }
  .page-contact .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); max-width: 36rem; align-items: start; }
}
@media (min-width: 56.25em) {
  .page-contact .quote-msg > *, .page-contact .done-sheet { grid-column: 1 / span 7; }
  .page-contact .quote { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--col-gap); margin-top: var(--s-7); }
  .page-contact .quote::before { grid-area: 1 / 1 / span 2 / span 7; margin-inline: var(--sheet-bleed) 0; }
  .page-contact .quote-fields { grid-area: 1 / 1 / auto / span 7; }
  .page-contact .quote-act { grid-area: 2 / 1 / auto / span 7; padding-bottom: var(--pad); }
  .page-contact .quote .scope { grid-area: 1 / 9 / span 2 / span 4; margin-top: 0; padding: var(--pad) 0 0; border-top: 0; }
  .page-contact .done .scope { grid-column: 9 / span 4; padding-top: .4rem; }
  .page-contact .done { margin-top: var(--s-7); }
  .page-contact .done-sheet { margin-inline: var(--sheet-bleed) 0; }
}
@media (min-width: 64em) {
  .page-contact .scope-live { position: sticky; top: var(--s-5); }
}
@media (min-width: 75em) {
  .page-contact .field--service select { font-size: 1.3rem; }
}

/* :has(): only what fits the service */
@supports selector(:has(*)) {
  .page-contact .rec-hint { display: none; }
  .page-contact .quote:has(#service :is([value="translation"], [value="fieldwork"], [value="publication"]):checked) .if-rec,
  .page-contact .quote:has(#service [value="fieldwork"]:checked) :is(.if-en, .extras),
  .page-contact .quote:has(#out-pt:checked):not(:has(#service :is([value="translation"], [value="publication"]):checked)) .if-en { display: none; }
}
@media (forced-colors: active) { .page-contact .box .ink { display: none !important; } }