/* Detailed section illustrations. Every scene is complete without JavaScript. */
.section-art {
  --art-bg: var(--paper-2);
  --art-panel: var(--paper);
  --art-line: var(--ink);
  --art-muted: var(--line);
  --art-accent: var(--red);
  --art-accent-ink: var(--red-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  margin: 32px 0 0;
  border: 1px solid var(--art-line);
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--art-muted) 50%, transparent) 50%, transparent 50.2%) 0 0 / 24px 24px,
    linear-gradient(transparent 49.8%, color-mix(in srgb, var(--art-muted) 50%, transparent) 50%, transparent 50.2%) 0 0 / 24px 24px,
    var(--art-bg);
  box-shadow: 4px 4px 0 var(--shadow);
  color: var(--ink);
  font-family: var(--pixel);
  container-type: inline-size;
}

.section-art span,
.section-art div,
.section-art i,
.section-art b,
.section-art em,
.section-art strong,
.section-art small {
  box-sizing: border-box;
}

.section-art i,
.section-art em {
  font-style: normal;
}

.section-art b,
.section-art strong {
  font-weight: 400;
}

.section-art [data-art-part='line'] {
  transform-origin: left center;
}

.section-art .is-selected {
  background: var(--art-accent);
  color: #fff;
}

.art-macbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  height: 27px;
  border-bottom: 1px solid var(--art-line);
  background: repeating-linear-gradient(var(--art-panel) 0 2px, var(--art-line) 2px 3px, var(--art-panel) 3px 5px);
}

.art-macbar b {
  justify-self: center;
  padding: 3px 10px;
  background: var(--art-panel);
  font: 400 12px/1 var(--pixel);
  letter-spacing: .05em;
}

.art-macbar i,
.art-macbar span {
  display: block;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
}

.art-macbar span {
  margin: 0 5px 0 0;
  box-shadow: inset 2px 2px 0 var(--art-muted);
}

/* Feature scenes: real media objects, not settings mockups. */
.idea .section-art {
  margin-top: 0;
}

.idea .section-art + h3 {
  margin-top: 22px;
}

.feature-scene {
  height: 200px;
}

.feature-scene--editions,
.feature-scene--calendar {
  height: auto;
  min-height: 316px;
}

.feature-scene b,
.feature-scene em,
.feature-scene small {
  display: block;
  font: 400 12px/1.25 var(--pixel);
  letter-spacing: .04em;
}

.edition-workspace,
.calendar-workspace {
  display: grid;
  gap: 10px;
  min-height: 315px;
  padding: 41px 12px 12px;
}

.edition-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.edition-poster {
  display: block;
  width: 48px;
  height: 58px;
  border: 1px solid var(--art-line);
  background:
    radial-gradient(circle at 68% 26%, var(--art-panel) 0 5px, transparent 6px),
    linear-gradient(148deg, transparent 43%, var(--art-line) 44% 47%, transparent 48%),
    linear-gradient(32deg, var(--art-accent) 0 34%, transparent 35%),
    var(--folder);
}

.edition-heading__copy {
  min-width: 0;
}

.edition-heading__copy b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-heading__copy small {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 10px;
}

.edition-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  min-width: 0;
}

.edition-list {
  display: grid;
  min-width: 0;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
}

.edition-list__head,
.edition-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 54px;
  align-items: center;
  min-width: 0;
}

.edition-list__head {
  min-height: 28px;
  background: var(--art-line);
  color: var(--art-bg);
}

.edition-list__head b,
.edition-list__head em,
.edition-list__head small,
.edition-row b,
.edition-row em,
.edition-row small {
  min-width: 0;
  padding: 5px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-list__head > :not(:last-child),
.edition-row > :not(:last-child) {
  border-right: 1px solid var(--art-muted);
}

.edition-row {
  min-height: 34px;
  border-top: 1px solid var(--art-muted);
}

.edition-row:first-of-type {
  border-top: 0;
}

.edition-row em {
  color: var(--ink-2);
  font-size: 10px;
}

.edition-row small {
  color: var(--art-accent-ink);
  font-size: 9px;
  text-align: right;
}

.edition-target {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 34px 7px 10px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--art-accent);
  text-align: center;
}

.edition-target b {
  position: absolute;
  inset: 0 0 auto;
  padding: 8px 4px;
  border-bottom: 1px solid var(--art-line);
}

.edition-target i {
  position: relative;
  display: block;
  width: 50px;
  height: 34px;
  border: 1px solid var(--art-line);
  background: var(--folder);
}

.edition-target i::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 7px;
  width: 21px;
  height: 6px;
  border: 1px solid var(--art-line);
  border-bottom: 0;
  background: var(--folder);
}

.edition-target em,
.edition-target small {
  color: var(--ink-2);
  font-size: 10px;
}

.calendar-workspace {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto;
}

.calendar-month,
.episode-record,
.queue-story {
  min-width: 0;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
}

.calendar-month {
  padding: 8px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.calendar-month__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--art-line);
}

.calendar-month__head em {
  color: var(--ink-2);
  font-size: 10px;
}

.calendar-days,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-days {
  padding: 6px 0 4px;
}

.calendar-days small {
  color: var(--ink-2);
  font-size: 8px;
  text-align: center;
}

.calendar-grid {
  border-top: 1px solid var(--art-muted);
  border-left: 1px solid var(--art-muted);
}

.calendar-grid i {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-right: 1px solid var(--art-muted);
  border-bottom: 1px solid var(--art-muted);
  color: var(--ink-2);
  font: 400 8px/1 var(--pixel);
}

.calendar-grid i.is-release {
  background: var(--art-accent);
  color: #fff;
}

.calendar-grid i.is-release::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 3px;
  height: 3px;
  background: currentColor;
}

.episode-record {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  box-shadow: 3px 3px 0 var(--art-accent);
}

.episode-record__art {
  min-height: 96px;
  border-right: 1px solid var(--art-line);
  background:
    radial-gradient(circle at 56% 32%, var(--art-panel) 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 39%, var(--art-line) 40% 44%, transparent 45%),
    linear-gradient(45deg, var(--art-accent) 0 34%, transparent 35%),
    var(--folder);
}

.episode-record__copy {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 8px;
}

.episode-record__copy b {
  overflow-wrap: anywhere;
}

.episode-record__copy em,
.episode-record__copy small {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 9px;
}

.episode-record__copy em {
  color: var(--art-accent-ink);
}

.queue-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  box-shadow: 3px 3px 0 var(--shadow);
}

.queue-step {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 70px;
  padding: 9px 18px 9px 9px;
}

.queue-step + .queue-step {
  border-left: 1px solid var(--art-line);
}

.queue-step:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -5px;
  width: 8px;
  height: 8px;
  border: solid var(--art-accent-ink);
  border-width: 1px 1px 0 0;
  background: var(--art-panel);
  transform: translateY(-50%) rotate(45deg);
}

.queue-step b {
  color: var(--ink);
  font-size: 10px;
}

.queue-step small {
  color: var(--ink-2);
  font-size: 9px;
}

.queue-step--alert b {
  color: var(--art-accent-ink);
}

.media-downloaders {
  position: absolute;
  left: 5%;
  top: 52px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: 28%;
  min-width: 92px;
  height: 112px;
  padding: 39px 8px 9px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.media-downloaders b {
  position: absolute;
  inset: 0 0 auto;
  padding: 9px 4px;
  border-bottom: 1px solid var(--art-line);
  text-align: center;
}

.media-downloaders i {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--art-line);
  background: var(--folder);
  font: 400 12px/1 var(--pixel);
}

.media-file {
  position: absolute;
  left: 40%;
  top: 63px;
  display: grid;
  place-items: end center;
  width: 58px;
  height: 82px;
  padding-bottom: 7px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--art-accent);
}

.media-file::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 16px;
  height: 16px;
  border-left: 1px solid var(--art-line);
  border-bottom: 1px solid var(--art-line);
  background: var(--folder);
}

.media-file i {
  position: absolute;
  left: 10px;
  top: 23px;
  width: 34px;
  height: 24px;
  border: 1px solid var(--art-line);
  background: linear-gradient(35deg, var(--art-accent) 0 36%, transparent 37%), var(--folder);
}

.media-route {
  position: absolute;
  left: 56%;
  right: 31%;
  top: 104px;
  border-top: 1px solid var(--art-accent-ink);
}

.media-route::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  width: 7px;
  height: 7px;
  border: solid var(--art-accent-ink);
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

.media-servers {
  position: absolute;
  right: 5%;
  top: 42px;
  display: grid;
  width: 27%;
  min-width: 94px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.media-servers b,
.media-servers > i {
  min-width: 0;
  padding: 7px 6px;
  border-bottom: 1px solid var(--art-muted);
  overflow: hidden;
  font: 400 12px/1.1 var(--pixel);
  white-space: nowrap;
}

.media-servers b {
  border-bottom-color: var(--art-line);
  background: var(--art-line);
  color: var(--art-bg);
  text-align: center;
}

.media-servers > i:last-child {
  border-bottom: 0;
}

.no-cover {
  position: absolute;
  left: 6%;
  top: 45px;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 32%;
  min-width: 104px;
  height: 126px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.no-cover i {
  position: relative;
  display: block;
  margin: 11px 18px 7px;
  border: 1px dashed var(--art-muted);
  background:
    linear-gradient(45deg, transparent 47%, var(--art-muted) 48% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, var(--art-muted) 48% 52%, transparent 53%);
}

.no-cover i::after {
  content: '?';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font: 400 24px/1 var(--pixel);
  color: var(--ink-2);
}

.no-cover b {
  padding: 7px 4px;
  border-top: 1px solid var(--art-line);
  text-align: center;
}

.show-record {
  position: absolute;
  right: 6%;
  top: 45px;
  display: grid;
  grid-template-columns: 66px 1fr;
  width: 50%;
  height: 102px;
  padding: 8px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--art-accent);
}

.show-record b,
.show-record em {
  align-self: center;
  padding-right: 5px;
}

.show-record i {
  align-self: center;
  height: 8px;
  border: 1px solid var(--art-muted);
  background: repeating-linear-gradient(90deg, var(--art-line) 0 7px, transparent 7px 10px);
}

.show-record i:nth-of-type(2) {
  width: 78%;
}

.show-record i:nth-of-type(3) {
  width: 58%;
}

/* Build: the actual shipping stack and each part's purpose. */
.section-art--build {
  min-height: 260px;
}

.build-stack {
  position: absolute;
  inset: 45px 16px 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.build-stack > span {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.build-stack > span:nth-child(even) {
  box-shadow: 3px 3px 0 var(--art-accent);
}

.build-stack b {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--art-line);
  color: var(--ink);
  font: 400 clamp(25px, 3vw, 34px)/1 var(--serif);
  text-align: left;
}

.build-stack small {
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font: 400 14px/1.35 var(--sans);
  text-align: left;
}

/* Existing maintainer artwork remains compact and unchanged in purpose. */
.maker .section-art--maker {
  flex: 0 0 128px;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  min-height: 0;
  margin: 0;
  padding: 8px;
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--shadow);
}

.maker .section-art--maker img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
}

/* Retained for pages that still include the approved signup illustration. */
.section-art--signup {
  height: 150px;
  margin-top: 24px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.art-signup__envelope {
  position: absolute;
  left: 9%;
  top: 41px;
  display: grid;
  place-items: center;
  width: 104px;
  height: 68px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.art-signup__envelope::before,
.art-signup__envelope::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 60%;
  border-top: 1px solid var(--art-line);
}

.art-signup__envelope::before {
  left: -5px;
  transform: rotate(31deg);
}

.art-signup__envelope::after {
  right: -5px;
  transform: rotate(-31deg);
}

.art-signup__envelope b {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--art-accent);
  background: var(--art-bg);
  color: var(--art-accent-ink);
}

.art-signup__path {
  position: absolute;
  left: calc(9% + 104px);
  right: 44%;
  top: 75px;
  border-top: 1px dashed var(--art-accent-ink);
}

.art-signup__path::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  width: 7px;
  height: 7px;
  border: solid var(--art-accent-ink);
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

.art-signup__list {
  position: absolute;
  right: 8%;
  top: 24px;
  display: grid;
  gap: 8px;
  width: 190px;
  height: 102px;
  padding: 32px 14px 10px;
  border: 1px solid var(--art-line);
  background: var(--art-panel);
  box-shadow: 3px 3px 0 var(--art-accent);
}

.art-signup__list b {
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--art-line);
  background: var(--art-line);
  color: var(--art-bg);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
}

.art-signup__list i {
  width: 74%;
  border-top: 2px solid var(--art-line);
}

.art-signup__list i:nth-of-type(2) {
  width: 90%;
}

.art-signup__list i:nth-of-type(3) {
  width: 62%;
  border-color: var(--art-muted);
}

@container (max-width: 370px) {
  .edition-workspace,
  .calendar-workspace {
    padding-inline: 9px;
  }

  .edition-body {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 7px;
  }

  .edition-list__head,
  .edition-row {
    grid-template-columns: 31px minmax(0, 1fr) 48px;
  }

  .edition-list__head b,
  .edition-list__head em,
  .edition-list__head small,
  .edition-row b,
  .edition-row em,
  .edition-row small {
    padding-inline: 4px;
  }

  .edition-target {
    padding-inline: 4px;
  }

  .calendar-workspace {
    grid-template-columns: 1fr;
  }

  .calendar-grid i {
    min-height: 18px;
    aspect-ratio: auto;
  }

  .episode-record {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .episode-record__art {
    min-height: 80px;
  }

  .queue-story {
    grid-column: 1;
  }

  .media-downloaders {
    left: 4%;
    min-width: 88px;
  }

  .media-file {
    left: 38%;
    width: 52px;
  }

  .media-route {
    left: 57%;
    right: 36%;
  }

  .media-servers {
    right: 4%;
    min-width: 92px;
  }

  .no-cover {
    left: 4%;
    min-width: 96px;
  }

  .show-record {
    right: 4%;
    width: 54%;
  }

  .show-record {
    grid-template-columns: 60px 1fr;
  }
}

@container (max-width: 300px) {
  .feature-scene--works,
  .feature-scene--details {
    height: 214px;
  }

  .edition-body {
    grid-template-columns: 1fr;
  }

  .edition-target {
    grid-template-columns: auto 1fr 1fr;
    justify-items: start;
    min-height: 64px;
    padding: 34px 8px 8px;
    text-align: left;
  }

  .edition-target i {
    width: 40px;
    height: 27px;
  }

  .queue-story {
    grid-template-columns: 1fr;
  }

  .queue-step {
    min-height: 48px;
    padding: 7px 9px 7px 28px;
  }

  .queue-step + .queue-step {
    border-top: 1px solid var(--art-line);
    border-left: 0;
  }

  .queue-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -5px;
    left: 12px;
    transform: rotate(135deg);
  }

  .media-downloaders {
    left: 3%;
    width: 30%;
    min-width: 80px;
  }

  .media-file {
    left: 37%;
    width: 48px;
  }

  .media-servers {
    right: 3%;
    width: 32%;
    min-width: 88px;
  }

  .media-servers b,
  .media-servers > i {
    padding-inline: 4px;
  }

  .no-cover {
    left: 3%;
    width: 34%;
    min-width: 92px;
  }

  .no-cover i {
    margin-inline: 12px;
  }

  .show-record {
    right: 3%;
    width: 56%;
  }

  .show-record {
    grid-template-columns: 57px 1fr;
    padding-inline: 6px;
  }
}

@media (max-width: 700px) {
  .section-art--build {
    min-height: 470px;
  }

  .build-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

}

@media (max-width: 520px) {
  .section-art {
    margin-top: 24px;
  }

  .idea .section-art {
    margin-top: 0;
  }

  .maker .section-art--maker {
    flex-basis: 112px;
    width: 112px;
    height: 112px;
  }

  .maker .section-art--maker img {
    width: 94px;
    height: 94px;
  }

  .section-art--signup {
    height: 176px;
  }

  .art-signup__envelope {
    left: 5%;
    top: 54px;
    width: 86px;
    height: 59px;
  }

  .art-signup__path {
    left: calc(5% + 86px);
    right: 57%;
    top: 84px;
  }

  .art-signup__list {
    right: 4%;
    top: 35px;
    width: 52%;
  }
}

@container (max-width: 300px) {
  .art-signup__envelope {
    left: 8px;
    top: 57px;
    width: 64px;
    height: 52px;
  }

  .art-signup__path {
    left: 72px;
    right: 120px;
    top: 82px;
  }

  .art-signup__list {
    right: 8px;
    top: 36px;
    width: 112px;
  }
}

@media (forced-colors: active) {
  .section-art,
  .section-art * {
    forced-color-adjust: auto;
  }
}