/* quranrehal.com: night, cream and gold, as the app looks at Isha and at noon. */
@font-face{font-family:"Fraunces"; src:url(/a/fraunces-latin.48282a415e.woff2) format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces"; src:url(/a/fraunces-latin-ext.f120089b94.woff2) format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata"; src:url(/a/literata-latin.55c10c2e81.woff2) format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata"; src:url(/a/literata-latin-ext.2b511ea010.woff2) format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata"; src:url(/a/literata-italic-latin.8552d197eb.woff2) format("woff2"); font-weight:400 600; font-style:italic; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --night:#07110D; --night-2:#0B1C16; --night-3:#0F2620; --emerald:#0F4A3C;
  --gold:#C9A35C; --gold-2:#E4C98D;
  --ink:#F3EAD7; --ink-2:rgba(243,234,215,.74); --ink-3:rgba(243,234,215,.52); --line:rgba(243,234,215,.12);
  --cream:#FBF6EB; --cream-2:#F3EADA; --c-ink:#1C1B17; --c-ink-2:#5B5547; --c-line:rgba(28,27,23,.12);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Literata",Georgia,serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --wrap:1180px; --gut:clamp(20px,4vw,40px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--night); color:var(--ink); font:400 18px/1.62 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:8px; background:var(--gold); color:var(--night); padding:8px 14px; border-radius:8px; font:600 14px var(--ui); z-index:20}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.8}
h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:-.015em; margin:0; text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,86px); line-height:1.02}
h2{font-size:clamp(34px,4.4vw,58px); line-height:1.06}
h3{font-size:clamp(22px,2.2vw,27px); line-height:1.2; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
.lead{font-size:clamp(18px,1.55vw,21px); line-height:1.6; color:var(--ink-2); max-width:34em}

/* header */
.top{position:absolute; inset:0 0 auto; z-index:5; padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; font:500 21px/1 var(--display); letter-spacing:-.01em}
.brand img{width:32px; height:32px}
.top nav{display:flex; gap:clamp(16px,2.4vw,30px); font:500 14px/1 var(--ui); color:var(--ink-2)}
.top nav a{text-decoration:none} .top nav a:hover{color:var(--ink)}
@media (max-width:820px){ .top nav{display:none} }

/* hero */
.hero{position:relative; overflow:hidden; padding:clamp(120px,14vw,170px) 0 clamp(64px,8vw,110px); background:var(--night)}

.hero .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,60px); align-items:center}
.hero h1{margin-top:22px}
.hero .lead{margin-top:24px}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:12px; border:0; cursor:pointer; text-decoration:none; font:600 16px/1 var(--ui); color:var(--night); background:linear-gradient(180deg,#E8CF96,#C9A35C); padding:15px 24px 15px 18px; border-radius:999px; box-shadow:0 10px 30px -12px rgba(201,163,92,.7)}
.btn:hover{filter:brightness(1.05)}
.btn .ic{width:26px; height:26px; border-radius:50%; background:var(--night); display:grid; place-items:center}
.btn .ic svg{width:10px; height:10px; fill:var(--gold-2)}
.soon{font:500 15px/1.4 var(--ui); color:var(--ink-2)}
.soon b{color:var(--ink); font-weight:600}
.film{position:relative; margin-right:calc(var(--gut) * -1.5)}
.film video,.film img{width:100%; aspect-ratio:1600/1190; object-fit:contain; background:var(--night);
  /* the film carries its own glow and ends in the page's colour; a 1.5% feather hides the video's edge only.
     The device sits from 3% inwards, so Apple's product image is never masked or altered. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent); mask-composite:intersect}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .film{margin:10px calc(var(--gut) * -1) 0}
}

/* sections */
.sec{padding:clamp(80px,10vw,140px) 0; position:relative}
.sec.alt{background:var(--night-2)}
.sec.cream{background:var(--cream); color:var(--c-ink)}
.sec.cream .lead{color:var(--c-ink-2)}
.sec.cream .eyebrow{color:#9A7433}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,6vw,90px); align-items:center}
.split.rev{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split.rev .copy{order:2}
.copy h2{margin-top:20px}
.copy .lead{margin-top:22px}
.copy ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px}
.copy li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; color:var(--ink-2); font-size:17px; line-height:1.55}
.copy li::before{content:""; width:8px; height:8px; margin-top:.62em; transform:rotate(45deg); background:var(--gold); border-radius:1px}
.sec.cream .copy li{color:var(--c-ink-2)}
.shot{margin:0}
.shot img{width:100%}
.shot figcaption{margin-top:14px; font:500 13px/1.45 var(--ui); color:var(--ink-3); text-align:center}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:minmax(0,1fr)}
  .split.rev .copy{order:0}
}

/* reciters */
.reciters{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; margin-top:clamp(48px,6vw,72px); background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.reciters div{background:var(--night); padding:22px 22px 20px}
.reciters b{display:block; font:500 19px/1.25 var(--display)}
.reciters span{display:block; margin-top:6px; font:500 13.5px/1.45 var(--ui); color:var(--ink-3)}
.fine{margin-top:20px; font:400 15px/1.55 var(--ui); color:var(--ink-3); max-width:52em}

/* languages */
.langs{margin-top:clamp(44px,5vw,64px); display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px; font:400 clamp(19px,1.8vw,23px)/1.4 var(--text); color:var(--ink-2)}
.langs span{white-space:nowrap}
.langs span:nth-child(3n+1){color:var(--gold-2)}
.langs .more{color:var(--ink-3); font-style:italic}

/* pages */
.pages{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,30px)}
.pages figure{margin:0}
.pages img{width:100%; border-radius:16px; box-shadow:0 30px 60px -30px rgba(60,40,10,.45),0 0 0 1px var(--c-line)}
.pages figcaption{margin-top:14px; font:600 13px/1.4 var(--ui); color:var(--c-ink-2); text-align:center; letter-spacing:.02em}
.looks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.6vw,20px); margin-top:clamp(56px,7vw,90px)}
.looks figure{margin:0}
.looks img{width:100%; border-radius:12px; box-shadow:0 20px 40px -26px rgba(60,40,10,.5),0 0 0 1px var(--c-line)}
.looks figcaption{margin-top:10px; text-align:center; font:600 12.5px/1.3 var(--ui); color:var(--c-ink-2)}
.looks figcaption i{display:block; font:400 12px var(--ui); color:#8B8474; font-style:normal; margin-top:2px}
@media (max-width:700px){ .looks{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* devices */
/* true relative scale, as Apple's guidelines ask: iPhone 18 Pro Max is 78.0 mm wide, iPad Pro 13" 281.6 mm (0.277) */
.devices{display:grid; grid-template-columns:minmax(0,.277fr) minmax(0,1fr); gap:clamp(16px,3vw,44px); align-items:end; margin:clamp(48px,6vw,80px) auto 0; max-width:1000px}

/* calm */
.calm{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,28px); margin-top:clamp(44px,5vw,64px)}
.calm div{padding:26px 24px 24px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--c-line), 0 20px 40px -32px rgba(60,40,10,.5)}
.calm h3{font-size:22px}
.calm p{margin-top:10px; color:var(--c-ink-2); font-size:16px; line-height:1.55}

/* closing */
.closing{text-align:center; padding:clamp(90px,11vw,150px) 0; background:radial-gradient(60% 80% at 50% 0%,#12372B 0%,var(--night) 70%)}
.closing h2{font-size:clamp(36px,5vw,64px)}
.closing .lead{margin:20px auto 0}
.closing img{width:84px; height:84px; margin:0 auto 30px}

/* footer */
.foot{padding:56px 0 calc(56px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); font:400 14px/1.6 var(--ui); color:var(--ink-3)}
.foot .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 40px}
.foot nav{display:flex; flex-wrap:wrap; gap:10px 24px}
.foot nav a{color:var(--ink-2); text-decoration:none} .foot nav a:hover{color:var(--ink)}
.foot .legal{margin-top:26px; font-size:12.5px; line-height:1.6; max-width:70em}
.foot .fname{color:var(--ink); font-weight:600}

/* legal pages */
.doc{padding:130px 0 90px; background:var(--cream); color:var(--c-ink)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(38px,5vw,56px)}
.doc .updated{margin-top:14px; font:500 14px var(--ui); color:var(--c-ink-2)}
.doc h2{font-size:clamp(24px,2.6vw,30px); margin:48px 0 14px}
.doc h3{font-size:20px; margin:28px 0 10px}
.doc p,.doc li{font-size:17px; line-height:1.68; color:#2D2A23}
.doc p+p{margin-top:14px}
.doc ul,.doc ol{padding-left:1.3em; margin:12px 0}
.doc li+li{margin-top:6px}
.doc a{color:#7A5A1F; text-underline-offset:3px}
.doc .box{margin:26px 0; padding:20px 22px; background:#fff; border-radius:14px; box-shadow:0 0 0 1px var(--c-line)}
.doc table{width:100%; border-collapse:collapse; font:400 14.5px/1.45 var(--ui); margin:16px 0}
.doc th,.doc td{text-align:left; padding:10px 10px 10px 0; border-bottom:1px solid var(--c-line); vertical-align:top}
.doc th{font-weight:600; color:var(--c-ink-2); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.doc .tbl{overflow-x:auto; -webkit-overflow-scrolling:touch}
.doc pre{white-space:pre-wrap; font:400 13px/1.55 ui-monospace,Menlo,monospace; background:#fff; padding:18px; border-radius:12px; box-shadow:0 0 0 1px var(--c-line)}
.doc .muted{color:var(--c-ink-2)}
body:has(.doc) .top{position:relative; background:var(--night)}
.doc{padding-top:clamp(56px,7vw,90px)}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} }