/* v4 "Aegean sky" — Claude Design canvas, row v4: the whole page sits under a living sky that follows the time of day
   in Greece and Cyprus (dawn, day, dusk, night with stars), the day's date is the sun or the moon, glass cards.
   Seasons: Christmas (Star of Bethlehem, soft lights) and Pascha (rising candle sparks). Manrope + Inter. */
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-greek.woff2) format('woff2'); font-weight: 200 800; unicode-range: U+0370-03FF, U+1F00-1FFF; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-latin.woff2) format('woff2'); font-weight: 200 800; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/fonts/inter-cyrillic.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-latin-ext.woff2) format('woff2'); font-weight: 200 800; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-greek.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0370-03FF, U+1F00-1FFF; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-cyrillic.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
:root {
  --ink: #F4F6FB; --ink2: #D6DEEE; --muted: #A9B8D6; --gold: #FFC56B; --gold-ink: #3A1606; --coral: #FF8A5B;
  --glass: rgba(255, 255, 255, .08); --glass2: rgba(255, 255, 255, .13); --stroke: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .1);
  --shadow: 0 10px 40px rgba(3, 10, 30, .25);
  --display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* night sky by default; the head script sets data-sky before the first paint */
  --sky: radial-gradient(90% 50% at 85% 0%, rgba(110, 120, 220, .28), transparent 60%), radial-gradient(70% 40% at 0% 30%, rgba(40, 120, 190, .25), transparent 60%), linear-gradient(180deg, #071635 0%, #061029 50%, #040A1B 100%);
  --orb: radial-gradient(circle at 35% 30%, #FFFFFF, #E4E9F7 55%, #B8C3E0); --orb-glow: 0 0 50px rgba(200, 215, 255, .45); --orb-ink: #1B2647;
}
html[data-sky="dawn"] { --sky: radial-gradient(110% 55% at 80% 0%, rgba(255, 160, 110, .75), transparent 62%), radial-gradient(80% 45% at 5% 20%, rgba(150, 110, 200, .45), transparent 60%), linear-gradient(180deg, #2B3F7A 0%, #4A4C8C 32%, #182A5C 70%, #0C1A3E 100%); --orb: radial-gradient(circle at 35% 30%, #FFF4D6, #FFC07A 55%, #F2804A); --orb-glow: 0 0 60px rgba(255, 150, 90, .7); --orb-ink: #3A1606; }
html[data-sky="day"] { --sky: radial-gradient(100% 50% at 85% 0%, rgba(255, 236, 170, .55), transparent 60%), radial-gradient(80% 50% at 0% 25%, rgba(120, 200, 255, .45), transparent 60%), linear-gradient(180deg, #1F66C2 0%, #1A55A6 45%, #123F82 100%); --orb: radial-gradient(circle at 35% 30%, #FFFDF2, #FFE38A 55%, #FFB84D); --orb-glow: 0 0 70px rgba(255, 220, 120, .8); --orb-ink: #3A2306; }
html[data-sky="dusk"] { --sky: radial-gradient(110% 55% at 85% 5%, rgba(255, 120, 80, .7), transparent 60%), radial-gradient(80% 50% at 0% 20%, rgba(190, 80, 150, .5), transparent 60%), linear-gradient(180deg, #2A2466 0%, #3B2A6E 30%, #14204F 70%, #0A1434 100%); --orb: radial-gradient(circle at 35% 30%, #FFE7B0, #FFA25A 55%, #E8603A); --orb-glow: 0 0 60px rgba(255, 130, 80, .75); --orb-ink: #3A1606; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #061029; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 17px/1.55 var(--sans); background: var(--sky); background-attachment: fixed; overflow-x: hidden; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #FFE0A8; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 .45em; }
h1 { font-size: clamp(36px, 6vw, 68px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
main.wrap { padding-top: 24px; padding-bottom: 64px; }
main.narrow { max-width: 900px; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.lead { font-size: 19px; color: var(--ink2); max-width: 680px; }
.note { font-size: 15px; color: var(--ink2); background: var(--glass); border: 1px solid var(--stroke); border-radius: 16px; padding: 12px 14px; max-width: 680px; }

/* the sky layers: stars at night, Christmas lights, Easter sparks */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .8; animation: twinkle 4s ease-in-out infinite; }
html[data-sky="day"] .star { display: none; }
html[data-sky="dawn"] .star, html[data-sky="dusk"] .star { opacity: .35; }
@keyframes twinkle { 50% { opacity: .15; transform: scale(.6); } }
.bethlehem { position: absolute; top: 120px; right: 9%; width: 70px; height: 70px; filter: drop-shadow(0 0 18px rgba(255, 220, 150, .9)); animation: glow 5s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 30px rgba(255, 220, 150, 1)); transform: scale(1.06); } }
.light { position: absolute; top: -10px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFF6D6, rgba(255, 200, 120, 0) 70%); animation: fall linear infinite; }
@keyframes fall { to { transform: translate3d(30px, 110vh, 0); } }
.spark { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #FFE7A8, rgba(255, 160, 80, 0) 70%); animation: rise linear infinite; }
@keyframes rise { to { transform: translate3d(-20px, -110vh, 0); opacity: 0; } }
.season { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 197, 107, .16); border: 1px solid rgba(255, 197, 107, .4); color: var(--gold); font-weight: 700; font-size: 14px; margin-bottom: 14px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(6, 14, 36, .35); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 12px; min-height: 62px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.logo:hover { color: var(--ink); }
.logo.small { font-size: 18px; }
.nav { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; order: 3; width: 100%; padding-bottom: 8px; margin: 0 -4px; }
.nav::-webkit-scrollbar { display: none; }
.nav a { white-space: nowrap; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink2); }
.nav a:hover { background: var(--glass); color: var(--ink); }
.nav a[aria-current] { background: var(--glass2); color: #fff; box-shadow: inset 0 0 0 1px var(--stroke); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 1000px) { .nav { order: 0; width: auto; padding: 0; margin: 0 0 0 auto; } .tools { margin-left: 8px; } }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--glass); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.langs { position: relative; }
.langs summary { list-style: none; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--glass); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 14px; }
.langs summary::-webkit-details-marker { display: none; }
.langs-menu { position: absolute; right: 0; top: 50px; background: #0E1C40; border: 1px solid var(--stroke); border-radius: 16px; padding: 6px; min-width: 180px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.langs-menu a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.langs-menu a:hover, .langs-menu a[aria-current] { background: var(--glass2); }

/* hero: the date as the sun (or the moon at night) */
.dawn { padding: 12px 0 8px; }
.dawn-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: center; }
.dawn-text { grid-column: 1 / -1; min-width: 0; }
.sun { width: 88px; height: 88px; border-radius: 50%; background: var(--orb); box-shadow: var(--orb-glow); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--orb-ink); transition: background 2s, box-shadow 2s; }
.sun-d { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; }
.sun-m { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dawn-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dawn-meta .eyebrow { margin: 0; }
.dawn-feast { margin: 0; font-weight: 600; color: var(--gold); font-size: 16px; }
@media (min-width: 900px) { .sun { width: 120px; height: 120px; } .sun-d { font-size: 48px; } .sun-m { font-size: 11px; } .dawn-feast { font-size: 18px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.chip { padding: 9px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--stroke); font-size: 17px; font-weight: 600; text-decoration: none; color: #fff; transition: background .2s, border-color .2s; }
a.chip:hover { background: var(--glass2); border-color: rgba(255, 197, 107, .6); color: #fff; }
.chips.small .chip { font-size: 15px; padding: 7px 11px; font-weight: 500; }
.chip .lat, .namelist .lat { font-weight: 400; color: var(--muted); font-size: .82em; }
details.more { margin: -2px 0 14px; }
details.more summary { cursor: pointer; display: inline-block; padding: 9px 14px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: 15px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 12px; }

.daycard { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 8px auto 36px; padding: 0; }
.glass { background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(14px); border-radius: 22px; padding: 18px; }
.glass h2 { font-size: 20px; margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tag { padding: 6px 11px; border-radius: 10px; font-weight: 600; font-size: 14px; background: var(--glass2); color: var(--ink); }
.tag.terra { background: rgba(255, 138, 91, .2); color: #FFD0BC; }
.tag.sand { background: rgba(255, 197, 107, .18); color: var(--gold); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 18px; border-radius: 14px; font: 700 16px var(--display); text-decoration: none; cursor: pointer; border: 0; }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.gold:hover { background: #FFD58E; color: var(--gold-ink); }
.btn.line { background: var(--glass); color: var(--ink); border: 1px solid var(--stroke); }
.btn.line:hover { background: var(--glass2); color: #fff; }
.btn.navy { background: #fff; color: #0B1A3C; }

/* search */
.search { margin: 4px 0 6px; position: relative; }
.search label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-family: var(--display); }
.search-row { display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid var(--stroke); }
.search input { flex: 1; min-width: 0; padding: 10px 12px; font: 17px var(--sans); border: 0; background: transparent; color: #fff; outline: none; }
.search input::placeholder { color: var(--muted); }
.search .btn { min-height: 42px; border-radius: 12px; }
.results { list-style: none; margin: 8px 0 0; padding: 6px; background: #0E1C40; border: 1px solid var(--stroke); border-radius: 16px; position: absolute; left: 0; right: 0; z-index: 10; box-shadow: var(--shadow); }
.results a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.results a:hover, .results a:focus { background: var(--glass2); }

/* lists of days */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 40px; }
.card { text-decoration: none; color: inherit; padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--stroke); display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: start; transition: background .2s; }
.card:hover { color: inherit; background: var(--glass2); }
.card .dot { grid-row: 1 / 4; text-align: center; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; padding-top: 2px; }
.card .dot small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.card strong { font-weight: 600; font-size: 16px; line-height: 1.35; }
.card .muted { font-size: 13px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.panel { padding: 22px; border-radius: 22px; background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(12px); margin-bottom: 12px; }
.panel h2 { font-size: 22px; }
.panel.wine { background: linear-gradient(150deg, rgba(255, 138, 91, .28), rgba(255, 197, 107, .14)); border-color: rgba(255, 197, 107, .35); }
.panel.wine a { color: var(--gold); font-weight: 700; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 14px; }
.rows dd { margin: 0; font-weight: 700; text-align: right; }
.plain { margin: 0; padding-left: 20px; } .plain li { margin-bottom: 6px; }

/* the big date card on name, Easter and fasting pages */
.namecard { display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: 24px; background: var(--glass); border: 1px solid var(--stroke); margin: 6px 0 16px; }
.namecard > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.namecard strong { font-family: var(--display); font-size: 20px; line-height: 1.3; }
.namecard.big strong { font-size: 26px; font-weight: 800; }
.halo { width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--orb); box-shadow: var(--orb-glow); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--orb-ink); }
.halo.sm { width: 84px; height: 84px; }
.halo-d { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; }
.halo-m { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 0 6px; }
.namecard.fast-fast .halo, .namecard.fast-strict .halo { background: radial-gradient(circle at 35% 30%, #FFE3D6, #FF9C7A 55%, #E2603F); color: #3A0E04; }
.years { width: 100%; border-collapse: collapse; }
.years th, .years td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.years th { width: 45%; font-weight: 500; padding-right: 12px; color: var(--ink2); }
.years tr:last-child th, .years tr:last-child td { border-bottom: 0; }
.years tr.hl th, .years tr.hl td { color: var(--gold); font-weight: 800; }
.years-nav, .letters, .months { display: flex; flex-wrap: wrap; gap: 6px; }
.years-nav a, .years-nav strong, .letters a, .months a { padding: 7px 12px; border-radius: 10px; background: var(--glass); border: 1px solid var(--stroke); text-decoration: none; color: var(--ink); font-weight: 600; }
.years-nav strong { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.namelist { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.namelist a { text-decoration: none; color: var(--ink); }
.namelist a:hover { color: var(--gold); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* calendar table */
.cal { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass); border: 1px solid var(--stroke); border-radius: 20px; overflow: hidden; margin-bottom: 24px; }
.cal th, .cal td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cal th { width: 96px; white-space: nowrap; font-weight: 500; color: var(--muted); }
.cal th a { font-family: var(--display); font-weight: 800; font-size: 21px; text-decoration: none; color: var(--ink); }
.cal tr.sunday th a { color: var(--gold); }
.cal .feast { display: block; font-size: 14px; color: var(--muted); }
.cal td.fm { width: 1%; white-space: nowrap; }
.fastmark { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: rgba(255, 138, 91, .22); color: #FFD0BC; }
.fastmark.fish { background: rgba(120, 190, 255, .2); color: #CFE6FF; } .fastmark.oil { background: rgba(255, 197, 107, .2); color: var(--gold); }
.month { margin-bottom: 24px; }
.month h2 a { text-decoration: none; color: var(--ink); }

/* wishes */
.maker { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; }
.maker-form label[for] { font-weight: 700; display: block; margin-bottom: 6px; }
.maker-form input[data-wish-name] { width: 100%; padding: 14px 16px; font: 20px var(--sans); border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); color: #fff; }
.wish-list { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.wish-list legend { font-weight: 700; margin-bottom: 8px; }
.wish { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--glass); border: 1px solid var(--stroke); border-radius: 14px; cursor: pointer; font-size: 15px; }
.wish input { margin-top: 4px; accent-color: var(--gold); }
.maker-out { padding-top: 32px; }
@media (max-width: 680px) { .maker-out { padding-top: 0; } }
.wish-tr, .wishes .wish-tr { display: block; color: var(--muted); font-size: .92em; margin-top: 4px; }
.lang-offer { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 10px 16px; background: rgba(7, 22, 53, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--stroke); font-size: 15px; }
.lang-offer .btn { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.lang-offer .icon-btn { width: 34px; height: 34px; }
.maker-out canvas { width: 100%; height: auto; border-radius: 22px; display: block; box-shadow: var(--shadow); }
.code { width: 100%; font: 13px ui-monospace, Consolas, monospace; padding: 10px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .25); color: var(--ink); }

/* footer */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 30px 0 44px; font-size: 15px; background: rgba(4, 10, 27, .35); }
.foot p { color: var(--ink2); }
.foot-links, .foot-langs { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-langs a[aria-current] { font-weight: 800; text-decoration: none; }

/* install offer, toast, consent */
.install { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; background: #0E1C40; color: var(--ink2); border: 1px solid var(--stroke); border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font-size: 15px; }
.install img { flex: none; border-radius: 12px; }
.install-body { flex: 1; min-width: 0; }
.install-body strong { display: block; color: #fff; margin-bottom: 2px; }
.install-body p { margin: 0; }
.install-steps { margin: 6px 0 0; padding-left: 20px; }
.install-ico { display: inline-flex; vertical-align: -4px; padding: 2px; border-radius: 6px; background: var(--glass2); color: #fff; }
.install-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.install-buttons .btn { min-height: 40px; padding: 8px 14px; background: var(--glass2); color: #fff; }
.install-buttons .btn.primary { background: var(--gold); color: var(--gold-ink); }
.install.with-arrow { bottom: calc(64px + env(safe-area-inset-bottom)); }
.install-arrow { position: absolute; bottom: -44px; color: var(--gold); animation: nudge 1.4s ease-in-out infinite; }
.install-arrow.center { left: calc(50% - 14px); } .install-arrow.end { right: 18px; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; color: #0B1A3C; padding: 10px 18px; border-radius: 999px; z-index: 60; margin: 0; font-weight: 600; }
.consent { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: 12px; max-width: 560px; margin: 0 auto; padding: 16px; background: #0E1C40; border: 1px solid var(--stroke); border-radius: 20px; box-shadow: var(--shadow); }
.consent-actions { display: flex; gap: 8px; } .consent-actions .btn { flex: 1; background: var(--glass2); color: #fff; }

/* printable calendar: white paper */
.pmonth { margin-bottom: 32px; }
.pgrid { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; color: #1C2B4F; border-radius: 12px; overflow: hidden; }
.pgrid th { font-size: 13px; padding: 6px; background: #0E1C40; color: #fff; }
.pgrid td { border: 1px solid #E6E9F2; height: 92px; vertical-align: top; padding: 4px 6px; font-size: 11px; line-height: 1.25; }
.pgrid td b { display: block; font-family: var(--display); font-size: 20px; font-weight: 800; color: #1C2B4F; }
.pgrid td.sunday b { color: #C8553D; }
.pgrid td span { display: block; font-weight: 600; } .pgrid td i { display: block; color: #6E6A75; font-style: normal; }
.pgrid td.f-fast, .plegend .f-fast { background: #FCEFEA; } .pgrid td.f-strict { background: #F8DCD3; } .pgrid td.f-fish, .plegend .f-fish { background: #EEF3FB; } .pgrid td.f-oil, .plegend .f-oil { background: #FFF4E0; }
.plegend { font-size: 12px; color: var(--muted); } .plegend span { padding: 2px 6px; border-radius: 6px; color: #1C2B4F; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .top, .foot, .noprint, .install, .consent, .sky { display: none !important; }
  body { background: #fff; color: #000; } main.wrap { padding: 0; max-width: none; }
  .pmonth { break-after: page; margin: 0; } .pmonth h2 { color: #1C2B4F; } .pgrid td { height: 25mm; }
}
@media (prefers-reduced-motion: reduce) { .star, .light, .spark, .bethlehem, .install-arrow { animation: none; } .light, .spark { display: none; } }

/* Dates are links (to the day page), quietly: underlined on hover. */
a.sun { text-decoration: none; }
a.sun:hover { filter: brightness(1.06); }
.dlink { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.dlink:hover { color: var(--gold); border-bottom-color: var(--gold); }
.eyebrow .dlink { border-bottom: 0; }
.daycard h2 .dlink { border-bottom: 0; }
.daycard h2 .dlink:hover { color: var(--gold); }

/* Month calendar (like the prayer-times site): every day a button, today filled, the chosen day ringed. */
.mcal { margin: 0 0 28px; }
.mcal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mcal-head h2 { margin: 0; }
.mcal-nav { display: flex; gap: 6px; }
.mcal-nav .chip { cursor: pointer; font: 700 16px var(--display); min-width: 44px; padding: 8px 12px; }
.mcal-nav .chip:hover { background: var(--glass2); }
.mcal-grid { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.mcal-grid th { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 2px 0 4px; }
.mcal-grid th.sunday { color: var(--gold); }
.mcal-grid td { padding: 0; border-radius: 14px; background: rgba(255, 255, 255, .06); vertical-align: top; }
.mcal-grid td.pad { background: none; }
.mcal-grid td a { position: relative; display: block; min-height: 64px; padding: 7px 6px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; text-align: center; transition: background .15s, box-shadow .15s; }
.mcal-grid td a:hover { background: rgba(255, 255, 255, .1); }
.mcal-grid td a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.mcal-grid b { display: block; font: 800 19px/1.1 var(--display); }
.mcal-grid small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcal-grid td.sunday b { color: var(--gold); }
.mcal-grid td.mark a { box-shadow: inset 0 0 0 1.5px rgba(255, 197, 107, .75); }
.mcal-grid td.today { background: rgba(255, 197, 107, .2); }
.mcal-grid td.today b { color: var(--gold); }
.mcal-grid td.sel a { box-shadow: inset 0 0 0 2px #fff; }
.fd { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; }
.fd.fast { background: #FF8A5B; } .fd.oil { background: #FFD66B; } .fd.fish { background: #7FD3FF; }
.mcal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mcal-legend .fd { position: static; }
.mcal-legend .ring { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255, 197, 107, .9); }
.mcal-day { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mcal-day h3 { margin: 0 0 6px; font-size: 22px; }
.mcal-day .feast { margin: 0 0 10px; color: var(--gold); font-weight: 600; }
@media (max-width: 560px) { .mcal-grid { border-spacing: 3px; } .mcal-grid td a { min-height: 54px; padding: 6px 2px; } .mcal-grid b { font-size: 16px; } .mcal-grid small { font-size: 10px; } .fd { top: 5px; right: 5px; width: 6px; height: 6px; } }

/* Card maker: four designs, own text, signature. */
.themes { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.themes legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.theme { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); }
.theme input { position: absolute; opacity: 0; pointer-events: none; }
.theme .sw { width: 100%; aspect-ratio: 1; border-radius: 14px; border: 2px solid transparent; box-shadow: 0 4px 14px rgba(3, 10, 30, .3); transition: border-color .15s, transform .15s; }
.theme input:checked + .sw { border-color: var(--gold); transform: translateY(-2px); }
.theme input:focus-visible + .sw { outline: 2px solid #fff; outline-offset: 2px; }
.t0 .sw { background: radial-gradient(circle at 50% 30%, #FFC07A 0 16%, transparent 17%), radial-gradient(90% 60% at 85% 5%, rgba(255, 138, 91, .6), transparent 60%), linear-gradient(#2A2466, #071635); }
.t1 .sw { background: radial-gradient(circle at 50% 30%, #FFF 0 16%, transparent 17%), linear-gradient(#FFE3C4, #F9B9A6 45%, #B49BD8 80%, #6E68B8); }
.t2 .sw { background: radial-gradient(circle at 50% 30%, #FFF6C9 0 16%, transparent 17%), linear-gradient(#8FD0FF, #3E95E8 55%, #0E4FA8); }
.t3 .sw { background: radial-gradient(ellipse 7% 12% at 50% 22%, #FFE7A8 0 60%, transparent 62%), radial-gradient(circle at 50% 30%, rgba(255, 170, 70, .45), transparent 40%), linear-gradient(transparent 33%, #B32B2B 33% 45%, transparent 45%) 50% 0 / 34% 100% no-repeat, linear-gradient(#120C22, #0A0714); }
.wish.own > span { flex: 1; }
.wish.own textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .18); color: #fff; font: 16px/1.4 var(--sans); resize: vertical; }
.maker-form .sign-l { margin-top: 14px; }
.maker-form input[data-wish-sign] { width: 100%; padding: 12px 14px; font: 17px var(--sans); border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); color: #fff; }

/* Moving between pages (as on our prayer-times site): the sky and the header stay put, the old page fades out and
   the new one fades in, one after the other, so text never shows doubled or jumps. */
/* The @view-transition rule itself is inline at the top of <head>: from the external file Chrome sometimes missed it and skipped the transition. */
.sky { view-transition-name: sky; }
.top { view-transition-name: top; }
::view-transition-group(sky), ::view-transition-group(top) { animation: none; }
::view-transition-old(sky), ::view-transition-old(top) { display: none; }
::view-transition-new(sky), ::view-transition-new(top) { animation: none; }
::view-transition-old(root) { animation: vt-out .14s ease-in both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(3px); } }

/* Compact calendar at the side: numbers, fast dots and feast rings only; the chosen day right under it.
   Home: content on the left, the calendar on the right (sticky). Calendar pages: grid and day side by side. */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .home-cols { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .home-side { position: sticky; top: 84px; } }
.home-main .daycard { margin-top: 0; }
.home-main .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mcal { container-type: inline-size; padding: 14px; }
.mcal-head h2 { font-size: 20px; }
.mcal-nav .chip { min-width: 36px; padding: 6px 10px; font-size: 14px; }
.mcal-grid { border-spacing: 3px; }
.mcal-grid th { font-size: 11px; padding: 0 0 2px; }
.mcal-grid td, .mcal-grid td a { border-radius: 10px; }
.mcal-grid td a { min-height: 0; padding: 7px 0 8px; }
.mcal-grid b { font-size: 15px; }
.mcal-grid small { display: none; }
.fd { top: 4px; right: 4px; width: 5px; height: 5px; }
.mcal-legend { font-size: 12px; gap: 4px 12px; }
.mcal-day { margin-top: 10px; padding-top: 12px; }
.mcal-day h3 { font-size: 18px; }
.mcal-day .chips .chip { font-size: 14px; padding: 6px 10px; }
@container (min-width: 760px) {
  .mcal-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; }
  .mcal-day { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) { .mcal-grid td a { min-height: 0; padding: 8px 0; } .mcal-grid b { font-size: 15px; } }

/* Occasion chips and the own-text box above the ready wishes. */
.occasions { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.occasions legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.occ { cursor: pointer; }
.occ input { position: absolute; opacity: 0; pointer-events: none; }
.occ span { display: inline-block; padding: 8px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--stroke); font-weight: 600; font-size: 15px; }
.occ input:checked + span { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.occ input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.own-box { margin: 16px 0 0; padding: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--stroke); }
.own-box label { display: block; font-weight: 700; margin: 0 0 6px; }
.own-box textarea { display: block; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .18); color: #fff; font: 16px/1.4 var(--sans); resize: vertical; }
.own-box .small { margin: 6px 0 12px; }
.own-box input { width: 100%; padding: 12px 14px; font: 17px var(--sans); border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .18); color: #fff; }
[data-maker] [hidden] { display: none !important; }

/* Wave of cards on page change (standard of our sites): up to 8 cards in view, 50 ms apart; shift of 3 px at most. */
::view-transition-new(root) { animation: vt-fade .2s ease-out .14s both; }
@keyframes vt-fade { from { opacity: 0; } }
::view-transition-group(w1), ::view-transition-group(w2), ::view-transition-group(w3), ::view-transition-group(w4), ::view-transition-group(w5), ::view-transition-group(w6), ::view-transition-group(w7), ::view-transition-group(w8) { animation: none; }
::view-transition-new(w1) { animation: vt-in .3s ease-out .18s both; } ::view-transition-new(w2) { animation: vt-in .3s ease-out .23s both; }
::view-transition-new(w3) { animation: vt-in .3s ease-out .28s both; } ::view-transition-new(w4) { animation: vt-in .3s ease-out .33s both; }
::view-transition-new(w5) { animation: vt-in .3s ease-out .38s both; } ::view-transition-new(w6) { animation: vt-in .3s ease-out .43s both; }
::view-transition-new(w7) { animation: vt-in .3s ease-out .48s both; } ::view-transition-new(w8) { animation: vt-in .3s ease-out .53s both; }

/* The language offer floats at the bottom, over the page: nothing moves when it appears; it yields to the consent window. */
.lang-offer { position: fixed; z-index: 40; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: fit-content; max-width: min(620px, calc(100vw - 24px)); margin: 0 auto; background: #0E1C48; backdrop-filter: none; border: 1px solid var(--stroke); border-radius: 16px; box-shadow: var(--shadow); animation: offer-in .3s ease-out both; }
body:has(#stats-consent, [data-stats-banner]:not([hidden])) .lang-offer { display: none; }
.lang-offer.still { animation: none; }
@keyframes offer-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; } .star, .light, .spark, .bethlehem { animation: none !important; } }
::view-transition-group(top) { z-index: 20; }