/* La Maison Lune Noire: one look for every page. Warm cream paper, one deep red, a real deck.
   (--amber keeps its old name: it is the accent colour, now the red.) */
:root{--bg:#f6efe3;--bg2:#fffaf1;--ink:#241811;--soft:#4b3b2e;--dim:#7b6a58;--amber:#a3261f;--wine:#7d1d2b;--line:rgba(36,24,17,.14);--paper:#efe4d0;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{font:400 17px/1.55 "Hanken Grotesk",system-ui,sans-serif;color:var(--ink);overflow-x:hidden;background:radial-gradient(120% 60% at 50% -10%,#f3d5bd 0,transparent 60%),var(--bg)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--amber)}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
.brand{display:flex;justify-content:space-between;align-items:center;padding:18px 0 0;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.brand a{color:inherit;text-decoration:none}
.brand b{font-weight:500;color:var(--ink)}
h1{font:400 clamp(40px,11.4vw,62px)/1.02 Gloock,serif;letter-spacing:-.01em;margin:30px 0 16px}
h1 em,h2 em{font-style:normal;color:var(--amber)}
h2{font:400 clamp(30px,8vw,42px)/1.08 Gloock,serif;margin-bottom:20px}
.lede{font-size:18px;color:var(--soft);max-width:30em}
.hand{font:400 21px/1.3 "Nothing You Could Do",cursive;color:#4658a6}
section{padding:72px 0 0}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:24px;padding:19px 24px;border:0;border-radius:999px;background:var(--amber);color:#fff8ee;text-decoration:none;font:700 18px/1.2 "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 26px -10px rgba(163,38,31,.55),inset 0 -3px 0 rgba(0,0,0,.16);transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn span:last-child{font:400 22px/1 Gloock,serif}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(36,24,17,.32)}
.btn[aria-busy=true],.btn:disabled{opacity:.55;pointer-events:none}
.fine{margin-top:12px;font-size:13.5px;color:var(--dim);text-align:center}
.fine a{color:inherit}

/* A tarot card that turns over. .on = face up, .rev = lying reversed. */
.tc{position:relative;display:block;width:100%;aspect-ratio:420/686;padding:0;border:0;background:none;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tc i{position:absolute;inset:0;border-radius:5%/3.2%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .9s var(--ease);box-shadow:0 14px 30px -14px rgba(36,24,17,.55)}
.tc .bk{background:url(/img/back.svg) center/cover}
.tc .ft{transform:rotateY(180deg);background:var(--paper)}
.tc .ft b{position:absolute;inset:0;background:center/cover}
.tc.rev .ft b{transform:rotate(180deg)}
.tc.on .bk{transform:rotateY(-180deg)}
.tc.on .ft{transform:rotateY(0)}
.tc:not(.on):not(.still) .bk{animation:breathe 3.2s ease-in-out infinite}
.tc.wait:not(.on):not(.still) .bk{animation:shuffle 1.1s ease-in-out infinite}
.tc.laid .bk{box-shadow:0 14px 30px -14px rgba(36,24,17,.55),0 0 0 2px var(--amber),0 0 34px -4px rgba(163,38,31,.75);transition:box-shadow .6s}
@keyframes breathe{50%{box-shadow:0 14px 30px -14px rgba(36,24,17,.55),0 0 34px -4px rgba(163,38,31,.5)}}
@keyframes shuffle{25%{transform:translateY(-8px) rotate(-3deg)}75%{transform:translateY(4px) rotate(3deg)}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.three figure{text-align:center}
.three figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* The price, set like a ritual */
.price{position:relative;margin-top:26px;padding:30px 24px 26px;border:1px solid rgba(163,38,31,.4);border-radius:22px;background:linear-gradient(170deg,rgba(163,38,31,.1),transparent 60%);text-align:center}
.price .was{color:var(--dim);font-size:15.5px}
.price .was s{font:400 26px/1 Gloock,serif;color:var(--soft);text-decoration-color:var(--wine);text-decoration-thickness:3px;margin-right:6px}
.price .now{margin-top:6px;font:400 clamp(72px,22vw,104px)/1 Gloock,serif;color:var(--amber)}
.price .now small{font:400 18px/1 "Hanken Grotesk",sans-serif;color:var(--soft);margin-left:4px}
.price .why{margin-top:8px;color:var(--soft);font-size:16px}
.price .off{position:absolute;right:-6px;top:-16px;padding:8px 13px;border-radius:999px;background:var(--wine);color:#fff3ea;font-weight:700;font-size:14px;transform:rotate(6deg)}

/* A month of thirty */
/* Each day is a small fan of its three cards, with the day's number under it. */
.month{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 10px;margin-top:22px}
.month>*{position:relative;aspect-ratio:1/1.06;border:0;padding:0;background:none;opacity:.5;font:400 12px/1 Gloock,serif;color:var(--dim);display:grid;place-items:end center}
.month i{position:absolute;top:2%;width:44%;aspect-ratio:420/686;border-radius:3px;background:url(/img/back.svg) center/cover;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.month i:nth-child(1){left:2%;rotate:-7deg}
.month i:nth-child(2){left:28%;top:0;z-index:1}
.month i:nth-child(3){left:54%;rotate:7deg}
.month .open{opacity:1;color:var(--amber)}
.month .open i{background-color:var(--paper);box-shadow:0 0 0 1.5px var(--amber),0 0 14px -4px rgba(163,38,31,.7)}
.month i.rev{scale:-1}
.month button{cursor:pointer}

/* Lists */
.rows{border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:54px 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.rows i{font:400 28px/1 Gloock,serif;font-style:normal;color:var(--amber)}
.rows b{font-weight:700}
.rows p{color:var(--dim);font-size:16px}
.note{margin-top:72px;padding:32px 24px;border-radius:22px;background:var(--wine);color:#fff3ea;transform:rotate(.6deg)}
.note h2{margin-bottom:12px}
.box{padding:24px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.62),transparent)}
.box p{color:var(--soft)}
.box p+p{margin-top:10px}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--amber);font:400 24px/1 Gloock,serif}
details[open] summary:after{content:"–"}
details p{margin-top:10px;color:var(--dim);font-size:16px}
.end{padding:80px 0 30px;text-align:center}
footer{padding:26px 0 120px;font-size:12.5px;color:var(--dim);text-align:center;line-height:1.6}
footer a{color:inherit}

/* The reading */
.reading{margin-top:26px}
.reading .open{color:var(--soft);font-size:18px}
.reading article{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.62),transparent);opacity:0;transform:translateY(12px);transition:opacity .7s .35s,transform .7s .35s var(--ease)}
.reading article.in{opacity:1;transform:none}
.reading article small{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.reading article b{display:block;margin:4px 0 8px;font:400 23px/1.15 Gloock,serif}
.reading article p{color:var(--soft)}
.keep{margin-top:22px;padding:22px;border-radius:18px;background:var(--paper);color:#2a1a0e;font:400 22px/1.25 Gloock,serif;transform:rotate(-.8deg)}
.keep small{display:block;margin-bottom:6px;font:700 11.5px/1 "Hanken Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a5a1c}

/* Forms */
.field{display:block;width:100%;margin-top:18px;padding:18px 20px;border-radius:16px;border:1px solid rgba(36,24,17,.3);background:rgba(255,255,255,.62);color:var(--ink);font:400 19px/1.2 "Hanken Grotesk",system-ui,sans-serif;outline:0}
.field:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(163,38,31,.2)}
.field::placeholder{color:#a39483}
.err{min-height:22px;margin-top:10px;color:#b3261e;font-size:14.5px}

/* Sticky bar and scroll reveals (driven by shared.js) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:9;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(246,239,227,.96) 34%);transform:translateY(110%);transition:transform .35s var(--ease)}
.bar.on{transform:none}
.bar .btn{margin:0 auto;max-width:520px;padding:15px 22px}
.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s var(--ease)}
.anim .rv.in{opacity:1;transform:none}
.anim .note.rv.in{transform:rotate(.6deg)}
@media(prefers-reduced-motion:reduce){.anim .rv{opacity:1;transform:none;transition:none}.tc i{transition:none}.tc .bk{animation:none!important}.reading article{transition:none}}

/* The quiz */
.quiz fieldset{border:0;padding:0;min-width:0}
.quiz h1{font-size:clamp(34px,9.6vw,50px)}
.dots{display:flex;gap:6px;margin-top:22px}
.dots i{flex:1;height:3px;border-radius:3px;background:rgba(36,24,17,.16);transition:background .3s}
.dots i.on{background:var(--amber)}
.back{margin-top:14px;padding:6px 0;border:0;background:none;color:var(--dim);font:400 15px "Hanken Grotesk",sans-serif;cursor:pointer}
.opts{display:grid;gap:12px;margin-top:24px}
.opt{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-radius:18px;border:1px solid rgba(36,24,17,.22);background:linear-gradient(160deg,rgba(255,255,255,.62),transparent);color:var(--ink);font:400 22px/1.15 Gloock,serif;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.opt small{font:400 14.5px/1.3 "Hanken Grotesk",sans-serif;color:var(--dim);display:block;margin-top:4px}
.opt:after{content:"→";color:var(--amber);font-size:22px;margin-left:12px}
.opt:active,.opt.on{border-color:var(--amber);transform:scale(.985)}
.signs{grid-template-columns:repeat(3,1fr);gap:9px}
.signs .opt{display:block;padding:14px 6px;text-align:center;font-size:17px}
.signs .opt:after{content:none}
.signs .opt b{display:block;font:400 24px/1.1 serif;color:var(--amber);margin-bottom:2px}
.signs .wide{grid-column:1/-1;font:400 16px "Hanken Grotesk",sans-serif;color:var(--dim)}
.deal{padding-top:40px;text-align:center}
.deal .three{max-width:300px;margin:0 auto 26px}
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:380px;margin:30px auto 0}
.pair figcaption{margin-top:10px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero3{margin:34px 0 4px}
.hero3 figure:nth-child(1){transform:rotate(-4deg) translateY(8px)}
.hero3 figure:nth-child(3){transform:rotate(4deg) translateY(8px)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* The laying ritual on the reader's page */
.steps{list-style:none;padding:0;margin:26px auto 0;max-width:330px;text-align:left}
.steps li{position:relative;padding:8px 0 8px 32px;color:#a39483;transition:color .4s}
.steps li:before{content:"";position:absolute;left:5px;top:15px;width:9px;height:9px;border-radius:50%;border:1px solid currentColor}
.steps li.now{color:var(--ink)}
.steps li.now:before{border-color:var(--amber);background:var(--amber);animation:pulse 1.2s ease-in-out infinite}
.steps li.done{color:var(--dim)}
.steps li.done:before{content:"☾";top:6px;left:3px;width:auto;height:auto;border:0;color:var(--amber);font-size:16px}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(163,38,31,.16)}}
.prog{height:3px;margin:22px auto 0;max-width:330px;border-radius:3px;background:rgba(36,24,17,.14);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--amber);transition:width .25s linear}
@media(prefers-reduced-motion:reduce){.steps li.now:before{animation:none}}

/* The table video on the landing page */
.film{position:relative;max-width:264px;margin:24px auto 0;transform:rotate(-1.4deg)}
.film video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:16px;background:var(--bg2);box-shadow:0 26px 50px -22px rgba(36,24,17,.6),0 0 0 1px rgba(36,24,17,.1)}
.film .snd{position:absolute;right:10px;bottom:10px;padding:6px 11px;border:0;border-radius:999px;background:rgba(18,11,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff8ee;font:500 12px/1 "Hanken Grotesk",sans-serif;letter-spacing:.06em;cursor:pointer}
.film .snd[aria-pressed=true]{background:var(--amber);color:#fff8ee}
textarea.field{resize:vertical;min-height:120px;line-height:1.45;font-size:17px}

/* The home page: the two films side by side, and the three things we make. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:380px;margin:24px auto 0}
.duo figure{position:relative;margin:0;max-width:none;transform:none}
.duo figure:first-child{rotate:-1.5deg}
.duo figure:last-child{rotate:1.5deg}
.duo video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:var(--bg2);box-shadow:0 22px 44px -22px rgba(36,24,17,.65),0 0 0 1px rgba(36,24,17,.1)}
.duo figcaption{margin-top:8px;text-align:center;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.duo .snd{bottom:34px}
.prods{display:grid;gap:14px}
.prod{position:relative;display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px;border:1.5px solid rgba(36,24,17,.13);border-radius:22px;background:#fffdf8;box-shadow:0 14px 30px -24px rgba(36,24,17,.6)}
.prod.best{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 14px 30px -24px rgba(36,24,17,.6)}
.prod .flag{position:absolute;right:16px;top:-12px;padding:3px 12px;border-radius:99px;background:var(--amber);color:#fff8ee;font-size:12px;font-weight:600}
.prod .shot{position:relative;align-self:start}
.prod .shot img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 10px 20px -12px rgba(36,24,17,.7)}
.prod .shot .over{position:absolute;right:-10px;bottom:-12px;width:52%;rotate:8deg}
.prod .shot.fan{height:120px}
.prod .shot.fan img{position:absolute;top:8px;width:56%}
.prod .shot.fan img:nth-child(1){left:0;rotate:-9deg}
.prod .shot.fan img:nth-child(2){left:22%;top:0;z-index:1}
.prod .shot.fan img:nth-child(3){left:44%;rotate:9deg}
.prod h3{font:400 23px/1.15 Gloock,serif}
.prod p{margin-top:6px;color:var(--soft);font-size:15.5px;line-height:1.4}
.prod .cost{margin-top:10px;color:var(--ink);font-size:15px}
.prod .cost b{font:400 30px/1 Gloock,serif;margin-right:4px}
.prod .cost s{color:var(--dim);margin-left:4px}
.prod .cost small{display:block;margin-top:3px;color:var(--dim);font-size:13.5px}
.prod .btn{margin-top:14px;padding:14px 18px;font-size:16px}
.pages3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.pages3 img{width:100%;height:auto;border-radius:4px;box-shadow:0 12px 24px -14px rgba(36,24,17,.6)}

/* Long names and long words never push a page wider than the screen. */
h1,h2,h3,dd,.lede{overflow-wrap:anywhere}
.wrap{overflow-x:clip}

/* The home page, cleaned up, and a real desktop layout. */
.home .facts{display:grid;gap:14px}
.home .facts div{padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.62)}
.home .facts b{display:block;font:400 20px/1.2 Gloock,serif}
.home .facts p{margin-top:6px;color:var(--soft);font-size:16px}
.home .split>div+div{margin-top:22px}
@media (min-width:900px){
  .wrap{max-width:640px}
  .wrap.home{max-width:1120px;padding:0 40px}
  .home header{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:30px}
  .home header h1{font-size:clamp(54px,5.4vw,76px);margin-top:0}
  .home header .lede{font-size:21px}
  .home header .btn{max-width:420px}
  .home header .fine{text-align:left;max-width:420px}
  .home .duo{max-width:none;margin:0;gap:18px}
  .home section{padding-top:110px}
  .home h2{font-size:46px;margin-bottom:30px}
  .home .prods{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
  .home .prod{grid-template-columns:1fr;gap:18px;padding:26px}
  .home .prod .shot{width:132px;margin:0 auto}
  .home .prod .shot.fan{width:150px;height:150px}
  .home .prod .body{display:flex;flex-direction:column;height:100%}
  .home .prod .body .btn{margin-top:auto}
  .home .prod .cost{margin-bottom:18px}
  .home .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .home .split>div+div{margin-top:0}
  .home .split h2{margin-bottom:22px}
  .home .split .three{max-width:440px}
  .home .facts{grid-template-columns:repeat(4,1fr);gap:18px}
  .home .narrow,.home .end{max-width:760px;margin-left:auto;margin-right:auto}
  .home .plain h2,.home .narrow h2,.home #shop h2{text-align:center}
  .bar{display:none}
  footer{padding-bottom:60px}
}