/* ============================================================
   HOME PAGE — "Keren Manuscript" design
   ============================================================ */
.ge{font-family:var(--ethiopic)}

/* ---------- Hero: the Ge'ez verse is the image ---------- */
.hero-ms{min-height:0;display:block;background:var(--nave)}
.hero-ms .hero-shade{background:linear-gradient(90deg,color-mix(in srgb,var(--nave) 88%,transparent),color-mix(in srgb,var(--nave) 50%,transparent) 70%,color-mix(in srgb,var(--nave) 30%,transparent))}
.hero-ms .hero-inner{position:relative;z-index:1;padding-block:clamp(56px,10vw,120px) clamp(76px,9vw,110px)}
.hero-ms h1.verse{font-family:var(--ethiopic);font-weight:400;line-height:1.05;font-size:clamp(3.1rem,1.4rem + 8vw,8.5rem);color:var(--on-nave);max-width:12ch;margin:0;text-transform:none;letter-spacing:.01em;text-wrap:wrap}
.verse span{display:inline-block;opacity:0;transform:translateY(.15em);animation:write .5s ease forwards}
@keyframes write{to{opacity:1;transform:none}}
.verse-sub{margin-top:16px;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-style:italic;color:var(--on-nave);max-width:46ch}
html[lang="ti"] .verse-sub{font-style:normal;font-family:var(--ethiopic)}
.verse-ref{margin-top:4px;color:var(--on-nave-muted)}
.verse-ref .ge{color:var(--on-nave-muted);margin-left:6px}
.hero-ms .hero-text{max-width:52ch;margin:26px 0 0;font-size:1.12rem;color:var(--on-nave);line-height:1.7}
.hero-ms .btn{margin-top:26px}
.hero-ms .hero-controls{bottom:30px;left:auto;right:var(--gutter);transform:none}
.hero-harag{position:absolute;left:0;right:0;bottom:0;z-index:2}
@media (prefers-reduced-motion:reduce){ .verse span{animation:none;opacity:1;transform:none} }

/* ---------- Sections ---------- */
.hm-sec{padding-block:clamp(44px,7vw,84px)}
.hm-tight{padding-top:0}
.hm-white{background:var(--leaf);border-block:1px solid var(--line)}
.hm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:26px}
.hm-head h2{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;color:var(--ink)}
html[lang="ti"] .hm-head h2{font-family:var(--ethiopic)}
.hm-head .ge{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);color:var(--red)}
.hm-head a{margin-left:auto;color:var(--navy);font-weight:700}

/* ---------- Quick links: ribbon markers hanging from a harag band (hover/tap pulls one down, icon draws in) ---------- */
.ribbons{position:relative;max-width:760px;margin:0 auto}
.rib-rail{height:18px;border-radius:var(--radius-1);box-shadow:none;position:relative;z-index:1}
.ribbons ul{list-style:none;margin:0;padding:0 clamp(8px,4vw,40px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,2.4vw,26px)}
.rib{--c:var(--pigment-red);position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;height:clamp(150px,18vw,184px);padding:30px 6px 0;color:var(--on-pigment);text-align:center;font-weight:700;font-size:clamp(.8rem,.72rem + .35vw,1rem);line-height:1.2;
  background:var(--c);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  transform-origin:50% 0;transform:translateY(-14px);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.rib-navy{--c:var(--pigment-lapis)}
.rib-ochre{--c:var(--pigment-ochre)}
.rib::before{content:"";position:absolute;inset:0 4px;border-inline:1px solid var(--gold-leaf);pointer-events:none}   /* the gilded edges of a bookmark */
html[lang="ti"] .rib{font-family:var(--ethiopic);font-weight:400}
.rib svg{width:clamp(30px,4vw,42px);height:clamp(30px,4vw,42px);flex:none;fill:none;stroke:var(--on-pigment);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rib:hover,.rib:focus-visible,.rib:active{text-decoration:none;transform:translateY(0) rotate(-1.5deg)}
.ribbons li:nth-child(even) .rib:hover,.ribbons li:nth-child(even) .rib:focus-visible{transform:translateY(0) rotate(1.5deg)}
.rib:focus-visible{outline:none}
.rib:focus-visible span{outline:2px solid var(--on-pigment);outline-offset:3px;border-radius:var(--radius-1)}
.rib:hover svg path,.rib:focus-visible svg path{stroke-dasharray:1;animation:rib-draw .9s cubic-bezier(.4,0,.2,1) both}
.rib:hover svg path:nth-child(2),.rib:focus-visible svg path:nth-child(2){animation-delay:.1s}
.rib:hover svg path:nth-child(3),.rib:focus-visible svg path:nth-child(3){animation-delay:.2s}
.rib:hover svg path:nth-child(4),.rib:focus-visible svg path:nth-child(4){animation-delay:.3s}
@keyframes rib-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:520px){.ribbons ul{padding:0 2px;gap:5px}.rib{padding-inline:2px;letter-spacing:-.01em}}
@media (prefers-reduced-motion:reduce){.rib{transition:none}.rib svg path{animation:none !important}}

/* ---------- Shepherds: arched portraits with a cross ---------- */
.shepherds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:end;padding-top:8px}
.shep{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:end;color:var(--ink)}
.shep:hover{text-decoration:none}
.arch{position:relative;width:clamp(120px,16vw,190px);aspect-ratio:3/4;border-radius:999px 999px 0 0;background:center top/cover no-repeat var(--parch);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--gold)}
.shep-text{display:flex;flex-direction:column}
.shep .role{color:var(--muted);font-style:italic}
.shep-name{font-size:1.5rem;font-weight:700;line-height:1.2}
html[lang="ti"] .shep-name{font-family:var(--ethiopic)}
.shep .ge{color:var(--red);font-size:1.2rem}
.shep-more{margin-top:8px;color:var(--navy);font-weight:700}
.shep:hover .shep-name{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}

/* ---------- News: one lead story, then a list ---------- */
.hm-news{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.hm-lead{color:var(--ink)}
.hm-lead:hover{text-decoration:none}
.hm-lead-img{aspect-ratio:4/3;background:center/cover no-repeat var(--leaf);border-radius:var(--radius-1)}
.hm-lead h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;margin-top:16px}
html[lang="ti"] .hm-lead h3,html[lang="ti"] .hm-list strong{font-family:var(--ethiopic)}
.hm-lead p{color:var(--ink-muted);margin-top:8px;max-width:60ch}
.hm-lead:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hm-date{display:block;color:var(--muted);font-size:.95rem}
.hm-date .ge{color:var(--red);margin-right:8px}
.hm-list{list-style:none;border-top:2px solid var(--ink)}
.hm-list li{border-bottom:1px solid var(--line)}
.hm-list a{display:block;padding:16px 0;color:var(--ink)}
.hm-list a:hover{text-decoration:none}
.hm-list strong{display:block;font-size:1.15rem;line-height:1.3;margin-top:2px}
.hm-list a:hover strong{color:var(--red)}

/* ---------- Calendar: a manuscript page ---------- */
.ms{position:relative;background:var(--parch);padding:clamp(28px,4vw,48px);border-radius:var(--radius-1);box-shadow:0 1px 0 var(--rule)}
.ms .harag{margin:-6px 0 22px}
.ms-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.ms-month{font-family:var(--ethiopic);color:var(--red);font-size:clamp(3rem,2rem + 4vw,5.5rem);line-height:.95}
.ms-month small{display:block;font-family:var(--serif);font-size:1rem;color:var(--muted);margin-top:8px}
.ms-feasts{list-style:none}
.ms-feasts li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dotted var(--rule)}
.ms-feasts .d{font-family:var(--ethiopic);font-size:1.7rem;color:var(--red);text-align:right;line-height:1}
.ms-feasts .d.plain{color:var(--ink)}
.ms-feasts .n{font-size:1.12rem}
.ms-feasts .n .ge{display:block;font-size:1rem;color:var(--ink-muted)}
.ms-feasts .g{color:var(--muted);font-size:.95rem;white-space:nowrap}
.ms-link{display:inline-block;margin-top:20px;color:var(--navy);font-weight:700}

/* ---------- Building project ---------- */
.build-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:16px 32px;align-items:center;padding:24px 28px;background:var(--leaf);border:1px solid var(--line);border-top:4px solid var(--gold-leaf);border-radius:var(--radius)}
.build-row h2{font-size:1.35rem}
html[lang="ti"] .build-row h2{font-family:var(--ethiopic)}
.build-row p{color:var(--muted)}
.build-row .progress{margin:0}
.r-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border-radius:var(--radius-1);border:1px solid var(--rule-control);background:transparent;color:var(--ink);font-weight:700;font-size:.95rem;white-space:nowrap}
.r-btn:hover{background:var(--leaf);border-color:var(--ink);color:var(--ink);text-decoration:none}

/* ---------- Phones ---------- */
@media (max-width:820px){
  .shepherds,.hm-news,.ms-grid,.build-row{grid-template-columns:1fr}
  .ms-feasts li{grid-template-columns:48px 1fr}
  .ms-feasts .g{grid-column:2;margin-top:-6px}
  .hero-ms .hero-controls{right:50%;transform:translateX(50%)}
}
.sl-pause .i-play{display:none}
.sl-pause.is-paused .i-play{display:block}
.sl-pause.is-paused .i-pause{display:none}
.sl-pause svg path{stroke:var(--on-pigment)}
.sl-pause .i-play path{fill:var(--on-pigment)}
.hero-harag{height:30px}
.ms .harag{height:26px;margin:-6px 0 24px}

/* ---------- PASTORAL LIFE: an open book (left page = contents, right page = the chosen initiative) ---------- */
.folio{position:relative;display:grid;grid-template-columns:minmax(230px,310px) minmax(0,1fr);border-radius:var(--radius-1);background:var(--leaf);box-shadow:0 1px 0 var(--rule)}
.fol-index{padding:clamp(22px,3vw,34px) 0 clamp(22px,3vw,34px) clamp(18px,2.4vw,28px);background:var(--parch);border-radius:var(--radius-1) 0 0 var(--radius-1);box-shadow:inset -16px 0 18px -16px color-mix(in srgb,var(--ink) 28%,transparent)}
.fol-index .harag{height:20px;margin:0 clamp(18px,2.4vw,28px) 18px 0}
.fol-tabs{display:flex;flex-direction:column;gap:4px}
.fol-tabs button{position:relative;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;width:100%;min-height:58px;padding:10px 18px 10px 14px;border:0;border-left:3px solid transparent;border-radius:999px 0 0 999px;background:none;color:var(--ink);font:inherit;font-size:1.06rem;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.fol-tabs svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fol-tn{display:flex;flex-direction:column;line-height:1.2}
html[lang="ti"] .fol-tn{font-family:var(--ethiopic)}
.fol-tn .ge{font-size:.86rem;color:var(--muted)}
.fol-tabs button:hover{background:color-mix(in srgb,var(--leaf-raised) 55%,transparent);color:var(--red)}
.fol-tabs button[aria-selected="true"]{background:var(--leaf);color:var(--red);font-weight:700;border-left-color:var(--gold);box-shadow:none}
.fol-tabs button:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}

.fol-page{position:relative;min-height:400px;padding:clamp(26px,4vw,52px) clamp(22px,4.5vw,60px);perspective:1400px;touch-action:pan-y}
.fol-panel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;transform-origin:left center}
.fol-panel[hidden]{display:none}
.fol-panel:focus-visible{outline:3px solid var(--navy);outline-offset:8px;border-radius:var(--radius-1)}
.fol-ic{width:64px;height:64px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fol-panel h3{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.15;color:var(--red)}
html[lang="ti"] .fol-panel h3{font-family:var(--ethiopic);font-weight:400}
.fol-d{max-width:54ch;font-size:1.12rem;line-height:1.65;color:var(--ink)}
.fol-d::first-letter{float:left;margin:4px 10px 0 0;font-family:var(--serif);font-size:3.3em;line-height:.8;color:var(--red)}
html[lang="ti"] .fol-d::first-letter{float:none;margin:0;font:inherit;color:inherit}
.fol-live{width:100%;max-width:560px;padding-top:14px;border-top:1px dotted var(--rule);color:var(--muted);font-size:1rem}
.fol-live:empty{display:none}
.fol-live strong{color:var(--ink)}
.fol-date{display:inline-flex;align-items:baseline;gap:6px;margin-right:8px;padding:2px 10px;border-radius:var(--radius-1);background:var(--parch);font-family:var(--ethiopic);color:var(--ink)}
.fol-date b{font-weight:400;font-size:1.25rem;color:var(--red)}
.fol-bar{height:8px;margin-top:10px;border-radius:var(--radius-1);background:var(--line);overflow:hidden}
.fol-bar span{display:block;height:100%;border-radius:inherit;background:var(--gold-leaf)}
.fol-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fol-tags li{padding:6px 14px;border:1px solid var(--gold-soft);border-radius:var(--radius-1);background:var(--leaf);font-size:.95rem}
.fol-steps{list-style:none;margin:0;padding:0;width:100%;max-width:620px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fol-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:.95rem;line-height:1.3}
.fol-steps li:not(:last-child)::after{content:"";position:absolute;top:17px;left:44px;right:4px;height:1px;background:var(--gold-soft)}
.fol-steps b{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--red);border-radius:50%;font-family:var(--ethiopic);font-weight:400;font-size:1.1rem;color:var(--red);background:var(--leaf)}
.fol-panel .btn{margin-top:8px}
.fol-no{position:absolute;right:clamp(16px,2.4vw,28px);bottom:14px;font-family:var(--ethiopic);font-size:1.15rem;color:var(--gold)}

/* turning the page: the new page swings in from the spine, its symbol draws itself */
.fol-panel.is-turn{animation:fol-turn .5s cubic-bezier(.2,.7,.2,1) both}
.fol-panel.is-turn .fol-ic path,.fol-panel.is-turn .fol-ic circle{stroke-dasharray:1;animation:rib-draw 1.1s cubic-bezier(.4,0,.2,1) both}
.fol-panel.is-turn .fol-ic :nth-child(2){animation-delay:.12s}
.fol-panel.is-turn .fol-ic :nth-child(3){animation-delay:.24s}
.fol-panel.is-turn .fol-ic :nth-child(4){animation-delay:.36s}
@keyframes fol-turn{from{opacity:0;transform:rotateY(-14deg) translateX(22px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .folio{grid-template-columns:minmax(0,1fr)}
  .fol-index,.fol-page{min-width:0}
  .fol-index{padding:14px 0 0;border-radius:var(--radius-1) var(--radius-1) 0 0;box-shadow:inset 0 -14px 16px -14px color-mix(in srgb,var(--ink) 25%,transparent)}
  .fol-index .harag{margin:0 14px 10px}
  .fol-tabs{flex-direction:row;overflow-x:auto;gap:2px;padding:0 10px;scrollbar-width:none}
  .fol-tabs::-webkit-scrollbar{display:none}
  .fol-tabs button{flex:none;width:auto;grid-template-columns:22px auto;gap:8px;min-height:48px;padding:8px 14px;border-left:0;border-bottom:3px solid transparent;border-radius:var(--radius-0) var(--radius-0) 0 0;font-size:.95rem}
  .fol-tabs svg{width:22px;height:22px}
  .fol-tabs button[aria-selected="true"]{border-bottom-color:var(--gold);box-shadow:none}
  .fol-tn .ge{display:none}
  .fol-page{min-height:0;padding:24px 20px 44px}
  .fol-ic{width:52px;height:52px}
  .fol-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .fol-steps li::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fol-panel.is-turn,.fol-panel.is-turn .fol-ic *{animation:none !important}
}

/* ---------- THE EPARCHY IN NUMBERS: counters + a field of lights ---------- */
.st{position:relative;padding:0 clamp(18px,3.5vw,44px) clamp(22px,3vw,34px);border-radius:var(--radius-1);background:var(--nave);color:var(--on-nave);box-shadow:none;overflow:hidden}
.st > .harag{height:22px;margin:0 calc(-1 * clamp(18px,3.5vw,44px)) clamp(18px,2.4vw,26px)}
.st-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2.6vw,28px)}
.st-filter button{min-height:44px;padding:0 18px;border:1px solid color-mix(in srgb,var(--gold-wash) 35%,transparent);border-radius:var(--radius-1);background:transparent;color:var(--on-nave);font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
html[lang="ti"] .st-filter button{font-family:var(--ethiopic);font-weight:400}
.st-filter button:hover{border-color:var(--gold)}
.st-filter button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--nave)}
.st-filter button:focus-visible{outline:2px solid var(--on-nave-gold);outline-offset:2px}
.st-nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;border-block:1px solid color-mix(in srgb,var(--gold-wash) 18%,transparent)}
.st-nums > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:18px 14px 16px;border-left:1px solid color-mix(in srgb,var(--gold-wash) 18%,transparent);transition:opacity .3s}
.st-nums > div:first-child{border-left:0;padding-left:0}
.st-nums dt{font-size:.95rem;color:color-mix(in srgb,var(--on-nave) 72%,transparent)}
html[lang="ti"] .st-nums dt{font-family:var(--ethiopic)}
.st-nums dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.st-n{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);line-height:1;color:var(--on-nave);font-variant-numeric:tabular-nums}
.st-ge{font-family:var(--ethiopic);font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);color:var(--gold)}
.st-wide{flex-basis:100%;font-size:.8rem;font-style:italic;color:color-mix(in srgb,var(--on-nave) 60%,transparent)}
.st-nums > div.is-wide{opacity:.55}

.st-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,24px);margin-top:clamp(18px,2.6vw,28px)}
.st-cl{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px 12px;border:1px solid transparent;border-radius:var(--radius-0);background:none;color:inherit;font:inherit;cursor:pointer;transition:opacity .35s,border-color .2s,background-color .2s}
.st-cl:hover{border-color:color-mix(in srgb,var(--gold-wash) 25%,transparent)}
.st-cl:focus-visible{outline:2px solid var(--on-nave-gold);outline-offset:2px}
.st-cl[aria-pressed="true"]{border-color:color-mix(in srgb,var(--gold-leaf) 60%,transparent);background:color-mix(in srgb,var(--gold-leaf) 8%,transparent)}
.st-cl.is-dim{opacity:.28}
.st-cl svg{width:100%;max-width:210px;aspect-ratio:1;overflow:visible}
.st-ring{fill:none;stroke:color-mix(in srgb,var(--gold-wash) 16%,transparent);stroke-dasharray:2 3}
.st-cl b{font-family:var(--serif);font-size:1.15rem;font-weight:700}
html[lang="ti"] .st-cl b{font-family:var(--ethiopic);font-weight:400}
.st-cl small{font-size:.85rem;color:color-mix(in srgb,var(--on-nave) 65%,transparent)}
.st-cl.is-all b{color:var(--gold)}
.lt{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.lt:hover,.lt:focus-visible{transform:scale(1.8);outline:none}
.lt-par{fill:var(--rubric);filter:drop-shadow(0 0 2px rgba(232,102,90,.9))}
.lt-cha{fill:var(--ink-muted);filter:drop-shadow(0 0 2px rgba(154,184,238,.85))}
.lt-san{fill:var(--gold-leaf);filter:drop-shadow(0 0 3px rgba(230,182,94,.95))}
.lt.is-on{fill:var(--on-pigment)}
.st.is-wait .lt{opacity:0}
.st.is-lit .lt{animation:lt-in .5s ease-out both}
@keyframes lt-in{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}

.st-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--gold-wash) 18%,transparent)}
.st-cap{min-height:1.5em;color:color-mix(in srgb,var(--on-nave) 80%,transparent);font-size:.95rem}
.st-cap strong{color:var(--on-nave)}
.st-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:color-mix(in srgb,var(--on-nave) 75%,transparent)}
.st-legend li{display:inline-flex;align-items:center;gap:7px}
.st-legend i{width:10px;height:10px;border-radius:50%}
.lg-par{background:var(--pigment-red)}.lg-cha{background:var(--pigment-lapis)}
.lg-san{background:var(--gold-leaf);border-radius:0 !important;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:13px !important;height:13px !important}

@media (max-width:760px){
  .st-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-nums > div{padding:14px 12px;border-left:0;border-top:1px solid color-mix(in srgb,var(--gold-wash) 18%,transparent)}
  .st-nums > div:nth-child(-n+2){border-top:0}
  .st-nums > div:nth-child(even){border-left:1px solid color-mix(in srgb,var(--gold-wash) 18%,transparent)}
  .st-nums > div:first-child{padding-left:12px}
  .st-nums > div:last-child{grid-column:1 / -1}
  .st-field{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-filter button{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.st.is-lit .lt{animation:none}.st.is-wait .lt{opacity:1}.lt,.st-cl{transition:none}}

/* ---------- CESK INVITATION: the mesob of service (six woven parts, one per area) ---------- */
.ckc{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,52px);background:var(--leaf);border:1px solid var(--line);border-radius:var(--radius-1);box-shadow:none;overflow:hidden}
.ckc::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--pigment-red)}
.ckc-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px;color:var(--muted)}
.ckc-who span:first-child{font-weight:700;letter-spacing:.06em;color:var(--red)}
.ckc-who span:last-child{font-style:italic}
html[lang="ti"] .ckc-who span:last-child{font-family:var(--ethiopic);font-style:normal}
.ckc h2{font-family:var(--serif);font-size:clamp(1.8rem,1.3rem + 2vw,2.7rem);line-height:1.1;color:var(--ink)}
html[lang="ti"] .ckc h2{font-family:var(--ethiopic)}
.ckc-lead{margin:12px 0 0;max-width:52ch;font-size:1.08rem;color:var(--muted)}
.ckc-area{min-height:132px;margin:22px 0;padding:16px 18px;border-left:4px solid var(--c,var(--gold));border-radius:0 var(--radius-0) var(--radius-0) 0;background:var(--leaf);transition:border-color .3s}
.ckc-hint{color:var(--muted);font-style:italic}
html[lang="ti"] .ckc-hint{font-style:normal}
.ckc-area h3{font-family:var(--serif);font-size:1.35rem;color:var(--ink);color:color-mix(in srgb,var(--c,var(--ink)) 72%,var(--ink))}
html[lang="ti"] .ckc-area h3{font-family:var(--ethiopic)}
.ckc-area p{margin:6px 0 8px;color:var(--ink)}
.ckc-area .more{font-weight:700}
.ckc-area.is-new > *{animation:ckc-in .35s ease-out both}
@keyframes ckc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ckc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

.ckc-mesob{position:relative;width:100%;max-width:440px;justify-self:center}
.ckc-mesob svg{display:block;width:100%;height:auto;overflow:visible}
.ckc-ring{transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.ckc-seg{cursor:pointer;outline:none;transition:opacity .3s}
.ckc-seg .base{transition:transform .35s cubic-bezier(.3,.7,.2,1),filter .3s}
.ckc-seg .weave{fill:none;stroke:color-mix(in srgb,var(--on-nave) 38%,transparent);stroke-width:1.6;stroke-dasharray:3 3.5;pointer-events:none}
.ckc-seg .ic{fill:none;stroke:var(--on-pigment);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.ckc.has-sel .ckc-seg:not(.is-sel){opacity:.5}
.ckc-seg:hover .base,.ckc-seg:focus-visible .base{filter:brightness(1.12)}
.ckc-seg:focus-visible .base{stroke:var(--ink);stroke-width:2.5}
.ckc-rim{fill:none;stroke:var(--gold);stroke-width:3}
.ckc-rim2{fill:none;stroke:var(--gold-soft);stroke-width:1.5;stroke-dasharray:2 3}
.ckc-mid{fill:var(--parch);stroke:var(--gold);stroke-width:2}
.ckc-mid2{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:2 3}
.ckc-centre{position:absolute;left:50%;top:50%;width:40%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.ckc-centre b{font-family:var(--serif);font-size:clamp(.95rem,.8rem + .7vw,1.25rem);line-height:1.15;color:var(--red);color:color-mix(in srgb,var(--c,var(--red)) 72%,var(--ink))}
html[lang="ti"] .ckc-centre b{font-family:var(--ethiopic);font-weight:400}
.ckc-centre small{font-family:var(--ethiopic);font-size:.85rem;color:var(--muted)}
.ckc.is-wait .ckc-seg{opacity:0}
.ckc.is-woven .ckc-seg{animation:ckc-weave .6s cubic-bezier(.3,.7,.2,1) both}
@keyframes ckc-weave{from{opacity:0;transform:scale(.6) rotate(-20deg)}to{opacity:1;transform:none}}
.ckc-list{list-style:none;margin:0;padding:0;grid-column:1 / -1;display:grid;gap:8px}
.ckc.js .ckc-list{display:none}

@media (max-width:760px){
  .ckc{grid-template-columns:1fr}
  .ckc-mesob{grid-row:1;max-width:320px}
  .ckc-area{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .ckc-ring,.ckc-seg .ic,.ckc-seg .base{transition:none}
  .ckc.is-woven .ckc-seg,.ckc-area.is-new > *{animation:none}
  .ckc.is-wait .ckc-seg{opacity:1}
}

/* ---------- CALENDAR: the liturgical year as a scroll ---------- */
.yr-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:stretch}
.yr-today{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center}
.yr-d{grid-row:span 3;font-family:var(--ethiopic);font-size:clamp(3.6rem,2.4rem + 4vw,5.6rem);line-height:.9;color:var(--red)}
.yr-mo{font-family:var(--ethiopic);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);line-height:1.1;color:var(--ink)}
.yr-sub{color:var(--muted);font-size:.98rem}
.yr-fastnow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.92rem;color:var(--lapis)}
.yr-fastnow i{display:inline-block;width:70px;height:6px;border-radius:var(--radius-1);background:color-mix(in srgb,var(--pigment-lapis) 18%,transparent);overflow:hidden}
.yr-fastnow i b{display:block;height:100%;background:var(--pigment-lapis);border-radius:inherit}
.yr-next{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 18px;border-top:4px solid var(--pigment-red);background:color-mix(in srgb,var(--leaf-raised) 55%,transparent);border-radius:0 var(--radius-0) var(--radius-0) 0}
.yr-next small{color:var(--muted);font-style:italic}
html[lang="ti"] .yr-next small{font-style:normal}
.yr-next strong{font-size:1.2rem;line-height:1.2}
html[lang="ti"] .yr-next strong{font-family:var(--ethiopic);font-weight:400}
.yr-count{display:flex;align-items:baseline;gap:8px}
.yr-count b{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--red)}
.yr-count span{color:var(--muted)}
.yr-count em{font-style:normal;font-family:var(--ethiopic);color:var(--gold);font-size:1.2rem}

.yr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:clamp(20px,3vw,30px) 0 8px}
.yr-hint{color:var(--muted);font-size:.92rem}
.yr-nav{display:flex;gap:6px}
.yr-nav button{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--radius-1);background:var(--leaf);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
html[lang="ti"] .yr-nav button{font-family:var(--ethiopic);font-weight:400}
.yr-nav button:hover{border-color:var(--gold);color:var(--red)}
.yr-nav button:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.yr-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.yr-scroll{position:relative;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * clamp(28px,4vw,48px));padding:0 clamp(28px,4vw,48px);cursor:grab;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.yr-scroll.is-drag{cursor:grabbing;user-select:none}
.yr-scroll:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.yr-track{position:relative;height:210px}
.yr.is-wait .yr-track{clip-path:inset(0 100% 0 0)}
.yr.is-open .yr-track{animation:yr-unroll 1.4s cubic-bezier(.4,0,.2,1) both}
@keyframes yr-unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.yr-m{position:absolute;top:128px;height:44px;display:flex;flex-direction:column;justify-content:center;padding-left:8px;border-left:1px solid var(--rule);font-family:var(--ethiopic);font-size:.98rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.yr-m:nth-child(even){background:color-mix(in srgb,var(--gold-leaf) 7%,transparent)}
.yr-m small{font-family:var(--serif);font-size:.72rem;color:var(--muted)}
.yr-m.is-new{border-top:4px solid var(--pigment-red)}
.yr-m.is-new small{color:var(--red)}
.yr-axis{position:absolute;left:56px;right:56px;top:128px;height:1px;background:var(--gold-leaf)}
.yr-fast{position:absolute;top:178px;height:24px;display:flex;align-items:center;padding:0 8px;border-radius:var(--radius-1);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--pigment-lapis) 22%,transparent) 0 6px,color-mix(in srgb,var(--pigment-lapis) 12%,transparent) 6px 12px);border:1px solid color-mix(in srgb,var(--lapis) 35%,transparent);color:var(--lapis);font-size:.78rem;white-space:nowrap;overflow:hidden;cursor:pointer}
html[lang="ti"] .yr-fast{font-family:var(--ethiopic)}
.yr-fast:hover,.yr-fast.is-sel{background:color-mix(in srgb,var(--pigment-lapis) 32%,transparent)}
.yr-fast:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
.yr-f{position:absolute;bottom:82px;width:22px;margin-left:-11px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.yr-f::before{content:"";order:2;width:2px;height:var(--h,34px);background:var(--gold)}
.yr-f i{order:1;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--leaf);transition:transform .2s}
.yr-f.is-major::before{background:var(--pigment-red)}
.yr-f.is-major i{width:14px;height:14px;background:var(--pigment-red)}
.yr-f span{position:absolute;bottom:calc(var(--h,34px) + 18px);left:50%;transform:translateX(-50%);font-size:.8rem;font-weight:700;color:var(--red);white-space:nowrap;pointer-events:none}
html[lang="ti"] .yr-f span{font-family:var(--ethiopic);font-weight:400}
.yr-f:hover i,.yr-f:focus-visible i,.yr-f.is-sel i{transform:scale(1.45)}
.yr-f.is-sel i{box-shadow:0 0 0 3px var(--leaf),0 0 0 5px var(--navy)}
.yr-f:focus-visible{outline:none}
.yr-past{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--leaf) 55%,transparent),color-mix(in srgb,var(--leaf) 25%,transparent));pointer-events:none}
.yr-now{position:absolute;top:6px;bottom:4px;width:2px;margin-left:-1px;background:var(--pigment-lapis);pointer-events:none}
.yr-now b{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:var(--radius-1);background:var(--pigment-lapis);color:var(--on-pigment);font-size:.75rem;white-space:nowrap}
html[lang="ti"] .yr-now b{font-family:var(--ethiopic);font-weight:400}

.yr-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;margin-top:14px;padding-top:14px;border-top:1px dotted var(--rule)}
.yr-card{min-height:3.2em;max-width:62ch}
.yr-card strong{display:block;font-size:1.12rem;color:var(--red)}
html[lang="ti"] .yr-card strong{font-family:var(--ethiopic);font-weight:400}
.yr-card span{color:var(--muted)}
.yr-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--muted)}
.yr-legend li{display:inline-flex;align-items:center;gap:7px}
.yr-legend i{width:11px;height:11px;border-radius:50%}
.lg-major{background:var(--pigment-red)}.lg-feast{background:var(--gold)}
.lg-fast{border-radius:var(--radius-1) !important;width:18px !important;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--pigment-lapis) 40%,transparent) 0 3px,color-mix(in srgb,var(--pigment-lapis) 18%,transparent) 3px 6px)}

@media (max-width:760px){
  .yr-top{grid-template-columns:1fr}
  .yr-hint{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.yr.is-open .yr-track{animation:none}.yr.is-wait .yr-track{clip-path:none}.yr-f i{transition:none}}

/* ---------- QUESTIONS (margin notes) + NEWSLETTER (a sealed letter) ---------- */
.fn-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:clamp(22px,3.5vw,44px);align-items:start}
.fq-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fq-topics{display:flex;flex-wrap:wrap;gap:6px}
.fq-topics button{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-1);background:var(--leaf);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
html[lang="ti"] .fq-topics button{font-family:var(--ethiopic);font-weight:400}
.fq-topics button:hover{border-color:var(--gold)}
.fq-topics button[aria-pressed="true"]{background:var(--pigment-lapis);border-color:var(--navy);color:var(--on-pigment)}
.fq-topics button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fq-search{position:relative;flex:1 1 220px;max-width:320px}
.fq-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.fq-search input{width:100%;min-height:44px;padding:0 14px 0 40px;border:1px solid var(--line);border-radius:var(--radius-1);background:var(--leaf);font:inherit;color:var(--ink)}
.fq-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-leaf) 20%,transparent)}
.fq-list{position:relative;padding:6px 0 6px clamp(34px,4vw,48px);background:var(--leaf);border:1px solid var(--line);border-radius:var(--radius-1)}
.fq-list::before{content:"";position:absolute;top:0;bottom:0;left:clamp(24px,3vw,34px);width:1px;background:color-mix(in srgb,var(--pigment-red) 45%,transparent)}
.fq-item{position:relative;border-bottom:1px dotted var(--rule)}
.fq-item:last-child{border-bottom:0}
.fq-item summary{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px 12px 6px;list-style:none;cursor:pointer;font-family:var(--serif);font-size:1.08rem;font-weight:700;color:var(--ink)}
html[lang="ti"] .fq-item summary{font-family:var(--ethiopic);font-weight:400}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::before{content:"፨";position:absolute;left:calc(-1 * clamp(26px,3.2vw,38px));top:50%;transform:translateY(-50%);font-family:var(--ethiopic);font-size:1.1rem;color:var(--gold);transition:color .2s,transform .3s}
.fq-item[open] summary::before,.fq-item summary:hover::before{color:var(--red)}
.fq-item[open] summary::before{transform:translateY(-50%) rotate(90deg)}
.fq-item summary span{flex:1}
.fq-item summary svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.fq-item[open] summary svg{transform:rotate(180deg)}
.fq-item summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px;border-radius:var(--radius-1)}
.fq-a{padding:0 18px 16px 6px;color:var(--muted);max-width:64ch}
.fq-a p{margin:0 0 6px}
.fq-a .more{font-weight:700}
.fq-item[open] .fq-a{animation:fq-open .3s ease-out}
@keyframes fq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fq-item .sample-tag{margin-left:8px;vertical-align:middle}
.fq-none{padding:18px 6px;color:var(--muted);font-style:italic}
.fq mark{background:color-mix(in srgb,var(--gold-leaf) 28%,transparent);color:inherit;border-radius:var(--radius-1)}
.fq-more{margin-top:12px;color:var(--muted)}
.fq-more a{font-weight:700}

.nl{position:relative;margin-top:clamp(0px,4.4vw,58px);padding:0;border-radius:var(--radius-0);background:var(--nave);color:var(--on-nave);box-shadow:none;overflow:hidden}
.nl-env{position:relative;height:74px;perspective:600px}
.nl-flap{position:absolute;inset:0;background:var(--pigment-lapis);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.nl-env::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--gold-wash) 25%,transparent)}
.nl-paper{position:absolute;left:12%;right:12%;bottom:-40px;height:64px;border-radius:var(--radius-1) var(--radius-1) 0 0;background:var(--leaf);box-shadow:none;transition:transform .6s cubic-bezier(.3,.7,.2,1) .1s}
.nl-paper::before,.nl-paper::after{content:"";position:absolute;left:14%;right:14%;height:2px;border-radius:var(--radius-1);background:var(--gold-leaf)}
.nl-paper::before{top:14px}.nl-paper::after{top:24px;right:34%}
.nl-flap{z-index:1}
.nl.is-open .nl-flap{transform:scaleY(.18);opacity:.75}
.nl.is-open .nl-paper{transform:translateY(-34px)}
.nl-in,.nl-done{padding:6px clamp(20px,3vw,30px) clamp(22px,3vw,30px)}
.nl h2{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem);color:var(--on-nave)}
html[lang="ti"] .nl h2{font-family:var(--ethiopic)}
.nl-lead{margin:6px 0 16px;color:color-mix(in srgb,var(--on-nave) 82%,transparent)}
.nl-field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.92rem}
html[lang="ti"] .nl-field{font-family:var(--ethiopic);font-weight:400}
.nl-field input{min-height:48px;padding:0 14px;border:1px solid color-mix(in srgb,var(--gold-wash) 40%,transparent);border-radius:var(--radius-0);background:var(--leaf);color:var(--ink);font:inherit;font-weight:400}
.nl-field input:focus{outline:3px solid var(--gold);outline-offset:1px}
.nl-field input[aria-invalid="true"]{border-color:var(--gold-wash);outline-color:var(--gold-wash)}
.nl-lang{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;padding:0;border:0;font-size:.92rem}
.nl-lang legend{float:left;margin-right:6px;color:color-mix(in srgb,var(--on-nave) 75%,transparent)}
html[lang="ti"] .nl-lang legend{font-family:var(--ethiopic)}
.nl-lang label{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer}
.nl-lang input{accent-color:var(--gold);width:18px;height:18px}
.nl-err{margin:10px 0 0;color:var(--on-nave-muted);font-weight:700}
.nl-seal{display:inline-flex;align-items:center;gap:12px;margin-top:18px;min-height:56px;padding:0 22px 0 6px;border:0;border-radius:999px;background:var(--leaf);color:var(--navy);font:inherit;font-weight:700;cursor:pointer;transition:transform .2s}
html[lang="ti"] .nl-seal{font-family:var(--ethiopic);font-weight:400}
.nl-seal:hover{transform:none}
.nl-seal:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nl-seal[disabled]{opacity:.6;cursor:progress}
.nl-wax{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--pigment-red),var(--pigment-red-deep) 70%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--on-nave) 18%,transparent);font-family:var(--ethiopic);font-size:1.3rem;color:var(--on-nave)}
.nl-note{margin-top:14px;font-size:.82rem;color:color-mix(in srgb,var(--on-nave) 65%,transparent)}
.nl-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:20px}
.nl-done[hidden]{display:none}
.nl-done:focus{outline:none}
.nl-wax-lg{width:76px;height:76px;font-size:2.1rem}
.nl.is-sealed .nl-wax-lg{animation:nl-stamp .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes nl-stamp{from{transform:scale(1.8);opacity:0}to{transform:none;opacity:1}}

@media (max-width:900px){
  .fn-row{grid-template-columns:1fr}
  .nl{margin-top:0;max-width:520px}
  .fq-search{max-width:none}
}
@media (prefers-reduced-motion:reduce){.nl-flap,.nl-paper,.fq-item summary::before,.fq-item summary svg{transition:none}.fq-item[open] .fq-a,.nl.is-sealed .nl-wax-lg{animation:none}}
.fn-row.is-single{grid-template-columns:minmax(0,560px);justify-content:center}

/* the ribbons hang straight from the harag band under the cover photos */
.rib-hang{padding:0 0 clamp(36px,6vw,64px)}
.rib-hang .ribbons{max-width:860px}

/* a tighter Home page: less space between the sections, so the page is not too long */
.hm-sec{padding-block:clamp(28px,3.6vw,48px)}
.hm-head{margin-bottom:20px}
.rib-hang{padding-bottom:8px}
.rib-hang + .hm-sec{padding-top:14px}
.home-ms .vn{padding-block:clamp(24px,3vw,36px)}
.hm-sec.hm-tight{padding-top:0}

/* ---------- News: a magazine grid — the lead story with two beside it, then a row of three ---------- */
.hm-mag{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mg-card{display:flex;flex-direction:column;background:var(--card);box-shadow:none}
.mg-img{display:block;position:relative;aspect-ratio:16/9;background:50% 25%/cover no-repeat var(--leaf);border-bottom:4px solid var(--red)}
.mg-body{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px;flex:1}
.mg-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.mg-kind{width:22px;height:22px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mg-meta time[lang="ti"]{font-family:var(--ethiopic);color:var(--red)}
.mg-share{display:flex;gap:4px;margin-left:auto}
.mg-share a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--on-nave-muted)}
.mg-share a:hover{color:var(--navy);background:color-mix(in srgb,var(--lapis) 8%,transparent)}
.mg-share svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:0}
.mg-share a[aria-label$="WhatsApp"] svg{fill:none;stroke-width:1.8}
.mg-share a[aria-label$="WhatsApp"] svg path + path{fill:currentColor;stroke:none}
.mg-title{font-family:var(--sans);font-weight:700;font-size:1.12rem;line-height:1.3;color:var(--ink)}
.mg-title a{color:inherit}
.mg-title a:hover{color:var(--red);text-decoration:none}
html[lang="ti"] .mg-title{font-family:var(--ethiopic)}
.mg-body .lang-tag{margin:0;align-self:flex-start}
/* the lead story: the photo fills, a red panel below with a large white title */
.mg-lead{grid-column:1 / 3;grid-row:1 / 3}
.mg-lead .mg-img{flex:1;aspect-ratio:auto;min-height:260px;border-bottom:0}
.mg-lead .mg-body{flex:none;background:var(--pigment-red);padding:16px clamp(16px,2.4vw,26px) 22px}
.mg-lead .mg-meta{color:var(--on-nave)}
.mg-lead .mg-kind{stroke:var(--harag-gold)}
.mg-lead .mg-meta time[lang="ti"]{color:var(--harag-gold)}
.mg-lead .mg-share a{color:color-mix(in srgb,var(--on-nave) 80%,transparent)}
.mg-lead .mg-share a:hover{color:var(--on-nave);background:color-mix(in srgb,var(--on-nave) 14%,transparent)}
.mg-lead .mg-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);line-height:1.12;color:var(--on-nave)}
html[lang="ti"] .mg-lead .mg-title{font-family:var(--ethiopic-serif,var(--ethiopic))}
.mg-lead .mg-title a:hover{color:var(--on-nave);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.mg-lead .lang-tag{background:color-mix(in srgb,var(--on-nave) 14%,transparent);border-color:color-mix(in srgb,var(--on-nave) 40%,transparent);color:var(--on-nave)}
@container (max-width:700px){
  .hm-mag{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-lead{grid-column:1 / -1;grid-row:auto}
  .mg-lead .mg-img{aspect-ratio:16/9;min-height:0}
  .hm-mag > :nth-child(6){display:none}
}
@container (max-width:520px){
  .hm-mag{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ---------- Our shepherds + From our Eparchy, with the notice board beside them ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,3vw,40px);align-items:start}
.duo-block + .duo-block{margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.duo-block#news{container-type:inline-size}
.duo .shepherds{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.duo .arch{width:clamp(110px,11vw,150px)}
.duo .shep{gap:16px}
.duo .shep-name{font-size:1.3rem}

/* the notice board: a parchment leaf with the harag band on top; each entry has a calendar leaf */
.nb{position:sticky;top:84px;background:var(--leaf);border:1px solid var(--gold-soft);border-radius:var(--radius-1);box-shadow:inset 0 0 0 4px var(--leaf),inset 0 0 0 5px color-mix(in srgb,var(--gold-leaf) 35%,transparent);padding:0 0 14px;overflow:hidden}
.nb-harag{height:18px}
.nb-head{padding:16px 20px 12px;border-bottom:1px solid var(--gold-soft)}
.nb-head h2{display:inline;font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--ink)}
html[lang="ti"] .nb-head h2{font-family:var(--ethiopic)}
.nb-head .ge{margin-left:10px;color:var(--red);font-size:1.1rem}
.nb-sub{margin-top:2px;color:var(--muted);font-style:italic;font-size:.95rem}
html[lang="ti"] .nb-sub{font-style:normal}
.nb-list{list-style:none;margin:0;padding:6px 14px 0}
.nb-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px 6px;border-bottom:1px dotted color-mix(in srgb,var(--gold-leaf) 55%,transparent)}
.nb-item:last-child{border-bottom:0}
.nb-item.is-pinned{margin:8px 0 4px;padding:14px 12px;background:var(--leaf);border:1px solid var(--gold-soft);border-top:4px solid var(--pigment-red);border-radius:var(--radius-1);box-shadow:none}
.nb-leaf{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;align-self:start;padding:0 0 4px;background:var(--leaf);border:1px solid var(--line);border-top:5px solid var(--red);border-radius:var(--radius-1);text-align:center;line-height:1.1;box-shadow:none}
.nb-leaf.is-blank{visibility:hidden}
.nb-d{font-family:var(--ethiopic);color:var(--red);font-size:1.35rem;padding-top:4px}
.nb-m{font-family:var(--ethiopic);font-size:.72rem;color:var(--ink)}
.nb-g{margin-top:3px;padding-top:2px;border-top:1px solid var(--line);width:80%;font-size:.68rem;color:var(--muted)}
.nb-kind{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--brass)}
.nb-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nb-pin{width:15px;height:15px;margin-left:auto;fill:var(--red);stroke:none;transform:rotate(30deg)}
.nb-update .nb-kind{color:var(--navy)}
.nb-event .nb-kind{color:var(--malachite)}
.nb-urgent .nb-kind{color:var(--red)}
.nb-urgent .nb-leaf{border-top-color:var(--red);background:var(--leaf)}
.nb-update .nb-leaf{border-top-color:var(--navy)}
.nb-event .nb-leaf{border-top-color:var(--malachite)}
.nb-announcement .nb-leaf{border-top-color:var(--gold)}
.nb-title{margin-top:3px;font-family:var(--sans);font-size:1.04rem;line-height:1.3;font-weight:700;color:var(--ink)}
html[lang="ti"] .nb-title,html[lang="ti"] .nb-text{font-family:var(--ethiopic)}
.nb-title a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.nb-title a:hover{color:var(--red);text-decoration-color:currentColor}
.nb-text{margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--ink-muted)}
.nb-body .sample-tag{margin-top:6px}
.nb-none{padding:18px 20px 6px;color:var(--muted);font-style:italic}
.nb-more{display:block;margin:10px auto 0;padding:8px 18px;border:1px solid var(--navy);border-radius:var(--radius-1);background:var(--leaf);color:var(--navy);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer}
.nb-more:hover{background:var(--pigment-lapis);color:var(--on-pigment)}
.nb-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* narrower screens: one column — the shepherds, then the notice board, then the news */
@media (max-width:1000px){
  .duo{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .duo-block{width:100%}
  .duo-main{display:contents}
  .nb{position:static;order:1;margin-top:clamp(32px,5vw,44px);width:100%}
  .duo-block#news{order:2}
  .duo-block + .duo-block{border-top:0;padding-top:0}
}
@media (max-width:640px){
  .duo .shepherds{grid-template-columns:1fr}
}

/* ---------- How you can help: two cards — CESK and St. Michael's ---------- */
.hp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,26px)}
.hp-card{display:flex;flex-direction:column;padding:clamp(22px,2.8vw,32px);background:var(--leaf);border:1px solid var(--line);border-radius:var(--radius-0)}
.hp-eye{font-size:.82rem;color:var(--muted)}
.hp-eye b{color:var(--red);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
html[lang="ti"] .hp-eye b{letter-spacing:0}
.hp-card h3{margin-top:14px;font-family:var(--serif);font-size:clamp(1.4rem,1.15rem + .8vw,1.75rem);line-height:1.2;color:var(--ink)}
html[lang="ti"] .hp-card h3{font-family:var(--ethiopic)}
.hp-text{margin-top:10px;color:var(--ink-muted)}
.hp-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-chips a{display:inline-block;padding:6px 12px;border-radius:var(--radius-1);font-size:.88rem;line-height:1.3}
.hp-chips a:hover{text-decoration:none;filter:brightness(.95)}
.hp-chips .c1{background:var(--leaf);color:var(--rubric)}
.hp-chips .c2{background:var(--leaf);color:var(--malachite)}
.hp-chips .c3{background:var(--leaf);color:var(--lapis)}
.hp-chips .c4{background:var(--leaf);color:var(--brass)}
.hp-chips .c5{background:var(--leaf);color:var(--lapis)}
.hp-chips .c6{background:var(--leaf);color:var(--ink-muted)}
.hp-prog{margin-top:18px}
.hp-prog-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:.9rem;color:var(--muted)}
.hp-prog-top b{color:var(--ink)}
.hp-bar{margin-top:8px;height:12px;border-radius:var(--radius-1);background:var(--leaf);overflow:hidden}
.hp-bar span{display:block;height:100%;background:var(--gold);border-radius:var(--radius-1)}
.hp-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:24px}
.btn-line{border:1px solid var(--rule-control);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--leaf);border-color:var(--ink);color:var(--ink);text-decoration:none}
@media (max-width:1100px){ .hp-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .hp-row{grid-template-columns:1fr} }

/* bigger icons on the ribbons */
.rib svg{width:clamp(38px,5vw,54px);height:clamp(38px,5vw,54px);stroke-width:2}

/* ---------- The Eparchy in numbers — light: parchment, navy, rubric red and gold, like the rest of the site ---------- */
.st{background:var(--leaf);color:var(--ink);border:1px solid var(--gold-soft);box-shadow:inset 0 0 0 5px var(--leaf),inset 0 0 0 6px color-mix(in srgb,var(--gold-leaf) 35%,transparent)}
.st-filter button{border-color:color-mix(in srgb,var(--lapis) 30%,transparent);color:var(--navy);background:var(--leaf)}
.st-filter button:hover{border-color:var(--navy)}
.st-filter button[aria-pressed="true"]{background:var(--pigment-lapis);border-color:var(--navy);color:var(--on-pigment)}
.st-filter button:focus-visible,.st-cl:focus-visible,.st-type:focus-visible,.st-legend button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.st-nums{border-color:color-mix(in srgb,var(--gold-leaf) 35%,transparent)}
.st-nums > div{flex-direction:column;justify-content:flex-start;border-left-color:color-mix(in srgb,var(--gold-leaf) 35%,transparent);padding:16px 14px 14px;border-radius:var(--radius-1);transition:background-color .2s,box-shadow .2s,opacity .3s}
.st-nums > div:first-child{padding-left:14px}
.st-nums dd{order:1}
.st-nums dt{order:2;color:var(--muted)}
.st-n{color:var(--navy)}
.st-ge{color:var(--red)}
.st-wide{color:var(--muted)}
.st-nums > div:hover{background:var(--leaf);box-shadow:none}
/* the kind buttons (Parishes, Chapels, Sanctuaries) with a coloured mark */
.st-type{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;font-size:1rem;font-weight:700;color:var(--ink);cursor:pointer}
html[lang="ti"] .st-type{font-family:var(--ethiopic);font-weight:400}
.st-type::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--kc);box-shadow:0 0 0 3px var(--leaf),0 0 0 4px var(--kc);transition:transform .2s}
.st-nums [data-k="par"]{--kc:var(--pigment-red)} .st-nums [data-k="cha"]{--kc:var(--pigment-lapis)} .st-nums [data-k="san"]{--kc:var(--gold)}
.st-nums [data-k="san"] .st-type::before{border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:none;width:15px;height:15px}
.st-type[aria-pressed="true"]::before{transform:scale(1.35)}
.st-nums > div.is-kind:has(.st-type[aria-pressed="true"]){background:var(--leaf);box-shadow:inset 0 -3px 0 var(--kc)}
.st-go{order:3;margin-top:4px;font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.st-go:hover{color:var(--red);text-decoration-color:currentColor}
/* the field of lights on parchment */
.st-cl:hover{border-color:var(--gold-soft);background:var(--leaf)}
.st-cl[aria-pressed="true"]{border-color:var(--gold);background:var(--leaf)}
.st-ring{stroke:color-mix(in srgb,var(--gold-leaf) 50%,transparent)}
.st-cl b{color:var(--ink)}
.st-cl small{color:var(--muted)}
.st-cl.is-all b{color:var(--red)}
.lt{transition:transform .2s,opacity .3s}
.lt-par{fill:var(--red);filter:none}
.lt-cha{fill:var(--lapis);filter:none}
.lt-san{fill:var(--gold);stroke:var(--brass);stroke-width:.4;filter:none}
.st[data-type] .lt{opacity:.12}
.st[data-type="par"] .lt-par,.st[data-type="cha"] .lt-cha,.st[data-type="san"] .lt-san{opacity:1}
.st-foot{border-top-color:color-mix(in srgb,var(--gold-leaf) 35%,transparent)}
.st-cap{color:var(--muted)}
.st-cap strong{color:var(--red)}
.st-cap-go{color:var(--navy);font-weight:700}
/* the legend: the same buttons */
.st-legend{color:var(--muted)}
.st-legend button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-1);background:var(--leaf);color:var(--ink);font:inherit;font-size:.88rem;cursor:pointer}
.st-legend button:hover{border-color:var(--navy)}
.st-legend button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);font-weight:700}
.lg-par{background:var(--pigment-red)}.lg-cha{background:var(--pigment-lapis)}.lg-san{background:var(--gold)}
@media (max-width:760px){
  .st-nums > div{border-top-color:color-mix(in srgb,var(--gold-leaf) 35%,transparent)}
  .st-nums > div:nth-child(even){border-left-color:color-mix(in srgb,var(--gold-leaf) 35%,transparent)}
}

/* ---------- TODAY IN THE CHURCH: a leaf of the Ge'ez calendar (js/today.js) ---------- */
.td-sec{padding-block:clamp(36px,5vw,64px) 0}
.td-leaf{--season:var(--gold);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr);gap:0;background:var(--parch);border-radius:var(--radius-1);box-shadow:0 1px 0 var(--rule);overflow:hidden}
.td-leaf::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--rubric) 35%,transparent);outline:1px solid color-mix(in srgb,var(--rubric) 18%,transparent);outline-offset:3px;pointer-events:none;border-radius:var(--radius-1)}
.td-leaf[data-season="tsige"]{--season:var(--brass)}
.td-leaf[data-season="meskel"],.td-leaf[data-season="yohannes"]{--season:var(--rubric)}
.td-leaf[data-season="sibket"],.td-leaf[data-season="lidet"]{--season:var(--lapis)}
.td-leaf[data-season="timket"]{--season:var(--lapis)}
.td-leaf[data-season="tsom"]{--season:var(--ink-muted)}
.td-leaf[data-season="tinsae"]{--season:var(--brass)}
.td-leaf[data-season="hawaryat"]{--season:var(--rubric)}
.td-leaf[data-season="kremt"]{--season:var(--malachite)}

.td-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:clamp(150px,17vw,210px);padding:clamp(28px,4vw,44px) clamp(18px,2.5vw,30px);border-right:1px dotted var(--rule);text-align:center}
.td-wd{font-size:1.25rem;color:var(--ink)}
.td-day{font-size:clamp(4.4rem,3rem + 4vw,6.6rem);line-height:1;color:var(--red);margin:4px 0 6px;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.td-month{font-size:1.15rem;color:var(--ink)}
.td-gr{margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--rubric) 25%,transparent);font-size:.9rem;color:var(--muted);font-style:italic}

.td-body{padding:clamp(26px,3.6vw,44px) clamp(22px,3.4vw,44px)}
.td-eye{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--season)}
html[lang="ti"] .td-eye{letter-spacing:.04em;font-size:.95rem;text-transform:none}
.td-title{margin:6px 0 16px;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);line-height:1.2;color:var(--ink)}
.td-title-ge{display:block;font-size:.66em;color:var(--red);font-weight:400}
html[lang="ti"] .td-title{font-family:var(--ethiopic-serif)}
html[lang="ti"] .td-title-ge{font-family:var(--serif);font-style:italic;color:var(--muted)}
.td-lines{list-style:none;display:grid;gap:10px}
.td-lines li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:1.06rem;line-height:1.45}
.td-lines svg{width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--season);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.td-lines .td-feast{color:var(--red);font-weight:700}
.td-lines .td-feast svg{stroke:var(--red)}
.td-lines .td-feast.is-major svg{fill:var(--red)}
.td-lines .td-fast{color:var(--ink-muted)}
.td-lines .td-sunday{color:var(--navy)}
.td-lines .td-next{color:var(--muted)}
.td-lines .td-gospel a{color:var(--rubric);font-weight:600}
.td-lines .td-gospel a:hover{text-decoration:underline}
.td-lines .td-gospel svg{stroke:var(--red)}
.td-lines [lang="ti"]{font-family:var(--ethiopic-serif)}
.td-cal{display:inline-flex;gap:6px;margin-top:20px;color:var(--navy);font-weight:700}

.td-word{position:relative;display:flex;flex-direction:column;justify-content:center;margin:0;padding:clamp(26px,3.6vw,44px) clamp(22px,3.2vw,40px);background:color-mix(in srgb,var(--leaf-raised) 40%,transparent);border-left:1px dotted var(--rule)}
.td-word::before{content:"«";position:absolute;top:clamp(8px,1.5vw,16px);left:clamp(14px,2vw,24px);font-family:var(--ethiopic);font-size:4rem;line-height:1;color:var(--season);opacity:.35}
.td-word-eye{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang="ti"] .td-word-eye{letter-spacing:.04em;font-size:.95rem;text-transform:none}
.td-word p:nth-child(2){margin-top:10px;font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.4;font-style:italic;color:var(--ink)}
html[lang="ti"] .td-word p:nth-child(2){font-style:normal;font-family:var(--ethiopic)}
.td-word cite{margin-top:12px;font-style:normal;color:var(--red);font-size:.95rem}

@media (max-width:980px){
  .td-leaf{grid-template-columns:auto minmax(0,1fr)}
  .td-word{grid-column:1 / -1;border-left:0;border-top:1px dotted var(--rule)}
}
@media (max-width:620px){
  .td-leaf{grid-template-columns:minmax(0,1fr)}
  .td-date{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;border-right:0;border-bottom:1px dotted var(--rule);padding-block:22px 18px}
  .td-day{font-size:3.6rem;margin:0}
  .td-gr{flex-basis:100%;margin-top:4px}
}

/* ============================================================
   KEREN ILLUMINATED — the homepage (design/home-mockup/index.html)
   Every colour is a token. The animations run only where the visitor has not asked for less motion,
   and the scroll effects only where the browser has scroll timelines: without them everything is simply there.
   ============================================================ */
.home-ill,.ke-hero{--ke-nave-red:color-mix(in srgb,var(--pigment-red) 55%,var(--on-nave))}   /* a red that reads on the nave */
:root{--ke-cross:url("../images/lattice-cross.svg")}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ke-cross:url("../images/lattice-cross-gold.svg")} }
:root[data-theme="dark"]{--ke-cross:url("../images/lattice-cross-gold.svg")}

/* ---------- shared pieces ---------- */
.home-ill .hm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:12px;margin-bottom:32px;border-bottom:3px double var(--rule)}
.home-ill .hm-head h2{margin:0;font-family:var(--serif);font-size:38px;line-height:44px;font-weight:700;color:var(--ink)}
html[lang="ti"] .home-ill .hm-head h2{font-family:var(--ethiopic);font-weight:400}
.home-ill .hm-head .ge{font-family:var(--ethiopic);font-size:25px;line-height:34px;color:var(--rubric)}
.home-ill .hm-head a,.ke-more{display:inline-flex;align-items:center;gap:6px;color:var(--lapis);font-weight:700;font-size:15px;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;transition:border-color .25s}
.home-ill .hm-head a{margin-left:auto}
.home-ill .hm-head a::after,.ke-more::after{content:"→";transition:transform .25s}
.home-ill .hm-head a:hover,.ke-more:hover{border-bottom-color:var(--lapis);color:var(--lapis);text-decoration:none}
.home-ill .hm-head a:hover::after,.ke-more:hover::after{transform:translateX(3px)}
.ke-sec{padding-top:96px}
.ke-eyebrow{margin:0 0 8px;font-family:var(--serif);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--rubric)}
.ke-eyebrow [lang="ti"],html[lang="ti"] .ke-eyebrow{font-family:var(--ethiopic);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none}
.ke-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ke-leaf{position:relative;background:var(--leaf);color:var(--ink);border:1px solid var(--rule);padding:36px}
.ke-leaf::before{content:"";position:absolute;inset:4px;border:1px solid var(--gold-leaf);pointer-events:none}
.btn-gilt{background:var(--on-nave-gold);border-color:var(--on-nave-gold);color:var(--nave)}
.btn-gilt:hover{background:var(--on-nave);border-color:var(--on-nave);color:var(--nave)}
.btn-ghost{background:transparent;border-color:var(--on-nave-muted);color:var(--on-nave)}
.btn-ghost:hover{border-color:var(--on-nave-gold);color:var(--on-nave-gold)}
.btn-line{border:1px solid var(--rule-control)}

/* ---------- the cover: four slides; the photo unveils through an arch, the Ge'ez is lit letter by letter ---------- */
.ke-hero{position:relative;display:block;min-height:660px;background:var(--nave);color:var(--on-nave);overflow:hidden;isolation:isolate;touch-action:pan-y}
.ke-hero .slide{position:absolute;inset:0;transform:none !important;transition:none;visibility:hidden}
.ke-hero .slide:not(.on){z-index:1}
.ke-hero .slide.on{visibility:visible;z-index:2}
.ke-hero .kb{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.ke-hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--nave) 90%,transparent) 0%,color-mix(in srgb,var(--nave) 82%,transparent) 52%,color-mix(in srgb,var(--nave) 40%,transparent) 100%)}
.ke-hero .slide-body{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:660px;padding-block:72px 120px}
.ke-hero .slide-col{max-width:640px}
.s-eyebrow{margin:0 0 14px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-nave-gold)}
html[lang="ti"] .s-eyebrow{font-family:var(--ethiopic);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none}
.s-eyebrow [lang="ti"]{letter-spacing:0}
.s-geez{display:flex;flex-wrap:wrap;margin:0 0 12px;font-family:var(--ethiopic);font-weight:400;font-size:76px;line-height:92px;color:var(--on-nave);letter-spacing:0;text-transform:none}
.s-geez > span{display:contents}
.s-geez .ch{display:inline-block}
.s-geez .ch.r{color:var(--on-nave)}                    /* the first letter in white, like the rest */
.s-geez .sp{display:inline-block;width:.42em}
.s-title{margin:0 0 6px;font-size:30px;line-height:38px;font-weight:700;color:var(--on-nave)}
.s-text{margin:0 0 26px;max-width:56ch;font-size:18px;line-height:30px;color:var(--on-nave)}
.s-verse{margin-bottom:12px;font-style:italic}
html[lang="ti"] .s-text,html[lang="ti"] .s-title{font-family:var(--ethiopic);font-style:normal}
.s-actions{display:flex;flex-wrap:wrap;gap:12px}
.ke-hero .hero-controls{position:absolute;z-index:5;left:0;right:0;bottom:36px;transform:none;display:block}
.hero-ctrl-in{display:flex;align-items:center;gap:16px}
.ke-hero .sl-btn{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid color-mix(in srgb,var(--on-nave) 45%,transparent);border-radius:var(--radius-1);background:color-mix(in srgb,var(--nave) 40%,transparent);color:var(--on-nave);cursor:pointer;transition:background-color .25s,border-color .25s}
.ke-hero .sl-btn:hover{background:var(--pigment-red);border-color:var(--pigment-red)}
.ke-hero .sl-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ke-hero .sl-pause .i-play{fill:currentColor;stroke:none}
.ke-hero .dots{display:flex;gap:10px}
.ke-hero .dots button{display:grid;place-items:start stretch;gap:6px;width:64px !important;height:auto;padding:6px 0;border:0;border-radius:0;background:none !important;color:var(--on-nave-muted);font-family:var(--ethiopic);font-size:18px;line-height:22px;text-align:left;cursor:pointer}
.ke-hero .dots button::after{display:none}
.ke-hero .dots button.on{color:var(--on-nave-gold)}
.dot-bar{display:block;height:2px;background:color-mix(in srgb,var(--on-nave) 30%,transparent);overflow:hidden}
.dot-bar i{display:block;width:0;height:100%;background:var(--on-nave-gold)}
.ke-hero .dots button.on .dot-bar i{width:100%}
.slide-count{margin-left:auto;font-family:var(--ethiopic);font-size:15px;color:var(--on-nave-muted)}
.ke-hero :focus-visible{outline-color:var(--on-nave-gold)}

/* ---------- the bookmark ribbons drop in, one by one; a ribbon drops into place on hover ---------- */
.rib{transition:translate .45s cubic-bezier(.3,1.5,.5,1)}
.rib:hover,.rib:focus-visible,.rib:active,
.ribbons li:nth-child(even) .rib:hover,.ribbons li:nth-child(even) .rib:focus-visible{transform:translateY(-14px);translate:0 14px}

/* ---------- Times of prayer ---------- */
.ke-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px}
.ke-time{display:flex;flex-direction:column;gap:6px;padding:28px 24px 26px;background:var(--leaf);border:1px solid var(--rule);border-top:4px solid var(--pigment-red)}
.ke-time:nth-child(5n+2){border-top-color:var(--pigment-ochre)}
.ke-time:nth-child(5n+3){border-top-color:var(--pigment-lapis)}
.ke-time:nth-child(5n+4){border-top-color:var(--pigment-malachite)}
.ke-time:nth-child(5n+5){border-top-color:var(--pigment-ochre)}
.ke-time .tico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:10px;border-radius:999px;background:var(--gold-wash);color:var(--rubric);transition:background-color .4s,color .4s}
.ke-time:hover .tico{background:var(--pigment-red);color:var(--on-pigment)}
.ke-time .tico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ke-time h3{margin:0;font-family:var(--serif);font-size:20px;line-height:26px;font-weight:700;color:var(--ink)}
.ke-time .ti{margin:0;font-family:var(--ethiopic);font-size:16px;line-height:24px;color:var(--rubric)}
.ke-time .ti[lang="en"]{font-family:var(--serif)}
.ke-time .when{margin:6px 0 0;font-size:15px;line-height:23px;color:var(--ink-muted)}
html[lang="ti"] .ke-time h3,html[lang="ti"] .ke-time .when{font-family:var(--ethiopic);font-weight:400}

/* ---------- the nave band: the Today leaf and the Words of life, over the manuscript ---------- */
.ke-band{position:relative;margin-top:96px;padding-block:96px;background:var(--nave);color:var(--on-nave);overflow:hidden;isolation:isolate}
.ke-band .par{position:absolute;inset:-18% 0;z-index:-2;width:100%;height:136%;max-width:none;object-fit:cover;opacity:.32}
.ke-band::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--nave) 55%,transparent)}
.ke-band-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center}
.ke-today{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px}
.ke-seal{display:grid;justify-items:center;align-content:center;gap:4px;text-align:center}
.ke-seal-day{font-family:var(--ethiopic);font-size:18px;line-height:24px;color:var(--ink)}
.ke-seal-num{display:grid;place-items:center;width:112px;height:112px;margin:8px 0;border-radius:999px;background:var(--gold-wash);box-shadow:0 0 0 4px var(--leaf),0 0 0 5px var(--gold-leaf);font-family:var(--ethiopic);font-size:58px;line-height:58px;color:var(--rubric)}
.ke-seal-month{font-family:var(--ethiopic);font-size:18px;line-height:26px;color:var(--ink)}
.ke-seal-greg{padding-top:8px;border-top:1px solid var(--rule);font-size:13px;line-height:18px;font-style:italic;color:var(--ink-muted)}
.ke-today-t{margin:0;font-family:var(--serif);font-size:28px;line-height:34px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-today-t{font-family:var(--ethiopic);font-weight:400}
.ke-today-ti{margin:2px 0 16px;font-family:var(--ethiopic);font-size:20px;line-height:28px;color:var(--rubric)}
.ke-today-ti[lang="en"]{font-family:var(--serif);font-size:17px}
.ke-today .td-lines{display:grid;gap:12px;margin:0 0 22px;padding:0;list-style:none;font-size:16px;line-height:24px;color:var(--ink)}
.ke-today .td-lines li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start}
.ke-today .td-lines li::before{content:"";width:16px;height:16px;margin-top:4px;background:var(--ke-cross) center/contain no-repeat}
.ke-today .td-lines svg{display:none}
.ke-today .td-lines .td-gospel,.ke-today .td-lines .is-major{color:var(--rubric);font-weight:700}
.ke-today .td-lines .td-gospel a{color:inherit;text-decoration:none}
.ke-today .td-lines .td-gospel a:hover{text-decoration:underline;text-underline-offset:3px}
html[lang="ti"] .ke-today .td-lines{font-family:var(--ethiopic)}
.ke-words-col > .ke-eyebrow{color:var(--on-nave-gold)}
.ke-words{display:grid}
.ke-verse{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:center;margin:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .9s,transform .9s,visibility .9s}
.ke-verse.is-on{opacity:1;visibility:visible;transform:none}
.ke-verse p:not(.td-word-eye){margin:0 0 16px;font-size:27px;line-height:40px;font-style:italic;color:var(--on-nave)}
.ke-verse p:not(.td-word-eye)::before{content:"“";display:block;font-size:84px;line-height:56px;font-style:normal;color:var(--ke-nave-red)}
html[lang="ti"] .ke-verse p:not(.td-word-eye){font-family:var(--ethiopic);font-size:24px;line-height:40px;font-style:normal}
.ke-verse cite{font-style:normal;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-nave-gold)}
.ke-verse cite span{margin-left:10px;letter-spacing:0;text-transform:none;font-size:16px;font-weight:400}
html[lang="ti"] .ke-verse cite{font-family:var(--ethiopic);font-weight:400;letter-spacing:0;text-transform:none;font-size:16px}
.ke-vdots{display:flex;gap:8px;margin-top:8px;margin-left:-14px}
.ke-vdot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.ke-vdot i{display:block;width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--on-nave-gold);transition:background-color .3s}
.ke-vdot[aria-pressed="true"] i{background:var(--on-nave-gold)}
.ke-band :focus-visible{outline-color:var(--on-nave-gold)}
.ke-band .ke-leaf :focus-visible{outline-color:var(--focus)}

/* ---------- Homilies and Sermons: the channel, and the newest four ---------- */
.ke-watch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.ke-film{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--nave);color:var(--on-nave);text-decoration:none}
.ke-film img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ke-film:hover img{transform:scale(1.05)}
.ke-film-veil{position:absolute;inset:0;background:color-mix(in srgb,var(--nave) 35%,transparent)}
.ke-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:999px;background:var(--pigment-red);color:var(--on-pigment);box-shadow:0 0 0 6px color-mix(in srgb,var(--on-nave-gold) 60%,transparent)}
.ke-play::before,.ke-play::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--on-nave-gold);opacity:0}
.ke-play svg{width:30px;height:30px;margin-left:5px;fill:currentColor}
.ke-film-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;background:linear-gradient(transparent,color-mix(in srgb,var(--nave) 88%,transparent))}
.ke-film-cap span{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-nave-gold)}
.ke-film-cap b{display:block;font-size:22px;line-height:28px;color:var(--on-nave)}
html[lang="ti"] .ke-film-cap span,html[lang="ti"] .ke-film-cap b{font-family:var(--ethiopic);font-weight:400;letter-spacing:0;text-transform:none}
.ke-sermons{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ke-sermon{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.ke-sermon .n{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--gold-leaf);font-family:var(--ethiopic);font-size:22px;color:var(--rubric);transition:background-color .35s,color .35s,border-color .35s}
.ke-sermon:hover .n{background:var(--pigment-red);border-color:var(--pigment-red);color:var(--on-pigment)}
.ke-sermon h3{margin:0;font-family:var(--serif);font-size:19px;line-height:25px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-sermon h3{font-family:var(--ethiopic);font-weight:400}
.ke-sermon .ti{display:block;font-family:var(--ethiopic);font-size:15px;line-height:22px;color:var(--rubric)}
.ke-sermon .ti[lang="en"]{font-family:var(--serif)}
.ke-sermon .meta{display:block;font-size:13px;line-height:18px;color:var(--ink-muted)}
.ke-listen{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--rule-control);border-radius:999px;color:var(--ink);transition:background-color .3s,color .3s,border-color .3s}
.ke-listen:hover{background:var(--pigment-red);border-color:var(--pigment-red);color:var(--on-pigment)}
.ke-listen svg{width:16px;height:16px;margin-left:3px;fill:currentColor}

/* ---------- Our shepherds: icon arches; a halo rises behind them on hover ---------- */
.ke-shepherds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:48px}
.ke-shep{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:end;color:var(--ink);text-decoration:none}
.ke-shep:hover{color:var(--ink);text-decoration:none}
.ke-archw{position:relative;display:block;padding-top:18px}
.ke-archw::before{content:"";position:absolute;top:0;left:50%;width:86%;aspect-ratio:1;border-radius:999px;background:var(--gold-wash);border:1px solid var(--gold-leaf);translate:-50% 0;scale:.7;opacity:0;transition:scale .9s cubic-bezier(.2,.7,.2,1),opacity .9s}
.ke-shep:hover .ke-archw::before,.ke-shep:focus-visible .ke-archw::before{scale:1;opacity:1}
.ke-arch{position:relative;display:block;padding:4px;border:1px solid var(--gold-leaf);border-radius:999px 999px 0 0;background:var(--leaf);overflow:hidden}
.ke-arch img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:999px 999px 0 0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ke-shep:hover .ke-arch img{transform:scale(1.05)}
.ke-shep-text{display:flex;flex-direction:column;align-items:flex-start}
.ke-shep .role{font-style:italic;font-size:16px;color:var(--ink-muted)}
.ke-shep .name{margin-top:2px;font-size:24px;line-height:30px;font-weight:700}
.ke-shep .ti{margin:4px 0 14px;font-family:var(--ethiopic);font-size:17px;line-height:26px;color:var(--rubric)}
html[lang="ti"] .ke-shep .role,html[lang="ti"] .ke-shep .name{font-family:var(--ethiopic);font-style:normal;font-weight:400}
html[lang="ti"] .ke-shep .name{margin-bottom:14px}
#shepherds + .hm-sec{padding-top:96px}

/* ---------- How you can help: St. Michael's over its photograph, the CESK mesob, more ways ---------- */
.ke-help{padding-top:96px}
.ke-build{position:relative;padding-block:110px;overflow:hidden;isolation:isolate;background:var(--nave)}
.ke-build .par{position:absolute;inset:-18% 0;z-index:-2;width:100%;height:136%;max-width:none;object-fit:cover}
.ke-build::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--nave) 30%,transparent),color-mix(in srgb,var(--nave) 78%,transparent))}
.ke-build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}
.ke-build-say{color:var(--on-nave)}
.ke-build-say .ke-eyebrow{color:var(--on-nave-gold)}
.ke-build-say .ke-eyebrow,.ke-build-say > p:last-child{text-shadow:0 1px 12px color-mix(in srgb,var(--nave) 80%,transparent)}
.ke-big{display:block;font-size:120px;line-height:110px;font-weight:700;color:var(--on-nave-gold);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 2px 20px color-mix(in srgb,var(--nave) 60%,transparent)}
.ke-big small{font-size:56px}
.ke-build-say > p:last-child{margin:8px 0 0;max-width:30ch;font-size:20px;line-height:30px;color:var(--on-nave)}
html[lang="ti"] .ke-build-say > p:last-child{font-family:var(--ethiopic)}
.ke-build-leaf h3{margin:0;font-family:var(--serif);font-size:30px;line-height:36px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-build-leaf h3{font-family:var(--ethiopic);font-weight:400}
.ke-build-leaf .ti{margin:2px 0 12px;font-family:var(--ethiopic);font-size:19px;color:var(--rubric)}
.ke-build-leaf .ti[lang="en"]{font-family:var(--serif);font-size:17px}
.ke-build-leaf .about{margin:0 0 22px;font-size:16px;line-height:26px;color:var(--ink-muted)}
.ke-phead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font-size:14px;color:var(--ink-muted)}
.ke-phead b{color:var(--rubric)}
.ke-pbar{position:relative;height:14px;margin:8px 0 6px;background:var(--leaf-raised);border:1px solid var(--rule-control)}
.ke-pbar .fill{position:absolute;top:1px;bottom:1px;left:1px;width:calc(var(--p,0) * 100% - 2px);background:var(--gold-leaf);transform-origin:left}
.ke-pbar .tick{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--rule-control)}
.ke-stages{display:grid;gap:10px;margin:20px 0 26px;padding:0;list-style:none;font-size:15px;line-height:22px}
.ke-stage{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center}
.ke-stage .mk{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--rule-control);border-radius:999px}
.ke-stage.is-done .mk{background:var(--pigment-malachite);border-color:var(--pigment-malachite);color:var(--on-pigment)}
.ke-stage.is-done .mk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ke-stage.is-current .mk{border:2px solid var(--rubric)}
.ke-stage.is-current .mk::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--rubric)}
.ke-stage .ge{margin-left:6px;font-family:var(--ethiopic);font-size:14px;color:var(--ink-muted)}
.ke-stage .state{font-size:13px;color:var(--ink-muted)}
.ke-stage.is-done .state{color:var(--malachite)}
.ke-stage.is-current .state{color:var(--rubric);font-weight:700}
html[lang="ti"] .ke-stages{font-family:var(--ethiopic)}
.ke-cesk{margin-top:48px}
.ke-ways{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:24px;padding:28px 36px}
.ke-ways h3{margin:0 0 6px;font-family:var(--serif);font-size:24px;line-height:30px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-ways h3{font-family:var(--ethiopic);font-weight:400}
.ke-ways p{margin:0 0 12px;max-width:60ch;color:var(--ink-muted)}
.ke-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ke-chips a{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid var(--rule);border-radius:var(--radius-1);background:var(--leaf-raised);color:var(--ink);font-size:13px;line-height:18px;text-decoration:none}
.ke-chips a::before{content:"";width:6px;height:6px;flex:none;transform:rotate(45deg);background:var(--gold-leaf)}
.ke-chips a:hover{border-color:var(--gold-leaf);background:var(--gold-wash)}

/* ---------- Coming feasts, with the live countdown ---------- */
.ke-feasts{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:stretch}
.ke-feast-main{display:flex;flex-direction:column;gap:6px}
.ke-feast-main h3{margin:0;font-family:var(--serif);font-size:32px;line-height:38px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-feast-main h3{font-family:var(--ethiopic);font-weight:400}
.ke-feast-main .ti{margin:0;font-family:var(--ethiopic);font-size:22px;line-height:32px;color:var(--rubric)}
.ke-feast-main .ti[lang="en"]{font-family:var(--serif);font-size:18px}
.ke-feast-main .when{margin:0 0 18px;color:var(--ink-muted)}
.ke-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:8px}
.ke-cbox{display:grid;justify-items:center;gap:2px;padding:16px 6px 12px;background:var(--leaf-raised);border:1px solid var(--rule);border-top:3px solid var(--pigment-red)}
.ke-cbox b{font-size:46px;line-height:52px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ke-cbox > span{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
html[lang="ti"] .ke-cbox > span{font-family:var(--ethiopic);font-weight:400;letter-spacing:0;text-transform:none;font-size:14px}
.ke-cbox > .ge{font-family:var(--ethiopic);font-size:17px;line-height:22px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--rubric)}
.ke-cbox.is-secs b{color:var(--rubric)}
.ke-flist{display:grid;align-content:start;margin:0;padding:0;list-style:none}
.ke-fitem{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.ke-fitem:first-child{padding-top:0}
.ke-ftab{display:grid;justify-items:center;padding:8px 4px 6px;background:var(--leaf-raised);border:1px solid var(--rule);border-top:4px solid var(--pigment-red);text-align:center}
.ke-ftab b{font-family:var(--ethiopic);font-weight:400;font-size:24px;line-height:28px;color:var(--rubric)}
.ke-ftab span{font-family:var(--ethiopic);font-size:13px;line-height:18px;color:var(--ink)}
.ke-fitem h4{margin:0;font-family:var(--serif);font-size:18px;line-height:24px;font-weight:700;color:var(--ink)}
html[lang="ti"] .ke-fitem h4{font-family:var(--ethiopic);font-weight:400}
.ke-fitem .ti{display:block;font-family:var(--ethiopic);font-size:15px;color:var(--rubric)}
.ke-fitem .ti[lang="en"]{font-family:var(--serif)}
.ke-fitem .greg{display:block;font-size:13px;line-height:18px;color:var(--ink-muted)}
.ke-indays{font-size:14px;font-weight:700;color:var(--lapis);white-space:nowrap}
html[lang="ti"] .ke-indays{font-family:var(--ethiopic);font-weight:400}

/* ---------- From our Eparchy: news cards with a pigment bar on top, the notice board beside them ---------- */
.home-ill .duo-main{container-type:inline-size}
.home-ill .mg-card{background:var(--leaf);border:1px solid var(--rule);border-top:4px solid var(--pigment-red)}
.home-ill .mg-img{border-bottom:1px solid var(--rule)}
.home-ill .mg-lead .mg-body{background:var(--leaf);padding:18px 24px 22px}
.home-ill .mg-lead .mg-meta{color:var(--ink-muted)}
.home-ill .mg-lead .mg-kind{stroke:var(--gold-leaf)}
.home-ill .mg-lead .mg-meta time[lang="ti"]{color:var(--rubric)}
.home-ill .mg-share a,.home-ill .mg-lead .mg-share a{color:var(--ink-muted)}
.home-ill .mg-lead .mg-share a:hover{color:var(--lapis);background:color-mix(in srgb,var(--lapis) 8%,transparent)}
.home-ill .mg-lead .mg-title{color:var(--ink);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem)}
.home-ill .mg-lead .mg-title a:hover{color:var(--rubric)}
.home-ill .mg-lead .lang-tag{background:var(--leaf-raised);border-color:var(--rule);color:var(--brass)}

/* ---------- The Eparchy in numbers: the counters and the field of lights on a leaf, on the nave ---------- */
.ke-counts{margin-top:96px;padding-bottom:72px;background:var(--nave);color:var(--on-nave)}
.ke-counts > .wrap{padding-top:48px}
.home-ill .ke-counts .hm-head{border-bottom-color:color-mix(in srgb,var(--on-nave-gold) 45%,transparent)}
.home-ill .ke-counts .hm-head h2{color:var(--on-nave)}
.home-ill .ke-counts .hm-head .ge{color:var(--on-nave-gold)}
.home-ill .ke-counts .hm-head a{color:var(--on-nave-gold);border-bottom-color:color-mix(in srgb,var(--on-nave-gold) 40%,transparent)}
.ke-counts .st > .harag{display:none}
.ke-counts .st-n{font-size:clamp(2.6rem,1.8rem + 2.4vw,4.2rem);line-height:1;font-variant-numeric:tabular-nums}
.ke-counts :focus-visible{outline-color:var(--on-nave-gold)}
.ke-counts .st :focus-visible{outline-color:var(--focus)}
.home-ill .vn{padding-top:96px}

/* ---------- Our Eparchy in pictures, and the photo opened large ---------- */
.ke-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:14px}
.ke-gitem{position:relative;padding:0;border:0;background:var(--leaf);cursor:zoom-in;overflow:hidden;text-align:left}
.ke-gitem:nth-child(1){grid-column:span 2;grid-row:span 2}
.ke-gitem:nth-child(6){grid-column:span 2}
.ke-gitem img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ke-gitem:hover img,.ke-gitem:focus-visible img{transform:scale(1.06)}
.ke-gcap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:color-mix(in srgb,var(--nave) 82%,transparent);color:var(--on-nave);font-family:var(--serif);font-size:15px;line-height:20px;font-weight:700;transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html[lang="ti"] .ke-gcap{font-family:var(--ethiopic);font-weight:400}
.ke-gitem:hover .ke-gcap,.ke-gitem:focus-visible .ke-gcap{transform:none}
.ke-gitem::after{content:"";position:absolute;inset:6px;border:1px solid var(--on-nave-gold);opacity:0;transition:opacity .45s;pointer-events:none}
.ke-gitem:hover::after,.ke-gitem:focus-visible::after{opacity:1}
@media (hover:none){ .ke-gcap{transform:none} }                          /* on touch screens the caption is always there */
.ke-lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--nave) 94%,transparent)}
.ke-lb[hidden]{display:none}
.ke-lb figure{display:grid;justify-items:center;gap:14px;width:100%;max-width:1100px;margin:0}
.ke-lb img{max-height:76vh;width:auto;padding:4px;border:1px solid var(--on-nave-gold);background:var(--nave)}
.ke-lb figcaption{display:flex;align-items:center;gap:16px;color:var(--on-nave);font-size:17px}
html[lang="ti"] .ke-lb figcaption{font-family:var(--ethiopic)}
.ke-lb figcaption .n{font-family:var(--ethiopic);font-size:20px;color:var(--on-nave-gold)}
.ke-lb-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--on-nave) 40%,transparent);border-radius:var(--radius-1);background:none;color:var(--on-nave);cursor:pointer;transition:background-color .25s}
.ke-lb-btn:hover{background:var(--pigment-red)}
.ke-lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ke-lb :focus-visible{outline-color:var(--on-nave-gold)}
.ke-lb-close{top:20px;right:20px}
.ke-lb-prev{left:20px;top:50%;margin-top:-26px}
.ke-lb-next{right:20px;top:50%;margin-top:-26px}
body.ke-lb-open{overflow:hidden}
#gallery{padding-bottom:96px}

/* ---------- motion: only where the visitor has not asked for less ---------- */
@keyframes ke-unveil{from{clip-path:inset(100% 0 0 0 round 50% 50% 0 0)}to{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes ke-kenburns{from{transform:scale(1.16) translate(1.5%,1%)}to{transform:scale(1.02)}}
@keyframes ke-illumine{0%{opacity:0;transform:translateY(.4em) scale(.85);filter:blur(10px);color:var(--on-nave-gold)}55%{opacity:1;transform:none;filter:blur(0);color:var(--on-nave-gold)}100%{opacity:1;transform:none;filter:none;color:var(--on-nave)}}
@keyframes ke-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ke-progress{from{width:0}to{width:100%}}
@keyframes ke-progress-b{from{width:0}to{width:100%}}
@keyframes ke-drop{from{transform:translateY(-105%)}to{transform:translateY(-14px)}}
@keyframes ke-ring{from{transform:scale(1);opacity:.85}to{transform:scale(2.1);opacity:0}}
@keyframes ke-beat{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes ke-tick{0%{opacity:1}50%{opacity:.55}}
@keyframes ke-from-left{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes ke-from-right{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes ke-zoom-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ke-parallax{from{transform:translateY(-9%)}to{transform:translateY(9%)}}
@keyframes ke-gild-in{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ke-fill-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  .ke-hero .slide.on{animation:ke-unveil 1.2s cubic-bezier(.7,0,.2,1) both}
  .ke-hero .slide.on .kb{animation:ke-kenburns 8s ease-out both}
  .ke-hero .slide.on .ch{animation:ke-illumine 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.45s + var(--i) * 90ms)}
  .ke-hero .slide.on .up{animation:ke-rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1s + var(--d) * 140ms)}
  .ke-hero .dots button.on .dot-bar i{animation:ke-progress var(--slide-ms,6s) linear both}
  .ke-hero.tick-b .dots button.on .dot-bar i{animation-name:ke-progress-b}
  .ke-hero.is-held .dots button.on .dot-bar i{animation-play-state:paused}
  .rib{animation:ke-drop 1s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.4s + var(--i,0) * 100ms)}
  .ke-play::before,.ke-play::after{animation:ke-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite}
  .ke-play::after{animation-delay:1.3s}
  .ke-stage.is-current .mk::after{animation:ke-beat 1.6s ease-in-out infinite}
  .ke-cbox.is-secs b{animation:ke-tick 1s steps(1) infinite}
  @supports (animation-timeline: view()){
    .home-ill .rv{animation:ke-rise linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
    .home-ill .rv.l{animation-name:ke-from-left}
    .home-ill .rv.r{animation-name:ke-from-right}
    .home-ill .rv.z{animation-name:ke-zoom-in}
    .home-ill .rv.d1{animation-range:entry 5% cover 28%}
    .home-ill .rv.d2{animation-range:entry 10% cover 32%}
    .home-ill .rv.d3{animation-range:entry 15% cover 36%}
    .home-ill .rv.d4{animation-range:entry 20% cover 40%}
    .home-ill .par{animation:ke-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .home-ill .ke-leaf.rv::before{animation:ke-gild-in linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
    .ke-pbar .fill{animation:ke-fill-bar linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
  }
}

/* ---------- tablets and phones ---------- */
@media (max-width:1100px){
  .ke-band-grid,.ke-watch,.ke-feasts,.ke-build-grid{grid-template-columns:minmax(0,1fr)}
  .ke-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
}
@media (max-width:980px){ .home-ill .duo{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .ke-sec,.ke-help{padding-top:72px}
  .ke-band,.ke-counts{margin-top:72px}
  .ke-band{padding-block:64px}
  .ke-build{padding-block:72px}
  .home-ill .hm-head h2{font-size:30px;line-height:36px}
  .home-ill .hm-head a{margin-left:0}
  .ke-hero,.ke-hero .slide-body{min-height:600px}
  .ke-hero .slide-body{padding-block:48px 110px}
  .s-geez{font-size:48px;line-height:62px}
  .s-title{font-size:24px;line-height:30px}
  .s-text{font-size:16px;line-height:26px}
  .slide-count{display:none}
  .hero-ctrl-in{gap:10px}
  .ke-hero .dots{gap:6px}
  .ke-hero .dots button{width:36px !important}
  .ke-hero .sl-btn{width:44px;height:44px}
  .ke-today{grid-template-columns:minmax(0,1fr)}
  .ke-leaf{padding:26px 22px}
  .ke-verse p:not(.td-word-eye){font-size:22px;line-height:33px}
  .ke-shep{grid-template-columns:130px minmax(0,1fr);gap:18px}
  .ke-shep .name{font-size:20px;line-height:26px}
  .ke-big{font-size:84px;line-height:84px}
  .ke-count{gap:6px}
  .ke-cbox b{font-size:30px;line-height:36px}
  .ke-cbox > span{font-size:10px;letter-spacing:.06em}
  .ke-fitem{grid-template-columns:64px minmax(0,1fr)}
  .ke-indays{grid-column:2}
  .ke-sermon{grid-template-columns:48px minmax(0,1fr) auto;gap:12px}
  .ke-sermon .n{width:44px;height:44px;font-size:19px}
  .ke-play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .ke-film-cap b{font-size:18px;line-height:24px}
  .ke-gallery{grid-auto-rows:140px}
  .ke-gitem:nth-child(1),.ke-gitem:nth-child(6){grid-column:span 2;grid-row:span 1}
  .ke-ways{padding:24px 22px}
}
/* the news grid on narrow screens (by screen width: the container query of the old layout does not reach it here) */
@media (max-width:760px){
  .home-ill .hm-mag{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-ill .mg-lead{grid-column:1 / -1;grid-row:auto}
  .home-ill .mg-lead .mg-img{aspect-ratio:16/9;min-height:0}
}
@media (max-width:560px){ .home-ill .hm-mag{grid-template-columns:minmax(0,1fr)} }

/* ---------- owner's corrections ---------- */
/* the first slide's title is an h1: as large as the other titles (not the older .hero h1 size) */
.ke-hero h1.s-geez{margin:0 0 12px;font-family:var(--ethiopic);font-weight:400;font-size:76px;line-height:92px;letter-spacing:0;text-transform:none;text-wrap:wrap}
@media (max-width:640px){ .ke-hero h1.s-geez{font-size:48px;line-height:62px} }
/* five ribbons: Parishes, Priests, Prayers, Sermons, Donate */
.ribbons ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.rib-green{--c:var(--pigment-malachite)}
/* the portraits keep the 3:4 shape of the design (the img height attribute must not stretch them) */
.ke-arch img{height:auto}
/* The Eparchy in numbers: like How you can help — the title on the vellum, then the leaf over a photograph (Dereque) under the nave veil; no harag */
.ke-nums-band{padding-block:96px}
.ke-nums-band::before{background:color-mix(in srgb,var(--nave) 55%,transparent)}
.ke-nums .st{box-shadow:var(--frame)}
@media (max-width:640px){ .ke-nums-band{padding-block:56px} }
/* gilding, as in the design: a gold frame draws itself inside the card on hover (the news posts, the times of prayer) */
.home-ill .mg-card,.ke-time{position:relative}
.home-ill .mg-card::after,.ke-time::after{content:"";position:absolute;inset:5px;z-index:2;border:1px solid var(--gold-leaf);pointer-events:none;clip-path:inset(0 100% 100% 0);transition:clip-path .8s cubic-bezier(.6,0,.2,1)}
.home-ill .mg-card:hover::after,.home-ill .mg-card:focus-within::after,.ke-time:hover::after,.ke-time:focus-within::after{clip-path:inset(0 0 0 0)}
/* the coming feasts: the date tab tilts as the row is pointed to */
.ke-ftab{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.ke-fitem:hover .ke-ftab,.ke-fitem:focus-within .ke-ftab{transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){
  .home-ill .mg-card::after,.ke-time::after{transition:none}
  .ke-ftab{transition:none}
  .ke-fitem:hover .ke-ftab,.ke-fitem:focus-within .ke-ftab{transform:none}
}
/* the notice board: each notice answers the pointer — a brighter ground, the gold frame draws itself, the date leaf tilts */
.nb-item{position:relative;transition:background-color .3s}
.nb-item::after{content:"";position:absolute;inset:3px;border:1px solid var(--gold-leaf);pointer-events:none;clip-path:inset(0 100% 100% 0);transition:clip-path .8s cubic-bezier(.6,0,.2,1)}
.nb-item:hover,.nb-item:focus-within{background:var(--leaf-raised)}
.nb-item:hover::after,.nb-item:focus-within::after{clip-path:inset(0 0 0 0)}
.nb-leaf{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.nb-item:hover .nb-leaf,.nb-item:focus-within .nb-leaf{transform:rotate(-3deg)}
/* the pinned notice: a red bar on top, not a coloured left border */
.nb-item.is-pinned{border-left:1px solid var(--gold-soft);border-top:4px solid var(--pigment-red)}
@media (prefers-reduced-motion:reduce){
  .nb-item,.nb-item::after,.nb-leaf{transition:none}
  .nb-item:hover .nb-leaf,.nb-item:focus-within .nb-leaf{transform:none}
}