:root{--bg:#080909;--surface:rgba(17,18,18,.94);--surface-2:rgba(24,25,25,.95);--surface-hover:rgba(31,32,32,.97);--text:#e8e8e5;--muted:#979a98;--faint:#727573;--border:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.18);--max-width:1180px;--page-bg:url("images/backgrounds/home.jpg");--font-body:Arial,Helvetica,sans-serif;--font-display:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{min-height:100vh;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.5}body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--page-bg);background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(100%) contrast(.92);opacity:.22}body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(5,6,6,.60),rgba(5,6,6,.86) 58%,rgba(5,6,6,.94)),radial-gradient(circle at 50% 10%,transparent 0,rgba(0,0,0,.36) 80%)}body>*{position:relative;z-index:1}.page-home{--page-bg:url("images/backgrounds/home.jpg")}.page-hospitals{--page-bg:url("images/backgrounds/hospitals.jpg")}.page-industrial{--page-bg:url("images/backgrounds/industrial.jpg")}.page-underground{--page-bg:url("images/backgrounds/underground.jpg")}.page-ruins{--page-bg:url("images/backgrounds/ruins.jpg")}.page-misc{--page-bg:url("images/backgrounds/misc.jpg")}a{color:inherit}img{max-width:100%;display:block}.shell{width:min(calc(100% - 32px),var(--max-width));margin-inline:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(7,8,8,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}.header-inner{min-height:70px;display:flex;align-items:center;gap:24px}.brand-square{display:block;width:46px;height:46px;flex:0 0 46px}.brand-square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}.main-nav{margin-left:auto;display:flex;align-items:center;gap:2px}.main-nav a{padding:10px 11px;color:#c8cac8;font-size:.84rem;text-decoration:none;border-bottom:1px solid transparent}.main-nav a:hover,.main-nav a[aria-current="page"]{color:#fff;border-bottom-color:rgba(255,255,255,.68)}.menu-button{display:none;margin-left:auto;padding:8px 10px;color:var(--text);background:transparent;border:1px solid var(--border-strong)}.home-hero{min-height:380px;padding:74px 0 38px;display:grid;align-content:center;justify-items:center;gap:32px}.home-logo-wrap{width:min(760px,88vw)}.home-logo{width:100%;height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.55))}.home-intro{width:min(780px,100%);text-align:left}.panel{background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 36px rgba(0,0,0,.22)}.home-intro,.category-heading,.thread-heading,.rules{padding:24px 26px}.text-link{display:inline-block;margin-top:4px;color:#d8dad8}.section{padding:26px 0 40px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:12px}h1,h2,h3{margin-top:0;font-family:var(--font-display);line-height:1.15}h1{font-size:clamp(2rem,5vw,3.7rem);margin-bottom:10px}h2{font-size:1.2rem;margin-bottom:7px}h3{font-size:1rem;margin-bottom:7px}.eyebrow,.thread-category{display:block;margin:0 0 7px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border);background:var(--surface)}.category-card{min-height:88px;display:flex;align-items:end;padding:14px;color:#d8dad8;text-decoration:none;border-right:1px solid var(--border);transition:background .15s ease,color .15s ease}.category-card:last-child{border-right:0}.category-card:hover{background:var(--surface-hover);color:#fff}.thread-stack{display:grid;gap:8px}.thread-card{display:grid;grid-template-columns:156px minmax(0,1fr);min-height:128px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}.thread-openable{border-color:rgba(255,255,255,.15)}.thread-openable:hover{background:var(--surface-hover)}.thread-thumb{min-height:128px;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),var(--thumb);background-size:cover;background-position:center;filter:grayscale(100%);user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.thread-copy{padding:15px 18px;min-width:0}.thread-copy p{max-width:78ch;margin:6px 0 12px;color:#b1b3b1;font-size:.91rem}.thread-copy h2,.thread-copy h3{margin-bottom:2px}.thread-copy h2 a,.thread-copy h3 a{color:#f1f1ee;text-decoration-thickness:1px;text-underline-offset:3px}.thread-title-static{color:#dedfdd}.thread-meta{display:flex;flex-wrap:wrap;gap:7px 16px;color:var(--faint);font-size:.78rem}.thread-meta span+span::before{content:"·";margin-right:16px;color:#545755}.search input{width:min(290px,70vw);padding:9px 10px;border:1px solid var(--border);background:rgba(10,11,11,.92);color:var(--text)}.search input::placeholder{color:#777a78}.page{padding-top:24px;padding-bottom:54px}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;color:#8f9290;font-size:.8rem}.category-heading,.thread-heading{margin-bottom:14px}.category-heading p,.thread-heading p{margin-bottom:0;color:#a7aaa8}.pagination{display:flex;gap:5px;margin-top:18px}.pagination a{min-width:34px;padding:7px 9px;text-align:center;text-decoration:none;background:var(--surface);border:1px solid var(--border);color:#bfc1bf}.pagination a[aria-current="page"]{background:#d7d8d6;color:#111}.rules{max-width:840px}.rules section{padding:22px 0 12px;border-top:1px solid var(--border)}.rules section:first-of-type{margin-top:18px}.rules p{color:#b5b7b5;max-width:75ch}.posts{display:grid;gap:10px}.post{display:grid;grid-template-columns:180px minmax(0,1fr);background:var(--surface);border:1px solid var(--border)}.post-user{display:flex;flex-direction:column;gap:4px;padding:16px;background:rgba(24,25,25,.86);border-right:1px solid var(--border);color:#8d908e;font-size:.8rem}.post-user strong{color:#e7e8e6}.avatar-placeholder{width:82px;aspect-ratio:1;display:grid;place-items:center;margin-bottom:7px;color:#747775;background:#101111;border:1px dashed #4d504e}.post-content{padding:16px 20px}.post-content p{max-width:78ch;color:#c1c3c1}.post-meta{display:flex;justify-content:space-between;padding-bottom:10px;margin-bottom:14px;color:#747775;font-size:.78rem;border-bottom:1px solid var(--border)}.gallery-note{margin-top:20px;min-height:160px;display:grid;place-items:center;color:#777a78;border:1px dashed #4d504e;background:#101111}.site-footer{margin-top:30px;padding:24px 0;background:rgba(5,6,6,.94);border-top:1px solid var(--border)}.footer-inner{display:flex;justify-content:space-between;gap:20px;color:#777a78;font-size:.78rem}.footer-nav{display:flex;gap:16px}.footer-nav a{color:#9ea19f}.no-results{padding:16px;color:var(--muted)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:900px){.category-grid{grid-template-columns:repeat(2,1fr)}.category-card{border-bottom:1px solid var(--border)}.menu-button{display:inline-block}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;padding:10px 16px 16px;flex-direction:column;align-items:stretch;background:rgba(7,8,8,.985);border-bottom:1px solid var(--border)}.main-nav.is-open{display:flex}.main-nav a{padding:11px 4px}}@media(max-width:650px){body::before{opacity:.17}.home-hero{min-height:320px;padding-top:54px}.thread-card{grid-template-columns:100px minmax(0,1fr)}.thread-thumb{min-height:150px}.section-heading{align-items:start;flex-direction:column}.post{grid-template-columns:1fr}.post-user{border-right:0;border-bottom:1px solid var(--border)}.footer-inner{flex-direction:column}}@media(max-width:460px){.category-grid{grid-template-columns:1fr}.thread-card{grid-template-columns:1fr}.thread-thumb{min-height:155px}.thread-meta span+span::before{content:"";margin-right:0}.home-intro,.category-heading,.thread-heading,.rules{padding:19px}}

/* ===========================
   MEDIA ARCHIVE
   =========================== */
.media-archive {
  display: grid;
  gap: 12px;
}

.media-card {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
}

.media-preview {
  min-height: 320px;
  background: #0d0e0e;
  border-right: 1px solid var(--border);
}

.media-preview img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: contain;
  background: #0d0e0e;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.media-placeholder {
  min-height: 320px;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #717472;
  text-align: center;
  border: 1px dashed #454846;
  background:
    repeating-linear-gradient(
      45deg,
      #111212,
      #111212 12px,
      #151616 12px,
      #151616 24px
    );
}

.media-copy {
  padding: 24px 26px;
}

.media-copy h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin-bottom: 8px;
}

.media-copy p {
  max-width: 70ch;
  color: #b7b9b7;
}

.media-date {
  color: var(--faint) !important;
  font-size: .82rem;
}

@media (max-width: 720px) {
  .media-card {
    grid-template-columns: 1fr;
  }

  .media-preview {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}


/* ===========================
   HOMEPAGE INTRO COPY
   =========================== */
.welcome-line {
  margin: 10px 0 8px;
  color: #d7d9d7;
  font-size: clamp(1rem, 2vw, 1.12rem);
}

.forum-types {
  margin: 8px 0 16px;
  color: #a5a8a6;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .10em;
}

.forum-types span,
.slash-divider,
.strap-divider {
  color: #696d6a;
}

.account-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 9px;
  align-items: center;
  margin-top: 12px;
  font-size: .82rem;
}

.account-links a,
.fake-link {
  color: #d4d6d4;
  text-decoration: none;
}

.account-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-links a:hover {
  color: #fff;
}

.fake-link {
  cursor: default;
}

.link-separator {
  color: #5e625f;
}


/* V5 top navigation treatment */
.main-nav a {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}


/* V5 small inline divider used in thread preview copy */
.thread-inline-divider {
  color: #666a67;
  margin-inline: .22em;
}


/* ===========================
   V6 FOOTER
   =========================== */
.footer-inner {
  align-items: center;
}

.footer-divider {
  color: #5e625f;
  margin-inline: .22em;
}

.footer-whisper {
  color: #8f9290;
  text-align: right;
}

.footer-whisper a {
  color: #c8cac8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-whisper a:hover {
  color: #fff;
}


/* ===========================
   V7 VISUAL / HOMEPAGE TWEAKS
   =========================== */

/* Double-sized BB mark on desktop. The source asset is already tight-cropped. */
.header-inner {
  min-height: 164px;
}

.brand-square {
  width: 152px;
  height: 152px;
  flex: 0 0 152px;
}

.brand-square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bring the large homepage wordmark and its intro panel upward together. */
.home-hero {
  min-height: 330px;
  margin-top: -34px;
  padding-top: 38px;
  padding-bottom: 24px;
  gap: 20px;
}

/* Category tiles now visually match the top navigation. */
.category-card {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* Keep the mobile menu aligned beneath the enlarged header. */
@media (max-width: 900px) {
  .header-inner {
    min-height: 122px;
  }

  .brand-square {
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
  }

  .main-nav {
    top: 122px;
  }
}

@media (max-width: 650px) {
  .home-hero {
    margin-top: -18px;
    padding-top: 34px;
  }
}

@media (max-width: 520px) {
  .header-inner {
    min-height: 104px;
  }

  .brand-square {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
  }

  .main-nav {
    top: 104px;
  }
}

/* V7.1: keep the openable homepage report title visually consistent with static thread titles */
#thread-list .thread-openable .thread-copy h3 a,
#thread-list .thread-openable .thread-copy h3 a:hover {
  text-decoration: none;
}


/* ===========================
   V8 THREAD LINKS / CONTACT
   =========================== */

/* Openable report titles look like the static ones: no default underline. */
.thread-copy h2 a,
.thread-copy h3 a,
.thread-copy h2 a:hover,
.thread-copy h3 a:hover {
  text-decoration: none;
}

.thread-copy h2 a:hover,
.thread-copy h3 a:hover {
  color: #ffffff;
}

.contact-panel {
  padding: 24px 26px;
  max-width: 840px;
}

/* V9 category/contact/media tweaks */
.category-card {
  min-height: 54px;
  padding: 10px 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr);
  gap: 28px;
  align-items: center;
}
.contact-image-wrap { position: relative; }
.contact-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
}
.contact-arrow {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  color: #f2f2ee;
  font-size: 3rem;
  line-height: 1;
  text-shadow: 0 2px 12px #000;
}
.contact-copy h2 { margin-bottom: 10px; text-transform: none; }
.contact-copy a, .category-heading a {
  color: #e4e6e4;
  text-underline-offset: 3px;
}
.media-copy h2 a, .media-copy h2 a:hover {
  text-decoration: none;
  color: #f1f1ee;
}
.media-copy h2 a:hover { color: #fff; }
.media-preview-text {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: #a9aca9 !important;
}
.article-page { overflow: hidden; }
.article-header, .article-body { padding: 26px 30px; }
.article-header { border-bottom: 1px solid var(--border); }
.article-header h1 { max-width: 18ch; }
.article-deck { max-width: 70ch; color: #b8bab8; }
.article-image { margin: 0; background: #0c0d0d; }
.article-image img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}
.article-body { max-width: 860px; }
.article-body p { color: #c4c6c4; line-height: 1.75; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-arrow {
    top: auto;
    right: 50%;
    bottom: -38px;
    transform: translateX(50%) rotate(90deg);
  }
}


/* ===========================
   V10 IMAGE HOVER TREATMENT
   =========================== */

/* Photography starts in grayscale and smoothly returns to colour on hover. */
.thread-thumb,
.contact-image-wrap img,
.media-preview img,
.article-image img {
  filter: grayscale(100%);
  transition: filter .28s ease;
}

.thread-thumb:hover,
.thread-card:hover .thread-thumb,
.contact-image-wrap:hover img,
.media-preview:hover img,
.article-image:hover img {
  filter: grayscale(0%);
}

/* Contact image now sits on the right; remove previous arrow styling. */
.contact-arrow {
  display: none !important;
}

@media (max-width: 760px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}


/* ===========================
   V10.1 IMAGE EXCEPTIONS
   =========================== */

/* Contact image stays in full colour at all times. */
.contact-image-wrap img,
.contact-image-wrap:hover img {
  filter: grayscale(0%) !important;
}

/* The image inside the opened article stays in full colour at all times. */
.article-image img,
.article-image:hover img {
  filter: grayscale(0%) !important;
}

/* Media-page thumbnail remains grayscale until hover. */
.media-preview img {
  filter: grayscale(100%);
}

.media-preview:hover img {
  filter: grayscale(0%);
}


/* ===========================
   V10.2 CONTACT / ARTICLE SIZING
   =========================== */

/* Let the contact panel span the same full content width as the panel above it. */
.contact-panel {
  width: 100%;
  max-width: none;
}

/* Give the photograph more horizontal presence while preserving the sign area. */
.contact-grid {
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  width: 100%;
}

.contact-image-wrap {
  min-height: 300px;
  overflow: hidden;
}

.contact-image-wrap img,
.contact-image-wrap:hover img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(0%) !important;
}

/* Make the opened article photograph about half the content width. */
.article-image {
  width: 52%;
  max-width: 680px;
  margin: 24px auto 0;
}

.article-image img,
.article-image:hover img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  filter: grayscale(0%) !important;
}

@media (max-width: 760px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-image-wrap,
  .contact-image-wrap img,
  .contact-image-wrap:hover img {
    min-height: 0;
    height: auto;
  }

  .article-image {
    width: calc(100% - 36px);
    max-width: none;
  }
}


/* ===========================
   V11 MEDIA SAFETY NOTICE
   =========================== */
.media-preview {
  position: relative;
}

.media-warning {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(16, 12, 8, .92);
  border: 1px solid rgba(235, 178, 72, .68);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  color: #e9e2d5;
  font-size: .76rem;
  line-height: 1.35;
  backdrop-filter: blur(6px);
}

.media-warning strong {
  color: #f2c76d;
  font-size: .73rem;
  letter-spacing: .08em;
}

.media-warning span {
  color: #cec8bd;
}

@media (max-width: 700px) {
  .media-warning {
    position: static;
    margin: 10px;
  }
}


/* ===========================
   V12 COMMENTS
   =========================== */
.comments-section {
  margin-top: 18px;
  overflow: hidden;
}

.comments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(24,25,25,.96);
  border-bottom: 1px solid var(--border);
}

.comments-heading h2 {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .06em;
}

.comments-count {
  color: var(--faint);
  font-size: .78rem;
}

.comments-list {
  display: grid;
}

.comment {
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--border);
}

.comment:last-child {
  border-bottom: 0;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 7px;
  color: var(--faint);
  font-size: .78rem;
}

.comment-meta strong {
  color: #d9dbd9;
  font-size: .82rem;
}

.comment p {
  margin: 0;
  color: #bfc1bf;
  font-size: .9rem;
  line-height: 1.55;
}


/* ===========================
   V14 DISCLAIMER
   =========================== */
.site-disclaimer {
  margin-top: 18px;
  padding: 18px 20px;
  border-style: dashed;
  background: rgba(15,16,16,.92);
  color: #909390;
}

.site-disclaimer h2 {
  margin: 0 0 10px;
  color: #b8bbb8;
  font-size: .72rem;
  letter-spacing: .12em;
}

.site-disclaimer p {
  margin: 0 0 8px;
  color: #929592;
  font-size: .72rem;
  line-height: 1.55;
}

.site-disclaimer p:last-child {
  margin-bottom: 0;
}

.site-disclaimer strong {
  color: #bfc2bf;
  font-weight: 600;
}

.site-disclaimer-compact {
  padding: 14px 16px;
}

.site-disclaimer-compact p {
  font-size: .68rem;
}


/* ===========================
   V15 AVATARS + MEDIA POLISH
   =========================== */

/* Openable report-page avatar. */
.user-avatar {
  width: 68px;
  height: 68px;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  opacity: .92;
}

/* Tiny comment avatar. */
.comment {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.comment-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  opacity: .88;
}

.comment-meta,
.comment > p {
  grid-column: 2;
}

/* Media preview: grayscale normally; sorrowful muted colour on hover. */
.media-preview img {
  filter: grayscale(100%);
  transition: filter .3s ease;
}

.media-preview:hover img {
  filter: grayscale(0%) saturate(50%) brightness(92%);
}

/* Opened article image stays permanently muted rather than fully vivid. */
.article-image img,
.article-image:hover img {
  filter: saturate(50%) brightness(90%) !important;
}

/* Media-page disclaimer: fine print immediately below article card. */
.page-media .media-archive + .site-disclaimer {
  margin-top: 7px;
  padding: 7px 10px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.045);
  background: transparent;
  box-shadow: none;
  opacity: .52;
}

.page-media .media-archive + .site-disclaimer h2 {
  margin: 0 0 3px;
  font-size: .55rem;
  letter-spacing: .10em;
}

.page-media .media-archive + .site-disclaimer p {
  margin: 0 0 3px;
  color: #858885;
  font-size: .54rem;
  line-height: 1.38;
}

.page-media .media-archive + .site-disclaimer strong {
  color: #969996;
}

@media (max-width: 700px) {
  .comment {
    grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 8px;
  }

  .comment-avatar {
    width: 21px;
    height: 21px;
  }

  .user-avatar {
    width: 56px;
    height: 56px;
  }
}


/* ===========================
   V16 HOME / AVATARS / WHEAL LEDER
   =========================== */

/* Homepage welcome box now aligns with the full content width below it. */
.page-home .home-hero {
  min-height: 0;
  padding: 28px 0 14px;
  gap: 14px;
}

.page-home .home-logo-wrap {
  width: min(650px, 78vw);
}

.page-home .home-intro {
  width: 100%;
  max-width: none;
  padding-top: 18px;
  padding-bottom: 18px;
}

.page-home .section {
  padding-top: 16px;
  padding-bottom: 24px;
}

.page-home .section-heading {
  margin-bottom: 9px;
}

/* Comment avatars: doubled in size from V15. */
.comment {
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
}

.comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

/* Contact-page admin identity/avatar. */
.contact-admin-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-avatar {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: #101111;
}

.admin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-paper {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 25px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: #d3d0c8;
  background: rgba(30,30,29,.95);
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(-5deg);
}

.admin-pen {
  position: absolute;
  right: 24px;
  bottom: 3px;
  z-index: 2;
  color: #bab6ad;
  font-size: 20px;
  transform: rotate(-28deg);
  text-shadow: 0 2px 3px #000;
}

.admin-id-copy {
  display: grid;
  gap: 3px;
}

.admin-id-copy span {
  color: var(--faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
}

.admin-id-copy a {
  font-weight: 700;
  text-decoration: none;
}

/* Wheal Leder report: images are intentionally substantial but not huge. */
.report-lede {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: #d0d2d0 !important;
  font-weight: 600;
}

.report-photo {
  width: min(62%, 650px);
  margin: 20px auto;
}

.report-photo.report-photo-wide {
  width: min(72%, 760px);
}

.report-photo.report-photo-medium {
  width: min(56%, 590px);
}

.report-photo.report-photo-small {
  width: min(46%, 480px);
}

.report-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter .28s ease;
}

.report-photo:hover img {
  filter: grayscale(0%);
}

.report-photo figcaption {
  margin-top: 5px;
  color: #747775;
  font-size: .63rem;
  line-height: 1.35;
  text-align: right;
}

.report-photo figcaption a {
  color: #8e918f;
}

.report-photo-grid {
  max-width: 820px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.report-photo-grid .report-photo {
  width: 100%;
  margin: 0;
}

.report-photo-grid img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.report-photo-grid-portrait img {
  max-height: 500px;
  object-fit: cover;
}

@media (max-width: 700px) {
  .page-home .home-hero {
    padding-top: 18px;
    gap: 10px;
  }

  .page-home .home-logo-wrap {
    width: min(560px, 86vw);
  }

  .comment {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 10px;
  }

  .comment-avatar {
    width: 42px;
    height: 42px;
  }

  .report-photo,
  .report-photo.report-photo-wide,
  .report-photo.report-photo-medium,
  .report-photo.report-photo-small {
    width: min(92%, 620px);
  }

  .report-photo-grid {
    grid-template-columns: 1fr;
    max-width: 92%;
  }
}


/* ===========================
   V16.1 WHEAL CREDIT HOVERS
   =========================== */

/* Third-party image credits stay tucked away until the image is hovered
   or keyboard-focused. Author-owned photos have no figcaption. */
.report-photo figcaption {
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.report-photo:hover figcaption,
.report-photo:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Keep the Wheal Leder disclaimer visually separate from the report. */
.page-underground .posts + .site-disclaimer {
  margin-top: 18px;
}

/* On touch devices, a focused/tapped credited image can still reveal attribution. */
@media (hover: none) {
  .report-photo:focus-within figcaption {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===========================
   V17 TYPOGRAPHY
   =========================== */

/* Body copy: restrained, highly readable modern sans. */
html,
body,
button,
input,
textarea,
select {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* Display/UI typography: condensed, utilitarian, signage-like. */
h1,
h2,
h3,
h4,
h5,
h6,
.main-nav,
.menu-button,
.eyebrow,
.category-card,
.category-heading h1,
.thread-copy h2,
.thread-copy h3,
.thread-heading h1,
.comments-heading h2,
.article-header h1,
.media-copy h2,
.search-wrap input,
.admin-id-copy span {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

/* Give titles the slightly harder-edged forum/signage feel from the concept. */
h1,
.thread-heading h1,
.article-header h1 {
  font-weight: 600;
  letter-spacing: .015em;
}

h2,
h3,
.thread-copy h2,
.thread-copy h3,
.media-copy h2,
.comments-heading h2 {
  font-weight: 600;
  letter-spacing: .02em;
}

.main-nav,
.menu-button,
.eyebrow,
.category-card,
.admin-id-copy span {
  font-weight: 700;
  letter-spacing: .07em;
}

/* Keep body text calm and natural. */
p,
.thread-meta,
.comment,
.comment-meta,
.article-body,
.media-date,
.breadcrumbs,
.site-disclaimer {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}


/* ===========================
   V18 NAV / LAYOUT / WHEAL COMMENTS
   =========================== */

/* Larger Barlow Condensed menu text. */
.main-nav a {
  font-size: 1.16rem;
  line-height: 1;
  padding: 11px 12px;
}

@media (max-width: 1120px) and (min-width: 901px) {
  .main-nav a {
    font-size: 1.04rem;
    padding-inline: 8px;
  }
}

/* Tighten the gap between pagination/content and the footer on non-home pages. */
body:not(.page-home) .page {
  padding-bottom: 24px;
}

body:not(.page-home) .site-footer {
  margin-top: 10px;
}

/* Wheal Leder post photography is full colour and aligned with the report text. */
.page-underground .report-photo,
.page-underground .report-photo.report-photo-wide,
.page-underground .report-photo.report-photo-medium,
.page-underground .report-photo.report-photo-small {
  margin-left: 0;
  margin-right: 0;
}

.page-underground .report-photo-grid {
  margin-left: 0;
  margin-right: 0;
}

.page-underground .report-photo img,
.page-underground .report-photo:hover img {
  filter: none !important;
}

/* Wheal thread comments. */
.wheal-comments {
  margin-top: 16px;
}

.comment p a {
  color: #d5d8d5;
  text-underline-offset: 3px;
}

.comment-attachment-link {
  grid-column: 2;
  display: inline-block;
  width: fit-content;
  margin-top: 8px;
}

.comment-attachment {
  display: block;
  width: 170px;
  height: auto;
  border: 1px solid rgba(255,255,255,.12);
  filter: none !important;
}

.error-panel {
  max-width: 700px;
  padding: 34px 36px;
}

.error-panel h1 {
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  .main-nav a {
    font-size: 1.18rem;
  }

  .comment-attachment {
    width: 145px;
  }

  .error-panel {
    padding: 24px 22px;
  }
}


/* ===========================
   V19 FINAL POLISH
   =========================== */

/* Bring the original paragraph typography back. */
p,
.thread-copy p,
.post-content p,
.comment p,
.article-body p,
.article-deck,
.site-disclaimer p,
.contact-copy p,
.media-copy > p:not(.eyebrow),
.rules p {
  font-family: Arial, Helvetica, sans-serif;
}

/* Desktop header: larger Barlow menu text, but a shorter overall header band. */
@media (min-width: 1121px) {
  .header-inner {
    min-height: 138px;
    gap: 18px;
  }

  .brand-square {
    width: 126px;
    height: 126px;
    flex: 0 0 126px;
  }

  .main-nav {
    transform: translateY(-5px);
  }

  .main-nav a {
    font-size: 1.30rem;
    padding: 7px 9px;
    line-height: 1;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .header-inner {
    min-height: 118px;
    gap: 14px;
  }

  .brand-square {
    width: 106px;
    height: 106px;
    flex: 0 0 106px;
  }

  .main-nav {
    transform: translateY(-4px);
  }

  .main-nav a {
    font-size: 1.10rem;
    padding: 6px 6px;
  }
}

/* Typed monochrome warning mark before Media. */
.nav-danger {
  display: inline-block;
  margin-right: .20em;
  color: #bfc2bf;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .82em;
  filter: grayscale(100%);
  transform: translateY(-.03em);
}

/* @mentions flash/highlight on hover without underlining. */
.mention {
  display: inline-block;
  color: #d8dad8;
  border-radius: 2px;
  padding-inline: 1px;
  cursor: default;
  transition: color .12s ease, background .12s ease, text-shadow .12s ease;
}

.mention:hover {
  color: #ffffff;
  background: rgba(255,255,255,.10);
  text-shadow: 0 0 8px rgba(255,255,255,.58);
  text-decoration: none;
  animation: mention-flash .32s ease-out 1;
}

@keyframes mention-flash {
  0%   { background: rgba(255,255,255,.04); }
  45%  { background: rgba(255,255,255,.20); }
  100% { background: rgba(255,255,255,.10); }
}

/* Pull category pagination/content closer to the footer divide. */
body:not(.page-home) .page {
  padding-bottom: 10px;
}

body:not(.page-home) .site-footer {
  margin-top: 0;
}

.pagination {
  margin-bottom: 0;
}


/* ===========================
   V20 FINAL ALIGNMENT POLISH
   =========================== */

/* Visually align the BB mark with the navigation baseline/centre. */
@media (min-width: 1121px) {
  .brand-square {
    transform: translateY(-6px);
  }

  .main-nav {
    transform: translateY(-5px);
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .brand-square {
    transform: translateY(-4px);
  }

  .main-nav {
    transform: translateY(-4px);
  }
}

/* Give the full homepage wordmark a little more breathing room
   beneath the header divider. */
.page-home .home-hero {
  padding-top: 42px;
}

/* Slightly larger category labels on the homepage. */
.page-home .category-card {
  font-size: 1.10rem;
}


/* ===========================
   V21 PICKY-BIT POLISH
   =========================== */

/* Menu: one notch smaller than V20, while reducing the sticky header band. */
@media (min-width: 1121px) {
  .header-inner {
    min-height: 124px;
  }

  .brand-square {
    width: 116px;
    height: 116px;
    flex: 0 0 116px;
    transform: translateY(-5px);
  }

  .main-nav {
    transform: translateY(-5px);
  }

  .main-nav a {
    font-size: 1.22rem;
    padding: 6px 9px;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .header-inner {
    min-height: 108px;
  }

  .brand-square {
    width: 98px;
    height: 98px;
    flex: 0 0 98px;
    transform: translateY(-4px);
  }

  .main-nav {
    transform: translateY(-4px);
  }

  .main-nav a {
    font-size: 1.05rem;
    padding: 6px 6px;
  }
}

/* A touch more breathing room between category pagination and footer divider. */
.page-underground .pagination,
.page-industrial .pagination,
.page-hospitals .pagination,
.page-ruins .pagination,
.page-misc .pagination {
  margin-bottom: 16px;
}

/* Report listing titles: slightly larger everywhere. */
.thread-copy h2 {
  font-size: 1.36rem;
}

.thread-copy h3 {
  font-size: 1.20rem;
}

/* Footer note. */
.footer-whisper a {
  font-weight: 600;
}

/* Contact social icons. */
.social-links {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
}

.social-links a {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  opacity: .82;
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.30));
}

.social-links svg {
  width: 22px;
  height: 22px;
  color: currentColor;
  fill: currentColor;
}

/* Uniform breathing room after disclaimers before the footer. */
.site-disclaimer {
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .thread-copy h2 {
    font-size: 1.28rem;
  }

  .thread-copy h3 {
    font-size: 1.16rem;
  }
}


/* ===========================
   V21.2 MOBILE FIXES ONLY
   =========================== */
@media (max-width: 700px) {
  /* Make the mobile menu control feel like part of the main navigation. */
  .menu-button {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 10px 12px;
  }

  /* Keep the media safety notice contained and readable on narrow screens. */
  .media-preview .media-warning {
    position: static;
    width: auto;
    max-width: none;
    margin: 10px 0 0;
    padding: 11px 12px;
    box-sizing: border-box;
    transform: none;
  }

  .media-warning strong {
    display: block;
    font-size: .78rem;
    line-height: 1.2;
  }

  .media-warning span {
    display: block;
    margin-top: 3px;
    font-size: .74rem;
    line-height: 1.42;
  }
}


/* ===========================
   V21.5 ARTICLE POLISH
   =========================== */

/* Align the opened Southwest Informer image with the article text rather than centring it. */
.page-article .article-image {
  margin: 24px 0 0 30px;
}

/* Give the italic standfirst/deck more visual weight. */
.page-article .article-deck {
  font-size: 1.18rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .page-article .article-image {
    width: calc(100% - 60px);
    margin-left: 30px;
    margin-right: 30px;
  }

  .page-article .article-deck {
    font-size: 1.12rem;
  }
}