/* ============================================================
   Legal Article Network — public site
   Deliberately plain. This exists to prove the data model renders;
   the real thing gets a theme engine.
   ============================================================ */
:root {
  --navy:   #0f2d52;
  --gold:   #c9973f;
  --bg:     #ffffff;
  --sub:    #f6f8fc;
  --text:   #1a1d2e;
  --muted:  #6b7280;
  --border: #e2e8f0;
  --radius: 10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--navy); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }

/* ── Header ───────────────────────────────────────────────── */
.site-head { background: var(--navy); color: #fff; }
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { color: #fff; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.brand span { color: var(--gold); font-size: 1.2rem; }
.site-head nav { display: flex; gap: 1.25rem; }
.site-head nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; font-weight: 500; }
.site-head nav a:hover, .site-head nav a.here { color: var(--gold); }

main.wrap { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }

/* ── Type ─────────────────────────────────────────────────── */
h1 { font-size: 1.9rem; line-height: 1.25; margin-bottom: .35rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .85rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); }
.lede { color: var(--muted); margin-bottom: 1.5rem; }
.crumb { font-size: .82rem; color: var(--muted); margin-bottom: .75rem; }
.crumb a { color: var(--muted); }

/* ── Cards and grids ──────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid.two   { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(15,45,82,.08); }
.card h3 { font-size: 1rem; margin-bottom: .2rem; }
.card .meta { font-size: .8rem; color: var(--muted); }

.card .count {
  margin-top: .45rem; font-size: .74rem; font-weight: 600; color: var(--navy);
}

.logo { max-height: 46px; max-width: 150px; margin-bottom: .6rem; }

/* ── Profile header ───────────────────────────────────────── */
.profile { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: .5rem; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar.square { border-radius: var(--radius); object-fit: contain; background: var(--sub); padding: .4rem; }

/* ── Tags ─────────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tag {
  font-size: .74rem; background: var(--sub); color: var(--navy);
  border-radius: 20px; padding: .2rem .6rem; white-space: nowrap;
}

/* ── Articles ─────────────────────────────────────────────── */
.article { padding: 1rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; }
.article:last-child { border-bottom: none; }
.article img { width: 110px; height: 74px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.article h3 { font-size: .98rem; margin-bottom: .2rem; }
.article h3 a { text-decoration: none; }
.article h3 a:hover { text-decoration: underline; }
.article p { font-size: .84rem; color: var(--muted); margin: .2rem 0; }
.article .byline { font-size: .78rem; color: var(--muted); }

.piece { max-width: 46rem; }
.piece h1 { font-size: 2.1rem; margin-bottom: 1rem; }
.piece-by { display: flex; gap: .75rem; align-items: center; font-size: .88rem;
            padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.piece-by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.piece-by .meta { font-size: .8rem; color: var(--muted); }
.piece-hero { width: 100%; max-height: 380px; object-fit: cover;
              border-radius: var(--radius); margin-bottom: 1.5rem; }

/* Syndicated markup: it arrived from someone else, so everything it might
   contain needs a sensible default rather than assuming our own classes. */
.piece-body { font-size: 1.02rem; line-height: 1.75; }
.piece-body > * + * { margin-top: 1.1rem; }
.piece-body h2, .piece-body h3, .piece-body h4 {
  margin-top: 2rem; border: none; padding: 0; font-size: 1.2rem; line-height: 1.35;
}
.piece-body ul, .piece-body ol { padding-left: 1.4rem; }
.piece-body li + li { margin-top: .4rem; }
.piece-body img { max-width: 100%; height: auto; border-radius: 6px; }
.piece-body a { word-break: break-word; }
.piece-body blockquote {
  border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--muted); font-style: italic;
}
.piece-body table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.piece-body th, .piece-body td { border: 1px solid var(--border); padding: .45rem .6rem; text-align: left; }

.piece-source {
  margin-top: 2rem; padding: 1rem 1.15rem; background: var(--sub);
  border-radius: var(--radius); font-size: .86rem;
}
.piece-source .note { font-size: .78rem; color: var(--muted); }

/* ── Bits ─────────────────────────────────────────────────── */
.empty { color: var(--muted); font-size: .9rem; padding: 1.5rem 0; }
.search { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.search input {
  flex: 1; max-width: 420px; padding: .55rem .8rem; font: inherit; font-size: .9rem;
  border: 1.5px solid var(--border); border-radius: 7px;
}
.search .filter {
  padding: .55rem .8rem; font: inherit; font-size: .9rem;
  border: 1.5px solid var(--border); border-radius: 7px; background: #fff;
  max-width: 320px;
}
.search button {
  padding: .55rem 1.1rem; font: inherit; font-size: .9rem; font-weight: 600;
  background: var(--navy); color: #fff; border: none; border-radius: 7px; cursor: pointer;
}
.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 1.5rem; }
.pager a {
  padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none; font-size: .85rem;
}
.pager a.on { background: var(--navy); color: #fff; border-color: var(--navy); }

.site-foot { background: var(--sub); border-top: 1px solid var(--border); padding: 1.5rem 0; }
.site-foot p { font-size: .8rem; color: var(--muted); }

@media (max-width: 640px) {
  .profile { flex-direction: column; }
  .article img { display: none; }
  .head-inner { height: auto; padding: .75rem 0; flex-direction: column; gap: .5rem; }
}

/* Tags that lead somewhere. The plain .tag stays for labels that do not. */
a.tag { text-decoration: none; transition: background .12s, color .12s; }
a.tag:hover { background: var(--navy); color: #fff; }
a.tag:hover span { color: rgba(255,255,255,.7) !important; }
a.tag.tag-on { background: var(--navy); color: #fff; }
a.tag.tag-on:hover { background: #7f1d1d; }

/* Tags on a listing row. Smaller and quieter than .tag — they sit under an
   excerpt and must not outweigh the headline they belong to. */
.row-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.row-tag {
  font-size: .68rem; line-height: 1.5; text-decoration: none;
  background: #eef2f7; color: #475569;
  border-radius: 3px; padding: .08rem .4rem; white-space: nowrap;
}
.row-tag:hover { background: var(--navy); color: #fff; }
/* Jurisdictions carry the accent: on a listing spanning several legal systems
   it is the thing a reader scans for, and the one the title rarely gives. */
.row-tag.is-juris { background: #fdf6e8; color: #8a6420; }
.row-tag.is-juris:hover { background: var(--gold); color: #fff; }
.row-tag.is-more { background: none; color: var(--muted); }