/* wellmeadow.app. Direction: "storybook dusk", the game's own title card and storybook plaques
   carried onto the web. Colours are the game's (WellmeadowUI.cs, PlayerCutscenes.TitleGround),
   type is the game's (Fraunces 72pt Soft), plaques are the game's chrome PNGs nine-sliced. */

@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/fraunces-soft-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/fraunces-soft-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("../fonts/fraunces-soft-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primitives: the game's palette. */
  --dusk: #1b1724;          /* PlayerCutscenes.TitleGround, RGB(27, 23, 36) */
  --ink: #3b2314;           /* WellmeadowUI.Ink */
  --dim: #8b6a47;           /* WellmeadowUI.Dim */
  --cream: #fff6e3;         /* WellmeadowUI.Cream */
  --gold: #cf8a1f;          /* WellmeadowUI.Gold */
  --alarm: #c8452b;         /* WellmeadowUI.Alarm */
  --card: #f1e3c3;          /* chrome fill: card */
  --plaque: #ecdcb8;        /* chrome fill: plaque */
  --plaque-cream: #faf0da;  /* chrome fill: plaque_cream, the storybook caption plate */

  /* Semantic. */
  --page: var(--dusk);
  --on-page: var(--cream);
  --on-page-quiet: color-mix(in srgb, var(--cream) 72%, var(--dusk));
  --paper: var(--card);
  --on-paper: var(--ink);
  --accent: var(--gold);
  --ember-hot: #ffd98a;     /* ember highlight for the CSS overlay and the coming-soon message */
  --gold-ink: #8a5408;      /* Gold darkened for text on the paper band (4.5:1 on card) */
  --error-on-dusk: #f0a08f; /* Alarm lifted to read on the dusk ground */

  /* Type scale: body to display is better than 3x. */
  --font: "Fraunces Soft", serif;
  --t-small: 0.9375rem;
  --t-body: 1.125rem;
  --t-lead: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  --t-display: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);

  /* Space. */
  --gutter: 16px;
  --wrap: 1120px;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Motion: page-load moment, a smooth decelerating settle (ease-out-quint), no overshoot. */
  --settle: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--on-page);
  background-color: var(--page);
  /* A faint grain over the dusk ground, for atmosphere. It never sits on the art. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: var(--t-display); text-wrap: balance; }
p { margin: 0; }

/* ---------- Hero ---------- */

.hero { display: flex; flex-direction: column; }

.hero__art { position: relative; display: flex; flex-direction: column; }

.hero__picture img {
  width: 100%;
  height: auto;
}

/* Phone: the wordmark stands on the dusk ground above the picture, the way the game's title card does. */
.hero__mark {
  order: -1;
  margin: 0 auto;
  padding: 28px var(--gutter) 18px;
  width: min(100%, 420px);
}
.hero__mark img { width: 100%; height: auto; }

.hero__copy {
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-bottom: var(--section);
  text-align: center;
}

.tagline {
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}

.soon {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--t-small);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Embers: a CSS overlay above the picture, never part of it. Positioned on the fire. */
.embers {
  position: absolute;
  left: var(--fire-x, 44.4%);
  top: var(--fire-y, 47%);
  width: 0;
  height: 0;
  pointer-events: none;
  --rise: 22vw;
}
.embers span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember-hot) 0 30%, var(--accent) 55%, transparent 72%);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
  animation: ember-rise var(--dur, 2.6s) cubic-bezier(0.2, 0.6, 0.35, 1) var(--delay, 0s) 2 both;
}
.embers span:nth-child(1) { --dx: -10px; --delay: 0.35s; --dur: 2.4s; }
.embers span:nth-child(2) { --dx: 14px;  --delay: 0.6s;  --dur: 2.9s; width: 5px; height: 5px; }
.embers span:nth-child(3) { --dx: -4px;  --delay: 0.95s; --dur: 2.5s; }
.embers span:nth-child(4) { --dx: 22px;  --delay: 1.3s;  --dur: 3.1s; width: 4px; height: 4px; }
.embers span:nth-child(5) { --dx: -20px; --delay: 1.6s;  --dur: 2.7s; width: 6px; height: 6px; }
.embers span:nth-child(6) { --dx: 6px;   --delay: 1.9s;  --dur: 2.8s; width: 4px; height: 4px; }
.embers span:nth-child(7) { --dx: -14px; --delay: 2.25s; --dur: 2.6s; }

@keyframes ember-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  12%  { opacity: 1; }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 0), calc(-1 * var(--rise))) scale(0.45); }
}

.hero__mark img {
  animation: mark-settle 560ms var(--settle) 120ms both;
}
@keyframes mark-settle {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 720px) {
  .hero__picture img {
    max-height: 82svh;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* Wide: the wordmark stands over the dusk sky of still 1. */
  .hero__mark {
    position: absolute;
    top: 2.6%;
    left: 50%;
    width: 38%;
    max-width: 640px;
    padding: 0;
    transform: translateX(-50%);
  }
  .embers { --fire-x: 49.8%; --fire-y: 46%; --rise: 11vw; }
}

/* ---------- Sign-up form ---------- */

.signup {
  margin: 2rem auto 0;
  max-width: 34rem;
  text-align: left;
}

.signup__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 520px) {
  .signup__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* The game's cream plaque, nine-sliced. Art is 3 px per point, so a 58 px slice draws at 19.33 px. */
.signup__input {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 6px;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border-style: solid;
  border-width: 19.33px 19.33px 23.33px;
  border-image: url("../img/plaque-cream.png") 58 58 70 58 fill / 19.33px 19.33px 23.33px 19.33px;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.signup__input::placeholder { color: var(--dim); opacity: 1; }
.signup__input:focus-visible { outline-offset: 2px; border-radius: 22px; }

/* The game's gold plaque button; pressed, it falls four points onto plaque_gold_down, as in the game. */
.signup__button {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 10px 3px;
  font: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-style: solid;
  border-width: 19.33px 19.33px 24.33px;
  border-image: url("../img/plaque-gold.png") 58 58 73 58 fill / 19.33px 19.33px 24.33px 19.33px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 150ms ease-out;
}
.signup__button:hover { filter: brightness(1.06); }
.signup__button:active {
  height: 56px;
  margin-top: 4px;
  border-width: 19.33px 19.33px 20.33px;
  border-image: url("../img/plaque-gold-down.png") 58 58 61 58 fill / 19.33px 19.33px 20.33px 19.33px;
}
.signup__button:focus-visible { border-radius: 22px; }

/* Honeypot: off screen for people, present for bots. */
.signup__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__status {
  min-height: 1.5em;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--on-page);
}
.signup__status[data-state="error"] { color: var(--error-on-dusk); }
.signup__status[data-state="soon"] { color: var(--ember-hot); }

.signup__privacy {
  margin-top: 0.25rem;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--on-page-quiet);
}

/* ---------- The story so far ---------- */

.story { padding-bottom: var(--section); }
.story h2 { text-align: center; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem); }

.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
}

.chapter { margin: 0; }
.chapter img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.7);
}

/* The storybook plaque: the game's plaque_cream chrome, Ink type, as wide as its sentence. */
.plaque {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  padding: 2px 8px;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-align: center; /* the game sets the caption centred in its plate (TextAnchor.MiddleCenter) */
  text-wrap: balance;
  border-style: solid;
  border-width: 19.33px 19.33px 23.33px;
  border-image: url("../img/plaque-cream.png") 58 58 70 58 fill / 19.33px 19.33px 23.33px 19.33px;
}
@media (min-width: 720px) {
  .chapters > li:nth-child(even) .plaque { margin-left: auto; }
}

/* ---------- What you do ---------- */

.what {
  background: var(--paper);
  color: var(--on-paper);
  padding-block: var(--section);
}
.what h2 { max-width: 18ch; }

.what__list {
  list-style: none;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 22px 48px;
}
@media (min-width: 820px) {
  .what__list { grid-template-columns: 1fr 1fr; }
}
.what__list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.3;
}
.what__list img { width: 56px; height: 56px; }

.what__free {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-size: var(--t-lead);
  font-weight: 900;
  color: var(--ink);
}
.what__free span { color: var(--gold-ink); }

/* ---------- Sign-up again ---------- */

.again {
  padding-block: var(--section);
  text-align: center;
}
.again p.lead {
  margin: 1rem auto 0;
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--on-page-quiet);
}

/* ---------- Footer ---------- */

.footer {
  padding-block: 2.25rem 3rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  font-size: var(--t-small);
  color: var(--on-page-quiet);
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}
.footer nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.footer a { color: var(--on-page); font-weight: 700; }

/* ---------- Support page ---------- */

.page-head { padding-block: 28px 8px; }
.page-head a { display: inline-block; }
.page-head img { width: 220px; height: auto; }

.support { padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--section); }
.support h1 { font-size: var(--t-display); }
.support .intro { margin-top: 1rem; font-size: var(--t-lead); color: var(--on-page-quiet); max-width: 36ch; }

.contact {
  margin-top: 2rem;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  color: var(--ink);
  border-style: solid;
  border-width: 19.33px 19.33px 23.33px;
  border-image: url("../img/plaque-cream.png") 58 58 70 58 fill / 19.33px 19.33px 23.33px 19.33px;
}
.contact__label { font-size: var(--t-small); color: var(--dim); }
.contact__address { font-size: var(--t-lead); font-weight: 900; overflow-wrap: anywhere; }

.faq { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; gap: 2rem; max-width: 44rem; }
.faq h2 { font-size: var(--t-lead); font-weight: 900; }
.faq p { margin-top: 0.5rem; color: var(--on-page-quiet); }

/* ---------- Reduced motion: no page-load moment at all. ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__mark img { animation: none; }
  .embers { display: none; }
  .signup__button { transition: none; }
}