/* PHOTOS (2026-11-04): stand-in stock photos (Pexels License, credits in assets/photos/CREDITS.json and /photo-credits/)
   until the original illustrations exist. Kept apart from site.css (owned by the P1 redesign). Rules join site.css's
   existing cascade layers (declared there: reset, tokens, base, layout, components, pages, utilities). */
@layer components{
.photo-credit{font-size:var(--t-xs,12px);line-height:1.3;color:var(--muted)}
.photo-credit a{color:inherit}
/* card photo: bleeds to the card edges above the title; the type icon is dropped when a photo is present */
.card .tphoto{display:block;margin:calc(-1*var(--s4)) calc(-1*var(--s4)) var(--s3);aspect-ratio:3/2;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--mist)}
.card .tphoto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-m,.3s) var(--ease-swell,ease)}
.card:hover .tphoto img{transform:scale(1.03)}
.card.has-photo .ticon{display:none}
.card .photo-credit{display:block;margin-top:var(--s2)}
/* type page hero / guide banner */
.photo-fig{margin:var(--s4) 0 var(--s5)}
.photo-fig picture{display:block;overflow:hidden;border-radius:var(--r-l,24px);aspect-ratio:2/1;background:var(--mist);box-shadow:var(--sh)}
.photo-fig img{display:block;width:100%;height:100%;object-fit:cover}
.photo-fig figcaption{margin-top:var(--s2)}
.photo-fig.banner picture{aspect-ratio:4/1}
/* band of three photos between home sections */
.photo-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0;padding:0;list-style:none}
.photo-band figure{margin:0}
.photo-band picture{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--mist)}
.photo-band img{display:block;width:100%;height:100%;object-fit:cover}
.photo-band figcaption{margin-top:var(--s1)}
@media (max-width:700px){.photo-band{grid-template-columns:1fr 1fr}.photo-band li:nth-child(3){display:none}.photo-fig picture{aspect-ratio:16/9}.photo-fig.banner picture{aspect-ratio:3/1}}
/* /photo-credits/ list */
.credits-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4);padding:0;list-style:none}
.credits-list li{margin:0}
.credits-list picture{display:block;overflow:hidden;border-radius:12px;aspect-ratio:3/2;background:var(--mist)}
.credits-list img{display:block;width:100%;height:100%;object-fit:cover}
.credits-list p{margin:var(--s2) 0 0}
}
@layer pages{
/* home hero: photo under a navy-to-teal shade; the SVG waves (.hero-art) and the copy stay on top */
.hero.has-photo{background:var(--navy)}
.hero .hero-photo,.hero .hero-shade{position:absolute;inset:0;pointer-events:none}
.hero .hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* AA check (2026-11-04): over the photo's brightest pixel (255,242,169) every stop keeps hero text (#fff, #cfe3ee, #bfeee6, #9ff0e3, #cfe0ea) at >= 5.09:1 */
.hero .hero-shade{background:linear-gradient(165deg,rgba(5,28,44,.90) 0,rgba(7,38,58,.87) 40%,rgba(11,60,82,.85) 72%,rgba(10,70,82,.84) 100%)}
.hero.has-photo .hero-art{z-index:1}
.hero.has-photo .hero-in{z-index:2}
.hero .hero-credit{position:absolute;right:var(--s4);bottom:var(--s3);z-index:3;color:#d6e8f0}
.hero .hero-credit a{color:#fff}
}
@media print{.photo-band,.card .tphoto,.photo-fig,.hero .hero-photo{display:none}}
@layer components{
/* /boat-types/ index cards keep their markup order (title first, tests match it); the photo is moved to the top visually */
.card:has(> .tphoto){display:flex;flex-direction:column}
.card:has(> .tphoto)>.tphoto{order:-1}
}