/* ishrah.app: one page in the app's own paper, ink and marks. Light only, like the app. */
:root {
  --paper: #ECEBE6; --ink: #1D1D1B; --muted: #55544F; --faint: #6F6E68; --hairline: #D6D4CC;
  --ring: #F0A49A; --pink: #F5C7CC; --peach: #F7D8B2; --yellow: #F3EC9C; --blue: #A6DEEC;
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --label: system-ui, -apple-system, "Segoe UI", sans-serif;
  --quran: "Amiri Quran", "Geeza Pro", "Noto Naskh Arabic", serif;
  --arabic: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", system-ui, serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.55; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.top, main > section, footer { max-width: 62rem; margin-inline: auto; padding-inline: 24px; }
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 21px; }
.brand img { border-radius: 9px; display: block; }
.soon { font-family: var(--label); font-size: 14px; color: var(--muted); }
main { display: flex; flex-direction: column; gap: 104px; padding-block: 56px 112px; }
main > section { width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 68px); line-height: 1.08; max-width: 14em; }
h2 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.15; padding-bottom: 26px; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0; }
.hero { display: flex; flex-direction: column; gap: 24px; }
.name { font-family: var(--quran); font-size: 40px; line-height: 1.7; text-align: left; color: var(--ink); }
.lede { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.5; max-width: 34em; }
.aside { color: var(--muted); max-width: 36em; }

/* the three pages */
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.sheet { background: #F3F2EE; border: 1px solid var(--hairline); border-radius: 26px; padding: 36px 26px; display: flex; flex-direction: column; justify-content: center; gap: 15px; font-size: 16.5px; line-height: 1.52; min-width: 0; }
.sheet p, .sheet h2 { margin: 0; padding: 0; }
.sheet .lead { font-size: 22px; line-height: 1.5; font-weight: 600; }
.ar { text-align: center; }
.ar.quran { font-family: var(--quran); font-size: 24px; line-height: 2.2; }
.ar.had { font-family: var(--arabic); font-size: 21px; line-height: 1.75; }
.hon { font-family: var(--arabic); font-size: .86em; }
.caption { padding-top: 18px; font-family: var(--label); font-size: 14.5px; color: var(--muted); }

/* the marks, as the app draws them */
[class^="m-"] { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.m-pink, .m-peach, .m-yellow, .m-blue { padding-inline: .14em; margin-inline: -.14em; border-radius: .16em; background-repeat: no-repeat; background-size: 100% 76%; background-position: 0 58%; }
.m-pink { background-image: linear-gradient(var(--pink), var(--pink)); }
.m-peach { background-image: linear-gradient(var(--peach), var(--peach)); }
.m-yellow { background-image: linear-gradient(var(--yellow), var(--yellow)); }
.m-blue { background-image: linear-gradient(var(--blue), var(--blue)); }
.ar .m-pink, .ar .m-peach, .ar .m-yellow, .ar .m-blue { background-size: 100% 46%; background-position: 0 52%; }
.m-ring { white-space: nowrap; padding: .02em .3em .06em; margin-inline: -.12em; border: .12em solid var(--ring); border-radius: 50% / 60%; }
.m-name { font-weight: 600; }

.marks ul, .made ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-width: 40em; }
.marks li, .made li { padding-block: 16px; border-top: 1px solid var(--hairline); }
.marks li:last-child, .made li:last-child { border-bottom: 1px solid var(--hairline); }
.made ol { counter-reset: step; }
.made li { counter-increment: step; display: grid; grid-template-columns: 2em 1fr; }
.made li::before { content: counter(step); font-family: var(--label); font-size: 14px; color: var(--faint); padding-top: 4px; }
.made li b { font-weight: 600; }

.carrying { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: clamp(22px, 3.2vw, 28px); line-height: 1.4; max-width: 34em; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 52px; }
.three div { border-top: 2px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.three p { color: var(--muted); font-size: 17.5px; }
.private p { font-size: clamp(20px, 2.6vw, 24px); max-width: 30em; }
footer { border-top: 1px solid var(--hairline); padding-block: 28px 44px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--label); font-size: 14.5px; color: var(--muted); }

@media (max-width: 860px) {
  main { gap: 76px; padding-block: 32px 80px; }
  .row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 330px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; padding-bottom: 8px; }
  .sheet { scroll-snap-align: start; }
  .three { grid-template-columns: minmax(0, 1fr); }
}