/* Phoenix story, home band, and gallery filter. All classes prefixed .ph- so nothing collides with style.css.
   Colors read the site's existing tokens if present; the fallbacks are placeholders — mapped to the values in style.css. */
:root{
  --ph-ink:var(--ink,#14171A);
  --ph-marsh:var(--marsh,#333E30);
  --ph-blaze:var(--blaze,#C1502E);
  --ph-reed:var(--reed,#8C8259);
  --ph-fog:var(--fog,#EDEAE1);
}
.ph-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ph-story{background:var(--ph-ink);color:var(--ph-fog);padding:72px 0 80px}
.ph-story h2,.ph-story h3,.ph-band h2{font-family:"Anton","Impact",sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
.ph-story h2{font-size:clamp(2.4rem,6vw,4.4rem)}
.ph-sub{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:22px!important}
.ph-story p,.ph-band p{font-family:"Work Sans",system-ui,sans-serif;line-height:1.65;max-width:62ch;margin:0 0 1em}
.ph-lead{font-size:1.2rem;color:#fff}

.ph-intro{display:grid;gap:36px;align-items:center;margin-bottom:84px}
.ph-intro-copy h2{margin-bottom:26px}
.ph-portrait{margin:0}
.ph-portrait img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:2px}
.ph-facts{margin:32px 0 0;display:grid;gap:14px;font-family:"Work Sans",system-ui,sans-serif}
.ph-facts>div{border-left:3px solid var(--ph-blaze);padding-left:14px}
.ph-facts dt{font-weight:700;color:#fff}
.ph-facts dd{margin:2px 0 0;color:var(--ph-fog);opacity:.85}

.ph-pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:84px}
.ph-fig{margin:0;position:relative;overflow:hidden;background:var(--ph-marsh)}
.ph-fig img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(min-width:900px){.ph-fig img{aspect-ratio:1/1}}
.ph-fig figcaption{position:absolute;inset:auto 0 0 0;padding:44px 12px 12px;background:linear-gradient(transparent,rgba(20,23,26,.88));font:500 .9rem/1.35 "Work Sans",system-ui,sans-serif;color:#fff}
.ph-fig figcaption b{display:block;font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:1.15rem;color:var(--ph-blaze);margin-bottom:2px}
.ph-credit{display:block;opacity:.7;font-size:.75rem;margin-top:4px}

.ph-origin{display:grid;gap:26px;align-items:center}
.ph-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:saturate(.85)}

/* Home band */
.ph-band{background:var(--ph-marsh);color:var(--ph-fog);padding:64px 0}
.ph-band-grid{display:grid;gap:30px;align-items:center}
.ph-band-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-band-photos figure{margin:0}
.ph-band-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ph-band h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px;color:#fff}
.ph-btn{display:inline-block;background:var(--ph-blaze);color:#fff;font:600 1rem "Work Sans",system-ui,sans-serif;padding:14px 26px;border-radius:2px;text-decoration:none}
.ph-btn:hover{filter:brightness(1.1)}
.ph-btn:focus-visible,.ph-chip:focus-visible{outline:3px solid var(--ph-reed);outline-offset:3px}

/* Gallery */
.ph-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.ph-chip{font:600 .95rem "Work Sans",system-ui,sans-serif;background:transparent;color:inherit;border:2px solid currentColor;border-radius:999px;padding:8px 18px;cursor:pointer}
.ph-chip[aria-pressed="true"]{background:var(--ph-blaze);border-color:var(--ph-blaze);color:#fff}
.ph-grid{columns:1;column-gap:12px}
.ph-tile{position:relative;margin:0 0 12px;break-inside:avoid;background:var(--ph-marsh)}
.ph-tile[hidden]{display:none}
.ph-tile img{width:100%;height:auto;display:block}
.ph-tile::after{content:"";position:absolute;top:10px;right:10px;width:44px;height:44px;background:url("/assets/logo/logo-192.png") center/contain no-repeat;opacity:.13;pointer-events:none}
.ph-tile figcaption{position:absolute;inset:auto 0 0 0;padding:34px 12px 10px;background:linear-gradient(transparent,rgba(20,23,26,.82));color:#fff;font:500 .88rem/1.3 "Work Sans",system-ui,sans-serif}

@media(min-width:600px){.ph-grid{columns:2}}
@media(min-width:900px){
  .ph-intro{grid-template-columns:1.15fr .85fr;gap:64px}
  .ph-origin{grid-template-columns:.8fr 1.2fr;gap:56px}
  .ph-pairs{gap:14px}
  .ph-band-grid{grid-template-columns:.9fr 1.1fr;gap:56px}
}
@media(min-width:1000px){.ph-grid{columns:3}}

/* grid children must be allowed to shrink below their image's intrinsic width */
.ph-intro>*,.ph-origin>*,.ph-pairs>*,.ph-band-grid>*,.ph-band-photos>*,.ph-strip>*{min-width:0}
.ph-strip li{margin:0}

/* width/height attributes are for layout stability only; let aspect-ratio drive the rendered height */
.ph-strip img,.ph-band-photos img,.ph-tile img{height:auto}
/* stronger caption scrim so the label reads over busy photos */
.ph-fig figcaption{background:linear-gradient(transparent,rgba(20,23,26,.94) 55%)}

/* Instagram link */
.ph-social{display:inline-flex;align-items:center;gap:10px;margin-top:6px;color:var(--ph-fog);font:600 1rem "Work Sans",system-ui,sans-serif;text-decoration:none;border-bottom:2px solid var(--ph-blaze);padding-bottom:3px}
.ph-social:hover{color:#fff}
.ph-social:focus-visible{outline:3px solid var(--ph-reed);outline-offset:4px}
.ph-social--inline{display:flex;width:max-content;margin-top:18px}
.ph-social--dark{color:var(--ph-ink)}
.ph-social--dark:hover{color:var(--ph-blaze)}
.ph-gal-social{margin:0 0 16px;font:500 1rem "Work Sans",system-ui,sans-serif}
.ph-ig-icon{flex:none}