/* =========================================================
   forms — /request, /guess and the email box on the main page
   (uses the colors/fonts from styles.css)
   ========================================================= */
.f-page { max-width: 560px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) clamp(1.1rem, 5vw, 2rem) 4rem; }
.f-home { display: inline-block; margin-bottom: 2.2rem; text-decoration: none; }
.f-page h1 { font-family: "EB Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.08; margin-bottom: .5rem; }
.f-lede { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.25rem; color: var(--ink-dim); margin-bottom: 2rem; }

.f-form { display: grid; gap: 1rem; }
.f-field { display: grid; gap: .45rem; font-size: .8rem; letter-spacing: .04em; color: var(--ink-dim); }
.f-hint { color: #8a7f74; font-size: .72rem; letter-spacing: .02em; }
.f-form input[type=text], .f-form input[type=email], .f-form input[type=tel], .f-form textarea {
  font: inherit; font-size: 1rem; letter-spacing: 0; color: var(--ink);
  background: rgba(255,255,255,.045); border: 1px solid rgba(244,239,233,.16); border-radius: 10px;
  padding: .75rem .85rem; width: 100%; outline: none; transition: border-color .2s;
}
.f-form textarea { min-height: 6.5rem; resize: vertical; line-height: 1.45; }
.f-form textarea::placeholder { color: #8a7f74; font-style: italic; }
.f-form input:focus, .f-form textarea:focus { border-color: var(--ember); }

.f-form fieldset { border: 0; padding: 0; margin: 0; }
.f-know { margin-top: 0; }
.f-form .f-know legend { font-size: 1.05rem; letter-spacing: .03em; color: var(--ink); margin-bottom: .7rem; }
.f-branch { display: grid; gap: 1rem; }
.f-contact { display: grid; gap: .45rem; }
.f-form .f-contact legend { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .45rem; }
.f-contact.f-missing input { border-color: var(--ember); }
.f-form input::placeholder { color: #8a7f74; }
.f-branch[hidden] { display: none; }
.f-hint a { color: inherit; }
.f-form legend { font-size: .8rem; letter-spacing: .04em; color: var(--ink-dim); margin-bottom: .55rem; }
.f-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.f-pills label { position: relative; font-size: .9rem; }
.f-pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.f-pills span { display: inline-block; padding: .5rem .9rem; border: 1px solid rgba(244,239,233,.18); border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; }
.f-pills input:checked + span { background: rgba(255,106,43,.16); border-color: var(--ember); color: #ffb08a; }
.f-pills input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }

.f-agree { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; font-size: .85rem; line-height: 1.55; color: var(--ink-dim);
  border: 1px solid rgba(244,239,233,.16); border-radius: 10px; padding: .9rem; background: rgba(255,255,255,.03); cursor: pointer; }
.f-agree input { margin-top: .2rem; width: 17px; height: 17px; accent-color: var(--ember); }
.f-agree b { color: var(--ink); font-weight: 500; }

.f-q { display: grid; gap: .45rem; }
.f-q .n { font-family: "Archivo Black", sans-serif; font-size: .75rem; color: var(--ember); }
.f-q .t { font-family: "EB Garamond", Georgia, serif; font-size: 1.4rem; color: var(--ink); letter-spacing: 0; }
.f-sep { height: 1px; background: rgba(244,239,233,.12); margin: .4rem 0; }

.f-send {
  justify-self: start; font: inherit; font-weight: 500; letter-spacing: .03em; cursor: pointer;
  border: 0; border-radius: 999px; padding: .85rem 1.4rem; background: var(--ember); color: #1a0c05;
  transition: background .2s, transform .2s;
}
.f-send:hover { background: var(--flame); transform: translateY(-1px); }
.f-send:disabled { opacity: .6; cursor: default; transform: none; }
.f-status { font-size: .85rem; color: var(--ink-dim); min-height: 1.2em; }
.f-status.err { color: var(--ember); }
.f-thanks { display: none; font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.4rem; color: var(--flame); }
.f-form.done > :not(.f-thanks) { display: none; }
.f-form.done .f-thanks { display: block; }
.f-gotcha { position: absolute; left: -9999px; }            /* spam trap — real people never see it */

/* main page: links to the forms + the release email box */
.f-links { display: grid; gap: .7rem; justify-items: start; margin: 2.2rem 0 0; }
.f-updates { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid rgba(244,239,233,.12); max-width: 460px; }
.f-updates h2 { font-family: "EB Garamond", Georgia, serif; font-weight: 500; font-size: 1.45rem; margin-bottom: .8rem; }
.f-inline { display: flex; gap: .5rem; }
.f-inline input { flex: 1; min-width: 0; }
.f-inline .f-send { padding: .75rem 1.1rem; white-space: nowrap; }

/* minimal home page (ch5): no forms on the main page */
body.v-minimal .f-links, body.v-minimal .f-updates { display: none; }
/* full home page (ash): contact me → request → socials → guess; name/email only on the minimal one */
body:not(.v-minimal) .v-min-only { display: none; }
.f-links.f-req { margin: 0 0 1.8rem; }
.f-links.f-guess { margin-top: 1.8rem; }

/* home page: "do you know what it is?" + "be the first to see it." */
.f-lede-main { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--ink-dim); margin: -.4rem 0 1.4rem; max-width: 40ch; }
.f-guess-inline { margin-top: 1.6rem; max-width: 560px; }
.f-guess-inline[hidden] { display: none; }
#updates .f-form { max-width: 460px; }

/* /request: "other inquiries · email" under the form */
.f-other { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,239,233,.12); }
.f-page .socials { margin-top: 1.4rem; }