/* AWAKE: daybreak palette and type roles
   Night #111330 is the page, Dusk #1B1D45 the surfaces, Linen #F5EFE6 the text.
   Lavender #C7B9F2 (the violet, lightened) marks actions, links and highlights. The warm
   sunrise colors are kept only for the sunrise artwork at the top of the page.
   Newsreader is the whole page: headings, titles, reading, the menu, buttons and labels
   (--sans now points to it too); scripture is always set in its italic. Archivo (--wide)
   is left only in the logo lockup, for "Generation Church" under AWAKE.
   Cormorant Garamond frames the logo: "God above all" in its capitals above,
   the vision line in its italic below. It is used nowhere else. */
:root{--night:#111330;--dusk:#1B1D45;--linen:#F5EFE6;--daybreak:#C7B9F2;--violet:#6A4FBF;--lavender:#C7B9F2;--sans:Newsreader,'Iowan Old Style',Georgia,serif;--wide:Archivo,'Helvetica Neue',Arial,sans-serif;--serif:Newsreader,'Iowan Old Style',Georgia,serif}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;background:var(--night);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
::selection{background:rgba(199,185,242,.35);color:var(--linen)}
a{color:var(--daybreak);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:#DCD2F8}
/* display: light and wide for headings, regular for card titles (.t) */
.f{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;letter-spacing:-.01em}
.f.t{font-weight:500;letter-spacing:-.005em}
/* the two lines that frame the logo */
.eyebrow{font-family:'Cormorant Garamond',Garamond,'Iowan Old Style',Georgia,serif;font-weight:500;line-height:1}
.vision{font-family:'Cormorant Garamond',Garamond,'Iowan Old Style',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}
/* scripture */
.s{font-family:var(--serif);font-style:italic;font-weight:360;letter-spacing:-.005em}
.wm{font-family:var(--wide);font-stretch:125%;font-weight:700}
/* small labels: sentence case, no tracking */
.lbl{font-family:var(--sans);font-stretch:106%;font-size:14px;font-weight:500;letter-spacing:.005em;line-height:1.3}
.mgrid>a{flex:0 1 calc((100% - 48px) / 3);min-width:0}
.mgrid>a>div:last-child{margin-top:auto}
@media (max-width: 760px){.mgrid>a{flex-basis:100%}
}
section,footer,#watch{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
}
.nv{transition:color .25s}
.nv:hover{color:#C7B9F2!important}
.btn{transition:background-color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover{background-color:#D9CFF7!important;transform:translateY(-1px)}
.nl{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s ease}
.nl:hover{background-size:100% 1px}
.arrowbtn .ar svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.arrowbtn:hover .ar svg{transform:rotate(45deg)}
.zoom .media{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.zoom:hover .media{transform:scale(1.05)}
.duo .media{filter:grayscale(1) contrast(1.05);transition:filter .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.duo .tint{opacity:.88;transition:opacity .7s ease}
.duo:hover .media{filter:none;transform:scale(1.04)}
.duo:hover .tint{opacity:0}
.duo .go{transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s}
.duo:hover .go{transform:translate(2px,-2px);background-color:#C7B9F2}
a.ev{transition:box-shadow .45s}
a.ev:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
a.ev .ev-art{transition:filter .6s ease}
a.ev:hover .ev-art{filter:saturate(1.15) brightness(1.06)}
a.ev:hover .nl{background-size:100% 1px}
.egrid>*{flex:0 1 calc((100% - 72px) / 4);min-width:0}
@media (max-width: 1100px){.egrid>*{flex-basis:calc((100% - 24px) / 2)}
}
@media (max-width: 640px){.egrid>*{flex-basis:100%}
}
.dv-c{transition:background-color .25s,border-color .25s}
.dv-c:hover{border-color:#C7B9F2!important}
@media (max-width: 640px){.dv-r{display:none}
.dv-c{min-height:48px!important}
}
.lift{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.drow{transition:padding .35s cubic-bezier(.2,.7,.2,1),color .3s}
.drow:hover{padding-left:8px;color:#C7B9F2!important}
.chip{transition:background-color .3s,color .3s,border-color .3s}
.prose h4{margin:22px 0 0;font-family:var(--sans);font-stretch:112%;font-weight:430;font-size:27px;line-height:1.2;letter-spacing:-.012em;color:#F5EFE6}
.prose p{margin:0}
.prose strong{font-weight:500;color:#F5EFE6}
.pola{position:relative;flex:0 0 218px;box-sizing:border-box;display:flex;flex-direction:column;background:#F7F3EA;padding:10px 10px 0;border-radius:3px;box-shadow:0 26px 44px -20px rgba(0,0,0,.8);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.pola:hover{transform:rotate(0deg) translateY(-8px)!important;z-index:5!important}
.pola img{display:block;width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:1px}
.pola figcaption{padding:11px 4px 14px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;color:#3B3630;text-align:center}
.msg .vid{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.msg .play{transition:background-color .35s,border-color .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.msg .vid:hover .play{background-color:#C7B9F2!important;border-color:#C7B9F2!important;transform:scale(1.08)}
.msg .play path{transition:fill .35s}
.msg .vid:hover .play path{fill:#111330}
.glass{transition:background-color .3s,border-color .3s}
.glass:hover{background-color:rgba(245,239,230,.16)!important;border-color:rgba(245,239,230,.55)!important}
.prose .lead{display:block;margin-bottom:4px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px}
.track-x{scrollbar-width:none}
.track-x::-webkit-scrollbar{display:none}
@media (max-width: 900px){.navlinks{display:none!important}
}
@media (min-width: 900px){.offset{margin-top:96px}
}
@keyframes rise{from{opacity:0;transform:translateY(36px);filter:blur(6px)}
}
/* scroll reveals: no blur, so text stays readable while it slides in */
@keyframes reveal{from{opacity:0;transform:translateY(24px)}
}
@keyframes fadein{from{opacity:0}
}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}
50%{transform:translateX(-50%) scale(1.12);opacity:1}
}
@keyframes drift{0%,100%{transform:translateY(0)}
50%{transform:translateY(-14px)}
}
@keyframes cloud{from{transform:translateX(-9vw)}
to{transform:translateX(9vw)}
}
@keyframes marquee{to{transform:translateX(-50%)}
}
@keyframes blink{0%,100%{opacity:1}
50%{opacity:.25}
}
@keyframes wordfill{from{color:rgba(245,239,230,.16)}
}
@keyframes parA{from{transform:translateY(40px)}
to{transform:translateY(-40px)}
}
@keyframes parB{from{transform:translateY(-30px)}
to{transform:translateY(50px)}
}
@keyframes logoin{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(8px)}
}
.m-on .logo-in svg{animation:logoin 1.6s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes wakein{from{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-12px)}
}
.m-on .logo-in .wake{animation:wakein 1.3s cubic-bezier(.65,0,.35,1) .9s both}
.m-on .church{animation:fadein 1.2s ease 1.6s both}
.m-on .vision{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) 1.9s both}
.m-on .in1{animation:rise 1s cubic-bezier(.2,.7,.2,1) .1s both}
.m-on .in4{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
.m-on .glow{animation:breathe 9s ease-in-out infinite}
.m-on .cloud{animation:cloud 40s ease-in-out infinite alternate}
.m-on .float{animation:drift 7s ease-in-out infinite}
.m-on .track{animation:marquee 34s linear infinite}
.m-on .live{animation:blink 1.6s ease-in-out infinite}
@supports (animation-timeline: view()){
.m-on .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.m-on .w{animation:wordfill linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.m-on .para1{animation:parA linear both;animation-timeline:view();animation-range:cover}
.m-on .para2{animation:parB linear both;animation-timeline:view();animation-range:cover}
}
@media (prefers-reduced-motion: reduce){.m-on *,.m-on *::before{animation:none!important;transition:none!important}
}


/* ------------------------------------------------------------------
   Website additions (interactive states + phone layout).
   Everything above this block comes straight from the design.
   ------------------------------------------------------------------ */
[hidden]{display:none!important}
:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
/* headings that receive focus from script (article reader, statement of faith) don't need a ring */
[tabindex="-1"]:focus{outline:none}
#main:focus{outline:none}

/* Skip link: hidden until a keyboard user tabs to it */
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:4px;background:#C7B9F2;color:#111330!important;font-size:17px;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
/* never let a rotated card or photo push the page sideways (clip keeps the sticky nav working) */
body>div{overflow-x:clip}

/* Controls speak in the same voice as the headings: Archivo, medium weight */
.nav-main,.mobile-menu,.btn,.chip,.glass,.arrowbtn,.msg-btn,.skip,.ev span[style*="border-radius: 999px"]{font-family:var(--sans);font-stretch:106%;font-weight:500;letter-spacing:.005em}
.navlinks{font-size:15px!important;column-gap:28px!important}
.nav-main>.btn{font-size:15px!important}
.chip{font-size:15px!important}
.mobile-menu a{font-weight:400}

/* Links: a quiet underline that brightens on hover, so plain-text links still read as links */
.nl{background-image:none!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.3em;text-decoration-color:rgba(245,239,230,.32)!important;transition:text-decoration-color .3s,color .3s}
.nl[style*="color: #C7B9F2"],span.nl{text-decoration-color:rgba(199,185,242,.45)!important}
.nl:hover{text-decoration-color:currentColor!important}
footer .nl{text-decoration:none!important}
p a{text-decoration-color:rgba(199,185,242,.45)}
p a:hover{text-decoration-color:currentColor}

/* A section being reset after the visitor moved on changes instantly (it's off screen),
   so the page can be held in place exactly */
.is-resetting,.is-resetting *{transition:none!important}

/* FAQ: open ruled list */
.faq-item [data-faq]{transition:color .25s}
.faq-item [data-faq]:hover{color:#C7B9F2!important}

/* Navigation: see-through once you scroll. The solid backing fades out and the page shows
   through, softly blurred. Script turns this off over photos, video, the map and the bright
   sunrise, where the links would be hard to read, and while the phone menu is open. */
.nav-main{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.nav-main.is-clear{background-color:transparent!important;border-color:rgba(245,239,230,.14)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(16px) saturate(1.2)!important;backdrop-filter:blur(16px) saturate(1.2)!important}
.nav-main.is-clear .nv{text-shadow:0 1px 10px rgba(17,19,48,.6)}
@media (prefers-reduced-transparency: reduce){.nav-main.is-clear{background-color:rgba(14,15,40,.82)!important}}

/* Navigation wordmark beside the A mark: AWAKE in the logo's own letters, with Church
   beneath in the italic serif of the vision line */
.brand{display:flex;flex-direction:column;align-items:center;line-height:1}
.b-name{font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:16px;letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;color:#F5EFE6}
.b-sub{margin-top:1px;font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:.01em;color:#C7B9F2;transition:color .3s}
.brand-link:hover .b-sub{color:#DCD2F8}
.nav-main.is-clear .brand{text-shadow:0 1px 10px rgba(17,19,48,.6)}
/* Navigation: highlighted section + phone menu */
.navlinks .nv.is-active{color:#C7B9F2!important;border-bottom-color:#C7B9F2!important}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.mobile-menu{display:none}
@media (max-width: 900px){
  .nav-wrap{top:12px!important;padding:0 12px!important}
  .nav-main{width:100%;max-width:560px;box-sizing:border-box;column-gap:4px!important;padding:6px 6px 6px 14px!important}
  .nav-main>.brand-link{margin-right:auto}
  .nav-main>.btn{min-height:44px!important;padding:0 14px!important;font-size:15px!important}
  .menu-btn{display:inline-flex}
  .mobile-menu:not([hidden]){display:flex;flex-direction:column;flex-basis:100%;margin:4px 8px 0 0;padding:6px 0 8px;border-top:1px solid rgba(245,239,230,.12)}
  .mobile-menu a{display:flex;align-items:center;min-height:46px;color:#F5EFE6;font-size:18px;text-decoration:none}
  .mobile-menu a:hover,.mobile-menu a.is-active{color:#C7B9F2}
}

/* Library: selected filter */
.chip[aria-pressed="true"]{background:#C7B9F2!important;color:#111330!important;border-color:#C7B9F2!important}
.chip:not([aria-pressed="true"]):hover{border-color:rgba(245,239,230,.55)!important}
#reader,#faith-panel{scroll-margin-top:96px}

/* Library: scroll arrows for mouse and keyboard users */
.track-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:-20px}
.track-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid rgba(245,239,230,.22);background:transparent;color:#F5EFE6;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,opacity .25s}
.track-btn:hover:not(:disabled){background:#C7B9F2;border-color:#C7B9F2;color:#111330}
.track-btn:disabled{opacity:.3;cursor:default}
@media (hover: none){.track-nav{display:none!important}}

/* Resources: the statement-of-faith row is a button styled like the link rows */
button.drow{border-top-color:rgba(245,239,230,.16)}

/* Latest messages: Facebook player */
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000000}
.msg.is-playing .vid>img,.msg.is-playing .vid-play{display:none}
.msg.is-playing .vid{box-shadow:0 30px 60px -32px rgba(0,0,0,.95),0 0 0 1px rgba(199,185,242,.35)!important}
.msg.is-big{grid-column:1 / -1}
.msg-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;color:rgba(245,239,230,.82);font:inherit;font-size:15px;cursor:pointer;transition:color .25s}
.msg-btn:hover{color:#C7B9F2}
.msg-btn .when-big,.msg.is-big .msg-btn .when-small{display:none}
.msg.is-big .msg-btn .when-big{display:inline}
@media (max-width: 700px){.msg-btn[data-big]{display:none}}

/* Our pastors: an org chart. Senior Pastors on top, a line branching down to the pastor couples.
   Each person has a round headshot; a couple's two photos overlap slightly. */
.org{--org-line:rgba(199,185,242,.45);--org-gap:56px;--org-drop:44px;position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 0 8px}
.org::before{content:"";position:absolute;left:50%;top:-40px;width:min(760px,100%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(110,85,176,.16),rgba(110,85,176,0));pointer-events:none}
.org-node{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px}
.org-faces{position:relative;z-index:1;display:flex;justify-content:center}
.org-faces img{width:116px;height:116px;border-radius:50%;object-fit:cover;box-sizing:border-box;border:4px solid #111330;box-shadow:0 0 0 2px var(--org-line),0 20px 40px -20px rgba(0,0,0,.9);background:#1B1D45}
.org-faces img+img{margin-left:-18px}
.org-card{position:relative;margin-top:-16px;padding:30px 24px 22px;width:100%;box-sizing:border-box;text-align:center;border-radius:14px;background:#1B1D45;border:1px solid rgba(245,239,230,.08);border-top:2px solid #C7B9F2;box-shadow:0 30px 60px -36px rgba(0,0,0,.95)}
.org-role{margin:0 0 8px;color:#C7B9F2}
.org-names{margin:0;font-size:clamp(20px,1.9vw,24px);line-height:1.3}
/* Senior Pastors: larger photos, a filled daybreak card */
.org-top{max-width:480px;padding-bottom:var(--org-drop)}
.org-top .org-faces img{width:148px;height:148px;box-shadow:0 0 0 2px #C7B9F2,0 24px 48px -20px rgba(0,0,0,.9)}
.org-top .org-card{background:linear-gradient(160deg,#D2C6F5,#A894EA);border:0;color:#111330}
.org-top .org-role{color:rgba(17,19,48,.78)}
.org-top .org-names{font-size:clamp(22px,2.2vw,28px)}
/* connectors: down from the Senior Pastors, across, then down to each couple */
.org-top::after{content:"";position:absolute;left:50%;bottom:0;height:var(--org-drop);border-left:2px solid var(--org-line)}
.org-children{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--org-gap);width:min(100%,calc(840px + var(--org-gap)));padding-top:var(--org-drop)}
.org-children::before{content:"";position:absolute;top:0;left:calc(25% - var(--org-gap) / 4);right:calc(25% - var(--org-gap) / 4);border-top:2px solid var(--org-line)}
.org-children>.org-node::before{content:"";position:absolute;left:50%;top:calc(var(--org-drop) * -1);height:var(--org-drop);border-left:2px solid var(--org-line)}
.org-children>.org-node{justify-self:center}
/* phones and narrow tablets: one column, joined by a single line down the middle */
@media (max-width: 760px){
  .org{--org-gap:40px;--org-drop:36px}
  .org-children{grid-template-columns:minmax(0,1fr);width:min(100%,420px);row-gap:var(--org-gap)}
  .org-children::before{display:none}
  .org-children>.org-node+.org-node::before{top:calc(var(--org-gap) * -1);height:var(--org-gap)}
  .org-faces img{width:100px;height:100px}
  .org-top .org-faces img{width:124px;height:124px}
  .org-card{padding:28px 12px 18px}
  .org-names,.org-top .org-names{font-size:21px}
}

/* Services (Breakthrough, Main Service, Wednesday Equipping): each in its own panel, same card design.
   Video beside the text from 760px up, stacked on phones; "Watch bigger" gives the video the full panel. */
.svc-stack{display:flex;flex-direction:column;gap:24px}
.svc-panel{min-width:0}
@media (min-width: 760px){
  .svc:not(.is-big){flex-direction:row!important;align-items:center;gap:clamp(28px,4vw,48px)!important}
  .svc:not(.is-big)>.vid{flex:0 0 54%}
  .svc:not(.is-big)>div:last-child{flex:1 1 0}
}
.svc-more{display:flex;justify-content:flex-end;padding:4px 4px 0;font-size:16px}
.svc-more a{color:rgba(245,239,230,.85)!important}
.svc .vid{container-type:inline-size}
.vid-art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:clamp(16px,7cqi,30px)}
.vid-art .art-title{font-size:clamp(20px,8.2cqi,46px)}
.vid-art .art-when{font-size:clamp(12px,3.6cqi,14px)}
/* play button in the empty top-left corner, clear of the lettering */
.svc .vid-play .play{left:clamp(16px,7cqi,30px)!important;top:clamp(16px,7cqi,30px)!important;margin:0!important;width:52px!important;height:52px!important}
.msg.is-playing .vid>.vid-art{display:none}
/* Article reader: the three journal photos shrink to fit narrow screens */
@media (max-width: 700px){
  .pola{flex:0 1 218px!important;min-width:0;padding:6px 6px 0!important}
  .pola figcaption{padding:8px 2px 10px!important;font-size:12px!important}
}

/* Daily devotion: week-by-week cards on phones */
.dv-weeks{display:none}
.dv-week{flex:0 0 86%;scroll-snap-align:start;box-sizing:border-box;border-radius:12px;padding:16px 18px 8px;display:flex;flex-direction:column;background:rgba(245,239,230,.04);border:1px solid rgba(245,239,230,.08)}
.dv-week.is-now{border-color:rgba(199,185,242,.55)}
.dv-day{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid rgba(245,239,230,.08)}
.dv-day>span:first-child{flex:none;width:52px;font-size:14px}
.dv-day>span:last-child{display:flex;flex-direction:column;gap:1px;font-size:15px;line-height:1.35}
@media (max-width: 640px){
  #dv-grid{display:none!important}
  .dv-weeks{display:flex;flex:1 1 100%;min-width:0;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
}

/* Phones */
@media (max-width: 600px){
  /* hero: sizes from the mobile design */
  .logo-in svg{height:58px!important}
  .logo-in .wake{font-size:81px!important}
  .hero-inner{padding-top:112px!important;gap:20px!important}
  .hero-inner .in1 .eyebrow{font-size:18px!important;letter-spacing:.36em!important;padding-left:.36em!important;white-space:nowrap}
  .hero-inner .church{font-size:12.5px!important;font-weight:400!important;letter-spacing:.45em!important;padding-left:.45em!important;white-space:nowrap}
  .hero-inner .in4{margin-top:10px!important}
  #watch{padding:56px 12px 72px!important}
  #watch .svc-panel{padding:20px 16px!important;border-radius:16px!important}
  .svc-stack{gap:16px}
  .svc-more{justify-content:flex-start}
  /* sections: less empty space between them */
  section[style*="padding: 120px 0"]{padding:72px 0!important}
  section[style*="padding: 40px 0 120px"]{padding:24px 0 72px!important}
  /* cards: more room for text */
  [data-card]{padding:28px 24px!important}
  #grow-row>.reveal{min-height:0!important;padding:28px 24px!important}
  #devotion .reveal{padding:28px 20px!important}
  .map-embed{min-height:400px!important}
  /* events: shorter artwork so four cards don't make a very long scroll */
  .ev-art{aspect-ratio:16 / 10!important}
}

/* Gather with us: once the two card columns stack, show the six gatherings as one
   list in week order (Sunday first) with a gentle alternating tilt */
@media (max-width: 640px){
  .gather-cards{flex-direction:column;flex-wrap:nowrap!important;gap:14px!important}
  .gather-cards>.para1,.gather-cards>.para2{display:contents!important}
  .gather-cards .gc{transform:rotate(-1.2deg)!important}
  .gather-cards .gc[style*="order: 2"],.gather-cards .gc[style*="order: 4"],.gather-cards .gc[style*="order: 6"]{transform:rotate(1.2deg)!important}
  .gather-cards .float{min-height:0!important;gap:18px!important;padding:22px 24px!important;animation:none!important}
  .gather-cards .float .f{font-size:26px!important}
}

/* Resources: on narrow phones drop the small side note so each title fits on one line */
@media (max-width: 480px){
  #grow-row a.drow>span:last-child,#grow-row button.drow[data-faith-open]>span:last-child{display:none}
}

/* Ministries: wider, shorter photos on phones */
@media (max-width: 760px){
  .m-art{aspect-ratio:4 / 3!important}
}


/* Footer: "Your next step". Four ways in for someone who has read the whole page.
   Internal steps point right; the Messenger one points out of the site. */
.next{display:flex;flex-direction:column;gap:16px}
.next-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.next-step{display:flex;flex-direction:column;gap:18px;min-height:168px;box-sizing:border-box;padding:22px 22px 20px;border-radius:16px;background:rgba(17,19,48,.4);border:1px solid rgba(245,239,230,.16);color:#F5EFE6;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,border-color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.next-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.next-step .lbl{color:#C7B9F2}
.next-title{font-size:24px;line-height:1.12}
.next-go{margin-top:auto;align-self:flex-end;width:40px;height:40px;flex:none;border-radius:50%;background:rgba(245,239,230,.1);display:inline-flex;align-items:center;justify-content:center;transition:background-color .3s}
.next-go svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.next-go path{transition:stroke .3s}
.next-step:hover{background:rgba(17,19,48,.58);border-color:rgba(199,185,242,.55);transform:translateY(-3px)}
.next-step:hover .next-go{background:#C7B9F2}
.next-step:hover .next-go path{stroke:#111330}
.next-step:hover .next-go svg{transform:translateX(2px)}
.next-step.is-out:hover .next-go svg{transform:rotate(45deg)}
.next-step:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
footer a.addr{transition:color .3s}
footer a.addr:hover{color:#F5EFE6!important}
@media (max-width: 960px){.next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){
  .next-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .next-step{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 16px 20px}
  .next-go{margin-top:0;align-self:center}
  .next-title{font-size:21px}
}
@media (prefers-reduced-motion: reduce){.next-step:hover{transform:none}}

/* Moving sky (js/site.js, "9b"): one canvas behind the hero text with stars, light beams and
   rising specks of light. Screen blending lets it only ever add light to the sky. */
.sky-motion{position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen}

/* Very narrow phones: a slightly smaller wordmark and button keep the menu bar on one row */
@media (max-width: 380px){
  .nav-main>.brand-link{gap:9px!important}
  .nav-main>.brand-link svg{height:24px!important}
  .b-name{font-size:14px;letter-spacing:.16em;padding-left:.16em}
  .b-sub{font-size:15px}
  .nav-main>.btn{padding:0 12px!important}
}

/* Library: cards and reader, built by js/site.js ("5. Library") from content/library.json */
.lib-card{flex:0 0 min(380px,86%);scroll-snap-align:start;min-height:440px;box-sizing:border-box;background:#1B1D45;border-radius:12px;padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;text-decoration:none;color:#F5EFE6}
.lib-top{display:flex;flex-direction:column;gap:20px}
.lib-type{color:#C7B9F2}
.lib-title{font-size:27px;line-height:1.15}
.lib-by{font-size:16px;color:#C7B9F2}
.lib-sum{font-size:18px;line-height:1.5;color:rgba(245,239,230,.7)}
.lib-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid rgba(245,239,230,.12)}
.lib-ref{font-size:16px;color:rgba(245,239,230,.8)}
.lib-go{font-size:16px;color:#C7B9F2;white-space:nowrap;text-align:right}
.lib-card:hover .lib-go{text-decoration:underline;text-underline-offset:.3em}
.lib-note{margin:0;font-size:18px;color:rgba(245,239,230,.72)}
.lib-note[hidden]{display:none}
.reader-head{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.reader-by{display:flex;align-items:center;gap:14px}
.reader-avatar{width:52px;height:52px;flex:none;box-sizing:border-box;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#111330;border:1px solid rgba(199,185,242,.45)}
.reader-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.reader-avatar svg{height:24px!important;width:auto!important}
.reader-verse{width:100%;max-width:760px;margin:0 auto;box-sizing:border-box;padding:6px 0 6px 26px;border-left:2px solid #C7B9F2;display:flex;flex-direction:column;gap:12px}
.reader-verse[hidden]{display:none}
.reader-verse p{margin:0;font-size:24px;line-height:1.5;color:#F5EFE6}
.reader-verse .lbl{color:#C7B9F2}
.reader-foot{width:100%;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;border-top:1px solid rgba(245,239,230,.12)}
.reader-share{display:flex;flex-wrap:wrap;gap:10px}
a.chip{display:inline-flex;align-items:center;box-sizing:border-box;text-decoration:none}
/* What a post's text can use: headings, quotes (the last line of a quote is its reference), lists, links, photos */
.prose h5,.prose h6{margin:16px 0 0;font-family:var(--sans);font-stretch:112%;font-weight:430;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:#F5EFE6}
.prose h6{font-size:19px}
.prose blockquote{margin:6px 0;padding:6px 0 6px 26px;border-left:2px solid #C7B9F2;display:flex;flex-direction:column;gap:12px}
.prose blockquote p{font-family:var(--serif);font-style:italic;font-weight:360;font-size:24px;line-height:1.5;letter-spacing:-.005em;color:#F5EFE6}
.prose blockquote p+p:last-child{font-size:16px;line-height:1.4;color:#C7B9F2}
.prose ul,.prose ol{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:8px}
.prose a{color:#C7B9F2}
.prose em{font-style:italic}
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose hr{width:100%;border:0;border-top:1px solid rgba(245,239,230,.14);margin:10px 0}
.prose .lead{color:#C7B9F2}
.polas{margin:26px 0 18px;display:flex;justify-content:center;align-items:flex-start}
.polas .pola img{border-radius:1px}

/* About: "Who we are" over the church's own photos. Three photos crossfade slowly on the
   right, tinted violet like the ministry photos and fading into the night toward the text. */
.about{position:relative;overflow:hidden;padding:150px 0}
.about-photos{position:absolute;top:0;bottom:0;right:0;width:60%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 48%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
.about-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.9)}
.m-on .about-photos img{animation:aboutfade 27s linear infinite}
.m-on .about-photos img:nth-child(2){animation-delay:9s}
.m-on .about-photos img:nth-child(3){animation-delay:18s}
@keyframes aboutfade{0%{opacity:0;transform:scale(1.03)}7%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
.about-tint{position:absolute;inset:0;background:#6A4FBF;mix-blend-mode:color;opacity:.6}
.about-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,19,48,.88) 0%,rgba(17,19,48,.6) 34%,rgba(17,19,48,.14) 68%,rgba(17,19,48,.3) 100%)}
.about-inner{position:relative;max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.about-inner>*{max-width:600px}
.about-mv{max-width:640px;display:grid;grid-template-columns:minmax(0,1fr);gap:36px;margin:12px 0 8px} /* mission, then vision under it */
.mv{display:flex;flex-direction:column;gap:12px}
.mv>.lbl{font-size:18px;letter-spacing:.01em}
.mv-line{margin:0;font-family:'Cormorant Garamond',Garamond,'Iowan Old Style',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(34px,3.2vw,46px);line-height:1.06;color:#F5EFE6}
.mv-ref{font-size:17px;color:rgba(245,239,230,.62)}
@media (prefers-reduced-motion: reduce){.about-photos img:first-child{opacity:1}}
@media (max-width: 760px){
  .about{padding:0 0 100px}
  .about-photos{position:relative;width:100%;height:clamp(260px,62vw,380px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 52%,transparent 100%)}
  .about-shade{background:linear-gradient(180deg,rgba(17,19,48,.25),rgba(17,19,48,.1))}
  .about-inner{margin-top:-40px}
  .about-mv{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Membership panel ("Become a member", after First visit; registration is a Google Form) */
.member{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;box-sizing:border-box;padding:clamp(28px,4vw,52px);border-radius:12px;background-color:#2A2462;background-image:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(199,185,242,.3),rgba(199,185,242,0) 70%),linear-gradient(160deg,#3A2C7A 0%,#1B1D45 100%)}
.member-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.member-title{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.015em}
.member-copy{margin:0;max-width:32em;font-size:19px;line-height:1.55;color:rgba(245,239,230,.84)}
.member-cta{flex:none;display:inline-flex;align-items:stretch;text-decoration:none}
.member-cta-text{display:inline-flex;align-items:center;min-height:56px;padding:0 24px;background:rgba(245,239,230,.92);color:#111330;font-size:18px;border-radius:999px 0 0 999px}
.member-cta .ar{width:56px;display:inline-flex;align-items:center;justify-content:center;background:#C7B9F2;border-radius:0 999px 999px 0}
@media (max-width: 520px){.member-cta{width:100%}.member-cta-text{flex:1;justify-content:center;white-space:nowrap;padding:0 16px!important;font-size:17px!important}}

/* Section headings (every section but About): Newsreader at its display size, centered,
   the first word(s) bright and the rest a soft grey, as in "Grow deeper". */
.sec-title{font-family:var(--serif)!important;font-weight:400!important;font-style:normal;font-stretch:normal!important;font-optical-sizing:auto;letter-spacing:-.012em!important;color:#F5EFE6;text-align:center;align-self:center;margin-left:auto!important;margin-right:auto!important}
.sec-title .dim{color:rgba(245,239,230,.46)}
.sec-head{align-items:center!important;text-align:center;flex-basis:100%!important}
.sec-head>p{margin-left:auto!important;margin-right:auto!important;text-wrap:balance}
#faq .sec-head>p{max-width:30em!important}
.sec-head>a{align-self:center!important}
.sec-row{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center}
.sec-row>div:last-child{justify-content:center}
/* side-by-side sections: heading on top, content centered below */
#gather .gather-cards{flex:0 1 860px!important;margin:0 auto}
#gather>div{justify-content:center}
#faq .faq-list{flex:0 1 860px!important;margin:0 auto}
#faq>div{justify-content:center}
#library [role="group"]{justify-content:center}
.next>.lbl{align-self:center}
footer .sec-head{flex:1 1 100%!important}
/* the service panels and the two cards in Our beliefs / Study resources */
.svc-panel>.sec-title{margin-bottom:2px}
#grow-row .sec-title{margin-bottom:0}
/* Membership: heading, line and button stacked in the middle */
.member{flex-direction:column;justify-content:center;text-align:center;gap:24px}
.member-text{flex:none;align-items:center}
.member-copy{margin-left:auto;margin-right:auto;text-wrap:balance}

/* Isaiah 60:1 statement: centered, with the lines balanced */
.verse .s{text-wrap:balance}
.verse .s .w:last-child{margin-right:0!important}
.sec-title.sec-left{text-align:left;align-self:flex-start;margin-left:0!important;margin-right:0!important}

/* Membership: a compact card the width of its content, with the AWAKE mark set faintly
   behind the text like a seal, so there is no empty band either side */
#membership .member{max-width:780px;margin:0 auto;position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,5vw,60px) clamp(24px,5vw,64px)}
#membership .member::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;height:150%;aspect-ratio:80.46/100;transform:translate(-50%,-50%);opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80.46 100'%3E%3Cpath d='M34.98 0.15 L35.34 0.05 L37.24 0.05 L37.6 0.15 L37.84 0.43 L40.91 7.83 L48.47 25.28 L68.61 72.44 L79.59 97.68 L80.32 99.57 L80.32 99.79 L80.19 99.92 L79.55 99.89 L77.75 99.47 L74.81 98.47 L71.77 97.19 L69.31 95.9 L66.56 94.27 L63.9 92.4 L60.29 89.33 L59.35 88.38 L58.9 87.81 L57.89 85.63 L50.27 67.22 L40.9 45.02 L38.39 38.28 L36.66 32.12 L36.44 31.77 L36.21 31.67 L35.98 31.77 L35.83 32.02 L34.38 37.33 L32.91 41.51 L31.5 45.02 L25.91 58.21 L24.19 62.48 L8.67 99.48 L8.35 99.76 L7.92 99.56 L7.07 98.72 L5.77 97.2 L3.91 94.45 L2.54 91.89 L1.18 88.38 L0.47 85.63 L0.18 84.2 L0.05 82.97 L0.1 81.64 L0.3 80.88 L1.72 77.37 L7.03 65.23 L8.45 61.72 L14.33 48.15 L33.59 2.99 L34.67 0.52 Z' fill='%23F5EFE6'/%3E%3C/svg%3E") center/contain no-repeat}
#membership .member-title{font-size:clamp(34px,3.6vw,48px)}

/* Menu bar as frosted glass. Over the calm night background it is light and clear; over
   photos, video and the bright sunrise (script: "12. See-through menu bar") the tint
   deepens a little so the links stay readable. */
.nav-main{background-color:rgba(22,22,60,.52)!important;background-image:linear-gradient(135deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.015) 100%)!important;-webkit-backdrop-filter:blur(20px) saturate(1.6)!important;backdrop-filter:blur(20px) saturate(1.6)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 48px -26px rgba(0,0,0,.7)!important;transition:background-color .35s ease,border-color .35s ease}
.nav-main.is-clear{background-color:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.2)!important}
.nav-main .nv,.nav-main .brand{text-shadow:0 1px 10px rgba(17,19,48,.55)}
.nav-main:has(.mobile-menu:not([hidden])){background-color:rgba(17,19,48,.86)!important}
@media (prefers-reduced-transparency: reduce){.nav-main,.nav-main.is-clear{background-color:rgba(14,15,40,.94)!important;background-image:none!important}}

/* Menu wordmark: "Church" is sized so its width matches AWAKE above it, a proper two-line
   lockup (its lowercase letters stand about as tall as AWAKE's capitals) */
.b-sub{font-size:28px;letter-spacing:.02em;line-height:.9;margin-top:-1px}
@media (max-width: 380px){.b-sub{font-size:24px;letter-spacing:.01em}}

/* Ministries: photo or video on top with the name over it, then a short description,
   a link and a status line */
.mcards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important}
.mcards>.mcard{flex:none!important}
.mcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#161838;border:1px solid rgba(255,255,255,.08);color:#F5EFE6;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .45s}
.mcard:hover{transform:translateY(-4px);border-color:rgba(199,185,242,.4);box-shadow:0 30px 60px -32px rgba(0,0,0,.9)}
.mcard:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
.mcard-media{position:relative;aspect-ratio:1/0.95;overflow:hidden;background:#2A2462}
.mcard-media>img,.mcard-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .mcard-media>img,.mcard:hover .mcard-media>video{transform:scale(1.04)}
.mcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,48,.05) 30%,rgba(17,19,48,.55) 62%,rgba(22,24,56,.96) 100%)}
.mcard-titles{position:absolute;left:0;right:0;bottom:0;padding:0 28px 26px;display:flex;flex-direction:column;gap:12px}
.mcard-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(32px,2.8vw,42px);line-height:1;letter-spacing:-.01em;color:#F5EFE6;text-shadow:0 2px 18px rgba(17,19,48,.5)}
.mcard-kicker{font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,239,230,.82)}
.mcard-body{flex:1;display:flex;flex-direction:column;padding:26px 28px 0}
.mcard-copy{margin:0 0 24px;font-size:18px;line-height:1.6;color:rgba(245,239,230,.74)}
.mcard-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.1);font-size:18px;color:#C7B9F2}
.mcard-cta svg{transition:transform .35s}
.mcard:hover .mcard-cta svg{transform:translateX(3px)}
@media (max-width: 960px){.mcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.mcards{grid-template-columns:minmax(0,1fr)}.mcard-media{aspect-ratio:4/3}}
@media (prefers-reduced-motion: reduce){.mcard,.mcard-media>img,.mcard-media>video{transition:none}.mcard:hover{transform:none}}

/* Event cards with a photo or a video loop under the poster text */
.ev-art>.ev-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-art>.ev-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,48,.35) 0%,rgba(17,19,48,.15) 40%,rgba(17,19,48,.78) 100%)}
.ev-art>:not(.ev-media):not(.ev-shade){position:relative;z-index:1}

/* Reading calendar for 2026: the month bar with arrows, and the picked day's readings */
#devotion [hidden],#dv-print-row[hidden]{display:none!important}
.dv-bar{flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:24px}
.dv-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,239,230,.22);background:transparent;color:#F5EFE6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s}
.dv-nav:hover:not([aria-disabled="true"]){border-color:#C7B9F2;color:#C7B9F2}
.dv-nav:focus-visible,.dv-today:focus-visible,.dv-day:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
.dv-nav[aria-disabled="true"]{opacity:.28;cursor:default}
.dv-now{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:15em;text-align:center}
.dv-month{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,32px);line-height:1.1;color:#F5EFE6}
.dv-sub{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;font-size:15px;color:rgba(245,239,230,.62)}
.dv-today{padding:0;border:0;background:none;font:inherit;color:#C7B9F2;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dv-detail{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-top:24px;border-top:1px solid rgba(245,239,230,.1)}
.dv-date{font-family:var(--serif);font-size:22px;color:#F5EFE6}
.dv-date em{margin-left:12px;padding:3px 10px;border-radius:999px;background:#C7B9F2;color:#111330;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;vertical-align:3px}
.dv-pass{display:flex;flex-wrap:wrap;gap:6px 24px}
.dv-pass a{color:#C7B9F2;text-decoration:none;font-size:19px;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s}
.dv-pass a:hover{background-size:100% 1px}
.dv-note{font-size:17px;color:rgba(245,239,230,.74)}
button.dv-day{width:100%;margin:0;background:none;border:0;border-top:1px solid rgba(245,239,230,.08);border-radius:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
button.dv-day.is-sel{background:rgba(199,185,242,.1);box-shadow:inset 2px 0 0 #C7B9F2;padding-left:8px}
@media (max-width: 640px){.dv-bar{gap:8px}.dv-nav{width:40px;height:40px}.dv-now{min-width:0;flex:1}.dv-month{font-size:23px;white-space:nowrap}.dv-sub{font-size:14px}.dv-detail{flex-direction:column;gap:8px}.dv-date{font-size:20px}}
@media (max-width: 370px){.dv-month{font-size:20px;white-space:normal}}
@media (prefers-reduced-motion: reduce){.dv-nav,.dv-pass a{transition:none}}

/* Pause button for the moving backgrounds (bottom-left; js/site.js "9d. Pause motion") */
.motion-btn{position:fixed;left:16px;bottom:16px;z-index:39;width:44px;height:44px;box-sizing:border-box;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(245,239,230,.2);background:rgba(17,19,48,.62);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);color:#F5EFE6;cursor:pointer;box-shadow:0 10px 28px -14px rgba(0,0,0,.85);transition:border-color .25s,color .25s}
.motion-btn[hidden]{display:none}
.motion-btn:hover{border-color:#C7B9F2;color:#C7B9F2}
.motion-btn:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
.motion-btn .ico-play,.motion-btn.is-paused .ico-pause{display:none}
.motion-btn.is-paused .ico-play{display:block}
@media (max-width: 640px){.motion-btn{left:12px;bottom:12px}}
@media (prefers-reduced-transparency: reduce){.motion-btn{background:#1B1D45;-webkit-backdrop-filter:none;backdrop-filter:none}}
html.motion-paused .m-on .glow,html.motion-paused .m-on .cloud,html.motion-paused .m-on .float,html.motion-paused .m-on .live,html.motion-paused .m-on .about-photos img{animation-play-state:paused!important}
/* The Facebook links beside "Watch bigger" in the service panels: a taller tap area (40px, like the
   button next to them) without moving the text or its underline */
.msg a.nl{position:relative}
.msg a.nl::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:40px;transform:translateY(-50%)}

/* Home page "Daily readings": no box, just the heading, today's readings in one slim strip
   and the button. A soft lavender light drifts slowly inside the strip; it stops with the
   pause button and for visitors who ask for reduced motion. */
.dv-home{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.dv-strip{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;max-width:100%;box-sizing:border-box;padding:12px 26px 12px 12px;border-radius:999px;background:#1B1D45;border:1px solid rgba(199,185,242,.24);box-shadow:0 18px 40px -28px rgba(0,0,0,.9)}
.dv-strip::before{content:"";position:absolute;z-index:-1;top:-70%;bottom:-70%;left:-18%;width:50%;background:radial-gradient(closest-side,rgba(199,185,242,.3),rgba(199,185,242,0));animation:dvlight 11s ease-in-out infinite alternate}
@keyframes dvlight{from{transform:translateX(0)}to{transform:translateX(190%)}}
.dv-strip.is-in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.dv-strip-today{padding:6px 12px;border-radius:999px;background:#C7B9F2;color:#111330;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.dv-strip-date{font-family:var(--serif);font-size:20px;color:#F5EFE6}
.dv-strip-sep{width:1px;height:22px;background:rgba(245,239,230,.2)}
.dv-strip .dv-pass{gap:6px 20px}
.dv-strip .dv-pass a{font-size:19px}
html.motion-paused .m-on .dv-strip::before{animation-play-state:paused!important}
@media (max-width: 640px){
  .dv-strip{flex-direction:column;gap:10px;padding:18px 20px 20px;border-radius:16px;width:100%}
  .dv-strip-sep{display:none}
  .dv-strip .dv-pass{justify-content:center}
}

/* Daily readings page (readings.html): the top, the SPACE guide and the slim footer */
.rd-top{padding:150px 0 56px;background:linear-gradient(180deg,#1E1F52 0%,#161946 50%,#111330 100%)}
.rd-wrap{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.rd-back{margin-bottom:6px}
.rd-back:hover{border-color:rgba(245,239,230,.55)!important}
.rd-back:focus-visible{outline:2px solid #C7B9F2;outline-offset:3px}
.rd-title{margin:0;font-size:clamp(46px,5.6vw,78px);line-height:1.04;letter-spacing:-.015em}
.rd-lead{margin:0;max-width:32em;font-size:20px;line-height:1.55;color:rgba(245,239,230,.78);text-wrap:balance}
.rd-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-size:17px;padding-top:6px}
.space-box{background:#1B1D45;border-radius:12px;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:44px}
.space-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.space-list li{display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px;border-radius:12px;background:rgba(245,239,230,.04);border:1px solid rgba(245,239,230,.08)}
.space-k{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-style:italic;font-weight:500;font-size:64px;line-height:.9;color:#C7B9F2}
.space-t{font-family:var(--serif);font-size:22px;line-height:1.2;color:#F5EFE6}
.space-q{font-size:17px;line-height:1.5;color:rgba(245,239,230,.74)}
.space-how{display:flex;flex-direction:column;gap:16px;padding-top:30px;border-top:1px solid rgba(245,239,230,.1)}
.space-how-t{margin:0;color:#C7B9F2}
.space-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px}
.space-steps li{counter-increment:step;display:flex;gap:12px;font-size:17px;line-height:1.5;color:rgba(245,239,230,.84)}
.space-steps li::before{content:counter(step);flex:none;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(199,185,242,.55);color:#C7B9F2;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.rd-foot{background:#111330}
@media (max-width: 1100px){.space-list{grid-template-columns:repeat(3,minmax(0,1fr))}.space-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){
  .rd-top{padding:124px 0 40px}
  .space-list{grid-template-columns:minmax(0,1fr)}
  .space-list li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px 18px 20px}
  .space-k{grid-row:1 / 3;font-size:48px}
  .space-steps{grid-template-columns:minmax(0,1fr)}
  .dv-space{margin-left:0}
}

/* Become a member: no box, just the heading, the line and the button */
#membership .member{background:none;border-radius:0;padding:0;overflow:visible}
#membership .member::before{display:none}
#membership .member-title{font-size:clamp(38px,4.4vw,60px)}
@media (max-width: 520px){.dv-cta{width:100%}.dv-cta>span:first-child{flex:1;justify-content:center;white-space:nowrap;padding:0 14px!important;font-size:17px!important}}