/* Network tiles: one quiet frame, eight distinct faces (t1478).
   The outer geometry is shared. Identity stays inside each tile. */
/* The two faces that need a webfont (JC Cangilla in Newsreader, TMC in Alfa Slab One)
   load it here, so a site that does not carry the font itself still renders the tile right (JC 9/13, seen on mymorningquestions.com). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;1,400&family=Alfa+Slab+One&display=swap');

/* A tile that is a button (t1559) must behave like the anchor it replaced: inherit the page font and start alignment.
   Low specificity on purpose, so every per-tile font rule below still wins (9/24: font: inherit was overriding Linslow, SSDG and MMQ). */
button.network-tile { font: inherit; text-align: start; }

.network-tiles {
  --network-tile-accent: var(--accent, #3d7dbe);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 660px;
}

.network-tiles-label {
  display: block;
  margin-bottom: 10px;
}

.footer-network {
  margin-top: 10px;
}

.network-tiles .network-tile {
  box-sizing: border-box;
  display: flex;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid #ececec;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}

.network-tiles .network-tile:hover,
.network-tiles .network-tile:focus-visible {
  border-color: var(--network-tile-accent);
}

.network-tiles .network-tile:focus-visible {
  outline: 2px solid var(--network-tile-accent);
  outline-offset: 2px;
}

.network-tiles--wall {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  max-width: none;
}

.network-tiles--wall .network-tile {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}

.network-tile.tile-jcc {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 13px;
  background: #fdfaf7;
}
.network-tile .jcc-name { font-family: 'Newsreader', Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #121212; }
.network-tile .jcc-sig { margin-top: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 9px; color: #6b6560; }

.network-tile.tile-linslow { padding: 8px 12px; background: #f4f2ee; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #3d7dbe; }

.network-tile.tile-tmc { justify-content: flex-start; padding: 6px 8px; background: #111; }
.network-tile .tmc-mark { font-family: 'Alfa Slab One', 'Arial Black', Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: .88; letter-spacing: -.01em; color: #f2efe6; }

.network-tile.tile-cawalk { padding: 10px 14px; background: #f8f6f3; }
.network-tile.tile-cawalk img { display: block; width: 100%; height: auto; border: 0; }

.network-tile.tile-ssdg { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px 12px; background: #f7f1e2; font-family: ui-monospace, Menlo, monospace; color: #262626; text-align: left; }
.network-tile .ssdg-head { text-align: center; font-size: 7px; letter-spacing: .35em; color: rgba(38, 38, 38, .7); }
.network-tile .ssdg-dbl { display: block; flex: none; box-sizing: content-box; width: 100%; height: 2px; margin-top: 3px; border-top: 1px solid #9db8d2; border-bottom: 1px solid #9db8d2; }
.network-tile .ssdg-line { display: flex; flex: 1; width: 100%; align-items: flex-end; border-bottom: 1px solid #9db8d2; padding-bottom: 1px; font-size: 10px; line-height: 1; white-space: nowrap; }
.network-tile .ssdg-id { padding-top: 3px; text-align: right; font-size: 6px; letter-spacing: .2em; color: rgba(38, 38, 38, .5); }

.network-tile.tile-at { padding: 9px 11px; background: #fff; }
.network-tile.tile-at img { display: block; width: 100%; height: auto; border: 0; }

.network-tile.tile-mmq { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 9px; background: #211f1c; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: #e6e1d8; text-align: left; }
.network-tile .mmq-site { font-size: 7px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.network-tile .mmq-cur { display: block; width: 6px; height: 10px; margin-top: 3px; background: currentColor; animation: network-tile-blink 1.06s step-end infinite; }
.network-tile .mmq-labels { display: flex; flex-direction: column; margin-top: auto; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 7.5px; font-style: italic; line-height: 1.3; color: rgba(230, 225, 216, .75); }

.network-tile.tile-pdfn { justify-content: space-between; align-items: flex-start; gap: 6px; padding: 9px 8px 9px 11px; background: #fff; color: #171717; text-align: left; }
.network-tile .pdfn-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.network-tile .pdfn-title { font-family: 'Lora', Georgia, serif; font-size: 12.5px; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.network-tile .pdfn-when { font-family: ui-monospace, Menlo, monospace; font-size: 7.5px; letter-spacing: .02em; color: #737373; }
.network-tile.tile-pdfn img { width: 42px; height: auto; flex-shrink: 0; border: 0; opacity: .9; }

.network-tiles--wall .network-tile.tile-linslow { font-size: 13px; }
.network-tiles--wall .network-tile.tile-tmc { padding: 10px 14px; }
.network-tiles--wall .network-tile .tmc-mark { font-size: 36px; }
.network-tiles--wall .network-tile.tile-cawalk { padding: 10px 12px; }
.network-tiles--wall .network-tile.tile-ssdg { padding: 10px 18px; }
.network-tiles--wall .network-tile .ssdg-head { font-size: 10px; }
.network-tiles--wall .network-tile .ssdg-dbl { height: 3px; margin-top: 4px; }
.network-tiles--wall .network-tile .ssdg-line { min-height: 20px; font-size: 13px; white-space: nowrap; }
.network-tiles--wall .network-tile .ssdg-id { font-size: 10px; }
.network-tiles--wall .network-tile.tile-at { padding: 12px 16px; }
.network-tiles--wall .network-tile.tile-mmq { padding: 16px; }
.network-tiles--wall .network-tile .mmq-site { font-size: 11px; }
.network-tiles--wall .network-tile .mmq-cur { width: 7px; height: 13px; margin-top: 4px; }
.network-tiles--wall .network-tile .mmq-labels { font-size: 13px; }
.network-tiles--wall .network-tile.tile-pdfn { gap: 10px; padding: 14px 14px 14px 18px; }
.network-tiles--wall .network-tile .pdfn-title { font-size: 19px; }
.network-tiles--wall .network-tile .pdfn-when { font-size: 10.5px; }
.network-tiles--wall .network-tile.tile-pdfn img { width: 66px; }

@keyframes network-tile-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 700px) {
  .network-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-tiles--wall { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .network-tile .mmq-cur { animation: none; }
}

/* The open treatment (t1559). network-tiles.js swaps each linked tile for a card:
   the face (a button) and its back (the explanation and the link through).
   Both sit in one cell, so the card keeps the tile's size in every box.
   The back uses one fixed ink, not the host's --accent: Linslow's theme defines
   --accent as a near-white grey, which made the link vanish there (9/22). */
.network-tile-card { position: relative; display: grid; min-width: 0; }
.network-tile-card > .network-tile,
.network-tile-card > .network-tile-back { grid-area: 1 / 1; }
.network-tile-card > .network-tile {
  width: 100%; margin: 0; cursor: pointer;
  transition: opacity .22s ease, transform .22s ease;
}
.network-tile-card::after {
  content: '+'; position: absolute; right: 6px; bottom: 3px; pointer-events: none;
  font: 400 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #9a948d; transition: opacity .22s ease;
}
.network-tile-card.card-tmc::after, .network-tile-card.card-mmq::after { color: rgba(242, 239, 230, .6); }
.network-tile-back {
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  min-width: 0; overflow: hidden; padding: 8px 11px 7px;
  border: 1px solid #3d7dbe; background: #fdfaf7; color: #1a1a1a; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.network-tile-about { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 12px; line-height: 1.25; }
.network-tile-go {
  align-self: flex-start; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 10.5px; color: #3d7dbe; text-decoration: none; white-space: nowrap;
}
.network-tile-go:hover, .network-tile-go:focus-visible { text-decoration: underline; }
.network-tile-card.is-open > .network-tile { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.network-tile-card.is-open::after { opacity: 0; }
.network-tile-card.is-open > .network-tile-back {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.network-tiles--wall .network-tile-back { padding: 14px 16px 12px; }
.network-tiles--wall .network-tile-about { font-size: 16px; line-height: 1.3; }
.network-tiles--wall .network-tile-go { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .network-tile-card > .network-tile, .network-tile-back { transition: none; transform: none; }
}