/* ==========================================================================
   MOIOKI — GLOBAL DESIGN SYSTEM (Foundation, Phase 1)
   Direction: premium / architectural / industrial / editorial.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --mk-ink:#14110d;
  --mk-panel:#1c1814;
  --mk-panel-2:#221d18;
  --mk-paper:#f6f4ef;
  --mk-paper-raised:#ffffff;
  --mk-ink-on-paper:#1a1815;
  --mk-graphite:#8b8579;
  --mk-line:rgba(20,17,13,.12);
  --mk-line-dark:rgba(246,244,239,.14);
  --mk-rust:#b5502d;
  --mk-rust-soft:#f2e2d8;
  --mk-good:#3f6b4a;
  --mk-warn:#a9781f;

  --mk-font-display:'Oswald', system-ui, sans-serif;
  --mk-font-body:'IBM Plex Sans', system-ui, sans-serif;
  --mk-font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --mk-h1: clamp(34px, 5vw, 64px);
  --mk-h2: clamp(26px, 3.4vw, 42px);
  --mk-h3: clamp(18px, 2vw, 22px);
  --mk-body: 16px;
  --mk-caption: 13px;

  --mk-container: 1440px;
  --mk-gutter: clamp(20px, 4vw, 64px);
  --mk-section-y: clamp(64px, 8vw, 128px);
  --mk-radius: 2px;
}

.mk{font-family:var(--mk-font-body);color:var(--mk-ink-on-paper);line-height:1.5;}
.mk *{box-sizing:border-box;}
.mk img{max-width:100%;display:block;}
.mk a{color:inherit;}

.mk-container{max-width:var(--mk-container);margin:0 auto;padding:0 var(--mk-gutter);}
.mk-section{padding:var(--mk-section-y) 0;}
.mk-section--dark{background:var(--mk-ink);color:var(--mk-paper);}
.mk-section--paper{background:var(--mk-paper);color:var(--mk-ink-on-paper);}

.mk-eyebrow{font-family:var(--mk-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-rust);margin:0 0 12px;}
.mk-h1{font-family:var(--mk-font-display);font-size:var(--mk-h1);font-weight:600;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0;}
.mk-h2{font-family:var(--mk-font-display);font-size:var(--mk-h2);font-weight:600;line-height:1.1;text-wrap:balance;margin:0;}
.mk-h3{font-family:var(--mk-font-display);font-size:var(--mk-h3);font-weight:600;text-transform:none;margin:0;}
.mk-body{font-size:var(--mk-body);color:inherit;opacity:.86;max-width:62ch;}
.mk-caption{font-family:var(--mk-font-mono);font-size:var(--mk-caption);letter-spacing:.02em;color:var(--mk-graphite);}

.mk-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mk-font-display);font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  padding:14px 26px;border:1px solid currentColor;border-radius:var(--mk-radius);
  background:transparent;cursor:pointer;text-decoration:none;transition:background .2s ease,color .2s ease;
}
.mk-btn--primary{background:var(--mk-rust);border-color:var(--mk-rust);color:var(--mk-paper);}
.mk-btn--primary:hover{background:#963f22;}
.mk-btn--ghost-dark{color:var(--mk-paper);}
.mk-btn--ghost-dark:hover{background:var(--mk-paper);color:var(--mk-ink);}
.mk-btn--ghost-light{color:var(--mk-ink);}
.mk-btn--ghost-light:hover{background:var(--mk-ink);color:var(--mk-paper);}
.mk-btn:focus-visible{outline:2px solid var(--mk-rust);outline-offset:2px;}

.mk-card{background:var(--mk-paper-raised);border:1px solid var(--mk-line);}
.mk-card--dark{background:var(--mk-panel);border:1px solid var(--mk-line-dark);color:var(--mk-paper);}

.mk-field{margin-bottom:18px;}
.mk-field label{display:block;font-family:var(--mk-font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mk-graphite);margin-bottom:6px;}
.mk-field input,.mk-field textarea{
  width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--mk-line);background:transparent;
  font-family:var(--mk-font-body);font-size:16px;color:inherit;
}
.mk-field input:focus,.mk-field textarea:focus{outline:none;border-bottom-color:var(--mk-rust);}
.mk-field--dark input,.mk-field--dark textarea{border-bottom-color:var(--mk-line-dark);}

.mk-grid{display:grid;gap:var(--mk-gutter);}
.mk-grid--2{grid-template-columns:repeat(2,1fr);}
.mk-grid--3{grid-template-columns:repeat(3,1fr);}
.mk-grid--4{grid-template-columns:repeat(4,1fr);}

@media(max-width:1024px){
  .mk-grid--4{grid-template-columns:repeat(2,1fr);}
  .mk-grid--3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .mk-grid--2,.mk-grid--3,.mk-grid--4{grid-template-columns:1fr;}
  .mk-section{padding:48px 0;}
}

.mk-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.mk-reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .mk-reveal{opacity:1;transform:none;transition:none;}
}