/* ============================================================
   Matthew Media Solutions — "Editorial Light" theme
   Cream + ink + violet + lime · Swiss-modern editorial
   ============================================================ */

:root {
  --cream: #F3EFE7;
  --ink: #0B0B0B;
  --violet: #7C5CFF;
  --lime: #CDF34A;
  --muted: #6c6760;
  --line: rgba(0, 0, 0, 0.12);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  overflow-x: hidden;
}
.font-mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* offset anchor jumps for fixed nav */
section[id], header[id] { scroll-margin-top: 92px; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #e7e1d6; }
::-webkit-scrollbar-thumb { background: #c7bfb0; border-radius: 10px; }
::selection { background: var(--violet); color: #fff; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* marquee */
.marquee { display: flex; overflow: hidden; white-space: nowrap; }
.marquee-track { display: flex; gap: 2.5rem; padding-right: 2.5rem; animation: mx 36s linear infinite; will-change: transform; }
@keyframes mx { to { transform: translateX(-50%); } }

/* nav scrolled */
#nav { transition: background .3s, border-color .3s; }
#nav.scrolled { background: rgba(243,239,231,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }

/* arched image (rounded dome top, squared bottom) */
.arch { border-radius: 999px 999px 14px 14px; overflow: hidden; }

/* editorial big-list rows */
.row-link { transition: color .3s ease, padding-left .35s cubic-bezier(.22,1,.36,1); }
.row-link:hover { color: var(--violet); padding-left: 16px; }
.row-link:hover .row-arrow { opacity: 1; transform: translateX(0); }
.row-arrow { opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }

/* mobile menu */
#mobileMenu { transition: opacity .25s, transform .25s; }
#mobileMenu.hidden-menu { opacity: 0; transform: translateY(-12px); pointer-events: none; }

/* image hover zoom */
.zoom img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
.zoom:hover img { transform: scale(1.04); }

/* portfolio filter tabs */
.p-tab { transition: background .25s, color .25s, border-color .25s; }
.p-tab.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }