@font-face {
  font-family:Alegreya;
  src:url('fonts/Alegreya-Variable.woff2') format('woff2');
  font-weight:400 900;
  font-display:swap}

@font-face {
  font-family:'Alegreya Sans';
  src:url('fonts/AlegreyaSans-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap}

@font-face {
  font-family:'Alegreya Sans';
  src:url('fonts/AlegreyaSans-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap}

@font-face {
  font-family:'Alegreya SC';
  src:url('fonts/AlegreyaSC-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap}

:root {
  color-scheme:dark;
  --night:#17110e;
  --pool:#2b1e16;
  --bone:#f1e3cc;
  --muted:#c0ad95;
  --brass:#b5845a;
  --light:#ffe4b8;
  --paper:#f4e9d3;
  --ink:#3b2a1a;
  --edge:#554031}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:1.5rem}
body {
  margin:0;
  background:var(--night);
  color:var(--bone);
  font:400 1.2rem/1.55 'Alegreya Sans',sans-serif}
a {
  color:inherit;
  text-underline-offset:.22em}
a:hover {
  color:var(--light)}
button,input {
  font:inherit}
button,a,input,summary {
  touch-action:manipulation}
:focus-visible {
  outline:3px solid #f4a961;
  outline-offset:5px}
img {
  max-width:100%;
  height:auto;
  display:block}
h1,h2,h3 {
  font-family:Alegreya,Georgia,serif;
  line-height:1.08;
  font-weight:800;
  text-wrap:balance}
h1 {
  font-size:clamp(3.2rem,6vw,5.8rem);
  letter-spacing:-.025em;
  margin:0 0 1.4rem}
h2 {
  font-size:clamp(2.4rem,4vw,3.6rem);
  margin:0 0 1.3rem}
h3 {
  font-size:1.8rem;
  margin:0 0 .8rem}
p {
  margin:0 0 1.2rem}
ul,ol {
  padding-left:1.4rem}
li {
  margin:.6rem 0}
figure {
  margin:0}
.wrap {
  width:min(1160px,calc(100% - 3rem));
  margin-inline:auto}
.skip {
  position:absolute;
  top:-6rem;
  left:1rem;
  padding:1rem;
  background:var(--paper);
  color:var(--ink);
  z-index:10}
.skip:focus {
  top:1rem}
.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:100px;
  border-bottom:1px solid var(--edge)}
.brand {
  font:800 2rem/1 Alegreya,serif;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.65rem}
.brand svg {
  width:27px;
  height:34px;
  color:#eccda4}
.top nav {
  display:flex;
  align-items:center;
  gap:1.8rem;
  font-size:1.05rem}
.top nav a {
  text-decoration:none;
  padding:.7rem 0}
.top nav a:hover {
  text-decoration:underline}
.top nav .nav-cta {
  border:1px solid var(--brass);
  border-radius:8px;
  padding:.6rem 1rem}
.label {
  font:500 1.03rem/1.4 'Alegreya SC',serif;
  letter-spacing:.045em;
  color:var(--muted);
  margin-bottom:1rem}
.hero {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:5rem;
  align-items:center;
  padding-block:4rem 3rem}
.hero-copy {
  padding-bottom:2rem}
.hero .intro {
  font-size:1.45rem;
  line-height:1.45;
  max-width:29rem;
  color:#ded0bd}
.actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin:2rem 0 1.1rem}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:52px;
  padding:.75rem 1.65rem;
  border-radius:12px;
  border:1px solid #eccda4;
  background:linear-gradient(#ffe4b8,#eab06f);
  box-shadow:0 4px 0 #6c452b;
  color:#352313;
  font-weight:700;
  text-decoration:none;
  cursor:pointer}
.button:hover {
  background:#ffe4b8;
  color:#352313}
.button:active {
  transform:translateY(2px);
  box-shadow:0 2px 0 #6c452b}
.button:disabled {
  cursor:not-allowed;
  filter:saturate(.35);
  box-shadow:none}
.fine {
  font-size:1rem;
  color:var(--muted)}
.hero-art {
  position:relative;
  max-width:420px;
  justify-self:center;
  width:100%;
  padding:12px;
  border:1px solid var(--brass);
  border-radius:160px 160px 24px 24px;
  background:#2c231e;
  box-shadow:0 35px 70px #08060499}
.hero-art img {
  border-radius:150px 150px 15px 15px;
  width:100%}
.hero-art figcaption {
  position:absolute;
  bottom:30px;
  left:-32px;
  right:25px;
  background:var(--paper);
  color:var(--ink);
  padding:1rem 1.3rem;
  border-radius:3px;
  box-shadow:0 6px 20px #17110e88;
  font:700 1.45rem/1.2 Alegreya,serif}
.hero-art figcaption span {
  display:block;
  font:400 1rem/1.4 'Alegreya Sans';
  margin-top:.25rem}
.intro-note {
  margin-bottom:2rem;
  text-align:center}
.chapter {
  padding-block:5rem;
  border-top:1px solid var(--edge)}
.section-intro {
  max-width:42rem}
.steps {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2rem;
  list-style:none;
  padding:0;
  margin:2.5rem 0 0;
  counter-reset:quest}
.steps li {
  margin:0;
  counter-increment:quest;
  border-top:1px solid var(--brass);
  padding-top:1.4rem}
.steps li:before {
  content:counter(quest,decimal-leading-zero);
  font:500 1.1rem 'Alegreya SC';
  color:var(--muted);
  display:block;
  margin-bottom:.7rem}
.steps h3 {
  font-size:1.55rem}
.steps p {
  font-size:1.1rem;
  color:var(--muted)}
.sentence {
  font:700 clamp(1.7rem,3vw,2.4rem)/1.4 Alegreya,serif;
  background:var(--paper);
  color:var(--ink);
  padding:1.6rem 2rem;
  border-radius:3px;
  max-width:45rem;
  margin:2rem 0;
  position:relative}
.sentence:before {
  content:'“';
  position:absolute;
  left:.5rem;
  top:.3rem;
  color:#9a7147;
  font-size:3rem}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center}
.split .copy {
  max-width:31rem}
.capture-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:start}
.capture-pair figure:nth-child(2) {
  margin-top:4rem}
.capture {
  border-radius:20px;
  border:1px solid #8f6d4c;
  padding:6px;
  background:#302319;
  box-shadow:0 16px 30px #09060566}
.capture img {
  border-radius:14px}
.capture-pair figcaption {
  font-size:1rem;
  color:var(--muted);
  margin:.8rem .4rem}
.feature-list {
  list-style:none;
  padding:0}
.feature-list li {
  border-top:1px solid var(--edge);
  padding-top:1.1rem}
.feature-list strong {
  display:block;
  font-size:1.25rem;
  color:var(--light)}
.world-note {
  font-size:1rem;
  color:var(--muted);
  max-width:44rem;
  margin-top:1.5rem}
.pricing {
  background:var(--pool);
  padding:3rem;
  border:1px solid #6b4d36;
  border-radius:24px}
.price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:2.5rem 0}
.price-grid p {
  margin:.25rem 0}
.price {
  font:800 clamp(2.3rem,4vw,3.2rem)/1.2 Alegreya,serif}
.price span {
  font:400 1.05rem 'Alegreya Sans';
  margin-left:.25rem}
.price-grid .label {
  color:var(--bone)}
.requirements {
  max-width:46rem;
  margin-top:2rem}
.requirements h3 {
  font-size:1.5rem}
.faq {
  max-width:50rem}
.faq details {
  padding:1.35rem 0;
  border-bottom:1px solid var(--edge)}
.faq summary {
  font:700 1.5rem/1.25 Alegreya,serif;
  cursor:pointer;
  padding-right:.5rem}
.faq details p {
  margin:1rem 0 .2rem;
  color:#ded0bd}
.waitlist {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start}
.waitlist form {
  padding:2rem;
  border:1px solid var(--brass);
  border-radius:18px;
  background:var(--pool)}
label {
  display:block;
  margin-bottom:.5rem}
input[type=email] {
  width:100%;
  color:var(--ink);
  background:#fff7e9;
  border:1px solid var(--brass);
  border-radius:8px;
  padding:.8rem 1rem}
input:disabled {
  opacity:.7}
.consent {
  display:flex;
  align-items:start;
  gap:.75rem;
  font-size:1rem;
  margin:1rem 0}
.consent input {
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:.2rem}
.waitlist button {
  width:100%}
.form-status {
  font-size:1rem;
  margin:1rem 0 0;
  min-height:3rem}
.honeypot {
  display:none}
.journal-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-top:2.5rem}
.journal-links article {
  border-top:1px solid var(--brass);
  padding-top:1.5rem}
.journal-links h3 a {
  text-decoration:none}
.journal-links p {
  color:var(--muted)}
footer {
  padding:3rem 0;
  border-top:1px solid var(--edge);
  font-size:1rem;
  color:var(--muted)}
.footer-inner {
  display:flex;
  gap:2rem;
  justify-content:space-between;
  flex-wrap:wrap}
footer nav {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap}
.article {
  max-width:760px;
  padding-block:4rem 5rem}
.article h1 {
  font-size:clamp(2.7rem,5vw,4.1rem)}
.article h2 {
  font-size:2.1rem;
  margin-top:3rem}
.article h3 {
  font-size:1.6rem;
  margin-top:2rem}
.article .intro {
  font-size:1.4rem;
  color:#ded0bd}
.article .note {
  border-left:3px solid var(--brass);
  padding:1rem 1.4rem;
  background:var(--pool);
  margin:2rem 0}
.article li {
  padding-left:.2rem}
.article table {
  width:100%;
  border-collapse:collapse;
  font-size:1.1rem}
.article th,.article td {
  padding:.8rem;
  text-align:left;
  border-bottom:1px solid var(--edge);
  vertical-align:top}
.article .table-wrap {
  overflow-x:auto}
.press-assets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-block:2rem}
.press-assets a {
  font-size:1rem}
.press-assets img {
  margin-bottom:.7rem;
  border-radius:10px}
.text-link {
  font-weight:700}
.article .button {
  margin-top:.7rem}
.article blockquote {
  margin:2rem 0;
  padding-left:1.4rem;
  border-left:2px solid var(--brass);
  font-size:1.3rem}
.article .related {
  border-top:1px solid var(--edge);
  margin-top:3rem;
  padding-top:2rem}

@media(min-width:1500px) {
  .hero {
  padding-block:5rem}
.hero-art {
  max-width:440px}
}
@media(max-width:900px) {
  .hero {
  gap:2rem}
.hero-art figcaption {
  left:-10px}
.split {
  gap:2rem}
.steps {
  grid-template-columns:repeat(3,1fr)}
.waitlist {
  gap:2rem}
.top nav {
  gap:1rem}
.price-grid {
  gap:1rem}
}

@media(max-width:650px) {
  body {
  font-size:1.15rem}
.wrap {
  width:calc(100% - 2.5rem)}
.top {
  gap:1rem;
  min-height:auto;
  padding-block:1.3rem;
  align-items:start;
  flex-wrap:wrap}
.brand {
  font-size:1.9rem}
.top nav {
  width:100%;
  gap:1.1rem;
  font-size:1rem;
  justify-content:space-between}
.top nav .nav-cta {
  padding:.45rem .7rem}
.hero {
  grid-template-columns:1fr;
  padding-top:2.5rem;
  gap:1.5rem}
.hero-copy {
  padding-bottom:0}
.hero h1 {
  max-width:11ch;
  font-size:3.65rem}
.hero .intro {
  font-size:1.3rem}
.hero-art {
  max-width:330px;
  margin-bottom:1rem}
.hero-art figcaption {
  left:-8px;
  right:15px}
.hero .actions {
  margin-top:1.6rem}
.chapter {
  padding-block:3.2rem}
.steps {
  grid-template-columns:1fr;
  gap:1.3rem;
  margin-top:2rem}
.steps li {
  padding-left:3rem;
  position:relative}
.steps li:before {
  position:absolute;
  left:0;
  top:1.4rem}
.steps h3 {
  margin-bottom:.35rem}
.steps p {
  margin-bottom:0}
.split,.waitlist {
  grid-template-columns:1fr;
  gap:2.5rem}
.split .copy {
  order:-1}
.capture-pair {
  max-width:430px;
  margin-inline:auto}
.pricing {
  padding:1.6rem}
.price-grid {
  grid-template-columns:1fr;
  gap:1.4rem;
  margin:2rem 0}
.price-grid>div {
  border-bottom:1px solid var(--edge);
  padding-bottom:1rem;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  align-items:center}
.price {
  font-size:2.5rem}
.price-grid .fine {
  grid-column:2}
.sentence {
  padding:1.4rem 1.7rem;
  font-size:1.8rem}
.waitlist form {
  padding:1.4rem}
.journal-links {
  grid-template-columns:1fr;
  gap:1.5rem}
.press-assets {
  grid-template-columns:1fr 1fr}
.article {
  padding-top:2.5rem}
.footer-inner {
  gap:1.3rem}
footer nav {
  gap:1rem}
.intro-note {
  text-align:left}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important;
  animation:none!important}
}

@media print {
  body {
  background:white;
  color:#222}
.top,footer,.actions,form {
  display:none}
.article,.wrap {
  width:100%;
  max-width:none}
a {
  color:inherit}
h1,h2,h3 {
  break-after:avoid}
img {
  max-height:20rem;
  width:auto}
.chapter {
  break-inside:avoid}
}

/* A phone-sized first impression: the actual world sits beside the headline.
   The full captions and larger captures remain in the walkthrough below. */
@media (max-width: 650px) {
  .top { padding-block: 1rem; }
  .top nav { gap: .7rem; font-size: .95rem; }
  .top nav .nav-cta { max-width: 8rem; text-align: center; line-height: 1.2; }
  .hero { grid-template-columns: minmax(0, 1fr) 42%; gap: 1.2rem 1rem; padding-top: 1.8rem; align-items: center; }
  .hero-copy { display: contents; }
  .hero-copy > * { grid-column: 1 / -1; margin: 0; }
  .hero-copy > .label { grid-row: 1; font-size: .95rem; }
  .hero h1 { grid-column: 1; grid-row: 2; font-size: clamp(2.1rem, 10.5vw, 2.65rem); line-height: 1.08; max-width: none; }
  .hero-art { grid-column: 2; grid-row: 2; padding: 4px; border-radius: 70px 70px 12px 12px; margin: 0; }
  .hero-art img { border-radius: 65px 65px 8px 8px; }
  .hero-art figcaption { display: none; }
  .hero .intro { font-size: 1.2rem; }
  .hero .actions { margin: .4rem 0 0; gap: 1rem; }
  .hero .actions .text-link { font-size: 1rem; }
}