/* ════════════════════════════════════════════════════════════════════════
   OZRIC — Journal layer
   Long-form essay surface. Inherits palette + fonts + utility selectors
   (.eyebrow / .display / .lede / .brand / .site-footer) from style.css.
   This file only adds layout + typographic refinement for body prose.
   ════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   Page-level — calmer ground than the homepage. The orb does not
   render on these pages; the void reads as a quiet editorial canvas.
   ──────────────────────────────────────────────────────────────────── */
body.journal {
  background: var(--void);
  color: var(--bone);
  min-height: 100vh;
  /* Standard scrolling — no scroll-locked orb stage on journal pages. */
  overflow-x: hidden;
}

/* ────────────────────────────────────────────────────────────────────
   Header — minimal, top-left brand mark + two right-side links.
   Replaces the homepage .site-header which uses fixed positioning and
   becomes glassy on scroll. Journal pages get a static header so the
   essay reads as a document, not a scroll-driven app.
   ──────────────────────────────────────────────────────────────────── */
body.journal .journal-header {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--gutter) 22px;
  border-bottom: 1px solid rgba(31, 31, 31, 0.7);
}
body.journal .journal-header .brand {
  text-decoration: none;
}
body.journal .journal-header nav {
  display: flex;
  gap: 26px;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
body.journal .journal-header nav a {
  color: var(--ash);
  transition: color 0.25s var(--ease-luxe);
}
body.journal .journal-header nav a:hover {
  color: var(--gold);
}

/* ────────────────────────────────────────────────────────────────────
   Article container — wide editorial column, top padding 80px.
   Body padding 6vw left/right inherits via var(--gutter).
   ──────────────────────────────────────────────────────────────────── */
.journal-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}
.journal-article .eyebrow {
  margin-bottom: 28px;
}
.journal-article h1.display {
  /* Slightly tighter than homepage display to suit long-form. */
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.journal-article .lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--bone);
  max-width: 640px;
  margin-bottom: 56px;
  letter-spacing: 0.005em;
  border-left: 1px solid var(--gold-soft);
  padding-left: 22px;
}

/* ────────────────────────────────────────────────────────────────────
   Body prose — Inter Tight at body size, generous leading, long-form
   rhythm. Headings use Newsreader to echo the homepage display family.
   ──────────────────────────────────────────────────────────────────── */
.journal-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--bone-soft);
  font-feature-settings: 'liga' 1, 'kern' 1, 'lnum' 1, 'tnum' 1;
}
.journal-body > * + * {
  margin-top: 1.2em;
}
.journal-body p { margin: 0; }

.journal-body h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--bone);
  margin-top: 2.4em;
  margin-bottom: 0.6em;
}
.journal-body h2 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.journal-body h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--violet);
  margin-top: 2em;
  margin-bottom: 0.4em;
}

.journal-body a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  transition: border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
.journal-body a:hover {
  border-bottom-color: var(--gold);
}
.journal-body strong {
  color: var(--bone);
  font-weight: 500;
}
.journal-body em {
  font-style: italic;
  color: var(--bone);
}

.journal-body blockquote {
  margin: 1.6em 0;
  padding: 6px 0 6px 28px;
  border-left: 1px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--bone);
}

.journal-body ul,
.journal-body ol {
  padding-left: 22px;
  margin: 0.8em 0;
}
.journal-body ul li,
.journal-body ol li {
  margin-bottom: 0.5em;
}
.journal-body ul li::marker { color: var(--gold-soft); }
.journal-body ol li::marker { color: var(--gold-soft); font-variant-numeric: tabular-nums; }

.journal-body code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--violet);
  background: rgba(60, 19, 121, 0.18);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0;
}

.journal-body hr {
  border: none;
  height: 1px;
  background: rgba(31, 31, 31, 1);
  margin: 2.4em 0;
}

/* ────────────────────────────────────────────────────────────────────
   Index page — listing of essays. Uses the same column width.
   ──────────────────────────────────────────────────────────────────── */
.journal-index {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}
.journal-index .index-header {
  margin-bottom: 64px;
}
.journal-index h1.display {
  font-size: clamp(36px, 4.6vw, 64px);
  margin-bottom: 22px;
}
.journal-index .index-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--bone-soft);
  max-width: 580px;
}
.journal-list {
  list-style: none;
  padding: 0;
}
.journal-list li {
  padding: 36px 0;
  border-bottom: 1px solid rgba(31, 31, 31, 0.9);
}
.journal-list li:last-child { border-bottom: none; }
.journal-list a.entry-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: none;
}
.journal-list .entry-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 500;
  margin-bottom: 14px;
}
.journal-list .entry-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--bone);
  margin-bottom: 12px;
  transition: color 0.3s var(--ease-luxe);
}
.journal-list .entry-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.journal-list a.entry-link:hover .entry-title {
  color: var(--gold);
}
.journal-list .entry-lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-soft);
  font-weight: 300;
  margin-bottom: 12px;
  max-width: 620px;
}
.journal-list .entry-meta {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ash);
}

/* ────────────────────────────────────────────────────────────────────
   Footer override — homepage uses fixed-bottom curtain rising during
   terminal-lock. Journal pages put the footer in normal document flow.
   ──────────────────────────────────────────────────────────────────── */
body.journal .site-footer {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: rgba(5, 5, 5, 1);
  border-top: 1px solid var(--line);
  padding: 64px var(--gutter) 56px;
}

/* ────────────────────────────────────────────────────────────────────
   Responsive — hold the column readable at narrow widths.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .journal-article,
  .journal-index {
    padding-top: 56px;
    padding-bottom: 80px;
  }
  .journal-body {
    font-size: 16px;
    line-height: 1.72;
  }
  body.journal .journal-header nav {
    gap: 18px;
  }
}
/* Phones — the brand + three nav links clashed on one line at 390px
   ("Case Studies" wrapped onto two rows against the brand mark). Tighten,
   keep links on one line, and drop "Journal" (it lives in the footer too)
   so Case Studies + Request invitation sit clean and balanced. Mirrors the
   homepage header treatment. */
@media (max-width: 560px) {
  body.journal .journal-header {
    padding-top: 22px;
    padding-bottom: 18px;
  }
  body.journal .journal-header nav {
    gap: 16px;
    font-size: 9px;
    letter-spacing: 2.5px;
  }
  body.journal .journal-header nav a {
    white-space: nowrap;
  }
  body.journal .journal-header nav a[href="/journal/"] {
    display: none;
  }
}

/* Reduced motion — no transitions inside long-form. */
@media (prefers-reduced-motion: reduce) {
  body.journal *,
  body.journal *::before,
  body.journal *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   STATIC PAGES — shared shell for /faq/, /about/, /proof/, /people/*,
   /privacy/, /terms/. Adds breadcrumbs, inline links, prose lists, the
   page-footer continue-nav, and the H2 chapter break inside .journal-body.
   ════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 26px;
}
.breadcrumb a {
  color: var(--ash);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
.breadcrumb a:hover { color: var(--gold); border-color: var(--gold); }
.breadcrumb span { color: var(--gold); margin: 0 8px; }
.breadcrumb [aria-current="page"] { color: var(--bone); }

.journal-body h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 56px 0 14px;
  line-height: 1.15;
}
.journal-body h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--bone);
  margin: 28px 0 8px;
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.journal-body h2.closing-h2 {
  margin-top: 64px;
  font-style: italic;
  color: var(--bone-soft);
  text-transform: none;
  font-size: clamp(20px, 2vw, 26px);
}

.journal-body .inline-link {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.36);
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
.journal-body .inline-link:hover {
  color: var(--bone);
  border-bottom-color: var(--gold);
}

.journal-body .prose-list {
  list-style: none;
  padding-left: 0;
  margin: 14px 0 18px;
}
.journal-body .prose-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--bone-soft);
  line-height: 1.65;
}
.journal-body .prose-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 400;
}
.journal-body .prose-list li strong {
  color: var(--bone);
  font-weight: 500;
}

/* Continue nav at bottom of static pages — three pill links */
.journal-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 64px 0 28px;
  padding: 32px 0 0;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.journal-footer-nav .continue {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bone-soft);
  font-weight: 400;
  border: 1px solid rgba(201, 168, 76, 0.32);
  padding: 12px 22px;
  transition: all 0.3s var(--ease-luxe);
}
.journal-footer-nav .continue span {
  display: inline-block;
  margin-left: 6px;
  color: var(--gold);
  transition: transform 0.3s var(--ease-luxe);
}
.journal-footer-nav .continue:hover {
  color: var(--bone);
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.06);
}
.journal-footer-nav .continue:hover span { transform: translateX(4px); }

@media (max-width: 700px) {
  .journal-footer-nav { gap: 10px 14px; }
  .journal-footer-nav .continue { font-size: 10px; padding: 10px 16px; letter-spacing: 2.5px; }
  .breadcrumb { font-size: 10px; letter-spacing: 1.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   PEOPLE — index grid + individual founder hero
   ════════════════════════════════════════════════════════════════════ */
.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 36px 0 24px;
}
.person-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  transition: all 0.4s var(--ease-luxe);
}
.person-card:hover {
  background: var(--surface-2);
  border-color: rgba(201, 168, 76, 0.32);
  transform: translateY(-2px);
}
.person-mark {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 0 28px rgba(201, 168, 76, 0.22);
}
.person-mark--large { font-size: 96px; margin-bottom: 0; }
.person-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  color: var(--bone);
  letter-spacing: 0.005em;
}
.person-role {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}
.person-cap {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ash);
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.person-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 8px 0 18px;
}
.person-hero-text { display: flex; flex-direction: column; gap: 6px; }
.person-role-line {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}
@media (max-width: 700px) {
  .people-grid { grid-template-columns: 1fr; gap: 16px; }
  .person-card { padding: 24px 22px; }
  .person-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .person-mark--large { font-size: 76px; }
}

/* Legal-page summary callout — sits above the fold on /privacy/ + /terms/.
   Non-binding plain-English overview before the formal sections that
   follow. Distinct from the editorial register so a reader can tell
   "this is the gist" vs "this is the contract." */
.legal-summary {
  background: var(--surface-2);
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  margin: 24px 0 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-soft);
}
.legal-summary strong { color: var(--bone); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   PROOF PAGE — multi-case extensions
   ────────────────────────────────────────────────────────────────────
   Case eyebrows, the divider between cases, full-bleed case figure
   (party-piece visual + caption), and testimonial blockquote with
   draft-state styling (unmistakable while the real quote is pending).
   ════════════════════════════════════════════════════════════════════ */
.case-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 8px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.20);
  width: fit-content;
}
/* Case brand mark — small client-logo + wordmark sitting above the
   case-eyebrow. Treated as a maker's mark, not a header. Sized to
   sit alongside the eyebrow letterform without competing. */
.case-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 6px;
  opacity: 0.95;
}
.case-brand img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.case-brand-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--bone);
}
/* Make the case-figure picture clickable when wrapped in an anchor —
   no underline, no extra colour, full block, with a subtle lift on
   hover that signals "this opens the live site". */
.case-figure a.case-figure-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: transform 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe);
}
.case-figure a.case-figure-link:hover,
.case-figure a.case-figure-link:focus-visible {
  transform: translate3d(0, -2px, 0);
}
.case-figure a.case-figure-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.case-divider {
  margin: 64px 0 48px;
  border: 0;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  height: 0;
}

/* Case figure — full-bleed visual + caption beneath. The picture inside
   gets a hairline gold edge + soft shadow so it reads as a "captured
   artefact" rather than a flat embed. */
.case-figure {
  margin: 24px 0 28px;
  padding: 0;
}
.case-figure picture { display: block; }
.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(201, 168, 76, 0.06);
  transform: translate3d(0, 0, 0);
}
/* Site-in-motion case video — matches the .case-figure img register
   (same frame, radius, glow) so a moving case reads as a peer of the
   static screenshots. autoplay+muted+loop+playsinline keeps it inert
   chrome on iOS (no fullscreen takeover). */
.case-figure video.case-video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(201, 168, 76, 0.06);
  transform: translate3d(0, 0, 0);
  background: var(--void);
}
/* Portrait product spin (e.g. the Barakah Pill 3D model) — don't blow a
   tall video to full column width; cap it and centre it like a product shot. */
.case-figure video.case-video--portrait {
  width: auto;
  max-width: min(340px, 74%);
  margin-left: auto;
  margin-right: auto;
}
.case-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ash);
  font-style: italic;
  max-width: 680px;
}
.case-figure figcaption .inline-link { font-style: normal; }

/* Testimonial blockquote — gold left rule, large italic display
   serif for the quote, sans cite below. Spacious. */
.testimonial {
  margin: 36px 0 28px;
  padding: 24px 28px 24px 32px;
  background: var(--surface-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--bone);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.testimonial-quote::before { content: '\201C'; color: var(--gold); margin-right: 2px; }
.testimonial-quote::after  { content: '\201D'; color: var(--gold); margin-left: 2px; }
.testimonial-cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}

/* Draft testimonial — dashed gold border + amber hue + corner badge so
   the placeholder is visually unmistakable until the real quote lands.
   The cite line still renders sans-italic so the markup is correct
   even while the quote is in draft. */
.testimonial-draft {
  font-style: normal !important;
  color: #C68500 !important;
  background: rgba(198, 133, 0, 0.06);
  border: 1px dashed rgba(198, 133, 0, 0.55);
  padding: 14px 16px;
  border-radius: 3px;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.testimonial-draft::before { content: 'DRAFT \2014 '; font-weight: 700; letter-spacing: 0.05em; color: #C68500; }
.testimonial-draft::after { content: ''; }

@media (max-width: 700px) {
  .case-divider { margin: 44px 0 32px; }
  .case-figure figcaption { font-size: 12.5px; }
  .testimonial { padding: 18px 20px 18px 22px; }
}