/* Ranchu Japan article pages (Earth palette). From the article design artboard; behaviour in public/assets/js/earth/article.js. */
/* ---------- 1. Page basics ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#081020;font-family:'Noto Sans JP',system-ui,sans-serif}
a{color:#0E3B5C;text-underline-offset:3px}
a:hover{color:#10202A}
h1,h2,h3,button,.rk-palt{font-feature-settings:"palt" 1}
::selection{background:#F2B544;color:#10202A}

/* ---------- 2. Utilities ---------- */
.rk-ph{display:inline-block}
.rk-num{font-family:'Space Grotesk',sans-serif;font-weight:500;font-variant-numeric:tabular-nums}
.rk-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rk-skip{position:absolute;left:16px;top:-80px;z-index:40;padding:12px 18px;border-radius:12px;background:#F2B544;color:#10202A;font-size:15px;font-weight:500;text-decoration:none}
.rk-skip:focus{top:16px;color:#10202A}

/* ---------- 3. Focus ---------- */
:where(a,button):focus-visible{outline:3px solid #0E3B5C;outline-offset:3px}
:where(.rk-dark) :where(a,button):focus-visible{outline-color:#F2B544}

/* ---------- 4. Buttons, links, cards ---------- */
.rk-btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.rk-fwd,.rk-ext{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.rk-nav,.rk-foot{transition:color .2s ease}
.rk-ar-card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.rk-ar-thumb svg{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .rk-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,20,38,.18)}
  .rk-btn:hover .rk-fwd{transform:translateX(4px)}
  .rk-btn:hover .rk-ext{transform:translate(2px,-2px)}
  .rk-nav:hover,.rk-foot:hover{color:#F7F4EC !important}
  .rk-ar-crumb:hover{color:#F7F4EC !important}
  .rk-ar-share:hover{border-color:#10202A !important}
  .rk-ar-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,32,42,.14)}
  .rk-ar-card:hover .rk-ar-thumb svg{transform:scale(1.04)}
  .rk-ar-card:hover .rk-ar-ctitle{text-decoration:underline;text-underline-offset:4px}
  .rk-ar-gold:hover{box-shadow:0 10px 28px rgba(242,181,68,.28)}
}
.rk-btn:active{transform:scale(.97)}

/* ---------- 5. Motion ---------- */
@keyframes rk-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rk-in{animation:rk-in .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rk-tw{0%,100%{opacity:.35}50%{opacity:1}}
.rk-tw{animation:rk-tw 4.6s ease-in-out infinite}
@keyframes rk-breathe{0%,100%{opacity:.78}50%{opacity:1}}
.rk-breathe{animation:rk-breathe 7s ease-in-out infinite}
@keyframes rk-march{to{stroke-dashoffset:-120}}
.rk-march{animation:rk-march 6s linear infinite}
/* Hero: a light sweeps along each orbit, rising from one side of the planet and setting on the other.
   The rotating groups sit inside a translate() to the planet's centre (transform-box view-box, origin 0 0). */
@keyframes rk-ar-sweep{0%{transform:rotate(-41deg);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:rotate(41deg);opacity:0}}
.rk-ar-sweep{animation:rk-ar-sweep 13s cubic-bezier(.45,.05,.55,.95) infinite;transform-box:view-box;transform-origin:0 0}
.rk-ar-sweep-r{animation:rk-ar-sweep 19s cubic-bezier(.45,.05,.55,.95) -6s infinite reverse;transform-box:view-box;transform-origin:0 0}
/* Card vignettes. */
@keyframes rk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.rk-bob{animation:rk-bob 1.6s ease-in-out infinite}
@keyframes rk-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.rk-pulse{animation:rk-pulse 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rk-rise{0%,100%{transform:translateY(6px)}50%{transform:translateY(0)}}
.rk-rise{animation:rk-rise 8s ease-in-out infinite}

/* ---------- 6. Layout ---------- */
@media (max-width:760px){.rk-navlink{display:none !important}}
@media (max-width:960px){.rk-ar-cards{grid-template-columns:minmax(0,1fr) !important;max-width:560px;margin-left:auto !important;margin-right:auto !important}}
@media (max-width:640px){.rk-ar-art{aspect-ratio:4/3 !important}.rk-ar-meta{grid-template-columns:minmax(0,1fr) !important}}

/* ---------- 8. Site pieces outside the design ---------- */
.rk-ar-copy.is-done{border-color:#2F6B3F !important;background:#EAF2E3 !important;color:#2F6B3F !important}
.rk-star{position:relative;display:inline-block;width:44px;height:44px;border-radius:50%}
.rk-star span{position:absolute;inset:19px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 6px 2px rgba(190,235,255,.55);animation:twinkle 3.6s ease-in-out infinite}
@media (hover:hover){.rk-star:hover span{box-shadow:0 0 10px 4px rgba(190,235,255,.8)}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@media (max-width:420px){.rk-footnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:0 20px !important}}

/* ---------- 7. Reduced motion (keep last) ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .rk-in{opacity:1 !important;transform:none !important}
  .rk-btn:hover,.rk-btn:active,.rk-ar-card:hover{transform:none}
  .rk-ar-card:hover .rk-ar-thumb svg{transform:none}
}