/* /tarot/ and /tarot/three/: the card reveal is the visual focus. Restrained gold, silver hairlines, deep night,
   generous space. The question is set larger than the meaning, on purpose. */
.tt { display: grid; gap: 2rem 3rem; padding-top: clamp(2.2rem, 5vw, 4rem); padding-bottom: 1rem; align-items: center; }
@media (min-width: 960px) { .tt { grid-template-columns: 1fr minmax(260px, 340px); grid-template-areas: "words table" "controls table"; } .tt__words { grid-area: words; } .table { grid-area: table; } .tt__controls { grid-area: controls; align-self: start; } }
@media (min-width: 960px) { .tt--three { grid-template-columns: 1fr; grid-template-areas: "words" "table" "controls"; } }
.tt h1 { font: 400 var(--t-hero)/.98 var(--display); letter-spacing: -.01em; }
.tt h1 span { display: block; margin-top: .3em; font: italic 400 var(--t-2xl)/1.1 var(--story); color: var(--gold); }
.tt__frame { margin-top: 1.4rem; color: var(--ink-dim); font-size: var(--t-l); max-width: 50ch; }
.tt__other { margin-top: 1rem; }
.tt__other a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.tt__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.4rem; }
.tseg { border: 0; padding: 0; margin: 0; display: inline-grid; grid-auto-flow: column; }
.tseg legend { font-size: var(--t-xs); color: var(--ink-dim); margin-bottom: .3rem; padding: 0; }
.tseg legend b { color: var(--ink); font-weight: 600; }
.tseg input { position: absolute; opacity: 0; pointer-events: none; }
.tseg label { min-height: 48px; min-width: 4.2rem; display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border: 1px solid var(--line-2); background: var(--night); color: var(--ink-dim); font-size: var(--t-s); cursor: pointer; }
.tseg label:first-of-type { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.tseg label:last-of-type { border-radius: 0 var(--r-pill) var(--r-pill) 0; border-left: 0; }
.tseg input:checked + label { color: var(--night); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.tseg input:focus-visible + label { outline: 2px solid var(--eye); outline-offset: 2px; position: relative; z-index: 1; }
.tt__draw { min-width: 13rem; }
.tt__draw:disabled { opacity: .6; cursor: wait; }

/* the table, the deck and the cat */
.table { position: relative; display: grid; place-items: center; min-height: 26rem; margin: 0; padding: 1.5rem 0; list-style: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(216, 168, 78, .1), transparent 70%), radial-gradient(90% 70% at 50% 60%, rgba(75, 47, 87, .35), transparent 75%); border-radius: var(--r-lg); }
.table__cat { position: absolute; width: clamp(64px, 9vw, 92px); height: auto; right: 4%; bottom: 0; pointer-events: none; }
.table--three { grid-template-columns: repeat(3, minmax(0, 1fr)); place-items: start stretch; gap: clamp(.6rem, 2.5vw, 2rem); padding: 2rem clamp(.6rem, 3vw, 2rem); min-height: 0; }
.table--three .tslot { width: 100%; }
.tslot { display: grid; justify-items: center; gap: .8rem; }
.tslot__pos { font: italic var(--t-m)/1.25 var(--story); color: var(--gold); text-align: center; margin: 0; }
.tslot--deck { position: relative; }
/* a hint of the deck beneath the top card */
.tslot--deck::before, .tslot--deck::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: #120D19; border: 1px solid var(--gold-dim); transform: translate(6px, 6px) rotate(2deg); z-index: -1; }
.tslot--deck::after { transform: translate(12px, 11px) rotate(4deg); opacity: .6; }

.tcard { margin: 0; width: clamp(150px, 26vw, 250px); aspect-ratio: 3 / 5; perspective: 1400px; }
.table--three .tcard { width: 100%; max-width: 230px; }
.tcard__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.tcard.is-open .tcard__inner { transform: rotateY(180deg); }
.tcard__back, .tcard__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(4, 2, 8, .7), 0 0 0 1px rgba(216, 168, 78, .35); }
.tcard__back { display: grid; place-items: center; background: #120D19; }
.tcard__back img { width: 100%; height: 100%; object-fit: cover; }
.tcard__face { transform: rotateY(180deg); background: #120D19; }
.tcard__face svg { width: 100%; height: 100%; display: block; transition: transform .6s var(--ease); }
.tcard.is-reversed .tcard__face svg { transform: rotate(180deg); }
.tcard.is-open { filter: drop-shadow(0 0 30px rgba(216, 168, 78, .18)); }

/* the reading */
.treading { padding-top: clamp(2.4rem, 6vw, 4rem); }
.treading:focus, .treading [tabindex="-1"]:focus { outline: none; }
.treading__title { font: 400 var(--t-2xl)/1.05 var(--display); margin-bottom: 1.6rem; }
.treading__grid { display: grid; gap: 1.4rem; }
@media (min-width: 960px) { .treading__grid { grid-template-columns: repeat(3, 1fr); } }
.tread { max-width: 46rem; }
.treading--three .tread { padding: 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--dusk); }
.tread__pos { font: 600 var(--t-xs)/1.3 var(--ui); color: var(--gold); margin-bottom: .4rem; }
.tread__name { font: 400 var(--t-2xl)/1.05 var(--display); }
.treading--three .tread__name { font-size: var(--t-xl); }
.tread__orient { color: var(--ink-dim); font-size: var(--t-s); margin-top: .5rem; }
.tread__q { margin: 1.6rem 0 1.4rem; font: italic 400 clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem)/1.2 var(--story); color: var(--ink); max-width: 30ch; }
.treading--three .tread__q { font-size: var(--t-xl); }
.tread__kw { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tread__kw li { padding: .25rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--gold-dim); color: var(--gold); font-size: var(--t-xs); }
.tread__sym, .tread__mean { color: var(--ink-dim); max-width: 62ch; margin-bottom: .8rem; }
.tread__sym b, .tread__mean b { color: var(--ink); font-weight: 600; }
.tread__note { color: var(--ink-faint); }
.tread__q2 { font: italic var(--t-l)/1.45 var(--story); color: var(--gold); margin-top: 1rem; }
.treading__when { margin-top: 1.6rem; color: var(--ink-faint); font-size: var(--t-xs); max-width: 70ch; }
.treading__act { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-top: 1.2rem; }
.treading__msg { margin: 0; color: var(--ink-dim); font-size: var(--t-s); }

/* kept + about */
.tkept-sec, .tabout { margin-top: clamp(3rem, 7vw, 4.5rem); }
.tkept-sec h2, .tabout h2 { font: 400 var(--t-xl)/1.15 var(--display); }
.tkept-sec__note { color: var(--ink-faint); font-size: var(--t-xs); margin: .3rem 0 1rem; }
.tkept-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tkept { padding: 1rem; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--dusk); display: grid; gap: .3rem; justify-items: start; }
.tkept__t { font: 400 var(--t-m)/1.35 var(--display); }
.tkept__s { color: var(--ink-dim); font-size: var(--t-xs); margin-bottom: .4rem; }
.tabout { padding-bottom: clamp(3rem, 8vw, 5rem); }
.tabout ul { color: var(--ink-dim); max-width: 70ch; padding-left: 1.2rem; display: grid; gap: .5rem; margin: 1rem 0; }
.tabout b { color: var(--ink); font-weight: 600; }
.tabout a { color: var(--ink); }

@media (max-width: 600px) {
  .table { min-height: 22rem; }
  .table--three { padding: 1.2rem .4rem; }
  .tslot__pos { font-size: var(--t-s); }
  .table__cat { right: 2%; }
}
@media (prefers-reduced-motion: reduce) { .tcard__inner, .tcard__face svg { transition: none; } }