@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Theme */
:root {
  color-scheme: dark;
  --page: #101211;
  --text: #f2f2e9;
  --lime: #d2ed91;
  --amber: #efb877;
  --mint: #9ed8c5;
  --line: rgb(207 223 199 / 13%);
  --card-border: #485044;
  --card-surface:
    radial-gradient(ellipse at 100% 0, rgb(134 151 96 / 12%), transparent 55%),
    linear-gradient(120deg, #282e28, #202620 72%);
  --sans: 'DM Sans', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --card-padding: 1.375rem;
  --ribbon-width: 10.75rem;
  --ribbon-height: 3rem;
  --flip-duration: 900ms;
  --flip-easing: cubic-bezier(.65, .05, .25, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
/* Keep animated visual overflow inside the document body. The root still
   scrolls normally whenever the page content is taller than the viewport. */
body {
  overflow: clip;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
::selection { background: var(--lime); color: var(--page); }

/* A vector shape keeps diagonal arrows independent of system/emoji fonts. */
.diagonal-arrow {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  line-height: 1;
}
.diagonal-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.diagonal-arrow--southwest::before { transform: rotate(180deg); }

/* Page frame */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 49% 44%, rgb(147 175 111 / 8%), transparent 53%),
    linear-gradient(rgb(200 220 180 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(200 220 180 / 2.5%) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse, black 30%, transparent 85%);
}
.page-header, .page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem max(2.75rem, env(safe-area-inset-left));
  padding-right: max(2.75rem, env(safe-area-inset-right));
}
.page-header { padding-top: max(1.75rem, env(safe-area-inset-top)); }
.site-logo {
  display: block;
  width: 10rem;
  max-width: 100%;
  height: auto;
  /* Display the supplied dark artwork in a light tone on this background. */
  filter: brightness(0) invert(.94);
}
.page-edition, .page-footer { font: .75rem/1.5 var(--mono); letter-spacing: 1px; color: #8b958b; }
.page-edition span { color: #a6b198; margin-left: .625rem; }
.page-footer { padding-top: 1.25rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.footer-code { letter-spacing: .1px; color: #a1ad95; }
.main {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 2.5rem max(1.5rem, env(safe-area-inset-left)) 3.5rem;
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.card-stage { position: relative; width: min(100%, 40rem); min-width: 0; perspective: 1800px; }
.card-flight { transform-style: preserve-3d; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  margin-bottom: 1.375rem;
  color: #a8b49a;
  font: .75rem/1.6 var(--mono);
  letter-spacing: 1.5px;
  text-align: center;
}
.stage-label > span { flex: 0 0 1.25rem; height: 1px; background: #677459; }

/* Independent content heights keep the front compact.
   JavaScript sizes this surface to the active .card-content. */
.id-card {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform var(--flip-duration) var(--flip-easing),
    height var(--flip-duration) var(--flip-easing);
}
.id-card.is-flipped { transform: rotateY(180deg); }
.card-face {
  position: relative;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 1.125rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--card-surface);
  box-shadow: 0 35px 80px -25px #000b, inset 0 1px 0 rgb(229 239 210 / 7%);
}
.card-face::before, .projects-pass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .15;
  background: repeating-linear-gradient(115deg, transparent 0 3px, rgb(218 231 201 / 10%) 3px 4px);
}
.card-content { position: relative; display: flow-root; padding: var(--card-padding); }
.card-front { transform: rotateY(0deg); }
.card-back { display: none; overflow: hidden; transform: rotateY(180deg); }
.js .card-face { position: absolute; inset: 0; }
.js .card-back { display: block; }
.js .card-back[hidden] { display: none; }

/* Front */
.card-topline, .back-topline { display: flex; align-items: center; justify-content: space-between; gap: .875rem; }
.card-topline { padding-bottom: .875rem; border-bottom: 1px solid var(--line); }
.card-issuer { display: flex; align-items: center; gap: .625rem; font: .75rem/1.5 var(--mono); letter-spacing: 1px; color: #abb89e; }
.card-issuer strong { font-weight: 400; color: #d5decb; }
.code-mark { color: var(--lime); font-family: var(--display); font-size: 1.5rem; letter-spacing: -2px; }
.card-type { display: flex; align-items: center; flex-shrink: 0; gap: .5rem; font: .75rem/1 var(--mono); letter-spacing: .5px; color: #b1bba8; }
.card-type strong { display: grid; place-items: center; width: 1.75rem; height: 1.875rem; border: 1px solid #646f52; border-radius: 4px; color: var(--lime); font-size: .8125rem; font-weight: 400; }
.profile {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  grid-template-areas: 'photo identity' 'photo notes';
  align-items: start;
  column-gap: 1.5rem;
  row-gap: .75rem;
  padding: 1.125rem calc(var(--ribbon-width) - .75rem) 1.125rem 0;
}
.portrait { grid-area: photo; margin: 0; min-width: 0; position: relative; border: 1px solid #727e58; border-radius: .5rem; overflow: hidden; background: #3a4534; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 40%; filter: saturate(.65); }
.profile-details { grid-area: identity; min-width: 0; }
.profile-notes { grid-area: notes; min-width: 0; }
h1 { margin: 0 0 .375rem; font: 500 clamp(1.75rem, 4vw, 2.25rem)/1.12 var(--display); letter-spacing: -1.3px; overflow-wrap: anywhere; }
.name-period { color: var(--lime); }
.occupation { margin: 0; font-size: .875rem; color: #c3cbbc; line-height: 1.5; }
.quip { max-width: 35ch; margin: 0; font-size: 1rem; line-height: 1.5; letter-spacing: -.15px; color: #d4dccb; }
.quip em { font-style: normal; color: var(--lime); }
.card-bottomline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem);
  grid-template-areas: 'serial projects';
  align-items: center;
  gap: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--line);
}
.id-details { grid-area: serial; min-width: 0; }
.id-details > span { display: block; margin-top: .375rem; font: .75rem/1.4 var(--mono); letter-spacing: .5px; color: #a8b69b; overflow-wrap: anywhere; }
.barcode { height: 1.125rem; width: min(100%, 7rem); opacity: .6; background: repeating-linear-gradient(90deg, #b0bd9c 0 1px, transparent 1px 3px, #b0bd9c 3px 5px, transparent 5px 7px, #b0bd9c 7px 8px, transparent 8px 11px, #b0bd9c 11px 14px, transparent 14px 17px, #b0bd9c 17px 18px, transparent 18px 21px); }
/* The footer reserves the button's space when it detaches for launch. */
.projects-dock { grid-area: projects; justify-self: end; min-width: 0; width: 100%; }
.projects-pass {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: 1.125rem;
  background: var(--card-surface);
  box-shadow: 0 10px 28px #0003, inset 0 1px 0 rgb(229 239 210 / 7%);
  color: var(--lime);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.projects-pass.is-pinned { position: absolute; z-index: 3; }
.projects-pass-copy { display: grid; min-width: 0; }
.projects-pass-idle, .projects-pass-loading { grid-area: 1 / 1; align-self: center; transition: opacity 180ms ease; }
.projects-pass-idle { display: flex; align-items: baseline; gap: .375rem; white-space: nowrap; }
.projects-pass-kicker { color: #b9c7a7; font: .75rem/1.4 var(--mono); letter-spacing: .25px; }
.projects-pass-title { display: block; font: 600 1rem/1.4 var(--display); }
.projects-pass-idle .projects-pass-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color 200ms ease; }
.projects-pass-loading { opacity: 0; }
.projects-pass-loading .projects-pass-title { font-size: .875rem; }
.projects-pass-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; }
.projects-pass-arrow, .projects-pass-rocket { grid-area: 1 / 1; }
.projects-pass-arrow { font-size: 1.75rem; line-height: 1; transition: transform 200ms ease, opacity 180ms ease; }
.projects-pass-rocket { display: block; width: 2rem; height: 2rem; overflow: visible; opacity: 0; transform: rotate(30deg); transition: opacity 180ms ease; }
.rocket-flame { transform-box: fill-box; transform-origin: center top; }
.projects-pass-track { display: block; height: 2px; margin-top: .5rem; overflow: hidden; background: rgb(210 237 145 / 15%); }
.projects-pass-track > span { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.projects-pass:is(:hover, :focus-visible) { border-color: #a3bc72; box-shadow: 0 10px 30px #0004, inset 0 1px 0 rgb(229 239 210 / 12%), 0 0 22px rgb(210 237 145 / 16%); }
.projects-pass:not([aria-busy='true']):is(:hover, :focus-visible) .projects-pass-idle .projects-pass-title { text-decoration-color: currentColor; }
.projects-pass:not([aria-busy='true']):is(:hover, :focus-visible) .projects-pass-arrow { transform: translate(2px, -2px); }
.projects-pass[aria-busy='true'] { cursor: progress; }
.projects-pass[aria-busy='true'] .projects-pass-idle, .projects-pass[aria-busy='true'] .projects-pass-arrow { opacity: 0; }
.projects-pass[aria-busy='true'] .projects-pass-loading, .projects-pass[aria-busy='true'] .projects-pass-rocket { opacity: 1; }
.projects-pass[aria-busy='true'] .projects-pass-rocket { animation: rocket-rumble 300ms ease-in-out infinite alternate; }
.projects-pass[aria-busy='true'] .rocket-flame-outer { animation: rocket-exhaust 180ms ease-in-out infinite alternate; }
.projects-pass[aria-busy='true'] .rocket-flame-inner { animation: rocket-exhaust 120ms ease-in-out infinite alternate-reverse; }
.projects-pass[aria-busy='true'] .projects-pass-track > span { animation: launch-progress var(--launch-duration, 2200ms) cubic-bezier(.2, .7, .4, 1) forwards; }
.page.is-launching { overflow: clip; }
.is-launching .card-flight { transform-origin: 20% 100%; animation: card-departure 1100ms linear forwards; pointer-events: none; }
.stage-label, .card-caption { transition: opacity 250ms ease; }
.is-launching .stage-label, .is-launching .card-caption { opacity: 0; }
@keyframes card-departure {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  /* Tip over the shelf edge, then let gravity take over. */
  20% {
    transform: translate3d(3px, 6px, 0) rotate(8deg);
    animation-timing-function: cubic-bezier(.35, 0, .85, .45);
  }
  82% { opacity: 1; }
  100% {
    transform: translate3d(8vw, calc(100vh + 100%), 0) rotate(52deg);
    opacity: 0;
  }
}
@keyframes launch-progress { to { transform: scaleX(1); } }
@keyframes rocket-rumble {
  from { transform: translate(-.5px, .75px) rotate(29deg); }
  to { transform: translate(.5px, -.75px) rotate(31deg); }
}
@keyframes rocket-exhaust {
  from { transform: scale(.85, .72); opacity: .8; }
  to { transform: scale(1.08, 1.18); opacity: 1; }
}
@keyframes card-departure-reduced { to { opacity: 0; } }
.card-ribbons {
  position: absolute;
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
  display: grid;
  gap: .875rem;
  width: var(--ribbon-width);
}
.card-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--ribbon-height);
  padding: .75rem 1rem;
  border-radius: 5px 3px 0 5px;
  background: var(--amber);
  color: #292319;
  box-shadow: 0 5px 18px #0003;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms;
}
.card-ribbon::after { content: ''; position: absolute; top: 100%; right: 0; border-top: 10px solid #976d3c; border-right: 10px solid transparent; }
.card-ribbon:hover { background: #ffd19a; }
.contact-ribbon { background: var(--mint); color: #17372d; }
.contact-ribbon::after { border-top-color: #4f927d; }
.contact-ribbon:is(:hover, :focus-visible) { background: #b8ecd9; }
.card-ribbon svg { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ribbon-arrow { margin-left: .375rem; font-size: 1.375rem; line-height: 1; font-weight: 400; transition: transform 200ms ease; }
.card-ribbon:is(:hover, :focus-visible) .ribbon-arrow { transform: translate(2px, -2px); }
.card-caption { display: grid; text-align: center; color: #a2aa9b; font-size: .75rem; letter-spacing: .25px; margin: 1.375rem 0 0; line-height: 1.7; }
.caption-front, .caption-back { grid-area: 1 / 1; transition: opacity 250ms; }
.caption-back { opacity: 0; }
.card-stage:has(.is-flipped) .caption-front { opacity: 0; }
.card-stage:has(.is-flipped) .caption-back { opacity: 1; }

/* Login and contact forms */
.card-back { --form-accent: var(--lime); --form-error: #f4a69b; }
.contact-card { --form-accent: var(--mint); }
.back-topline { flex-wrap: wrap; gap: .5rem 1rem; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .875rem; text-decoration: none; color: #cbd4c1; }
.back-link > span { transition: transform 180ms; }
.back-link:hover { color: var(--lime); }
.back-link:hover > span { transform: translateX(-3px); }
.access-label { font: .75rem/1.5 var(--mono); letter-spacing: .75px; color: #adb89f; }
.access-label > span { color: var(--lime); margin-right: .5rem; }
.login-content { width: min(100%, 22.5rem); margin: 1rem auto 0; }
.submission-panel[hidden], .form-launch[hidden] { display: none; }
.submission-panel:not([hidden]) { animation: validation-reveal 200ms ease-out; }
.form-launch { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 18rem; padding: 2rem .5rem; text-align: center; }
.form-launch-message { max-width: 100%; margin: 0; color: var(--form-accent); font: .875rem/1.6 var(--mono); letter-spacing: .3px; overflow-wrap: anywhere; outline: none; }
.form-launch .form-rocket { width: 2.75rem; height: 2.75rem; opacity: 1; }
.form-launch[data-state='sending'] .form-rocket { animation: rocket-rumble 300ms ease-in-out infinite alternate; }
.form-launch[data-state='sending'] .rocket-flame-outer { animation: rocket-exhaust 180ms ease-in-out infinite alternate; }
.form-launch[data-state='sending'] .rocket-flame-inner { animation: rocket-exhaust 120ms ease-in-out infinite alternate-reverse; }
.form-launch:not([data-state='sending']) .loader-orbit { animation-play-state: paused; }
.form-launch:not([data-state='sending']) .loader-track { visibility: hidden; }
.form-launch:not([data-state='sending']) .loader-track > span { animation: none; }
.form-launch:not([data-state='sending']) .rocket-flame { opacity: 0; }
.form-launch:is([data-state='failure'], [data-state='error']) .form-launch-message { color: var(--form-error); }
.form-launch:is([data-state='failure'], [data-state='error']) .loader-orbit { border-color: rgb(244 166 155 / 35%); }
.form-launch[data-state='success'] .form-launch-message { color: var(--mint); }
.form-launch[data-state='success'] .loader-orbit { border-color: rgb(158 216 197 / 50%); }
h2 { font: 500 clamp(1.75rem, 4vw, 2.125rem)/1.2 var(--display); letter-spacing: -1.2px; margin: 0 0 .375rem; overflow-wrap: anywhere; }
h2 > span { color: var(--lime); }
.login-intro { margin: 0 0 1.125rem; color: #b8c2ad; font-size: .875rem; line-height: 1.6; }
#login-form { display: grid; gap: .875rem; }
.form-field { min-width: 0; align-self: start; }
.form-field label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .875rem; line-height: 1.4; color: #e1e7db; margin-bottom: .375rem; }
.form-field :is(input, textarea, select) { width: 100%; min-width: 0; min-height: 3rem; border: 1px solid #56604e; border-radius: 6px; padding: .75rem; color: var(--text); background: #181e19; font-size: 1rem; line-height: 1.5; transition: border-color 180ms; }
.form-field textarea { display: block; resize: vertical; min-height: 7.5rem; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #87917f; }
.form-field :is(input, textarea, select):hover { border-color: #8a9977; }
.form-field :is(input, textarea, select):focus { border-color: var(--lime); outline: none; }
.select-control { position: relative; }
.select-control select { display: block; appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select-control::after { content: ''; position: absolute; top: calc(50% - .375rem); right: 1.125rem; width: .5rem; height: .5rem; border-right: 1px solid var(--form-accent); border-bottom: 1px solid var(--form-accent); transform: rotate(45deg); pointer-events: none; }
.password-field { position: relative; }
.password-field input { padding-right: 3.25rem; }
.password-toggle { position: absolute; inset: 1px 1px 1px auto; display: grid; place-items: center; width: 2.875rem; min-height: 2.75rem; padding: .75rem; border: 0; border-radius: 5px; color: #aebda0; background: transparent; }
.password-toggle:hover { color: var(--lime); }
.eye-icon { width: 1.1875rem; height: 1.1875rem; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eye-slash { display: none; }
.password-toggle[aria-pressed='true'] .eye-slash { display: block; }
.sign-in { width: 100%; min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9375rem; border: 1px solid transparent; border-radius: 6px; color: #22281b; background: var(--lime); font-size: .875rem; font-weight: 650; transition: background 180ms, color 180ms, border-color 180ms, transform 180ms; }
.sign-in:not(:disabled):hover { background: #e1f9ac; transform: translateY(-1px); }
.sign-in:not(:disabled):active { transform: translateY(0); }
.sign-in > span { font-size: 1.25rem; line-height: 1; }
.form-status { font-size: .875rem; line-height: 1.5; color: #efd0a2; margin: 0; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.contact-form-content { width: min(100%, 30rem); margin: 1rem auto 0; }
.contact-card h2 > span { color: var(--mint); }
#contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.form-progress, .contact-method, .contact-description, .contact-submit, #contact-status { grid-column: 1 / -1; }
.contact-card .form-field :is(input, textarea, select):focus { border-color: var(--mint); }
.contact-card :is(a, button):focus-visible { outline-color: var(--mint); }
.contact-card .back-link:hover { color: var(--mint); }
.contact-submit { background: var(--mint); color: #17372d; }
.contact-submit:not(:disabled):hover { background: #b8ecd9; }
.sign-in:disabled { cursor: not-allowed; border-color: #444c42; color: #a0aa9b; background: #30372e; }
.sign-in:disabled > span { opacity: .35; }

/* A small preflight check: quiet until a field is visited or the form is submitted. */
.form-progress { --progress-rgb: 244 139 130; padding: .75rem .875rem; margin-bottom: .125rem; color: #b9cec1; border: 1px solid #40534a; border-radius: .625rem; background: rgb(158 216 197 / 4%); }
.form-progress[aria-valuenow='1'] { --progress-rgb: 241 164 100; }
.form-progress[aria-valuenow='2'] { --progress-rgb: 242 185 101; }
.form-progress[aria-valuenow='3'] { --progress-rgb: 240 207 107; }
.form-progress[aria-valuenow='4'] { --progress-rgb: 231 221 115; }
.form-progress[aria-valuenow='5'] { --progress-rgb: 213 224 128; }
.form-progress[aria-valuenow='6'] { --progress-rgb: 140 216 162; }
.form-progress-copy { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .375rem .75rem; color: inherit; font-size: .875rem; line-height: 1.5; }
#contact-progress-count { color: var(--mint); white-space: nowrap; font: .75rem/1.5 var(--mono); }
.form-progress-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .375rem; margin-top: .625rem; }
.form-progress-track > span { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background: rgb(var(--progress-rgb) / 18%); transition: background-color 450ms ease; }
.form-progress-track > span::after { content: ''; position: absolute; inset: 0; background: rgb(var(--progress-rgb)); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease, background-color 450ms ease; }
.form-progress-track > .is-filled::after { transform: scaleX(1); }
.form-progress.is-complete .form-progress-track { filter: drop-shadow(0 0 4px rgb(var(--progress-rgb) / 25%)); animation: progress-complete 700ms ease-out; }
@keyframes progress-complete { 0%, 100% { filter: drop-shadow(0 0 4px rgb(var(--progress-rgb) / 25%)); } 45% { filter: drop-shadow(0 0 7px rgb(var(--progress-rgb) / 50%)); } }
.field-state { display: inline-grid; place-items: center; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; font: 600 .75rem/1 var(--sans); opacity: 0; transform: scale(.65); transition: opacity 180ms ease, transform 250ms cubic-bezier(.2, .8, .3, 1.35); }
.form-field[data-state='valid'] .field-state { color: var(--form-accent); background: rgb(163 188 114 / 12%); opacity: 1; transform: scale(1); }
.form-field[data-state='valid'] .field-state::after { content: '✓'; }
.form-field[data-state='invalid'] .field-state { color: var(--form-error); background: rgb(244 166 155 / 12%); opacity: 1; transform: scale(1); }
.form-field[data-state='invalid'] .field-state::after { content: '!'; }
.form-field[data-state='valid'] :is(input, textarea, select) { border-color: #759568; }
.contact-card .form-field[data-state='valid'] :is(input, textarea, select) { border-color: #669d87; }
.form-field[data-state='valid'] :is(input, textarea, select):focus { border-color: var(--form-accent); }
.form-field[data-state='invalid'] :is(input, textarea, select), .form-field[data-state='invalid'] :is(input, textarea, select):focus { border-color: var(--form-error); background: #251f1d; }
.form-field[data-state='invalid'] label { color: #f7c8bf; }
.field-message { margin: .4375rem 0 0; padding-left: .625rem; border-left: 2px solid rgb(244 166 155 / 40%); font-size: .875rem; line-height: 1.5; color: var(--form-error); overflow-wrap: anywhere; }
.field-message:empty { display: none; }
.field-message:not(:empty) { animation: validation-reveal 200ms ease-out; }
.field-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin-top: .4375rem; font-size: .875rem; line-height: 1.5; color: #9fae9f; }
#project-description-count { margin-left: auto; white-space: nowrap; font: .75rem/1.75 var(--mono); font-variant-numeric: tabular-nums; }
.form-status:not(:empty) { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); align-items: start; gap: .625rem; padding: .875rem; border: 1px solid #66543e; border-radius: .625rem; background: rgb(239 184 119 / 5%); animation: validation-reveal 200ms ease-out; }
.form-status:not(:empty)::before { content: 'i'; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-top: .125rem; border: 1px solid currentColor; border-radius: 50%; font: 600 .75rem/1 var(--sans); }
.form-status[data-state='error'] { border-color: #775048; background: rgb(244 166 155 / 5%); color: #f7bdb2; }
.form-status[data-state='error']::before { content: '!'; }
.form-status[data-state='ready'] { border-color: #527061; background: rgb(158 216 197 / 5%); color: var(--form-accent); }
.form-status[data-state='ready']::before { content: '✓'; }
@keyframes validation-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.noscript-message { color: #b6c4a9; text-align: center; font-size: .875rem; }
.projects-coming-soon { width: min(100%, 40rem); text-align: center; }
.projects-coming-soon h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); }
.projects-coming-soon p { margin: 1rem 0 1.5rem; color: #c3cbbc; font-size: 1rem; line-height: 1.6; }

/* Loader: the ID remains readable when JavaScript is disabled. */
.page-loader { display: none; }
.js .page-loader { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--page); transition: opacity 500ms, visibility 500ms; }
.page-loader[hidden] { display: none; }
.js .page { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .7, .25, 1); }
.js.is-ready .page { opacity: 1; transform: translateY(0); }
.js.is-ready .page-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-emblem { position: relative; width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 35px; }
.loader-code { font: 500 25px/1 var(--display); color: var(--lime); letter-spacing: -2px; animation: code-breathe 1.4s ease-in-out infinite alternate; }
.loader-orbit { position: absolute; border: 1px solid; border-radius: 15px; }
.orbit-one { inset: 0; border-color: #b9d779 #b9d779 #b9d77920 #b9d77920; animation: orbit 2.4s linear infinite; }
.orbit-two { inset: -10px; border-radius: 20px; border-color: #b9d77912 #b9d77912 #b9d77950 #b9d77950; animation: orbit 4s linear infinite reverse; }
.loader-label { color: #b8c5a9; font: .75rem/1.5 var(--mono); letter-spacing: 2px; }
.loader-track { width: 140px; height: 2px; background: #303829; overflow: hidden; margin-top: 17px; }
.loader-track > span { display: block; width: 45%; height: 100%; background: var(--lime); animation: loading-track 1.1s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes code-breathe { from { opacity: .5; } to { opacity: 1; } }
@keyframes loading-track { from { transform: translateX(-110%); } to { transform: translateX(325%); } }

/* The mobile portrait fills the space beside the ribbons. */
@media (max-width: 36rem) {
  :root { --card-padding: 1.125rem; --ribbon-width: 10rem; }
  .page-header, .page-footer {
    padding-left: max(1.375rem, env(safe-area-inset-left));
    padding-right: max(1.375rem, env(safe-area-inset-right));
  }
  .page-header { padding-top: max(1.25rem, env(safe-area-inset-top)); padding-bottom: 1.25rem; }
  .site-logo { width: 8rem; }
  .page-edition { letter-spacing: 0; }
  .page-edition span { margin-left: .25rem; }
  .page-footer { letter-spacing: .25px; }
  .footer-code { display: none; }
  .main { padding-top: 1.5rem; padding-bottom: 2rem; }
  .stage-label { font-size: .75rem; letter-spacing: .4px; gap: .625rem; margin-bottom: 1.125rem; }
  .stage-label > span { flex-basis: .8125rem; }
  .card-face, .projects-pass { border-radius: 1rem; }
  .card-issuer { letter-spacing: .15px; gap: .5rem; }
  .card-type { gap: .375rem; }
  .profile {
    grid-template-columns: minmax(0, 1fr) calc(var(--ribbon-width) - var(--card-padding) - 11px);
    grid-template-areas: 'identity identity' 'photo .' 'notes notes';
    grid-template-rows: auto auto auto;
    gap: 1rem;
    padding: 1rem 0;
  }
  .profile-details { align-self: start; }
  .portrait { width: 100%; aspect-ratio: 5 / 6; min-height: calc(var(--ribbon-height) * 2 + .875rem); align-self: start; }
  .portrait img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  h1 { font-size: clamp(1.75rem, 7vw, 2.125rem); letter-spacing: -1px; }
  .quip { max-width: none; }
  .card-bottomline { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'projects'; }
  .id-details { display: none; }
  .projects-dock { max-width: 15.5rem; }
  .card-ribbon { padding-inline: .875rem; }
  .login-content { margin-top: 1rem; }
  #contact-form { grid-template-columns: minmax(0, 1fr); }
  .access-label { letter-spacing: 0; }
  .access-label > span { display: none; }
}
@media (max-width: 20rem) {
  .portrait { min-height: 10rem; }
}
@media (max-width: 22rem) {
  :root { --card-padding: 1rem; }
  .page-edition { display: none; }
  .main {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
  .stage-label { letter-spacing: 0; gap: .375rem; }
  .stage-label > span { display: none; }
  .card-topline { gap: .5rem; flex-wrap: wrap; }
  .card-type { margin-left: auto; }
  .profile { gap: .875rem; }
  .profile-notes { margin-top: 1rem; }
  .projects-pass { gap: .5rem; padding-inline: .625rem; }
  .projects-pass-idle { gap: .25rem; }
  .projects-pass-kicker { font-size: .6875rem; letter-spacing: 0; }
  .projects-pass-idle .projects-pass-title { font-size: .875rem; }
  .card-ribbon { padding-inline: .75rem; gap: .375rem; }
  .ribbon-arrow { margin-left: .125rem; }
}
@media (max-width: 17rem) {
  .projects-pass { gap: .375rem; padding-inline: .5rem; }
  .projects-pass-icon { flex-basis: 1.5rem; width: 1.5rem; }
  .projects-pass-rocket { width: 1.5rem; height: 1.5rem; }
  .profile { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'identity' 'photo' 'notes' 'ribbons'; grid-template-rows: auto; }
  .portrait { width: min(100%, 12rem); justify-self: center; }
  .profile-notes { margin-top: 0; }
  .card-ribbons { grid-area: ribbons; position: relative; top: auto; right: auto; transform: none; justify-self: end; width: min(100%, var(--ribbon-width)); margin-right: calc(-1 * var(--card-padding) - 11px); }
}
@media (max-height: 32rem) and (orientation: landscape) {
  .page-header { padding-top: max(.875rem, env(safe-area-inset-top)); padding-bottom: .875rem; }
  .main { padding-top: .875rem; padding-bottom: 1.5rem; }
  .stage-label { margin-bottom: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .page { transform: none; }
  .is-launching .card-flight { animation-name: card-departure-reduced; }
  .projects-pass[aria-busy='true'] .projects-pass-rocket,
  .projects-pass[aria-busy='true'] .rocket-flame { animation: none; }
}