.mercury-intro {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 50px;
  padding: 48px 0 36px;
}
.mercury-intro h1 { font-size: clamp(64px, 6.8vw, 96px); line-height: .97; letter-spacing: -2px; margin: 22px 0; }
.mercury-intro > div > p:last-child { max-width: 480px; color: var(--muted); font-size: 16px; }
.mercury-illustration { position: relative; width: min(100%, 350px); justify-self: center; aspect-ratio: 350/280; display: grid; place-items: center; }
.mercury-illustration svg { position: absolute; inset: 0; width: 100%; stroke: #765c70; stroke-width: .8; }
.mercury-illustration svg circle:last-of-type { fill: var(--gold); stroke: none; }
.mercury-illustration svg path { fill: var(--bg); stroke: var(--gold); stroke-width: 1.2; }
.mercury-illustration > span { color: var(--gold); font: 110px/1 Georgia, serif; transform: translateY(-4px); }
.mercury-illustration > small { position: absolute; right: 21%; top: 19%; color: #b58b9e; font: 30px Georgia, serif; }
.mercury-now { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; padding: 35px 40px; background: linear-gradient(120deg, #30212f, #241b28); border: 1px solid #745063; border-radius: 10px; }
.mercury-now[data-phase=direct] { border-color: #5b7266; }
.mercury-answer h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; margin: 16px 0 12px; max-width: 540px; }
.mercury-answer > p:not(.eyebrow) { color: var(--muted); max-width: 510px; }
.mercury-phase { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; padding: 5px 10px; margin-top: 16px; border: 1px solid #a27685; color: #f2d3d8; border-radius: 4px; }
.mercury-phase::before { content: ''; width: 5px; height: 5px; border-radius: 100%; background: currentColor; }
.mercury-now[data-phase=direct] .mercury-phase { border-color: #71897a; color: #c7dcc8; }
.mercury-asof { font-size: 10px; margin-top: 20px; }
.mercury-countdown { align-self: center; border-left: 1px solid #634455; padding-left: 38px; }
.mercury-day-count { margin: 7px 0 9px; font: 23px var(--serif); color: var(--gold); }
.mercury-day-count strong { font-weight: 400; font-size: 78px; line-height: 1.1; letter-spacing: -3px; }
.mercury-countdown > time { font-size: 12px; }
.mercury-countdown-note { font: italic 19px var(--serif); color: var(--muted); margin-top: 18px; }
.mercury-timezone { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 0 42px; font-size: 11px; color: var(--muted); }
.mercury-timezone label { display: flex; align-items: center; gap: 10px; }
.mercury-timezone label[hidden] { display: none; }
.mercury-timezone select, .mercury-calendar select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 8px 28px 8px 10px; border-radius: 4px; max-width: 100%; }
.mercury-noscript, .mercury-live-error { color: var(--gold); font-size: 12px; margin-bottom: 28px; }
.mercury-cycle { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.mercury-cycle .section-heading { margin-bottom: 10px; }
.mercury-cycle-signs { font-size: 12px; color: var(--gold); }
.mercury-section-deck { font-size: 13px; color: var(--muted); }
.mercury-milestones { padding: 0; margin: 27px 0 24px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.mercury-milestones li { border-top: 2px solid #564454; padding: 18px 8px 0 0; position: relative; }
.mercury-milestones li.is-current { border-color: var(--gold); }
.milestone-number { display: block; font-size: 10px; color: #a88f9f; margin-bottom: 10px; }
.mercury-milestones h3 { font-size: 23px; line-height: 1.1; margin-bottom: 10px; }
.mercury-milestones time { display: block; font-size: 11px; }
.mercury-milestones li > p { font-size: 10px; color: var(--muted); margin-top: 7px; }
.mercury-shadow-note { color: var(--muted); font-size: 12px; max-width: 750px; }
.mercury-next-period { color: var(--gold); font-size: 12px; margin-top: 18px; }
.mercury-calendar { margin: 40px 0 46px; }
.mercury-calendar-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.mercury-calendar h2 { font-size: 37px; line-height: 1.1; margin-top: 9px; }
.mercury-calendar form { display: flex; gap: 8px; align-items: end; flex-shrink: 0; }
.mercury-calendar form label { font-size: 10px; color: var(--muted); }
.mercury-calendar select { display: block; margin-top: 5px; font-size: 12px; }
.mercury-calendar form button { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper); padding: 8px 13px; border-radius: 4px; font-size: 12px; min-height: 38px; }
.mercury-calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mercury-period { padding: 23px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.mercury-period[data-current=true] { border-color: #a77a8c; }
.mercury-period header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.mercury-period-number { color: var(--gold); font: italic 30px var(--serif); }
.mercury-period-state { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.mercury-period[data-current=true] .mercury-period-state { color: #f2d3d8; }
.mercury-period h3 { font-size: 29px; line-height: 1.1; margin-bottom: 14px; }
.mercury-period-range { display: flex; flex-direction: column; font-size: 16px; }
.mercury-period-range > span { font: italic 16px var(--serif); color: var(--muted); margin: 1px 0; }
.mercury-period details { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.mercury-period summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; cursor: pointer; list-style: none; font-size: 10px; color: var(--gold); }
.mercury-period summary::-webkit-details-marker, .mercury-faq summary::-webkit-details-marker { display: none; }
.mercury-period details[open] summary > span, .mercury-faq details[open] summary > span { transform: rotate(45deg); }
.mercury-period dl { margin: 16px 0 0; font-size: 10px; }
.mercury-period dl > div + div { margin-top: 12px; }
.mercury-period dt { color: var(--muted); }
.mercury-period dd { margin: 2px 0 0; }
.mercury-calendar-note { margin-top: 16px; color: var(--muted); font-size: 10px; }
.mercury-reflection { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; padding: 38px 40px; border: 1px solid var(--line); border-radius: 8px; background: #231a26; margin-bottom: 42px; }
.mercury-reflection h2 { font-size: 45px; line-height: 1.05; margin: 17px 0 20px; }
.mercury-reflection > div > p:not(.eyebrow) { font-size: 12px; color: var(--muted); max-width: 440px; margin-top: 11px; }
.mercury-reflection h3 { font-size: 26px; margin: 6px 0 20px; }
.mercury-reflection ul { padding: 0; margin: 0; list-style: none; }
.mercury-reflection li { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.mercury-reflection li > span { font-size: 10px; color: var(--gold); padding-top: 3px; }
.mercury-reflection li strong { font: 21px var(--serif); }
.mercury-reflection li p { font-size: 11px; color: var(--muted); margin-top: 5px; }
.mercury-faq { max-width: 900px; }
.mercury-faq h2 { font-size: 37px; margin-bottom: 20px; }
.mercury-faq details { border-top: 1px solid var(--line); padding: 17px 0; }
.mercury-faq summary { font: 23px var(--serif); display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.mercury-faq summary > span { color: var(--gold); }
.mercury-faq details p { color: var(--muted); font-size: 12px; max-width: 760px; margin-top: 15px; }
.mercury-faq a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.mercury-crosslinks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 25px; margin: 14px 0 42px; border-top: 1px solid var(--line); }
.mercury-crosslinks .quiet-link { font-size: 12px; }
@media (max-width: 950px) {
  .mercury-intro { gap: 20px; grid-template-columns: 1.4fr 1fr; }
  .mercury-intro h1 { font-size: 73px; }
  .mercury-now { gap: 22px; padding: 28px; }
  .mercury-countdown { padding-left: 24px; }
  .mercury-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .mercury-calendar-heading { flex-wrap: wrap; }
  .mercury-calendar h2 { font-size: 33px; }
  .mercury-period { padding: 18px; }
  .mercury-period h3 { font-size: 25px; }
  .mercury-reflection { gap: 30px; padding: 28px; }
}
@media (max-width: 700px) {
  .mercury-intro { display: block; position: relative; padding: 31px 0 28px; }
  .mercury-intro .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .mercury-intro h1 { font-size: 67px; position: relative; z-index: 1; margin: 20px 0 17px; }
  .mercury-intro > div > p:last-child { position: relative; z-index: 1; font-size: 12px; max-width: 300px; }
  .mercury-illustration { position: absolute; width: 155px; right: -10px; top: 53px; opacity: .32; }
  .mercury-illustration > span { font-size: 61px; }
  .mercury-illustration > small { font-size: 20px; }
  .mercury-now { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px; }
  .mercury-answer h2 { font-size: 34px; max-width: 320px; }
  .mercury-answer > p:not(.eyebrow) { font-size: 12px; }
  .mercury-answer .mercury-asof { font-size: 9px !important; }
  .mercury-countdown { border-left: 0; border-top: 1px solid #634455; padding: 22px 0 0; }
  .mercury-day-count strong { font-size: 66px; }
  .mercury-countdown > time { font-size: 11px; }
  .mercury-countdown-note { margin-top: 12px; font-size: 18px; }
  .mercury-timezone { flex-wrap: wrap; gap: 12px; margin: 17px 0 33px; font-size: 10px; }
  .mercury-timezone label { width: 100%; justify-content: space-between; }
  .mercury-timezone select { font-size: 11px; max-width: 230px; min-height: 40px; }
  .mercury-cycle .section-heading h2, .mercury-calendar h2, .mercury-faq h2 { font-size: 30px; }
  .mercury-cycle-signs { font-size: 10px; }
  .mercury-section-deck { font-size: 11px; }
  .mercury-milestones { gap: 24px 16px; }
  .mercury-milestones h3 { font-size: 21px; }
  .mercury-milestones time { font-size: 10px; }
  .mercury-milestones li > p { font-size: 9px; }
  .mercury-shadow-note, .mercury-next-period { font-size: 11px; }
  .mercury-calendar-heading { gap: 20px; }
  .mercury-calendar form { width: 100%; }
  .mercury-calendar form label { flex: 1; }
  .mercury-calendar select { width: 100%; min-height: 42px; }
  .mercury-calendar form button { min-height: 42px; }
  .mercury-calendar-grid { grid-template-columns: 1fr; gap: 12px; }
  .mercury-period { padding: 23px; }
  .mercury-period header { margin-bottom: 13px; }
  .mercury-period h3 { font-size: 30px; }
  .mercury-period-range { flex-direction: row; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; }
  .mercury-period summary { font-size: 11px; min-height: 28px; }
  .mercury-period dl { font-size: 11px; }
  .mercury-reflection { grid-template-columns: 1fr; padding: 25px 23px; gap: 28px; }
  .mercury-reflection h2 { font-size: 39px; }
  .mercury-faq summary { font-size: 21px; line-height: 1.2; min-height: 30px; }
  .mercury-faq details p { font-size: 11px; }
  .mercury-crosslinks { margin-bottom: 28px; }
}
@media (max-width: 365px) {
  .mercury-intro h1 { font-size: 59px; }
  .mercury-illustration { width: 135px; }
  .mercury-now { padding: 22px 18px; }
  .mercury-answer h2 { font-size: 31px; }
  .mercury-period-range { font-size: 12px; }
  .mercury-milestones h3 { font-size: 19px; }
}