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

/* Now: Vongfai */
.studio-now { --pad: var(--space-4); display: grid; gap: var(--space-5); align-items: center; padding: var(--pad); border-radius: calc(var(--radius) + var(--pad)); background: var(--color-bg-alt); } /* concentric with the art's corners */
/* the sisters riding the Nak, faint behind the text and cropped by the card, like the footer art */
.studio-now { position: relative; overflow: hidden; }
.studio-now > :not(.studio-now-bg) { position: relative; }
.studio-now-bg { position: absolute; right: calc(-1 * var(--space-6)); top: 50%; transform: translateY(-50%); height: 130%; aspect-ratio: 1; opacity: 0.1; background: var(--color-text); -webkit-mask: var(--ink-mask) center / contain no-repeat; mask: var(--ink-mask) center / contain no-repeat; pointer-events: none; }
.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; font-size: var(--text-sm); color: var(--color-text-muted); }


@media (min-width: 48rem) {
  .studio-now { --pad: var(--space-5); grid-template-columns: 2fr 3fr; gap: var(--space-6); }
  .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; }
}