/* Light "field journal" look: warm paper ground, one accent per channel, a live scene at the top of each page */
:root{
  --paper:#ece3d3; --card:#ffffff; --ink:#1f2233; --muted:#5f6276; --line:#ddd1bc;
  --brand:#f2564e; --accent:var(--brand); --tint:#fdeceb;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;
  background-image:radial-gradient(circle at 1px 1px, #d7c9b0 1px, transparent 0);background-size:22px 22px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{position:relative;z-index:1}
.wrap{max-width:1040px;margin:0 auto;padding-block:40px 24px}
.narrow{max-width:640px}
.orbit{width:120px;height:40px;color:var(--accent);display:block;margin:0 auto}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}

/* ---------- Live scene + optional cover photo ---------- */
.stage{position:relative;overflow:hidden;max-width:100%;
  background:linear-gradient(160deg,var(--tint),#fff 75%)}
.stage .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.stage .wash{position:absolute;inset:0;background:rgba(251,248,243,.55);opacity:0;transition:opacity .4s ease}
.stage.has-photo .wash{opacity:1}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.avatar{position:relative;overflow:hidden;border-radius:50%;display:grid;place-items:center;
  font:800 28px/1 var(--display);color:var(--accent);background:var(--tint);
  border:5px solid #fff;box-shadow:0 8px 24px rgba(31,34,51,.12)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.cover-banner{aspect-ratio:3/1;max-width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 2px 0 var(--line);background:var(--tint)}
.cover-banner img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s ease}
.scene-card{aspect-ratio:900/390;border-radius:22px;border:1px solid var(--line);box-shadow:0 2px 0 var(--line);margin-top:22px}
.avatar{background:#fff}

/* ---------- Hub ---------- */
.hero{text-align:center;display:grid;gap:14px;justify-items:center;padding-block:12px 30px}
.hero h1{font-size:clamp(36px,7vw,64px);line-height:1.05}
.hero p{color:var(--muted);max-width:56ch;margin:0;font-size:18px}
.meta{font-size:14px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cards{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;box-shadow:0 2px 0 var(--line);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,34,51,.10)}
.card .stage{aspect-ratio:900/390}
.card .body{padding:0 22px 22px;display:grid;gap:8px;min-width:0;flex:1;align-content:start}
.card .avatar{width:80px;height:80px;margin-top:-40px;font-size:24px;z-index:1}
.card h2{font-size:clamp(17px,1.9vw,21px);white-space:nowrap;letter-spacing:-.015em}
@media (max-width:900px){.card h2{font-size:23px}}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .go{font-weight:600;font-size:14px;color:var(--accent);margin-top:auto}
.dots{display:flex;gap:6px;margin-top:4px}
.dots span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.dots svg{width:15px;height:15px}

/* ---------- Channel page ---------- */
.banner{aspect-ratio:900/390;border-radius:24px;border:1px solid var(--line);box-shadow:0 2px 0 var(--line)}
.profile{display:grid;justify-items:center;text-align:center;gap:8px;position:relative;z-index:1}
.cover-banner + .profile{margin-top:-58px}
.profile .avatar{width:124px;height:124px;font-size:40px;border-width:6px}
.profile h1{font-size:clamp(30px,6vw,44px);line-height:1.1;overflow-wrap:anywhere}
.profile p{margin:0;color:var(--muted);max-width:48ch;font-size:17px}
@media (max-width:520px){.cover-banner,.scene-card{border-radius:16px}.cover-banner + .profile{margin-top:-44px}.profile .avatar{width:96px;height:96px;font-size:30px;border-width:5px}}
.links{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.link{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px 12px 12px;
  box-shadow:0 2px 0 var(--line);transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.link:hover{transform:translateY(-2px);border-color:var(--p);box-shadow:0 10px 24px rgba(31,34,51,.08)}
.link .icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--p);color:#fff}
.link .icon svg{width:26px;height:26px}
.link .meta2{min-width:0}
.link .name{display:block;font:700 18px/1.2 var(--display)}
.link .handle{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.link .cta{font:600 14px/1 var(--body);color:var(--p);border:1.5px solid var(--p);border-radius:999px;padding:9px 14px;white-space:nowrap}
.link:hover .cta{background:var(--p);color:#fff}
@media (max-width:420px){.link{grid-template-columns:46px 1fr}.link .icon{width:46px;height:46px}.link .cta{display:none}}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.btn{font:600 14px/1 var(--body);border-radius:999px;padding:12px 18px;cursor:pointer;text-decoration:none;
  border:1.5px solid var(--accent);background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--accent)}
.others{margin-top:40px;text-align:center;display:grid;gap:14px}
.others h3{font-size:20px}
.others .row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.others a{text-decoration:none;display:grid;justify-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.3;width:120px;text-align:center;overflow-wrap:anywhere}
.others .avatar{width:64px;height:64px;font-size:20px;border-width:3px}

footer{text-align:center;color:var(--muted);font-size:13px;padding-block:28px 36px}
/* ---------- Flower burst over a clicked channel logo ---------- */
.flower-burst{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.flower-burst span{position:absolute;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.flower-burst svg{display:block}
.avatar.logo-pop{animation:logoPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes logoPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- Cute cats that walk out of the follow buttons ---------- */
.links > li.has-cat{position:relative;z-index:1}
.links > li.cat-on{z-index:8}
.links > li.has-cat > .link{position:relative;z-index:2}
.cat2{position:absolute;z-index:1;left:0;bottom:calc(100% - 4px);width:84px;height:66px;pointer-events:none;
  transform:translate(var(--x,54px),92%);opacity:0;transition:transform 1.3s cubic-bezier(.45,.05,.4,1),opacity .25s ease}
.cat2.out{opacity:1}
.cat2.out.walking,.cat2.out.pointing,.cat2.out.thanks{transform:translate(var(--x,54px),0)}
.cat2:not(.out){transition:transform .45s ease,opacity .35s ease .1s}
.cat2-body{width:100%;height:100%}
.cat2 svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.cat2 .leg,.cat2 .paw,.cat2 .tail,.cat2 .head{transform-box:fill-box}
.cat2 .leg{transform-origin:50% 0}
.cat2 .paw{transform-origin:30% 0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cat2 .tail{transform-origin:100% 100%;animation:cat2tail 1.6s ease-in-out infinite}
.cat2 .head{transform-origin:30% 80%}
.cat2 .bouquet{opacity:0;transition:opacity .25s ease .2s}
.cat2.walking .cat2-body{animation:cat2bob .35s ease-in-out infinite}
.cat2.walking .lb1,.cat2.walking .paw{animation:cat2stepA .35s ease-in-out infinite}
.cat2.walking .lb2,.cat2.walking .lf1{animation:cat2stepB .35s ease-in-out infinite}
.cat2.pointing .paw,.cat2.thanks .paw{transform:rotate(-78deg)}
.cat2.pointing .head{animation:cat2nod 1.2s ease-in-out infinite}
.cat2.thanks .bouquet{opacity:1}
.cat2.thanks .head{animation:cat2nod .9s ease-in-out infinite}
.cat2-say{position:absolute;bottom:88%;left:58%;white-space:nowrap;font:800 13px/1 var(--body);color:#1f2233;background:#fff;
  border:2px solid #1f2233;border-radius:14px;padding:7px 11px;transform:scale(0);transform-origin:0 100%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cat2-say:empty{display:none}
.cat2.pointing .cat2-say,.cat2.thanks .cat2-say{transform:scale(1)}
.cat2.thanks .cat2-say{border:none;background:none;padding:0;bottom:96%;left:20%}
.ty{display:inline-block;font:900 26px/1 var(--body);letter-spacing:.01em;color:#e6366e;
  background:linear-gradient(90deg,#ff3d77,#ff9f1c,#ffd60a,#2ec4b6,#3a86ff,#8338ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 6px rgba(0,0,0,.18));animation:tyPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cat2stepA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes cat2stepB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes cat2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cat2tail{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes cat2nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes tyPop{0%{transform:scale(.3) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:420px){.cat2{width:70px;height:55px}.ty{font-size:22px}}
@media (prefers-reduced-motion:reduce){.cat2,.cat2 *{transition:none!important;animation:none!important}}

.rem{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(31,34,51,.2)}
.rem .r-stage{display:block;position:relative;aspect-ratio:900/390;width:100%}
.rem .rem-label{display:block;padding:6px 10px;font:600 11px/1.2 var(--body);color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.rem-min{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font:600 15px/1 var(--body);cursor:pointer}
.rem-fab{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#fff;font:600 20px/1 var(--body);box-shadow:0 10px 26px rgba(31,34,51,.25)}
@media (max-width:560px){.rem{width:132px}.rem .rem-label{font-size:10px;padding:5px 8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Share button on the cover corner ---------- */
.cover-wrap{display:flex;flex-direction:column;gap:10px}
.share-btn{order:-1;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:700 13.5px/1 var(--body);color:#fff;padding:10px 16px 10px 12px;border-radius:999px;border:none;
  background:linear-gradient(135deg,#2f7d55,#1d4a33);
  box-shadow:0 6px 16px rgba(29,74,51,.3),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s ease,box-shadow .2s ease}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(29,74,51,.38),inset 0 1px 0 rgba(255,255,255,.25)}
.share-btn .share-ic{width:16px;height:16px;fill:#f3e3b3;stroke:#f3e3b3;stroke-width:2;stroke-linecap:round}
.share-btn.done{background:linear-gradient(135deg,#c9a43a,#a8801f)}
@media (max-width:520px){.share-btn{padding:8px 12px 8px 10px;font-size:12.5px}.share-btn .share-ic{width:14px;height:14px}}
/* cute owl perched on the Share button */
.share-btn{position:relative;margin-top:58px}
main.wrap{padding-block-start:16px}
.owl{position:absolute;left:50%;bottom:calc(100% - 9px);width:64px;height:59px;transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(40,25,10,.25))}
.owl svg{display:block;width:100%;height:100%;overflow:visible}
.owl .owl-head,.owl .owl-wing,.owl .owl-lid{transform-box:fill-box}
.owl .owl-head{transform-origin:50% 90%;animation:owlTilt 6s ease-in-out infinite}
.owl .owl-lid{transform-origin:50% 0;transform:scaleY(0);animation:owlBlink 4.2s ease-in-out infinite}
.owl .owl-wl{transform-origin:100% 15%;animation:owlFlapL 7s ease-in-out infinite}
.owl .owl-wr{transform-origin:0 15%;animation:owlFlapR 7s ease-in-out infinite}
.share-btn:hover .owl .owl-wl{animation:owlFlapL .5s ease-in-out 3}
.share-btn:hover .owl .owl-wr{animation:owlFlapR .5s ease-in-out 3}
@keyframes owlBlink{0%,40%,48%,52%,58%,100%{transform:scaleY(0)}44%,55%{transform:scaleY(1)}}
@keyframes owlTilt{0%,20%,100%{transform:rotate(0)}30%,45%{transform:rotate(-9deg)}60%,75%{transform:rotate(7deg)}}
@keyframes owlFlapL{0%,80%,100%{transform:rotate(0)}85%,95%{transform:rotate(28deg)}90%{transform:rotate(6deg)}}
@keyframes owlFlapR{0%,80%,100%{transform:rotate(0)}85%,95%{transform:rotate(-28deg)}90%{transform:rotate(-6deg)}}
@media (max-width:520px){.share-btn{margin-top:50px}.owl{width:54px;height:50px}}
@media (prefers-reduced-motion:reduce){.owl *{animation:none!important}}

/* ---------- World's first university: professional gallery ---------- */
.uni2{margin-top:44px;background:#fff;border:2px solid #1e2a47;border-radius:28px;padding:30px 26px 26px;display:grid;gap:22px;box-shadow:0 18px 44px rgba(30,42,71,.12)}
.uni2-head{text-align:center;display:grid;gap:6px;justify-items:center}
.uni2-kicker{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#4a5a80}
.uni2-head h2{font:800 clamp(26px,5.4vw,38px)/1.12 var(--display);color:#1e2a47;letter-spacing:-.01em}
.uni2-sub{margin:0;color:#5b6378;font-size:15px}
.pf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
@media (max-width:640px){.pf-row{grid-template-columns:1fr;max-width:330px;margin:0 auto;width:100%}}
.pf{margin:0;display:grid;gap:12px;--fc:#1e2a47;--fc2:#3a4c7a}
.pf.f-wine{--fc:#5b1f2e;--fc2:#8e3a4e}
.pf.f-teal{--fc:#16393d;--fc2:#2f6b70}
.pf-frame{padding:12px;border-radius:6px;background:linear-gradient(145deg,var(--fc2),var(--fc) 40%,var(--fc) 60%,var(--fc2));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 16px 30px rgba(20,24,40,.28),0 3px 8px rgba(20,24,40,.2);transition:transform .35s ease,box-shadow .35s ease}
.pf:hover .pf-frame{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 26px 44px rgba(20,24,40,.32)}
.pf-mat{background:#fbfaf6;padding:12px;aspect-ratio:4/5;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 2px 8px rgba(0,0,0,.18)}
.pf-mat img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.18)}
.pf figcaption{text-align:center;font:500 14px/1.35 var(--body);color:#2c3346}

.uni2-text{display:grid;gap:6px;max-width:none;margin:0 -8px;text-align:center}
.uni2-text p{margin:0;color:#2c3346;font-size:14.5px;line-height:1.65;letter-spacing:-.012em;text-wrap:pretty}
.uni2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:520px;width:100%;margin:0 auto}
.uni2-stats div{display:grid;justify-items:center;gap:2px;padding:12px 8px;border-radius:14px;background:#eef1f8;border:1.5px solid #c9d2e6}
.uni2-stats div:nth-child(2){background:#f8ecef;border-color:#e3c3cc}
.uni2-stats div:nth-child(3){background:#e9f3f2;border-color:#bfdad8}
.uni2-stats div:nth-child(2) b{color:#5b1f2e}
.uni2-stats div:nth-child(3) b{color:#16393d}
.uni2-stats b{font:800 20px/1.1 var(--display);color:#1e2a47}
.uni2-stats small{font-size:12px;color:#5b6378}
.uni2-src{display:grid;gap:10px}
.uni2-src-title{margin:0;text-align:center;font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#4a5a80}
.uni2-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.uni2-links{grid-template-columns:1fr}}
.uni2-links a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;padding:14px 16px;border-radius:16px;background:#fff;border:1.5px solid #dde2ee;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.uni2-links a:hover{border-color:#1e2a47;transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,42,71,.12)}
.uni2-links .tag{justify-self:start;font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#4a5a80;background:#eef1f8;border-radius:999px;padding:5px 8px}
.uni2-links b{font:700 16px/1.3 var(--display);color:#1e2a47}
.uni2-links small{color:#5b6378;font-size:13px;line-height:1.4;margin-bottom:12px}
.uni2-links .cta-btn{margin-top:auto;font:700 14px/1 var(--body);color:#fff;background:#1a5fd0;border-radius:999px;padding:10px 18px;box-shadow:0 4px 12px rgba(26,95,208,.3);transition:background .2s ease}
.uni2-links a:hover .cta-btn{background:#124bb0}
.pf-hint{margin:-6px 0 0;text-align:center;font-size:13px;color:#5b6378}
.uni2-rule{position:relative;height:14px;display:grid;place-items:center;margin:2px 0}
.uni2-rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(90deg,transparent,#1e2a47 12%,#5b1f2e 50%,#16393d 88%,transparent)}
.uni2-rule span{position:relative;width:14px;height:14px;transform:rotate(45deg);background:#fff;border:3px solid #5b1f2e;border-radius:2px}
@media (hover:hover) and (pointer:fine){
  .pf{position:relative;z-index:1;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .pf:nth-child(1){transform-origin:left top}.pf:nth-child(2){transform-origin:center top}.pf:nth-child(3){transform-origin:right top}
  .pf:hover{z-index:25;transform:scale(2.05)}
  .pf:hover .pf-mat img{object-fit:contain;background:#fbfaf6}
  .pf:hover figcaption{opacity:0}
  .pf-mat{cursor:zoom-in}
}
.zoomer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,14,24,.82);pointer-events:none;
  padding:max(16px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.zoomer img{max-width:100%;max-height:88vh;border-radius:10px;border:6px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
@media (max-width:560px){.uni2{padding:22px 14px 16px;border-radius:22px}}

/* bottom section title */
.edu-rule{position:relative;width:min(420px,90%);height:16px;display:grid;place-items:center;margin:4px auto 2px}
.edu-rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;background:linear-gradient(90deg,transparent,#2f7d55 20%,#1d4a33 50%,#2f7d55 80%,transparent)}
.edu-rule span{position:relative;width:14px;height:14px;transform:rotate(45deg);background:#fff;border:3px solid #1d4a33;border-radius:2px}
.edu-title{font:800 clamp(24px,5.2vw,34px)/1.2 var(--display)!important;color:#1f2233;-webkit-text-fill-color:#1f2233;background:none;text-transform:none;letter-spacing:-.01em;max-width:24ch}
.edu-title em{-webkit-text-fill-color:#1d6b45}
.edu-title em{font-style:normal;color:#1d6b45;background:linear-gradient(transparent 62%,rgba(47,125,85,.18) 62%);padding:0 2px}
[hidden]{display:none!important}
/* ---------- Faith page sections ---------- */
.section{margin-top:44px;display:grid;gap:16px}
.section > header{text-align:center;display:grid;gap:8px;justify-items:center}
.section h2{font-size:clamp(24px,5vw,32px);line-height:1.15}
.section .sub{margin:0;color:var(--muted);max-width:52ch}
.arabic{font-family:"Amiri", "Traditional Arabic", serif;direction:rtl;font-size:clamp(22px,4.6vw,28px);line-height:1.9;color:#1d4a33;text-align:center}
.ref{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a88a3a}

.old-reminders{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 2px 0 var(--line);margin-top:22px}
.reminders .r-stage{position:relative;aspect-ratio:900/390;max-width:100%}
.reminders canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.r-badge{position:absolute;left:14px;top:14px;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);padding:7px 10px;border-radius:999px}
.r-progress{height:3px;background:var(--line)}
.r-progress span{display:block;height:100%;width:0;background:#c9a43a}
.r-text{padding:20px 22px 6px;display:grid;gap:10px;text-align:center;justify-items:center}
.r-text h3{font-size:22px}
.r-text blockquote{margin:0;font:500 18px/1.6 var(--display);color:var(--ink);max-width:52ch}
.r-text .note{margin:0;color:var(--muted);font-size:14px;max-width:56ch}
.r-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px 20px}
.r-nav button{font:600 14px/1 var(--body);cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px}
.r-dots{display:flex;gap:8px}
.r-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:none;background:var(--line)}
.r-dots button[aria-current="true"]{background:#c9a43a;width:26px;border-radius:999px}

.verses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.verses{grid-template-columns:1fr}}
.verse{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:8px;align-content:start;box-shadow:0 2px 0 var(--line)}
.verse.wide{grid-column:1/-1}
.verse h3{font-size:19px}
.verse p{margin:0;color:var(--ink)}
.verse .arabic{font-size:24px;text-align:right}
.hadith{background:linear-gradient(160deg,#fbf3dc,#fff);border-color:#ecdcae}

.uni{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:linear-gradient(160deg,#e4f1e8,#fff 70%);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 2px 0 var(--line)}
@media (max-width:620px){.uni{grid-template-columns:1fr;text-align:center;justify-items:center}}
.uni svg{width:100%;max-width:200px;height:auto}
.uni .facts{display:flex;flex-wrap:wrap;gap:8px}
.uni .facts span{font:600 13px/1 var(--body);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.uni p{margin:0}
.sources{display:grid;gap:8px;margin-top:6px;width:100%}
.sources a{display:grid;gap:2px;text-decoration:none;background:#fff;border:1px solid var(--line);border-left:4px solid #c9a43a;border-radius:12px;padding:10px 14px;text-align:left;transition:transform .15s ease,border-color .15s ease}
.sources a:hover{transform:translateX(3px);border-color:#c9a43a}
.sources b{font:700 15px/1.3 var(--display);color:#1d4a33}
.sources b::after{content:" ↗";color:#c9a43a}
.sources small{color:var(--muted);font-size:13px}

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(31,34,51,.08)}
.gallery img{width:100%;height:auto;display:block;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{padding:12px 16px;font-size:14px;color:var(--muted);text-align:center}
.follow-title{text-align:center;margin-top:44px}
:root{--paper:#ece2cf;--line:#dccdb2}
html,body{background-color:#ece2cf}
body{background-image:radial-gradient(circle at 1px 1px,#d6c6a8 1px,transparent 0)}
.links{margin-top:22px}
.gal{margin-top:26px}
.uni-wrap{border:2px solid #c9a43a;border-radius:28px;padding:22px;background:rgba(255,255,255,.45)}
.uni-wrap .uni{border:none;box-shadow:none;background:#fff}
.uni-pic{width:100%;max-width:220px;border-radius:16px;border:3px solid #c9a43a;display:block}
.edu{border:2px solid #2f7d55;border-radius:28px;padding:22px;background:linear-gradient(160deg,rgba(228,241,232,.8),rgba(255,255,255,.5))}
.edu .verse{border-left:5px solid #2f7d55}
.edu .verses .verse:nth-child(1){background:#eef6ff;border-color:#cfe0f5;border-left-color:#2f6fc0}
.edu .verses .verse:nth-child(2){background:#fff1f4;border-color:#f4d3db;border-left-color:#c0396b}
.edu .verses .verse:nth-child(3){background:#f2fbf4;border-color:#cfe9d6;border-left-color:#2f8a55}
.edu .verses .verse:nth-child(4){background:#f6f1ff;border-color:#ddd1f5;border-left-color:#7a4fc9}
.edu .verses .verse:nth-child(5){background:#eefafa;border-color:#c9e6e6;border-left-color:#1f8a8a}
.edu .verses .verse:nth-child(6){background:#fff7e8;border-color:#f1dfb6;border-left-color:#c98a1a}
.edu .hadith{border-left-color:#c9a43a}
@media (max-width:560px){.uni-wrap,.edu{padding:14px;border-radius:22px}}
/* ---------- Certificate of honour ---------- */
.cert-wrap{margin-top:44px}
.cert{position:relative;padding:14px;border-radius:6px;
  background:linear-gradient(135deg,#8a6a18,#e9cf7e 18%,#b8922c 35%,#f7e7b0 50%,#b08a24 66%,#ecd48a 82%,#8a6a18);
  box-shadow:0 30px 70px rgba(80,58,10,.35),0 2px 0 #6b5212}
.cert-in{position:relative;border-radius:2px;padding:46px 34px 34px;text-align:center;display:grid;gap:14px;justify-items:center;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(ellipse at 0% 100%,rgba(196,160,90,.18),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(196,160,90,.18),transparent 55%),
    #fbf3dd;
  outline:2px solid #b8922c;outline-offset:-12px;box-shadow:inset 0 0 0 16px #fbf3dd,inset 0 0 0 17px rgba(184,146,44,.6),inset 0 0 60px rgba(150,110,30,.18)}
.c-orn{position:absolute;width:52px;height:52px;color:#a8801f;z-index:2}
.c-orn.tl{top:22px;left:22px}.c-orn.tr{top:22px;right:22px;transform:scaleX(-1)}
.c-orn.bl{bottom:22px;left:22px;transform:scaleY(-1)}.c-orn.br{bottom:22px;right:22px;transform:scale(-1,-1)}
.bism{margin:0;font:700 26px/1.6 "Amiri",serif;color:#7a5c12;direction:rtl}
.cert-kicker{margin:0;font:700 13px/1 "Cinzel",Georgia,serif;letter-spacing:.32em;text-transform:uppercase;color:#a8801f}
.cert-title{margin:0;font:800 clamp(24px,5vw,38px)/1.15 "Cinzel",Georgia,serif;letter-spacing:.04em;
  background:linear-gradient(180deg,#b8922c,#7a5c12);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert-line{margin:0;max-width:46ch;color:#5a4a2a;font:500 16px/1.6 var(--display);font-style:italic}
.cert-name{margin:-4px 0 0;font:400 clamp(44px,10vw,68px)/1.1 "Great Vibes","Fraunces",cursive;color:#7a5c12;text-shadow:0 1px 0 #fff}
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%;margin:12px 0 4px;align-items:start}
@media (max-width:640px){.plates{grid-template-columns:1fr;max-width:340px}}
.plate{margin:0;display:grid;gap:10px}
.gframe{position:relative;padding:12px;border-radius:4px;
  background:linear-gradient(145deg,#6b5212,#f3dd92 14%,#b8922c 28%,#fff1c2 44%,#a8801f 60%,#f0d686 78%,#6b5212);
  box-shadow:0 14px 28px rgba(80,58,10,.35),inset 0 0 0 1px rgba(255,255,255,.5)}
.gframe::before{content:"";position:absolute;inset:6px;border:1px solid rgba(90,66,12,.55);border-radius:2px;pointer-events:none}
.gframe::after{content:"";position:absolute;inset:-5px;border:2px solid #c9a43a;border-radius:7px;pointer-events:none;opacity:.7}
.gframe img{display:block;width:100%;height:auto;border:3px solid #3b2c08;box-shadow:inset 0 0 12px rgba(0,0,0,.4)}
.plate figcaption{font:500 13px/1.4 var(--display);color:#5a4a2a;font-style:italic}
.plate figcaption span{display:block;font:700 11px/1.4 "Cinzel",serif;letter-spacing:.2em;color:#a8801f;font-style:normal}
.cert-body p{margin:0;max-width:56ch;color:#3e3220;font:400 16px/1.7 var(--body)}
.medals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:520px}
.medal{display:grid;gap:2px;justify-items:center;padding:12px 8px;border-radius:14px;border:1.5px solid #c9a43a;background:rgba(255,255,255,.55)}
.medal b{font:700 20px/1.1 "Cinzel",serif;color:#7a5c12}
.medal small{font-size:12px;color:#6b5a3a}
.cert-verse{margin:6px 0 0;max-width:52ch;display:grid;gap:6px;font:500 15px/1.6 var(--display);font-style:italic;color:#3e3220}
.cert-verse span{font:700 22px/1.8 "Amiri",serif;font-style:normal;color:#1d4a33;direction:rtl}
.cert-verse cite{display:block;font:700 11px/1.4 "Cinzel",serif;letter-spacing:.18em;font-style:normal;color:#a8801f}
.cert-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:14px;width:100%;margin-top:6px}
.seal{width:120px;height:120px;filter:drop-shadow(0 6px 10px rgba(80,58,10,.35))}
.witness{display:grid;gap:6px;justify-items:center}
.witness .rule{width:100%;max-width:170px;border-top:1.5px solid #7a5c12}
.witness small{font:600 11px/1.3 "Cinzel",serif;letter-spacing:.06em;color:#6b5a3a}
@media (max-width:520px){.cert-foot{grid-template-columns:1fr}.cert-foot .witness:last-child{display:none}.seal{justify-self:center;order:-1}}
.evidence{width:100%;display:grid;gap:10px;margin-top:6px}
.ev-title{margin:0;font:700 12px/1 "Cinzel",serif;letter-spacing:.24em;text-transform:uppercase;color:#a8801f}
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.ev-grid{grid-template-columns:1fr}}
.ev-grid a{display:grid;gap:4px;align-content:start;text-decoration:none;padding:14px;border-radius:12px;background:#fff;border:1.5px solid #e2cf96;text-align:left;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.ev-grid a:hover{transform:translateY(-2px);border-color:#c9a43a;box-shadow:0 8px 18px rgba(120,90,20,.18)}
.ev-grid b{font:700 15px/1.3 var(--display);color:#1d4a33}
.ev-grid small{font-size:13px;color:#6b5a3a}
.ev-grid i{font:700 12px/1 var(--body);font-style:normal;color:#a8801f;margin-top:4px}
@media (max-width:560px){.cert{padding:9px}.cert-in{padding:42px 16px 24px;box-shadow:inset 0 0 0 10px #fbf3dd,inset 0 0 0 11px rgba(184,146,44,.6),inset 0 0 40px rgba(150,110,30,.18);outline-offset:-8px}.c-orn{width:38px;height:38px}.c-orn.tl,.c-orn.tr{top:14px}.c-orn.bl,.c-orn.br{bottom:14px}.c-orn.tl,.c-orn.bl{left:14px}.c-orn.tr,.c-orn.br{right:14px}.bism{font-size:21px}}

/* bottom section golden heading */
.gold-title{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(22px,4.6vw,30px)!important;line-height:1.25;
  color:#a8801f;background:linear-gradient(180deg,#d4ad42,#8a6a18);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:24ch}

body{padding-block-end:110px}
.profile h1{font-size:clamp(26px,6vw,36px)}
.profile > p{font-size:15px;max-width:44ch}
.pin11{margin:4px auto 0;width:100%;max-width:400px;padding:4px;border-radius:20px;background:linear-gradient(135deg,#e9d49a,#c9a43a 45%,#f3e3b3 70%,#b8922c);box-shadow:0 12px 30px rgba(120,90,20,.18);animation:breathe 6s ease-in-out infinite}
.pin11 img{display:block;width:100%;aspect-ratio:16/5.2;object-fit:cover;border-radius:15px}

/* gallery strip */
.gal{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 2px 0 var(--line)}
.gal-view{overflow:hidden;border-radius:14px}
.gal-track{display:flex;gap:10px;transition:transform .7s cubic-bezier(.22,.8,.2,1);will-change:transform}
.gal-slide{flex:0 0 calc((100% - 20px) / 3);margin:0;height:210px;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#f4efe4;display:grid;place-items:center;position:relative}
.gal-slide img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.gal-slide::after{content:attr(data-n);position:absolute;left:8px;top:8px;font:600 11px/1 var(--body);color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:4px 7px}
@media (max-width:560px){.gal-slide{flex-basis:calc((100% - 10px) / 2);height:190px}}
.gal-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:8px}
.gal-bar button{font:600 12px/1 var(--body);cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 11px}
.gal-play[aria-pressed="true"]{background:#c9a43a;border-color:#c9a43a;color:#fff}
.gal-count{font:600 13px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.links{margin-top:18px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,14,24,.88);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  padding:max(16px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.lb-stage{min-width:0;max-height:80vh;overflow:auto;display:grid;place-items:center;border-radius:10px}
.lightbox img{max-width:100%;max-height:78vh;margin:0 auto;border-radius:10px;display:block;cursor:zoom-in}
.lightbox.actual img{max-width:none;max-height:none;cursor:zoom-out}
.lightbox.actual .lb-stage{place-items:start}
.lb-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lightbox .lb-tools .lb-size,.lb-tools a{width:auto;height:auto;font:700 14px/1 var(--body);padding:11px 16px;border-radius:999px;text-decoration:none;cursor:pointer;border:none}
.lightbox .lb-tools .lb-size{background:rgba(255,255,255,.16);color:#fff}
.lb-tools .lb-dl{background:#1a5fd0;color:#fff}
.lb-tools .lb-open{background:#fff;color:#1e2a47}
@media (hover:hover) and (pointer:fine){
  .gal-slide img{transition:transform .25s ease}
  .gal-slide:hover img{transform:scale(2.2);transform-origin:var(--zx,50%) var(--zy,50%)}
}
.pf-mat{cursor:zoom-in}
.lightbox button{font:600 20px/1 var(--body);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.lb-close{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px))}

/* corner reminder widget */
.rem{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(31,34,51,.2)}
.rem.open{width:min(340px,calc(100vw - 28px))}
.rem .r-stage{display:block;position:relative;aspect-ratio:900/390;width:100%}
.rem canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rem-open{all:unset;display:block;width:100%;cursor:pointer}
.rem-open:focus-visible{outline:2px solid #c9a43a;outline-offset:-2px}
.rem-label{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;padding:7px 10px 6px;font:500 11px/1.3 var(--body);color:var(--muted)}
.rem-label b{color:#1d4a33;font-weight:700}
.rem-ref{color:#a88a3a;font-weight:600}
.rem-hint{width:100%;color:var(--muted)}
.rem.open .rem-hint{display:none}
.rem .r-progress{height:2px}
.rem-body{max-height:min(52vh,420px);overflow:auto}
.rem .r-text{padding:12px 14px 4px;gap:6px}
.rem .r-text h3{font-size:16px}
.rem .r-text .arabic{font-size:20px;line-height:1.7}
.rem .r-text blockquote{font-size:14px}
.rem .r-text .note{font-size:12px}
.rem .r-nav{padding:8px 10px 12px}
.rem-min{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font:600 15px/1 var(--body);cursor:pointer}
.rem-fab{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:#1d4a33;color:#f3e3b3;font:600 20px/1 var(--body);box-shadow:0 10px 26px rgba(31,34,51,.25)}
@media (max-width:560px){.rem{width:132px}.rem-label{font-size:10px;padding:5px 8px}}
.frame{margin:0;padding:10px;border-radius:26px;background:linear-gradient(135deg,#e9d49a,#c9a43a 45%,#f3e3b3 70%,#b8922c);box-shadow:0 18px 44px rgba(120,90,20,.18)}
.frame img{display:block;width:100%;height:auto;border-radius:18px;transition:transform .8s ease}
.frame:hover img{transform:scale(1.015)}
.feature.calm .frame{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 18px 44px rgba(120,90,20,.18)}50%{box-shadow:0 18px 60px rgba(201,164,58,.45)}}
@media (prefers-reduced-motion:reduce){.feature.calm .frame{animation:none}}