/* =========================================================
   Small Wonders Ikigai - Finding the spark
   Page styles. Mobile first: base = phone; min-width adds the rest.
   ========================================================= */
.page-ikigai{--sun:#F2A65A;--warm:#FCEFE2}

/* ---------- hero: the word, breathing ----------
   No object stands in for ikigai (there isn't one; see HANDOFF.md). The
   character sits alone and breathes very slowly, the same ambient pace as
   the gifts turning and the crane idling on the sibling pages. */
.ik-hero-word{position:relative;z-index:1;display:grid;justify-items:center;
  gap:.7rem;padding-block:clamp(1.6rem,7vw,3rem);text-align:center}
.ik-word-glyph{font-family:var(--jp);font-weight:600;font-size:clamp(3.6rem,15vw,5.2rem);line-height:1;
  color:var(--ci);animation:ikBreathe 7s ease-in-out infinite}
.ik-word-rule{width:2.6rem;height:2px;background:var(--gold);opacity:.75}
.ik-word-gloss{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
/* opacity only: animating blur on text risked a sub-pixel shimmer on the strokes */
@keyframes ikBreathe{0%,100%{opacity:.84}50%{opacity:1}}
/* at 1000px+ the hero is two columns and .cp-hero-in centres each column against
   the other's height, so the word needs no box of its own to sit well */
@media(min-width:1000px){.ik-hero-word{padding-block:0}.ik-word-glyph{font-size:clamp(4.4rem,8vw,6.2rem)}}

/* The spark finder reuses these two blocks from the old four-circles panel:
   the "in our classroom" list and the question to ask at bedtime. */
.ci-class{margin-top:1.2rem;padding:.15rem 0 .15rem 1.1rem;border-left:2px solid var(--ikigai)}
.ci-class .micro{color:var(--ikigai-ink);font-size:9.6px}
.ci-class ul{margin-top:.5rem;list-style:none;display:grid;gap:.45rem}
.ci-class li{position:relative;padding-left:1.1rem;font-size:.93rem;line-height:1.55;color:#34405A}
.ci-class li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ikigai)}
.ci-ask{margin-top:1.1rem;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.3}
.ci-ask .micro{display:block;font-family:var(--sans);font-style:normal;color:var(--muted);font-size:9.6px;margin-bottom:.3rem}

/* the pill that restarts the spark finder */
.fn-reset{border:0;cursor:pointer;padding:.55rem .95rem;min-height:38px;border-radius:999px;
  background:#fff;color:var(--ikigai-ink);font-size:.82rem;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(180,88,26,.25);transition:background .3s,color .3s,transform .3s var(--ease)}
@media(hover:hover){.fn-reset:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ikigai-ink)}}

/* =========================================================
   THE IDEA
   Writing only. The hero art slot above it is empty on purpose:
   four illustrations have been rejected there. See HANDOFF.md.
   ========================================================= */
.idea{padding:3.4rem 1.2rem 2.6rem}

/* ---------- the spark finder ---------- */
.finder{padding:3rem 1.2rem 3rem;background:linear-gradient(180deg,var(--paper),var(--warm) 30%,var(--warm) 70%,var(--paper))}
.finder-in{max-width:1180px;margin:0 auto}
.finder-head{max-width:46rem}
.fn-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.8rem}
.fn-card{position:relative;display:grid;align-content:start;gap:.7rem;text-align:left;border:0;cursor:pointer;padding:1rem .9rem 1.05rem;border-radius:16px;background:#fff;color:var(--ink);font:inherit;
  box-shadow:inset 0 0 0 1px rgba(22,41,74,.08);transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.fn-card svg{width:30px;height:30px;fill:none;stroke:var(--ikigai-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.fn-card span{font-size:.9rem;line-height:1.35;font-weight:500}
.fn-card::after{content:'';position:absolute;top:.8rem;right:.8rem;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(180,88,26,.3);transition:background .35s,box-shadow .35s}
.fn-card[aria-pressed="true"]{background:var(--ikigai-ink);color:#fff;box-shadow:none;transform:translateY(-2px)}
.fn-card[aria-pressed="true"] svg{stroke:#FFE2C2}
.fn-card[aria-pressed="true"]::after{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4 7.8 12 13 6.5' fill='none' stroke='%23B4581A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;box-shadow:none}
.fn-card:disabled{opacity:.45;cursor:not-allowed}
@media(hover:hover){.fn-card:not(:disabled):not([aria-pressed="true"]):hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ikigai)}}
.fn-hint{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ikigai-ink)}
.fn-result{margin-top:1.6rem;display:grid;gap:1rem;padding:1.3rem 1.2rem 1.4rem;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07),0 30px 60px -40px rgba(22,41,74,.55)}
.fn-result[hidden]{display:none}
.fn-result.pop{animation:ciSwap .6s var(--ease)}
.fn-burst{width:92px;height:92px}
.fn-burst svg{width:100%;height:100%;overflow:visible}
.b-ring{fill:none;stroke:var(--ikigai);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:fnRing 2.4s ease-out infinite}
@keyframes ciTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(45deg)}}
@keyframes ciSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fnRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.b-star{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:ciTwinkle 3.2s ease-in-out infinite}
.fn-k{color:var(--muted)}
.fn-name{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,10vw,3.4rem);line-height:1;margin-top:.4rem;color:var(--ikigai-ink)}
.fn-also{margin-top:.4rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink)}
.fn-also:empty{display:none}
.fn-line{margin-top:.7rem;font-size:1.02rem;line-height:1.7}
.fn-note{margin-top:1.1rem;font-size:.88rem;line-height:1.6;color:var(--muted)}
.fn-reset{margin-left:.3rem;padding:.35rem .8rem;font-size:.78rem}

/* ---------- one spark, one term ---------- */
.term{padding:3.4rem 1.2rem 2rem}
.term-head{max-width:46rem;margin:0 auto}
.tm-track{position:relative;max-width:1000px;margin:2.2rem auto 0;padding-left:52px}
.tm-path{position:absolute;left:0;top:0;width:52px;height:100%;overflow:visible;pointer-events:none}
.tm-line-bg{fill:none;stroke:rgba(180,88,26,.22);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round}
.tm-line{fill:none;stroke:var(--ikigai);stroke-width:2;stroke-linecap:round}
.tm-ant{fill:#3A2A22}
.tm-ant .ant-body{transform:scale(1.25)}
.tm-ant .ant-legs path,.tm-ant .ant-feel{fill:none;stroke:#3A2A22;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.tm-ant.walk .ant-legs{animation:antLegs .18s steps(2) infinite}
@keyframes antLegs{50%{transform:scaleX(-1)}}
.tm-steps{list-style:none;display:grid;gap:1.4rem}
.tm-step{position:relative;padding:1.1rem 1.1rem 1.2rem;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07),0 20px 40px -34px rgba(22,41,74,.45)}
.tm-dot{position:absolute;left:-36px;top:1.35rem;width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(180,88,26,.35);transition:background .5s,box-shadow .5s}
.tm-step.lit .tm-dot{background:var(--ikigai);box-shadow:0 0 0 5px rgba(233,138,60,.18)}
.tm-when{display:flex;align-items:baseline;gap:.7rem;font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#876830}
.tm-when b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--ikigai-ink)}
.tm-step h3{font-family:var(--serif);font-weight:500;font-size:1.75rem;line-height:1.1;margin-top:.45rem}
.tm-step p:last-child{margin-top:.5rem;font-size:.97rem;line-height:1.65;color:#34405A}
.tm-end{margin-top:2rem;font-family:var(--serif);font-size:1.5rem;line-height:1.35;max-width:36rem}
.tm-end em{color:var(--ikigai-ink)}

/* ---------- tablet and up ---------- */
@media(min-width:769px){
  .idea,.finder,.term{padding-left:2rem;padding-right:2rem}
  .fn-grid{grid-template-columns:repeat(4,1fr)}
  .fn-result{grid-template-columns:auto 1fr;gap:1.6rem;padding:1.8rem 2rem}
  .fn-burst{width:120px;height:120px}
}
@media(min-width:1000px){
  .idea,.finder,.term{padding-left:3rem;padding-right:3rem}
  .idea{padding-top:5rem;padding-bottom:4rem}
  
  .finder{padding-top:5rem;padding-bottom:5rem}
  /* the ant walks down the middle, and the weeks take turns either side */
  .tm-track{padding-left:0}
  .tm-path{left:50%;width:120px;margin-left:-60px}
  .tm-steps{gap:0}
  .tm-step+.tm-step{margin-top:-2.4rem}
  .tm-step{width:calc(50% - 70px)}
  .tm-step:nth-child(odd){justify-self:start}
  .tm-step:nth-child(even){justify-self:end}
  .tm-dot{left:auto;right:-77px}
  .tm-step:nth-child(even) .tm-dot{right:auto;left:-77px}
  .tm-end{margin:3rem auto 0;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .b-ring,.b-star{animation:none}
  .dr-doll.tip{animation:none}
  .tm-ant.walk .ant-legs{animation:none}
}