/* ============================================================
   Market Wise Guide — "Editorial Terminal" design language
   Warm ink-on-cream, single cobalt accent, sharp edges,
   hairline rules, monospace data. Built for Tailwind CDN.
   ============================================================ */

:root{
  --paper:#F4F1E8;
  --paper-2:#EBE6D8;
  --surface:#FCFBF6;
  --ink:#16140E;
  --ink-2:#211E16;
  --accent:#1E3FD6;
  --accent-bright:#6E86FF;
  --line:rgba(22,20,14,.16);
  --line-soft:rgba(22,20,14,.09);
  --line-dark:rgba(244,241,232,.16);
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; background:var(--paper); color:var(--ink); }

/* Subtle paper grain — fixed, never on a scrolling container */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
main, header, footer{ position:relative; z-index:2; }

::selection{ background:var(--accent); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:rgba(22,20,14,.28); border:3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:rgba(22,20,14,.5); }

/* Keyboard focus — always visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.on-ink a:focus-visible, .on-ink button:focus-visible,
.on-ink input:focus-visible, .on-ink summary:focus-visible{
  outline-color:var(--accent-bright);
}

/* ---------- Signature: hairline corner ticks ---------- */
.tick{ position:relative; }
.tick::before, .tick::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
}
.tick::before{ top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.tick::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }

/* ---------- Animated text-link underline ---------- */
.ulink{ background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:left bottom;
  transition:background-size .35s cubic-bezier(.16,1,.3,1); padding-bottom:1px; }
.ulink:hover{ background-size:100% 1.5px; }

/* ---------- Card lift ---------- */
.lift{ transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background-color .3s, color .3s; }
.lift:hover{ transform:translateY(-4px); }

/* ---------- Buttons (tactile push) ---------- */
.btn{ transition:transform .12s ease, background-color .25s, color .25s, border-color .25s; }
.btn:active{ transform:translateY(1px); }

/* ---------- Ticker (one marquee per page) ---------- */
.ticker{ overflow:hidden; white-space:nowrap; }
.ticker__track{ display:inline-flex; gap:0; animation:ticker 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Long-form article prose ---------- */
.prose-mwg{ color:rgba(22,20,14,.82); font-size:1.075rem; line-height:1.8; }
.prose-mwg p{ margin:0 0 1.4em; max-width:68ch; }
.prose-mwg h2, .prose-mwg h3{ font-family:"Bricolage Grotesque",sans-serif; color:var(--ink);
  letter-spacing:-.02em; line-height:1.12; margin:2.2em 0 .7em; }
.prose-mwg h2{ font-size:1.9rem; font-weight:700; }
.prose-mwg h3{ font-size:1.4rem; font-weight:700; }
.prose-mwg h3::before{ content:""; display:inline-block; width:18px; height:3px;
  background:var(--accent); vertical-align:middle; margin-right:.6rem; transform:translateY(-4px); }
.prose-mwg a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose-mwg strong{ color:var(--ink); font-weight:700; }
.prose-mwg ul{ margin:0 0 1.4em 0; padding:0; list-style:none; max-width:68ch; }
.prose-mwg li{ position:relative; padding-left:1.4rem; margin-bottom:.55em; }
.prose-mwg li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:2px; background:var(--accent); }

/* ---------- Native disclosure (FAQ / details) ---------- */
details.acc{ border-top:1px solid var(--line); }
details.acc summary{ list-style:none; cursor:pointer; }
details.acc summary::-webkit-details-marker{ display:none; }
details.acc .acc__sign{ transition:transform .3s ease; }
details.acc[open] .acc__sign{ transform:rotate(45deg); }

/* ---------- Form controls ---------- */
input, textarea, select{ font-family:inherit; }
input::placeholder, textarea::placeholder{ color:rgba(22,20,14,.42); }
.on-ink input::placeholder, .on-ink textarea::placeholder{ color:rgba(244,241,232,.42); }

/* ---------- Utility ---------- */
.grain-grid{
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .ticker__track{ animation:none !important; }
}