/* sadsuccubus666.com: illustrated vintage tarot spread, one screen, cards flip on load. Claude Opus 5.5, 2026-11-03. */
:root{--table:#14110e;--stock:#ece1c4;--stock-edge:#c9b38a;--ink:#2a2420;--cream:#efe4c8;--muted:#a3957f;--glow:#f2cfa0;
  --fell:"IM Fell English",Georgia,"Times New Roman",serif;--fellsc:"IM Fell English SC",Georgia,"Times New Roman",serif;
  --vh:1vh}
@supports (height:100svh){:root{--vh:1svh}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--table);touch-action:manipulation}
body{color:var(--cream);font-family:var(--fell);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;
  min-height:calc(100 * var(--vh));display:flex;align-items:center;justify-content:center;
  padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 60% at 50% 34%,rgba(120,98,64,.16),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--table)}
main{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:calc(1.6 * var(--vh))}

/* header scales with screen height so everything fits one screen */
header{text-align:center}
.name{margin:0;font-family:var(--fell);font-style:italic;font-weight:400;font-size:min(11vw,calc(6.2 * var(--vh)),56px);line-height:1;color:var(--cream)}
.handle{margin:calc(.6 * var(--vh)) 0 0;font-family:var(--fellsc);font-size:min(4vw,calc(1.9 * var(--vh)),16px);letter-spacing:.16em;color:var(--muted)}

/* spread: card sizes come from the screen height (hero 40%, row 22%) */
.spread{display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--vh))}
.tcard{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ink);text-decoration:none;perspective:1100px}
.hero{transform:rotate(-1deg)}
.hero .flip{height:min(calc(40 * var(--vh)),112vw)}
.row{display:flex;justify-content:center;align-items:flex-start;gap:min(3.2vw,22px)}
.small .flip{height:min(calc(21 * var(--vh)),50vw)}
.small:nth-child(1){transform:rotate(-3deg) translateY(3px)}
.small:nth-child(3){transform:rotate(3deg) translateY(3px)}

/* flip container + two faces */
.flip{position:relative;display:block;aspect-ratio:7/12;container-type:inline-size;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.side{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.5% / 2.6%;
  box-shadow:0 12px 26px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4)}
.front{transform:rotateY(0deg)}
.back{transform:rotateY(180deg)}

/* front: cream stock, worn edge, keyline art window, numeral plate, engraved title bar */
.stock{display:flex;flex-direction:column;padding:6.5cqw 6.5cqw 4cqw;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E"),
    var(--stock);
  box-shadow:inset 0 0 0 1px var(--stock-edge),inset 0 0 18px rgba(120,82,36,.38),0 12px 26px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4)}
.art{position:relative;display:block;flex:1;min-height:0;width:100%;overflow:hidden;outline:1.5px solid var(--ink);background:#d9cba6}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.art .blank{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(42,36,32,.08) 0 2px,transparent 2px 7px),linear-gradient(#cdd6c3,#d9cba6)}
.num{position:absolute;left:50%;top:3.2%;transform:translateX(-50%);min-width:30%;padding:.6cqw 4cqw .2cqw;text-align:center;
  font-family:var(--fellsc);font-size:10cqw;line-height:1.05;color:var(--ink);background:var(--stock);
  box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 3px var(--stock),inset 0 0 0 3.6px var(--ink)}
.title{position:relative;flex:none;height:15cqw;margin-top:3cqw;display:flex;align-items:center;justify-content:center;gap:3cqw;
  font-family:var(--fellsc);font-size:8.6cqw;letter-spacing:.05em;white-space:nowrap;color:var(--ink);
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.title span:not(.orn){overflow:hidden;text-overflow:ellipsis}
.orn{font-size:.7em;opacity:.75}
.small .title{font-size:10cqw;height:17cqw;gap:2cqw;letter-spacing:.01em}
.small .orn{display:none}
.small .num{font-size:8.6cqw;min-width:36%;padding:.8cqw 3cqw .2cqw;top:3.4%;box-shadow:inset 0 0 0 1px var(--ink)}

/* back: inked lattice with a cream frame and a star medallion */
.cb{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,var(--ink) 0 17%,transparent 17.5%),
    radial-gradient(circle at 50% 50%,transparent 0 19%,rgba(239,228,200,.75) 19.5% 20.3%,transparent 21%),
    repeating-linear-gradient(45deg,rgba(239,228,200,.16) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(239,228,200,.16) 0 1px,transparent 1px 8px),
    var(--ink);
  box-shadow:inset 0 0 0 5cqw var(--stock),inset 0 0 0 5.6cqw var(--ink),inset 0 0 0 7.2cqw rgba(239,228,200,.85),inset 0 0 0 7.8cqw var(--ink)}
.cb-star{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-style:normal;font-size:20cqw;line-height:1;color:var(--cream)}

/* labels and the small links under the spread */
.label{display:block;margin-top:calc(1.3 * var(--vh));text-align:center;font-family:var(--fellsc);font-size:min(4vw,calc(2 * var(--vh)),16px);letter-spacing:.08em;line-height:1.2;color:var(--cream)}
.label small{display:block;font-size:.8em;letter-spacing:.14em;color:var(--muted)}
.primary .label{color:var(--glow)}
.more{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px;font-family:var(--fellsc);font-size:min(3.8vw,calc(1.95 * var(--vh)),15px);letter-spacing:.1em}
.more a,.book{color:var(--cream);text-decoration:none;padding:6px 2px;border-bottom:1px solid rgba(239,228,200,.3)}
.book{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 8px;font-family:var(--fellsc);font-size:min(3.8vw,calc(1.95 * var(--vh)),15px);letter-spacing:.1em;border-bottom:0;padding-top:0}
.book span{font-family:var(--fell);font-style:italic;letter-spacing:.02em;text-transform:none;color:var(--glow);border-bottom:1px solid rgba(242,207,160,.35)}

/* touch + focus */
@media (hover:hover){a.tcard:hover .front{box-shadow:inset 0 0 0 1px var(--stock-edge),inset 0 0 18px rgba(120,82,36,.38),0 18px 34px rgba(0,0,0,.6),0 0 0 2px rgba(242,207,160,.35)}
  .more a:hover,.book:hover span{color:var(--glow)}}
a.tcard:active .flip{transform:translateY(2px)}
a:focus-visible{outline:2px solid var(--glow);outline-offset:5px;border-radius:5px}

/* on load: cards drop face-down, then turn over (hero first, then left to right).
   Opacity lives on the wrapper; the 3D turn lives on .flip (opacity on a preserve-3d element flattens it). */
@media (prefers-reduced-motion:no-preference){
  .tcard{animation:appear .45s ease-out both}
  .flip{animation:turn 1.5s cubic-bezier(.25,.75,.2,1) both}
  .hero,.hero .flip{animation-delay:.1s}
  .small:nth-child(1),.small:nth-child(1) .flip{animation-delay:.55s}
  .small:nth-child(2),.small:nth-child(2) .flip{animation-delay:.75s}
  .small:nth-child(3),.small:nth-child(3) .flip{animation-delay:.95s}
  @keyframes appear{from{opacity:0}to{opacity:1}}
  @keyframes turn{
    0%{transform:translateY(28px) rotateY(180deg)}
    30%{transform:translateY(0) rotateY(180deg)}
    48%{transform:rotateY(180deg)}
    100%{transform:rotateY(0deg)}
  }
}
/* landscape phones: side by side */
@media (orientation:landscape) and (max-height:520px){
  main{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:900px}
  .spread{flex-direction:row;align-items:flex-start}
  .hero .flip{height:calc(70 * var(--vh))}.small .flip{height:calc(44 * var(--vh))}
}