/* Locally hosted Noto Serif SC; SIL OFL 1.1, assets/birth-serif-OFL.txt. */
@font-face {
  font-family: 'Birth Serif';
  src: url('assets/birth-serif.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+542F, U+59CB;
}
/* A quiet manuscript-like form, with brush characters marking its opening and close. */
.begin-section .birth-form { padding: 30px 32px 24px; border-color: #dcd5c6; }
.birth-form .form-heading {
  align-items: center;
  gap: 19px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid #e6dfd1;
}
.birth-form .form-heading .chapter {
  flex: 0 0 60px;
  font: 400 42px/1.15 'Birth Serif', serif;
  color: #8c683b;
  text-align: center;
}
.birth-form .form-heading h2 {
  font-size: clamp(24px, 2.15vw, 29px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 330px;
  text-wrap: balance;
}
.birth-form .birth-field-group { margin-bottom: 22px; }
.birth-form .birth-field-group legend, .birth-form .field-label { font-size: 14px; }
.birth-form .birth-field-group legend { margin-bottom: 10px; }
.birth-form .birth-parts { gap: 12px; }
.birth-form input:not([type=checkbox]), .birth-form select {
  min-height: 48px;
  background: #fffdf9;
  border-color: #d9d2c3;
  transition: border-color .15s, box-shadow .15s;
}
.birth-form input:not([type=checkbox]):focus, .birth-form select:focus {
  outline: 2px solid #597262;
  outline-offset: 2px;
  border-color: #597262;
}
.birth-form .check-row { margin: -5px 0 25px; min-height: 28px; }
.birth-form .check-row input { accent-color: var(--green); }
.birth-form .gender-heading { margin-top: 0; }
.birth-form .field-note { font-size: 12px; line-height: 1.6; color: #65695f; }
.birth-form #birth-sex-help { max-width: 440px; margin-bottom: 24px; }
.birth-form .city-search button { background: #ece8dd; border-color: #d9d2c3; color: #344c3c; }
.birth-form .city-search button:hover { background: #e3e3d7; }
.birth-form .calculate-button {
  margin-top: 20px;
  min-height: 74px;
  padding: 12px 21px;
  font-size: 16px;
  letter-spacing: 0;
  text-align: left;
  gap: 18px;
  transition: background .2s;
}
.birth-form .calculate-button:hover { background: #345743; }
.birth-form .calculate-button span {
  flex: 0 0 61px;
  padding-left: 15px;
  border-left: 1px solid #dac8a14d;
  color: #efdfbb;
  font: 400 34px/1.15 'Birth Serif', serif;
  text-align: right;
}
.birth-form .privacy-line { margin: 13px 0 0; font-size: 11px; line-height: 1.6; }
@media (max-width: 900px) and (min-width: 651px) {
  .begin-section .birth-form { padding: 26px 22px 22px; }
  .birth-form .form-heading { gap: 12px; }
  .birth-form .form-heading .chapter { flex-basis: 50px; font-size: 40px; }
}
@media (max-width: 650px) {
  .begin-section .birth-form { padding: 24px 20px 22px; }
  .birth-form .form-heading { gap: 12px; padding-bottom: 22px; margin-bottom: 24px; }
  .birth-form .form-heading .chapter { flex-basis: 50px; font-size: 40px; }
  .birth-form .form-heading h2 { font-size: 25px; }
  .birth-form .birth-parts { gap: 8px; }
  .birth-form .birth-parts input, .birth-form .birth-parts select { padding: 11px 8px; }
  .birth-form .calculate-button { padding: 12px 15px; font-size: 15px; gap: 10px; }
  .birth-form .calculate-button span { flex-basis: 49px; padding-left: 10px; font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  .birth-form input, .birth-form select, .birth-form .calculate-button { transition: none; }
}

/* The original serif glyphs, revealed like ink settling on paper. */
.birth-form .form-heading .chapter {
  position: relative;
  isolation: isolate;
  animation: birth-ink-reveal 1.4s ease-out both;
}
.birth-form .form-heading .chapter::before {
  content: '';
  position: absolute;
  inset: -10px -4px;
  z-index: -1;
  background: radial-gradient(ellipse, #c9ad7440 0%, #c9ad7412 45%, transparent 72%);
  animation: birth-ink-wash 1.8s ease-out both;
  pointer-events: none;
}
.birth-form .calculate-button span {
  transition: color .35s ease, text-shadow .35s ease, transform .35s ease;
}
.birth-form .calculate-button:focus-visible span {
  color: #fff1d2;
  text-shadow: 0 0 12px #e9cd8966;
  transform: translateY(-2px);
}
@media (hover: hover) {
  .birth-form .calculate-button:hover span {
    color: #fff1d2;
    text-shadow: 0 0 12px #e9cd8966;
    transform: translateY(-2px);
  }
}
@keyframes birth-ink-reveal {
  from { opacity: .15; filter: blur(1px); transform: translateY(3px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes birth-ink-wash {
  0% { opacity: 0; transform: scale(.75); }
  55% { opacity: .8; }
  100% { opacity: .28; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .birth-form .form-heading .chapter,
  .birth-form .form-heading .chapter::before { animation: none; }
  .birth-form .form-heading .chapter::before { opacity: .28; }
  .birth-form .calculate-button span { transition: none; }
  .birth-form .calculate-button:hover span,
  .birth-form .calculate-button:focus-visible span { transform: none; }
}

/* One continuous paper surface; typography and spacing establish hierarchy. */
.begin-section .birth-form {
  position: relative;
  padding: 35px 34px 27px;
  border: 0;
  background: #fffdf8;
  box-shadow: none;
}
.birth-form .form-heading {
  gap: 20px;
  padding-bottom: 27px;
  margin-bottom: 27px;
  border-bottom: 0;
}
.birth-form .form-heading .chapter {
  flex-basis: 54px;
  padding: 8px 0;
  border: 0;
}
.birth-form .form-heading h2 {
  color: #293c30;
  font-size: clamp(25px, 2.3vw, 30px);
  line-height: 1.2;
}
.birth-form .birth-field-group { margin-bottom: 25px; }
.birth-form .birth-field-group legend,
.birth-form .gender-heading,
.birth-form .birthplace-group > .field-label,
.birth-form .reading-name-group > .field-label {
  font: 400 22px/1.3 Georgia, 'Times New Roman', serif;
  color: #304335;
  letter-spacing: -.02em;
  padding-left: 0;
  border-left: 0;
  margin: 0 0 14px;
}
.birth-form .required {
  font: 12px/1 Arial, sans-serif;
  color: #896839;
  vertical-align: super;
  margin-left: 3px;
}
.birth-form .birth-parts label {
  font: 12px/1.5 Arial, sans-serif;
  letter-spacing: .025em;
  color: #707366;
}
.birth-form .birth-parts input, .birth-form .birth-parts select { margin-top: 7px; }
.birth-form input:not([type=checkbox]), .birth-form select {
  min-height: 49px;
  border: 0;
  border-radius: 2px;
  background: #f1ede3;
  color: #73736d;
  box-shadow: none;
}
.birth-form input::placeholder { color: #73736d; opacity: 1; }
.birth-form .check-row { color: #596454; margin: -9px 0 24px; font-size: 13px; }
.birth-form .birth-detail-group {
  border: 0;
  padding: 0;
  margin-top: 27px;
}
.birth-form .gender-heading .optional {
  font: 11px/1.4 Arial, sans-serif;
  letter-spacing: .04em;
  color: #77786b;
}
.birth-form #birth-sex-help { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
.birth-form .field-note { color: #74776b; }
.birth-form .city-search { gap: 8px; }
.birth-form .city-search button {
  background: #ece5d6;
  border: 0;
  color: #5c523d;
  font-size: 13px;
}
.birth-form .calculate-button {
  background: linear-gradient(110deg, #304e3d, #213c30);
  border: 0;
  box-shadow: none;
  margin-top: 23px;
  min-height: 77px;
  padding-left: 23px;
}
.birth-form .calculate-button:hover { background: linear-gradient(110deg, #3b5b47, #2b4737); }
.birth-form .privacy-line { color: #77796e; }
@media (max-width: 900px) and (min-width: 651px) {
  .begin-section .birth-form { padding: 29px 24px 24px; }
  .birth-form .form-heading { gap: 14px; }
}
@media (max-width: 650px) {
  .begin-section .birth-form { padding: 26px 20px 23px; }
  .birth-form .form-heading { gap: 14px; padding-bottom: 22px; margin-bottom: 24px; }
  .birth-form .form-heading .chapter { flex-basis: 46px; }
  .birth-form .form-heading h2 { font-size: 25px; }
  .birth-form .birth-field-group legend,
  .birth-form .gender-heading,
  .birth-form .birthplace-group > .field-label,
.birth-form .reading-name-group > .field-label { font-size: 21px; }
}

.birth-form .birth-moment-group { padding: 0; background: transparent; }
.birth-form .gender-group { background: transparent; }
.birth-form .birthplace-group { background: transparent; }
.birth-form .birth-moment-group .check-row { margin-bottom: 0; }
.birth-form .form-heading { margin-bottom: 32px; padding-bottom: 0; }
.birth-form .calculate-button span { border-left: 0; }
.birth-form .info-tooltip { border: 0; background: #fffefa; box-shadow: 0 6px 24px #34443420; }
.birth-form .info-tooltip::before { border: 0; left: 87px; background: #fffefa; }
.birth-form .city-search button { background: #dfd8c7; }
.birth-form .city-search button:hover { background: #d4cbb5; }
@media (max-width: 900px) and (min-width: 651px) {
  .begin-section .birth-form { padding: 28px 24px 24px; }
  .birth-form .birth-moment-group, .birth-form .birth-detail-group { padding: 0; }
}
@media (max-width: 650px) {
  .begin-section .birth-form { padding: 26px 22px 22px; }
  .birth-form .birth-moment-group, .birth-form .birth-detail-group { padding: 0; }
  .birth-form .form-heading { gap: 12px; padding: 0; }
  .birth-form .birth-parts { gap: 7px; }
  .birth-form .city-search { flex-wrap: wrap; }
  .birth-form .city-search input { flex-basis: 180px; }
  .birth-form .city-search button { min-height: 44px; flex-grow: 1; }
}

/* Phone form: aligned native controls and a compact, readable rhythm. */
@media (max-width: 650px) {
  .begin-section { padding-top: 16px; }
  .begin-section .birth-form { padding: 24px 18px 20px; border-radius: 10px; }
  .birth-form .form-heading { gap: 12px; margin-bottom: 26px; align-items: center; }
  .birth-form .form-heading .chapter { flex: 0 0 34px; padding: 0; font-size: 32px; }
  .birth-form .form-heading h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; text-wrap: initial; max-width: 280px; }
  .birth-form .birth-field-group { margin: 0 0 20px; }
  .birth-form .birth-field-group legend,
  .birth-form .gender-heading,
  .birth-form .birthplace-group > .field-label,
.birth-form .reading-name-group > .field-label { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
  .birth-form .required { font-size: 10px; }
  .birth-form .birth-parts { gap: 8px; align-items: start; }
  .birth-form .date-parts { grid-template-columns: minmax(46px,.75fr) minmax(120px,1.6fr) minmax(70px,1fr); }
  .birth-form .time-parts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .birth-form .birth-parts label { font-size: 12px; line-height: 18px; letter-spacing: 0; }
  .birth-form input:not([type=checkbox]),
  .birth-form select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin-bottom: 0;
    padding: 0 10px;
    border: 1px solid #e4e1d6;
    border-radius: 6px;
    background-color: #f2f0e8;
    color: #33483c;
    font: 400 16px/normal Arial, sans-serif;
  }
  .birth-form .birth-parts input,
  .birth-form .birth-parts select { margin-top: 6px; padding: 0 10px; }
  .birth-form select,
  .birth-form .birth-parts select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23646f60' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px 14px;
  }
  .birth-form input::placeholder { color: #7a7d72; }
  .birth-form select:required:invalid { color: #7a7d72; }
  .birth-form .check-row { gap: 9px; min-height: 44px; margin: -8px 0 0; font-size: 12px; line-height: 1.5; }
  .birth-form .check-row input { width: 19px; height: 19px; margin: 0; flex: 0 0 19px; }
  .birth-form .birth-detail-group { margin-top: 20px; }
  .birth-form .gender-group { padding-top: 20px; border-top: 1px solid #e8e5db; }
  .birth-form .gender-heading { display: flex; align-items: center; gap: 8px; }
  .birth-form .gender-heading .optional { margin-left: auto; font-size: 11px; letter-spacing: 0; }
  .birth-form #birth-sex-help,
  .birth-form .field-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; }
  .birth-form .city-search { display: grid; grid-template-columns: minmax(0,1fr) 76px; gap: 8px; align-items: stretch; }
  .birth-form .city-search input { min-width: 0; }
  .birth-form .city-search button { height: 48px; min-height: 48px; padding: 0 10px; border: 1px solid #dcdccc; border-radius: 6px; background: #e9e9dc; color: #435441; font-size: 13px; }
  .birth-form .calculate-button { min-height: 58px; margin-top: 24px; padding: 12px 16px; border-radius: 6px; background: #2d4b39; font-size: 15px; }
  .birth-form .calculate-button span { flex: 0 0 30px; padding: 0; font-size: 28px; }
  .birth-form .privacy-line { margin-top: 12px; font-size: 10px; line-height: 1.6; }
}
@media (max-width: 360px) {
  .begin-section .birth-form { padding-left: 16px; padding-right: 16px; }
  .birth-form .form-heading h2 { font-size: 22px; }
  .birth-form .birth-parts { gap: 6px; }
  .birth-form .birth-parts input { padding: 0 8px; }
}

.birth-form .reading-name-group{margin:0 0 28px}
.birth-form .reading-name-group .field-label{margin-top:0}
.birth-form .reading-name-group .optional{font:12px/1.5 Arial,sans-serif;color:#77786b}
.birth-form #reading-name{color:#344c3c}