/* /roll — IG-style procedural photo feed.
   Same palette and panel grammar as /space, narrower column. */

.roll-page > main { padding-top: 2.6em; }

.roll {
  max-width: 460px;
  margin: 0.6em auto 4em;
  padding: 0 0.8em;
}
.roll--explore { max-width: 820px; }

/* ----------------------------------------------------------------------- */
/* profile header */

.roll__hdr {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 0.8em;
  margin-bottom: 0.8em;
}
.roll__hdr-top {
  display: flex;
  align-items: center;
  gap: 1em;
}
.roll__avatar {
  width: 80px;
  height: 80px;
  border: 2px solid #000;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 3px 3px 0 #000;
  flex-shrink: 0;
}
.roll__avatar svg { display: block; width: 100%; height: 100%; }
.roll__name {
  margin: 0.5em 0 0;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.04em;
  word-break: break-word;
  text-align: left;
  border-bottom: 0;
  line-height: 1.1;
}
.roll__name::before,
.roll__name::after { content: none; }
.roll__tag {
  margin: 0.15em 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}
.roll__counts {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
  letter-spacing: 0.04em;
  min-width: 0;
}
.roll__counts li {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.roll__counts li::before { content: none; }
.roll__counts b {
  font-weight: normal;
  font-size: 1.25em;
  margin: 0;
}
.roll__counts span {
  margin: 0;
  font-size: 0.7em;
  opacity: 0.7;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .roll__avatar { width: 64px; height: 64px; }
  .roll__name { font-size: 1.2em; }
  .roll__counts b { font-size: 1.1em; }
}

/* ----------------------------------------------------------------------- */
/* feed */

.roll__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
.roll__feed li { padding: 0; }
.roll__feed li::before { content: none; }
.roll__feed-sentinel { height: 1px; }

.post {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  display: flex;
  flex-direction: column;
}
.post__head {
  background: #000;
  color: #fff;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  padding: 0.18em 0.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.post__head a, .post__head a:visited { color: #fff; text-decoration: none; }
.post__head a:hover { background: #fff; color: #000; }
.post__head-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post__head-when { margin-left: auto; opacity: 0.7; font-size: 0.85em; white-space: nowrap; }

.post__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

.post__actions {
  display: flex;
  gap: 0.8em;
  padding: 0.4em 0.6em 0.2em;
  font-size: 0.95em;
  letter-spacing: 0.03em;
}
.post__actions a, .post__actions a:visited { color: #000; text-decoration: none; }
.post__actions a:hover { background: #000; color: #fff; }

.post__caption {
  padding: 0.1em 0.6em 0.5em;
  font-size: 0.95em;
  line-height: 1.3;
  word-break: break-word;
}
.post__caption b { font-weight: normal; margin-right: 0.4em; }
.post__caption a { text-decoration: none; }
.post__caption a:hover { background: #000; color: #fff; }

/* portalis promoted post — the letterhead's colours, as on flux: black card,
   white text, cyan small print and shadow, the disc before the name. the
   picture is a collector card, 4:5 and smooth where posts are square and
   dithered. */
.post--endow {
  background: #000;
  color: #fff;
  box-shadow: 4px 4px 0 #45f0ff;
}
.post--endow .post__head { border-bottom: 2px solid #45f0ff; }
.endow__disc { display: flex; flex-shrink: 0; }
.endow__disc img { display: block; width: 18px; height: 18px; }
.post--endow .post__head-when {
  opacity: 1;
  color: #45f0ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.endow__tick { color: #45f0ff; margin-left: 0.3em; }
.endow__pic { display: block; }
.endow__card {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #000;
}
.endow__go,
.endow__go:visited {
  display: block;
  padding: 0.2em 0.6em;
  background: #45f0ff;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.08em;
}
.endow__go:hover,
.endow__go:focus-visible { background: #fff; color: #000; outline: none; }
.post--endow .post__actions { color: #fff; opacity: 0.55; }
/* the company's name before its caption, in the letterhead's cyan: the vt font has no bold to set it apart */
.post--endow .post__caption b { color: #45f0ff; }
.post__caption.endow__fine {
  margin-top: -0.3em;
  padding-top: 0;
  font-size: 0.7em;
  line-height: 1.2;
  color: #45f0ff;
  opacity: 0.8;
}
/* Portalis OS, boxed (portalis/osbox.js): the os's own colours round it,
   ink teal for the shadow and rule, the call to action as its title bar (the
   gradient, a gold rule under it), the small print in gold */
.post--os { box-shadow: 4px 4px 0 #157a90; }
.post--os .post__head { border-bottom-color: #157a90; }
.post--os .post__head-when,
.post--os .endow__tick,
.post--os .post__caption b { color: #45f0ff; }
.post--os .post__caption.endow__fine { color: #f2c14e; }
.post--os .endow__go,
.post--os .endow__go:visited {
  background: linear-gradient(90deg, #072f3d, #157a90 70%, #2a96ab);
  color: #fff;
  border-bottom: 2px solid #f2c14e;
}
.post--os .endow__go:hover,
.post--os .endow__go:focus-visible { background: #f2c14e; color: #0b2530; }
/* the PortalScript Developer Network's tract (roll.js tract()), as in STRATA ::
   DRIFT's feed: gold leaf on oxblood in a double rule, the disc as a halo with
   rays turning behind it, a verse in serif, the keywords as sacraments. the
   post round it takes the gold where the others take the cyan. sized off the
   card's own width (cqw) so it reads the same in the column and the grid */
.post--creed { box-shadow: 4px 4px 0 #c99a3a; }
.post--creed .post__head { border-bottom-color: #c99a3a; }
.post--creed .post__head-when,
.post--creed .endow__tick,
.post--creed .post__caption b,
.post--creed .post__caption.endow__fine { color: #e8c46a; }
.post--creed .endow__go,
.post--creed .endow__go:visited { background: linear-gradient(180deg, #fff3c4, #d4a640 55%, #a07422); color: #12030a; }
.post--creed .endow__go:hover,
.post--creed .endow__go:focus-visible { background: #fff3c4; }
.endow__tract {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5% 7%;
  text-align: center;
  color: #f3e2b8;
  font-family: Georgia, "Times New Roman", serif;
  background: radial-gradient(ellipse at 50% 30%, #6a1420 0%, #3a0810 45%, #12030a 100%);
  border: 5px double #c99a3a;
  box-shadow: inset 0 0 0 6px #12030a, inset 0 0 0 7px rgba(201, 154, 58, 0.45);
}
.endow__tract > span { position: relative; display: block; margin-top: 3.5cqw; }
.endow__tract > span:first-child { margin-top: 0; }
.endow__tract .k { font-size: 3.4cqw; letter-spacing: 0.16em; white-space: nowrap; color: #c99a3a; }
.endow__tract .halo { width: 30cqw; height: 30cqw; margin: 6cqw 0 3cqw; }
.endow__tract .halo i {
  position: absolute;
  inset: -16cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 214, 120, 0.32) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%);
  mask: radial-gradient(circle, #000 18%, transparent 70%);
  animation: creed-rays 40s linear infinite;
}
.endow__tract .halo::before {
  content: "";
  position: absolute;
  inset: -4cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.5), transparent 68%);
  animation: creed-candle 3.1s ease-in-out infinite;
}
.endow__tract .disc { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5cqw rgba(255, 200, 90, 0.7)); }
.endow__tract .call {
  font-size: 8.4cqw;
  line-height: 1.08;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.endow__tract .verse { font-size: 5.6cqw; line-height: 1.3; font-style: italic; }
.endow__tract .ref { display: block; margin-top: 1cqw; font-style: normal; font-size: 3.4cqw; letter-spacing: 0.22em; text-transform: uppercase; color: #c99a3a; }
.endow__tract .rites {
  align-self: stretch;
  padding: 1.4cqw 0;
  border-top: 1px solid rgba(201, 154, 58, 0.4);
  border-bottom: 1px solid rgba(201, 154, 58, 0.4);
  font-family: vtFont, "Courier New", monospace;
  font-size: 5.4cqw;
  letter-spacing: 0.12em;
  color: #e8c46a;
}
.endow__tract .rites i { font-style: normal; color: #8a2a2a; }
@keyframes creed-rays { to { transform: rotate(360deg); } }
@keyframes creed-candle { 0%, 100% { opacity: 0.75; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: 0.82; } 70% { opacity: 0.95; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .endow__tract .halo i, .endow__tract .halo::before { animation: none; } }

/* ----------------------------------------------------------------------- */
/* explore mode (no ?artist= param) */

.roll__explore-grid {
  list-style: none;
  margin: 0;
  padding: 0.6em 0.6em 0.7em;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6em;
}
.roll__explore-grid li { padding: 0; min-width: 0; }
.roll__explore-grid li::before { content: none; }
.roll__explore-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 0.25em;
  padding: 0.2em;
  border: 1px solid transparent;
  min-width: 0;
}
.roll__explore-grid a:hover { background: #000; color: #fff; border-color: #000; }
.roll__explore-grid__pic {
  width: 56px;
  height: 56px;
  border: 1px solid #000;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}
.roll__explore-grid__pic svg { display: block; width: 100%; height: 100%; }
.roll__explore-grid__name {
  font-size: 0.85em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
  min-width: 0;
}
@media (max-width: 720px) {
  .roll__explore-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .roll__explore-grid { grid-template-columns: repeat(3, 1fr); }
}

.roll__intro-actions {
  margin: 0.5em 0 0;
  font-size: 0.95em;
}

/* ----------------------------------------------------------------------- */
/* shared modal + btn — same as space.css. Kept inline so /roll loads
   independently of /space's stylesheet. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal__win {
  position: relative;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
  min-width: 18em;
  max-width: 26em;
  margin: 1em;
}
.modal__h {
  background: #000;
  color: #fff;
  padding: 0.2em 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95em;
}
.modal__body { padding: 0.7em 0.8em; }
.modal__msg { margin: 0 0 0.8em; font-size: 1em; line-height: 1.3; }
.modal__actions { display: flex; justify-content: flex-end; }

.btn-inv,
.btn-inv:visited {
  display: inline-block;
  padding: 0.05em 0.7em;
  background: #000;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  font: inherit;
  border: 2px solid #000;
  cursor: pointer;
  margin-right: 0.4em;
}
.btn-inv:hover { background: #00c800; color: #000; }

/* shared-post modal — opens automatically when arriving via #post=<seed>
   so the recipient sees the specific photo, not the whole feed. */
.modal__win--share { max-width: 26em; width: 26em; }
@media (max-width: 480px) {
  .modal__win--share { width: auto; max-width: calc(100vw - 2em); }
}
.modal__body--share { padding: 0; }
.modal__share-host .post {
  border: 0;
  box-shadow: none;
  border-bottom: 2px solid #000;
}

/* list-style modal — used by likes / comments popups on /roll. */
.modal__win--list { max-width: 30em; width: 30em; }
@media (max-width: 480px) {
  .modal__win--list { width: auto; max-width: calc(100vw - 2em); }
}
.modal__body--list { padding: 0; }
.modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.modal__list li::before { content: none; }
.modal__row { padding: 0; }
.modal__row + .modal__row { border-top: 1px solid #000; }
.modal__row-link {
  display: flex;
  gap: 0.6em;
  align-items: center;
  padding: 0.45em 0.7em;
  color: #000;
  text-decoration: none;
}
.modal__row-link:hover { background: #00c800; color: #000; }
.modal__row-av {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  image-rendering: pixelated;
  display: block;
}
.modal__row-av svg { display: block; width: 100%; height: 100%; }
.modal__row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.modal__row-name {
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__row-sub {
  font-size: 0.85em;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.modal__list-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0.7em;
  border-top: 2px solid #000;
}