:root{
  --paper:#f4ede4; --ink:#2f2433; --soft:#5d505a; --faint:#7a6560; --line:#e4d8cc;
  --rose:#b04d68; --rose-d:#6e2238;
  --jade:#55796d; --jade-d:#213831;
  --gold:#936a30; --gold-d:#3d2910;
  --iris:#7668a3; --iris-d:#382f5b;
  --plum:#94607f; --plum-d:#52304a;
  --river:#4b778c; --river-d:#1f3b49;
  --clay:#a46142; --clay-d:#572a1a;
  --moss:#6b7748; --moss-d:#30391d;
  --teal:#397c7e; --teal-d:#183c3d;
  --sky:#4774ad; --sky-d:#203755;
  --slate:#5a6378; --slate-d:#272c39;
  --indigo:#4a4b8c; --indigo-d:#21224a;
  --vermilion:#a64835; --vermilion-d:#531f15;
  --leaf:#3f7a52; --leaf-d:#1b3d26;
  --coal:#4d3f38; --coal-d:#231b17;
  --night:#2f2433; --night-d:#140e17;
  --berry:#8c3a63; --berry-d:#431b30; --pine:#2f5d50; --pine-d:#142a24;
  --lilac:#7d6a9e; --lilac-d:#3a2f50;
  --display:'Poiret One','Josefin Sans',sans-serif;
  --caps:'Josefin Sans',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{all:unset;cursor:pointer}
.page{max-width:800px;margin:0 auto;padding:12vh 20px 0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* masthead */
.mast{text-align:center}
.mark{display:inline-block;font-family:var(--display);-webkit-text-stroke:.35px currentColor;font-weight:400;font-size:44.5px;letter-spacing:.26em;padding-left:.26em;line-height:1;color:var(--night)}
.mast small{display:block;font-style:italic;font-size:17.5px;color:var(--soft);margin-top:10px}
.orn{display:block;width:90px;height:12px;margin:18px auto 22px;color:var(--faint)}

/* filters */
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 19px;margin-bottom:34px;font-family:var(--caps);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.filters button{color:var(--faint);transition:color .2s}
.filters button:hover,.filters button[aria-pressed=true]{color:var(--ink)}

/* the deck */
.deck{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;max-width:590px;margin-inline:auto}
.card{position:relative;aspect-ratio:5/7;perspective:900px}
.card[hidden]{display:none}
.face{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px;overflow:hidden;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 18px -14px rgba(47,30,40,.65)}
.front{justify-content:flex-end;background:var(--c);color:#fff}
.back{cursor:pointer;transform:rotateY(180deg);background:#fbf6ee;border:1px solid var(--line);border-top:3px solid var(--c)}
/* a paper flip: the card lifts off the table as it turns, then settles */
.card,.tcard{perspective:1100px}
.face,.tface{transition:transform .8s cubic-bezier(.45,.05,.2,1),box-shadow .4s}
.lift{animation:lift .8s cubic-bezier(.45,.05,.2,1)}
.lift .face,.lift .tface{animation:lifted .8s cubic-bezier(.45,.05,.2,1)}
@keyframes lift{0%{transform:none}45%{transform:translateY(-6px) scale(1.018) rotate(-.7deg)}80%{transform:translateY(-1px) scale(1.002) rotate(.12deg)}100%{transform:none}}
@keyframes lifted{45%{box-shadow:0 22px 26px -18px rgba(30,15,25,.5)}}
.card.flipped .front{transform:rotateY(-180deg)}
.card.flipped .back{transform:rotateY(0)}
.card:not(.flipped) .front:hover{transform:translateY(-3px);box-shadow:0 20px 26px -16px rgba(47,30,40,.7)}
.etch{position:absolute;inset:-12%;width:124%;height:124%;z-index:-1;color:var(--d);opacity:.5;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.front:hover .etch{transform:rotate(8deg) scale(1.05)}
.num{position:absolute;top:10px;left:12px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.3em}
.back .num{color:var(--d)}
.emb{flex:0 1 50px;min-height:0;width:100%;margin:auto 0 8px;color:#fbf3e6;opacity:.92;filter:drop-shadow(0 1px 6px rgba(0,0,0,.15))}
.front h2{font-family:var(--display);-webkit-text-stroke:.6px currentColor;font-weight:400;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.front p{font-style:italic;font-size:12.5px;line-height:1.3;margin-top:5px;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.like{font-style:italic;color:var(--soft)}
.like span{font-family:var(--caps);font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--d);margin-right:3px}
.back .like{margin-top:24px;font-size:13.5px;line-height:1.35}
.back .like span{display:block;margin-bottom:4px}
.visit{margin-top:auto;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--d);border-bottom:1px solid currentColor;align-self:flex-start;word-break:break-all}
.visit:hover{opacity:.7}

/* wildcard: play the deck */
.filters .wild{color:var(--gold-d);margin-left:6px}
.filters .wild:hover{color:var(--rose-d)}
body.ready{transition:background-color .9s,color .9s}
body.tarot{--ink:#f2e6dc;--soft:#c2aebb;--faint:#907a92;--gold:#c99b5b;--line:#432f45;background:#170f1b radial-gradient(ellipse 70% 50% at 50% 35%,#3b2238,transparent 70%) fixed;color:var(--ink)}
body.tarot::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 78% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 64% 72%,#fff6,transparent),radial-gradient(1px 1px at 26% 82%,#fff7,transparent),radial-gradient(1px 1px at 90% 48%,#fff8,transparent),radial-gradient(1.5px 1.5px at 40% 40%,#fff5,transparent),radial-gradient(1px 1px at 6% 56%,#fff7,transparent),radial-gradient(1px 1px at 52% 6%,#fff8,transparent);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.35}}
body.tarot .mark{color:var(--ink)}
body.tarot .orn{color:var(--gold)}
body.tarot .filters button[data-f]{display:none}
body.tarot .filters .wild{color:var(--gold);margin:0}
body.tarot footer{color:var(--faint)}

.table{text-align:center}
.table[hidden],.deck[hidden]{display:none}
.ask{font-style:italic;font-size:17.5px;color:var(--soft);margin-bottom:22px}
.table.dealing .ask{visibility:hidden}
.stack{position:relative;display:block;width:96px;aspect-ratio:5/7;margin:0 auto;transition:opacity .5s}
.stack span{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#b04d68;border:3px solid #f4ede4;box-shadow:0 14px 24px -14px rgba(0,0,0,.7)}
.stack span:nth-child(1){transform:rotate(-7deg) translate(-6px,4px)}
.stack span:nth-child(2){transform:rotate(5deg) translate(5px,2px)}
.stack .top{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.stack:hover .top{transform:translateY(-6px) rotate(-2deg)}
.stack.empty{opacity:.18;pointer-events:none}
.cb svg{position:absolute;inset:0;width:100%;height:100%}
.swatches{display:flex;justify-content:center;gap:10px;margin-top:26px}
.table.dealing .swatches{display:none}
.swatches button{position:relative;width:30px;aspect-ratio:5/7;border-radius:3px;overflow:hidden;opacity:.55;transition:transform .3s,opacity .3s,box-shadow .3s}
.swatches button:hover{opacity:.9;transform:translateY(-2px)}
.swatches button[aria-pressed=true]{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 1px var(--gold),0 8px 14px -8px #000}
.swatches svg{position:absolute;inset:0;width:100%;height:100%}

.spread{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:440px;margin:34px auto 0}
.slot{opacity:0;transform:translateY(-30px) scale(.9);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.slot.dealt{opacity:1;transform:none}
.tcard{position:relative;aspect-ratio:5/7;perspective:900px}
.tface{position:absolute;inset:0;border-radius:6px;overflow:hidden;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 30px -18px #000}
.tback{background:#b04d68;border:3px solid #f4ede4}
.tfront{transform:rotateY(180deg);background:#f4ede4;padding:6px}
.tcard.up .tback{transform:rotateY(-180deg)}
.tcard.up .tfront{transform:rotateY(0)}
.art{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:16px 10px;overflow:hidden;isolation:isolate;background:var(--c);color:#fff;border-radius:3px;transition:transform .6s}
.art .num{left:50%;transform:translateX(-50%);top:14px;letter-spacing:.25em;font-size:11px}
.art b{font-family:var(--display);-webkit-text-stroke:.35px currentColor;font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.slot.rev .art{transform:rotate(180deg)}
.slot.rev .pos::after{content:" · reversed"}
.pos{display:block;margin-top:12px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

.readout{max-width:540px;margin:34px auto 0;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
.readout.show{opacity:1;transform:none}
.readout p{font-size:17.5px;margin-bottom:10px}
.readout p b{font-weight:500}
.readout .close{font-style:italic;color:var(--soft);margin-top:18px}
.again{margin-top:22px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid currentColor;padding-bottom:2px}
.again:hover{color:var(--ink)}
.again[hidden]{display:none}

/* lately: a little log */
.lately{max-width:480px;width:100%;margin:0 auto}
.lately[hidden]{display:none}
.lately h3{font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:22px 0 8px;display:flex;align-items:center;gap:12px}
.lately h3:first-child{margin-top:4px}
.lately h3::after{content:"";flex:1;height:1px;background:var(--line)}
.lately p{display:flex;align-items:baseline;gap:14px;font-size:14px;line-height:1.45;margin-bottom:7px;padding-left:15px;position:relative}
.lately p::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--c);transform:rotate(45deg)}
.lately b{flex:none;width:132px;font-family:var(--display);-webkit-text-stroke:.6px currentColor;font-weight:400;font-size:14px;letter-spacing:.05em;color:var(--d);overflow:hidden;text-overflow:ellipsis}
.lately span{color:var(--ink)}
.lately span i{font-style:normal;color:var(--soft);padding:0 4px}

footer{text-align:center;padding:70px 0 34px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
footer .sound{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
footer .sound:hover,footer .contact:hover{color:var(--ink)}
footer .contact{transition:color .2s}
footer .sound[aria-pressed=false]{text-decoration:line-through}
footer i{font-family:var(--serif);font-size:13px;letter-spacing:0;text-transform:none}
.view{position:fixed;right:16px;bottom:14px;z-index:5;display:flex;align-items:center;gap:6px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);text-decoration:none;padding:6px 8px;transition:color .3s}
.view:hover{color:var(--ink)}
.view svg{width:13px;height:13px}
/* laptop frame: masthead, nav and footer stay put; only the middle scrolls */
@media (min-width:701px) and (min-height:560px){
  .page{height:100vh;min-height:0;padding-top:7vh}
  main{display:flex;flex-direction:column;min-height:0}
  .deck,.lately,.table,.planner .tab{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 36px),transparent)}
  .deck{align-content:start;padding:26px 14px 48px;margin:-12px auto 0;max-width:618px;width:100%}
  .deck{scrollbar-gutter:stable}
  .lately{padding:6px 0 40px}
  .table{padding:6px 0 40px}
  /* planner tabs scroll inside the frame like the deck; the lists inside them don't scroll on their own */
  .planner .tab{padding:6px 14px 48px;scrollbar-gutter:stable}
  .planner .tab .lately{flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0}
  .filters{margin-bottom:14px}
  footer{padding:18px 0 22px}
}
@media (max-width:700px){.lately p{white-space:normal;flex-wrap:wrap;gap:0 10px}.lately b{width:auto}
.deck{grid-template-columns:1fr 1fr;gap:14px}.face{padding:16px}.num{top:13px;left:16px}.front h2{font-size:19.5px}.front p{font-size:14px}.visit{font-size:9.5px}}
@media (max-width:480px){.mark{font-size:33.5px}.spread{gap:10px}.tfront{padding:4px}.art{padding:10px 4px}.art b{font-size:11px;letter-spacing:.04em}.art .num{font-size:9.5px;top:9px}.pos{font-size:9.5px;letter-spacing:.2em}.readout p{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* /all only: days of work per project, one week at a time */
.work{margin:4px 0 26px;padding:14px 16px 12px;background:#fbf6ee;border-radius:2px;box-shadow:0 1px 0 rgba(47,30,40,.04),0 8px 14px -12px rgba(47,30,40,.55)}
.work figcaption{display:flex;align-items:center;justify-content:space-between;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.work ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.work li{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:10px}
.work b{width:auto;font-family:var(--display);-webkit-text-stroke:.6px currentColor;font-weight:400;font-size:13px;letter-spacing:.05em;color:var(--d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.work .bar i{display:block;padding:0;height:100%;width:var(--w);background:var(--c);border-radius:4px;animation:grow .6s cubic-bezier(.2,.8,.3,1)}
@keyframes grow{from{width:0}}
.work em{font-family:var(--caps);font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:right}
@media (max-width:480px){.work li{grid-template-columns:92px 1fr 40px;gap:8px}}

/* today's quest: a fourth card after the reading, turned over by tap, sealed in wax when done */
.quest{display:flex;flex-direction:column;align-items:center;margin:40px auto 0;opacity:0;transform:translateY(-20px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.quest[hidden]{display:none}
.quest.in{opacity:1;transform:none}
.qcard{position:relative;display:block;width:min(300px,82vw);aspect-ratio:7/5;perspective:900px}
.qface{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 30px -18px #000;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.qback{overflow:hidden;background:#b04d68;border:3px solid #f4ede4}
.qcard:not(.up):hover .qback{transform:translateY(-4px) rotate(-1deg)}
.qfront{display:flex;align-items:center;justify-content:center;padding:22px 26px;background:#f4ede4;color:#2f2433;transform:rotateY(180deg);font-style:italic;font-size:18.5px;line-height:1.35;text-align:center}
.qcard.up .qback{transform:rotateY(-180deg)}
.qcard.up .qfront{transform:rotateY(0)}
.qcard.up{cursor:default}
.seal{position:absolute;right:-14px;bottom:-16px;width:62px;opacity:0;transform:rotate(-14deg) scale(1.7);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.seal polygon{fill:#9b2f3f}
.seal circle{fill:none;stroke:#c25a62;stroke-width:2}
.seal text{font-family:var(--display);font-style:normal;font-size:34px;text-anchor:middle;fill:#e9a7a4}
.quest.sealed .seal{opacity:1;transform:rotate(-14deg)}
.quest:not(.stamp) .seal{transition:none}
.quest .pos{margin-top:14px}
.quest .again{margin-top:14px}
.qfront::before{content:"";position:absolute;inset:8px;border:1px solid #c99b5b99;border-radius:3px;pointer-events:none}

/* the planner at /today/: always night, cards on the table, writing on lines */
.planner{width:100%;max-width:620px;margin:0 auto;text-align:center}
.tabs button[data-tab]{color:var(--faint)}
.tabs button[data-tab][aria-pressed=true],.tabs button[data-tab]:hover{color:var(--ink)}
body.tarot .tabs button[data-tab]{display:none}
.tab[hidden]{display:none}
.planner .pos{display:block;margin-top:12px}
.planner .tcard{display:block;width:100%}
.day{font-family:var(--display);-webkit-text-stroke:.5px currentColor;font-weight:400;font-size:22px;letter-spacing:.08em;margin-bottom:28px}
.daily{width:150px}
.daily .tcard:not(.up):hover .tback{transform:translateY(-4px) rotate(-1deg)}
.daily.rev .art{transform:rotate(180deg)}
.reading{max-width:500px;margin:26px auto 0;font-size:17.5px;min-height:1px}
.reading b{font-weight:500}
.planner input:not([type=file]),.planner textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:italic 600 18px/1.4 var(--serif);padding:6px 0;outline:none;transition:border-color .3s}
.planner textarea{border:1px solid var(--line);border-radius:3px;padding:10px 12px;resize:vertical}
.planner input:focus,.planner textarea:focus{border-color:var(--gold)}
.planner ::placeholder{color:var(--faint);opacity:1}
.planner input[type=date]{font-style:normal;width:auto}
.lines{list-style:none;text-align:left}
.lines li{display:flex;align-items:baseline;gap:10px;font-size:17px;padding:4px 0 4px 15px;position:relative}
.lines li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.lines li button:not(.again){margin-left:auto;color:var(--faint);font-size:16px;padding:0 4px}
.lines li button:not(.again):hover{color:var(--ink)}
.lines .again{margin:0 0 0 auto;flex:none}
.lines li em{margin-left:auto;flex:none;font-family:var(--caps);font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lines li.came{color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:7px 12px 6px;border:1px solid var(--line);border-radius:20px;color:var(--soft);transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--c)}
.chips button[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#fff}
.add{max-width:460px;margin:0 auto 30px}

/* wishes: flip cards like the project cards, with a wax seal once they come true */
.wishes{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;text-align:left}
.fcard .front p{font-size:15px;line-height:1.28;margin-top:0}
.fcard .emb{flex-basis:44px}
.fcard .back{color:#2f2433}
.fcard .back .like{margin-top:26px;font-size:15px}
.fcard .back .like + .like{margin-top:14px}
.fcard .acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto}
.fcard .again{margin:0;color:var(--d);font-size:9px}
.fcard .again:hover{opacity:.7}
.fcard .seal{opacity:0;position:absolute;right:8px;top:8px;left:auto;bottom:auto;width:46px}
.fcard.sealed .seal{opacity:1;transform:rotate(-14deg)}
.fcard.stamp .seal{animation:stamp .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes dealin{from{opacity:0;transform:translateY(-30px) rotate(-4deg) scale(.92)}}
.letter::before{content:"";position:absolute;inset:7px;border:1px solid #c99b5b99;border-radius:3px;pointer-events:none}
.letter .when{font-family:var(--caps);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#7a6560;margin-top:10px}
.letter .seal{opacity:0}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(1.7)}}

/* moon */
.moon{width:150px;height:150px;margin:0 auto 18px;display:block;filter:drop-shadow(0 0 24px #f4ede433)}
.moon .dark{fill:#3a2b40}
.moon .lit{fill:#f7ecd9}
.moon .rim{fill:none;stroke:#c99b5b66;stroke-width:.6}
.phase{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.12em}
.next{font-style:italic;color:var(--soft);margin:6px 0 30px}

.planner .lately{text-align:left;margin-top:34px}
.planner .lately b{color:var(--c);font-family:var(--caps);-webkit-text-stroke:0;font-weight:500;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;width:110px;padding-top:3px}
.planner .lately span{font-size:15.5px}
#moon-past p{padding-left:15px}

/* letters: sealed envelopes until their day */
.letter-form{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:460px;margin:0 auto 40px}
.letter-form textarea{font-size:17px}
.opens{display:flex;align-items:baseline;gap:12px}
.opens .pos{margin:0}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.letter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;aspect-ratio:7/5;padding:14px;background:#f4ede4;color:#2f2433;border-radius:6px;box-shadow:0 18px 30px -18px #000}
.letter.sealed .seal{opacity:1;position:absolute;left:50%;top:42%;right:auto;bottom:auto;width:54px;transform:translate(-50%,-50%) rotate(-8deg)}
.letter .flap{position:absolute;left:7px;right:7px;top:7px;width:calc(100% - 14px);height:48%;fill:none;stroke:#c99b5b99;stroke-width:.8;vector-effect:non-scaling-stroke}
.letter.ready{cursor:pointer}
.letter.ready:hover{transform:translateY(-3px)}
.letter.ready .when{color:#9b2f3f}
.letter:disabled{cursor:default}
.letter.open{aspect-ratio:auto;align-items:stretch;text-align:left;grid-column:1/-1}
.letter.open p{font-style:italic;font-size:17px;line-height:1.45;padding:10px 8px}
.planner .work{text-align:left}
.planner .work[hidden]{display:none}
.empty{font-style:italic;color:var(--faint);text-align:center}
.keep{display:flex;justify-content:center;gap:24px;margin-top:40px}
.keep .again{margin:0}

@media (max-width:560px){
  .months{grid-template-columns:1fr 1fr}
  .wishes{grid-template-columns:1fr 1fr}
  .planner .lately b{width:84px}
}
.letters{grid-template-columns:repeat(auto-fill,minmax(200px,270px));justify-content:center}
.page{overflow-x:clip}
@media (max-width:420px){.tabs{gap:4px 12px;letter-spacing:.16em}}
.syncbox{max-width:420px;margin:22px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.syncbox[hidden]{display:none}
.syncbox form{width:100%}
.syncbox .phrase{font-family:var(--caps);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--gold);word-break:break-word}
.syncnote{font-style:italic;color:var(--soft);font-size:15px}
.syncbox .again{margin:0}
.fcard .front p.long{font-size:13px}
.fcard .back .like{color:#5d505a}
/* the year: month cards. Face down (the deck's back) until the month arrives, then a project-style card; the back holds what the month is for. */
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;text-align:left}
.month .cover{position:absolute;inset:0;z-index:3;border-radius:6px;overflow:hidden;border:3px solid #f4ede4;box-shadow:0 14px 24px -14px #000;transition:transform .35s cubic-bezier(.5,0,.7,.4),opacity .35s}
.month.turned .cover{display:none}
.month.turning .cover{transform:rotateY(90deg);opacity:.6}
.month.ahead .cover{filter:brightness(.5) saturate(.6);cursor:default}
.month.now:not(.turned) .cover{box-shadow:0 0 0 1px var(--gold),0 0 22px -2px #c99b5b88}
.month:not(.turned):not(.ahead) .cover:hover{transform:translateY(-4px) rotate(-1deg)}
.month .front p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.month .front p:empty{display:none}
.month .emb{flex-basis:44px}
.month .back{color:#2f2433}
.month .back .like{margin-top:22px;color:#5d505a}
.month textarea{flex:1;margin-top:8px;width:100%;border:0!important;border-top:1px solid #e4d8cc!important;border-radius:0!important;padding:8px 0 0!important;background:none;color:#2f2433!important;font:italic 600 15px/1.35 var(--serif)!important;resize:none}
.month textarea::placeholder{color:#7a6560}
@media (max-width:560px){.months{grid-template-columns:1fr 1fr}}
/* moon intentions and the book's days use the same flip cards */
#moon-list{margin-top:6px}
.fcard .front h2{font-size:15px}
#book-log[hidden]{display:none}
/* the planner by day: cream cards get an edge so they sit on the cream page */
.qfront,.letter,.planner .work{box-shadow:0 0 0 1px #e4d8cc,0 18px 30px -20px rgba(47,30,40,.55)}
body.tarot .qfront{box-shadow:0 18px 30px -18px #000}
.planner .tabs .wild{margin-left:6px}
.month .cover{background:var(--c)!important}
.mailme{display:flex;align-items:center;gap:7px;font-style:italic;font-size:13.5px;color:var(--soft);cursor:pointer}
.mailme input{accent-color:var(--rose);width:13px;height:13px}
#letter-email{max-width:300px;text-align:center}
#letter-email[hidden]{display:none}
#letter-note:empty{display:none}
.letterpage{max-width:440px;margin:30px auto 0;text-align:center;font-size:19px;line-height:1.45}
.letterpage form{margin-top:24px}
/* sync box: the phrase, ways to keep it, earlier copies */
.keep-form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.keep-form .phrase{text-align:center;border:0!important;font:500 13px var(--caps)!important;letter-spacing:.08em;color:var(--gold)!important}
.keep-form #phrase-in{text-align:center}
.syncacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px}
.syncacts .again{margin:0}
.syncacts .danger{color:var(--rose)}
.copies{list-style:none;width:100%;max-width:320px}
.copies li{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font-size:15px}
.copies .again{margin:0}
/* privacy page */
.privacy{max-width:520px;margin:10px auto 0;text-align:left}
.privacy h2{font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:28px 0 8px}
.privacy p{font-size:17px;line-height:1.5;margin-bottom:10px}
.privacy a{border-bottom:1px solid currentColor}
/* tarot faces: a gilt frame, the numeral up top, a line drawing in the middle, the name on a ruled banner */
.art{justify-content:space-between;padding:14% 8% 11%}
.art .frame{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#f3d9a4;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.85;pointer-events:none}
.art .num{position:static;transform:none;font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.28em;padding-left:.28em;color:#f6e6c2}
.art .sym{width:84%;flex:1;min-height:0;margin:4% 0;color:#fbf3e6;filter:drop-shadow(0 1px 6px rgba(0,0,0,.18))}
.art b{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;font-size:13px;letter-spacing:.12em;text-align:center}
.art b::before,.art b::after{content:"";flex:1;max-width:16px;height:1px;background:#f3d9a4;opacity:.8}
.tfront,.daily .tfront{background:linear-gradient(135deg,#f7efe2,#efe2cc)}
.tcard.up{cursor:pointer}
@media (max-width:480px){.art{padding:12% 6% 9%}.art b{font-size:10px;letter-spacing:.06em;gap:3px}.art b::before,.art b::after{max-width:8px}.art .num{font-size:8.5px}}
/* "more" buttons on readings */
.more{cursor:pointer;text-align:left}
.more span{font-family:var(--caps);font-style:normal;font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid currentColor;margin-left:4px;white-space:nowrap}
.more:hover span{color:var(--ink)}
.reading .more{text-align:center}
/* the card panel */
.cardinfo{margin:auto;max-width:640px;width:calc(100% - 32px);max-height:calc(100% - 32px);border:0;border-radius:8px;padding:28px;background:#fbf6ee;color:#2f2433;box-shadow:0 30px 60px -20px rgba(20,10,20,.6);font-family:var(--serif);font-weight:600}
.cardinfo::backdrop{background:rgba(23,15,27,.55);backdrop-filter:blur(3px)}
.cardinfo[open]{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start;animation:cardin .35s cubic-bezier(.2,.7,.2,1)}
@keyframes cardin{from{opacity:0;transform:translateY(10px) scale(.98)}}
.cardinfo .close{position:absolute;top:10px;right:14px;font-size:26px;line-height:1;color:#7a6560}
.cardinfo .close:hover{color:#2f2433}
.ci-card{aspect-ratio:5/7;padding:6px;border-radius:6px;background:linear-gradient(135deg,#f7efe2,#efe2cc);box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.ci-card .art{height:100%}
.ci-card.rev .art{transform:rotate(180deg)}
.ci-card .art b{font-size:15px}
.ci-num{font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#936a30}
.ci-text h2{font-family:var(--display);font-weight:400;-webkit-text-stroke:.5px currentColor;font-size:28px;letter-spacing:.06em;margin:4px 0 10px}
.ci-keys{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ci-keys span{font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px 4px;border:1px solid #e4d8cc;border-radius:20px;color:#5d505a}
.ci-text p{font-size:16.5px;line-height:1.5;margin-bottom:10px}
.ci-short{font-style:italic;font-size:19px!important;color:#5d505a}
.ci-also,.ci-try{border-top:1px solid #e4d8cc;padding-top:10px;margin-top:14px}
.ci-also span,.ci-try span{display:block;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#936a30;margin-bottom:3px}
.ci-also{color:#5d505a;font-size:15px!important}
@media (max-width:560px){.cardinfo[open]{grid-template-columns:1fr;gap:18px;padding:22px}.ci-card{width:150px;margin:0 auto}}
/* cycle: an old-school tracker bar, then the month with cycle days */
.cyclebar{max-width:520px;margin:6px auto 30px}
.cb-track{position:relative;height:46px;margin:0 12px}
.cb-track::before{content:"";position:absolute;left:0;right:0;top:24px;height:8px;border-radius:4px;background:linear-gradient(90deg,#e7a4b4,#f4ede4 18%,#cfe2c3 55%,#f4ede4 80%)}
.cb-track i{position:absolute;top:24px;width:1px;height:8px;background:#fbf6ee;opacity:.9}
.cb-now,.cb-ovu{position:absolute;top:18px;width:2px;height:20px;margin-left:-1px;background:var(--plum)}
.cb-ovu{background:var(--leaf);height:14px;top:21px;width:8px;margin-left:-4px;border-radius:50%;height:8px;top:24px}
.cb-now em,.cb-ovu em{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--caps);font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.cb-now em{top:-17px;color:var(--plum)}
.cb-ovu em{top:14px;color:var(--leaf)}
.cb-ends{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cb-ends .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e07a95;margin-right:6px}
.cal{max-width:520px;margin:0 auto}
.calhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:8px}
.calgrid{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.calgrid button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:1/.95;border-radius:9px;background:#fbf6ee;border:2px solid transparent;box-shadow:0 1px 0 #e4d8cc;transition:transform .15s}
.calgrid button:hover{transform:translateY(-2px)}
.calgrid b{font-family:var(--caps);font-weight:500;font-size:14px;line-height:1.1}
.calgrid span{font-family:var(--caps);font-weight:400;font-size:9.5px;letter-spacing:.06em;color:var(--faint);margin-top:2px}
.calgrid .fertile{border-color:#bcd6ad}
.calgrid .ovu{border-color:var(--leaf);background:#eef5e8}
.calgrid .expect{border-color:#e7a4b4}
.calgrid .today{border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.calgrid .bleed{background:#f8e1e7}
.calgrid .bleed.heavy{background:#efc0cc}
.calgrid .bleed.spotting{background:#fbf6ee;background-image:radial-gradient(#e07a95 1.2px,transparent 1.5px);background-size:9px 9px}
.calkey{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-family:var(--caps);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.calkey span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;border:2px solid;margin-right:5px;vertical-align:-1px}
.k-today::before{border-color:var(--plum)!important}.k-fertile::before{border-color:#bcd6ad!important}.k-ovu::before{border-color:var(--leaf)!important}.k-period::before{border-color:#e7a4b4!important;background:#f8e1e7}
.cycleset{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin-top:26px}
.cycleset .again{margin:0}
.cyclenote{font-style:italic;color:var(--faint);font-size:14px;margin-top:14px;text-align:center}
.dayform{margin:auto;border:0;border-radius:10px;padding:24px 26px;background:#fbf6ee;color:#2f2433;width:min(380px,calc(100% - 32px));box-shadow:0 30px 60px -20px rgba(20,10,20,.6);font-family:var(--serif);font-weight:600;text-align:center}
.dayform::backdrop{background:rgba(23,15,27,.45)}
.dayform h3{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.05em}
.df-cd{font-style:italic;color:#7a6560;margin:2px 0 16px}
.dayform fieldset{border:0;justify-content:center}
.dayform legend{width:100%;margin-bottom:8px}
.dayform .chips button[aria-pressed=true]{background:#d76d8a;border-color:#d76d8a;color:#fff}
.df-acts{display:flex;justify-content:center;gap:26px;margin-top:20px}
.df-acts .again{margin:0}
.weekdays li{text-align:center;font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--faint);padding-bottom:4px}
.cycleset .mailme{white-space:nowrap}
.monthstep{display:flex;align-items:center;gap:6px;justify-self:start;padding:8px 12px;border:1px solid var(--line);border-radius:20px;font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);transition:background .2s}
.monthstep[data-step="1"]{justify-self:end}
.monthstep span{font-size:17px;line-height:0;letter-spacing:0}
.monthstep em{font-style:normal}
.monthstep:hover{background:#fbf6ee}
.monthpick{position:relative;cursor:pointer;font-family:var(--display);font-size:22px;letter-spacing:.05em;padding:4px 10px;border-radius:8px;white-space:nowrap}
.monthpick:hover{background:#fbf6ee}
.backtoday{display:block;margin:0 auto 12px}
.backtoday[hidden]{display:none}
.cyclestats{text-align:center;margin-top:18px;font-size:16px;color:var(--soft)}
.cyclestats b{font-weight:600;color:var(--ink)}
.cyclestats i{font-style:normal;color:var(--faint);padding:0 4px}
@media (max-width:420px){.monthstep{padding:7px 9px;font-size:9px}.monthpick{font-size:18px;padding:4px 4px}}
.monthpick::after{content:"▾";font-size:12px;margin-left:6px;color:var(--faint)}
.picker{max-width:320px;margin:4px auto 14px;padding:14px;background:#fbf6ee;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 24px -16px rgba(47,30,40,.5)}
.picker[hidden]{display:none}
.pick-year{display:flex;justify-content:center;align-items:center;gap:22px;margin-bottom:10px}
.pick-year b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.1em}
.pick-year button{font-size:20px;color:var(--plum);padding:0 8px}
.pick-months{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pick-months button{padding:9px 0;border-radius:8px;font-family:var(--caps);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center}
.pick-months button:hover{background:var(--paper)}
.pick-months .now{color:var(--plum)}
.pick-months button[aria-pressed=true]{background:var(--plum);color:#fff}
/* a smaller calendar */
.cal{max-width:360px}
.cyclebar{max-width:360px}
.calgrid{gap:4px}
.calgrid button{aspect-ratio:1/.9;border-radius:7px;border-width:1.5px}
.calgrid b{font-size:12px}
.calgrid span{font-size:8.5px}
.weekdays li{font-size:9px}
.monthpick{font-size:19px}
@media (max-width:420px){.cal,.cyclebar{max-width:290px}.calgrid b{font-size:11px}.calgrid span{font-size:7.5px;letter-spacing:0}.monthpick{font-size:16px}}
/* the switches and the calendar button stack on their own lines, so nothing runs into the note below */
.cycleset{flex-direction:column;gap:14px;margin-top:24px}
.cycleset .again{display:inline-block;line-height:1.7;white-space:nowrap}
.cyclestats{margin-top:20px}
.cyclenote{margin-top:18px;line-height:1.4}
#cal-grid{touch-action:manipulation;user-select:none;-webkit-user-select:none}
#cal-grid button{-webkit-touch-callout:none}
.calgrid .marking{background:#f3c9d4;border-color:#e07a95}
.calgrid .noted::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--plum);margin-top:2px}
.calhint{text-align:center;font-style:italic;font-size:13.5px;color:var(--faint);margin-top:10px}
.calhint i{font-style:normal;padding:0 3px}
.df-notebox{display:block;text-align:left;margin-top:16px}
.df-notebox .pos{margin:0 0 6px;text-align:center}
.df-notebox textarea{width:100%;border:1px solid #e4d8cc;border-radius:6px;padding:8px 10px;background:#fff;color:#2f2433;font:italic 600 15px/1.35 var(--serif);resize:none;outline:none}
.df-notebox textarea:focus{border-color:#d76d8a}
#cycle-undo[hidden]{display:none}
/* tonight's moon on home */
.todaymoon{display:inline-flex;align-items:center;gap:10px;margin:-16px auto 26px;padding:6px 14px 6px 8px;border-radius:30px;font-style:italic;font-size:15.5px;color:var(--soft);transition:background .2s}
.todaymoon:hover{background:#fbf6ee}
.todaymoon svg{width:26px;height:26px;filter:drop-shadow(0 0 6px #c99b5b55)}
.todaymoon .dark{fill:#3a2b40}.todaymoon .lit{fill:#f7ecd9}.todaymoon .rim{fill:none;stroke:#c99b5b88;stroke-width:2}
.todaymoon b{font-style:normal;font-weight:500;font-family:var(--caps);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.todaymoon i{font-style:normal;color:var(--faint)}
.moonpanel{max-width:560px;margin:-10px auto 30px}
.moonpanel[hidden]{display:none}
.todaymoon[aria-expanded=true]{background:#fbf6ee}
/* fertility colors that read clearly on a phone */
.calgrid .fertile{border-color:#9cc48a;background:#eef6e9}
.calgrid .ovu{border-color:#4f8a4f;background:#dcefd2;border-width:2.5px}
.calgrid .expect{border-color:#e48aa2;border-width:2px}
.calgrid .today{border-width:2.5px}
/* the gold seal and the received shelf */
.fcard .seal.gold{width:64px;right:6px;top:6px;filter:drop-shadow(0 2px 3px rgba(60,35,0,.45))}
.fcard.stamp .seal.gold{animation:emboss .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes emboss{0%{opacity:0;transform:rotate(-14deg) scale(1.8)}60%{opacity:1;transform:rotate(-14deg) scale(.92)}100%{transform:rotate(-14deg) scale(1)}}
.received{margin-top:40px}
.received[hidden]{display:none}
.received h3{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.received h3::before,.received h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#c99b5b)}
.received h3::after{background:linear-gradient(90deg,#c99b5b,transparent)}
.received h3 b{font-weight:500;color:var(--faint)}
.fcard .seal.gold{width:58%;max-width:118px;right:auto;left:50%;top:16%;margin-left:-29%}
@media (min-width:561px){.fcard .seal.gold{margin-left:min(-29%,-59px)}}
.fcard.sealed .seal.gold{transform:rotate(-10deg)}
.fcard.sealed:has(.seal.gold) .emb{opacity:0}
.seal.gold text{fill:#6e4a14;font-size:10.6px;text-anchor:start;font-family:var(--caps);font-style:normal;font-weight:600}
.seal.gold circle{fill:none;stroke:#8a6224;stroke-opacity:.5;stroke-width:1}
/* home: three cards the same size, side by side, nothing to scroll */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:540px;margin:0 auto;align-items:start}
.trio .daily,.trio .quest,.trio .intention{width:auto;margin:0;display:flex;flex-direction:column;align-items:center}
.trio .tcard,.trio .qcard,.trio .icard{width:100%;aspect-ratio:5/7}
.trio .qfront{padding:16px 12px;font-size:15px;line-height:1.3}
.trio .quest .again{margin-top:8px}
.trio .pos{margin-top:10px;text-align:center}
.icard{display:flex;flex-direction:column;gap:8px;padding:14px 12px;background:#fbf6ee;border-radius:6px;box-shadow:0 0 0 1px #e4d8cc,0 18px 30px -20px rgba(47,30,40,.55);text-align:left;overflow:hidden;position:relative}
.icard::before{content:"";position:absolute;inset:6px;border:1px solid #c99b5b77;border-radius:3px;pointer-events:none}
.icard label{display:flex;flex-direction:column;gap:3px}
.icard label:first-child{flex:1;min-height:0}
.icard span{font-family:var(--caps);font-weight:500;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#936a30}
.planner .icard textarea,.planner .icard input{border:0!important;border-radius:0!important;padding:2px 0!important;background:none;font-size:14.5px!important;line-height:1.3!important;color:#2f2433}
.icard textarea{flex:1;resize:none;min-height:0}
.icard input{border-bottom:1px solid #e4d8cc!important}
.icard ul{list-style:none;max-height:3.6em;overflow-y:auto;font-size:13px;line-height:1.3;color:#5d505a}
.icard li{display:flex;justify-content:space-between;gap:4px}
.icard li button{color:#b09a94;font-size:13px}
.trio + .reading{margin-top:18px;font-size:16px}
.cyclechip{display:block;margin:14px auto 0;padding:6px 14px;border-radius:20px;border:1px solid #f0c2cf;background:#fbeff2}
.cyclechip b{font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#b0506d}
.cyclechip[hidden]{display:none}
.day{margin-bottom:18px}
.todaymoon{margin:-8px auto 18px}
@media (max-width:560px){
  .trio{gap:9px}
  .trio .qfront{padding:10px 7px;font-size:11.5px}
  .icard{padding:10px 8px;gap:5px}
  .planner .icard textarea,.planner .icard input{font-size:12px!important}
  .icard span{font-size:7.5px;letter-spacing:.14em}
  .trio .pos{font-size:8px;letter-spacing:.14em}
  .trio .art b{font-size:8.5px}
  .day{font-size:19px;margin-bottom:12px}
}
/* the outline around today sits above its neighbors */
.calgrid .today{position:relative;z-index:1;box-shadow:inset 0 0 0 1px var(--plum)}
/* mood: dusk light from above, a warm glow below, soft edges and paper grain. Night mode keeps its own sky. */
body:not(.tarot){background:#efe5da;background-image:
  radial-gradient(ellipse 95% 50% at 50% -12%,rgba(86,54,126,.30),transparent 70%),
  radial-gradient(ellipse 70% 38% at 50% 112%,rgba(158,58,94,.18),transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 45%,transparent 60%,rgba(52,34,48,.10));background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .18 0 0 0 .9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
body:not(.tarot)::before{content:"";position:fixed;inset:0 0 auto;height:42vh;pointer-events:none;opacity:.55;background-image:radial-gradient(1px 1px at 18% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 86% 30%,#fff,transparent),radial-gradient(1px 1px at 34% 8%,#fff,transparent),radial-gradient(1px 1px at 58% 26%,#fff,transparent),radial-gradient(1px 1px at 8% 36%,#fff,transparent)}
body .page{position:relative;z-index:1}
body:not(.tarot) .mark{color:#3a2b40}
/* cycle calendar, calmer: soft fills instead of outlines, one ring for today, quiet month arrows */
.calgrid button{background:rgba(255,253,249,.62);border:0;box-shadow:none;border-radius:50%;aspect-ratio:1}
.calgrid button:hover{transform:none;background:#fffaf2}
.calgrid b{font-size:13px;font-weight:500}
.calgrid span{font-size:7.5px;letter-spacing:.04em;opacity:.8}
.calgrid .fertile{background:#e3eedb;border:0}
.calgrid .ovu{background:#9fc78e;border:0}
.calgrid .ovu b,.calgrid .ovu span{color:#20391a}
.calgrid .bleed{background:#f2c3cf}
.calgrid .bleed.heavy{background:#e59ab0}
.calgrid .bleed.spotting{background:#fbeef1;background-image:none}
.calgrid .expect{background:transparent;box-shadow:inset 0 0 0 1.5px #e48aa2;border:0}
.calgrid .today{box-shadow:inset 0 0 0 2px var(--plum);border:0}
.calgrid .marking{background:#f2c3cf}
.calgrid{gap:5px 4px}
.monthstep{border:0;padding:6px 4px;color:var(--faint)}
.monthstep:hover{background:none;color:var(--plum)}
.monthpick{font-size:20px}
.calhint{font-size:12.5px;margin-top:12px}
.calkey{gap:6px 14px;margin-top:8px}
.calkey span::before{width:9px;height:9px;border-radius:50%;border:0;vertical-align:0}
.k-today::before{box-shadow:inset 0 0 0 2px var(--plum)}
.k-fertile::before{background:#e3eedb}
.k-ovu::before{background:#9fc78e}
.k-period::before{background:#f2c3cf!important}
.cb-track::before{height:10px;top:23px;border-radius:5px}
.cb-track i{top:23px;height:10px}
.feedbox{max-width:360px;margin:18px auto 0;padding:16px;border-radius:10px;background:rgba(255,253,249,.7);box-shadow:0 0 0 1px var(--line);text-align:center;display:flex;flex-direction:column;gap:10px;font-size:15px}
.feedbox[hidden]{display:none}
.feedbox input{text-align:center;font:500 11px var(--caps)!important;letter-spacing:.04em;color:var(--soft)!important}
.feedacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px}
.feedacts .again,.feedbox .again{margin:0}
.feednote{font-style:italic;font-size:13.5px;color:var(--faint)}
.feedbox .danger{color:var(--rose);align-self:center}
/* wallpaper choices (footer → wallpaper). Dusk is the default above; each choice swaps the page background. */
body.wall-rose:not(.tarot){background:#f3e2e0;background-image:radial-gradient(ellipse 95% 50% at 50% -12%,rgba(150,60,90,.22),transparent 70%),radial-gradient(ellipse 70% 38% at 50% 112%,rgba(190,120,90,.155),transparent 70%),radial-gradient(ellipse 120% 90% at 50% 45%,transparent 60%,rgba(80,30,45,.10))}
body.wall-sage:not(.tarot){background:#e5e9de;background-image:radial-gradient(ellipse 95% 50% at 50% -12%,rgba(60,90,70,.25),transparent 70%),radial-gradient(ellipse 70% 38% at 50% 112%,rgba(150,130,70,.17),transparent 70%),radial-gradient(ellipse 120% 90% at 50% 45%,transparent 60%,rgba(30,45,35,.10))}
body.wall-sage:not(.tarot)::before,body.wall-rose:not(.tarot)::before{opacity:.3}
body.wall-midnight:not(.tarot){--ink:#f2e6dc;--soft:#d0bfca;--faint:#a48ea6;--gold:#d8ac6c;--line:#4a3550;color:var(--ink);background:#1a121e;background-image:radial-gradient(ellipse 80% 55% at 50% 0%,#40264a,transparent 70%),radial-gradient(ellipse 70% 40% at 50% 110%,#3a1a2c,transparent 70%)}
body.wall-midnight:not(.tarot) .mark{color:var(--ink)}
body.wall-midnight .calgrid button{background:rgba(255,255,255,.08)}
body.wall-midnight .calgrid .fertile{background:#3f5a3a}
body.wall-midnight .calgrid .ovu{background:#7fae6f}
body.wall-midnight .calgrid .bleed{background:#7d3a51}
body.wall-midnight .calgrid span{color:var(--soft)}
body.wall-midnight .monthpick:hover,body.wall-midnight .todaymoon:hover,body.wall-midnight .todaymoon[aria-expanded=true]{background:rgba(255,255,255,.06)}
body.wall-midnight .feedbox,body.wall-midnight .picker{background:#2a1d30}
/* the picker */
.sw-dusk{background:linear-gradient(#a68cc2,#efe5da 60%,#e9c2cc)}
.sw-rose{background:linear-gradient(#e0b2be,#f3e2e0 60%,#eed1c2)}
.sw-sage{background:linear-gradient(#a6bca1,#e5e9de 60%,#e6dfc6)}
.sw-midnight{background:linear-gradient(#40264a,#1a121e)}
.feedbox b{font-weight:600}
body.wall-midnight .filters .wild{color:var(--gold)}
/* the name card */
.namecard{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;width:300px;padding:18px 20px 16px;background:#fbf6ee;color:#2f2433;border-radius:10px;box-shadow:0 0 0 1px #e4d8cc,0 24px 40px -20px rgba(30,15,25,.55);text-align:center;font-family:var(--serif);font-weight:600;letter-spacing:0}
.namecard[hidden]{display:none}
.namecard::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:#fbf6ee;transform:translateX(-50%) rotate(45deg);box-shadow:-1px -1px 0 #e4d8cc}
.scripts{display:flex;justify-content:center;gap:6px;width:100%}
.scripts text{text-anchor:middle;fill:#6e4a8a;fill-opacity:1;stroke:#6e4a8a;stroke-width:.8;paint-order:stroke}
.scripts .ur{font-family:"Noto Nastaliq Urdu",serif;font-size:44px}
.scripts .pa{font-family:"Noto Serif Gurmukhi",serif;font-size:42px}
.say{display:flex;align-items:baseline;gap:10px}
.say b{font-family:var(--caps);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
#hear{font-family:var(--caps);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#936a30;border-bottom:1px solid currentColor}
.mean{font-size:15.5px;line-height:1.4;border-top:1px solid #e4d8cc;padding-top:8px}
@media (max-width:420px){.namecard{width:min(300px,calc(100vw - 32px))}}
/* the name card writes itself: Urdu sweeps in from the right, Punjabi from the left */
@keyframes inkrtl{from{clip-path:inset(-20% -20% -20% 100%)}to{clip-path:inset(-20%)}}
@keyframes inkltr{from{clip-path:inset(-20% 100% -20% -20%)}to{clip-path:inset(-20%)}}
.scripts text{stroke:none}
/* iPhone: nothing wider than the screen, no sideways wobble */
html,body{overflow-x:hidden;max-width:100%}
body .page{overflow-x:hidden}
/* Gurmukhi writes in from the left first, then Shahmukhi from the right */
.scripts .script{display:flex;flex-direction:column;align-items:center;width:50%}
.scripts .script svg{width:100%;height:auto;overflow:visible}
.scripts em{font-family:var(--caps);font-style:normal;font-weight:500;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#a08a84;margin-top:-6px}
.namecard.writing .script:first-child svg{animation:inkltr 1.5s ease-out both}
.namecard.writing .script:last-child svg{animation:inkrtl 1.5s .8s ease-out both}
#hear[hidden]{display:none}
/* the lunar rule under the wordmark: a month of moons, tonight's lit */
.lunarrule{display:block;width:230px;height:23px;margin:16px auto 20px;overflow:visible}
.lunarrule .line{stroke:#c99b5b;stroke-width:.7;opacity:.8}
.lunarrule .rim{fill:none;stroke:#c99b5b;stroke-width:7}
.lunarrule .lit{fill:#c99b5b}
.lunarrule .m{opacity:.55}
.lunarrule .halo{fill:none;stroke:#c99b5b;stroke-opacity:.35;stroke-width:.7}
body.tarot .lunarrule .rim,body.wall-midnight .lunarrule .rim{stroke:#d8ac6c}
.lunarrule{width:270px;height:27px;margin:14px auto 22px}
.lunarrule .m{opacity:.7}
.lunarrule .rim.dark{fill:#3a2b40}
body.wall-midnight .lunarrule .rim.dark,body.tarot .lunarrule .rim.dark{fill:#120c16}
/* three tabs; switches inside cycle (month/year) and intention (wishes/letters/book) */
.panes,.calviews{display:flex;justify-content:center;gap:4px;margin:0 auto 22px;padding:3px;width:max-content;border-radius:20px;background:rgba(255,253,249,.55);box-shadow:0 0 0 1px var(--line)}
.panes button,.calviews button{padding:6px 14px 5px;border-radius:16px;font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.panes button[aria-pressed=true],.calviews button[aria-pressed=true]{background:var(--plum);color:#fff}
.pane[hidden],.yearview[hidden],#monthview[hidden]{display:none}
.calviews{margin-bottom:16px}
/* the year view: twelve small months */
.yearview{max-width:560px;margin:0 auto}
.yearhead2{grid-template-columns:auto auto auto;justify-content:center;gap:18px}
.yearhead2 b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.1em}
.ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px}
@media (max-width:560px){.ygrid{grid-template-columns:repeat(3,1fr);gap:10px 8px}}
/* wishes: small slips of paper, folded once, set down at a slight angle */
#wish-list,#wish-got{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;padding:6px 4px}
.slip{position:relative;display:flex;flex-direction:column;gap:8px;min-height:104px;padding:16px 16px 12px;background:#fbf7ef;color:#2f2433;transform:rotate(var(--tilt));cursor:pointer;text-align:left;
  background-image:linear-gradient(180deg,transparent 49%,rgba(120,90,70,.10) 50%,rgba(255,255,255,.6) 51%,transparent 53%),linear-gradient(115deg,rgba(255,255,255,.5),transparent 40%);
  box-shadow:0 1px 1px rgba(60,40,30,.12),0 10px 18px -12px rgba(60,40,30,.45);transition:transform .25s,box-shadow .25s}
.slip::after{content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(225deg,#efe5da 50%,#e2d4c3 50%);box-shadow:-1px 1px 2px rgba(60,40,30,.15)}
.slip:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 1px 1px rgba(60,40,30,.12),0 16px 24px -14px rgba(60,40,30,.5)}
.slip p{font:italic 600 17px/1.3 var(--serif)}
.slip .when{margin-top:auto;font-family:var(--caps);font-weight:500;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#a08a84}
.slip .acts{display:none;gap:14px;flex-wrap:wrap}
.slip.open .acts{display:flex;animation:unfold .25s ease-out}
.slip.open{transform:rotate(0deg) scale(1.03);z-index:2}
.slip .acts .again{margin:0;font-size:9px;color:#6e4a8a}
@keyframes unfold{from{opacity:0;transform:translateY(-4px)}}
.slip .seal.gold{position:absolute;width:56px;top:-14px;right:-12px;left:auto;margin:0;transform:rotate(-12deg)}
.slip.stamp .seal.gold{animation:emboss .55s cubic-bezier(.3,1.4,.5,1)}
.slip-in{animation:slipin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes slipin{from{opacity:0;transform:translateY(-16px) rotate(-6deg)}}
#wish-got .slip{background-color:#fdf8ec}
@media (max-width:560px){#wish-list,#wish-got{grid-template-columns:1fr 1fr;gap:18px 12px}.slip p{font-size:15px}}
/* letters: the email option on one quiet line under the date */
.letter-form .opens,.letter-form .mailme{justify-content:center;width:100%}
.letter-form .mailme{font-size:12.5px;white-space:nowrap;gap:6px;margin-top:-6px}
.letter-form .mailme input{width:12px;height:12px}
/* sounds are off for now */
.slip.sealed .seal.gold{opacity:1;bottom:auto}
.slip .seal.gold{top:auto;bottom:-12px;right:-10px;width:50px}
/* the year as one column of weeks: months outlined, names down the side, periods as pink bands */
.yearview .ygrid{display:grid;grid-template-columns:30px repeat(7,1fr);max-width:420px;margin:0 auto;gap:0}
.yweek{display:grid;grid-template-columns:30px repeat(7,1fr);max-width:420px;margin:0 auto;position:sticky;top:0;z-index:3;padding:6px 0;background:inherit;font-family:var(--caps);font-weight:500;font-size:9px;letter-spacing:.2em;color:var(--faint);text-align:center}
body:not(.tarot) .yweek{background:rgba(239,229,218,.92);backdrop-filter:blur(4px)}
.yday{position:relative;isolation:isolate;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--caps);font-weight:500;font-size:12px;color:var(--ink)}
.yday.alt{background:rgba(255,253,249,.42)}
.yday.out{pointer-events:none}
.yday.bt{border-top:1.5px solid #cdbfb2}.yday.bl{border-left:1.5px solid #cdbfb2}.yday.br{border-right:1.5px solid #cdbfb2}.yday.bb{border-bottom:1.5px solid #cdbfb2}
.yday em{position:absolute;top:2px;font-style:normal;font-size:7px;letter-spacing:.1em;color:var(--faint)}
.yday::before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;z-index:-1}
.yday.fertile::before{background:#e3eedb}.yday.ovu::before{background:#9fc78e}
.yday.today::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--plum)}
.yday.noted{background-image:radial-gradient(circle at 50% 88%,var(--plum) 1.6px,transparent 2px)}
.yday .band{position:absolute;left:1px;right:1px;top:8px;bottom:8px;z-index:-1;background:#f2c3cf}
.yday .band.expect{background:none;border:1.5px dashed #e48aa2;border-left-width:0;border-right-width:0}
.yday .band.s{border-radius:14px 0 0 14px;left:4px}.yday .band.e{border-radius:0 14px 14px 0;right:4px}.yday .band.s.e{border-radius:14px}
.yday .band.expect.s{border-left-width:1.5px}.yday .band.expect.e{border-right-width:1.5px}
.ylabel{grid-column:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--plum)}
.ylabel:hover{color:var(--ink)}
body.wall-midnight .yday.alt{background:rgba(255,255,255,.04)}
body.wall-midnight .yday.bt,body.wall-midnight .yday.bl,body.wall-midnight .yday.br,body.wall-midnight .yday.bb{border-color:#4a3550}
.archived-btn{display:block;margin:30px auto 0}
.archived-btn[hidden],#wish-old[hidden]{display:none}
#wish-old{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;padding:18px 4px;opacity:.75}
@media (max-width:560px){#wish-old{grid-template-columns:1fr 1fr;gap:18px 12px}}
.lately p .del{margin-left:auto;padding:0 4px;color:var(--faint);font-size:15px;line-height:1;opacity:.45}
.lately p:hover .del,.lately p .del:focus{opacity:1}
@media (hover:none){.lately p .del{opacity:.6}}
.cyclefact{max-width:400px;margin:22px auto 0;padding:10px 14px;border-radius:10px;background:rgba(255,253,249,.55);box-shadow:0 0 0 1px var(--line);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--soft);text-align:center}
.cyclefact b{font-style:normal;color:var(--gold);margin-right:2px}
.cyclefact:empty{display:none}
/* get the app */
.getapp{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;margin:0 auto 10px;padding:16px;border-radius:12px;background:rgba(255,253,249,.6);box-shadow:0 0 0 1px var(--line);text-align:center;font-size:15px;line-height:1.4}
.getapp[hidden]{display:none}
.getapp img{border-radius:14px;box-shadow:0 8px 16px -8px rgba(30,15,25,.5)}
.getapp b{font-weight:600}
.getapp .again{margin:0}
/* in the installed app, keep clear of the notch and the home bar */
@media (display-mode: standalone){.page{padding-top:max(7vh,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}}
/* the privacy promises */
.promises{list-style:none;margin:6px 0 30px;padding:18px 20px;border-radius:12px;background:rgba(255,253,249,.65);box-shadow:0 0 0 1px var(--line)}
.promises li{position:relative;padding-left:22px;margin:0 0 10px;font-size:16.5px;line-height:1.45}
.promises li:last-child{margin-bottom:0}
.promises li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.promises b{font-weight:600}
.privline{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13.5px;color:var(--soft);text-align:center}
.privline svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.privline a{border-bottom:1px solid currentColor}
/* optional signs in the day panel */
.df-signs{margin-top:14px;text-align:left}
.df-signs summary{cursor:pointer;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#936a30;text-align:center;list-style:none}
.df-signs summary::-webkit-details-marker{display:none}
.df-signs summary::after{content:" +"}
.df-signs[open] summary::after{content:" −"}
.df-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.df-row .pos{margin:0;flex:1;text-align:left}
.df-row input{width:76px;border:1px solid #e4d8cc!important;border-radius:6px!important;padding:5px 8px!important;background:#fff;color:#2f2433!important;font:500 16px var(--caps)!important;text-align:center}
.df-row em,.df-row .unit{font-family:var(--caps);font-style:normal;font-size:11px;color:#7a6560;width:30px}
.df-row .unit{border:1px solid #e4d8cc;border-radius:6px;padding:5px 0;text-align:center}
.df-signs fieldset{margin-top:12px}
.df-signs .chips button[aria-pressed=true]{background:#7668a3;border-color:#7668a3;color:#fff}
/* the temperature chart */
.tempchart{max-width:360px;margin:18px auto 0;padding:10px 12px 8px;border-radius:10px;background:rgba(255,253,249,.6);box-shadow:0 0 0 1px var(--line)}
.tempchart[hidden]{display:none}
.tempchart svg{display:block;width:100%;height:auto}
.tempchart .line{fill:none;stroke:#94607f;stroke-width:1.4}
.tempchart .pt{fill:#fbf6ee;stroke:#94607f;stroke-width:1.3}
.tempchart .pt.hi{fill:#94607f}
.tempchart .cover{stroke:#c99b5b;stroke-dasharray:3 3}
.tempchart .ovl{stroke:#9fc78e;stroke-width:2}
.tempchart figcaption{font-style:italic;font-size:13px;color:var(--soft);text-align:center;margin-top:4px}
/* cycle notes by email */
.notesbox{max-width:360px;margin:18px auto 0;text-align:center}
.notesform{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:14px;border-radius:10px;background:rgba(255,253,249,.6);box-shadow:0 0 0 1px var(--line)}
.notesform[hidden]{display:none}
.notesform .chips{justify-content:center}
.notesform select{font:italic 600 15px var(--serif);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:6px 0;text-align:center}
.notesform .again{margin:4px auto 0}
.notesfine{font-style:italic;font-size:13px;line-height:1.4;color:var(--faint)}
.notesstatus{font-size:14px;color:var(--soft);margin-top:8px}
.notesstatus:empty{display:none}
.notesstatus .again{margin:0 0 0 6px}
#notes-btn[hidden]{display:none}
.notesform .chips button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff}
.privline{display:block;max-width:330px;margin:10px auto 0}
.privline svg{display:inline-block;vertical-align:-1px;margin-right:4px}
.privline a{margin-left:4px}
/* the reminder to save a new sync phrase */
.phrasenag{max-width:440px;margin:0 auto 18px;padding:12px 16px;border-radius:10px;background:#fbeff2;box-shadow:0 0 0 1px #f0c2cf;font-size:15px;line-height:1.4;color:#5d3a48;text-align:center}
.phrasenag[hidden]{display:none}
.phrasenag b{font-weight:600}
.phrasenag .again{margin:8px 8px 0;color:#94607f}
/* planner pages scroll like a normal page on every screen size; the footer sits at the very end */
@media (min-width:701px) and (min-height:560px){
  body .page{height:auto;min-height:100vh}
  body main{display:block}
  .planner .tab,.planner .table{overflow:visible;-webkit-mask-image:none;mask-image:none;flex:none;padding:6px 0 30px}
  body footer{padding:60px 0 34px}
}
/* email boxes say plainly what goes in them */
.emaillabel{display:block;font-family:var(--caps);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:-4px;text-align:left}
.letteremail{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px}
.letteremail[hidden]{display:none}
#letter-email{max-width:none;text-align:left}
/* "never sold" stands on its own wherever data is asked for */
.neversold-tag{font-size:13.5px;line-height:1.35;color:var(--soft);text-align:left}
.neversold-tag b{display:inline-block;font-family:var(--caps);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--plum);padding:3px 8px 2px;border-radius:4px;margin-right:6px}
.neversold{margin:0 0 18px;padding:22px 20px;border-radius:12px;background:#3a2b40;color:#f4ede4;text-align:center;box-shadow:0 18px 30px -20px rgba(30,15,25,.6)}
.neversold b{display:block;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.04em;line-height:1.2}
.neversold span{display:block;margin-top:8px;font-style:italic;font-size:16px;color:#d8c8d2}
/* the cycle actions (Google Calendar, cycle notes, undo) sit as one evenly spaced group */
.cycleset{margin-top:22px;gap:14px}
.cycleset .again,#notes-btn{margin:0}
.notesbox{margin-top:14px}
.notesform{margin-top:14px}

.feedpick{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--soft)}
.feedpick input{width:auto!important;margin:0}
.walls{display:inline-flex;gap:6px;vertical-align:middle}
.wall-dot{width:13px;height:13px;border-radius:50%;padding:0;border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(47,30,40,.22)}
.wall-dot[aria-pressed=true]{box-shadow:0 0 0 1.5px var(--bg,#efe5da),0 0 0 2.5px var(--plum)}
.feednote a{border-bottom:1px solid currentColor}
/* midnight: the cycle tab's light panels, legend and year view, in night colors */
body.wall-midnight .panes,body.wall-midnight .calviews,body.wall-midnight .cyclefact,body.wall-midnight .notesform,body.wall-midnight .tempchart,body.wall-midnight .getapp{background:rgba(255,255,255,.06)}
body.wall-midnight .calviews button[aria-pressed=true],body.wall-midnight .panes button[aria-pressed=true]{background:#8a5c7c}
body.wall-midnight .calgrid .today{box-shadow:inset 0 0 0 2px #c89ab8}
body.wall-midnight .calgrid .ovu b,body.wall-midnight .calgrid .ovu span{color:#14240f}
body.wall-midnight .calgrid .bleed.heavy{background:#9a4462}
body.wall-midnight .calgrid .bleed.spotting{background:rgba(125,58,81,.45)}
body.wall-midnight .k-today::before{border-color:#c89ab8!important}
body.wall-midnight .k-fertile::before{background:#3f5a3a}
body.wall-midnight .k-ovu::before{background:#7fae6f}
body.wall-midnight .k-period::before{background:#7d3a51!important}
body.wall-midnight .yday.fertile::before{background:#3f5a3a}
body.wall-midnight .yday.ovu::before{background:#7fae6f}
body.wall-midnight .yday.today::after{box-shadow:inset 0 0 0 2px #c89ab8}
body.wall-midnight .yday .band.bleed{background:#7d3a51}
.namecard.onpage{position:static;transform:none;margin:4px auto 22px;box-shadow:0 0 0 1px #e4d8cc}
.namecard.onpage::before{display:none}
/* the birth chart (intention → chart) */
.todaysky{margin-top:-4px;font-style:italic;font-size:14px;color:var(--faint);text-align:center}
.todaysky:empty{display:none}
.birthform{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:340px;margin:0 auto}
.birthform[hidden]{display:none}
.birthform label{display:flex;align-items:center;gap:10px;width:100%}
.birthform label .pos{width:58px;text-align:right;flex:none}
.birthform input:disabled{opacity:.4}
.birthform .mailme{justify-content:center}
.vchart{display:block;width:min(320px,100%);margin:0 auto 18px}
.vc-line{fill:rgba(255,253,249,.5);stroke:var(--gold);stroke-width:1.2}
.vc-sign{font:500 10px var(--caps);fill:var(--faint);text-anchor:middle}
.vc-pl{font:600 13px var(--serif);fill:var(--ink);text-anchor:middle}
.vmore{max-width:360px;margin:10px auto 0;font-size:15px}
.vmore summary{cursor:pointer;text-align:center;font:500 10px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.vmore table{width:100%;margin-top:8px;border-collapse:collapse}
.vmore td{padding:4px 6px;border-bottom:1px solid var(--line)}
.vmore tr.now td{color:var(--plum);font-weight:600}
.vacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:20px}
.vacts .again{margin:0}
body.wall-midnight .vc-line{fill:rgba(255,255,255,.04)}
body.wall-midnight .vmore tr.now td{color:#c89ab8}
.vc-r{font-size:8px;font-style:italic;fill:var(--plum)}
.vwhy p{font-size:15px;line-height:1.5;margin:10px 0 0;text-align:left}
/* the year's words, top of wishes */
.yearwords{max-width:400px;margin:0 auto 26px;display:flex;flex-direction:column;gap:8px}
.yw{display:flex;align-items:baseline;gap:12px}
.yw .pos{width:74px;flex:none;text-align:right}
.yw input{flex:1;font-size:19px!important}
.ywlist{list-style:none;padding:0;margin:4px 0 0}
.ywlist li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:16px}
.ywlist button{color:var(--faint)}
/* footer: links in one row, wallpaper dots and the sound note in a quieter row under it */
footer .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:520px;margin:0 auto}
footer .flinks a,footer .flinks button{transition:color .2s}
footer .flinks a:hover,footer .flinks button:hover{color:var(--ink)}
footer .flinks [hidden]{display:none}
footer .ftools{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px}
footer #sound{font-family:var(--serif);font-size:15px;letter-spacing:0;line-height:1;width:22px;height:22px;border-radius:50%;opacity:.8}
footer #sound[aria-pressed=false]{text-decoration:line-through;opacity:.4}
.wall-dot{width:14px;height:14px}
/* chart readout: birth line, sun moon rising side by side, roomy tables */
.vborn{text-align:center;font-size:15px;color:var(--soft);margin:0 0 14px}
.vborn i{color:var(--faint)}
.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:380px;margin:4px auto 14px;text-align:center}
.big3>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:10px;background:rgba(255,253,249,.45);box-shadow:0 0 0 1px var(--line)}
.big3 .pos{margin-bottom:4px}
.big3 b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.03em}
.big3 i{font-size:14px;color:var(--soft)}
.big3 em{font-size:13px;color:var(--faint);margin-top:2px}
.vwest{text-align:center;font-size:14.5px;color:var(--faint);font-style:italic;margin:0 0 6px}
.vline{max-width:360px;margin:6px auto 18px;text-align:center;font-style:italic;font-size:15.5px;line-height:1.45;color:var(--soft)}
.vnow{text-align:center;margin:0 auto 10px;max-width:380px}
.vnow p{margin:2px 0;font-size:16px}
.vnow i{color:var(--soft)}
.vmore{max-width:380px;margin:14px auto 0}
.vmore summary{padding:8px 0}
.vtable{margin-top:6px}
.vrow{display:grid;grid-template-columns:1.3fr 1.1fr .8fr;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.3}
.vrow.two{grid-template-columns:1fr 1.4fr}
.vrow span:last-child{text-align:right;color:var(--soft)}
.vrow i{font-size:13px;color:var(--faint);display:block}
.vrow.now{color:var(--plum);font-weight:600}
.vrow.now span:last-child{color:var(--plum)}
body.wall-midnight .big3>div{background:rgba(255,255,255,.05)}
body.wall-midnight .vrow.now,body.wall-midnight .vrow.now span:last-child{color:#c89ab8}
/* a letter to future you, under the wishes */
.futureletter{max-width:420px;margin:34px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.futureletter .letter-form{width:100%}
.futureletter .letter-form[hidden],.futureletter [hidden]{display:none}
.letterwhen{text-align:center;font-style:italic;color:var(--soft);font-size:15px;margin:0}
.letterwhen:empty{display:none}
.futureletter .letters{width:100%}
/* Today, calm and on one center line: the date, the moon (phase over the lunar day), the three cards,
   then a quiet cycle day. One rhythm of space between them. */
.day{margin:0 0 14px;text-align:center}
.todaymoon{display:flex;width:max-content;max-width:100%;margin:0 auto 26px;padding:8px 16px 8px 10px;gap:12px;text-align:left}
.todaymoon svg{flex:none;width:28px;height:28px}
.tm-lines{display:flex;flex-direction:column;gap:3px}
.todaysky{margin:0;font-size:14px;color:var(--faint);text-align:left}
.icard{justify-content:space-between;gap:0;padding:16px 12px 14px}
.icard label:first-child{flex:none}
.icard textarea{flex:none;height:2.7em}
.cyclechip{display:block;margin:26px auto 0;padding:4px 8px;border:0;border-radius:0;background:none}
.cyclechip b{display:inline-flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.22em;color:var(--soft)}
.cyclechip b::before{content:"";width:6px;height:6px;border-radius:50%;background:#e59ab0}
.cyclechip:hover b{color:var(--ink)}
body.wall-midnight .cyclechip b::before{background:#c27a94}
@media (max-width:480px){.icard{padding:12px 9px 10px}.icard textarea{height:2.8em}}
.trio + .reading:empty{display:none}
.icard ul:empty{display:none}
.cyclechip{margin-top:22px}
.cyclechip b::before{transform:translateY(-1px)}
.icard textarea,.icard textarea[style]{height:1.45em;field-sizing:content;max-height:4em}
@media (max-width:480px){.icard textarea{height:1.45em}}
.icard textarea{scrollbar-width:none;overflow-y:auto}.icard textarea::-webkit-scrollbar{display:none}
footer .fhome{display:inline-block;margin-bottom:14px;color:var(--soft);transition:color .2s}
footer .fhome:hover{color:var(--ink)}
footer .fhome i{margin-left:6px;font-size:14px;color:var(--faint)}
.slip.sealed{padding-bottom:66px}
.slip.sealed .when{position:absolute;left:16px;bottom:12px}
.fcard.sealed .emb{opacity:0}
@keyframes press{0%{opacity:0;transform:scale(1.18) rotate(-8deg);filter:blur(1.5px)}55%{opacity:1;transform:scale(.97) rotate(-8deg);filter:drop-shadow(-.7px -.7px 0 rgba(255,255,255,.95)) drop-shadow(.8px 1px .5px rgba(110,78,48,.38))}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.receiving.slip,.receiving .qfront,.receiving.fcard .front{overflow:hidden}
.receiving.slip::before,.receiving.fcard .front::before{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,226,160,.55),transparent 70%);animation:blessing 1.8s ease-out both}
@keyframes blessing{0%{opacity:0;transform:translateY(30%)}45%{opacity:1}100%{opacity:0;transform:translateY(-30%)}}
.receiving.slip{transform:rotate(0deg);transition:transform .6s ease}
.received h3 span{font-style:normal}
.seal .moon{fill:#e9a7a4}
.slip.sealed{padding-bottom:12px}
.slip.sealed .when{position:static}
.slip p,.slip .when,.slip .acts{position:relative;z-index:1}
.qfront .qtext,.qfront #qtext{position:relative;z-index:1}
/* footer links line up on one baseline; contact's arrow is drawn, so it never turns into an emoji */
footer .flinks{align-items:center}
footer .flinks a,footer .flinks button{display:inline-flex;align-items:center;line-height:1}
footer .arrow{width:8px;height:8px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transform:translateY(-1px)}
/* received: a soft warm glow, then the slip moves down. No marks. */
.receiving.slip{box-shadow:0 0 0 1px rgba(214,170,90,.35),0 0 26px 6px rgba(240,200,120,.45),0 10px 18px -12px rgba(60,40,30,.45);transition:box-shadow .6s ease,transform .6s ease}
.receiving.fcard .front{box-shadow:0 0 26px 6px rgba(240,200,120,.45)}
.quest.receiving .qfront{box-shadow:0 0 26px 6px rgba(240,200,120,.45);transition:box-shadow .6s ease}
/* the book: one grid per line (kind, words, remove), so nothing wraps out of place */
.planner .lately p{display:grid;grid-template-columns:104px 1fr 18px;align-items:baseline;gap:0 12px;flex-wrap:nowrap;white-space:normal}
.planner .lately b{width:auto;white-space:nowrap;overflow:visible}
.planner .lately p .del{margin:0;justify-self:end}
@media (max-width:480px){.planner .lately p{grid-template-columns:92px 1fr 16px;gap:0 10px}.planner .lately b{font-size:8.5px;letter-spacing:.14em}}
.keep{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:16px 28px}
.keep .again{white-space:nowrap;text-align:center}
/* the little moon rule under the wordmark is a button that opens tonight's moon note */
.lunarbtn{display:block;margin:16px auto 20px;padding:0;background:none;border:0;cursor:pointer}
.lunarbtn .lunarrule{margin:0}
.lunarbtn:hover .lunarrule .now{filter:drop-shadow(0 0 4px #c99b5b)}
.mooninfo{max-width:360px;margin:0 auto 22px;text-align:center}
.mooninfo .mi-name{font-family:var(--caps);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin:0 0 4px}
.mooninfo .mi-facts{font-size:14px;color:var(--faint);margin:0 0 8px}
.mooninfo .mi-facts i{font-style:normal;padding:0 2px}
.mooninfo .mi-line{font-style:italic;font-size:16px;line-height:1.45;color:var(--soft);margin:0}
.trio .daily,.trio .quest,.trio .intention{position:relative}
.iflip{position:relative;width:100%;aspect-ratio:5/7;perspective:900px}
.iflip .icard,.iflip .iback{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.45,.05,.2,1)}
.iflip .icard{aspect-ratio:auto;width:auto}
.iflip .iback{border-radius:6px;transform:rotateY(180deg);box-shadow:0 18px 30px -18px #000}
.iflip.down .icard{transform:rotateY(-180deg)}
.iflip.down .iback{transform:rotateY(0)}
.icard{overflow-y:auto;scrollbar-width:none}
.icard::-webkit-scrollbar{display:none}
.icard textarea{field-sizing:fixed;min-height:1.45em}
.reading[hidden]{display:none}
.iflip .iback{border:5px solid #f6efe5;box-sizing:border-box}
.iflip.down{cursor:pointer}
.trio .qcard.up,.trio .tcard.up{cursor:pointer}
.blessform{max-width:320px;margin:-4px auto 18px}
.blessform input{text-align:center}
/* the quest, face up: soft sage paper with a green-grey frame, so it never looks like the cream intention card */
.trio .qfront{background:#e8eee4;color:#2c3a30}
.trio .qfront::before{border-color:#7f9a86aa}
body.wall-midnight .trio .qfront{background:#dfe7da}
/* "+ date" on an open blessing: the label is the button; the date picker sits invisibly over it */
.slipdate{position:relative;cursor:pointer}
.slipdate input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.slip .when:empty{display:none}
#readout .more i{font-style:normal;font-family:var(--caps);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-right:6px}
/* barkat.ltd, the front door: a short lead, then one card per part of Barkat, each with a way in */
.landing .lead{max-width:420px;margin:0 auto 18px;text-align:center;font-style:italic;font-size:19px;line-height:1.45;color:var(--soft)}
.landing .lead-go{text-align:center;margin:0 0 44px}
.landing .go{display:inline-block;padding:12px 22px 10px;border-radius:24px;background:var(--plum);color:#fff;font-family:var(--caps);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;transition:background .2s}
.landing .go:hover{background:var(--plum-d)}
.landing .go.quiet{background:none;color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.landing .part{max-width:440px;margin:0 auto 34px;border-radius:16px;overflow:hidden;background:rgba(255,253,249,.6);box-shadow:0 0 0 1px var(--line),0 24px 40px -30px rgba(47,30,40,.5)}
.landing .shot{display:block;max-height:300px;overflow:hidden;border-bottom:1px solid var(--line)}
.landing .shot img{display:block;width:100%;height:auto}
.landing .part-text{padding:22px 24px 26px;text-align:center}
.landing h2{font-family:var(--display);font-weight:400;-webkit-text-stroke:.4px currentColor;font-size:26px;letter-spacing:.06em;margin:0 0 8px}
.landing .part-text p,.landing .sister p{font-size:16.5px;line-height:1.45;color:var(--soft);margin:0 0 18px}
.landing .promise{max-width:440px;margin:44px auto 0;text-align:center}
.landing .promise a{border-bottom:1px solid currentColor}
.landing .sister{max-width:440px;margin:40px auto 0;text-align:center}
.landing .shot{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);border-bottom:0}