/* index.css — styles for the slvtrs home page (featured / archive / about) */

body {
  margin: 3em 4em;
  background: #f5ede5;
  color: #111;
  font-family: monospace;
  line-height: 1.3em;
  overflow-x: hidden;
}
a {
  color: #111;
}
/*style body differently if system dark mode is detected*/
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
  a {
    color: #eee;
  }
}
@keyframes tag-tilt {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: 4deg;
  }
  100% {
    rotate: 0deg;
  }
}
#tag-wrapper div {
  display: inline-block;
  transition:
    scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.4s ease;
}
#tag-wrapper div:has(.selected) {
  color: orange;
}
#tag-wrapper div:has(.selected) {
  scale: 1.2;
  animation: tag-tilt 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#tag-wrapper div span {
  font-size: 0.8em;
}
#clear-query-button {
  text-decoration: underline;
  cursor: pointer;
  color: orange;
  opacity: 1 !important;
}
#asterisk-note,
#filter-description,
#clear-query-button {
  opacity: 0.5;
  margin: 0.4rem 0 1.6rem;
  /*margin: 8px 0 2rem;*/
  /*font-style: italic;*/
}/*links with target="_blank"*/
a[target="_blank"],
a.color {
  color: #de27de;
  /*color: magenta;*/
  text-decoration: none;
  position: relative;
}
a[target="_blank"]::after,
a.color::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
a[target="_blank"]:hover::after,
a.color:hover::after {
  width: 100%;
}
p {
}
li,
.li {
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}
#container > ul > li {
  margin-bottom: 1rem;
}
/*li with data-category of todo*/
li[data-categories*="todo"] > a {
  opacity: 0.5;
}
li[data-categories*="todo"]::before {
  content: "*";
  margin-right: -6px;
  opacity: 0.5;
}

li > i {
  opacity: 0.3;
}
#container > ul > li > i {
  opacity: 0.3;
  margin-left: 1rem;
  margin-left: 0.6rem;
  font-size: 0.8em;
}
/*ul that is sibling of #about*/
#about + ul li > i {
  margin-left: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
#container > ul {
  margin-block-start: 0;
  padding-inline-start: 12px;
}
ul {
}
#container > ul > li:not(.reveal) {
  display: none;
}
ul ul {
  display: none;
}
.reveal {
  display: block;
}
.hidden {
  display: none !important;
}
li.reveal {
  display: list-item;
}
ul.reveal ul {
  display: block;
}
div.image-wrapper {
  /*make content align to the top*/
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.full-bleed {
  width: 100% !important;
  height: auto !important;
}
.half-bleed {
  width: 50% !important;
  height: auto !important;
}
iframe {
  max-width: 100%;
  border: solid 1px #ccc;
}
video {
  max-width: 100%;
}
.hide-unless-revealed > *:not(.reveal) {
  display: none !important;
}
.sal-wrapper {
  position: relative;
  display: inline-block;
}
@keyframes label-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
.sal-label {
  position: absolute;
  font-size: 1.2em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  line-height: 1.4;
  padding: 0 0.5em;
  animation: label-float 2.8s ease-in-out infinite;
}
.sal-label-2 {
  animation-delay: -1s;
}
.sal-label-3 {
  animation-delay: -2s;
}
.sal-label-1 {
  top: 1.5rem;
  left: 0.5rem;
}
.sal-label-2 {
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
}
.sal-label-3 {
  bottom: 1.5rem;
  /*right: 0.5rem;*/
  left: 0.5rem;
  /*text-align: right;*/
  /*font-style: italic;*/
}
img.phone,
.border-cropper {
  border: solid 1px #777;
  border-radius: 1rem;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  img.phone,
  .border-cropper {
    border-color: #777;
  }
}
.border-cropper {
  overflow: hidden;
  display: inline-block;
  border-radius: 1rem;
  line-height: 0;
  width: fit-content;
}
img.phone.border-cropped {
  transform: scale(1.02);
  border: none;
  display: block;
  width: auto;
}
.image-wrapper img,
.image-wrapper video {
  width: 400px;
  max-width: 100%;
}
/* 1. Target children within a wrapper that has ONLY 1 child */
.image-wrapper :only-child img,
.image-wrapper img:only-child {
  /*width: 300px;*/
}
/* 2. Target children within a wrapper that has EXACTLY 2 children */
/* Select the first child if it's the 2nd from last, then its sibling */
.image-wrapper :first-child:nth-last-child(2) img,
.image-wrapper :first-child:nth-last-child(2) ~ * img,
.image-wrapper img:first-child:nth-last-child(2),
.image-wrapper img:first-child:nth-last-child(2) ~ * {
  /*width: 250px;*/
}

/* 3. Target children within a wrapper that has 3 OR MORE children */
/* Select the first child if it's the 3rd from last or more, then its siblings */
.image-wrapper :first-child:nth-last-child(n + 3) img,
.image-wrapper :first-child:nth-last-child(n + 3) ~ * img,
.image-wrapper img:first-child:nth-last-child(n + 3),
.image-wrapper img:first-child:nth-last-child(n + 3) ~ * {
  /*width: 200px;*/
}
/*@media (max-width: 600px) {
}*/
.image-wrapper.carousel {
  overflow: visible;
}
.image-wrapper.carousel .carousel-inner {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 0 50px 8px 150px;
  margin: 0 -50px 0 -150px;
  /*hide scrollbar*/
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-size: 0;
}
.image-wrapper.carousel a > img,
.image-wrapper.carousel video,
.image-wrapper.carousel iframe,
.image-wrapper.carousel .border-cropper {
  /*max-width is 80% or 300px, whichever is smaller;*/
  max-width: min(80%, 300px);
  margin-right: 0.85rem;
  vertical-align: top;
}
.image-wrapper.carousel .border-cropper img {
  width: 100%;
}
.image-wrapper.carousel .fixed-height {
  width: auto;
  max-width: 999px;
  height: 300px;
}

/* ---- additions: masthead, featured menu, hero, browse row, archive mode, footer ---- */
h1#title {
  font-weight: normal;
  font-size: 1.5em;
  margin: 0 0 0.4rem;
  white-space: nowrap;
  position: relative;
}
#home-link {
  color: inherit;
  text-decoration: none;
}
#home-link:hover {
  text-decoration: underline;
}
#tagline {
  margin: 0;
  opacity: 0.7;
}
#featured {
  margin-top: 2.6rem;
}
#featured-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 380px;
  max-width: 640px;
}
#menu li {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 0.1rem 1.2rem;
  align-items: baseline;
  margin: 0 0 1.2rem;
}
#menu li {
  cursor: pointer;
}
/* expanded description under a featured row, like an archive entry */
#menu li ul.sub {
  display: block; /* beats the archive's generic "ul ul { display: none }" */
  cursor: auto;
  grid-column: 1 / -1;
  margin: 0.3em 0 0.2em;
  padding-left: 1.3em;
  list-style: circle;
  font-size: 0.9em;
  line-height: 1.4em;
}
#menu li ul.sub li {
  display: list-item;
  padding: 0;
  margin: 0.25em 0;
}
#menu a.name {
  color: inherit;
  text-decoration: underline;
  font-size: 1.05em;
}
#menu a.name::after {
  display: none;
}
#menu .hook {
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.5;
  line-height: 1.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the purple pill: featured rows, the panel header, and the archive's Open links */
#menu a.cta,
#hero-open,
#container div.li a[target="_blank"] {
  color: #de27de;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 12px;
  font-size: 0.85em;
  line-height: 1.6em;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
#menu a.cta::after,
#hero-open::after,
#container div.li a[target="_blank"]::after {
  display: none;
}
#menu a.cta:hover,
#menu a.cta:focus,
#hero-open:hover,
#hero-open:focus,
#container div.li a[target="_blank"]:hover,
#container div.li a[target="_blank"]:focus {
  background: #de27de;
  color: #fff;
}
#container div.li a[target="_blank"] {
  font-style: normal;
  margin-left: 0.4em;
}
#hero-open {
  margin: 0 0.6em;
}
#hero-open.hidden {
  display: none;
}
#hero {
  flex: 0 0 400px;
}
#hero-bar {
  display: flex;
  align-items: center;
  margin: 0 0 0.4rem;
}
#hero-title {
  flex: 1;
  text-align: center;
  font-size: 0.9em;
}
#hero-bar .chev {
  color: #de27de;
  text-decoration: none;
  font-size: 1.6em;
  line-height: 1;
  padding: 0 0.4em;
}
#hero-bar .chev::after {
  display: none;
}
#hero-bar .chev:hover {
  opacity: 0.6;
}
/* the row that appears when the scrubber is beyond the featured items */
#menu li.extra-row {
  display: none;
}
#menu li.extra-row.selected {
  display: grid;
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 0;
}
#menu li.extra-row.selected::before {
  top: 0.95em;
}
@media (prefers-color-scheme: dark) {
  #menu li.extra-row.selected {
    border-top-color: rgba(255, 255, 255, 0.2);
  }
}
/* preview panel inside the archive (desktop): sticky column with a close button */
#hero-close {
  display: none;
}
#archive-main {
  flex: 1 1 auto;
  min-width: 0;
}
body.browsing #hero {
  display: none;
}
@media (min-width: 901px) {
  body.browsing.preview-open #hero {
    display: block;
    position: sticky;
    top: 1rem;
    flex: 0 0 400px;
  }
  #hero-close {
    display: inline;
  }
  /* closed on the featured page: hidden until a row is clicked */
  body:not(.browsing).hero-closed #hero {
    display: none;
  }
}
/* archive rows get the same hover / chevron while the panel is open */
@media (min-width: 901px) {
  body.browsing #container > ul > li {
    padding: 0.2em 0.5em;
    margin-left: -0.5em;
    border-radius: 6px;
    transition: background 0.15s ease;
    cursor: pointer;
  }
  body.browsing #container > ul > li > ul {
    cursor: auto;
  }
  body.browsing #container > ul > li:hover,
  body.browsing #container > ul > li.preview-selected {
    background: rgba(222, 39, 222, 0.12);
  }
  body.browsing #container > ul:hover > li.preview-selected:not(:hover) {
    background: none;
  }
  body.browsing #container > ul > li.preview-selected::marker {
    content: "\276F  ";
    color: #de27de;
    font-weight: bold;
  }
}
#hero-info {
  width: 400px;
  margin: 0 0 0.6rem;
}
#hero-info:empty,
#hero-tags:empty {
  display: none;
}
#hero-count {
  font-size: 0.75em;
  opacity: 0.5;
  margin-left: 0.7em;
}
/* desktop only: list rows drive the preview */
@media (min-width: 901px) {
  #menu li {
    padding: 0.35em 0.7em;
    margin: 0 0 0.5em -0.7em;
    border-radius: 6px;
    transition: background 0.15s ease;
  }
  #menu li.previewable {
    cursor: pointer;
  }
  #menu li.previewable:hover {
    background: rgba(222, 39, 222, 0.12);
  }
  /* the selected row keeps the hover tint until another row is hovered */
  #menu li.selected {
    background: rgba(222, 39, 222, 0.12);
  }
  #menu:hover li.selected:not(:hover) {
    background: none;
  }
  #menu li.selected::before {
    content: "\276F";
    position: absolute;
    left: -1.1em;
    top: 0.4em;
    color: #de27de;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
  }
}
@media (prefers-color-scheme: dark) {
  #menu li.previewable:hover,
  #menu li.selected,
  body.browsing #container > ul > li:hover,
  body.browsing #container > ul > li.preview-selected {
    background: rgba(222, 39, 222, 0.22);
  }
}
#hero iframe {
  width: 400px;
  height: 540px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 900px) {
  #hero {
    display: none;
  }
}
@media (max-width: 600px) {
  body {
    margin: 2em 1.5em;
  }
  #menu li {
    grid-template-columns: 1fr max-content;
  }
  #menu a.name {
    grid-row: 1;
    grid-column: 1;
  }
  #menu a.cta {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }
  #menu .hook {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

/* browse row: tag filters + everything link */
#browse {
  margin-top: 2.6rem;
  line-height: 1.6em;
}
#browse .lead {
  display: inline-block;
  margin: 0.2em 0.5em 0.2em 0;
}
/* tags are buttons; "featured", "more" and "everything" share the style */
#tag-wrapper span,
#browse .tag,
#hero-tags .tag {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.6em;
  padding: 0.25em 0.9em;
  margin: 0.2em 0.35em 0.2em 0;
  border: 1px solid orange;
  border-radius: 999px;
  color: orange;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
#tag-wrapper span:hover,
#browse .tag:hover,
#hero-tags .tag:hover {
  background: rgba(255, 165, 0, 0.15);
}
/* selected: inverted, filled orange pill */
#tag-wrapper span.selected,
#show-everything.selected {
  color: #f5ede5;
  background: orange;
  border-color: orange;
  text-decoration: none;
  transform: none;
}
#tag-wrapper div:has(.selected) {
  color: inherit;
  scale: 1.05;
}
@media (prefers-color-scheme: dark) {
  #tag-wrapper span.selected,
  #show-everything.selected {
    color: #111;
  }
}
/* "featured" is a plain text link, not a pill */
#browse #back-to-featured {
  border: none;
  background: none;
  padding: 0.25em 0;
  margin-right: 1.2em;
  color: inherit;
}
#browse #back-to-featured:hover {
  text-decoration: underline;
  background: none;
}
/* start with a few tags; "more" or entering the archive reveals the rest */
body:not(.browsing) #browse #back-to-featured {
  display: none;
}
body:not(.browsing):not(.tags-expanded) #tag-wrapper div:has(> span.extra),
body:not(.browsing):not(.tags-expanded) #show-everything {
  display: none;
}
body.browsing #show-more-tags,
body.tags-expanded #show-more-tags {
  display: none;
}
#browse .lead {
  opacity: 0.7;
}
#tag-wrapper {
  display: inline;
  margin: 0;
}
#tag-wrapper div:has(> span.hidden) {
  display: none;
}

/* two modes: featured (default) and browsing (archive) */
#archive {
  display: none;
  margin-top: 1.2rem;
}
body.browsing #featured {
  display: none;
}
body.browsing #archive {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
body.browsing #browse .lead {
  display: none;
}
body.browsing #back-to-featured {
  display: inline-block;
}
body.browsing #connect {
  border-top: none;
}

/* about: its own view, not an archive entry */
#about {
  display: none;
  margin-top: 1.2rem;
}
body.about #about {
  display: block;
}
body.about #featured,
body.about #browse,
body.about #archive {
  display: none !important;
}
#about-back {
  text-decoration: none;
  font-size: 0.9em;
}
#about-back:hover {
  text-decoration: underline;
}
#about-body {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 1rem;
}
#about-body img {
  width: 200px;
  border-radius: 1rem;
  display: block;
}
#about-body .about-text {
  flex: 1 1 320px;
  max-width: 640px;
}
#about-body .about-text p {
  margin: 0 0 1.2em;
  line-height: 1.5em;
}
#about-body .about-text i {
  opacity: 0.4;
}

/* footer pulse, triggered by "facsimile online" on the about page:
   the social links swell once; the about link sits it out */
@keyframes link-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
}
#connect.pulse a[target="_blank"],
#connect.pulse #copy-email {
  display: inline-block;
  animation: link-pulse 0.6s ease-in-out 1;
}

/* footer */
#connect {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.9em;
  line-height: 2em;
}
#connect a {
  text-decoration: none;
}
#connect a[href="#about"] {
  text-decoration: underline;
}
#connect .sep {
  opacity: 0.35;
  margin: 0 0.2em 0 0.5em;
}
#copy-email {
  color: inherit;
  opacity: 0.45;
  margin-left: 0.4em;
  vertical-align: middle;
}
#copy-email svg {
  display: inline-block;
  vertical-align: -0.15em;
}
#copy-email:hover {
  opacity: 1;
}
#copy-email-banner {
  display: inline-block;
  width: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: 0.8em;
  color: orange;
  opacity: 0;
  margin-left: 0.3em;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#copy-email-banner.visible {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  #connect {
    border-top-color: rgba(255, 255, 255, 0.15);
  }
  #hero iframe {
    border-color: #444;
  }
}

/* panel tags: plain orange text, not pills (kept last so it wins) */
#hero #hero-tags .tag {
  font-size: 0.8em;
  padding: 0;
  margin: 0 0.9em 0 0;
  border: none;
  background: none;
  line-height: 1.6em;
}
#hero #hero-tags .tag:hover {
  background: none;
  text-decoration: underline;
}