/* Astraea within Louforeal — a small collection of celestial reading folios. */
#page-astro .ag-content { position: relative; isolation: isolate; }
#page-astro .ag-introduction {
  position: relative;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(50px,7vw,115px);
  padding-block: 78px 76px;
  border-color: #b3c4df30;
}
#page-astro .ag-introduction::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border: 1px solid #cab483;
  border-radius: 50%;
  transform: translateY(-50%);
}
#page-astro .ag-introduction h3 { max-width: 550px; line-height: 1.08; }
#page-astro .ag-introduction h3 em { color: #adc2e2; }
#page-astro .ag-introduction-copy { max-width: 490px; }
#page-astro .ag-introduction-copy > p { color: #c4ccdc; font-size: 15px; line-height: 1.85; }
#page-astro .ag-introduction-copy .ag-text-link { color: #eee5d3; border-color: #bca47d80; }
#page-astro .ag-readings {
  position: relative;
  isolation: isolate;
  padding-top: 74px;
  scroll-margin-top: 32px;
  --ag-reading-accent: #d5b779;
}
#page-astro .ag-readings::before {
  content: "";
  position: absolute;
  inset: 15% -4% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 26% 61%,#2f5b932b,transparent 55%);
}
#page-astro .ag-readings[data-active-reading="synastry"] { --ag-reading-accent: #daa696; }
#page-astro .ag-readings[data-active-reading="written"] { --ag-reading-accent: #c0bcd5; }
#page-astro .ag-readings-heading { margin-bottom: 41px; }
#page-astro .ag-readings-heading h3 em { color: #b5c7e2; }
#page-astro .ag-readings-heading > p { max-width: 310px; color: #b5c0d4; font-size: 13px; }
#page-astro .ag-tabs { border-color: #bac9df35; gap: 28px; }
#page-astro .ag-tabs button {
  align-items: flex-start;
  gap: 18px;
  min-height: 106px;
  padding: 23px 12px 24px 0;
  border-left: 0;
  color: #aebcd4;
  background: transparent;
}
#page-astro .ag-tabs button::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,var(--ag-reading-accent),#b4c5de30);
  transform-origin: left;
  transform: scaleX(.4);
  transition: opacity .25s,transform .35s;
}
#page-astro .ag-tabs button[aria-selected="true"] { background: transparent; color: #f0e7d7; }
#page-astro .ag-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
#page-astro .ag-tabs button:hover { background: transparent; color: #f4ecdf; }
#page-astro .ag-tab-number { padding-top: 9px; color: #a9b6cb; font-size: 10px; letter-spacing: 1px; }
#page-astro .ag-tabs button[aria-selected="true"] .ag-tab-number { color: var(--ag-reading-accent); }
#page-astro .ag-tabs button > span:last-child { font-size: 33px; }
#page-astro .ag-tabs small { color: #aab7cc; font-size: 11px; margin-top: 7px; }
#page-astro .ag-panels { padding-top: 54px; }
#page-astro .ag-reading-panel {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(48px,7vw,115px);
  min-height: 565px;
  padding: 18px 3% 16px 5%;
}
#page-astro .ag-reading-panel[hidden] { display: none; }
#page-astro .ag-reading-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  transform: rotate(-3deg);
  transition: transform .55s ease;
}
#page-astro .ag-reading-art::before,
#page-astro .ag-reading-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
#page-astro .ag-reading-art::before {
  inset: 19% -16% 17%;
  border: 1px solid #b8c8e159;
  transform: rotate(-32deg);
  background: radial-gradient(circle at 9% 64%,#eadfc8 0 2px,transparent 3px),radial-gradient(circle at 91% 30%,#d0b581 0 3px,transparent 4px);
}
#page-astro .ag-reading-art::after {
  inset: 8% -6% 10%;
  border: 1px solid #c5aa744d;
  transform: rotate(24deg);
}
#page-astro .ag-reading-art img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: center;
  padding: 7px;
  border: 1px solid #c5cfe45e;
  border-radius: 49% 49% 5px 5px / 39% 39% 5px 5px;
  background: #1a2842;
  box-shadow: 16px 23px 45px #060d1d52,5px 6px 0 #8f9db712,7px 8px 0 #b8c8e14a;
}
#page-astro .ag-reading-art figcaption {
  position: relative;
  z-index: 1;
  width: calc(100% - 10px);
  margin: -17px 0 0 24px;
  padding: 18px 22px 17px;
  background: linear-gradient(100deg,#e9dfcb,#f0e7d7 48%,#dfd3be);
  color: #3c4051;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1.6px;
  border: 1px solid #f2e9d9;
  border-radius: 1px 2px 3px 1px;
  box-shadow: 2px 7px 14px #050b1a45;
  transform: rotate(5deg);
}
#page-astro #ag-panel-synastry .ag-reading-art { transform: rotate(3deg); }
#page-astro #ag-panel-synastry .ag-reading-art figcaption { transform: rotate(-5deg); margin-left: -8px; }
#page-astro #ag-panel-written .ag-reading-art { transform: rotate(-2deg); }
#page-astro .ag-reading-copy { position: relative; max-width: 510px; padding: 0 0 24px; }
#page-astro .ag-reading-copy .ag-eyebrow { color: var(--ag-reading-accent); }
#page-astro .ag-reading-copy h4 { margin: 22px 0 25px; font-size: clamp(43px,4.1vw,60px); line-height: 1.05; color: #ede7d9; }
#page-astro .ag-reading-copy h4 em { color: var(--ag-reading-accent); }
#page-astro .ag-reading-copy > p:not(.ag-eyebrow):not(.ag-reading-note) { max-width: 425px; color: #c1cbdd; font-size: 15px; line-height: 1.85; }
#page-astro .ag-reading-details { max-width: 425px; padding: 21px 0; margin: 26px 0 26px; border-color: #bdcbe02d; }
#page-astro .ag-reading-details span { color: #b9c5d9; font-size: 12px; }
#page-astro .ag-reading-details strong { color: #eee4cf; font-size: 34px; }
#page-astro .ag-reading-copy .ag-primary { border-radius: 40px; padding: 13px 27px; border-color: #f1e9d5; background: #eee5d1; color: #22314a; box-shadow: 0 8px 25px #07102230; }
#page-astro .ag-reading-copy .ag-primary:hover { background: #fff5e1; box-shadow: 0 12px 28px #07102250; }
#page-astro .ag-reading-note { color: #a6b5ce; font-size: 10px; max-width: 425px; }
#page-astro .ag-closing { position: relative; margin-top: 73px; padding-block: 47px 55px; border-color: #b9c8df36; }
#page-astro .ag-closing::before { content: ""; position: absolute; top: -4px; right: 23%; width: 7px; height: 7px; border-radius: 50%; background: #d4bd8b; box-shadow: 0 0 15px #d4bd8b40; }
#page-astro .ag-closing > p { font-size: 38px; color: #e8e4db; }
#page-astro .ag-closing > p em { color: #a9c2e4; }
#page-astro .ag-closing .ag-text-link { color: #eee5d3; border-color: #c1a57580; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  #page-astro .ag-reading-art:hover { transform: rotate(-1deg) translateY(-5px); }
  #page-astro #ag-panel-synastry .ag-reading-art:hover { transform: rotate(1deg) translateY(-5px); }
  #page-astro #ag-panel-written .ag-reading-art:hover { transform: rotate(0) translateY(-5px); }
}
@media (min-width:801px) and (max-width:1100px) {
  #page-astro .ag-introduction { gap: 42px; }
  #page-astro .ag-introduction-copy > p { font-size: 14px; }
  #page-astro .ag-reading-panel { gap: 45px; padding-inline: 4% 1%; min-height: 510px; }
  #page-astro .ag-reading-art img { height: 420px; }
  #page-astro .ag-reading-copy h4 { font-size: 43px; }
  #page-astro .ag-reading-copy > p:not(.ag-eyebrow):not(.ag-reading-note) { font-size: 14px; }
  #page-astro .ag-tabs { gap: 20px; }
  #page-astro .ag-tabs button > span:last-child { font-size: 30px; }
}
@media (max-width:800px) {
  #page-astro .ag-introduction { grid-template-columns: 1fr; gap: 23px; padding-block: 42px 44px; }
  #page-astro .ag-introduction-copy > p { font-size: 14px; line-height: 1.85; }
  #page-astro .ag-readings { padding-top: 44px; }
  #page-astro .ag-readings-heading { margin-bottom: 27px; }
  #page-astro .ag-readings-heading > p { max-width: none; font-size: 13px; }
  #page-astro .ag-tabs { gap: 15px; }
  #page-astro .ag-tabs button { min-height: 102px; padding: 19px 0 18px; gap: 7px; flex-direction: column; }
  #page-astro .ag-tab-number { padding-top: 0; font-size: 9px; }
  #page-astro .ag-tabs button > span:last-child { font-size: 25px; }
  #page-astro .ag-tabs small { font-size: 9px; max-width: 98px; line-height: 1.45; }
  #page-astro .ag-panels { padding-top: 41px; }
  #page-astro .ag-reading-panel { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 0; }
  #page-astro .ag-reading-art { width: min(82%,325px); }
  #page-astro .ag-reading-art img { height: auto; aspect-ratio: .85; padding: 6px; border-radius: 49% 49% 4px 4px / 39% 39% 4px 4px; }
  #page-astro .ag-reading-art figcaption { width: calc(100% + 7px); padding: 16px 17px; margin: -15px 0 0 6px; font-size: 8px; letter-spacing: 1.2px; }
  #page-astro #ag-panel-synastry .ag-reading-art figcaption { margin-left: -10px; }
  #page-astro .ag-reading-art::before { inset: 20% -12% 18%; }
  #page-astro .ag-reading-art::after { inset: 10% -5% 10%; }
  #page-astro .ag-reading-copy { max-width: none; padding-bottom: 0; }
  #page-astro .ag-reading-copy h4 { font-size: clamp(38px,10vw,49px); margin: 18px 0 20px; }
  #page-astro .ag-reading-copy > p:not(.ag-eyebrow):not(.ag-reading-note) { max-width: none; font-size: 14px; line-height: 1.85; }
  #page-astro .ag-reading-details { max-width: none; margin-block: 23px; padding-block: 20px; }
  #page-astro .ag-reading-details strong { font-size: 31px; }
  #page-astro .ag-reading-details span { font-size: 11px; max-width: 220px; }
  #page-astro .ag-reading-copy .ag-primary { font-size: 20px; padding: 12px 25px; }
  #page-astro .ag-reading-note { font-size: 10px; }
  #page-astro .ag-closing { margin-top: 44px; padding-block: 33px 37px; }
  #page-astro .ag-closing > p { font-size: 31px; }
  #page-astro .ag-closing .ag-text-link { font-size: 22px; }
}
@media (max-width:359px) {
  #page-astro .ag-tabs { gap: 11px; }
  #page-astro .ag-tabs button > span:last-child { font-size: 23px; }
  #page-astro .ag-tabs small { font-size: 8px; }
  #page-astro .ag-reading-art { width: 83%; }
  #page-astro .ag-reading-art figcaption { font-size: 7px; padding-inline: 13px; }
  #page-astro .ag-reading-copy h4 { font-size: 37px; }
  #page-astro .ag-reading-details { gap: 15px; }
  #page-astro .ag-reading-details span { max-width: 175px; }
}
@media (prefers-reduced-motion:reduce) {
  #page-astro .ag-reading-art,
  #page-astro .ag-tabs button::after { transition: none; }
}