/* Mana Dork Labs — shared stylesheet.
   The home page (index.html) and the content pages both draw from this file.
   Everything above the "Content pages" divider is the original holding-page
   styling, moved here unchanged so index.html renders exactly as it did. */

:root{
  --ink:#0b0d0b;
  --cream:#ede7d8;
  --dim:#a9a496;
  --verdigris:#4f8f74;
  --verdigris-lo:#2c4f42;
  --lichen:#7a8078;
  --rule:#242a22;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:"Jura","Trebuchet MS",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:13px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;
}

/* Verdigris bloom behind the mark, plus a fine mesh over everything. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 55% at 50% 44%, rgba(79,143,116,.16), rgba(79,143,116,.04) 45%, transparent 72%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(237,231,216,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(237,231,216,.028) 0 1px, transparent 1px 4px);
}
.bar, .stage, .page{position:relative;z-index:1}

.micro{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lichen);margin:0;
}

.bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px}
.bar--top{flex:0 0 auto;z-index:10}
.bar--bottom{flex:0 0 auto;justify-content:space-between}

.stage{
  flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(20px,4vh,32px) 28px clamp(24px,5vh,44px);text-align:center;
}

/* "The Grid" from the wordmark experiments. MANA, DORK and LABS are each
   four letters, so the name stacks into a 4x3 block and the first column
   reads MDL straight down. Jura at 300 is monoline, so every stroke is the
   same width, which is what Roboto Flex could not do. Columns sit at 1.75x
   Jura's widest glyph (0.767em), the "open" step. Glyph size scales against
   viewport height as well as width so the bottom bar is never pushed off. */
.mark{
  --f:clamp(30px, min(11vw, 11.4vh), 118px);
  --cw:calc(var(--f) * 1.342);
  --rh:calc(var(--f) * 1.34);
  display:grid;grid-template-columns:repeat(4, var(--cw));
  position:relative;
}
.mark .cell{
  width:var(--cw);height:var(--rh);
  display:grid;place-items:center;
  font-family:var(--wide);font-weight:300;
  font-size:var(--f);color:var(--cream);line-height:1;
}
.mark .cell.key{color:var(--verdigris)}
.mark .colrule{
  position:absolute;top:calc(var(--rh) * -.08);bottom:calc(var(--rh) * -.08);
  left:var(--cw);width:1px;background:var(--verdigris-lo);
}

.tagline{
  margin:clamp(30px,5.5vh,52px) 0 0;font-size:clamp(13px,1.5vw,15px);
  color:var(--cream);line-height:1.75;max-width:58ch;text-wrap:balance;
}

.chips{
  display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;margin:clamp(22px,3.6vh,34px) 0 0;padding:11px 20px;
  border:1px solid var(--rule);
}
.chips b{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.chips b::before{content:"";display:inline-block;width:5px;height:5px;background:var(--verdigris);margin-right:9px;vertical-align:middle}
.chips s{text-decoration:none;color:var(--rule)}

.contact{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verdigris);text-decoration:none;white-space:nowrap;
  border:1px solid var(--rule);padding:11px 18px;
}
.contact:hover{color:var(--cream);border-color:var(--lichen)}

/* ------------------------------------------------------------------ */
/* Content pages                                                       */
/* ------------------------------------------------------------------ */

/* Brand block in the top bar. On the home page the bar shows plain text;
   everywhere else it is the link back to the wordmark. */
.brand{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;white-space:nowrap;
}
.brand::before{
  content:"";display:inline-block;width:5px;height:5px;
  background:var(--verdigris);margin-right:10px;vertical-align:middle;
}
.brand:hover{color:var(--verdigris)}

/* Desktop: a plain row. The checkbox and its button are inert until the
   mobile breakpoint switches them on. */
.menu{position:relative}
.menu-toggle,.menu-button,.menu-scrim{display:none}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.nav a{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lichen);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--cream)}
.nav a[aria-current="page"]{color:var(--verdigris);border-bottom-color:var(--verdigris-lo)}

.page{
  flex:1 1 auto;width:100%;max-width:760px;margin:0 auto;
  padding:clamp(28px,6vh,64px) 28px clamp(40px,7vh,72px);
}

.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--verdigris);margin:0 0 18px;
}
.page h1{
  font-family:var(--wide);font-weight:300;letter-spacing:.02em;
  font-size:clamp(30px,5.6vw,52px);line-height:1.1;margin:0;color:var(--cream);
}
.lede{
  margin:26px 0 0;font-size:15px;line-height:1.75;color:var(--cream);
  text-wrap:pretty;
}
.page h2{
  font-family:var(--wide);font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  font-size:15px;color:var(--verdigris);
  margin:56px 0 20px;padding-top:22px;border-top:1px solid var(--rule);
}
.page h3{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);margin:32px 0 12px;
}
/* Justified prose. Space Mono is monospace, so the spaces between words can
   only stretch in whole-character steps -- hyphenation keeps that from
   opening rivers down a narrow column. */
.page p{
  margin:0 0 18px;color:var(--dim);
  text-align:justify;hyphens:auto;
}
.page p strong{color:var(--cream);font-weight:700}
.page em{color:var(--cream);font-style:italic}
.page a{color:var(--verdigris)}
.page a:hover{color:var(--cream)}

/* Marker-prefixed list, used wherever the source notes were bullets. */
.list{list-style:none;margin:0 0 18px;padding:0}
.list li{position:relative;padding-left:22px;margin:0 0 12px;color:var(--dim)}
.list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;background:var(--verdigris-lo);
}
.list li strong{color:var(--cream);font-weight:700}

/* The core values: one full-width bar each, stacked. Kept to a single column
   at every width so the count can change without leaving empty cells. */
.values{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;margin:0 0 18px;
  background:var(--rule);border:1px solid var(--rule);
}
.values li{background:var(--ink);padding:20px 24px;color:var(--cream);font-size:14px;line-height:1.6}

/* Cooperative costs vs capitalist costs, side by side. */
.compare{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 18px}
.compare section{background:var(--ink);padding:22px 24px}
.compare h3{margin:0 0 16px}
.compare ul{list-style:none;margin:0;padding:0}
.compare li{position:relative;padding-left:18px;margin:0 0 10px;color:var(--dim)}
.compare li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;background:var(--verdigris-lo)}
@media (min-width:720px){.compare{grid-template-columns:1fr 1fr}}

/* Roadmap stages. The rule runs behind the markers to tie them together. */
.stages{list-style:none;margin:0;padding:0;position:relative}
.stages::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--rule)}
.stages li{position:relative;padding:0 0 30px 34px}
.stages li::before{
  content:"";position:absolute;left:0;top:5px;width:13px;height:13px;
  background:var(--ink);border:1px solid var(--rule);
}
.stages li.done::before{background:var(--verdigris-lo);border-color:var(--verdigris-lo)}
.stages li.now::before{background:var(--verdigris);border-color:var(--verdigris)}
.stages b{display:block;color:var(--cream);font-size:14px;font-weight:700;margin-bottom:8px}
.stages li.now b{color:var(--verdigris)}
.stages p{margin:0}
.stages .tag{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verdigris);border:1px solid var(--verdigris-lo);padding:3px 8px;
}

/* Team. */
.people{display:grid;gap:1px;margin:0 0 18px;background:var(--rule);border:1px solid var(--rule)}
.people article{background:var(--ink);padding:26px 24px}
.people h3{margin:0 0 14px;font-size:13px;letter-spacing:.14em}
/* Headshot slot. Empty until there are photos to drop in; the ruled square
   holds the space so the layout does not shift when they arrive. */
.people .shot{
  aspect-ratio:1;width:100%;max-width:200px;margin:0 0 20px;
  border:1px solid var(--rule);background:#0e120f;
  display:grid;place-items:center;overflow:hidden;
}
.people .shot img{width:100%;height:100%;object-fit:cover;display:block}
.people .shot span{
  font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rule);
}
.people p{margin:0 0 14px;max-width:none}
.people p:last-child{margin-bottom:0}
@media (min-width:720px){.people{grid-template-columns:1fr 1fr}}

/* Anything still being written. Deliberately quiet — it should read as an
   honest placeholder, not as a design element. */
.draft{
  border:1px dashed var(--rule);padding:18px 20px;margin:0 0 18px;
  color:var(--lichen);font-size:12px;line-height:1.7;
}
.draft b{
  display:block;font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lichen);margin-bottom:8px;
}

/* Pull quote for the strongest lines from the source notes. */
.pull{
  margin:34px 0;padding:2px 0 2px 22px;border-left:1px solid var(--verdigris-lo);
  font-size:15px;line-height:1.75;color:var(--cream);
}

.next{display:flex;flex-wrap:wrap;gap:14px;margin-top:56px;padding-top:26px;border-top:1px solid var(--rule)}
.next a{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verdigris);text-decoration:none;border:1px solid var(--rule);padding:11px 18px;
}
.next a:hover{color:var(--cream);border-color:var(--lichen)}

@media (max-width:640px){
  .bar{padding:18px 20px}
  .bar--top{gap:14px}

  /* The nav collapses into a button in the top right. The checkbox sits
     invisibly on top of the button so a tap toggles it, and it stays
     focusable so the keyboard can reach the menu too. */
  .menu-toggle{
    display:block;position:absolute;top:-11px;right:-10px;
    width:44px;height:44px;margin:0;opacity:0;z-index:5;cursor:pointer;
  }
  .menu-button{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:24px;height:22px;
  }
  .menu-button span{display:block;height:1px;background:var(--cream)}
  .menu-toggle:checked ~ .menu-button span{background:var(--verdigris)}
  .menu-toggle:focus-visible ~ .menu-button span{background:var(--verdigris)}

  .menu-toggle:checked ~ .menu-scrim{
    display:block;position:fixed;inset:0;z-index:2;
  }

  .nav{
    display:none;position:absolute;top:calc(100% + 14px);right:0;
    flex-direction:column;align-items:stretch;gap:0;
    min-width:180px;padding:4px 0;z-index:4;
    background:var(--ink);border:1px solid var(--rule);
  }
  .menu-toggle:checked ~ .nav{display:flex}
  .nav a{padding:13px 18px;text-align:left;border-bottom:0}
  .nav a[aria-current="page"]{border-bottom:0}
  .bar--bottom{flex-direction:column;align-items:stretch;gap:16px}
  .contact{text-align:center}
  .stage{padding:24px 20px 32px}
  .page{padding:26px 20px 40px}
  .nav{gap:16px}
}
@media (prefers-reduced-motion:no-preference){
  .contact,.nav a,.brand,.next a{transition:color .15s ease,border-color .15s ease}
}