/* sites/residents.css — toofan.billubnb.in + tejas.billubnb.in: the arched portrait with a name tag, trait chips, the
   "how I meet guests" speech card, a little cat ID card, likes / dislikes, the photo album and the "meet the other one" card. */
@layer sections {
  /* the next .sheet slides up over the hero by --sheet-r: give the hero that much extra bottom padding (core sites.css fix pending) */
  .site-hero { padding-bottom: calc(var(--space-6) + var(--sheet-r)); overflow-x: clip; }   /* WebKit counts the tilted art card's corners as page overflow */
  @media (min-width: 900px) { .site-hero { padding-bottom: calc(var(--space-7) + var(--sheet-r)); } }

  /* ---- hero portrait --------------------------------------------------------------------------------------------- */
  .res-portrait { position: relative; margin: 0 auto; width: min(100%, 360px); padding-bottom: 22px; }
  .res-portrait__arch { border-radius: 50% 50% var(--arch-r) var(--arch-r) / 40% 40% var(--arch-r) var(--arch-r); }
  .res-portrait__tag { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); }
  .res-portrait__tag span { display: inline-block; padding: .45rem 1.3rem .5rem; border-radius: var(--r-pill); background: var(--sun); color: var(--sun-ink);
    font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em;
    box-shadow: var(--shadow-1); }
  @media (max-width: 899px) { .site-hero--res .site-hero__art { order: -1; width: min(78%, 320px); } .site-hero--res .site-hero__inner { gap: var(--space-5); } }

  /* ---- about --------------------------------------------------------------------------------------------------- */
  .res-about { display: grid; gap: var(--space-6); align-items: start; }
  @media (min-width: 960px) { .res-about { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: var(--space-8); } }
  .res-traits { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
  .res-traits li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: var(--r-pill); background: var(--paper-3);
    border: 1px solid var(--line); font-weight: 800; font-size: .95rem; }
  .res-traits .i { width: 15px; height: 15px; color: var(--sun-deep); }
  .res-bio { font-size: var(--step-0); }
  .res-bio em { font-style: normal; font-weight: 800; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 55%, transparent) 60% 92%, transparent 92%); }
  .res-guests { --ear-bg: var(--blush-soft); margin: var(--space-6) 0 0; padding: var(--space-5); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px; }
  .res-guests figcaption { display: flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .res-guests figcaption .i { width: 18px; height: 18px; }
  .res-guests blockquote { margin: var(--space-2) 0 0; }
  .res-guests blockquote p { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: var(--step-1); line-height: 1.35; }

  /* ---- ID card ----------------------------------------------------------------------------------------------------- */
  .res-side { display: grid; gap: var(--space-5); }
  .idcard { position: relative; padding: var(--space-5); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-1); border-top: 6px solid var(--sun); }
  .idcard__head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
  .idcard__pic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--sun-soft);
    box-shadow: 0 0 0 3px var(--paper-3), 0 0 0 5px var(--sun); }
  .idcard__pic img { width: 100%; height: 100%; object-fit: cover; }
  .idcard__k { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
  .idcard__head strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.6rem; line-height: 1; }
  .idcard dl { margin: 0; display: grid; }
  .idcard dl > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .6rem; padding: .45rem 0; border-top: 1px dashed var(--line-strong); }
  .idcard dt { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-top: .12rem; }
  .idcard dd { margin: 0; font-weight: 700; }
  .idcard dl > div:has(dt.visually-hidden) { grid-template-columns: minmax(0, 1fr); }

  .res-likes { display: grid; gap: var(--space-4); }
  .res-like { padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--sun-soft); }
  .res-like--no { background: var(--paper-3); border: 1px solid var(--line); }
  .res-like h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 var(--space-3); font-size: 1.15rem; }
  .res-like h3 .i { width: 20px; height: 20px; color: var(--err); }
  .res-like--no h3 .i { color: var(--ink-2); }
  .res-like .paws { margin: 0; padding: 0; }

  /* ---- album ---------------------------------------------------------------------------------------------------------- */
  .res-album { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .res-album--1 { grid-template-columns: minmax(0, 360px); }
  .res-album figure { margin: 0; }
  .res-album .arch { border-radius: 50% 50% var(--arch-r) var(--arch-r) / 34% 34% var(--arch-r) var(--arch-r); box-shadow: var(--shadow-1); }
  .res-album figcaption { margin-top: .5rem; font-size: .92rem; color: var(--ink-2); }
  @media (min-width: 900px) { .res-album { grid-template-columns: repeat(4, minmax(0, 1fr)); } .res-album--2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
    .res-album--3 { grid-template-columns: repeat(3, minmax(0, 300px)); } }
  .res-more { margin: var(--space-5) 0 0; }

  /* ---- meet the other resident ----------------------------------------------------------------------------------------- */
  .res-other { --ear-bg: var(--sun-soft); display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); border-radius: var(--r-lg);
    color: var(--ink); text-decoration: none; max-width: 760px; margin-inline: auto; transition: transform var(--dur-2) var(--ease-out); }
  .res-other:hover { transform: translateY(-3px) rotate(-.4deg); }
  .res-other:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
  .res-other__pic { flex: none; width: 112px; border-radius: 50% 50% var(--r-sm) var(--r-sm); }
  .res-other__txt { display: grid; gap: .25rem; min-width: 0; }
  .res-other__txt .eyebrow { margin: 0; }
  .res-other__txt strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: var(--step-2); line-height: 1.05; }
  .res-other__go { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .95rem; }
  .res-other__go .i { width: 18px; height: 18px; }
  @media (max-width: 520px) { .res-other { flex-direction: column; align-items: flex-start; } }
  @media (prefers-reduced-motion: reduce) { .res-other, .res-other:hover { transition: none; transform: none; } }
}