/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * macrostructure: Marquee Hero + application split · tone: direct, composed
 * theme: studied-DNA (source: https://emporia.co/) · studied: yes · DNA-source: own brand
 * paper: near-black · accent: yellow/orange · display + body: Inter
 */
html:has(body.emporia), body.emporia { overflow-x: clip; }
.emporia {
  --bg: var(--color-background); --bg2: var(--color-raised);
  --card: var(--color-surface); --line: var(--color-line);
  --txt: var(--color-foreground); --mut: var(--color-muted);
  --acc: var(--color-yellow); --acc-d: var(--color-yellow); --acc2: var(--color-yellow);
  background: var(--color-background); color: var(--color-foreground);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.emporia .wrap { max-width: 860px; padding: var(--space-3xl) var(--space-xl) var(--space-3xl); }
.emporia.landing .wrap { max-width: 1200px; padding-top: 0; }
.site-header { border-bottom: var(--rule-hairline) solid var(--color-line); }
.header-inner { max-width: 1200px; min-height: 76px; margin: auto; padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.emporia-wordmark { color: var(--color-foreground); font-size: 24px; font-weight: 800; letter-spacing: -1px; text-decoration: none; }
.header-right { display: flex; align-items: center; gap: var(--space-2xl); }
.about-emporia { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; }
.emporia .language-switch { margin: 0; gap: var(--space-sm); }
.emporia .language-switch label { color: var(--color-muted); font-size: var(--text-xs); }
.emporia .language-switch select { color: var(--color-foreground); background: var(--color-surface); border: var(--rule-hairline) solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.emporia h1 { font-family: var(--font-display); font-weight: 700; color: var(--color-foreground); letter-spacing: -1.3px; font-size: 36px; line-height: 1.15; }
.emporia h2 { color: var(--color-foreground); font-weight: 600; }
.emporia h3 { color: var(--color-foreground); }
.emporia a { text-underline-offset: 4px; }
.emporia a:hover { color: var(--color-foreground); }
.emporia .btn { background: var(--color-yellow); color: var(--color-background); border-radius: var(--radius-pill); padding: var(--space-lg) var(--space-xl); font-size: var(--text-base); font-weight: 600; box-shadow: none; line-height: 1.3; transition: opacity var(--dur-fast) var(--ease-out); }
.emporia .btn:hover { color: var(--color-background); opacity: .88; filter: none; }
.emporia .btn:active { opacity: .72; }
.emporia .btn:disabled { opacity: .5; cursor: wait; }
.emporia :is(a,button,input,textarea,select):focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; box-shadow: none; }
.emporia .btn.ghost { background: var(--color-raised); color: var(--color-foreground); border-color: var(--color-line); }
.emporia .btn.wa, .emporia .btn.green { background: var(--color-yellow); color: var(--color-background); box-shadow: none; }
.emporia .btn.sm { font-size: var(--text-sm); padding: var(--space-md) var(--space-lg); }
.emporia .card { border: var(--rule-hairline) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: none; }
.emporia .badge { background: var(--color-highlight); color: var(--color-yellow); border-color: var(--color-highlight-line); margin-bottom: var(--space-lg); }
.emporia .note,.emporia .good { background: var(--color-highlight); border-color: var(--color-highlight-line); color: var(--color-foreground); }
.emporia .good strong { color: var(--color-yellow); }
.emporia .vo { background: var(--color-surface); border-left-color: var(--color-yellow); }
.emporia code { background: var(--color-raised); }
.emporia .reference-video { background: var(--color-surface); }
.emporia input,.emporia textarea { color: var(--color-foreground); background: var(--color-background); border: var(--rule-hairline) solid var(--color-line-strong); border-radius: var(--radius-sm); padding: var(--space-md); font-size: var(--text-base); }
.emporia input::placeholder,.emporia textarea::placeholder { color: var(--color-muted); }
.emporia input:hover,.emporia textarea:hover { border-color: var(--color-muted); }
.emporia [aria-invalid=true] { border-color: var(--color-error); }
.emporia label { color: var(--color-foreground); font-size: var(--text-sm); font-weight: 500; margin-top: var(--space-xl); }
.project-brand { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.project-brand img { height: auto; width: 110px; background: var(--color-foreground); border-radius: var(--radius-sm); padding: var(--space-sm); }
.landing-hero { text-align: center; padding: var(--space-4xl) 0 var(--space-3xl); }
.test-label { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-yellow); font-size: var(--text-sm); margin: 0 0 var(--space-xl); }
.test-label span { width: 6px; height: 6px; background: var(--color-yellow); border-radius: var(--radius-pill); }
.emporia .landing-hero h1 { font-size: var(--text-display); letter-spacing: -.055em; line-height: 1.07; margin: 0; }
.landing-hero h1 span { background: linear-gradient(105deg,var(--color-yellow),var(--color-orange)); color: transparent; background-clip: text; }
.hero-description { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.7; max-width: 650px; margin: var(--space-xl) auto var(--space-sm); }
.landing-hero .btn { display: inline-flex; align-items: center; gap: var(--space-2xl); }
.hero-disclosure { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-lg) 0 0; }
.test-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: var(--rule-hairline) solid var(--color-line); padding: var(--space-xl) 0; margin: 0; }
.test-facts > div { padding: var(--space-sm) var(--space-xl); border-right: var(--rule-hairline) solid var(--color-line); }
.test-facts > div:first-child { padding-left: 0; }
.test-facts > div:last-child { border-right: 0; }
.test-facts dt { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.test-facts dd { margin: 0; color: var(--color-foreground); font-size: var(--text-heading); font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.test-facts dd span { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; margin-top: var(--space-sm); }
.test-facts > div:last-child dd span { display: inline; font-size: var(--text-lead); }
.application-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-4xl); padding-top: var(--space-4xl); align-items: start; scroll-margin-top: var(--space-xl); }
.emporia .application-layout h2 { font-size: var(--text-heading); font-weight: 600; letter-spacing: -.8px; border: 0; margin: 0 0 var(--space-md); padding: 0; }
.section-intro { color: var(--color-muted); margin: 0 0 var(--space-2xl); }
.brief-item { border-top: var(--rule-hairline) solid var(--color-line); padding: var(--space-xl) 0; }
.emporia .brief-item h3 { margin: 0 0 var(--space-sm); font-size: var(--text-body); font-weight: 600; }
.brief-item p { margin: 0; color: var(--color-muted); }
.time-explainer { border-left: 2px solid var(--color-yellow); padding: var(--space-xs) 0 var(--space-xs) var(--space-xl); margin-top: var(--space-xl); }
.emporia .time-explainer h3 { margin: 0 0 var(--space-sm); font-size: var(--text-base); }
.time-explainer p { color: var(--color-muted); margin: 0; font-size: var(--text-sm); }
.contact-line { font-size: var(--text-sm); margin-top: var(--space-2xl); color: var(--color-muted); }
.contact-line a { display: inline-block; margin-left: var(--space-sm); }
.application-panel { background: var(--color-surface); border: var(--rule-hairline) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-2xl); }
.application-panel > .mut { margin: 0 0 var(--space-sm); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-pair > div { min-width: 0; }
.optional { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.emporia .application-panel textarea { min-height: 96px; }
.field-help,.start-help { font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-sm) 0 0; line-height: 1.6; }
.emporia .acknowledgement { display: flex; align-items: flex-start; gap: var(--space-md); color: var(--color-muted); line-height: 1.65; }
.emporia .acknowledgement input { width: 18px; height: 18px; flex: 0 0 18px; margin: var(--space-xs) 0 0; accent-color: var(--color-yellow); }
.emporia .start-test { display: flex; width: 100%; justify-content: space-between; align-items: center; text-align: left; margin-top: var(--space-xl); }
.start-help { text-align: center; margin-top: var(--space-lg); }
.field-error { color: var(--color-error); font-size: var(--text-sm); margin: var(--space-sm) 0 0; }
.form-error { color: var(--color-error); border-left: 2px solid var(--color-error); padding-left: var(--space-md); margin-top: var(--space-xl); }
.save-for-later { max-width: 720px; margin: var(--space-4xl) auto 0; }
.save-for-later .card { background: transparent; }
.emporia .share input { min-width: 0; flex-basis: 100%; }
.emporia .share { gap: var(--space-md); }
.emporia footer { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .application-layout { gap: var(--space-2xl); }
  .application-panel { padding: var(--space-xl); }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .test-facts dd { font-size: 24px; }
}
@media (max-width: 680px) {
  .header-inner { min-height: 68px; padding-inline: var(--space-xl); }
  .about-emporia,.emporia .language-switch label { display: none; }
  .emporia-wordmark { font-size: 21px; }
  .emporia .wrap { padding-inline: var(--space-xl); }
  .landing-hero { padding-top: var(--space-3xl); }
  .hero-description { font-size: var(--text-body); }
  .test-facts { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); }
  .test-facts > div { padding: 0 var(--space-lg); }
  .test-facts > div:nth-child(odd) { padding-left: 0; }
  .test-facts > div:nth-child(even) { border-right: 0; }
  .application-layout { grid-template-columns: 1fr; gap: var(--space-3xl); padding-top: var(--space-3xl); }
  .form-pair { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .emporia .application-panel { padding: var(--space-xl); }
  .emporia .timer { font-size: 28px; }
  .save-for-later { margin-top: var(--space-3xl); }
}
@media (max-width: 380px) {
  .emporia .wrap,.header-inner { padding-inline: var(--space-lg); }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .emporia .landing-hero h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .emporia *, .emporia *::before, .emporia *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}