/* ============================================================
   /michis/: Megara and Rojo, in adoption (2026-10-20).
   Light, like the homepage. Tokens, type, bar, footer, buttons,
   the hero grid and the quote band come from site.css; this
   sheet holds only what exists here. Nothing on the page moves.
   ============================================================ */

/* no motion anywhere on this page, as on /bio/ */
.michis-page, .michis-page *, .michis-page *::before, .michis-page *::after{ transition:none !important; animation:none !important; }

/* hero: the text column and, in the photo's place, the pair (beside the text on a wide screen, under it on a phone) */
.michis-hero h1{ font-size:clamp(2.6rem,1rem + 4.8vw,4.9rem); }
.michis-hero .lede{ max-width:34ch; }

/* the address under each button: a sentence, the address in the site's mono with the mail links' signal line */
.michis-mail{ margin:1.4rem 0 0; overflow-wrap:anywhere; }
p.michis-mail a{ font-family:var(--mono); text-decoration-line:none; border-bottom:2px solid var(--signal); padding-bottom:.1rem; }
p.michis-mail a:hover{ color:var(--signal); }

/* the pair: Megara and Rojo side by side at every width, each a 4:5 photo (at most 280 px wide), the site's card
   (a top rule), the name, a small label and one line */
.michis-duo{ display:grid; grid-template-columns:repeat(2, minmax(0, 280px)); gap:clamp(.9rem,2vw,1.4rem); padding-bottom:var(--hero-pad-bottom); }
.michi-card{ margin:0; min-width:0; }
.michi-card img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; background:var(--img-ground); }
.michi-card .card{ margin-top:.8rem; padding-top:.7rem; }
.michi-card h2{ font-size:clamp(1.25rem,1rem + 1vw,1.7rem); margin-bottom:.5rem; }
.michi-card .michi-label{
  display:inline-block; margin:0 0 .5rem; padding:.25rem .5rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink);
}
.michi-card .card p:last-child{ font-size:.9rem; }

/* every photo of the pair and the gallery is a link to its large file; the viewer below opens it in place */
a.zoom{ display:block; cursor:zoom-in; }

/* the request (v2 and its addenda): right after the hero, on haze, so the page's grounds alternate (paper, haze, stage
   for the quote band, paper, haze for the gallery, paper). The Google Form itself, embedded with the page. Both
   "Quiero adoptar" links land here and focus with them; the section itself draws no focus ring */
.michis-request h2{ max-width:16ch; }
.michis-request:focus{ outline:none; }
.michis-request-lede{ color:var(--mute); max-width:52ch; margin:0; }
.request{ max-width:760px; margin:1.6rem 0 2rem; }
.request-open{ margin:0 0 .6rem; text-align:right; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.request-open a{ color:var(--mute); }
/* as tall as the form's first page, so it shows with no inner scrollbar. A narrower frame wraps more, so each step
   covers the narrowest window it serves. Measured after a real load on 2026-10-20 (window → frame → the page's
   height): 320 → 280 → 1682; 360 → 320 → 1476; 699 → 659 → 1160; 700 → 660 → 1160; 800 and 1200 → 760 → 1128 */
.request-frame{ display:block; width:100%; height:1490px; border:0; background:var(--haze); }
@media (max-width:359px){ .request-frame{ height:1694px; } }
@media (min-width:700px){ .request-frame{ height:1172px; } }

/* their story and four facts, as chips that are labels, not filters: no pointer, no hover */
.michis-text{ font-size:clamp(1.1rem,1rem + .5vw,1.3rem); line-height:1.55; max-width:52ch; margin:0; text-wrap:pretty; }
.michis-chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:1.8rem 0 0; padding:0; }
.michis-chips li{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink); padding:.5rem .85rem;
}

/* the gallery: justified rows, as on /fotos/. Every photo keeps its own shape; --r is its width over its height */
.michis-gallery{ --row:240px; display:flex; flex-wrap:wrap; gap:1.4rem .9rem; list-style:none; margin:2rem 0 0; padding:0; }
.michis-gallery::after{ content:""; flex-grow:1000000; }
.michis-gallery li{ flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row)); min-width:0; }
.michis-gallery figure{ margin:0; }
.michis-gallery img{ width:100%; height:auto; background:var(--img-ground); }
.michis-gallery figcaption{
  font-family:var(--mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); margin-top:.5rem;
}
@media (max-width:560px){ .michis-gallery{ --row:130px; gap:1.1rem .6rem; } }

/* the end of the page, after the gallery: the button back up to the request, and the mail line. No second form */
.michis-end{ padding:clamp(2.5rem,6vw,4rem) 0; }
.michis-end .michis-mail{ margin-top:1.2rem; }

/* the photo viewer (addendum 4): a native dialog on the stage, the same in both modes, as the /fotos/ lightbox is.
   The large photo fits the window; its alt is the caption; Cerrar at the top, the arrows at the sides */
.viewer{
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; padding:0; border:0;
  background:var(--stage); color:var(--on-stage);
}
.viewer[open]{ display:grid; grid-template-rows:auto minmax(0,1fr); }
.viewer::backdrop{ background:var(--backdrop); }
.viewer :focus-visible{ outline-color:var(--signal-on-dark); }
.viewer-top{ display:flex; justify-content:flex-end; margin:0; padding:.8rem; }
.viewer-close, .viewer-nav{
  background:var(--scrim-control); color:var(--on-stage); border:1px solid var(--rule-dk); cursor:pointer;
}
.viewer-close{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:.7rem 1rem; }
.viewer-close:hover, .viewer-nav:hover{ background:var(--signal-fill); border-color:var(--signal-fill); color:var(--on-signal-fill); }
.viewer-figure{
  margin:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  padding:0 clamp(.75rem,6vw,5rem) 1.2rem;
}
.viewer-img{ display:block; max-width:100%; max-height:calc(100dvh - 9rem); width:auto; height:auto; object-fit:contain; }
.viewer-caption{ max-width:60ch; text-align:center; font-size:.95rem; line-height:1.45; color:var(--mute-dk); }
.viewer-nav{ position:absolute; top:50%; width:3rem; height:3rem; margin-top:-1.5rem; display:grid; place-items:center; font-size:1.6rem; line-height:1; }
.viewer-prev{ left:.6rem; }
.viewer-next{ right:.6rem; }
/* on a phone the arrows sit at the bottom corners, under the caption */
@media (max-width:560px){
  .viewer-nav{ top:auto; bottom:.6rem; margin-top:0; }
  .viewer-figure{ padding-bottom:4.4rem; }
  .viewer-img{ max-height:calc(100dvh - 12rem); }
}