/* Syster Club — shared brand styles (from the Syster Club Brand Bible) */
@font-face { font-family: "Noto Serif Display"; src: url("fonts/NotoSerifDisplay-Italic.ttf") format("truetype"); font-style: italic; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url("fonts/NotoSerifDisplay.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/Arimo-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Arimo"; src: url("fonts/Arimo-Bold.ttf") format("truetype"); font-weight: 700; }

:root {
  --purple: #665a84;
  --purple-deep: #4f4568;
  --cream: #fdfaf5;
  --page: #f7f3ed;
  --blush: #e4dbdb;
  --sand: #d2c8be;
  --line: #e2dbd2;
  --danger: #b4505f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--purple);
  font-family: "Arimo", system-ui, sans-serif;
  min-height: 100vh;
}

h1 {
  font-family: "Noto Serif Display", Georgia, serif;
  font-weight: 300; font-stretch: 62.5%; font-size: clamp(36px, 6vw, 56px);
  letter-spacing: 0; margin: 18px 0 6px; padding-left: 0;
}
.tagline { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; opacity: .75; margin: 0; padding-left: .28em; }

.field { display: flex; flex-direction: column; gap: 10px; }
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.label small { font-weight: 400; letter-spacing: .05em; text-transform: none; opacity: .7; font-size: 12px; text-align: right; }
.sublabel { font-size: 12px; letter-spacing: .08em; opacity: .7; margin: 4px 0 -2px; }
.hint { font-size: 12px; opacity: .7; margin: 0; line-height: 1.5; }

input[type=range] { width: 100%; accent-color: var(--purple); }
textarea:focus, input:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 2px;
}

button.primary {
  background: var(--purple); color: var(--cream); border: 0; border-radius: 2px;
  padding: 16px 20px; font-family: "Arimo", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase; cursor: pointer; transition: background .15s;
}
button.primary:hover { background: var(--purple-deep); }
button.primary:disabled { background: var(--sand); cursor: not-allowed; }
button.ghost, a.ghost {
  background: transparent; color: var(--purple); border: 1px solid var(--line); border-radius: 2px;
  padding: 11px 16px; font-family: "Arimo", sans-serif; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer; text-decoration: none; text-align: center;
}
button.ghost:hover, a.ghost:hover { border-color: var(--purple); background: #fff; }
button.ghost:disabled { opacity: .45; cursor: not-allowed; background: transparent; border-color: var(--line); }
button.ghost.danger:hover { border-color: var(--danger); color: var(--danger); }