/* monroe22 — brand tokens + site components.
   Source: brand/monroe22-brand-kit.html (v1.0). Retune colours/type here only. */

/* Archivo is a variable font: one file per subset covers 400–800. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette */
  --navy: #0b1630;      /* Ink Navy — text, rules */
  --blue: #1546e0;      /* Monroe Blue — actions, emphasis */
  --blue-dark: #0f35b0;
  --ion: #6a5cff;
  --arc: #34c3ff;
  --steel: #c9d3e0;
  --mist: #eef1f6;      /* ground */
  --white: #ffffff;
  --plasma-ground: #07112a;

  /* Roles */
  --bg: var(--mist);
  --surface: var(--white);
  --text: var(--navy);
  --muted: color-mix(in srgb, var(--navy) 62%, transparent);
  --accent: var(--blue);
  --rule: 2px solid var(--navy);
  --hair: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.55; font-weight: 400;
}
/* monroe22's own pages (not the demos): a soft plasma glow behind everything that slowly drifts. */
body.plasma-bg::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32% 30% at 78% 22%, color-mix(in srgb, var(--ion) 42%, transparent) 0%, transparent 70%),
    radial-gradient(20% 20% at 84% 30%, color-mix(in srgb, var(--arc) 38%, transparent) 0%, transparent 70%),
    radial-gradient(38% 32% at 18% 80%, color-mix(in srgb, var(--blue) 32%, transparent) 0%, transparent 70%),
    radial-gradient(22% 22% at 40% 45%, color-mix(in srgb, var(--arc) 16%, transparent) 0%, transparent 70%);
  animation: plasma-drift 28s ease-in-out infinite alternate;
}
@keyframes plasma-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-6%, 4%) rotate(8deg) scale(1.08); }
  100% { transform: translate(5%, -3%) rotate(-6deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { body.plasma-bg::before { animation: none; } }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--blue) 25%, transparent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.muted { color: var(--muted); }

/* — wordmark — */
.wordmark {
  font-weight: 800; letter-spacing: -0.055em; line-height: 1;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--blue); }
.on-dark .wordmark span, .wordmark.on-dark span { color: var(--arc); }
a.wordmark:hover { color: inherit; }

/* — site header — */
.site-header {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px; align-items: end; padding: 20px 0; border-bottom: var(--rule); font-size: 13px;
}
.site-header .wordmark { font-size: 22px; }
.site-header .contact { justify-self: start; display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 640px) {
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .site-header .location { justify-self: center; }
  .site-header .contact { justify-self: end; align-items: flex-end; }
}
/* Phones: wordmark and contact share the top row, location gets its own centred row underneath. */
@media (max-width: 639px) {
  .site-header { grid-template-columns: auto 1fr; }
  .site-header .contact { justify-self: end; align-items: flex-end; white-space: nowrap; }
  .site-header .location { grid-column: 1 / -1; order: 3; justify-self: center; }
}
@media (max-width: 639px) { .site-header .hide-sm { display: none; } }

/* — hero — */
.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  border-bottom: var(--rule);
}
.hero-copy {
  padding: clamp(32px, 6vw, 64px) clamp(0px, 3vw, 32px) clamp(32px, 6vw, 64px) 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 32px;
}
.hero-label { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: 0.06em; line-height: 1.2; }

/* Plasma — the brand's one expressive element. One per page. */
.plasma {
  position: relative; overflow: hidden; min-height: 280px; color: var(--mist);
  background:
    radial-gradient(50% 62% at 68% 40%, var(--ion) 0%, rgba(106, 92, 255, 0) 64%),
    radial-gradient(22% 30% at 74% 44%, #a8ecff 0%, rgba(52, 195, 255, 0) 72%),
    radial-gradient(75% 85% at 20% 90%, var(--blue) 0%, rgba(21, 70, 224, 0) 70%),
    var(--plasma-ground);
}
.plasma::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: var(--grain); pointer-events: none;
}
.plasma-caption {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1;
  display: flex; justify-content: space-between; gap: 12px;
}
@media (max-width: 839px) { .plasma { min-height: 200px; } }

/* Hero photo: the portrait, shown as-is on its own black studio backdrop. */
.hero-photo { position: relative; overflow: hidden; min-height: 440px; color: var(--mist);
  /* Matches the photo's own backdrop (bluer on the left) so its edges disappear. */
  background: linear-gradient(90deg, #020914, #04070b);
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
}
.hero-photo .plasma-caption { z-index: 1; }
@media (max-width: 639px) { .hero-copy { padding: 24px 0; } .hero-photo { min-height: 320px; } }

/* — project grid — */
.grid-cta { margin: 32px 0 12px; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px; margin: 0 0 56px;
}
.card {
  display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 20px; border: var(--rule);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-num { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.05em; color: var(--blue); }
.card-type { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #1fbf5a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1fbf5a 22%, transparent);
}
/* Public hosted demo: blue square with the same halo as the live dot. */
.public-mark {
  width: 9px; height: 9px; background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
/* Private hosted demo: red triangle. An SVG, since a box-shadow halo can't follow a triangle;
   the 15px box includes the 3px halo, so the negative margin keeps it the dot's 9px footprint. */
.private-mark { width: 15px; height: 15px; margin: -3px; overflow: visible; }
.private-mark .halo { fill: none; stroke: #e0302b; stroke-opacity: .22; stroke-width: 6; stroke-linejoin: round; }
.private-mark .fill { fill: #e0302b; }
.card h2 { font-size: 24px; margin: 28px 0 0; }
.card p { font-size: 15px; color: var(--muted); margin: 0; text-wrap: pretty; }
.card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 12px; border-top: var(--hair);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; letter-spacing: 0.02em; padding: 3px 9px; background: var(--mist); color: var(--navy); }
.card-cta { font-weight: 800; font-size: 14px; color: var(--blue); white-space: nowrap; }

.card:hover, .card:focus-visible { background: var(--navy); color: var(--mist); }
.card:hover p, .card:focus-visible p { color: color-mix(in srgb, var(--mist) 75%, transparent); }
.card:hover .card-num, .card:hover .card-cta,
.card:focus-visible .card-num, .card:focus-visible .card-cta { color: var(--arc); }
.card:hover .tag, .card:focus-visible .tag { background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); }
.card:hover .card-foot, .card:focus-visible .card-foot { border-top-color: color-mix(in srgb, var(--mist) 25%, transparent); }
.card:focus-visible { outline: 3px solid var(--arc); outline-offset: -3px; }

.empty { grid-column: 1 / -1; background: var(--surface); border: var(--rule); padding: 32px 20px; }

/* — footer — */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding: 20px 0 40px; border-top: var(--rule); font-size: 13px;
}
.site-footer .wordmark { font-size: 16px; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 800; font-size: 14px; line-height: 1.2;
  padding: 10px 16px; border: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); color: var(--white); }
.btn-secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-secondary:hover { background: color-mix(in srgb, var(--navy) 7%, transparent); color: var(--navy); }

/* — demo bar: sits on top of every hosted demo — */
.demo-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy); color: var(--mist); font-family: var(--font);
}
.demo-bar .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 56px; font-size: 13px;
}
.demo-bar .bar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.demo-bar .bar-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 16px; }
.demo-bar .wordmark { font-size: 18px; }
.demo-bar .wordmark span { color: var(--arc); }
.demo-bar .demo-title { color: color-mix(in srgb, var(--mist) 70%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The big centred "DEMO" label: the middle grid column, so it stays centred whatever is on either side. */
.demo-bar .demo-badge { font-size: 26px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--white); }
.demo-bar a.contact { color: var(--mist); text-decoration: none; white-space: nowrap; }
.demo-bar a.contact:hover { color: var(--arc); }
@media (max-width: 560px) {
  .demo-bar .demo-title, .demo-bar .c-name { display: none; }
  .demo-bar .demo-badge { font-size: 20px; letter-spacing: 0.1em; }
  .demo-bar .bar-right { flex-direction: column; align-items: flex-end; }
}

/* — desktop-only notice: add one to a demo that doesn't work on phones (see demos/_template) — */
.desktop-only-notice { display: none; }
@media (max-width: 760px) {
  .desktop-only-notice {
    display: flex; position: fixed; inset: 56px 0 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 32px 24px; text-align: center; background: var(--mist); color: var(--navy);
  }
  .desktop-only-notice h2 { font-size: 30px; letter-spacing: -0.03em; }
  .desktop-only-notice p { max-width: 320px; color: var(--muted); }
  body:has(.desktop-only-notice) { overflow: hidden; }
  body:has(.desktop-only-notice) > :not(.demo-bar):not(.desktop-only-notice) { display: none !important; }
}

/* — passcode gate: added by assets/js/demo-gate.js; while locked only the demo bar and gate show — */
html.m22-locked body > :not(.demo-bar):not(.m22-gate) { display: none !important; }
.m22-gate { display: none; }
html.m22-locked .m22-gate { display: flex; min-height: calc(100vh - 56px); align-items: center; justify-content: center; padding: 32px 16px; }
.m22-gate form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.m22-gate h2 { margin: 0; font-size: 30px; letter-spacing: -0.03em; }
.m22-gate p { margin: 0; color: var(--muted); }
.m22-gate input { font: inherit; font-size: 24px; font-weight: 700; letter-spacing: 0.3em; text-align: center; padding: 12px; border: var(--rule); background: var(--white); color: var(--navy); }
.m22-gate input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.m22-gate .m22-err { min-height: 1.5em; color: #c0262d; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }