/* Sayqal · sayqal.app
   Layout: one narrow book page, centred, inside a thin mushaf-like frame. Each section is one "page". One solid ink button per screen. */
:root{
  --paper:#f3eee5; --paper-2:#ebe4d8; --ink:#2b251e; --ink-soft:#5c5348; --ink-faint:#9a8f80; --rule:#d6ccbc;
  --on-ink:#f3eee5;
  --read:"Literata", Georgia, "Times New Roman", serif;
  --big:"Newsreader", "Literata", Georgia, serif;
  --ar:"Amiri", "Geeza Pro", "Traditional Arabic", serif;
  --measure:34rem;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1a1714; --paper-2:#221e1a; --ink:#ece4d6; --ink-soft:#b8ad9c; --ink-faint:#7d7365; --rule:#3a332b; --on-ink:#1a1714; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#1a1714; --paper-2:#221e1a; --ink:#ece4d6; --ink-soft:#b8ad9c; --ink-faint:#7d7365; --rule:#3a332b; --on-ink:#1a1714; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{background:var(--paper);color:var(--ink);font-family:var(--read);font-size:17.5px;line-height:1.7;padding-inline:16px;padding-block:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* language switching */
html:not([data-lang="ru"]) [data-l="ru"], html[data-lang="ru"] [data-l="en"]{display:none!important}

.note{max-width:var(--measure);margin:12px auto 0;text-align:center;font-size:12.5px;color:var(--ink-faint);letter-spacing:.02em}
.top{max-width:var(--measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.mark{font-family:var(--big);font-style:italic;font-size:22px;text-decoration:none}
.lang{display:flex;border:1px solid var(--rule);border-radius:99px;padding:3px;gap:2px}
.lang button{font:500 12.5px/1 var(--read);color:var(--ink-soft);background:none;border:0;border-radius:99px;padding:7px 12px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--paper-2);color:var(--ink)}
.top-right{display:flex;align-items:center;gap:14px}
.top-right > .link{font-size:14px;text-decoration:none}
.top-right > .link[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-faint)}
.lang a{font:500 12.5px/1 var(--read);color:var(--ink-soft);text-decoration:none;border-radius:99px;padding:7px 12px}
.lang a[aria-current="page"]{background:var(--paper-2);color:var(--ink)}
@media (max-width:380px){ .top-right{gap:8px} .lang button,.lang a{padding:7px 9px} }

/* the page frame */
.book{max-width:40rem;margin:0 auto 40px;border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:5px;border-radius:2px;background:var(--paper)}
.page{padding:64px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.page + .page{border-top:1px solid var(--rule)}
.page > *{max-width:var(--measure);margin:0}
@media (max-width:480px){ .page{padding:52px 20px} body{font-size:17px} }

.label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.big{font-family:var(--big);font-style:italic;font-weight:400;line-height:1.1;text-wrap:balance}
h1.big{font-size:clamp(64px,16vw,104px);margin:0}
h2.big{font-size:clamp(32px,7vw,42px);margin:0}
.lead{font-size:21px;line-height:1.5;text-wrap:balance}
.soft{color:var(--ink-soft)}
.small{font-size:14px;color:var(--ink-faint)}
.lines{display:flex;flex-direction:column;gap:4px}
.lines p{margin:0}
.lines p:last-child{font-style:italic}
.gap{height:6px}

.ar{font-family:var(--ar);direction:rtl;font-size:26px;line-height:2;margin:0}
.ar.lg{font-size:34px}
.ayah{display:flex;flex-direction:column;gap:6px}
.ayah .tr{margin:0;color:var(--ink-soft);font-size:16px}
.ayah .ref{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.ornament{color:var(--ink-faint);letter-spacing:.6em;font-size:13px;user-select:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--on-ink);text-decoration:none;font:500 16px/1 var(--read);padding:16px 30px;border-radius:99px;border:0;cursor:pointer}
.btn:hover{opacity:.9}
.link{font-size:15px;color:var(--ink-soft);text-underline-offset:4px}

/* the road */
.road{display:grid;grid-template-columns:repeat(11,1fr);gap:10px 8px;width:100%;max-width:26rem}
@media (max-width:420px){ .road{grid-template-columns:repeat(8,1fr)} }
.door{aspect-ratio:3/4;max-width:100%;border:1px dotted var(--ink-faint);border-radius:999px 999px 2px 2px;opacity:.55}
.door.open{border:1.5px solid var(--ink);opacity:1;background:var(--paper-2)}
.door.fork{border:1.2px dashed var(--ink-soft);opacity:.9}
.door.end{border:1.5px double var(--ink);opacity:1}
.road-key{display:flex;flex-direction:column;gap:14px;text-align:left;width:100%;max-width:26rem}
.road-key div{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.road-key .door{width:22px;margin-top:4px}
.road-key b{font-weight:500}
.road-key p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.hints{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hints span{font-size:13.5px;color:var(--ink-soft);border:1px dotted var(--ink-faint);border-radius:99px;padding:4px 12px}

/* a day, shown as a leaf of paper */
.leaf{width:100%;max-width:26rem;background:var(--paper-2);border-radius:14px;padding:28px 22px;display:flex;flex-direction:column;gap:16px;text-align:center}
.leaf .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.leaf h3{margin:0;font-family:var(--big);font-style:italic;font-weight:400;font-size:30px}
.leaf hr{border:0;border-top:1px solid var(--rule);width:40%;margin:4px auto}
.q{font-size:18px;margin:0;text-wrap:balance}
.chips{display:flex;flex-direction:column;gap:8px}
.chip{font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chip[aria-pressed="true"]::after{content:"✓";font-size:14px}
.line-in{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px dashed var(--rule);border-radius:12px;padding:12px 14px;width:100%}
.line-in::placeholder{color:var(--ink-faint)}

/* mirror */
.week{display:flex;gap:10px;justify-content:center}
.week i{width:12px;height:12px;border-radius:50%;border:1px solid var(--ink-soft)}
.week i.on{background:var(--ink);border-color:var(--ink)}
.stays{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;font-style:italic;width:100%}

/* sources */
.why{width:100%;max-width:26rem;text-align:left;border-left:2px solid var(--ink);padding:4px 0 4px 16px;display:flex;flex-direction:column;gap:6px}
.why b{font-weight:500;font-size:15px}
.why p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.srcs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;width:100%;max-width:26rem;text-align:left}
.srcs li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.srcs li span:last-child{color:var(--ink-faint);text-align:right}

/* plus */
.plus{list-style:none;padding:0;margin:0;width:100%;max-width:26rem;text-align:left;display:flex;flex-direction:column;gap:12px}
.plus li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:16px}
.plus li::before{content:"";width:8px;height:8px;border:1px solid var(--ink);border-radius:50%;margin-top:9px}

/* join */
form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:22rem}
input[type=email]{font:inherit;font-size:16px;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);border-radius:99px;padding:14px 20px;text-align:center}
input[type=email]::placeholder{color:var(--ink-faint)}
.done{font-style:italic}

.lockup{display:flex;flex-direction:column;align-items:center;gap:2px}
.lockup .ar{line-height:1.4}
.lockup .label{margin-top:10px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:26rem}
.names > div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 8px;border:1px solid var(--rule);border-radius:2px}
.names p{margin:0}
.names .ar{font-size:26px;line-height:1.5}
.names .big{font-size:30px}
.verify{font-size:12px;color:var(--ink-faint);border:1px dashed var(--ink-faint);border-radius:6px;padding:6px 10px}
.page > .ref{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.page > .ref a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--rule)}

footer{max-width:var(--measure);margin:0 auto;padding-block:8px 48px;text-align:center;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-faint)}
footer nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--ink-soft)}

/* ---------- motion: slow, quiet, one thought at a time ---------- */
.hero .lockup .ar{animation:fade 1.6s ease-out both}
.hero .lockup .big{animation:rise 1.8s .4s cubic-bezier(.2,.7,.2,1) both}
.hero .lockup .label{animation:fade 1.4s 1.2s ease-out both}
.hero .clear{display:inline-block;animation:unblur 3.2s 1.6s ease-out both}
@keyframes fade{from{opacity:.15}to{opacity:1}}
@keyframes rise{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes unblur{from{filter:blur(7px);opacity:.55}to{filter:blur(0);opacity:1}}

@supports (animation-timeline: view()){
  .page:not(.hero) > *:not(.lines):not(.road):not(.hair), .page:not(.hero) .lines > p{
    animation:surface linear both; animation-timeline:view(); animation-range:entry 0% entry 70%;
  }
}
@keyframes surface{from{opacity:.12;transform:translateY(16px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

/* pause pages: one question, lots of air */
.pause{padding-block:96px}
.pause .big{font-size:clamp(30px,7vw,40px)}
.hair{width:min(220px,60%);height:1px;background:var(--ink-faint);transform-origin:center}
@supports (animation-timeline: view()){
  .pause .hair{animation:draw linear both; animation-timeline:view(); animation-range:entry 20% cover 55%}
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* reading timer */
.timer{font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink-soft);border:1px dotted var(--ink-faint);border-radius:99px;padding:6px 16px}
.timer b{font-weight:500;color:var(--ink)}

/* hold to remember */
.hold{display:flex;flex-direction:column;align-items:center;gap:12px}
.ring{position:relative;width:132px;height:132px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--ink);font:500 15px/1.2 var(--read);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:1.5}
.ring .track{stroke:var(--rule)}
.ring .fill{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:402;stroke-dashoffset:402}
.ring span{position:relative}
.ring.held{animation:settle 1.2s ease-out}
@keyframes settle{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.after{font-style:italic;min-height:3.4em}

/* road and mirror light up in order */
.door{transition:opacity .9s ease, background-color .9s ease, border-color .9s ease}
.road.wait .door{opacity:.18}
.road.wait .door.open,.road.wait .door.fork{opacity:.3;background:none}
.week i{transition:background-color .5s ease, border-color .5s ease, transform .5s ease}
.week.wait i.on{background:none;border-color:var(--ink-faint)}

@media (prefers-reduced-motion: reduce){
  .hero .lockup *, .hero .clear, .page *{animation:none!important;filter:none!important}
  .hair{transform:none}
  .road.wait .door{opacity:.55}.road.wait .door.open{opacity:1;background:var(--paper-2)}.road.wait .door.fork{opacity:.9}
  .week.wait i.on{background:var(--ink);border-color:var(--ink)}
}

/* ---------- plain pages: privacy, terms, support ---------- */
.doc{text-align:left;align-items:stretch;gap:0}
.page.doc > *{animation:none!important}
.doc > *{max-width:var(--measure);width:100%;margin-inline:auto}
.doc-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:36px}
.doc-head p{margin:0}
.doc h2{font-family:var(--big);font-style:italic;font-weight:400;font-size:27px;line-height:1.2;margin:36px auto 10px}
.doc h3{font-family:var(--read);font-weight:500;font-size:17.5px;margin:26px auto 4px}
.doc p{margin:0 auto 12px}
.doc ul{margin:0 auto 12px;padding-left:1.2em}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--ink-faint)}
.doc a{text-underline-offset:3px;text-decoration-color:var(--ink-faint)}
.doc .short{border:1px solid var(--rule);border-radius:2px;padding:18px 20px;background:var(--paper-2)}
.doc .short p:last-child,.doc .short ul:last-child{margin-bottom:0}
.doc .mail{text-align:center;padding-block:8px 4px}
.doc .mail .btn{margin-top:6px}
.doc dl{margin:0 auto}
.doc dt{font-weight:500;margin-top:22px}
.doc dd{margin:4px 0 0;color:var(--ink-soft)}
.doc .meta{font-size:13px;color:var(--ink-faint);margin-top:36px;text-align:center}
footer a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-faint)}

/* ---------- built pages: road, doors, sources, contents ---------- */
.ur{font-family:"Noto Nastaliq Urdu", var(--ar);direction:rtl;font-size:17px;line-height:2.3}
.ayah .tr.ur{font-size:17px}
.chips.static{list-style:none;padding:0;margin:0}
.chips.static .chip{cursor:default}
.days{list-style:none;padding:0;margin:0;width:100%;max-width:26rem;text-align:left}
.days li{display:grid;grid-template-columns:4.5rem 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px}
.days li span:first-child{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding-top:4px}
.days li span:last-child{font-family:var(--big);font-style:italic;font-size:19px}
.steps{list-style:none;padding:0;margin:0;width:100%;max-width:26rem;text-align:left;display:flex;flex-direction:column;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;counter-increment:s}
.steps li::before{content:counter(s);grid-row:span 2;font-family:var(--big);font-style:italic;font-size:22px;line-height:1.2;color:var(--ink-faint)}
.steps b{font-weight:500}
.steps p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.forks{display:flex;flex-direction:column;gap:14px;width:100%;max-width:26rem}
.fork-door{border:1px solid var(--rule);border-radius:2px;padding:22px 18px;display:flex;flex-direction:column;gap:6px}
.fork-door p,.fork-door h3{margin:0}
.fork-door .say{font-style:italic;color:var(--ink-soft);font-size:15.5px;padding-bottom:10px}
.fork-door .ar{font-size:24px;line-height:1.6}
.fork-door h3{font-family:var(--big);font-style:italic;font-weight:400;font-size:28px;line-height:1.1}
.fork-door .after7{font-size:15.5px;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:10px;margin-top:6px}
.fork-door .after7 span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.srcs li a{text-underline-offset:3px;text-decoration-color:var(--ink-faint)}
.entries,.people{list-style:none;padding:0;margin:0;width:100%;max-width:var(--measure);text-align:left}
.entries li,.people li{padding:18px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.entries li:first-child,.people li:first-child{border-top:1px solid var(--rule)}
.entries h3{margin:0;font-weight:500;font-size:17px}
.entries p,.people p{margin:0;font-size:15.5px}
.entries .ar{font-size:22px;line-height:1.9;text-align:right}
.entries .ur{text-align:right;font-size:15px}
.entries .small,.people .small{font-size:13px}
.entries a{color:var(--ink-soft);text-underline-offset:3px;text-decoration-color:var(--ink-faint)}
.entries .note-line{color:var(--ink-soft);border-left:2px solid var(--rule);padding-left:12px}
.people b{font-weight:500}
.people p{color:var(--ink-soft)}
.toc{list-style:none;padding:0;margin:0;width:100%;max-width:26rem;text-align:left;counter-reset:none}
.toc li{border-bottom:1px solid var(--rule);padding:18px 0}
.toc li:first-child{border-top:1px solid var(--rule)}
.toc a{text-decoration:none;display:grid;grid-template-columns:2.4rem 1fr;column-gap:10px}
.toc .n{grid-row:span 2;font-family:var(--big);font-style:italic;font-size:20px;color:var(--ink-faint);line-height:1.3}
.toc .t{font-family:var(--big);font-style:italic;font-size:24px;line-height:1.25}
.toc .d{font-size:14.5px;color:var(--ink-soft)}
.toc a:hover .t{text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:4px}
.toc .also{display:inline-block;margin:8px 0 0 calc(2.4rem + 10px);font-size:13.5px;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:3px}
.toc-back{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:14px}
.toc-back a{color:var(--ink-soft);text-decoration:none}

/* base */
html{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}