/* Shared portfolio chrome & site-wide design consistency system.
   Applies consistent typography, container boundaries, button micro-interactions,
   surface border-radii, and reduced-motion resets across the entire portfolio. */

@font-face {
  font-family: 'Portfolio Display';
  src: url('/assets/fonts/arkcv/bricolage-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: 'Portfolio Display';
  src: url('/assets/fonts/arkcv/bricolage-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

:root {
  --project-display: 'Portfolio Display', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --project-reading: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --project-mono: 'DM Mono', 'Geist Mono', monospace;
  --project-heading: clamp(34px, 3.7vw, 54px);
  --project-subheading: clamp(22px, 2.2vw, 30px);
  --project-body: clamp(15px, 1.15vw, 17px);
  --project-space: 110px;
  --project-radius: 18px;
  --project-button-radius: 999px;
  --project-ink: #111212;
  --project-muted: #58616b;
  --project-border: #e2e4e8;
  --project-accent: #2457FF;
  --token-94d217a4-b19e-496f-a9f0-41c83f611b07: #707070;
}

.framer-1n3mzrv .framer-styles-preset-163ovsm,
.framer-1n3mzrv p,
.framer-esbcc0 .framer-1n3mzrv p {
  --framer-text-color: #707070 !important;
  color: #707070 !important;
}

/* Ensure semantic headings maintain precise zero-margin layout matching Framer design */
.framer-1nkgmoe p.framer-styles-preset-2lfg8k { margin: 0; }
.framer-1wh2zmo p.framer-styles-preset-1v53mqb { margin: 0; }
.framer-xanzq5 h3.framer-styles-preset-7q6rdi { margin: 0; }

/* ==========================================================================
   1. Unified Container Boundaries & Page Alignment Across ALL Routes
   ========================================================================== */
.ak .ak-wrap,
.igunu-story .wrap,
.kb-case-study .kb-wrap,
.sw-case-study.sw-case-study .framer-fka777,
.framer-1mtxyy5,
.framer-jgplzk {
  width: min(1280px, calc(100% - 112px)) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}

.sw-case-study.sw-case-study .framer-15aqhwa {
  padding-inline: 0 !important;
}

.sw-case-study.sw-case-study :is(.framer-fka777, .framer-n6ccy7) {
  gap: var(--project-space) !important;
}

.kb-case-study .kb-wrap {
  padding-inline: 0 !important;
}

/* ==========================================================================
   2. Typography System & Hierarchy Consistency
   ========================================================================== */
:is(.ak, .sw-case-study, .kb-case-study, .igunu-story) {
  font-family: var(--project-reading);
}

.ak :is(h1, h2, h3),
.sw-case-study :is(h1, h2, h3),
.kb-case-study :is(h1, h2, h3),
.igunu-story :is(h1, h2, h3) {
  font-family: var(--project-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  text-align: left;
}

.ak h2,
.sw-case-study .ChapterHeader > h2,
.sw-case-study .cs-heading h2,
.kb-case-study h2,
.igunu-story h2 {
  font-size: var(--project-heading) !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}

.sw-case-study.sw-case-study :is(.ChapterHeader > h2, .cs-heading h2) {
  font-size: var(--project-heading) !important;
  line-height: 1.15 !important;
  font-family: var(--project-display) !important;
}

.sw-case-study.sw-case-study :is(h1, h2, h3) {
  font-family: var(--project-display) !important;
}

/* IGUNU Flagship Title */
.igunu-story h1 {
  font-size: clamp(76px, 9.2vw, 132px);
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
}

.igunu-story h1 span {
  font-family: var(--project-display);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

/* Chapter Spacing */
.igunu-story :is(.story-section, .visual-system, .details-section, .comparison-section) {
  padding-top: var(--project-space) !important;
}
.igunu-story .hero {
  padding-top: 108px;
}

/* Eyebrows, Metadata Labels, Tags */
.igunu-story :is(.eyebrow, .guide-label),
.ak .ak-eyebrow,
.sw-case-study .ChapterHeader > div:first-child,
.kb-case-study .kb-eyebrow,
.framer-pt1129 p,
.framer-k3lm5r p,
.framer-1agqeaq p,
.framer-x9srd7 .framer-k3lm5r p {
  font-family: var(--project-reading) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Body Leads & Descriptive Text */
.igunu-story .story-lead,
.igunu-story .hero-bottom p,
.ak .ak-deck,
.kb-case-study .kb-lead {
  font-size: var(--project-body) !important;
  line-height: 1.7 !important;
  color: #343c45;
}

/* Page Sub-navigation indexes */
.igunu-story .project-index,
.ak .ak-index {
  font-family: var(--project-reading);
  font-size: 11px;
}

/* Captions & Annotations */
.igunu-story :is(.evidence-note, .compare-caption, .sample-caption),
.ak .ak-caption,
.sw-case-study .cs-screen figcaption,
.kb-case-study .kb-caption {
  font-family: var(--project-reading);
  font-size: 11px;
  line-height: 1.7;
  color: var(--project-muted);
}

.igunu-story .closing {
  text-align: left;
}
.igunu-story .closing > img {
  margin-left: 0;
}
.igunu-story .closing p {
  margin-left: 0;
}

/* ==========================================================================
   3. Buttons, Micro-Interactions & Focus States
   ========================================================================== */
.hero-bottom .button,
.closing .button,
.framer-download-resume-btn,
.framer-tg9meo-container a,
[data-framer-name='button'] a {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.hero-bottom .button:hover,
.closing .button:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

.hero-bottom .button:active,
.closing .button:active {
  transform: translateY(0) !important;
}

/* Focus visible styling for all interactive elements across the site */
:is(.ak, .sw-case-study, .kb-case-study, .igunu-story, body) :is(a, button, summary):focus-visible {
  outline: 2px solid var(--project-accent) !important;
  outline-offset: 3px !important;
}

/* Hover refinement on Home feature buttons */
.framer-1mtxyy5 .framer-YVcpB {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.framer-1mtxyy5 .framer-YVcpB:hover {
  opacity: 0.8 !important;
  transform: translateX(2px) !important;
}

/* ==========================================================================
   4. Image Framing & Surface Quality
   ========================================================================== */
.decision-visual img,
.observation img,
.depth-demo,
.brand-panel,
.type-panel,
.component-board {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--project-radius);
}

.decision-visual img,
.observation img {
  border-radius: 14px;
}

/* ==========================================================================
   5. Responsive Breakpoints & Mobile Polish
   ========================================================================== */
@media (max-width: 809.98px) {
  :root {
    --project-heading: 34px;
    --project-space: 80px;
  }
  .ak .ak-wrap,
  .igunu-story .wrap,
  .sw-case-study.sw-case-study .framer-fka777,
  .kb-case-study .kb-wrap,
  .framer-1mtxyy5,
  .framer-jgplzk {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
  }
  .igunu-story .hero {
    padding-top: 56px;
  }
  .igunu-story h1 {
    font-size: 70px;
    line-height: 1.05 !important;
  }
  .igunu-story h1 span {
    font-size: 34px;
  }
  .igunu-story .story-lead,
  .igunu-story .hero-bottom p {
    font-size: 16px;
  }

  /* IGUNU nav and footer mobile polish */
  .igunu-story .nav {
    height: 56px !important;
    padding: 0 20px !important;
    gap: 14px !important;
    font-size: 11px !important;
  }
  .igunu-story .nav .wordmark span {
    display: none !important;
  }
  .igunu-story footer.wrap {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
    font-size: 11px !important;
    justify-content: space-between !important;
  }

  /* IGUNU Decision DL mobile readability */
  .igunu-story .decision dl {
    grid-template-columns: 1fr !important;
    gap: 8px 0 !important;
  }
  .igunu-story .decision dt {
    font-size: 9px !important;
    margin-top: 10px !important;
  }
  .igunu-story .decision dd {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 600px) {
  :root {
    --project-heading: 30px;
    --project-space: 64px;
  }
}

/* ==========================================================================
   6. Comprehensive Reduced Motion Accessibility
   ========================================================================== */
@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;
  }
  :is(.ak, .sw-case-study, .kb-case-study, .igunu-story) :is(a, button, summary) {
    transition: none !important;
  }
  .framer-qU3Lj .framer-6sk12e,
  .framer-qU3Lj .framer-1cfkqbg > div,
  .identity-sheet,
  .floating-label,
  .motion-orbit,
  .layer-stack i {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }
}
/* Shared project-to-project navigation, above the existing portfolio footer. */
.project-pagination{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:28px 0 32px;border-top:1px solid #11121222;margin-top:32px;font:500 13px/1.6 'DM Mono',monospace;color:#111212}.project-pagination a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#111212!important;transition:color .2s}.project-pagination a:hover{color:#005ed9!important}.project-pagination a:focus-visible{outline:2px solid #005ed9;outline-offset:5px}
.igunu-story.igunu-story{display:block!important;width:100%!important;max-width:none!important}.igunu-story .project-pagination{padding-bottom:48px}.igunu-story .closing{padding-bottom:70px}
.portfolio-mobile-menu{position:fixed;top:48px;left:0;right:0;z-index:999;background:white;border-bottom:1px solid #c6c6c7;padding:20px;display:grid;gap:0}.portfolio-mobile-menu[hidden]{display:none}.portfolio-mobile-menu a{padding:16px;color:#111212;text-decoration:none;font:14px 'DM Mono',monospace;border-bottom:1px solid #eee}

/* Rounded contact icons retain the portfolio ink and circular button treatment. */
a.framer-1W99m:is([href^="mailto:"], [href^="tel:"]) p {
  font-size: 0 !important;
  line-height: 0 !important;
}
a.framer-1W99m:is([href^="mailto:"], [href^="tel:"]) p::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  transition: transform 160ms ease;
  mask: var(--contact-icon) center / contain no-repeat;
}
a.framer-1W99m[href^="mailto:"] { --contact-icon: url('/assets/icons/mail.svg?v=3'); }
a.framer-1W99m[href^="tel:"] { --contact-icon: url('/assets/icons/phone.svg?v=3'); }
a.framer-1W99m:focus-visible { outline: 2px solid #111212; outline-offset: 4px; }
a.framer-1W99m:is([href^="mailto:"], [href^="tel:"]):hover p::before {
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  a.framer-1W99m:is([href^="mailto:"], [href^="tel:"]) p::before { transition: none; }
}

/* Disabled previews on the case-study collection retain their original artwork. */
a[data-locked-project] { position: relative !important; cursor: not-allowed !important; }
.case-study-lock-badge { position:absolute; top:56px; right:16px; z-index:10; display:inline-flex; align-items:center; gap:7px; padding:9px 12px; background:#111212; color:#fff; border:1px solid #fff6; border-radius:6px; font:500 11px/1.3 'DM Mono',monospace; letter-spacing:.02em; pointer-events:none; }
.case-study-lock-badge svg { width:15px; height:15px; flex:none; }
@media(max-width:430px) { .case-study-lock-badge { top:48px; right:12px; padding:7px 9px; font-size:10px; } }

/* Mobile Touch Target Accessibility (WCAG 2.5.5 / 2.5.8) */
@media (max-width: 768px) {
  .project-pagination a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 6px;
    position: relative;
  }
  .project-pagination a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 44px;
  }
  .ak-index a,
  .project-index a,
  .cs-subnav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
  }
  .ak-index a::after,
  .project-index a::after,
  .cs-subnav a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 44px;
  }
}

/* Keep unpublished case studies out of the public listing, including hydration. */
.framer-1fx0h3y[hidden],
.framer-1fx0h3y:has(a[data-locked-project]) { display: none !important; }