/* Static-site counterparts of what the design runtime drew with components:
   the wordmark (DS Logo/Wordmark), photo frames (<image-slot>) and a skip link. */

/* Wordmark: Fraunces 600 over Inter 500 caps. Sizes are set inline by the
   wordmark macro, following the DS ratios (caps 0.308x, gap 0.19x). */
.lt-logo{display:inline-flex;align-items:center;text-decoration:none}
.lt-wordmark{display:inline-flex;flex-direction:column;align-items:center}
.lt-wordmark__name{font-family:var(--font-display);font-weight:600;line-height:1;letter-spacing:normal;white-space:nowrap;color:var(--plum)}
.lt-wordmark__sub{font-family:var(--font-body);font-weight:500;line-height:1;text-transform:uppercase;white-space:nowrap;letter-spacing:.335em;text-indent:.335em;color:var(--plum)}

.w-ftr__logo{align-self:flex-start}

/* Fix for warm.css: between 981px and 1240px the footer grid uses max-content
   columns, and the full-row contact block's long sentences were widening them
   past the viewport. inline-size containment keeps it out of the sizing. */
@media (max-width:1240px){.w-ftr__grid>:first-child{contain:inline-size}}

.lt-icon{display:block;flex:none}

/* Photo frames: a real <img> fills the frame; .w-ph holds its place until the
   photo exists, styled like the design's empty image slot. */
:is(.w-photo,.w-who__img,.w-snap__img,.w-cg__img)>:is(img,.w-ph){width:100%;height:100%}
:is(.w-photo,.w-who__img,.w-snap__img,.w-cg__img)>img{display:block;object-fit:cover}
.w-ph{display:flex;align-items:center;justify-content:center;padding:24px;border:1.5px dashed rgba(46,38,34,.3);border-radius:inherit;background:rgba(127,127,127,.08);text-align:center}
.w-ph p{max-width:32ch;font-size:16px;line-height:1.5;font-weight:500;color:var(--muted);overflow-wrap:break-word}

/* Fix for warm.css: the design's <image-slot> had no intrinsic width, but a
   placeholder's caption does, and in the album's auto-minimum grid tracks it
   widened the polaroids (and the story column) past a 375px viewport. */
.w-album>.w-snap{min-width:0}
.w-snap .w-ph{padding:12px}
.w-snap .w-ph p{font-size:14px}
@media (max-width:560px){.w-snap .w-ph{padding:8px}.w-snap .w-ph p{font-size:12px;line-height:1.35}}

/* Where warm.css shrinks a card's photo to a ~90px thumbnail, no caption fits:
   show just the empty frame (the caption is still in the source). */
@media (max-width:900px){.w-cg__img>.w-ph>p{display:none}}

/* Fix for warm.css: below 900px .w-help__photos becomes a row of equal photos.
   Our Caregivers puts its heading in there beside one photo, which squeezed the
   photo to zero width, so stack them instead (warm.css hides it below 560px). */
@media (max-width:900px){
.w-help__photos:has(>.w-stack){flex-direction:column}
.w-help__photos:has(>.w-stack) .w-photo{flex:none;aspect-ratio:3/2}
}
@media (max-width:560px){.w-who__img>.w-ph>p{display:none}}
@media (max-width:359px){.w-snap .w-ph>p{display:none}}

.w-skip{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 20px;border-radius:12px;background:#fff;box-shadow:var(--w-shadow-md);font-weight:600}
.w-skip:focus{top:12px}

/* Contact form: "(optional)" beside a label, and the honeypot field Netlify
   checks for bots, kept out of sight and out of the tab order. */
.w-optional{font-weight:400;color:var(--muted)}
.w-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}