/* =============================================================
   Shared stylesheet for the company site.

   Deliberately dependency-free: no build step, no framework, no
   node_modules. Open any page directly from disk and it renders.
   That is the point — this folder is meant to be lifted out into
   its own repository once the content is settled, and a static
   site with one stylesheet moves without anything to reinstall.

   Visual direction is intentionally NOT Listavita's. The product
   has its own identity (teal, rounded, warm); a parent company
   that copied it would read as the same thing twice. This is
   monochrome and structural, with a single electric accent, and
   leans on scale and whitespace rather than colour.
   ============================================================= */

:root {
  color-scheme: light;
  --paper:       #F2F4F0;
  --surface:     #FFFFFF;
  --sunk:        #E7EBE3;
  --ink:         #0C110E;
  --ink-soft:    #525C55;
  --rule:        #DCE2D6;
  --rule-firm:   #BFC9B8;
  --accent:      #14683F;
  --accent-ink:  #FFFFFF;
  --warm:        #9C6B1E;
  /* Wood. Only the mark uses it. Light enough to stay warm rather than reading
     as brown-black, and kept off the text scale on purpose — it is a drawing
     colour, not an ink. */
  --bark:        #966B48;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:       #070A08;
    --surface:     #0E1310;
    --sunk:        #141B16;
    --ink:         #E9EFE9;
    --ink-soft:    #97A39A;
    --rule:        #1F2721;
    --rule-firm:   #303A32;
    --accent:      #46CE8A;
    --accent-ink:  #070A08;
    --warm:        #D9A34E;
  /* Lifted well past the light value. A mid-brown that works on paper turns
     into a smudge on a near-black ground — bark has to gain lightness in dark
     mode the same way the accent does. */
    --bark:        #C29B76;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* A single long word — an email address, a URL, "Technologies" at display
     size — is enough to widen the page and give the whole document a
     horizontal scrollbar. Breaking is always better than overflowing. */
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Rhythm ------------------------------------------------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.band { padding: clamp(36px, 7vw, 104px) 0; border-bottom: 1px solid var(--rule); }
.band--tight { padding: clamp(38px, 5vw, 60px) 0; }
.band--flush { border-bottom: 0; }

/* ---- Type --------------------------------------------------- */
h1, h2, h3 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 9.5vw, 6.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 5vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0 0 1.05em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.02rem, 3.2vw, 1.35rem); color: var(--ink-soft); max-width: 58ch; }

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 clamp(18px, 2.6vw, 30px);
  display: block;
}
.eyebrow--accent { color: var(--accent); }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Header ------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead__row {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  min-height: 66px;
  /* Wraps to a second line rather than squeezing the nav or pushing it off
     the edge. `margin-right: auto` on the wordmark keeps them apart on one
     line and is harmless once they are on two. */
  flex-wrap: wrap;
}
.wordmark {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: .95rem;
  /* Back to negative. This wordmark is mixed case ("Muppirala LLC"), where a
     display face wants its letters closed up; the positive tracking here was
     added for the all-caps INNOMAZE wordmark this site used to carry. */
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.wordmark__mark { width: 19px; height: 19px; flex: none; display: block; }
.wordmark__mark path[stroke] { stroke: currentColor; }
.masthead nav { display: flex; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; }
.masthead nav a {
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
}
.masthead nav a[aria-current="page"] { color: var(--ink); }
.masthead nav a:hover { color: var(--accent); }

/* ---- Hero --------------------------------------------------- */
.hero { padding: clamp(44px, 12vw, 200px) 0 clamp(32px, 8vw, 116px); }
.hero h1 { margin-bottom: clamp(22px, 3vw, 36px); }
.hero .lede { max-width: 52ch; }


/* ---- Product index ------------------------------------------
   Numbered because the list is meant to grow — the ordinal says
   "first of several", which a single unnumbered entry cannot. */
.index { border-top: 1px solid var(--ink); }
.entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(30px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.entry__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-top: .7em;
  font-variant-numeric: tabular-nums;
}
.entry__name {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 5.5vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 10px;
}
.entry__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.entry__body p { font-size: .97rem; color: var(--ink-soft); }
.entry--empty .entry__name { color: var(--ink-soft); font-weight: 700; }

/* ---- Wings --------------------------------------------------
   A division of the company, not a product. Given the one warm
   tone in the palette so it is distinguishable at a glance from
   an ordinary link or product entry. */
.wing__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  display: block;
  margin-bottom: 8px;
}
.entry__name .wing__sub {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---- Roadmap ------------------------------------------------
   Ordered by certainty rather than by date. A dated roadmap for
   work that has not started is a promise the company would have
   to keep; "shipping / building / direction" says the same thing
   about sequence while staying true about confidence. */
.horizon {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.horizon:first-child { border-top: 1px solid var(--ink); }
.horizon__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .4em;
}
.horizon__label b { display: block; color: var(--accent); font-weight: 500; }
.horizon h3 { margin-bottom: 10px; }
.horizon p { color: var(--ink-soft); font-size: .97rem; }

/* ---- Contact rows ------------------------------------------- */
.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid;
  grid-template-columns: minmax(130px, 200px) 1fr;
  gap: 6px 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.row__key {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.row__val { font-size: 1.02rem; font-weight: 600; }
.row__val .muted { color: var(--ink-soft); font-weight: 400; padding: 0 4px; }

/* ---- Column layouts ----------------------------------------- */
.split {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
}
.trio {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  /* `min(240px, 100%)` rather than a bare 240px. A hard track minimum wider
     than its container does not collapse — it overflows, and the whole page
     gains a horizontal scrollbar. Wrapping it in min() lets the track give way
     on a narrow screen, which is the one case a fixed minimum gets wrong. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.trio > div > h3 { margin-bottom: 10px; }
.trio > div > p { color: var(--ink-soft); font-size: .96rem; }

/* ---- Product entry ------------------------------------------ */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--ink);
  align-items: start;
}
.product__name {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 12px;
}
.product__status {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--surface);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--solid:hover { color: var(--accent-ink); opacity: .88; }

/* ---- Prose (legal pages) ------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: clamp(34px, 4vw, 52px) 0 12px; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { padding-left: 20px; margin: 0 0 1.05em; }
.prose li { margin-bottom: .5em; color: var(--ink-soft); }
.prose li strong { color: var(--ink); }

/* ---- Footer ------------------------------------------------- */
.foot { padding: clamp(44px, 6vw, 76px) 0 40px; background: var(--surface); border-top: 1px solid var(--rule); }
.foot__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: clamp(36px, 5vw, 56px);
}
.foot h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { font-size: .9rem; text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.foot ul a:hover { color: var(--accent); }
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .split, .product { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 34px 1fr; }
  .entry__body { grid-column: 2; }
  .row, .horizon { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  /* The footer's first column was an explicit 1.5fr next to an auto-fit
     track that could not get below 140px — together wider than the screen. */
  .foot__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  /* The numbered gutter costs 34px of a 335px line and earns nothing once the
     entries are stacked — the ordinal reads perfectly well above the name. */
  .entry { grid-template-columns: 1fr; gap: 10px; }
  .entry__body { grid-column: 1; }
  .entry__num { padding-top: 0; }

  /* Display type that has run out of room to be display type. Tracking is
     eased back because negative letter-spacing that flatters 6rem closes 2rem
     up into a block. */
  h1 { letter-spacing: -0.025em; }
  .entry__name { letter-spacing: -0.02em; }

  /* Buttons go full width and stack. Two 50%-width buttons on a narrow screen
     leave labels wrapping inside them, which reads as broken rather than as
     tight. */
  .linkrow { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }

  /* The wordmark is the one thing that must never wrap — it is a name. */
  .wordmark { font-size: .9rem; }
  .masthead nav { gap: 16px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}