@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/noto-serif-latin-400-normal.woff2') format('woff2');
  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:'Noto Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/noto-serif-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Noto Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/noto-serif-latin-400-italic.woff2') format('woff2');
  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:'Noto Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/noto-serif-cyrillic-400-italic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Amiri';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/amiri-latin-400-normal.woff2') format('woff2');
  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:'Amiri';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/amiri-arabic-400-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root{
  --parchment:      #e8ddc0;
  --parchment-deep: #dccb9f;
  --ink:            #2e2417;
  --sepia:          #6e5636;
  --pearl:          #f7f1e2;
  --gold:           #9c7a3c;

  --serif: 'Noto Serif', 'Georgia', serif;
  --arabic: 'Amiri', 'Noto Serif', serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.15), transparent 60%),
    var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 5vw;
}

.page{
  width:100%;
  max-width:1080px;
}

.rule{
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity:0.55;
  margin:0 0 3.2rem;
}
.rule--footer{ margin:3.2rem 0 1.4rem; }

.frame{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

/* ---------- plate (image) ---------- */

.plate{
  position:relative;
  margin:0;
}

.plate-mat{
  background:var(--pearl);
  padding:clamp(0.6rem, 1.4vw, 1.1rem);
  border:1px solid rgba(46,36,23,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 40px -22px rgba(46,36,23,0.55);
}

.plate img{
  display:block;
  width:100%;
  height:auto;
  filter:sepia(0.12) contrast(1.02);
}

/* ---------- verse ---------- */

.verse-panel{ min-width:0; }

.reference{
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sepia);
  margin:0 0 0.6rem;
  transition:opacity 0.25s ease;
}

.verse{
  margin:0;
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  line-height:1.55;
  font-weight:400;
  font-style:italic;
  color:var(--ink);
  min-height:8.5em;
}

.verse::before{ content:"“"; }
.verse::after{ content:"”"; }

.verse[dir="rtl"]{
  font-family:var(--arabic);
  font-style:normal;
  font-size:clamp(1.45rem, 2.7vw, 2rem);
  line-height:2;
  text-align:right;
}
.verse[dir="rtl"]::before,
.verse[dir="rtl"]::after{ content:""; }

.fade{ opacity:0; transform:translateY(4px); }

/* ---------- pearl-strand language switcher ---------- */

.strand{
  display:flex;
  align-items:center;
  gap:clamp(0.8rem, 2vw, 1.1rem);
  margin-top:2.6rem;
  padding-top:1.7rem;
  border-top:1px solid rgba(110,86,54,0.25);
}

.pearl-btn{
  appearance:none;
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
  line-height:0;
  border-radius:9px;
}

.pearl-btn .dot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.1rem;
  height:2.5rem;
  font-size:1.5rem;
  border-radius:7px;
  background:var(--parchment-deep);
  box-shadow:
    inset 0 0 0 1px rgba(110,86,54,0.35),
    0 1px 2px rgba(46,36,23,0.18);
  opacity:0.6;
  transform:translateY(0) rotate(0deg);
  transition:transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}

.pearl-btn:nth-child(even) .dot{ transform:rotate(-2deg); }
.pearl-btn:nth-child(odd) .dot{ transform:rotate(2deg); }

.pearl-btn:hover .dot{
  opacity:0.85;
  transform:translateY(-2px) rotate(0deg);
}

.pearl-btn[aria-pressed="true"] .dot{
  opacity:1;
  background:var(--pearl);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 6px 14px -6px rgba(156,122,60,0.6);
  transform:translateY(-3px) rotate(0deg);
}

.pearl-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:7px;
}

/* ---------- responsive ---------- */

@media (max-width:760px){
  body{ padding:8vh 6vw; }
  .frame{
    grid-template-columns:1fr;
    gap:2.4rem;
  }
  .plate{ max-width:340px; margin:0 auto; }
  .verse-panel{ text-align:left; }
  .strand{ flex-wrap:wrap; row-gap:1.2rem; }
}

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