/* ==========================================================================
   PCAE VISUAL IDENTITY LAYER
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap');

:root {
  /* PCAE Palette */
  --ink: #11241a;          /* Deep Wiltshire Green */
  --body: #353835;         /* Warm ink */
  --silver: #aeb5b0;       /* Stone grey */
  --paper: #f7f6f2;        /* Warm stone */
  
  --accent-gold: #b3915f;  /* Subtle premium accent */
  --ink-rail: #0a1710;     /* Deeper rail */

  /* PCAE Typography */
  --font-brand: 'Fraunces', serif;
  --font-display-alt: 'Fraunces', serif; 
}

/* Base Color Overrides — paper page, ink accents (not full-bleed dark body) */
body { background: var(--paper); color: var(--body); }
.on-dark { color: var(--paper) !important; }
.site-header.is-solid { background: rgba(247, 246, 242, 0.92); }
.menu-drawer { background: var(--ink); }

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

/* 2. Stronger Brand Lockup */
.brand-lockup .brand-name {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 40px;
}
.brand-lockup .brand-sub {
  color: var(--accent-gold);
  letter-spacing: 0.35em;
  font-weight: 500;
}
.site-header.is-solid .brand-lockup .brand-sub {
  color: #8c7140; 
}

/* 3. Refined Hero Typography */
.display-xl, .display-lg, .hero-title, .pin-title {
  font-family: var(--font-display-alt);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}
.display-xl {
  font-size: calc(var(--display-xl) * 1.05);
}
.pin-title {
  text-shadow: 0 4px 32px rgba(0,0,0,0.5);
}

/* 4. Motion Polish */
.js-anim .reveal {
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fader .slide {
  transition: opacity 2s ease-in-out;
}
.arrow-link {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arrow-link:hover {
  transform: translateX(4px);
}

/* 5. Rail & Background Adjustments */
main::after, .slider .stage, .slider .stage .slide, .cta-photo .stage, .cta-photo .stage .slide, .next-preview .pv-img, .plan-section .rail-ink {
  background-color: var(--ink-rail);
}
.veil-ink, .gallery-panel .fader, .hero .blind .fader, .hero .fader {
  background-color: var(--ink);
}

/* 6. Work-strip and Leaf-hero Refinements */
.work-card, .proj-tile {
  background: #edece8; 
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover, .proj-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.work-card img, .proj-tile img {
  border-radius: 6px 6px 0 0;
}
.work-card.is-collage img, .frow .photo.is-collage img {
  background-color: var(--ink-rail);
}
.leaf-hero-photo::after {
  background: linear-gradient(180deg, rgba(17,36,26,0.2) 0%, rgba(17,36,26,0.85) 100%);
}
.svc-card {
  border-top: 1px solid rgba(17,36,26,0.1);
}
.kicker {
  color: var(--accent-gold);
  font-family: var(--font-brand);
  font-style: italic;
  font-size: 22px;
}
.work-strip-head .kicker, .hub-notes-head .kicker, .svc-hero .kicker {
  color: var(--accent-gold);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
}
.hero-slogan {
  color: var(--accent-gold);
  font-family: var(--font-body);
  letter-spacing: 0.15em;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  opacity: 0;
  animation: fade-in 1.2s ease 2.2s forwards;
}