/* ─────────────────────────────────────────────────────────────────
   base.css — Reset · RTL · Typography · Layout · Components
   ───────────────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  font-family: var(--ff-sans);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

a    { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }
input, select, textarea { font-family: inherit; border: 0; }
img, video, canvas { display: block; max-width: 100%; }
svg { display: block; }

/* ── Selection ───────────────────────────────────────────────────── */
::selection { background: var(--mocha); color: var(--surface); }

/* ── Scrollbar (subtle) ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ── Skip link ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: var(--gutter);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--bg);
  padding: 0.5em 1.2em;
  border-radius: 0 0 4px 4px;
  font-size: var(--f-small);
  letter-spacing: 0.04em;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ── Focus ring ──────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--mocha); outline-offset: 3px; border-radius: 2px; }

/* ── Three.js canvas (fixed background) ─────────────────────────── */
#three-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}

/* ── Layout ──────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Typography ──────────────────────────────────────────────────── */

/* Serif display — used for headlines */
.display {
  font-family: var(--ff-serif);
  font-size: var(--f-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 500;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--mocha);
  /* Descender clearance for g j p q y */
  padding-block-end: 0.1em;
}

/* Descender check — Cormorant italic may need extra room */
.display-block { display: block; }

h2, .h2 {
  font-family: var(--ff-sans);
  font-size: var(--f-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Capped-width prose */
.prose p,
.prose li { max-width: 65ch; }

/* Small caps label (use sparingly — max 1 per 3 sections) */
.label {
  font-family: var(--ff-sans);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Site header ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  /* transition only on the scrolled backdrop, not always painting */
}

.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-block-end: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;               /* ≤ 80 px cap per skill */
  gap: var(--s2);
}

/* ── Logo ────────────────────────────────────────────────────────── */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  direction: ltr;             /* always LTR regardless of page dir */
  color: var(--ink);
  transition: opacity var(--dur-ui) var(--ease);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover { opacity: 0.65; }
}

.logo-arch { display: block; width: 46px; height: 13px; }
.logo-arch svg { width: 100%; height: 100%; }

.logo-text {
  font-family: var(--ff-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}

/* ── Header actions ──────────────────────────────────────────────── */
.header-end {
  display: flex;
  align-items: center;
  gap: var(--s2);
}


/* CTA pill button */
.cta-btn {
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--mocha);
  border-radius: 100px;
  font-family: var(--ff-sans);
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--mocha);
  white-space: nowrap;
  transition: background var(--dur-ui) var(--ease),
              color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease);
}

.cta-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .cta-btn:hover {
    background: var(--mocha);
    color: var(--surface);
  }
}

/* ── Phase 1 hero placeholder ─────────────────────────────────────
   Replaced entirely in Phase 3. Purpose: prove the type system,
   palette, and three.js canvas all work together.
   ─────────────────────────────────────────────────────────────── */
.p1-section {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: var(--z-above);
  padding-block: var(--s18);
}

.p1-inner {
  max-width: 800px;
}

.p1-service-line {
  font-family: var(--ff-sans);
  font-size: var(--f-small);
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  margin-block-start: var(--s3);
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}