/* A quiet, illustrated book: generous margins, ink rules and framed portraits. */
:root { --paper:#f6f0e5; --card:#fffcf5; --ink:#30291f; --muted:#706451; --wine:#632f36; --gold:#aa8147; --line:#dcd0bc; }
body { background:radial-gradient(ellipse at 85% 0%,#e8dcc5 0,transparent 44%),var(--paper); }
.page { max-width:1200px; padding:30px 40px 36px; }
.topline { padding:0 0 22px; border-bottom:1px solid var(--gold); }
.brand { letter-spacing:.19em; font-size:.72rem; }
.lang { background:transparent; border-color:#cbb99e; min-height:44px; padding-inline:20px; }
h1,h2,.saint-name,.quiz-heading h3 { font-family:'Cormorant Garamond',Georgia,serif; }
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] .saint-name,body[dir="rtl"] .quiz-heading h3 { font-family:'Noto Naskh Arabic',serif; }
.hero { grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr); gap:80px; padding:56px 0 44px; }
.eyebrow { font-size:.68rem; letter-spacing:.2em; }
h1 { font-size:clamp(4rem,8vw,7rem); line-height:.94; max-width:600px; margin:22px 0 25px; font-weight:500; letter-spacing:-.045em; }
.intro { max-width:420px; font-size:1.06rem; line-height:1.85; }
.hero-art { display:block; min-height:0; aspect-ratio:5/6; max-height:390px; width:100%; justify-self:end; border-radius:48% 48% 3px 3px; padding:10px; border:1px solid var(--gold); background:#e4d5ba; box-shadow:10px 12px 0 #e9dfce; }
.hero-art:before,.hero-art:after { display:none; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center 25%; border-radius:48% 48% 0 0; display:block; }
.art-caption { position:absolute; inset-inline:10px; bottom:10px; padding:30px 12px 12px; background:linear-gradient(transparent,rgba(38,29,22,.85)); color:#fff8e9; text-align:center; font-size:.85rem; }
.feature { border-radius:3px; padding:25px 30px; margin:0 0 56px; background:var(--wine); border-inline-start:4px solid var(--gold); }
.feature h2 { font-size:2.1rem; }
.feature p { font-size:.88rem; }
.feature button { border-radius:3px; min-height:46px; padding:11px 21px; transition:background .2s; }
.feature button:hover { background:#81444b; }
.section-head h2 { font-size:2.65rem; line-height:1.1; }
.section-head p { margin-top:9px; }
.tools { margin:25px 0 10px; gap:12px; }
.search-wrap input { padding:15px 18px; border-radius:3px; min-height:54px; }
.favbtn { border-radius:3px; min-height:54px; padding-inline:24px; }
.collection-count { color:var(--muted); font-size:.78rem; margin:12px 0 22px; letter-spacing:.04em; }
.grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 22px; }
.saint-card { border-radius:3px; border:0; border-bottom:1px solid var(--line); background:transparent; overflow:visible; }
.saint-card .saint-photo { height:auto; aspect-ratio:4/5; object-fit:contain; background:#e7ddca; border:7px solid #ebe1d0; outline:1px solid #d6c7af; outline-offset:-1px; cursor:pointer; }
.saint-card .saint-info { padding:17px 0 20px; }
.saint-card .saint-name { padding:0; font-size:1.4rem; font-weight:600; line-height:1.1; min-height:2.2em; }
.saint-card .saint-date { font-size:.76rem; letter-spacing:.04em; margin-top:9px; }
.saint-card .star { top:13px; inset-inline-end:13px; width:38px; height:38px; display:grid; place-items:center; box-shadow:0 2px 8px #30291f22; }
.saint-card:hover { box-shadow:none; transform:translateY(-4px); }
.star:hover { background:#fff5df; }
.footer { margin-top:52px; font-size:.78rem; padding-top:22px; }
.footer a { color:var(--wine); text-underline-offset:4px; }
.story-panel { border-radius:4px; }
.story-top { background:#eadeca; }
.story-top h2 { font-size:2.7rem; }
.story-body { max-width:650px; margin:auto; }
.story-body p { font-size:1.07rem; line-height:1.95; }
.story-photo { border-radius:2px; padding:8px; border:1px solid var(--line); background:#eee4d3; }
.empty { border:1px dashed var(--gold); border-radius:3px; padding:40px 20px; }
@media(min-width:901px) { body[dir="rtl"] h1 { font-size:5.5rem; } }
@media(max-width:900px) { .page { padding:24px; } .hero { gap:36px; } h1 { font-size:4.8rem; } .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; } .hero-art { max-height:340px; } }
@media(max-width:620px) {
 .page { padding:18px 18px 28px; } .brand { font-size:.65rem; }
 .hero { grid-template-columns:minmax(0,1fr) 110px; gap:18px; padding:34px 0; align-items:center; }
 h1 { font-size:clamp(2.7rem,9vw,3.7rem); margin:15px 0; }
 body[dir="rtl"] h1 { font-size:2.4rem; }
 .hero .eyebrow { font-size:.55rem; letter-spacing:.09em; }
 .intro { font-size:.88rem; line-height:1.7; grid-column:1/-1; }
 .hero-art { width:110px; aspect-ratio:3/5; border-radius:60px 60px 2px 2px; padding:5px; box-shadow:5px 6px 0 #e9dfce; }
 .art-caption { display:none; } .hero-art img { border-radius:60px 60px 0 0; }
 .feature { margin-bottom:36px; padding:20px; gap:16px; } .feature h2 { font-size:1.8rem; }
 .feature button { width:100%; } .section-head h2 { font-size:2.2rem; }
 .tools { margin-top:20px; } .favbtn { flex:0 1 auto; font-size:.9rem; padding-inline:18px; }
 .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
 .saint-card .saint-photo { height:auto; aspect-ratio:3/4; border-width:5px; }
 .saint-card .saint-info { padding:13px 0 14px; text-align:start; }
 .saint-card .saint-name { text-align:start; font-size:1.2rem; min-height:44px; padding:0; line-height:1.2; }
 .saint-card .saint-date { font-size:.73rem; margin-top:7px; }
 .saint-card .star { width:36px; height:36px; top:9px; inset-inline-end:9px; }
 .story-top h2,body[dir="rtl"] .story-top h2 { font-size:2rem; }
 .footer { gap:12px; margin-top:36px; }
}
@media(max-width:360px) { .hero { grid-template-columns:1fr; } .hero-art { display:none; } .grid { gap:20px 10px; } .page { padding-inline:14px; } }
#quizSection[hidden], #quizStartActions[hidden] { display:none !important; }
#quizStartActions { margin:28px 0 22px; }
#startQuizBtn:hover { background:#81444b; }
#quizTitle:focus { outline:2px solid var(--gold); outline-offset:5px; }
.feature h2 { font-size:clamp(1.6rem,2.8vw,2rem); line-height:1.2; max-width:26ch; text-wrap:balance; }
.art-caption { font-family:'Cormorant Garamond',Georgia,serif; font-size:1rem; letter-spacing:.025em; }
body[dir="rtl"] .art-caption { font-family:'Noto Naskh Arabic',serif; letter-spacing:0; }
/* An opening page set in type; portraits belong to the saints collection. */
.hero { display:block; position:relative; padding:64px 0 52px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.hero > div { max-width:850px; }
.hero h1 { max-width:850px; font-size:clamp(3.4rem,8vw,6.7rem); text-wrap:balance; }
.hero .intro { max-width:560px; }
.hero-cross { display:block; color:var(--gold); margin-top:30px; }
body[dir="rtl"] .hero h1 { font-size:clamp(3rem,7vw,5.5rem); }
@media(max-width:620px) {
 .hero { padding:36px 0 26px; margin-bottom:22px; }
 .hero h1 { font-size:clamp(3.2rem,12vw,4.5rem); margin:20px 0; }
 .hero .intro { font-size:1rem; max-width:36ch; }
 .hero .eyebrow { font-size:.64rem; letter-spacing:.13em; }
 .hero-cross { margin-top:22px; }
 body[dir="rtl"] .hero h1 { font-size:clamp(2.8rem,11vw,4rem); }
}

/* A large illuminated cross balances the opening typography. */
.hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:center; }
.hero-cross { width:260px; height:auto; margin:0; justify-self:center; }
@media(max-width:900px) and (min-width:621px) {
 .hero { grid-template-columns:minmax(0,1fr) 200px; gap:24px; }
 .hero-cross { width:200px; }
 .hero h1 { font-size:clamp(3.4rem,7vw,5rem); }
}
@media(max-width:620px) {
 .hero { grid-template-columns:minmax(0,1fr); gap:24px; }
 .hero-cross { width:190px; margin:0 auto; }
}

/* Restore the original site's simple cross and concentric circles. */
.hero-original-cross { width:100%; max-width:300px; min-height:230px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; justify-self:center; border-radius:46% 46% 12px 12px; background:linear-gradient(150deg,#eadcc4,#e1c9a9); }
.hero-original-cross::before,.hero-original-cross::after { content:""; position:absolute; width:160px; height:160px; border:1px solid rgba(114,45,58,.3); border-radius:50%; }
.hero-original-cross::after { width:125px; height:125px; }
.hero-original-cross .cross { font-size:4rem; line-height:1; }
@media(max-width:620px) { .hero-original-cross { width:200px; min-height:190px; } }