@font-face{font-family:Tajawal;src:url(/fonts/Tajawal-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url(/fonts/Tajawal-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url(/fonts/Tajawal-Bold.ttf);font-weight:700;font-display:swap}
:root{color-scheme:light;--paper:#f8f5ed;--white:#fffdf7;--ink:#203c35;--muted:#4e6155;--line:#ded9ca;--deep:#10352e;--gold:#edcf92;--brass:#795b2c;--max:1220px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1.0625rem/1.65 Tajawal,sans-serif}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}
:focus-visible{outline:3px solid #a26b21;outline-offset:4px}
img,video,iframe{max-width:100%;display:block}
h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.24}h2{font-size:clamp(1.6rem,3vw,2.45rem)}h3{font-size:1.34rem}
.wrap{width:min(var(--max),calc(100% - 56px));margin-inline:auto}
.skip,.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.skip:focus{clip-path:none;width:auto;height:auto;z-index:5;background:white;padding:8px}
.top{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:20px}
#header{border-bottom:1px solid var(--line);background:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;line-height:1.15;white-space:nowrap}
.brand strong{display:block;font-size:1.34rem}.brand small{color:var(--muted);font-size:.76rem}
.seal{display:grid;place-items:center;width:44px;aspect-ratio:1;border-radius:50%;color:var(--gold);background:var(--deep);font-size:1.6rem}
.nav{display:flex;gap:clamp(12px,2.3vw,30px);align-items:center}.nav a{white-space:nowrap}.nav a[aria-current]{color:var(--brass);font-weight:700}.nav a:hover,.subtle:hover{text-decoration:underline}
.tools{display:flex;align-items:center;gap:9px}
.icon-btn,.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:7px 14px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:10px;font-weight:700}
.icon-btn{min-width:44px}.button.primary{background:var(--deep);color:var(--white);border-color:transparent}.button.gold{background:var(--gold);color:#2d2b20;border:0}.button:hover,.icon-btn:hover{box-shadow:0 0 0 1px currentColor}
.hero{min-height:clamp(225px,23vw,285px);position:relative;display:grid;align-items:center;isolation:isolate;background:var(--deep);overflow:hidden;color:var(--white);border-bottom:3px solid #bd9653}
.hero::before{position:absolute;content:"";inset:0;background:radial-gradient(ellipse at 15% 70%,#496548 0%,transparent 52%),radial-gradient(ellipse at 85% 0%,#244a3d 0%,transparent 52%);z-index:-2}
.hero-art{position:absolute;inset-block:0;inset-inline-end:0;width:min(55%,720px);height:100%;z-index:-1;opacity:.78;transition:opacity 650ms ease-in-out;mask-image:linear-gradient(to left,#000 65%,transparent)}
[dir=rtl] .hero-art{mask-image:linear-gradient(to right,#000 65%,transparent)}
.hero-art-custom,.hero-art-preset{object-fit:cover;object-position:center}
.hero-art-custom{opacity:.55}
.hero-copy{max-width:740px;padding-block:15px;overflow-wrap:anywhere}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--brass);font-weight:700;letter-spacing:.035em;font-size:.92rem;margin-bottom:12px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2rem,4vw,3.45rem);line-height:1.06;letter-spacing:-.045em}.hero h1 em{display:block;font-style:normal;color:var(--gold)}
.hero p{max-width:32rem;color:#e2e8dc;font-size:clamp(.98rem,1.5vw,1.12rem);margin-block:9px 13px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.hero .secondary{border-color:#759484;background:#16372eee;color:#fffdf7}
.band{padding-block:clamp(33px,5vw,76px)}.band+.band{padding-top:0}.section-top{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:20px}.subtle{color:var(--brass);white-space:nowrap;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{min-width:0;min-height:100%;background:var(--white);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 5px 12px #2d392507}
.tile:hover{border-color:#ad915d}.tile .link{display:block;height:100%}.thumb{aspect-ratio:16/9;background:#d4decf url(/ornament.svg) center/cover;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.thumb .play{position:absolute;inset-inline-end:12px;inset-block-end:12px;display:grid;place-items:center;width:39px;aspect-ratio:1;border-radius:50%;background:var(--deep);color:var(--gold)}
.card-copy{padding:15px 17px 19px;overflow-wrap:anywhere}.card-copy p{color:var(--muted);margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:.91rem;color:var(--brass);font-weight:700}
.category{display:grid;grid-template-columns:65px 1fr;gap:13px;align-items:center;padding:12px}.category .thumb{aspect-ratio:1;border-radius:9px}.category .card-copy{padding:0}
.page-head{padding-block:44px 26px}.page-head h1{font-size:clamp(2.25rem,6vw,4.4rem);overflow-wrap:anywhere}.page-head p{color:var(--muted);margin-top:8px}
.message{padding:26px;border:1px dashed #aca28b;border-radius:12px;background:var(--white)}.message p+p{margin-top:8px}
#content{min-height:58vh}.field label{display:block;font-weight:700;margin-bottom:6px}.field{margin-bottom:14px}.field input,.field textarea,.search-form input{width:100%;min-width:0;border:1px solid #a9ae9a;background:var(--white);padding:10px 12px;border-radius:9px;color:var(--ink)}.field textarea{resize:vertical}.search-form{display:flex;gap:8px;margin-bottom:25px;max-width:740px}.form{max-width:720px}
.reader{max-width:810px;margin-inline:auto}.reader .actions{margin-block:14px 26px}.article-body{font-size:var(--article-size,1.25rem);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(14px,4vw,42px);overflow-wrap:anywhere;line-height:1.86}.article-body p+p{margin-top:1em}.article-body h2,.article-body h3{margin-block:1.2em .45em}.article-body a{color:#26664f;text-decoration:underline}.article-body img{height:auto}.article-body table{display:block;overflow:auto}.media{margin-bottom:20px}.media iframe{width:100%;border:0;aspect-ratio:16/9;border-radius:13px;background:var(--deep)}.media audio{width:100%}
#footer{margin-top:35px;background:#eae6d9;border-top:1px solid var(--line)}.foot{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-block:30px}.foot a{font-weight:700}.foot p{color:var(--muted);font-size:.9rem}
@media(max-width:780px){.wrap{width:calc(100% - 34px)}.top{display:grid;grid-template-columns:1fr auto;min-height:unset;padding-block:12px 7px;gap:10px}.tools{grid-column:2;grid-row:1}.nav{grid-column:1/-1;overflow-x:auto;padding:5px 0 3px;gap:20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{width:75%;opacity:.42}.hero-copy{padding-block:14px}.foot{align-items:start;flex-direction:column}}
@media(max-width:470px){.grid{grid-template-columns:1fr}.hero{min-height:223px}.hero-art{width:100%}.section-top{align-items:start}.brand small{display:none}.card-copy{padding:12px 14px 16px}}
@media(prefers-reduced-motion:no-preference){.tile,.button{transition:border-color .18s,box-shadow .18s}}
.font-controls{display:inline-flex;align-items:center;gap:8px}.font-value{min-width:22px;text-align:center}
.message button{margin-top:10px}.section-top label{font-size:.9rem;color:var(--muted)}
select{font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:5px}
.nav a{display:inline-flex;align-items:center;min-height:44px}

.tools [data-language] { min-height: 44px; max-width: 100%; font: inherit; color: inherit; padding: .35rem .55rem; border: 1px solid #dedbd0; border-radius: .55rem; background: #fffdf8; }
.article-body video { display: block; width: 100%; max-width: 100%; margin-block: 1rem .35rem; background: #102e26; border-radius: .6rem; }

.mobile-app-banner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-block: .65rem; }
.mobile-app-banner p { flex: 1 1 12rem; margin: 0; }

@media (max-width: 780px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; }
  .top .brand, .top .nav { min-width: 0; }
  .top .brand { white-space: normal; }
}

@media (max-width: 470px) {
  .top .nav { flex-wrap: wrap; gap: 0 1rem; overflow: visible; }
  .hero h1 em { font-size: clamp(1.85rem, 7.5vw, 2.35rem); }
}

@media (max-width: 470px) {
  .mobile-app-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .mobile-app-banner p { grid-column: 1 / -1; }
  .mobile-app-banner .button { justify-self: start; }
  .mobile-app-banner .icon-btn { justify-self: end; }
}

.resume-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; margin-block:1.25rem; background:var(--white); border:1px solid var(--line); border-radius:12px; }
.resume-card h2 { font-size:1.3rem; }
.reader-note { border-inline-start:3px solid var(--brass); padding:.65rem 1rem; background:var(--white); }
.reader-media-nav { position:relative; }
.reader [data-reading] { scroll-margin-block-start:1rem; }
.playback-speed { display:inline-block; margin-block:.6rem; }
.search-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; flex:1 0 100%; }
.search-filters select,.playback-speed select { font:inherit; color:inherit; max-width:100%; }
.search-form { flex-wrap:wrap; }

.server-lesson-body { margin-block:1rem; overflow-wrap:anywhere; }
.server-lesson-body p + p { margin-block-start:.8em; }

.category-trail ol { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; list-style:none; padding:0; margin:0 0 1rem; }
.category-trail li + li::before { content:"/"; margin-inline-end:.8rem; color:var(--muted); }
.category-trail a { text-decoration:underline; text-underline-offset:.2em; }

.hero-art.hero-art-inactive{opacity:0}