/* The Farsi background of the Beginner Languages program (a blue Persian
   tile frame around a cream middle), a sheet of old paper, and the
   small slip that shows a word's sound and meaning (the same slip as Onion
   Skin's). Text that sits on the background has a light panel behind it, and
   the play controls a dark bar, so both can be read over the tiles. */
:root {
  color-scheme: light;
  --bar: rgba(36, 24, 15, .92);       /* the dark bar behind the play controls */
  --panel: rgba(251, 246, 230, .9);   /* the light panel behind text on the background */
  --desk: #140d08;
  --desk-glow: #3a2415;
  --cream: #efe2bb;
  --cream-dim: #b9a47a;
  --paper: #eee0b4;
  --paper-lo: #dcc58c;
  --paper-edge: rgba(122, 84, 30, .45);
  --ink: #2b1d10;
  --ink-soft: #7a4a1c;
  --tea: #a8471a;
  --pl: 60px;          /* the height of one line of text */
  --fs: 27px;          /* the story's letters */
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #efe6cc;
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
/* the picture stays still behind the page, on phones too */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: url('../pictures/farsi_background.jpg') center / cover no-repeat;
}
body.kurmanji::before { background-image: url('../pictures/kurdish_background.png'); }
main { max-width: 1560px; margin: 0 auto; padding: 28px 16px 60px; }
/* the four sets side by side; one above the other on a narrow screen */
#list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
svg { width: 1em; height: 1em; }

/* ---------- the list of readings ---------- */
.set-name { display: table; font: 600 26px/1.3 Georgia, 'Times New Roman', serif; margin: 12px 0 22px; padding: 6px 16px;
  color: var(--ink); background: var(--panel); border-radius: 6px; }
.group { display: table; font: 700 13px/1.4 'Segoe UI', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); margin: 26px 0 10px; padding: 4px 10px; background: var(--panel); border-radius: 4px; }
.card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline;
  padding: 14px 20px; margin-bottom: 10px; border-radius: 3px; text-decoration: none; color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 22px var(--paper-edge), 0 6px 16px rgba(0, 0, 0, .5);
}
.card:hover, .card:focus-visible { outline: 2px solid var(--tea); outline-offset: 2px; }
.card-label { font: 600 15px/1.3 'Segoe UI', system-ui, sans-serif; color: var(--ink-soft); }
.card-fa { font: 700 28px/1.7 'Vazirmatn', Tahoma, sans-serif; text-align: right; }
.set[dir="rtl"] .set-name { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.set[dir="rtl"] .group { font-family: 'Vazirmatn', Tahoma, sans-serif; letter-spacing: normal; text-transform: none; }
.set[dir="rtl"] .card-label { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.set-kurmanji .set-name { font: 500 26px/1.3 'Segoe UI', system-ui, sans-serif; }
.set-kurmanji .group { font: 500 18px/1.4 'Segoe UI', system-ui, sans-serif; text-transform: none; letter-spacing: normal; }
.set-kurmanji .card-fa { font: 400 18px/1.4 'Segoe UI', system-ui, sans-serif; text-align: left; }
.card-disabled, .card-disabled:hover {
  background: #e2e2e2; color: #777; box-shadow: none; outline: none; cursor: default;
}
.card-disabled .card-label { color: inherit; }
/* on the website, the password that opens the Chai and Conversation set */
.lock { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 20px; border-radius: 3px;
  background: var(--paper); box-shadow: inset 0 0 22px var(--paper-edge), 0 6px 16px rgba(0, 0, 0, .5); }
.lock input { flex: 1 1 140px; min-width: 0; font: 400 18px/1.4 'Segoe UI', system-ui, sans-serif; padding: 8px 10px;
  color: var(--ink); background: #fbf6e6; border: 1px solid var(--paper-edge); border-radius: 3px; }
.lock input::placeholder { font-family: 'Vazirmatn', Tahoma, sans-serif; color: var(--cream-dim); }
.lock button { font: 600 17px/1.4 'Vazirmatn', Tahoma, sans-serif; padding: 8px 18px; color: var(--cream);
  background: var(--tea); border: 0; border-radius: 3px; cursor: pointer; }
.lock button:disabled { opacity: .6; cursor: default; }
.lock-note { flex-basis: 100%; margin: 0; font: 600 15px/1.4 'Vazirmatn', Tahoma, sans-serif; color: var(--tea); }
.lock-note:empty { display: none; }

/* ---------- one reading ---------- */
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 15px; }
#where { padding: 5px 12px; color: var(--ink); background: var(--panel); border-radius: 6px; }
body.persian #where, body.persian .download, body.persian .rewind span, body.persian .volnum, body.persian .clock {
  font-family: 'Vazirmatn', Tahoma, sans-serif; }
.back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--cream);
  background: var(--bar); font-size: 20px; }
.back:hover, .back:focus-visible { background: #4a3220; outline: none; }

/* One centred column: the player bar, the book's drawing, the paper. */
.top { max-width: 860px; margin-left: auto; margin-right: auto; }
.spread { display: grid; gap: 20px; max-width: 860px; margin: 0 auto; }
.picture {
  width: fit-content; max-width: 560px; margin: 0 auto; padding: 14px 14px 10px; border-radius: 2px;
  background: var(--paper);
  box-shadow: inset 0 0 30px var(--paper-edge), 0 14px 30px rgba(0, 0, 0, .65);
}
/* the white of the scanned page takes the paper's colour; a tall photo is
   kept short enough that the paper starts on the first screen */
.picture img { display: block; width: auto; max-width: 100%; max-height: 560px; height: auto; mix-blend-mode: multiply; }
.picture figcaption { margin-top: 8px; font: italic 14px/1.4 Georgia, 'Times New Roman', serif; color: var(--ink-soft); }
/* the player: one dark bar above the paper, with the play controls on the
   left and the volume and Download Audio on the right; while the story is
   playing it stays at the top of the screen as the story scrolls */
.player.playing { position: sticky; top: 10px; }
.player {
  position: relative; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 8px 12px 8px 8px; border-radius: 30px; background: var(--bar); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.controls { display: flex; align-items: center; gap: 12px; flex: 1 1 300px; min-width: 0; }
.extras { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
/* the volume: a speaker, ten steps growing taller, and the number */
.volume { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px;
  color: var(--cream); cursor: pointer; touch-action: none; }
.volume:focus-visible { outline: 2px solid var(--tea); outline-offset: 2px; }
.volume > svg { font-size: 19px; color: var(--cream-dim); }
.volbars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.volbars i { width: 6px; border-radius: 2px; background: rgba(239, 226, 187, .22); }
.volbars i.on { background: var(--cream); }
.volume:hover .volbars i.on { background: #fff6dc; }
.volnum { width: 1.4em; text-align: center; font: 700 15px/1 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.download {
  display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 20px;
  background: rgba(239, 226, 187, .12); color: var(--cream); text-decoration: none;
  font: 600 15px/1 'Segoe UI', system-ui, sans-serif;
}
.download:hover, .download:focus-visible { background: rgba(239, 226, 187, .24); outline: none; }
.play {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0;
  border: none; border-radius: 50%; background: var(--tea); color: var(--cream); font-size: 22px; cursor: pointer;
}
.play:hover, .play:focus-visible { background: #c0561f; outline: none; }
.rewind {
  display: flex; align-items: center; gap: 3px; flex: none; height: 40px; padding: 0 10px; margin-left: 4px;
  border: none; border-radius: 20px; background: rgba(239, 226, 187, .1); color: var(--cream); font-size: 17px; cursor: pointer;
}
.rewind span { font: 700 14px/1 'Segoe UI', system-ui, sans-serif; }
.rewind:hover, .rewind:focus-visible { background: rgba(239, 226, 187, .2); outline: none; }
.play .i-pause, .player.playing .play .i-play { display: none; }
.player.playing .play .i-pause { display: block; }
.play .i-play { margin-left: 3px; }
/* the bar is tall enough to press easily; the line inside it is thin */
.track { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.track::before, .track i { content: ''; position: absolute; left: 0; top: 9px; height: 6px; border-radius: 3px; }
.track::before { right: 0; background: rgba(239, 226, 187, .2); }
.track i { width: 0; background: var(--cream); }
.clock { flex: none; font: 14px/1 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--cream-dim); }

/* The sheet. Every line of writing is --pl tall, keeping the text's steady
   rhythm without drawn rules or a fake margin line. */
#paper {
  position: relative;
  padding: var(--pl) 56px calc(var(--pl) * .8) 40px;
  color: var(--ink);
  isolation: isolate;
  box-shadow: none;
  border-radius: 2px;
}
/* Worn edges repeat down long readings. The paper surface is separate from
   the writing, so tears and wear cannot clip the text or word slips. */
#paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: url('../pictures/paper-top-wear.svg'), url('../pictures/paper-bottom-wear.svg'),
    url('../pictures/paper-edge-wear.svg'), url('../pictures/paper-grain.svg?v=3');
  background-size: 100% 24px, 100% 24px, 100% 620px, 512px 512px;
  background-position: center top, center bottom, left top, left top;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat;
  border-radius: inherit;
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22620%22%20viewBox%3D%220%200%201200%20620%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M2%200H1198L1199%2028%201196%2042%201200%2058%201198%2082%201189%2087%201184%2094%201164%20101%201178%20106%201188%20117%201197%20121%201199%20151%201196%20173%201200%20202%201198%20235%201191%20245%201195%20258%201199%20267%201197%20304%201200%20332%201194%20343%201183%20347%201174%20358%201190%20365%201197%20373%201198%20404%201194%20421%201199%20445%201197%20468%201187%20475%201193%20484%201200%20491%201197%20523%201199%20547%201195%20570%201198%20593%201198%20620H2L1%20594%204%20579%201%20560%205%20533%202%20511%209%20503%2020%20499%2033%20488%2018%20483%2010%20473%203%20468%202%20443%205%20419%201%20399%204%20370%201%20342%207%20332%204%20321%201%20302%204%20275%202%20256%2010%20250%2019%20240%2010%20234%204%20222%201%20214%204%20185%201%20162%205%20142%202%20119%208%20111%2021%20106%2036%2096%2024%2092%2015%2082%204%2077%202%2056%205%2034Z%22%2F%3E%0A%3C%2Fsvg%3E');
  mask-size: 100% 620px;
  mask-repeat: repeat-y;
  clip-path: polygon(
    0% 2px, 5% 1px, 9% 3px, 12% 1px,
    14% 4px, 19% 2px, 23% 3px, 24% 8px,
    26% 14px, 27% 7px, 29% 2px, 35% 3px,
    39% 1px, 43% 3px, 48% 2px, 52% 5px,
    57% 2px, 62% 3px, 67% 1px, 71% 4px,
    73% 12px, 74% 7px, 77% 2px, 82% 3px,
    87% 1px, 91% 3px, 95% 1px, 100% 2px,
    100% calc(100% - 2px), 96% calc(100% - 1px), 92% calc(100% - 4px), 88% calc(100% - 2px),
    85% calc(100% - 6px), 84% calc(100% - 13px), 82% calc(100% - 7px), 80% calc(100% - 3px),
    75% calc(100% - 2px), 69% calc(100% - 4px), 65% calc(100% - 1px), 61% calc(100% - 3px),
    56% calc(100% - 2px), 51% calc(100% - 4px), 47% calc(100% - 1px), 43% calc(100% - 3px),
    38% calc(100% - 2px), 35% calc(100% - 6px), 33% calc(100% - 11px), 31% calc(100% - 4px),
    26% calc(100% - 1px), 21% calc(100% - 3px), 17% calc(100% - 2px), 13% calc(100% - 4px),
    9% calc(100% - 1px), 4% calc(100% - 3px), 0% calc(100% - 2px)
  );
}
#paper[dir="ltr"] { padding-left: 56px; padding-right: 40px; }
/* Kurmanji: plain paper, with the printed book's indented paragraphs. */
#paper[lang="kmr"] .story-title { margin-bottom: 24px; font: 500 22px/1.4 'Segoe UI', system-ui, sans-serif; }
#paper[lang="kmr"] .para { margin: 0; text-indent: 1.6em; font: 400 18px/1.75 'Segoe UI', system-ui, sans-serif; text-shadow: none; }
#paper[lang="kmr"] #story > .para:first-child { text-indent: 0; }
#paper[lang="kmr"] .num {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: auto; min-width: 1.7em; height: 1.7em; padding: 0 .3em; margin: 0 .32em 0 0;
  border-width: 1px; border-radius: 999px; vertical-align: .1em;
  font: 500 12px/1 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
#paper[lang="kmr"] .slip-fa { font: 600 20px/1.35 'Segoe UI', system-ui, sans-serif; }
.story-title { margin: 0 0 var(--pl); text-align: center;
  font: 800 calc(var(--fs) * 1.3)/var(--pl) 'Vazirmatn', Tahoma, sans-serif; }
.story-title .word-count { display: inline-block; font-size: .65em; font-weight: 400; white-space: nowrap; unicode-bidi: isolate; }
/* a section heading from the PDF, in English, one text line tall */
.section { margin: var(--pl) 0 0; text-align: center; color: var(--ink-soft);
  font: italic 600 calc(var(--fs) * .7)/var(--pl) Georgia, 'Times New Roman', serif; }
.story-title + #story > .section:first-child { margin-top: 0; }
/* a drawing in the text: exactly four text lines tall (the page colour around
   each drawing is see-through) */
.story-pic { margin: 0; height: calc(var(--pl) * 4); padding: calc(var(--pl) * .15) 0; }
.story-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.para { margin: 0; text-indent: 1.4em;
  font: 600 var(--fs)/var(--pl) 'Vazirmatn', Tahoma, sans-serif; text-shadow: none; }

.w { cursor: pointer; border-radius: 3px; }
.w:hover { background: rgba(120, 80, 20, .16); }
.w.lit { background: rgba(168, 71, 26, .10); }
.w.mate { background: rgba(168, 71, 26, .16); }
.w.on { background: rgba(168, 71, 26, .30); }

/* the number after a sentence, like the numbers on the book's drawings; it
   stays on the same line as the sentence's last word */
.end { white-space: nowrap; }
.num {
  display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; padding: 0; margin: 0 .1em;
  vertical-align: .2em; border: 1.5px solid currentColor; border-radius: 50%; background: none;
  color: var(--ink-soft); opacity: .7; cursor: pointer; text-indent: 0;
  font: 700 calc(var(--fs) * .55)/1 'Vazirmatn', Tahoma, sans-serif;
}
.num:hover, .num:focus-visible, .num.on { opacity: 1; background: rgba(168, 71, 26, .16); outline: none; }

/* ---------- the slip ---------- */
.slip {
  position: absolute; z-index: 2; width: max-content; max-width: min(460px, calc(100% - 16px));
  display: grid; gap: 3px; justify-items: center; text-align: center; text-indent: 0;
  padding: 8px 16px 10px;
  background: #fbf6e6; color: var(--ink); border: 1px solid rgba(90, 60, 20, .35); border-radius: 2px;
  box-shadow: 0 5px 12px rgba(60, 40, 10, .35);
  transform: rotate(-1deg);
}
.slip-fa { font: 800 26px/1.7 'Vazirmatn', Tahoma, sans-serif; }
.slip-say { font: italic 500 20px/1.3 Georgia, 'Times New Roman', serif; color: var(--ink-soft); }
.slip-en { font: 600 18px/1.35 'Segoe UI', system-ui, sans-serif; }
.spoken { display: flex; align-items: baseline; gap: 7px; font: italic 17px/1.3 Georgia, 'Times New Roman', serif; color: var(--ink-soft); }
.spoken .tag { font: 700 11px/1 'Segoe UI', system-ui, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.spoken .sp-fa { font: 700 19px/1.4 'Vazirmatn', Tahoma, sans-serif; font-style: normal; color: var(--ink); }
.mean { display: grid; gap: 4px; margin-top: 3px; font: 600 18px/1.35 'Segoe UI', system-ui, sans-serif; }
.mean .pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 7px; }
.mean .ph { font: 800 19px/1.6 'Vazirmatn', Tahoma, sans-serif; }
.mean .ph-say { font: italic 500 16px/1.3 Georgia, 'Times New Roman', serif; color: var(--ink-soft); }
.mean .eq { opacity: .55; }

/* ---------- a phone: the play controls and, under them, the volume and
   Download Audio sit above the paper; while the story is playing the play
   controls stay at the bottom of the screen ---------- */
@media (max-width: 700px) {
  .player, .player.playing { position: static; justify-content: center; padding: 0; background: none; box-shadow: none; }
  .controls {
    flex-basis: 100%; padding: 8px 18px 8px 8px; border-radius: 40px;
    background: var(--bar); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .player.playing .controls {
    position: fixed; z-index: 5; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    max-width: 560px; margin: 0 auto; box-shadow: 0 6px 22px rgba(0, 0, 0, .6);
  }
  .extras { margin: 0 auto; padding: 6px 8px 6px 10px; border-radius: 30px; background: var(--bar); }
  #reading { padding-bottom: 80px; }
}
@media (max-width: 1100px) {
  #list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------- a phone ---------- */
@media (max-width: 600px) {
  :root { --pl: 46px; --fs: 21px; }
  main { padding: 16px 16px 40px; }
  .set-name { font-size: 21px; }
  #paper { padding: var(--pl) 30px calc(var(--pl) * .6) 16px; }
  #paper[dir="ltr"] { padding-left: 30px; padding-right: 16px; }
  #paper[lang="kmr"] .para { font-size: 18px; }
  .para { text-indent: 1em; }
  .slip-fa { font-size: 22px; }
  .slip-say { font-size: 17px; }
  .slip-en, .mean { font-size: 15px; }
  .mean .ph { font-size: 16px; }
  .mean .ph-say { font-size: 14px; }
  .card { padding: 12px 14px; column-gap: 12px; }
  .card-fa { font-size: 23px; }
}