/* ==========================================================================
   MithilAI Editorial
   Generated from the active Novamira design system: "Erode Editorial".
   Token values mirror that design. Change the design system, then this file.
   ========================================================================== */

:root {
  /* Palette */
  --mi-charcoal: #111111;
  --mi-ivory:    #F4F1EA;
  --mi-graphite: #262626;
  --mi-stone:    #A6A29A;
  --mi-bronze:   #9B7A55;
  --mi-olive:    #69705B;

  /* Ground + ink, swapped by .mi-dark */
  --mi-bg:   var(--mi-ivory);
  --mi-ink:  var(--mi-charcoal);
  --mi-rule: rgba(17, 17, 17, 0.14);
  /* Muted ink is mixed from declared tokens, never a new hex.
     Graphite is the fallback where color-mix is unsupported.
     Mixed value clears WCAG AA on the ivory ground (4.7:1). */
  --mi-mute: var(--mi-graphite);

  /* Spacing */
  --mi-xs: 8px;
  --mi-sm: 16px;
  --mi-md: 32px;
  --mi-lg: 56px;
  --mi-xl: 104px;

  /* Shape: locked sharp */
  --mi-radius: 0px;

  /* Type */
  --mi-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mi-display: clamp(3rem, 10.6vw, 11.5rem);
  --mi-h2:      clamp(2.1rem, 5.2vw, 4.6rem);
  --mi-h3:      clamp(1.1rem, 1.6vw, 1.45rem);
  --mi-body:    1.125rem;
  --mi-small:   0.875rem;

  /* Motion */
  --mi-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  --mi-slow: 1.1s;
  --mi-med:  0.6s;
  --mi-fast: 0.28s;

  /* Measure */
  --mi-gutter: clamp(20px, 5vw, 92px);
  --mi-maxw:   1680px;
}

.mi-dark {
  --mi-bg:   var(--mi-charcoal);
  --mi-ink:  var(--mi-ivory);
  --mi-rule: rgba(166, 162, 154, 0.2);
  --mi-mute: var(--mi-stone);
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root { --mi-mute: color-mix(in srgb, var(--mi-charcoal) 64%, var(--mi-ivory)); }
  .mi-dark { --mi-mute: var(--mi-stone); }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.mi-section {
  position: relative;
  background: var(--mi-bg);
  color: var(--mi-ink);
  font-family: var(--mi-font);
  font-weight: 400;
  isolation: isolate;
  overflow: clip;
}

.mi-section *,
.mi-section *::before,
.mi-section *::after { box-sizing: border-box; }

.mi-shell {
  position: relative;
  width: 100%;
  max-width: var(--mi-maxw);
  margin-inline: auto;
  padding-inline: var(--mi-gutter);
}

/* Grain, dark grounds only. Sits under content, above ground. */
.mi-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Architectural grid: hairline verticals exposing the 12-col field. */
.mi-grid-rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-width: var(--mi-maxw);
  margin-inline: auto;
  padding-inline: var(--mi-gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 900px) {
  .mi-grid-rules { grid-template-columns: repeat(12, 1fr); }
}
.mi-grid-rules span { border-left: 1px solid var(--mi-rule); }
.mi-grid-rules span:first-child { border-left: 0; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.mi-display {
  font-family: var(--mi-font);
  font-weight: 800;
  font-size: var(--mi-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.mi-h2 {
  font-weight: 800;
  font-size: var(--mi-h2);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
}

.mi-body {
  font-size: var(--mi-body);
  line-height: 1.65;
  font-weight: 400;
  color: var(--mi-mute);
  max-width: 62ch;
  margin: 0;
}

.mi-label {
  font-size: var(--mi-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mi-mute);
  margin: 0;
}

.mi-accent { color: var(--mi-bronze); }

/* --------------------------------------------------------------------------
   Buttons: sharp, magnetic, no shadow
   -------------------------------------------------------------------------- */

.mi-btn {
  /* Charcoal, not ivory: ivory on bronze is 3.5:1 and fails WCAG AA. */
  --mi-btn-fg: var(--mi-charcoal);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  border-radius: var(--mi-radius);
  background: var(--mi-bronze);
  color: var(--mi-btn-fg);
  font-family: var(--mi-font);
  font-size: var(--mi-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--mi-fast) var(--mi-ease),
              background-color var(--mi-med) var(--mi-ease),
              color var(--mi-med) var(--mi-ease);
}

.mi-btn__label { position: relative; z-index: 1; display: block; }

/* Second layer revealed on hover */
.mi-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--mi-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--mi-med) var(--mi-ease);
}
.mi-btn:hover::after,
.mi-btn:focus-visible::after { transform: scaleY(1); }
.mi-btn:hover { color: var(--mi-bg); }
.mi-btn:focus-visible {
  color: var(--mi-bg);
  outline: 2px solid var(--mi-bronze);
  outline-offset: 3px;
}

.mi-btn--ghost {
  background: transparent;
  border-color: var(--mi-ink);
  color: var(--mi-ink);
}
.mi-btn--ghost::after { background: var(--mi-ink); }
.mi-btn--ghost:hover,
.mi-btn--ghost:focus-visible { color: var(--mi-bg); }

.mi-btn__arrow { position: relative; z-index: 1; transition: transform var(--mi-med) var(--mi-ease); }
.mi-btn:hover .mi-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Reveal primitive. Degrades to visible when JS never runs.
   -------------------------------------------------------------------------- */

.mi-js .mi-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--mi-slow) var(--mi-ease),
              transform var(--mi-slow) var(--mi-ease);
  transition-delay: var(--mi-delay, 0ms);
}
.mi-js .mi-reveal.is-in { opacity: 1; transform: none; }

/* Line-by-line display reveal */
.mi-line { display: block; overflow: hidden; }
.mi-line > span {
  display: block;
  will-change: transform;
}
.mi-js .mi-line > span {
  transform: translateY(105%);
  transition: transform var(--mi-slow) var(--mi-ease);
  transition-delay: var(--mi-delay, 0ms);
}
.mi-js .is-in .mi-line > span,
.mi-js .mi-line.is-in > span { transform: none; }

/* --------------------------------------------------------------------------
   Custom cursor. Pointer devices only.
   -------------------------------------------------------------------------- */

.mi-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--mi-bronze);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--mi-med) var(--mi-ease),
              width var(--mi-med) var(--mi-ease),
              height var(--mi-med) var(--mi-ease),
              margin var(--mi-med) var(--mi-ease),
              background-color var(--mi-med) var(--mi-ease);
}
.mi-cursor.is-live { opacity: 1; }
.mi-cursor.is-active {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  background: rgba(155, 122, 85, 0.14);
}
@media (hover: none), (pointer: coarse) { .mi-cursor { display: none; } }

/* --------------------------------------------------------------------------
   Reduced motion: collapse everything to static.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mi-js .mi-reveal,
  .mi-js .mi-line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mi-cursor { display: none; }
  .mi-section * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}