:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, sans-serif;
  --ink-canvas: #f7f4ed;
  --ink-text: #182231;
  --ink-muted: #526173;
  --ink-panel: rgba(255, 255, 255, .72);
  --ink-panel-hover: #eef2f7;
  --ink-border: #315d54;
  --ink-subtle-border: #b8c8c7;
  --ink-focus: #2563eb;
}

:root[data-ink-skin="black"] { color-scheme: dark; --ink-canvas: #071216; --ink-text: #edf6f3; --ink-muted: #b8c9c8; --ink-panel: #122329; --ink-panel-hover: #1d353b; --ink-border: #c5ddd8; --ink-subtle-border: #5d7978; --ink-focus: #8fc8ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink-canvas); color: var(--ink-text); }
#follow-first-contact { width: min(100%, 52rem); margin: 0 auto; padding: clamp(1rem, 3vw, 2.25rem) clamp(1.1rem, 5vw, 3rem) clamp(1.25rem, 3vw, 2.25rem); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ink-subtle-border); padding-bottom: .8rem; }
.eyebrow { margin: 0; color: var(--ink-muted); font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: clamp(1.35rem, 4vw, 2.5rem) 0 1.1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
#story p { max-width: 43rem; margin: 0 0 .85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.45; }
#story p + p { margin-top: 1.15rem; }
#story .ink-eyebrow { margin: 0 0 .55rem; color: var(--ink-muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
#story .ink-heading { margin: 0 0 1rem; color: var(--ink-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.65rem, 4vw, 2.7rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
#story .ink-label { margin: 1rem 0 .25rem; color: var(--ink-muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
#story .ink-label + p { margin-top: 0; }
#story[data-screen="opening"] p { max-width: 35rem; }
#story button, .skin-change { display: block; width: 100%; margin: .6rem 0 0; border: 1px solid var(--ink-border); border-radius: .35rem; padding: .82rem .9rem; background: var(--ink-panel); color: inherit; font: inherit; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
#story button:hover, .skin-change:hover { background: var(--ink-panel-hover); }
#story button:focus-visible, .skin-change:focus-visible { outline: 3px solid var(--ink-focus); outline-offset: 3px; }
.skin-change { width: auto; margin: 0; border-color: var(--ink-subtle-border); padding: .4rem .6rem; color: var(--ink-muted); font-size: .72rem; font-weight: 500; }
@media (min-width: 42rem) { #story[data-screen="opening"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-items: stretch; } #story[data-screen="opening"] p { grid-column: 1 / -1; } #story[data-screen="opening"] button { width: 100%; margin: .25rem 0 0; } }
@media (forced-colors: active) { #story button, .skin-change { border-color: ButtonText; background: Canvas; color: CanvasText; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }