/* Parent screens are compositions inside the available stage, not readers.
   This file deliberately does not target work/article detail views. */
.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact) {
  height: 100%;
  min-height: 0;
  overflow: clip;
  container-type: size;
  container-name: parent-view;
}

.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact) > .view-panel,
.view-home .home-copy,
.view-about .about-copy {
  min-height: 0;
  max-height: 100%;
  overflow: clip;
  scrollbar-gutter: auto;
}

/* Preserve the horizontal shelves even when the viewport is very short.
   The track takes only the space left after the heading and its controls. */
.carino-view:is(.view-works, .view-blog) > .collection-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  gap: clamp(.35rem, 2cqh, 1.6rem);
  padding-block: clamp(.2rem, 2cqh, 1.3rem) 0;
}

:is(.view-works, .view-blog) .collection-track {
  height: auto;
  min-height: 0;
  margin-block: 0;
  padding-block: .2rem .35rem;
  overflow-x: auto;
  overflow-y: hidden;
}

:is(.view-works, .view-blog) .collection-track > :is(.work-card, .post-card) {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
}

:is(.view-works, .view-blog) :is(.work-card__media, .post-card__media) {
  min-height: 0;
}

:is(.view-works, .view-blog) .collection-footer {
  min-height: 2.75rem;
  padding-block: 0;
}

/* HOME retains the garden's whole image; the artwork gives height to the copy. */
.view-home .home-layout {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  overflow: clip;
}

.view-home .home-copy { padding-block: clamp(.2rem, 2cqh, 1.4rem); }
.view-home .home-title { font-size: clamp(4rem, min(11.5vw, 27cqh), 13rem); }
.view-home .home-visual { min-height: 0; height: 100%; }
.view-home .home-visual__frame { min-height: 0; }
.view-home .home-visual img { height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }

/* The portrait has a real height budget. Contain keeps the whole face and body. */
.view-about .about-layout {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  align-items: center;
  gap: clamp(1rem, 5vw, 5rem);
  padding: clamp(.3rem, 3cqh, 3rem) clamp(.3rem, 3vw, 3rem);
}

.view-about .about-portrait {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: clamp(.5rem, 3cqh, 2rem) clamp(.5rem, 2vw, 1.5rem) 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.view-about .about-portrait img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.view-about .portrait-caption { padding: .45rem .1rem; font-size: .6rem; line-height: 1.5; }
.view-about .about-copy { padding: .2rem; max-height: 100%; overflow: clip; }
.view-about .about-copy .view-title { font-size: clamp(1.8rem, min(4.2vw, 12cqh), 4.8rem); }
.view-about .about-copy .view-eyebrow { margin-bottom: clamp(.35rem, 2cqh, 1rem); }
.view-about .about-view__roles { margin-bottom: clamp(.5rem, 2cqh, 1rem); }
.view-about .about-copy .entry-content { font-size: .88rem; line-height: 1.85; }
.view-about .about-copy .entry-content :is(h2, h3) { margin-block: .7em .3em; line-height: 1.4; }
.view-about .about-copy .entry-content > :last-child { margin-bottom: 0; }
.view-about .social-links { margin-top: clamp(.4rem, 2cqh, 1rem); padding-top: clamp(.3rem, 1.6cqh, .8rem); }
.view-about .social-links a { min-height: 2rem; }
.view-about .artist-monogram { min-height: 0; padding: .4rem; }
.view-about .artist-monogram > span { font-size: clamp(2.5rem, 18cqh, 12rem); }
.view-about .artist-monogram small { margin-top: .5rem; font-size: .85rem; }

/* CONTACT is a short invitation plus visible SNS and preparation notes. */
.view-contact .contact-view {
  height: 100%;
  align-content: center;
  gap: clamp(.45rem, 2.3cqh, 1rem);
  padding-block: clamp(.4rem, 3cqh, 2.5rem);
}

.view-contact .view-eyebrow { margin-bottom: clamp(.4rem, 2cqh, 1rem); }
.view-contact .view-title { font-size: clamp(2rem, min(5.2vw, 13cqh), 5.8rem); }
.view-contact .contact-lead { margin-block: clamp(.4rem, 2cqh, 1rem) 0 !important; }
.view-contact .contact-details { padding-block: clamp(.6rem, 3cqh, 1.8rem); gap: clamp(1rem, 4vw, 4rem); }
.view-contact .contact-details h2 { margin-bottom: .5rem; }
.view-contact .contact-details p { margin-bottom: .65rem; }
.view-contact .contact-details .social-links { margin-top: .4rem; padding-top: .3rem; }
.view-contact .contact-details .social-links a { min-height: 2.2rem; }
.view-contact .contact-checklist .view-eyebrow { margin-bottom: .25rem; }
.view-contact .contact-checklist ol { margin: 0; }
.view-contact .contact-checklist li { min-height: clamp(1.8rem, 7cqh, 3.1rem); }
.view-contact .contact-view__privacy { margin: 0; }
.view-contact .entry-content { font-size: .85rem; line-height: 1.8; }
.view-contact .entry-content > :last-child { margin-bottom: 0; }

/* At phone widths the portrait is modest, leaving room for the full biography. */
@media (max-width: 46rem) {
  /* shell.css also styles `ul`; match it so 320px does not create two nav rows. */
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-nav ul.site-nav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view-home .home-layout { grid-template-rows: auto minmax(0, 1fr); }
  .view-home .home-copy { padding: .3rem .2rem 0; }
  .view-home .home-title { font-size: clamp(3.6rem, min(23vw, 20cqh), 6.3rem); }
  .view-home .home-visual { min-height: 0; padding: 0; }
  .view-home .home-visual__caption { min-height: 2rem; font-size: .68rem; }
  .view-home .hero-replay { min-height: 2rem; padding-block: .3rem; }
  .view-home .home-visual--art .home-visual__frame { padding: .6rem; }
  .view-about .about-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 29cqh) auto;
    align-content: center;
    gap: clamp(.6rem, 2cqh, 1.1rem);
    padding: .3rem;
  }
  .view-about .about-portrait { width: min(62%, 14rem); max-width: none; margin-inline: auto; padding-top: .5rem; }
  .view-about .portrait-caption { padding-block: .3rem; font-size: .55rem; }
  .view-about .about-copy .view-title { font-size: clamp(2rem, 8cqh, 3rem); }
  .view-about .about-copy .view-eyebrow { font-size: .57rem; margin-bottom: .4rem; }
  .view-about .about-view__roles { font-size: 1.02rem; margin-bottom: .65rem; }
  .view-about .about-copy .entry-content { font-size: .8rem; line-height: 1.8; }
  .view-about .about-copy .entry-content > p { margin-bottom: .65rem; }
  .view-about .about-copy .entry-content > :last-child { margin-bottom: 0; }
  .view-about .social-links { margin-top: .6rem; padding-top: .4rem; }
  .view-about .social-links a { font-size: .72rem; min-height: 2rem; }
  .view-contact .contact-view { padding: .4rem .3rem; gap: .75rem; }
  .view-contact .view-title { font-size: clamp(2.3rem, 9cqh, 3.6rem); }
  .view-contact .contact-lead { font-size: 1rem !important; line-height: 1.6 !important; }
  .view-contact .contact-details { grid-template-columns: minmax(0, 1fr); padding-block: .9rem; gap: .9rem; }
  .view-contact .contact-details h2 { font-size: 1.1rem; }
  .view-contact .contact-details p { font-size: .79rem; line-height: 1.8; }
  .view-contact .contact-checklist li { min-height: 2rem; font-size: .73rem; }
  .view-contact .contact-view__privacy { font-size: .7rem; }
}

/* Compact phones use a small portrait beside the heading, with body across
   the full width. No paragraph or link is hidden or line-clamped here. */
@media (max-width: 46rem) and (max-height: 44rem) {
  .view-home .home-copy .view-eyebrow { margin-bottom: .35rem; font-size: .5rem; }
  .view-home .home-title { font-size: clamp(3.3rem, 16cqh, 4.5rem); }
  .view-home .home-tagline { margin-block: .25rem .4rem; font-size: .9rem; }
  .view-home .home-view__roles { font-size: .9rem; margin-bottom: .4rem; }
  .view-home .home-view__introduction { font-size: .68rem; line-height: 1.65; }
  .view-home .home-actions { margin-top: .5rem; gap: .5rem; }
  .view-home .home-actions .button { min-height: 2.3rem; padding: .45rem .65rem; gap: .8rem; font-size: .62rem; }
  .view-about .about-layout { display: block !important; padding: .3rem; }
  .view-about .about-portrait { position: absolute; top: .3rem; right: .3rem; width: 31%; height: min(29cqh, 8rem); padding: .3rem .25rem 0; }
  .view-about .portrait-caption { font-size: .5rem; line-height: 1.4; padding-block: .25rem; }
  .view-about .about-copy { padding: 0; }
  .view-about .about-copy .view-heading { min-height: min(29cqh, 8rem); padding-right: 34%; margin-bottom: .5rem; }
  .view-about .about-copy .view-title { font-size: clamp(1.8rem, 8cqh, 2.3rem); margin-bottom: .3rem; }
  .view-about .about-copy .view-eyebrow { font-size: .51rem; margin-bottom: .25rem; }
  .view-about .about-view__roles { font-size: .8rem; line-height: 1.4; margin: 0; }
  .view-about .about-copy .entry-content { font-size: .75rem; line-height: 1.7; }
  .view-about .about-copy .entry-content > p { margin-bottom: .55rem; }
  .view-about .about-copy .entry-content > :last-child { margin-bottom: 0; }
  .view-about .social-links { margin-top: .5rem; padding-top: .25rem; }
  .view-about .social-links a { font-size: .68rem; min-height: 1.8rem; }
  .view-contact .contact-view { gap: .55rem; }
  .view-contact .view-eyebrow { font-size: .53rem; margin-bottom: .3rem; }
  .view-contact .view-title { font-size: 2.6rem; }
  .view-contact .contact-lead { margin-top: .4rem !important; font-size: .88rem !important; }
  .view-contact .contact-details { gap: .65rem; padding-block: .65rem; }
  .view-contact .contact-details h2 { font-size: 1rem; margin-bottom: .35rem; }
  .view-contact .contact-details p { font-size: .72rem; line-height: 1.7; margin-bottom: .4rem; }
  .view-contact .contact-details .social-links { margin-top: .25rem; padding-top: .1rem; }
  .view-contact .contact-details .social-links a { font-size: .7rem; min-height: 1.8rem; }
  .view-contact .contact-checklist li { min-height: 1.75rem; font-size: .68rem; gap: .7rem; }
  .view-contact .contact-view__privacy { font-size: .65rem; }
  .view-contact .entry-content { font-size: .72rem; line-height: 1.6; }
}

/* Landscape and 200%-zoom-equivalent widths retain one compact shell row. */
@media (min-width: 35rem) and (max-height: 30rem) {
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-header { padding: .25rem max(1.1rem, env(safe-area-inset-right)) .2rem max(1.1rem, env(safe-area-inset-left)); }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-header__inner { grid-template-columns: 1fr auto auto; grid-template-areas: none; gap: 1rem; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) :is(.site-brand, .site-nav, .speaker-control) { grid-area: auto; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-brand__name { font-size: 1.8rem; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-nav__list { display: flex; gap: clamp(.5rem, 2vw, 1.2rem); }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-nav a { min-height: 2.25rem; font-size: .6rem; letter-spacing: .05em; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .speaker-control { width: 2.25rem; min-width: 2.25rem; height: 2.25rem; min-height: 2.25rem; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-footer { padding-block: .2rem; }
  body:has(.carino-view:is(.view-home, .view-about, .view-works, .view-blog, .view-contact)) .site-footer a { min-height: 1.8rem; }
  .view-home .home-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; }
  .view-home .home-copy { padding: .1rem .2rem; }
  .view-home .home-title { font-size: clamp(3.2rem, 21cqh, 5rem); }
  .view-home .home-copy .view-eyebrow { font-size: .48rem; margin-bottom: .25rem; }
  .view-home .home-tagline { font-size: .9rem; margin: .3rem 0 .4rem; }
  .view-home .home-view__roles { font-size: .95rem; margin-bottom: .4rem; }
  .view-home .home-view__roles br { display: none; }
  .view-home .home-view__introduction { font-size: .68rem; line-height: 1.6; }
  .view-home .home-actions { margin-top: .55rem; gap: .5rem; }
  .view-home .home-actions .button { min-height: 2.2rem; font-size: .61rem; padding: .45rem .65rem; gap: .8rem; }
  .view-home .home-visual { order: 0; margin: 0; padding: 0; max-width: none; }
  .view-home .home-visual__caption { min-height: 1.7rem; padding-inline: .5rem; font-size: .62rem; gap: .5rem; }
  .view-home .hero-replay { min-height: 1.7rem; padding-block: .25rem; font-size: .56rem; }
  .view-about .about-layout { display: grid !important; grid-template-columns: minmax(0, .65fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr); gap: 1.5rem; padding: .25rem .6rem; }
  .view-about .about-portrait { position: relative; inset: auto; width: 100%; height: 100%; padding: .3rem .5rem 0; }
  .view-about .portrait-caption { font-size: .5rem; padding-block: .3rem; }
  .view-about .about-copy .view-heading { min-height: 0; padding: 0; margin-bottom: .4rem; }
  .view-about .about-copy .view-title { font-size: clamp(1.6rem, 11cqh, 2.2rem); line-height: 1.05; margin-bottom: .25rem; }
  .view-about .about-copy .view-title br { display: none; }
  .view-about .about-copy .view-eyebrow { font-size: .5rem; margin-bottom: .2rem; }
  .view-about .about-view__roles { font-size: .82rem; line-height: 1.3; margin-bottom: .35rem; }
  .view-about .about-copy .entry-content { font-size: .72rem; line-height: 1.65; }
  .view-about .about-copy .entry-content > p { margin-bottom: .4rem; }
  .view-about .about-copy .entry-content > :last-child { margin-bottom: 0; }
  .view-about .social-links { margin-top: .35rem; padding-top: .2rem; }
  .view-about .social-links a { min-height: 1.65rem; font-size: .66rem; }
  .view-contact .contact-view { padding: .15rem .6rem; gap: .4rem; }
  .view-contact .view-eyebrow { font-size: .5rem; margin-bottom: .2rem; }
  .view-contact .view-title { font-size: clamp(2rem, 12cqh, 2.7rem); }
  .view-contact .contact-lead { font-size: .88rem !important; line-height: 1.5 !important; margin-top: .35rem !important; }
  .view-contact .contact-details { grid-template-columns: 1.1fr 1fr; gap: 1.5rem; padding-block: .6rem; }
  .view-contact .contact-details h2 { font-size: 1rem; margin-bottom: .35rem; }
  .view-contact .contact-details p { font-size: .73rem; line-height: 1.6; margin-bottom: .4rem; }
  .view-contact .contact-details .social-links { padding-top: .15rem; margin-top: .25rem; }
  .view-contact .contact-details .social-links a { min-height: 1.8rem; font-size: .68rem; }
  .view-contact .contact-checklist li { min-height: 1.8rem; font-size: .67rem; gap: .65rem; }
  .view-contact .contact-view__privacy { font-size: .64rem; }
}

@media (max-height: 30rem) {
  :is(.view-works, .view-blog) .collection-view .view-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 1.3rem; align-items: center; }
  :is(.view-works, .view-blog) .collection-view .view-eyebrow { grid-column: 1 / -1; margin-bottom: 0; font-size: .5rem; }
  :is(.view-works, .view-blog) .collection-view .view-title { font-size: clamp(1.8rem, 10cqh, 2.4rem); }
  :is(.view-works, .view-blog) .collection-view .view-heading > p:last-child { display: block; margin: 0; font-size: .61rem; line-height: 1.5; }
  :is(.view-works, .view-blog) :is(.work-card__body, .post-card__body) { padding: .4rem 1.6rem .05rem 0; }
  :is(.view-works, .view-blog) :is(.work-card__body, .post-card__body)::after { top: .4rem; }
  :is(.view-works, .view-blog) :is(.work-card__title, .post-card__title) { font-size: .8rem; line-height: 1.35; padding-bottom: .2rem; }
  :is(.view-works, .view-blog) :is(.work-card__number, .post-card__date, .work-card__terms) { font-size: .54rem; }
  :is(.view-works, .view-blog) .collection-track .work-card__number { top: .45rem; }
  :is(.view-works, .view-blog) .work-card__media { padding: .4rem; }
  :is(.view-works, .view-blog) .collection-footer { min-height: 2.2rem; }
  :is(.view-works, .view-blog) .round-button { width: 2.2rem; height: 2.2rem; }
  :is(.view-works, .view-blog) .pagination { min-height: 2.2rem; }
  :is(.view-works, .view-blog) .pagination .page-numbers { min-width: 1.9rem; min-height: 1.9rem; font-size: .65rem; }
}