/* mangodogwood.com — shared preview styles (v0.4 — restrained) */

/* ===== Base palette + tokens ===== */
:root {
  --color-bg: #FAFAF7;
  --color-bg-shade: #F4F2EB;
  --color-bg-deep: #ECE8DD;
  --color-ink: #1A1814;
  --color-ink-soft: #5A5651;
  --color-ink-muted: #8A857E;
  --color-accent: #1F2D4A;
  --color-accent-soft: #34466A;
  --color-accent-warm: #B85C29;
  --color-accent-warm-soft: #D17A48;
  --color-rule: #E2DDD0;
  --color-rule-strong: #C8C2B2;

  --font-serif: "Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

html {
  background-color: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: 1.55;
  font-family: var(--font-sans);
  font-feature-settings: "kern", "liga", "calt";
  position: relative;
  min-height: 100vh;
}

/* ===== Subtle paper texture ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.4;
}

body > * { position: relative; z-index: 2; }

::selection { background-color: var(--color-accent); color: var(--color-bg); }
a { color: inherit; text-decoration: none; }

/* ===== Typography ===== */
h1, .h-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
  font-size: clamp(3rem, 8vw, 6rem);
}
.display .it {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-warm);
}

.lede-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-ink-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.section-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent-warm);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: var(--color-ink);
}
.section-title .it {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-warm);
}

/* ===== Animated underline links ===== */
a.link-underline {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 350ms var(--ease-out), color 200ms;
}
a.link-underline:hover { background-size: 100% 2px; color: var(--color-accent); }

a.link-underline-warm {
  background-image: linear-gradient(var(--color-accent-warm), var(--color-accent-warm));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 350ms var(--ease-out), color 200ms;
}
a.link-underline-warm:hover { background-size: 100% 2px; color: var(--color-accent-warm); }

/* ===== Nav ===== */
.nav-wrap { background: var(--color-bg); }

.nav-link {
  position: relative;
  padding-bottom: 2px;
  color: var(--color-ink-soft);
  transition: color 200ms;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-accent-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--color-ink); }
.nav-link.active::after { transform: scaleX(1); }

.brand-mark {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  color: var(--color-ink);
  transition: color 200ms;
}
.brand-mark:hover { color: var(--color-accent-warm); }

/* ===== Hero rule ===== */
.hero-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--color-accent-warm);
  vertical-align: middle;
  margin-right: 0.75rem;
}

/* ===== Cards ===== */
.card {
  position: relative;
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  padding: 1.75rem;
  transition: transform 400ms var(--ease-out),
              border-color 250ms,
              box-shadow 400ms var(--ease-out),
              background-color 250ms;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow:
    0 1px 2px rgba(31, 45, 74, 0.04),
    0 10px 28px rgba(31, 45, 74, 0.10);
  background: #FDFCF7;
}
.card .card-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  transition: transform 350ms var(--ease-out), color 250ms;
}
.card:hover .card-arrow {
  transform: translate(4px, -4px);
  color: var(--color-accent-warm);
}

/* ===== Reveals ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===== Portrait frame ===== */
.portrait-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-shade);
  border: 1px solid var(--color-rule);
}
.portrait-frame img {
  display: block;
  width: 100%;
  transition: transform 1200ms var(--ease-out);
}
.portrait-frame:hover img {
  transform: scale(1.03);
}
.portrait-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ===== Modal ===== */
dialog.modal {
  border: none;
  padding: 0;
  background: var(--color-bg);
  max-width: min(640px, 92vw);
  width: 100%;
  margin: auto;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(31, 45, 74, 0.06), 0 16px 60px rgba(31, 45, 74, 0.18);
  animation: modalIn 360ms var(--ease-out);
}
dialog.modal::backdrop {
  background: rgba(20, 22, 32, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: backdropIn 360ms var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal-inner { padding: 2.5rem 2.25rem 2.25rem; max-height: 88vh; overflow-y: auto; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  color: var(--color-ink-muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: all 200ms;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ===== Featured grid (project cards) ===== */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  background: transparent;
  border: none;
}
@media (min-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  /* For categories with 4 items, force 2-col on desktop so it lays out clean 2x2 */
  .featured-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================ */
/* ===== WORLD TILES ========== */
/* ============================ */

.worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .worlds-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.world {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  overflow: hidden;
  transition: transform 400ms var(--ease-out),
              border-color 250ms,
              box-shadow 400ms var(--ease-out);
  cursor: pointer;
}
.world:hover {
  transform: translateY(-3px);
  border-color: var(--color-ink);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 32px rgba(31, 45, 74, 0.11);
}

.world-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-bg-shade);
  overflow: hidden;
  border-bottom: 1px solid var(--color-rule);
}
.world-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease-out), filter 600ms;
}
.world:hover .world-photo img {
  transform: scale(1.03);
}
.world-photo .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.4;
}
.world-photo .placeholder .num {
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent-warm);
  margin-bottom: 0.3rem;
  font-style: italic;
}

.world-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms;
  background: linear-gradient(180deg, transparent, rgba(31,45,74,0.08));
}
.world:hover .world-photo::after { opacity: 1; }

.world-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.world-tag {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.world-tag .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-accent-warm);
  letter-spacing: 0;
  text-transform: none;
}
.world-name {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.022em;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-ink);
  margin: 0 0 0.65rem;
  transition: color 300ms;
}
.world:hover .world-name { color: var(--color-accent); }
.world-name .it { font-style: italic; font-weight: 400; color: var(--color-accent-warm); }

.world-desc {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  font-style: italic;
  margin: 0 0 1.25rem;
}

.world-projects {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
}
.world-projects .label {
  display: block;
  color: var(--color-ink-soft);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* per-world subtle tint on photo placeholder */
.world-culture    .placeholder { background: linear-gradient(165deg, #F2DCC9, #F4E5D2); }
.world-blockchain .placeholder { background: linear-gradient(165deg, #D4DBE8, #E1E6EE); }
.world-ai         .placeholder { background: linear-gradient(165deg, #DAD3E4, #E4DEE9); }
.world-fashion    .placeholder { background: linear-gradient(165deg, #E8D3CF, #EEDED9); }
.world-research   .placeholder { background: linear-gradient(165deg, #CCD9E0, #DBE3E8); }
.world-film       .placeholder { background: linear-gradient(165deg, #E3D2BD, #ECE0CC); }

/* ===== Project deep page ===== */
.deep-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 1.25rem 0;
  margin-top: 2.5rem;
}
@media (min-width: 700px) { .deep-meta { grid-template-columns: repeat(3, 1fr); } }
.deep-meta dt {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.2rem;
  font-weight: 500;
}
.deep-meta dd {
  font-size: 0.95rem;
  color: var(--color-ink);
  margin: 0 0 0.85rem;
  line-height: 1.45;
  font-family: var(--font-serif);
}

.deep-section h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 1.25rem;
  line-height: 1.1;
}
.deep-section h2 .it { font-style: italic; font-weight: 400; color: var(--color-accent-warm); }

.outlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: all 220ms;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.outlink:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}
.outlink .arrow { transition: transform 220ms var(--ease-out); }
.outlink:hover .arrow { transform: translateX(3px); }

/* ===== Photo strip ===== */
.photo-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}
@media (min-width: 700px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
.photo-slot {
  aspect-ratio: 4/3;
  background: var(--color-bg-shade);
  border: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  text-align: center;
  padding: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Drop cap ===== */
.drop-cap::first-letter {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 0.85;
  font-weight: 500;
  float: left;
  margin: 0.15rem 0.6rem -0.1rem 0;
  color: var(--color-accent-warm);
  font-style: italic;
}

/* ===== External link arrow ===== */
.ext-arrow {
  display: inline-block;
  font-size: 0.7em;
  color: var(--color-ink-muted);
  margin-left: 0.15em;
  transition: transform 220ms var(--ease-out);
}
a:hover .ext-arrow { color: var(--color-accent-warm); transform: translate(2px, -2px); }

/* ===== Video frame ===== */
.video-frame {
  border: 1px solid var(--color-rule);
  background: var(--color-bg-shade);
  box-shadow: 0 1px 2px rgba(31, 45, 74, 0.04), 0 8px 28px rgba(31, 45, 74, 0.10);
}

/* ===== Currently — simple list ===== */
.currently-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 700px) { .currently-list { grid-template-columns: repeat(2, 1fr); } }
.currently-list li {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-ink);
  padding: 1rem 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}
.currently-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent-warm);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.7rem;
}

/* ====================================================== */
/* ===== Horizontal project cards (.pc) base + variants  */
/* Image left, body right. Each variant pulls brand color */
/* ====================================================== */

.pc {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  transition: transform 450ms cubic-bezier(0.16,1,0.3,1), box-shadow 450ms cubic-bezier(0.16,1,0.3,1), border-color 300ms;
}
@media (min-width: 640px) { .pc { grid-template-columns: 42% 58%; } }
.pc:hover { transform: translateY(-3px); }
.pc .ph { position: relative; overflow: hidden; aspect-ratio: 4/3; }
@media (min-width: 640px) { .pc .ph { aspect-ratio: auto; min-height: 220px; } }
.pc .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0.16,1,0.3,1); }
.pc:hover .ph img { transform: scale(1.04); }
.pc .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
.pc .stamp {
  position: absolute; top: 0.9rem; left: 0.9rem;
  font-family: "IBM Plex Mono", monospace; font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.pc .ph .ph-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.25rem; text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.pc .body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; justify-content: center; gap: 0.65rem; }
.pc .arrow { position: absolute; top: 0.9rem; right: 0.9rem; font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; transition: transform 350ms cubic-bezier(0.16,1,0.3,1), color 250ms; z-index: 3; }
.pc:hover .arrow { transform: translate(4px, -4px); }
.pc .eb { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; }
.pc h3 { margin: 0; }
.pc p.bc { font-size: 0.88rem; line-height: 1.5; margin: 0; }

.pc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .pc-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

/* ===== Film — cinematic dark, white serif (for Vimeo films) ===== */
.pc-film { background: #0E0D0B; border: 1px solid #1A1916; color: #F4EFE5; box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.24), 0 22px 48px rgba(0,0,0,0.36); }
.pc-film:hover { border-color: #C8A06E; box-shadow: 0 2px 4px rgba(0,0,0,0.22), 0 10px 22px rgba(0,0,0,0.28), 0 28px 60px rgba(0,0,0,0.46); }
.pc-film .ph { background: #16140E; }
.pc-film .stamp { color: #DDC9A8; background: rgba(15,12,8,0.6); border-color: rgba(200,160,110,0.30); }
.pc-film .arrow { color: rgba(220,200,170,0.7); }
.pc-film:hover .arrow { color: #E5C58A; }
.pc-film .eb { color: #A09080; }
.pc-film h3 { font-family: "DM Serif Display","Playfair Display",serif; font-weight: 400; font-size: clamp(1.4rem,2vw,1.75rem); line-height: 1.05; letter-spacing: -0.005em; color: #F4EFE5; }
.pc-film p.bc { color: #BFB5A4; }

/* ===== Gryps — canonical #1E2327 (theme-color from gryps.finance), gryphon bronze accent ===== */
.pc-gryps { background: #1E2327; border: 1px solid #2A3036; color: #F0EFEA; box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 6px 14px rgba(0,0,0,0.22), 0 22px 48px rgba(0,0,0,0.30); }
.pc-gryps:hover { border-color: #C89455; box-shadow: 0 2px 4px rgba(0,0,0,0.24), 0 10px 22px rgba(0,0,0,0.28), 0 28px 60px rgba(0,0,0,0.36); }
.pc-gryps .ph { background: #161A1D; }
.pc-gryps .stamp { color: #E8E4D8; background: rgba(8,10,12,0.62); border-color: rgba(200,148,85,0.32); letter-spacing: 0.24em; font-weight: 700; }
.pc-gryps .arrow { color: rgba(220,210,190,0.55); }
.pc-gryps:hover .arrow { color: #C89455; }
.pc-gryps .eb { color: #A89C8A; letter-spacing: 0.22em; }
.pc-gryps h3 { font-family: "Inter","Helvetica Neue",system-ui,sans-serif; font-weight: 600; font-size: clamp(1.55rem,2.2vw,1.9rem); line-height: 1.08; letter-spacing: -0.018em; color: #F5F2E8; }
.pc-gryps h3 .it { font-family: "Crimson Pro",serif; font-style: italic; font-weight: 500; color: #C89455; }
.pc-gryps p.bc { color: #C8C2B5; }

/* ===== Charged Particles — deep blue-grey with electric accent ===== */
.pc-cp { background: #161D2E; border: 1px solid #232C42; color: #E8EEFA; box-shadow: 0 1px 2px rgba(5,15,30,0.16), 0 6px 14px rgba(5,15,30,0.20), 0 22px 48px rgba(5,15,30,0.28); }
.pc-cp:hover { border-color: #00CFFF; box-shadow: 0 2px 4px rgba(5,15,30,0.20), 0 10px 22px rgba(5,15,30,0.24), 0 28px 60px rgba(5,20,40,0.36); }
.pc-cp .ph { background: #1B2336; }
.pc-cp .stamp { color: #D8E4F4; background: rgba(8,14,28,0.55); border-color: rgba(0,180,230,0.30); }
.pc-cp .arrow { color: rgba(170,200,230,0.7); }
.pc-cp:hover .arrow { color: #44DDFF; }
.pc-cp .eb { color: #7E8FB0; }
.pc-cp h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #F0F4FC; }
.pc-cp p.bc { color: #BCC4D4; }

/* ===== Packara — purple/gold (programmable packs, retail trading-card lineage) ===== */
.pc-packara { background: #231B33; border: 1px solid #322648; color: #F0E8FA; box-shadow: 0 1px 2px rgba(20,10,30,0.18), 0 6px 14px rgba(20,10,30,0.22), 0 22px 48px rgba(20,10,30,0.30); }
.pc-packara:hover { border-color: #F4C430; box-shadow: 0 2px 4px rgba(20,10,30,0.22), 0 10px 22px rgba(20,10,30,0.26), 0 28px 60px rgba(20,10,30,0.38); }
.pc-packara .ph { background: #2C2240; }
.pc-packara .stamp { color: #F2E4B8; background: rgba(14,10,20,0.6); border-color: rgba(244,196,48,0.30); }
.pc-packara .arrow { color: rgba(200,180,220,0.7); }
.pc-packara:hover .arrow { color: #FFD556; }
.pc-packara .eb { color: #9080A8; }
.pc-packara h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #F4ECFA; }
.pc-packara p.bc { color: #CABCD8; }

/* ===== Loadout — stealth charcoal (under pitch, sealed) ===== */
.pc-loadout { background: #1A1A1C; border: 1px solid #25252A; color: #E8E6E0; box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 6px 14px rgba(0,0,0,0.22), 0 22px 48px rgba(0,0,0,0.30); }
.pc-loadout:hover { border-color: #B85C29; box-shadow: 0 2px 4px rgba(0,0,0,0.20), 0 10px 22px rgba(0,0,0,0.26), 0 28px 60px rgba(0,0,0,0.40); }
.pc-loadout .ph { background: linear-gradient(135deg, #1F1F22 0%, #2C2C30 100%); }
.pc-loadout .stamp { color: #DCD5C2; background: rgba(0,0,0,0.55); border-color: rgba(184,92,41,0.30); }
.pc-loadout .arrow { color: rgba(200,200,190,0.7); }
.pc-loadout:hover .arrow { color: #E5854A; }
.pc-loadout .eb { color: #8A8A82; }
.pc-loadout h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #F0EEE6; }
.pc-loadout p.bc { color: #C4C0B4; }

/* ===== Trading-Agent — terminal green-on-black ===== */
.pc-trading { background: #0A0F0B; border: 1px solid #14201A; color: #C8E6D0; box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.26), 0 22px 48px rgba(0,0,0,0.36); }
.pc-trading:hover { border-color: #3DCC7F; box-shadow: 0 2px 4px rgba(0,0,0,0.22), 0 10px 22px rgba(0,0,0,0.28), 0 28px 60px rgba(0,30,15,0.46); }
.pc-trading .ph { background: linear-gradient(135deg, #0E1812 0%, #16261D 100%); }
.pc-trading .stamp { color: #88E0A4; background: rgba(0,0,0,0.6); border-color: rgba(0,255,128,0.25); font-family: "IBM Plex Mono",monospace; }
.pc-trading .arrow { color: rgba(140,200,160,0.7); }
.pc-trading:hover .arrow { color: #66FF99; }
.pc-trading .eb { color: #6A8A7A; }
.pc-trading h3 { font-family: "IBM Plex Mono","Space Grotesk",monospace; font-weight: 700; font-size: clamp(1.5rem,2vw,1.85rem); line-height: 1.02; letter-spacing: -0.02em; color: #E0F4E8; }
.pc-trading p.bc { color: #A8C4B0; }

/* ===== Plumbline — restrained light cream (matches plumbline.tools) ===== */
.pc-plumbline { background: #F4F2EB; border: 1px solid #E0DCCC; color: #1A1A1A; box-shadow: 0 1px 2px rgba(50,40,20,0.05), 0 6px 14px rgba(50,40,20,0.07), 0 22px 48px rgba(50,40,20,0.10); }
.pc-plumbline:hover { border-color: #1F2D4A; box-shadow: 0 2px 4px rgba(50,40,20,0.08), 0 10px 22px rgba(50,40,20,0.10), 0 28px 60px rgba(50,40,20,0.16); }
.pc-plumbline .ph { background: #ECE8DD; }
.pc-plumbline .ph::after { background: linear-gradient(180deg, rgba(0,0,0,0.0) 60%, rgba(40,30,15,0.10) 100%); }
.pc-plumbline .stamp { color: #1A1A1A; background: rgba(244,242,235,0.85); border-color: rgba(40,30,15,0.25); }
.pc-plumbline .arrow { color: rgba(60,55,40,0.55); }
.pc-plumbline:hover .arrow { color: #1F2D4A; }
.pc-plumbline .eb { color: #6A6258; }
.pc-plumbline h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #1A1A1A; }
.pc-plumbline p.bc { color: #4A463E; }

/* ===== Machine's Learning — podcast dark + bone accent ===== */
.pc-ml { background: #14171F; border: 1px solid #1F2330; color: #E8E5D8; box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.22), 0 22px 48px rgba(0,0,0,0.32); }
.pc-ml:hover { border-color: #D4C6A8; box-shadow: 0 2px 4px rgba(0,0,0,0.22), 0 10px 22px rgba(0,0,0,0.26), 0 28px 60px rgba(0,0,0,0.40); }
.pc-ml .ph { background: #1A1F2C; }
.pc-ml .stamp { color: #D4C6A8; background: rgba(8,10,16,0.6); border-color: rgba(212,198,168,0.30); }
.pc-ml .arrow { color: rgba(180,170,140,0.7); }
.pc-ml:hover .arrow { color: #E8D5AA; }
.pc-ml .eb { color: #8A8268; }
.pc-ml h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.5rem,2vw,1.85rem); line-height: 1.02; letter-spacing: -0.022em; color: #F0EBD8; }
.pc-ml h3 .it { font-style: italic; font-weight: 400; color: #D4C6A8; }
.pc-ml p.bc { color: #BFB59C; }

/* ===== Ekow Ai — sports terminal green ===== */
.pc-ekow { background: #0A1410; border: 1px solid #14241B; color: #DCEFE3; box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 6px 14px rgba(0,0,0,0.20), 0 22px 48px rgba(0,30,15,0.30); }
.pc-ekow:hover { border-color: #3DCC7F; box-shadow: 0 2px 4px rgba(0,0,0,0.20), 0 10px 22px rgba(0,0,0,0.24), 0 28px 60px rgba(0,40,20,0.40); }
.pc-ekow .ph { background: linear-gradient(135deg, #0E1812 0%, #142420 100%); }
.pc-ekow .stamp { color: #98E0B5; background: rgba(5,12,8,0.6); border-color: rgba(80,220,140,0.30); }
.pc-ekow .arrow { color: rgba(150,200,170,0.7); }
.pc-ekow:hover .arrow { color: #5FDA94; }
.pc-ekow .eb { color: #6A9078; }
.pc-ekow h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.5rem,2vw,1.85rem); line-height: 1.02; letter-spacing: -0.022em; color: #E8F4ED; }
.pc-ekow h3 .it { font-style: italic; font-weight: 400; color: #5FDA94; }
.pc-ekow p.bc { color: #B8D0BF; }

/* ===== Cetacea / Research family — deep ocean ===== */
.pc-cetacea { background: #0E1B2A; border: 1px solid #1A2A40; color: #DCE8F4; box-shadow: 0 1px 2px rgba(5,15,30,0.16), 0 6px 14px rgba(5,15,30,0.22), 0 22px 48px rgba(5,15,30,0.32); }
.pc-cetacea:hover { border-color: #5A9CB8; box-shadow: 0 2px 4px rgba(5,15,30,0.20), 0 10px 22px rgba(5,15,30,0.26), 0 28px 60px rgba(5,20,40,0.42); }
.pc-cetacea .ph { background: linear-gradient(180deg, #142436 0%, #0A1525 100%); }
.pc-cetacea .stamp { color: #B8D4E4; background: rgba(5,15,28,0.6); border-color: rgba(120,180,210,0.30); }
.pc-cetacea .arrow { color: rgba(160,200,220,0.7); }
.pc-cetacea:hover .arrow { color: #7DBCD4; }
.pc-cetacea .eb { color: #6A8AA0; }
.pc-cetacea h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #EAF2FA; }
.pc-cetacea h3 .it { font-style: italic; font-weight: 400; color: #88B8D0; }
.pc-cetacea p.bc { color: #B8C8D8; }

/* ===== Cross-domain threads — restrained light typography-led ===== */
.pc-threads { background: #F4F2EB; border: 1px solid #E0DCCC; color: #1A1A1A; box-shadow: 0 1px 2px rgba(50,40,20,0.05), 0 6px 14px rgba(50,40,20,0.07), 0 22px 48px rgba(50,40,20,0.10); }
.pc-threads:hover { border-color: #B85C29; box-shadow: 0 2px 4px rgba(50,40,20,0.08), 0 10px 22px rgba(50,40,20,0.10), 0 28px 60px rgba(50,40,20,0.16); }
.pc-threads .ph { background: linear-gradient(135deg, #ECE8DD 0%, #DCD4C2 100%); }
.pc-threads .stamp { color: #1A1A1A; background: rgba(244,242,235,0.85); border-color: rgba(40,30,15,0.25); }
.pc-threads .arrow { color: rgba(60,55,40,0.55); }
.pc-threads:hover .arrow { color: #B85C29; }
.pc-threads .eb { color: #6A6258; }
.pc-threads h3 { font-family: "Crimson Pro",serif; font-weight: 500; font-size: clamp(1.6rem,2.2vw,1.95rem); line-height: 1.02; letter-spacing: -0.022em; color: #1A1A1A; }
.pc-threads h3 .it { font-style: italic; font-weight: 400; color: #B85C29; }
.pc-threads p.bc { color: #4A463E; }

/* ====================================================== */
/* ===== Project-coded card variants (subtle, scoped) ===== */
/* Card stays same shape; bg + accent colors hint at brand */
/* ====================================================== */

.card.brand-gryps {
  background: #1F2D4A;
  border-color: #2D3D5E;
  color: #F4F2EB;
}
.card.brand-gryps:hover { border-color: #B85C29; background: #243353; }
.card.brand-gryps .card-arrow { color: #9AA6BE; }
.card.brand-gryps:hover .card-arrow { color: #B85C29; }
.card.brand-gryps .eyebrow,
.card.brand-gryps p.eyebrow { color: #9AA6BE; }
.card.brand-gryps h3 { color: #F4F2EB; }
.card.brand-gryps p { color: #C8CDD8; }

.card.brand-hydra {
  background: #1A0F12;
  border-color: #2A1A1F;
  color: #F4F2EB;
}
.card.brand-hydra:hover { border-color: #C44545; background: #221518; }
.card.brand-hydra .card-arrow { color: #8B7A7E; }
.card.brand-hydra:hover .card-arrow { color: #E66B6B; }
.card.brand-hydra .eyebrow,
.card.brand-hydra p.eyebrow { color: #8B7A7E; }
.card.brand-hydra h3 { color: #F4F2EB; }
.card.brand-hydra p { color: #CFC4C7; }

.card.brand-whale {
  background: #0F1A30;
  border-color: #1F2C46;
  color: #F4F2EB;
}
.card.brand-whale:hover { border-color: #4488FF; background: #142037; }
.card.brand-whale .card-arrow { color: #8FA1C0; }
.card.brand-whale:hover .card-arrow { color: #6BA5FF; }
.card.brand-whale .eyebrow,
.card.brand-whale p.eyebrow { color: #8FA1C0; }
.card.brand-whale h3 { color: #F4F2EB; }
.card.brand-whale p { color: #CDD4E2; }

.card.brand-cetacea {
  background: #0F1B2A;
  border-color: #1B2A3E;
  color: #F4F2EB;
}
.card.brand-cetacea:hover { border-color: #5A9CB8; background: #142133; }
.card.brand-cetacea .card-arrow { color: #8FA8B8; }
.card.brand-cetacea:hover .card-arrow { color: #7DBCD4; }
.card.brand-cetacea .eyebrow,
.card.brand-cetacea p.eyebrow { color: #8FA8B8; }
.card.brand-cetacea h3 { color: #F4F2EB; }
.card.brand-cetacea p { color: #C8D4DC; }

.card.brand-ekow {
  background: #0A1410;
  border-color: #1A2620;
  color: #F4F2EB;
}
.card.brand-ekow:hover { border-color: #3DCC7F; background: #0F1B16; }
.card.brand-ekow .card-arrow { color: #7E9988; }
.card.brand-ekow:hover .card-arrow { color: #5FDA94; }
.card.brand-ekow .eyebrow,
.card.brand-ekow p.eyebrow { color: #7E9988; }
.card.brand-ekow h3 { color: #F4F2EB; }
.card.brand-ekow p { color: #C0D2C8; }

.card.brand-trading {
  background: #100F08;
  border-color: #1F1D14;
  color: #E8E1C8;
}
.card.brand-trading:hover { border-color: #D4B044; background: #161410; }
.card.brand-trading .card-arrow { color: #8A8270; }
.card.brand-trading:hover .card-arrow { color: #E6C166; }
.card.brand-trading .eyebrow,
.card.brand-trading p.eyebrow { color: #8A8270; font-family: "IBM Plex Mono", monospace; }
.card.brand-trading h3 { color: #E8E1C8; }
.card.brand-trading p { color: #BFB9A6; }

.card.brand-cacophony {
  background: #28323E;
  border-color: #36414E;
  color: #F4F2EB;
}
.card.brand-cacophony:hover { border-color: #E66B4A; background: #2E3946; }
.card.brand-cacophony .card-arrow { color: #94A1B2; }
.card.brand-cacophony:hover .card-arrow { color: #E68A6B; }
.card.brand-cacophony .eyebrow,
.card.brand-cacophony p.eyebrow { color: #94A1B2; }
.card.brand-cacophony h3 { color: #F4F2EB; }
.card.brand-cacophony p { color: #CCD3DC; }

.card.brand-ml {
  background: #14171F;
  border-color: #232733;
  color: #F4F2EB;
}
.card.brand-ml:hover { border-color: #9B7FE3; background: #1A1D26; }
.card.brand-ml .card-arrow { color: #8089A0; }
.card.brand-ml:hover .card-arrow { color: #B69FF0; }
.card.brand-ml .eyebrow,
.card.brand-ml p.eyebrow { color: #8089A0; }
.card.brand-ml h3 { color: #F4F2EB; }
.card.brand-ml p { color: #CCD0DA; }

/* ====================================================== */
/* ===== Project-coded frames (per-project art direction) */
/* ====================================================== */

/* ===== NOA frame — dark, nocturnal, warm-bone accent ===== */
.noa-frame {
  background: #0A0A0A;
  color: #F2F0EB;
  position: relative;
  isolation: isolate;
}
.noa-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.35;
}
.noa-frame > * { position: relative; z-index: 1; }

.noa-frame a {
  color: #F2F0EB;
  transition: color 200ms;
}
.noa-frame a:hover { color: #D4C6A8; }

.noa-display {
  font-family: "Playfair Display", "GT Super Display", "Bodoni 72", "Didot", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: #F2F0EB;
}
.noa-display .bone { color: #D4C6A8; }

.noa-mono {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.7rem;
  color: #9A9A9A;
}
.noa-mono.bone { color: #D4C6A8; }

.noa-lede {
  font-family: "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #C8C5BE;
  letter-spacing: 0.003em;
}

.noa-rule-top { border-top: 1px solid #1E1E1E; }
.noa-rule-bot { border-bottom: 1px solid #1E1E1E; }

.noa-ticket {
  border: 1px dashed #3A3A3A;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.noa-ticket .label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.66rem;
  color: #6A6A6A;
}
.noa-ticket .value {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  color: #F2F0EB;
}

.noa-city-row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid #1E1E1E;
}
@media (min-width: 700px) {
  .noa-city-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .noa-city-row { grid-template-columns: repeat(3, 1fr); }
}
.noa-city {
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid #1E1E1E;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 250ms;
}
.noa-city:hover { background: #141414; }
@media (min-width: 700px) {
  .noa-city:nth-child(2n) { border-left: 1px solid #1E1E1E; }
}
@media (min-width: 1024px) {
  .noa-city:nth-child(2n) { border-left: none; }
  .noa-city:not(:nth-child(3n+1)) { border-left: 1px solid #1E1E1E; }
}
.noa-city .code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: #6A6A6A;
}
.noa-city .name {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: 2.25rem;
  line-height: 0.95;
  color: #F2F0EB;
}
.noa-city .tag {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  color: #9A9A9A;
  line-height: 1.4;
}

.noa-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid #F2F0EB;
  background: transparent;
  color: #F2F0EB;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: all 220ms;
}
.noa-cta:hover {
  background: #D4C6A8;
  border-color: #D4C6A8;
  color: #0A0A0A;
}
.noa-cta .arrow { transition: transform 220ms; }
.noa-cta:hover .arrow { transform: translateX(4px); }

.noa-ghost {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #F2F0EB;
  opacity: 0.022;
  letter-spacing: -0.04em;
  line-height: 0.9;
  pointer-events: none;
  user-select: none;
}

/* ===== Footer (light) ===== */
.site-footer {
  border-top: 1px solid var(--color-rule);
  padding: 2.5rem 0 2rem;
  margin-top: 5rem;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.site-footer a:hover { color: var(--color-accent); }
.site-footer-credit {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}