/* studio.rycolston.com — phone-native reading surface. Design system:
   Fraunces + DM Sans, olive/cream/ink, warm shadows, pills, no dark mode. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=DM+Sans:opsz,wght@9..40,100..1000&display=swap');

:root {
  --olive: #3f4a28;
  --olive-soft: #a8b186;
  --cream: #faf6ef;
  --ink: #1b1624;
  --muted: #7d7668;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, sans-serif;
  padding: 20px 16px 80px;
  max-width: 640px;
}
h1 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 34px; margin: 8px 0 4px; color: var(--olive); }
h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 34px 0 10px; }
.how { font-size: 15px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--olive); text-decoration: none; margin-bottom: 4px; }

.mode {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--olive); color: var(--cream);
  border-radius: 999px; padding: 22px 30px; margin: 14px 0;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(63, 74, 40, .25);
}
.mode span { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; }
.mode small { font-size: 13px; opacity: .85; }

.pitch {
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 14px;
  margin: 12px 0;
  box-shadow: 0 6px 18px rgba(63, 74, 40, .10);
}
.pitch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.num {
  font-size: 13px; font-weight: 700; color: var(--cream);
  background: var(--olive); border-radius: 999px;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pill {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--olive); background: rgba(168, 177, 134, .25);
  border-radius: 999px; padding: 3px 10px;
}
.badge.blocked {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #7a2e2e; background: #f3ddda; border-radius: 999px; padding: 3px 10px;
}
.hook {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 22px; line-height: 1.35; margin: 0 0 8px;
}
.title { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--olive); }
.meta, .note { font-size: 13px; color: var(--muted); margin: 2px 0; line-height: 1.4; }