/* ───────── AK Engineering — Shared Styles ───────── */
:root { --grain-opacity: .035; }

html { scroll-behavior: smooth; }
html, body { background:#0A0908; color:#FAF7F2; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background:#E8C547; color:#0A0908; }

/* Film grain */
.grain::before{
  content:""; position:fixed; inset:-50%; pointer-events:none; z-index:60;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
}

/* Hero gradient mesh */
.mesh{
  position:absolute; inset:-20%; z-index:0; pointer-events:none; filter: blur(60px) saturate(120%);
  background:
    radial-gradient(40% 35% at 18% 28%, rgba(232,197,71,.55), transparent 70%),
    radial-gradient(45% 40% at 82% 18%, rgba(139,31,168,.55), transparent 70%),
    radial-gradient(40% 40% at 70% 80%, rgba(194,91,224,.32), transparent 70%),
    radial-gradient(30% 30% at 20% 80%, rgba(232,197,71,.30), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}

/* Reveal */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform: none; }
.reveal[data-delay="1"] { transition-delay:.06s }
.reveal[data-delay="2"] { transition-delay:.12s }
.reveal[data-delay="3"] { transition-delay:.18s }
.reveal[data-delay="4"] { transition-delay:.24s }
.reveal[data-delay="5"] { transition-delay:.30s }
.reveal[data-delay="6"] { transition-delay:.36s }
.reveal[data-delay="7"] { transition-delay:.42s }
.reveal[data-delay="8"] { transition-delay:.48s }

/* Marquee */
.marquee { display:flex; gap:3rem; width:max-content; animation: scroll 38s linear infinite; }
@keyframes scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Letter rise */
.rise > span { display:inline-block; transform: translateY(110%); opacity:0; animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { transform: translateY(0); opacity:1; } }

/* Cursor follower */
.cursor { position: fixed; top:0; left:0; width: 18px; height: 18px; border:1px solid rgba(232,197,71,.6); border-radius: 9999px; pointer-events: none; transform: translate(-50%,-50%); transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease; mix-blend-mode: difference; z-index: 70; }
.cursor.lg { width: 56px; height: 56px; background: rgba(232,197,71,.15); }
@media (hover:none) { .cursor { display:none; } }

/* Section helpers */
.hairline { background: linear-gradient(90deg, transparent, rgba(250,247,242,.18), transparent); height: 1px; width:100%; }

/* Card */
.card {
  position:relative; border:1px solid rgba(250,247,242,.08); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  border-radius: 20px; overflow:hidden; transition: border-color .4s ease, transform .4s ease, background .4s ease;
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .5s ease;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(232,197,71,.10), transparent 40%);
}
.card:hover { border-color: rgba(232,197,71,.35); transform: translateY(-2px); }
.card:hover::before { opacity: 1; }

/* Underline link */
.ul { background: linear-gradient(currentColor,currentColor) left bottom / 0% 1px no-repeat; transition: background-size .4s ease; padding-bottom:2px; }
.ul:hover { background-size: 100% 1px; }

/* Glass nav */
.glass { background: rgba(10,9,8,.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border:1px solid rgba(250,247,242,.08); }

/* Misc */
.num { font-variant-numeric: tabular-nums; }
.dot { width:6px; height:6px; border-radius: 9999px; background: #E8C547; box-shadow: 0 0 0 4px rgba(232,197,71,.18); }
a:focus-visible, button:focus-visible { outline: 2px solid #E8C547; outline-offset: 3px; border-radius: 6px; }
.vside{ writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .3em; }

/* Pulse */
.pulse{ width:8px; height:8px; border-radius:9999px; background:#E8C547; box-shadow:0 0 0 0 rgba(232,197,71,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(232,197,71,.55)} 70%{box-shadow:0 0 0 14px rgba(232,197,71,0)} 100%{box-shadow:0 0 0 0 rgba(232,197,71,0)} }

/* ACRES wash */
.acres-bg{
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(194,91,224,.18), transparent 60%),
    radial-gradient(60% 50% at 90% 100%, rgba(232,197,71,.10), transparent 60%),
    linear-gradient(180deg, #15110F, #0A0908);
}

/* ───────── Nav dropdown ───────── */
.nav-item { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 320px; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  background: rgba(10,9,8,.92); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(250,247,242,.10); border-radius: 18px; padding: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel { opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.nav-panel a { display:block; padding: 10px 12px; border-radius: 10px; color: #E8E1D5; transition: background .2s ease, color .2s ease; }
.nav-panel a:hover { background: rgba(232,197,71,.08); color: #E8C547; }
.nav-panel a small { display:block; color:#A8A29E; font-weight:400; }

/* ───────── Content article styles ───────── */
.prose-ak { color:#E8E1D5; }
.prose-ak h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 2.5rem 0 .9rem; color:#FAF7F2; }
.prose-ak h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.25; margin: 1.8rem 0 .6rem; color:#FAF7F2; }
.prose-ak p { margin: 0 0 1.1rem; font-size: 1.07rem; line-height: 1.75; color:#D7D0C2; }
.prose-ak strong { color:#FAF7F2; font-weight: 600; }
.prose-ak em { color:#E8C547; font-style: italic; }
.prose-ak a { color:#FFE08A; border-bottom: 1px solid rgba(255,224,138,.35); padding-bottom: 1px; transition: border-color .2s ease, color .2s ease; }
.prose-ak a:hover { color:#FFE08A; border-bottom-color:#FFE08A; }
.prose-ak ul, .prose-ak ol { margin: 0 0 1.4rem 1.4rem; }
.prose-ak ul li, .prose-ak ol li { margin-bottom: .55rem; color:#D7D0C2; line-height: 1.7; }
.prose-ak ul li::marker { color:#E8C547; }
.prose-ak ol li::marker { color:#C25BE0; font-variant-numeric: tabular-nums; }
.prose-ak blockquote { border-left: 2px solid #E8C547; padding: 0.4rem 0 0.4rem 1.4rem; margin: 1.6rem 0; color:#FAF7F2; }
.prose-ak code { background: rgba(232,197,71,.10); color:#E8C547; padding: .12rem .4rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: .92em; }
.prose-ak hr { border:none; border-top: 1px solid rgba(250,247,242,.10); margin: 2.5rem 0; }
.prose-ak table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; }
.prose-ak th, .prose-ak td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid rgba(250,247,242,.08); }
.prose-ak th { color:#FAF7F2; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.prose-ak td { color:#D7D0C2; font-size: .98rem; }

/* TOC sidebar */
.toc { position: sticky; top: 7.5rem; }
.toc a { display:block; padding: .4rem 0 .4rem .8rem; border-left: 1px solid rgba(250,247,242,.10); color:#A8A29E; font-size: .92rem; transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.active { color:#E8C547; border-left-color: #E8C547; }

/* Callout */
.callout { background: linear-gradient(180deg, rgba(232,197,71,.05), rgba(139,31,168,.04)); border: 1px solid rgba(250,247,242,.08); border-left: 3px solid #E8C547; border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; color:#E8E1D5; }
.callout strong { color:#E8C547; }

/* Mobile menu */
.mobile-menu { position:fixed; inset:0; background:rgba(10,9,8,.96); backdrop-filter: blur(20px); z-index: 90; opacity:0; pointer-events:none; transition: opacity .3s ease; }
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu nav a { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2rem, 7vw, 3rem); color:#FAF7F2; display:block; padding: .55rem 0; }
.mobile-menu nav a:hover { color:#E8C547; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mesh, .marquee, .rise > span { animation: none; }
  .rise > span { transform:none; opacity:1; }
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior: auto; }
  .pulse { animation: none; }
}