/* Coming-soon page for bargello.ai.

   This site is deployed on its own, so it cannot import app/ui.css. The colour
   and type values below are a copy of the --bargello-* tokens defined there,
   which remains the source of truth. If the palette changes in app/ui.css,
   change it here too. */

:root {
  color-scheme: light dark;

  --canvas: #f0eae4;
  --parchment: #faf7f3;
  --line: #dcd3cb;
  --ink: #1b1420;
  --secondary: #4f4854;
  --muted: #635b68;
  --thread: #ad3819;
  --thread-strong: #8c2a11;
  --on-thread: #faf7f3;
  --danger: #a3323d;

  /* The stage the flame stitch is worked on. Like the loom in the app, it is
     dark in both themes: it is a figure, not a surface that follows the
     reader's setting. The CTA band is the same kind of block. */
  --stage: #140f19;
  --stage-ink: #efe6de;
  --stage-secondary: #cfc3d0;
  --stage-muted: #a99cae;
  --stage-accent: #ee9a6a;
  --stage-accent-strong: #f4b791;
  --stage-danger: #f6a3ac;

  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #16101c;
    --parchment: #1e1726;
    --line: #33293c;
    --ink: #efe6de;
    --secondary: #b9afbd;
    --muted: #978ea0;
    --thread: #ee9a6a;
    --thread-strong: #f4b791;
    --on-thread: #16101c;
    --danger: #f08b96;
  }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--secondary);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.page {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.narrow {
  max-width: 44rem;
}

.wide {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.skip-link {
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.875rem;
  background: var(--stage-ink);
  color: var(--stage);
  border-radius: 0.375rem;
}

.skip-link:focus {
  top: 1rem;
}

a {
  color: var(--thread-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--thread);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* --- Brand ---------------------------------------------------------------- */

.masthead {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding-block: 1.5rem 0;
}

.masthead-plain {
  padding-block: 1.75rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  text-decoration: none;
}

.masthead .brand,
.masthead .brand:hover {
  color: var(--stage-ink);
}

.brand-mark {
  display: block;
  width: 2rem;
  height: 2rem;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
}

/* --- The stage -------------------------------------------------------------
   On a phone the stitching is a band across the top and the words sit on
   plain ground beneath it. On a wide screen it fills the right-hand side and
   fades out before it reaches the words. Either way no text is ever set on
   the pattern itself, so contrast does not depend on what the pattern is
   doing. */

.stage {
  position: relative;
  overflow: hidden;
  background: var(--stage);
  color: var(--stage-secondary);
}

.stage-art {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 17rem;
  background: var(--stage) url("/flame.svg") 0 0 / 264px 336px repeat;
}

.stage-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 15, 25, 0.82) 0, rgba(20, 15, 25, 0) 6rem),
    linear-gradient(to top, #140f19 0, rgba(20, 15, 25, 0) 9rem);
}

.stage-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stage-inner {
  position: relative;
  z-index: 1;
  padding-block: 16rem 3.5rem;
}

.hero {
  max-width: 33rem;
}

.hero-title {
  margin: 0;
  color: var(--stage-ink);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-lead {
  margin: 1.25rem 0 0;
  color: var(--stage-ink);
  font-size: 1.25rem;
  line-height: 1.45;
}

@media (min-width: 60rem) {
  .stage-art {
    left: auto;
    bottom: 0;
    width: 58%;
    height: auto;
  }

  .stage-art::after {
    background:
      linear-gradient(to right, #140f19 0, #140f19 8%, rgba(20, 15, 25, 0.72) 28%, rgba(20, 15, 25, 0) 60%),
      linear-gradient(to top, rgba(20, 15, 25, 0.7) 0, rgba(20, 15, 25, 0) 7rem);
  }

  .stage-inner {
    padding-block: 9rem 6rem;
  }
}

/* --- Sign-up, on the stage --------------------------------------------------- */

.signup {
  margin: 2.25rem 0 0;
  scroll-margin-top: 2rem;
}

.signup-title {
  margin: 0 0 1rem;
  color: var(--stage-accent);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
}

.field-label {
  display: block;
  margin: 0 0 0.375rem;
  color: var(--stage-ink);
  font-weight: 600;
  font-size: 1rem;
}

.field-input {
  display: block;
  width: 100%;
  max-width: 26rem;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  background: #231b2c;
  color: var(--stage-ink);
  border: 1px solid var(--stage-muted);
  border-radius: 0.5rem;
  font: inherit;
  color-scheme: dark;
}

.field-input[aria-invalid="true"] {
  border-color: var(--stage-danger);
  border-width: 2px;
}

.button {
  display: inline-block;
  margin: 1.25rem 0 0;
  min-height: 3rem;
  padding: 0.625rem 1.375rem;
  background: var(--stage-accent);
  color: var(--stage);
  border: 0;
  border-radius: 0.5rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button:hover {
  background: var(--stage-accent-strong);
  color: var(--stage);
}

.button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.button-link {
  line-height: 1.75rem;
  text-decoration: none;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.consent-box {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--stage-accent);
  color-scheme: dark;
}

.signup-note {
  margin: 0.875rem 0 0;
  color: var(--stage-muted);
  font-size: 0.9375rem;
}

.stage a:not(.button),
.stage a:not(.button):hover {
  color: var(--stage-accent-strong);
}

.stage :focus-visible,
.band :focus-visible,
.masthead :focus-visible {
  outline-color: var(--stage-ink);
}

.form-message {
  margin: 0.75rem 0 0;
  color: var(--stage-danger);
  font-weight: 600;
}

.form-message:empty {
  display: none;
}

.signup-done {
  margin: 0;
  color: var(--stage-ink);
  font-size: 1.125rem;
}

.signup-done:focus {
  outline: none;
}

/* A spam trap. Real people never see or reach this field. */
.hp {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Sections ----------------------------------------------------------- */

.section {
  padding-block: 3.5rem;
}

.section-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}

.section-lead {
  margin: 0 0 1.75rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  padding: 1.75rem 1.25rem 1.25rem;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Five stitches of the flame, as the card's top edge. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.375rem;
  background: linear-gradient(to right, #8c2a11 0 20%, #d1512a 20% 40%, #ee9a6a 40% 60%, #9a6fc9 60% 80%, #6a3f98 80% 100%);
}

.card-title {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
}

.card-text {
  margin: 0;
}

.band {
  background: var(--stage);
  color: var(--stage-secondary);
}

.band-inner {
  padding-block: 3rem;
}

.band-title {
  margin: 0 0 0.5rem;
  color: var(--stage-ink);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}

.band-text {
  margin: 0;
  color: var(--stage-ink);
  font-size: 1.1875rem;
  max-width: 34rem;
}

.faq-list {
  margin: 1.5rem 0 0;
  max-width: 44rem;
}

.faq-item {
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}

.faq-question {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

.faq-answer {
  margin: 0;
}

.back-link {
  margin: 2rem 0 0;
}

/* --- Privacy and plain pages ---------------------------------------------- */

.prose {
  padding-block: 3rem;
}

.prose-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
}

.prose-meta {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.prose-heading {
  margin: 2rem 0 0.5rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
}

.prose-text {
  margin: 0 0 1rem;
}

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

.footer {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-text {
  margin: 0 0 0.5rem;
}

@media (min-width: 48rem) {
  .section {
    padding-block: 5rem;
  }

  .band-inner {
    padding-block: 4rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
  a {
    transition: background-color 120ms ease, color 120ms ease;
  }
}