/* nacrelearning.com. One screen, plain words (Frank, 2026-10-19: Instinct's
   page as the model). Colours from docs/brand.md: Pearl morning ink on a
   near-white, Deep sea in dark mode. Type: Fraunces for what people read,
   Atkinson Hyperlegible Next for small print. */
:root {
  --bg: #F8F6FA;
  --ink: #141829;
  --soft: #4A5066;
  --quiet: #6A6F82;
  --rule: rgba(20, 24, 41, 0.22);
  --mark: rgba(14, 116, 128, 0.16);
  --accent: #0E7480;
  --field: rgba(20, 24, 41, 0.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0E1C; --ink: #EEF0F6; --soft: #C3C7D6; --quiet: #9AA0B4;
    --rule: rgba(238, 240, 246, 0.28); --mark: rgba(23, 128, 138, 0.38); --accent: #5CC3CC;
    --field: rgba(238, 240, 246, 0.07); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0E1C; --ink: #EEF0F6; --soft: #C3C7D6; --quiet: #9AA0B4;
  --rule: rgba(238, 240, 246, 0.28); --mark: rgba(23, 128, 138, 0.38); --accent: #5CC3CC;
  --field: rgba(238, 240, 246, 0.07); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(28px, 6vh, 56px) 28px;
  padding-left: max(clamp(20px, 5vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 5vw, 48px), env(safe-area-inset-right, 0px));
}
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mark { display: block; width: clamp(52px, 7vw, 68px); height: auto; }
.mark svg { display: block; width: 100%; height: auto; }
.mark .pearl { transform-origin: 50% 50%; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .mark .pearl { animation: none; } }

.corner {
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  font-size: 15px; color: var(--soft); background: none; border: 0; padding: 10px 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px;
}
.corner:hover { color: var(--ink); }

main { flex: 1; display: flex; align-items: center; padding-block: clamp(28px, 7vh, 72px); }
.copy { max-width: 34em; display: flex; flex-direction: column; gap: 1.05em; font-size: clamp(20px, 1.15vw + 13px, 28px); line-height: 1.4; }
.copy p { margin: 0; text-wrap: pretty; }
.copy .lead { font-weight: 450; }
.copy .plain { font-weight: 330; }

/* The examples: tap one to see the question Nacre would ask. */
.ex {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.ex:hover, .ex[aria-pressed="true"] { text-decoration-color: var(--ink); }
.asks { min-height: 2.8em; color: var(--soft); font-style: italic; font-weight: 330; transition: opacity .35s ease; }
.asks[data-empty="true"] { opacity: 0; }
.asks .who { font-style: normal; font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 0.6em; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .25em; }

/* The waitlist: one line, like "Text Instinct >". */
form.join { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.9em; margin: 0; }
form.join input[type="email"] {
  font: inherit; font-weight: 330; color: var(--ink); background: var(--field);
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 6px 6px 0 0;
  padding: 0.12em 0.4em; width: min(13em, 100%); min-width: 0;
}
form.join input::placeholder { color: var(--quiet); }
form.join input:focus { outline: none; border-bottom-color: var(--accent); }
.go {
  font: inherit; font-weight: 450; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap;
}
.go span { background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); padding: 0 0.06em; }
.go svg { width: 0.62em; height: 0.62em; transition: transform .2s ease; }
.go:hover svg { transform: translateX(3px); }
.go[disabled] { opacity: .55; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 15px; color: var(--quiet); min-height: 1.4em; margin: 0; }
.note[data-tone="error"] { color: #9A5B00; }
:root[data-theme="dark"] .note[data-tone="error"] { color: #F0B35A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note[data-tone="error"] { color: #F0B35A; } }
.done { font-weight: 450; }

footer {
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 14px; color: var(--soft);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Privacy and terms: a quiet reading page. */
.doc main { display: block; }
.doc article { max-width: 40em; font-size: 18px; line-height: 1.6; font-weight: 340; }
.doc h1 { font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.doc h2 { font-weight: 450; font-size: 22px; margin: 40px 0 8px; text-wrap: balance; }
.doc .when { font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 14px; color: var(--quiet); margin: 0 0 28px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 16px; }
.doc .wide { overflow-x: auto; margin: 16px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.doc th { font-weight: 450; }
.doc a { color: var(--accent); text-underline-offset: 3px; }

/* Phones: everything on one screen. */
@media (max-width: 520px) {
  .page { padding-block: 20px 20px; }
  .mark { width: 46px; }
  main { padding-block: 20px; }
  .copy { font-size: 19px; gap: 0.8em; line-height: 1.38; }
  .asks { min-height: 2.6em; }
  .note { font-size: 14px; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .copy { font-size: 17.5px; }
}