/* A paper split-flap calendar, integrated with the painted landscape. */
.calendar-help{position:relative;display:flex;align-items:flex-start;gap:3px;text-align:left;z-index:10}
.calendar-name{font:22px var(--zh);letter-spacing:.18em;color:var(--red)}
.calendar-help-button{display:flex;align-items:center;justify-content:center;position:relative;width:28px;height:28px;margin-top:-7px;padding:0;border:0;background:transparent;color:#8c6248;cursor:help}
.calendar-help-button>span{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #9e8063;border-radius:50%;font:11px/1 var(--sans)}
.calendar-help-button:hover>span,.calendar-help-button:focus-visible>span{background:#9c4232;color:#fff5e5;border-color:#9c4232}
.calendar-help-button:focus-visible{outline:2px solid #9c4232;outline-offset:2px;border-radius:3px}
.calendar-help-tip{position:absolute;left:50%;transform:translateX(-50%);top:100%;width:320px;max-width:calc(100vw - 100px);padding:19px 21px;background:#fff9ec;border:1px solid #c6b28f;border-radius:5px;box-shadow:0 12px 30px #263c3029;color:#3e4b3e;font:13px/1.7 var(--sans);letter-spacing:0;cursor:auto}
.calendar-help-tip strong{display:block;font:20px/1.25 var(--serif);color:#29453d;margin-bottom:10px}
.calendar-help-tip p{margin:0 0 9px}.calendar-help-tip p:last-child{margin-bottom:0}
.calendar-help-tip em{font-style:italic;color:#9c4232}
@media(max-width:650px){.calendar-name{font-size:20px}.calendar-help-button{width:32px;height:32px;margin-top:-9px}.calendar-help-tip{padding:16px 18px}}
.journey-scroll .form-aside.birth-calendar{padding:36px clamp(22px,3vw,52px) 28px;background:linear-gradient(135deg,#f6efdfed,#eee4cde8);border:1px solid #c4ae8766;box-shadow:0 18px 48px #233d3020;text-align:center;min-width:0}
.birth-calendar>.eyebrow{justify-content:center;font-size:10px;letter-spacing:.16em;color:#64563d;margin-bottom:17px}
.journey-scroll .birth-calendar h2{font-size:clamp(29px,2.7vw,44px);line-height:1.16;margin:0 0 30px;letter-spacing:-.9px}
.journey-scroll .birth-calendar .lunar-panel{max-width:none;min-height:0;margin:0;padding:0;border:0;background:none}
.calendar-masthead{display:flex;justify-content:center;align-items:center;padding-bottom:18px;border-bottom:1px solid #ad987866;margin-bottom:28px}
.calendar-masthead>span:first-child{font:22px var(--zh);letter-spacing:.24em;color:var(--red)}
.calendar-masthead>span:last-child{font-size:9px;letter-spacing:.17em;color:#726149}
.calendar-date{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.calendar-unit{min-width:0}
.flip-tile{position:relative;height:clamp(95px,9vw,150px);perspective:650px;isolation:isolate;border-radius:5px;background:#f9f3e6;box-shadow:0 2px 0 #d7c9ac,0 5px 0 #eee3ca,0 6px 0 #c9b795,0 10px 16px #57452616;font:clamp(27px,3vw,52px)/1 var(--zh);color:#29453d}
.flip-tile:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#a8957540;z-index:5;box-shadow:0 1px 0 #fff8}
.flip-value,.flip-leaf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:5px;background:linear-gradient(#f2e9d5 0%,#f7efdf 49.5%,#fcf7eb 50%,#f8f1e1 100%);backface-visibility:hidden}
.flip-leaf{transform-origin:center center;pointer-events:none}
.flip-out{clip-path:inset(0 0 50% 0);z-index:3;animation:calendar-out 280ms ease-in both}
.flip-in{clip-path:inset(50% 0 0 0);z-index:4;animation:calendar-in 330ms 280ms cubic-bezier(.2,.7,.3,1) both}
.long-value{font-size:clamp(22px,2.3vw,38px)}
.calendar-label{display:block;margin-top:18px;font-size:9px;font-weight:500;letter-spacing:.14em;color:#786950}
.calendar-date .calendar-unit:last-child .flip-tile{color:#9c4232}
.calendar-translation{font-size:13px;line-height:1.7;color:var(--red);margin:22px 0 0;min-height:44px}
.calendar-time{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:330px;margin:23px auto 0;padding-top:23px;border-top:1px solid #ac98774d}
.calendar-time .flip-tile{height:90px;font-size:31px;background:#27483f;color:#f3e9d2;box-shadow:0 2px 0 #1f3932,0 5px 0 #597064,0 6px 0 #29493e,0 10px 16px #233c301c}
.calendar-time .flip-value,.calendar-time .flip-leaf{background:linear-gradient(#27453d 0%,#294a40 49.5%,#33564b 50%,#2f5147 100%)}
.calendar-time .long-value{font-size:26px}
.calendar-time-detail{font-size:12px;color:var(--red);margin:18px 0 0}
.birth-calendar .lunar-basis{font-size:16px;line-height:1.75;color:#514936;max-width:370px;margin:17px auto 0;min-height:38px}
.birth-calendar .lunar-footnote{margin:22px 0 0;border-color:#ad98784d;padding-top:15px;font-size:10px;color:#796d57}
.journey-scroll .birth-calendar .privacy-note{font-size:16px;line-height:1.75;max-width:none;margin:20px auto 0;color:#514936}
.calendar-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes calendar-out{from{transform:rotateX(0);filter:brightness(1)}to{transform:rotateX(-90deg);filter:brightness(.75)}}
@keyframes calendar-in{from{transform:rotateX(90deg);filter:brightness(.75)}to{transform:rotateX(0);filter:brightness(1)}}
@media(max-width:900px){.journey-scroll .form-aside.birth-calendar{padding:25px 18px}.calendar-date{gap:8px}.calendar-masthead>span:last-child{font-size:8px}.calendar-label{font-size:8px;letter-spacing:.08em}.calendar-time{gap:10px}.calendar-time .flip-tile{font-size:27px}.calendar-time .long-value{font-size:23px}}
@media(max-width:650px){.journey-scroll .birth-calendar h2{font-size:30px;margin-bottom:24px}.birth-calendar>.eyebrow{font-size:8px}.calendar-masthead{margin-bottom:20px}.flip-tile{height:106px;font-size:32px}.long-value{font-size:25px}.calendar-translation{font-size:12px;margin-top:17px;min-height:0}.calendar-time{max-width:270px;margin-top:18px;padding-top:18px}.calendar-time .flip-tile{height:72px}.birth-calendar .lunar-basis{min-height:0}.birth-calendar .lunar-footnote{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.flip-leaf{display:none}}

/* Form first, followed by a horizontal calendar strip. */
.journey-scroll .begin-section{display:flex;flex-direction:column;align-items:stretch;gap:26px;width:88%;max-width:1100px;margin:0 auto;padding:45px 0 70px}
.journey-scroll #birth-form{width:100%}
.journey-scroll .form-aside.birth-calendar{position:static;width:100%;padding:28px 36px 22px}
.birth-calendar>.eyebrow{margin:0 0 10px}
.journey-scroll .birth-calendar h2{font-size:30px;margin:0 0 22px}
.birth-calendar h2 br{display:none}
.birth-calendar h2 em:before{content:' '}
.calendar-masthead{margin-bottom:22px;padding-bottom:14px}
#lunar-output{display:grid;grid-template-columns:3fr 2fr;column-gap:24px;align-items:start}
.calendar-date{grid-column:1;grid-row:1;gap:14px}
.calendar-translation{grid-column:1;grid-row:2;margin:18px 0 0;min-height:0}
#lunar-clock{grid-column:2;grid-row:1 / span 2}
.calendar-time{max-width:none;margin:0;padding:0;border:0;gap:14px}
.flip-tile,.calendar-time .flip-tile{height:120px;font-size:40px}
.long-value,.calendar-time .long-value{font-size:32px}
.calendar-time-detail{margin:18px 0 0;line-height:1.7}
.birth-calendar .lunar-basis{grid-column:1 / -1;grid-row:3;max-width:700px;min-height:0;margin:18px auto 0}
#lunar-output:has(#lunar-clock[hidden]){grid-template-columns:1fr}
#lunar-output:has(#lunar-clock[hidden]) .calendar-date{width:100%;max-width:590px;justify-self:center}
.birth-calendar .lunar-footnote{margin-top:18px;padding-top:12px}
.journey-scroll .birth-calendar .privacy-note{margin-top:10px}
@media(max-width:900px){.journey-scroll .form-aside.birth-calendar{padding:25px 22px}#lunar-output{column-gap:16px}.calendar-date,.calendar-time{gap:10px}.flip-tile,.calendar-time .flip-tile{height:100px;font-size:32px}.long-value,.calendar-time .long-value{font-size:25px}}
@media(max-width:650px){.journey-scroll .begin-section{gap:20px;padding:30px 0 40px}.journey-scroll .form-aside.birth-calendar{padding:24px 18px}.journey-scroll .birth-calendar h2{font-size:26px;line-height:1.2}.birth-calendar h2 br{display:block}#lunar-output{display:flex;flex-direction:column;align-items:stretch}.calendar-date{width:100%}.calendar-time{max-width:280px;margin:22px auto 0;padding-top:20px;border-top:1px solid #ac98774d}.flip-tile,.calendar-time .flip-tile{height:90px;font-size:30px}.long-value,.calendar-time .long-value{font-size:24px}.calendar-translation{margin-top:18px}.calendar-label{font-size:8px}.calendar-time-detail{font-size:11px}.birth-calendar .lunar-basis{margin-top:18px}}

/* Pronunciation follows each changing calendar value. */
.calendar-pinyin{display:block;margin-top:15px;color:#5b604f;font:14px/1.5 var(--sans);letter-spacing:.025em}
.calendar-pinyin:not([hidden])+.calendar-label{margin-top:5px}
@media(max-width:650px){.calendar-pinyin{font-size:12px;letter-spacing:0}}