/* GayStash — one community. The header and stat line come from modern.css;
   a community is the same shape of object as a person. Rail modules come
   from modern-rail.css, shared with the activity feed. */

/* the grid and the rail share the page from 1000px up */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:0 0 14px}

/* ── banner ─────────────────────────────────────────────────────
   Behind the header, not above it. A banner as its own block is 150px of
   decoration between a search result and the thing it was looking for; as
   a backdrop it is free, because the name, handle and description already
   need those rows. The header keeps its own height and simply stops being
   plain. */
.pro-ban{
  position:relative;overflow:hidden;
  margin:14px 14px 0;padding:16px 15px;
  border-radius:var(--r-lg);background:var(--surface);
}
.cban{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
/* The scrim is spent where the text is and given back where it isn't. Two
   overlapping gradients at ~.5 each composite to ~.75 everywhere, which is
   what the first attempt did — the banner was technically present and
   visually gone. One gradient, angled, opaque under the name and nearly
   clear at the far corner.

   Phone gets its own, because the text is not left-aligned there so much as
   everywhere: the block wraps to three rows and there is no clear corner
   left to give back. */
.cban::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.9),rgba(10,10,12,.62));
}
@media (min-width:700px){
  .cban::after{
    background:linear-gradient(100deg,
      rgba(10,10,12,.94) 0%,rgba(10,10,12,.82) 42%,
      rgba(10,10,12,.28) 80%,rgba(10,10,12,.1) 100%);
  }
}
/* everything else rides above the layer */
.pro-ban > *:not(.cban){position:relative;z-index:1}
/* on an image, mid-grey stops being readable before white does */
.pro-ban .pro-bio{color:#e8e8ee}
.pro-ban .chandle{color:#b9b9c6}
/* the disc needs an edge of its own or it dissolves into a busy crop */
.pro-ban .pro-av{box-shadow:0 0 0 2px rgba(10,10,12,.55)}
/* Manage sits in the clear corner, where a ghost button is just floating
   text on somebody's photograph. It gets a plate of its own. */
.pro-ban .btn-ghost{background:rgba(10,10,12,.6);color:#fff}
.pro-ban .btn-ghost:hover{background:rgba(10,10,12,.8)}

/* Handle and one-line purpose, on the line under the name. The handle is
   what people type and what the URL is, so it reads first. */
.chandle{font-size:13.5px;font-weight:700;color:var(--text-3);padding-top:3px}
.chandle b{color:var(--text-2);font-weight:700}

/* ── what belongs here ──────────────────────────────────────────
   Every community on the live site is user-created, so the one thing a
   newcomer needs before posting is what this place is for. It is a list,
   not prose: rules nobody can scan are rules nobody follows. */
.rules{padding:0 16px 15px}
.rules li{
  font-size:13.5px;font-weight:500;color:var(--text-2);line-height:1.5;
  padding:5px 0 5px 17px;position:relative;list-style:none;
}
.rules li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--text-3);
}
.rules{margin:0}
.rules + .cfoot{
  padding:12px 16px 15px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--text-3);line-height:1.5;
}
.cfoot a{color:var(--accent);font-weight:700}

@media (min-width:1000px){
  .pro-ban{margin:20px 22px 0;padding:20px 20px}
  .cwrap{grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:0 22px 30px;align-items:start}
  .cwrap .grid{padding:0}
  .cwrap .pager{padding-left:0;padding-right:0}
}