/* Studio (templates/studio.php). Tokens only. */
.studio h2 { margin-top: 0; }

/* Now: Vongfai */
.studio-now { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-4); border-radius: var(--radius); background: var(--color-bg-alt); }
.studio-now-art img { width: 100%; height: auto; border-radius: var(--radius); }
.studio-now h2 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-h1); margin: 0; }
.studio-now h2 a { color: var(--color-text); text-decoration: none; }
.studio-now h2 a:hover { color: var(--color-action); }
.studio-now .eyebrow { margin-bottom: var(--space-2); }
.studio-now-sub { font-family: var(--font-heading); font-size: var(--text-h4); margin: var(--space-1) 0 var(--space-3); }
.studio-now .lead { margin: 0 0 var(--space-3); }
.studio-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }

/* Calendar: month, then one row per item */
.studio-calendar h3 { margin: var(--space-5) 0 0; }
.studio-calendar h3:first-of-type { margin-top: 0; }
.cal-month { font-family: var(--font-body); font-size: var(--text-meta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-1); }
.cal-list { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.cal-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--border); }
.cal-when { grid-column: 1 / -1; }
.cal-when:empty { display: none; }
.cal-what { min-width: 0; }
.cal-project { display: block; }
.cal-status { white-space: nowrap; }
.cal-item.is-progress .cal-status { font-weight: var(--weight-bold); color: var(--color-text); }
.cal-add { grid-column: 1 / -1; font-size: var(--text-sm); }
.cal-item.is-done .cal-what { color: var(--color-text-muted); }
.cal-feed { margin: var(--space-4) 0 0; }

/* Studio notes */
.studio-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(var(--size-card), 1fr)); }
.studio-note { padding: var(--space-4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-line); }
.studio-note figure { margin: 0 0 var(--space-3); }
.studio-note img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.studio-note p { margin: 0 0 var(--space-2); }
.studio-note p:last-child { margin-bottom: 0; }
.studio-pages { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.studio-pages a:only-child { margin-left: auto; }

/* From It Is Well */
.studio-posts { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.studio-posts li { padding: var(--space-3) 0; border-bottom: var(--border); }
.studio-posts .meta { margin: 0 0 var(--space-1); }
.studio-posts a { font-family: var(--font-heading); font-size: var(--text-h4); }

/* Projects: art or a Paper card with the title */
.studio-project-art { display: block; aspect-ratio: var(--ratio-card); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-3); }
.studio-project-art img { width: 100%; height: 100%; object-fit: cover; }
.studio-project-art.is-blank { display: grid; place-items: center; padding: var(--space-3); background: var(--color-bg-alt); font-family: var(--font-display); font-size: var(--text-h4); overflow-wrap: anywhere; letter-spacing: var(--tracking-display); text-align: center; color: var(--color-text); }
.studio-projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-5) var(--space-4); }
.studio-projects .card-title { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.studio-projects .card p { margin: var(--space-1) 0 0; color: var(--color-text-muted); }


@media (min-width: 48rem) {
  .studio-now { grid-template-columns: 2fr 3fr; gap: var(--space-6); padding: var(--space-5); }
  .cal-item { grid-template-columns: 11rem 1fr 6.5rem 7.5rem; }
  .cal-when { grid-column: auto; }
  .cal-when:empty { display: block; }
  .cal-add { grid-column: auto; }
}
