/* ===================================================================
   PRAVI BRAND SYSTEM
   The whole site is built on these brand tokens. All four directions
   share this palette and inherit from this base. They differ in
   typography weight, layout philosophy, and motion expression — not
   in brand voice.
   =================================================================== */

:root {
  /* Brand — straight from the logo */
  --pravi-blue: #1a4fbd;
  --pravi-blue-deep: #0e2d75;
  --pravi-blue-soft: #4274d4;
  --pravi-blue-pale: #d8e2f4;

  --pravi-orange: #ea7521;
  --pravi-orange-deep: #c2570f;
  --pravi-orange-soft: #f7a767;
  --pravi-orange-pale: #fbe3cd;

  --paper: #faf6ec;            /* warm cream */
  --paper-deep: #f0e9d7;
  --paper-shadow: #e6dec5;

  --ink: #0b1430;              /* deep blue-black, ties to brand */
  --ink-soft: #4a567a;
  --ink-faint: #8a92b0;
  --rule: #d6cfb6;
  --rule-soft: #ebe4cf;
  --white: #ffffff;
}

/* ---------- shared reveals + motion utilities ---------- */
.reveal   { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-32px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal-r { opacity: 0; transform: translateX(32px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }

@keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee > .track { display: flex; flex-shrink: 0; animation: marqueeX 38s linear infinite; }
.marquee.fast > .track { animation-duration: 20s; }
.marquee.slow > .track { animation-duration: 70s; }
.marquee.rev > .track { animation-direction: reverse; }
.marquee > .track > * { flex-shrink: 0; }

@keyframes chevronSlide { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }
@keyframes chevronTrail { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(6px); } }
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }

/* ===================================================================
   THE PRAVI CHEVRON — the brand mark distilled into a reusable shape
   =================================================================== */
.chev {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.chev path { fill: currentColor; }

/* Chevron strip — used as section dividers, scroll trails */
.chev-strip {
  display: flex; gap: 4px; align-items: center;
  color: var(--pravi-orange);
}
.chev-strip .chev:nth-child(1) { opacity: .25; animation: chevronTrail 1.6s ease-in-out infinite; }
.chev-strip .chev:nth-child(2) { opacity: .5;  animation: chevronTrail 1.6s ease-in-out .2s infinite; }
.chev-strip .chev:nth-child(3) { opacity: .8;  animation: chevronTrail 1.6s ease-in-out .4s infinite; }
.chev-strip .chev:nth-child(4) { opacity: 1;   animation: chevronTrail 1.6s ease-in-out .6s infinite; }

/* ===================================================================
   PAGE SHELL — every direction inherits these
   =================================================================== */
.page { position: relative; }
.page .section { padding: 100px 4vw; position: relative; }
.page .section.tight { padding: 60px 4vw; }
.page .section.wide  { padding: 50px 4vw; }
.page .container { max-width: 1480px; margin: 0 auto; position: relative; }

/* image placeholder — soft cream-striped */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(11,20,48,.05) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(11,20,48,.04), rgba(11,20,48,.07));
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: rgba(11,20,48,.5); text-transform: uppercase; letter-spacing: 0.16em;
  text-align: center;
}
.ph.cover { width: 100%; height: 100%; }

/* universal section markers */
.section-num {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-num::before { content: ""; width: 22px; height: 1px; background: currentColor; }


/* ===================================================================
   1) BROADSHEET — bold confident editorial poster
   =================================================================== */
.dir-editorial {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  --accent: var(--pravi-orange);
  --primary: var(--pravi-blue);
  --bg: var(--paper);
  --bg-deep: var(--paper-deep);
}
.dir-editorial .mono  { font-family: 'DM Mono', monospace; }
.dir-editorial .serif { font-family: 'DM Serif Display', serif; }
.dir-editorial .italic { font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 600; }
.dir-editorial h1, .dir-editorial h2, .dir-editorial h3 { font-family: 'DM Serif Display', serif; font-weight: 400; letter-spacing: -0.015em; line-height: 1; margin: 0; }
.dir-editorial .display {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(64px, 9vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.dir-editorial .display em { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: normal; color: var(--pravi-orange); letter-spacing: -0.01em; }
.dir-editorial .display i  { font-family: 'DM Serif Display', serif; font-style: italic; color: var(--pravi-blue); }
.dir-editorial .lead { font-style: italic; font-size: 26px; line-height: 1.35; }
.dir-editorial .ticker {
  background: var(--pravi-blue); color: var(--paper);
  font-family: 'DM Mono', monospace; font-size: 12.5px; letter-spacing: 0.06em;
  padding: 10px 0; text-transform: uppercase;
  overflow: hidden;
}
.dir-editorial .ticker .tag { color: var(--pravi-orange-soft); padding: 0 28px; font-weight: 500; }
.dir-editorial .ticker .sep { color: var(--paper-deep); padding: 0 16px; opacity: .5; }
.dir-editorial .nav {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; z-index: 30;
  transition: box-shadow .28s ease, background .28s ease;
}
.dir-editorial .nav .row { display: flex; align-items: center; gap: 28px; padding: 16px 4vw; transition: padding .28s ease; }
.dir-editorial .nav .brand { display: flex; align-items: center; gap: 12px; }
.dir-editorial .nav .brand img { width: 32px; height: 32px; transition: height .28s ease; }
/* shrink on scroll */
.dir-editorial .nav.scrolled { box-shadow: 0 6px 24px -14px rgba(11,20,48,.35); }
.dir-editorial .nav.scrolled .row { padding-top: 7px; padding-bottom: 7px; }
.dir-editorial .nav.scrolled .brand img { height: 40px !important; }
.dir-editorial .nav .brand b { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--pravi-blue); }
.dir-editorial .nav .brand small { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.dir-editorial .nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; flex: 1; justify-content: center; }
.dir-editorial .nav ul a { font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 500; padding: 6px 4px; border-bottom: 2px solid transparent; transition: border-color .15s; cursor: pointer; }
.dir-editorial .nav ul a:hover { border-color: var(--pravi-orange); }
.dir-editorial .nav .cta {
  font-family: 'DM Sans'; font-size: 13.5px; font-weight: 500;
  padding: 11px 20px; background: var(--pravi-blue); color: var(--paper);
  border-radius: 0; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.dir-editorial .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--pravi-blue); padding: 6px 12px;
  background: transparent; color: var(--pravi-blue);
}
.dir-editorial .pill .d { width: 6px; height: 6px; background: var(--pravi-orange); }
.dir-editorial .btn {
  font-family: 'DM Sans'; font-size: 14px; font-weight: 500;
  padding: 13px 22px; background: var(--pravi-blue); color: var(--paper);
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  transition: background .2s;
}
.dir-editorial .btn:hover { background: var(--pravi-blue-deep); }
.dir-editorial .btn.orange { background: var(--pravi-orange); }
.dir-editorial .btn.orange:hover { background: var(--pravi-orange-deep); }
.dir-editorial .btn.ghost { background: transparent; color: var(--pravi-blue); border: 1px solid var(--pravi-blue); }
.dir-editorial .btn.ghost:hover { background: var(--pravi-blue); color: var(--paper); }
.dir-editorial .drop { font-family: 'DM Serif Display', serif; font-size: 96px; line-height: .8; float: left; padding: 8px 12px 0 0; color: var(--pravi-orange); font-weight: 400; }
.dir-editorial .footer { background: var(--ink); color: var(--paper); }

/* big chevron decoration — the >P motif scaled up as a poster element */
.dir-editorial .big-chev {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  font-family: 'DM Serif Display', serif;
  font-size: clamp(180px, 22vw, 380px);
  font-weight: 400;
  color: var(--pravi-orange);
  line-height: 1;
  pointer-events: none;
  opacity: 0.92;
}
.dir-editorial .big-chev::before {
  content: ">"; display: inline-block;
}

/* ===================================================================
   2) FORWARD — kinetic, chevron trails, marquees (LIGHT, not dark)
   =================================================================== */
.dir-kinetic {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
  --accent: var(--pravi-orange);
  --primary: var(--pravi-blue);
  --bg: var(--paper);
  --bg-deep: var(--paper-deep);
  --line: var(--rule);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
}
.dir-kinetic .mono  { font-family: 'DM Mono', monospace; }
.dir-kinetic .italic { font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 600; }
.dir-kinetic h1, .dir-kinetic h2 { font-family: 'DM Serif Display', serif; font-weight: 400; letter-spacing: -0.025em; line-height: 0.94; margin: 0; }
.dir-kinetic .display {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(72px, 12vw, 220px);
  letter-spacing: -0.035em;
  line-height: .88;
}
.dir-kinetic .display em { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: normal; color: var(--pravi-orange); letter-spacing: -0.015em; }
.dir-kinetic .display b  { color: var(--pravi-blue); font-weight: 400; }
.dir-kinetic .nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; padding: 18px 4vw;
  backdrop-filter: blur(14px);
  background: rgba(250,246,236,.85);
  border-bottom: 1px solid var(--rule);
}
.dir-kinetic .nav .brand { display: flex; align-items: center; gap: 12px; }
.dir-kinetic .nav .brand img { width: 30px; height: 30px; }
.dir-kinetic .nav .brand b { font-family: 'DM Serif Display'; font-size: 22px; font-weight: 400; color: var(--pravi-blue); letter-spacing: -0.01em; }
.dir-kinetic .nav ul { list-style: none; display: flex; gap: 6px; margin: 0 auto; padding: 0; }
.dir-kinetic .nav ul a { font-family: 'DM Sans'; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px; transition: background .2s; cursor: pointer; }
.dir-kinetic .nav ul a:hover { background: var(--paper-deep); }
.dir-kinetic .nav .cta { font-family: 'DM Sans'; font-size: 13.5px; padding: 10px 18px; background: var(--pravi-blue); color: var(--paper); border-radius: 999px; cursor: pointer; }
.dir-kinetic .mesh-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 75% 15%, rgba(26,79,189,.13), transparent 60%),
    radial-gradient(700px 500px at 12% 75%, rgba(234,117,33,.16), transparent 62%);
}
.dir-kinetic .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 7px 14px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.dir-kinetic .pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--pravi-orange); }
.dir-kinetic .btn { font-family: 'DM Sans'; font-size: 14px; font-weight: 500; padding: 14px 26px; background: var(--ink); color: var(--paper); border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: background .2s; }
.dir-kinetic .btn:hover { background: var(--pravi-blue-deep); }
.dir-kinetic .btn.orange { background: var(--pravi-orange); }
.dir-kinetic .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.dir-kinetic .grid-bg {
  background-image:
    linear-gradient(rgba(11,20,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,20,48,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.dir-kinetic .marq-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 24px 0; overflow: hidden; background: var(--paper);
}
.dir-kinetic .marq-strip .item {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 400;
  letter-spacing: -0.025em;
  padding: 0 28px;
  white-space: nowrap;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 28px;
}
.dir-kinetic .marq-strip .item.alt { color: var(--pravi-orange); font-family: 'Italiana', serif; font-style: normal; }
.dir-kinetic .marq-strip .item.blue { color: var(--pravi-blue); }
.dir-kinetic .marq-strip .chev-large { color: var(--pravi-orange); font-family: 'DM Serif Display'; font-weight: 400; }
.dir-kinetic .card { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.dir-kinetic .footer { background: var(--ink); color: var(--paper); }

/* ===================================================================
   3) SYSTEM — Swiss grid, monospace + serif accents
   =================================================================== */
.dir-architect {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--white);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  --accent: var(--pravi-orange);
  --primary: var(--pravi-blue);
}
.dir-architect .mono  { font-family: 'DM Mono', monospace; }
.dir-architect .italic { font-family: 'Italiana', serif; font-style: normal; }
.dir-architect h1, .dir-architect h2, .dir-architect h3 { font-family: 'DM Mono', monospace; font-weight: 500; letter-spacing: -0.005em; line-height: 1.05; text-transform: uppercase; margin: 0; }
.dir-architect .display {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(76px, 11vw, 184px);
  line-height: .92;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dir-architect .display em { color: var(--pravi-orange); }
.dir-architect .display b  { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 0.72em; text-transform: uppercase; letter-spacing: -0.02em; color: var(--pravi-blue); display: inline-block; vertical-align: 0.12em; }
.dir-architect .nav {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 280px repeat(6, 1fr) 200px;
  background: var(--white);
  border-bottom: 1px solid var(--ink);
  font-family: 'DM Mono', monospace; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.dir-architect .nav > * { padding: 16px 14px; border-right: 1px solid var(--rule); display: flex; align-items: center; }
.dir-architect .nav > *:last-child { border-right: 0; }
.dir-architect .nav .brand { gap: 10px; }
.dir-architect .nav .brand img { width: 22px; height: 22px; }
.dir-architect .nav .brand b { font-family: 'DM Mono'; font-weight: 600; color: var(--pravi-blue); }
.dir-architect .nav .link { justify-content: center; cursor: pointer; transition: background .15s; }
.dir-architect .nav .link:hover { background: var(--ink); color: var(--paper); }
.dir-architect .nav .link.active { background: var(--paper); color: var(--ink); }
.dir-architect .nav .cta { background: var(--pravi-blue); color: var(--paper); justify-content: space-between; cursor: pointer; }
.dir-architect .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-bottom: 1px solid var(--rule); }
.dir-architect .grid12.gap { gap: 24px; padding: 0 22px; }
.dir-architect .label { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); }
.dir-architect .label-orange { color: var(--pravi-orange); }
.dir-architect .label-blue { color: var(--pravi-blue); }
.dir-architect .ticker-thin {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: 'DM Mono', monospace; font-size: 11px;
  padding: 8px 0; background: var(--paper); overflow: hidden;
}
.dir-architect .pill { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--ink); padding: 5px 11px; display: inline-flex; align-items: center; gap: 8px; }
.dir-architect .pill .d { width: 6px; height: 6px; background: var(--pravi-orange); }
.dir-architect .btn { font-family: 'DM Mono'; font-size: 12px; padding: 13px 22px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; }
.dir-architect .btn.orange { background: var(--pravi-orange); }
.dir-architect .btn.blue { background: var(--pravi-blue); }
.dir-architect .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.dir-architect .footer { background: var(--ink); color: var(--paper); }

/* ===================================================================
   4) FIELD NOTE — research journal, footnotes, ribbons, warmth
   =================================================================== */
.dir-civic {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
  --accent: var(--pravi-orange);
  --primary: var(--pravi-blue);
  position: relative;
}

/* AMBIENT BACKGROUND LAYER ------------------------------------------
   Sits behind all content. Drifting gradient blobs + animated dot grid
   + animated SVG research-paths. All very low-opacity and slow. */
.dir-civic .ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.dir-civic .ambient .blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
}
.dir-civic .ambient .blob-1 { width: 760px; height: 760px; background: var(--pravi-blue);   opacity: 0.18; top: -200px;  left: -240px;  animation: blobDrift1 28s ease-in-out infinite; }
.dir-civic .ambient .blob-2 { width: 620px; height: 620px; background: var(--pravi-orange); opacity: 0.22; top: 24%;     right: -260px; animation: blobDrift2 34s ease-in-out infinite; }
.dir-civic .ambient .blob-3 { width: 540px; height: 540px; background: var(--pravi-blue);   opacity: 0.14; bottom: -200px; left: 28%;    animation: blobDrift3 40s ease-in-out infinite; }
.dir-civic .ambient .blob-4 { width: 500px; height: 500px; background: var(--pravi-orange); opacity: 0.14; top: 58%;     left: -180px; animation: blobDrift4 36s ease-in-out infinite; }
@keyframes blobDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(160px,80px) scale(1.15); } }
@keyframes blobDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-120px,100px) scale(1.10); } }
@keyframes blobDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-60px) scale(1.20); } }
@keyframes blobDrift4 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(120px,-80px) scale(1.15); } }

.dir-civic .ambient .grid-drift {
  position: absolute; inset: -200px; opacity: 0.05;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.2px);
  background-size: 28px 28px;
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { from { transform: translate(0,0); } to { transform: translate(28px,28px); } }

.dir-civic .ambient svg.paths {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.45;
}
.dir-civic .ambient svg.paths path {
  fill: none; stroke-width: 1; stroke-dasharray: 8 8;
  animation: pathDash 60s linear infinite;
}
@keyframes pathDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -800; } }

/* Polaroid framed image — for 'From the field' gallery */
.dir-civic .polaroid {
  background: var(--white);
  padding: 14px 14px 54px;
  box-shadow: 0 14px 30px -12px rgba(11,20,48,.20), 0 2px 6px -2px rgba(11,20,48,.08);
  border: 1px solid var(--rule-soft);
  position: relative;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.dir-civic .polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; }
.dir-civic .polaroid .ph,
.dir-civic .polaroid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.dir-civic .polaroid .cap {
  position: absolute; bottom: 12px; left: 14px; right: 14px;
  font-family: 'Caveat', cursive; font-size: 22px; color: var(--ink); text-align: center; line-height: 1;
}
.dir-civic .polaroid .stamp {
  position: absolute; top: -10px; right: -10px;
  background: var(--pravi-orange); color: var(--paper);
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px; transform: rotate(8deg);
}

/* Image with thin double-rule frame */
.dir-civic .img-frame { border: 1px solid var(--rule); padding: 6px; background: var(--white); box-shadow: 0 8px 20px -10px rgba(11,20,48,.18); }

/* paper card — sits above ambient */
.dir-civic .paper-card { background: var(--white); border: 1px solid var(--rule-soft); position: relative; }

/* lift page content above ambient layer */
.dir-civic > .page,
.dir-civic .nav,
.dir-civic .doc-header,
.dir-civic .footer { position: relative; z-index: 2; }
.dir-civic .doc-header { background: var(--white); }
.dir-civic .nav       { background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); }
.dir-civic .mono  { font-family: 'DM Mono', monospace; }
.dir-civic .serif { font-family: 'Cormorant Garamond', serif; }
.dir-civic .italic { font-family: 'Italiana', serif; font-style: normal; }
.dir-civic .hand  { font-family: 'Caveat', cursive; }
.dir-civic h1, .dir-civic h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
.dir-civic .display {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(56px, 8vw, 132px); line-height: 1.04; letter-spacing: -0.02em;
  padding-bottom: 0.08em;
}
.dir-civic .display i { font-family: 'Italiana', serif; font-style: normal; color: var(--pravi-orange); }
.dir-civic .display b { color: var(--pravi-blue); font-weight: 400; }
.dir-civic .doc-header {
  border-top: 4px double var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 12px 4vw;
  display: flex; gap: 18px; align-items: center;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.dir-civic .doc-header .vol { color: var(--pravi-orange); }
.dir-civic .doc-header .spread { flex: 1; text-align: center; color: var(--ink-soft); }
.dir-civic .nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; padding: 16px 4vw;
  font-family: 'DM Sans', sans-serif;
}
.dir-civic .nav .brand { display: flex; align-items: center; gap: 12px; }
.dir-civic .nav .brand img { width: 28px; height: 28px; }
.dir-civic .nav .brand b { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; color: var(--pravi-blue); white-space: nowrap; }
.dir-civic .nav ul { list-style: none; display: flex; gap: 24px; margin: 0 auto; padding: 0; }
.dir-civic .nav ul a { font-family: 'DM Sans'; font-size: 14.5px; padding: 6px 4px; border-bottom: 1px solid transparent; cursor: pointer; }
.dir-civic .nav ul a:hover { border-color: var(--pravi-orange); }
.dir-civic .nav .cta { font-family: 'DM Sans'; font-size: 13.5px; padding: 10px 18px; background: var(--pravi-blue); color: var(--paper); cursor: pointer; }
.dir-civic .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 5px 12px; border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
}
.dir-civic .pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--pravi-orange); }
.dir-civic .btn { font-family: 'DM Sans'; font-size: 14px; padding: 12px 22px; background: var(--pravi-blue); color: var(--paper); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.dir-civic .btn.orange { background: var(--pravi-orange); }
.dir-civic .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.dir-civic .footnote {
  font-family: 'DM Mono', monospace; font-size: 11.5px;
  border-left: 2px solid var(--pravi-orange); padding-left: 14px; color: var(--ink-soft);
  line-height: 1.55;
}
.dir-civic .sup { font-family: 'DM Mono'; font-size: 0.7em; color: var(--pravi-orange); vertical-align: super; }
.dir-civic .drop { font-family: 'Cormorant Garamond', serif; font-size: 76px; line-height: .9; float: left; padding: 10px 14px 0 0; color: var(--pravi-orange); font-weight: 600; }
/* grain texture (kept but very subtle — set to 0 opacity by default; opt-in per section) */
.dir-civic .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.dir-civic .footer { background: var(--ink); color: var(--paper); }
.dir-civic .annot { font-family: 'Caveat', cursive; font-size: 22px; color: var(--pravi-orange); }

/* utility */
.flex { display: flex; }
.col { flex-direction: column; }
.center { align-items: center; justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 14px; } .gap-4 { gap: 22px; } .gap-6 { gap: 36px; }
.grid { display: grid; }
.text-center { text-align: center; }

/* ---------- top-down page reveal transition ---------- */
@keyframes pageRevealTopDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dir-editorial .page,
.dir-civic .page,
.dir-kinetic .page {
  animation: pageRevealTopDown 0.85s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Background scroll shifting for kinetic direction */
.dir-kinetic:not(.labs-stage) .grid-bg {
  background-position-y: calc(var(--scrollY, 0px) * 0.1);
  will-change: background-position-y;
}
.dir-kinetic:not(.labs-stage) .mesh-bg {
  transform: translateY(calc(var(--scrollY, 0px) * -0.04));
  will-change: transform;
}

/* Background scroll shifting for civic direction */
.dir-civic:not(.labs-stage) .ambient .grid-drift {
  transform: translateY(calc(var(--scrollY, 0px) * 0.08));
  will-change: transform;
}
.dir-civic:not(.labs-stage) .ambient .blob-1 {
  transform: translateY(calc(var(--scrollY, 0px) * -0.06));
  will-change: transform;
}
.dir-civic:not(.labs-stage) .ambient .blob-2 {
  transform: translateY(calc(var(--scrollY, 0px) * -0.1));
  will-change: transform;
}
.dir-civic:not(.labs-stage) .ambient .blob-3 {
  transform: translateY(calc(var(--scrollY, 0px) * -0.08));
  will-change: transform;
}
.dir-civic:not(.labs-stage) .ambient .blob-4 {
  transform: translateY(calc(var(--scrollY, 0px) * -0.07));
  will-change: transform;
}

/* Inline text link hover transition (non-Labs) */
.dir-editorial:not(.labs-stage) p a,
.dir-kinetic:not(.labs-stage) p a,
.dir-civic:not(.labs-stage) p a {
  position: relative;
  color: var(--pravi-blue);
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.dir-editorial:not(.labs-stage) p a::after,
.dir-kinetic:not(.labs-stage) p a::after,
.dir-civic:not(.labs-stage) p a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -1px;
  left: 0;
  background-color: var(--pravi-orange);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.dir-editorial:not(.labs-stage) p a:hover::after,
.dir-kinetic:not(.labs-stage) p a:hover::after,
.dir-civic:not(.labs-stage) p a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.dir-editorial:not(.labs-stage) p a:hover,
.dir-kinetic:not(.labs-stage) p a:hover,
.dir-civic:not(.labs-stage) p a:hover {
  color: var(--pravi-orange);
}

/* Inline emphasis hover transformation (non-Labs) */
.dir-editorial:not(.labs-stage) p em,
.dir-kinetic:not(.labs-stage) p em,
.dir-civic:not(.labs-stage) p em,
.dir-editorial:not(.labs-stage) li em,
.dir-kinetic:not(.labs-stage) li em,
.dir-civic:not(.labs-stage) li em {
  display: inline-block;
  transition: color 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.dir-editorial:not(.labs-stage) p em:hover,
.dir-kinetic:not(.labs-stage) p em:hover,
.dir-civic:not(.labs-stage) p em:hover,
.dir-editorial:not(.labs-stage) li em:hover,
.dir-kinetic:not(.labs-stage) li em:hover,
.dir-civic:not(.labs-stage) li em:hover {
  color: var(--pravi-blue);
  transform: translateY(-1px) scale(1.04);
}

.dir-editorial:not(.labs-stage) p i,
.dir-kinetic:not(.labs-stage) p i,
.dir-civic:not(.labs-stage) p i,
.dir-editorial:not(.labs-stage) li i,
.dir-kinetic:not(.labs-stage) li i,
.dir-civic:not(.labs-stage) li i {
  display: inline-block;
  transition: color 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.dir-editorial:not(.labs-stage) p i:hover,
.dir-kinetic:not(.labs-stage) p i:hover,
.dir-civic:not(.labs-stage) p i:hover,
.dir-editorial:not(.labs-stage) li i:hover,
.dir-kinetic:not(.labs-stage) li i:hover,
.dir-civic:not(.labs-stage) li i:hover {
  color: var(--pravi-orange);
  transform: translateY(-1px) scale(1.04);
}