@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/karla-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/karla-500.ttf') format('truetype');
}

:root{
  --ink:#16151A;
  --paper:#EDEBE6;
  --paper-2:#E4E1DB;
  --plum:#544165;
  --plum-pale:#E7E2EC;
  --brass:#8C6D34;
  --muted:#5E5A55;
  --rule:#CFCBC3;
  --measure:34rem;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout ---------- */
.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}

section{padding:4.5rem 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}

/* the marginal rail: label sits left of content on desktop, above on mobile */
.rail{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:56rem){
  .rail{grid-template-columns:9rem minmax(0,1fr);gap:3rem}
}
.rail__label{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);font-weight:500;padding-top:.4rem;
}
.rail__body{max-width:var(--measure)}
.rail__body--wide{max-width:none}

/* ---------- type ---------- */
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.6vw,2rem);margin-bottom:1.25rem}
h3{font-size:1.1rem;font-family:'Karla',sans-serif;font-weight:500;letter-spacing:0}
p+p{margin-top:1rem}

/* Most pages separate headings with <section> padding. Long single-column
   pages stack several headings inside one block, where they would otherwise
   sit flush against the paragraph above. */
:where(p,ul,ol,dl,.actions,.signup,.facts)+h2{margin-top:3rem}
:where(p,ul,ol,dl,.actions,.signup,.facts)+h3{margin-top:2.25rem}
.lede{font-size:1.15rem;color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}

a{color:var(--plum);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* ---------- header ---------- */
.masthead{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.masthead__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.wordmark{font-family:'Fraunces',serif;font-size:1.05rem;text-decoration:none;color:var(--ink)}
.nav{display:flex;gap:1.5rem;font-size:.9rem}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav__short{display:none}
@media(max-width:40rem){
  .masthead{padding:1rem 0}
  .nav{flex-wrap:wrap;gap:.35rem 1rem;font-size:.85rem}
  .nav a{white-space:nowrap}
  .nav__extra,.nav__long{display:none}
  .nav__short{display:inline}
}

/* ---------- hero ---------- */
.hero{padding:5rem 0 4.5rem}
.hero h1{max-width:20ch;margin-bottom:1.25rem}
.hero .lede{max-width:46ch}
.portrait{
  width:100px;height:100px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--rule);
  object-fit:cover;display:block;margin-bottom:2rem;
}
@media(max-width:40rem){
  .hero{padding:2.5rem 0 3rem}
  .portrait{margin-bottom:1.5rem}
}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{
  display:inline-block;font-size:.95rem;font-weight:500;
  padding:.7rem 1.4rem;border-radius:2px;text-decoration:none;
  border:1px solid var(--plum);transition:background .12s,color .12s;
}
.btn--solid{background:var(--plum);color:var(--paper)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{color:var(--plum);background:transparent}
.btn--ghost:hover{background:var(--plum-pale);color:var(--plum)}

/* ---------- stats counter badge ---------- */
.stats-badge{
  display:inline-flex;align-items:center;gap:1.25rem;
  background:var(--paper-2);border:1px solid var(--rule);
  padding:.85rem 1.4rem;border-radius:6px;margin-top:1.75rem;
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.stats-badge__main{display:flex;align-items:baseline;gap:.25rem}
.stats-badge__num{
  font-family:'Fraunces',serif;font-size:1.85rem;font-weight:500;
  color:var(--plum);line-height:1;
}
.stats-badge__plus{
  font-family:'Fraunces',serif;font-size:1.4rem;font-weight:500;
  color:var(--brass);
}
.stats-badge__info{display:flex;flex-direction:column;gap:.1rem}
.stats-badge__label{
  font-size:.82rem;font-weight:500;color:var(--ink);
}
.stats-badge__stars{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--muted);
}
.stars-gold{color:var(--brass);letter-spacing:1px}

/* ---------- reviews ---------- */
.reviews-summary{
  background:var(--paper-2);border:1px solid var(--rule);
  padding:1.25rem 1.75rem;border-radius:6px;margin-bottom:1.5rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.reviews-summary__score{display:flex;align-items:center;gap:1rem}
.reviews-summary__big{
  font-family:'Fraunces',serif;font-size:2.4rem;font-weight:500;color:var(--ink);line-height:1;
}
.reviews-summary__text{display:flex;flex-direction:column}
.reviews-summary__rating{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--ink);font-size:.95rem}
.reviews-summary__sub{font-size:.85rem;color:var(--muted)}
.reviews-summary__badge{
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--plum-pale);color:var(--plum);font-weight:500;
  padding:.4rem .8rem;border-radius:20px;border:1px solid rgba(84,65,101,0.15);
}

.reviews{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:40rem){.reviews{grid-template-columns:1fr 1fr}}
.review{
  background:var(--paper-2);border:1px solid var(--rule);
  padding:1.6rem;border-radius:6px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.review:hover{
  transform:translateY(-3px);
  border-color:var(--plum);
  box-shadow:0 10px 24px rgba(22,21,26,0.06);
}
.review__stars{color:var(--brass);font-size:1.1rem;margin-bottom:.85rem;letter-spacing:2px}
.review p{font-size:1rem;color:var(--ink);line-height:1.6;flex-grow:1;font-weight:400}
.review__footer{
  display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;
  padding-top:1rem;border-top:1px solid var(--rule);
}
.review__avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--plum-pale);color:var(--plum);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:500;font-size:.9rem;flex-shrink:0;
  border:1px solid rgba(84,65,101,0.2);
}
.review__info{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column}
.review__name{font-weight:500;color:var(--ink);font-size:.9rem}
.review__badge{
  display:inline-block;font-size:.72rem;
  color:var(--brass);font-weight:500;margin-top:.1rem;
}

/* ---------- sample reading: the spread ---------- */
.spread{
  background:var(--paper-2);border:1px solid var(--rule);
  padding:1.75rem 1.5rem;margin-top:.5rem;
}
.spread__q{
  font-family:'Fraunces',serif;font-size:1.15rem;line-height:1.4;
  padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--rule);
}
.cards{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:44rem){.cards{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.card__slot{
  border:1px solid var(--rule);background:var(--paper);
  aspect-ratio:2/3;max-height:200px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:.85rem;color:var(--muted);
  margin-bottom:.75rem;border-radius:2px;
}
.card__slot img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.card__pos{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:.3rem;
}
.card__name{font-family:'Fraunces',serif;font-size:1rem;display:block;margin-bottom:.5rem}
.card__text{font-size:.9rem;color:var(--muted);line-height:1.6}
.spread__close{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);
  font-size:.95rem;
}

/* ---------- process ---------- */
.steps{list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--rule);
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:counter(s);font-family:'Fraunces',serif;color:var(--brass);font-size:1rem;
}

/* ---------- pricing ---------- */
.tiers{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
.tiers th{
  text-align:left;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);font-weight:500;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.tiers td{padding:.85rem 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:.95rem}
.tiers td:last-child{text-align:right;white-space:nowrap;font-family:'Fraunces',serif}
.tiers tr:last-child td{border-bottom:0}

/* ---------- info list ---------- */
.info dt{font-weight:500;font-size:.95rem;margin-top:1.1rem}
.info dt:first-child{margin-top:0}
.info dd{font-size:.95rem;color:var(--muted)}

/* ---------- plain lists ---------- */
.plain-list{list-style:none;margin-top:.5rem}
.plain-list li{
  padding:.6rem 0 .6rem 1.1rem;border-bottom:1px solid var(--rule);
  font-size:.95rem;position:relative;
}
.plain-list li:last-child{border-bottom:0}
.plain-list li::before{content:'';position:absolute;left:0;top:1.15rem;width:5px;height:5px;background:var(--brass)}

/* ---------- draw tool ---------- */
.hero--tool{padding:3.5rem 0 3rem}

.draw{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;
  padding:1.75rem 1.5rem;margin-top:2rem;
}
.draw__label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.draw__input{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:.7rem .85rem;
}
.draw__input:focus{outline:2px solid var(--plum);outline-offset:1px;border-color:var(--plum)}

.draw__modes{display:flex;gap:.5rem;margin:1.25rem 0}
.draw__mode{
  font-family:inherit;font-size:.9rem;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:.5rem 1rem;transition:background .12s,color .12s,border-color .12s;
}
.draw__mode:hover{border-color:var(--plum);color:var(--plum)}
.draw__mode.is-active{background:var(--plum-pale);border-color:var(--plum);color:var(--plum);font-weight:500}

.draw__go{cursor:pointer;font-family:inherit;width:100%}
.draw__go:disabled{opacity:.6;cursor:progress}
@media(min-width:32rem){.draw__go{width:auto}}

.draw__note{margin-top:.85rem}

.draw__card{
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  animation:draw-in .35s ease-out;
}
@keyframes draw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.draw__question{
  font-family:'Fraunces',Georgia,serif;font-size:1.05rem;color:var(--muted);
  margin-bottom:1rem;
}
.draw__answer{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(2.2rem,7vw,3rem);
  line-height:1;margin-bottom:.75rem;
}
.draw__answer--yes{color:var(--plum)}
.draw__answer--no{color:var(--ink)}
.draw__answer--maybe{color:var(--brass)}

.draw__cardname{font-family:'Fraunces',Georgia,serif;font-size:1.35rem;line-height:1.2}
.draw__orientation{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);margin-top:.3rem;
}
.draw__note-rev{font-size:.95rem;color:var(--muted);margin-top:.85rem;max-width:48ch}

.draw__keywords{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.draw__keywords li{
  font-size:.82rem;color:var(--plum);background:var(--plum-pale);
  border:1px solid rgba(84,65,101,0.15);border-radius:20px;padding:.3rem .8rem;
}

.draw__cta{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.draw__error{color:var(--ink);font-size:.95rem}

/* ---------- card pages ---------- */
.card-page{padding-top:2.5rem}

.crumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.82rem;color:var(--muted);margin-bottom:2rem;
}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--rule)}

.facts{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;
  padding:1.25rem 1.5rem;margin:1.75rem 0;font-size:.9rem;
}
.facts dt{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);font-weight:500;padding-top:.15rem;
}
.facts dd{color:var(--ink)}

.keyword-block{margin:1.75rem 0}
.keyword-block__title{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);font-weight:500;margin-top:1rem;
}
.keyword-block__title:first-child{margin-top:0}

.card-section{margin-top:2.5rem}
.card-section h2{font-size:clamp(1.3rem,3vw,1.6rem);margin-bottom:.85rem}

.card-cta{
  margin-top:3rem;padding:1.75rem;border:1px solid var(--rule);
  background:var(--paper-2);border-radius:6px;
}
.card-cta h2{font-size:1.3rem;margin-bottom:.75rem}
.card-cta p{font-size:.95rem}

.card-nav{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.9rem;
}
.card-nav__next{margin-left:auto;text-align:right}

/* ---------- deck index ---------- */
.deck-group{margin-bottom:2.75rem}
.deck-group h2{margin-bottom:.35rem}

.deck-list{list-style:none;margin-top:1rem;column-gap:2.5rem}
@media(min-width:48rem){.deck-list{columns:2}}
.deck-list li{
  padding:.5rem 0;border-bottom:1px solid var(--rule);
  font-size:.95rem;break-inside:avoid;
}
.deck-list__pending{color:var(--muted)}
.deck-list__kw{display:block;font-size:.8rem;color:var(--muted)}

/* ---------- signup ---------- */
.signup{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;
  padding:1.5rem;margin:2rem 0 1.25rem;
}
.signup__label{display:block;font-size:.95rem;font-weight:500;margin-bottom:.6rem}
.signup__row{display:flex;flex-wrap:wrap;gap:.6rem}
.signup__input{
  flex:1 1 14rem;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:.7rem .85rem;
}
.signup__input:focus{outline:2px solid var(--plum);outline-offset:1px;border-color:var(--plum)}
.signup__go{cursor:pointer;font-family:inherit;border:1px solid var(--plum);flex:0 0 auto}
.signup__small{font-size:.8rem;color:var(--muted);margin-top:.85rem;line-height:1.55}

/* ---------- printable spread sheet ---------- */
.sheet-intro{padding:3rem 0 2rem}
.sheet-outro{padding:3rem 0 4rem;border-top:1px solid var(--rule)}
kbd{
  font:inherit;font-size:.85em;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:3px;padding:.05em .35em;
}

.sheet{
  max-width:52rem;margin:0 auto 3rem;padding:2.5rem;
  background:#fff;border:1px solid var(--rule);
}
.sheet__head{border-bottom:1.5px solid var(--ink);padding-bottom:.9rem;margin-bottom:1.5rem}
.sheet__wordmark{font-family:'Fraunces',Georgia,serif;font-size:1rem}
.sheet__title{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:500;margin-top:.15rem;
}
.sheet__date{font-size:.78rem;color:var(--muted);margin-top:.85rem;display:flex;align-items:baseline;gap:.5rem}
.rule{flex:1;border-bottom:1px dotted var(--rule);height:.9em}
.rule--short{flex:0 0 6rem}

.sheet__block{margin-bottom:1.6rem;break-inside:avoid}
.sheet__h{
  font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:400;
  margin-bottom:.2rem;
}
.sheet__note{font-size:.78rem;color:var(--muted);margin-bottom:.8rem}

.slots{display:grid;gap:.75rem}
.slots--three{grid-template-columns:repeat(3,1fr)}
.slots--five{grid-template-columns:repeat(5,1fr)}
@media(max-width:34rem){
  .slots--three{grid-template-columns:1fr}
  .slots--five{grid-template-columns:repeat(2,1fr)}
}
.slot{break-inside:avoid}
.slot__box{
  border:1px solid var(--ink);aspect-ratio:2/3;max-height:96px;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:.3rem .4rem;margin-bottom:.4rem;
}
.slot__num{font-family:'Fraunces',Georgia,serif;font-size:.8rem;color:var(--brass)}
.slot__pos{font-size:.76rem;font-weight:500;line-height:1.3}
.slot__prompt{font-size:.7rem;color:var(--muted);line-height:1.35;margin-top:.15rem}
.write{
  margin-top:.4rem;height:3.1rem;
  background:repeating-linear-gradient(
    to bottom, transparent, transparent .95rem,
    var(--rule) .95rem, var(--rule) calc(.95rem + 1px));
}
.write--short{height:2.1rem}

.sheet__block--how{border-top:1px solid var(--rule);padding-top:1.1rem}
.sheet__how{list-style:none}
.sheet__how li{font-size:.78rem;line-height:1.5;padding:.2rem 0 .2rem .9rem;position:relative}
.sheet__how li::before{content:'';position:absolute;left:0;top:.72em;width:4px;height:4px;background:var(--brass)}

.sheet__foot{
  border-top:1.5px solid var(--ink);margin-top:1.4rem;padding-top:.7rem;
  font-size:.72rem;color:var(--muted);
}
.sheet__disclaimer{margin-top:.25rem;font-size:.66rem}

/* One page, ink-light, none of the site chrome. */
@media print{
  @page{size:auto;margin:11mm}
  html,body{background:#fff;color:#000;font-size:10pt}
  .masthead,footer,.sheet-intro,.sheet-outro,.nav,.btn{display:none!important}
  main{padding:0}
  .sheet{
    max-width:none;margin:0;padding:0;border:0;
    background:#fff;break-inside:auto;
  }
  .sheet__block{break-inside:avoid;margin-bottom:5mm}
  .slot__box{border-color:#000;max-height:26mm}
  .write{
    background:repeating-linear-gradient(
      to bottom, transparent, transparent 4.2mm,
      #bbb 4.2mm, #bbb calc(4.2mm + 0.2mm));
    height:13mm;
  }
  .write--short{height:9mm}
  a[href]::after{content:''}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:2.5rem 0 3.5rem}
.footer__links{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.9rem;margin-bottom:1.25rem}
.disclaimer{font-size:.82rem;color:var(--muted);max-width:52ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}