/* cashbaggins.dev — The Commons
   Direction D "Hall of mastheads": the hub chrome stays quiet charcoal;
   each plaque is a miniature of that project's own landing header. */

:root {
  --bg: #101214;
  --line: #23282b;
  --dim: #6f7a75;
  --ink: #cfd6d2;
  --haiku: #aeb7b2;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Barlow", system-ui, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.8rem clamp(1rem, 4vw, 3rem) 2.2rem;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font: 600 0.72rem/1.6 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
}
.top h1 { font: inherit; color: var(--dim); margin: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
  align-content: start;
  flex: 1;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
}

/* ---- plaque base ---- */
.plaque {
  display: block;
  border-radius: 4px;
  padding: 1.2rem 1.2rem 1.1rem;
  margin: 4px;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.plaque:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--glow, rgba(0, 0, 0, 0.4)); }
.plaque:focus-visible { outline: 2px solid var(--edge, #fff); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .plaque { transition: none; }
  .plaque:hover { transform: none; }
}

.plaque .eyeb {
  font-family: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.plaque .ttl { margin: 0.5rem 0 0.35rem; line-height: 1.15; }
.plaque .diam { letter-spacing: 0.9em; font-size: 0.55rem; }
.plaque .desc { font-size: 0.88rem; line-height: 1.55; margin: 0.4rem 0 0; }
.plaque .meta {
  font: 500 0.68rem/1.7 var(--mono);
  letter-spacing: 0.08em;
  margin-top: 0.85rem;
}
.plaque .url { opacity: 0.75; }

/* ---- streetbrawl: brass ledger ---- */
.sb {
  --glow: rgba(201, 164, 69, 0.22);
  --edge: #c9a445;
  background: #0e120f;
  border: 1px solid #c9a44577;
  outline: 1px solid #c9a44533;
  outline-offset: 3px;
}
.sb:focus-visible { outline: 2px solid #e0bf62; }
.sb .eyeb { color: #c9a445; }
.sb .ttl {
  font-family: "Limelight", Georgia, serif;
  font-size: 1.25rem;
  color: #e0bf62;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sb .diam { color: #c9a445; }
.sb .desc { color: #ece4cf; }
.sb .meta { color: #b8b19c; }

/* ---- pool: chalk on tournament cloth ---- */
.pl {
  --glow: rgba(95, 168, 232, 0.22);
  --edge: #5fa8e8;
  background: #0a1016;
  border: 1px solid #5fa8e855;
  outline: 1px solid #5fa8e82e;
  outline-offset: 3px;
}
.pl:focus-visible { outline: 2px solid #8cc3f2; }
.pl .eyeb { color: #5fa8e8; }
.pl .ttl {
  font-family: "Anton", "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #eef3f7;
}
.pl .ttl .chalk { color: #8cc3f2; }
.pl .diam { color: #5fa8e8; }
.pl .desc { color: #b9c6d2; }
.pl .meta { color: #7f8f9d; }

/* ---- mpg: thermal receipt ----
   Tokens from the live Fuel Atlas (ui/src/styles.css): paper, ink,
   87-octane red. Mini pumps stand in for diamonds; the dotted rule
   above the meta is the receipt's leader dots. */
.fa {
  --glow: rgba(192, 53, 40, 0.24);
  --edge: #c03528;
  background: #f5f1e6;
  border: 1px solid #262125;
  outline: 1px solid #26212533;
  outline-offset: 3px;
}
.fa:focus-visible { outline: 2px solid #c03528; }
.fa .eyeb { color: #5c554e; font-family: "Archivo Narrow", "Arial Narrow", sans-serif; letter-spacing: 0.34em; }
.fa .ttl {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #262125;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.fa .ttl .lit { color: #c03528; }
.fa .ttl .mark { height: 34px; width: auto; flex: none; }
.fa .pumps { display: flex; justify-content: center; gap: 12px; color: #c03528; margin-top: 2px; }
.fa .pumps svg { width: 11px; height: auto; fill: currentColor; }
.fa .desc { color: #5c554e; font-family: "IBM Plex Mono", var(--mono); font-size: 0.79rem; line-height: 1.6; }
.fa .desc em { color: #262125; font-style: normal; font-weight: 500; }
.fa .meta { color: #9a9083; font-family: "IBM Plex Mono", var(--mono); border-top: 2px dotted #c9c1af; padding-top: 0.55rem; }
.fa .meta .url { color: #c03528; opacity: 1; }

/* ---- chip: cream training board ---- */
.ch {
  --glow: rgba(214, 178, 70, 0.28);
  --edge: #133f35;
  background: #f4f3ec;
  border: 1px solid #133f35;
  outline: 1px solid #133f3533;
  outline-offset: 3px;
}
.ch:focus-visible { outline: 2px solid #133f35; }
.ch .eyeb { color: #133f35; font-family: "din-2014", "Bahnschrift", sans-serif; }
.ch .ttl {
  font-family: "expressway", "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  color: #151a17;
}
.ch .ttl .gold { color: #b3922e; }
.ch .desc { color: #59625c; font-family: "din-2014", "Bahnschrift", sans-serif; }
.ch .meta { color: #678b52; }
.ch .rings {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #d6b246;
  box-shadow: 0 0 0 2px #f4f3ec, 0 0 0 4px #133f35;
  margin-right: 8px;
  vertical-align: -1px;
}

/* ---- bid: amber auction house ---- */
.bd {
  --glow: rgba(214, 168, 90, 0.22);
  --edge: #d6a85a;
  background: #0d1117;
  border: 1px solid #d6a85a52;
  outline: 1px solid #d6a85a1f;
  outline-offset: 3px;
}
.bd:focus-visible { outline: 2px solid #d6a85a; }
.bd .eyeb { color: #d6a85a; font-family: "fira-mono", var(--mono); letter-spacing: 0.32em; }
.bd .ttl {
  /* mirrors the live site's .bid-brand-word: din-2014 800, off-white, .16em tracking */
  font-family: "din-2014", "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 1.65rem;
  color: #e6edf3;
  letter-spacing: 0.16em;
  line-height: 0.95;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bd .ttl .mark { height: 30px; width: auto; flex: none; }
.bd .desc { color: #b1bac4; font-family: "industry", system-ui, sans-serif; }
.bd .meta { color: #8a949e; font-family: "fira-mono", var(--mono); }

/* ---- rock game: the workplace terminal ----
   Tokens from the live site (ui/vite-project/src/styles.css): the #141414
   modal panel on a hard white frame, Consolas, ROCK in the rock brown.
   The tile strip is the game's own vocabulary: place-rock box, goal tile,
   rock tile, empty-hand selection box, in the engine's exact colors. */
.rk {
  --glow: rgba(0, 255, 0, 0.12);
  --edge: #00ff00;
  background: #141414;
  border: 1px solid #ffffff;
  outline: 1px solid #ffffff2e;
  outline-offset: 3px;
}
.rk:focus-visible { outline: 2px solid #00ff00; }
.rk .eyeb { color: #888888; font-family: Consolas, var(--mono); letter-spacing: 0.3em; }
.rk .ttl {
  /* mirrors the live site's modal headers: Consolas, uppercase, 2px tracking */
  font-family: Consolas, var(--mono);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #ffffff;
}
.rk .ttl .rock { color: #a08c64; }
.rk .tiles { display: flex; justify-content: center; margin-top: 3px; }
.rk .tiles svg { width: 60px; height: auto; }
.rk .desc { color: #cccccc; font-family: Consolas, var(--mono); font-size: 0.8rem; line-height: 1.6; }
.rk .meta { color: #888888; font-family: Consolas, var(--mono); }
.rk .meta .url { color: #a08c64; opacity: 1; }

/* ---- roomy: larger plaques while the collection is small ----
   app.js adds .roomy when projects.json has 4 or fewer entries;
   the grid returns to the compact tiling on its own as the collection grows. */
.grid.roomy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.3rem; }
.grid.roomy .plaque { padding: 1.9rem 1.9rem 1.7rem; }
.grid.roomy .plaque .eyeb { font-size: 0.8rem; }
.grid.roomy .plaque .ttl { margin: 0.65rem 0 0.45rem; }
.grid.roomy .plaque .diam { font-size: 0.65rem; }
.grid.roomy .plaque .desc { font-size: 1rem; margin-top: 0.55rem; }
.grid.roomy .plaque .meta { font-size: 0.74rem; margin-top: 1.1rem; }
.grid.roomy .sb .ttl { font-size: 1.75rem; }
.grid.roomy .pl .ttl { font-size: 2rem; }
.grid.roomy .fa .ttl { font-size: 1.75rem; }
.grid.roomy .fa .ttl .mark { height: 46px; }
.grid.roomy .fa .pumps svg { width: 13px; }
.grid.roomy .ch .ttl { font-size: 2rem; }
.grid.roomy .ch .rings { width: 16px; height: 16px; margin-right: 10px; }
.grid.roomy .bd .ttl { font-size: 2.15rem; }
.grid.roomy .bd .ttl .mark { height: 44px; }
.grid.roomy .rk .ttl { font-size: 1.8rem; }
.grid.roomy .rk .tiles svg { width: 78px; }

/* ---- footer: haiku epigraph ---- */
.foot {
  text-align: center;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.2rem;
  max-width: 72rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.foot .hnum { font: 500 0.66rem/1 var(--mono); color: var(--dim); letter-spacing: 0.12em; }
.foot .hlines {
  margin: 0.55rem 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--haiku);
  font-style: italic;
}
.foot .hlinks {
  font: 500 0.7rem/1 var(--mono);
  color: var(--dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.foot .hlinks a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot .hlinks a:hover { color: var(--ink); border-bottom-color: var(--dim); }
.foot .sep { margin: 0 0.45rem; }