/*
 * Mugo Works landing page styles.
 *
 * Structure and copy transcribed from the authoritative, current source: the mugo-works-design
 * skill's supporting/Mugo Works Landing Page v3 Hybrid.dc.html ("the shipped landing page, v3
 * Hybrid, current" per the skill's own readme.md), cross-referenced against ui_kits/landing/
 * index.html ("the canonical recreation") for markup patterns. All color, font, spacing, and
 * effect values below read a --mw- token from tokens.css rather than a literal value — see
 * docs/adr/2026-08-27-mugo-works-design-token-layer.md.
 */

:root {
  color-scheme: dark;

  /* Layout-only values (fluid spacing). Not part of the skill's fixed 1440-reference tokens, so
   * these live here rather than in tokens.css — see
   * docs/adr/2026-08-27-mugo-works-design-token-layer.md for why tokens.css holds only color and
   * font values. Full responsive breakpoint work belongs to mugoworks-5dw.3; these clamps only
   * keep the reference layout from breaking below the 1440px design width in the meantime. */
  --mw-space-section-x: clamp(1.5rem, 6vw, 6.875rem);
}

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

body {
  background: var(--mw-surface-page);
  color: var(--mw-text-bright);
  font-family: var(--mw-font-display);
  margin: 0;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--mw-accent-green);
  text-decoration: none;
}

a:hover {
  color: var(--mw-accent-green-bright);
}

/* Shared eyebrow label — UPPERCASE wide-tracked mono wayfinding label (workshop voice). Green is
 * the default (used by "how we work"); every other eyebrow on the page is amber. */
.mw-eyebrow {
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-label);
  letter-spacing: var(--mw-track-label);
  color: var(--mw-accent-green);
}

.mw-eyebrow--amber {
  color: var(--mw-accent-amber);
}

/* Shared button — the only button style in the brand: green fill, dark text, 6px radius. */
.mw-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--mw-radius-button);
  font-size: 1.0625rem;
  font-weight: var(--mw-weight-bold);
  padding: 1.0625rem 1.875rem;
}

.mw-button--primary {
  background: var(--mw-accent-green);
  color: var(--mw-text-on-green-button);
}

.mw-button--primary:hover {
  background: var(--mw-accent-green-bright);
  color: var(--mw-text-on-green-button);
}

/* The M-peaks mark — the brand's monoline logo mark, reused at nav scale and story scale
 * (assets/mark-on-dark.svg, assets/mark-on-green.svg). Stroke reads a logo-ink token rather than
 * a literal hex, unlike site/favicon.svg, whose standalone fetch cannot resolve a custom
 * property. */
.mw-pine-mark {
  fill: none;
  flex-shrink: 0;
}

.mw-pine-mark__path {
  stroke: var(--mw-logo-ink-dark-ground);
  stroke-width: 2.2;
}

/* Contour lines — the only decorative motif on the brand site (readme.md VISUAL FOUNDATIONS).
 * On a dark ground they read the accent-green ink at the subtle opacity; on a green ground
 * (the story section) they read the brighter green ink at the on-green opacity. */
.mw-contour-line {
  fill: none;
  stroke: var(--mw-accent-green);
  stroke-opacity: var(--mw-contour-opacity-subtle);
  stroke-width: 1.2;
}

.mw-contour-line--on-green {
  stroke: var(--mw-accent-green-bright);
  stroke-opacity: var(--mw-contour-opacity-on-green);
}

/* ---------------------------------------------------------------------------------------------
 * Nav
 * ------------------------------------------------------------------------------------------- */

.mw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: var(--mw-nav-pad);
  border-bottom: var(--mw-hairline);
}

.mw-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Lowercase per docs/guide/terminology.md's wordmark exception: this span renders the company's
 * wordmark/logotype (paired with the mark, standing in for a lockup SVG), not prose about the
 * company, so "mugo works" here is correct and must not be Title Cased. */
.mw-nav__wordmark {
  font-weight: var(--mw-weight-bold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.mw-nav__menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.125rem;
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-label);
}

.mw-nav__link {
  color: var(--mw-text-bright);
}

.mw-nav__link:hover {
  color: var(--mw-accent-green);
}

.mw-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mw-text-body);
}

.mw-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mw-accent-green);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------------------------- */

.mw-hero {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: clamp(4rem, 10vw, 8.125rem) var(--mw-space-section-x) clamp(3.5rem, 9vw, 7.5rem);
  position: relative;
}

.mw-hero__title {
  font-weight: var(--mw-weight-bold);
  font-size: clamp(2.75rem, 7vw, var(--mw-type-hero));
  line-height: var(--mw-lh-hero);
  letter-spacing: var(--mw-track-hero);
}

.mw-hero__tagline {
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-subline);
  color: var(--mw-accent-green);
}

.mw-hero__lede {
  font-size: var(--mw-type-body-xl);
  line-height: var(--mw-lh-body);
  max-width: 40rem;
  color: var(--mw-text-body);
}

.mw-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.375rem;
  margin-top: 0.5rem;
}

.mw-hero__note {
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-micro);
  color: var(--mw-text-body);
}

.mw-hero__badge {
  position: absolute;
  top: 2.75rem;
  right: var(--mw-space-section-x);
  transform: rotate(var(--mw-badge-rotation));
  border: 1.5px solid var(--mw-accent-amber);
  border-radius: var(--mw-radius-none);
  color: var(--mw-accent-amber);
  font-family: var(--mw-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 0.625rem 0.875rem;
}

/* Below ~900px the fluid h1 (clamp(2.75rem, 7vw, ...)) wraps close enough to the top-right
 * corner that the absolutely-positioned badge grazes its first line (mugoworks-5dw.3 QA note).
 * Rather than chase the overlap with a shrinking offset, drop the badge into normal flex flow
 * as a kicker above the title — `order` moves it first without reordering the markup, and
 * `align-self: flex-start` stops it from stretching to the column's full width like the other
 * flex children. */
@media (max-width: 900px) {
  .mw-hero__badge {
    position: static;
    order: -1;
    align-self: flex-start;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Marquee — the page's one deliberate motion moment (readme.md VISUAL FOUNDATIONS: "one marquee
 * (linear infinite) is the only motion on the brand site").
 * ------------------------------------------------------------------------------------------- */

.mw-marquee {
  border-top: var(--mw-hairline);
  border-bottom: var(--mw-hairline);
  overflow: hidden;
  padding: 1.125rem 0;
  background: var(--mw-surface-card);
}

.mw-marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: mw-marquee 28s linear infinite;
}

@keyframes mw-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* The marquee is the brief's one deliberate motion moment, so it's also the one place this site
 * needs a reduced-motion fallback: freeze the track in place for anyone who's opted out of
 * motion at the OS level, without removing the (duplicated, still-readable) content. */
@media (prefers-reduced-motion: reduce) {
  .mw-marquee__track {
    animation-play-state: paused;
  }
}

.mw-marquee__item {
  font-family: var(--mw-font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  color: var(--mw-accent-amber);
  padding-right: 0.3em;
}

/* ---------------------------------------------------------------------------------------------
 * What we stand for
 * ------------------------------------------------------------------------------------------- */

.mw-beliefs {
  display: flex;
  flex-direction: column;
  padding: clamp(3rem, 7vw, 6.875rem) var(--mw-space-section-x) clamp(3rem, 7vw, 6.25rem);
  background: var(--mw-surface-brand-moment);
  border-top: var(--mw-hairline-on-green);
  border-bottom: var(--mw-hairline-on-green);
  color: var(--mw-text-bright);
}

.mw-beliefs > .mw-eyebrow {
  padding-bottom: 2.625rem;
}

.mw-belief {
  display: flex;
  align-items: baseline;
  gap: 2.5rem;
  padding: 2.125rem 0;
  border-top: var(--mw-hairline-on-green);
}

.mw-beliefs__list li:last-child {
  border-bottom: var(--mw-hairline-on-green);
}

.mw-belief__index {
  font-family: var(--mw-font-mono);
  font-size: 0.9375rem;
  color: var(--mw-accent-amber);
  flex-shrink: 0;
  width: 2.75rem;
}

.mw-belief__statement {
  font-weight: var(--mw-weight-bold);
  font-size: clamp(1.5rem, 3.5vw, var(--mw-type-statement));
  letter-spacing: var(--mw-track-statement);
  line-height: var(--mw-lh-statement);
}

/* ---------------------------------------------------------------------------------------------
 * How we work
 * ------------------------------------------------------------------------------------------- */

.mw-how {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: clamp(3.5rem, 8vw, 6.25rem) var(--mw-space-section-x) clamp(4rem, 9vw, 7.5rem);
  background: var(--mw-surface-card);
  border-top: var(--mw-hairline);
  border-bottom: var(--mw-hairline);
}

.mw-how__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mw-how__heading {
  font-weight: var(--mw-weight-bold);
  font-size: clamp(1.75rem, 4.5vw, var(--mw-type-h2));
  letter-spacing: var(--mw-track-h2);
  line-height: var(--mw-lh-h2);
  max-width: 56.25rem;
}

.mw-how__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.mw-how__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--mw-surface-page);
  border: var(--mw-hairline);
  border-radius: var(--mw-radius-card);
  padding: 2.125rem 2.25rem;
}

.mw-how__step {
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-label);
  color: var(--mw-accent-amber);
}

.mw-how__card-title {
  font-weight: var(--mw-weight-bold);
  font-size: var(--mw-type-h3);
}

.mw-how__card-copy {
  font-size: var(--mw-type-body);
  line-height: var(--mw-lh-body);
  color: var(--mw-text-body);
}

/* ---------------------------------------------------------------------------------------------
 * The story behind the name
 * ------------------------------------------------------------------------------------------- */

.mw-story {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5.625rem);
  padding: clamp(4rem, 9vw, 8.125rem) var(--mw-space-section-x);
  position: relative;
  overflow: hidden;
  background: var(--mw-surface-brand-moment);
  border-top: var(--mw-hairline-on-green);
  border-bottom: var(--mw-hairline-on-green);
  color: var(--mw-text-bright);
}

.mw-story__contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Below ~1220px the pine mark and copy wrap onto their own lines (mw-story is a wrapping flex
 * row), so the section grows much taller than the contour art's native 1440x620 (2.32:1)
 * landscape ratio. Stretched to `height: 100%` of that tall box, the viewBox's default
 * preserveAspectRatio ("meet") letterboxes the art down to a thin sliver lost in the middle of
 * the section. Constraining the SVG's own box to its native aspect ratio and anchoring it to the
 * top lets it scale down with the viewport instead of the section, so it stays a full-width,
 * undistorted band rather than shrinking to near-invisibility. Scoped to widths below the row
 * layout's breakpoint so the 1440px reference layout (where the box already tracks the art's
 * aspect ratio) is untouched. */
@media (max-width: 1220px) {
  .mw-story__contours {
    top: 0;
    bottom: auto;
    height: auto;
    aspect-ratio: 1440 / 620;
  }
}

.mw-story__mark {
  position: relative;
  flex-shrink: 0;
}

.mw-story__mark .mw-pine-mark__path {
  stroke: var(--mw-logo-ink-green-ground);
  stroke-width: 2;
}

.mw-story__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  max-width: 53.75rem;
}

.mw-story__latin {
  font-style: italic;
  color: var(--mw-accent-green);
}

.mw-story__lede {
  font-size: var(--mw-type-lead);
  line-height: var(--mw-lh-lead);
  font-weight: var(--mw-weight-medium);
  color: var(--mw-text-bright);
}

.mw-story__body {
  font-size: var(--mw-type-body-lg);
  line-height: var(--mw-lh-body);
  color: var(--mw-text-body-on-green);
}

/* ---------------------------------------------------------------------------------------------
 * From the works
 *
 * The v3 Hybrid canvas (.claude/skills/mugo-works-design/supporting/Mugo Works Landing Page v3
 * Hybrid.dc.html, id="product") lays this section out as a single non-wrapping flex row at its
 * 1440px reference width: content and map side by side, the row shrinking the two columns to fit
 * rather than wrapping. `flex-wrap: wrap` here defeated that: the flex-wrap line-breaking
 * algorithm decides whether an item fits *before* flex-shrink runs, using each item's hypothetical
 * (pre-shrink) main size — the copy's, clamped only by max-width, not by the space actually
 * available — so the row was judged not to fit and wrapped to a stacked layout at every viewport
 * width this project tests (375/900/1280/1440px), including the 1440px reference width itself
 * (mugoworks-5dw.5). Dropping the wrap and instead letting both columns flex-shrink (map included)
 * reproduces the canvas's fit-by-shrinking behavior at desktop widths; the stacked layout below
 * is scoped to the mobile breakpoint already established in this file (mugoworks-5dw.3).
 * ------------------------------------------------------------------------------------------- */

.mw-work-evidence {
  display: flex;
  gap: 5rem;
  align-items: center;
  padding: clamp(3.5rem, 8vw, 5.625rem) var(--mw-space-section-x);
  margin: 0 var(--mw-space-section-x) clamp(3.5rem, 8vw, 6.875rem);
  background: var(--mw-surface-card);
  border: var(--mw-hairline);
  border-radius: var(--mw-radius-panel);
}

@media (max-width: 900px) {
  .mw-work-evidence {
    flex-direction: column;
    align-items: stretch;
  }
}

.mw-work-evidence__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex-shrink: 1;
  max-width: 37.5rem;
}

.mw-work-evidence__title {
  font-weight: var(--mw-weight-bold);
  font-size: clamp(1.75rem, 4vw, var(--mw-type-h2-small));
  letter-spacing: var(--mw-track-h2);
  line-height: var(--mw-lh-h2);
}

.mw-work-evidence__copy {
  font-size: var(--mw-type-body-lg);
  line-height: var(--mw-lh-body);
  color: var(--mw-text-body);
}

.mw-work-evidence__status {
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-label);
  color: var(--mw-text-dim);
  margin-top: 0.25rem;
}

.mw-work-evidence__map {
  flex-shrink: 1;
  min-width: 12.5rem;
  width: min(26.25rem, 100%);
}

.mw-work-evidence__map-art {
  display: block;
  width: 100%;
  height: auto;
}

.mw-work-evidence__frame {
  fill: var(--mw-surface-page);
  stroke: var(--mw-border-base);
  stroke-width: 1.5;
}

.mw-work-evidence__contours {
  fill: none;
  stroke: var(--mw-accent-green);
  stroke-opacity: 0.18;
  stroke-width: 1.2;
}

/* The shipped / taking-shape pin legend: filled green pins mark shipped products, dashed amber
 * pins mark products still taking shape — readme.md VISUAL FOUNDATIONS: "Map pins: solid green =
 * done, dashed amber = planned." */
.mw-pin--shipped {
  fill: var(--mw-accent-green);
}

.mw-pin--taking-shape {
  fill: none;
  stroke: var(--mw-accent-amber);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.mw-work-evidence__legend {
  display: flex;
  gap: 1.25rem;
  font-family: var(--mw-font-mono);
  font-size: 0.6875rem;
  color: var(--mw-text-dim);
  margin-top: 0.625rem;
}

.mw-legend-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mw-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mw-legend-dot--shipped {
  background: var(--mw-accent-green);
}

.mw-legend-dot--taking-shape {
  background: none;
  border: 1.5px dashed var(--mw-accent-amber);
}

/* ---------------------------------------------------------------------------------------------
 * With partners
 * ------------------------------------------------------------------------------------------- */

.mw-partners {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5.625rem);
  padding: 1.25rem var(--mw-space-section-x) clamp(4rem, 9vw, 7.5rem);
}

.mw-partners__intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 35rem;
}

.mw-partners__title {
  font-weight: var(--mw-weight-bold);
  font-size: clamp(1.75rem, 4vw, var(--mw-type-h2-small));
  letter-spacing: var(--mw-track-h2);
  line-height: var(--mw-lh-h2);
}

.mw-partners__copy {
  font-size: var(--mw-type-body-lg);
  line-height: var(--mw-lh-body);
  color: var(--mw-text-body);
}

.mw-partners__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.375rem;
}

.mw-partners__list-item {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: var(--mw-type-benefit);
  line-height: var(--mw-lh-benefit);
  color: var(--mw-text-bright);
}

.mw-partners__list-arrow {
  font-family: var(--mw-font-mono);
  font-size: 0.875rem;
  color: var(--mw-accent-green);
  flex-shrink: 0;
}

.mw-partners__cta {
  font-size: 1.125rem;
  font-weight: var(--mw-weight-bold);
  color: var(--mw-accent-green);
}

.mw-partners__panel {
  flex-grow: 1;
  min-width: 18.75rem;
  background: var(--mw-surface-card);
  border: var(--mw-hairline);
  border-radius: var(--mw-radius-panel);
  padding: 2.75rem;
  color: var(--mw-text-bright);
  align-self: flex-start;
}

.mw-partners__panel-heading {
  font-weight: var(--mw-weight-bold);
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding-bottom: 1.875rem;
}

.mw-partners__panel-highlight {
  color: var(--mw-accent-green);
}

.mw-partners__panel-columns {
  display: flex;
  gap: 0;
  border-top: var(--mw-hairline);
}

.mw-partners__panel-column {
  flex: 1;
  padding-top: 1.375rem;
}

.mw-partners__panel-column:first-child {
  padding-right: 1.5rem;
  border-right: var(--mw-hairline);
}

.mw-partners__panel-column:last-child {
  padding-left: 1.5rem;
}

/* Below ~480px the panel's fixed `min-width: 18.75rem` (300px) can exceed the space left after
 * the section's own side padding, forcing the whole page wider than the viewport — and even
 * where it just fits, splitting the FOR YOU / FROM US copy into two ~90px-wide columns leaves
 * body copy so cramped that a single wide word can push past the column's edge. Neither gap was
 * caught by mugoworks-5dw.3's responsive pass, which didn't touch this section. Dropping the
 * min-width and stacking the columns (the divider rotates from a vertical rule to a horizontal
 * one) gives each column the panel's full width, matching how the rest of the page reflows at
 * narrow widths. Scoped below the phone breakpoint so the 1440px/1220px reference layout (where
 * the columns already have ample width) is untouched. */
@media (max-width: 480px) {
  .mw-partners__panel {
    min-width: 0;
  }

  .mw-partners__panel-columns {
    flex-direction: column;
  }

  .mw-partners__panel-column:first-child {
    padding-right: 0;
    padding-bottom: 1.375rem;
    border-right: none;
    border-bottom: var(--mw-hairline);
  }

  .mw-partners__panel-column:last-child {
    padding-left: 0;
  }
}

.mw-partners__panel-label {
  font-family: var(--mw-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--mw-accent-amber);
  padding-bottom: 0.5rem;
}

.mw-partners__panel-copy {
  font-size: var(--mw-type-body);
  line-height: 1.55;
  color: var(--mw-text-body);
}

/* ---------------------------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------------------------- */

.mw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2.125rem var(--mw-space-section-x);
  border-top: var(--mw-hairline);
  font-family: var(--mw-font-mono);
  font-size: var(--mw-type-mono-label);
  color: var(--mw-text-dim);
}

.mw-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.mw-footer__link {
  color: inherit;
}

.mw-footer__link:hover {
  color: var(--mw-accent-green);
}