/* ============================================================
   MAKEEN RESEARCH — research.css
   A distinct visual register for the research arm.
   Loads AFTER shared.css and overrides selectively.

   How it differs from the main site:
   - Monospace metadata layer (IBM Plex Mono) for indices & citations
   - Dark hero band on entry, paper ground below
   - Hairline rule system + registration-mark motif (surveyor's benchmark)
   - Document/citation structure rather than image-led composition
   ============================================================ */

:root {
  --r-paper:  #eae8e3;   /* cooler paper than the main site's #f3efe8 */
  --r-dark:   #1a1a17;
  --r-rule:   rgba(21,20,15,.14);
  --r-rule-2: rgba(21,20,15,.07);
  --r-mono:   "IBM Plex Mono", ui-monospace, monospace;
}

body.research { background: var(--r-paper); }

/* ── Registration mark (benchmark motif) ──────────────────
   Small crosshair used to key sections, echoing the plus
   indicators on the landing carousel and the مكين benchmark. */
.reg-mark {
  position: relative;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.reg-mark::before { left: 5px; top: 0; width: 1px; height: 11px; }
.reg-mark::after  { top: 5px; left: 0; height: 1px; width: 11px; }

/* ── Dark hero band ──────────────────────────────────────── */
.r-hero {
  background: var(--r-dark);
  color: #f3efe8;
  padding-top: calc(var(--topbar-h) + clamp(56px, 11vh, 128px));
  padding-bottom: clamp(56px, 11vh, 128px);
}
.r-hero .topbar-spacer { height: 0; }
.r-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--r-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 28px;
}
.r-hero__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .98;
  margin-bottom: 28px;
}
.r-hero__lede {
  max-width: 620px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 300;
  line-height: 1.62;
  opacity: .8;
}
.r-hero__rule {
  height: 1px;
  background: rgba(243,239,232,.16);
  margin-block: clamp(36px, 6vh, 64px);
}
.r-hero__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
}
.r-claim__label {
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .45;
  margin-bottom: 12px;
}
.r-claim__text {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.r-claim__note {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  opacity: .55;
}

/* ── Section scaffolding ─────────────────────────────────── */
.r-section { padding-block: clamp(56px, 10vh, 112px); border-top: 1px solid var(--r-rule); }
.r-section:first-of-type { border-top: none; }
.r-section__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(32px, 5vh, 56px);
  flex-wrap: wrap;
}
.r-section__index {
  font-family: var(--r-mono);
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .38;
  flex-shrink: 0;
}
.r-section__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.05;
}
.r-section__note {
  flex-basis: 100%;
  max-width: 620px;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-2);
  margin-top: 6px;
}

/* ── Methods grid ────────────────────────────────────────── */
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--r-rule);
  border: 1px solid var(--r-rule);
}
.method {
  background: var(--r-paper);
  padding: clamp(24px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.method__top {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .4;
}
.method__name {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.15;
}
.method__derisk {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
}
/* The question each method answers — set apart as the payoff */
.method__q {
  font-family: var(--r-mono);
  font-size: 12px;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid var(--r-rule-2);
  color: var(--accent);
  margin-top: auto;
}
.method__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--r-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  opacity: .45;
}

/* ── Study entries (institutional field work) ────────────── */
.study {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--r-rule-2);
}
.study:first-child { border-top: none; padding-top: 0; }
.study__meta { display: flex; flex-direction: column; gap: 8px; }
.study__client {
  font-family: var(--r-mono);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}
.study__year {
  font-family: var(--r-mono);
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .4;
}
.study__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.study__desc {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 640px;
}
.study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 14px;
}
.study__tag {
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--r-rule);
  opacity: .55;
}

/* ── Citations ───────────────────────────────────────────── */
.cite-group + .cite-group { margin-top: clamp(32px, 5vh, 52px); }
.cite-group__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .42;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--r-rule);
}
/* Hanging indent, as in a reference list */
.cite {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  padding-left: 34px;
  text-indent: -34px;
  max-width: 800px;
}
.cite + .cite { margin-top: 18px; }
.cite strong { font-weight: 500; color: var(--ink); }
.cite em     { font-style: italic; }
.cite__venue { display: block; text-indent: 0; padding-left: 0; font-family: var(--r-mono); font-size: 11.5px; letter-spacing: .02em; opacity: .55; margin-top: 5px; }
.cite__role  { display: block; text-indent: 0; padding-left: 0; font-family: var(--r-mono); font-size: 11px; opacity: .45; margin-top: 4px; }

/* ── Studio research (current work — fills in over time) ── */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.studio-note {
  grid-column: 1 / -1;
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--r-rule);
  font-family: var(--r-mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: .02em;
  opacity: .5;
  max-width: 720px;
}
.paper-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.paper-card__meta {
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .42;
}
.paper-card__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.2;
}
.paper-card__desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ── Institutions index ──────────────────────────────────── */
.inst-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--r-rule);
  border: 1px solid var(--r-rule);
}
.inst {
  background: var(--r-paper);
  padding: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.inst__name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.inst__kind {
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .4;
}

/* ── Closing call ────────────────────────────────────────── */
.r-cta {
  background: var(--r-dark);
  color: #f3efe8;
  padding-block: clamp(56px, 10vh, 104px);
  margin-top: clamp(48px, 8vh, 96px);
}
.r-cta__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 760px;
}
.r-cta__note {
  max-width: 560px;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 300;
  line-height: 1.68;
  opacity: .62;
  margin-bottom: 34px;
}
.r-cta .btn-submit { border-color: rgba(243,239,232,.5); color: #f3efe8; }
.r-cta .btn-submit:hover { background: #f3efe8; color: var(--r-dark); }

/* On the research page the topbar sits over the dark hero */
body.research .topbar {
  background: var(--r-dark);
  border-bottom-color: rgba(243,239,232,.12);
}
body.research .topbar .icon-btn { color: #f3efe8; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .method-grid,
  .studio-grid   { grid-template-columns: 1fr; }
  .r-hero__pair  { grid-template-columns: 1fr; gap: 32px; }
  .study         { grid-template-columns: 1fr; gap: 14px; }
  .study__meta   { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .cite          { padding-left: 22px; text-indent: -22px; }
  .inst-list     { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .r-hero        { padding-top: calc(var(--topbar-h) + 40px); padding-bottom: 40px; }
}