/* "Kibo, últimamente" (/es/novedades, /es-419/novedades, /lately). Loads after landing.css and reuses
   its fonts, tokens, header and footer. After Dia's "The Dia Lately": a dated kicker, one big serif
   title, a short story, the screenshots, and a second tab with the plain store notes.
   Spec: ki-bo workspace specs/2026-11-06-kibo-lately.md. Screenshots stay dark in both themes. */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #FCF6F0;
    --bg-2: #F3ECE4;
    --ink: #17130F;
    --ink-2: #5B544C;
    --ink-3: #6E665E;
    --rule: rgba(23, 19, 15, 0.14);
    --coral: #C2412B;
  }
  .ph { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(255, 255, 255, 0.14) inset, 0 40px 70px -30px rgba(60, 40, 20, 0.45); }
}

.lately { padding: clamp(40px, 6vw, 88px) 0 var(--section); }
.lately .label { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

html:not(.js) .tabs { display: none; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; }
.tabs button {
  appearance: none; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font: 500 0.875rem/1.2 var(--text);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tabs button:not([aria-selected="true"]):hover { color: var(--ink); }

/* Without JS both panels show, one after the other. */
.panel[hidden] { display: none; }
.panel { padding-top: clamp(40px, 6vw, 80px); }

/* One entry per store release, newest first. */
.entry + .entry { margin-top: var(--section); padding-top: var(--section); border-top: 1px solid var(--rule); }
.entry .kicker { color: var(--coral); }
.entry h1, .entry h2.title {
  margin-top: 20px; max-width: 11em;
  font-family: var(--display); font-weight: 340; font-optical-sizing: auto; text-wrap: balance;
  font-size: clamp(3rem, 1.2rem + 6.4vw, 7.4rem); line-height: 0.95; letter-spacing: -0.035em;
}
.story { margin-top: clamp(28px, 3.4vw, 48px); max-width: 38ch; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.story p + p { margin-top: 1em; }

.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 104px); align-items: start; }
.shots figure:nth-child(even) { margin-top: clamp(32px, 5vw, 72px); }
.shots .ph { max-width: 300px; }
.shots .todo {
  display: grid; place-items: center; aspect-ratio: 1206 / 2622; max-width: 300px; padding: 16px; text-align: center;
  border: 1px dashed var(--ink-3); border-radius: 13.5% / 6.3%; font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-3);
}

/* Changes: the curated store notes, one block per release date. */
.release { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 32px 0 40px; border-top: 1px solid var(--rule); }
.release > .label { grid-column: 1 / span 3; padding-top: 6px; }
.release .apps { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.release h3 { font: 500 1.0625rem/1.3 var(--text); }
.release h3 span { margin-left: 8px; font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }
.release ul { margin-top: 14px; border-top: 1px solid var(--rule); }
.release li { padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .release > .label, .release .apps { grid-column: 1 / -1; }
  .release .apps { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
}