/*
 * owrang.io — the studio's site, moved off WordPress.com as it is (6.4.b1,
 * R.73, R.116). The look is the WordPress theme's ("System Terra" 1.1.0:
 * obsidian glass, aged parchment text, gold accents, Cinzel and Inter),
 * carried over rule for rule; the colours are the app's own tokens
 * (src/lib/theme.ts). The fonts are served from this site, never from another
 * company's (the privacy policy says the site loads nothing from others).
 */

@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --obsidian: #0B0A12;
  --raised: #13111E;
  --border: #26233A;
  --parchment: #EDE7D8;
  --parchment-dim: #A39E8F;
  --gold: #D8B45A;
  --gold-bright: #F2D389;
  --danger: #FF5C7A;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Cinzel", "Times New Roman", serif;
  --content: 680px;
  --wide: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--obsidian);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
::selection { background: var(--gold); color: var(--obsidian); }

a { color: var(--gold); }
a:hover { color: var(--gold-bright); }

h1, h2, h3, h4 {
  color: var(--parchment);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
p, ul, blockquote, form, section { margin: 0; }

/* ------------------------------------------------------------ the header */
.site-header { border-bottom: 1px solid var(--border); padding: 22px 24px; }
.site-header .bar {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-title {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-title a { color: var(--parchment); text-decoration: none; }
.site-title a:hover { color: var(--gold); }
.site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; }
.site-nav a { color: var(--parchment); text-decoration: none; }
.site-nav a:hover { color: var(--gold); }

/* ------------------------------------------------------------ the page */
main { padding: 56px 24px 96px; }
main.home { padding-top: 80px; }
/* WordPress's "constrained" layout: each child at the content width, a wide one at the wide width. */
.flow > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.flow > .wide { max-width: var(--wide); }
.flow > * + * { margin-top: 24px; }
.flow ul { padding-left: 1.4em; }
.flow li + li { margin-top: 4px; }

.center { text-align: center; }
.dim { color: var(--parchment-dim); }
.xs { font-size: 0.8125rem; }
.sm { font-size: 0.9375rem; }
.lg { font-size: 1.375rem; }
.gold { color: var(--gold); }
.gold-bright { color: var(--gold-bright); }
.display { font-family: var(--display); }
.eyebrow { letter-spacing: 0.2em; text-transform: uppercase; }
.stats-line { letter-spacing: 0.14em; text-transform: uppercase; }
.huge { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: 0.06em; text-transform: uppercase; }
.label-heading { font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.spacer { height: 72px; }
.flow > .spacer { margin-top: 0; }

.buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.button, button.button {
  display: inline-block;
  background-color: var(--gold);
  color: var(--obsidian);
  border: 0;
  border-radius: 6px;
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: inherit;
  padding: 12px 28px;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, button.button:hover { background-color: var(--gold-bright); color: var(--obsidian); }

.card { background: var(--raised); border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; }
.card.roomy { padding: 48px 32px; }
.card > * + * { margin-top: 16px; }

.columns { display: flex; gap: 24px; }
.columns > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) {
  .columns { flex-direction: column; }
}

blockquote {
  border-left: 3px solid var(--gold);
  color: var(--parchment);
  font-size: 1.375rem;
  padding: 0 0 0 1em;
}
blockquote.center { border-left: 0; padding: 0; }
blockquote p + cite { display: block; margin-top: 12px; }
cite { color: var(--parchment-dim); font-style: normal; font-size: 0.9375rem; }

/* ------------------------------------------------------------ the beta form */
.beta-form { display: grid; gap: 20px; }
.beta-form label, .beta-form legend { color: var(--parchment); font-weight: 600; display: block; }
.beta-form .req { color: var(--parchment-dim); font-weight: 400; margin-left: 4px; }
.beta-form input[type="text"], .beta-form input[type="email"], .beta-form textarea {
  background: var(--obsidian);
  border: 1px solid var(--border);
  color: var(--parchment);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: 16px;
  margin-top: 6px;
}
.beta-form textarea { min-height: 140px; resize: vertical; }
.beta-form input:focus, .beta-form textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold); }
.beta-form fieldset { border: 0; padding: 0; margin: 0; }
.beta-form .choice { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 400; }
.beta-form input[type="radio"], .beta-form input[type="checkbox"] { accent-color: var(--gold); width: auto; margin: 0; }
.beta-form .note { color: var(--parchment-dim); font-size: 0.8125rem; margin-top: 6px; }
.beta-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ the footer */
.site-footer { border-top: 1px solid var(--border); padding: 48px 24px 56px; text-align: center; }
.site-footer > * + * { margin-top: 16px; }
.site-footer .mark { color: var(--parchment-dim); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer .links { font-size: 0.9375rem; }