:root{--ink:#1b2430;--soft:#5a6675;--line:#e3e7ed;--bg:#fbfaf7;--card:#fff;--navy:#1f3a5f;--gold:#e2a33b;--hol:#fde8c4;--holink:#8a4b00;--exp:#fff3dc;--we:#f1f3f6;--ok:#1e7a4c}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--navy)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--navy)}
nav a{margin-left:16px;text-decoration:none;font-weight:600;font-size:.93rem;color:var(--soft)}
nav a:hover{color:var(--navy)}
main{padding:26px 0 40px}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15;margin:6px 0 12px;color:var(--navy);letter-spacing:-.02em}
h2{font-size:1.4rem;margin:38px 0 12px;color:var(--navy)}
h3{font-size:1.05rem;margin:22px 0 8px}
.lede{font-size:1.1rem;color:var(--soft);max-width:70ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--soft);margin:10px 0}
.callout{background:#fff8e8;border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-size:.95rem}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.btn{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:8px;padding:9px 15px;font-weight:700;font-size:.93rem;text-decoration:none;cursor:pointer;font-family:inherit}
.btn.ghost{background:#fff;color:var(--navy)}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
.tablewrap.narrow{max-width:640px}
table.hols{width:100%;border-collapse:collapse;font-size:.95rem}
.hols th{text-align:left;background:#f4f6f9;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);padding:10px 12px}
.hols td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.hols .d{white-space:nowrap}
.hols .hj{color:var(--soft);font-size:.88rem;white-space:nowrap}
.hols .note,.hols .alt{font-size:.82rem;color:var(--soft);margin-top:2px}
.hols .alt{white-space:normal;max-width:190px}
.hols tr.tot td{font-weight:800}
.st{display:inline-block;font-size:.75rem;font-weight:800;border-radius:20px;padding:2px 9px;white-space:nowrap}
.st.confirmed{background:#e3f4ea;color:var(--ok)}
.st.expected{background:var(--exp);color:var(--holink)}
.legend{font-size:.88rem;color:var(--soft)}
.legend .k{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin:0 4px 0 12px;border:1px solid var(--line)}
.legend .k:first-child{margin-left:0}
.k.hol{background:var(--hol)}.k.exp{background:var(--hol);border:1px dashed var(--holink)}.k.maybe{background:repeating-linear-gradient(45deg,#fff,#fff 3px,var(--hol) 3px,var(--hol) 6px)}.k.we{background:var(--we)}
.year{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.month{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.month h3{margin:0 0 6px;font-size:1rem;color:var(--navy)}
table.cal{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.88rem}
.cal th{font-size:.72rem;color:var(--soft);font-weight:700;padding:3px 0}
.cal td{text-align:center;padding:4px 0;border-radius:6px;line-height:1.2}
.cal td small{display:block;font-size:.62rem;color:var(--soft)}
.cal td.we{background:var(--we)}
.cal td.hol{background:var(--hol);color:var(--holink);font-weight:800}
.cal td.exp{outline:1px dashed var(--holink);outline-offset:-2px}
.cal td.maybe{background:repeating-linear-gradient(45deg,#fff,#fff 3px,var(--hol) 3px,var(--hol) 6px);font-weight:600}
.list{padding-left:20px}.list li{margin:6px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0}
.card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--navy)}
.card .flag{font-size:1.6rem}.card b{color:var(--navy)}.card span:last-child{font-size:.88rem;color:var(--soft)}
.faq{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:8px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:8px 0 0;color:var(--soft)}
.src{font-size:.85rem;color:var(--soft);margin-top:26px}
.foot{border-top:1px solid var(--line);background:#fff;padding:22px 0;font-size:.9rem;color:var(--soft)}
.foot a{color:var(--soft)}.foot .small{font-size:.8rem}
.phead{text-align:center;margin-bottom:10px}.phead h1{margin:0}.phead p{margin:0;color:var(--soft)}
.plist{columns:3;font-size:.8rem;padding-left:18px}.pnote{font-size:.78rem;color:var(--soft)}
@media (max-width:560px){nav a{margin:0 12px 0 0}.hols .hj{white-space:normal}}
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff;font-size:11px}
  .top,.foot,.noprint,.actions{display:none!important}
  main{padding:0}.wrap{max-width:none;padding:0}
  .year{grid-template-columns:repeat(4,1fr);gap:8px}
  .month{padding:4px 6px;border-radius:4px;break-inside:avoid}
  .month h3{font-size:13px;margin:0 0 3px}
  .cal{font-size:12px}.cal td{padding:4px 0}.cal th{font-size:9px;padding:1px 0}
  .cal td.hol,.cal td.we,.cal td.maybe{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .phead h1{font-size:18px}.plist{columns:4;font-size:8px;margin:6px 0 0}.pnote{font-size:8px;margin:2px 0}
  .faq,h2,.lede,.meta,.callout,.src,.legend,.tablewrap{display:none}
}
.months{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;line-height:1.9}
.bigwrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
table.big{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed}
.big th{font-size:.8rem;color:var(--soft);padding:6px 0}
.big td{height:88px;vertical-align:top;border:1px solid var(--line);padding:6px;font-size:.8rem}
.big td b{font-size:1.15rem;display:block;color:var(--ink)}
.big td small{color:var(--soft);font-size:.7rem}
.big td i{display:block;font-style:normal;font-size:.68rem;font-weight:700;color:var(--holink);margin-top:3px}
.big td.we{background:var(--we)}.big td.hol{background:var(--hol)}
.big .wk{width:36px;color:var(--soft);font-size:.72rem;text-align:center;background:#f7f8fa}
.bigdate{background:var(--navy);color:#fff;border-radius:14px;padding:22px;margin:10px 0 20px;text-align:center}
.bigdate span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.bigdate b{display:block;font-size:clamp(1.5rem,5vw,2.3rem);margin:6px 0}
.bigdate em{font-style:normal;color:var(--gold);font-weight:700}
.countdown{margin-top:10px;font-weight:700}
@media print{.big td{height:70px}.bigwrap{border:0;padding:0}.months,.bigdate .countdown{display:none}}

/* ================= month carousel ================= */
.mring-sec{display:none}
html.fx .mring-sec{display:block;position:relative;height:calc(12 * 26vh + 100vh);margin:10px -16px}
.mring-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;perspective:1700px;
  background:radial-gradient(55% 60% at 50% 55%,#fff6e3 0%,transparent 70%)}
.mring{--w:300px;--r:calc(var(--w) / 2 / tan(15deg) + 30px);position:relative;width:var(--w);height:360px;transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1))}
.mr-card{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:var(--ink);transform:rotateY(calc(var(--k) * 30deg)) translateZ(var(--r));backface-visibility:hidden;
  box-shadow:0 24px 50px -28px rgba(31,58,95,.45);transition:border-color .3s,box-shadow .3s}
.mr-card.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 30px 60px -26px rgba(226,163,59,.6)}
.mr-top{display:flex;justify-content:space-between;align-items:baseline}
.mr-top b{font-size:1.5rem;color:var(--navy);letter-spacing:-.02em}.mr-top em{font-style:normal;color:var(--soft);font-weight:700}
.mr-card .month{border:0;padding:0;background:none}
.mr-card .cal{font-size:.85rem}
.mr-foot{margin-top:auto;font-size:.78rem;font-weight:700;color:var(--holink);background:var(--exp);border-radius:10px;padding:7px 10px;line-height:1.35}
.mring-big{position:absolute;inset:0;display:grid;place-items:center;font-size:min(58vw,560px);font-weight:900;color:var(--navy);opacity:.05;pointer-events:none;letter-spacing:-.05em}
.mring-big.swap{animation:bigin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes bigin{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:.05}}
.mring-head{position:absolute;top:9vh;left:0;right:0;text-align:center;z-index:2}
.mring-head span{display:block;font-weight:800;letter-spacing:.3em;color:var(--gold);font-size:.85rem}
.mring-head b{font-size:clamp(2rem,6vw,3.4rem);color:var(--navy);letter-spacing:-.03em}
.mring-hint{position:absolute;bottom:6vh;left:0;right:0;text-align:center;color:var(--soft);font-size:.85rem;font-weight:600;animation:hintc 1.8s ease-in-out infinite}
@keyframes hintc{50%{transform:translateY(6px);opacity:.5}}
.mring-sec.away .mring-stage{visibility:hidden}
@media (max-width:600px){.mring{--w:250px;height:320px}.mr-card{padding:14px}.mring-head{top:7vh}}
@media print{.mring-sec{display:none!important}}

/* photos + Islamic touch */
.mring{height:430px}
.mr-card{padding:0;overflow:hidden;gap:0}
.mr-photo{position:relative;display:block;height:150px;flex:none;overflow:hidden}
.mr-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform .8s}
.mr-card.on .mr-photo img{transform:scale(1.12)}
.mr-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,35,.05) 20%,rgba(10,20,35,.72))}
.mr-photo .mr-top{position:absolute;left:16px;right:16px;bottom:12px;z-index:1}
.mr-photo .mr-top b{color:#fff;font-size:1.7rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.mr-photo .mr-top em{color:#ffe2a8}
.mr-badge{position:absolute;top:12px;left:12px;z-index:1;background:rgba(15,40,30,.72);color:#ffe2a8;font-size:.72rem;font-weight:800;padding:5px 10px;border-radius:20px;backdrop-filter:blur(4px);border:1px solid rgba(255,226,168,.4)}
.mr-card .month{padding:12px 16px 0}
.mr-foot{margin:10px 14px 14px}
.mring-stage{background:radial-gradient(55% 60% at 50% 55%,#fff3dc 0%,#fbfaf7 70%)}
.mring-pattern{position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231f3a5f' stroke-width='1.3'%3E%3Cpath d='M40 8l9 22 22 9-22 9-9 22-9-22-22-9 22-9z'/%3E%3Cpath d='M17 17l23 8 23-8-8 23 8 23-23-8-23 8 8-23z'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent)}
@media (max-width:600px){.mring{height:400px}.mr-photo{height:120px}}
.banner{position:relative;height:210px;border-radius:16px;overflow:hidden;margin:6px 0 18px}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,50,.7),rgba(15,30,50,.05) 70%)}
.banner span{position:absolute;left:22px;bottom:18px;z-index:1;color:#fff;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.bigdate.photo{background-size:cover;background-position:center;padding:46px 22px}
@media print{.banner{display:none}}
.mr-badges{position:absolute;top:10px;left:10px;right:10px;z-index:1;display:flex;flex-wrap:wrap;gap:5px}
.mr-badges .mr-badge{position:static}
.mr-badge.hb{background:rgba(70,25,5,.72);color:#ffd9a8;border-color:rgba(255,200,140,.45)}
nav a{margin-left:14px}
@media (max-width:760px){nav a:nth-child(4){display:none}}