/* =========================================================
   Tarot for Storytelling workshops (loaded only on workshop pages)
   The reading table is dark, like the course page's wheel band;
   the journal where students write is bone paper.
   ========================================================= */
:root {
  --fire: #f4a259; --water: #6cc3bf; --air: #c3cbe2; --earth: #b9c38a;
  --fire-ink: #a8541b; --water-ink: #2e6f6b; --air-ink: #4f5b80; --earth-ink: #5f6a33;
  --table: #1b1512;
}

/* ---------- Element glyphs (alchemical triangles) ---------- */
.glyph { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.g-fire { color: var(--fire); } .g-water { color: var(--water); } .g-air { color: var(--air); } .g-earth { color: var(--earth); }
.ws-journal .g-fire { color: var(--fire-ink); } .ws-journal .g-water { color: var(--water-ink); }
.ws-journal .g-air { color: var(--air-ink); } .ws-journal .g-earth { color: var(--earth-ink); }

/* ---------- Buttons ---------- */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.25rem;
  border-radius: 999px; border: 1px solid var(--line-light); background: rgba(243, 238, 230, .06); color: var(--bone);
  font: 500 .8125rem/1 var(--sans); letter-spacing: .06em; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.ws-btn:hover { border-color: var(--flame); color: var(--flame); }
.ws-btn.is-cast { border-color: var(--flame); background: rgba(244, 162, 89, .14); color: var(--flame); }
.ws-btn-ghost { background: transparent; }
.ws-btn-light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.ws-btn-light:hover { background: transparent; color: var(--bone); border-color: var(--bone); }
.ws-btn-outline-light { background: transparent; }
.ws-btn-outline-light:hover { color: var(--bone); border-color: var(--bone); background: rgba(243, 238, 230, .08); }
.ws-btn-text { background: none; border-color: transparent; color: var(--muted-on-dark); padding-inline: .5rem; text-decoration: underline; text-underline-offset: .25em; }
.ws-btn-text:hover { color: var(--bone); border-color: transparent; }

/* ---------- Hero ---------- */
.ws-hero { background: var(--espresso); color: var(--bone); padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(2.5rem, 5vw, 4rem); }
.ws-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.ws-kicker { color: var(--muted-on-dark); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.ws-kicker span { color: var(--flame); }
.ws-hero h1 { font-size: clamp(3.2rem, 1.6rem + 6vw, 7.5rem); line-height: .92; }
.ws-hero h1 em { display: block; font-size: .62em; color: var(--flame); margin-top: .2em; }
.ws-hero-text p { color: rgba(243, 238, 230, .86); max-width: 32rem; }
.ws-saved-note { display: flex; gap: .6rem; align-items: center; font-size: .875rem; color: var(--muted-on-dark) !important; margin: 1.5rem 0 0; }
.ws-saved-note svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Steps ---------- */
.ws-step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); max-width: 40rem; }
.ws-step-n { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid currentColor; font: 400 1.1rem/1 var(--label); opacity: .8; }
.ws-step h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin-bottom: .6rem; }
.ws-step p { margin: 0; }
.ws-table .ws-step p { color: var(--muted-on-dark); }
.ws-journal .ws-step p { color: var(--muted); }

/* ---------- The reading table ---------- */
.ws-table {
  color: var(--bone); padding-block: clamp(3rem, 6vw, 5.5rem);
  background: radial-gradient(ellipse 70% 55% at 35% 40%, rgba(244, 162, 89, .09), transparent 70%), var(--table);
  border-top: 1px solid var(--line-light);
}
.ws-table-grid { display: grid; grid-template-columns: minmax(0, max(34rem, min(56svh, 40rem))) minmax(20rem, 26rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.court { display: grid; grid-template-columns: 5.25rem repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.1vw, .9rem); max-width: clamp(26rem, 56svh, 38rem); }
.court-head { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: .3rem; text-align: center; color: var(--muted-on-dark); padding-bottom: .5rem; transition: color .3s var(--ease); }
.court-head.row { justify-content: center; align-items: flex-start; text-align: left; padding: 0 .25rem 0 0; }
.court-head .glyph { font-size: 1.35rem; opacity: .75; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.ch-name { font: 400 .95rem/1.1 var(--label); letter-spacing: .1em; color: var(--bone); }
.ch-el { font: 500 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.court-head.lit .ch-name { color: var(--flame); }
.court-head.lit .glyph { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }

.tcard { position: relative; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 4 / 7; perspective: 900px; border-radius: 7px; color: inherit; -webkit-tap-highlight-color: transparent; }
.tcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--ease-out); }
.tcard-face, .tcard-back { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .06) inset; }
.tcard-face img { width: 100%; height: 100%; object-fit: cover; }
.tcard-back {
  transform: rotateY(180deg); background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 70'%3E%3Cg fill='none' stroke='%23f4a259' stroke-opacity='.7' stroke-width='.6'%3E%3Cpath d='M20 22 L31 35 L20 48 L9 35 Z'/%3E%3Cpath d='M20 27 L26.5 35 L20 43 L13.5 35 Z'/%3E%3Ccircle cx='20' cy='35' r='16'/%3E%3C/g%3E%3C/svg%3E") center / 80% no-repeat,
    repeating-linear-gradient(45deg, rgba(244, 162, 89, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(244, 162, 89, .06) 0 1px, transparent 1px 7px), #2a201b;
  outline: 1px solid rgba(244, 162, 89, .35); outline-offset: -5px;
}
.tcard:hover .tcard-inner, .tcard:focus-visible .tcard-inner { transform: translateY(-5px); }
.tcard:hover .tcard-face, .tcard:focus-visible .tcard-face { box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(244, 162, 89, .55), 0 0 22px rgba(244, 140, 60, .28); }
.tcard:focus-visible { outline: none; }
.tcard.selected .tcard-face { box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 2px var(--flame), 0 0 26px rgba(244, 140, 60, .5); }
.tcard-role { position: absolute; left: 50%; bottom: -.6rem; transform: translateX(-50%); z-index: 2; white-space: nowrap; max-width: calc(100% + .75rem); overflow: hidden; text-overflow: ellipsis; padding: .3rem .6rem; border-radius: 999px; background: var(--flame); color: var(--ink); font: 600 .5625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.tcard.cast .tcard-role { opacity: 1; }
.tcard.cast .tcard-face img { filter: saturate(1.08); }

/* Dealing: cards start stacked face down at the centre of the grid, fly out, then turn over */
.court.undealt .tcard { transform: translate(var(--dx), var(--dy)) rotate(-4deg); opacity: 0; }
.court.undealt .tcard-inner { transform: rotateY(180deg); }
.court.dealing .tcard { transition: transform .75s var(--ease-out) var(--d), opacity .25s linear var(--d); }
.court.dealing .tcard-inner { transition: transform .8s var(--ease-out) calc(var(--d) + 650ms); }
/* Shuffling before the deck casts */
@keyframes ws-shuffle { 0%, 100% { transform: none; } 30% { transform: translate(var(--sx, 3px), -6px) rotate(var(--sr, 2deg)); } 65% { transform: translate(calc(var(--sx, 3px) * -1), 2px) rotate(calc(var(--sr, 2deg) * -1)); } }
.court.shuffling .tcard-inner { animation: ws-shuffle .45s var(--ease) 2; }
.court.shuffling .tcard:nth-child(3n) { --sx: -4px; --sr: -3deg; }
.court.shuffling .tcard:nth-child(4n+1) { --sx: 5px; --sr: 1deg; }

.ws-grid-actions { margin-top: 2.25rem; padding-left: 5.25rem; }

/* ---------- The card detail ---------- */
.card-detail { position: sticky; top: calc(var(--header-h) + 1.25rem); border: 1px solid var(--line-light); border-radius: 16px; padding: 1.5rem; background: rgba(243, 238, 230, .035); min-height: 22rem; max-height: calc(100svh - var(--header-h) - 2.5rem); overflow-y: auto; scrollbar-width: thin; }
.cd-empty { display: grid; justify-items: center; text-align: center; gap: 1.25rem; padding: 3rem 1rem; color: var(--muted-on-dark); }
.cd-empty p { max-width: 15rem; margin: 0; }
.cd-diamond { width: 4.5rem; fill: none; stroke: var(--flame); stroke-opacity: .55; stroke-width: 1; }
.cd-close { display: none; }
.cd-card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; position: relative; float: left; width: 8.75rem; margin: .25rem 1.4rem 1rem 0; border-radius: 10px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(244, 140, 60, .14); }
.cd-card img { width: 100%; height: auto; border-radius: 10px; }
.cd-card::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 240, 220, .22), transparent 55%); mix-blend-mode: soft-light; pointer-events: none; }
.card-detail.swap .cd-card { animation: cd-in .7s var(--ease-out); }
.card-detail.swap .cd-text { animation: cd-text-in .7s var(--ease-out) .08s both; }
@keyframes cd-in { from { opacity: 0; transform: perspective(900px) rotateY(-28deg) translateY(10px); } }
@keyframes cd-text-in { from { opacity: 0; transform: translateY(8px); } }
.cd-formula { display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; font: 400 .9rem/1 var(--label); letter-spacing: .14em; color: var(--flame); }
.cd-formula .glyph { font-size: 1.15rem; }
.cd-text h3 { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); margin-bottom: .75rem; }
.cd-line { font: italic 400 1.2rem/1.35 var(--serif); color: var(--bone); margin-bottom: 1.25rem; }
.cd-facts { clear: both; margin: 0 0 1.25rem; display: grid; gap: .9rem; }
.cd-facts dt { display: flex; align-items: center; gap: .45rem; font: 400 .8rem/1.2 var(--label); letter-spacing: .12em; color: var(--bone); margin-bottom: .3rem; }
.cd-facts dd { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--muted-on-dark); }
.cd-cast-label { font: 500 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-on-dark); margin: 1.25rem 0 .75rem; }
.cd-cast { display: flex; flex-wrap: wrap; gap: .5rem; }
.cd-cast .ws-btn { flex: 1 1 auto; padding-inline: .9rem; }

/* ---------- The journal ---------- */
.ws-journal { background: var(--bone); color: var(--ink); padding-block: clamp(3.5rem, 7vw, 6rem); }
.ws-field-label { display: block; font: 500 .6875rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.ws-story { display: block; max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ws-story input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .4rem 0 .6rem; font: italic 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.2 var(--serif); color: var(--ink); }
.ws-story input:focus { outline: none; border-bottom-color: var(--teal-deep); }
.ws-journal textarea {
  width: 100%; resize: vertical; min-height: 5.5rem; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: 400 1.2rem/1.45 var(--serif); transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ws-journal textarea:focus, .ws-journal input:focus-visible { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(46, 111, 107, .14); }
.ws-journal ::placeholder { color: #a39890; font-style: italic;}

.cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.role { display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.role-slot { position: relative; width: 9.5rem; aspect-ratio: 4 / 7; margin: 0 auto; border-radius: 9px; cursor: pointer; }
.slot-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; padding: 1rem; text-align: center; border: 1.5px dashed rgba(28, 23, 20, .22); border-radius: 9px; font-size: .75rem; line-height: 1.4; color: var(--muted); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.slot-mark { width: 1.6rem; height: 1.6rem; border: 1.5px solid rgba(28, 23, 20, .28); transform: rotate(45deg); }
.role-slot:hover .slot-empty, .role-slot.over .slot-empty { border-color: var(--fire-ink); background: rgba(244, 162, 89, .08); }
.filled .role-slot { cursor: default; }
.slot-img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; box-shadow: 0 14px 28px rgba(28, 23, 20, .25); transition: opacity .2s; }
.role-slot.landed .slot-img { animation: landed .9s var(--ease-out); }
@keyframes landed { 0% { box-shadow: 0 0 0 0 rgba(244, 162, 89, .7), 0 14px 28px rgba(28, 23, 20, .25); } 100% { box-shadow: 0 0 0 18px rgba(244, 162, 89, 0), 0 14px 28px rgba(28, 23, 20, .25); } }
.slot-remove { position: absolute; top: .4rem; right: .4rem; padding: .35rem .6rem; border-radius: 999px; border: 0; background: rgba(28, 23, 20, .72); color: var(--bone); font: 500 .625rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .25s var(--ease); }
.role-slot:hover .slot-remove, .slot-remove:focus-visible { opacity: 1; }
@media (hover: none) { .slot-remove { opacity: 1; } }
.role-label { font: 400 clamp(1.6rem, 1.3rem + .9vw, 2.1rem)/1 var(--serif); margin: 0 0 .4rem; text-align: center; }
.role-card { display: grid; justify-items: center; gap: .3rem; margin: 0 0 1.5rem; text-align: center; }
.role-card-name { font: 400 .875rem/1.2 var(--label); letter-spacing: .12em; color: var(--muted); }
.filled .role-card-name { color: var(--ink); }
.role-formula { display: inline-flex; align-items: center; gap: .4rem; font: 500 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fire-ink); }
.ws-field { display: block; margin-bottom: 1.25rem; }
.role-name input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .25rem 0 .5rem; font: 400 clamp(1.5rem, 1.25rem + .8vw, 1.9rem)/1.2 var(--serif); color: var(--ink); }
.role-name input:focus { outline: none; border-bottom-color: var(--teal-deep); box-shadow: none; }
@media print { .role-name input { font-size: 18pt; } }
.need { border: 0; padding: 0; margin: 0; min-width: 0; }
.need-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: .6rem; }
.need-opt { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .6rem .2rem .5rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .75rem; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.need-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.need-opt .glyph { font-size: 1.3rem; }
.need-opt:hover { border-color: rgba(28, 23, 20, .35); }
.need-opt:has(input:focus-visible) { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.need-opt:has(input:checked) { border-color: currentColor; background: var(--bone); font-weight: 600; }
.need-opt:has(input[value="fire"]:checked) { color: var(--fire-ink); background: rgba(244, 162, 89, .14); }
.need-opt:has(input[value="water"]:checked) { color: var(--water-ink); background: rgba(108, 195, 191, .16); }
.need-opt:has(input[value="air"]:checked) { color: var(--air-ink); background: rgba(195, 203, 226, .35); }
.need-opt:has(input[value="earth"]:checked) { color: var(--earth-ink); background: rgba(185, 195, 138, .25); }
.need textarea { min-height: 3.6rem; }

/* The balance of elements across the cast */
.balance { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 18px; background: var(--espresso); color: var(--bone); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); align-items: center; }
.balance .g-fire { color: var(--fire); } .balance .g-water { color: var(--water); } .balance .g-air { color: var(--air); } .balance .g-earth { color: var(--earth); }
.balance-head h3 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); margin-bottom: .6rem; }
.balance-head p { color: var(--muted-on-dark); margin: 0; font-size: .9375rem; }
.balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.bal-col { display: grid; justify-items: center; gap: .5rem; padding: 1rem .5rem; border-radius: 12px; background: rgba(243, 238, 230, .04); border: 1px solid var(--line-light); transition: opacity .4s var(--ease); }
.bal-col.absent { opacity: .4; }
.bal-glyph { font-size: 2.4rem; }
.bal-col:not(.absent) .bal-glyph { filter: drop-shadow(0 0 8px currentColor); }
.bal-name { margin: 0; font: 400 .85rem/1 var(--label); letter-spacing: .14em; }
.bal-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; min-height: 1.6rem; }
.pip { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 600 .625rem/1 var(--sans); letter-spacing: .05em; animation: pip-in .5s var(--ease-out); }
.bal-fire .pip.held { background: var(--fire); color: var(--ink); } .bal-water .pip.held { background: var(--water); color: var(--ink); }
.bal-air .pip.held { background: var(--air); color: var(--ink); } .bal-earth .pip.held { background: var(--earth); color: var(--ink); }
.pip.need { border: 1.5px dashed currentColor; color: var(--bone); }
@keyframes pip-in { from { transform: scale(.4); opacity: 0; } }
.balance-notes { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.balance-notes li { position: relative; padding-left: 1.5rem; font: italic 400 1.15rem/1.4 var(--serif); color: rgba(243, 238, 230, .9); }
.balance-notes li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .45rem; height: .45rem; border: 1px solid var(--flame); transform: rotate(45deg); }
.balance-notes:empty { display: none; }

/* ---------- Keep ---------- */
.ws-keep { background: var(--espresso); color: var(--bone); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; border-top: 1px solid var(--line-light); }
.ws-keep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.ws-keep h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin-bottom: 1rem; }
.ws-keep-grid p { color: var(--muted-on-dark); max-width: 30rem; }
.ws-keep-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ws-status { flex-basis: 100%; min-height: 1.5em; margin: .25rem 0 0; font-size: .875rem; color: var(--teal) !important; opacity: 0; transition: opacity .3s var(--ease); }
.ws-status.on { opacity: 1; }
.ws-next { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line-light); }
.ws-next .label { color: var(--muted-on-dark); margin-bottom: .75rem; }
.ws-next-title { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.15 var(--serif); margin-bottom: 1rem; }
.ws-credit { margin-top: 3rem; font-size: .75rem; color: var(--muted-on-dark); }

/* The card travelling from the grid into its role */
.fly-ghost { position: fixed; z-index: 90; margin: 0; border-radius: 7px; object-fit: cover; transform-origin: 0 0; pointer-events: none; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 30px rgba(244, 140, 60, .35); }
.fly-ghost.go { transition: transform .85s cubic-bezier(.5, 0, .2, 1); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .cast { grid-template-columns: 1fr; max-width: 44rem; }
  .role { grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  .role-label, .role-card { text-align: left; justify-items: start; }
  .balance { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ws-hero-grid, .ws-keep-grid { grid-template-columns: 1fr; }
  .ws-table-grid { grid-template-columns: minmax(0, 38rem); }
  /* The card detail becomes a sheet that rises from the bottom of the screen */
  .card-detail { position: fixed; inset: auto 0 0 0; z-index: 70; min-height: 0; max-height: 82svh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 1.25rem var(--gutter) 1.75rem; background: #2a201b; border: 0; border-top: 1px solid var(--line-light); box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s linear .45s; }
  .card-detail.open { transform: none; visibility: visible; transition: transform .45s var(--ease-out); }
  .cd-empty { display: none; }
  .cd-card { width: 6.5rem; margin: .25rem 1.1rem .75rem 0; transform: none; }
  .card-detail { max-height: 82svh; }
  .cd-close { display: block; margin: 0 0 .75rem auto; background: none; border: 1px solid var(--line-light); color: var(--bone); border-radius: 999px; min-height: 36px; padding: 0 1rem; font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .ws-grid-actions { padding-left: 0; text-align: center; }
}
@media (max-width: 560px) {
  .court { grid-template-columns: 2.4rem repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .court-head.row { align-items: center; padding: 0; }
  .court-head.row .ch-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .8rem; }
  .court-head.row .ch-el { display: none; }
  .court-head.col .ch-name { font-size: .78rem; letter-spacing: .06em; }
  .court-head.col .ch-el { font-size: .55rem; letter-spacing: .12em; }
  .tcard-role { bottom: .3rem; font-size: .5rem; padding: .25rem .4rem; letter-spacing: .08em; }
  .role { grid-template-columns: 1fr; }
  .role-label, .role-card { text-align: center; justify-items: center; }
  .need-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tcard-inner, .cd-card, .card-detail { transition: none !important; }
  .card-detail.swap .cd-card, .card-detail.swap .cd-text, .pip, .role-slot.landed .slot-img { animation: none; }
}

/* ---------- Print: the student's pages, not the table ---------- */
.print-text { display: none; }
@media print {
  @page { margin: 16mm; }
  body { background: #fff; }
  .site-header, .menu, .site-footer, .skip, .ws-table, .ws-keep-actions, .ws-saved-note, .ws-next, .slot-empty, .slot-remove, .balance-notes:empty { display: none !important; }
  .ws-hero, .ws-journal, .ws-keep, .balance { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .ws-hero { margin-bottom: 8mm; }
  .ws-hero-grid { display: block; }
  .ws-hero-text { display: none; }
  .ws-hero h1 { font-size: 30pt; }
  .ws-hero h1 em, .ws-kicker, .ws-kicker span { color: #000 !important; }
  .cast { grid-template-columns: 1fr; gap: 6mm; }
  .role { grid-template-columns: 30mm 1fr; break-inside: avoid; border: 1px solid #ccc; background: #fff; }
  .role-slot { width: 30mm; }
  .ws-journal textarea { display: none; }
  .print-text { display: block; white-space: pre-wrap; font: 400 12pt/1.45 var(--serif); margin: 0 0 3mm; }
  .need-opt:not(:has(input:checked)) { display: none; }
  .need-opts { display: block; }
  .balance { break-inside: avoid; border: 1px solid #ccc; padding: 6mm !important; margin-top: 6mm; }
  .balance-head p, .balance-notes li { color: #000 !important; }
  .bal-col { border-color: #ccc; }
  .ws-keep h2 { font-size: 14pt; }
  .ws-keep-grid p, .ws-credit { color: #444 !important; }
}

/* =========================================================
   Shared pieces for every worksheet
   ========================================================= */
.ws-next-title a { text-decoration: none; }
.ws-next-title a em { color: var(--flame); }
.ws-next-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }

/* Sections: the dark reading table and the bone journal page */
.ws-dark { background: radial-gradient(ellipse 70% 55% at 35% 40%, rgba(244, 162, 89, .08), transparent 70%), var(--table); color: var(--bone); padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line-light); }
.ws-dark .ws-step p, .ws-dark .muted-d { color: var(--muted-on-dark); }
.ws-paper { background: var(--bone); color: var(--ink); padding-block: clamp(3rem, 6vw, 5.5rem); }
.ws-paper .ws-step p { color: var(--muted); }
.ws-photo { position: relative; isolation: isolate; overflow: hidden; }
.ws-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo) center / cover no-repeat; opacity: .28; filter: saturate(.8); }
.ws-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--table) 0%, rgba(27, 21, 18, .55) 30%, rgba(27, 21, 18, .8) 100%); }

/* Writing fields anywhere (paper or dark) */
.ws-paper textarea, .ws-paper input[type="text"], .page textarea {
  width: 100%; resize: vertical; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: 400 1.2rem/1.45 var(--serif); transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ws-paper textarea:focus, .ws-paper input[type="text"]:focus, .page textarea:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(46, 111, 107, .14); }
.ws-paper ::placeholder, .page ::placeholder { color: #a39890; font-style: italic;}
.ws-dark textarea, .ws-dark input[type="text"] {
  width: 100%; resize: vertical; padding: .75rem .9rem; border: 1px solid var(--line-light); border-radius: 10px;
  background: rgba(243, 238, 230, .05); color: var(--bone); font: 400 1.15rem/1.45 var(--serif); transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ws-dark textarea:focus, .ws-dark input[type="text"]:focus { outline: none; border-color: var(--flame); background: rgba(243, 238, 230, .08); }
.ws-dark ::placeholder { color: rgba(181, 170, 158, .7); font-style: italic;}
.ws-dark .ws-field-label { color: var(--muted-on-dark); }
.ws-paper .ws-field { display: block; margin-bottom: 1.25rem; }
.field-hint { font-size: .875rem; color: var(--muted); margin: -.25rem 0 .6rem; }
.ws-dark .field-hint { color: var(--muted-on-dark); }

/* The open journal page used by the writing workshops */
.page { position: relative; background: var(--paper); color: var(--ink); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.75rem); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); background-image: repeating-linear-gradient(transparent 0 2.15rem, rgba(46, 111, 107, .09) 2.15rem calc(2.15rem + 1px)); background-position: 0 4.6rem; }
.page-label { display: block; font: italic 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem)/1.1 var(--serif); margin-bottom: 1.25rem; }
.page textarea { border: 0; background: transparent; padding: 0; min-height: 22rem; font-size: 1.3rem; line-height: 2.15rem; box-shadow: none !important; resize: none; }
.page-meta { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* A card slot that turns over */
.flip { position: relative; display: block; aspect-ratio: 4 / 7; perspective: 1000px; border-radius: 9px; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .9s var(--ease-out); }
.flip.turned .flip-inner { transform: none; }
.flip-face, .flip-back { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 36px rgba(0, 0, 0, .4); }
.flip-face img { width: 100%; height: 100%; object-fit: cover; }
.flip-back, .card-back {
  transform: rotateY(180deg); background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 70'%3E%3Cg fill='none' stroke='%23f4a259' stroke-opacity='.7' stroke-width='.6'%3E%3Cpath d='M20 22 L31 35 L20 48 L9 35 Z'/%3E%3Cpath d='M20 27 L26.5 35 L20 43 L13.5 35 Z'/%3E%3Ccircle cx='20' cy='35' r='16'/%3E%3C/g%3E%3C/svg%3E") center / 80% no-repeat,
    repeating-linear-gradient(45deg, rgba(244, 162, 89, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(244, 162, 89, .06) 0 1px, transparent 1px 7px), #2a201b;
  outline: 1px solid rgba(244, 162, 89, .35); outline-offset: -6px;
}
.card-back { transform: none; border-radius: 9px; }
.flip-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 1rem; text-align: center; border: 1.5px dashed rgba(243, 238, 230, .25); border-radius: 9px; font-size: .8125rem; line-height: 1.4; color: var(--muted-on-dark); }
.ws-paper .flip-empty { border-color: rgba(28, 23, 20, .22); color: var(--muted); }
.flip-empty .slot-mark { border-color: currentColor; opacity: .6; }

/* The card picker */
.picker { width: min(64rem, calc(100vw - 2rem)); max-height: min(88svh, 52rem); padding: 0; border: 1px solid var(--line-light); border-radius: 18px; background: #241b17; color: var(--bone); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); overflow: hidden; }
.picker[open] { display: grid; grid-template-rows: auto auto 1fr auto; animation: picker-in .45s var(--ease-out); }
.picker::backdrop { background: rgba(14, 10, 8, .72); backdrop-filter: blur(4px); }
@keyframes picker-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.picker-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem .6rem; }
.picker-title { margin: 0; font: 400 1.5rem/1.1 var(--serif); }
.picker-close { background: none; border: 1px solid var(--line-light); color: var(--bone); border-radius: 999px; min-height: 38px; padding: 0 1rem; font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.picker-tabs { display: flex; gap: .4rem; padding: .25rem 1.4rem .9rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-light); }
.picker-tab { flex: none; min-height: 38px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-light); background: none; color: var(--muted-on-dark); font: 400 .9rem/1 var(--label); letter-spacing: .08em; cursor: pointer; }
.picker-tab[aria-selected="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.picker-body { overflow-y: auto; padding: 1.2rem 1.4rem; overscroll-behavior: contain; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 1rem .8rem; }
.picker-card { display: grid; gap: .45rem; padding: 0; border: 0; background: none; color: var(--muted-on-dark); cursor: pointer; text-align: center; font-size: .75rem; line-height: 1.25; }
.picker-card img { width: 100%; height: auto; aspect-ratio: 4 / 7; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.picker-card:hover img, .picker-card:focus-visible img { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(0, 0, 0, .5), 0 0 0 2px var(--flame); }
.picker-card:hover span, .picker-card:focus-visible span { color: var(--bone); }
.picker-card:focus-visible { outline: none; }
.picker-foot { display: flex; justify-content: center; padding: .9rem 1.4rem 1.1rem; border-top: 1px solid var(--line-light); }

/* A writing timer */
.wtimer { position: relative; width: 13rem; aspect-ratio: 1; }
.wtimer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.wt-track { fill: none; stroke: rgba(243, 238, 230, .12); stroke-width: 1.5; }
.wt-ring { fill: none; stroke: var(--flame); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 6px rgba(244, 140, 60, .6)); }
.wtimer.running .wt-ring { animation: wt-breathe 4s ease-in-out infinite; }
@keyframes wt-breathe { 50% { filter: drop-shadow(0 0 14px rgba(244, 140, 60, .9)); } }
.wt-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .55rem; text-align: center; }
.wt-time { margin: 0; font: 400 2.8rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.wtimer.done .wt-time { color: var(--flame); }
.wt-btn { min-height: 38px; padding: 0 1.2rem; border-radius: 999px; border: 1px solid var(--flame); background: rgba(244, 162, 89, .12); color: var(--flame); font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.wt-btn:hover { background: var(--flame); color: var(--ink); }
.wt-reset { background: none; border: 0; color: var(--muted-on-dark); font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Card meaning text (the course script's words) */
.meaning { font-size: .9375rem; line-height: 1.6; }
.meaning-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font: 400 .85rem/1.2 var(--label); letter-spacing: .12em; color: var(--flame); }
.ws-paper .meaning-title { color: var(--fire-ink); }

@media (max-width: 560px) { .wtimer { width: 11rem; } .wt-time { font-size: 2.3rem; } }
@media print {
  .ws-dark, .ws-paper, .page { background: #fff !important; color: #000 !important; box-shadow: none !important; padding: 0 !important; }
  .ws-photo::before, .ws-photo::after, .wtimer, .ws-next-links { display: none !important; }
  .page textarea, .ws-dark textarea, .ws-paper textarea { display: none; }
  .ws-dark input[type="text"], .ws-paper input[type="text"] { border: 0; padding: 0; background: none; color: #000; }
  .flip-inner { transform: none !important; }
  .flip-back, .flip-empty { display: none; }
}

/* ---------- Introduction: the writing desk ---------- */
.desk { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.desk-grid { display: grid; grid-template-columns: 15rem minmax(0, 46rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.desk-side { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.desk-rule { margin: 0; color: var(--muted-on-dark); font-size: .9375rem; max-width: 14rem; }
@media (max-width: 900px) {
  .desk-grid { grid-template-columns: 1fr; }
  .desk-side { position: static; grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .desk-side .wtimer { width: 9rem; } .desk-side .wt-time { font-size: 1.9rem; }
}

/* ---------- Lesson 1: ritual, types, sentences ---------- */
.ritual-grid { display: grid; grid-template-columns: 14rem minmax(0, 38rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ritual-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 1rem; }
.ritual p { color: rgba(243, 238, 230, .82); }
.ritual-quote { font: italic 400 1.3rem/1.4 var(--serif); color: var(--bone) !important; border-left: 2px solid var(--flame); padding-left: 1rem; }
.ritual-act { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.breath-label { font: italic 400 1.2rem/1.25 var(--serif); color: var(--flame); max-width: 16rem; }
.breath { position: relative; width: 14rem; aspect-ratio: 1; display: grid; place-items: center; }
.breath-ring, .breath-core { position: absolute; border-radius: 50%; }
.breath-ring { inset: 0; border: 1px solid rgba(244, 162, 89, .35); transform: scale(.55); transition: transform 4.4s cubic-bezier(.45, 0, .55, 1), opacity 4.4s; opacity: .5; }
.breath-ring.r2 { inset: 12%; border-color: rgba(244, 162, 89, .55); }
.breath-core { width: 30%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 214, 160, .95), rgba(244, 140, 60, .55) 45%, transparent 70%); filter: blur(2px); transition: transform 4.4s cubic-bezier(.45, 0, .55, 1); }
.breath.in .breath-ring { transform: scale(1); opacity: 1; }
.breath.in .breath-core { transform: translateY(-18%) scale(2.2); }
/* Inhale rises for six seconds toward gratitude; exhale sinks for seven toward courage */
.breath.in .breath-ring, .breath.in .breath-core { transition-duration: 6s; }
.breath.out .breath-ring, .breath.out .breath-core { transition-duration: 7s; }
.breath.out .breath-core { transform: translateY(22%) scale(1.1); }
.breath-word { position: absolute; left: 50%; transform: translateX(-50%); font: italic 400 1.15rem/1 var(--serif); color: var(--muted-on-dark); opacity: .35; transition: opacity 2s var(--ease), color 2s var(--ease); white-space: nowrap; }
.bw-up { top: -1.9rem; } .bw-down { bottom: -1.9rem; }
.breath.in .bw-up, .breath.out .bw-down { opacity: 1; color: var(--flame); }
.ritual-breath { font: italic 400 1.2rem/1.45 var(--serif); color: var(--bone) !important; }
.breath { margin-block: 2rem; }
.types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.type { position: relative; display: grid; align-content: start; gap: .6rem; width: 100%; height: 100%; text-align: left; padding: 1.4rem 1.3rem 1.5rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease); }
.type:hover { border-color: rgba(28, 23, 20, .35); }
.type.on { border-color: var(--teal-deep); box-shadow: 0 0 0 1px var(--teal-deep), 0 14px 30px rgba(46, 111, 107, .14); background: #fbfaf6; }
.type-ico { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--teal-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.type.on .type-ico path { animation: type-draw 1.2s var(--ease-out); stroke-dasharray: 1; }
@keyframes type-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.type-title { font: 400 1.4rem/1.15 var(--serif); }
.type-first { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.type-rest { display: none; font-size: .9rem; line-height: 1.55; color: var(--ink); }
.type.on .type-rest { display: block; animation: cd-text-in .5s var(--ease-out); }
.type-check { position: absolute; top: 1.1rem; right: 1.1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.type.on .type-check { background: var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 L10.5 17 L18 8' fill='none' stroke='%23f3eee6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 75% no-repeat; border-color: var(--teal-deep); }
.types-count { margin: 1.25rem 0 0; min-height: 1.5em; font: italic 400 1.2rem/1.4 var(--serif); color: var(--teal-deep); }
.ws-paper-2 { padding-top: 0; }
.sentences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.sentence { display: grid; gap: .75rem; }
.sentence-q { font: italic 400 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.2 var(--serif); }
@media (max-width: 820px) { .ritual-grid, .sentences { grid-template-columns: 1fr; } .breath { width: 10rem; } }

/* ---------- Lesson 2: three cards ---------- */
.spread3 { display: grid; grid-template-columns: repeat(3, minmax(0, 13rem)); justify-content: center; gap: clamp(1rem, 4vw, 4rem); }
.s3 { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.s3-label { display: flex; align-items: baseline; gap: .6rem; margin: 0; font: 400 1.05rem/1 var(--label); letter-spacing: .12em; }
.s3-label span { font: italic 400 1.1rem/1 var(--serif); color: var(--flame); }
.s3-card { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.s3-card:hover .flip-empty { border-color: var(--flame); color: var(--bone); }
.s3-name { margin: 0; min-height: 1.4em; font: italic 400 1.15rem/1.2 var(--serif); color: var(--muted-on-dark); }
.spread-actions { display: flex; justify-content: center; margin-top: 2.5rem; }
.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.beat { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.25rem; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.beat-thumb img { width: 100%; border-radius: 5px; box-shadow: 0 8px 16px rgba(28, 23, 20, .2); }
.beat-thumb:empty { aspect-ratio: 4 / 7; border-radius: 5px; border: 1.5px dashed rgba(28, 23, 20, .2); }
.beat-name { margin: 0 0 .8rem; font: 400 1.6rem/1 var(--serif); }
.story-out { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 18px; background: var(--espresso); color: var(--bone); }
.story-out .label { color: var(--muted-on-dark); margin-bottom: 1rem; }
.story-text { margin: 0; font: 400 clamp(1.4rem, 1.15rem + .9vw, 2rem)/1.4 var(--serif); max-width: 52rem; white-space: pre-wrap; }
.story-text.empty { color: var(--muted-on-dark); font-style: italic; font-size: 1.2rem;}
@media (max-width: 1000px) { .beats { grid-template-columns: 1fr; max-width: 40rem; } }
@media (max-width: 560px) { .spread3 { gap: .6rem; } .s3-label { font-size: .8rem; } .s3-name { font-size: .9rem; } .flip-empty { font-size: .7rem; padding: .5rem; } }

/* ---------- Lesson 3: the four paths ---------- */
.paths { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.path-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: 1rem; }
.path-head .glyph { font-size: 1.4rem; align-self: center; }
.path-head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.path-head h3 em { color: var(--muted-on-dark); font-size: .75em; }
.path-more { flex-basis: 100%; max-width: 46rem; }
.path-more summary { cursor: pointer; width: fit-content; font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--flame); padding: .4rem 0; }
.path-more p { color: rgba(243, 238, 230, .8); font-size: .9375rem; margin: .75rem 0 0; }
.path-row { list-style: none; margin: 0; padding: .4rem 0 1rem; display: grid; grid-template-columns: repeat(10, minmax(4.4rem, 1fr)); gap: clamp(.4rem, .9vw, .8rem); overflow-x: auto; scrollbar-width: thin; }
.pcard { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.pcard img { width: 100%; aspect-ratio: 4 / 7; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease); }
.pcard:hover img, .pcard:focus-visible img { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(244, 162, 89, .6), 0 0 20px rgba(244, 140, 60, .3); }
.pcard:focus-visible { outline: none; }
.pcard.chosen img { box-shadow: 0 0 0 2px var(--flame), 0 0 24px rgba(244, 140, 60, .5); }
.pdot { position: absolute; top: -.35rem; right: -.35rem; width: .9rem; height: .9rem; border-radius: 50%; background: radial-gradient(circle, #ffd6a0, var(--flame) 55%, transparent 72%); opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .3s var(--ease-out); }
.pcard.noted .pdot { opacity: 1; transform: none; }
.lens { width: min(56rem, calc(100vw - 2rem)); max-height: 90svh; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-light); border-radius: 18px; background: #241b17; color: var(--bone); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); overflow-y: auto; }
.lens::backdrop { background: rgba(14, 10, 8, .75); backdrop-filter: blur(4px); }
.lens[open] { animation: picker-in .45s var(--ease-out); }
.lens-close { position: absolute; top: 1rem; right: 1rem; }
.lens-grid { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.lens-card img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(244, 140, 60, .14); }
.lens-card.in { animation: cd-in .6s var(--ease-out); }
.lens-path { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font: 400 .85rem/1.2 var(--label); letter-spacing: .12em; color: var(--flame); }
.lens-text h3 { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); margin-bottom: 1.25rem; }
.lens .ws-field { display: block; margin-bottom: 1rem; }
.lens textarea { width: 100%; resize: vertical; padding: .7rem .85rem; border: 1px solid var(--line-light); border-radius: 10px; background: rgba(243, 238, 230, .05); color: var(--bone); font: 400 1.1rem/1.45 var(--serif); }
.lens textarea:focus { outline: none; border-color: var(--flame); }
.lens .ws-field-label { color: var(--muted-on-dark); }
.lens-nav { display: flex; gap: .5rem; margin-bottom: .75rem; }
.lens-choose { width: 100%; border-color: var(--flame); color: var(--flame); }
.one-grid { display: grid; grid-template-columns: 12rem minmax(0, 40rem); gap: clamp(1.5rem, 4vw, 4rem); justify-content: center; align-items: start; }
.one-card { display: grid; gap: .8rem; justify-items: center; }
.one-card .flip { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.one-name { margin: 0; font: italic 400 1.2rem/1.2 var(--serif); text-align: center; }
@media (max-width: 700px) { .lens-grid { grid-template-columns: 7rem minmax(0, 1fr); } .one-grid { grid-template-columns: 1fr; } .one-card .flip { width: 9rem; } .path-row { grid-template-columns: repeat(10, 4.6rem); } }

/* ---------- Lesson 3: image and meaning ---------- */
.narrow { max-width: 52rem; }
.mspread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.mcard { display: grid; grid-template-rows: auto 1fr; gap: 1.25rem; }
.mslot { width: min(100%, 12rem); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.mslot:hover .flip-empty { border-color: var(--flame); color: var(--bone); }
.mname { margin: 0 0 .9rem; text-align: center; font: italic 400 1.3rem/1.2 var(--serif); min-height: 1.2em; }
.mcard .ws-field { display: block; margin-bottom: 1rem; }
.mreveal { width: 100%; border-color: var(--flame); color: var(--flame); }
.mmeaning { padding: 1.1rem 1.2rem; border-radius: 12px; background: rgba(243, 238, 230, .05); border: 1px solid var(--line-light); color: rgba(243, 238, 230, .88); margin-bottom: 1rem; }
.mmeaning.in { animation: cd-text-in .7s var(--ease-out); }
.mmeaning p { margin-bottom: .6rem; }
.meaning-more { color: var(--muted-on-dark); font-size: .875rem; }
.meaning-more summary { cursor: pointer; color: var(--flame); font: 500 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .3rem 0; }
.mreact { border: 0; margin: 0; padding: 0; min-width: 0; }
.mreact-opts { display: grid; gap: .4rem; margin-bottom: .6rem; }
.mopt { position: relative; display: block; padding: .6rem .85rem; border: 1px solid var(--line-light); border-radius: 10px; cursor: pointer; font-size: .875rem; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.mopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mopt:has(input:checked) { border-color: var(--flame); background: rgba(244, 162, 89, .12); color: var(--flame); }
.mopt:has(input:focus-visible) { outline: 2px solid var(--flame); outline-offset: 2px; }
@media (max-width: 900px) { .mspread { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; } }
/* The journal page keeps dark ink even when it sits on the dark table */
.ws-dark .page textarea { color: var(--ink); background: transparent; border: 0; padding: 0; }
.ws-dark .page ::placeholder { color: #a39890; }
/* --photo is a url() resolved from this stylesheet, so pages pass it as ../img/... */

/* ---------- Lesson 4: the four stages ---------- */
.alchemy { display: flex; align-items: center; justify-content: center; margin: 0 auto 2.5rem; max-width: 44rem; }
.al-node { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid var(--line-light); font-size: 1.6rem; opacity: .45; transition: opacity .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease); }
.al-node.lit { opacity: 1; border-color: currentColor; box-shadow: 0 0 22px rgba(244, 140, 60, .25); }
.al-node[data-el="fire"] { color: var(--fire); } .al-node[data-el="air"] { color: var(--air); } .al-node[data-el="water"] { color: var(--water); } .al-node[data-el="earth"] { color: var(--earth); }
.al-node.stuck { animation: al-pulse 1.8s ease-in-out infinite; opacity: 1; }
@keyframes al-pulse { 50% { box-shadow: 0 0 0 10px rgba(244, 162, 89, 0), 0 0 30px currentColor; } }
.al-line { flex: 1; height: 1px; background: var(--line-light); position: relative; overflow: hidden; }
.al-line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--flame), #ffd6a0); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.al-line.lit span { transform: scaleX(1); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stage { position: relative; display: grid; align-content: start; gap: .5rem; padding: 1.5rem 1.25rem; border-radius: 16px; border: 1px solid var(--line-light); background: rgba(243, 238, 230, .035); transition: border-color .4s var(--ease); }
.stage.stuck { border-color: var(--flame); }
.stage-n { position: absolute; top: 1.1rem; right: 1.25rem; margin: 0; font: italic 400 1.1rem/1 var(--serif); color: var(--muted-on-dark); }
.stage-glyph { font-size: 2.2rem; }
.stage h3 { font-size: 1.7rem; margin-top: .25rem; }
.stage h3 em { display: block; font-size: .7em; margin-top: .3rem; color: var(--muted-on-dark); }
.stage-line { font-size: .875rem; color: var(--muted-on-dark); margin-bottom: .5rem; }
.stage .ws-field { display: block; margin-top: auto; }
.stuck-opts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.stuck-opt { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; background: var(--paper); transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.stuck-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.stuck-opt .glyph { font-size: 1.1rem; }
.stuck-opt:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.stuck-opt:has(input:checked) .glyph { color: var(--flame); }
.stuck-opt:has(input:focus-visible) { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.stuck-guide blockquote { margin: 0 0 1.5rem; padding: 1.25rem 1.4rem; border-left: 2px solid var(--fire-ink); background: var(--paper); border-radius: 0 12px 12px 0; font: italic 400 1.3rem/1.45 var(--serif); }
.stuck-guide.on { animation: cd-text-in .6s var(--ease-out); }
@media (max-width: 1000px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stages { grid-template-columns: 1fr; } .al-node { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; } }

/* ---------- Lesson 5: numbers ---------- */
.nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1rem, 2.5vw, 2rem); }
.num { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.num.filled { border-color: rgba(46, 111, 107, .5); box-shadow: inset 3px 0 0 var(--teal-deep); }
.num-head { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
.num-n { font: 400 2.4rem/1 var(--serif); color: var(--teal-deep); text-align: center; }
.num-title { margin: 0 0 .2rem; font: 400 .9rem/1.2 var(--label); letter-spacing: .1em; }
.num-story { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.num textarea { min-height: 3.4rem; }
.nums-missing { margin: 1.5rem 0 0; min-height: 1.4em; font: italic 400 1.15rem/1.4 var(--serif); color: var(--teal-deep); }
.reorder { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .6rem; }
.reorder li { display: grid; grid-template-columns: 1.6rem 2.6rem 1fr; gap: .9rem; align-items: start; padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid var(--line-light); background: rgba(243, 238, 230, .04); }
.reorder .reorder-empty { display: block; color: var(--muted-on-dark); font-style: italic;}
.ro-pos { font: 500 .6875rem/2.2 var(--sans); letter-spacing: .14em; color: var(--muted-on-dark); }
.ro-n { font: 400 2rem/1 var(--serif); color: var(--flame); }
.ro-title { margin: 0 0 .2rem; font: 400 .85rem/1.2 var(--label); letter-spacing: .1em; color: var(--muted-on-dark); }
.ro-beat { margin: 0; font: 400 1.15rem/1.4 var(--serif); }
@media (max-width: 820px) { .nums { grid-template-columns: 1fr; } }

/* ---------- Lesson 6: planets and the zodiac ---------- */
.board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(4rem, 14vw, 14rem); max-width: 62rem; margin: 0 auto; }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.board-lines path { fill: none; stroke: var(--flame); stroke-width: 1.2; stroke-opacity: .7; filter: drop-shadow(0 0 3px rgba(244, 140, 60, .7)); }
.board-lines path.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 1.1s var(--ease-out) forwards; }
.board-lines path.fresh:nth-child(2n) { animation-delay: .08s; } .board-lines path.fresh:nth-child(3n) { animation-delay: .16s; } .board-lines path.fresh:nth-child(4n) { animation-delay: .24s; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
.board-col { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; align-content: space-between; }
.node { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; width: 100%; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--line-light); background: #221a16; color: var(--bone); cursor: pointer; text-align: left; font: inherit; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.planet { grid-template-columns: 1fr auto; text-align: right; }
.node .astro { grid-row: span 2; font: 400 1.5rem/1 "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", serif; color: var(--muted-on-dark); width: 1.6rem; text-align: center; }
.node-name { font: 400 1rem/1.2 var(--label); letter-spacing: .08em; }
.node-terms { display: flex; gap: .35rem; align-items: center; font-size: .75rem; line-height: 1.3; color: var(--muted-on-dark); }
.planet .node-terms { justify-content: flex-end; }
.node:hover { border-color: rgba(244, 162, 89, .6); }
.node.paired .astro { color: var(--flame); }
.node.picked { border-color: var(--flame); background: rgba(244, 162, 89, .14); box-shadow: 0 0 18px rgba(244, 140, 60, .3); }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pair { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.pair.empty { opacity: .55; }
.pair-name { margin: 0 0 .25rem; font: 400 1.3rem/1.25 var(--serif); }
.pair-name em { color: var(--muted); font-size: .85em; }
.pair .astro { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", serif; color: var(--fire-ink); }
.pair-terms { margin: 0 0 .7rem; font-size: .8125rem; color: var(--muted); }
.pair textarea { min-height: 4.5rem; }
@media (max-width: 1000px) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .board { gap: 2.25rem; }
  .node { padding: .45rem .5rem; column-gap: .4rem; } .node-terms { display: none; } .node .astro { font-size: 1.1rem; width: 1.2rem; } .node-name { font-size: .8rem; letter-spacing: .02em; }
  .pairs { grid-template-columns: 1fr; }
}

/* ---------- Lesson 6: the ruling force ---------- */
.rule-grid { display: grid; grid-template-columns: 14rem minmax(0, 42rem); justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.rule-card { display: grid; gap: 1.25rem; justify-items: center; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.rule-card .flip { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.rule-card .flip:hover .flip-empty { border-color: var(--flame); color: var(--bone); }
.flip.shuffling { animation: ws-shuffle .35s var(--ease) 2; }
.astro-tag { margin-left: auto; padding: .3rem .6rem; border-radius: 999px; border: 1px solid currentColor; font: 500 .625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.meaning-title { flex-wrap: wrap; }
.rule-info { margin-bottom: 1.25rem; }
.rule-info .meaning-title { font-size: 1rem; }
.rule-more summary, .rival-body .rule-more summary { cursor: pointer; width: fit-content; color: var(--flame); font: 500 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .35rem 0; }
.rule-more p { font-size: .9375rem; color: rgba(243, 238, 230, .82); margin: .6rem 0 0; }
.rivals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: r; }
.rival { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); animation: cd-text-in .5s var(--ease-out); }
.rival-card { width: 100%; }
.rival-n { margin: 0 0 .3rem; font: 500 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rival .meaning-title { color: var(--ink); font-size: .95rem; margin-bottom: .2rem; }
.rival .astro-tag { color: var(--fire-ink); }
.rival .rule-more p { color: var(--muted); }
.rival .rule-more summary { color: var(--fire-ink); }
.rival textarea { margin-top: .6rem; min-height: 4rem; }
.rival-remove { font-size: .75rem; padding: .3rem 0; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.rivals-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.ws-paper .rivals-add { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.ws-paper .rivals-add:hover { background: transparent; color: var(--ink); }
.rivals-count { margin: 0; font: italic 400 1.2rem/1.3 var(--serif); color: var(--teal-deep); }
@media (max-width: 900px) { .rule-grid { grid-template-columns: 1fr; } .rule-card { position: static; grid-template-columns: 9rem auto; align-items: end; justify-items: start; } .rivals { grid-template-columns: 1fr; } }

/* ---------- Lesson 7: the Tree of Life ---------- */
.tree-grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 30rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tree-side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.tree { margin: 0; }
.tree svg { width: 100%; height: auto; overflow: visible; }
.t-path { stroke: rgba(243, 238, 230, .2); stroke-width: 6; stroke-linecap: round; transition: stroke .5s var(--ease); }
.t-path.near { stroke: rgba(243, 238, 230, .34); stroke-dasharray: 2 7; stroke-width: 3; }
.t-path.route { stroke: var(--teal); stroke-width: 6; filter: drop-shadow(0 0 6px rgba(88, 177, 173, .8)); }
.t-path.force { stroke: var(--flame); stroke-width: 7; filter: drop-shadow(0 0 8px rgba(244, 140, 60, .9)); }
.t-path.route.force { stroke: #ffd6a0; }
@keyframes t-draw { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 400 0; } }
.t-hit { stroke: transparent; stroke-width: 22; cursor: pointer; }
.t-hit:focus-visible { outline: none; stroke: rgba(244, 162, 89, .25); }
.t-plabel { fill: var(--muted-on-dark); font: italic 400 12px var(--serif); text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: var(--table); stroke-width: 4px; }
.t-plabel.force { fill: var(--flame); } .t-plabel.route { fill: var(--teal); }
.t-s { cursor: pointer; }
.t-s circle { fill: #2a201b; stroke: rgba(243, 238, 230, .45); stroke-width: 1.2; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.t-s:hover circle, .t-s:focus-visible circle { stroke: var(--flame); }
.t-s:focus-visible { outline: none; }
.t-sn { fill: var(--bone); font: 400 15px var(--serif); text-anchor: middle; pointer-events: none; }
.t-sw { fill: var(--muted-on-dark); font: 500 5.4px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
.t-s.prot circle { fill: rgba(88, 177, 173, .3); stroke: var(--teal); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(88, 177, 173, .8)); }
.t-s.crisis circle { fill: rgba(244, 162, 89, .25); stroke: var(--flame); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(244, 140, 60, .8)); }
.t-s.prot.crisis circle { fill: rgba(255, 214, 160, .3); }
.placers { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.placer { display: grid; grid-template-columns: 3.4rem 1fr; gap: .9rem; align-items: center; width: 100%; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line-light); background: rgba(243, 238, 230, .04); color: var(--bone); cursor: pointer; text-align: left; font: inherit; transition: border-color .3s var(--ease); }
.placer:hover { border-color: var(--flame); }
.placer[data-role="protagonist"].set { border-color: rgba(88, 177, 173, .7); }
.placer[data-role="force"].set { border-color: rgba(244, 162, 89, .7); }
.placer-card img { width: 100%; border-radius: 4px; }
.placer-empty { display: grid; place-items: center; aspect-ratio: 4 / 7; border: 1px dashed var(--line-light); border-radius: 4px; font-size: .55rem; line-height: 1.2; text-align: center; color: var(--muted-on-dark); padding: .2rem; }
.placer-role { display: block; font: 500 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: .35rem; }
.placer-name { display: block; font: 400 1.2rem/1.15 var(--serif); }
.placer-where { display: block; font-size: .75rem; color: var(--muted-on-dark); margin-top: .2rem; }
.tree-detail { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--line-light); min-height: 7rem; }
.tree-detail.in { animation: cd-text-in .5s var(--ease-out); }
.tree-detail > p { grid-column: 1 / -1; margin: 0; align-self: center; }
.td-card { width: 4.5rem; } .td-card img { width: 100%; border-radius: 5px; }
.td-sub, .td-body, .td-astro { margin: 0 0 .35rem; font-size: .8125rem; color: var(--muted-on-dark); }
.td-astro { color: var(--flame); }
.heb { font: 500 1.1rem/1 "Frank Ruhl Libre", serif; color: var(--bone); }
.walk { margin-bottom: 1.5rem; }
.walk-empty { font: italic 400 1.15rem/1.4 var(--serif); color: var(--muted); }
.walk-line { font: 400 1.2rem/1.45 var(--serif); }
.walk-line strong { font-weight: 400; color: var(--teal-deep); }
.walk-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; counter-reset: st; }
.walk-steps li { display: grid; justify-items: center; gap: .35rem; width: 5rem; text-align: center; font-size: .75rem; color: var(--muted); }
.walk-steps img { width: 100%; border-radius: 5px; box-shadow: 0 8px 16px rgba(28, 23, 20, .2); }
.walk-doors { font-size: .9375rem; color: var(--muted); }
.tree-note h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1rem; }
.tree-note p { color: var(--muted); font-size: .9375rem; }
.tree-reading { font-size: .8125rem !important; }
@media (max-width: 960px) { .tree-grid { grid-template-columns: 1fr; } .tree-side { position: static; } .tree { max-width: 26rem; margin: 0 auto; } }

/* ---------- Lesson 8: the Grail ---------- */
.grail-grid { display: grid; grid-template-columns: 16rem minmax(0, 46rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.grail-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; justify-items: center; gap: 2rem; }
.grail-wheel { margin: 0; width: 12rem; }
.grail-wheel svg { width: 100%; overflow: visible; animation: gw-turn 40s linear infinite; animation-play-state: paused; }
.grail.writing .grail-wheel svg { animation-play-state: running; }
@keyframes gw-turn { to { transform: rotate(360deg); } }
.grail-wheel circle, .grail-wheel path { fill: none; stroke: rgba(244, 162, 89, .45); stroke-width: .8; }
.grail-wheel path { stroke-dasharray: 2 4; }
.gw-letters text { fill: var(--muted-on-dark); font: 400 16px var(--label); text-anchor: middle; dominant-baseline: central; transition: fill .8s var(--ease), filter .8s var(--ease); }
.grail.writing .gw-letters text { fill: var(--flame); filter: drop-shadow(0 0 6px rgba(244, 140, 60, .8)); }
.grail-qs { width: 100%; }
.grail-qs .label { color: var(--muted-on-dark); margin-bottom: .75rem; }
.grail-qs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.grail-qs li { font: italic 400 1.1rem/1.3 var(--serif); padding-left: 1rem; border-left: 1px solid rgba(244, 162, 89, .5); }
@media (max-width: 900px) { .grail-grid { grid-template-columns: 1fr; } .grail-side { position: static; grid-template-columns: auto 1fr; align-items: center; justify-items: start; } .grail-wheel { display: none; } .grail-side .wtimer { width: 9rem; } .grail-side .wt-time { font-size: 1.9rem; } }
@media (prefers-reduced-motion: reduce) { .grail-wheel svg { animation: none; } }
.grail-qs li span { display: block; margin-top: .2rem; font: 400 .8125rem/1.4 var(--sans); font-style: normal; color: var(--muted-on-dark); }

/* ---------- The Compass Spread ---------- */
.compass { position: relative; display: grid; grid-template-columns: repeat(3, 9rem); grid-template-areas: ". above ." "behind heart ahead" ". below ."; justify-content: center; gap: 1.5rem 3.5rem; isolation: isolate; }
.cp { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.cp-above { grid-area: above; } .cp-below { grid-area: below; } .cp-behind { grid-area: behind; align-self: center; } .cp-ahead { grid-area: ahead; align-self: center; }
.cp-receive, .cp-give { grid-area: heart; }
.cp-receive, .cp-give { align-self: start; }
.cp-receive { z-index: 1; }
.cp-give { z-index: 2; }
.cp-give .cp-card { transform: rotate(90deg); }
.cp-receive .cp-label, .cp-give .cp-label { display: none; }
.cp-heart-label { grid-area: heart; align-self: end; z-index: 3; margin: 0 0 -3.6rem; text-align: center; font: 400 .85rem/1.2 var(--label); letter-spacing: .1em; }
.cp-heart-label span { display: block; margin: .2rem auto 0; max-width: 13rem; font: italic 400 1rem/1.2 var(--serif); letter-spacing: 0; color: var(--muted-on-dark); }
.compass { row-gap: 4.5rem; }
.heart-thumb { position: relative; width: 3.4rem; aspect-ratio: 4 / 7; }
.heart-thumb img { position: absolute; inset: 0; width: 100%; border-radius: 4px; box-shadow: 0 6px 14px rgba(28, 23, 20, .2); }
.heart-thumb .ht-b { transform: rotate(90deg) scale(.56); }
.heart-thumb:empty { border: 1.5px dashed rgba(28, 23, 20, .2); border-radius: 4px; }
.dir-heart { padding: 1rem; margin: 0 -1rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.cp-card { width: 9rem; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.cp-card:hover .flip-empty { border-color: var(--flame); color: var(--bone); }
.cp-card .flip-empty { background: rgba(27, 21, 18, .7); font: 400 .9rem/1.2 var(--label); letter-spacing: .08em; }
.cp-receive .cp-card .flip-empty, .cp-give .cp-card .flip-empty { background: rgba(42, 32, 27, .92); }
.cp-label { margin: 0; font: 400 .85rem/1.2 var(--label); letter-spacing: .1em; }
.cp-label span { display: block; margin-top: .2rem; font: italic 400 1rem/1.2 var(--serif); letter-spacing: 0; color: var(--muted-on-dark); }
.cp-rose { position: absolute; z-index: -1; width: min(36rem, 90%); left: 50%; top: 50%; transform: translate(-50%, -50%); fill: none; stroke: rgba(244, 162, 89, .22); stroke-width: .3; animation: gw-turn 180s linear infinite; }
.compass-write { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dirs { display: grid; gap: 1rem; margin-bottom: 2rem; }
.dir { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.dir-thumb img { width: 100%; border-radius: 4px; box-shadow: 0 6px 14px rgba(28, 23, 20, .2); }
.dir-thumb:empty { aspect-ratio: 4 / 7; border: 1.5px dashed rgba(28, 23, 20, .2); border-radius: 4px; }
.dir label { display: block; }
.dir-name { display: block; font: 400 1.35rem/1.2 var(--serif); margin-bottom: .2rem; }
.dir-name em { color: var(--teal-deep); font-size: .85em; }
.throughline { padding: 1.5rem; border-radius: 16px; background: var(--espresso); color: var(--bone); }
.throughline .sentence-q { display: block; margin-bottom: .3rem; }
.throughline .field-hint { color: var(--muted-on-dark); display: block; margin: 0 0 .75rem; }
.throughline textarea { background: rgba(243, 238, 230, .06); color: var(--bone); border-color: var(--line-light); }
.began { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.5rem; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.began .label { color: var(--muted); margin-bottom: 1rem; }
.began-q { margin: 0 0 .3rem; font: 500 .625rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.began blockquote { margin: 0 0 1.25rem; font: italic 400 1.15rem/1.45 var(--serif); max-height: 18rem; overflow-y: auto; }
.began-note { margin: 0; font-size: .875rem; color: var(--teal-deep); }
@media (max-width: 900px) { .compass-write { grid-template-columns: 1fr; } .began { position: static; order: -1; } }
@media (max-width: 600px) { .compass { grid-template-columns: repeat(3, 6.2rem); gap: 1rem .9rem; } .cp-card { width: 6.2rem; } .cp-label span { display: none; } .cp-label { font-size: .65rem; }  .cp-heart-label span { display: none; } .compass { row-gap: 3rem; } .cp-heart-label { margin-bottom: -2rem; } }

/* ---------- The workshops home page ---------- */
.wlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: w; }
.witem a { display: grid; grid-template-columns: 3rem minmax(0, 14rem) 1fr auto; gap: 1rem; align-items: baseline; padding: 1.3rem .5rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .3s var(--ease); counter-increment: w; }
.witem a::before { content: counter(w, decimal-leading-zero); font: italic 400 1.1rem/1 var(--serif); color: var(--teal-deep); }
.witem a:hover { background: var(--paper); }
.wlesson { font: 500 .6875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wtitle { font: 400 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.15 var(--serif); }
.wtitle em { color: var(--muted); font-size: .7em; }
.wstate { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.witem.started .wstate { color: var(--teal-deep); }
.witem.started .wstate::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--teal-deep); vertical-align: .1em; }
.journal-print { display: none; }
@media (max-width: 760px) { .witem a { grid-template-columns: 2.2rem 1fr; } .wlesson, .wtitle, .wstate { grid-column: 2; } }
@media print {
  body:has(.journal-print:not(:empty)) main > :not(.journal-print) { display: none !important; }
  .journal-print { display: block; color: #000; }
  .journal-print h1 { font: 400 28pt/1.1 var(--serif); margin-bottom: 8mm; }
  .journal-print section { break-inside: avoid-page; margin-bottom: 8mm; }
  .journal-print h2 { font: 400 16pt/1.2 var(--serif); margin-bottom: 3mm; }
  .journal-print pre { white-space: pre-wrap; font: 400 11.5pt/1.5 var(--serif); margin: 0; }
}
.dir-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.dir-thumb:empty { border: 1.5px dashed rgba(28, 23, 20, .2); border-radius: 4px; aspect-ratio: 4 / 7; }
/* Keep the long card rows scrolling inside their own strip on phones */
.paths { grid-template-columns: minmax(0, 1fr); }
.path { min-width: 0; }

/* The in-page "are you sure?" */
.ask { width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--line-light); border-radius: 16px; background: #241b17; color: var(--bone); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.ask::backdrop { background: rgba(14, 10, 8, .7); backdrop-filter: blur(3px); }
.ask[open] { animation: picker-in .35s var(--ease-out); }
.ask-msg { margin: 0 0 1.25rem; font: 400 1.35rem/1.3 var(--serif); }
.ask-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.ask-yes { border-color: var(--flame); color: var(--flame); }
.beat-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 5px; }
.beat-thumb:not(:empty)::after { content: "Look closer"; display: block; margin-top: .4rem; font: 500 .55rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.beat-thumb:hover img { box-shadow: 0 0 0 2px var(--fire-ink), 0 8px 16px rgba(28, 23, 20, .2); }
.look-qs { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--muted-on-dark); font-size: .9375rem; }

/* Four paths: a row opens into a larger stream; the card at the centre grows as you scroll */
.path-min { margin-left: auto; min-height: 36px; padding: .45rem 1rem; }
.path.expanded .path-row {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(8.5rem, 16vw, 12.5rem);
  gap: clamp(1.6rem, 3vw, 2.6rem); padding: 2.5rem calc(50% - clamp(4.25rem, 8vw, 6.25rem)); scroll-snap-type: x mandatory;
  overflow-x: auto; scrollbar-width: thin; animation: cd-text-in .5s var(--ease-out);
}
.path.expanded .pcard { scroll-snap-align: center; transform: scale(var(--s, 1)); transition: transform .25s var(--ease-out); cursor: pointer; }
.path.expanded .pcard img { box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.path.expanded .pcard.focus img { box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 162, 89, .7), 0 0 30px rgba(244, 140, 60, .35); }
.path.expanded .pcard:hover img { transform: none; }
.path.expanded .path-row li:first-child, .path.expanded .path-row li:last-child { scroll-snap-align: center; }
.path:not(.expanded) .pcard { cursor: zoom-in; }
.two-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: 2rem; }
.integrate { max-width: 52rem; }
.sentence .field-hint { margin: -.3rem 0 .2rem; }
@media (max-width: 820px) { .two-stories { grid-template-columns: 1fr; } }
.stage-about { font-size: .875rem; line-height: 1.6; color: rgba(243, 238, 230, .82); margin: 0 0 .9rem; }
.stage .stage-line { color: var(--bone); font: italic 400 1.1rem/1.3 var(--serif); }

/* Numbers: a drawing pad and the number's shape */
.num-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pad-wrap { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: #fffdf9; overflow: hidden; }
.pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.pad-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font: italic 400 1rem/1.3 var(--serif); color: #b0a69c; pointer-events: none; transition: opacity .3s; }
.pad-wrap.drawn .pad-hint { opacity: 0; }
.pad-clear { position: absolute; bottom: .4rem; right: .4rem; padding: .3rem .55rem; border: 0; border-radius: 999px; background: rgba(28, 23, 20, .06); color: var(--muted); font: 500 .6rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pad-wrap:not(.drawn) .pad-clear { display: none; }
.geo { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--espresso); display: grid; place-items: center; overflow: hidden; }
.geo-reveal { padding: .7rem 1rem; border-radius: 999px; border: 1px solid rgba(244, 162, 89, .6); background: none; color: var(--flame); font: 500 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.geo-reveal:hover { background: rgba(244, 162, 89, .12); }
.geo-fig { margin: 0; display: grid; justify-items: center; gap: .3rem; width: 100%; padding: .6rem; }
.geo-fig svg { width: 80%; overflow: visible; }
.geo-fig svg :is(polygon, polyline, circle, line) { fill: none; stroke: var(--flame); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(244, 140, 60, .6)); }
.geo-fig svg .g-dot { fill: #ffd6a0; stroke: none; }
.geo.shown .geo-fig svg :is(polygon, polyline, circle:not(.g-dot), line) { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: geo-draw 2.4s var(--ease-out) forwards; }
/* The points are simply there from the start; only Seven's centre point appears later */
@keyframes geo-draw { to { stroke-dashoffset: 0; } }
.geo-fig svg circle:not(.g-dot) { stroke-opacity: .75; }
.geo-fig figcaption { font: italic 400 .95rem/1.2 var(--serif); color: var(--bone); text-align: center; }
@media (prefers-reduced-motion: reduce) { .geo.shown .geo-fig svg * { animation: none !important; stroke-dashoffset: 0 !important; } }
/* Planets: keep each planet's name and terms on the left of its symbol */
.planet .node-name { grid-column: 1; grid-row: 1; }
.planet .node-terms { grid-column: 1; grid-row: 2; }
.planet .astro { grid-column: 2; grid-row: 1 / span 2; }
.sign .astro { grid-column: 1; grid-row: 1 / span 2; }
.sign .node-name, .sign .node-terms { grid-column: 2; }
.gathered { margin-bottom: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 16px; background: var(--espresso); color: var(--bone); }
.gathered .label { color: var(--muted-on-dark); margin-bottom: 1rem; }
.g-pair { padding: .9rem 0; border-top: 1px solid var(--line-light); }
.g-name { margin: 0 0 .3rem; font: 400 1.25rem/1.2 var(--serif); }
.g-name .astro { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", serif; color: var(--flame); }
.g-name em { color: var(--muted-on-dark); }
.g-text { margin: 0; color: rgba(243, 238, 230, .88); font-size: .9375rem; }
.g-empty { margin: 0; font: italic 400 1.15rem/1.4 var(--serif); color: var(--muted-on-dark); }
.together { display: grid; gap: 1.25rem; }
.tg { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-light); }
.tg-card img { width: 100%; border-radius: 5px; }
.tg-role { margin: 0 0 .35rem; font: 500 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark); }
.tg-text { margin: .4rem 0 0; font: 400 1.25rem/1.45 var(--serif); }
.tg-empty { color: var(--muted-on-dark); font-style: italic; font-size: 1rem; }

/* Tree: start over, the side paths ("hidden doors") and the card definitions */
.tree-reset { margin: -.5rem 0 1.25rem 4rem; min-height: 38px; padding: .5rem 1.1rem; }
.t-path.door, .t-plabel.door { stroke: #c9b3f0; fill: #c9b3f0; }
.t-path.door { stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 0 7px rgba(201, 179, 240, .85)); }
.t-plabel.door { stroke: var(--table); }
.doors { margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid rgba(201, 179, 240, .35); background: rgba(201, 179, 240, .05); }
.doors-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.doors-head .ws-field-label { margin: 0; color: #c9b3f0; }
.doors-all { background: none; border: 0; color: var(--muted-on-dark); font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.doors-hint { margin: .4rem 0 .8rem; font-size: .8125rem; color: var(--muted-on-dark); }
.doors-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.door-chip { min-height: 34px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(201, 179, 240, .4); background: none; color: var(--bone); font: 400 .9rem/1 var(--serif); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.door-chip[aria-pressed="true"] { background: rgba(201, 179, 240, .2); border-color: #c9b3f0; color: #fff; }
.defs { margin: 0 0 2rem; display: grid; gap: 1rem; }
.defs-label { color: var(--muted); margin: 0; }
.def { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.def-card img { width: 100%; border-radius: 5px; box-shadow: 0 8px 16px rgba(28, 23, 20, .2); }
.def-role { margin: 0 0 .3rem; font: 500 .625rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
.def .meaning-title { color: var(--ink); font-size: 1rem; }
.def .astro-tag { color: var(--fire-ink); }
.def-where { margin: 0 0 .5rem; font-size: .8125rem; color: var(--muted); }
.def-where .heb { color: var(--ink); font-size: 1rem; }
.def-text { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.6; }
.muted-def { color: var(--muted); font-size: .875rem; }

/* Compass: the card under the cross stays reachable where it shows */
.cp-give, .cp-receive, .cp-heart-label { pointer-events: none; }
.cp-give .cp-card, .cp-receive .cp-card { pointer-events: auto; }
/* Seven: once the circles and star are drawn, a point appears at its centre, then a circle grows out to guard its perimeter */
.geo.shown .geo-fig svg .g-dot.g-centre { animation: pip-in .7s var(--ease-out) both; animation-delay: 2.5s; }
.geo-fig svg circle.g-ring { stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
.geo.shown .geo-fig svg circle.g-ring { stroke-dasharray: none; stroke-dashoffset: 0; animation: ring-grow 1.8s var(--ease-out) 3.1s both; }
@keyframes ring-grow { from { transform: scale(.08); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
/* Eight: once drawn, the two squares turn slowly in opposite directions */
.geo-fig svg :is(.spin-a, .spin-b) { transform-box: view-box; transform-origin: 50% 50%; }
.geo.shown .geo-fig svg .spin-a { animation: spin-cw 30s linear 2.4s infinite; }
.geo.shown .geo-fig svg .spin-b { animation: spin-cw 30s linear 2.4s infinite reverse; }
@keyframes spin-cw { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .geo.shown .geo-fig svg :is(.spin-a, .spin-b) { animation: none; } }
/* Nine: once drawn, the three triangles turn at different speeds, the middle one against the others */
.geo-fig svg :is(.spin-t1, .spin-t2, .spin-t3) { transform-box: view-box; transform-origin: 50% 50%; }
/* Nine: on reveal, a quick arrangement. The three triangles turn into one upright triangle within about three seconds
   and hold in a soft glow (attainment). Then they part and wander, each at its own pace, taking thirty seconds to meet
   upright again, hold in the glow, and begin again. Turns are multiples of 120°, so each meeting looks the same.
   Triangle two starts 40° ahead of triangle one and triangle three 40° behind; they meet when those offsets are turned away. */
.geo.shown .geo-fig svg .spin-t1 { animation: t1-arrive 6s ease-in-out both, t1-wander 36s ease-in-out 6s infinite; }
.geo.shown .geo-fig svg .spin-t2 { animation: t2-arrive 6s ease-in-out both, t2-wander 36s ease-in-out 6s infinite; }
.geo.shown .geo-fig svg .spin-t3 { animation: t3-arrive 6s ease-in-out both, t3-wander 36s ease-in-out 6s infinite; }
@keyframes t1-arrive { 0% { transform: rotate(0); } 50%, 100% { transform: rotate(120deg); } }
@keyframes t2-arrive { 0% { transform: rotate(0); } 50%, 100% { transform: rotate(-160deg); } }
@keyframes t3-arrive { 0% { transform: rotate(0); } 50%, 100% { transform: rotate(160deg); } }
@keyframes t1-wander { 0% { transform: rotate(120deg); } 45% { transform: rotate(250deg); } 83%, 100% { transform: rotate(360deg); } }
@keyframes t2-wander { 0% { transform: rotate(-160deg); } 50% { transform: rotate(-290deg); } 83%, 100% { transform: rotate(-400deg); } }
@keyframes t3-wander { 0% { transform: rotate(160deg); } 40% { transform: rotate(205deg); } 83%, 100% { transform: rotate(280deg); } }
.geo-fig svg circle.g-glow { stroke: none; opacity: 0; filter: none; }
.geo.shown .geo-fig svg circle.g-glow { stroke-dasharray: none; animation: glow-arrive 6s ease-in-out both, glow-wander 36s ease-in-out 6s infinite; }
@keyframes glow-arrive { 0%, 35% { opacity: 0; transform: scale(.85); } 55%, 100% { opacity: 1; transform: scale(1); } }
@keyframes glow-wander { 0% { opacity: 1; transform: scale(1); } 10%, 76% { opacity: 0; transform: scale(.9); } 85%, 100% { opacity: 1; transform: scale(1); } }
.geo-fig svg circle.g-glow { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .geo.shown .geo-fig svg :is(.spin-t1, .spin-t2, .spin-t3, .g-glow) { animation: none; } }
/* One to Seven: once drawn, each whole figure turns slowly, holding its form */
.geo-fig svg .spin-whole { transform-box: view-box; transform-origin: 50% 50%; }
.geo.shown .geo-fig svg .spin-whole { animation: spin-cw 60s linear 2.4s infinite; }
.geo.shown[data-n="7"] .geo-fig svg .spin-whole { animation-delay: 4.9s; }
@media (prefers-reduced-motion: reduce) { .geo.shown .geo-fig svg .spin-whole { animation: none; } }
/* While they are one, the triangle's own line glows brighter too */
.geo.shown[data-n="9"] .geo-fig svg :is(.spin-t1, .spin-t2, .spin-t3) polygon { animation: geo-draw 1.6s var(--ease-out) forwards, line-arrive 6s ease-in-out both, line-wander 36s ease-in-out 6s infinite; }
@keyframes line-arrive { 0%, 35% { filter: drop-shadow(0 0 3px rgba(244, 140, 60, .6)); } 55%, 100% { filter: drop-shadow(0 0 7px rgba(255, 200, 140, 1)) drop-shadow(0 0 16px rgba(244, 140, 60, .7)); } }
@keyframes line-wander { 0% { filter: drop-shadow(0 0 7px rgba(255, 200, 140, 1)) drop-shadow(0 0 16px rgba(244, 140, 60, .7)); } 10%, 76% { filter: drop-shadow(0 0 3px rgba(244, 140, 60, .6)); } 85%, 100% { filter: drop-shadow(0 0 7px rgba(255, 200, 140, 1)) drop-shadow(0 0 16px rgba(244, 140, 60, .7)); } }

/* A figure stays hidden until its reveal button is pressed, whatever its display style */
.geo-fig[hidden] { display: none !important; }
/* Ten: once its points are in place, a steady glow that breathes slowly in and out.
   Only opacity changes (no scaling or animated shadows), so the glow swells smoothly without shimmer. */
.geo-fig svg circle.g-breath { stroke: none; opacity: 0; filter: none; will-change: opacity; }
.geo.shown .geo-fig svg circle.g-breath { stroke-dasharray: none; animation: breath-in 2s ease-out 1.8s both, breathe 9s ease-in-out 3.8s infinite; }
@keyframes breath-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.geo-fig svg polygon.g-halo { stroke: #ffd6a0; stroke-width: 3; opacity: 0; will-change: opacity; }
.geo.shown .geo-fig svg polygon.g-halo { stroke-dasharray: none; stroke-dashoffset: 0; animation: breath-in 2s ease-out 1.8s both, breathe 9s ease-in-out 3.8s infinite; }
@media (prefers-reduced-motion: reduce) { .geo.shown .geo-fig svg circle.g-breath { animation: none; opacity: .7; } }
/* The shapes speak for themselves: no caption under a revealed figure */
.geo-fig { padding: 1rem; }
.geo-fig svg { width: 86%; }
/* Nine and Ten glow along the triangle itself, not as a round light behind it */
.geo-fig svg circle.g-glow, .geo-fig svg circle.g-breath { display: none; }
/* Ten: a soft glow around the triangle that breathes slowly; the triangle itself never changes size */
.geo.shown[data-n="10"] .geo-fig svg polygon { animation: geo-draw 2.4s var(--ease-out) forwards, ten-breathe 9s ease-in-out 1.8s infinite; }
@keyframes ten-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(244, 140, 60, .55)); }
  50% { filter: drop-shadow(0 0 7px rgba(255, 200, 140, .95)) drop-shadow(0 0 16px rgba(244, 140, 60, .6)); }
}

/* Free workshops: the readable "about" text and the course invitation */
.ws-about { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.ws-about h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: 1rem; }
.ws-about-lead { font-size: 1.0625rem; color: var(--ink); max-width: 44rem; }
.ws-about-quote { margin: 1.25rem 0; padding-left: 1.25rem; border-left: 2px solid var(--fire-ink); }
.ws-about-quote p { margin: 0; font: italic 400 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.45 var(--serif); }
.ws-about-cite { margin-top: 1.25rem; font: 500 .6875rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ws-invite { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line-light); }
.ws-invite .label { color: var(--muted-on-dark); margin-bottom: .75rem; }
.ws-invite .ws-next-title em { color: var(--flame); }
.ws-invite-text { color: var(--muted-on-dark); max-width: 36rem; margin-bottom: 1.5rem; }
.ws-invite .pill { margin-bottom: 2rem; }
.ws-free-label { flex-basis: 100%; font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark); }
.ws-invite.for-student { display: none; }
.ws-hero-text .ws-book-link { color: var(--bone); text-underline-offset: .2em; }
.ws-hero-text .ws-book-link:hover { color: var(--flame); }
.ws-about-lead a { color: var(--teal-deep); }