/* ─── FONTS ────────────────────────────────────────────── */
@font-face {
  font-family: 'Officer Sans';
  src: url('fonts/Officer-Sans-Web-Regular.woff2') format('woff2'),
       url('fonts/Officer-Sans-Web-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Officer Sans';
  src: url('fonts/Officer-Sans-Web-Bold.woff2') format('woff2'),
       url('fonts/Officer-Sans-Web-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* ─── SHARED THEME TOKENS ──────────────────────────────── */
/* Page-specific tokens (--card-accent-purple, --card-accent-blue, etc.)
   can still be overridden per page. Default accent/teal + caption live here. */
:root {
  --color-accent:             #22B4AD;
  --color-logo-tint:          #22B4AD;
  --logo-filter:              none;
  --color-caption:            #7E7B98;
  --color-bg:               #FCFCFA;
  --color-text:             #1b1b1b;
  /* Hamburger / moon (×) — fixed on light + dark */
  --color-nav-icon:         #8a8a8a;
  --color-drawer-link:      #A5A5A5;
  --color-text-secondary:   #2c2756;
  --color-card-bg:          #ffffff;
  --color-placeholder:      #f4f4f6;
  --color-placeholder-text: #bbbbbb;
  --color-divider:          #f0f0f0;
}

:root.dark-mode {
  --color-caption:            #D1D0D9;
  --color-bg:               #021022;
  --color-text:             #eaeaea;
  --color-nav-icon:         #8a8a8a;
  --color-drawer-link:      #A5A5A5;
  --color-text-secondary:   #eaeaea;
  --color-card-bg:          #2c2c2c;
  --color-placeholder:      #333333;
  --color-placeholder-text: #555555;
  --color-divider:          #2e2e2e;
  /* Default dark: white logo; case-study pages override via html.page-project */
  --logo-filter:            brightness(0) invert(1) brightness(0.886);
}

/* ─── BASE ──────────────────────────────────────────────── */
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Officer Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 300ms ease, color 300ms ease;
}

body {
  scrollbar-gutter: stable;
}

body.drawer-open {
  overflow: hidden;
}

/* Compensate fixed nav for scrollbar disappearing when drawer locks scroll */
body.drawer-open nav:not(.drawer-nav) {
  right: var(--scrollbar-width, 0px);
}

/* ─── INTRO / EXIT (shared: index + case-study pages) ───── */
@media (prefers-reduced-motion: no-preference) {
  [data-intro] {
    opacity: 0;
    transform: translateY(10px);
  }

  [data-intro].is-visible {
    animation: intro-in 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes intro-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-exiting {
  animation: exit-fade 400ms ease forwards !important;
  pointer-events: none;
}

@keyframes exit-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ─── NAV ──────────────────────────────────────────────── */
nav:not(.drawer-nav) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 105;
  padding: 32px 48px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

nav:not(.drawer-nav)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-bg);
  transition: background-color 300ms ease, right 300ms ease, opacity 300ms ease;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

nav:not(.drawer-nav) > * {
  position: relative;
  z-index: 1;
}

.logo {
  display: block;
  height: 48px;
  width: auto;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img {
  height: 100%;
  width: auto;
  display: block;
  filter: var(--logo-filter);
  transition: filter 300ms ease;
}

/* ─── NAV CONTROLS (moon + hamburger) ──────────────────── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.moon-btn {
  border-radius: 50%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-nav-icon);
  transition: color 200ms ease;
}

.moon-btn:hover {
  opacity: 1;
  color: var(--color-text);
}

.moon-btn__inner {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.moon-btn svg.moon-icon:not(.moon-icon--filled),
.moon-btn svg.sun-icon:not(.sun-icon--filled) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 220ms ease;
}

:root:not(.dark-mode) .moon-btn svg.moon-icon:not(.moon-icon--filled) { display: block; opacity: 1; }
:root:not(.dark-mode) .moon-btn svg.sun-icon:not(.sun-icon--filled)   { display: block; opacity: 0; pointer-events: none; }
:root.dark-mode       .moon-btn svg.moon-icon:not(.moon-icon--filled) { display: block; opacity: 0; pointer-events: none; }
:root.dark-mode       .moon-btn svg.sun-icon:not(.sun-icon--filled)   { display: block; opacity: 1; }

.moon-btn .moon-icon--filled,
.moon-btn .sun-icon--filled {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 300ms ease;
  fill: var(--color-nav-icon);
}

.moon-btn .sun-icon--filled                        { display: none; }
:root.dark-mode .moon-btn .moon-icon--filled        { display: none; }
:root.dark-mode .moon-btn .sun-icon--filled         { display: block; }
.moon-btn:hover .moon-icon--filled                  { opacity: 1; }
:root.dark-mode .moon-btn:hover .sun-icon--filled   { opacity: 1; }

/* ─── HAMBURGER ─────────────────────────────────────────── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  position: relative;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--color-nav-icon);
  border-radius: 1px;
  transform-origin: center;
  transition: background-color 300ms ease, opacity 200ms ease;
}

.hamburger:hover span {
  opacity: 0.85;
}

/* Open: collapse → first bar 45° → middle 135°. Easing on keyframes (per-segment), not linear between stops. */
@keyframes bar1-open {
  0% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  40%, 55% {
    transform: translateY(8px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  75% {
    transform: translateY(8px) rotate(45deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}
@keyframes bar2-open {
  0% {
    transform: rotate(0deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(0deg);
    /* Ease-out on 70%→100% (inverse of prior ease-in): quick start, decelerates into 135° */
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes bar3-open {
  0% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  40% {
    transform: translateY(-8px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    transform: translateY(-8px);
    opacity: 0;
  }
}

.hamburger.is-active span:nth-child(1) { animation: bar1-open 480ms forwards; }
.hamburger.is-active span:nth-child(2) { animation: bar2-open 480ms forwards; }
.hamburger.is-active span:nth-child(3) { animation: bar3-open 480ms forwards; }

/* Close: bar2 rotates down to meet bar1 (ease-in), then both rotate to horizontal together (ease-out), then bar3 drops in. */
@keyframes bar1-close {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  40% {
    transform: translateY(8px) rotate(45deg);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  70%, 85% {
    transform: translateY(8px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes bar2-close {
  0% {
    transform: rotate(135deg);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  40% {
    transform: rotate(45deg);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  70% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes bar3-close {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  85% {
    transform: translateY(-8px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.hamburger.is-closing span:nth-child(1) { animation: bar1-close 480ms forwards; }
.hamburger.is-closing span:nth-child(2) { animation: bar2-close 480ms forwards; }
.hamburger.is-closing span:nth-child(3) { animation: bar3-close 480ms forwards; }

/* ─── DRAWER ────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
  z-index: 103;
}

.dark-mode .drawer-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Top bar only — do not target <nav class="drawer-nav"> inside #drawer (would add a second scrim). */
/* When drawer is open, fade out the nav gradient fill so the single full-screen overlay dims logo + bar.
   Tie this to body.drawer-open so the dimming fades out in sync with the overlay, not instantly on close. */
.drawer-open nav:not(.drawer-nav)::before {
  left: 0;
  top: 0;
  bottom: 0;
  right: 312px;
  opacity: 0;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 312px;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform 300ms ease, background-color 300ms ease;
  z-index: 104;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 32px 8px;
  overflow-x: hidden;
}

.drawer.is-open { transform: translateX(0); }

.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 24px 0 0 24px;
}

.drawer-nav a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -2%;
  line-height: calc(1.2 * 1.15); /* +15% vs ~1.2 default */
  color: var(--color-drawer-link);
  text-decoration: none;
  text-align: left;
  overflow-wrap: break-word;
  padding: 10px 0;
  opacity: 1;
  transform: translateY(0);
  transition: color 150ms ease, opacity 360ms ease, transform 360ms ease;
}

.drawer-nav a:hover { color: var(--color-logo-tint, var(--color-accent)); }

.drawer-nav a[aria-current="page"] {
  color: #486967;
  font-weight: 700;
}

:root.dark-mode .drawer-nav a[aria-current="page"] {
  color: #B3FDF9;
}

/* Home is the first row; it sits under the full-width nav bar (nav z-index 102 > drawer 101), so taps
   hit the nav instead of the link. Push only the first item below the nav strip. */
.drawer-nav a:first-child {
  margin-top: 60px;
}

/* Keep links hidden while drawer is off-canvas to prevent one-frame flashes in Chrome. */
.drawer:not(.is-open) .drawer-nav a {
  opacity: 0;
  transform: translateY(4px);
}

/* Also hide links the moment is-open is applied, before is-animating-in can take effect.
   Higher specificity than is-animating-in rules, so this is the authoritative open-state default. */
.drawer.is-open .drawer-nav a {
  opacity: 0;
  transform: translateY(4px);
}

.drawer.is-open .drawer-nav a.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.drawer-nav.is-animating-in a {
  opacity: 0;
  transform: translateY(4px);
}

.drawer-nav.is-animating-in a.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.drawer-nav.is-animating-out a {
  opacity: 0;
  transform: translateY(0);
}

/* ─── TEXT LINKS ─────────────────────────────────────────── */
a {
  color: var(--color-logo-tint, var(--color-accent));
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  text-decoration-color: currentColor;
}

/* ─── PROJECT CASE STUDY PAGES ──────────────────────────── */
/* Use <html class="page-project"> on simple-investment-calc, sparkline, tracker.
   Add page-project--calc only on the calculator page (wider title margin + grid + phone frame). */

html.page-project {
  --proj-title-margin-bottom: 14px;
}

html.page-project.page-project--calc {
  --proj-title-margin-bottom: 56px;
}

html.dark-mode.page-project {
  --color-accent: #22B4AD;
  --color-logo-tint: #22B4AD;
  --logo-filter: brightness(1.15);
}

html.page-project .page-layout {
  padding: clamp(120px, 16vh, 180px) 72px 80px;
}

@media (min-width: 1201px) {
  html.page-project .page-layout {
    --project-content-width: calc(1470px - (72px + 262px) * 2);
    padding: clamp(120px, 16vh, 180px) max(0px, calc((100vw - var(--project-content-width)) / 2)) 80px
      max(0px, calc((100vw - var(--project-content-width)) / 2));
  }
}

html.page-project .proj-eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: #969696;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

html.page-project .proj-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -4%;
  color: var(--color-accent);
  margin-bottom: var(--proj-title-margin-bottom, 14px);
}

html.page-project .proj-copy p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

html.page-project .proj-copy p + p {
  margin-top: 20px;
}

html.page-project:not(.page-project--calc) .proj-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

html.page-project.page-project--calc .proj-body {
  display: grid;
  grid-template-columns: 1fr 334px;
  gap: 72px;
  align-items: start;
}

html.page-project.page-project--calc .calc-frame {
  background: #1a1a1a;
  border-radius: 43.95px;
  padding: 11.19px;
  width: 334px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 25.57px 51.15px rgba(0, 0, 0, 0.35),
    0 6.36px 12.73px rgba(0, 0, 0, 0.2);
  position: relative;
}

html.page-project.page-project--calc .calc-frame::before {
  content: '';
  position: absolute;
  top: 19.17px;
  left: 50%;
  transform: translateX(-50%);
  width: 100.68px;
  height: 29.56px;
  background: #1a1a1a;
  border-radius: 15.98px;
  z-index: 10;
  pointer-events: none;
}

html.page-project.page-project--calc .calc-screen {
  border-radius: 35.14px;
  overflow: hidden;
  width: 311.63px;
  height: 674.39px;
  background: white;
  position: relative;
}

html.page-project.page-project--calc .calc-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform: scale(0.7990430622);
  transform-origin: top left;
  border: none;
  display: block;
}

@media (max-width: 1200px) {
  html.page-project.page-project--calc .proj-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  html.page-project.page-project--calc .calc-frame {
    margin: 0 auto;
  }

  html.page-project .proj-eyebrow,
  html.page-project .proj-title,
  html.page-project .proj-copy,
  html.page-project .proj-figure {
    max-width: calc(100vw - 248px - 48px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  html.page-project .proj-eyebrow,
  html.page-project .proj-title,
  html.page-project .proj-copy,
  html.page-project .proj-figure {
    max-width: none;
  }
}

/* ─── RESPONSIVE: mobile nav + project pages ────────────── */
@media (max-width: 768px) {
  nav:not(.drawer-nav) {
    padding: 0 32px 24px 32px;
  }

  html.page-project .page-layout {
    padding: clamp(88px, 14vh, 120px) 24px 80px;
  }

  html.page-project .proj-title {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 40px;
  }

  .drawer {
    width: 100%;
    padding: 32px 24px;
  }

  .drawer-nav {
    align-items: center;
    margin-left: 0;
  }

  .drawer-nav a {
    text-align: center;
    padding: 10px 0;
  }
}