/* Machwake block – the m6e.org brand, scoped to one card on dimlight.online.
   Everything here is namespaced under .mw so it cannot leak into the host page.
   Brand book: streams/machwake/brand/branding.md (v0.2, blueprint / test section).
   House style note: en dash only in this repo, never an em dash. */

@font-face{
  font-family:'MW Anybody';
  src:url(fonts/anybody-var-latin.woff2) format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'MW Plex Mono';
  src:url(fonts/plex-mono-400-latin.woff2) format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'MW Plex Mono';
  src:url(fonts/plex-mono-600-latin.woff2) format('woff2');
  font-weight:600;
  font-display:swap;
}

.mw{
  /* The machine is cold. The human is warm. Nothing else is warm. */
  --tunnel:#06182A;
  --chalk:#E6EDF3;
  --chalk-dim:#7D93A6;
  --sodium:#FFAE1A;
  --edge:rgba(230,237,243,.045);
  --edge-major:rgba(230,237,243,.085);
  --shear:-16deg;
  --f-display:'MW Anybody',system-ui,sans-serif;
  --f-mono:'MW Plex Mono',ui-monospace,Menlo,monospace;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(230,237,243,.14);
  border-radius:8px;
  background-color:var(--tunnel);
  /* A drafting lattice raked to the mark's own 16 degrees. The shear is what
     keeps this off the right angle that terminal aesthetics live on. */
  background-image:
    repeating-linear-gradient(74deg,var(--edge-major) 0 1px,transparent 1px 128px),
    repeating-linear-gradient(0deg, var(--edge-major) 0 1px,transparent 1px 128px),
    repeating-linear-gradient(74deg,var(--edge) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(0deg, var(--edge) 0 1px,transparent 1px 32px);
  color:var(--chalk);
  padding:clamp(24px,4vw,40px);
  margin-bottom:20px;
  transition:border-color .35s ease;
}

.mw.is-live{border-color:rgba(230,237,243,.28)}

/* The test section draws under the type and never over it. */
.mw__tunnel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.mw__body{position:relative;z-index:1}

/* ── wordlock ────────────────────────────────────────────────────────────
   The mark is not beside the name, it IS the name's M, and only "achwake"
   is typed. Every number here is measured – see the brand book before
   changing one. */
.mw__lockup{
  display:flex;
  align-items:baseline;
  --h:clamp(40px,7vw,68px);
  margin:0;
}
.mw__mark{
  flex:0 0 auto;
  width:calc(var(--h) * 1.1212);
  height:var(--h);
  margin-bottom:calc(var(--h) * -.1758);
  margin-right:calc(var(--h) * -.320);
  color:var(--chalk);
}
.mw__mark svg{display:block;width:100%;height:100%}
.mw__mark .node{fill:var(--sodium)}
.mw__word{
  font-family:var(--f-display);
  font-weight:800;
  font-variation-settings:'wdth' 125;
  font-size:calc(var(--h) / 1.28);
  letter-spacing:-.02em;
  line-height:1;
  display:inline-block;
  transform:skewX(var(--shear));
  transform-origin:0 100%;
  position:relative;
  bottom:calc(var(--h) * .17);
  color:var(--chalk);
}

/* Supplies the letter M to parsers and screen readers without putting it on
   screen twice. */
.mw__sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.mw__tagline{
  font-family:var(--f-mono);
  font-size:clamp(10px,1.4vw,12.5px);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chalk-dim);
  margin:8px 0 0;
}
.mw__tagline b{color:var(--sodium);font-weight:700}

.mw__lead{
  font-size:clamp(15px,1.9vw,17px);
  line-height:1.5;
  color:var(--chalk);
  margin:clamp(20px,3vw,28px) 0 0;
  max-width:56ch;
}

/* The product's invariant, verbatim. Not a feature list. */
.mw__manifesto{
  margin:clamp(20px,3vw,28px) 0 0;
  padding-left:18px;
  border-left:2px solid var(--sodium);
}
.mw__manifesto p{
  margin:0 0 3px;
  font-family:var(--f-display);
  font-weight:800;
  font-variation-settings:'wdth' 112;
  font-size:clamp(14px,1.7vw,18px);
  line-height:1.4;
  color:var(--chalk);
  transform:skewX(var(--shear));
  transform-origin:0 100%;
}

.mw__note{
  color:var(--chalk-dim);
  font-size:14.5px;
  line-height:1.55;
  margin:clamp(20px,3vw,28px) 0 0;
  max-width:60ch;
}

.mw__foot{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:clamp(20px,3vw,28px);
}

/* Said once, plainly. No "coming soon" badge: an apologetic label is the same
   weakness in different clothes. */
.mw__status{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--chalk-dim);
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(230,237,243,.2);
  padding:7px 13px;
  margin:0;
}
.mw__status::before{
  content:"";
  width:7px;height:7px;
  background:var(--sodium);
  transform:skewX(var(--shear));
}

.mw__link{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--chalk);
  text-decoration:none;
  border-bottom:1px solid rgba(230,237,243,.3);
  transition:border-color .2s ease,color .2s ease;
}
.mw__link::after{content:" \2192"}
.mw__link:hover{color:var(--sodium);border-bottom-color:var(--sodium)}
.mw__link:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}

@media (max-width:640px){
  .mw__lead{max-width:none}
}

/* Nothing moves for a visitor who asked for stillness: the script never starts,
   and the lattice above is all that remains. */
@media (prefers-reduced-motion: reduce){
  .mw__tunnel{display:none}
  .mw,.mw__link{transition:none}
}