/* ============================================================
   MOOR, I AM (mooriam.com): visual identity. Site-specific.

   WHO THIS IS FOR
   Curious adults, many of them Black Americans reaching for African
   and Islamic heritage, students, and readers who've run into bold
   claims about "Moors" online and want to know what the record says.

   WHAT THE DESIGN HAS TO SAY
   A beautiful, serious library of Al-Andalus. Pride in a real
   history, told with care, sources on every card, and a calm voice
   when separating history from myth.

   SIGNATURES
   Horseshoe arches: the hero and the timeline cards are framed as
   arches. An eight-point star divider built from two squares. A
   zellige-inspired tile band under the header, made in CSS.

   COLOR
   Parchment ground, ink text, lapis blue for headings and header,
   terracotta links, gold only as decoration on lapis, and a garden
   green for places. Every text pair is checked by the build script.

   TYPE
   Reem Kufi for headings, inspired by Kufic lettering, used for its
   Latin letters. Alegreya for reading: a literary serif made for
   long text.
   ============================================================ */

:root {
  --parchment:  #f6efe0;
  --card:       #fffaf0;
  --ink:        #1f1b16;
  --ink-soft:   #544b40;
  --lapis:      #1d3a6e;
  --lapis-deep: #142a52;
  --terracotta: #9c3f1d;
  --gold:       #c8962c;
  --garden:     #265c4b;
  --garden-wash:#e3eee8;
  --sand:       #efe3cb;
  --line:       #e3d6bd;

  --accent:     var(--lapis);
  --accent-ink: #ffffff;
  --focus:      #9c3f1d;
  --measure:    66ch;

  --display: 'Reem Kufi', Georgia, serif;
  --body:    'Alegreya', Georgia, 'Times New Roman', serif;
}

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.125rem; line-height: 1.7; color: var(--ink); background: var(--parchment); }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; color: var(--lapis-deep); font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.8rem); }
h2 { font-size: clamp(1.5rem, 3.1vw, 2.2rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.3rem; font-weight: 500; }
p + p { margin-top: 0.85rem; }
a { color: var(--terracotta); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.kicker { font-family: var(--display); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.5rem; }
.lede { font-size: 1.25rem; color: var(--ink-soft); max-width: 54ch; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.85rem; }
.label { font-family: var(--display); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 0.3rem; }

/* Header and tile band */
.site-header { background: var(--lapis); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: #ffffff; text-decoration: none; }
.brand .mark { position: relative; width: 20px; height: 20px; }
.brand .mark::before, .brand .mark::after { content: ""; position: absolute; inset: 2px; background: var(--gold); }
.brand .mark::after { transform: rotate(45deg); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 500; color: #ffffff; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: #ffffff; border-bottom-color: #ffffff; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.site-header :focus-visible { outline-color: var(--gold); }
.tiles { height: 14px; background-color: var(--lapis-deep);
  background-image: linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%), linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; opacity: 0.9; }

main { padding-block: 2.75rem 4rem; }
.section { margin-top: 3.5rem; }

/* Arch hero */
.arch { background: var(--card); border: 2px solid var(--lapis); border-radius: 50% 50% 16px 16px / 7rem 7rem 16px 16px; padding: clamp(3rem, 8vw, 5rem) clamp(1.2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.arch h1 { margin: 0 auto 0.9rem; max-width: 16ch; }
.arch p { margin-inline: auto; }
.arch .actions { justify-content: center; }
.hero { padding-bottom: 1.25rem; }
.hero h1 { max-width: 18ch; margin-bottom: 0.9rem; }

/* Star divider */
.star { position: relative; height: 22px; margin: 2.5rem auto 0; width: 100%; }
.star::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.star span { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; transform: translateX(-50%); }
.star span::before, .star span::after { content: ""; position: absolute; inset: 3px; background: var(--terracotta); }
.star span::after { transform: rotate(45deg); }

/* Timeline of arches */
.timeline { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.timeline li { max-width: none; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; position: relative; padding: 2.4rem 1.1rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 2.2rem; border: 2px solid var(--lapis); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.when { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--lapis); margin: 0 0 0.2rem; }

/* Fact cards */
.facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.fact { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--lapis); border-radius: 0 12px 12px 0; padding: 1rem 1.1rem 0.9rem; max-width: none; display: flex; flex-direction: column; }
.source { margin-top: auto; padding-top: 0.6rem; font-size: 0.875rem; color: var(--ink-soft); }
.note, .source { overflow-wrap: anywhere; }
.note { font-size: 0.95rem; background: var(--sand); border-radius: 8px; padding: 0.5rem 0.7rem; margin-top: 0.6rem; }

/* Books, places, organizations */
.books { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); }
.books li { max-width: none; background: var(--card); border: 1px solid var(--line); border-radius: 4px 14px 14px 4px; border-left: 10px solid var(--terracotta); padding: 1rem 1.1rem 0.8rem; display: flex; flex-direction: column; }
.byline { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.4rem; }
.places { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.places li { max-width: none; background: var(--garden-wash); border-radius: 14px; padding: 1rem 1.1rem 0.6rem; display: flex; flex-direction: column; }
.places h3 { color: var(--garden); }
.where { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.3rem; }
.go { font-family: var(--display); font-weight: 500; margin-top: auto; padding-top: 0.3rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* Doors */
.doors { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.doors li { max-width: none; }
.doors a { display: block; height: 100%; min-height: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 999px 999px 14px 14px / 5rem 5rem 14px 14px; padding: 2.2rem 1.2rem 1.1rem; color: var(--ink); text-decoration: none; text-align: center; }
.doors a:hover { border-color: var(--lapis); box-shadow: 0 3px 0 var(--lapis); }
.door-title { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--lapis-deep); }
.door-sub { display: block; color: var(--ink-soft); font-size: 1rem; margin-top: 0.2rem; }

/* Panels, buttons, prose */
.panel { background: var(--card); border: 2px solid var(--terracotta); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.9rem); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; background: var(--lapis); color: #ffffff; border: 2px solid var(--lapis); border-radius: 999px; font-family: var(--display); font-weight: 500; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--lapis-deep); border-color: var(--lapis-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--lapis-deep); }
.btn--ghost:hover { background: var(--card); color: var(--lapis-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-family: var(--display); font-weight: 500; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; font: inherit; }
.signup button { justify-self: start; }

/* Footer */
.site-footer { background: var(--lapis-deep); color: #ffffff; margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.site-footer p { color: #e8e2d4; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; font-family: var(--display); }
.site-footer a:hover { color: var(--gold); }
.site-footer .fine { color: #d9d2c2; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--gold); }

@media (forced-colors: active) {
  .arch, .timeline li, .fact, .books li, .places li, .doors a, .panel, .btn { border: 1px solid; }
}