/* Candidate spacing/type audit 2026-10-20, based on approved style 2.0.1.
   Load LAST, after video-experience/header-footer/search. Review before adoption.
   Preserve Open Door colors, font families, hero composition, 18px base type,
   imagery, targets and motion ownership. No hidden content or transforms. */
:root{
  --candidate-card-inset:clamp(1.25rem,2vw,1.75rem);
  --candidate-card-gap:clamp(1.5rem,2.5vw,2rem);
}
/* Normal body stays 1rem (18px baseline). Metadata has the same readable floor. */
main p{line-height:1.6}
main .meta,main .eyebrow{font-size:1rem;line-height:1.5}
main .section-heading{margin-bottom:2rem}
main .section-heading h2,main .featured-production>h2{line-height:1.2}
/* Explicit image/copy separation avoids depending on collapsed paragraph margins. */
.media-card .media-card-copy{padding:1.5rem var(--candidate-card-inset) 1.25rem}
.media-card .media-card-copy>.eyebrow{margin:0 0 .75rem;font-size:1rem;line-height:1.45}
.media-card .media-card-copy>h3{margin:0;font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);line-height:1.28;letter-spacing:-.015em;overflow-wrap:anywhere}
.media-card .media-card-copy>.text-link{margin-top:1rem;padding-block:.35rem;line-height:1.45;min-height:44px}
.media-card .media-card-copy>.meta{margin:.75rem 0 0}
/* Retain larger featured titles, but provide long sermons room to breathe. */
.media-card-featured .media-card-copy>h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);line-height:1.24}
.hero .media-card .media-card-copy>h3{font-size:clamp(1.4rem,1.05rem + 1.15vw,1.95rem);line-height:1.24}
.media-grid,.site-result-list{column-gap:var(--candidate-card-gap);row-gap:2.25rem}
.featured-production>h2+.media-card{margin-top:1.5rem}
.featured-production{margin-bottom:0}
/* Intro + inserted card grids are one visual group, with a distinct next section. */
#watch>.section:has(+section>.media-grid){padding-bottom:2rem}
#watch>section:has(>.media-grid){padding-bottom:1.5rem}
.video-library>h1+p,.video-watch h1+p{margin-top:1.25rem}
.video-watch .video-player{margin-top:1.5rem}
.catalog-controls{column-gap:1.25rem;row-gap:1.25rem;margin-block:2rem}
.catalog-controls label{line-height:1.5}
.catalog-controls label+input,.catalog-controls label+select{margin-top:.5rem}
.catalog-pagination{margin-block:2.5rem;gap:.75rem}
@media(max-width:767px){
  main .section-heading{margin-bottom:1.5rem}
  .media-grid,.site-result-list{row-gap:1.75rem}
  .media-card .media-card-copy{padding-top:1.35rem}
  .catalog-controls{margin-block:1.5rem}
}
@media(max-width:560px){
  /* Single-column cards retain readable text rather than shrinking to fit. */
  .media-card .media-card-copy>h3{font-size:1.3rem}
  .media-card-featured .media-card-copy>h3,.hero .media-card .media-card-copy>h3{font-size:1.5rem}
  .media-card .media-card-copy>.text-link{margin-top:.9rem}
  .featured-production>h2+.media-card{margin-top:1.25rem}
}
/* Transform-only entrances preserve full opacity and document flow at every frame. */
:root{--entrance-duration:900ms;--entrance-distance:28px}
.watch-description{max-width:70ch;font-size:1.1rem;line-height:1.65}
@media(max-width:767px),(pointer:coarse){:root{--entrance-duration:720ms;--entrance-distance:18px}}
@media(prefers-reduced-motion:reduce){:root{--entrance-duration:0ms;--entrance-distance:0px}}

/* Featured homily: verified liturgical label, then publication, below the card. */
.featured-homily-meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.25rem;row-gap:.35rem;margin-top:1rem;font-size:1rem;line-height:1.5;color:inherit}
.featured-homily-meta>span,.featured-homily-meta>time{min-width:0;overflow-wrap:anywhere}

.featured-homily-meta .homily-meta-short{display:none}
@media(max-width:560px){
 .featured-homily-meta{column-gap:.65rem}
 .featured-homily-meta .homily-meta-long{display:none}
 .featured-homily-meta .homily-meta-short{display:inline}
}

/* Guest biographies follow the player as a distinct readable section. */
.video-watch .watch-guests{margin-block:2rem}
.video-watch .watch-guests>h2{margin-bottom:1.25rem}
.video-watch .watch-guests>div+div{margin-top:1.5rem}

/* Approved Home revision: one copy/action pattern for each gallery intro. */
.gallery-intro{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.gallery-intro>div{min-width:0;max-width:48rem}.gallery-intro>.button{flex:none}
.gallery-intro p{margin-bottom:0}
.support-grid{grid-template-columns:minmax(0,1fr)}
.support-grid p{max-width:75ch}
.church-online{overflow:clip;background:linear-gradient(135deg,var(--stone),var(--paper) 65%)}
.church-online-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;padding-block:1.5rem}
.church-online-photo{position:relative;isolation:isolate;min-width:0}
.church-online-photo::before{content:'';position:absolute;inset:-1rem 2rem 1rem -1rem;border:1px solid var(--gold);border-radius:18px;z-index:-1}
.church-online-photo::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,transparent 65%,#0e1a242b);pointer-events:none}
.church-online-photo picture,.church-online-photo img{display:block;width:100%;height:auto;border-radius:14px}
.church-online-copy{position:relative;margin-left:-2rem;padding:clamp(1.5rem,3vw,2.5rem);background:var(--paper);border-radius:12px;box-shadow:0 12px 35px #14202b0d}
.church-online-copy .eyebrow,.newsletter-row .eyebrow{color:var(--slate);font-weight:700;margin-top:0}
.newsletter-row{background:var(--nave);color:white}
.newsletter-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3rem;align-items:center}
.newsletter-row .eyebrow,.newsletter-row .meta{color:var(--mist)}
.newsletter-row button:disabled{background:var(--stone);color:var(--slate)}
@media(max-width:767px){.gallery-intro{display:block}.gallery-intro>.button{margin-top:1.25rem}.church-online-grid,.newsletter-grid{grid-template-columns:1fr;gap:1.5rem}.church-online-copy{margin:-1rem .5rem 0;padding:1.5rem}.church-online-photo::before{inset:-.5rem 1rem .5rem -.5rem}}
@media(prefers-reduced-motion:reduce){.church-online-photo{transform:none!important}}
/* Navigation and production subnavigation are undecorated at rest; body links remain underlined. */
nav a{ text-decoration:none }
nav a:hover,nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.2em}

/* Contact follows the shared form controls and tokens; required fields remain schema-owned. */
.sje-contact-form{display:grid;gap:1.2rem}.sje-contact-form .contact-field{display:grid;gap:.4rem}.sje-contact-form label{font-weight:650}.sje-contact-form input,.sje-contact-form textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;padding:.8rem;border:1px solid currentColor;border-radius:.3rem;background:var(--paper,#fff);color:inherit}.sje-contact-form [aria-invalid=true]{border-color:#9e2929}.sje-contact-form .form-error{color:#9e2929;margin:0}.sje-contact-form button{justify-self:start}.contact-preview-notice{padding:1rem;background:#f3ead4;border-left:3px solid #a67c2e}.contact-form-result{padding:1.25rem;background:#f3ead4}.sje-contact-form input:focus-visible,.sje-contact-form textarea:focus-visible{outline:3px solid #9b752d;outline-offset:3px}.sje-contact-form input:disabled,.sje-contact-form textarea:disabled{opacity:.75}
.sje-contact-form label>span{display:inline}.sje-contact-form label>.sr-only{position:absolute}
.sje-contact-form .contact-field>label{display:block}

/* Holistic spacing candidate; append to design-refinements.css after all existing rules.
   Open Door 2.0.1 remains the approved baseline. No fixed content heights. */
:root{
  --rhythm-band:clamp(2rem,4vw,4rem);
  --rhythm-group:clamp(1.5rem,3vw,3rem);
}
/* Home bands own both edges; generic .section+.section must not remove an inset
   merely because the immediately preceding sibling has the .section class. */
#watch>.church-online.section,
#watch>.church-online.section+.section,
main>.support.section,
main>.newsletter-row.section{padding-block:var(--rhythm-band)}
#watch>.church-online .church-online-grid{padding-block:0}
/* Card galleries finish with an internal gap; the following band supplies its
   own inset. Keep the established intro-to-gallery relationship. */
#watch>section:has(>.media-grid){padding-bottom:var(--rhythm-group)}
.support-grid p{max-width:65ch}
.support-grid>div>:last-child,
.newsletter-grid>div>:last-child{margin-bottom:0}
.newsletter-grid>div>:first-child{margin-top:0}
.newsletter-grid{align-items:start;gap:var(--rhythm-group)}
.gallery-intro>div{max-width:65ch}

/* The video remains 16:9 and the title keeps its type scale. Compact only the
   hero copy inset and internal rhythm; never clip or clamp a long title. */
.hero .media-card .media-card-copy{padding:.75rem var(--candidate-card-inset)}
.hero .media-card .media-card-copy>h3{font-size:clamp(1.4rem,1.05rem + 1.15vw,1.75rem);line-height:1.24}
.hero .media-card .media-card-copy>.eyebrow{margin:0 0 .25rem}
.hero .media-card .media-card-copy>.text-link{margin-top:.25rem;padding-block:.25rem;min-height:44px}

/* Equal-height row cards place actions on a common baseline, while headings
   remain full height. The anchor is the existing single card destination. */
:is(.media-grid,.site-result-list) .media-card>a{display:flex;flex-direction:column;height:100%}
:is(.media-grid,.site-result-list) .media-card .media-card-copy{display:flex;flex-direction:column;flex:1}
:is(.media-grid,.site-result-list) .media-card .media-card-copy>.text-link{margin-top:auto;padding-top:1rem}

/* Watch details: separate heading from list/image, preserve readable guest
   measures, and contain paragraph margins so they do not escape the group. */
.video-watch .watch-description,
.video-watch .watch-guests>div{display:flow-root}
.video-watch .watch-guests p{max-width:65ch}
.video-watch .watch-highlights{margin-block:2rem}
.video-watch .watch-highlights>h2{margin-bottom:1rem}
.video-watch .watch-highlights li+li{margin-top:.5rem}
.video-watch+.section>.media-grid{margin-top:1.5rem}
/* Filter labels/actions wrap naturally; select gets the same usable target
   floor as input without changing provider fields or form behavior. */
.catalog-controls select{min-height:48px}
.catalog-controls>a{display:inline-flex;align-items:center;min-height:44px}

/* New newsletter component: same existing fieldset/control system in either
   dark Home band or light Contact column. Binding/consent remain root-owned. */
.newsletter-form,.newsletter-form fieldset{display:grid;gap:1rem;min-width:0}
.newsletter-form{margin-top:1.5rem}
.newsletter-form>p{margin:0}
.newsletter-form fieldset{margin:0;padding:0;border:0}
.newsletter-email-field{display:grid;gap:.5rem;min-width:0}
.newsletter-email-field label{display:block}
.newsletter-email-field input{width:100%;min-width:0;box-sizing:border-box}
.newsletter-form .newsletter-consent{display:flex;align-items:flex-start;gap:.75rem;font-weight:400;line-height:1.55}
.newsletter-consent input{flex:0 0 24px;width:24px;height:24px;min-height:24px;margin:.2rem 0 0;padding:0}
.newsletter-consent span{min-width:0}
.newsletter-form .button{justify-self:start}
.newsletter-form .newsletter-help{margin:0;max-width:65ch}
.newsletter-form .newsletter-help a{color:inherit}
.newsletter-row .newsletter-form :focus-visible{outline-color:var(--gold)}

/* Watch template: reading order follows the owner brief; no CSS visual reordering. */
.video-watch>h1{margin-bottom:1.25rem}
.video-watch>.watch-description{margin-top:1.5rem}
.video-watch .watch-description>p:last-child{margin-bottom:0}
.video-watch>nav[aria-label="DiscipleUp categories"]{margin-block:1.5rem}
.video-watch>nav[aria-label="DiscipleUp categories"] .actions{row-gap:.5rem}
.video-watch .watch-description,.video-watch .watch-highlights,.video-watch .watch-guests{overflow-wrap:anywhere}

/* Production gallery recovery action: one owner for each trailing gap. */
.production-library-action{margin-block-start:var(--rhythm-group)}
.catalog-pagination+.production-library-action{margin-block-start:0}
.production-library-action>a{display:inline-flex;align-items:center;min-height:44px}

/* SJE Plus Purposely promotional row: one image/copy group, natural mobile order. */
.pc-promo{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,32px);padding-block:clamp(32px,4vw,64px)}
.pc-promo>picture,.pc-promo-copy{min-width:0}
.pc-promo>picture{display:block}
.pc-promo .pc-current-art{width:100%;height:auto;aspect-ratio:960/455;object-fit:contain}
.pc-promo-copy>h2{margin:0}
.pc-promo-copy>p{max-width:65ch;margin:16px 0 0}
.pc-promo .pc-promo-actions{gap:16px;margin:24px 0 0}
@media(min-width:1024px){
 .pc-promo{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,3.333vw,48px)}
}

/* Match catalog select focus to existing input/button focus treatment. */
.catalog-controls select:focus-visible{outline:3px solid var(--lapis);outline-offset:3px}

/* Search controls share one field structure; notes never size the control row. */
.catalog-controls{align-items:flex-end}
.catalog-controls [hidden],.catalog-notes [hidden]{display:none!important}
.catalog-controls>.catalog-field{flex:0 1 14rem;min-width:min(100%,10rem);max-width:100%}
.catalog-controls>.catalog-field-query{flex:1 1 16rem}
.catalog-controls>.catalog-field-type{flex-basis:10rem}
.catalog-controls>.catalog-field-production,.catalog-controls>.catalog-field-topic{flex-basis:16rem}
.catalog-controls>.catalog-field-season{flex-basis:12rem}
.catalog-controls .catalog-field>input,.catalog-controls .catalog-field>select{display:block;width:100%;margin-top:.5rem}
.catalog-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:stretch;gap:.75rem;min-width:0;max-width:100%}
.catalog-controls :is(input:not([type=hidden]),select),.catalog-actions>.button,.catalog-actions>a,.site-search-input-row>input,.site-search-input-row>.button{box-sizing:border-box;min-block-size:3rem;font-size:1rem;line-height:1.5}
.catalog-actions>.button,.catalog-actions>a{display:inline-flex;align-items:center;justify-content:center;margin:0}
.catalog-controls input,.catalog-controls select{padding-block:.65rem}
.catalog-notes>p{font-size:.875rem;max-width:65ch;margin:.5rem 0 1rem;line-height:1.5}
.applied-filters{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.applied-filters>a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:560px){.catalog-actions{width:100%}.catalog-controls>.catalog-field{min-width:0;width:100%}}

/* Native select semantics/picker remain; only the closed-control arrow is painted.
   All SJE-owned single selects share end clearance. Iframes are not restyled. */
select:not([multiple]):not([size]),select[size="1"]:not([multiple]){appearance:none;background-color:var(--paper);color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6' fill='none' stroke='%2314202B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:1rem;background-position:right 1rem center;padding-inline-end:3rem}
select:not([multiple]):not([size]):dir(rtl),select[size="1"]:not([multiple]):dir(rtl){background-position:left 1rem center}
@media(forced-colors:active){select:not([multiple]):not([size]),select[size="1"]:not([multiple]){appearance:auto;background-image:none;padding-inline-end:1rem;forced-color-adjust:auto}}

/* Shared cards use brand ink against an opaque white foil, inside the clip.
   The focus-only overlay paints above variable images without covering hit targets
   or changing layout/cropping. Retain a real outline for forced-colors mode. */
.media-card>a{position:relative}
.media-card>a:focus-visible{border-radius:inherit;outline-color:var(--ink);outline-offset:-6px}
.media-card>a:focus-visible::after{content:"";position:absolute;inset:0;box-sizing:border-box;border:3px solid var(--paper);border-radius:inherit;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px var(--paper);pointer-events:none;z-index:1}
@media(forced-colors:active){.media-card>a:focus-visible{outline-color:Highlight}.media-card>a:focus-visible::after{display:none}}