/* ============================================================
   Aclassicaltone form pages (submit.html, request.html)
   Page head, fields, package cards, yes/no pairs, confirmation.
   Requires css/base.css first.
   ============================================================ */

/* ============================================================
   Page head
   ============================================================ */
.page-head {
  padding: 72px 0 44px;
  animation: rise 0.8s ease both;
}
.page-head .smallcaps {
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  line-height: 1.05;
}
.page-head h1 em { font-style: italic; }
.page-head p {
  margin-top: 18px;
  max-width: 52ch;
  color: #4C463D;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Form
   ============================================================ */
.form-panel {
  padding-bottom: 110px;
  animation: rise 0.8s ease 0.12s both;
}

.field { margin-bottom: 28px; }

label, .group-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
}

input[type="text"],
input[type="email"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}
textarea { min-height: 120px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316130F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

input.invalid, select.invalid, textarea.invalid { border-color: var(--error); }

.hint {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--grey);
}
.error-msg {
  display: none;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--error);
}
.field.has-error .error-msg { display: block; }

.char-count {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--grey);
  text-align: right;
}
.char-count.near-limit { color: var(--gold-deep); }

/* ============================================================
   Package cards (submit page)
   ============================================================ */
fieldset { border: none; }

.packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.package {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 22px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.package:hover { border-color: var(--gold); }
.package input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.package.selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.package h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.package ul {
  list-style: none;
  font-size: 0.9rem;
  color: #4C463D;
}
.package li { padding: 3px 0 3px 18px; position: relative; }
.package li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 1px;
  background: var(--gold);
}
.package-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--grey);
}

/* ============================================================
   Yes / no pairs (request page)
   ============================================================ */
.yesno {
  display: flex;
  gap: 12px;
}
.yesno label {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.yesno label:hover { border-color: var(--gold); }
.yesno input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.yesno label.selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ============================================================
   Submit area, errors, confirmation
   ============================================================ */
.form-footnote {
  margin-top: 22px;
  font-size: 0.84rem;
  color: var(--grey);
  max-width: 52ch;
}

.form-error-summary {
  display: none;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--error);
  border-radius: 3px;
  color: var(--error);
  font-size: 0.9rem;
}

.confirmation {
  display: none;
  padding: 24px 0 110px;
  animation: rise 0.7s ease both;
}
.confirmation .numeral {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}
.confirmation h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.12;
  max-width: 22ch;
}
.confirmation p {
  margin-top: 16px;
  max-width: 50ch;
  color: #4C463D;
}
.confirmation .btn { margin-top: 30px; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 560px) {
  .page-head { padding: 52px 0 36px; }
  .packages { grid-template-columns: 1fr; }
  .form-panel .btn, .confirmation .btn { width: 100%; text-align: center; }
}