/* ==========================================================================
   Canadian Response Network — public website
   Deliberately separate from app.css so the member portal is never affected.
   ========================================================================== */

:root {
  --red: #e4002b;
  --red-600: #c80024;
  --navy-900: #0b1622;
  --navy-800: #16232f;
  --navy-700: #22313f;
  --ink: #16232f;
  --ink-soft: #4a5b6b;
  --muted: #7a8896;
  --line: #e4e9ee;
  --bg: #f6f8fa;
  --white: #fff;
  --radius: 12px;

  /* Aliases so components shared with the portal (gallery, chips, notices) pick up
     the public palette instead of hard-coding the portal's tokens. */
  --border: #e4e9ee;
  --border-strong: #cbd5e1;
  --text: #16232f;
  --text-soft: #4a5b6b;
  --red-50: #fdecef;
  --shadow: 0 8px 28px rgba(11, 22, 34, .10);
  --wrap: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body.site {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
svg { flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
/* Type utilities. views/site/events.php already used .text-sm/.text-muted before
   they were defined, so they were rendering unstyled. */
.text-xs { font-size: .78rem; }
.text-sm { font-size: .9rem; }
.text-soft { color: var(--ink-soft); }
.text-muted { color: var(--muted); }
.soft { color: var(--ink-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1.25rem; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .6rem;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ================================================================ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 22, 34, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}
.site-brand img { width: 150px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-nav__link {
  padding: 9px 13px;
  border-radius: 8px;
  color: #c9d4de;
  font-size: .95rem;
  font-weight: 600;
}
.site-nav__link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.site-nav__link.is-current { color: #fff; background: rgba(228, 0, 43, .16); }
.site-nav__portal {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.site-nav__portal:hover { color: #ff8098; }
.site-nav__cta { margin-left: 6px; }

.site-nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  padding: 10px 9px;
}
.site-nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.site-nav-toggle span + span { margin-top: 4px; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ================================================================ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(228, 0, 43, .28); }
.btn--red:hover { background: var(--red-600); transform: translateY(-1px); }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-700); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #eef2f6; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); }
.btn--sm { padding: 9px 15px; font-size: .88rem; }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ================================================================== hero */

.hero {
  position: relative;
  background-color: var(--navy-900);
  background-image: var(--hero-bg, url('/assets/img/login-bg.svg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 22, 34, .94) 0%, rgba(11, 22, 34, .78) 45%, rgba(11, 22, 34, .55) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 84px 22px 92px; max-width: var(--wrap); margin: 0 auto; }
.hero__inner .wrap { padding: 0; }
.hero h1 { max-width: 15ch; margin-bottom: .4em; }
.hero h1 em { font-style: normal; color: #ff5a76; }
.hero__lede { font-size: clamp(1rem, 1.6vw, 1.18rem); color: #cfdae4; max-width: 56ch; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__stat strong { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.hero__stat span { font-size: .88rem; color: #a9b8c9; }

.strip {
  background: var(--red);
  color: #fff;
  padding: 12px 0;
  font-size: .93rem;
  font-weight: 600;
}
.strip .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }

/* ================================================================ sections */

.section { padding: 68px 0; }
.section--tight { padding: 46px 0; }
.section--dark { background: var(--navy-900); color: #fff; }
.section__head { max-width: 62ch; margin-bottom: 34px; }
.section__head.center { margin-left: auto; margin-right: auto; }
.section--dark .muted { color: #a9b8c9; }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card--pad-lg { padding: 30px; }
.card--flat { box-shadow: none; }
.card h3 { margin-bottom: .35em; }

.feature { text-align: left; }
.feature__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(228, 0, 43, .1);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.section--dark .feature__icon { background: rgba(255, 255, 255, .1); color: #ff5a76; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
}
.pill--red { background: rgba(228, 0, 43, .12); color: var(--red); }
.pill--green { background: #e4f6ea; color: #12833c; }
.pill--dark { background: rgba(255, 255, 255, .12); color: #fff; }

/* ============================================================== event card */

.evt {
  display: flex;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.evt:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.evt__thumb {
  width: 168px; min-height: 104px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: var(--bg);
  position: relative;
}
.evt__thumb img { width: 100%; height: 100%; object-fit: cover; }
.evt__date {
  position: absolute; left: 8px; top: 8px;
  background: var(--red); color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 4px 10px rgba(228, 0, 43, .3);
}
.evt__date b { display: block; font-size: 1.05rem; }
.evt__date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.evt__body { flex: 1; min-width: 0; }
.evt__title { font-size: 1.12rem; font-weight: 800; margin-bottom: .25em; }
.evt__meta { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; color: var(--ink-soft); }
.evt__meta span { display: inline-flex; align-items: center; gap: 7px; }
.evt__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.evt__cta { display: flex; align-items: center; }

.list-plain { display: flex; flex-direction: column; gap: 2px; }
.list-plain li { padding: 5px 0; display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); }
.section--dark .list-plain li { color: #c3d0dc; }
.list-plain svg { color: var(--red); margin-top: 4px; }
.section--dark .list-plain svg { color: #ff5a76; }

/* ================================================================ day plan */

.plan { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: #fff; }
.plan + .plan { margin-top: 12px; }
.plan__row { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .92rem; color: var(--ink-soft); margin-top: 4px; }
.plan__row span { display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================== segmented */

.segmented {
  display: inline-flex;
  padding: 3px;
  background: #eef2f6;
  border-radius: 999px;
  gap: 2px;
}
.segmented a {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.segmented a:hover { color: var(--ink); }
.segmented a.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 30, 46, .12); }

/* ================================================================== forms */

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.field .err { font-size: .82rem; color: #c02626; font-weight: 700; margin-top: 5px; }
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d3dbe3;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228, 0, 43, .13);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a8896' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--red); }

.flash {
  max-width: var(--wrap);
  margin: 18px auto -6px;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.flash--success { background: #e4f6ea; color: #12833c; }
.flash--error { background: #fdeaea; color: #c02626; }
.flash--info { background: #e6ecfd; color: #1d4ed8; }
.flash--warning { background: #fdf3d8; color: #b45309; }

/* ================================================================== steps */

.steps { counter-reset: step; display: grid; gap: 18px; }
.step { position: relative; padding-left: 58px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.step h3 { margin-bottom: .2em; }

/* ================================================================= footer */

.site-footer { background: var(--navy-900); color: #b7c4d1; padding: 54px 0 0; font-size: .93rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 40px; }
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer li { padding: 3px 0; }
.site-footer a:hover { color: #fff; }
/* `height: auto` is load-bearing. The <img> carries width="150" height="40" to reserve
   space before the file loads, and that pair sets the browser's default aspect ratio to
   150/40 = 3.75:1. The actual wordmark is 10000x4122 = 2.43:1, so with only `width` set
   in CSS the reserved ratio wins and the logo is drawn ~35% too short — squashed. The
   header logo carries the same attributes and does not have the problem because
   .site-brand img sets height: auto. Both rules need it, and it keeps the logo correct
   if an admin uploads a differently-shaped file. */
.site-footer__logo { margin-bottom: 14px; width: 140px; height: auto; }
.site-footer__blurb { max-width: 40ch; }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 22px;
  font-size: .85rem;
}
.site-footer__bottom a { color: #fff; font-weight: 700; }

/* =============================================================== responsive */

@media (max-width: 980px) {
  .site-nav-toggle { display: block; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--navy-800);
    padding: 14px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__portal { margin: 8px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .site-nav__cta { margin: 8px 0 0; }
  .grid--3, .grid--4, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .evt { flex-direction: column; }
  .evt__thumb { width: 100%; min-height: 150px; }
  .section { padding: 48px 0; }
  .hero__inner { padding: 56px 22px 60px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================== gallery === */

.gallery-head { margin-bottom: 18px; }

/* Tag chips double as filters and as static labels. */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border, #e4e9ee);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft, #4a5b6b);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--red, #e4002b); color: var(--red, #e4002b); }
.chip.is-active { background: var(--red, #e4002b); border-color: var(--red, #e4002b); color: #fff; }
.chip.is-active .chip__n { background: rgba(255, 255, 255, .22); color: #fff; }
.chip.is-static { cursor: default; background: #eef2f6; border-color: transparent; }
.chip__n {
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--muted, #7a8896);
}

/* Album cards */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.album-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e4e9ee);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s ease, transform .16s ease;
}
.album-card:hover { box-shadow: 0 10px 26px rgba(11, 22, 34, .1); transform: translateY(-2px); }
.album-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #eef2f6;
  overflow: hidden;
}
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #7a8896);
}
.album-card__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.album-card__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.album-card__flags:empty { display: none; }
.album-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.album-card__title a { color: inherit; text-decoration: none; }
.album-card__meta { margin-top: auto; }

/* Photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.photo-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #eef2f6;
  cursor: zoom-in;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.photo-tile:hover img { transform: scale(1.04); }
.photo-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 10px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(11, 22, 34, .78));
  opacity: 0;
  transition: opacity .16s ease;
}
.photo-tile:hover .photo-tile__caption,
.photo-tile:focus-within .photo-tile__caption { opacity: 1; }

/* Photo credit — the photographer's name for that photo. */
.photo-tile__credit {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  opacity: .85;
}

/* On the public grids the caption and credit are always visible rather than fading in on
   hover: there is no hover on a phone, and the whole point of publishing these photographs
   is that they carry a name. Both lines are clamped to one line with an ellipsis, so a
   wordy caption cannot grow its way up the picture — the credit stays on screen whoever
   wrote it. */
.photo-grid--public .photo-tile__caption { opacity: 1; }
.photo-grid--public .photo-tile__caption-text,
.photo-grid--public .photo-tile__credit {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.photo-tile__caption-text { display: block; }

.photo-tile__status { position: absolute; top: 8px; left: 8px; }
.photo-tile__delete { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .16s ease; }
.photo-tile:hover .photo-tile__delete,
.photo-tile:focus-within .photo-tile__delete { opacity: 1; }

/* Moderation queue */
.review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 16px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--border, #e4e9ee);
  border-radius: 10px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.review-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e4e9ee);
  border-radius: 10px;
  overflow: hidden;
}
.review-card.is-hidden-public { border-style: dashed; }
.review-card > a { display: block; aspect-ratio: 4 / 3; background: #eef2f6; }
.review-card > a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card__check {
  position: absolute;
  z-index: 2;
  margin: 8px;
  padding: 5px;
  background: rgba(255, 255, 255, .94);
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(11, 22, 34, .2);
}
.review-card { position: relative; }
.review-card figcaption { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.review-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.review-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.review-card__actions form { display: contents; }

/* Photo viewer — the enlarged picture, opened by clicking a gallery tile.

   A floating dark card rather than a full-bleed overlay: a header bar naming the album or
   event, the picture pane with its arrows, and a scrolling sidebar of cards describing the
   photo. The card is capped in both directions and centred, so the page stays visible
   around it and the whole thing still reads as something laid on top of the gallery.

   The member portal has its own simpler lightbox in app.css — a .viewer here is
   deliberately not shared with it. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tight margins: the card is the point of the overlay, so it takes as much of the
     window as the surrounding dimming can spare. */
  padding: clamp(10px, 2vw, 26px);
}
.viewer[hidden] { display: none; }

/* The dimmed and slightly blurred page behind the card. It is a button, so a click
   anywhere off the card closes the viewer without a second handler on the page. */
.viewer__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 12, 20, .72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  cursor: zoom-out;
}

.viewer__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1560px, 100%);
  height: min(94vh, 1080px);
  /* Belt to the height cap's braces: never taller than the window minus the padding,
     so a short viewport cannot push the card's edges off screen. */
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: #0d1520;
  color: #e7edf4;
  box-shadow: 0 40px 90px rgba(3, 8, 15, .7), 0 2px 6px rgba(3, 8, 15, .5);
}
/* Full screen keeps the card's own layout and only gives up the rounded frame. */
.viewer__dialog:fullscreen { width: 100%; height: 100%; border: 0; border-radius: 0; }

.viewer__bar {
  /* Positioned so the picture pane's blur can never paint over the chrome, however the
     preview is scaled. The stage clipping below is the real fix; this is the belt. */
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* The square white mark: `width: auto` keeps it square whatever size the artwork is
   exported at, so only the height needs saying. It is the tallest thing in the bar and so
   sets its height — 42px over 12px padding makes the bar 66px, the close button being 38. */
.viewer__brand img { width: auto; height: 42px; }
.viewer__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.viewer__count {
  margin-left: auto;
  font-size: .82rem;
  color: rgba(231, 237, 244, .62);
  white-space: nowrap;
}
.viewer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease;
}
.viewer__close:hover { background: rgba(255, 255, 255, .2); }

.viewer__body { display: flex; flex: 1 1 auto; min-height: 0; }

/* The picture pane. Its background is darker than the card's so a tall photo and a wide
   one are both inset the same way, rather than one of them bleeding into the sidebar. */
.viewer__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  /* The pane owns its picture and nothing else: the blurred bed is drawn slightly larger
     than the pane so its soft edge falls outside, and without this clip that overhang
     would bleed over the header bar above and the sidebar beside it. */
  overflow: hidden;
  background: #060d15;
}
/* Opening a photo: the blurred bed sits under the picture and the real file fades in over
   it once it has decoded. Two things make that read as deliberate rather than slow — the
   bed is the thumbnail the grid already fetched, so the pane is never empty, and the full
   file is not shown until it is complete, so a progressive JPEG never paints itself a
   scanline at a time. See the reveal in site.js. */
.viewer__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* `contain`, not `cover`. The bed has to occupy the same box the finished photo will,
     and the photo is drawn with `contain` too — so the blur sits inside the picture's
     frame rather than filling the whole pane, letterboxing and all. `cover` made the
     placeholder a blurred rectangle wider than the photo, which read as a smear across
     the empty space either side of it. */
  object-fit: contain;
  /* Soft enough to read as a placeholder rather than as the photo. Much heavier than this
     and the thumbnail stops resembling the picture it stands in for. */
  filter: blur(10px);
  /* Barely larger than the bed, just enough that the blur's soft edge falls outside its
     own frame. Any more and the halo grows back past the photo's outline. */
  transform: scale(1.02);
  transition: opacity .45s ease;
}
.viewer__image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
}
.viewer.is-ready .viewer__image { opacity: 1; }
.viewer.is-ready .viewer__preview { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .viewer__preview,
  .viewer__image { transition: none; }
}

.viewer__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .16s ease;
}
.viewer__arrow:hover { background: rgba(255, 255, 255, .28); }
.viewer__arrow--prev { left: 16px; }
.viewer__arrow--next { right: 16px; }

/* The counter and the full-screen control ride on the picture itself: they are about the
   image being looked at, so they belong to the pane rather than to the page behind it. */
.viewer__chip,
.viewer__expand {
  position: absolute;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: rgba(6, 13, 21, .74);
  color: #e7edf4;
}
.viewer__chip {
  left: 16px;
  gap: 7px;
  padding: 7px 12px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.viewer__expand {
  right: 16px;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  cursor: pointer;
}
.viewer__expand:hover { background: rgba(6, 13, 21, .95); }
.viewer__expand[hidden] { display: none; }

/* The sidebar scrolls on its own, so a long caption never pushes the picture out of
   the window. */
.viewer__side {
  position: relative;
  z-index: 2;
  flex: none;
  width: 384px;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.viewer__card {
  margin: 14px 16px 0;
  padding: 14px 16px 15px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px;
  background: #141e2c;
}
.viewer__card:first-child { margin-top: 16px; }
/* A card is dropped whole when its group came back empty, rather than showing a heading
   over nothing. That decision is made per photo by the script. */
.viewer__card[hidden] { display: none; }
.viewer__card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}
.viewer__card-title svg { color: var(--red); }

/* The red rule under "About this photo" — the one heading with no icon to mark it. */
.viewer__card--about .viewer__card-title {
  display: block;
  position: relative;
  padding-bottom: 9px;
}
.viewer__card--about .viewer__card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.viewer__caption { margin: 0; font-size: .88rem; line-height: 1.6; color: rgba(231, 237, 244, .82); }

/* Label and value, two aligned columns — a spec sheet rather than a paragraph of tags. */
.viewer__rows {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: 9px 16px;
  margin: 0;
  font-size: .84rem;
}
.viewer__rows dt { color: rgba(231, 237, 244, .55); }
.viewer__rows dd { margin: 0; color: #fff; overflow-wrap: anywhere; }

/* Pinned to the foot of the sidebar so the actions stay reachable however far the cards
   scroll. The gradient is what stops the buttons landing on top of a row of text. */
.viewer__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(rgba(13, 21, 32, 0), #0d1520 26%);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.viewer__btn:hover { background: rgba(255, 255, 255, .13); }
.viewer__btn[hidden] { display: none; }
.viewer__btn--primary { margin-left: auto; border-color: var(--red); background: var(--red); }
.viewer__btn--primary:hover { border-color: var(--red-600); background: var(--red-600); }

/* Under the sidebar's own width there is no room for two panes: the cards move below the
   picture and the dialog fills the window and scrolls as one column. */
@media (max-width: 900px) {
  .viewer { padding: 0; }
  .viewer__dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .viewer__body { flex-direction: column; overflow-y: auto; }
  .viewer__stage { flex: none; height: 46vh; }
  .viewer__side { width: auto; overflow: visible; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
  .viewer__actions { position: static; background: #0d1520; }
}

@media (max-width: 560px) {
  .viewer__brand { display: none; }
  .viewer__arrow { width: 40px; height: 40px; }
  .viewer__arrow--prev { left: 8px; }
  .viewer__arrow--next { right: 8px; }
  .viewer__btn--primary { margin-left: 0; }
}

/* Inline info banner (also used for the "awaiting review" notice). */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  margin: 16px 0;
  border: 1px solid var(--border, #e4e9ee);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  color: var(--text-soft, #4a5b6b);
}
.notice--info { background: #f2f7fd; border-color: #cfe2f7; color: #1b4b7d; }
.notice svg { flex: 0 0 auto; margin-top: 2px; }

/* ================================================================= news === */

.wrap--narrow { max-width: 760px; }
.text-lg { font-size: 1.35rem; line-height: 1.3; }

.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-card { padding: 22px 0; border-bottom: 1px solid var(--line); }
.news-card:last-child { border-bottom: 0; }
.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 7px;
}
.news-card__title { margin: 0 0 8px; font-size: 1.32rem; line-height: 1.25; }
.news-card__title--sm { font-size: 1.08rem; }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--red); }
.news-card__excerpt { margin: 0; color: var(--ink-soft); max-width: 68ch; }

.post-head { margin-bottom: 30px; }
.post-head h1 { margin: 0 0 12px; max-width: 22ch; }
.post-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--muted);
}

/* Long-form body. Sized for reading, not for a dashboard. */
.prose { font-size: 1.06rem; line-height: 1.72; color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 2em 0 .6em; font-size: 1.42rem; line-height: 1.25; }
.prose h3 { margin: 1.7em 0 .5em; font-size: 1.16rem; }
.prose h4 { margin: 1.5em 0 .4em; font-size: 1.02rem; }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--red);
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.prose pre {
  background: var(--navy-900);
  color: #e2e8f0;
  padding: 16px 18px;
  border-radius: 10px;
  overflow: auto;
  font-size: .88rem;
  line-height: 1.55;
}
.prose code {
  background: #eef2f6;
  padding: .1em .38em;
  border-radius: 5px;
  font-size: .9em;
}
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg); font-weight: 700; }

/* Gallery embeds inside a post. */
.post-embed { display: block; text-decoration: none; color: inherit; }
.post-embed--album {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 1.8em 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.post-embed--album:hover { border-color: var(--red); transform: translateY(-1px); }
.post-embed__thumb {
  flex: 0 0 132px;
  height: 92px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.post-embed__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-embed__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.post-embed__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.post-embed__title { font-weight: 700; font-size: 1.05rem; }
.post-embed--photo { margin: 1.8em 0; }
.post-embed--photo img { max-width: 100%; height: auto; border-radius: 10px; }
.post-embed--missing {
  display: block;
  margin: 1.5em 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}
@media (max-width: 560px) {
  .post-embed--album { flex-direction: column; align-items: flex-start; }
  .post-embed__thumb { flex: none; width: 100%; height: 150px; }
}

/* News hero image and card thumbnails. */
.post-hero { margin: 0 0 26px; }
.post-hero img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
}
.news-card--with-hero {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-areas: "hero meta" "hero title" "hero excerpt";
  column-gap: 20px;
  align-items: start;
}
.news-card__hero { grid-area: hero; display: block; border-radius: 10px; overflow: hidden; background: var(--bg); }
.news-card__hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.news-card--with-hero .news-card__meta { grid-area: meta; }
.news-card--with-hero .news-card__title { grid-area: title; }
.news-card--with-hero .news-card__excerpt { grid-area: excerpt; }
@media (max-width: 640px) {
  .news-card--with-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "meta" "title" "excerpt"; }
  .news-card__hero img { aspect-ratio: 16 / 9; }
}