.yha-card{--ya-ink:#352d2a;--ya-accent:#754632;--ya-line:#dfcfb6;box-sizing:border-box;position:relative;display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:7px 22px;align-items:center;border:1px solid var(--ya-line);border-radius:10px;background:#f5eddf;color:var(--ya-ink);padding:15px 22px;font-family:system-ui,sans-serif;isolation:isolate;container-type:inline-size}
.yha-card *{box-sizing:border-box}.yha-label{grid-column:1/-1;font:600 9px/1.5 system-ui,sans-serif;letter-spacing:.11em;color:#765c48}.yha-art{align-self:end;position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0}.yha-art:before{content:"";position:absolute;inset:20% 0 0;border-radius:60% 60% 8% 8%;background:#e9d6b5;z-index:-1}.yha-portrait{display:block;width:100%;height:100px;object-fit:contain;object-position:center bottom}.yha-copy{min-width:0}.yha-title{display:block;font:400 24px/1.14 Georgia,serif;letter-spacing:-.035em;text-wrap:balance}.yha-accent{display:block;color:var(--ya-accent);font-style:italic}.yha-description{font:12px/1.6 system-ui,sans-serif;color:#6c5e52;margin:7px 0 0;max-width:57ch}.yha-cta{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:fit-content;max-width:100%;border:1px solid #704735;border-radius:5px;padding:10px 12px;background:#704735;color:#fffaf1;font:600 11px/1.4 system-ui,sans-serif;text-decoration:none;white-space:normal}.yha-cta:hover{background:#523224;color:white}.yha-cta:focus-visible{outline:3px solid #a77b36;outline-offset:4px}.yha-pending{cursor:default}.yha-signature{display:block;font:italic 17px/1.3 Georgia,serif;color:#754632;margin-top:12px}
.yha-archive{grid-template-columns:minmax(0,1fr) 85px;gap:12px;padding:20px;align-items:start;min-height:0}.yha-archive .yha-art{grid-column:2;grid-row:2;align-self:start}.yha-archive .yha-portrait{height:90px}.yha-archive .yha-copy{grid-column:1;grid-row:2}.yha-archive .yha-title{font-size:24px}.yha-archive .yha-cta{grid-column:1/-1;margin-top:2px}
.yha-reader{grid-template-columns:49px minmax(0,1fr) auto;padding:12px 16px;gap:5px 13px}.yha-reader .yha-label{font-size:8px}.yha-reader .yha-portrait{height:49px}.yha-reader .yha-title{font-size:18px}.yha-reader .yha-description{font-size:11px;margin-top:3px;max-width:65ch}.yha-reader .yha-cta{font-size:10px;padding:8px 10px}
.yha-trending{grid-template-columns:37px minmax(0,1fr);padding:12px 14px;gap:5px 10px;border-radius:7px}.yha-trending .yha-label{font-size:7px;letter-spacing:.08em}.yha-trending .yha-portrait{height:37px}.yha-trending .yha-title{font-size:17px;line-height:1.25}.yha-trending .yha-cta{grid-column:2;padding:0;border:0;background:none;color:#754632;text-decoration:underline;text-underline-offset:3px;font-size:10px;justify-content:start}.yha-trending .yha-cta:hover{color:#352d2a}
@media(max-width:600px){.yha-home{grid-template-columns:65px minmax(0,1fr);padding:13px 15px;gap:7px 14px}.yha-home .yha-portrait{height:75px}.yha-home .yha-title{font-size:22px}.yha-home .yha-cta{grid-column:2;padding:8px 11px}.yha-home .yha-description{font-size:11px}.yha-reader{grid-template-columns:40px minmax(0,1fr);gap:5px 10px;padding:11px 13px}.yha-reader .yha-portrait{height:43px}.yha-reader .yha-title{font-size:17px}.yha-reader .yha-cta{grid-column:2;background:none;color:#754632;border:0;padding:0;justify-content:start;text-decoration:underline}.yha-archive{padding:16px;grid-template-columns:minmax(0,1fr) 65px}.yha-archive .yha-title{font-size:22px}.yha-archive .yha-portrait{height:75px}}


/* Reuse the existing slot's placement and spacing without a second frame. */
.hps-slot.yha-host{padding:0;border:0;background:transparent;isolation:auto}.hps-slot.yha-host:after{display:none}.hps-archive.yha-host{display:block}.hymn-grid .hps-slot.hps-archive{align-self:start;height:auto}.hps-archive.yha-host .yha-card{height:auto}.yha-card{overflow-wrap:anywhere}.yha-home .yha-label,.yha-reader .yha-label{max-width:100%}
.home-main>.hps-home:first-child{margin:0 0 25px;width:100%}.hps-home.hps-house .hps-copy,.hps-reader.hps-house .hps-copy{min-width:0;grid-column:2}.hps-home.hps-house .hps-link,.hps-reader.hps-house .hps-link{grid-column:3}
@media(max-width:540px){.hps-home.hps-house .hps-link,.hps-reader.hps-house .hps-link{grid-column:2}.yha-home .yha-cta{min-height:40px}}

/* Measure each slot so archive columns and list view adapt without reloading. */
.hps-slot.yha-host{container-type:inline-size;container-name:yha-slot}
.hymn-grid[data-layout] .hps-slot.yha-host{padding:0}
.yha-compact-title{display:none}
/* Compact columns keep the headline beside the portrait and body full width. */
@container yha-slot (max-width:419px){
 .hps-slot.yha-host .yha-archive{grid-template-columns:44px minmax(0,1fr);padding:18px;gap:10px 12px;min-height:0;align-content:start}
 .yha-archive .yha-art{grid-column:1;grid-row:2;align-self:center}
 .yha-archive .yha-portrait{height:48px}
 .yha-archive .yha-copy{display:contents}
 .yha-archive .yha-title,.yha-archive .yha-signature{display:none}
 .yha-archive .yha-compact-title{display:block;grid-column:2;grid-row:2;font:400 21px/1.2 Georgia,serif;letter-spacing:-.025em;overflow-wrap:normal}
 .yha-archive .yha-description{grid-column:1/-1;grid-row:3;margin:0;font-size:12px}
 .yha-archive .yha-cta{grid-column:1/-1;grid-row:4;margin:0;min-height:40px}
}
@media(min-width:768px){.yha-home .yha-accent{display:inline}.yha-home .yha-title{text-wrap:normal}}
@container yha-slot (min-width:420px){
 .hps-slot.yha-host .yha-archive{grid-template-columns:76px minmax(0,1fr);gap:10px 18px;min-height:0;align-items:center}
 .yha-archive .yha-art{grid-column:1;grid-row:2;align-self:center}
 .yha-archive .yha-copy{grid-column:2;grid-row:2}
 .yha-archive .yha-accent{display:inline}
 .yha-archive .yha-title{text-wrap:normal}
 .yha-archive .yha-cta{grid-column:2;grid-row:3;margin:0}
 .yha-archive .yha-signature{display:none}
}
@container yha-slot (min-width:620px){
 .hps-slot.yha-host .yha-archive{grid-template-columns:76px minmax(0,1fr) auto;gap:6px 20px;padding:16px 20px;min-height:0;height:auto;align-items:center}
 .yha-archive .yha-art{grid-column:1;grid-row:2;align-self:center}
 .yha-archive .yha-portrait{height:76px}
 .yha-archive .yha-copy{grid-column:2;grid-row:2}
 .yha-archive .yha-title{text-wrap:normal}
 .yha-archive .yha-accent{display:inline}
 .yha-archive .yha-cta{grid-column:3;grid-row:2;margin:0}
 .yha-archive .yha-signature{display:none}
}

/* Sponsor cards retain their established design and take their natural height. */
.hps-slot.hps-archive .hps-copy{min-width:0}.hps-slot.hps-archive .hps-link{max-width:100%;white-space:normal;min-height:40px}
/* Natural-height archive cards with stronger portraits and calmer attribution. */
.yha-archive .yha-label{font:500 9px/1.5 system-ui,sans-serif;letter-spacing:.025em;color:#876c56}
@container yha-slot (max-width:419px){
 .hps-slot.yha-host .yha-archive{grid-template-columns:56px minmax(0,1fr);padding:20px;gap:12px;align-content:start}
 .yha-archive .yha-portrait{height:62px}
 .yha-archive .yha-compact-title{font-size:21px;line-height:1.2}
 .yha-archive .yha-description{line-height:1.6}
}
/* The advert inside Trending Hymns follows the list's two-line rhythm. */
.hps-trending.yha-host{margin:0 0 17px;padding:13px 0 14px;border:0;border-top:1px solid var(--line,#e9e1d7);border-bottom:1px solid var(--line,#e9e1d7);border-radius:0;background:transparent;overflow:visible}
.yha-trending{grid-template-columns:40px minmax(0,1fr);gap:2px 13px;padding:0;border:0;border-radius:0;background:transparent}
.yha-trending .yha-art{grid-column:1;grid-row:1/3;align-self:start}
.yha-trending .yha-art:before{display:none}
.yha-list-badge{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:#f4eee2;color:#9a7338;font:500 10px/1 system-ui,sans-serif}
.yha-trending .yha-copy{grid-column:2;grid-row:1}
.yha-trending .yha-title{font:400 16px/1.4 Georgia,serif;letter-spacing:0;text-wrap:normal}
.yha-trending .yha-cta{grid-column:2;grid-row:2;justify-content:start;padding:0;border:0;border-radius:0;background:transparent;color:#856345;font:500 10px/1.5 system-ui,sans-serif;min-height:24px;text-decoration:none}
.yha-trending .yha-cta:hover{color:#49352b;text-decoration:underline}
@media(max-width:767px){.yha-card .yha-cta,.hps-slot .hps-link,.hps-slot.hps-archive .hps-link{min-height:44px}}

.hps-slot.hps-archive:not(.yha-host){container-type:inline-size;container-name:hps-slot}
@container hps-slot (max-width:419px){
 .hps-slot.hps-archive .hps-label{margin-bottom:12px}
 .hps-slot.hps-archive .hps-content{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 12px;align-items:center;flex:0}
 .hps-archive .hps-mark,.hps-archive .hps-logo{grid-column:1;grid-row:1;width:38px;height:38px}
 .hps-archive .hps-copy{display:contents}
 .hymn-grid[data-layout] .hps-archive .hps-copy>strong{grid-column:2;grid-row:1;font-size:21px;line-height:1.2}
 .hymn-grid[data-layout] .hps-archive .hps-copy>.hps-name{font-size:18px}
 .hps-slot.hps-archive .hps-copy h3{grid-column:1/-1;grid-row:2;font-size:21px;line-height:1.25;margin:0}
 .hps-slot.hps-archive .hps-copy p{grid-column:1/-1;grid-row:3;margin:0;font-size:12px;line-height:1.6}
 .hps-slot.hps-archive .hps-link{grid-column:1/-1;grid-row:4;margin:0;justify-self:start}
 .hps-archive.hps-house .hps-copy p{grid-row:2}
 .hps-archive.hps-house .hps-link{grid-row:3}
}

@media(max-width:767px){.hps-slot.hps-archive .hps-link{min-height:44px}}

/* A separate sponsorship enquiry link; campaign buttons keep their destinations. */
.yhpa-sponsor-tag{display:inline-flex;align-items:center;justify-content:center;position:relative;padding:2px 7px;border:1px solid #d7c6aa;border-radius:20px;background:#fbf7ed;color:#765332;font:500 9px/1.5 system-ui,sans-serif;letter-spacing:0;text-decoration:none;vertical-align:middle;white-space:nowrap}
.yhpa-sponsor-tag:hover{background:#eadcc5;color:#49352a}.yhpa-sponsor-tag:focus-visible{outline:2px solid #754632;outline-offset:3px}
.yhpa-sponsor-tag.yha-list-badge{width:40px;height:40px;padding:0;font-size:8.5px;border:0;border-radius:8px;background:#f4eee2}
/* Grid cards share the hymn row, with their actions anchored at the bottom. */
.hymn-grid:not([data-layout="list"]) .hps-slot.hps-archive{align-self:stretch;height:auto}
.hymn-grid:not([data-layout="list"]) .hps-archive.yha-host .yha-archive{height:100%;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:stretch}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-description{align-self:start}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-cta{align-self:end}
.hymn-grid:not([data-layout="list"]) .hps-archive:not(.yha-host) .hps-content{flex:1}
.hymn-grid:not([data-layout="list"]) .hps-archive:not(.yha-host) .hps-link{align-self:end}
@container yha-slot (min-width:420px){.hymn-grid:not([data-layout="list"]) .hps-archive.yha-host .yha-archive{grid-template-rows:auto minmax(0,1fr) auto}.hymn-grid:not([data-layout="list"]) .yha-archive .yha-copy{align-self:center}}
@container hps-slot (max-width:419px){.hymn-grid:not([data-layout="list"]) .hps-archive:not(.yha-host) .hps-content{grid-template-rows:auto auto minmax(0,1fr) auto}.hymn-grid:not([data-layout="list"]) .hps-archive.hps-house .hps-content{grid-template-rows:auto minmax(0,1fr) auto}.hymn-grid:not([data-layout="list"]) .hps-archive .hps-copy p{align-self:start}}
/* One About-page placement replaces the existing invitation, in the same position. */
.hps-about.yha-host{display:block;padding:0;border:0;background:transparent}
.yha-about{grid-template-columns:88px minmax(0,1fr);gap:12px 22px;padding:26px;border-radius:12px}
.yha-about .yha-art{grid-column:1;grid-row:2;align-self:center}.yha-about .yha-portrait{height:96px}.yha-about .yha-copy{grid-column:2;grid-row:2}.yha-about .yha-title{font-size:28px;line-height:1.2}.yha-about .yha-accent{display:inline}.yha-about .yha-cta{grid-column:2;grid-row:3}.yha-about .yha-description{font-size:13px}
.yhpa-about-slot:not(.hps-house):not(.yha-host){display:block;padding:26px}.yhpa-about-slot:not(.hps-house) .hps-label{margin:0 0 14px}.yhpa-about-slot:not(.hps-house) .hps-content{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px 20px;align-items:center}.yhpa-about-slot .hps-logo{width:64px;height:64px}.yhpa-about-slot:not(.hps-house) .hps-copy>strong{font:400 19px/1.4 Georgia,serif}.yhpa-about-slot:not(.hps-house) .hps-copy h3{font:400 27px/1.2 Georgia,serif;margin:7px 0}.yhpa-about-slot:not(.hps-house) .hps-copy p{font:13px/1.7 system-ui,sans-serif;margin:6px 0 0}.yhpa-about-slot:not(.hps-house) .hps-link{grid-column:2;justify-self:start;margin:0;min-height:40px}
@media(max-width:600px){.yha-about{grid-template-columns:56px minmax(0,1fr);gap:12px 16px;padding:20px}.yha-about .yha-portrait{height:68px}.yha-about .yha-title{font-size:23px}.yha-about .yha-description{font-size:12px}.yhpa-about-slot:not(.hps-house):not(.yha-host){padding:20px}.yhpa-about-slot:not(.hps-house) .hps-content{grid-template-columns:42px minmax(0,1fr);gap:12px}.yhpa-about-slot .hps-logo{width:42px;height:42px}.yhpa-about-slot:not(.hps-house) .hps-copy h3{font-size:23px}.yhpa-about-slot:not(.hps-house) .hps-link{min-height:44px}}
.hymn-grid .hps-slot.hps-archive{box-sizing:border-box;min-height:0}
.hymn-grid .hps-archive .hps-content{min-height:0}
@container hps-slot (min-width:420px){
 .hps-slot.hps-archive .hps-content{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px 18px;align-items:center}
 .hps-archive .hps-mark,.hps-archive .hps-logo{grid-column:1;grid-row:1}
 .hps-archive .hps-copy{grid-column:2;grid-row:1}
 .hps-slot.hps-archive .hps-copy>strong,.hps-slot.hps-archive .hps-copy p{max-width:none}
 .hps-slot.hps-archive .hps-link{grid-column:2;grid-row:2;margin:0;justify-self:start;align-self:end}
}
@container hps-slot (min-width:760px){.hps-slot.hps-archive .hps-content{grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto}.hps-slot.hps-archive .hps-link{grid-column:3;grid-row:1;align-self:center}}
/* Sponsor pills replace the old status dot and override hymn-list link styling. */
.hps-slot .hps-label:has(.yhpa-sponsor-tag)::before{content:none;display:none}
.hps-slot a.yhpa-sponsor-tag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:0;width:max-content;max-width:100%;min-width:0;min-height:0;margin:0;padding:2px 7px;border:1px solid #d7c6aa;border-radius:20px;background:#fbf7ed;color:#765332;font:500 9px/1.5 system-ui,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;box-sizing:border-box;vertical-align:middle}
.hps-slot a.yhpa-sponsor-tag:hover{background:#eadcc5;color:#49352a}
.hps-slot a.yhpa-sponsor-tag.yha-list-badge{display:flex;width:40px;height:40px;min-height:40px;padding:0;font-size:8.5px;border:0;border-radius:8px;background:#f4eee2}
.hps-slot.hps-trending .hps-label{line-height:1.5;margin-bottom:6px}

/* Consistent uppercase attribution in every personal ad placement. */
.hps-slot .yha-label{text-transform:uppercase}

/* Give the sponsorship link and developer attribution their own lines. */
.yha-label .yha-attribution{display:block;margin-top:8px;line-height:1.6;letter-spacing:.065em}
.hps-slot .yha-label>a.yhpa-sponsor-tag{display:flex;width:max-content}
/* Archive grid: reserve a footer row so the portrait cannot cover the copy. */
.hymn-grid:not([data-layout="list"]) .hps-archive.yha-host .yha-archive{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:auto auto minmax(74px,1fr);align-items:start;gap:12px;position:relative;overflow:hidden;padding:20px;min-height:250px}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-label{grid-column:1/-1;grid-row:1;width:100%}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-copy{display:block;grid-column:1/-1;grid-row:2;align-self:start;margin:0;min-width:0}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-description{margin:10px 0 0}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-art{grid-column:2;grid-row:3;align-self:end;justify-self:end;position:relative;width:88px;height:94px;margin-bottom:-21px;pointer-events:none}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-portrait{height:94px;width:88px;object-fit:contain;object-position:center bottom}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-art:before{inset:20% 0 0;border-radius:60% 60% 0 0}
.hymn-grid:not([data-layout="list"]) .yha-archive .yha-cta{grid-column:1;grid-row:3;align-self:end;justify-self:start;margin:0;max-width:100%;min-height:40px}
@media(max-width:767px){.hymn-grid:not([data-layout="list"]) .yha-archive .yha-cta{min-height:44px}}

/* Homepage strip: the enquiry badge belongs beside the headline. */
.yha-home .yha-label .yha-attribution{margin-top:0}
.yha-home .yha-heading-row{display:flex;align-items:center;gap:10px;min-width:0}
.yha-home .yha-heading-row .yha-title{flex:1;min-width:0}
.yha-home .yha-heading-row a.yhpa-sponsor-tag{flex:0 0 auto}
/* Trending remains a list row; plain disclosure replaces the Sponsor pill. */
.hps-slot.hps-trending .hps-label{font:500 8px/1.5 system-ui,sans-serif;letter-spacing:.06em;margin:0 0 4px 53px}
.yha-trending .yha-list-badge{font-size:10px}

/* Mobile homepage: full-width copy, then action left and portrait right. */
@media(max-width:600px){
 .hps-slot .yha-home{grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:auto auto minmax(68px,auto);gap:12px 14px;align-items:start;padding:15px;overflow:hidden}
 .yha-home .yha-label{grid-column:1/-1;grid-row:1}
 .yha-home .yha-copy{grid-column:1/-1;grid-row:2;min-width:0}
 .yha-home .yha-heading-row{align-items:flex-start}
 .yha-home .yha-heading-row a.yhpa-sponsor-tag{margin-top:3px}
 .yha-home .yha-title{font-size:22px;line-height:1.2;text-wrap:normal}
 .yha-home .yha-description{font-size:12px;line-height:1.6;margin-top:8px}
 .yha-home .yha-art{grid-column:2;grid-row:3;align-self:end;justify-self:end;width:76px;height:84px;margin-bottom:-16px}
 .yha-home .yha-portrait{width:76px;height:84px;object-fit:contain;object-position:center bottom}
 .yha-home .yha-art:before{inset:20% 0 0;border-radius:60% 60% 0 0}
 .yha-home .yha-cta{grid-column:1;grid-row:3;align-self:end;justify-self:start;max-width:100%;min-height:44px;margin:0;padding:10px 12px}
}

/* Phone header: Sponsor above attribution, with a full-width headline below. */
@media(max-width:600px){
 .hps-slot .yha-home{grid-template-rows:auto auto auto auto minmax(68px,auto);row-gap:10px}
 .yha-home .yha-copy,.yha-home .yha-heading-row{display:contents}
 .yha-home .yha-heading-row a.yhpa-sponsor-tag{grid-column:1/-1;grid-row:1;justify-self:start;margin:0}
 .yha-home .yha-label{grid-row:2}
 .yha-home .yha-title{grid-column:1/-1;grid-row:3;width:100%;margin:0}
 .yha-home .yha-description{grid-column:1/-1;grid-row:4;margin:0}
 .yha-home .yha-art,.yha-home .yha-cta{grid-row:5}
}