/* ==========================================================================
   KriptoID — design tokens
   Ported from the Figma prototype's semantic --kid-* custom properties
   (kriptoid-homepage-standalone-.html, line ~2725). Values are the real
   ones used by the prototype's inline styles, not the raw Figma variable
   dump (which is thousands of unused per-node tokens and not a usable
   design system on its own).
   ========================================================================== */

/*
 * KriptoID's real default is DARK — confirmed from the prototype's own
 * component state (`dark: true`, unconditional, on every page; there is
 * no prefers-color-scheme detection in the source). :root below holds the
 * dark palette; [data-theme="light"] overrides it when a visitor toggles.
 */
:root {
  --kid-accent: #f7931a;
  --kid-accent-deep: #f7a93f;
  --kid-tick: 64s;

  --kid-canvas: rgb(6, 16, 27);
  --kid-surface: rgb(11, 26, 42);
  --kid-surface-soft: rgb(17, 35, 53);
  --kid-header-bg: rgba(8, 21, 34, 0.92);
  --kid-border: rgba(255, 255, 255, 0.13);
  --kid-border-soft: rgba(255, 255, 255, 0.1);
  --kid-divider: rgba(255, 255, 255, 0.08);

  --kid-text: rgb(255, 255, 255);
  --kid-text-body: rgba(255, 255, 255, 0.78);
  --kid-text-muted: rgba(255, 255, 255, 0.6);
  --kid-text-faint: rgba(255, 255, 255, 0.45);

  --kid-pos: rgb(8, 193, 132);
  --kid-neg: rgb(239, 97, 110);
  --kid-blue: #7ca8ff;
  --kid-blue-deep: #9eb9ff;
  --kid-blue-soft: rgba(124, 168, 255, 0.16);

  --kid-footer-bg: rgb(8, 21, 34);
  --kid-radius-sm: 8px;
  --kid-radius-md: 12px;
  --kid-radius-lg: 18px;
  --kid-radius-pill: 999px;
  --kid-shell: 1362px;
  --kid-shell-pad: 16px;
  --kid-narrow: 1160px;
}

:root[data-theme="light"] {
  --kid-accent-deep: #b86a00;
  --kid-canvas: rgb(250, 250, 251);
  --kid-surface: rgb(255, 255, 255);
  --kid-surface-soft: rgb(244, 247, 251);
  --kid-header-bg: rgba(255, 255, 255, 0.92);
  --kid-border: rgb(220, 227, 237);
  --kid-border-soft: rgb(229, 231, 239);
  --kid-divider: rgb(240, 243, 248);
  --kid-text: rgb(18, 24, 39);
  --kid-text-body: rgb(52, 64, 84);
  --kid-text-muted: rgb(102, 112, 133);
  --kid-text-faint: rgb(122, 132, 150);
  --kid-pos: rgb(8, 123, 85);
  --kid-neg: rgb(191, 48, 66);
  --kid-blue: #2557ff;
  --kid-blue-deep: #1a3fbd;
  --kid-blue-soft: rgba(37, 87, 255, 0.08);
}

/* ==========================================================================
   Base
   ========================================================================== */

/* Matches the prototype's own `* { box-sizing: border-box }` reset — without
   it, max-width + padding-inline combos (like .kid-shell below) render
   wider than their max-width instead of padding eating into it. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--kid-canvas);
  color: var(--kid-text);
  font:
    400 15px/1.6 Inter,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

a {
  color: var(--kid-accent-deep);
  text-decoration: none;
}
a:hover {
  color: var(--kid-accent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kid-text);
}

.kid-shell {
  max-width: var(--kid-shell);
  margin-inline: auto;
  padding-inline: var(--kid-shell-pad);
}

.kid-narrow {
  max-width: var(--kid-narrow);
  margin-inline: auto;
  padding-inline: var(--kid-shell-pad);
}

/* Once the viewport is wide enough that a shell/narrow container is already
   sitting at its max-width (centered via margin-inline: auto), the outside
   margin IS the gutter — the container's own inline padding would just eat
   into content width for no reason, so it drops to 0. Below these widths
   the container has no room to center and needs its own padding instead. */
@media (min-width: 1362px) {
  .kid-shell {
    padding-inline: 0;
  }
}
@media (min-width: 1160px) {
  .kid-narrow {
    padding-inline: 0;
  }
}

.kid-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 Inter;
  letter-spacing: 1.15px;
  text-transform: uppercase;
  color: var(--kid-accent-deep);
}

.kid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--kid-radius-sm);
  font: 600 13px/1 Inter;
  border: 1px solid var(--kid-border);
  background: var(--kid-surface);
  color: var(--kid-text);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.kid-btn-accent {
  border-color: transparent;
  background: var(--kid-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(247, 147, 26, 0.24);
}
.kid-btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(247, 147, 26, 0.32);
  color: #fff;
}

.kid-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--kid-radius-pill);
  background: var(--kid-accent);
  color: #fff;
  font: 600 10.5px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
}

.kid-pill-soft {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: var(--kid-radius-pill);
  background: rgba(247, 147, 26, 0.12);
  color: var(--kid-accent-deep);
  font: 600 9.5px/1 Inter;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.kid-change-pos {
  color: var(--kid-pos);
}
.kid-change-neg {
  color: var(--kid-neg);
}

/* ==========================================================================
   Header
   ========================================================================== */

.kid-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--kid-header-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--kid-border-soft);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.02);
}

.kid-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.kid-logo {
  display: inline-flex;
  align-items: center;
}
.kid-logo-img {
  height: 30px;
  width: auto;
}

/* Header follows the theme toggle: dark (light-text) logo by default,
   light (dark-text) logo under the light-mode override. */
.kid-logo-light {
  display: none;
}
:root[data-theme="light"] .kid-logo-dark {
  display: none;
}
:root[data-theme="light"] .kid-logo-light {
  display: block;
}

/* Footer's background is always dark regardless of site theme, so it
   always needs the light-text logo variant. */
.kid-footer .kid-logo-dark {
  display: block;
}
.kid-footer .kid-logo-light {
  display: none;
}

.kid-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.kid-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.kid-nav a {
  font: 600 14px/1 Inter;
  color: var(--kid-text-body);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kid-nav a:hover,
.kid-nav a.is-active {
  color: var(--kid-accent-deep);
}

.kid-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kid-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--kid-radius-pill);
  background: var(--kid-surface-soft);
  border: 1px solid var(--kid-border-soft);
  width: 236px;
}
.kid-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 13px/1 Inter;
  color: var(--kid-text-body);
  width: 100%;
}
.kid-search svg {
  flex-shrink: 0;
  color: var(--kid-text-faint);
}

.kid-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--kid-radius-pill);
  border: 1px solid transparent;
  background: transparent;
}
.kid-theme-toggle:hover {
  border-color: var(--kid-border-soft);
  background: var(--kid-surface-soft);
}

.kid-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--kid-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--kid-text-body);
  flex-shrink: 0;
}
.kid-search-toggle:hover {
  border-color: var(--kid-border-soft);
  background: var(--kid-surface-soft);
}
.kid-header.is-search-open .kid-search-toggle {
  border-color: var(--kid-border);
  background: var(--kid-surface-soft);
  color: var(--kid-accent-deep);
}

.kid-nav-scrim {
  display: none;
}

.kid-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--kid-radius-pill);
  border: 1px solid var(--kid-border-soft);
  background: transparent;
  color: var(--kid-text-body);
  flex-shrink: 0;
}
.kid-nav-toggle:hover {
  border-color: var(--kid-border);
  background: var(--kid-surface-soft);
}
.kid-nav-toggle .icon-close {
  display: none;
}
.kid-header.is-nav-open .kid-nav-toggle .icon-open {
  display: none;
}
.kid-header.is-nav-open .kid-nav-toggle .icon-close {
  display: block;
}

.kid-nav-cta {
  display: none;
}

/* Ticker */
.kid-ticker {
  background: var(--kid-footer-bg);
  overflow: hidden;
}
.kid-ticker-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
}
.kid-ticker-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font: 600 10.5px/1 Inter;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.kid-ticker-live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(54, 226, 24);
  animation: kid-pulse 1.6s ease-in-out infinite;
}
.kid-marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: kid-marquee var(--kid-tick, 64s) linear infinite;
}
.kid-marquee-track:hover {
  animation-play-state: paused;
}
.kid-ticker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.kid-ticker-item .coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  background-size: cover;
  background-position: center;
}
.kid-ticker-item .sym {
  font: 700 12px/1 Inter;
  color: #fff;
}
.kid-ticker-item .price {
  font: 600 12px/1 Inter;
  color: rgba(255, 255, 255, 0.85);
}
.kid-ticker-item .chg {
  font: 600 12px/1 Inter;
}

@keyframes kid-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes kid-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.kid-footer {
  background: var(--kid-footer-bg);
  color: rgba(255, 255, 255, 0.78);
  padding-top: 64px;
}
.kid-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr 0.8fr 0.8fr;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kid-footer h4 {
  color: #fff;
  font: 600 12px/1 Inter;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kid-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* wp_nav_menu() (used when a menu is assigned in the Customizer) wraps
   each link in <li class="menu-item">, unlike the plain <a> fallback
   markup — reset the list styling and let gap handle the item's own
   spacing so both cases look identical. */
.kid-footer-col li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kid-footer-col a {
  font: 400 13px/1 Inter;
  color: rgba(255, 255, 255, 0.78);
}
.kid-footer-col a:hover {
  color: var(--kid-accent);
}
.kid-footer-tagline {
  font: 400 13px/1.6 Inter;
  color: rgba(255, 255, 255, 0.6);
  max-width: 260px;
  margin-top: 12px;
}
.kid-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.kid-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}
.kid-footer-social a:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent);
}
.kid-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font: 400 11.5px/1 Inter;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
}
.kid-footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}
.kid-footer-bottom a:hover {
  color: var(--kid-accent);
}
.kid-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.kid-footer-legal li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Author card (author.php)
   ========================================================================== */

.kid-author-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--kid-surface);
  border: 1px solid var(--kid-border);
  border-radius: var(--kid-radius-md);
  padding: 32px 36px;
  margin-bottom: 32px;
}
.kid-avatar-lg {
  width: 200px;
  height: auto;
  align-self: stretch;
  border-radius: var(--kid-radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.kid-author-hero-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}
.kid-author-hero-info h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.kid-author-hero-role {
  font: 600 12px/1 Inter;
  letter-spacing: 0.4px;
  color: var(--kid-accent-deep);
}
.kid-author-hero-info p {
  font: 400 14px/1.6 Inter;
  color: var(--kid-text-body);
  max-width: 56ch;
}
.kid-author-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.kid-author-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--kid-border-soft);
  color: var(--kid-text-body);
}
.kid-author-social a:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}
.kid-author-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.kid-author-hero-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.kid-author-hero-stats span:first-child {
  font: 700 24px/1 Inter;
  color: var(--kid-text);
}
.kid-author-hero-stats span:last-child {
  font: 600 10px/1 Inter;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kid-text-faint);
}

/* ==========================================================================
   Cards / grids / pagination / breadcrumb
   ========================================================================== */

.kid-grid {
  display: grid;
  gap: 24px;
}
.kid-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.kid-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.kid-card {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid var(--kid-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--kid-surface);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}
.kid-card:hover {
  transform: translateY(-2px);
  border-color: rgba(247, 147, 26, 0.5);
}
.kid-card-media {
  position: relative;
  height: 45%;
  flex-shrink: 0;
  background: var(--kid-surface-soft);
  overflow: hidden;
}
.kid-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kid-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.kid-card-cat {
  font: 600 10.5px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--kid-accent-deep);
}
.kid-card-title {
  font: 600 17px/1.3 Inter;
  color: var(--kid-text);
}
.kid-card-title:hover {
  color: var(--kid-accent-deep);
}
.kid-card-excerpt {
  margin: 0;
  font: 400 13px/1.55 Inter;
  color: var(--kid-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kid-card-meta {
  margin-top: auto;
  padding-top: 8px;
  font: 300 11.5px/1 Inter;
  color: var(--kid-text-faint);
}

.kid-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 12.5px/1 Inter;
  color: var(--kid-text-faint);
  padding: 20px 0;
}
.kid-breadcrumb a {
  color: var(--kid-text-faint);
}
.kid-breadcrumb a:hover {
  color: var(--kid-accent-deep);
}
.kid-breadcrumb .sep {
  opacity: 0.5;
}

.kid-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.kid-pagination a,
.kid-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--kid-border);
  background: var(--kid-surface);
  font: 600 12.5px/1 Inter;
  color: var(--kid-text-body);
  transition: border-color 0.15s ease;
}
.kid-pagination .current {
  background: var(--kid-accent);
  color: #fff;
  border-color: transparent;
}
.kid-pagination a:hover {
  border-color: var(--kid-accent);
}

/* Mobile filter modal trigger/scrim/panel-head — inert above the
   max-width: 960px breakpoint where .kid-filter-panel just sits inline
   (see that media query for the actual bottom-sheet treatment). */
.kid-filter-toggle,
.kid-filter-scrim,
.kid-filter-panel-head {
  display: none;
}

/* Sidebar Kategori / Tag filter widget */
.kid-sidebar-filter {
  border: 1px solid var(--kid-border);
  border-radius: var(--kid-radius-md);
  padding: 22px 24px;
}
.kid-sidebar-filter h3 {
  font: 600 13px/1 Inter;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--kid-text);
  margin-bottom: 14px;
}
/* Custom checkbox row (Klasifikasi) — the native checkbox stays in the
   markup for real semantics/keyboard support/no-JS form submit, just
   visually hidden; a styled box + SVG checkmark stand in for it, toggled
   purely via :checked sibling selectors (no JS needed for the visuals). */
.kid-checkbox-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--kid-border);
  background: var(--kid-surface-soft);
  font: 700 12px/1 Inter;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kid-text-body);
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.kid-checkbox-row + .kid-checkbox-row {
  margin-top: 8px;
}
.kid-checkbox-row input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.kid-checkbox-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--kid-border);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.kid-checkbox-box svg {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.kid-checkbox-row input:checked ~ .kid-checkbox-box {
  background: var(--kid-accent);
  border-color: var(--kid-accent);
}
.kid-checkbox-row input:checked ~ .kid-checkbox-box svg {
  opacity: 1;
}
.kid-checkbox-row:has(input:checked) {
  background: rgba(247, 147, 26, 0.14);
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}
.kid-checkbox-row input:focus-visible ~ .kid-checkbox-box {
  outline: 2px solid var(--kid-accent);
  outline-offset: 2px;
}

.kid-tag-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.kid-tag-scroll .kid-tag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 Inter;
  padding: 7px 12px;
  border-radius: var(--kid-radius-pill);
  border: 1px solid var(--kid-border);
  color: var(--kid-text-body);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.kid-tag-scroll .kid-tag-chip input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.kid-tag-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--kid-border);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.kid-tag-scroll .kid-tag-chip:has(input:checked),
.kid-tag-scroll .kid-tag-chip:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}
.kid-tag-scroll .kid-tag-chip:has(input:checked) .kid-tag-dot {
  background: var(--kid-accent);
  border-color: var(--kid-accent);
}
.kid-tag-scroll .kid-tag-chip input:focus-visible ~ .kid-tag-dot {
  outline: 2px solid var(--kid-accent);
  outline-offset: 2px;
}

/* Ad slot */
.kid-ad-slot {
  border: 1px dashed var(--kid-border);
  border-radius: var(--kid-radius-md);
  padding: 28px;
  text-align: center;
  color: var(--kid-text-faint);
  font: 500 12px/1 Inter;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Hero + "Berita Terbaru" list stack vertically as two separate full-width
   blocks (confirmed from the prototype: the wrapping <section> is
   flex-direction:column — they are NOT side by side). */
.kid-hero-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 0 0;
}

.kid-hero-slider {
  position: relative;
}
.kid-hero-slide {
  position: relative;
  height: 460px;
  border-radius: var(--kid-radius-md);
  overflow: hidden;
  background: var(--kid-surface);
  display: none;
  grid-template-columns: 1.02fr 1fr;
  align-items: stretch;
}
.kid-hero-slide.is-active {
  display: grid;
}

/* Arrows are pinned to the slider's edges (not per-column), matching the
   prototype — the prev arrow naturally sits over the image side, next
   over the text panel's edge. Hover-revealed, like the prototype's
   --hero-arrow-op custom property. */
.kid-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 72px;
  border: 0;
  border-radius: var(--kid-radius-sm);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s ease;
}
.kid-hero-slider:hover .kid-hero-arrow,
.kid-hero-arrow:focus-visible {
  opacity: 1;
}
.kid-hero-arrow-prev {
  left: 6px;
}
.kid-hero-arrow-next {
  right: 6px;
  color: var(--kid-text);
}

/* Instagram-Stories-style progress segments: the active slide's bar fills
   left-to-right over the auto-advance duration (kept in sync with
   AUTO_ADVANCE_MS in hero-slider.js — see the comment there), past
   slides show fully filled, upcoming slides stay empty. */
.kid-hero-progress {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kid-hero-progress-item {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--kid-border);
  cursor: pointer;
  overflow: hidden;
}
.kid-hero-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--kid-accent);
}
.kid-hero-progress-item.is-filled .kid-hero-progress-fill {
  width: 100%;
}
.kid-hero-progress-item.is-active .kid-hero-progress-fill {
  animation: kid-hero-progress-fill 7000ms linear forwards;
}
@keyframes kid-hero-progress-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.kid-hero-media {
  position: relative;
  height: 100%;
  background: var(--kid-surface-soft);
}
.kid-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kid-hero-content {
  padding: 34px 56px 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: var(--kid-surface);
}
.kid-hero-content h1 {
  font: 700 34px/1.18 Inter;
  letter-spacing: -0.85px;
  color: var(--kid-text);
}
.kid-hero-content p {
  font: 400 15.5px/1.6 Inter;
  color: var(--kid-text-body);
  max-width: 52ch;
}
.kid-hero-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kid-hero-author img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.kid-hero-author span {
  font: 300 12.5px/1.3 Inter;
  color: var(--kid-text-muted);
}
.kid-hero-author-link {
  color: var(--kid-text-muted);
  font-weight: 700;
}
.kid-hero-author-link:hover {
  color: var(--kid-accent-deep);
}

.kid-hero-list {
  border-top: 1px solid var(--kid-divider);
  padding-top: 18px;
}
.kid-hero-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kid-divider);
  margin-bottom: 6px;
}
.kid-hero-list-head h2 {
  font: 700 16px/1.2 Inter;
}
.kid-hero-list-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
}
.kid-hero-list-item {
  display: flex;
  gap: 14px;
  padding: 15px 0;
}
.kid-hero-list-grid > :nth-child(-n + 3) {
  border-bottom: 1px solid var(--kid-divider);
}
.kid-hero-list-num {
  font: 700 20px/1 Inter;
  color: var(--kid-border);
  flex-shrink: 0;
}

/* ==========================================================================
   Market table + panel
   ========================================================================== */

.kid-market-table {
  border: 1px solid var(--kid-border);
  border-radius: var(--kid-radius-md);
  overflow: hidden;
}
/* The row grid's columns can only shrink so far before the price/%/cap
   figures overlap or clip — past that point the table scrolls horizontally
   (each row shares the same min-width, so columns stay aligned) instead of
   squeezing illegibly. */
.kid-market-table-scroll {
  overflow-x: auto;
}
.kid-market-row {
  display: grid;
  grid-template-columns: 32px 1.6fr 1fr 0.8fr 0.8fr 0.8fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--kid-divider);
  min-width: 640px;
}
.kid-market-row:hover {
  background: var(--kid-surface-soft);
}
.kid-market-row.head span {
  font: 600 10.5px/1 Inter;
  color: var(--kid-text-faint);
}
.kid-market-row .coin-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kid-market-row .coin-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kid-divider);
  background-size: cover;
  background-position: center;
}
.kid-market-row span {
  font: 600 13.5px/1 Inter;
  color: var(--kid-text);
  text-align: right;
}

.kid-market-panel {
  background: var(--kid-footer-bg);
  border-radius: var(--kid-radius-lg);
  padding: 20px;
  color: #fff;
}
.kid-market-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.kid-market-selectors {
  display: flex;
  gap: 8px;
}

/* Custom dropdown (replaces a native <select>, whose open-state popup
   can't be restyled cross-browser — this stays themed in both the
   closed toggle and the open menu). See assets/js/dropdown.js. */
.kid-dropdown {
  position: relative;
}
.kid-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--kid-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 600 12px/1 Inter;
  cursor: pointer;
}
.kid-dropdown-toggle:hover,
.kid-dropdown.is-open .kid-dropdown-toggle {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
}
.kid-dropdown-toggle svg {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.kid-dropdown.is-open .kid-dropdown-toggle svg {
  transform: rotate(180deg);
}

/* Fixed dark colors, not theme tokens: this component currently only
   lives inside .kid-market-panel, whose background is --kid-footer-bg
   (always dark, unlike the rest of the page it wouldn't flip to white
   in light mode) — --kid-surface would turn white there and clash. */
.kid-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgb(17, 35, 53);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--kid-radius-sm);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  z-index: 20;
}
.kid-dropdown:not(.is-open) .kid-dropdown-menu {
  display: none;
}
.kid-dropdown-menu li {
  padding: 8px 10px;
  border-radius: 6px;
  font: 600 12px/1 Inter;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  white-space: nowrap;
}
.kid-dropdown-menu li:hover {
  background: rgba(255, 255, 255, 0.08);
}
.kid-dropdown-menu li[aria-selected="true"] {
  background: var(--kid-accent);
  color: #fff;
}
.kid-market-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  margin-top: 24px;
}
.kid-market-chart-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--kid-radius-md);
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font: 400 13px/1.6 Inter;
  padding: 20px;
}
.kid-market-chart-box.is-mounted {
  padding: 0;
}
.kid-market-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kid-market-stat {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--kid-radius-md);
  padding: 18px;
}
.kid-market-stat .label {
  font: 600 10.5px/1 Inter;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.kid-market-stat .value {
  font: 700 20px/1.3 Inter;
  color: #fff;
  margin-top: 8px;
}
.kid-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 10px;
}
.kid-progress > span {
  display: block;
  height: 100%;
  background: var(--kid-accent);
}

/* ==========================================================================
   Coin channel hero panel (Bitcoin/Altcoin channel pages) — ported from
   the actual Bitcoin Channel prototype markup, distinct from the
   homepage's .kid-market-panel (different source page, different layout:
   price+icon is the FIRST stat card inside the stats column here, not a
   separate heading above the chart).
   ========================================================================== */

.kid-coin-panel-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}
.kid-coin-panel-header p {
  margin: 0;
  font: 400 14.5px/1.6 Inter;
  color: var(--kid-text-body);
}
.kid-coin-panel-header .kid-market-selectors {
  justify-self: end;
}

.kid-coin-chart-grid {
  background: rgb(8, 21, 34);
  border-radius: var(--kid-radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Coin-picker + interval-picker row — only the Altcoin channel has this
   (Bitcoin channel is single-coin, no picker needed); own class so
   Bitcoin's markup can skip straight to .kid-coin-chart-row. */
.kid-coin-chart-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.kid-coin-chart-row {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 18px;
  align-items: stretch;
}
.kid-coin-chart-box {
  position: relative;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  background: rgb(11, 26, 42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font: 400 12px/1.6 Inter;
  padding: 0 40px;
}
.kid-coin-chart-box.is-mounted {
  padding: 0;
}
.kid-coin-stats-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kid-coin-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
}
.kid-coin-stat-card.is-grow {
  flex: 1;
}
.kid-coin-stat-card .label {
  font: 600 10.5px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: rgb(158, 217, 255);
}
.kid-coin-stat-card .value {
  font: 600 22px/1.2 Inter;
  color: #fff;
  margin-top: 6px;
}
.kid-coin-price-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kid-coin-price-card .coin-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.kid-coin-price-card .price {
  display: block;
  font: 600 20px/1.1 Inter;
  color: #fff;
}
.kid-coin-price-card .change {
  display: block;
  font: 600 12px/1 Inter;
  margin-top: 4px;
}

@media (max-width: 800px) {
  .kid-coin-panel-header {
    grid-template-columns: 1fr;
  }
  .kid-coin-chart-row {
    grid-template-columns: 1fr;
  }
  .kid-coin-chart-box {
    height: 280px;
  }

  /* The fixed 280px stats sidebar next to the chart has nowhere to go on
     a narrow screen (it was crushing the chart column down to a couple of
     pixels) — stack chart above stats, and let the stats go back to being
     a row (wrapped) now that they're not confined to a 280px column. */
  .kid-market-body {
    grid-template-columns: 1fr;
  }
  .kid-market-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .kid-market-stat {
    flex: 1 1 130px;
  }
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.kid-newsletter {
  position: relative;
  background: rgb(158, 80, 10);
  border-radius: var(--kid-radius-md);
  box-shadow: 0 22px 52px rgba(190, 105, 20, 0.23);
  overflow: hidden;
  padding: 42px 44px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 40px;
  align-items: center;
  margin: 48px auto;
}
.kid-newsletter::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(255, 214, 140, 0.28) 0%,
    rgba(255, 214, 140, 0) 70%
  );
  pointer-events: none;
}
.kid-newsletter > * {
  position: relative;
}
.kid-newsletter h2 {
  color: #fff;
  font: 600 34px/1.2 Inter;
  letter-spacing: -0.7px;
}
.kid-newsletter p {
  font: 400 14.5px/1.6 Inter;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 12px;
  max-width: 56ch;
}
.kid-newsletter-form {
  background: var(--kid-surface);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kid-newsletter-form label {
  font: 600 11px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--kid-text-muted);
}
.kid-newsletter-form input {
  height: 46px;
  padding: 0 14px;
  border-radius: var(--kid-radius-sm);
  border: 1px solid var(--kid-border);
  outline: 0;
  font: 400 14px/1 Inter;
  background: var(--kid-surface);
  color: var(--kid-text);
}
.kid-newsletter-form button {
  height: 46px;
  border-radius: var(--kid-radius-sm);
  border: 0;
  background: var(--kid-accent);
  color: #fff;
  font: 600 13px/1 Inter;
  transition: transform 0.15s ease;
}
.kid-newsletter-form button:hover {
  transform: translateY(-1px);
}
.kid-newsletter-form .fine-print {
  font: 400 11px/1.5 Inter;
  color: var(--kid-text-faint);
}
.kid-newsletter-form .form-msg {
  font: 600 12px/1.4 Inter;
}
.kid-newsletter-form .form-msg[data-state="error"] {
  color: var(--kid-neg);
}
.kid-newsletter-form .form-msg[data-state="success"] {
  color: var(--kid-pos);
}

@media (max-width: 720px) {
  .kid-newsletter {
    grid-template-columns: 1fr;
    padding: 32px;
  }
}

/* ==========================================================================
   Article (single) + sidebar
   ========================================================================== */

.kid-article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  padding: 8px 0 40px;
}
.kid-article-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.kid-article-header h1 {
  font: 700 34px/1.25 Inter;
  letter-spacing: -0.6px;
}
.kid-article-dek {
  font: 400 17px/1.6 Inter;
  color: var(--kid-text-body);
}
.kid-article-hero-img {
  border-radius: var(--kid-radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--kid-surface-soft);
  margin: 24px 0;
}
.kid-article-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kid-article-body {
  font: 400 16px/1.8 Inter;
  color: var(--kid-text-body);
}
.kid-article-body h2 {
  font: 700 22px/1.35 Inter;
  margin: 32px 0 14px;
  scroll-margin-top: 90px;
}
.kid-article-body p {
  margin: 0 0 18px;
}
.kid-article-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--kid-accent);
  background: var(--kid-surface-soft);
  font: 500 italic 18px/1.5 Inter;
  color: var(--kid-text);
}

/* Single infografis: image pinned on one side, title/excerpt/body on the
   other — makes better use of a wide desktop viewport than stacking a
   short piece of content in one centered column. Text is left-aligned
   throughout here (title through tags), so unlike the old centered-hero
   layout there's no alignment mode switch between the header and the
   body prose. */
.kid-infografis-layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 48px;
  align-items: start;
}
.kid-infografis-media {
  aspect-ratio: 3/4;
  border-radius: var(--kid-radius-md);
  overflow: hidden;
  background: var(--kid-surface-soft);
}
.kid-infografis-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kid-infografis-caption {
  font: 400 13px/1.6 Inter;
  color: var(--kid-text-faint);
  margin-top: 14px;
}
/* Same top offset as .kid-article-sidebar's sticky column — clears the
   sticky site header so the image doesn't scroll out from under it while
   the (often taller) text column keeps going. */
.kid-infografis-media-col {
  position: sticky;
  top: 96px;
  align-self: start;
}

/* Sidebar cards on single articles (author/share/TOC/tags) — ported from
   the News Article prototype's <aside data-sidebar>: sticky column of
   bordered cards, each with a small uppercase eyebrow label, gap:16px
   between cards (not each card's own margin-bottom). */
.kid-article-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
.kid-sidebar-card {
  background: var(--kid-surface);
  border: 1px solid var(--kid-border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kid-sidebar-card-label {
  font: 600 10.5px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--kid-text-faint);
}

.kid-author-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.kid-author-card img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.kid-author-card .info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kid-author-card .name {
  font: 600 14px/1.2 Inter;
  color: var(--kid-text);
}
.kid-author-card .name:hover {
  color: var(--kid-accent-deep);
}
.kid-author-card .role {
  font: 400 11.5px/1.3 Inter;
  color: var(--kid-text-faint);
}
.kid-author-card .meta {
  font: 300 11px/1.3 Inter;
  color: var(--kid-text-faint);
}

.kid-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kid-share-row button,
.kid-share-row a {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--kid-border-soft);
  color: var(--kid-text-body);
  background: transparent;
}
.kid-share-row button:hover,
.kid-share-row a:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}

/* Visible "Tersalin!" confirmation on the copy-link button — a title
   attribute alone only shows on hover, so it's invisible right after
   the click that actually needs feedback. */
.kid-copy-feedback {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--kid-text);
  color: var(--kid-canvas);
  font: 600 11px/1 Inter;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 5;
}
.kid-copy-feedback.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.kid-sidebar-toc a {
  font: 600 13px/1.5 Inter;
  color: var(--kid-text-body);
}
.kid-sidebar-toc a:hover {
  color: var(--kid-accent-deep);
}

.kid-sidebar-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kid-sidebar-tag-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--kid-radius-pill);
  background: var(--kid-surface-soft);
  border: 1px solid var(--kid-border-soft);
  font: 600 11.5px/1 Inter;
  color: var(--kid-text-body);
}
.kid-sidebar-tag-chip:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}

.kid-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   Homepage news tabs ("Ruang Redaksi") — CSS-only: radio + label, no JS.
   Header: title block + a ~33%-wide 3-up segmented tab switcher on the
   same row. Body per active tab: one large image-overlay featured card
   (2fr) + a compact headline list with a "more" link (1fr).
   ========================================================================== */

.kid-tabs-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kid-news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.kid-news-head h2 {
  font-size: 28px;
  margin-top: 6px;
}
.kid-news-head p {
  font: 400 14px/1.6 Inter;
  color: var(--kid-text-body);
  margin-top: 4px;
}

.kid-tabs-nav {
  flex: 0 0 clamp(240px, 33%, 340px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.kid-tabs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 9px;
  background: var(--kid-surface-soft);
  color: var(--kid-text-muted);
  font: 600 13px/1 Inter;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.kid-tabs-panel {
  display: none;
}
#kid-tab-kid_bitcoin:checked ~ .kid-news-head .kid-tabs-btn-kid_bitcoin,
#kid-tab-kid_altcoin:checked ~ .kid-news-head .kid-tabs-btn-kid_altcoin,
#kid-tab-kid_forecast:checked ~ .kid-news-head .kid-tabs-btn-kid_forecast {
  background: var(--kid-accent);
  color: #fff;
}
#kid-tab-kid_bitcoin:checked ~ .kid-tabs-panel-kid_bitcoin,
#kid-tab-kid_altcoin:checked ~ .kid-tabs-panel-kid_altcoin,
#kid-tab-kid_forecast:checked ~ .kid-tabs-panel-kid_forecast {
  display: block;
}

.kid-news-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* No aspect-ratio here — .kid-news-body's align-items:stretch already
   makes this column match the list column's height, and a FIXED
   aspect-ratio fights that: when the stretched height doesn't match what
   16/9 implies for this column's width, the browser resolves it by
   recomputing WIDTH from the aspect ratio instead, overflowing this grid
   item past its own 2fr track into the list column next to it (visible
   once the list got tall enough — at 5 items — to diverge from the
   image's natural ratio, worse at narrower desktop widths where that
   divergence is proportionally larger). Just stretch to the row's height
   and let object-fit:cover on the image crop whatever comes out. */
.kid-news-featured {
  position: relative;
  border-radius: var(--kid-radius-md);
  overflow: hidden;
  background: var(--kid-surface-soft);
}
/* Direct-child combinator, not a plain descendant selector — the featured
   thumbnail is a direct child of .kid-news-featured, but the small author
   avatar (.kid-news-featured-meta img) lives several levels deeper inside
   it. A descendant selector here has the same specificity as
   .kid-news-featured-meta img's; being earlier in the file it only lost
   the tie on width/height/border-radius (so the avatar was still sized
   right), not on position/inset — pinning the avatar to the top-left
   corner of the card image instead of next to the author's name. */
.kid-news-featured > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kid-news-featured-body {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(
    180deg,
    rgba(5, 13, 27, 0) 0%,
    rgba(5, 13, 27, 0.55) 55%,
    rgba(5, 13, 27, 0.92) 100%
  );
}
.kid-news-featured-cat {
  font: 600 10.5px/1 Inter;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: rgb(255, 196, 120);
}
.kid-news-featured-title {
  font: 600 24px/1.3 Inter;
  color: #fff;
}
.kid-news-featured-title:hover {
  color: rgb(255, 196, 120);
}
.kid-news-featured-excerpt {
  font: 400 13.5px/1.55 Inter;
  color: rgba(255, 255, 255, 0.82);
}
.kid-news-featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kid-news-featured-meta img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.kid-news-featured-meta span {
  font: 300 11.5px/1 Inter;
  color: rgba(255, 255, 255, 0.6);
}

.kid-news-list-label {
  display: block;
  margin-bottom: 14px;
  font: 600 11px/1 Inter;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kid-text-muted);
}
.kid-news-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kid-divider);
}
.kid-news-list-item .cat {
  font: 600 10px/1 Inter;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kid-accent-deep);
}
.kid-news-list-item .headline {
  font: 600 13px/1.35 Inter;
  color: var(--kid-text);
}
.kid-news-list-item .time {
  font: 300 10.5px/1 Inter;
  color: var(--kid-text-faint);
}
.kid-news-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font: 600 12px/1 Inter;
  color: var(--kid-accent-deep);
}

@media (max-width: 960px) {
  .kid-news-body {
    grid-template-columns: 1fr;
  }
  .kid-tabs-nav {
    flex-basis: 100%;
  }
  /* The featured card overlays its title/excerpt/meta on a fixed 16:9 image
     crop — fine on desktop where the 2fr column gives it width to breathe,
     but on a narrow mobile column a full-length Indonesian headline plus
     excerpt doesn't fit that short a box and gets clipped by the parent's
     overflow:hidden (title text cut off at the top edge). Below the
     breakpoint, stack image-then-text in normal flow instead of overlaying,
     so the card grows to fit whatever the headline needs. */
  .kid-news-featured {
    aspect-ratio: auto;
    background: none;
    overflow: visible;
  }
  /* Direct-child combinator, not a plain descendant selector — the featured
     thumbnail is a direct child of .kid-news-featured, but the small author
     avatar (.kid-news-featured-meta img) lives several levels deeper inside
     it. A descendant selector here has the same specificity as
     .kid-news-featured-meta img's, and being later in the file would win
     the tie and blow the 28px avatar up to full card width. */
  .kid-news-featured > img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: var(--kid-radius-md);
    display: block;
  }
  .kid-news-featured-body {
    position: static;
    inset: auto;
    padding: 14px 2px 0;
    background: none;
  }
  .kid-news-featured-title {
    color: var(--kid-text);
  }
  .kid-news-featured-excerpt {
    color: var(--kid-text-body);
  }
  .kid-news-featured-meta span {
    color: var(--kid-text-muted);
  }
}

/* ==========================================================================
   Infografis grid + lightbox
   ========================================================================== */

/* Homepage carousel: horizontal-scroll strip, fixed-width cards, hover-only
   overlay reveal — matches the prototype's translateX carousel closely
   enough without replicating its exact JS shift state. Archive grids use
   .kid-infografis-tile inside a normal .kid-grid instead (see below). */
.kid-infografis-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.kid-infografis-carousel::-webkit-scrollbar {
  display: none;
}
.kid-infografis-carousel .kid-infografis-tile {
  flex: 0 0 clamp(240px, 32vw, 428px);
  scroll-snap-align: start;
}

/* Hover-reveal overlay — matches both the homepage carousel and the
   Infografis Channel archive grid in the prototype (neither shows the
   date/title/description until hover). */
.kid-infografis-tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--kid-radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--kid-surface-soft);
  border: 1px solid transparent;
}
.kid-infografis-tile:hover {
  border-color: rgba(247, 147, 26, 0.55);
}
.kid-infografis-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.kid-infografis-tile .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  gap: 8px;
  background: linear-gradient(
    180deg,
    rgba(5, 13, 27, 0) 38%,
    rgba(5, 13, 27, 0.86) 100%
  );
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.kid-infografis-tile:hover .overlay,
.kid-infografis-tile:focus-visible .overlay {
  opacity: 1;
}
.kid-infografis-tile .overlay .date {
  font: 600 10px/1 Inter;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(255, 196, 120);
}
.kid-infografis-tile .overlay .title {
  font: 600 17px/1.3 Inter;
}
.kid-infografis-tile .overlay .desc {
  font: 400 12.5px/1.55 Inter;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kid-carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kid-carousel-nav button {
  width: 44px;
  height: 44px;
  border-radius: var(--kid-radius-sm);
  border: 1px solid var(--kid-border);
  background: var(--kid-surface);
  color: var(--kid-text-body);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kid-carousel-nav button:hover {
  border-color: var(--kid-accent);
  color: var(--kid-accent-deep);
}

.kid-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.kid-lightbox.is-open {
  display: flex;
}
.kid-lightbox-inner {
  max-width: 720px;
}
/* display:table + margin-inline:auto shrink-wraps to the image's own
   rendered size (a portrait infografis never fills the 720px max-width)
   and centers that box — so the overlay/icon below cover the image's
   actual corners, not the wider inner container's. */
.kid-lightbox-media {
  position: relative;
  display: table;
  margin-inline: auto;
}
.kid-lightbox-inner img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--kid-radius-md);
}
.kid-lightbox-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--kid-radius-md);
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* .kid-btn-accent supplies shape/color (it already wins the color:#fff
   fight against the global a:hover rule via its own :hover — two classes
   beats a type+pseudo-class). This just centers it over the image and
   fades it in with the overlay. */
.kid-lightbox-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.kid-lightbox-media:hover .kid-lightbox-overlay,
.kid-lightbox-media:hover .kid-lightbox-link,
.kid-lightbox-link:focus-visible {
  opacity: 1;
}
/* .kid-btn-accent:hover's own translateY(-1px) lift would otherwise
   overwrite the centering transform above — this selector's higher
   specificity keeps it centered on hover too. */
.kid-lightbox-media:hover .kid-lightbox-link,
.kid-lightbox-link:focus-visible {
  transform: translate(-50%, -50%);
}
.kid-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .kid-hero-slide {
    grid-template-columns: 1fr;
    height: auto;
  }
  .kid-hero-media {
    height: 240px;
  }
  /* Desktop's 56px right / 34px left padding clears the next-arrow that
     sits over the image column — on the stacked mobile layout that just
     makes the text column lopsided, so even it out. The heading also
     drops a size: at the full 34px it ran 4-5 lines and dominated the
     card. */
  /* Extra bottom padding reserves room for the progress dots, which stay
     absolutely positioned over the card (see .kid-hero-progress below) so
     they read as part of the box rather than floating on the page below
     it — the button needs to end well clear of where they sit. */
  .kid-hero-content {
    padding: 24px 20px 50px;
    gap: 24px;
  }
  .kid-hero-content h1 {
    font-size: 26px;
    letter-spacing: -0.5px;
  }
  /* The prev/next arrows are hover/focus-revealed (opacity:0 otherwise)
     and there's no touch/swipe handling in hero-slider.js, so on mobile
     they're both invisible AND — since they're positioned by top:50% of
     the whole stacked slide, not just the image — sitting right over the
     heading text as a dead tap zone. The progress dots below are the
     real navigation on mobile; just remove the arrows there. */
  .kid-hero-arrow {
    display: none;
  }
  /* Full-width CTA reads better than a left-aligned pill on a narrow
     column; align-self needs !important to beat the inline
     style="align-self:flex-start" the desktop layout relies on. */
  .kid-hero-content .kid-btn {
    align-self: stretch !important;
  }
  /* Stays absolute (inside the card, like desktop) rather than flowing
     into normal document flow — center it instead of pinning to the
     bottom-right, which made no sense once the slide stacks to a single
     column. The content padding above reserves its clearance from the
     button. */
  .kid-hero-progress {
    left: 0;
    right: 0;
    bottom: 18px;
    justify-content: center;
  }
  .kid-hero-list-grid {
    grid-template-columns: 1fr;
  }
  .kid-hero-list-grid > :nth-child(-n + 3) {
    border-bottom: 0;
  }
  .kid-hero-list-item {
    border-bottom: 1px solid var(--kid-divider);
  }
  .kid-hero-list-item:last-child {
    border-bottom: 0;
  }
  .kid-article-layout {
    grid-template-columns: 1fr;
  }
  .kid-infografis-layout {
    grid-template-columns: 1fr;
  }
  .kid-infografis-media-col {
    position: static;
  }
  .kid-infografis-media {
    max-width: 420px;
    margin-inline: auto;
  }
  /* Below this width the sidebar stacks BELOW the full article body (see
     the grid-template-columns collapse above), so a "jump to section" TOC
     ends up after everything it links to — useless there, so it's hidden
     rather than shown in a spot where it can't do its job. */
  .kid-sidebar-toc {
    display: none;
  }

  /* The archive/search filter sidebar becomes a "Filter" button that opens
     a bottom-sheet modal, instead of just stacking below the whole post
     grid the way it did before (same reasoning as hiding the TOC above —
     buried below the content it's meant to help you narrow). Scoped to
     .kid-filter-panel specifically, not the shared .kid-article-sidebar
     it's also tagged with, so the single-post reading sidebar (author
     card/TOC/share/tags) is untouched and keeps just stacking inline. */
  .kid-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    margin-bottom: 20px;
    border-radius: var(--kid-radius-sm);
    border: 1px solid var(--kid-border);
    background: var(--kid-surface);
    color: var(--kid-text);
    font: 600 13px/1 Inter;
  }
  .kid-filter-toggle:hover {
    border-color: var(--kid-accent);
  }
  .kid-filter-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(5, 13, 27, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.is-filter-open .kid-filter-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .kid-filter-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--kid-surface);
    border: 1px solid var(--kid-border);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 8px 20px 28px;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  body.is-filter-open .kid-filter-panel {
    transform: translateY(0);
  }
  .kid-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    font: 700 13px/1 Inter;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kid-text);
  }
  .kid-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--kid-radius-pill);
    border: 1px solid var(--kid-border);
    background: transparent;
    color: var(--kid-text-body);
  }
  .kid-filter-close:hover {
    border-color: var(--kid-accent);
    color: var(--kid-accent-deep);
  }

  .kid-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kid-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kid-newsletter {
    grid-template-columns: 1fr;
  }

  /* Nav collapses into a hamburger-triggered, full-height drawer sliding
     in from the right. The header row gets its own stacking context above
     the scrim (a sibling outside header-row) — but .kid-nav is nested
     INSIDE header-row, so that alone doesn't stop the fixed, z-indexed
     drawer from painting over header-actions' plain in-flow content
     (search/theme-toggle/close icon) within header-row's own context;
     header-actions needs its own higher z-index for that. */
  .kid-header-row {
    position: relative;
    z-index: 41;
  }
  .kid-header-actions {
    position: relative;
    z-index: 42;
  }
  /* backdrop-filter makes .kid-header itself the containing block for any
     position: fixed descendant (same effect as transform) — with it left
     on, the drawer/scrim below resolve their top/right/bottom against the
     ~72px header box instead of the viewport and collapse to a sliver.
     The frosted-glass effect isn't worth losing the full-height drawer. */
  .kid-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kid-nav-toggle {
    display: inline-flex;
  }
  .kid-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(5, 13, 27, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .kid-header.is-nav-open .kid-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .kid-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(340px, 88vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* Not --kid-header-bg — that's translucent (rgba, 92% opacity),
       meant to be softened by the header's own backdrop-filter blur.
       backdrop-filter is disabled at this breakpoint (see above), so the
       translucency was raw and unmasked — over a bright hero photo, 8%
       see-through page content behind the drawer was clearly visible.
       --kid-surface is a solid rgb() with no alpha, so the drawer is
       actually opaque like a full-height panel should be. */
    background: var(--kid-surface);
    border-left: 1px solid var(--kid-border-soft);
    padding: 90px 28px 28px;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.28);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .kid-header.is-nav-open .kid-nav {
    transform: translateX(0);
    gap: 20px;
  }
  /* The real WP menu wraps each link in <li>, so the flex item is the <li>
     — the <a> inside is still display:inline by default, which makes it
     ignore width:100% and renders its padding as a non-flow-affecting
     decoration instead of real row height, shifting the whole list up. */
  .kid-nav a {
    display: block;
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--kid-border-soft);
    text-transform: none;
    font-size: 14.5px;
  }
  .kid-nav .kid-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    margin-top: 16px;
    border-bottom: 0;
  }

  /* Search collapses into an icon that pops the search bar open as a
     dropdown bar spanning the header width, instead of disappearing. */
  .kid-search {
    display: none;
  }
  .kid-search-toggle {
    display: inline-flex;
  }
  /* position: fixed (not absolute) so this resolves against the viewport
     regardless of which ancestor happens to be `position`-ed — .kid-header
     -actions is itself position: relative (see above), which would
     otherwise make IT the containing block and shrink this popup down to
     the icon cluster's own width instead of the full header width. */
  .kid-header.is-search-open .kid-search {
    display: flex;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px var(--kid-shell-pad);
    border-radius: 0;
    border-width: 0 0 1px;
    background: var(
      --kid-surface
    ); /* same translucency issue as the drawer above — see its comment */
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
    z-index: 41;
  }
  /* The infografis carousel already scrolls by touch (overflow-x:auto +
     scroll-snap on .kid-infografis-carousel) — same reasoning as the hero
     slider's arrows: no real purpose on a touch screen, just controls
     competing with swipe for space in the section header. */
  .kid-carousel-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .kid-grid-3,
  .kid-grid-2 {
    grid-template-columns: 1fr;
  }
  .kid-footer-grid {
    grid-template-columns: 1fr;
  }

  /* Frees up space in the cramped mobile header row — the same CTA link
     reappears inside the nav drawer as .kid-nav-cta instead. */
  .kid-header-cta {
    display: none;
  }
  .kid-nav-cta {
    display: inline-flex;
  }
  .kid-newsletter {
    padding: 24px 20px;
  }

  /* The copyright line + 4 legal links used to just wrap inline — at this
     width that left an orphaned last link on its own row with uneven
     spacing. Stacking both groups deliberately reads cleaner than
     wrap-and-hope. */
  .kid-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    line-height: 1.4;
  }
  .kid-footer-legal {
    gap: 10px;
  }
  .kid-footer h4 {
    margin-bottom: 0px;
  }

  /* The 200px-wide, full-height avatar only works alongside the name/bio
     in a row layout — at this width the card stacks instead, so the
     avatar becomes a full-width banner image up top rather than a
     stretched sliver squeezed next to wrapped text. */
  .kid-author-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .kid-avatar-lg {
    width: 100%;
    height: 240px;
    align-self: auto;
    object-position: top;
  }
  .kid-author-hero-stats {
    justify-content: center;
  }
}

/* ==========================================================================
   About page ("Tentang Kami" block pattern — inc/block-patterns.php)
   ========================================================================== */

.kid-about-page {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 8px 0 20px;
}
.kid-about-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.kid-about-h1 {
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-top: 7px;
}
.kid-about-hero p {
  font: 400 15px/1.65 Inter;
  color: var(--kid-text-body);
  margin-top: 16px;
}
.kid-about-hero-img {
  margin: 0;
}
.kid-about-hero-img img {
  width: 100%;
  height: 280px;
  border-radius: var(--kid-radius-md);
  object-fit: cover;
}

.kid-about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kid-about-stat {
  background: var(--kid-footer-bg);
  border-radius: var(--kid-radius-md);
  padding: 24px;
}
.kid-about-stat-num {
  display: block;
  font: 700 30px/1 Inter;
  color: #fff;
}
.kid-about-stat-label {
  display: block;
  font: 400 12.5px/1.5 Inter;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.kid-about-h2 {
  font-size: 30px;
  letter-spacing: -0.6px;
  margin-top: 7px;
}

.kid-about-principles,
.kid-about-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kid-about-principle {
  background: var(--kid-surface);
  border: 1px solid var(--kid-border);
  border-radius: 10px;
  padding: 26px;
}
.kid-about-principle h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.kid-about-principle p {
  font: 400 13.5px/1.6 Inter;
  color: var(--kid-text-body);
}

.kid-about-team-card {
  background: var(--kid-surface);
  border: 1px solid var(--kid-border);
  border-radius: 10px;
  padding: 26px;
  transition: border-color 0.15s ease;
}
.kid-about-team-card:hover {
  border-color: rgba(247, 147, 26, 0.5);
}
.kid-about-team-card a {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
}
.kid-about-team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.kid-about-team-name {
  display: block;
  font: 700 16px/1.3 Inter;
  color: var(--kid-text);
}
.kid-about-team-role {
  display: block;
  font: 400 12.5px/1.3 Inter;
  color: var(--kid-text-faint);
  margin-top: 2px;
}

@media (max-width: 960px) {
  .kid-about-hero {
    grid-template-columns: 1fr;
  }
  .kid-about-hero-img img {
    height: 220px;
  }
  .kid-about-stats,
  .kid-about-principles,
  .kid-about-team {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .kid-about-stats,
  .kid-about-principles,
  .kid-about-team {
    grid-template-columns: 1fr;
  }
}