/* orion-jones.com — shared design system.
   Warm paper ground, restrained type scale, clay accent.
   Informational first: everything here exists to make facts legible. */

:root{
  --paper:#faf9f5;
  --paper-2:#f2f0e9;
  --card:#ffffff;
  --ink:#141413;
  --ink-2:#6b6862;
  --ink-3:#95918a;
  --rule:#e4e0d5;
  --rule-2:#efece3;
  --accent:#b8552f;
  --accent-fill:#c15f3c;
  --accent-wash:#f6ebe4;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --w:820px;
  --r:10px;
  --sec:clamp(52px,7vw,78px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1a1917;
    --paper-2:#232220;
    --card:#232220;
    --ink:#f2efe6;
    --ink-2:#a8a398;
    --ink-3:#7e7a71;
    --rule:#34322d;
    --rule-2:#2b2a26;
    --accent:#e2916f;
    --accent-fill:#c96b45;
    --accent-wash:#2c241f;
  }
}

:root[data-theme="dark"]{
  --paper:#1a1917;
  --paper-2:#232220;
  --card:#232220;
  --ink:#f2efe6;
  --ink-2:#a8a398;
  --ink-3:#7e7a71;
  --rule:#34322d;
  --rule-2:#2b2a26;
  --accent:#e2916f;
  --accent-fill:#c96b45;
  --accent-wash:#2c241f;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga";
}
::selection{background:var(--accent-wash);color:var(--ink)}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
img{max-width:100%;display:block}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(30px,5vw,42px)}
h2{font-size:clamp(20px,2.6vw,24px)}
h3{font-size:17px}

/* small uppercase label — used for section markers and field names */
.label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.section{padding:var(--sec) 0;border-top:1px solid var(--rule)}
.section > .label{display:block;margin-bottom:14px}
.section-intro{color:var(--ink-2);max-width:58ch;margin-top:10px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1;
  padding:12px 20px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.btn-primary:hover{filter:brightness(.94)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-quiet:hover{background:var(--paper-2)}

/* key/value rows — the workhorse for factual content */
.rows{border-top:1px solid var(--rule-2)}
.row{
  display:grid;grid-template-columns:132px 1fr;gap:8px 20px;
  padding:13px 0;border-bottom:1px solid var(--rule-2);align-items:baseline;
}
.row > dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.row > dd{color:var(--ink)}
.row dd .note{display:block;color:var(--ink-2);font-size:14.5px;margin-top:3px}
@media(max-width:560px){
  .row{grid-template-columns:1fr;gap:4px}
  .row > dt{padding-top:0}
}

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:22px 24px;
}

.muted{color:var(--ink-2)}
.small{font-size:14.5px}

/* theme toggle */
.theme-toggle{
  background:transparent;border:1px solid var(--rule);color:var(--ink-2);
  border-radius:999px;padding:6px 12px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.theme-toggle:hover{border-color:var(--ink-3);color:var(--ink)}

/* Swapping the palette mid-transition blends light text over dark fills and
   goes briefly unreadable. Kill transitions for the one frame it takes. */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{
  transition:none !important
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}