/* Elementals page. Loaded after style.css and octavious.css (shared product-page layout). */

/* Hero: copy beside an orbiting "galaxy" around your Nucleus */
.el-hero { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; padding-block: 56px 72px; }
.el-hero h1 { font-family: var(--f-sans); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -.035em; margin: 14px 0 22px; max-width: none; text-align: left; text-wrap: balance; }
.el-hero h1 em { font-size: 1em; letter-spacing: -.01em; }
.el-hero .lede { max-width: 46ch; }
.tagline { font-family: var(--f-serif); font-style: italic; font-size: 1.5rem; margin: 18px 0 26px; color: var(--ink); }
@media (max-width: 900px) { .el-hero { grid-template-columns: minmax(0, 1fr); } }

.galaxy { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.ring, .electron, .orbit { position: absolute; border-radius: 50%; }
.ring { border: 1px solid var(--line); }
.ring.r1, .orbit.r1, .electron.r1 { inset: 29%; }
.ring.r2, .orbit.r2, .electron.r2 { inset: 18%; }
.ring.r3, .orbit.r3, .electron.r3 { inset: 7%; }
.orbit { animation: elSpin var(--t, 60s) linear infinite; }
.orbit.r1 { --t: 38s; } .orbit.r2 { --t: 52s; } .orbit.r3 { --t: 70s; }
.spoke { position: absolute; inset: 0; transform: rotate(var(--a)); }
.spoke img { position: absolute; top: 0; left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; animation: elUnspin var(--t, 60s) linear infinite; }
.electron { animation: elSpin 9s linear infinite; }
.electron.r2 { animation-duration: 13s; animation-direction: reverse; }
.electron.r3 { animation-duration: 17s; }
.electron::after { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #f2c14e; box-shadow: 0 0 12px rgba(242, 193, 78, .7); }
.nucleus { position: absolute; inset: 36%; display: grid; place-items: center; }
.nucleus img { width: 100%; height: auto; filter: drop-shadow(0 0 24px rgba(236, 120, 200, .35)); }
.nucleus span { position: absolute; bottom: -18px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes elSpin { to { transform: rotate(360deg); } }
@keyframes elUnspin { from { transform: rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(-1 * var(--a) - 360deg)); } }
.orbit .spoke img { transform: rotate(calc(-1 * var(--a))); }
@media (prefers-reduced-motion: reduce) { .orbit, .electron, .spoke img { animation: none; } }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.step { padding: 22px 22px 6px 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.step + .step { padding-left: 22px; border-left: 1px solid var(--line); }
.step .num { font-family: var(--f-mono); font-size: .72rem; color: #f2c14e; letter-spacing: .08em; }
.step h3 { font-weight: 500; font-size: 1.6rem; margin: 0; letter-spacing: -.02em; line-height: 1.05; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.kinds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kinds li { font-family: var(--f-mono); font-size: .7rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } .step, .step + .step { padding: 22px 0 10px; border-left: 0; } .step + .step { border-top: 1px solid var(--line); } }

/* Two-column bands */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.intro.small { font-size: .9rem; margin-top: 14px; }
.ink-link { color: var(--ink); border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Receipt */
.receipt { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 460px; justify-self: center; width: 100%; }
.r-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.r-head img { width: 56px; height: 56px; }
.r-head b { display: block; font-family: var(--f-mono); font-weight: 500; }
.r-head small { color: var(--muted); font-size: .85rem; }
.receipt dl { margin: 0; }
.receipt dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.receipt dt { color: var(--muted); }
.receipt dd { margin: 0; text-align: right; color: var(--ink); max-width: 60%; }
.receipt .mono { font-family: var(--f-mono); }
.receipt .save dd { color: #f2c14e; font-size: 1.1rem; }
.receipt figcaption { margin-top: 12px; font-family: var(--f-mono); font-size: .66rem; color: var(--muted); }

/* Teams */
.ladder { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--ink); }
.ladder li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ladder span { color: var(--muted); font-family: var(--f-mono); font-size: .75rem; }
.molecule { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.molecule svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.molecule line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.atom { position: absolute; width: 18%; height: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 51.43deg)) translateY(-175%) rotate(calc(var(--i) * -51.43deg)); }
.lead { position: absolute; inset: 37%; display: grid; place-items: center; }
.lead img { width: 100%; height: auto; }
.lead span { position: absolute; bottom: -14px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #f2c14e; }

/* Periodic table collection */
.ptable { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cell { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 10px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cell .sym { position: absolute; top: 8px; left: 10px; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); }
.cell img { width: 72px; height: 72px; margin: 6px 0 4px; }
.cell b { font-weight: 500; font-size: .85rem; }
.cell small { font-family: var(--f-mono); font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cell.found { border-color: color-mix(in srgb, #f2c14e 45%, var(--line)); }
.cell.waiting img { filter: brightness(0) invert(.35); opacity: .7; }
.cell.egg img { filter: grayscale(1) brightness(.5); opacity: .35; }
.cell.egg b { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }
.legend .k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -10px; border: 1px solid var(--line); }
.legend .k.found { background: #f2c14e; border-color: #f2c14e; }
.legend .k.waiting { background: #5a5852; }
.legend .k.egg { background: transparent; }

/* Modes */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.mode { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.mode h3 { font-weight: 500; font-size: 1.35rem; margin: 0; letter-spacing: -.015em; }
.mode p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.mode code { font-family: var(--f-mono); font-size: .82em; color: var(--ink); }
.st { align-self: flex-start; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.st.on { color: #111; background: #f2c14e; border-color: #f2c14e; }