/* Prism access page. Atlas typography and palette, with the Ordered field graphic. */
@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font: 16px/1.55 var(--font-body); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: var(--color-clear); }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
h1, h2, p, figure, dl, dd { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.page { max-width: 1600px; padding-inline: var(--gutter); margin-inline: auto; }
.skip { position: absolute; top: -5rem; left: 1rem; padding: 1rem; z-index: 2; background: var(--color-paper); }
.skip:focus { top: 1rem; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.wordmark { font: 600 1.8rem var(--font-display); letter-spacing: -.07em; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.wordmark span { font: 400 .75rem var(--font-body); letter-spacing: 0; margin-left: var(--space-md); color: var(--color-muted); }
.reader-link { display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 44px; font-size: .8rem; white-space: nowrap; }
.cover { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
.introduction { min-width: 0; }
.publication { font-size: .75rem; color: var(--color-muted); }
.publication span { padding-inline: var(--space-xs); }
h1 { font-size: clamp(5rem, 9.5vw, 9rem); letter-spacing: -.075em; line-height: 1; margin: var(--space-lg) 0; }
.subtitle { font: 400 clamp(1.5rem, 2.4vw, 2.25rem)/1.23 var(--font-display); letter-spacing: -.04em; }
.lede { max-width: 51ch; font-size: .95rem; color: var(--color-muted); margin-top: var(--space-lg); }
.ordered-field { margin-top: var(--space-lg); }
.ordered-field canvas { display: block; width: 100%; aspect-ratio: 8 / 3; }
.coverage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-sm); gap: var(--space-md); }
.coverage div { display: flex; flex-direction: column-reverse; gap: var(--space-xs); }
.coverage dt { color: var(--color-muted); font-size: .7rem; }
.coverage dd { font: 400 clamp(1.7rem, 3vw, 2.5rem)/1 var(--font-display); letter-spacing: -.055em; }
.access-panel { border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); min-width: 0; }
.access-mark { display: inline-block; font-size: 1.5rem; color: var(--color-accent); margin-bottom: var(--space-lg); }
.access-panel h2 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); letter-spacing: -.055em; line-height: 1.15; }
#form-introduction > p { color: var(--color-muted); font-size: .875rem; margin-top: var(--space-md); max-width: 44ch; }
form { margin-top: var(--space-lg); }
.required-note { color: var(--color-muted); font-size: .7rem; margin-bottom: var(--space-lg); }
.field { margin-bottom: var(--space-sm); }
label { display: block; font-size: .8rem; margin-bottom: var(--space-xs); }
input { display: block; width: 100%; min-height: 48px; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-input-rule); border-radius: 2px; padding: .65rem var(--space-sm); font-size: 1rem; }
input[aria-invalid="true"] { border-color: var(--color-error); }
.field-error { font-size: .75rem; color: var(--color-error); min-height: 1.2rem; padding-top: .2rem; }
.field-help { font-size: .7rem; color: var(--color-muted); margin-top: .25rem; }
.submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; border: 1px solid var(--color-accent); border-radius: 2px; background: var(--color-accent); color: var(--color-paper); font-size: .875rem; font-weight: 500; padding: var(--space-sm) var(--space-md); white-space: nowrap; }
.submit[aria-busy="true"] { cursor: wait; }
.form-status { color: var(--color-error); font-size: .8rem; padding-top: var(--space-xs); }
.form-status:empty { padding: 0; }
.privacy-note { font-size: .7rem; color: var(--color-muted); margin-top: var(--space-md); }
.contact-note { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); font-size: .75rem; color: var(--color-muted); }
.contact-note a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--color-ink); }
.success { padding-top: var(--space-md); }
.success-icon { display: block; color: var(--color-accent); font-size: 2rem; margin-bottom: var(--space-xl); }
.success p { font-size: .95rem; color: var(--color-muted); margin-top: var(--space-lg); overflow-wrap: anywhere; }
.success strong { color: var(--color-ink); font-weight: 500; }
.success .success-note { font-size: .8rem; margin-top: var(--space-xl); }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); padding-block: var(--space-lg); color: var(--color-muted); font-size: .7rem; }
footer span { padding-inline: var(--space-xs); }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (hover:hover) { a:hover { color: var(--color-accent); } .submit:not(:disabled):hover { background: var(--color-accent-hover); } input:hover { border-color: var(--color-muted); } }
@media (min-width: 58rem) { .cover { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(3rem,7vw,7rem); } .access-panel { border-top: 0; border-left: 1px solid var(--color-rule); padding-left: clamp(2rem,4vw,4rem); padding-top: var(--space-lg); } }
@media (max-width: 36rem) { .wordmark span { display: none; } .reader-link { gap: var(--space-xs); font-size: .7rem; } .cover { padding-top: var(--space-xl); } }
@media (prefers-reduced-motion:reduce) { button:active { transform: none; } }

@media (min-width: 58rem) {
  .signup-page .page { height: auto; min-height: max(600px, 100svh); display: flex; flex-direction: column; }
  .signup-page main { flex: 1; min-height: auto; display: flex; }
  .signup-page .introduction { min-height: 0; display: flex; flex-direction: column; }
  .signup-page .masthead { padding-block: clamp(8px, 1.8vh, 20px); }
  .signup-page .cover { min-height: 0; grid-template-rows: auto; width: 100%; padding-block: 16px; align-items: stretch; gap: clamp(32px, 5vw, 72px); }
  .signup-page h1 { font-size: clamp(72px, 12vh, 128px); margin-block: 12px; }
  .signup-page .subtitle { font-size: clamp(24px, 3.8vh, 34px); }
  .signup-page .lede { margin-top: 12px; font-size: .875rem; }
  .signup-page .ordered-field { contain: size; margin-top: 12px; flex: 1; display: flex; flex-direction: column; min-height: 150px; }
  .signup-page .ordered-field canvas { flex: 1; height: 0; min-height: 120px; aspect-ratio: auto; }
  .signup-page .coverage { padding-top: 12px; margin-top: 12px; }
  .signup-page .coverage dd { font-size: clamp(26px, 4vh, 36px); }
  .signup-page .access-panel { padding-block: 0; display: flex; flex-direction: column; justify-content: safe center; }
  .signup-page .access-mark { display: none; }
  .signup-page .access-panel h2 { font-size: clamp(28px, 4vh, 36px); }
  .signup-page #form-introduction > p { margin-top: 8px; }
  .signup-page form { margin-top: 12px; }
  .signup-page .required-note { margin-bottom: 10px; }
  .signup-page .field { margin-bottom: 8px; }
  .signup-page label { margin-bottom: 4px; }
  .signup-page .field-error:empty { min-height: 0; padding: 0; }
  .signup-page input { min-height: 44px; padding-block: 8px; }
  .signup-page .privacy-note { margin-top: 8px; }
  .signup-page .contact-note { margin-top: 16px; padding-top: 10px; }
  .signup-page .contact-note a { min-height: 32px; }
  .signup-page footer { padding-block: 12px; }
}
@media (min-width: 58rem) and (max-height: 700px) {
  .signup-page .masthead { padding-block: 4px; }
  .signup-page .cover { padding-block: 8px; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 32px; }
  .signup-page .access-panel { padding-left: 24px; }
  .signup-page h1 { font-size: 64px; margin-block: 8px; }
  .signup-page .lede { margin-top: 8px; }
  .signup-page .ordered-field { min-height: 135px; }
  .signup-page .field { margin-bottom: 5px; }
  .signup-page .contact-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 6px; }
  .signup-page .contact-note a { gap: 16px; }
  .signup-page footer { padding-block: 4px; }
}

.brand-mark { display: inline-block; flex: 0 0 auto; width: 28px; height: 28px; margin-right: 10px; vertical-align: middle; }
.signup-page footer { border-top: 1px solid var(--color-rule); }

@media (min-width: 58rem) { .signup-page .page:has([aria-invalid="true"]) { height: auto; min-height: 100svh; } }

@media (min-width: 58rem) and (min-height: 851px) {
  .signup-page #form-introduction > p { margin-top: 12px; }
  .signup-page #access-form { margin-top: 24px; }
  .signup-page .required-note { margin-bottom: 12px; }
  .signup-page .field { margin-bottom: 16px; }
  .signup-page label { margin-bottom: 8px; }
  .signup-page input { min-height: 48px; padding-block: 10px; }
  .signup-page .submit { min-height: 48px; }
  .signup-page .privacy-note { margin-top: 12px; }
  .signup-page .contact-note { margin-top: 24px; padding-top: 16px; }
}

.professional-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 36rem) { .professional-fields { grid-template-columns: minmax(0, 1fr); } }