/* Orthodox Calendar website. Hand-written; pages are generated by _tools/build.py */
@font-face{font-family:Alegreya;font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alegreya;font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Alegreya;font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --indigo:#1b2380; --night:#131a5e; --gold:#c8a84c; --gilt:#7d5f0e; --rubric:#a3271c;
  --ivory:#fdf6e3; --paper:#fffdf6; --ink:#1d1c2f; --muted:#5a586c; --rule:#e3d6ae;
  --serif:Alegreya,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --wrap:68rem; --measure:41rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.6;font-variant-numeric:lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--rubric)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{line-height:1.12;margin:0;font-weight:800;color:var(--indigo);text-wrap:balance}
h1{font-size:clamp(2.2rem,5.2vw,3.5rem);letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,3vw,2.05rem);font-weight:700}
h3{font-size:1.28rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.5rem 1rem;z-index:50}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- header ---------- */
.top{background:var(--night);color:var(--ivory)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ivory);text-decoration:none;font-weight:700;font-size:1.25rem;white-space:nowrap}
.brand:hover{color:#fff}
.brand svg{flex:none}
.nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav a{color:var(--ivory);text-decoration:none;font-size:1.06rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold);color:#fff}
.nav a.get{background:var(--gold);color:var(--night);font-weight:700;padding:.4rem 1rem;border-radius:999px;border:0}
.nav a.get:hover{background:#dcc06a;color:var(--night)}
@media (max-width:760px){
  .top .wrap{gap:0 1rem;padding-top:.35rem}
  .nav{margin-left:0;width:100%;overflow-x:auto;gap:1.3rem;padding-bottom:.45rem;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .nav a.get{display:none}
  .top .wrap{min-height:0}
  .brand{padding:.45rem 0 .1rem}
}

/* ---------- store badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.badges a{display:block;line-height:0;border-radius:9px}
.badges img{height:3.1rem;width:auto}
.is-ios .badges .b-play,.is-android .badges .b-ios{display:none}

/* ---------- home hero ---------- */
.hero{background:var(--night);color:var(--ivory);padding:2.2rem 0 4.5rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem;align-items:center}
.hero h1{color:var(--ivory);font-size:clamp(2.5rem,5.6vw,4.1rem);font-weight:800}
.hero .sub{font-size:1.32rem;line-height:1.5;color:#e6e2f3;max-width:31rem;margin:1.2rem 0 1.8rem}
.hero .terms{color:var(--gold);font-size:1.05rem;margin:1.1rem 0 0}
@media (max-width:860px){
  .hero{padding:1.6rem 0 3rem}
  .hero .wrap{grid-template-columns:1fr;gap:2.2rem}
}

/* ---------- the calendar leaf (signature element) ---------- */
.leaf{position:relative;background:var(--paper);color:var(--ink);border-radius:3px 3px 10px 10px;padding:0 1.5rem 1.4rem;box-shadow:0 1px 0 #efe6c8,0 5px 0 -1px #f6efd8,0 6px 0 -1px #e2d6b0,0 10px 0 -2px #f6efd8,0 11px 0 -2px #e2d6b0,0 26px 50px -18px rgba(5,8,50,.75);max-width:27rem;margin:0 auto;width:100%}
.leaf::before{content:"";display:block;height:1.15rem;margin:0 -1.5rem;background:var(--gold);border-radius:3px 3px 0 0;background-image:radial-gradient(circle at 50% 120%,var(--paper) .42rem,transparent .45rem);background-size:1.35rem 100%;background-position:.2rem 0}
.leaf-head{text-align:center;padding:.9rem 0 .7rem;border-bottom:1px solid var(--rule)}
.leaf-wd{display:block;font-size:1.15rem;color:var(--muted)}
.leaf-num{display:block;font-size:clamp(5.2rem,14vw,7.2rem);line-height:.92;font-weight:900;color:var(--indigo);letter-spacing:-.02em}
.leaf-num.red{color:var(--rubric)}
.leaf-my{display:block;font-size:1.3rem;font-weight:700;color:var(--indigo)}
.leaf-cal{display:flex;justify-content:center;gap:0;margin:.9rem 0 .2rem}
.leaf-cal button{font:inherit;font-size:.98rem;cursor:pointer;background:transparent;color:var(--indigo);border:1px solid var(--indigo);padding:.22rem .85rem}
.leaf-cal button:first-child{border-radius:999px 0 0 999px}
.leaf-cal button:last-child{border-radius:0 999px 999px 0;border-left:0}
.leaf-cal button[aria-pressed="true"]{background:var(--indigo);color:var(--ivory)}
.leaf-note{text-align:center;font-size:.98rem;color:var(--muted);margin:.35rem 0 0}
.leaf-saints{list-style:none;margin:.7rem 0 0;padding:0}
.leaf-saints li{padding:.5rem 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;align-items:baseline;line-height:1.3}
.leaf-saints a{font-weight:700;text-decoration:none}
.leaf-saints a:hover{text-decoration:underline}
.leaf-saints .gf a{color:var(--rubric)}
.leaf-saints span{font-size:.95rem;color:var(--muted);white-space:nowrap}
.leaf-names{margin:.8rem 0 0;font-size:1.06rem;line-height:1.45}
.leaf-names b{color:var(--indigo)}
.leaf-more{display:inline-block;margin-top:.8rem;font-size:1.06rem;font-weight:700}
.leaf-tear{position:absolute;inset:1.15rem 0 0 0;background:var(--paper);border-radius:0 0 10px 10px;text-align:center;padding-top:.9rem;transform-origin:8% 0;z-index:2;display:none;box-shadow:0 8px 18px -10px rgba(5,8,50,.5)}
.leaf-tear .leaf-num{color:#b9b5c9}
.leaf-tear.go{display:block;animation:tear 1.05s cubic-bezier(.5,.05,.7,.3) .55s forwards}
@keyframes tear{0%{transform:none;opacity:1}35%{transform:rotate(3deg) translateY(2%)}100%{transform:rotate(16deg) translate(18%,115%);opacity:0}}
@media (prefers-reduced-motion:reduce){.leaf-tear.go{display:none;animation:none}html{scroll-behavior:auto}}

/* ---------- sections ---------- */
.sec{padding:3.6rem 0}
.sec > .wrap > h2{margin-bottom:.5rem}
.sec .intro{max-width:var(--measure);color:var(--muted);margin-bottom:1.6rem}
.sec.alt{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* name finder */
.namefind{position:relative;max-width:34rem}
.namefind label{display:block;font-weight:700;color:var(--indigo);margin-bottom:.3rem}
.namefind input,.filter input{width:100%;font:inherit;font-size:1.25rem;padding:.75rem 1rem;border:2px solid var(--indigo);border-radius:8px;background:#fff;color:var(--ink)}
.namefind input::placeholder,.filter input::placeholder{color:#8b889c}
.nf-results{list-style:none;margin:.3rem 0 0;padding:.3rem 0;background:#fff;border:1px solid var(--rule);border-radius:8px;position:absolute;left:0;right:0;z-index:5;box-shadow:0 14px 30px -14px rgba(19,26,94,.45)}
.nf-results a{display:block;padding:.45rem 1rem;text-decoration:none;font-weight:700}
.nf-results a:hover,.nf-results a:focus{background:var(--ivory)}
.nf-results .none{padding:.5rem 1rem;color:var(--muted);font-size:1.05rem}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;margin-top:1.8rem}
.shots figure{margin:0}
.shots img{border-radius:14px;box-shadow:0 14px 28px -16px rgba(19,26,94,.55)}
.shots figcaption{margin-top:.9rem;font-size:1.04rem;line-height:1.42;color:var(--muted)}
.shots figcaption b{display:block;color:var(--indigo);font-size:1.14rem;line-height:1.25;margin-bottom:.2rem}
@media (max-width:900px){
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-right:-1.25rem;padding:0 1.25rem 1rem 0}
  .shots figure{flex:0 0 62%;max-width:17rem;scroll-snap-align:start}
}

/* months + year grid */
.months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--indigo);margin-top:1.4rem}
.months a{display:block;padding:.8rem .2rem;font-size:1.35rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--rule)}
.months a:hover{background:var(--paper)}
@media (max-width:640px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
.year{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 2.6rem;margin-top:1.5rem}
.year h2{font-size:1.4rem;border-bottom:2px solid var(--indigo);padding-bottom:.25rem;margin-bottom:.5rem}
.year h2 a{text-decoration:none}
.year ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.1rem}
.year ol a{display:block;text-align:center;padding:.28rem 0;text-decoration:none;border-radius:4px;font-size:1.08rem}
.year ol a:hover{background:var(--indigo);color:var(--ivory)}
.year ol a.gf{color:var(--rubric);font-weight:800}
.year ol a.gf:hover{background:var(--rubric);color:#fff}
@media (max-width:820px){.year{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.year{grid-template-columns:1fr}}
.key{font-size:1.02rem;color:var(--muted)}
.key b{color:var(--rubric)}

/* plain link lists */
.pairs{list-style:none;margin:1.2rem 0 0;padding:0;columns:3 15rem;column-gap:2.6rem}
.pairs li{break-inside:avoid;padding:.42rem 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.pairs a{font-weight:700;text-decoration:none}
.pairs a:hover{text-decoration:underline}
.pairs span{color:var(--muted);font-size:1rem;white-space:nowrap}
.guides{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.guides li{padding:1rem 0;border-top:1px solid var(--rule)}
.guides a{font-size:1.28rem;font-weight:700;text-decoration:none;line-height:1.25}
.guides a:hover{text-decoration:underline}
.guides p{margin:.25rem 0 0;color:var(--muted);font-size:1.06rem;line-height:1.45}
@media (max-width:700px){.guides{grid-template-columns:1fr}}

/* faq */
.faq{max-width:var(--measure)}
.faq details{border-top:1px solid var(--rule);padding:.9rem 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.24rem;color:var(--indigo);list-style-position:outside;line-height:1.3}
.faq details p{margin:.6rem 0 0}

/* closing call to action */
.cta{background:var(--night);color:var(--ivory);padding:3.6rem 0}
.cta .wrap{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.cta img.icon{width:6.5rem;height:6.5rem;border-radius:1.45rem;box-shadow:0 10px 30px -10px #000}
.cta h2{color:var(--ivory);margin-bottom:.4rem}
.cta p{color:#e6e2f3;max-width:34rem;margin-bottom:1.2rem}
@media (max-width:600px){.cta .wrap{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- inner pages ---------- */
.head{background:var(--night);color:var(--ivory);padding:1.3rem 0 2.4rem}
.head .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.head h1{color:var(--ivory)}
.head .greek{font-size:1.6rem;color:var(--gold);margin:.35rem 0 0;line-height:1.25}
.head .meta{margin:.7rem 0 0;color:#e6e2f3;font-size:1.2rem;line-height:1.45;max-width:40rem}
.head .meta a{color:var(--ivory)}
.head .meta b{color:#fff}
.head .rank{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:.05rem .8rem;font-size:1rem;margin-top:.8rem}
.head .rank.gf{background:var(--rubric);border-color:var(--rubric);color:#fff}
.crumbs{font-size:1rem;margin:0 0 1rem;color:#bdb9d6}
.crumbs a{color:#d9d6ea;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{padding:0 .35rem;color:#8f8bb0}
.mini{background:var(--paper);color:var(--indigo);border-radius:3px 3px 8px 8px;width:8.2rem;text-align:center;padding:0 0 .6rem;box-shadow:0 5px 0 -1px #e2d6b0,0 18px 30px -14px rgba(0,0,0,.7);margin-bottom:-3.6rem}
.mini::before{content:"";display:block;height:.8rem;background:var(--gold);border-radius:3px 3px 0 0;margin-bottom:.4rem}
.mini b{display:block;font-size:4.2rem;line-height:.95;font-weight:900}
.mini.red b{color:var(--rubric)}
.mini span{display:block;font-weight:700;font-size:1.1rem}
.head .icon{width:9.5rem;border:3px solid var(--gold);border-radius:6px;margin-bottom:-3.6rem;box-shadow:0 18px 30px -14px rgba(0,0,0,.7)}
@media (max-width:640px){
  .head{padding-bottom:1.8rem}
  .head .wrap{grid-template-columns:1fr;gap:1.2rem}
  .mini{display:none}
  .head .icon{margin:0;width:8rem;order:-1}
}
.body{padding:2.6rem 0 3.4rem}
.body .wrap{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:3.5rem}
.body .main > h2{margin:2.2rem 0 .7rem}
.body .main > h2:first-child{margin-top:0}
.body .main > h3{margin:1.5rem 0 .4rem}
.side{align-self:start;position:sticky;top:1.2rem}
@media (max-width:900px){.body .wrap{grid-template-columns:1fr;gap:2.2rem}.side{position:static}}
.lead{font-size:1.36rem;line-height:1.5}
.answer{font-size:1.42rem;line-height:1.45;margin-bottom:1.2rem}
.answer strong{color:var(--rubric)}
.note{font-size:1.04rem;color:var(--muted);border-left:3px solid var(--gold);padding-left:.9rem}

/* app card in the side column */
.app{background:var(--paper);border:1px solid var(--rule);border-top:.5rem solid var(--gold);border-radius:3px 3px 10px 10px;padding:1.2rem 1.3rem 1.4rem}
.app .who{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem}
.app .who img{width:3.4rem;height:3.4rem;border-radius:.78rem}
.app .who b{display:block;color:var(--indigo);font-size:1.22rem;line-height:1.15}
.app .who span{color:var(--muted);font-size:.98rem}
.app p{font-size:1.08rem;line-height:1.45;margin-bottom:1rem}
.app .badges img{height:2.75rem}

/* saints of a day */
.saints{list-style:none;margin:0;padding:0}
.saints > li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;padding:1.15rem 0;border-top:1px solid var(--rule)}
.saints > li:first-child{border-top:2px solid var(--indigo)}
.saints img,.saints .ph{width:4.2rem;height:5.6rem;border-radius:4px;object-fit:cover}
.saints .ph{background:linear-gradient(var(--ivory),#f3e8c4);border:1px solid var(--rule);display:grid;place-items:center}
.saints h3 a{text-decoration:none}
.saints h3 a:hover{text-decoration:underline}
.saints .gf h3 a{color:var(--rubric)}
.saints .sub{font-size:1.02rem;color:var(--muted);margin:.12rem 0 .4rem}
.saints p{margin:0 0 .4rem}
.saints .nm{font-size:1.04rem}
.names{line-height:1.9}
.names a{font-weight:700;text-decoration:none;white-space:nowrap}
.names a:hover{text-decoration:underline}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;border-top:2px solid var(--indigo);padding-top:.8rem;font-weight:700}
.pn a{text-decoration:none}
.pn a:hover{text-decoration:underline}

/* tables */
.tbl{overflow-x:auto;margin:1.1rem 0 1.4rem}
table{border-collapse:collapse;width:100%;font-size:1.08rem;line-height:1.4}
th{text-align:left;color:var(--indigo);border-bottom:2px solid var(--indigo);padding:.45rem .9rem .45rem 0;font-weight:700}
td{border-bottom:1px solid var(--rule);padding:.55rem .9rem .55rem 0;vertical-align:top}
td.d{white-space:nowrap;font-weight:700}
td.d a{text-decoration:none}
td .gf{color:var(--rubric);font-weight:700}
@media (max-width:640px){
  .mt tr{display:block;padding:.7rem 0;border-bottom:1px solid var(--rule)}
  .mt tr:first-child{display:none}
  .mt td{display:block;border:0;padding:.1rem 0}
  .mt td.d{font-size:1.2rem}
  .mt td.n:not(:empty)::before{content:"Name days: ";color:var(--muted)}
}
blockquote{margin:1rem 0;padding:.8rem 1.1rem;background:var(--paper);border-left:3px solid var(--gold);font-style:italic}
.main ul{padding-left:1.2rem}
.main li{margin-bottom:.35rem}

/* big index lists */
.filter{max-width:30rem;margin:0 0 1.6rem}
.az{display:flex;flex-wrap:wrap;gap:.1rem .2rem;margin:0 0 1.4rem;font-weight:700}
.az a{padding:.15rem .5rem;text-decoration:none;border-radius:4px}
.az a:hover{background:var(--indigo);color:var(--ivory)}
.idx section{margin-bottom:1.8rem;content-visibility:auto;contain-intrinsic-size:auto 22rem}
.idx h2{border-bottom:2px solid var(--indigo);padding-bottom:.15rem;margin-bottom:.5rem}
.idx ul{list-style:none;margin:0;padding:0;columns:4 12rem;column-gap:2rem}
.idx.wide ul{columns:3 17rem}
.idx li{break-inside:avoid;padding:.14rem 0;line-height:1.35}
.idx a{text-decoration:none}
.idx a:hover{text-decoration:underline}
.idx small{color:var(--muted);font-size:.92rem}

/* footer */
.foot{background:var(--night);color:#c9c5e0;padding:2.4rem 0 5.5rem;font-size:1.04rem;border-top:1px solid #2b3390}
.foot .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.foot b{display:block;color:var(--gold);margin-bottom:.4rem;font-size:1.1rem}
.foot a{display:block;color:var(--ivory);text-decoration:none;padding:.16rem 0}
.foot a:hover{text-decoration:underline;color:#fff}
.foot .legal{grid-column:1/-1;border-top:1px solid #2b3390;padding-top:1.1rem;color:#a6a2c4}
@media (max-width:640px){.foot .wrap{grid-template-columns:1fr 1fr}}

/* sticky bar on phones */
.getbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:2px solid var(--gold);display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));box-shadow:0 -10px 24px -14px rgba(19,26,94,.5);transform:translateY(110%);transition:transform .25s ease}
.getbar.on{transform:none}
.getbar[hidden]{display:none}
.getbar img{width:2.6rem;height:2.6rem;border-radius:.6rem;flex:none}
.getbar div{flex:1;min-width:0;line-height:1.2}
.getbar b{display:block;color:var(--indigo);font-size:1.05rem}
.getbar span{color:var(--muted);font-size:.92rem}
.getbar a{background:var(--indigo);color:#fff;text-decoration:none;font-weight:700;padding:.5rem 1rem;border-radius:999px;white-space:nowrap;font-size:1.05rem}
.getbar button{background:none;border:0;font:inherit;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:.2rem .3rem}
@media (prefers-reduced-motion:reduce){.getbar{transition:none}}