/* Story 219: /start, the sign-up front door (docs/design/signup.dc.html).
   The landing page's public palette and fonts, phone first: one column,
   at most 440px wide, centred. Every tap target is at least 44px tall and
   every control shows a visible focus ring. Holds at 320px with no
   horizontal scroll. */

:root {
  --start-font-display: 'Cormorant Garamond', Georgia, serif;
  --start-font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --start-bg: #FAF6F0;
  --start-text: #211C17;
  --start-text-lede: #4A423A;
  --start-text-secondary: #6B6055;
  --start-rule: #E5DDD2;
  --start-rule-strong: #C9A28C;
  --start-card: #FFFFFF;
  --start-accent: #9A5B3D;
  --start-accent-hover: #7C4730;
  --start-accent-deep: #4A2A1B;
  --start-on-accent: #FCF9F5;
  --start-error: #A3271F;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.start-page {
  margin: 0;
  min-height: 100vh;
  background: var(--start-bg);
  color: var(--start-text);
  font-family: var(--start-font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.start-page a {
  color: var(--start-accent-hover);
}

.start-page a:hover {
  color: var(--start-accent-deep);
}

.start-page :focus-visible {
  outline: 3px solid var(--start-rule-strong);
  outline-offset: 2px;
}

.start-top {
  padding: 1.75rem 1.25rem 0.5rem;
  text-align: center;
}

.start-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--start-font-display);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.start-page .start-wordmark,
.start-page .start-wordmark:hover {
  color: var(--start-text);
}

.start-main {
  max-width: 27.5rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.start-heading {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: center;
}

.start-h1 {
  margin: 0;
  font-family: var(--start-font-display);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 1.02;
  overflow-wrap: break-word;
}

.start-sub {
  margin: 0;
  color: var(--start-text-lede);
  font-size: 1.0625rem;
}

.start-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.start-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.start-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.start-label__optional {
  font-weight: 400;
  color: var(--start-text-secondary);
}

/* 16px text so iOS Safari does not zoom the page on focus. */
.start-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 3.5rem;
  padding: 0 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--start-rule-strong);
  background: var(--start-card);
  color: var(--start-text);
  font-family: inherit;
  font-size: 1rem;
}

.start-input:focus {
  border-color: var(--start-accent);
}

.start-hint {
  font-size: 0.875rem;
  color: var(--start-text-secondary);
}

.start-btn {
  display: block;
  width: 100%;
  min-height: 3.625rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--start-accent);
  color: var(--start-on-accent);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}

.start-btn:hover {
  background: var(--start-accent-hover);
}

/* Story 235: the required "I agree" box. The whole row is the label, so
   the tap target is the row (at least 44px tall) and the text wraps beside
   the box. Once she has tried to submit unticked, :user-invalid turns the
   box's ring and the words the error colour; the browser's own message
   says what to do. */
.start-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6875rem 0;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--start-text-lede);
  cursor: pointer;
}

.start-agree__box {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--start-accent);
  cursor: pointer;
}

.start-agree__text {
  min-width: 0;
  overflow-wrap: break-word;
}

.start-agree__box:user-invalid {
  outline: 2px solid var(--start-error);
  outline-offset: 2px;
}

.start-agree__box:user-invalid:focus-visible {
  outline-width: 3px;
}

.start-agree__box:user-invalid + .start-agree__text {
  color: var(--start-error);
}

/* The two legal links, when they show, are inline in the label: padded
   up to a 44px tall target without changing the line's look. */
.start-agree a {
  display: inline-block;
  padding: 0.75rem 0.125rem;
  margin: -0.75rem 0;
}

.start-foot {
  border-top: 1px solid var(--start-rule);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: center;
}

.start-foot p {
  margin: 0;
}

.start-foot__signin {
  color: var(--start-text-lede);
}

.start-foot__signin a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font-weight: 600;
}

.start-foot__note {
  font-size: 0.875rem;
  color: var(--start-text-secondary);
}

@media (max-width: 22.5rem) {
  .start-h1 {
    font-size: 2.375rem;
  }
}

/* Sign in (/Account/RequestLink, restyled 30 Oct 2026): the confirmation
   and rate-limit messages, in the same voice as the rest of the page. */
.start-notice {
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--start-rule-strong);
  border-radius: 0.875rem;
  background: var(--start-card);
  color: var(--start-text-lede);
  font-size: 1rem;
}