/* Northants Bitcoin Network — brand #60202b */
:root {
  --brand: #60202b;
  --brand-soft: #8a3442;
  --accent: #f7931a;           /* bitcoin orange */
  --bg: #fbf8f7;
  --surface: #ffffff;
  --border: #e6dedc;
  --text: #1e1a1b;
  --muted: #6d6467;
  --radius: 14px;
  --maxw: 720px;
  --maxw-wide: 1120px;   /* the three-across post grid */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #b85666; --brand-soft: #d98292;
    --bg: #14100f; --surface: #1d1817; --border: #332a29;
    --text: #f2ecea; --muted: #a29794;
  }
}
* { box-sizing: border-box; }
/* Pages differ in length, so reserve the scrollbar's width always — otherwise
   the whole layout shifts sideways each time you switch page. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-wrap: anywhere;
}
a { color: var(--brand); }
img { max-width: 100%; height: auto; }

/* ---- masthead: banner as the backdrop, profile left, bio right ---- */
.masthead {
  position: relative; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--brand), #2b1116);
  background-size: cover; background-position: center;
}
/* Keeps the text readable whatever the banner image looks like. */
.masthead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .45));
}
.masthead-inner {
  position: relative; z-index: 1; max-width: var(--maxw-wide); margin: 0 auto;
  padding: 34px 20px; display: flex; align-items: center; gap: 2rem; color: #fff;
}
.profile { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.avatar {
  flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .85); background: var(--border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.masthead h1 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 0; letter-spacing: -.02em; color: #fff; }
.tagline {
  margin: 0; font-size: 1.02rem;
  color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.ident { margin: 0; font-size: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.nip05, .npub {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-decoration: none; color: rgba(255, 255, 255, .85);
}
.nip05 { color: #fff; border-color: rgba(255, 255, 255, .6); }
.npub:hover, .nip05:hover { border-color: #fff; color: #fff; }

@media (max-width: 700px) {
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 24px 20px; }
  .avatar { width: 78px; height: 78px; }
}

/* ---- tabs ---- */
.tabs {
  position: sticky; top: 0; z-index: 20; display: flex; gap: .25rem; justify-content: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: .4rem;
}
.tab {
  padding: .45rem .95rem; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: .92rem;
}
.tab:hover { color: var(--text); background: var(--bg); }
.tab.is-active { color: #fff; background: var(--brand); }

/* ---- layout ---- */
main { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 60px; }
main.is-wide { max-width: var(--maxw-wide); }

/* ---- feed grid ---- */
.feed-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  grid-auto-rows: minmax(0, 500px);   /* every card the same height, and never taller than 500px */
}
/* The card's height is set by its row, so it must clip: nothing crosses its border. */
.feed-grid .note { margin-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
/* The body uses the whole card it is given — the cards are all the same height,
   so there is no need to stop short at a line count. Inline media is hidden and
   shown as a thumbnail instead, so nothing block-level rides over the text. */
.feed-grid .note-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden; overflow-wrap: anywhere;
}
.feed-grid .note-body img, .feed-grid .note-body video { display: none; }
/* When there is a picture it takes the leftover room, so the text must not:
   otherwise the body stretches and opens a gap above the picture. */
.feed-grid .note:has(.note-thumb) .note-body { flex: 0 1 auto; }
.note-thumb {
  width: 100%; height: 180px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--border); margin-top: .7rem;
}
/* Text is never cut mid-line, so the picture takes up the slack instead:
   it grows to fill the card and is cropped at the bottom. */
.feed-grid .note-thumb { flex: 1 1 180px; height: auto; min-height: 180px; }
.feed-grid .note-foot { flex: none; padding-top: .8rem; }
.note[data-note] { cursor: pointer; }
.note[data-note]:hover { border-color: var(--brand); }
.note[data-note]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 900px) { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  {
  .feed-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .feed-grid .note-body { overflow: visible; }
}

/* ---- gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shot {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); aspect-ratio: 1 / 1;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.shot:hover img { transform: scale(1.04); }
.shot-date {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .7rem .5rem;
  font-size: .75rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .68));
  opacity: 0; transition: opacity .2s ease;
}
.shot:hover .shot-date, .shot:focus-visible .shot-date { opacity: 1; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- month calendar ---- */
.cal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px 18px; margin-bottom: 22px;
}
.cal-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .8rem; }
.cal-month { font-weight: 700; min-width: 11ch; text-align: center; }
.cal-nav {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 8px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cal-nav:hover { border-color: var(--brand); color: var(--brand); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow {
  text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding-bottom: .3rem;
}
.cal-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border-radius: 9px; font-size: .85rem; color: var(--muted); text-decoration: none;
}
.cal-cell.is-blank { min-height: 0; }
.cal-cell.is-today { outline: 1px solid var(--border); color: var(--text); font-weight: 700; }
/* Days with events are filled in brand, so they read at a glance against the
   plain ones rather than differing by a shade of off-white. */
a.cal-cell.has-events { background: var(--brand); color: #fff; font-weight: 700; }
a.cal-cell.has-events:hover { background: var(--brand-soft); color: #fff; }
a.cal-cell.has-events.is-today { outline-color: var(--text); }
.cal-num { line-height: 1; }
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; display: block; opacity: .8; }

/* ---- event cards ---- */
.event {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; height: 100%;
}
.event.is-past { opacity: .6; }
.event[data-event] { cursor: pointer; }
.event[data-event]:hover { border-color: var(--brand); }
.event[data-event]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Each card hands its two rows to the grid, so heads and summaries line up
   across a row without any card being padded out to a fixed height. */
.event-grid { grid-auto-rows: auto; }
.event-grid .event { display: grid; grid-template-rows: subgrid; grid-row: span 2; height: auto; }
.event-head { display: flex; gap: .8rem; align-items: flex-start; flex: none; }
@supports not (grid-template-rows: subgrid) {
  .event-head { height: 7.4rem; }
}
.event-date {
  flex: none; width: 50px; text-align: center; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); padding: .4rem 0;
}
.event-day { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.event-mon { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.event-headings { min-width: 0; }
.event-title {
  margin: 0 0 .15rem; font-size: 1rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.event-when, .event-where { margin: 0; color: var(--muted); font-size: .82rem; }
/* The address gets two lines — the head is tall enough for them. */
.event-where {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Details left, picture right. */
.event-body { display: flex; gap: .7rem; margin-top: .7rem; flex: 1 1 auto; }
.event-summary {
  flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.event-summary img, .event-summary video { display: none; }
.event-img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

/* ---- event popup ---- */
body.is-locked { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
.modal-panel {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 85vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 24px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.modal-nav {
  position: relative; z-index: 1; flex: none; width: 44px; height: 44px; margin: 0 4px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
  color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal-nav:hover { border-color: var(--brand); color: var(--brand); }
.modal-nav[hidden] { display: none; }
.modal-x {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.modal-x:hover { color: var(--text); }
.modal-panel .note { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.modal-panel .note-head { padding-right: 1.5rem; }
.modal-count { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
.modal-event + .modal-event { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.modal-title { margin: 0 0 .25rem; font-size: 1.2rem; padding-right: 1.5rem; }
.modal-when, .modal-where { margin: 0; color: var(--muted); font-size: .88rem; }
.modal-img { width: 100%; height: auto; border-radius: 10px; margin: .9rem 0 0; }
.modal-map { margin-top: .9rem; }
.modal-map iframe {
  width: 100%; height: 170px; border: 1px solid var(--border); border-radius: 10px; display: block;
}
.modal-map .maplink { display: inline-block; margin-top: .35rem; }
.modal-note { margin: 0; color: var(--muted); font-size: .85rem; }
.rsvp:empty { display: none; }
.rsvp { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.rsvp-head { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rsvp-row { margin: 0 0 .35rem; font-size: .88rem; }
.rsvp-tag {
  display: inline-block; margin-right: .5rem; padding: .05rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; background: var(--brand); color: #fff;
}
.rsvp-tag.is-tentative { background: var(--brand-soft); }
.rsvp-tag.is-declined { background: var(--muted); }
.modal-summary { margin-top: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal-summary img, .modal-summary video { border-radius: 10px; margin: .6rem 0; display: block; max-width: 100%; }

@media (max-width: 560px) {
  .modal { padding: 12px 4px; }
  .modal-nav { width: 34px; height: 34px; margin: 0 1px; font-size: 1.2rem; }
}

/* ---- pager ---- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 28px 0 4px; flex-wrap: wrap;
}
.pager-btn {
  padding: .5rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
  font-size: .9rem; border: 1px solid var(--border); color: var(--text); background: var(--surface);
}
.pager-btn:hover { border-color: var(--brand); color: var(--brand); }
.pager-btn.is-off { opacity: .4; pointer-events: none; }
.pager-info { color: var(--muted); font-size: .88rem; }

/* ---- note cards ---- */
.note {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.note-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; flex-wrap: wrap; }
.note-date { color: var(--muted); font-size: .82rem; }
.badge {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: .12rem .45rem; border-radius: 5px; background: var(--bg);
  border: 1px solid var(--border); color: var(--muted);
}
.note-body { white-space: pre-wrap; }
.note-body img, .note-body video {
  border-radius: 10px; margin: .7rem 0; display: block; border: 1px solid var(--border);
}
.note-foot { margin-top: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.note-foot:empty { display: none; }
.maplink { font-size: .8rem; color: var(--muted); text-decoration: none; }
.maplink:hover { color: var(--brand); text-decoration: underline; }
.hashtag { text-decoration: none; font-weight: 600; }
.hashtag:hover { text-decoration: underline; }
.mention {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0 .3rem; font-size: .9em; text-decoration: none;
}

/* ---- tag list ---- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem; }
.tag-chip {
  text-decoration: none; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600;
}
.tag-chip:hover { border-color: var(--brand); color: var(--brand); }
.tag-chip .count { color: var(--muted); font-weight: 400; margin-left: .35rem; font-size: .85em; }

.section-title { font-size: 1.05rem; margin: 0 0 1rem; }
.backlink { display: inline-block; margin-bottom: 1rem; text-decoration: none; font-weight: 600; font-size: .9rem; }
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.about-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.about-card dt { font-weight: 700; margin-top: .9rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.about-card dd { margin: .2rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }

/* ---- footer ---- */
.footer {
  max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 44px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: .84rem; text-align: center;
}
.footer p { margin: .3rem 0; }
.relaystat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }

/* ---- long-form articles ---- */
.article-list { display: grid; gap: 14px; }
.article {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
}
.article:hover { border-color: var(--brand); }
.article-img {
  flex: none; width: 120px; height: 90px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
}
.article-text { min-width: 0; }
.article-date { display: block; font-size: .78rem; color: var(--muted); }
.article-title { margin: .15rem 0 .3rem; font-size: 1.1rem; }
.article-summary {
  margin: 0; color: var(--muted); font-size: .9rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
@media (max-width: 560px) {
  .article { flex-direction: column; }
  .article-img { width: 100%; height: 160px; }
}

.longform {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 28px;
}
.longform-title { margin: 0 0 .3rem; font-size: 1.7rem; line-height: 1.25; }
.longform-date { margin: 0; color: var(--muted); font-size: .85rem; }
.longform-summary { margin: .9rem 0 0; color: var(--muted); font-style: italic; }
.longform-img { width: 100%; height: auto; border-radius: 10px; margin-top: 1.2rem; }
.longform-body { margin-top: 1.2rem; }
.longform-body h2 { font-size: 1.3rem; margin: 1.8rem 0 .5rem; }
.longform-body h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.longform-body h4, .longform-body h5, .longform-body h6 { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.longform-body p { margin: 0 0 1rem; }
.longform-body img, .longform-body video { display: block; max-width: 100%; border-radius: 10px; margin: 1rem 0; }
.longform-body ul, .longform-body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.longform-body li { margin-bottom: .3rem; }
.longform-body blockquote {
  margin: 0 0 1rem; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--border); color: var(--muted);
}
.longform-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.8rem 0; }
.longform-body pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem 1rem; overflow-x: auto;
}
.longform-body pre code { background: none; border: 0; padding: 0; font-size: .85rem; }
.longform-body code {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: .05rem .3rem; font-size: .88em;
}

/* ---- mentions ---- */
.note-author { font-weight: 700; font-size: .85rem; text-decoration: none; }
.note-author:hover { text-decoration: underline; }

/* ---- quoted notes ---- */
.quote {
  display: block; margin: .7rem 0; padding: .7rem .9rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-size: .92em;
}
.quote-head { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .35rem; flex-wrap: wrap; }
.quote-date { color: var(--muted); font-size: .78rem; }
.quote-title { display: block; font-weight: 600; margin-bottom: .25rem; }
.quote-body { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.quote-body img, .quote-body video { display: block; max-width: 100%; border-radius: 8px; margin: .5rem 0; }
/* A quote fills whatever room the card has; the card does the trimming. */
.feed-grid .quote-body img, .feed-grid .quote-body video { display: none; }