/* ============================================================
   PROJECT MOCKUPS
   Each project is a floating device panel on a color field.
   The panel holds a real, scaled landing-page composition,
   no screenshots, so it stays crisp at any size and can be
   animated, themed and re-typed without re-exporting art.

   Structure:
     .mk            color field (per-project theme)
     .mk-panel      the floating device, tilted in 3D
     .mk-page       the composition inside it, 1200px design width
   The page is authored at 1200px and scaled by --mk-scale, so
   every type size inside is a real, considered value.
   ============================================================ */

.mk {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--mk-field, #14141a);
  isolation: isolate;
}
/* soft key light across the field, so the panel sits IN something */
.mk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 30% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}
/* grain: kills banding on the big color fields */
.mk::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.mk-panel {
  position: relative;
  width: 78%;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--mk-paper, #fff);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 18px 40px -12px rgba(0, 0, 0, 0.5),
    0 60px 120px -40px rgba(0, 0, 0, 0.75);
  transform: perspective(1600px) rotateX(6deg) rotateY(-11deg) rotateZ(0.6deg);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-soft);
}
/* glass: a single raking highlight down the panel face */
.mk-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.22) 0%, transparent 32%, transparent 68%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
  z-index: 5;
}

/* browser chrome on the panel */
.mk-bar {
  height: 4.2%;
  min-height: 14px;
  background: var(--mk-chrome, #eceae6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding-inline: 0.9em;
  position: relative;
  z-index: 2;
}
.mk-bar i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}
.mk-bar span {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-martian);
  font-size: 0.42em;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.38);
  transform: translateX(-1em);
}

/* the composition itself, authored at 1200px wide */
.mk-view {
  position: absolute;
  inset: 0;
  top: 4.2%;
  overflow: hidden;
}
.mk-page {
  width: 1200px;
  transform-origin: 0 0;
  transform: scale(var(--mk-scale, 0.42));
  background: var(--mk-paper, #fff);
  color: var(--mk-ink, #16151a);
  font-family: var(--mk-font, var(--font-familjen));
}

/* ---------- shared composition primitives ---------- */
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 56px;
}
.mk-logo {
  font-family: var(--mk-display, var(--font-familjen));
  white-space: nowrap;
  font-size: 21px;
  letter-spacing: var(--mk-logo-track, 0.24em);
  text-transform: uppercase;
  font-weight: 500;
}
.mk-links {
  display: flex;
  white-space: nowrap;
  gap: 34px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
}
.mk-pill {
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mk-h1 {
  font-family: var(--mk-display, var(--font-familjen));
  font-size: var(--mk-h1, 92px);
  line-height: 0.94;
  letter-spacing: var(--mk-h1-track, -0.04em);
  font-weight: var(--mk-h1-weight, 400);
  text-wrap: balance;
}
.mk-lede {
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.66;
  max-width: 30em;
  text-wrap: pretty;
}
.mk-eyebrow {
  font-family: var(--font-martian);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.5;
}
.mk-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 12px;
  background: var(--mk-accent, #16151a);
  color: var(--mk-accent-ink, #fff);
  padding: 16px 30px;
  border-radius: var(--mk-radius, 999px);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mk-cta-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.62;
}
.mk-rule { height: 1px; background: currentColor; opacity: 0.14; }

/* ---------- footer ---------- */
.mk-foot {
  margin-top: 70px;
  border-top: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 14%, transparent);
  padding: 44px 56px 34px;
}
.mk-foot-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: start;
}
.mk-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, auto));
  gap: 52px;
}
.mk-foot-h {
  font-family: var(--font-martian);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.42;
  margin-bottom: 12px;
}
.mk-foot-i {
  font-size: 14px;
  opacity: 0.66;
  line-height: 1.85;
}
.mk-foot-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--font-martian);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.4;
}
.mk-fill { background: var(--mk-tint, rgba(0, 0, 0, 0.06)); }

/* Image wells. Layered light rather than a placeholder swatch: a
   base wash, a key light, a soft subject mass and a vignette. Reads
   as a shallow-depth photograph at thumbnail size, which is exactly
   how it will be read. Swap in real photography by setting a
   background-image on .mk-img, everything else still applies. */
.mk-img {
  position: relative;
  overflow: hidden;
  background-color: var(--img-base, #cfc9bf);
  background-image:
    radial-gradient(105% 78% at 50% 122%, rgba(0, 0, 0, 0.5), transparent 55%),
    radial-gradient(38% 30% at calc(var(--img-x, 52%) + 22%) calc(var(--img-y, 58%) - 26%), var(--img-key, rgba(255, 255, 255, 0.5)), transparent 70%),
    radial-gradient(52% 46% at var(--img-x, 52%) var(--img-y, 58%), var(--img-subject, rgba(255, 255, 255, 0.42)), transparent 74%),
    radial-gradient(90% 66% at 22% 2%, var(--img-key, rgba(255, 255, 255, 0.5)), transparent 58%),
    linear-gradient(168deg, var(--img-a, #d6d0c6) 0%, var(--img-b, #a89f92) 54%, var(--img-c, #6f675c) 100%);
  background-size: cover;
  background-position: center;
}
/* film grain, scaled so it never tiles visibly */
.mk-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* portrait crops sit the subject higher, as a photographer would */
.mk-img[data-crop="portrait"] { --img-y: 44%; }
.mk-img[data-crop="low"] { --img-y: 72%; }
.mk-img[data-crop="left"] { --img-x: 34%; }
.mk-img[data-crop="right"] { --img-x: 68%; }

/* ============================================================
   Project color fields + type themes
   ============================================================ */
.mk[data-project="maison"] {
  --mk-field: #b8b0a4;
  --mk-paper: #f6f3ee;
  --mk-ink: #1a1713;
  --mk-accent: #1a1713;
  --mk-display: "Cormorant", Georgia, serif;
  --mk-h1: 104px;
  --mk-h1-track: -0.02em;
  --mk-radius: 0;
}
.mk[data-project="ledgerline"] {
  --mk-field: #10131c;
  --mk-paper: #0e1018;
  --mk-ink: #e8ecf5;
  --mk-chrome: #171b26;
  --mk-accent: #6fb7ff;
  --mk-accent-ink: #06080f;
  --mk-tint: rgba(255, 255, 255, 0.05);
  --mk-well-a: rgba(255, 255, 255, 0.07);
  --mk-well-b: rgba(255, 255, 255, 0.025);
  --mk-h1: 74px;
  --mk-radius: 8px;
}
.mk[data-project="barrow"] {
  --mk-field: #6b4b33;
  --mk-paper: #f3ece1;
  --mk-ink: #2a1d12;
  --mk-accent: #8a5a33;
  --mk-display: "Cormorant", Georgia, serif;
  --mk-h1: 96px;
  --mk-radius: 0;
}
.mk[data-project="sable"] {
  --mk-field: #1b1a17;
  --mk-paper: #14130f;
  --mk-ink: #ece5d6;
  --mk-chrome: #1e1c17;
  --mk-accent: #c2a26a;
  --mk-accent-ink: #14130f;
  --mk-tint: rgba(255, 255, 255, 0.05);
  --mk-well-a: rgba(255, 255, 255, 0.07);
  --mk-well-b: rgba(255, 255, 255, 0.02);
  --mk-display: "Cormorant", Georgia, serif;
  --mk-h1: 100px;
  --mk-radius: 0;
}
.mk[data-project="meridian"] {
  --mk-field: #8d9a95;
  --mk-paper: #fbfaf8;
  --mk-ink: #1c211f;
  --mk-accent: #2f4a41;
  --mk-h1: 84px;
  --mk-radius: 2px;
}
.mk[data-project="forge"] {
  --mk-field: #d8452e;
  --mk-paper: #101010;
  --mk-ink: #f5f2ee;
  --mk-chrome: #171717;
  --mk-accent: #ff4d2d;
  --mk-accent-ink: #101010;
  --mk-tint: rgba(255, 255, 255, 0.06);
  --mk-well-a: rgba(255, 255, 255, 0.08);
  --mk-well-b: rgba(255, 255, 255, 0.025);
  --mk-h1: 108px;
  --mk-h1-track: -0.05em;
  --mk-h1-weight: 600;
  --mk-radius: 2px;
}
.mk[data-project="ravine"] {
  --mk-field: #2a2440;
  --mk-paper: #0d0b14;
  --mk-ink: #efeaff;
  --mk-chrome: #14111f;
  --mk-accent: #9f7dff;
  --mk-accent-ink: #0d0b14;
  --mk-tint: rgba(255, 255, 255, 0.06);
  --mk-well-a: rgba(255, 255, 255, 0.08);
  --mk-well-b: rgba(255, 255, 255, 0.025);
  --mk-h1: 96px;
  --mk-radius: 999px;
}
.mk[data-project="halden"] {
  --mk-field: #4a4f55;
  --mk-paper: #f2f2f0;
  --mk-ink: #17191c;
  --mk-accent: #e8b23c;
  --mk-accent-ink: #17191c;
  --mk-h1: 88px;
  --mk-h1-weight: 600;
  --mk-h1-track: -0.045em;
  --mk-radius: 0;
}

/* image tone per project, the photography that would ship with it */
.mk[data-project="maison"] .mk-img { --img-a:#e4ded4; --img-base:#f0ebe2; --img-b:#c9c0b2; --img-c:#7d7365; --img-key:rgba(255,255,255,.55); --img-subject:rgba(226,214,198,.5); }
.mk[data-project="ledgerline"] .mk-img { --img-a:#131722; --img-base:#1b2333; --img-b:#101521; --img-c:#05070c; --img-key:rgba(111,183,255,.28); --img-subject:rgba(90,140,220,.34); }
.mk[data-project="barrow"] .mk-img { --img-a:#cbb79c; --img-base:#e0d0b6; --img-b:#9d7f5c; --img-c:#4a3726; --img-key:rgba(255,236,204,.5); --img-subject:rgba(214,176,128,.45); }
.mk[data-project="sable"] .mk-img { --img-a:#2a241b; --img-base:#3a3025; --img-b:#1b1610; --img-c:#0a0806; --img-key:rgba(230,190,120,.34); --img-subject:rgba(194,162,106,.4); }
.mk[data-project="meridian"] .mk-img { --img-a:#c3cdd0; --img-base:#dde5e6; --img-b:#8fa3a6; --img-c:#4f6165; --img-key:rgba(255,255,255,.6); --img-subject:rgba(190,214,218,.5); }
.mk[data-project="forge"] .mk-img { --img-a:#2a1410; --img-base:#41201a; --img-b:#180b09; --img-c:#070303; --img-key:rgba(255,110,70,.32); --img-subject:rgba(216,69,46,.42); }
.mk[data-project="ravine"] .mk-img { --img-a:#241d3a; --img-base:#332a52; --img-b:#160f26; --img-c:#07040d; --img-key:rgba(159,125,255,.32); --img-subject:rgba(120,95,210,.4); }
.mk[data-project="halden"] .mk-img { --img-a:#b9b7b1; --img-base:#d2d0c9; --img-b:#8c8a84; --img-c:#4a4945; --img-key:rgba(255,255,255,.5); --img-subject:rgba(232,178,60,.28); }


/* ============================================================
   Composition primitives for the rebuilt work.
   These exist so each project can commit to ONE structural idea
   rather than all eight sharing a nav-hero-grid-footer skeleton.
   ============================================================ */

/* type that runs up the side of a page, editorial spine */
.mk-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-martian);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}
/* headline knocked through whatever sits behind it */
.mk-knock { mix-blend-mode: difference; color: #fff; }
/* type that runs past the edge of the page, as posters do */
.mk-bleed { white-space: nowrap; letter-spacing: -0.055em; }
/* a hairline grid, visible as structure rather than decoration */
.mk-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, currentColor 9%, transparent) 0 1px, transparent 1px 8.3333%);
}
/* circular stamp, packaging language */
.mk-stamp {
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-martian);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.7;
}
/* overlap layer: lets a headline sit across an image edge */
.mk-layer { position: relative; z-index: 2; }
.mk-under { position: relative; z-index: 1; }