/* =========================================================================
   Thematic Qur'an · Reflections — stylesheet
   Ink-on-paper journal system, with existing article long-read styles.
   Colour system: near-monochrome paper/ink + taxonomy facet accents only.
   ========================================================================= */

:root{
  /* warm paper / soft ink */
  --paper: oklch(0.977 0.012 76);
  --paper-2: oklch(0.962 0.014 72);
  --ink: oklch(0.305 0.014 52);
  --ink-soft: oklch(0.475 0.014 55);
  --ink-faint: oklch(0.625 0.012 60);
  --rule: oklch(0.905 0.012 70);

  /* first light over calm water */
  --dawn-high: oklch(0.962 0.018 78);
  --dawn-mid:  oklch(0.945 0.034 56);
  --dawn-glow: oklch(0.912 0.052 44);
  --waterline: oklch(0.930 0.024 62);
  --water-low: oklch(0.962 0.013 74);
  --sun:       oklch(0.965 0.045 72);

  /* facet accents — the only accent system (mirrors taxonomy.json) */
  --f-people:   oklch(0.52 0.095 268);
  --f-divine:   oklch(0.605 0.090 80);
  --f-dua:      oklch(0.565 0.070 198);
  --f-prophets: oklch(0.525 0.092 330);
  --f-ethics:   oklch(0.555 0.100 42);
  --f-unseen:   oklch(0.505 0.080 288);
  --f-creation: oklch(0.530 0.072 148);
  --f-justice:  oklch(0.520 0.105 28);
  --f-worship:  oklch(0.520 0.068 178);

  --accent: var(--f-divine); /* default; per-article override set inline */
  --stamp: #95190C; /* identity-stamp red — the wordmark full stop */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --arabic: "Amiri", serif;

  --measure: 36rem; /* long-read line length */
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }

.smallcaps{
  font-variant: small-caps;
  font-style: normal;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ---------------- MASTHEAD ---------------- */
.masthead{
  display:flex; align-items:center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.7rem clamp(1.25rem, 4vw, 3.25rem);
}
.masthead.over-hero{ position: absolute; top:0; left:0; right:0; z-index: 6; }
.masthead.solid{ border-bottom: 1px solid var(--rule); background: var(--paper); }
.wordmark{ display:flex; align-items:center; gap:0.8rem; }
.wordmark .sun{
  align-self:center;
  width: 16px; height: 16px; flex:none;
  border-radius:50%;
  background: radial-gradient(circle at 50% 45%, var(--sun), var(--dawn-glow) 70%);
  box-shadow: 0 0 0 1px oklch(0.86 0.04 60 / 0.5);
}
.wordmark .name{ font-size: 1.16rem; color: var(--ink); white-space: nowrap; }
.wordmark .kind{ font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--ink-faint); }
.mast-nav{ display:flex; align-items:center; gap: clamp(1rem, 2.2vw, 2rem); }
.mast-nav a{
  font-size: 0.96rem; color: var(--ink-soft);
  transition: color .25s; position: relative; white-space: nowrap;
}
.mast-nav a:not(.rss):hover{ color: var(--ink); }
.mast-nav a:not(.rss)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background: var(--ink-soft); transition: right .3s ease;
}
.mast-nav a:not(.rss):hover::after{ right:0; }
.mast-nav .rss{ color: var(--ink-faint); display:inline-flex; }
.mast-nav .rss:hover{ color: var(--ink); }
.mast-nav .rss svg{ width:15px; height:15px; }

/* ---------------- HERO : first light, the promise ----------------
   Deliberately under one screen tall so the journal below peeks into view
   (the lead reflection's top edge shows above the fold). */
.hero{
  position: relative;
  min-height: clamp(340px, 46vh, 500px);
  display:flex; flex-direction: column;
  background:
    radial-gradient(60% 38% at 50% 57%, oklch(0.97 0.04 74 / 0.85), transparent 70%),
    linear-gradient(180deg,
       var(--dawn-high) 0%, var(--dawn-mid) 32%, var(--dawn-glow) 53%,
       var(--waterline) 60%, var(--water-low) 74%, var(--paper) 100%);
  overflow: hidden;
}
.sky{
  position: relative; flex: 1 1 auto;
  display:flex; flex-direction: column; align-items:center; justify-content: center;
  text-align:center; padding: 5.5rem clamp(1.25rem, 5vw, 2rem) 0.5rem; z-index:2;
}
.hero .kicker{
  font-variant: small-caps; letter-spacing: 0.16em; font-size: 0.92rem;
  color: var(--ink-faint); margin-bottom: 1.4rem;
}
.hero .promise{
  font-weight: 300; font-size: clamp(1.9rem, 3.7vw, 2.8rem);
  line-height: 1.24; letter-spacing: -0.012em;
  margin: 0 auto; max-width: 24ch; color: var(--ink); text-wrap: balance;
}
.hero .promise em{ font-style: italic; }
/* the plain one-line creed — what this is */
.hero .creed{
  font-style: italic; font-weight: 400; font-size: clamp(1.02rem, 1.55vw, 1.18rem);
  line-height: 1.55; color: var(--ink-soft); max-width: 40ch; margin: 1.5rem auto 0;
  text-wrap: balance;
}
/* gentle scroll cue toward the journal */
.scroll-cue{
  display:inline-flex; align-items:center; gap: 0.5rem; margin-top: 2rem;
  font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.8rem;
  color: var(--ink-faint); transition: color .25s;
}
.scroll-cue:hover{ color: var(--ink-soft); }
.scroll-cue .chev{ font-size: 0.95rem; line-height:1; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(3px);} }

/* the calm water — a soft mirror */
.water{ position: relative; flex: 0 0 auto; height: 12vh; min-height: 84px; overflow: hidden; z-index:1; }
.reflection{
  position:absolute; left:0; right:0; top: 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 0.4rem clamp(1.25rem,5vw,2rem) 0;
  transform: scaleY(-1); transform-origin: top center;
  -webkit-mask-image: linear-gradient(to top, transparent 8%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.6) 100%);
          mask-image: linear-gradient(to top, transparent 8%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.6) 100%);
  filter: blur(0.7px); opacity: 0.30; pointer-events:none;
}
.reflection p{
  font-weight: 300; font-size: clamp(1.8rem, 3.7vw, 2.9rem);
  line-height: 1.26; letter-spacing: -0.012em; margin:0; max-width: 23ch; color: var(--ink);
}
.water .sunpath{
  position:absolute; left:50%; top:0; bottom:0; width: clamp(70px, 16vw, 180px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, oklch(0.95 0.045 72 / 0.5), transparent 75%);
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 8px, #000 8px 10px);
          mask-image: repeating-linear-gradient(180deg, transparent 0 8px, #000 8px 10px);
  pointer-events:none; z-index:2;
}
.water::after{
  content:""; position:absolute; inset:-10% 0;
  background: repeating-linear-gradient(180deg, transparent 0 10px, oklch(0.6 0.02 60 / 0.018) 10px 11px);
  animation: drift 11s linear infinite; pointer-events:none; z-index:1;
}
@keyframes drift{ from{ transform: translateY(0);} to{ transform: translateY(11px);} }

/* =====================================================================
   HOME — editorial front (nameplate + feature + recent rail + grid)
   ===================================================================== */

/* nameplate masthead with a dawn wash */
.masthead-pro{
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(130% 90% at 50% -20%, oklch(0.965 0.045 74 / 0.85), transparent 60%),
    linear-gradient(180deg, var(--dawn-high) 0%, var(--dawn-mid) 38%, var(--water-low) 82%, var(--paper) 100%);
}
.masthead-pro .topbar{
  max-width: 74rem; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 0.7rem clamp(1.25rem,5vw,2.5rem);
  font-size: 0.8rem; color: var(--ink-faint);
}
.masthead-pro .issue{ font-variant: small-caps; letter-spacing: 0.09em; }
.masthead-pro .util{ display:flex; gap: clamp(0.9rem,2vw,1.6rem); }
.masthead-pro .util a{ color: var(--ink-faint); transition: color .2s; }
.masthead-pro .util a:hover{ color: var(--ink); }

.plate{ text-align:center; padding: clamp(1.4rem,4vw,2.6rem) 1rem clamp(1.1rem,3vw,1.7rem); }
.plate .nameplate-mark{ display:inline-flex; align-items:center; gap: 0.75rem; }
.plate .sun{
  width:18px; height:18px; flex:none; border-radius:50%;
  background: radial-gradient(circle at 50% 45%, var(--sun), var(--dawn-glow) 70%);
  box-shadow: 0 0 0 1px oklch(0.86 0.04 60 / 0.5);
}
.plate .nameplate-kind{ font-variant: small-caps; letter-spacing: 0.36em; font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 0.7rem; text-indent: 0.36em; }
.plate .title{ font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 400; letter-spacing: -0.015em; color: var(--ink); }
.plate .nameplate-tag{ font-style: italic; color: var(--ink-soft); margin: 0.85rem auto 0; font-size: clamp(1.02rem,1.7vw,1.2rem); max-width: 42ch; text-wrap: balance; }

.sections{
  display:flex; justify-content:center; flex-wrap:wrap; gap: clamp(1rem,2.4vw,2.1rem);
  max-width: 74rem; margin: 0 auto; padding: 0.85rem 1rem;
  border-top: 1px solid var(--rule);
  font-variant: small-caps; letter-spacing: 0.07em; font-size: 0.86rem;
}
.sections a{ color: var(--ink-soft); transition: color .2s; }
.sections a:hover{ color: var(--ink); }

/* shared card bits */
.concept{ display:inline-flex; align-items:baseline; gap:0.5rem; margin-bottom: 0.9rem; white-space: nowrap; }
.concept .dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); align-self:center; }
.concept .ar{ font-family: var(--arabic); font-size: 1.3rem; line-height:1; color: var(--accent); }
.concept .tl{ font-style: italic; font-size: 0.95rem; color: var(--accent); }

/* the news story this reflection sits with — names the event up front */
.story-tag{ display:inline-block; font-variant: small-caps; letter-spacing: 0.07em; font-size: 0.82rem; color: var(--accent); margin-bottom: 0.5rem; }

.entry-meta{ display:flex; flex-wrap:wrap; align-items:center; gap: 0.5rem; color: var(--ink-faint); font-style: italic; font-size: 0.9rem; }
.entry-meta .sep{ font-style:normal; opacity:0.5; }

.draft-badge{ font-style:normal; font-variant: small-caps; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--paper); background: var(--ink-faint); padding: 0.06rem 0.5rem; border-radius: 4px; }

/* front: feature + recent rail */
.front{ max-width: 74rem; margin: 0 auto; padding: clamp(2rem,4vw,3.2rem) clamp(1.25rem,5vw,2.5rem) 0; }
.front-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem,4vw,3.6rem); }
.front-grid.solo{ grid-template-columns: 1fr; max-width: 46rem; margin: 0 auto; }

.feature{ display:block; }
.feature .kicker-rule{ display:block; width: 40px; height: 2px; background: var(--accent); margin-bottom: 1.1rem; }
.feature .concept{ margin-bottom: 0.7rem; }
.feature-title{ font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.018em; margin: 0 0 0.6rem; text-wrap: balance; }
.feature .story-tag{ margin-bottom: 0.55rem; font-size: 0.9rem; }
.feature-dek{ color: var(--ink-soft); font-size: 1.14rem; line-height: 1.5; margin: 0 0 0.9rem; max-width: 40ch; }
.feature:hover .feature-title{ text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color: var(--accent); }

.rail{ border-left: 1px solid var(--rule); padding-left: clamp(1.5rem,2.6vw,2.2rem); }
.rail-head{ font-variant: small-caps; letter-spacing: 0.09em; font-size: 0.8rem; color: var(--ink-faint); margin: 0.2rem 0 1.2rem; }
.rail-item{ display:block; padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--rule); }
.rail-item:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rail-item .concept{ margin-bottom: 0.35rem; }
.rail-item .concept .ar{ font-size: 1.05rem; }
.rail-item .concept .tl{ font-size: 0.84rem; }
.rail-item h3{ font-weight: 400; font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4rem; text-wrap: pretty; }
.rail-item:hover h3{ text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color: var(--accent); }
.rail-item .story-tag{ font-size: 0.76rem; margin-bottom: 0.3rem; }
.rail-item .entry-meta{ font-size: 0.82rem; }

/* more reflections — hairline grid */
.more{ max-width: 74rem; margin: 0 auto; padding: clamp(2.4rem,4vw,3.4rem) clamp(1.25rem,5vw,2.5rem) 0; }
.section-eyebrow{ font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem,3vw,2.8rem); }
.card{ display:block; }
.card .concept{ margin-bottom: 0.5rem; }
.card .concept .ar{ font-size: 1.1rem; }
.card .concept .tl{ font-size: 0.86rem; }
.card .story-tag{ font-size: 0.78rem; }
.card h3{ font-weight: 400; font-size: 1.34rem; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 0.45rem; text-wrap: pretty; }
.card:hover h3{ text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color: var(--accent); }
.card .dek{ color: var(--ink-soft); font-size: 1rem; line-height: 1.5; margin: 0 0 0.8rem; }

/* =====================================================================
   ARTICLE PAGE
   ===================================================================== */
.article{ max-width: var(--measure); margin: 0 auto; padding: clamp(2.5rem,5vw,4rem) clamp(1.25rem,5vw,1.75rem) 2rem; }

.article-head{ text-align:center; margin-bottom: clamp(2.6rem,5vw,3.6rem); }
.article-head .concept{ margin-bottom: 1.2rem; }
.article-head .concept .ar{ font-size: 1.5rem; }
.article-head h1{
  font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.1; letter-spacing: -0.018em; margin: 0 0 1.1rem; text-wrap: balance;
}
/* event-named subtitle: "The Event: poetic line" — the poetic line hot-jumps to The story */
/* reporting style: subtitle reads "Event: Story" — event prefix in accent, hot-jumps */
.article-head .subtitle .event{ color: var(--accent); font-weight: 500; }
.article-head a.event:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-head .subtitle{
  color: var(--ink-soft); font-size: 1.18rem; line-height: 1.5;
  margin: 0 auto 1.3rem; max-width: 34rem;
}
.article-head .entry-meta{ font-size: 0.9rem; justify-content: center; }

/* prose body */
.article-body{ font-size: 1.12rem; }
.article-body > p{ margin: 0 0 1.35rem; }
.article-body > p:first-of-type::first-letter{
  float:left; font-size: 3.4rem; line-height: 0.82; padding: 0.05em 0.12em 0 0;
  color: var(--accent); font-weight: 400;
}
.article-body em{ font-style: italic; }
.article-body strong{ font-weight: 600; color: var(--ink); }
.article-body a{ color: var(--accent); border-bottom: 1px solid var(--rule); }
.article-body a:hover{ border-color: var(--accent); }

/* lone Arabic concept word, set as a calligraphic motif */
.article-body .qword{
  font-family: var(--arabic); direction: rtl; text-align: center;
  font-size: 2rem; line-height: 1.4; color: var(--accent);
  margin: 0.4rem 0 1.5rem;
}

/* in-body subheads (rendered from **bold** standalone lines) */
.article-subhead{
  font-weight: 500; font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.01em;
  margin: 2.6rem 0 1.1rem; text-align:center; color: var(--ink);
}
.article-subhead::before{
  content:""; display:block; width: 26px; height: 2px; background: var(--accent);
  opacity: 0.6; margin: 0 auto 1rem;
}

/* four-layer citation block: translation · arabic · transliteration · source */
.ayah{
  margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--accent);
}
.ayah .translation{
  font-weight: 600; font-size: 1.18rem; line-height: 1.5; color: var(--ink); margin: 0 0 0.85rem;
}
.ayah .ar{
  font-family: var(--arabic); direction: rtl; text-align: right;
  font-size: 1.7rem; line-height: 2.0; color: var(--ink); margin: 0 0 0.55rem;
}
.ayah .translit{ font-style: italic; color: var(--ink-faint); font-size: 0.98rem; line-height: 1.5; margin: 0 0 0.55rem; }
.ayah .src{ font-style: normal; font-size: 0.88rem; color: var(--ink-faint); display:block; }
.ayah .src a{ color: var(--accent); border-bottom: 1px solid var(--rule); }
.ayah .src a:hover{ border-color: var(--accent); }

/* closing line emphasis (final bold standalone, e.g. "The wound is real...") */
.article-body hr{ border:none; border-top: 1px solid var(--rule); max-width: 8rem; margin: 2.6rem auto; }

/* ---------------- THE STORY (factual basis) — hot-jump target ---------------- */
.the-story{
  scroll-margin-top: 2rem;
  margin: clamp(2.5rem,5vw,3.5rem) 0 0;
  padding: clamp(1.6rem,4vw,2.2rem) clamp(1.4rem,4vw,2rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.the-story .eyebrow{
  font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.82rem;
  color: var(--accent); margin: 0 0 0.7rem;
}
.the-story h2{ font-weight: 500; font-size: 1.25rem; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.the-story p{ font-size: 1rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 0.9rem; }
.the-story p:last-child{ margin-bottom: 0; }
.the-story .sources-line{ font-size: 0.92rem; color: var(--ink-faint); }

/* bibliography */
.biblio{ margin: clamp(2.2rem,4vw,3rem) 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.biblio h2{ font-variant: small-caps; letter-spacing: 0.08em; font-weight: 400; font-size: 0.95rem; color: var(--ink-faint); margin: 0 0 1rem; }
.biblio p{ font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 0.7rem; padding-left: 1.4rem; text-indent: -1.4rem; }
.biblio a{ color: var(--ink-soft); border-bottom: 1px solid var(--rule); word-break: break-word; }

/* grounding footer — the standing disclosure */
.grounding{ margin: 2rem 0 0; font-style: italic; font-size: 0.85rem; line-height: 1.6; color: var(--ink-faint); }

/* back link */
.back-link{ display:inline-flex; align-items:center; gap:0.4rem; margin: 2.4rem 0 0; font-style:italic; color: var(--ink-soft); font-size: 0.95rem; }
.back-link:hover{ color: var(--ink); }

/* ---------------- SUBSCRIBE ---------------- */
.subscribe{ max-width: 70rem; margin: clamp(2.5rem,5vw,4rem) auto 0; padding: 0 clamp(1.25rem,5vw,2.5rem); }
.sub-card{ background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(2.4rem,5vw,3.6rem) clamp(1.8rem,5vw,3.4rem); text-align:center; }
.sub-card h2{ font-weight:400; font-size: clamp(1.7rem,2.8vw,2.3rem); margin:0 0 0.7rem; letter-spacing:-0.015em; }
.sub-card > p{ color: var(--ink-soft); margin:0 auto 1.8rem; max-width: 42ch; font-style:italic; font-size:1.08rem; }
.field{ display:flex; gap: 0.5rem; max-width: 30rem; margin: 0 auto; }
.field input{ flex:1; min-width:0; font-family: var(--serif); font-size: 1rem; padding: 0.78rem 1rem; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); border-radius: 8px; }
.field input:focus{ outline:none; border-color: var(--ink-faint); }
.btn{ font-family: var(--serif); font-size: 1rem; padding: 0.78rem 1.4rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover{ background: transparent; color: var(--ink); }
.rss-line{ margin-top: 1.2rem; display:flex; align-items:center; justify-content:center; gap: 0.55rem; color: var(--ink-faint); font-style: italic; font-size: 0.95rem; }
.rss-line svg{ width:14px; height:14px; }
.rss-line a{ border-bottom: 1px solid var(--rule); }
.rss-line a:hover{ border-color: var(--ink-faint); color: var(--ink-soft); }

/* ---------------- FOOTER ---------------- */
footer{ margin-top: clamp(3.5rem,7vw,6rem); border-top: 1px solid var(--rule); background: var(--paper-2); }
.foot-inner{ max-width: 70rem; margin: 0 auto; padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,2.5rem) 1.5rem; display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem 3rem; }
.foot-brand p{ color: var(--ink-soft); font-size: 0.98rem; max-width: 36ch; margin: 1rem 0 0; line-height:1.55; font-style: italic; }
.foot-col h4{ font-variant: small-caps; letter-spacing:0.1em; font-size:0.9rem; color: var(--ink-faint); margin:0 0 0.9rem; font-weight:400; }
.foot-col a{ display:block; color: var(--ink-soft); font-size: 1rem; padding: 0.26rem 0; transition: color .2s; }
.foot-col a:hover{ color: var(--ink); }
.foot-base{ max-width:70rem; margin:0 auto; border-top: 1px solid var(--rule); padding: 1.2rem clamp(1.25rem,5vw,2.5rem); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color: var(--ink-faint); font-style: italic; font-size: 0.88rem; }

@media (max-width: 900px){
  .front-grid{ grid-template-columns: 1fr; gap: 0; }
  .rail{ border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.6rem; margin-top: 2rem; }
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  body{ font-size: 18px; }
  .mast-nav a:not(.rss){ display:none; }
  .card-grid{ grid-template-columns: 1fr; }
  .foot-inner{ grid-template-columns: 1fr 1fr; }
  .field{ flex-direction: column; }
  .ayah .ar{ font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce){ .water::after{ animation:none; } html{ scroll-behavior: auto; } }

/* =====================================================================
   THE THEMATIC QUR'AN JOURNAL
   Homepage and supporting publication pages only. Article pages retain
   their existing long-read rules above; no journal selector is global.
   ===================================================================== */

.journal-home,
.journal-static{
  --journal-paper: #f6f3ed;
  --journal-ink: #191917;
  --journal-muted: #69665f;
  --journal-rule: #d1ccc2;
  --journal-ui: "IBM Plex Sans", Arial, sans-serif;
  background: var(--journal-paper);
  color: var(--journal-ink);
  font-family: var(--serif);
}

.journal-home *,
.journal-static *,
.journal-article *{ box-sizing:border-box; }

.journal-home a,
.journal-static a,
.journal-article a{ color:inherit; text-decoration:none; }

.journal-home :focus-visible,
.journal-static :focus-visible,
.journal-article :focus-visible{
  outline: 2px solid var(--journal-ink);
  outline-offset: 4px;
}

.journal-masthead{
  width:min(100% - 2.5rem, 76rem);
  margin:0 auto;
  border-top:4px solid var(--journal-ink);
  border-bottom:1px solid var(--journal-ink);
}

.journal-utility{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:2.8rem;
  border-bottom:1px solid var(--journal-rule);
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.journal-utility a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; }
.journal-utility a:hover{ color:var(--journal-ink); text-decoration-color:currentColor; }

.journal-nameplate{
  padding:clamp(2.75rem, 8vw, 6.25rem) 1rem clamp(2.25rem, 6vw, 4.5rem);
  text-align:center;
}

.journal-nameplate a{
  display:block;
  font-size:clamp(2.45rem, 6.2vw, 5.6rem);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.95;
}

/* Identity stamp: the oversized red full stop closing the wordmark. */
.journal-nameplate .stamp{
  color:var(--stamp);
  font-weight:600;
  font-size:1.28em;
  line-height:0;
  margin-left:0.065em;
}

.journal-nameplate p{
  max-width:36rem;
  margin:1.5rem auto 0;
  color:var(--journal-muted);
  font-size:clamp(1rem, 1.8vw, 1.22rem);
  font-style:italic;
  line-height:1.45;
  text-wrap:balance;
}

.journal-nameplate--compact{ padding:2.25rem 1rem 2rem; }
.journal-nameplate--compact a{ font-size:clamp(2rem, 4vw, 3.2rem); }

.journal-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1.1rem, 3.4vw, 3rem);
  padding:.9rem 1rem;
  border-top:1px solid var(--journal-rule);
  font-family:var(--journal-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.journal-nav a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; }
.journal-nav a:hover,
.journal-nav a[aria-current="page"]{ text-decoration-color:currentColor; }

.journal-front{
  width:min(100% - 2.5rem, 70rem);
  margin:0 auto;
  padding:clamp(3.5rem, 8vw, 7rem) 0 0;
}

.journal-section-label{
  margin:0;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.35;
  text-transform:uppercase;
}

.journal-lead{
  max-width:59rem;
  padding:1.1rem 0 clamp(3rem, 7vw, 5.5rem);
  border-top:2px solid var(--journal-ink);
  border-bottom:1px solid var(--journal-rule);
}

.journal-lead .journal-section-label{ margin-bottom:clamp(1.6rem, 3vw, 2.5rem); }

.journal-home .concept{
  display:inline-flex;
  align-items:baseline;
  gap:.42rem;
  margin:0 0 .75rem;
  white-space:normal;
}

.journal-home .concept .dot{
  width:.42rem;
  height:.42rem;
  margin-right:.12rem;
  background:var(--accent);
}

.journal-home .concept .ar{
  color:var(--accent);
  font-size:1.36rem;
  line-height:1;
}

.journal-home .concept .tl{
  color:var(--journal-muted);
  font-size:.95rem;
  line-height:1.35;
}

.journal-home .story-tag{
  display:block;
  margin:0 0 .8rem;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
}

.journal-lead h1{
  max-width:18ch;
  margin:0;
  font-size:clamp(2.7rem, 5.6vw, 5.1rem);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.96;
  text-wrap:balance;
}

.journal-lead h1 a:hover,
.journal-list-item h2 a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.13em; }

.journal-lead-dek{
  max-width:40rem;
  margin:1.35rem 0 1.25rem;
  color:var(--journal-muted);
  font-size:clamp(1.05rem, 1.8vw, 1.25rem);
  line-height:1.52;
}

.journal-home .entry-meta,
.journal-static .entry-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.72rem;
  font-style:normal;
  letter-spacing:.025em;
  line-height:1.45;
}

.journal-home .draft-badge,
.journal-static .draft-badge{
  padding:.1rem .38rem;
  border:1px solid currentColor;
  border-radius:0;
  background:transparent;
  color:var(--journal-muted);
  font-size:.64rem;
}

.journal-recent{ padding:clamp(3rem, 7vw, 5.5rem) 0 0; }

.journal-recent-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--journal-ink);
}

.journal-recent-head a{
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.74rem;
  text-decoration:underline;
  text-underline-offset:3px;
}

.journal-list-item{
  display:grid;
  grid-template-columns:minmax(11rem, .9fr) minmax(0, 2.1fr) minmax(8rem, .65fr);
  column-gap:clamp(1.5rem, 4vw, 4rem);
  align-items:start;
  padding:1.6rem 0 1.8rem;
  border-bottom:1px solid var(--journal-rule);
}

.journal-list-item .concept{ margin:0; }
.journal-list-item .concept .ar{ font-size:1.18rem; }
.journal-list-item .concept .tl{ font-size:.84rem; }
.journal-list-copy .story-tag{ margin-bottom:.45rem; }
.journal-list-copy h2{ margin:0; font-size:clamp(1.4rem, 2.25vw, 2rem); font-weight:400; letter-spacing:-.035em; line-height:1.05; text-wrap:balance; }
.journal-list-copy p{ max-width:38rem; margin:.65rem 0 0; color:var(--journal-muted); font-size:1rem; line-height:1.5; }
.journal-list-item .entry-meta{ justify-content:flex-end; text-align:right; }
.journal-empty{ margin:2rem 0; color:var(--journal-muted); font-style:italic; }

.journal-footer{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  width:min(100% - 2.5rem, 76rem);
  margin:clamp(5rem, 10vw, 9rem) auto 0;
  padding:2.25rem 0 3.25rem;
  border-top:2px solid var(--journal-ink);
  background:transparent;
}

.journal-footer p{ max-width:28rem; margin:.45rem 0 0; color:var(--journal-muted); font-size:.95rem; line-height:1.45; }
.journal-footer .journal-footer-title{ color:var(--journal-ink); font-family:var(--journal-ui); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.journal-footer nav{ display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-end; gap:.85rem 1.3rem; font-family:var(--journal-ui); font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.journal-footer nav a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
.journal-footer nav a:hover{ text-decoration-color:currentColor; }

/* Supporting static pages use the same publication shell, not article styles. */
.journal-page{
  width:min(100% - 2.5rem, 70rem);
  margin:0 auto;
  padding:clamp(3.5rem, 8vw, 7rem) 0 0;
}

.journal-page-head{
  max-width:47rem;
  padding:1.1rem 0 clamp(2.8rem, 6vw, 4.5rem);
  border-top:2px solid var(--journal-ink);
  border-bottom:1px solid var(--journal-rule);
}

.journal-page-head .journal-section-label{ margin-bottom:1.3rem; }
.journal-page-head h1{ margin:0; font-size:clamp(2.7rem, 5vw, 4.8rem); font-weight:400; letter-spacing:-.055em; line-height:.98; }
.journal-page-head > p:last-child{ max-width:34rem; margin:1.15rem 0 0; color:var(--journal-muted); font-size:1.12rem; line-height:1.5; }

.journal-archive{ margin-top:clamp(3rem, 7vw, 5rem); }
.journal-static .journal-list-item .concept{ margin:0; }
.journal-static .journal-list-item .concept .ar{ color:var(--accent); font-family:var(--arabic); font-size:1.18rem; }
.journal-static .journal-list-item .concept .tl{ color:var(--journal-muted); font-size:.84rem; font-style:italic; }
.journal-static .journal-list-item .concept .dot{ width:.42rem; height:.42rem; margin-right:.12rem; background:var(--accent); }
.journal-static .story-tag{ display:block; margin:0 0 .45rem; color:var(--journal-muted); font-family:var(--journal-ui); font-size:.72rem; font-weight:500; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; }

.journal-prose{ max-width:42rem; margin:clamp(3rem, 7vw, 5rem) 0 0; }
.journal-prose h2{ margin:2.5rem 0 .7rem; font-size:1.45rem; font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.journal-prose h2:first-child{ margin-top:0; }
.journal-prose p{ margin:.65rem 0 0; color:var(--journal-muted); font-size:1.08rem; line-height:1.62; }

/* =====================================================================
   ARTICLE — the same publication shell, set for uninterrupted reading.
   The article source determines the prose and section order; these rules
   only establish its journal typography and factual-source treatment.
   ===================================================================== */

.journal-article-main{
  width:min(100% - 2.5rem, 76rem);
  margin:0 auto;
}

.journal-article .article{
  max-width:42rem;
  margin:0 auto;
  padding:clamp(3.5rem, 8vw, 7rem) 0 0;
}

.journal-article .article-head{
  max-width:42rem;
  margin:0 auto;
  padding:1.1rem 0 clamp(2.6rem, 6vw, 4.25rem);
  border-top:2px solid var(--journal-ink);
  border-bottom:1px solid var(--journal-rule);
  text-align:left;
}

.journal-article .article-head .journal-section-label{ margin-bottom:1.45rem; }

.journal-article .concept{
  display:inline-flex;
  align-items:baseline;
  gap:.42rem;
  margin:0 0 .9rem;
  white-space:normal;
}

.journal-article .concept .dot{
  width:.42rem;
  height:.42rem;
  margin-right:.12rem;
  background:var(--accent);
}

.journal-article .concept .ar{ color:var(--accent); font-size:1.45rem; line-height:1; }
.journal-article .concept .tl{ color:var(--journal-muted); font-size:.98rem; line-height:1.35; }

.journal-article-event{
  margin:.1rem 0 .78rem;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
}

.journal-article-event a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
.journal-article-event a:hover{ color:var(--journal-ink); text-decoration-color:currentColor; }

.journal-article .article-head h1{
  max-width:19ch;
  margin:0;
  font-size:clamp(2.8rem, 5.6vw, 5.2rem);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.96;
  text-wrap:balance;
}

.journal-article .article-head .subtitle{
  max-width:42rem;
  margin:1.35rem auto;
  color:var(--journal-muted);
  font-size:clamp(1.08rem, 1.8vw, 1.28rem);
  line-height:1.52;
}

.journal-article .article-head .entry-meta{
  justify-content:flex-start;
  gap:.42rem;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.72rem;
  font-style:normal;
  letter-spacing:.025em;
  line-height:1.45;
}

.journal-article .article-body,
.journal-article .the-story,
.journal-article .biblio,
.journal-article .grounding,
.journal-article .back-link{
  max-width:42rem;
  margin-left:auto;
  margin-right:auto;
}

.journal-article .article-body{
  margin-top:clamp(2.75rem, 6vw, 4.5rem);
  color:var(--journal-ink);
  font-size:clamp(1.08rem, 1.5vw, 1.18rem);
  line-height:1.68;
}

.journal-article .article-body > p{ margin:0 0 1.42rem; }
.journal-article .article-body > p:first-of-type{ font-size:1.22em; line-height:1.52; }
.journal-article .article-body > p:first-of-type::first-letter{
  float:none;
  padding:0;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}

.journal-article .article-body strong{ color:var(--journal-ink); font-weight:600; }
.journal-article .article-body a{ color:inherit; border-bottom:1px solid var(--accent); }
.journal-article .article-body a:hover{ color:var(--accent); }

.journal-article .article-body .qword{
  margin:1rem 0 1.8rem;
  color:var(--accent);
  font-size:2.25rem;
  text-align:left;
}

.journal-article .article-subhead{
  margin:clamp(3.25rem, 7vw, 5rem) 0 1.2rem;
  padding-top:1.15rem;
  border-top:1px solid var(--journal-rule);
  color:var(--journal-ink);
  font-size:clamp(1.42rem, 2.3vw, 1.72rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.12;
  text-align:left;
}

.journal-article .article-subhead::before{ display:none; }

.journal-article .ayah{
  margin:2.4rem 0;
  padding:1.45rem 0 1.35rem;
  border-top:1px solid var(--journal-rule);
  border-bottom:1px solid var(--journal-rule);
  border-left:0;
}

.journal-article .ayah .translation{
  margin:0 0 1rem;
  color:var(--journal-ink);
  font-size:1.2rem;
  font-weight:500;
  line-height:1.52;
}

.journal-article .ayah .ar{
  margin:0 0 .7rem;
  color:var(--journal-ink);
  font-size:1.9rem;
  line-height:1.9;
}

.journal-article .ayah .translit{ margin:0 0 .7rem; color:var(--journal-muted); font-size:.96rem; }
.journal-article .ayah .src{ color:var(--journal-muted); font-family:var(--journal-ui); font-size:.7rem; letter-spacing:.04em; }
.journal-article .ayah .src a{ color:var(--journal-muted); border-bottom:1px solid var(--accent); }
.journal-article .ayah .src a:hover{ color:var(--journal-ink); }

.journal-article .article-body hr{ max-width:none; margin:3.25rem 0; border-top-color:var(--journal-rule); }

/* "What actually happened" now opens the article — a factual lede the reader
   meets before the reflection. No heavy frame; a short accent rule closes it. */
.journal-article .the-story{
  margin:clamp(2rem, 5vw, 3.25rem) auto 0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}

.journal-article .the-story .eyebrow{
  margin:0 0 .8rem;
  color:var(--journal-muted);
  font-family:var(--journal-ui);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.journal-article .the-story h2{ margin:0 0 .9rem; color:var(--journal-ink); font-size:1.55rem; font-weight:500; letter-spacing:-.03em; line-height:1.15; }
.journal-article .the-story p{ color:var(--journal-muted); font-size:1.04rem; line-height:1.62; }
.journal-article .the-story p:last-of-type{ margin-bottom:0; }
.journal-article .the-story .sources-line{ color:var(--journal-muted); font-family:var(--journal-ui); font-size:.72rem; }

/* Short, left-justified accent rule dividing the facts from the reflection. */
.journal-article .the-story .story-rule{
  width:3.25rem;
  margin:1.9rem 0 0;
  border:0;
  border-top:2px solid var(--accent);
}

.journal-article .biblio{ margin-top:3.5rem; padding-top:1.35rem; border-top:1px solid var(--journal-ink); }
.journal-article .biblio h2{ color:var(--journal-muted); font-family:var(--journal-ui); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.journal-article .biblio p{ color:var(--journal-muted); font-size:.94rem; line-height:1.58; }
.journal-article .biblio a{ color:inherit; border-bottom:1px solid var(--journal-rule); }
.journal-article .biblio a:hover{ color:var(--journal-ink); border-bottom-color:var(--accent); }

.journal-article .grounding{ margin-top:2rem; color:var(--journal-muted); font-size:.88rem; }
.journal-article .back-link{ display:flex; width:fit-content; margin-top:2.8rem; color:var(--journal-muted); font-family:var(--journal-ui); font-size:.74rem; font-style:normal; letter-spacing:.04em; }
.journal-article .back-link:hover{ color:var(--journal-ink); text-decoration:underline; text-underline-offset:4px; }

@media (max-width: 760px){
  .journal-masthead,
  .journal-front,
  .journal-page,
  .journal-footer{ width:min(100% - 2rem, 70rem); }
  .journal-utility{ min-height:2.5rem; font-size:.61rem; }
  .journal-utility a{ display:none; }
  .journal-nameplate{ padding:3.25rem .25rem 2.7rem; }
  .journal-nameplate a{ font-size:clamp(2.1rem, 10.5vw, 3.25rem); }
  .journal-nav{ justify-content:flex-start; gap:.8rem 1.25rem; overflow-x:auto; white-space:nowrap; }
  .journal-lead h1{ font-size:clamp(2.35rem, 11.5vw, 3.4rem); }
  .journal-list-item{ grid-template-columns:1fr; gap:.7rem; padding:1.35rem 0 1.5rem; }
  .journal-list-item .entry-meta{ justify-content:flex-start; text-align:left; }
  .journal-footer{ display:block; }
  .journal-footer nav{ justify-content:flex-start; margin-top:1.5rem; }
  .journal-article .article{ padding-top:3.5rem; }
  .journal-article .article-head h1{ font-size:clamp(2.45rem, 11vw, 3.45rem); }
  .journal-article .article-body{ font-size:1.05rem; }
  .journal-article .article-body > p:first-of-type{ font-size:1.17em; }
  .journal-article .ayah{ margin:2rem 0; padding:1.2rem 0; }
  .journal-article .ayah .translation{ font-size:1.12rem; }
  .journal-article .ayah .ar{ font-size:1.65rem; line-height:1.8; }
}

/* ============================================================
   Inline Thematic Qur'an verse card — drawer opened from a verse
   citation. Dark palette + teal accent mirror thematicquran.com
   so the journal and the browser read as one family.
   ============================================================ */
.tq-verse-link{ cursor:pointer; }
.tq-card{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s ease;
  margin:.3rem 0 1.4rem;
}
.tq-card.open{ grid-template-rows:1fr; }
.tq-card > .tq-card-inner{ overflow:hidden; min-height:0; }
.tq-card-pad{
  background:#1E1426; color:rgba(243,228,206,.92);
  font-family:'Nunito',sans-serif;
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  padding:1.05rem 1.2rem; box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.tq-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom:.55rem;
}
.tq-pill{
  display:inline-flex; align-items:center;
  background:rgba(86,163,166,.15); color:#7fc5c8;
  border:1px solid rgba(86,163,166,.4);
  padding:.25rem .7rem; border-radius:9999px;
  font-weight:700; font-size:.74rem; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.tq-card-actions{ display:flex; align-items:center; gap:.7rem; }
.tq-play{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#56A3A6; color:#0f1419; border:none; border-radius:9999px;
  padding:.34rem .85rem; font:inherit; font-weight:700; font-size:.8rem; cursor:pointer;
}
.tq-play:hover{ background:#67b6b9; }
.tq-play-icon{
  width:0; height:0; display:inline-block;
  border-style:solid; border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent #0f1419;
}
.tq-play.is-playing .tq-play-icon{
  width:9px; height:10px; border:none;
  border-left:3px solid #0f1419; border-right:3px solid #0f1419;
}
.tq-open{ color:#7fc5c8; text-decoration:none; font-size:.8rem; font-weight:600; white-space:nowrap; }
.tq-open:hover{ text-decoration:underline; }
.tq-collapse{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:rgba(243,228,206,.8);
  border-radius:9999px; width:1.6rem; height:1.6rem; line-height:1; font-size:.82rem;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.tq-collapse:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* Grouped passage: whole Arabic block, then the whole English under it. */
.tq-passage{ }
.tq-ar{
  font-family:'Amiri Quran','Scheherazade New','Noto Naskh Arabic',serif;
  font-size:1.75rem; line-height:2.5; color:#fff;
  margin:.2rem 0 1rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.tq-ar .tq-aya{ border-radius:6px; transition:background .25s, box-shadow .25s; }
.tq-aya-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.5em; height:1.5em; margin:0 .25em; padding:0 .25em;
  border:1px solid rgba(86,163,166,.5); color:#7fc5c8; border-radius:9999px;
  font-family:'Nunito',sans-serif; font-size:.62em; font-weight:700;
  font-variant-numeric:tabular-nums; vertical-align:middle;
}
.tq-en{ margin:0; color:rgba(243,228,206,.92); font-size:1rem; line-height:1.75; }
.tq-en .tq-line{ border-radius:4px; transition:background .25s; }
.tq-en-num{
  color:#7fc5c8; font-weight:700; font-size:.62em; margin-right:.3em;
  font-variant-numeric:tabular-nums; vertical-align:super;
}
.tq-aya.tq-anchor, .tq-line.tq-anchor{ background:rgba(86,163,166,.10); box-shadow:0 0 0 2px rgba(86,163,166,.10); }
.tq-aya.tq-current{ background:rgba(86,163,166,.20); box-shadow:0 0 0 3px rgba(86,163,166,.18); }
.tq-card-foot{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.10); }
.tq-surah{ color:#7fc5c8; text-decoration:none; font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.tq-surah:hover{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .tq-card{ transition:none; } }