/* Starter styles: the design is the front-end agent's to change (CLAUDE.md). */
:root { --ink: #1d1a17; --paper: #faf6f0; --accent: #eabdd3; --accent-deep: #e0a5c2; --accent-edge: #c98aa9; --accent-ink: #4a1d35; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.5 system-ui, sans-serif; }
/* A faint marble texture over the paper colour, fixed behind everything. It fades in
   from the top so it meets Safari's plain status bar softly instead of with a hard edge. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("assets/marble.webp") center / cover; mix-blend-mode: multiply; opacity: .25; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.wrap { max-width: 480px; margin: 0 auto; padding: 12px 16px 48px; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.brand-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* Phone: the image runs edge to edge, the text below it. Its height gives way to the
   screen so the button stays in the first view: square on tall screens, shorter on others. */
.hero { display: grid; grid-template-areas: "media" "title" "lede"; gap: 12px; }
.hero-media { grid-area: media; display: grid; place-items: center; margin: 0 -16px; height: clamp(180px, calc(100vh - 540px), 100vw); height: clamp(180px, calc(100svh - 540px), 100vw); border-block: 1px dashed #c9a3b6; background: #f3e6ec; color: #7a5a6a; font-size: 13px; }
.hero h1 { grid-area: title; margin: 4px 0 0; font-size: 28px; line-height: 1.15; }
.lede { grid-area: lede; margin: 0; }
@media (min-width: 640px) {
  body::before { opacity: .35; }
  .wrap { max-width: 720px; padding-top: 48px; }
  .brand { margin-bottom: 24px; }
  .hero { grid-template-columns: 200px 1fr; grid-template-areas: "media title" "media lede"; column-gap: 24px; row-gap: 12px; }
  .hero-media { margin: 0; height: auto; border: 1px dashed #c9a3b6; border-radius: 12px; }
  .hero h1 { align-self: end; margin: 0; font-size: 36px; }
  .lede { align-self: start; }
}

.form-intro { margin: 24px 0 0; font-size: 15px; font-style: italic; color: #6f5a64; }
.form-intro-lead { display: block; }
@media (min-width: 640px) { .form-intro-lead { display: inline; } }
.signup { display: grid; gap: 12px; margin-top: 12px; }
/* Labels sit where the typing goes and fade out at the first character (is-filled, set
   by the page's script). Faded, not removed, so screen readers still read them. */
.signup-field { position: relative; display: grid; }
.signup-label { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: #806a74; pointer-events: none; transition: opacity .1s ease; }
.signup-field.is-filled .signup-label, .signup-field:has(.signup-input:autofill) .signup-label { opacity: 0; }
.signup-input { font: inherit; padding: 12px; border: 1px solid #cfc6ba; border-radius: 8px; background: #fff; }
.signup-button { margin-bottom: 4px; font: inherit; font-weight: 600; padding: 14px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 0 var(--accent-edge), 0 6px 14px rgb(150 80 115 / .25);
  transition: background-color .15s ease, transform .1s ease, box-shadow .1s ease; }
@media (hover: hover) {
  .signup-button:hover { background: var(--accent-deep); transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 5px 0 var(--accent-edge), 0 8px 18px rgb(150 80 115 / .3); }
}
.signup-button:active { background: var(--accent-deep); transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 var(--accent-edge), 0 1px 3px rgb(150 80 115 / .2); }
/* The arrow is decoration: the empty alt text keeps screen readers from reading it out. */
.signup-button::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: .4em; transition: transform .15s ease; }
@media (hover: hover) { .signup-button:hover::after { transform: translateX(3px); } }
.signup-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.signup.is-sending .signup-button { opacity: .6; }
.signup.is-done .signup-field, .signup.is-done .signup-button { display: none; }
.signup-consent { font-size: 13px; opacity: .7; margin: 0; }
.signup-message:empty { display: none; }
.signup.is-error .signup-message { color: #a3261b; }