/* The Modern Kitchen — minimal light tiles */

:root {
  --mk-ink: #232a26;
  --mk-sage: #5d7a5e;
  --mk-sage-soft: #eef3ee;
  --mk-bg: #ffffff;
  --mk-line: #d9e2d8;
  --mk-mut: #6f7a70;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3 { font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif; color: var(--mk-ink); }
h1 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: normal; letter-spacing: 0.02em; }
h2 { font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mk-sage); margin: 2.4rem 0 1rem; }
h3 { font-size: 1rem; margin: 0 0 0.3rem; }

p { margin: 0 0 1rem; }
a { color: var(--mk-sage); }
a:hover { color: #2f4a30; }

/* top strip */
.mk-top {
  border-bottom: 1px solid var(--mk-line);
  padding: 0.9rem 0;
}
.mk-top .wrap3 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.mk-top .site-id { font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mk-sage); text-decoration: none; }
.mk-top nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; margin: 0; padding: 0; }
.mk-top nav a { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--mk-ink); }
.mk-top nav a:hover { color: var(--mk-sage); }

.wrap3 { max-width: 1000px; margin: 0 auto; padding: 0 1.2rem; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; margin-top: 0.4rem; }
.tile {
  border-top: 3px solid var(--mk-sage);
  background: var(--mk-sage-soft);
  padding: 1rem 1.1rem 1.1rem;
}
.tile h3 { letter-spacing: 0.04em; }
.tile p { font-size: 0.88rem; color: var(--mk-ink); }
.tile .built { font-size: 0.8rem; color: var(--mk-mut); border-top: 1px dashed var(--mk-line); padding-top: 0.5rem; }
.tile .built b { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-sage); margin-bottom: 0.25rem; }

/* sauce lab */
.lab { background: var(--mk-sage-soft); border-radius: 10px; padding: 1.2rem 1.3rem; margin-top: 0.6rem; }
.lab ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.4rem 1.4rem; margin: 0; padding: 0; font-size: 0.88rem; }
.lab li { padding-left: 1.1rem; position: relative; }
.lab li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-sage); }

/* pdf strip */
.mk-pdf {
  margin-top: 2.4rem;
  border: 1.5px solid var(--mk-sage);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem;
  background: #fbfdfb;
}
.mk-pdf strong { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; color: var(--mk-sage); }
.mk-pdf p { margin: 0; font-size: 0.85rem; color: var(--mk-mut); flex: 1 1 260px; }
.mk-btn {
  background: var(--mk-sage); color: #fff; text-decoration: none;
  padding: 0.6rem 1.3rem; border-radius: 999px; font-size: 0.85rem;
}
.mk-btn:hover { background: #405741; }

/* note */
.mk-note { font-size: 0.85rem; color: var(--mk-mut); border-top: 1px solid var(--mk-line); margin-top: 2rem; padding-top: 1.2rem; }

/* footer */
.mk-foot { border-top: 1px solid var(--mk-line); margin-top: 2rem; padding: 1.6rem 0 2rem; font-size: 0.83rem; color: var(--mk-mut); }
.mk-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; margin: 0.5rem 0 0.6rem; padding: 0; }
.mk-foot a { color: var(--mk-ink); }

.page-head { padding: 2.2rem 0 0.4rem; }