/* SheikhBabikir.com — design system, v2
   Palette drawn from the Barzanji cover: green-black ground, bone ink, brass.
   Layout: hashiya (marginalia) grid — narrow margin column beside the text block.
   Type: Cormorant Garamond (display) · EB Garamond (body) · Amiri (Arabic). */

@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+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/amiri-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@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+2000-206F; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/eb-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }

:root {
  --bg: #141a15;
  --ink: #eae4d3;
  --muted: #a49c8a;
  --brass: #c3a566;
  --brass-dim: #9d854f;
  --hairline: rgba(234, 228, 211, 0.16);
  --hairline-soft: rgba(234, 228, 211, 0.09);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- headband: the Barzanji border, bound across the top ---------- */

.headband {
  height: 13px;
  background: url('img/headband.png') repeat-x center / auto 13px;
  border-bottom: 1px solid rgba(0,0,0,0.5);
}

/* ---------- masthead: asymmetric ---------- */

header.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.2rem 2rem 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
  flex-wrap: wrap;
}

.masthead .brand { display: flex; align-items: baseline; gap: 1rem; }
.masthead .arabic-mark {
  font-family: 'Amiri', serif;
  font-size: 1.35rem;
  color: var(--brass);
  margin: 0;
}
.masthead .wordmark {
  font-variant: small-caps;
  letter-spacing: 0.28em;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 500;
}
.masthead .wordmark a { color: var(--ink); text-decoration: none; }

nav.site-nav {
  font-size: 0.78rem;
  font-variant: small-caps;
  letter-spacing: 0.17em;
}
nav.site-nav a {
  display: inline-block;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  margin-left: 1.4rem;
  transition: color 0.2s ease;
}
nav.site-nav a:first-child { margin-left: 0; }
nav.site-nav a:hover { color: var(--ink); }
nav.site-nav a[aria-current="page"] { color: var(--brass); }

/* ---------- hashiya grid ---------- */

main { padding: 3.5rem 0 5rem; }

.spread {
  display: grid;
  grid-template-columns: 13rem minmax(0, 40rem);
  gap: 1rem 3.5rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.margin {
  grid-column: 1;
  text-align: right;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  padding-top: 0.55rem; /* optically align with h1/h2 baseline */
}
.margin .label {
  font-variant: small-caps;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  color: var(--brass);
  display: block;
}
.margin .arabic {
  font-family: 'Amiri', serif;
  font-size: 1.55rem;
  color: var(--brass);
  display: block;
  line-height: 1.9;
  direction: rtl;
}
.margin .meta { display: block; font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.76rem; margin-top: 0.4rem; }
.margin img.cover {
  width: 100%;
  max-width: 9rem;
  margin-top: 0.9rem;
  border: 1px solid var(--hairline);
  display: inline-block;
}
.margin img.roundel { width: 100%; max-width: 11rem; border: none; opacity: 0.95; }

.text { grid-column: 2; min-width: 0; }

.row { display: contents; } /* each margin+text pair */

/* spacing between rows */
.spread > .spacer {
  grid-column: 1 / -1;
  height: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.6rem 0;
}

/* ---------- type ---------- */

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0 0 0.9rem;
  letter-spacing: 0.01em;
}

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

p { margin: 1.05rem 0; }
.text > p:first-child, .text h1 + p { margin-top: 0.4rem; }
em { font-style: italic; }

.lede {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6;
}

a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--brass-dim); transition: color 0.2s ease; }
a:hover { color: var(--ink); }
a:focus-visible, nav.site-nav a:focus-visible, .doorway:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

.arabic { font-family: 'Amiri', serif; direction: rtl; line-height: 2.1; }

.verse { margin: 2.4rem 0; }
.verse .arabic { font-size: 1.7rem; margin: 0 0 0.9rem; text-align: center; }
.verse .translation { font-style: italic; color: var(--muted); font-size: 1.02rem; margin: 0; text-align: center; }
.verse .ref { font-style: normal; font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.82rem; color: var(--muted); }

.honorific { font-family: 'Amiri', serif; font-size: 0.95em; }

/* ---------- doorways ---------- */

.doorway {
  display: block;
  padding: 1.35rem 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
.doorway:last-child { border-bottom: 1px solid var(--hairline); }
.doorway .d-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brass);
  transition: color 0.2s ease;
}
.doorway:hover .d-title { color: var(--ink); }
.doorway .d-desc { display: block; color: var(--muted); font-size: 1rem; margin-top: 0.1rem; }

/* ---------- schedule ---------- */

table.schedule { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 1.05rem; }
table.schedule caption {
  text-align: left;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: var(--brass);
  padding-bottom: 0.5rem;
}
table.schedule td { padding: 0.55rem 0; border-top: 1px solid var(--hairline-soft); }
table.schedule td:last-child { text-align: right; }
table.schedule td:first-child { color: var(--muted); }

/* ---------- notes ---------- */

.note { font-style: italic; color: var(--muted); font-size: 1rem; }

/* ---------- footer ---------- */

footer.colophon {
  border-top: 1px solid var(--hairline-soft);
  margin-top: 4rem;
  padding: 2.2rem 2rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
footer.colophon p { margin: 0.3rem 0; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  body { font-size: 1.06rem; }
  h1 { font-size: 2rem; }
  header.masthead { justify-content: center; text-align: center; padding-bottom: 1rem; }
  nav.site-nav { width: 100%; text-align: center; margin-top: 0.7rem; }
  nav.site-nav a { margin: 0 0.55rem; }
  .spread { grid-template-columns: 1fr; gap: 0.4rem; padding: 0 1.4rem; }
  .margin { grid-column: 1; text-align: left; padding-top: 0; margin-top: 0.6rem; }
  .margin .arabic { font-size: 1.35rem; }
  .margin img.cover, .margin img.roundel { max-width: 7rem; display: block; margin: 0.4rem auto 0.6rem; }
  .text { grid-column: 1; }
  .spread > .spacer { margin: 2rem 0; }
}

/* ---------- photo placeholders (removed as real photographs arrive) ---------- */

.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hairline);
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  margin-top: 1rem;
}
.photo-slot.portrait { aspect-ratio: 3/4; max-width: 9rem; margin-left: auto; }
.photo-slot.landscape { aspect-ratio: 8/5; max-width: 26rem; margin: 0.5rem 0 1.2rem; }
@media (max-width: 760px) { .photo-slot.portrait { margin-left: 0; } }

/* ---------- photographs ---------- */
.photo-wide { display: block; width: 100%; max-width: 26rem; border: 1px solid var(--hairline); margin: 0.5rem 0 1.2rem; }

/* ---------- larger photographs ---------- */
.margin img.cover { max-width: 100%; }
.photo-wide { max-width: 100%; }
.spread-home { grid-template-columns: 16rem minmax(0, 36rem); }
.spread-home .margin img.cover { max-width: 100%; }
@media (max-width: 760px) {
  .spread-home { grid-template-columns: 1fr; }
  .spread-home .margin img.cover, .margin img.cover { max-width: 14rem; }
}

h2 a { color: inherit; text-decoration-color: var(--hairline); }
h2 a:hover { color: var(--brass); }

/* seal closing the biography */
.seal-close { text-align: center; margin: 3.5rem 0 0.5rem; }
.seal-close img { width: 9.5rem; opacity: 0.95; }

@media (max-width: 760px) {
  .margin img.cover, .margin img.roundel { display: block; margin-left: auto; margin-right: auto; }
  .photo-wide { margin-left: auto; margin-right: auto; }
}

@media (max-width: 760px) {
  nav.site-nav { line-height: 2.1; }
  nav.site-nav a { margin: 0 0.5rem; }
}