/* ==========================================================================
   Solheure — base
   Reset, page-level typography, the single-column layout shell, and the
   accessibility defaults (focus-visible, reduced-motion) that apply
   everywhere, before any component-specific styling.
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:0 0 64px 0;
}

h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;}

label{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-dim);
  font-family:var(--font-mono);
}

input, select, textarea{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-size:var(--text-base);
  font-family:var(--font-body);
  outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold);}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:var(--space-8) var(--space-5) 0;
}

.site-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.brand{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--text-xl);
  letter-spacing:-0.01em;
}
.brand span{color:var(--gold);}
.tagline{
  font-size:var(--text-sm);
  color:var(--text-dim);
  font-family:var(--font-mono);
}

.section-heading{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:500;
  margin:0 0 var(--space-4) 0;
}

/* Visible, robust focus ring on every interactive element — the app relies
   on several custom-styled native controls (pills, toggle, chips), so this
   has to work uniformly across real buttons, links and native inputs. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Utility for content that should exist for screen readers only */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}