/* Auth artwork shares the site's materials; no rectangular image backdrop. */
html body.interior-auth,
html[data-theme="dark"] body.interior-auth {
  background: var(--studio-paper) !important;
  color: var(--studio-ink) !important;
}

.interior-auth .auth-layout { padding-top: 38px; padding-bottom: 48px; }
.interior-auth .auth-statement { font-size: clamp(44px, 5.2vw, 76px); letter-spacing: -.055em; }
.interior-auth .auth-story-copy { font-size: clamp(15px, 1.3vw, 19px); max-width: 440px; }
.auth-documents {
  position: relative;
  width: 100%;
  max-width: 550px;
  aspect-ratio: 1.65;
  margin: 30px 0 0;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  container-type: inline-size;
}
.auth-document-orbit {
  position: absolute;
  inset: 13% 1% 11% 1%;
  border: 1px solid var(--studio-line);
  border-radius: 50%;
  transform: rotate(-19deg);
}
.auth-paper {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 47%;
  height: 88%;
  padding: 5%;
  border-radius: 3px;
  font-family: var(--studio-sans);
  box-shadow: 0 3px 5px #102d2405, 0 14px 24px -12px #102d2426, 0 32px 55px -25px #102d2426;
}
.auth-paper-invoice {
  left: 5%;
  top: 1%;
  color: #19372d;
  background: #fffefa;
  border: 1px solid #e3e6dc;
  transform: rotate(-9deg);
}
.auth-paper-supplier {
  right: 5%;
  top: 10%;
  z-index: 1;
  color: #edf3e9;
  background: #193d30;
  border: 1px solid #3b5948;
  transform: rotate(7deg);
}
.auth-paper-masthead, .auth-paper-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: clamp(6px, 1.4cqw, 8px);
  line-height: 1;
  letter-spacing: .06em;
}
.auth-paper-invoice .auth-paper-masthead > :first-child { font-size: clamp(9px, 2.25cqw, 13px); font-weight: 750; letter-spacing: -.04em; }
.auth-paper-dot { color: #80a943; }
.auth-paper-title { margin-top: 10%; font-size: clamp(22px, 5.7cqw, 32px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.auth-paper-supplier .auth-paper-title { font-family: var(--studio-serif); font-weight: 400; font-size: clamp(23px, 5.8cqw, 34px); letter-spacing: -.025em; line-height: 1.1; }
.auth-paper-title em { color: #d7f97a; font-weight: 400; }
.auth-paper-address { display: grid; gap: .9cqw; width: 44%; margin-top: 8%; }
.auth-paper-address span, .auth-paper-row span, .auth-paper-total span { display: block; height: .55cqw; background: #c9d3c6; border-radius: 1px; }
.auth-paper-address span:last-child { width: 64%; }
.auth-paper-table { margin-top: 8%; border-top: 1px solid #c8d2c3; }
.auth-paper-row { display: grid; grid-template-columns: 1fr 15% 24%; gap: 15%; padding: 4% 0; border-bottom: 1px solid #e3e8de; }
.auth-paper-row span:first-child { width: 90%; }
.auth-paper-total { display: flex; justify-content: space-between; width: 53%; margin: 6% 0 0 auto; }
.auth-paper-total span { width: 39%; height: .75cqw; background: #5d7866; }
.auth-paper-bottom { margin-top: auto; padding-top: 6%; font-size: 1.1cqw; opacity: .65; }
.auth-paper-rule { height: 1px; margin-top: 10%; background: #597c5a; }
.auth-paper-section { margin-top: 7%; }
.auth-paper-section > span { display: block; font-size: clamp(6px, 1.55cqw, 9px); line-height: 1; }
.auth-paper-lines { display: grid; gap: .9cqw; margin-top: 6%; }
.auth-paper-lines i { height: .35cqw; width: 100%; background: #668070; border-radius: 1px; }
.auth-paper-lines i:last-child { width: 65%; }
.auth-document-link {
  position: absolute;
  z-index: 2;
  left: 45%;
  top: 52%;
  width: 10%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #d7f97a;
  color: #193d30;
  border: 4px solid var(--studio-paper);
  border-radius: 50%;
}
.auth-document-link svg { width: 46%; height: 46%; }
html[data-theme="dark"] .auth-paper-invoice { background: #dfe8d8; border-color: #e0e8d9; }
html[data-theme="dark"] .auth-paper-address span,
html[data-theme="dark"] .auth-paper-row span { background: #a5b6a1; }
html[data-theme="dark"] .auth-paper-table { border-color: #aaba9f; }
html[data-theme="dark"] .auth-paper-row { border-color: #c5d1be; }
html[data-theme="dark"] .auth-paper { box-shadow: 0 18px 40px -15px #0007; }

/* A single entrance; frequent sign-ins should never have looping distractions. */
@media (prefers-reduced-motion: no-preference) {
  .auth-paper-invoice { animation: auth-invoice-enter 450ms cubic-bezier(.16, 1, .3, 1) both; }
  .auth-paper-supplier { animation: auth-supplier-enter 450ms 70ms cubic-bezier(.16, 1, .3, 1) both; }
  .auth-document-link { animation: auth-link-enter 300ms 140ms ease-out both; }
}
@keyframes auth-invoice-enter { from { opacity: 0; transform: translateY(12px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(-9deg); } }
@keyframes auth-supplier-enter { from { opacity: 0; transform: translateY(16px) rotate(3deg); } to { opacity: 1; transform: translateY(0) rotate(7deg); } }
@keyframes auth-link-enter { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 701px) and (max-width: 1000px) {
  .interior-auth .auth-statement { font-size: clamp(38px, 4.7vw, 48px); }
  .auth-documents { margin-top: 26px; }
  .auth-paper { padding: 4%; }
  .auth-paper-title { font-size: 5.7cqw; }
  .auth-paper-supplier .auth-paper-title { font-size: 6cqw; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .interior-auth .auth-layout { padding-top: 20px; padding-bottom: 28px; }
  .interior-auth .auth-statement { font-size: clamp(48px, 4.5vw, 62px); }
  .interior-auth .auth-story-copy { margin-top: 18px; font-size: 16px; }
  .auth-documents { max-width: 430px; margin-top: 24px; }
  .auth-paper { padding: 4%; }
  .auth-paper-address { margin-top: 8%; }
  .auth-paper-table { margin-top: 8%; }
  .auth-paper-row { padding: 5% 0; }
  .auth-paper-section { margin-top: 7%; }
  .auth-paper-bottom { padding-top: 7%; }
}
@media (max-width: 700px) {
  .interior-auth .auth-layout { padding-top: 22px; padding-bottom: 36px; gap: 26px; }
  .interior-auth .auth-statement { font-size: clamp(37px, 8.8vw, 48px); }
  .interior-auth .auth-story-copy { font-size: 14px; max-width: 360px; }
  .auth-documents { display: none; }
  .interior-auth .auth-story { padding-left: 17px; border-left: 2px solid #acd45e; }
  .interior-auth .auth-panel { padding-top: 24px; }
}